nextia 7.0.0 → 7.0.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/template/src/services/api.js

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

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

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

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

package/template/src/theme/icons/exit.svg

@@ -1,69 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="256" height="256" viewBox="0 0 48 48" fill="none"
-   color="currentColor" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
-
-   <style type="text/css">
-      svg {
-         transition: transform 200ms linear;
-
-         #ani {
-            transition:
-               stroke-dashoffset 400ms linear,
-               stroke-dasharray 400ms linear;
-            stroke: var(--primary-color);
-            stroke-dasharray: 1, 200;
-            stroke-dashoffset: 1;
-         }
-
-         #arrow {
-            animation: arrow 2s ease-in-out infinite;
-
-            #right,
-            #left {
-               display: none;
-            }
-         }
-      }
-
-      svg:hover {
-         transform: rotate(-90deg);
-
-         #ani {
-            stroke-dasharray: 200, 1;
-         }
-
-         #arrow {
-            transform: translateY(2px);
-            stroke: var(--primary-color);
-
-            line {
-               stroke-width: 6px;
-            }
-
-            #right,
-            #left {
-               display: block;
-            }
-         }
-      }
-
-      @keyframes arrow {
-
-         0%,
-         100% {
-            transform: translateY(2px);
-         }
-
-         50% {
-            transform: translateY(6px);
-         }
-      }
-   </style>
-
-   <path id="solid" d="M 12,3.4 C 5.8,7.2 1.8,14 1.8,22 1.8,35 12,45 24,45 36,45 46,35 46,22 46,14 42,7.2 36,3.4" />
-   <path id="ani" d="M 12,3.4 C 5.8,7.2 1.8,14 1.8,22 1.8,35 12,45 24,45 36,45 46,35 46,22 46,14 42,7.2 36,3.4" />
-   <g id="arrow">
-      <line id="left" x1="24" y1="25" x2="10" y2="14" />
-      <line id="center" x1="24" y1="1.3" x2="24" y2="25" />
-      <line id="right" x1="24" y1="25" x2="35" y2="14" />
-   </g>
-</svg>

package/template/src/theme/icons/icons.svg

@@ -1,126 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   width="256"
-   height="256"
-   viewBox="0 0 48 48"
-   fill="none"
-   color="white"
-   stroke="currentColor"
-   stroke-width="1"
-   stroke-linecap="round"
-   stroke-linejoin="round"
-   version="1.1"
-   id="icons"
-   sodipodi:docname="icons.svg"
-   inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
-   inkscape:export-filename="icons.svg"
-   inkscape:export-xdpi="96"
-   inkscape:export-ydpi="96"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <title
-     id="title">icons</title>
-  <sodipodi:namedview
-     id="namedview"
-     pagecolor="#505050"
-     bordercolor="#ffffff"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="1"
-     inkscape:deskcolor="#505050"
-     showgrid="false"
-     showguides="true"
-     inkscape:zoom="3.5672"
-     inkscape:cx="156.56537"
-     inkscape:cy="128.25185"
-     inkscape:current-layer="globe"
-     inkscape:window-width="2560"
-     inkscape:window-height="1080"
-     inkscape:window-x="2560"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1" />
-  <defs
-     id="defs" />
-  <g
-     id="globe"
-     style="display:none">
-    <circle
-       cx="23.960287038110003"
-       cy="23.914597038110003"
-       r="18.23231994892"
-       id="circle1" />
-    <line
-       x1="6"
-       y1="24"
-       x2="42"
-       y2="24"
-       id="line1" />
-    <path
-       d="m 23.9603,5.6822471 c 4.4192,4.9926549 6.9306,11.4718789 7.0671,18.2323589 -0.1365,6.760478 -2.6479,13.23962 -7.0671,18.232339 -4.4193,-4.992719 -6.9307,-11.471861 -7.0672,-18.232339 0.1365,-6.76048 2.6479,-13.239704 7.0672,-18.2323589 z"
-       id="path1" />
-  </g>
-  <g
-     id="camera"
-     style="display:none;"
-     sodipodi:insensitive="true">
-    <path
-       d="m 44.2234,35.0688 c 0,1.9822 -1.6079,3.5891 -3.5913,3.5891 h -32.32145 c -1.98338,0 -3.59123,-1.6069 -3.59125,-3.5891 v -19.7405 c 0,-1.9822 1.60786,-3.5891 3.59125,-3.5891 h 7.18255 l 3.5913,-5.38381 h 10.7738 l 3.5913,5.38381 h 7.1825 c 1.9834,0 3.5913,1.6069 3.5913,3.5891 z"
-       id="path2" />
-    <circle
-       cx="24.709818"
-       cy="23.41984"
-       r="5.5424304"
-       id="circle2" />
-  </g>
-  <g
-     id="video"
-     style="display:none;"
-     sodipodi:insensitive="true">
-    <polygon
-       points="45.444025,13.035503 31.653955,23.006053 45.444025,32.976603 "
-       id="polygon35" />
-    <rect
-       x="2.1038051"
-       y="9.0472832"
-       width="29.55015"
-       height="27.91754"
-       rx="1.9999979"
-       ry="1.9999982"
-       id="rect35" />
-  </g>
-  <g
-     id="exit"
-     style="display:none"
-     sodipodi:insensitive="true">
-    <path
-       id="solid"
-       d="M 12,3.4 C 5.8,7.2 1.8,14 1.8,22 1.8,35 12,45 24,45 36,45 46,35 46,22 46,14 42,7.2 36,3.4" />
-    <path
-       id="animation"
-       d="M 12,3.4 C 5.8,7.2 1.8,14 1.8,22 1.8,35 12,45 24,45 36,45 46,35 46,22 46,14 42,7.2 36,3.4" />
-    <g
-       id="arrow">
-      <line
-         id="left"
-         x1="24"
-         y1="25"
-         x2="10"
-         y2="14" />
-      <line
-         id="center"
-         x1="24"
-         y1="1.3"
-         x2="24"
-         y2="25" />
-      <line
-         id="right"
-         x1="24"
-         y1="25"
-         x2="35"
-         y2="14" />
-    </g>
-  </g>
-</svg>

