nextia 3.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Sinuhe Maceda https://sinuhe.dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,16 @@
+# nextia
+
+## Create fast web applications
+
+```sh
+npm i
+# Go to examples
+cd examples
+```
+
+```sh
+# create project
+npx nextia@latest my-app
+```
+
+[npm](https://www.npmjs.com/package/nextia)

package/package.json

@@ -0,0 +1,41 @@
+{
+	"name": "nextia",
+	"description": "Create fast web applications",
+	"version": "3.0.0",
+	"type": "module",
+	"license": "MIT",
+	"author": {
+		"name": "Sinuhe Maceda",
+		"email": "sinuhe.dev@gmail.com",
+		"url": "https://sinuhe.dev"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/sinuhedev/nextia.git"
+	},
+	"keywords": [
+		"react"
+	],
+	"main": "src/lib.js",
+	"bin": {
+		"nextia": "src/bin.js"
+	},
+	"eslintConfig": {
+		"extends": "./node_modules/standard/eslintrc.json"
+	},
+	"scripts": {
+		"start": "echo 'go to examples'",
+		"clean": "rm -fr node_modules package-lock.json",
+		"make": "npm run clean && npm install",
+		"eslint": "standard src",
+		"nextia": "node src/bin.js",
+		"nextia:my-app": "node src/bin.js my-app"
+	},
+	"peerDependencies": {
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0"
+	},
+	"devDependencies": {
+		"standard": "^17.1.2"
+	}
+}

package/src/bin.js

@@ -0,0 +1,187 @@
+#!/usr/bin/env node
+
+/**
+ * Copyright (c) 2025 Sinuhe Maceda https://sinuhe.dev
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * https://github.com/sinuhedev/nextia
+ */
+
+import { mkdir, writeFile } from 'node:fs/promises'
+
+async function createPage (name, isNext, isType) {
+  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 index = isNext ? 1 : 0
+  const config = {
+    root: ['pages', 'app'],
+    file: ['index.jsx', 'page.jsx'],
+    directive: [
+      '',
+      `'use client'
+
+`]
+  }
+
+  const dirName = `./src/${config.root[index]}/${name}`
+
+  try {
+    await mkdir(dirName)
+
+    const pageName = toPascalCase(name) + 'Page'
+
+    // index.jsx
+    writeFile(`${dirName}/${config.file[index]}`,
+  `${config.directive[index]}import React, { useEffect } from 'react'
+import { useFx, css } from 'nextia'
+import functions from './functions'
+import './style.css'
+
+export default function ${pageName} () {
+  const { state, fx } = useFx(functions)
+
+  return (
+    <section className={css('${pageName}', '')}>
+      ${pageName}
+    </section>
+  )
+}
+`)
+
+    // style.sss
+    writeFile(`${dirName}/style.css`,
+  `.${pageName} {
+}`)
+
+    // function.js
+    writeFile(`${dirName}/functions.js`,
+  `const initialState = {
+}
+
+export default { initialState }
+`)
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+async function createComponent (name, isType) {
+  const dirName = `./src/components/${name}`
+
+  try {
+    await mkdir(dirName)
+    const componentName = name.replaceAll('/', '') + '-component'
+
+    // index.jsx
+    writeFile(`${dirName}/index.jsx`,
+`import React, { useEffect } from 'react'
+import { css } from 'nextia'
+import './style.css'
+
+export default function ${name} ({ className, style }) {
+  return (
+    <article className={css('${componentName}', className)} style={style}>
+      ${componentName}
+    </article>
+  )
+}
+`)
+
+    // style.css
+    writeFile(`${dirName}/style.css`,
+`.${componentName}  {
+}`
+    )
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+async function createContainer (name, isType) {
+  const dirName = `./src/containers/${name}`
+
+  try {
+    await mkdir(dirName)
+    const containerName = name.replaceAll('/', '') + '-container'
+
+    // index.jsx
+    writeFile(`${dirName}/index.jsx`,
+`import React, { useEffect } from 'react'
+import { useFx, css } from 'nextia'
+import functions from './functions'
+import './style.css'
+
+export default function ${name} ({ className, style }) {
+  const { state, fx } = useFx(functions)
+
+  return (
+    <article className={css('${containerName}', className, '')} style={style}>
+      ${containerName}
+    </article>
+  )
+}
+`)
+
+    // style.css
+    writeFile(`${dirName}/style.css`,
+`.${containerName}  {
+}`)
+
+    // function.js
+    writeFile(`${dirName}/functions.js`,
+`const initialState = {
+}
+
+export default { initialState }
+`)
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+/**
+ * main
+ */
+
+const CMD = process.argv[2]
+const PROJECT_NAME = process.argv[2]
+const FILE_NAME = process.argv[3]
+
+switch (CMD) {
+  case 'page':
+  case 'page:type':
+  case 'next:page':
+  case 'next:page:type':
+    if (FILE_NAME) {
+      createPage(
+        FILE_NAME,
+        ['next:page', 'next:page:type'].includes(CMD),
+        ['page:type', 'next:page:type'].includes(CMD))
+    } else console.warn('npm run page <page-name>')
+    break
+
+  case 'component':
+  case 'component:type':
+    if (FILE_NAME) createComponent(FILE_NAME, CMD === 'component:type')
+    else console.warn('npm run component <ComponentName>')
+    break
+
+  case 'container':
+  case 'container:type':
+    if (FILE_NAME) createContainer(FILE_NAME, CMD === 'component:type')
+    else console.warn('npm run container <ContainerName>')
+    break
+
+  default:
+    // create project
+    if (PROJECT_NAME) console.info(`Project name: ${PROJECT_NAME}`)
+    else console.warn('npx nextia@latest <my-app>')
+    break
+}

package/src/lib.js

@@ -0,0 +1,223 @@
+'use client'
+
+/**
+ * Copyright (c) 2025 Sinuhe Maceda https://sinuhe.dev
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * https://github.com/sinuhedev/nextia
+ */
+
+import { createContext, use, useReducer, useCallback } from 'react'
+
+const Context = createContext()
+
+/**
+ * css
+ */
+function css (...classNames) {
+  classNames = classNames
+    .filter(e => e)
+    .reduce((accumulator, currentValue) => {
+      if (typeof currentValue === 'string') {
+        accumulator.push(currentValue)
+      } else if (!Array.isArray(currentValue) && typeof currentValue === 'object') {
+        for (const e in currentValue) {
+          if (currentValue[e]) accumulator.push(e)
+        }
+      }
+      return accumulator
+    }, [])
+
+  return ([...new Set(classNames)]).join(' ')
+}
+
+/**
+ * values
+ */
+function values (state, payload, value) {
+  const paths = payload.split('.')
+
+  // one level
+  if (paths.length === 1) {
+    // set Object and exist Object
+    if (value && typeof value === 'object' && Object.keys(value).length) {
+      return { ...state, [payload]: { ...state[payload], ...value } }
+    }
+
+    // set Value
+    return {
+      ...state,
+      [payload]: value
+    }
+  }
+
+  // multi level
+  const stateClone = structuredClone(state)
+  const finalPath = paths.pop()
+  const stateRef = paths.reduce((ac, e) => ac[e], stateClone)
+  stateRef[finalPath] = value
+
+  return stateClone
+}
+
+/**
+ * merge
+ */
+function merge (target, source) {
+  // in array return all source
+  if (Array.isArray(target)) return source
+
+  const isObject = obj => obj && typeof obj === 'object'
+  const output = { ...target }
+
+  // merge
+  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])
+  })
+
+  return output
+}
+
+/**
+ * logger
+ */
+const Logger = () => {
+  let instance
+
+  return {
+    getInstance: logger => {
+      if (!instance) {
+        instance = logger === 'true'
+      }
+      return instance
+    }
+  }
+}
+
+const logger = Logger().getInstance
+
+const log = (reducer) => {
+  const getPayload = (action) => {
+    const { type, payload } = action
+
+    if (type === 'change') {
+      const { name, type, checked, value } = payload.target
+      return {
+        name, type, checked, value
+      }
+    }
+
+    if (typeof payload !== 'object') {
+      return `(${payload ?? ''})`
+    }
+
+    return payload
+  }
+
+  const reducerWithLogger = useCallback((state, action) => {
+    const newState = reducer(state, action)
+
+    console.log(
+      `%c${action.isContext ? 'Context' : 'Page   '} : %c${action.type}`, 'color: #60a495', 'color: #7ee5cc',
+      getPayload(action), { a_State: state, b_NewState: newState }
+    )
+
+    return newState
+  }, [reducer])
+
+  return reducerWithLogger
+}
+
+/**
+ * reducer
+ */
+const reducer = (state, action) => {
+  const { type, payload, initialState } = action
+
+  switch (type) {
+    case 'set':
+      // Merge only item
+      if (Object.keys(payload).length === 1) {
+        const key = Object.keys(payload)[0]
+        return values(state, key, payload[key])
+      }
+
+      // Merge all json
+      return merge(state, payload)
+
+    case 'show':
+      return values(state, payload, true)
+
+    case 'hide':
+      return values(state, payload, false)
+
+    case 'change':
+      return values(
+        state,
+        payload.target.name,
+        payload.target.type === 'checkbox' ? payload.target.checked : payload.target.value
+      )
+
+    case 'reset':
+      // value reset
+      if (payload) {
+        const paths = Array.isArray(payload) ? payload : [payload]
+
+        return paths.reduce((ac, path) => {
+          const value = path.split('.').reduce((ac, e) => ac[e], initialState)
+          return values(ac, path, value)
+        }, state)
+      }
+
+      // all reset
+      return initialState
+  }
+}
+
+/**
+ * useFx
+ */
+function useFx (functions = { initialState: {} }) {
+  const context = use(Context)
+  const { initialState } = functions
+  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
+  }, {})
+
+  // Actions
+  const actions = Object.keys(functions).reduce((ac, e) => {
+    if (functions[e] instanceof Function) {
+      ac[e] = payload => {
+        const props = {
+          ...commonActions,
+          state,
+          payload
+        }
+        if (context) { props.context = context }
+
+        return functions[e](Object.freeze(props))
+      }
+    }
+    return ac
+  }, {})
+
+  // return initialState, state, actions and context
+  const props = {
+    initialState,
+    state,
+    fx: { ...commonActions, ...actions }
+  }
+  if (context) { props.context = context }
+
+  return Object.freeze(props)
+}
+
+export { css, Context, logger, useFx }