create-bestax 4.2.14 → 4.2.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/constants.d.ts +9 -0
- package/dist/constants.d.ts.map +1 -1
- package/dist/constants.js +102 -31
- package/dist/project-creator.d.ts +19 -0
- package/dist/project-creator.d.ts.map +1 -1
- package/dist/project-creator.js +91 -38
- package/package.json +2 -2
- package/templates/skills/bestax-form/SKILL.md +19 -8
- package/templates/skills/bestax-form/references/api.md +10 -10
- package/templates/skills/bestax-form/references/patterns.md +22 -3
- package/templates/skills/bestax-icons/references/icon-libraries.md +9 -4
- package/templates/skills/bestax-migrate/references/bulma-classes/component-map.md +8 -0
- package/templates/skills/bestax-migrate/references/bulma-classes/unmappables.md +5 -0
- package/templates/skills/bestax-optimize/references/modular-build.md +9 -7
- package/templates/vite/README.md +5 -6
- package/templates/vite/src/App.css +14 -1
- package/templates/vite/src/App.jsx +128 -100
- package/templates/vite/src/main.jsx +3 -2
- package/templates/vite-ts/README.md +5 -6
- package/templates/vite-ts/src/App.css +14 -1
- package/templates/vite-ts/src/App.tsx +128 -100
- package/templates/vite-ts/src/main.tsx +3 -2
- package/templates/vite-ts/tsconfig.app.json +25 -0
- package/templates/vite-ts/tsconfig.json +6 -25
- package/templates/vite-ts/tsconfig.node.json +2 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useState } from 'react';
|
|
1
|
+
import { useRef, useState } from 'react';
|
|
2
2
|
import {
|
|
3
3
|
Box,
|
|
4
4
|
Button,
|
|
@@ -18,127 +18,155 @@ import './App.css';
|
|
|
18
18
|
function App() {
|
|
19
19
|
const [showNotification, setShowNotification] = useState(false);
|
|
20
20
|
const [count, setCount] = useState(0);
|
|
21
|
+
// Where focus goes when the button holding it goes away (the notification's
|
|
22
|
+
// close button) or disables itself (Reset, at zero), so a keyboard user is
|
|
23
|
+
// not dropped at the top of the page.
|
|
24
|
+
const toggleRef = useRef<HTMLButtonElement>(null);
|
|
25
|
+
const countRef = useRef<HTMLButtonElement>(null);
|
|
21
26
|
|
|
22
27
|
return (
|
|
23
|
-
|
|
24
|
-
<
|
|
25
|
-
<
|
|
26
|
-
<Columns isCentered>
|
|
27
|
-
<Column isNarrow
|
|
28
|
+
<main>
|
|
29
|
+
<Section>
|
|
30
|
+
<Container breakpoint="desktop" isMax>
|
|
31
|
+
<Columns isCentered isMobile isMultiline>
|
|
32
|
+
<Column isNarrow>
|
|
28
33
|
<Image src="/bestax.svg" alt="Bestax" size="128x128" />
|
|
29
34
|
</Column>
|
|
30
|
-
<Column isNarrow
|
|
35
|
+
<Column isNarrow>
|
|
31
36
|
<Image src="/vite.svg" alt="Vite" size="128x128" />
|
|
32
37
|
</Column>
|
|
33
|
-
<Column isNarrow
|
|
38
|
+
<Column isNarrow>
|
|
34
39
|
<Image src="/react.svg" alt="React" size="128x128" />
|
|
35
40
|
</Column>
|
|
36
41
|
</Columns>
|
|
37
42
|
<Title size="1" textAlign="centered">
|
|
38
43
|
Bestax + Vite + React
|
|
39
44
|
</Title>
|
|
40
|
-
</Section>
|
|
41
45
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
<Box>
|
|
47
|
+
<Title as="h2">Get Started</Title>
|
|
48
|
+
<SubTitle as="p" size="5">
|
|
49
|
+
This template includes everything you need to build with
|
|
50
|
+
bestax-bulma
|
|
51
|
+
</SubTitle>
|
|
52
|
+
</Box>
|
|
49
53
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
54
|
+
<Columns>
|
|
55
|
+
<Column display="flex">
|
|
56
|
+
<Card flexGrow="1">
|
|
57
|
+
<Card.Header>
|
|
58
|
+
<Card.Header.Title as="h3">Quick Start</Card.Header.Title>
|
|
59
|
+
</Card.Header>
|
|
60
|
+
<Card.Content>
|
|
61
|
+
Edit src/App.tsx and save to test HMR updates.
|
|
62
|
+
</Card.Content>
|
|
63
|
+
</Card>
|
|
64
|
+
</Column>
|
|
61
65
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
66
|
+
<Column display="flex">
|
|
67
|
+
<Card flexGrow="1">
|
|
68
|
+
<Card.Header>
|
|
69
|
+
<Card.Header.Title as="h3">Documentation</Card.Header.Title>
|
|
70
|
+
</Card.Header>
|
|
71
|
+
<Card.Content>
|
|
72
|
+
Visit{' '}
|
|
73
|
+
<a
|
|
74
|
+
className="text-link"
|
|
75
|
+
href="https://bestax.io"
|
|
76
|
+
target="_blank"
|
|
77
|
+
rel="noopener noreferrer"
|
|
78
|
+
>
|
|
79
|
+
bestax.io
|
|
80
|
+
</a>{' '}
|
|
81
|
+
for component docs.
|
|
82
|
+
</Card.Content>
|
|
83
|
+
</Card>
|
|
84
|
+
</Column>
|
|
80
85
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
86
|
+
<Column display="flex">
|
|
87
|
+
<Card flexGrow="1">
|
|
88
|
+
<Card.Header>
|
|
89
|
+
<Card.Header.Title as="h3">Examples</Card.Header.Title>
|
|
90
|
+
</Card.Header>
|
|
91
|
+
<Card.Content>
|
|
92
|
+
Check the examples below to see components in action.
|
|
93
|
+
</Card.Content>
|
|
94
|
+
</Card>
|
|
95
|
+
</Column>
|
|
96
|
+
</Columns>
|
|
92
97
|
|
|
93
|
-
|
|
94
|
-
|
|
98
|
+
<Box>
|
|
99
|
+
<Title as="h2">Interactive Example</Title>
|
|
95
100
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
101
|
+
<Columns isVCentered>
|
|
102
|
+
<Column size="half">
|
|
103
|
+
<Buttons>
|
|
104
|
+
<Button
|
|
105
|
+
ref={toggleRef}
|
|
106
|
+
color="primary"
|
|
107
|
+
onClick={() => setShowNotification(!showNotification)}
|
|
108
|
+
>
|
|
109
|
+
Toggle Notification
|
|
110
|
+
</Button>
|
|
105
111
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
112
|
+
<Button
|
|
113
|
+
ref={countRef}
|
|
114
|
+
color="info"
|
|
115
|
+
onClick={() => setCount(count + 1)}
|
|
116
|
+
>
|
|
117
|
+
Count: {count}
|
|
118
|
+
</Button>
|
|
109
119
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
120
|
+
<Button
|
|
121
|
+
color="warning"
|
|
122
|
+
onClick={() => {
|
|
123
|
+
setCount(0);
|
|
124
|
+
countRef.current?.focus();
|
|
125
|
+
}}
|
|
126
|
+
disabled={count === 0}
|
|
127
|
+
>
|
|
128
|
+
Reset
|
|
129
|
+
</Button>
|
|
130
|
+
</Buttons>
|
|
131
|
+
</Column>
|
|
119
132
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
133
|
+
{/* A status region reads out all it holds whenever any of it
|
|
134
|
+
changes, so each notification has a region of its own: a
|
|
135
|
+
screen reader hears the one that appeared or changed, and
|
|
136
|
+
not the other with it. The regions stay mounted while their
|
|
137
|
+
content changes: one added along with its content may not
|
|
138
|
+
be announced. */}
|
|
139
|
+
<Column size="half">
|
|
140
|
+
<div role="status" className="status-region">
|
|
141
|
+
{showNotification && (
|
|
142
|
+
<Notification
|
|
143
|
+
color="success"
|
|
144
|
+
isLight
|
|
145
|
+
hasDelete
|
|
146
|
+
onDelete={() => {
|
|
147
|
+
setShowNotification(false);
|
|
148
|
+
toggleRef.current?.focus();
|
|
149
|
+
}}
|
|
150
|
+
>
|
|
151
|
+
<strong>Success!</strong> Your Vite + Bestax setup is
|
|
152
|
+
working perfectly!
|
|
153
|
+
</Notification>
|
|
154
|
+
)}
|
|
155
|
+
</div>
|
|
131
156
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
157
|
+
<div role="status" className="status-region">
|
|
158
|
+
{count > 10 && (
|
|
159
|
+
<Notification color="info" isLight>
|
|
160
|
+
You've clicked the button {count} times!
|
|
161
|
+
</Notification>
|
|
162
|
+
)}
|
|
163
|
+
</div>
|
|
164
|
+
</Column>
|
|
165
|
+
</Columns>
|
|
166
|
+
</Box>
|
|
167
|
+
</Container>
|
|
168
|
+
</Section>
|
|
169
|
+
</main>
|
|
142
170
|
);
|
|
143
171
|
}
|
|
144
172
|
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { StrictMode } from 'react';
|
|
2
2
|
import { createRoot } from 'react-dom/client';
|
|
3
|
-
import App from './App.tsx';
|
|
4
3
|
|
|
5
|
-
//
|
|
4
|
+
// Bestax's stylesheet loads before the app's own CSS, so a named class in
|
|
5
|
+
// src/App.css wins over a Bulma rule of the same weight.
|
|
6
6
|
import '@allxsmith/bestax-bulma/bestax.css';
|
|
7
7
|
import './index.css';
|
|
8
|
+
import App from './App.tsx';
|
|
8
9
|
|
|
9
10
|
createRoot(document.getElementById('root')!).render(
|
|
10
11
|
<StrictMode>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
6
|
+
"module": "ESNext",
|
|
7
|
+
"skipLibCheck": true,
|
|
8
|
+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
|
9
|
+
|
|
10
|
+
/* Bundler mode */
|
|
11
|
+
"moduleResolution": "bundler",
|
|
12
|
+
"allowImportingTsExtensions": true,
|
|
13
|
+
"resolveJsonModule": true,
|
|
14
|
+
"isolatedModules": true,
|
|
15
|
+
"noEmit": true,
|
|
16
|
+
"jsx": "react-jsx",
|
|
17
|
+
|
|
18
|
+
/* Linting */
|
|
19
|
+
"strict": true,
|
|
20
|
+
"noUnusedLocals": true,
|
|
21
|
+
"noUnusedParameters": true,
|
|
22
|
+
"noFallthroughCasesInSwitch": true
|
|
23
|
+
},
|
|
24
|
+
"include": ["src"]
|
|
25
|
+
}
|
|
@@ -1,26 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
-
"
|
|
3
|
-
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
|
|
9
|
-
|
|
10
|
-
/* Bundler mode */
|
|
11
|
-
"moduleResolution": "bundler",
|
|
12
|
-
"allowImportingTsExtensions": true,
|
|
13
|
-
"resolveJsonModule": true,
|
|
14
|
-
"isolatedModules": true,
|
|
15
|
-
"noEmit": true,
|
|
16
|
-
"jsx": "react-jsx",
|
|
17
|
-
|
|
18
|
-
/* Linting */
|
|
19
|
-
"strict": true,
|
|
20
|
-
"noUnusedLocals": true,
|
|
21
|
-
"noUnusedParameters": true,
|
|
22
|
-
"noFallthroughCasesInSwitch": true
|
|
23
|
-
},
|
|
24
|
-
"include": ["src"],
|
|
25
|
-
"references": [{ "path": "./tsconfig.node.json" }]
|
|
26
|
-
}
|
|
2
|
+
"files": [],
|
|
3
|
+
"references": [
|
|
4
|
+
{ "path": "./tsconfig.app.json" },
|
|
5
|
+
{ "path": "./tsconfig.node.json" }
|
|
6
|
+
]
|
|
7
|
+
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"compilerOptions": {
|
|
3
|
-
"composite": true,
|
|
4
3
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
|
5
4
|
"skipLibCheck": true,
|
|
6
5
|
"module": "ESNext",
|
|
7
6
|
"moduleResolution": "bundler",
|
|
8
7
|
"allowSyntheticDefaultImports": true,
|
|
8
|
+
"noEmit": true,
|
|
9
9
|
"strict": true,
|
|
10
10
|
"types": ["vite/client"]
|
|
11
11
|
},
|
|
12
12
|
"include": ["vite.config.ts"]
|
|
13
|
-
}
|
|
13
|
+
}
|