nextia 7.0.0 → 7.0.3

package/template/public/logo.svg

@@ -1,105 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   width="64mm"
-   height="64mm"
-   viewBox="0 0 63.999981 64"
-   version="1.1"
-   id="svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <title
-     id="logo">sinuhe.dev/logo</title>
-  <defs
-     id="defs" />
-  <g
-     id="layer1"
-     style="display:none">
-    <rect
-       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.183199;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
-       id="rect4575"
-       width="68.329857"
-       height="67.899437"
-       x="-0.10760616"
-       y="0.15671897" />
-  </g>
-  <g
-     id="layer6"
-     style="display:inline"
-     transform="translate(0,-67.73333)">
-    <ellipse
-       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.733511;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
-       id="path1043"
-       cx="32.12582"
-       cy="99.992744"
-       rx="31.071707"
-       ry="31.177364" />
-  </g>
-  <g
-     id="layer5"
-     style="display:inline"
-     transform="translate(0,-67.73333)">
-    <g
-       id="g4700"
-       style="display:inline;opacity:1;fill:#b21cbe;fill-opacity:1;stroke:#000000;stroke-width:1.04693;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:1;stroke-dasharray:none;stroke-opacity:1">
-      <path
-         id="path4702"
-         style="fill:#353564;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
-         d="m 30.832208,99.306623 v 4.743067 l 4.96555,1.50109 v -4.43205 z"
-         points="30.832208,104.04969 35.797758,105.55078 35.797758,101.11873 30.832208,99.306623 " />
-      <path
-         id="path4712"
-         style="fill:#e9e9ff;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
-         d="m 35.797758,101.11873 3.26925,-2.708535 v 4.896925 l -3.26925,2.24366 z"
-         points="39.067008,98.410195 39.067008,103.30712 35.797758,105.55078 35.797758,101.11873 " />
-      <path
-         id="path4704"
-         style="fill:#4d4d9f;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
-         d="m 30.832208,99.306623 2.963096,-3.125021 5.271704,2.228593 -3.26925,2.708535 z"
-         points="33.795304,96.181602 39.067008,98.410195 35.797758,101.11873 30.832208,99.306623 " />
-      <path
-         id="path4710"
-         style="fill:#1c6fbe;fill-opacity:0.850847;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
-         d="m 30.832208,104.04969 2.963096,-2.58867 5.271704,1.8461 -3.26925,2.24366 z"
-         points="33.795304,101.46102 39.067008,103.30712 35.797758,105.55078 30.832208,104.04969 " />
-      <path
-         id="path4708"
-         style="fill:#1c6fbe;fill-opacity:0.657627;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
-         d="m 33.795304,96.181602 v 5.279418 l 5.271704,1.8461 v -4.896925 z"
-         points="33.795304,101.46102 39.067008,103.30712 39.067008,98.410195 33.795304,96.181602 " />
-      <path
-         id="path4706"
-         style="fill:#1c6fbe;fill-opacity:0.535593;fill-rule:evenodd;stroke:none;stroke-width:3.31004;stroke-linejoin:round"
-         d="m 30.832208,99.306623 2.963096,-3.125021 v 5.279418 l -2.963096,2.58867 z"
-         points="33.795304,96.181602 33.795304,101.46102 30.832208,104.04969 30.832208,99.306623 " />
-    </g>
-    <path
-       style="fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.253318;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke"
-       d="m 11.165395,82.054897 48.085834,16.788915 -1.255039,3.313058 z"
-       id="path896" />
-    <path
-       style="fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 32.028836,45.114235 18.106422,22.683955 -1.711567,-0.545593 z"
-       id="path927"
-       transform="matrix(0.95591558,0,0,0.95591558,-19.451471,38.9295)" />
-    <path
-       style="fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 31.523833,70.837808 -17.088483,18.792702 0.125878,-1.618829 z"
-       id="path946"
-       transform="matrix(-0.9346334,0,0,-0.9854517,39.218821,189.98433)" />
-    <path
-       style="fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m -0.57636767,103.02518 46.59500667,-19.6116 -2.095993,2.003079 z"
-       id="path966"
-       transform="matrix(0.95591558,0,0,0.95591558,10.293548,21.654226)" />
-    <path
-       style="display:inline;fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 31.526079,70.834722 -16.771302,18.447499 0.107264,-1.598211 z"
-       id="path946-9"
-       transform="matrix(-0.9346334,0,0,-0.9854517,41.337946,191.74435)" />
-    <path
-       style="display:inline;fill:#1c6fbe;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m -0.52687485,103.06681 48.61219685,-19.843049 -2.234064,1.992464 z"
-       id="path966-2"
-       transform="matrix(0.95591558,0,0,0.95591558,12.41267,23.41428)" />
-  </g>
-</svg>

