nextia 3.0.2 → 4.0.0

package/create-nextia/templates/nextjs/src/app/counter/functions.js

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

package/create-nextia/templates/nextjs/src/app/counter/page.js

@@ -0,0 +1,42 @@
+'use client'
+
+import React, { useEffect } from 'react'
+import { useFx, css } from 'nextia'
+import functions from './functions'
+import { Counter } from 'components'
+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 })}>
+
+      CounterPage
+
+      <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/create-nextia/templates/nextjs/src/app/counter/style.css

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

package/create-nextia/templates/nextjs/src/app/env/functions.js

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

package/create-nextia/templates/nextjs/src/app/env/page.js

@@ -0,0 +1,24 @@
+'use client'
+
+import React, { useEffect } from 'react'
+import { useFx, css } from 'nextia'
+import functions from './functions'
+import './style.css'
+
+export default function EnvPage () {
+  const { state, fx } = useFx(functions)
+
+  // env
+  useEffect(() => {
+    console.log(process.env.NEXT_PUBLIC_TITLE)
+  }, [])
+
+  return (
+    <section className={css('EnvPage', '')}>
+      EnvPage
+
+      <h1>{process.env.NEXT_PUBLIC_TITLE}</h1>
+
+    </section>
+  )
+}

package/create-nextia/templates/nextjs/src/app/env/style.css

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

package/create-nextia/templates/nextjs/src/app/functions.js

@@ -0,0 +1,33 @@
+import i18nFile from 'assets/i18n'
+
+const initialState = {
+  i18n: '',
+  loading: false,
+  num: 0
+}
+
+function init ({ set }) {
+  set({
+    i18n: window.localStorage.getItem('i18n') || i18nFile.defaultLocale
+  })
+}
+
+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,
+  init,
+  increment,
+  decrement,
+  zero
+}

package/create-nextia/templates/nextjs/src/app/home/functions.js

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

package/create-nextia/templates/nextjs/src/app/home/page.js

@@ -0,0 +1,184 @@
+'use client'
+
+import React, { useEffect } from 'react'
+import './style.css'
+import { useFx, css } from 'nextia'
+import functions from './functions'
+import { sum } from 'utils'
+
+export default function HomePage () {
+  const { state, initialState, fx, context } = useFx(functions)
+
+  useEffect(() => {
+    console.info(sum(10, 10))
+  }, [])
+
+  return (
+    <section className={css('HomePage', 'container')}>
+      <div>
+        <div>
+          <p>set</p>
+          <button className='' onClick={() => fx.set({ setNameValue: 'set 1 level' })}>
+            set Value
+          </button>
+          <button
+            onClick={() =>
+              fx.set({
+                form: {
+                  name: {
+                    firstName: 'ppppppppppp',
+                    lastName: '***********'
+                  }
+                }
+              })}
+          >
+            set Json
+          </button>
+        </div>
+
+        <div>
+          <button onClick={() => fx.set({ 'form.name.lastName': 'BOUCHAN' })}>
+            set mulit level (Value)
+          </button>
+
+          <button
+            onClick={() =>
+              fx.set({
+                'form.name': { firstName: 'SINUHE', lastName: 'MACEDA' }
+              })}
+          >
+            set mulit level (Json)
+          </button>
+        </div>
+
+        <div>
+          <p>Show and Hide :</p>
+          <button onClick={() => fx.show('form.funny')}>show</button>
+          <button onClick={() => fx.hide('form.funny')}>hide</button>
+        </div>
+
+        <div>
+          <p>Reset :</p>
+          <button onClick={() => fx.reset('ls')}>Reset (ls)</button>
+          <button onClick={() => fx.reset('form.name')}>
+            Reset (form.name)
+          </button>
+          <button onClick={() => fx.reset(['channel', 'msg', 'form.name'])}>
+            Reset ([channel,msg,form.name])
+          </button>
+        </div>
+
+        <div>
+          <p>Simple actions/Reducer:</p>
+          <button onClick={e => fx.increment(e)}>+</button>
+          <button onClick={e => fx.decrement(e)}>-</button>
+
+          <button
+            onClick={() =>
+              fx.set({
+                channel: 256,
+                msg: 256,
+                data: { user: 256 },
+                myArray: ['256', '256', '256'],
+                setNameValue: '256',
+                form: {
+                  // funny: 256,
+                  // gender: '256',
+                  name: {
+                    firstName: '256',
+                    lastName: '256'
+                  },
+                  year: 256,
+                  moreArray: [[[256, 256, 256]]]
+                },
+                ls: {
+                  users: [
+                    {
+                      name: '256',
+                      year: 256
+                    },
+                    {
+                      name: '256',
+                      year: 256
+                    }
+                  ]
+                }
+              })}
+          >
+            256
+          </button>
+        </div>
+
+        <div>
+          <p>onChange:</p>
+
+          {/* input text */}
+          <input
+            type='text'
+            name='form.name.firstName'
+            value={state.form.name.firstName}
+            onChange={evt => fx.change(evt)}
+          />
+
+          {/* checkbox */}
+          <input
+            type='checkbox'
+            name='form.funny'
+            checked={state.form.funny}
+            onChange={evt => fx.change(evt)}
+          />
+          <label htmlFor='form.funny'>Funny</label>
+
+          {/* radio */}
+          <input
+            type='radio'
+            name='form.gender'
+            value='M'
+            checked={state.form.gender === 'M'}
+            onChange={evt => fx.change(evt)}
+          />
+          <label htmlFor='M'>M</label>
+          <input
+            type='radio'
+            name='form.gender'
+            value='F'
+            checked={state.form.gender === 'F'}
+            onChange={evt => fx.change(evt)}
+          />
+          <label htmlFor='F'>F</label>
+
+          {/* select */}
+          <select name='form.year' onChange={evt => fx.change(evt)}>
+            <option value='20'>20</option>
+            <option value='21'>21</option>
+            <option value='22'>22</option>
+            <option value='33'>33</option>
+          </select>
+        </div>
+      </div>
+
+      <div>
+        <div style={{ textAlign: 'center' }}>
+          <button onClick={() => fx.reset()}>RESET</button>
+          <button
+            onClick={() => {
+              if (context.state.loading) context.fx.hide('loading')
+              else context.fx.show('loading')
+            }}
+          >
+            loading
+          </button>
+        </div>
+
+        <div style={{ display: 'flex' }}>
+          <pre style={{ margin: '0 50px 0 50px' }}>
+            state = {JSON.stringify(state, undefined, 2)}
+          </pre>
+          <pre style={{ margin: '0 50px 0 50px' }}>
+            initialState = {JSON.stringify(initialState, undefined, 2)}
+          </pre>
+        </div>
+      </div>
+    </section>
+  )
+}

