@sigx/cli 0.1.2 → 0.2.0
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/commands/create.js +18 -14
- package/dist/commands/create.js.map +1 -1
- package/dist/templates/lynx/src/App.tsx +58 -36
- package/dist/templates/lynx-daisyui/README.md +61 -0
- package/dist/templates/lynx-daisyui/assets/adaptive-foreground.png +0 -0
- package/dist/templates/lynx-daisyui/assets/icon.png +0 -0
- package/dist/templates/lynx-daisyui/assets/splash.png +0 -0
- package/dist/templates/lynx-daisyui/lynx.config.ts +20 -0
- package/dist/templates/lynx-daisyui/package.json +42 -0
- package/dist/templates/lynx-daisyui/postcss.config.js +5 -0
- package/dist/templates/lynx-daisyui/sigx.lynx.config.ts +44 -0
- package/dist/templates/lynx-daisyui/src/App.tsx +93 -0
- package/dist/templates/lynx-daisyui/src/main.thread.tsx +2 -0
- package/dist/templates/lynx-daisyui/src/main.tsx +10 -0
- package/dist/templates/lynx-daisyui/src/styles.css +3 -0
- package/dist/templates/lynx-daisyui/tailwind.config.ts +10 -0
- package/dist/templates/lynx-daisyui/tsconfig.json +19 -0
- package/dist/templates/lynx-tailwind/src/App.tsx +22 -19
- package/package.json +1 -1
- package/templates/lynx/src/App.tsx +58 -36
- package/templates/lynx-daisyui/README.md +61 -0
- package/templates/lynx-daisyui/assets/adaptive-foreground.png +0 -0
- package/templates/lynx-daisyui/assets/icon.png +0 -0
- package/templates/lynx-daisyui/assets/splash.png +0 -0
- package/templates/lynx-daisyui/lynx.config.ts +20 -0
- package/templates/lynx-daisyui/package.json +42 -0
- package/templates/lynx-daisyui/postcss.config.js +5 -0
- package/templates/lynx-daisyui/sigx.lynx.config.ts +44 -0
- package/templates/lynx-daisyui/src/App.tsx +93 -0
- package/templates/lynx-daisyui/src/main.thread.tsx +2 -0
- package/templates/lynx-daisyui/src/main.tsx +10 -0
- package/templates/lynx-daisyui/src/styles.css +3 -0
- package/templates/lynx-daisyui/tailwind.config.ts +10 -0
- package/templates/lynx-daisyui/tsconfig.json +19 -0
- package/templates/lynx-tailwind/src/App.tsx +22 -19
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"module": "ESNext",
|
|
5
|
+
"moduleResolution": "bundler",
|
|
6
|
+
"strict": true,
|
|
7
|
+
"esModuleInterop": true,
|
|
8
|
+
"skipLibCheck": true,
|
|
9
|
+
"forceConsistentCasingInFileNames": true,
|
|
10
|
+
"resolveJsonModule": true,
|
|
11
|
+
"isolatedModules": true,
|
|
12
|
+
"noEmit": true,
|
|
13
|
+
"jsx": "react-jsx",
|
|
14
|
+
"jsxImportSource": "@sigx/lynx",
|
|
15
|
+
"types": []
|
|
16
|
+
},
|
|
17
|
+
"include": ["src/**/*.ts", "src/**/*.tsx"],
|
|
18
|
+
"exclude": ["node_modules", "dist"]
|
|
19
|
+
}
|
|
@@ -4,44 +4,47 @@ const App = component(() => {
|
|
|
4
4
|
const count = signal(0);
|
|
5
5
|
|
|
6
6
|
return () => (
|
|
7
|
-
<scroll-view scroll-orientation="vertical" class="h-screen">
|
|
8
|
-
<view class="flex items-center justify-center h-screen
|
|
9
|
-
{/*
|
|
10
|
-
<view class="
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
<scroll-view scroll-orientation="vertical" class="h-screen bg-slate-900">
|
|
8
|
+
<view class="flex flex-col items-center justify-center min-h-screen px-6 py-12 bg-slate-900">
|
|
9
|
+
{/* Header group */}
|
|
10
|
+
<view class="flex flex-col items-center gap-4">
|
|
11
|
+
{/* Logo */}
|
|
12
|
+
<view class="w-20 h-20 rounded-2xl bg-blue-500 flex items-center justify-center">
|
|
13
|
+
<text class="text-4xl text-white">⚡</text>
|
|
14
|
+
</view>
|
|
13
15
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
<text class="text-3xl font-bold text-slate-100 text-center">
|
|
17
|
+
{{projectName}}
|
|
18
|
+
</text>
|
|
17
19
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
<text class="text-sm text-slate-400 text-center max-w-[280px]">
|
|
21
|
+
Built with sigx-lynx + Tailwind CSS
|
|
22
|
+
</text>
|
|
23
|
+
</view>
|
|
21
24
|
|
|
22
25
|
{/* Counter card */}
|
|
23
|
-
<view class="mt-
|
|
24
|
-
<text class="text-
|
|
26
|
+
<view class="flex flex-col mt-10 p-6 bg-slate-800 rounded-2xl border border-slate-700 items-center gap-5 w-[280px]">
|
|
27
|
+
<text class="text-6xl font-bold text-slate-100">
|
|
25
28
|
{count.value}
|
|
26
29
|
</text>
|
|
27
30
|
|
|
28
31
|
<view class="flex flex-row gap-3">
|
|
29
32
|
<view
|
|
30
33
|
bindtap={() => count.value > 0 && count.value--}
|
|
31
|
-
class="px-
|
|
34
|
+
class="px-7 py-3 bg-slate-700 rounded-xl"
|
|
32
35
|
>
|
|
33
|
-
<text class="text-slate-
|
|
36
|
+
<text class="text-slate-100 text-xl">−</text>
|
|
34
37
|
</view>
|
|
35
38
|
<view
|
|
36
39
|
bindtap={() => count.value++}
|
|
37
|
-
class="px-
|
|
40
|
+
class="px-7 py-3 bg-blue-500 rounded-xl"
|
|
38
41
|
>
|
|
39
|
-
<text class="text-white text-
|
|
42
|
+
<text class="text-white text-xl">+</text>
|
|
40
43
|
</view>
|
|
41
44
|
</view>
|
|
42
45
|
</view>
|
|
43
46
|
|
|
44
|
-
<text class="text-xs text-slate-
|
|
47
|
+
<text class="text-xs text-slate-500 mt-10 text-center">
|
|
45
48
|
Edit src/App.tsx to get started
|
|
46
49
|
</text>
|
|
47
50
|
</view>
|
package/package.json
CHANGED
|
@@ -4,59 +4,74 @@ const App = component(() => {
|
|
|
4
4
|
const count = signal(0);
|
|
5
5
|
|
|
6
6
|
return () => (
|
|
7
|
-
<scroll-view scroll-orientation="vertical" style={{ height: '100vh' }}>
|
|
7
|
+
<scroll-view scroll-orientation="vertical" style={{ height: '100vh', backgroundColor: '#0f172a' }}>
|
|
8
8
|
<view style={{
|
|
9
9
|
display: 'flex',
|
|
10
10
|
flexDirection: 'column',
|
|
11
11
|
alignItems: 'center',
|
|
12
12
|
justifyContent: 'center',
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
minHeight: '100vh',
|
|
14
|
+
paddingLeft: '24px',
|
|
15
|
+
paddingRight: '24px',
|
|
16
|
+
paddingTop: '48px',
|
|
17
|
+
paddingBottom: '48px',
|
|
15
18
|
backgroundColor: '#0f172a',
|
|
16
19
|
}}>
|
|
17
|
-
{/*
|
|
20
|
+
{/* Header group */}
|
|
18
21
|
<view style={{
|
|
19
|
-
width: '80px',
|
|
20
|
-
height: '80px',
|
|
21
|
-
borderRadius: '20px',
|
|
22
|
-
backgroundColor: '#3b82f6',
|
|
23
22
|
display: 'flex',
|
|
23
|
+
flexDirection: 'column',
|
|
24
24
|
alignItems: 'center',
|
|
25
|
-
|
|
25
|
+
gap: '16px',
|
|
26
26
|
}}>
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
{/* Logo */}
|
|
28
|
+
<view style={{
|
|
29
|
+
width: '80px',
|
|
30
|
+
height: '80px',
|
|
31
|
+
borderRadius: '20px',
|
|
32
|
+
backgroundColor: '#3b82f6',
|
|
33
|
+
display: 'flex',
|
|
34
|
+
alignItems: 'center',
|
|
35
|
+
justifyContent: 'center',
|
|
36
|
+
}}>
|
|
37
|
+
<text style={{ fontSize: '36px', color: '#fff' }}>⚡</text>
|
|
38
|
+
</view>
|
|
29
39
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
40
|
+
<text style={{
|
|
41
|
+
fontSize: '28px',
|
|
42
|
+
fontWeight: 'bold',
|
|
43
|
+
color: '#f1f5f9',
|
|
44
|
+
textAlign: 'center',
|
|
45
|
+
}}>
|
|
46
|
+
{{projectName}}
|
|
47
|
+
</text>
|
|
37
48
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
49
|
+
<text style={{
|
|
50
|
+
fontSize: '14px',
|
|
51
|
+
color: '#94a3b8',
|
|
52
|
+
textAlign: 'center',
|
|
53
|
+
maxWidth: '280px',
|
|
54
|
+
}}>
|
|
55
|
+
Built with sigx-lynx — signal-based native apps
|
|
56
|
+
</text>
|
|
57
|
+
</view>
|
|
46
58
|
|
|
47
59
|
{/* Counter card */}
|
|
48
60
|
<view style={{
|
|
49
61
|
display: 'flex',
|
|
50
62
|
flexDirection: 'column',
|
|
51
|
-
marginTop: '
|
|
63
|
+
marginTop: '40px',
|
|
52
64
|
padding: '24px',
|
|
53
65
|
backgroundColor: '#1e293b',
|
|
54
66
|
borderRadius: '16px',
|
|
67
|
+
borderWidth: '1px',
|
|
68
|
+
borderStyle: 'solid',
|
|
69
|
+
borderColor: '#334155',
|
|
55
70
|
alignItems: 'center',
|
|
56
|
-
gap: '
|
|
71
|
+
gap: '20px',
|
|
57
72
|
width: '280px',
|
|
58
73
|
}}>
|
|
59
|
-
<text style={{ fontSize: '
|
|
74
|
+
<text style={{ fontSize: '56px', fontWeight: 'bold', color: '#f1f5f9' }}>
|
|
60
75
|
{count.value}
|
|
61
76
|
</text>
|
|
62
77
|
|
|
@@ -68,22 +83,28 @@ const App = component(() => {
|
|
|
68
83
|
<view
|
|
69
84
|
bindtap={() => count.value > 0 && count.value--}
|
|
70
85
|
style={{
|
|
71
|
-
|
|
86
|
+
paddingLeft: '28px',
|
|
87
|
+
paddingRight: '28px',
|
|
88
|
+
paddingTop: '12px',
|
|
89
|
+
paddingBottom: '12px',
|
|
72
90
|
backgroundColor: '#334155',
|
|
73
|
-
borderRadius: '
|
|
91
|
+
borderRadius: '12px',
|
|
74
92
|
}}
|
|
75
93
|
>
|
|
76
|
-
<text style={{ color: '#
|
|
94
|
+
<text style={{ color: '#f1f5f9', fontSize: '20px' }}>−</text>
|
|
77
95
|
</view>
|
|
78
96
|
<view
|
|
79
97
|
bindtap={() => count.value++}
|
|
80
98
|
style={{
|
|
81
|
-
|
|
99
|
+
paddingLeft: '28px',
|
|
100
|
+
paddingRight: '28px',
|
|
101
|
+
paddingTop: '12px',
|
|
102
|
+
paddingBottom: '12px',
|
|
82
103
|
backgroundColor: '#3b82f6',
|
|
83
|
-
borderRadius: '
|
|
104
|
+
borderRadius: '12px',
|
|
84
105
|
}}
|
|
85
106
|
>
|
|
86
|
-
<text style={{ color: '#fff', fontSize: '
|
|
107
|
+
<text style={{ color: '#fff', fontSize: '20px' }}>+</text>
|
|
87
108
|
</view>
|
|
88
109
|
</view>
|
|
89
110
|
</view>
|
|
@@ -91,7 +112,8 @@ const App = component(() => {
|
|
|
91
112
|
<text style={{
|
|
92
113
|
fontSize: '12px',
|
|
93
114
|
color: '#64748b',
|
|
94
|
-
marginTop: '
|
|
115
|
+
marginTop: '40px',
|
|
116
|
+
textAlign: 'center',
|
|
95
117
|
}}>
|
|
96
118
|
Edit src/App.tsx to get started
|
|
97
119
|
</text>
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
# {{projectName}}
|
|
2
|
+
|
|
3
|
+
A native mobile app built with [sigx-lynx](https://github.com/signalxjs/core) and Tailwind CSS.
|
|
4
|
+
|
|
5
|
+
## Getting Started
|
|
6
|
+
|
|
7
|
+
### Prerequisites
|
|
8
|
+
|
|
9
|
+
- Node.js 18+
|
|
10
|
+
- pnpm (recommended) or npm
|
|
11
|
+
- [sigx-lynx-go](https://github.com/signalxjs/core/tree/main/go) app on your device/emulator
|
|
12
|
+
|
|
13
|
+
### Development
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
# Install dependencies
|
|
17
|
+
pnpm install
|
|
18
|
+
|
|
19
|
+
# Start the dev server
|
|
20
|
+
sigx dev
|
|
21
|
+
|
|
22
|
+
# Or use npx
|
|
23
|
+
npx sigx dev
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Scan the QR code shown in the terminal with sigx-lynx-go, or enter the URL manually.
|
|
27
|
+
|
|
28
|
+
### Building
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
sigx build
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Environment Check
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
sigx doctor
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Project Structure
|
|
41
|
+
|
|
42
|
+
```
|
|
43
|
+
{{projectName}}/
|
|
44
|
+
├── src/
|
|
45
|
+
│ ├── App.tsx # Root component
|
|
46
|
+
│ ├── styles.css # Tailwind entry point
|
|
47
|
+
│ ├── main.tsx # BG-thread entry point
|
|
48
|
+
│ └── main.thread.tsx # Main-thread entry point
|
|
49
|
+
├── lynx.config.ts # rspeedy build config
|
|
50
|
+
├── sigx.lynx.config.ts # sigx-lynx native config
|
|
51
|
+
├── tailwind.config.ts # Tailwind CSS config
|
|
52
|
+
├── postcss.config.js # PostCSS config
|
|
53
|
+
├── tsconfig.json
|
|
54
|
+
└── package.json
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Learn More
|
|
58
|
+
|
|
59
|
+
- [sigx-lynx Documentation](https://github.com/signalxjs/core)
|
|
60
|
+
- [Lynx Runtime](https://lynxjs.org)
|
|
61
|
+
- [Tailwind CSS](https://tailwindcss.com)
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
2
|
+
import { pluginSigxLynx } from '@sigx/lynx-plugin';
|
|
3
|
+
|
|
4
|
+
export default defineConfig({
|
|
5
|
+
source: {
|
|
6
|
+
entry: {
|
|
7
|
+
main: './src/main.tsx',
|
|
8
|
+
},
|
|
9
|
+
},
|
|
10
|
+
server: {
|
|
11
|
+
host: '0.0.0.0',
|
|
12
|
+
port: 3000,
|
|
13
|
+
},
|
|
14
|
+
plugins: [
|
|
15
|
+
pluginSigxLynx({
|
|
16
|
+
enableCSSInheritance: true,
|
|
17
|
+
enableCSSInlineVariables: true,
|
|
18
|
+
}),
|
|
19
|
+
],
|
|
20
|
+
});
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "{{projectName}}",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"private": true,
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "sigx dev",
|
|
8
|
+
"build": "sigx build",
|
|
9
|
+
"doctor": "sigx doctor",
|
|
10
|
+
"prebuild": "sigx prebuild"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"@sigx/lynx": "^0.1.2",
|
|
14
|
+
"@sigx/lynx-runtime": "^0.2.4",
|
|
15
|
+
"@sigx/lynx-runtime-main": "^0.2.4",
|
|
16
|
+
"@sigx/lynx-core": "^0.1.0",
|
|
17
|
+
"@sigx/reactivity": "^0.4.1",
|
|
18
|
+
"@sigx/runtime-core": "^0.4.1",
|
|
19
|
+
"@sigx/lynx-storage": "^0.1.0",
|
|
20
|
+
"@sigx/lynx-clipboard": "^0.1.0",
|
|
21
|
+
"@sigx/lynx-haptics": "^0.1.0",
|
|
22
|
+
"@sigx/lynx-device-info": "^0.1.0",
|
|
23
|
+
"@sigx/lynx-network": "^0.1.0",
|
|
24
|
+
"@sigx/lynx-daisyui": "^0.1.0"
|
|
25
|
+
},
|
|
26
|
+
"devDependencies": {
|
|
27
|
+
"@sigx/cli": "^0.1.0",
|
|
28
|
+
"@sigx/lynx-cli": "^0.1.0",
|
|
29
|
+
"@sigx/lynx-plugin": "^0.2.4",
|
|
30
|
+
"@sigx/lynx-dev-client": "^0.1.0",
|
|
31
|
+
"@lynx-js/rspeedy": ">=0.1.0",
|
|
32
|
+
"@lynx-js/css-extract-webpack-plugin": ">=0.1.0",
|
|
33
|
+
"@lynx-js/template-webpack-plugin": ">=0.1.0",
|
|
34
|
+
"@lynx-js/runtime-wrapper-webpack-plugin": ">=0.1.0",
|
|
35
|
+
"@lynx-js/webpack-dev-transport": ">=0.1.0",
|
|
36
|
+
"@lynx-js/tailwind-preset": "^0.4.0",
|
|
37
|
+
"tailwindcss": "^3.4.0",
|
|
38
|
+
"postcss": "^8.4.0",
|
|
39
|
+
"autoprefixer": "^10.4.0",
|
|
40
|
+
"typescript": "^5.9.3"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { defineLynxConfig } from '@sigx/lynx-cli/config';
|
|
2
|
+
|
|
3
|
+
export default defineLynxConfig({
|
|
4
|
+
name: '{{projectName}}',
|
|
5
|
+
version: '0.1.0',
|
|
6
|
+
buildNumber: '1',
|
|
7
|
+
|
|
8
|
+
// App-shell assets — sigx ships sensible defaults in ./assets/.
|
|
9
|
+
// Swap these PNGs to rebrand without touching native code.
|
|
10
|
+
icon: 'assets/icon.png',
|
|
11
|
+
splash: {
|
|
12
|
+
image: 'assets/splash.png',
|
|
13
|
+
backgroundColor: '#FFFFFF',
|
|
14
|
+
},
|
|
15
|
+
|
|
16
|
+
// Custom URL scheme for deep linking ({{projectName}}://...).
|
|
17
|
+
// Comment out if you don't need deep links.
|
|
18
|
+
scheme: '{{projectName}}',
|
|
19
|
+
|
|
20
|
+
// 'portrait' | 'landscape' | 'default'
|
|
21
|
+
orientation: 'portrait',
|
|
22
|
+
|
|
23
|
+
modules: [
|
|
24
|
+
'@sigx/lynx-storage',
|
|
25
|
+
'@sigx/lynx-clipboard',
|
|
26
|
+
'@sigx/lynx-haptics',
|
|
27
|
+
'@sigx/lynx-device-info',
|
|
28
|
+
'@sigx/lynx-network',
|
|
29
|
+
],
|
|
30
|
+
android: {
|
|
31
|
+
applicationId: 'com.example.{{projectName}}',
|
|
32
|
+
versionCode: 1,
|
|
33
|
+
minSdk: 24,
|
|
34
|
+
targetSdk: 35,
|
|
35
|
+
adaptiveIcon: {
|
|
36
|
+
foreground: 'assets/adaptive-foreground.png',
|
|
37
|
+
backgroundColor: '#0D9488',
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
ios: {
|
|
41
|
+
bundleIdentifier: 'com.example.{{projectName}}',
|
|
42
|
+
deploymentTarget: '15.0',
|
|
43
|
+
},
|
|
44
|
+
});
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { signal, component } from '@sigx/lynx';
|
|
2
|
+
import { Badge, Button, Card, Toggle } from '@sigx/lynx-daisyui';
|
|
3
|
+
|
|
4
|
+
const App = component(() => {
|
|
5
|
+
const count = signal(0);
|
|
6
|
+
const autoIncrement = signal(false);
|
|
7
|
+
|
|
8
|
+
let timer: ReturnType<typeof setInterval> | null = null;
|
|
9
|
+
const syncTimer = () => {
|
|
10
|
+
if (autoIncrement.value && !timer) {
|
|
11
|
+
timer = setInterval(() => count.value++, 800);
|
|
12
|
+
} else if (!autoIncrement.value && timer) {
|
|
13
|
+
clearInterval(timer);
|
|
14
|
+
timer = null;
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
return () => (
|
|
19
|
+
<scroll-view scroll-orientation="vertical" class="h-screen bg-base-200">
|
|
20
|
+
<view class="flex flex-col items-center justify-center min-h-screen px-6 py-12 bg-base-200">
|
|
21
|
+
{/* Header group */}
|
|
22
|
+
<view class="flex flex-col items-center gap-4">
|
|
23
|
+
{/* Logo */}
|
|
24
|
+
<view class="w-20 h-20 rounded-2xl bg-primary flex items-center justify-center">
|
|
25
|
+
<text class="text-4xl text-primary-content">⚡</text>
|
|
26
|
+
</view>
|
|
27
|
+
|
|
28
|
+
<text class="text-3xl font-bold text-base-content text-center">
|
|
29
|
+
{{projectName}}
|
|
30
|
+
</text>
|
|
31
|
+
|
|
32
|
+
<text class="text-sm text-base-content/60 text-center max-w-[280px]">
|
|
33
|
+
Built with sigx-lynx + DaisyUI
|
|
34
|
+
</text>
|
|
35
|
+
</view>
|
|
36
|
+
|
|
37
|
+
{/* Counter card */}
|
|
38
|
+
<Card bordered shadow="lg" class="mt-10 w-[300px] bg-base-100">
|
|
39
|
+
<Card.Body>
|
|
40
|
+
<view class="flex flex-row items-center justify-center gap-3">
|
|
41
|
+
<Badge variant="primary" size="lg">{count.value}</Badge>
|
|
42
|
+
<text class="text-base-content/60">×2 =</text>
|
|
43
|
+
<Badge variant="secondary" size="lg">{count.value * 2}</Badge>
|
|
44
|
+
</view>
|
|
45
|
+
|
|
46
|
+
<Card.Actions class="justify-center mt-4 gap-2">
|
|
47
|
+
<Button
|
|
48
|
+
variant="error"
|
|
49
|
+
outline
|
|
50
|
+
size="sm"
|
|
51
|
+
bindpress={() => count.value > 0 && count.value--}
|
|
52
|
+
>
|
|
53
|
+
−
|
|
54
|
+
</Button>
|
|
55
|
+
<Button
|
|
56
|
+
variant="ghost"
|
|
57
|
+
size="sm"
|
|
58
|
+
bindpress={() => (count.value = 0)}
|
|
59
|
+
>
|
|
60
|
+
Reset
|
|
61
|
+
</Button>
|
|
62
|
+
<Button
|
|
63
|
+
variant="primary"
|
|
64
|
+
size="sm"
|
|
65
|
+
bindpress={() => count.value++}
|
|
66
|
+
>
|
|
67
|
+
+
|
|
68
|
+
</Button>
|
|
69
|
+
</Card.Actions>
|
|
70
|
+
|
|
71
|
+
<view class="flex flex-row items-center justify-between mt-4 pt-4 border-t border-base-300">
|
|
72
|
+
<text class="text-sm text-base-content/70">Auto-increment</text>
|
|
73
|
+
<Toggle
|
|
74
|
+
checked={autoIncrement.value}
|
|
75
|
+
color="success"
|
|
76
|
+
bindchange={(next: boolean) => {
|
|
77
|
+
autoIncrement.value = next;
|
|
78
|
+
syncTimer();
|
|
79
|
+
}}
|
|
80
|
+
/>
|
|
81
|
+
</view>
|
|
82
|
+
</Card.Body>
|
|
83
|
+
</Card>
|
|
84
|
+
|
|
85
|
+
<text class="text-xs text-base-content/50 mt-10 text-center">
|
|
86
|
+
Edit src/App.tsx to get started
|
|
87
|
+
</text>
|
|
88
|
+
</view>
|
|
89
|
+
</scroll-view>
|
|
90
|
+
);
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
export default App;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Config } from 'tailwindcss';
|
|
2
|
+
import LynxPreset from '@lynx-js/tailwind-preset';
|
|
3
|
+
import { daisyuiPreset } from '@sigx/lynx-daisyui/preset';
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
content: [
|
|
7
|
+
'./src/**/*.{tsx,ts,jsx,js}',
|
|
8
|
+
],
|
|
9
|
+
presets: [LynxPreset, daisyuiPreset],
|
|
10
|
+
} satisfies Config;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"module": "ESNext",
|
|
5
|
+
"moduleResolution": "bundler",
|
|
6
|
+
"strict": true,
|
|
7
|
+
"esModuleInterop": true,
|
|
8
|
+
"skipLibCheck": true,
|
|
9
|
+
"forceConsistentCasingInFileNames": true,
|
|
10
|
+
"resolveJsonModule": true,
|
|
11
|
+
"isolatedModules": true,
|
|
12
|
+
"noEmit": true,
|
|
13
|
+
"jsx": "react-jsx",
|
|
14
|
+
"jsxImportSource": "@sigx/lynx",
|
|
15
|
+
"types": []
|
|
16
|
+
},
|
|
17
|
+
"include": ["src/**/*.ts", "src/**/*.tsx"],
|
|
18
|
+
"exclude": ["node_modules", "dist"]
|
|
19
|
+
}
|
|
@@ -4,44 +4,47 @@ const App = component(() => {
|
|
|
4
4
|
const count = signal(0);
|
|
5
5
|
|
|
6
6
|
return () => (
|
|
7
|
-
<scroll-view scroll-orientation="vertical" class="h-screen">
|
|
8
|
-
<view class="flex items-center justify-center h-screen
|
|
9
|
-
{/*
|
|
10
|
-
<view class="
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
<scroll-view scroll-orientation="vertical" class="h-screen bg-slate-900">
|
|
8
|
+
<view class="flex flex-col items-center justify-center min-h-screen px-6 py-12 bg-slate-900">
|
|
9
|
+
{/* Header group */}
|
|
10
|
+
<view class="flex flex-col items-center gap-4">
|
|
11
|
+
{/* Logo */}
|
|
12
|
+
<view class="w-20 h-20 rounded-2xl bg-blue-500 flex items-center justify-center">
|
|
13
|
+
<text class="text-4xl text-white">⚡</text>
|
|
14
|
+
</view>
|
|
13
15
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
<text class="text-3xl font-bold text-slate-100 text-center">
|
|
17
|
+
{{projectName}}
|
|
18
|
+
</text>
|
|
17
19
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
<text class="text-sm text-slate-400 text-center max-w-[280px]">
|
|
21
|
+
Built with sigx-lynx + Tailwind CSS
|
|
22
|
+
</text>
|
|
23
|
+
</view>
|
|
21
24
|
|
|
22
25
|
{/* Counter card */}
|
|
23
|
-
<view class="mt-
|
|
24
|
-
<text class="text-
|
|
26
|
+
<view class="flex flex-col mt-10 p-6 bg-slate-800 rounded-2xl border border-slate-700 items-center gap-5 w-[280px]">
|
|
27
|
+
<text class="text-6xl font-bold text-slate-100">
|
|
25
28
|
{count.value}
|
|
26
29
|
</text>
|
|
27
30
|
|
|
28
31
|
<view class="flex flex-row gap-3">
|
|
29
32
|
<view
|
|
30
33
|
bindtap={() => count.value > 0 && count.value--}
|
|
31
|
-
class="px-
|
|
34
|
+
class="px-7 py-3 bg-slate-700 rounded-xl"
|
|
32
35
|
>
|
|
33
|
-
<text class="text-slate-
|
|
36
|
+
<text class="text-slate-100 text-xl">−</text>
|
|
34
37
|
</view>
|
|
35
38
|
<view
|
|
36
39
|
bindtap={() => count.value++}
|
|
37
|
-
class="px-
|
|
40
|
+
class="px-7 py-3 bg-blue-500 rounded-xl"
|
|
38
41
|
>
|
|
39
|
-
<text class="text-white text-
|
|
42
|
+
<text class="text-white text-xl">+</text>
|
|
40
43
|
</view>
|
|
41
44
|
</view>
|
|
42
45
|
</view>
|
|
43
46
|
|
|
44
|
-
<text class="text-xs text-slate-
|
|
47
|
+
<text class="text-xs text-slate-500 mt-10 text-center">
|
|
45
48
|
Edit src/App.tsx to get started
|
|
46
49
|
</text>
|
|
47
50
|
</view>
|