create-bestax 4.2.13 → 4.2.15
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/README.md +11 -7
- package/dist/cli.d.ts +11 -1
- package/dist/cli.d.ts.map +1 -1
- package/dist/cli.js +17 -2
- package/dist/constants.d.ts +9 -0
- package/dist/constants.d.ts.map +1 -1
- package/dist/constants.js +102 -31
- package/dist/index.js +2 -2
- 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 +3 -3
- package/templates/skills/bestax-custom-component/examples/stat-card.tsx +2 -2
- package/templates/skills/bestax-form/SKILL.md +17 -7
- package/templates/skills/bestax-form/references/api.md +10 -10
- package/templates/skills/bestax-form/references/patterns.md +9 -1
- package/templates/skills/bestax-icons/SKILL.md +8 -6
- package/templates/skills/bestax-icons/examples/icon-usage.tsx +3 -3
- package/templates/skills/bestax-icons/references/icon-libraries.md +12 -7
- package/templates/skills/bestax-layout-scaffold/examples/app-shell.tsx +1 -1
- package/templates/skills/bestax-layout-scaffold/examples/card-grid.tsx +0 -1
- package/templates/skills/bestax-layout-scaffold/examples/centered.tsx +0 -1
- package/templates/skills/bestax-layout-scaffold/examples/content-page.tsx +0 -1
- package/templates/skills/bestax-layout-scaffold/examples/landing.tsx +1 -1
- package/templates/skills/bestax-migrate/references/bulma-classes/component-map.md +13 -4
- package/templates/skills/bestax-migrate/references/bulma-classes/unmappables.md +10 -1
- package/templates/skills/bestax-optimize/SKILL.md +10 -6
- package/templates/skills/bestax-optimize/references/modular-build.md +13 -8
- package/templates/skills/bestax-theming/examples/dark-mode.tsx +1 -1
- package/templates/skills/bestax-theming/examples/theme-config.tsx +2 -2
- package/templates/skills/bestax-theming/references/css-variables.md +3 -1
- 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(null);
|
|
25
|
+
const countRef = useRef(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.jsx 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.jsx';
|
|
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.jsx';
|
|
8
9
|
|
|
9
10
|
createRoot(document.getElementById('root')).render(
|
|
10
11
|
<StrictMode>
|
|
@@ -6,15 +6,15 @@ This template provides a minimal setup to get React working in Vite with TypeScr
|
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
pnpm install
|
|
9
|
-
pnpm dev
|
|
9
|
+
pnpm run dev
|
|
10
10
|
```
|
|
11
11
|
|
|
12
12
|
## Available Scripts
|
|
13
13
|
|
|
14
|
-
- `pnpm dev` - Start development server
|
|
15
|
-
- `pnpm build` - Build for production
|
|
16
|
-
- `pnpm preview` - Preview production build
|
|
17
|
-
- `pnpm lint` - Run ESLint
|
|
14
|
+
- `pnpm run dev` - Start development server
|
|
15
|
+
- `pnpm run build` - Build for production
|
|
16
|
+
- `pnpm run preview` - Preview production build
|
|
17
|
+
- `pnpm run lint` - Run ESLint
|
|
18
18
|
|
|
19
19
|
## Features
|
|
20
20
|
|
|
@@ -23,7 +23,6 @@ pnpm dev
|
|
|
23
23
|
- 📦 bestax-bulma component library
|
|
24
24
|
- 📘 TypeScript for type safety
|
|
25
25
|
- 🔧 ESLint pre-configured
|
|
26
|
-
- 🎯 Font Awesome icons included
|
|
27
26
|
|
|
28
27
|
## Learn More
|
|
29
28
|
|
|
@@ -1 +1,14 @@
|
|
|
1
|
-
/* App-specific styles - keep minimal, let Bulma handle the styling */
|
|
1
|
+
/* App-specific styles - keep minimal, let Bulma handle the styling */
|
|
2
|
+
|
|
3
|
+
/* A link inside running text needs more than its color to stand out
|
|
4
|
+
(WCAG 1.4.1), and no helper prop sets an underline. */
|
|
5
|
+
.text-link {
|
|
6
|
+
text-decoration: underline;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/* Bulma spaces a notification from whatever follows it in the same parent,
|
|
10
|
+
and each notification here is alone in its status region, so the space
|
|
11
|
+
between two showing at once goes between their regions instead. */
|
|
12
|
+
.status-region:not(:empty) + .status-region:not(:empty) {
|
|
13
|
+
margin-top: var(--bulma-block-spacing);
|
|
14
|
+
}
|
|
@@ -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
|
+
}
|