nextia 7.0.2 → 7.0.4

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

@@ -1,211 +0,0 @@
-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

@@ -1,51 +0,0 @@
-.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

@@ -1,10 +0,0 @@
-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

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

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

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

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

@@ -1,21 +0,0 @@
-import { css, Icon, useFx } from 'nextia'
-import functions from './functions'
-import './style.css'
-
-export default function IconsPage() {
-  const { state, fx } = useFx(functions)
-
-  return (
-    <section className={css('IconsPage', '')}>
-      <article>
-        <Icon id="globe" width="32" />
-        <Icon id="camera" width="32" />
-        <Icon id="video" width="32" />
-      </article>
-
-      <article>
-        <Icon id="exit" animate width="32" />
-      </article>
-    </section>
-  )
-}

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

@@ -1,8 +0,0 @@
-.IconsPage {
-  display: flex;
-  justify-content: space-around;
-
-  svg {
-    margin-right: 10px;
-  }
-}

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

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

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

@@ -1,25 +0,0 @@
-import image from 'assets/img/image.webp'
-import { css, Svg, useFx } from 'nextia'
-import functions from './functions'
-import './style.css'
-import imageSvg from 'assets/img/image.svg?raw'
-
-export default function ImagesPage() {
-  const { state, fx } = useFx(functions)
-
-  return (
-    <section className={css('ImagesPage', '')}>
-      <p>css-img</p>
-      <div className="css-img" />
-
-      <p>img</p>
-      <img src={image} alt="img" width="64" />
-
-      <p>svg</p>
-      <Svg src={imageSvg} width="64" />
-
-      <p>svg+css</p>
-      <Svg className="svg-css" src={imageSvg} width="64" />
-    </section>
-  )
-}

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

@@ -1,27 +0,0 @@
-.ImagesPage {
-  margin-left: 50px;
-
-  .css-img {
-    background: url("assets/img/image.webp") no-repeat;
-    height: 64px;
-    background-repeat: no-repeat;
-    background-size: contain;
-  }
-
-  .svg-css {
-    #label {
-      animation: svg-css_arrow 2s ease-in-out infinite;
-    }
-  }
-}
-
-@keyframes svg-css_arrow {
-  0%,
-  100% {
-    transform: translateY(-2px);
-  }
-
-  50% {
-    transform: translateY(2px);
-  }
-}

package/template/src/pages/index.jsx

@@ -1,124 +0,0 @@
-import i18nFile from 'assets/i18n'
-import { Translate } from 'components'
-import {
-  I18n,
-  Icon,
-  Link,
-  PagesFx,
-  startViewTransition,
-  useFx,
-  useQueryString,
-  useResize
-} from 'nextia'
-import { lazy, useEffect, useRef, useState } from 'react'
-import iconsFile from 'theme/icons/icons.svg?raw'
-import functions from './functions.js'
-
-export default function Pages() {
-  const pages = useFx(functions)
-  const { state, fx } = pages
-
-  const [Page, setPage] = useState()
-  const qs = useQueryString()
-  const resize = useResize()
-  const ref = useRef()
-
-  useEffect(() => {
-    const hash = ['', '#/'].includes(qs.hash) ? '#/home' : qs.hash
-
-    const page = lazy(async () => {
-      const path = hash.substring(2).split('/')
-
-      try {
-        if (path.length === 1) {
-          return await import(`./${path[0]}/index.jsx`)
-        } else if (path.length === 2) {
-          return await import(`./${path[0]}/${path[1]}/index.jsx`)
-        }
-      } catch (e) {
-        console.error(e)
-        return await import('./http/not-found/index.jsx')
-      }
-    })
-
-    startViewTransition(setPage(page), ref.current)
-  }, [qs.hash])
-
-  return (
-    <PagesFx value={{ context: pages, icons: iconsFile, i18n: i18nFile }}>
-      <header style={{ display: 'flex', gap: '20px' }}>
-        <Icon id="globe" width="24" />
-
-        <Translate />
-
-        <I18n value="page.name" args={['Sinuhe', 'Maceda', 'Bouchan']} />
-
-        <button type="button" onClick={(e) => fx.increment(e)}>
-          increment
-        </button>
-        {'  '}
-        <button type="button" onClick={(e) => fx.decrement(e)}>
-          decrement
-        </button>
-        {'  '}
-        <button type="button" onClick={() => fx.zero({ value: 0 })}>
-          zero
-        </button>
-        {'  '}
-        {state.num}
-        {'  '}
-        {state.loading ? <span> Loading... </span> : <span> View.. </span>}
-      </header>
-
-      <aside className="m-2">
-        <Link href="/" className="mr-2">
-          /
-        </Link>
-        <Link href="#/" className="mr-2">
-          /home
-        </Link>
-        <Link href="#/env" className="mr-2">
-          /env
-        </Link>
-        <Link href="#/my-context" className="mr-2">
-          /my-context
-        </Link>
-        <Link href="#/mockapi" className="mr-2">
-          /mockapi
-        </Link>
-        <Link
-          href="#/search-params"
-          value={{ id: 1, user: 'Sinuhe' }}
-          className="mr-2"
-        >
-          /search-params
-        </Link>
-        <Link href="#/subpage/hello" className="mr-2">
-          /subpage/hello
-        </Link>
-        <Link href="#/translate" className="mr-2">
-          /translate
-        </Link>
-        <Link href="#/view-transition" className="mr-2">
-          /view-transition
-        </Link>
-        <Link href="#/images" className="mr-2">
-          /images
-        </Link>
-        <Link href="#/icons" className="mr-2">
-          /icons
-        </Link>
-        <Link href="#/resize" className="mr-2">
-          /resize
-        </Link>
-        <Link href="#/dashboard" className="mr-2">
-          /not-found
-        </Link>
-      </aside>
-
-      <main ref={ref} className="m-2">
-        {Page && <Page qs={qs.queryString} resize={resize} />}
-      </main>
-    </PagesFx>
-  )
-}

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