package/create-nextia/templates/nextjs/src/app/home/style.css

@@ -0,0 +1,51 @@
+.HomePage {
+  background-color: #21252b;
+
+  &.container {
+    display: flex;
+  }
+
+  p {
+    padding-left: 25px;
+    margin: 0px;
+  }
+
+  pre {
+    color: gray;
+    font-size: 12px;
+    max-height: 700px;
+    overflow: auto;
+  }
+
+  button {
+    margin: 12px;
+    height: 50px;
+    width: 200px;
+  }
+
+  input[type='text'] {
+    margin: 20px;
+    height: 30px;
+    width: 180px;
+  }
+
+  input[type='checkbox'] {
+    height: 30px;
+    width: 30px;
+  }
+
+  input[type='radio'] {
+    height: 30px;
+    width: 30px;
+  }
+
+  select {
+    margin-left: 40px;
+    height: 30px;
+    width: 180px;
+  }
+
+  .my-css {
+    font-size: 20px;
+  }
+}

package/create-nextia/templates/nextjs/src/app/images/functions.js

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

package/create-nextia/templates/nextjs/src/app/images/page.jsx

@@ -0,0 +1,26 @@
+'use client'
+
+import React, { useEffect } from 'react'
+import { useFx, css } from 'nextia'
+import functions from './functions'
+import Image from 'next/image'
+import image from 'assets/img/image.jpg'
+import './style.css'
+
+export default function ImagesPage () {
+  const { state, fx } = useFx(functions)
+
+  return (
+    <section className={css('ImagesPage', '')}>
+
+      <br />
+      <p>css-img</p>
+      <div className='css-img' />
+
+      <br />
+      <p>img</p>
+      <Image src={image} height={200} alt='image' />
+
+    </section>
+  )
+}

package/create-nextia/templates/nextjs/src/app/images/style.css

