nextia 6.1.1 → 7.0.2

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,21 @@
+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

@@ -0,0 +1,8 @@
+.IconsPage {
+  display: flex;
+  justify-content: space-around;
+
+  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,25 @@
+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

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

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

@@ -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,35 @@
+import { css, Link, 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
+}