package/template/src/theme/index.css

@@ -1,39 +0,0 @@
-@import "./util.css";
-@import "./fonts/index.css";
-@import "./animations.css";
-
-:root {
-  --primary-color: #344188;
-  --primary-color-50: #3441887a;
-  --link: #5fac9f;
-  --body-bg: #282c34;
-  --body-color: #a8a8a8;
-  --font-family: "Roboto";
-}
-
-/**
- * html
- */
-
-html,
-body {
-  background-color: var(--body-bg);
-  color: var(--body-color);
-  font-family: var(--font-family);
-}
-
-a {
-  color: var(--link);
-}
-
-.mr-2 {
-  margin-right: 20px;
-}
-
-.m-2 {
-  margin: 20px;
-}
-
-.p-2 {
-  padding: 20px;
-}

package/template/src/theme/util.css

@@ -1,27 +0,0 @@
-/**
- * Scrollbar
- */
-
-@media (pointer: fine) {
-  ::-webkit-scrollbar {
-    width: 14px;
-    height: 14px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 14px;
-    border: 3px solid transparent;
-    background-clip: content-box;
-    background-color: var(--primary-color);
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: var(--primary-color-50);
-  }
-
-  ::-webkit-scrollbar,
-  ::-webkit-scrollbar-track,
-  ::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-}

package/template/src/utils/hooks.js

@@ -1,49 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-
-export function useQueryString() {
-  const getQueryString = useCallback(
-    () => ({
-      hash: window.location.hash.split('?')[0],
-      queryString: Object.fromEntries(
-        new URLSearchParams(window.location.hash.split('?')[1])
-      )
-    }),
-    []
-  )
-
-  const [queryString, setQueryString] = useState(getQueryString)
-
-  useEffect(() => {
-    const handlePopState = () => setQueryString(getQueryString())
-
-    window.addEventListener('popstate', handlePopState)
-    return () => {
-      window.removeEventListener('popstate', handlePopState)
-    }
-  }, [getQueryString])
-
-  return queryString
-}
-
-export function useResize() {
-  const getResize = useCallback(
-    () => ({
-      width: window.innerWidth,
-      height: window.innerHeight
-    }),
-    []
-  )
-
-  const [resize, setResize] = useState(getResize)
-
-  useEffect(() => {
-    const handleResize = () => setResize(getResize())
-
-    window.addEventListener('resize', handleResize)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [getResize])
-
-  return resize
-}

package/template/src/utils/index.js

@@ -1,19 +0,0 @@
-import { flushSync } from 'react-dom'
-import { useQueryString, useResize } from './hooks'
-
-const env = import.meta.env
-
-async function startViewTransition(fun = () => {}, ref, animation = 'fade') {
-  if (!document.startViewTransition || env.PUBLIC_VIEW_TRANSITION === 'false')
-    return fun()
-
-  ref.style.viewTransitionName = animation
-  await document.startViewTransition(() => flushSync(fun)).finished
-  ref.style.viewTransitionName = ''
-}
-
-function sum(a, b) {
-  return a + b
-}
-
-export { env, startViewTransition, sum, useQueryString, useResize }

package/template/test/index.test.js

@@ -1,12 +0,0 @@
-import { env, sum } from 'utils'
-import { test } from 'vitest'
-
-test('test', () => {})
-
-test('sumTest', () => {
-  console.info(sum(1, 20))
-})
-
-test('envTest', () => {
-  console.info(`PUBLIC_TITLE : ${env.PUBLIC_TITLE}`)
-})