nextia 6.1.1 → 7.0.2
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 +1 -1
- package/biome.json +21 -0
- package/package.json +13 -8
- package/src/bin.js +239 -0
- package/src/{lib.js → lib/fx.js} +18 -33
- package/src/lib/index.js +32 -0
- package/src/lib/ui.js +112 -0
- package/src/lib/utils.js +107 -0
- package/template/README.md +29 -0
- package/template/_env.dev +4 -0
- package/template/_env.prod +1 -0
- package/template/_env.test +1 -0
- package/template/_gitignore +10 -0
- package/template/biome.json +21 -0
- package/template/package.json +35 -0
- package/template/public/error.html +14 -0
- package/template/public/logo.svg +105 -0
- package/template/src/assets/i18n/index.js +26 -0
- package/template/src/assets/img/image.svg +6 -0
- package/template/src/assets/img/image.webp +0 -0
- package/template/src/components/Counter/index.jsx +33 -0
- package/template/src/components/Counter/style.css +5 -0
- package/template/src/components/Message/index.jsx +12 -0
- package/template/src/components/index.js +6 -0
- package/template/src/components/ui/Translate/index.jsx +20 -0
- package/template/src/index.html +18 -0
- package/template/src/index.jsx +4 -0
- package/template/src/pages/env/functions.js +3 -0
- package/template/src/pages/env/index.jsx +26 -0
- package/template/src/pages/env/style.css +2 -0
- package/template/src/pages/functions.js +37 -0
- package/template/src/pages/home/functions.js +43 -0
- package/template/src/pages/home/index.jsx +211 -0
- package/template/src/pages/home/style.css +51 -0
- package/template/src/pages/http/not-found/index.jsx +10 -0
- package/template/src/pages/http/not-found/style.css +2 -0
- package/template/src/pages/icons/functions.js +3 -0
- package/template/src/pages/icons/index.jsx +21 -0
- package/template/src/pages/icons/style.css +8 -0
- package/template/src/pages/images/functions.js +3 -0
- package/template/src/pages/images/index.jsx +25 -0
- package/template/src/pages/images/style.css +27 -0
- package/template/src/pages/index.jsx +124 -0
- package/template/src/pages/mockapi/functions.js +71 -0
- package/template/src/pages/mockapi/index.jsx +101 -0
- package/template/src/pages/mockapi/style.css +57 -0
- package/template/src/pages/my-context/functions.js +7 -0
- package/template/src/pages/my-context/index.jsx +32 -0
- package/template/src/pages/my-context/style.css +2 -0
- package/template/src/pages/resize/functions.js +3 -0
- package/template/src/pages/resize/index.jsx +15 -0
- package/template/src/pages/resize/style.css +2 -0
- package/template/src/pages/search-params/functions.js +3 -0
- package/template/src/pages/search-params/index.jsx +35 -0
- package/template/src/pages/search-params/style.css +2 -0
- package/template/src/pages/subpage/hello/functions.js +3 -0
- package/template/src/pages/subpage/hello/index.jsx +11 -0
- package/template/src/pages/subpage/hello/style.css +2 -0
- package/template/src/pages/translate/functions.js +5 -0
- package/template/src/pages/translate/index.jsx +31 -0
- package/template/src/pages/translate/style.css +12 -0
- package/template/src/pages/view-transition/functions.js +6 -0
- package/template/src/pages/view-transition/index.jsx +30 -0
- package/template/src/pages/view-transition/style.css +2 -0
- package/template/src/services/api.js +9 -0
- package/template/src/services/http.js +40 -0
- package/template/src/theme/fonts/Roboto-Regular.ttf +0 -0
- package/template/src/theme/fonts/index.css +7 -0
- package/template/src/theme/icons/icons.svg +125 -0
- package/template/src/theme/icons/index.css +55 -0
- package/template/src/theme/index.css +39 -0
- package/template/src/theme/utils/index.css +29 -0
- package/template/src/theme/utils/view-transition.css +72 -0
- package/template/src/utils/index.js +5 -0
- package/template/test/index.test.js +11 -0
- package/template/vite.config.js +97 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{
|
|
2
|
+
"formatter": {
|
|
3
|
+
"indentStyle": "space",
|
|
4
|
+
"indentWidth": 2
|
|
5
|
+
},
|
|
6
|
+
|
|
7
|
+
"javascript": {
|
|
8
|
+
"formatter": {
|
|
9
|
+
"semicolons": "asNeeded",
|
|
10
|
+
"quoteStyle": "single",
|
|
11
|
+
"jsxQuoteStyle": "double",
|
|
12
|
+
"trailingCommas": "none"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
|
|
16
|
+
"css": {
|
|
17
|
+
"parser": {
|
|
18
|
+
"tailwindDirectives": true
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "TEMPLATE",
|
|
3
|
+
"description": "description",
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"private": true,
|
|
7
|
+
"scripts": {
|
|
8
|
+
"dev": "vite --mode dev",
|
|
9
|
+
"clean": "rm -fr node_modules package-lock.json .coverage out",
|
|
10
|
+
"build": "vite build --mode",
|
|
11
|
+
"preview": "vite preview",
|
|
12
|
+
"format": "biome format",
|
|
13
|
+
"lint": "biome lint",
|
|
14
|
+
"check": "biome check --reporter=summary",
|
|
15
|
+
"page": "nextia page",
|
|
16
|
+
"component": "nextia component",
|
|
17
|
+
"container": "nextia container",
|
|
18
|
+
"test": "vitest",
|
|
19
|
+
"test:name": "vitest run --testNamePattern",
|
|
20
|
+
"test:silent": "vitest run --silent",
|
|
21
|
+
"test:coverage": "vitest run --silent --coverage"
|
|
22
|
+
},
|
|
23
|
+
"devDependencies": {
|
|
24
|
+
"@vitejs/plugin-react": "^6.0.1",
|
|
25
|
+
"@vitest/coverage-v8": "^4.1.2",
|
|
26
|
+
"jsdom": "^29.0.1",
|
|
27
|
+
"vite": "^8.0.3",
|
|
28
|
+
"vitest": "^4.1.2"
|
|
29
|
+
},
|
|
30
|
+
"dependencies": {
|
|
31
|
+
"nextia": "file:../",
|
|
32
|
+
"react": "^19.2.4",
|
|
33
|
+
"react-dom": "^19.2.4"
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<svg
|
|
3
|
+
width="64mm"
|
|
4
|
+
height="64mm"
|
|
5
|
+
viewBox="0 0 63.999981 64"
|
|
6
|
+
version="1.1"
|
|
7
|
+
id="svg"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
xmlns:svg="http://www.w3.org/2000/svg">
|
|
10
|
+
<title
|
|
11
|
+
id="logo">sinuhe.dev/logo</title>
|
|
12
|
+
<defs
|
|
13
|
+
id="defs" />
|
|
14
|
+
<g
|
|
15
|
+
id="layer1"
|
|
16
|
+
style="display:none">
|
|
17
|
+
<rect
|
|
18
|
+
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.183199;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
|
|
19
|
+
id="rect4575"
|
|
20
|
+
width="68.329857"
|
|
21
|
+
height="67.899437"
|
|
22
|
+
x="-0.10760616"
|
|
23
|
+
y="0.15671897" />
|
|
24
|
+
</g>
|
|
25
|
+
<g
|
|
26
|
+
id="layer6"
|
|
27
|
+
style="display:inline"
|
|
28
|
+
transform="translate(0,-67.73333)">
|
|
29
|
+
<ellipse
|
|
30
|
+
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.733511;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
|
|
31
|
+
id="path1043"
|
|
32
|
+
cx="32.12582"
|
|
33
|
+
cy="99.992744"
|
|
34
|
+
rx="31.071707"
|
|
35
|
+
ry="31.177364" />
|
|
36
|
+
</g>
|
|
37
|
+
<g
|
|
38
|
+
id="layer5"
|
|
39
|
+
style="display:inline"
|
|
40
|
+
transform="translate(0,-67.73333)">
|
|
41
|
+
<g
|
|
42
|
+
id="g4700"
|
|
43
|
+
style="display:inline;opacity:1;fill:#b21cbe;fill-opacity:1;stroke:#000000;stroke-width:1.04693;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1">
|
|
44
|
+
<path
|
|
45
|
+
id="path4702"
|
|
46
|
+
style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
|
|
47
|
+
d="m 30.832208,99.306623 v 4.743067 l 4.96555,1.50109 v -4.43205 z"
|
|
48
|
+
points="30.832208,104.04969 35.797758,105.55078 35.797758,101.11873 30.832208,99.306623 " />
|
|
49
|
+
<path
|
|
50
|
+
id="path4712"
|
|
51
|
+
style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
|
|
52
|
+
d="m 35.797758,101.11873 3.26925,-2.708535 v 4.896925 l -3.26925,2.24366 z"
|
|
53
|
+
points="39.067008,98.410195 39.067008,103.30712 35.797758,105.55078 35.797758,101.11873 " />
|
|
54
|
+
<path
|
|
55
|
+
id="path4704"
|
|
56
|
+
style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
|
|
57
|
+
d="m 30.832208,99.306623 2.963096,-3.125021 5.271704,2.228593 -3.26925,2.708535 z"
|
|
58
|
+
points="33.795304,96.181602 39.067008,98.410195 35.797758,101.11873 30.832208,99.306623 " />
|
|
59
|
+
<path
|
|
60
|
+
id="path4710"
|
|
61
|
+
style="fill:#1c6fbe;fill-opacity:0.850847;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
|
|
62
|
+
d="m 30.832208,104.04969 2.963096,-2.58867 5.271704,1.8461 -3.26925,2.24366 z"
|
|
63
|
+
points="33.795304,101.46102 39.067008,103.30712 35.797758,105.55078 30.832208,104.04969 " />
|
|
64
|
+
<path
|
|
65
|
+
id="path4708"
|
|
66
|
+
style="fill:#1c6fbe;fill-opacity:0.657627;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
|
|
67
|
+
d="m 33.795304,96.181602 v 5.279418 l 5.271704,1.8461 v -4.896925 z"
|
|
68
|
+
points="33.795304,101.46102 39.067008,103.30712 39.067008,98.410195 33.795304,96.181602 " />
|
|
69
|
+
<path
|
|
70
|
+
id="path4706"
|
|
71
|
+
style="fill:#1c6fbe;fill-opacity:0.535593;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
|
|
72
|
+
d="m 30.832208,99.306623 2.963096,-3.125021 v 5.279418 l -2.963096,2.58867 z"
|
|
73
|
+
points="33.795304,96.181602 33.795304,101.46102 30.832208,104.04969 30.832208,99.306623 " />
|
|
74
|
+
</g>
|
|
75
|
+
<path
|
|
76
|
+
style="fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.253318;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
|
|
77
|
+
d="m 11.165395,82.054897 48.085834,16.788915 -1.255039,3.313058 z"
|
|
78
|
+
id="path896" />
|
|
79
|
+
<path
|
|
80
|
+
style="fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
|
81
|
+
d="m 32.028836,45.114235 18.106422,22.683955 -1.711567,-0.545593 z"
|
|
82
|
+
id="path927"
|
|
83
|
+
transform="matrix(0.95591558,0,0,0.95591558,-19.451471,38.9295)" />
|
|
84
|
+
<path
|
|
85
|
+
style="fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
|
86
|
+
d="m 31.523833,70.837808 -17.088483,18.792702 0.125878,-1.618829 z"
|
|
87
|
+
id="path946"
|
|
88
|
+
transform="matrix(-0.9346334,0,0,-0.9854517,39.218821,189.98433)" />
|
|
89
|
+
<path
|
|
90
|
+
style="fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
|
91
|
+
d="m -0.57636767,103.02518 46.59500667,-19.6116 -2.095993,2.003079 z"
|
|
92
|
+
id="path966"
|
|
93
|
+
transform="matrix(0.95591558,0,0,0.95591558,10.293548,21.654226)" />
|
|
94
|
+
<path
|
|
95
|
+
style="display:inline;fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
|
96
|
+
d="m 31.526079,70.834722 -16.771302,18.447499 0.107264,-1.598211 z"
|
|
97
|
+
id="path946-9"
|
|
98
|
+
transform="matrix(-0.9346334,0,0,-0.9854517,41.337946,191.74435)" />
|
|
99
|
+
<path
|
|
100
|
+
style="display:inline;fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
|
101
|
+
d="m -0.52687485,103.06681 48.61219685,-19.843049 -2.234064,1.992464 z"
|
|
102
|
+
id="path966-2"
|
|
103
|
+
transform="matrix(0.95591558,0,0,0.95591558,12.41267,23.41428)" />
|
|
104
|
+
</g>
|
|
105
|
+
</svg>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
locales: ['EN', 'ES'],
|
|
3
|
+
defaultLocale: 'ES',
|
|
4
|
+
|
|
5
|
+
ui: {
|
|
6
|
+
back: ['Back', 'Regresar'],
|
|
7
|
+
cancel: ['Cancel', 'Cancelar'],
|
|
8
|
+
home: ['Home', 'Inicio'],
|
|
9
|
+
notFound: ['Not Found', 'Extraviado'],
|
|
10
|
+
ok: ['OK', 'Aceptar'],
|
|
11
|
+
signIn: ['Sign In', 'Iniciar Sesión'],
|
|
12
|
+
signOut: ['Sign Out', 'Cerrar Sesión']
|
|
13
|
+
},
|
|
14
|
+
|
|
15
|
+
page: {
|
|
16
|
+
name: ['My name is {0} {1} {2}', 'Mi nombre es {0} {1} {2}'],
|
|
17
|
+
user: {
|
|
18
|
+
family: ['Family', 'Famlilia']
|
|
19
|
+
},
|
|
20
|
+
module: {
|
|
21
|
+
block: {
|
|
22
|
+
docker: ['docker', 'contenedor']
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg width="256" height="256" viewBox="0 0 48 48" strokeWidth="1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<defs id="defs" />
|
|
3
|
+
<path id="background" d="m 6.9596e-8,0 h 50.155103930404003 v 48 h -50.155103930404003 z" fill="#f7df1e" />
|
|
4
|
+
<path id="label"
|
|
5
|
+
d="m 14.776102,40.11225 3.673125,-2.223 c 0.70875,1.256438 1.353375,2.319562 2.899688,2.319562 1.482186,0 2.416875,-0.57975 2.416875,-2.835 v -15.337125 h 4.510687 v 15.400875 c 0,4.671937 -2.738625,6.798562 -6.73425,6.798562 -3.608437,0 -5.703001,-1.868812 -6.766313,-4.124249 m 15.950625,-0.483 3.67275,-2.126438 c 0.966938,1.578938 2.223563,2.738813 4.446562,2.738813 1.869189,0 3.060938,-0.934501 3.060938,-2.223375 0,-1.5465 -1.224375,-2.094376 -3.286499,-2.99625 l -1.127439,-0.48375 c -3.254437,-1.385062 -5.413124,-3.125063 -5.413124,-6.798188 0,-3.38325 2.577562,-5.961 6.605249,-5.961 2.867626,0 4.929751,0.999001 6.411751,3.608813 l -3.51225,2.255625 c -0.773438,-1.385438 -1.610813,-1.933125 -2.899688,-1.933125 -1.321124,0 -2.158875,0.83775 -2.158875,1.933125 0,1.353187 0.837751,1.90125 2.770875,2.739 l 1.127625,0.483187 c 3.834375,1.643438 5.993063,3.318751 5.993063,7.088251 0,4.060124 -3.18975,6.283124 -7.475063,6.283124 -4.188562,0 -6.895125,-1.997625 -8.216062,-4.607625" />
|
|
6
|
+
</svg>
|
|
Binary file
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { useRef } from 'react'
|
|
2
|
+
import './style.css'
|
|
3
|
+
import { css, startViewTransition } from 'nextia'
|
|
4
|
+
|
|
5
|
+
export default function Counter({
|
|
6
|
+
name,
|
|
7
|
+
value,
|
|
8
|
+
className,
|
|
9
|
+
style,
|
|
10
|
+
animation = 'count',
|
|
11
|
+
onChange
|
|
12
|
+
}) {
|
|
13
|
+
const ref = useRef()
|
|
14
|
+
|
|
15
|
+
return (
|
|
16
|
+
<article
|
|
17
|
+
className={css('Counter-component', className)}
|
|
18
|
+
style={style}
|
|
19
|
+
name={name}
|
|
20
|
+
>
|
|
21
|
+
<button
|
|
22
|
+
type="button"
|
|
23
|
+
onClick={(e) => {
|
|
24
|
+
startViewTransition(onChange(e), ref.current, animation)
|
|
25
|
+
}}
|
|
26
|
+
>
|
|
27
|
+
Increment
|
|
28
|
+
</button>
|
|
29
|
+
|
|
30
|
+
<span ref={ref}>{value}</span>
|
|
31
|
+
</article>
|
|
32
|
+
)
|
|
33
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { I18n } from 'nextia'
|
|
2
|
+
|
|
3
|
+
export default function Messages({ name, className, style }) {
|
|
4
|
+
return (
|
|
5
|
+
<article className={className} style={style} name={name}>
|
|
6
|
+
Message-component :{' '}
|
|
7
|
+
<span>
|
|
8
|
+
<I18n value="page.user.family" />
|
|
9
|
+
</span>
|
|
10
|
+
</article>
|
|
11
|
+
)
|
|
12
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { useFx } from 'nextia'
|
|
2
|
+
|
|
3
|
+
export default function UiTranslate({ className, style }) {
|
|
4
|
+
const { context } = useFx()
|
|
5
|
+
|
|
6
|
+
const { currentLocale, locales } = context.state.i18n
|
|
7
|
+
const { changeI18n } = context.fx
|
|
8
|
+
|
|
9
|
+
return (
|
|
10
|
+
<article className={className} style={style}>
|
|
11
|
+
<select value={currentLocale} onChange={changeI18n}>
|
|
12
|
+
{locales.map((e) => (
|
|
13
|
+
<option key={e} value={e} className="m-2">
|
|
14
|
+
{e}
|
|
15
|
+
</option>
|
|
16
|
+
))}
|
|
17
|
+
</select>
|
|
18
|
+
</article>
|
|
19
|
+
)
|
|
20
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8" />
|
|
6
|
+
<title>%PUBLIC_TITLE%</title>
|
|
7
|
+
<link rel="shortcut icon" href="logo.svg" />
|
|
8
|
+
<meta name="version" content="%VERSION%" />
|
|
9
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
|
10
|
+
<link rel="stylesheet" href="theme/index.css" />
|
|
11
|
+
<script type="module" src="index.jsx"></script>
|
|
12
|
+
</head>
|
|
13
|
+
|
|
14
|
+
<body>
|
|
15
|
+
<div id="root"></div>
|
|
16
|
+
</body>
|
|
17
|
+
|
|
18
|
+
</html>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { css, env, useFx } from 'nextia'
|
|
2
|
+
import { useEffect } from 'react'
|
|
3
|
+
import functions from './functions'
|
|
4
|
+
import './style.css'
|
|
5
|
+
|
|
6
|
+
export default function EnvPage() {
|
|
7
|
+
const { state, fx } = useFx(functions)
|
|
8
|
+
|
|
9
|
+
// env
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
console.log('env:', env)
|
|
12
|
+
}, [])
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<section className={css('EnvPage', '')}>
|
|
16
|
+
<br />
|
|
17
|
+
<br />
|
|
18
|
+
|
|
19
|
+
<div style={{ display: 'flex' }}>
|
|
20
|
+
<pre style={{ margin: '0 50px 0 50px' }}>
|
|
21
|
+
env = {JSON.stringify(env, undefined, 2)}
|
|
22
|
+
</pre>
|
|
23
|
+
</div>
|
|
24
|
+
</section>
|
|
25
|
+
)
|
|
26
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import i18nFile from 'assets/i18n'
|
|
2
|
+
|
|
3
|
+
const initialState = {
|
|
4
|
+
i18n: {
|
|
5
|
+
currentLocale:
|
|
6
|
+
window.localStorage.getItem('i18n') || i18nFile.defaultLocale,
|
|
7
|
+
locales: i18nFile.locales
|
|
8
|
+
},
|
|
9
|
+
loading: false,
|
|
10
|
+
num: 0
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
function changeI18n({ payload, set }) {
|
|
14
|
+
const { value } = payload.target
|
|
15
|
+
set({ i18n: { currentLocale: value } })
|
|
16
|
+
window.localStorage.setItem('i18n', value)
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
function increment({ state, set }) {
|
|
20
|
+
set({ num: state.num + 1 })
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
function decrement({ state, set }) {
|
|
24
|
+
set({ num: state.num - 1 })
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
function zero({ payload, set }) {
|
|
28
|
+
set({ num: payload.value })
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export default {
|
|
32
|
+
initialState,
|
|
33
|
+
changeI18n,
|
|
34
|
+
increment,
|
|
35
|
+
decrement,
|
|
36
|
+
zero
|
|
37
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
const initialState = {
|
|
2
|
+
channel: 7,
|
|
3
|
+
msg: 'https://sinuhe.dev',
|
|
4
|
+
data: { user: 'Sinuhe MB' },
|
|
5
|
+
myArray: ['A', 'B', 'C'],
|
|
6
|
+
setNameValue: 'name value',
|
|
7
|
+
form: {
|
|
8
|
+
funny: false,
|
|
9
|
+
gender: 'M',
|
|
10
|
+
name: {
|
|
11
|
+
firstName: 'Sinuhe',
|
|
12
|
+
lastName: 'Maceda'
|
|
13
|
+
},
|
|
14
|
+
year: 33,
|
|
15
|
+
moreArray: [[[50, 40, 10]]]
|
|
16
|
+
},
|
|
17
|
+
ls: {
|
|
18
|
+
users: [
|
|
19
|
+
{
|
|
20
|
+
name: 'sinuhe',
|
|
21
|
+
year: 33
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
name: 'alberto',
|
|
25
|
+
year: 20
|
|
26
|
+
}
|
|
27
|
+
]
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function increment({ state, set }) {
|
|
32
|
+
set({ channel: state.channel + 1 })
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function decrement({ state, set }) {
|
|
36
|
+
set({ channel: state.channel - 1 })
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export default {
|
|
40
|
+
initialState,
|
|
41
|
+
increment,
|
|
42
|
+
decrement
|
|
43
|
+
}
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
import { useEffect } from 'react'
|
|
2
|
+
import './style.css'
|
|
3
|
+
import { css, useFx } from 'nextia'
|
|
4
|
+
import { sum } from 'utils'
|
|
5
|
+
import functions from './functions'
|
|
6
|
+
|
|
7
|
+
export default function HomePage() {
|
|
8
|
+
const { state, initialState, fx, context } = useFx(functions)
|
|
9
|
+
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
console.info(sum(10, 10))
|
|
12
|
+
}, [])
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<section className={css('HomePage', 'container')}>
|
|
16
|
+
<div>
|
|
17
|
+
<div>
|
|
18
|
+
<p>set</p>
|
|
19
|
+
<button
|
|
20
|
+
type="button"
|
|
21
|
+
className=""
|
|
22
|
+
onClick={() => fx.set({ setNameValue: 'set 1 level' })}
|
|
23
|
+
>
|
|
24
|
+
set Value
|
|
25
|
+
</button>
|
|
26
|
+
<button
|
|
27
|
+
type="button"
|
|
28
|
+
onClick={() =>
|
|
29
|
+
fx.set({
|
|
30
|
+
form: {
|
|
31
|
+
name: {
|
|
32
|
+
firstName: 'ppppppppppp',
|
|
33
|
+
lastName: '***********'
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
})
|
|
37
|
+
}
|
|
38
|
+
>
|
|
39
|
+
set Json
|
|
40
|
+
</button>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<div>
|
|
44
|
+
<button
|
|
45
|
+
type="button"
|
|
46
|
+
onClick={() => fx.set({ 'form.name.lastName': 'BOUCHAN' })}
|
|
47
|
+
>
|
|
48
|
+
set mulit level (Value)
|
|
49
|
+
</button>
|
|
50
|
+
|
|
51
|
+
<button
|
|
52
|
+
type="button"
|
|
53
|
+
onClick={() =>
|
|
54
|
+
fx.set({
|
|
55
|
+
'form.name': { firstName: 'SINUHE', lastName: 'MACEDA' }
|
|
56
|
+
})
|
|
57
|
+
}
|
|
58
|
+
>
|
|
59
|
+
set mulit level (Json)
|
|
60
|
+
</button>
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
|
+
<div>
|
|
64
|
+
<p>Show and Hide :</p>
|
|
65
|
+
<button type="button" onClick={() => fx.show('form.funny')}>
|
|
66
|
+
show
|
|
67
|
+
</button>
|
|
68
|
+
<button type="button" onClick={() => fx.hide('form.funny')}>
|
|
69
|
+
hide
|
|
70
|
+
</button>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<div>
|
|
74
|
+
<p>Reset :</p>
|
|
75
|
+
<button type="button" onClick={() => fx.reset('ls')}>
|
|
76
|
+
Reset (ls)
|
|
77
|
+
</button>
|
|
78
|
+
<button type="button" onClick={() => fx.reset('form.name')}>
|
|
79
|
+
Reset (form.name)
|
|
80
|
+
</button>
|
|
81
|
+
<button
|
|
82
|
+
type="button"
|
|
83
|
+
onClick={() => fx.reset(['channel', 'msg', 'form.name'])}
|
|
84
|
+
>
|
|
85
|
+
Reset ([channel,msg,form.name])
|
|
86
|
+
</button>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<div>
|
|
90
|
+
<p>Simple actions/Reducer:</p>
|
|
91
|
+
<button type="button" onClick={(e) => fx.increment(e)}>
|
|
92
|
+
+
|
|
93
|
+
</button>
|
|
94
|
+
<button type="button" onClick={(e) => fx.decrement(e)}>
|
|
95
|
+
-
|
|
96
|
+
</button>
|
|
97
|
+
|
|
98
|
+
<button
|
|
99
|
+
type="button"
|
|
100
|
+
onClick={() =>
|
|
101
|
+
fx.set({
|
|
102
|
+
channel: 256,
|
|
103
|
+
msg: 256,
|
|
104
|
+
data: { user: 256 },
|
|
105
|
+
myArray: ['256', '256', '256'],
|
|
106
|
+
setNameValue: '256',
|
|
107
|
+
form: {
|
|
108
|
+
// funny: 256,
|
|
109
|
+
// gender: '256',
|
|
110
|
+
name: {
|
|
111
|
+
firstName: '256',
|
|
112
|
+
lastName: '256'
|
|
113
|
+
},
|
|
114
|
+
year: 256,
|
|
115
|
+
moreArray: [[[256, 256, 256]]]
|
|
116
|
+
},
|
|
117
|
+
ls: {
|
|
118
|
+
users: [
|
|
119
|
+
{
|
|
120
|
+
name: '256',
|
|
121
|
+
year: 256
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
name: '256',
|
|
125
|
+
year: 256
|
|
126
|
+
}
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
})
|
|
130
|
+
}
|
|
131
|
+
>
|
|
132
|
+
256
|
|
133
|
+
</button>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
<div>
|
|
137
|
+
<p>onChange:</p>
|
|
138
|
+
|
|
139
|
+
{/* input text */}
|
|
140
|
+
<input
|
|
141
|
+
type="text"
|
|
142
|
+
name="form.name.firstName"
|
|
143
|
+
value={state.form.name.firstName}
|
|
144
|
+
onChange={(evt) => fx.change(evt)}
|
|
145
|
+
/>
|
|
146
|
+
|
|
147
|
+
{/* checkbox */}
|
|
148
|
+
<input
|
|
149
|
+
type="checkbox"
|
|
150
|
+
name="form.funny"
|
|
151
|
+
checked={state.form.funny}
|
|
152
|
+
onChange={(evt) => fx.change(evt)}
|
|
153
|
+
/>
|
|
154
|
+
<label htmlFor="form.funny">Funny</label>
|
|
155
|
+
|
|
156
|
+
{/* radio */}
|
|
157
|
+
<input
|
|
158
|
+
type="radio"
|
|
159
|
+
name="form.gender"
|
|
160
|
+
value="M"
|
|
161
|
+
checked={state.form.gender === 'M'}
|
|
162
|
+
onChange={(evt) => fx.change(evt)}
|
|
163
|
+
/>
|
|
164
|
+
<label htmlFor="M">M</label>
|
|
165
|
+
<input
|
|
166
|
+
type="radio"
|
|
167
|
+
name="form.gender"
|
|
168
|
+
value="F"
|
|
169
|
+
checked={state.form.gender === 'F'}
|
|
170
|
+
onChange={(evt) => fx.change(evt)}
|
|
171
|
+
/>
|
|
172
|
+
<label htmlFor="F">F</label>
|
|
173
|
+
|
|
174
|
+
{/* select */}
|
|
175
|
+
<select name="form.year" onChange={(evt) => fx.change(evt)}>
|
|
176
|
+
<option value="20">20</option>
|
|
177
|
+
<option value="21">21</option>
|
|
178
|
+
<option value="22">22</option>
|
|
179
|
+
<option value="33">33</option>
|
|
180
|
+
</select>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
<div>
|
|
185
|
+
<div style={{ textAlign: 'center' }}>
|
|
186
|
+
<button type="button" onClick={() => fx.reset()}>
|
|
187
|
+
RESET
|
|
188
|
+
</button>
|
|
189
|
+
<button
|
|
190
|
+
type="button"
|
|
191
|
+
onClick={() => {
|
|
192
|
+
if (context.state.loading) context.fx.hide('loading')
|
|
193
|
+
else context.fx.show('loading')
|
|
194
|
+
}}
|
|
195
|
+
>
|
|
196
|
+
loading
|
|
197
|
+
</button>
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
<div style={{ display: 'flex' }}>
|
|
201
|
+
<pre style={{ margin: '0 50px 0 50px' }}>
|
|
202
|
+
state = {JSON.stringify(state, undefined, 2)}
|
|
203
|
+
</pre>
|
|
204
|
+
<pre style={{ margin: '0 50px 0 50px' }}>
|
|
205
|
+
initialState = {JSON.stringify(initialState, undefined, 2)}
|
|
206
|
+
</pre>
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
</section>
|
|
210
|
+
)
|
|
211
|
+
}
|