package/template/src/assets/i18n/index.js

@@ -1,26 +0,0 @@
-export default {
-  locales: ['EN', 'ES'],
-  defaultLocale: 'ES',
-
-  ui: {
-    back: ['Back', 'Regresar'],
-    cancel: ['Cancel', 'Cancelar'],
-    home: ['Home', 'Inicio'],
-    notFound: ['Not Found', 'Extraviado'],
-    ok: ['OK', 'Aceptar'],
-    signIn: ['Sign In', 'Iniciar Sesión'],
-    signOut: ['Sign Out', 'Cerrar Sesión']
-  },
-
-  page: {
-    name: ['My name is {0} {1} {2}', 'Mi nombre es {0} {1} {2}'],
-    user: {
-      family: ['Family', 'Famlilia']
-    },
-    module: {
-      block: {
-        docker: ['docker', 'contenedor']
-      }
-    }
-  }
-}

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

@@ -1,34 +0,0 @@
-import { useRef } from 'react'
-import './style.css'
-import { css } from 'nextia'
-import { startViewTransition } from 'utils'
-
-export default function Counter({
-  name,
-  value,
-  className,
-  style,
-  animation = 'count',
-  onChange
-}) {
-  const ref = useRef()
-
-  return (
-    <article
-      className={css('Counter-component', className)}
-      style={style}
-      name={name}
-    >
-      <button
-        type="button"
-        onClick={(e) => {
-          startViewTransition(onChange(e), ref.current, animation)
-        }}
-      >
-        Increment
-      </button>
-
-      <span ref={ref}>{value}</span>
-    </article>
-  )
-}

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

@@ -1,5 +0,0 @@
-.Counter-component {
-  span {
-    font-size: 60px;
-  }
-}

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

@@ -1,12 +0,0 @@
-import { I18n } from 'components'
-
-export default function Messages({ name, className, style }) {
-  return (
-    <article className={className} style={style} name={name}>
-      Message-component :{' '}
-      <span>
-        <I18n value="page.user.family" />
-      </span>
-    </article>
-  )
-}

package/template/src/components/index.js

@@ -1,10 +0,0 @@
-import Counter from './Counter'
-import Message from './Message'
-// ui
-import I18n from './ui/I18n'
-import Icon from './ui/Icon'
-import Link from './ui/Link'
-import Svg from './ui/Svg'
-import Translate from './ui/Translate'
-
-export { Counter, I18n, Icon, Link, Message, Svg, Translate }

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

@@ -1,23 +0,0 @@
-import i18nFile from 'assets/i18n'
-import { useFx } from 'nextia'
-
-export default function UiI18n({ value, args = [] }) {
-  const { context } = useFx()
-
-  try {
-    let text = value.split('.').reduce((ac, el) => ac[el], i18nFile)
-    text = text[i18nFile.locales.indexOf(context.state.i18n.currentLocale)]
-
-    if (args) {
-      text = text.replace(
-        /([{}])\\1|[{](.*?)(?:!(.+?))?[}]/g,
-        (match, _literal, number) => args[number] || match
-      )
-    }
-
-    return text
-  } catch {
-    console.error(`Error in [il8n] => ${value}`)
-    return value
-  }
-}

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

