develop/src/modules/defaults.js at 675fc43f3c9e8dbc2b5f16f890d2329b267817d3 · knightedcodemonkey/develop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
export const defaultJsx = [
  'type CounterButtonProps = {',
  '  label: string',
  '  onClick: (event: MouseEvent) => void',
  '}',
  '',
  'const CounterButton = ({ label, onClick }: CounterButtonProps) => (',
  '  <button id="counter-button" type="button" onClick={onClick}>',
  '    {label}',
  '  </button>',
  ')',
  '',
  'const App = () => {',
  '  let count = 0',
  '  const handleClick = (event: MouseEvent) => {',
  '    count += 1',
  '    const button = event.currentTarget as HTMLButtonElement',
  '    button.textContent = `Clicks: ${count}`',
  "    button.dataset.active = count % 2 === 0 ? 'false' : 'true'",
  "    button.classList.toggle('is-even', count % 2 === 0)",
  '  }',
  '',
  "  return <CounterButton label='Clicks: 0' onClick={handleClick} />",
  '}',
  '',
].join('\n')

export const defaultReactJsx = [
  'type CounterButtonProps = {',
  '  label: string',
  '  active: boolean',
  '  onClick: (event: MouseEvent) => void',
  '}',
  '',
  'const CounterButton = ({ label, active, onClick }: CounterButtonProps) => (',
  '  <button',
  '    id="counter-button"',
  '    type="button"',
  '    data-active={active ? "true" : "false"}',
  '    className={active ? "is-even" : ""}',
  '    onClick={onClick}',
  '  >',
  '    {label}',
  '  </button>',
  ')',
  '',
  'const App = () => {',
  '  const { useState } = React',
  '  const [count, setCount] = useState(0)',
  '  const handleClick = (_event: MouseEvent) => {',
  '    setCount(current => current + 1)',
  '  }',
  '',
  '  return (',
  '    <CounterButton',
  '      label={`React clicks: ${count}`}',
  '      active={count % 2 === 0}',
  '      onClick={handleClick}',
  '    />',
  '  )',
  '}',
  '',
].join('\n')

export const defaultCss = `#counter-button {
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid #3558b8;
  border-radius: 0.5rem;
  background: #e9efff;
  color: #1a2a52;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease;
}

#counter-button:hover {
  background: #dce6ff;
}

#counter-button[data-active='true'] {
  background: #3558b8;
  color: #fff;
}

#counter-button.is-even {
  border-style: dashed;
}

#counter-button:focus-visible {
  outline: 2px solid #6a84d8;
  outline-offset: 2px;
}
`