nextia 5.0.2 → 6.0.0

package/README.md

@@ -1,9 +1,7 @@
 # nextia
+Create fast web applications
 
-## Create fast web applications
-
-Go to test
-
+### To start
 ```sh
 npm install
 pnpm install
@@ -11,8 +9,7 @@ pnpm install
 cd test
 ```
 
-commands
-
+### To test
 ```sh
 npm install
 pnpm install
@@ -20,11 +17,10 @@ pnpm install
 node --run test:my-app
 ```
 
-create project
-
+### To create project
 ```sh
-npx nextia@latest my-app
-pnpx nextia@latest my-app
+pnpm i -g nextia
+nextia my-app
 ```
 
-[npm](https://www.npmjs.com/package/nextia)
+[npmjs.com/package/nextia](https://www.npmjs.com/package/nextia)

package/biome.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "off"
+      }
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "noUnusedVariables": "error"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "javascript": {
+    "formatter": {
+      "semicolons": "asNeeded",
+      "quoteStyle": "single",
+      "jsxQuoteStyle": "double",
+      "trailingCommas": "none"
+    }
+  },
+  "css": {
+    "formatter": {
+      "enabled": true
+    }
+  },
+  "json": {
+    "formatter": {
+      "enabled": true
+    }
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nextia",
   "description": "Create fast web applications",
-  "version": "5.0.2",
+  "version": "6.0.0",
   "engines": {
     "node": ">22"
   },
@@ -24,19 +24,18 @@
     "nextia": "src/bin.js"
   },
   "main": "src/lib.js",
-  "eslintConfig": {
-    "extends": "./node_modules/standard/eslintrc.json"
-  },
   "peerDependencies": {
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
   },
   "devDependencies": {
-    "standard": "^17.1.2"
+    "@biomejs/biome": "^2.3.14"
   },
   "scripts": {
     "clean": "rm -fr node_modules package-lock.json pnpm-lock.yaml .coverage out my-app",
-    "lint": "standard 'src/**/*.{js,jsx}' 'test/**/*.{js,jsx}' --verbose",
+    "format": "biome format",
+    "lint": "biome lint",
+    "check": "biome check --reporter=summary",
     "test": "node src/bin.js",
     "test:my-app": "node src/bin.js my-app"
   }

package/src/bin.js

@@ -9,18 +9,26 @@
  * https://github.com/sinuhedev/nextia
  */
 
-import pkg from "../package.json" with { type: "json" };
+import pkg from '../package.json' with { type: 'json' }
 import { fileURLToPath } from 'node:url'
 import { dirname } from 'node:path'
-import { mkdir, writeFile, readFile, cp, rename, access } from 'node:fs/promises'
-
-async function createPage (name) {
-  const toPascalCase = str => str
-    .toLowerCase()
-    .replace(/[^a-zA-Z0-9 ]/g, ' ') // replace special characters
-    .split(/\s+/) // split by spaces
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join('')
+import {
+  mkdir,
+  writeFile,
+  readFile,
+  cp,
+  rename,
+  access
+} from 'node:fs/promises'
+
+async function createPage(name) {
+  const toPascalCase = (str) =>
+    str
+      .toLowerCase()
+      .replace(/[^a-zA-Z0-9 ]/g, ' ') // replace special characters
+      .split(/\s+/) // split by spaces
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join('')
 
   const dirName = `./src/pages/${name}`
 
@@ -30,8 +38,9 @@ async function createPage (name) {
     const pageName = toPascalCase(name) + 'Page'
 
     // index.jsx
-    writeFile(`${dirName}/index.jsx`,
-  `import React, { useEffect } from 'react'
+    writeFile(
+      `${dirName}/index.jsx`,
+      `import React, { useEffect } from 'react'
 import { useFx, css } from 'nextia'
 import functions from './functions'
 import './style.css'
@@ -45,26 +54,31 @@ export default function ${pageName} () {
     </section>
   )
 }
-`)
+`
+    )
 
     // style.sss
-    writeFile(`${dirName}/style.css`,
-  `.${pageName} {
-}`)
+    writeFile(
+      `${dirName}/style.css`,
+      `.${pageName} {
+}`
+    )
 
     // function.js
-    writeFile(`${dirName}/functions.js`,
-  `const initialState = {
+    writeFile(
+      `${dirName}/functions.js`,
+      `const initialState = {
 }
 
 export default { initialState }
-`)
+`
+    )
   } catch (err) {
     console.error(err)
   }
 }
 
-async function createComponent (name) {
+async function createComponent(name) {
   const dirName = `./src/components/${name}`
 
   try {
@@ -72,8 +86,9 @@ async function createComponent (name) {
     const componentName = name.replaceAll('/', '') + '-component'
 
     // index.jsx
-    writeFile(`${dirName}/index.jsx`,
-`import React, { useEffect } from 'react'
+    writeFile(
+      `${dirName}/index.jsx`,
+      `import React, { useEffect } from 'react'
 import { css } from 'nextia'
 import './style.css'
 
@@ -84,11 +99,13 @@ export default function ${name} ({ className, style }) {
     </article>
   )
 }
-`)
+`
+    )
 
     // style.css
-    writeFile(`${dirName}/style.css`,
-`.${componentName}  {
+    writeFile(
+      `${dirName}/style.css`,
+      `.${componentName}  {
 }`
     )
   } catch (err) {
@@ -96,7 +113,7 @@ export default function ${name} ({ className, style }) {
   }
 }
 
-async function createComponentFx (name) {
+async function createComponentFx(name) {
   const dirName = `./src/components/${name}`
 
   try {
@@ -104,8 +121,9 @@ async function createComponentFx (name) {
     const containerName = name.replaceAll('/', '') + '-component'
 
     // index.jsx
-    writeFile(`${dirName}/index.jsx`,
-`import React, { useEffect } from 'react'
+    writeFile(
+      `${dirName}/index.jsx`,
+      `import React, { useEffect } from 'react'
 import { useFx, css } from 'nextia'
 import functions from './functions'
 import './style.css'
@@ -119,26 +137,31 @@ export default function ${name} ({ className, style }) {
     </article>
   )
 }
-`)
+`
+    )
 
     // style.css
-    writeFile(`${dirName}/style.css`,
-`.${containerName}  {
-}`)
+    writeFile(
+      `${dirName}/style.css`,
+      `.${containerName}  {
+}`
+    )
 
     // function.js
-    writeFile(`${dirName}/functions.js`,
-`const initialState = {
+    writeFile(
+      `${dirName}/functions.js`,
+      `const initialState = {
 }
 
 export default { initialState }
-`)
+`
+    )
   } catch (err) {
     console.error(err)
   }
 }
 
-async function createProject (name) {
+async function createProject(name) {
   let projectPath
 
   try {
@@ -146,14 +169,14 @@ async function createProject (name) {
     await access(projectPath)
     console.error(`The "${name}" already exists.`)
     return
-  } catch (error) {
-  }
+  } catch (error) {}
 
   const template = dirname(fileURLToPath(import.meta.url)) + '/template/'
 
   // Create new project
   try {
-    const mv = fileName => rename(projectPath + `_${fileName}`, projectPath + `.${fileName}`)
+    const mv = (fileName) =>
+      rename(projectPath + `_${fileName}`, projectPath + `.${fileName}`)
     await cp(template, projectPath, { recursive: true })
     const replaceToken = async (filename, token, value) => {
       const content = await readFile(projectPath + filename, 'utf8')
@@ -200,7 +223,8 @@ switch (ARG1) {
 
   default:
     if (ARG1) createProject(ARG1)
-    else console.info(`
+    else
+      console.info(`
   Version ${pkg.version}
   
   npx nextia@latest <ProjectName>

package/src/lib.js

@@ -14,13 +14,16 @@ const Context = createContext()
 /**
  * css
  */
-function css (...classNames) {
+function css(...classNames) {
   classNames = classNames
-    .filter(e => e)
+    .filter((e) => e)
     .reduce((accumulator, currentValue) => {
       if (typeof currentValue === 'string') {
         accumulator.push(currentValue)
-      } else if (!Array.isArray(currentValue) && typeof currentValue === 'object') {
+      } else if (
+        !Array.isArray(currentValue) &&
+        typeof currentValue === 'object'
+      ) {
         for (const e in currentValue) {
           if (currentValue[e]) accumulator.push(e)
         }
@@ -28,13 +31,13 @@ function css (...classNames) {
       return accumulator
     }, [])
 
-  return ([...new Set(classNames)]).join(' ')
+  return [...new Set(classNames)].join(' ')
 }
 
 /**
  * values
  */
-function values (state, payload, value) {
+function values(state, payload, value) {
   const paths = payload.split('.')
 
   // one level
@@ -63,15 +66,15 @@ function values (state, payload, value) {
 /**
  * merge
  */
-function merge (target, source) {
+function merge(target, source) {
   // in array return all source
   if (Array.isArray(target)) return source
 
-  const isObject = obj => obj && typeof obj === 'object'
+  const isObject = (obj) => obj && typeof obj === 'object'
   const output = { ...target }
 
   // merge
-  Object.keys(source).forEach(key => {
+  Object.keys(source).forEach((key) => {
     if (isObject(target[key]) && isObject(source[key])) {
       output[key] = merge(target[key], source[key])
     } else output[key] = structuredClone(source[key])
@@ -97,7 +100,10 @@ const log = (reducer) => {
     if (type === 'change') {
       const { name, type, checked, value } = payload.target
       return {
-        name, type, checked, value
+        name,
+        type,
+        checked,
+        value
       }
     }
 
@@ -108,16 +114,22 @@ const log = (reducer) => {
     return payload
   }
 
-  const reducerWithLogger = useCallback((state, action) => {
-    const newState = reducer(state, action)
+  const reducerWithLogger = useCallback(
+    (state, action) => {
+      const newState = reducer(state, action)
 
-    console.log(
-      `%c${action.isContext ? 'Context' : 'Page   '} %c${action.type}`, 'color: #90b1d1', 'color: #6592c8',
-      getPayload(action), { state, new_state: newState }
-    )
+      console.log(
+        `%c${action.isContext ? 'Context' : 'Page   '} %c${action.type}`,
+        'color: #90b1d1',
+        'color: #6592c8',
+        getPayload(action),
+        { state, new_state: newState }
+      )
 
-    return newState
-  }, [reducer])
+      return newState
+    },
+    [reducer]
+  )
 
   return reducerWithLogger
 }
@@ -149,7 +161,9 @@ const reducer = (state, action) => {
       return values(
         state,
         payload.target.name,
-        payload.target.type === 'checkbox' ? payload.target.checked : payload.target.value
+        payload.target.type === 'checkbox'
+          ? payload.target.checked
+          : payload.target.value
       )
 
     case 'reset':
@@ -171,27 +185,36 @@ const reducer = (state, action) => {
 /**
  * useFx
  */
-function useFx (functions = { initialState: {} }) {
+function useFx(functions = { initialState: {} }) {
   const context = use(Context)
   const { initialState } = functions
-  const [state, dispatch] = useReducer(logger() ? log(reducer) : reducer, initialState)
+  const [state, dispatch] = useReducer(
+    logger() ? log(reducer) : reducer,
+    initialState
+  )
 
   // Common actions
-  const commonActions = ['set', 'show', 'hide', 'change', 'reset'].reduce((acc, e) => {
-    acc[e] = payload => dispatch({ type: e, payload, initialState, isContext: !context })
-    return acc
-  }, {})
+  const commonActions = ['set', 'show', 'hide', 'change', 'reset'].reduce(
+    (acc, e) => {
+      acc[e] = (payload) =>
+        dispatch({ type: e, payload, initialState, isContext: !context })
+      return acc
+    },
+    {}
+  )
 
   // Actions
   const actions = Object.keys(functions).reduce((ac, e) => {
     if (functions[e] instanceof Function) {
-      ac[e] = payload => {
+      ac[e] = (payload) => {
         const props = {
           ...commonActions,
           state,
           payload
         }
-        if (context) { props.context = context }
+        if (context) {
+          props.context = context
+        }
 
         return functions[e](Object.freeze(props))
       }
@@ -205,7 +228,9 @@ function useFx (functions = { initialState: {} }) {
     state,
     fx: { ...commonActions, ...actions }
   }
-  if (context) { props.context = context }
+  if (context) {
+    props.context = context
+  }
 
   return Object.freeze(props)
 }

package/src/template/README.md

@@ -1,7 +1,6 @@
 # TEMPLATE
 
-## To start
-
+# To start
 Open http://localhost:3000 to view it in the browser.
 
 ```sh
@@ -14,8 +13,7 @@ node --run build <ENV>
 node --run preview
 ```
 
-## env
-
+# env
 ```.env
 .env          # loaded in all cases
 .env.[ENV]    # only loaded in specified ENV [ dev, test, prod ]

package/src/template/biome.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "off"
+      }
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "noUnusedVariables": "error"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "javascript": {
+    "formatter": {
+      "semicolons": "asNeeded",
+      "quoteStyle": "single",
+      "jsxQuoteStyle": "double",
+      "trailingCommas": "none"
+    }
+  },
+  "css": {
+    "formatter": {
+      "enabled": true
+    }
+  },
+  "json": {
+    "formatter": {
+      "enabled": true
+    }
+  }
+}

package/src/template/package.json

@@ -1,38 +1,41 @@
 {
-	"name": "TEMPLATE",
-	"description": "description",
-	"version": "0.0.0",
-	"type": "module",
-	"private": true,
-	"eslintConfig": {
-		"extends": "./node_modules/standard/eslintrc.json"
-	},
-	"scripts": {
-		"dev": "vite --mode dev",
-		"clean": "rm -fr node_modules package-lock.json pnpm-lock.yaml .coverage out",
-		"build": "vite build --mode",
-		"preview": "vite preview",
-		"lint": "standard 'src/**/*.{js,jsx}' 'test/**/*.{js,jsx}' --verbose",
-		"page": "nextia page",
-		"component": "nextia component",
-		"componentFx": "nextia componentFx",
-		"test": "vitest",
-		"test:name": "vitest --testNamePattern",
-		"test:silent": "vitest --silent",
-		"test:coverage": "vitest --silent --coverage"
-	},
-	"devDependencies": {
-		"@vitejs/plugin-react": "^5.1.2",
-		"@vitest/coverage-v8": "^3.2.4",
-		"autoprefixer": "^10.4.23",
-		"jsdom": "^26.1.0",
-		"standard": "^17.1.2",
-		"vite": "^7.3.1",
-		"vitest": "^3.2.4"
-	},
-	"dependencies": {
-		"nextia": "^VERSION",
-		"react": "^19.2.3",
-		"react-dom": "^19.2.3"
-	}
-}
+  "name": "TEMPLATE",
+  "description": "description",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "eslintConfig": {
+    "extends": "./node_modules/standard/eslintrc.json"
+  },
+  "scripts": {
+    "dev": "vite --mode dev",
+    "clean": "rm -fr node_modules package-lock.json pnpm-lock.yaml .coverage out",
+    "build": "vite build --mode",
+    "preview": "vite preview",
+    "format": "biome format",
+    "lint": "biome lint",
+    "check": "biome check --reporter=summary",
+    "page": "nextia page",
+    "component": "nextia component",
+    "componentFx": "nextia componentFx",
+    "test": "vitest",
+    "test:name": "vitest run --testNamePattern",
+    "test:silent": "vitest run --silent",
+    "test:coverage": "vitest run --silent --coverage"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.14",
+    "@vitejs/plugin-react": "^5.1.3",
+    "@vitest/coverage-v8": "4.0.18",
+    "autoprefixer": "^10.4.24",
+    "jsdom": "^28.0.0",
+    "standard": "^17.1.2",
+    "vite": "^7.3.1",
+    "vitest": "4.0.18"
+  },
+  "dependencies": {
+    "nextia": "^VERSION",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  }
+}

package/src/template/src/components/I18n/index.jsx

@@ -1,7 +1,7 @@
 import { useFx } from 'nextia'
 import i18nFile from 'assets/i18n'
 
-export default function I18n ({ value, args = [] }) {
+export default function I18n({ value, args = [] }) {
   const { context } = useFx()
 
   try {

package/src/template/src/components/Icon/index.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 import icons from 'theme/icons/icons.svg?raw'
 
-export default function Icon ({
+export default function Icon({
   id,
   className,
   style,
@@ -18,7 +18,8 @@ export default function Icon ({
   const ref = useRef()
 
   useEffect(() => {
-    const svg = new window.DOMParser().parseFromString(icons, 'image/svg+xml')
+    const svg = new window.DOMParser()
+      .parseFromString(icons, 'image/svg+xml')
       .documentElement.getElementById(id)
 
     if (svg) {
@@ -28,7 +29,7 @@ export default function Icon ({
 
   return (
     <svg
-      xmlns='http://www.w3.org/2000/svg'
+      xmlns="http://www.w3.org/2000/svg"
       ref={ref}
       id={id}
       className={className}

package/src/template/src/components/Link/index.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
 
-export default function Link ({ children, href, value = {}, ...props }) {
+export default function Link({ children, href, value = {}, ...props }) {
   href ??= window.location.hash.split('?')[0]
-  value = Object.keys(value).length ? '?' + new URLSearchParams(value).toString() : ''
+  value = Object.keys(value).length
+    ? '?' + new URLSearchParams(value).toString()
+    : ''
 
   return (
     <a href={href + value} {...props}>

package/src/template/src/components/Translate/index.jsx

@@ -3,28 +3,29 @@ import { useFx, css } from 'nextia'
 import i18nFile from 'assets/i18n'
 import './style.css'
 
-export default function Translate ({ className, style }) {
+export default function Translate({ className, style }) {
   const { context } = useFx()
 
   return (
-    <article className={css('Translate-component', className, '')} style={style}>
-
+    <article
+      className={css('Translate-component', className, '')}
+      style={style}
+    >
       <select
-        name='i18n'
+        name="i18n"
         value={context.state.i18n}
-        onChange={e => {
+        onChange={(e) => {
           const { value } = e.target
           context.fx.set({ i18n: value })
           window.localStorage.setItem('i18n', value)
         }}
       >
-        {i18nFile.locales.map(e => (
-          <option key={e} value={e} className='m-2'>
+        {i18nFile.locales.map((e) => (
+          <option key={e} value={e} className="m-2">
             {e}
           </option>
         ))}
       </select>
-
     </article>
   )
 }

package/src/template/src/components/Translate/style.css

@@ -1 +1,2 @@
-.Translate-component {}
+.Translate-component {
+}

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

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

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

@@ -3,12 +3,8 @@ import { useFx, css } from 'nextia'
 import functions from './functions'
 import './style.css'
 
-export default function DemoPage () {
+export default function DemoPage() {
   const { state, fx } = useFx(functions)
 
-  return (
-    <section className={css('DemoPage', '')}>
-      DemoPage
-    </section>
-  )
+  return <section className={css('DemoPage', '')}>DemoPage</section>
 }

package/src/template/src/pages/demo/style.css

@@ -1,2 +1,2 @@
 .DemoPage {
-}
+}

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

@@ -28,11 +28,11 @@ const initialState = {
   }
 }
 
-function increment ({ state, set }) {
+function increment({ state, set }) {
   set({ channel: state.channel + 1 })
 }
 
-function decrement ({ state, set }) {
+function decrement({ state, set }) {
   set({ channel: state.channel - 1 })
 }
 

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

@@ -3,12 +3,8 @@ import './style.css'
 import { useFx, css } from 'nextia'
 import functions from './functions'
 
-export default function HomePage () {
+export default function HomePage() {
   const { state, initialState, fx, context } = useFx(functions)
 
-  return (
-    <section className={css('HomePage', 'container')}>
-      homePage
-    </section>
-  )
+  return <section className={css('HomePage', 'container')}>homePage</section>
 }

package/src/template/src/pages/home/style.css

@@ -1 +1,2 @@
-.HomePage {}
+.HomePage {
+}

package/src/template/src/pages/http/not-found/index.jsx

@@ -2,12 +2,14 @@ import React, { useEffect } from 'react'
 import { css } from 'nextia'
 import './style.css'
 
-export default function HttpNotFoundPage () {
+export default function HttpNotFoundPage() {
   return (
-    <section className={css('HttpNotFoundPage', 'd-flex justify-content-center')}>
-      <div className='d-flex align-items-center'>
-        <div className='d-flex flex-column'>
-          <div className='text-center'>
+    <section
+      className={css('HttpNotFoundPage', 'd-flex justify-content-center')}
+    >
+      <div className="d-flex align-items-center">
+        <div className="d-flex flex-column">
+          <div className="text-center">
             <h5>Not Found</h5>
           </div>
         </div>

package/src/template/src/pages/http/not-found/style.css

@@ -1 +1,2 @@
-.HttpNotFoundPage {}
+.HttpNotFoundPage {
+}

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

@@ -4,7 +4,7 @@ import { Translate, I18n, Icon, Link } from 'components'
 import functions from './functions.js'
 import { startViewTransition, useQueryString } from 'utils'
 
-export default function Pages () {
+export default function Pages() {
   const self = useFx(functions)
   const { state, fx } = self
 
@@ -37,28 +37,29 @@ export default function Pages () {
   return (
     <Context value={self}>
       <header style={{ display: 'flex', gap: '20px' }}>
-        <Icon id='globe' width='24' />
+        <Icon id="globe" width="24" />
 
-        <Translate value={state.i18nLocale} onChange={e => fx.changeI18n(e)} />
+        <Translate
+          value={state.i18nLocale}
+          onChange={(e) => fx.changeI18n(e)}
+        />
 
-        <I18n value='page.name' args={['Sinuhe', 'Maceda', 'Bouchan']} />
+        <I18n value="page.name" args={['Sinuhe', 'Maceda', 'Bouchan']} />
 
-        <Link href='/' className='mr-2'>
+        <Link href="/" className="mr-2">
           /
         </Link>
-        <Link href='#/' className='mr-2'>
+        <Link href="#/" className="mr-2">
           /home
         </Link>
-        <Link href='#/demo' className='mr-2'>
+        <Link href="#/demo" className="mr-2">
           /demo
         </Link>
-
       </header>
 
-      <main ref={ref} className='m-2'>
+      <main ref={ref} className="m-2">
         {Page && <Page qs={qs.queryString} />}
       </main>
-
     </Context>
   )
 }

package/src/template/src/theme/animations.css

@@ -3,7 +3,7 @@
 }
 
 /**
- * fade 
+ * fade
  */
 
 @keyframes fade {
@@ -27,4 +27,4 @@
 
 ::view-transition-old(fade) {
   --end: 0;
-}
+}

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

@@ -3,5 +3,5 @@
   font-style: normal;
   font-display: swap;
   font-weight: bold;
-  src: url('./Roboto-Regular.ttf');
-}
+  src: url("./Roboto-Regular.ttf");
+}

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

@@ -1,57 +1 @@
-.exit-anim {
-  --primary-color: #821e8f;
-
-  transition: transform 200ms linear 0ms;
-
-  #animation {
-    transition: stroke-dashoffset 400ms linear 0ms, stroke-dasharray 400ms linear 0ms;
-    stroke: var(--primary-color);
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 1;
-  }
-
-  #arrow {
-    animation: arrow 2s ease-in-out infinite;
-
-    #right,
-    #left {
-      display: none;
-    }
-  }
-
-  &:hover {
-    transform: rotate(-90deg);
-
-    #animation {
-      stroke-dasharray: 200, 1;
-    }
-
-    #arrow {
-      transform: translateY(2px);
-      stroke: var(--primary-color);
-
-      line {
-        stroke-width: 6px;
-      }
-
-      #right,
-      #left {
-        display: block;
-      }
-    }
-  }
-}
-
-@keyframes arrow {
-  0% {
-    transform: translateY(2px);
-  }
-
-  50% {
-    transform: translateY(6px);
-  }
-
-  100% {
-    transform: translateY(2px);
-  }
-}
+/* icons */

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

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

package/src/template/src/theme/util.css

@@ -24,4 +24,4 @@
   ::-webkit-scrollbar-corner {
     background-color: transparent;
   }
-}
+}

package/src/template/src/utils/hooks.js

@@ -1,9 +1,11 @@
 import { useEffect, useState } from 'react'
 
-export function useQueryString () {
+export function useQueryString() {
   const getQueryString = () => ({
     hash: window.location.hash.split('?')[0],
-    queryString: Object.fromEntries(new URLSearchParams(window.location.hash.split('?')[1]))
+    queryString: Object.fromEntries(
+      new URLSearchParams(window.location.hash.split('?')[1])
+    )
   })
 
   const [queryString, setQueryString] = useState(getQueryString())
@@ -11,7 +13,9 @@ export function useQueryString () {
   useEffect(() => {
     window.addEventListener('popstate', () => setQueryString(getQueryString()))
     return () => {
-      window.removeEventListener('popstate', () => setQueryString(getQueryString()))
+      window.removeEventListener('popstate', () =>
+        setQueryString(getQueryString())
+      )
     }
   }, [])
 

package/src/template/src/utils/index.js

@@ -2,16 +2,13 @@ import { useQueryString } from './hooks'
 
 const env = import.meta.env
 
-async function startViewTransition (fun = () => {}, ref, animation) {
-  if (!document.startViewTransition) return fun()
+async function startViewTransition(fun = () => {}, ref, animation) {
+  if (!document.startViewTransition || env.VITE_VIEW_TRANSITION === 'false')
+    return fun()
 
   ref.style.viewTransitionName = animation
   await document.startViewTransition(fun).finished
   ref.style.viewTransitionName = ''
 }
 
-export {
-  env,
-  useQueryString,
-  startViewTransition
-}
+export { env, useQueryString, startViewTransition }

package/src/template/vite.config.js

@@ -42,9 +42,7 @@ export default defineConfig(({ mode }) => {
 
     css: {
       postcss: {
-        plugins: [
-          autoprefixer
-        ]
+        plugins: [autoprefixer]
       }
     },
 
@@ -52,18 +50,23 @@ export default defineConfig(({ mode }) => {
       react(),
       {
         name: 'html',
-        transformIndexHtml (html) {
+        transformIndexHtml(html) {
           let gitHash = ''
           try {
-            gitHash = execSync('git rev-parse --short HEAD 2> /dev/null').toString().trim()
-          } catch (e) { }
+            gitHash = execSync('git rev-parse --short HEAD 2> /dev/null')
+              .toString()
+              .trim()
+          } catch (e) {}
 
-          return html.replaceAll('%VERSION%', `version=${version}, env=${mode}, release-date=${new Date()}, git-hash=${gitHash}`)
+          return html.replaceAll(
+            '%VERSION%',
+            `version=${version}, env=${mode}, release-date=${new Date()}, git-hash=${gitHash}`
+          )
         }
       },
       {
         name: 'svg',
-        async transform (src, id) {
+        async transform(src, id) {
           let code = id.split('?')[0]
           const type = id.split('?')[1]
 
@@ -83,19 +86,12 @@ export default defineConfig(({ mode }) => {
 
     test: {
       root: './',
-      watch: false,
       environment: 'jsdom',
-      include: ['test/**/*.js', 'test/**/*.jsx'],
       coverage: {
-        all: true,
         reportsDirectory: '.coverage',
-        include: ['src/**/*.js', 'src/**/*.jsx'],
-        exclude: [
-          'src/index.jsx',
-          'src/assets/i18n'
-        ]
+        include: ['src/**/*.{js,jsx}'],
+        exclude: ['.coverage', 'src/assets', 'src/index.jsx']
       }
     }
-
   }
 })