nextia 6.1.1 → 7.0.2

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

@@ -0,0 +1,31 @@
+import { css, I18n, useFx } from 'nextia'
+import functions from './functions'
+import './style.css'
+import { 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/pages/view-transition/functions.js

@@ -0,0 +1,6 @@
+const initialState = {
+  count: 1,
+  count2: 1
+}
+
+export default { initialState }

package/template/src/pages/view-transition/index.jsx

@@ -0,0 +1,30 @@
+import { Counter } from 'components'
+import { css, useFx } from 'nextia'
+import functions from './functions'
+import './style.css'
+
+export default function ViewTransitionPage() {
+  const { state, fx } = useFx(functions)
+
+  return (
+    <section className={css('ViewTransitionPage')}>
+      Counters
+      <Counter
+        value={state.count}
+        animation="count"
+        onChange={() => {
+          fx.set({ count: state.count + 1 })
+        }}
+      />
+      <br />
+      <br />
+      <Counter
+        value={state.count2}
+        animation="count2"
+        onChange={() => {
+          fx.set({ count2: state.count2 + 10 })
+        }}
+      />
+    </section>
+  )
+}

package/template/src/pages/view-transition/style.css

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

package/template/src/services/api.js

@@ -0,0 +1,9 @@
+import { env } from 'nextia'
+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/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");
+}

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

@@ -0,0 +1,125 @@
+<?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"
+   aria-hidden="true" 
+   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">
+  <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="background"
+       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="ring"
+       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/icons/index.css

@@ -0,0 +1,55 @@
+#exit.nextia-animate-icon {
+  transition: transform 200ms linear;
+
+  #ring {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 1;
+    transition:
+      stroke-dashoffset 400ms linear,
+      stroke-dasharray 400ms linear;
+  }
+
+  #arrow {
+    animation: exit_arrow 2s ease-in-out infinite;
+
+    #right,
+    #left {
+      display: none;
+    }
+  }
+
+  &:hover {
+    transform: rotate(-90deg);
+
+    #ring {
+      stroke-dasharray: 200, 1;
+      stroke: var(--primary-color);
+      stroke-width: 4px;
+    }
+
+    #arrow {
+      transform: translateY(2px);
+      stroke: var(--primary-color);
+
+      line {
+        stroke-width: 4px;
+      }
+
+      #right,
+      #left {
+        display: block;
+      }
+    }
+  }
+}
+
+@keyframes exit_arrow {
+  0%,
+  100% {
+    transform: translateY(2px);
+  }
+
+  50% {
+    transform: translateY(6px);
+  }
+}

package/template/src/theme/index.css

@@ -0,0 +1,39 @@
+@import "./fonts/index.css";
+@import "./icons/index.css";
+@import "./utils/index.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/utils/index.css

@@ -0,0 +1,29 @@
+@import "./view-transition.css";
+
+/**
+ * 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/theme/utils/view-transition.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/utils/index.js

@@ -0,0 +1,5 @@
+function sum(a, b) {
+  return a + b
+}
+
+export { sum }

package/template/test/index.test.js

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

package/template/vite.config.js

@@ -0,0 +1,97 @@
+import { execSync } from 'node:child_process'
+import { readFile } from 'node:fs/promises'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+import { version } from './package.json'
+
+export default defineConfig(({ mode }) => {
+  const CWD = process.cwd()
+  const host = '0.0.0.0'
+  const port = 3000
+
+  return {
+    server: {
+      host,
+      port
+    },
+
+    preview: {
+      host,
+      port
+    },
+
+    base: '',
+    envDir: CWD,
+    envPrefix: 'PUBLIC_',
+    root: `${CWD}/src`,
+    publicDir: `${CWD}/public`,
+
+    resolve: {
+      alias: Object.fromEntries(
+        ['assets', 'components', 'services', 'theme', 'utils'].map((dir) => [
+          dir,
+          `${CWD}/src/${dir}`
+        ])
+      )
+    },
+
+    build: {
+      outDir: '../out',
+      assetsDir: 'assets',
+      emptyOutDir: true
+    },
+
+    css: {
+      postcss: {}
+    },
+
+    plugins: [
+      react(),
+      {
+        name: 'html',
+        transformIndexHtml(html) {
+          let gitHash = ''
+          try {
+            gitHash = execSync('git rev-parse --short HEAD 2> /dev/null')
+              .toString()
+              .trim()
+          } catch {}
+
+          html.replaceAll(
+            '%VERSION%',
+            `version=${version}, env=${mode}, release-date=${new Date()}, git-hash=${gitHash}`
+          )
+
+          return html
+        }
+      },
+      {
+        name: 'svg',
+        async transform(_src, id) {
+          const [path, query] = id.split('?')
+          if (query !== 'raw') return
+
+          let code = await readFile(path, 'utf8')
+          code = code
+            .replace(/\s{2,}/g, ' ') // multiple spaces to single space
+            .replace(/\n/g, '') // remove newlines
+            .replace(/\t/g, '') // remove tabs
+            .replace(/>\s+</g, '><') // remove space between tags
+            .trim()
+          return `export default ${JSON.stringify(code)};`
+        }
+      }
+    ],
+
+    test: {
+      root: './',
+      environment: 'jsdom',
+      include: ['test/**/*.test.{js,jsx,ts,tsx}'],
+      coverage: {
+        reportsDirectory: '.coverage',
+        exclude: ['src/assets', 'src/components/index.js', 'src/index.jsx'],
+        include: ['src/**/*.{js,jsx,ts,tsx}']
+      }
+    }
+  }
+})