@@ -1,50 +0,0 @@
-import { useEffect, useRef } from 'react'
-import icons from 'theme/icons/icons.svg?raw'
-
-export default function UiIcon({
-  id,
-  className,
-  style,
-  width = '48',
-  height,
-  viewBox = '0 0 48 48',
-  fill = 'none',
-  color = 'currentColor',
-  stroke = 'currentColor',
-  strokeWidth = '2',
-  strokeLinecap = 'round',
-  strokeLinejoin = 'round',
-  ...props
-}) {
-  const ref = useRef()
-
-  useEffect(() => {
-    const svg = new DOMParser()
-      .parseFromString(icons, 'image/svg+xml')
-      .documentElement.getElementById(id)
-
-    if (svg) {
-      ref.current.innerHTML = svg.innerHTML
-    }
-  }, [id])
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      ref={ref}
-      id={id}
-      className={className}
-      style={style}
-      width={width}
-      height={height}
-      viewBox={viewBox}
-      fill={fill}
-      color={color}
-      stroke={stroke}
-      strokeWidth={strokeWidth}
-      strokeLinecap={strokeLinecap}
-      strokeLinejoin={strokeLinejoin}
-      {...props}
-    />
-  )
-}

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

@@ -1,12 +0,0 @@
-export default function UiLink({ children, href, value = {}, ...props }) {
-  href ??= window.location.hash.split('?')[0]
-  value = Object.keys(value).length
-    ? `?${new URLSearchParams(value).toString()}`
-    : ''
-
-  return (
-    <a href={href + value} {...props}>
-      {children}
-    </a>
-  )
-}

package/template/src/components/ui/Svg/index.jsx

@@ -1,54 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-export default function UiSvg({
-  src,
-  width = '48',
-  height,
-  viewBox = '0 0 48 48',
-  fill = 'none',
-  color = 'currentColor',
-  stroke = 'currentColor',
-  strokeWidth = '2',
-  strokeLinecap = 'round',
-  strokeLinejoin = 'round'
-}) {
-  const ref = useRef()
-
-  useEffect(() => {
-    if (!ref.current) return
-
-    const svg = new DOMParser()
-      .parseFromString(src, 'image/svg+xml')
-      .querySelector('svg')
-
-    svg.setAttribute('width', width)
-    svg.setAttribute('height', height ?? width)
-    svg.setAttribute('viewBox', viewBox)
-    svg.setAttribute('fill', fill)
-    svg.setAttribute('color', color)
-    svg.setAttribute('stroke', stroke)
-    svg.setAttribute('stroke-width', strokeWidth)
-    svg.setAttribute('stroke-linecap', strokeLinecap)
-    svg.setAttribute('stroke-linejoin', strokeLinejoin)
-
-    const shadow =
-      ref.current.shadowRoot ?? ref.current.attachShadow({ mode: 'open' })
-    shadow.innerHTML = svg.outerHTML
-
-    ref.current.style.width = `${width}px`
-    ref.current.style.height = `${height ?? width}px`
-  }, [
-    src,
-    width,
-    height,
-    viewBox,
-    fill,
-    color,
-    stroke,
-    strokeWidth,
-    strokeLinecap,
-    strokeLinejoin
-  ])
-
-  return <div ref={ref} />
-}

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

@@ -1,18 +0,0 @@
-export default function UiTranslate({
-  value,
-  onChange = () => {},
-  className,
-  style
-}) {
-  return (
-    <article className={className} style={style}>
-      <select value={value.currentLocale} onChange={onChange}>
-        {value.locales.map((e) => (
-          <option key={e} value={e} className="m-2">
-            {e}
-          </option>
-        ))}
-      </select>
-    </article>
-  )
-}