@@ -1,71 +0,0 @@
-import { createUser, deleteUser, getUser, updateUser } from 'services/api'
-
-const initialState = {
-  users: {},
-  user: {},
-  form: {
-    id: 0,
-    name: ''
-  }
-}
-
-async function handlerUser({ payload, set }) {
-  try {
-    const { data } = await getUser({ path: { id: payload } })
-    set({ users: data, user: {} })
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-async function handlerCreateUser({ state, set }) {
-  try {
-    const { data } = await createUser({
-      body: {
-        username: state.form.name,
-        profile: {
-          firstName: state.form.name,
-          lastName: state.form.name
-        }
-      }
-    })
-    set({ users: {}, user: data })
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-async function handlerUpdateUser({ payload, state, set }) {
-  try {
-    const { data } = await updateUser({
-      path: { id: payload },
-      body: {
-        username: state.form.name,
-        profile: {
-          firstName: state.form.name,
-          lastName: state.form.name
-        }
-      }
-    })
-    set({ users: {}, user: data })
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-async function handlerDeleteUser({ payload }) {
-  try {
-    const { data } = await deleteUser({ path: { id: payload } })
-    console.info(data)
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-export default {
-  initialState,
-  handlerUser,
-  handlerCreateUser,
-  handlerUpdateUser,
-  handlerDeleteUser
-}

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

@@ -1,101 +0,0 @@
-import { css, useFx } from 'nextia'
-import functions from './functions'
-import './style.css'
-
-export default function MockapiPage() {
-  const { initialState, state, fx } = useFx(functions)
-
-  return (
-    <section className={css('MockapiPage', 'container')}>
-      <div>
-        <button type="button" onClick={() => fx.reset(['users', 'user'])}>
-          Reset
-        </button>
-
-        <button
-          type="button"
-          onClick={() => {
-            fx.reset(['users', 'user'])
-            fx.handlerUser()
-          }}
-        >
-          Get users
-        </button>
-
-        <button
-          type="button"
-          onClick={() => {
-            fx.reset(['users', 'user'])
-            fx.handlerUser(state.form.id)
-          }}
-        >
-          Get user
-        </button>
-
-        <button
-          type="button"
-          onClick={() => {
-            fx.reset(['users', 'user'])
-            fx.handlerCreateUser()
-          }}
-        >
-          Create user
-        </button>
-
-        <button
-          type="button"
-          onClick={() => {
-            fx.reset(['users', 'user'])
-            fx.handlerUpdateUser(state.form.id)
-          }}
-        >
-          Update user
-        </button>
-
-        <button
-          type="button"
-          onClick={() => {
-            fx.reset(['users', 'user'])
-            fx.handlerDeleteUser(state.form.id)
-          }}
-        >
-          Delete user
-        </button>
-      </div>
-
-      <div>
-        <h1>MockapiPage</h1>
-
-        <div>
-          id:{' '}
-          <input
-            type="text"
-            name="form.id"
-            value={state.form.id}
-            onChange={(evt) => fx.change(evt)}
-          />
-        </div>
-        <div>
-          name:{' '}
-          <input
-            type="text"
-            name="form.name"
-            value={state.form.name}
-            onChange={(evt) => fx.change(evt)}
-          />
-        </div>
-      </div>
-
-      <section>
-        <article style={{ display: 'flex' }}>
-          <pre style={{ margin: '0 50px 0 50px', width: '250px' }}>
-            state = {JSON.stringify(state, undefined, 2)}
-          </pre>
-          <pre style={{ margin: '0 5px 0 5px', width: '250px' }}>
-            initialState = {JSON.stringify(initialState, undefined, 2)}
-          </pre>
-        </article>
-      </section>
-    </section>
-  )
-}