nextia 6.1.1 → 7.0.0

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)

package/template/src/services/http.js

@@ -0,0 +1,40 @@
+function urlTemplate(url, path) {
+  const params = url.match(/:\w+/g) ?? []
+
+  return params.reduce((acc, e) => {
+    const key = e.split(':')[1]
+    return acc.replaceAll(e, path[key] ?? '')
+  }, url)
+}
+
+async function request(method, url, path, body, headers) {
+  url = urlTemplate(url, path)
+
+  if (method === 'GET') {
+    url += Object.keys(body).length ? `?${new URLSearchParams(body)}` : ''
+  }
+
+  const response = await fetch(url, {
+    method,
+    headers: { 'Content-Type': 'application/json', ...headers },
+    ...(method !== 'GET' && {
+      body: JSON.stringify(body)
+    })
+  })
+
+  const { ok, status, statusText } = response
+
+  if (ok) return { ok, status, statusText, data: await response.json() }
+
+  throw new Error(`ok: ${ok} , status: ${status} , statusText: ${statusText}`)
+}
+
+const factory =
+  (method) =>
+  (url = '', path = {}, body = {}, headers = {}) =>
+    request(method, url, path, body, headers)
+
+export const GET = factory('GET')
+export const POST = factory('POST')
+export const PUT = factory('PUT')
+export const DELETE = factory('DELETE')

package/template/src/theme/animations.css

@@ -0,0 +1,72 @@
+:root {
+  view-transition-name: none;
+}
+
+/* fade */
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+::view-transition-old(fade) {
+  animation: fade-out ease 0.3s forwards;
+}
+
+::view-transition-new(fade) {
+  animation: fade-in ease 0.3s forwards;
+}
+
+/* count */
+
+@keyframes count-in {
+  from {
+    scale: 1 0;
+  }
+  to {
+    scale: 1 1;
+  }
+}
+
+@keyframes count-out {
+  from {
+    scale: 1 1;
+  }
+  to {
+    scale: 1 0;
+  }
+}
+
+::view-transition-new(count) {
+  animation: count-in 0.25s forwards;
+  transform-origin: 50% 0;
+}
+
+::view-transition-old(count) {
+  animation: count-out 0.25s forwards;
+  transform-origin: 50% 100%;
+}
+
+/* count2 */
+
+::view-transition-new(count2) {
+  animation: count-in 0.25s forwards;
+  transform-origin: 10% 100%;
+}
+
+::view-transition-old(count2) {
+  animation: count-out 0.25s forwards;
+  transform-origin: 10% 0%;
+}

package/template/src/theme/fonts/index.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: Roboto;
+  font-style: normal;
+  font-display: swap;
+  font-weight: bold;
+  src: url("./Roboto-Regular.ttf");
+}