package/template/src/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="utf-8" />
-	<title>%PUBLIC_TITLE%</title>
-	<link rel="shortcut icon" href="logo.svg" />
-	<meta name="version" content="%VERSION%" />
-	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
-	<link rel="stylesheet" href="theme/index.css" />
-	<script type="module" src="index.jsx"></script>
-</head>
-
-<body>
-	<div id="root"></div>
-</body>
-
-</html>

package/template/src/index.jsx

@@ -1,4 +0,0 @@
-import { createRoot } from 'react-dom/client'
-import Pages from './pages'
-
-createRoot(document.getElementById('root')).render(<Pages />)

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

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

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

@@ -1,51 +0,0 @@
-import { Counter } from 'components'
-import { css, useFx } from 'nextia'
-import functions from './functions'
-import './style.css'
-
-export default function CounterPage() {
-  const { state, fx } = useFx(functions)
-
-  return (
-    <section
-      className={css(
-        'CounterPage',
-        '',
-        'class-test',
-        'class-test',
-        {},
-        null,
-        true,
-        false,
-        [],
-        { 'css-false': false },
-        undefined,
-        { 'css-true': true },
-        { 'css-true': true }
-      )}
-    >
-      Counters
-      <div className={css(null)} />
-      <div className={css(undefined)} />
-      <div className={css([])} />
-      <div className={css({})} />
-      <div className={css()} />
-      <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/counter/style.css

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

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

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

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

@@ -1,27 +0,0 @@
-import { css, useFx } from 'nextia'
-import { useEffect } from 'react'
-import { env } from 'utils'
-import functions from './functions'
-import './style.css'
-
-export default function EnvPage() {
-  const { state, fx } = useFx(functions)
-
-  // env
-  useEffect(() => {
-    console.log('env:', env)
-  }, [])
-
-  return (
-    <section className={css('EnvPage', '')}>
-      <br />
-      <br />
-
-      <div style={{ display: 'flex' }}>
-        <pre style={{ margin: '0 50px 0 50px' }}>
-          env = {JSON.stringify(env, undefined, 2)}
-        </pre>
-      </div>
-    </section>
-  )
-}

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

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

package/template/src/pages/functions.js

@@ -1,37 +0,0 @@
-import i18nFile from 'assets/i18n'
-
-const initialState = {
-  i18n: {
-    currentLocale:
-      window.localStorage.getItem('i18n') || i18nFile.defaultLocale,
-    locales: i18nFile.locales
-  },
-  loading: false,
-  num: 0
-}
-
-function changeI18n({ payload, set }) {
-  const { value } = payload.target
-  set({ i18n: { currentLocale: value } })
-  window.localStorage.setItem('i18n', value)
-}
-
-function increment({ state, set }) {
-  set({ num: state.num + 1 })
-}
-
-function decrement({ state, set }) {
-  set({ num: state.num - 1 })
-}
-
-function zero({ payload, set }) {
-  set({ num: payload.value })
-}
-
-export default {
-  initialState,
-  changeI18n,
-  increment,
-  decrement,
-  zero
-}

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

@@ -1,43 +0,0 @@
-const initialState = {
-  channel: 7,
-  msg: 'https://sinuhe.dev',
-  data: { user: 'Sinuhe MB' },
-  myArray: ['A', 'B', 'C'],
-  setNameValue: 'name value',
-  form: {
-    funny: false,
-    gender: 'M',
-    name: {
-      firstName: 'Sinuhe',
-      lastName: 'Maceda'
-    },
-    year: 33,
-    moreArray: [[[50, 40, 10]]]
-  },
-  ls: {
-    users: [
-      {
-        name: 'sinuhe',
-        year: 33
-      },
-      {
-        name: 'alberto',
-        year: 20
-      }
-    ]
-  }
-}
-
-function increment({ state, set }) {
-  set({ channel: state.channel + 1 })
-}
-
-function decrement({ state, set }) {
-  set({ channel: state.channel - 1 })
-}
-
-export default {
-  initialState,
-  increment,
-  decrement
-}