nextia 3.0.2 → 4.0.0

package/create-nextia/templates/vitejs/src/assets/theme/util.css

@@ -0,0 +1,71 @@
+/**
+ * Fonts
+ */
+
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: swap;
+  font-weight: bold;
+  src: url('assets/fonts/Roboto-Regular.ttf');
+}
+
+/**
+ * Scrollbar
+ */
+
+@media (pointer: fine) {
+  ::-webkit-scrollbar {
+    width: 14px;
+    height: 14px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 14px;
+    border: 3px solid transparent;
+    background-clip: content-box;
+    background-color: var(--primary-color);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--primary-color-50);
+  }
+
+  ::-webkit-scrollbar,
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+}
+
+/**
+ * Media query
+ */
+
+:root {
+  --sm: false;
+  --md: false;
+  --lg: false;
+  --xl: false;
+  --xxl: false;
+
+  @media (640px <=width <768px) {
+    --sm: true;
+  }
+
+  @media (768px <=width <1024px) {
+    --md: true;
+  }
+
+  @media (1024px <=width <1280px) {
+    --lg: true;
+  }
+
+  @media (1280px <=width < 1536px) {
+    --xl: true;
+  }
+
+  @media (width >=1536px) {
+    --xxl: true;
+  }
+}

package/create-nextia/templates/vitejs/src/components/Counter/index.jsx

@@ -0,0 +1,38 @@
+import { useRef } from 'react'
+import './style.css'
+import { css } from 'nextia'
+import { startViewTransition } from 'utils'
+
+export default function Counter ({
+  children,
+  name,
+  value,
+  type,
+  className,
+  style,
+  readOnly,
+  disabled,
+  animation = 'count',
+  onChange
+}) {
+  const ref = useRef()
+
+  return (
+    <article
+      className={css('Counter-component', className)}
+      style={style}
+      name={name}
+
+    >
+      <button
+        onClick={e => {
+          startViewTransition(onChange(e), ref.current, animation)
+        }}
+      >
+        Increment
+      </button>
+
+      <label ref={ref}>{value}</label>
+    </article>
+  )
+}

package/create-nextia/templates/vitejs/src/components/Counter/style.css

@@ -0,0 +1,5 @@
+.Counter-component {
+	label {
+		font-size: 60px;
+	}
+}

package/create-nextia/templates/vitejs/src/components/Icon/index.jsx

@@ -0,0 +1,51 @@
+import { useEffect, useRef } from 'react'
+import icons from 'assets/icon/icons.svg?raw'
+import { css } from 'nextia'
+
+export default function Icon ({
+  value,
+  className,
+  style,
+  width = '48',
+  height,
+  viewBox = '0 0 48 48',
+  fill = 'none',
+  stroke = 'currentColor',
+  strokeWidth = '2',
+  strokeLinecap = 'round',
+  strokeLinejoin = 'round',
+  ...props
+}) {
+  const ref = useRef()
+
+  useEffect(() => {
+    const svg = new window.DOMParser().parseFromString(icons, 'image/svg+xml')
+      .documentElement.getElementById(value)
+
+    if (svg) {
+      if (svg.getAttribute('x-animation') === 'true') {
+        import(`assets/icon/${value}.css`).catch(() => {})
+      }
+      ref.current.innerHTML = svg.innerHTML
+    }
+  }, [value])
+
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      ref={ref}
+      id={value}
+      className={css('Icon-component', className)}
+      style={style}
+      width={width}
+      height={height}
+      viewBox={viewBox}
+      fill={fill}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeLinecap={strokeLinecap}
+      strokeLinejoin={strokeLinejoin}
+      {...props}
+    />
+  )
+}

package/create-nextia/templates/vitejs/src/components/Link/index.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default function Link ({ children, href, value = {}, ...props }) {
+  href ??= window.location.hash.split('?')[0]
+  value = Object.keys(value).length ? '?' + new URLSearchParams(value).toString() : ''
+
+  return (
+    <a href={href + value} {...props}>
+      {children}
+    </a>
+  )
+}

package/create-nextia/templates/vitejs/src/components/Translation/index.jsx

