nextia 6.0.4 → 7.0.0

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");
+}

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

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

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

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

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

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

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

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

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}']
+      }
+    }
+  }
+})