nextia 6.0.4 → 7.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/template/src/pages/index.jsx

@@ -0,0 +1,114 @@
+import { I18n, Icon, Link, Translate } from 'components'
+import { PagesContext, useFx } from 'nextia'
+import { lazy, useEffect, useRef, useState } from 'react'
+import { startViewTransition, useQueryString, useResize } from 'utils'
+import functions from './functions.js'
+
+export default function Pages() {
+  const pagesContext = useFx(functions)
+  const { state, fx } = pagesContext
+
+  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 (
+    <PagesContext value={pagesContext}>
+      <header style={{ display: 'flex', gap: '20px' }}>
+        <Icon id="globe" width="24" />
+
+        <Translate value={state.i18n} onChange={fx.changeI18n} />
+
+        <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="#/counter" className="mr-2">
+          /counter
+        </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="#/no" className="mr-2">
+          /no
+        </Link>
+      </aside>
+
+      <main ref={ref} className="m-2">
+        {Page && <Page qs={qs.queryString} resize={resize} />}
+      </main>
+    </PagesContext>
+  )
+}

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

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

@@ -0,0 +1,101 @@
+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>
+  )
+}

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

@@ -0,0 +1,57 @@
+.MockapiPage {
+  background-color: #21252b;
+
+  &.container {
+    display: flex;
+    gap: 20px;
+    padding: 20px;
+
+    div {
+      width: 300px;
+    }
+  }
+
+  p {
+    padding-left: 25px;
+    margin: 0px;
+  }
+
+  pre {
+    color: gray;
+    font-size: 12px;
+    max-height: 700px;
+    overflow: auto;
+  }
+
+  button {
+    margin: 10px;
+    height: 50px;
+    width: 180px;
+  }
+
+  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/my-context/functions.js

@@ -0,0 +1,7 @@
+const initialState = {}
+
+function init({ context }) {
+  context.fx.set({ num: 300 })
+}
+
+export default { initialState, init }

package/template/src/pages/my-context/index.jsx

@@ -0,0 +1,32 @@
+import { css, useFx } from 'nextia'
+import { useEffect } from 'react'
+import functions from './functions'
+import './style.css'
+
+export default function MyContext() {
+  const { state, fx, context } = useFx(functions)
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: fx is stable and init should only run once
+  useEffect(() => {
+    fx.init()
+  }, [])
+
+  return (
+    <section className={css('MyContext', '')}>
+      <br />
+      <button type="button" onClick={(e) => context.fx.increment(e)}>
+        increment
+      </button>
+      {'  '}
+      <button type="button" onClick={(e) => context.fx.decrement(e)}>
+        decrement
+      </button>
+      {'  '}
+      <button type="button" onClick={() => context.fx.zero({ value: 0 })}>
+        zero
+      </button>
+      {'  '}
+      {context.state.num}
+    </section>
+  )
+}

package/template/src/pages/my-context/style.css

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

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

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

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

@@ -0,0 +1,15 @@
+import { css, useFx } from 'nextia'
+import functions from './functions'
+import './style.css'
+
+export default function ResizePage({ resize }) {
+  const { state, fx } = useFx(functions)
+
+  return (
+    <section className={css('ResizePage', '')}>
+      <pre style={{ margin: '0 50px 0 50px', width: '250px' }}>
+        {JSON.stringify(resize, undefined, 2)}
+      </pre>
+    </section>
+  )
+}

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

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

package/template/src/pages/search-params/functions.js

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

package/template/src/pages/search-params/index.jsx

@@ -0,0 +1,36 @@
+import { Link } from 'components'
+import { css, useFx } from 'nextia'
+import { useEffect } from 'react'
+import functions from './functions'
+import './style.css'
+
+export default function SearchParamsPage({ qs }) {
+  const { state, fx } = useFx(functions)
+
+  useEffect(() => {
+    console.info(qs)
+  }, [qs])
+
+  return (
+    <section className={css('SearchParamsPage', '')}>
+      <br />
+
+      <Link href="/">Go to href=/</Link>
+
+      <br />
+
+      <Link value={{ id: 2, user: 'Maceda' }}>Link id=2 user=Maceda </Link>
+
+      <br />
+
+      <Link value={{ id: 1, user: 'Sinuhe' }}>Link id=1 user=Sinuhe</Link>
+
+      <br />
+      <br />
+
+      <pre style={{ margin: '0 50px 0 50px' }}>
+        {JSON.stringify(qs, undefined, 2)}
+      </pre>
+    </section>
+  )
+}

package/template/src/pages/search-params/style.css

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

package/template/src/pages/subpage/hello/functions.js

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

package/template/src/pages/subpage/hello/index.jsx

@@ -0,0 +1,11 @@
+import { css, useFx } from 'nextia'
+import functions from './functions'
+import './style.css'
+
+export default function SubpageHelloPage() {
+  const { state, fx } = useFx(functions)
+
+  return (
+    <section className={css('SubpageHelloPage', '')}>/subpage/hello</section>
+  )
+}

package/template/src/pages/subpage/hello/style.css

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

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

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

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

@@ -0,0 +1,31 @@
+import { css, useFx } from 'nextia'
+import functions from './functions'
+import './style.css'
+import { I18n, Message } from 'components'
+
+export default function TranslatePage() {
+  const { state, fx } = useFx(functions)
+
+  return (
+    <section className={css('TranslatePage', '')}>
+      <I18n value="page.name" args={['Sinuhe', 'Maceda', 'Bouchan']} />
+
+      <ul>
+        <li>
+          <I18n value="ui.ok" />
+        </li>
+        <li>
+          <I18n value="ui.back" />
+        </li>
+        <li>
+          <I18n value="page.user.family" />
+        </li>
+        <li>
+          <I18n value="page.module.block.docker" />
+        </li>
+      </ul>
+
+      <Message />
+    </section>
+  )
+}

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

@@ -0,0 +1,12 @@
+.TranslatePage {
+  margin: 20px;
+
+  h3 {
+    color: gray;
+  }
+
+  button {
+    width: 40px;
+    margin: 15px;
+  }
+}

package/template/src/services/api.js

@@ -0,0 +1,9 @@
+import { env } from 'utils'
+import { DELETE, GET, POST, PUT } from './http'
+
+const API = env.PUBLIC_API
+
+export const getUser = (p) => GET(`${API}/user/:id`, p.path, p.body)
+export const createUser = (p) => POST(`${API}/user`, p.path, p.body)
+export const updateUser = (p) => PUT(`${API}/user/:id`, p.path, p.body)
+export const deleteUser = (p) => DELETE(`${API}/user/:id`, p.path, p.body)