@@ -0,0 +1,12 @@
+import React, { useEffect } from 'react'
+import './style.css'
+import { css } from 'nextia'
+import { I18n } from 'containers'
+
+export default function Translation ({ children, name, value, type, className, style, readOnly, disabled, onClick = () => {} }) {
+  return (
+    <article className={css('Translation-component', className)} style={style} name={name}>
+      TranslationComponent-component : <span><I18n value='page.user.family' /></span>
+    </article>
+  )
+}

package/create-nextia/templates/vitejs/src/components/Translation/style.css

@@ -0,0 +1 @@
+.Translation-component {}

package/create-nextia/templates/vitejs/src/components/index.js

@@ -0,0 +1,6 @@
+import Counter from './Counter'
+import Translation from './Translation'
+import Link from './Link'
+import Icon from './Icon'
+
+export { Counter, Translation, Icon, Link }

package/create-nextia/templates/vitejs/src/containers/I18n/index.jsx

@@ -0,0 +1,23 @@
+import { useFx } from 'nextia'
+import i18nFile from 'assets/i18n'
+
+export default function I18n ({ value, args = [] }) {
+  const { context } = useFx()
+
+  try {
+    let text = value.split('.').reduce((ac, el) => ac[el], i18nFile)
+    text = text[i18nFile.locales.indexOf(context.state.i18n)]
+
+    if (args) {
+      text = text.replace(
+        /([{}])\\1|[{](.*?)(?:!(.+?))?[}]/g,
+        (match, literal, number) => args[number] || match
+      )
+    }
+
+    return text
+  } catch (e) {
+    console.error('Error in [il8n] => ' + value)
+    return value
+  }
+}

package/create-nextia/templates/vitejs/src/containers/Translate/index.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { useFx, css } from 'nextia'
+import i18nFile from 'assets/i18n'
+import './style.css'
+
+export default function Translate ({ className, style }) {
+  const { context } = useFx()
+
+  return (
+    <article className={css('Translate-container', className, '')} style={style}>
+
+      <select
+        name='i18n'
+        value={context.state.i18n}
+        onChange={e => {
+          const { value } = e.target
+          context.fx.set({ i18n: value })
+          window.localStorage.setItem('i18n', value)
+        }}
+      >
+        {i18nFile.locales.map(e => (
+          <option key={e} value={e} className='m-2'>
+            {e}
+          </option>
+        ))}
+      </select>
+
+    </article>
+  )
+}

package/create-nextia/templates/vitejs/src/containers/Translate/style.css

@@ -0,0 +1,2 @@
+.Translate-container  {
+}

package/create-nextia/templates/vitejs/src/containers/index.js

@@ -0,0 +1,7 @@
+import I18n from './I18n'
+import Translate from './Translate'
+
+export {
+  I18n,
+  Translate
+}

package/create-nextia/templates/vitejs/src/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="utf-8" />
+	<title>%VITE_TITLE%</title>
+	<link rel="shortcut icon" href="logo.svg" />
+	<meta name="version" content="%VERSION%" />
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
+	<link rel="stylesheet" href="assets/theme/index.css" />
+	<script type="module" src="index.jsx"></script>
+</head>
+
+<body>
+	<div id="root"></div>
+</body>
+
+</html>

package/create-nextia/templates/vitejs/src/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import Pages from './pages'
+import { env } from 'utils'
+import { logger } from 'nextia'
+
+logger(env.VITE_LOGGER)
+
+createRoot(document.getElementById('root')).render(<Pages />)

package/create-nextia/templates/vitejs/src/pages/counter/functions.js

@@ -0,0 +1,6 @@
+const initialState = {
+  count: 1,
+  count2: 1
+}
+
+export default { initialState }

package/create-nextia/templates/vitejs/src/pages/counter/index.jsx

