nextia 6.0.4 → 7.0.0

package/template/src/components/Counter/index.jsx

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

package/template/src/components/Counter/style.css

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

package/template/src/components/Message/index.jsx

@@ -0,0 +1,12 @@
+import { I18n } from 'components'
+
+export default function Messages({ name, className, style }) {
+  return (
+    <article className={className} style={style} name={name}>
+      Message-component :{' '}
+      <span>
+        <I18n value="page.user.family" />
+      </span>
+    </article>
+  )
+}

package/template/src/components/index.js

@@ -0,0 +1,10 @@
+import Counter from './Counter'
+import Message from './Message'
+// ui
+import I18n from './ui/I18n'
+import Icon from './ui/Icon'
+import Link from './ui/Link'
+import Svg from './ui/Svg'
+import Translate from './ui/Translate'
+
+export { Counter, I18n, Icon, Link, Message, Svg, Translate }

package/template/src/components/ui/I18n/index.jsx

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

package/template/src/components/ui/Icon/index.jsx

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react'
+import icons from 'theme/icons/icons.svg?raw'
+
+export default function UiIcon({
+  id,
+  className,
+  style,
+  width = '48',
+  height,
+  viewBox = '0 0 48 48',
+  fill = 'none',
+  color = 'currentColor',
+  stroke = 'currentColor',
+  strokeWidth = '2',
+  strokeLinecap = 'round',
+  strokeLinejoin = 'round',
+  ...props
+}) {
+  const ref = useRef()
+
+  useEffect(() => {
+    const svg = new DOMParser()
+      .parseFromString(icons, 'image/svg+xml')
+      .documentElement.getElementById(id)
+
+    if (svg) {
+      ref.current.innerHTML = svg.innerHTML
+    }
+  }, [id])
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      ref={ref}
+      id={id}
+      className={className}
+      style={style}
+      width={width}
+      height={height}
+      viewBox={viewBox}
+      fill={fill}
+      color={color}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeLinecap={strokeLinecap}
+      strokeLinejoin={strokeLinejoin}
+      {...props}
+    />
+  )
+}

package/template/src/components/ui/Link/index.jsx

