create-bestax 1.1.0 → 1.1.1
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 +78 -9
- package/package.json +2 -2
- package/templates/vite/README.md +31 -0
- package/templates/vite/index.html +13 -0
- package/templates/vite/package.json +29 -0
- package/templates/vite/public/vite.svg +1 -0
- package/templates/vite/src/App.css +1 -0
- package/templates/vite/src/App.jsx +146 -0
- package/templates/vite/src/index.css +4 -0
- package/templates/vite/src/main.jsx +13 -0
- package/templates/vite/vite.config.js +7 -0
- package/templates/vite-ts/README.md +32 -0
- package/templates/vite-ts/index.html +13 -0
- package/templates/vite-ts/package.json +30 -0
- package/templates/vite-ts/public/vite.svg +1 -0
- package/templates/vite-ts/src/App.css +1 -0
- package/templates/vite-ts/src/App.tsx +146 -0
- package/templates/vite-ts/src/index.css +4 -0
- package/templates/vite-ts/src/main.tsx +13 -0
- package/templates/vite-ts/src/vite-env.d.ts +1 -0
- package/templates/vite-ts/tsconfig.json +25 -0
- package/templates/vite-ts/tsconfig.node.json +13 -0
- package/templates/vite-ts/vite.config.ts +7 -0
package/README.md
CHANGED
|
@@ -4,8 +4,74 @@ CLI tool for scaffolding new bestax-bulma projects.
|
|
|
4
4
|
|
|
5
5
|
## Usage
|
|
6
6
|
|
|
7
|
+
### Quick Start
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
# Using npm
|
|
11
|
+
npm create bestax@latest my-app
|
|
12
|
+
|
|
13
|
+
# Using npx
|
|
14
|
+
npx create-bestax@latest my-app
|
|
15
|
+
|
|
16
|
+
# Alternative naming
|
|
17
|
+
npm create bestax-bulma@latest my-app
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### Interactive Mode
|
|
21
|
+
|
|
22
|
+
Running without arguments will prompt you for all options:
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm create bestax@latest
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
You'll be asked to:
|
|
29
|
+
1. Enter a project name
|
|
30
|
+
2. Select a framework (Vite or Vite + TypeScript)
|
|
31
|
+
3. Choose a Bulma CSS flavor (Complete or Minimal)
|
|
32
|
+
4. Select an icon library (Font Awesome, Material Icons, etc.)
|
|
33
|
+
|
|
34
|
+
### Command Line Options
|
|
35
|
+
|
|
7
36
|
```bash
|
|
8
|
-
|
|
37
|
+
npm create bestax@latest [project-directory] [options]
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
**Arguments:**
|
|
41
|
+
- `[project-directory]` - Optional project directory name
|
|
42
|
+
|
|
43
|
+
**Options:**
|
|
44
|
+
- `-t, --template <template>` - Template to use: `vite` or `vite-ts`
|
|
45
|
+
**Default:** `vite`
|
|
46
|
+
- `-b, --bulma <flavor>` - Bulma CSS flavor:
|
|
47
|
+
- `complete` - Full Bulma CSS with all components and helpers
|
|
48
|
+
- `prefixed` - Prefixed version for compatibility
|
|
49
|
+
- `no-helpers` - Without helper classes
|
|
50
|
+
- `no-helpers-prefixed` - Prefixed without helpers
|
|
51
|
+
- `no-dark-mode` - Without dark mode support
|
|
52
|
+
**Default:** `complete`
|
|
53
|
+
- `-i, --icon <library>` - Icon library:
|
|
54
|
+
- `none` - No icon library
|
|
55
|
+
- `fontawesome` - Font Awesome
|
|
56
|
+
- `mdi` - Material Design Icons
|
|
57
|
+
- `ionicons` - Ionicons
|
|
58
|
+
- `material-icons` - Material Icons
|
|
59
|
+
- `material-symbols` - Material Symbols
|
|
60
|
+
**Default:** `none`
|
|
61
|
+
- `-y, --yes` - Skip prompts and use defaults or provided options.
|
|
62
|
+
When used, the following defaults are selected unless overridden by flags:
|
|
63
|
+
- Template: `vite`
|
|
64
|
+
- Bulma flavor: `complete`
|
|
65
|
+
- Icon library: `none`
|
|
66
|
+
|
|
67
|
+
**Example:**
|
|
68
|
+
|
|
69
|
+
```bash
|
|
70
|
+
# Create a TypeScript project with Font Awesome icons
|
|
71
|
+
npm create bestax@latest my-app -t vite-ts -i fontawesome -b complete
|
|
72
|
+
|
|
73
|
+
# Use all defaults (skip prompts)
|
|
74
|
+
npm create bestax@latest my-app -y
|
|
9
75
|
```
|
|
10
76
|
|
|
11
77
|
## Templates
|
|
@@ -13,8 +79,13 @@ npx create-bestax my-app
|
|
|
13
79
|
Available templates:
|
|
14
80
|
- `vite` - Vite + JavaScript
|
|
15
81
|
- `vite-ts` - Vite + TypeScript
|
|
16
|
-
|
|
17
|
-
|
|
82
|
+
|
|
83
|
+
Each template includes:
|
|
84
|
+
- Pre-configured bestax-bulma integration
|
|
85
|
+
- Bulma CSS v1.0.4
|
|
86
|
+
- Icon library support (Font Awesome, Material Design, etc.)
|
|
87
|
+
- Sample components demonstrating library usage
|
|
88
|
+
- Development and build scripts
|
|
18
89
|
|
|
19
90
|
## Development
|
|
20
91
|
|
|
@@ -22,14 +93,12 @@ Available templates:
|
|
|
22
93
|
npm run build # Build the CLI
|
|
23
94
|
npm run dev # Watch mode
|
|
24
95
|
npm test # Run tests
|
|
96
|
+
npm run lint # Lint CLI source code
|
|
97
|
+
npm run typecheck # Type check CLI source code
|
|
25
98
|
```
|
|
26
99
|
|
|
100
|
+
**Note on Templates:** Template files in `templates/` are excluded from linting. They should be manually validated by scaffolding a test project and running lint/build there before releasing.
|
|
101
|
+
|
|
27
102
|
## Publishing
|
|
28
103
|
|
|
29
104
|
This package uses semantic-release with scope-based rules. Only commits with `feat(create-bestax)` or `fix(create-bestax)` will trigger releases.
|
|
30
|
-
|
|
31
|
-
## Known Issues
|
|
32
|
-
|
|
33
|
-
**Templates Location**: Currently templates exist in both `/templates/` (root) and `/create-bestax/templates/`. The package.json references `templates` which will look for `/create-bestax/templates/` when published to npm. The root `/templates/` directory should be removed to avoid confusion, but is currently committed in the monorepo root.
|
|
34
|
-
|
|
35
|
-
**Workaround**: The CLI code uses `path.resolve(__dirname, '../../templates')` which correctly resolves to the package's templates folder when running from the compiled dist.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-bestax",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "Create a new bestax-bulma project",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"test": "NODE_OPTIONS=\"--experimental-vm-modules\" jest",
|
|
17
17
|
"test:watch": "NODE_OPTIONS=\"--experimental-vm-modules\" jest --watch",
|
|
18
18
|
"test:coverage": "NODE_OPTIONS=\"--experimental-vm-modules\" jest --coverage",
|
|
19
|
-
"lint": "eslint .
|
|
19
|
+
"lint": "eslint .",
|
|
20
20
|
"typecheck": "tsc --noEmit",
|
|
21
21
|
"format": "prettier --write \"src/**/*.{ts,tsx}\"",
|
|
22
22
|
"format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
# Bestax + Vite Template
|
|
2
|
+
|
|
3
|
+
This template provides a minimal setup to get React working in Vite with HMR and bestax-bulma components.
|
|
4
|
+
|
|
5
|
+
## Getting Started
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install
|
|
9
|
+
npm run dev
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Available Scripts
|
|
13
|
+
|
|
14
|
+
- `npm run dev` - Start development server
|
|
15
|
+
- `npm run build` - Build for production
|
|
16
|
+
- `npm run preview` - Preview production build
|
|
17
|
+
- `npm run lint` - Run ESLint
|
|
18
|
+
|
|
19
|
+
## Features
|
|
20
|
+
|
|
21
|
+
- ⚡️ Vite for lightning-fast HMR
|
|
22
|
+
- 🎨 Bulma CSS framework
|
|
23
|
+
- 📦 bestax-bulma component library
|
|
24
|
+
- 🔧 ESLint pre-configured
|
|
25
|
+
- 🎯 Font Awesome icons included
|
|
26
|
+
|
|
27
|
+
## Learn More
|
|
28
|
+
|
|
29
|
+
- [Bestax Documentation](https://bestax.io)
|
|
30
|
+
- [Vite Documentation](https://vitejs.dev)
|
|
31
|
+
- [Bulma Documentation](https://bulma.io)
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Vite + React + Bestax</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="root"></div>
|
|
11
|
+
<script type="module" src="/src/main.jsx"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "vite-bestax-app",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "vite build",
|
|
9
|
+
"lint": "eslint .",
|
|
10
|
+
"preview": "vite preview"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"@allxsmith/bestax-bulma": "^2.1.3",
|
|
14
|
+
"bulma": "^1.0.4",
|
|
15
|
+
"react": "^19.1.1",
|
|
16
|
+
"react-dom": "^19.1.1"
|
|
17
|
+
},
|
|
18
|
+
"devDependencies": {
|
|
19
|
+
"@eslint/js": "^9.36.0",
|
|
20
|
+
"@types/react": "^19.1.13",
|
|
21
|
+
"@types/react-dom": "^19.1.9",
|
|
22
|
+
"@vitejs/plugin-react": "^5.0.3",
|
|
23
|
+
"eslint": "^9.36.0",
|
|
24
|
+
"eslint-plugin-react-hooks": "^5.2.0",
|
|
25
|
+
"eslint-plugin-react-refresh": "^0.4.22",
|
|
26
|
+
"globals": "^16.4.0",
|
|
27
|
+
"vite": "^7.1.7"
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/* App-specific styles - keep minimal, let Bulma handle the styling */
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Box,
|
|
4
|
+
Button,
|
|
5
|
+
Title,
|
|
6
|
+
SubTitle,
|
|
7
|
+
Notification,
|
|
8
|
+
Columns,
|
|
9
|
+
Column,
|
|
10
|
+
Container,
|
|
11
|
+
Section,
|
|
12
|
+
Card,
|
|
13
|
+
Hero,
|
|
14
|
+
} from '@allxsmith/bestax-bulma';
|
|
15
|
+
import './App.css';
|
|
16
|
+
|
|
17
|
+
function App() {
|
|
18
|
+
const [showNotification, setShowNotification] = useState(false);
|
|
19
|
+
const [count, setCount] = useState(0);
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<>
|
|
23
|
+
<Hero color="primary" size="medium">
|
|
24
|
+
<Hero.Body>
|
|
25
|
+
<Container>
|
|
26
|
+
<Title size="1" textAlign="centered" textColor="white">
|
|
27
|
+
Welcome to Bestax + Vite
|
|
28
|
+
</Title>
|
|
29
|
+
<SubTitle size="3" textAlign="centered" textColor="white">
|
|
30
|
+
Build amazing React apps with Bulma components
|
|
31
|
+
</SubTitle>
|
|
32
|
+
</Container>
|
|
33
|
+
</Hero.Body>
|
|
34
|
+
</Hero>
|
|
35
|
+
|
|
36
|
+
<Container>
|
|
37
|
+
<Section>
|
|
38
|
+
<Columns isCentered>
|
|
39
|
+
<Column size="three-quarters">
|
|
40
|
+
<Box>
|
|
41
|
+
<Title size="3">Get Started</Title>
|
|
42
|
+
<SubTitle size="5" textColor="grey">
|
|
43
|
+
This template includes everything you need to build with
|
|
44
|
+
bestax-bulma
|
|
45
|
+
</SubTitle>
|
|
46
|
+
|
|
47
|
+
<Columns mt="5">
|
|
48
|
+
<Column>
|
|
49
|
+
<Card>
|
|
50
|
+
<Card.Header>
|
|
51
|
+
<Card.Header.Title>Quick Start</Card.Header.Title>
|
|
52
|
+
</Card.Header>
|
|
53
|
+
<Card.Content>
|
|
54
|
+
Edit src/App.jsx and save to test HMR updates.
|
|
55
|
+
</Card.Content>
|
|
56
|
+
</Card>
|
|
57
|
+
</Column>
|
|
58
|
+
|
|
59
|
+
<Column>
|
|
60
|
+
<Card>
|
|
61
|
+
<Card.Header>
|
|
62
|
+
<Card.Header.Title>Documentation</Card.Header.Title>
|
|
63
|
+
</Card.Header>
|
|
64
|
+
<Card.Content>
|
|
65
|
+
Visit{' '}
|
|
66
|
+
<a
|
|
67
|
+
href="https://bestax.io"
|
|
68
|
+
target="_blank"
|
|
69
|
+
rel="noopener noreferrer"
|
|
70
|
+
>
|
|
71
|
+
bestax.io
|
|
72
|
+
</a>{' '}
|
|
73
|
+
for component docs.
|
|
74
|
+
</Card.Content>
|
|
75
|
+
</Card>
|
|
76
|
+
</Column>
|
|
77
|
+
|
|
78
|
+
<Column>
|
|
79
|
+
<Card>
|
|
80
|
+
<Card.Header>
|
|
81
|
+
<Card.Header.Title>Examples</Card.Header.Title>
|
|
82
|
+
</Card.Header>
|
|
83
|
+
<Card.Content>
|
|
84
|
+
Check the examples below to see components in action.
|
|
85
|
+
</Card.Content>
|
|
86
|
+
</Card>
|
|
87
|
+
</Column>
|
|
88
|
+
</Columns>
|
|
89
|
+
</Box>
|
|
90
|
+
|
|
91
|
+
<Box mt="5">
|
|
92
|
+
<Title size="4">Interactive Example</Title>
|
|
93
|
+
|
|
94
|
+
<Columns isVCentered mt="4">
|
|
95
|
+
<Column size="half">
|
|
96
|
+
<div className="buttons">
|
|
97
|
+
<Button
|
|
98
|
+
color="primary"
|
|
99
|
+
onClick={() => setShowNotification(!showNotification)}
|
|
100
|
+
>
|
|
101
|
+
Toggle Notification
|
|
102
|
+
</Button>
|
|
103
|
+
|
|
104
|
+
<Button color="info" onClick={() => setCount(count + 1)}>
|
|
105
|
+
Count: {count}
|
|
106
|
+
</Button>
|
|
107
|
+
|
|
108
|
+
<Button
|
|
109
|
+
color="warning"
|
|
110
|
+
onClick={() => setCount(0)}
|
|
111
|
+
disabled={count === 0}
|
|
112
|
+
>
|
|
113
|
+
Reset
|
|
114
|
+
</Button>
|
|
115
|
+
</div>
|
|
116
|
+
</Column>
|
|
117
|
+
|
|
118
|
+
<Column size="half">
|
|
119
|
+
{showNotification && (
|
|
120
|
+
<Notification
|
|
121
|
+
color="success"
|
|
122
|
+
isLight
|
|
123
|
+
onDelete={() => setShowNotification(false)}
|
|
124
|
+
>
|
|
125
|
+
<strong>Success!</strong> Your Vite + Bestax setup is
|
|
126
|
+
working perfectly!
|
|
127
|
+
</Notification>
|
|
128
|
+
)}
|
|
129
|
+
|
|
130
|
+
{count > 10 && (
|
|
131
|
+
<Notification color="info" isLight mt="3">
|
|
132
|
+
You've clicked the button {count} times!
|
|
133
|
+
</Notification>
|
|
134
|
+
)}
|
|
135
|
+
</Column>
|
|
136
|
+
</Columns>
|
|
137
|
+
</Box>
|
|
138
|
+
</Column>
|
|
139
|
+
</Columns>
|
|
140
|
+
</Section>
|
|
141
|
+
</Container>
|
|
142
|
+
</>
|
|
143
|
+
);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
export default App;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { StrictMode } from 'react';
|
|
2
|
+
import { createRoot } from 'react-dom/client';
|
|
3
|
+
import App from './App.jsx';
|
|
4
|
+
|
|
5
|
+
// Import Bulma CSS
|
|
6
|
+
import 'bulma/css/bulma.min.css';
|
|
7
|
+
import './index.css';
|
|
8
|
+
|
|
9
|
+
createRoot(document.getElementById('root')).render(
|
|
10
|
+
<StrictMode>
|
|
11
|
+
<App />
|
|
12
|
+
</StrictMode>
|
|
13
|
+
);
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
# Bestax + Vite + TypeScript Template
|
|
2
|
+
|
|
3
|
+
This template provides a minimal setup to get React working in Vite with TypeScript, HMR, and bestax-bulma components.
|
|
4
|
+
|
|
5
|
+
## Getting Started
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install
|
|
9
|
+
npm run dev
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Available Scripts
|
|
13
|
+
|
|
14
|
+
- `npm run dev` - Start development server
|
|
15
|
+
- `npm run build` - Build for production
|
|
16
|
+
- `npm run preview` - Preview production build
|
|
17
|
+
- `npm run lint` - Run ESLint
|
|
18
|
+
|
|
19
|
+
## Features
|
|
20
|
+
|
|
21
|
+
- ⚡️ Vite for lightning-fast HMR
|
|
22
|
+
- 🎨 Bulma CSS framework
|
|
23
|
+
- 📦 bestax-bulma component library
|
|
24
|
+
- 📘 TypeScript for type safety
|
|
25
|
+
- 🔧 ESLint pre-configured
|
|
26
|
+
- 🎯 Font Awesome icons included
|
|
27
|
+
|
|
28
|
+
## Learn More
|
|
29
|
+
|
|
30
|
+
- [Bestax Documentation](https://bestax.io)
|
|
31
|
+
- [Vite Documentation](https://vitejs.dev)
|
|
32
|
+
- [Bulma Documentation](https://bulma.io)
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Vite + React + Bestax</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="root"></div>
|
|
11
|
+
<script type="module" src="/src/main.tsx"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "vite-ts-bestax-app",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "vite",
|
|
8
|
+
"build": "tsc -b && vite build",
|
|
9
|
+
"lint": "eslint .",
|
|
10
|
+
"preview": "vite preview"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"@allxsmith/bestax-bulma": "^2.1.3",
|
|
14
|
+
"bulma": "^1.0.4",
|
|
15
|
+
"react": "^19.1.1",
|
|
16
|
+
"react-dom": "^19.1.1"
|
|
17
|
+
},
|
|
18
|
+
"devDependencies": {
|
|
19
|
+
"@eslint/js": "^9.36.0",
|
|
20
|
+
"@types/react": "^19.1.13",
|
|
21
|
+
"@types/react-dom": "^19.1.9",
|
|
22
|
+
"@vitejs/plugin-react": "^5.0.3",
|
|
23
|
+
"eslint": "^9.36.0",
|
|
24
|
+
"eslint-plugin-react-hooks": "^5.2.0",
|
|
25
|
+
"eslint-plugin-react-refresh": "^0.4.22",
|
|
26
|
+
"globals": "^16.4.0",
|
|
27
|
+
"typescript": "^5.9.2",
|
|
28
|
+
"vite": "^7.1.7"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/* App-specific styles - keep minimal, let Bulma handle the styling */
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Box,
|
|
4
|
+
Button,
|
|
5
|
+
Title,
|
|
6
|
+
SubTitle,
|
|
7
|
+
Notification,
|
|
8
|
+
Columns,
|
|
9
|
+
Column,
|
|
10
|
+
Container,
|
|
11
|
+
Section,
|
|
12
|
+
Card,
|
|
13
|
+
Hero,
|
|
14
|
+
} from '@allxsmith/bestax-bulma';
|
|
15
|
+
import './App.css';
|
|
16
|
+
|
|
17
|
+
function App() {
|
|
18
|
+
const [showNotification, setShowNotification] = useState(false);
|
|
19
|
+
const [count, setCount] = useState(0);
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<>
|
|
23
|
+
<Hero color="primary" size="medium">
|
|
24
|
+
<Hero.Body>
|
|
25
|
+
<Container>
|
|
26
|
+
<Title size="1" textAlign="centered">
|
|
27
|
+
Welcome to Bestax + Vite + TypeScript
|
|
28
|
+
</Title>
|
|
29
|
+
<SubTitle size="3" textAlign="centered">
|
|
30
|
+
Build amazing React apps with Bulma components
|
|
31
|
+
</SubTitle>
|
|
32
|
+
</Container>
|
|
33
|
+
</Hero.Body>
|
|
34
|
+
</Hero>
|
|
35
|
+
|
|
36
|
+
<Container>
|
|
37
|
+
<Section>
|
|
38
|
+
<Columns isCentered>
|
|
39
|
+
<Column size="three-quarters">
|
|
40
|
+
<Box>
|
|
41
|
+
<Title size="3">Get Started</Title>
|
|
42
|
+
<SubTitle size="5">
|
|
43
|
+
This template includes everything you need to build with
|
|
44
|
+
bestax-bulma
|
|
45
|
+
</SubTitle>
|
|
46
|
+
|
|
47
|
+
<Columns mt="5">
|
|
48
|
+
<Column>
|
|
49
|
+
<Card>
|
|
50
|
+
<Card.Header>
|
|
51
|
+
<Card.Header.Title>Quick Start</Card.Header.Title>
|
|
52
|
+
</Card.Header>
|
|
53
|
+
<Card.Content>
|
|
54
|
+
Edit src/App.tsx and save to test HMR updates.
|
|
55
|
+
</Card.Content>
|
|
56
|
+
</Card>
|
|
57
|
+
</Column>
|
|
58
|
+
|
|
59
|
+
<Column>
|
|
60
|
+
<Card>
|
|
61
|
+
<Card.Header>
|
|
62
|
+
<Card.Header.Title>Documentation</Card.Header.Title>
|
|
63
|
+
</Card.Header>
|
|
64
|
+
<Card.Content>
|
|
65
|
+
Visit{' '}
|
|
66
|
+
<a
|
|
67
|
+
href="https://bestax.io"
|
|
68
|
+
target="_blank"
|
|
69
|
+
rel="noopener noreferrer"
|
|
70
|
+
>
|
|
71
|
+
bestax.io
|
|
72
|
+
</a>{' '}
|
|
73
|
+
for component docs.
|
|
74
|
+
</Card.Content>
|
|
75
|
+
</Card>
|
|
76
|
+
</Column>
|
|
77
|
+
|
|
78
|
+
<Column>
|
|
79
|
+
<Card>
|
|
80
|
+
<Card.Header>
|
|
81
|
+
<Card.Header.Title>Examples</Card.Header.Title>
|
|
82
|
+
</Card.Header>
|
|
83
|
+
<Card.Content>
|
|
84
|
+
Check the examples below to see components in action.
|
|
85
|
+
</Card.Content>
|
|
86
|
+
</Card>
|
|
87
|
+
</Column>
|
|
88
|
+
</Columns>
|
|
89
|
+
</Box>
|
|
90
|
+
|
|
91
|
+
<Box mt="5">
|
|
92
|
+
<Title size="4">Interactive Example</Title>
|
|
93
|
+
|
|
94
|
+
<Columns isVCentered mt="4">
|
|
95
|
+
<Column size="half">
|
|
96
|
+
<div className="buttons">
|
|
97
|
+
<Button
|
|
98
|
+
color="primary"
|
|
99
|
+
onClick={() => setShowNotification(!showNotification)}
|
|
100
|
+
>
|
|
101
|
+
Toggle Notification
|
|
102
|
+
</Button>
|
|
103
|
+
|
|
104
|
+
<Button color="info" onClick={() => setCount(count + 1)}>
|
|
105
|
+
Count: {count}
|
|
106
|
+
</Button>
|
|
107
|
+
|
|
108
|
+
<Button
|
|
109
|
+
color="warning"
|
|
110
|
+
onClick={() => setCount(0)}
|
|
111
|
+
disabled={count === 0}
|
|
112
|
+
>
|
|
113
|
+
Reset
|
|
114
|
+
</Button>
|
|
115
|
+
</div>
|
|
116
|
+
</Column>
|
|
117
|
+
|
|
118
|
+
<Column size="half">
|
|
119
|
+
{showNotification && (
|
|
120
|
+
<Notification
|
|
121
|
+
color="success"
|
|
122
|
+
isLight
|
|
123
|
+
onDelete={() => setShowNotification(false)}
|
|
124
|
+
>
|
|
125
|
+
<strong>Success!</strong> Your Vite + Bestax setup is
|
|
126
|
+
working perfectly!
|
|
127
|
+
</Notification>
|
|
128
|
+
)}
|
|
129
|
+
|
|
130
|
+
{count > 10 && (
|
|
131
|
+
<Notification color="info" isLight mt="3">
|
|
132
|
+
You've clicked the button {count} times!
|
|
133
|
+
</Notification>
|
|
134
|
+
)}
|
|
135
|
+
</Column>
|
|
136
|
+
</Columns>
|
|
137
|
+
</Box>
|
|
138
|
+
</Column>
|
|
139
|
+
</Columns>
|
|
140
|
+
</Section>
|
|
141
|
+
</Container>
|
|
142
|
+
</>
|
|
143
|
+
);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
export default App;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { StrictMode } from 'react';
|
|
2
|
+
import { createRoot } from 'react-dom/client';
|
|
3
|
+
import App from './App.tsx';
|
|
4
|
+
|
|
5
|
+
// Import Bulma CSS
|
|
6
|
+
import 'bulma/css/bulma.min.css';
|
|
7
|
+
import './index.css';
|
|
8
|
+
|
|
9
|
+
createRoot(document.getElementById('root')!).render(
|
|
10
|
+
<StrictMode>
|
|
11
|
+
<App />
|
|
12
|
+
</StrictMode>
|
|
13
|
+
);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/// <reference types="vite/client" />
|
|
@@ -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
|
+
|
|
9
|
+
/* Bundler mode */
|
|
10
|
+
"moduleResolution": "bundler",
|
|
11
|
+
"allowImportingTsExtensions": true,
|
|
12
|
+
"resolveJsonModule": true,
|
|
13
|
+
"isolatedModules": true,
|
|
14
|
+
"noEmit": true,
|
|
15
|
+
"jsx": "react-jsx",
|
|
16
|
+
|
|
17
|
+
/* Linting */
|
|
18
|
+
"strict": true,
|
|
19
|
+
"noUnusedLocals": true,
|
|
20
|
+
"noUnusedParameters": true,
|
|
21
|
+
"noFallthroughCasesInSwitch": true
|
|
22
|
+
},
|
|
23
|
+
"include": ["src"],
|
|
24
|
+
"references": [{ "path": "./tsconfig.node.json" }]
|
|
25
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"composite": true,
|
|
4
|
+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
|
5
|
+
"skipLibCheck": true,
|
|
6
|
+
"module": "ESNext",
|
|
7
|
+
"moduleResolution": "bundler",
|
|
8
|
+
"allowSyntheticDefaultImports": true,
|
|
9
|
+
"strict": true,
|
|
10
|
+
"types": ["vite/client"]
|
|
11
|
+
},
|
|
12
|
+
"include": ["vite.config.ts"]
|
|
13
|
+
}
|