@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react'
+import { useFx, css } from 'nextia'
+import functions from './functions'
+import { Counter } from 'components'
+import './style.css'
+
+export default function CounterPage () {
+  const { state, fx } = useFx(functions)
+
+  return (
+    <section className={css('CounterPage', '', 'class-test', 'class-test', {}, null, true, false, [], { 'css-false': false }, undefined, { 'css-true': true }, { 'css-true': true })}>
+
+      Counters
+
+      <div className={css(null)} />
+      <div className={css(undefined)} />
+      <div className={css([])} />
+      <div className={css({})} />
+      <div className={css()} />
+
+      <Counter
+        value={state.count}
+        animation='count'
+        onChange={() => {
+          fx.set({ count: state.count + 1 })
+        }}
+      />
+      <br />
+      <br />
+      <Counter
+        value={state.count2}
+        animation='count2'
+        onChange={() => {
+          fx.set({ count2: state.count2 + 10 })
+        }}
+      />
+    </section>
+  )
+}

package/create-nextia/templates/vitejs/src/pages/counter/style.css

@@ -0,0 +1 @@
+.CounterPage {}

package/create-nextia/templates/vitejs/src/pages/env/functions.js

@@ -0,0 +1,4 @@
+const initialState = {
+}
+
+export default { initialState }

package/create-nextia/templates/vitejs/src/pages/env/index.jsx

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react'
+import { useFx, css } from 'nextia'
+import functions from './functions'
+import { env } from 'utils'
+import './style.css'
+
+export default function EnvPage () {
+  const { state, fx } = useFx(functions)
+
+  // env
+  useEffect(() => {
+    console.log(env)
+  }, [])
+
+  return (
+    <section className={css('EnvPage', '')}>
+
+      <br />
+      <br />
+
+      <div style={{ display: 'flex' }}>
+        <pre style={{ margin: '0 50px 0 50px' }}>
+          env = {JSON.stringify(env, undefined, 2)}
+        </pre>
+      </div>
+    </section>
+  )
+}

package/create-nextia/templates/vitejs/src/pages/env/style.css

@@ -0,0 +1 @@
+.EnvPage {}

package/create-nextia/templates/vitejs/src/pages/functions.js

@@ -0,0 +1,27 @@
+import i18nFile from 'assets/i18n'
+
+const initialState = {
+  i18n: window.localStorage.getItem('i18n') || i18nFile.defaultLocale,
+  loading: false,
+  //
+  num: 0
+}
+
+function increment ({ state, set }) {
+  set({ num: state.num + 1 })
+}
+
+function decrement ({ state, set }) {
+  set({ num: state.num - 1 })
+}
+
+function zero ({ payload, set }) {
+  set({ num: payload.value })
+}
+
+export default {
+  initialState,
+  increment,
+  decrement,
+  zero
+}

package/create-nextia/templates/vitejs/src/pages/home/functions.js

@@ -0,0 +1,43 @@
+const initialState = {
+  channel: 7,
+  msg: 'https://sinuhe.dev',
+  data: { user: 'Sinuhe MB' },
+  myArray: ['A', 'B', 'C'],
+  setNameValue: 'name value',
+  form: {
+    funny: false,
+    gender: 'M',
+    name: {
+      firstName: 'Sinuhe',
+      lastName: 'Maceda'
+    },
+    year: 33,
+    moreArray: [[[50, 40, 10]]]
+  },
+  ls: {
+    users: [
+      {
+        name: 'sinuhe',
+        year: 33
+      },
+      {
+        name: 'alberto',
+        year: 20
+      }
+    ]
+  }
+}
+
+function increment ({ state, set }) {
+  set({ channel: state.channel + 1 })
+}
+
+function decrement ({ state, set }) {
+  set({ channel: state.channel - 1 })
+}
+
+export default {
+  initialState,
+  increment,
+  decrement
+}

package/create-nextia/templates/vitejs/src/pages/home/index.jsx

