npm - nextia - Versions diffs - 6.1.1 → 7.0.0 - Mend

nextia 6.1.1 → 7.0.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.

Files changed (76) hide show

package/README.md +1 -1
package/biome.json +21 -0
package/package.json +13 -4
package/src/bin.js +240 -0
package/src/lib.js +2 -2
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/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.jpg +0 -0
package/template/src/components/Counter/index.jsx +34 -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 +10 -0
package/template/src/components/ui/I18n/index.jsx +23 -0
package/template/src/components/ui/Icon/index.jsx +50 -0
package/template/src/components/ui/Link/index.jsx +12 -0
package/template/src/components/ui/Svg/index.jsx +54 -0
package/template/src/components/ui/Translate/index.jsx +18 -0
package/template/src/index.html +18 -0
package/template/src/index.jsx +4 -0
package/template/src/pages/counter/functions.js +6 -0
package/template/src/pages/counter/index.jsx +51 -0
package/template/src/pages/counter/style.css +2 -0
package/template/src/pages/env/functions.js +3 -0
package/template/src/pages/env/index.jsx +27 -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 +20 -0
package/template/src/pages/icons/style.css +5 -0
package/template/src/pages/images/functions.js +3 -0
package/template/src/pages/images/index.jsx +20 -0
package/template/src/pages/images/style.css +8 -0
package/template/src/pages/index.jsx +114 -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 +36 -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/services/api.js +9 -0
package/template/src/services/http.js +40 -0
package/template/src/theme/animations.css +72 -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/exit.svg +69 -0
package/template/src/theme/icons/icons.svg +126 -0
package/template/src/theme/index.css +39 -0
package/template/src/theme/util.css +27 -0
package/template/src/utils/hooks.js +49 -0
package/template/src/utils/index.js +19 -0
package/template/test/index.test.js +12 -0
package/template/vite.config.js +97 -0

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 ADDED Viewed

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

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

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

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

@@ -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 ADDED Viewed

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

package/template/src/pages/functions.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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>
+  )
+}

package/template/src/pages/home/style.css ADDED Viewed

@@ -0,0 +1,51 @@
+.HomePage {
+  background-color: #21252b;
+  &.container {
+    display: flex;
+  }
+  p {
+    padding-left: 25px;
+    margin: 0px;
+  }
+  pre {
+    color: gray;
+    font-size: 12px;
+    max-height: 700px;
+    overflow: auto;
+  }
+  button {
+    margin: 12px;
+    height: 50px;
+    width: 200px;
+  }
+  input[type="text"] {
+    margin: 20px;
+    height: 30px;
+    width: 180px;
+  }
+  input[type="checkbox"] {
+    height: 30px;
+    width: 30px;
+  }
+  input[type="radio"] {
+    height: 30px;
+    width: 30px;
+  }
+  select {
+    margin-left: 40px;
+    height: 30px;
+    width: 180px;
+  }
+  .my-css {
+    font-size: 20px;
+  }
+}

package/template/src/pages/http/not-found/index.jsx ADDED Viewed

@@ -0,0 +1,10 @@
+import { css } from 'nextia'
+import './style.css'
+export default function HttpNotFoundPage() {
+  return (
+    <section className={css('HttpNotFoundPage')}>
+      <h5>Not Found</h5>
+    </section>
+  )
+}

package/template/src/pages/http/not-found/style.css ADDED Viewed

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

package/template/src/pages/icons/functions.js ADDED Viewed

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

package/template/src/pages/icons/index.jsx ADDED Viewed

@@ -0,0 +1,20 @@
+import { Icon, Svg } from 'components'
+import { css, useFx } from 'nextia'
+import functions from './functions'
+import './style.css'
+import exitSvg from 'theme/icons/exit.svg?raw'
+export default function IconsPage() {
+  const { state, fx } = useFx(functions)
+  return (
+    <section className={css('IconsPage', '')}>
+      <Icon id="globe" width="32" />
+      <Icon id="camera" width="32" />
+      <Icon id="video" width="32" />
+      <br />
+      <br />
+      <Svg src={exitSvg} width="32" />
+    </section>
+  )
+}

package/template/src/pages/icons/style.css ADDED Viewed

@@ -0,0 +1,5 @@
+.IconsPage {
+  svg {
+    margin-right: 10px;
+  }
+}

package/template/src/pages/images/functions.js ADDED Viewed

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

package/template/src/pages/images/index.jsx ADDED Viewed

@@ -0,0 +1,20 @@
+import image from 'assets/img/image.jpg'
+import { css, useFx } from 'nextia'
+import functions from './functions'
+import './style.css'
+export default function ImagesPage() {
+  const { state, fx } = useFx(functions)
+  return (
+    <section className={css('ImagesPage', '')}>
+      <br />
+      <p>css-img</p>
+      <div className="css-img" />
+      <br />
+      <p>img</p>
+      <img src={image} alt="img" height={200} />
+    </section>
+  )
+}

package/template/src/pages/images/style.css ADDED Viewed

@@ -0,0 +1,8 @@
+.ImagesPage {
+  .css-img {
+    background: url("assets/img/image.jpg") no-repeat;
+    height: 200px;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+}