@@ -0,0 +1,10 @@
+.ImagesPage {
+
+  .css-img {
+    background: url('../../assets/img/image.jpg') no-repeat;
+    height: 200px;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+
+}

package/create-nextia/templates/nextjs/src/app/layout.js

@@ -0,0 +1,109 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useFx, Context, logger } from 'nextia'
+import functions from './functions'
+import { Icon, Link } from 'components'
+import { Translate, I18n } from 'containers'
+import 'assets/theme/index.css'
+
+logger(process.env.NEXT_PUBLIC_LOGGER)
+
+function Layout ({ children }) {
+  const self = useFx(functions)
+  const { state, fx } = self
+
+  // Window is not defined in Next.js React app
+  const [start, setStart] = useState()
+
+  useEffect(() => {
+    setStart(true)
+    self.fx.init()
+  }, [])
+
+  return (
+    <html>
+      <head>
+        <title>{process.env.NEXT_PUBLIC_TITLE}</title>
+        <link rel='shortcut icon' href='logo.svg' />
+        <meta
+          name='version'
+          content={`version=${process.env.VERSION}, env=${process.env.NODE_ENV}, release-date=${new Date()}, git-hash=${process.env.GIT_HASH}`}
+        />
+        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0' />
+      </head>
+
+      <body>
+        {start &&
+          <>
+            <Context value={self}>
+
+              <header className='m-2' style={{ display: 'flex', gap: '20px' }}>
+                <Icon value='help' />
+                <Translate value={state.i18nLocale} onChange={e => fx.changeI18n(e)} />
+
+                <I18n value='page.name' args={['Sinuhe', 'Maceda', 'Bouchan']} />
+
+                <button onClick={e => fx.increment(e)}>increment</button>
+                {'  '}
+                <button onClick={e => fx.decrement(e)}>decrement</button>
+                {'  '}
+                <button onClick={() => fx.zero({ value: 0 })}>zero</button>
+                {'  '}
+                {state.num}
+                {'  '}
+                {state.loading ? <span> Loading... </span> : <span> View.. </span>}
+              </header>
+
+              <aside className='m-2'>
+                <Link href='/' className='mr-2'>
+                  /
+                </Link>
+                <Link href='/home' className='mr-2'>
+                  /home
+                </Link>
+                <Link href='/env' className='mr-2'>
+                  /env
+                </Link>
+                <Link href='/my-context' className='mr-2'>
+                  /my-context
+                </Link>
+                <Link href='/mockapi' className='mr-2'>
+                  /mockapi
+                </Link>
+                <Link href='/search-params' value={{ id: 20, user: 'Sinuhe' }} className='mr-2'>
+                  /search-params
+                </Link>
+                <Link href='/subpage/hello' className='mr-2'>
+                  /subpage/hello
+                </Link>
+                <Link href='/translate' className='mr-2'>
+                  /translate
+                </Link>
+                <Link href='/counter' className='mr-2'>
+                  /counter
+                </Link>
+                <Link href='/images' className='mr-2'>
+                  /images
+                </Link>
+                <Link href='/media-query' className='mr-2'>
+                  /media-query
+                </Link>
+                <Link href='/no' className='mr-2'>
+                  /no
+                </Link>
+              </aside>
+
+              <main className='m-2'>
+                {children}
+              </main>
+
+            </Context>
+          </>}
+
+      </body>
+    </html>
+  )
+}
+
+export default Layout

package/create-nextia/templates/nextjs/src/app/media-query/functions.js

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

package/create-nextia/templates/nextjs/src/app/media-query/page.js

@@ -0,0 +1,33 @@
+'use client'
+
+import { useFx, css } from 'nextia'
+import functions from './functions'
+import { useResize } from 'utils'
+import './style.css'
+
+export default function MediaQueryPage () {
+  const { state, fx } = useFx(functions)
+  const resize = useResize()
+
+  return (
+    <section className={css('MediaQueryPage', '')}>
+      <div>
+        <section>CSS @container </section>
+
+        <ul>
+          <li className='sm'>SM</li>
+          <li className='md'>MD</li>
+          <li className='lg'>LG</li>
+          <li className='xl'>XL</li>
+          <li className='xxl'>XXL</li>
+        </ul>
+
+        <pre style={{ margin: '0 50px 0 50px', width: '250px' }}>
+          state = {JSON.stringify(resize, undefined, 2)}
+        </pre>
+
+      </div>
+
+    </section>
+  )
+}

package/create-nextia/templates/nextjs/src/app/media-query/style.css

@@ -0,0 +1,38 @@
+.MediaQueryPage {
+
+  @container style(--sm: true) {
+    .sm {
+      color: #5ba15f;
+      font-weight: 400;
+    }
+  }
+
+  @container style(--md: true) {
+    .md {
+      color: #5ba15f;
+      font-weight: 400;
+    }
+  }
+
+  @container style(--lg: true) {
+    .lg {
+      color: #5ba15f;
+      font-weight: 400;
+    }
+  }
+
+  @container style(--xl: true) {
+    .xl {
+      color: #5ba15f;
+      font-weight: 400;
+    }
+  }
+
+  @container style(--xxl: true) {
+    .xxl {
+      color: #5ba15f;
+      font-weight: 400;
+    }
+  }
+
+}