@@ -0,0 +1,182 @@
+import React, { useEffect } from 'react'
+import './style.css'
+import { useFx, css } from 'nextia'
+import functions from './functions'
+import { sum } from 'utils'
+
+export default function HomePage () {
+  const { state, initialState, fx, context } = useFx(functions)
+
+  useEffect(() => {
+    console.info(sum(10, 10))
+  }, [])
+
+  return (
+    <section className={css('HomePage', 'container')}>
+      <div>
+        <div>
+          <p>set</p>
+          <button className='' onClick={() => fx.set({ setNameValue: 'set 1 level' })}>
+            set Value
+          </button>
+          <button
+            onClick={() =>
+              fx.set({
+                form: {
+                  name: {
+                    firstName: 'ppppppppppp',
+                    lastName: '***********'
+                  }
+                }
+              })}
+          >
+            set Json
+          </button>
+        </div>
+
+        <div>
+          <button onClick={() => fx.set({ 'form.name.lastName': 'BOUCHAN' })}>
+            set mulit level (Value)
+          </button>
+
+          <button
+            onClick={() =>
+              fx.set({
+                'form.name': { firstName: 'SINUHE', lastName: 'MACEDA' }
+              })}
+          >
+            set mulit level (Json)
+          </button>
+        </div>
+
+        <div>
+          <p>Show and Hide :</p>
+          <button onClick={() => fx.show('form.funny')}>show</button>
+          <button onClick={() => fx.hide('form.funny')}>hide</button>
+        </div>
+
+        <div>
+          <p>Reset :</p>
+          <button onClick={() => fx.reset('ls')}>Reset (ls)</button>
+          <button onClick={() => fx.reset('form.name')}>
+            Reset (form.name)
+          </button>
+          <button onClick={() => fx.reset(['channel', 'msg', 'form.name'])}>
+            Reset ([channel,msg,form.name])
+          </button>
+        </div>
+
+        <div>
+          <p>Simple actions/Reducer:</p>
+          <button onClick={e => fx.increment(e)}>+</button>
+          <button onClick={e => fx.decrement(e)}>-</button>
+
+          <button
+            onClick={() =>
+              fx.set({
+                channel: 256,
+                msg: 256,
+                data: { user: 256 },
+                myArray: ['256', '256', '256'],
+                setNameValue: '256',
+                form: {
+                  // funny: 256,
+                  // gender: '256',
+                  name: {
+                    firstName: '256',
+                    lastName: '256'
+                  },
+                  year: 256,
+                  moreArray: [[[256, 256, 256]]]
+                },
+                ls: {
+                  users: [
+                    {
+                      name: '256',
+                      year: 256
+                    },
+                    {
+                      name: '256',
+                      year: 256
+                    }
+                  ]
+                }
+              })}
+          >
+            256
+          </button>
+        </div>
+
+        <div>
+          <p>onChange:</p>
+
+          {/* input text */}
+          <input
+            type='text'
+            name='form.name.firstName'
+            value={state.form.name.firstName}
+            onChange={evt => fx.change(evt)}
+          />
+
+          {/* checkbox */}
+          <input
+            type='checkbox'
+            name='form.funny'
+            checked={state.form.funny}
+            onChange={evt => fx.change(evt)}
+          />
+          <label htmlFor='form.funny'>Funny</label>
+
+          {/* radio */}
+          <input
+            type='radio'
+            name='form.gender'
+            value='M'
+            checked={state.form.gender === 'M'}
+            onChange={evt => fx.change(evt)}
+          />
+          <label htmlFor='M'>M</label>
+          <input
+            type='radio'
+            name='form.gender'
+            value='F'
+            checked={state.form.gender === 'F'}
+            onChange={evt => fx.change(evt)}
+          />
+          <label htmlFor='F'>F</label>
+
+          {/* select */}
+          <select name='form.year' onChange={evt => fx.change(evt)}>
+            <option value='20'>20</option>
+            <option value='21'>21</option>
+            <option value='22'>22</option>
+            <option value='33'>33</option>
+          </select>
+        </div>
+      </div>
+
+      <div>
+        <div style={{ textAlign: 'center' }}>
+          <button onClick={() => fx.reset()}>RESET</button>
+          <button
+            onClick={() => {
+              if (context.state.loading) context.fx.hide('loading')
+              else context.fx.show('loading')
+            }}
+          >
+            loading
+          </button>
+        </div>
+
+        <div style={{ display: 'flex' }}>
+          <pre style={{ margin: '0 50px 0 50px' }}>
+            state = {JSON.stringify(state, undefined, 2)}
+          </pre>
+          <pre style={{ margin: '0 50px 0 50px' }}>
+            initialState = {JSON.stringify(initialState, undefined, 2)}
+          </pre>
+        </div>
+      </div>
+    </section>
+  )
+}