@@ -0,0 +1,12 @@
+export default function UiLink({ 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/template/src/components/ui/Svg/index.jsx

@@ -0,0 +1,54 @@
+import { useEffect, useRef } from 'react'
+
+export default function UiSvg({
+  src,
+  width = '48',
+  height,
+  viewBox = '0 0 48 48',
+  fill = 'none',
+  color = 'currentColor',
+  stroke = 'currentColor',
+  strokeWidth = '2',
+  strokeLinecap = 'round',
+  strokeLinejoin = 'round'
+}) {
+  const ref = useRef()
+
+  useEffect(() => {
+    if (!ref.current) return
+
+    const svg = new DOMParser()
+      .parseFromString(src, 'image/svg+xml')
+      .querySelector('svg')
+
+    svg.setAttribute('width', width)
+    svg.setAttribute('height', height ?? width)
+    svg.setAttribute('viewBox', viewBox)
+    svg.setAttribute('fill', fill)
+    svg.setAttribute('color', color)
+    svg.setAttribute('stroke', stroke)
+    svg.setAttribute('stroke-width', strokeWidth)
+    svg.setAttribute('stroke-linecap', strokeLinecap)
+    svg.setAttribute('stroke-linejoin', strokeLinejoin)
+
+    const shadow =
+      ref.current.shadowRoot ?? ref.current.attachShadow({ mode: 'open' })
+    shadow.innerHTML = svg.outerHTML
+
+    ref.current.style.width = `${width}px`
+    ref.current.style.height = `${height ?? width}px`
+  }, [
+    src,
+    width,
+    height,
+    viewBox,
+    fill,
+    color,
+    stroke,
+    strokeWidth,
+    strokeLinecap,
+    strokeLinejoin
+  ])
+
+  return <div ref={ref} />
+}

package/template/src/components/ui/Translate/index.jsx

@@ -0,0 +1,18 @@
+export default function UiTranslate({
+  value,
+  onChange = () => {},
+  className,
+  style
+}) {
+  return (
+    <article className={className} style={style}>
+      <select value={value.currentLocale} onChange={onChange}>
+        {value.locales.map((e) => (
+          <option key={e} value={e} className="m-2">
+            {e}
+          </option>
+        ))}
+      </select>
+    </article>
+  )
+}

package/template/src/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<title>%PUBLIC_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="theme/index.css" />
+	<script type="module" src="index.jsx"></script>
+</head>
+
+<body>
+	<div id="root"></div>
+</body>
+
+</html>

package/template/src/index.jsx

@@ -0,0 +1,4 @@
+import { createRoot } from 'react-dom/client'
+import Pages from './pages'
+
+createRoot(document.getElementById('root')).render(<Pages />)

package/template/src/pages/counter/functions.js

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

package/template/src/pages/counter/index.jsx

@@ -0,0 +1,51 @@
+import { Counter } from 'components'
+import { css, useFx } from 'nextia'
+import functions from './functions'
+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/template/src/pages/counter/style.css

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

package/template/src/pages/env/functions.js

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

package/template/src/pages/env/index.jsx

@@ -0,0 +1,27 @@
+import { css, useFx } from 'nextia'
+import { useEffect } from 'react'
+import { env } from 'utils'
+import functions from './functions'
+import './style.css'
+
+export default function EnvPage() {
+  const { state, fx } = useFx(functions)
+
+  // env
+  useEffect(() => {
+    console.log('env:', 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/template/src/pages/env/style.css

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

package/template/src/pages/functions.js

@@ -0,0 +1,37 @@
+import i18nFile from 'assets/i18n'
+
+const initialState = {
+  i18n: {
+    currentLocale:
+      window.localStorage.getItem('i18n') || i18nFile.defaultLocale,
+    locales: i18nFile.locales
+  },
+  loading: false,
+  num: 0
+}
+
+function changeI18n({ payload, set }) {
+  const { value } = payload.target
+  set({ i18n: { currentLocale: value } })
+  window.localStorage.setItem('i18n', value)
+}
+
+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,
+  changeI18n,
+  increment,
+  decrement,
+  zero
+}

package/template/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/template/src/pages/home/index.jsx

@@ -0,0 +1,211 @@
+import { useEffect } from 'react'
+import './style.css'
+import { css, useFx } from 'nextia'
+import { sum } from 'utils'
+import functions from './functions'
+
+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
+            type="button"
+            className=""
+            onClick={() => fx.set({ setNameValue: 'set 1 level' })}
+          >
+            set Value
+          </button>
+          <button
+            type="button"
+            onClick={() =>
+              fx.set({
+                form: {
+                  name: {
+                    firstName: 'ppppppppppp',
+                    lastName: '***********'
+                  }
+                }
+              })
+            }
+          >
+            set Json
+          </button>
+        </div>
+
+        <div>
+          <button
+            type="button"
+            onClick={() => fx.set({ 'form.name.lastName': 'BOUCHAN' })}
+          >
+            set mulit level (Value)
+          </button>
+
+          <button
+            type="button"
+            onClick={() =>
+              fx.set({
+                'form.name': { firstName: 'SINUHE', lastName: 'MACEDA' }
+              })
+            }
+          >
+            set mulit level (Json)
+          </button>
+        </div>
+
+        <div>
+          <p>Show and Hide :</p>
+          <button type="button" onClick={() => fx.show('form.funny')}>
+            show
+          </button>
+          <button type="button" onClick={() => fx.hide('form.funny')}>
+            hide
+          </button>
+        </div>
+
+        <div>
+          <p>Reset :</p>
+          <button type="button" onClick={() => fx.reset('ls')}>
+            Reset (ls)
+          </button>
+          <button type="button" onClick={() => fx.reset('form.name')}>
+            Reset (form.name)
+          </button>
+          <button
+            type="button"
+            onClick={() => fx.reset(['channel', 'msg', 'form.name'])}
+          >
+            Reset ([channel,msg,form.name])
+          </button>
+        </div>
+
+        <div>
+          <p>Simple actions/Reducer:</p>
+          <button type="button" onClick={(e) => fx.increment(e)}>
+            +
+          </button>
+          <button type="button" onClick={(e) => fx.decrement(e)}>
+            -
+          </button>
+
+          <button
+            type="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 type="button" onClick={() => fx.reset()}>
+            RESET
+          </button>
+          <button
+            type="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>
+  )
+}