@reactful/create 0.0.51

package/README.md

@@ -0,0 +1,8 @@
+# create reactful
+
+Create a reactful framework with a project scafold tool.
+
+```bash
+$ bun create reactful
+$ bunx creact-reactful
+```

package/common/package.json

@@ -0,0 +1,22 @@
+{
+   "type": "module",
+   "name": "template",
+   "module": "index.ts",
+   "scripts": {
+      "start": "bun --hot run index.ts",
+      "build": "rm -rf tsconfig.tsbuildinfo; bunx tsc -p tsconfig.json",
+      "clear": "rm -rf node_modules package-lock.json bun.lockb; bun i; bun run build"
+   },
+   "dependencies": {
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0",
+      "@reactful/extensions": "latest",
+      "@reactful/server": "latest",
+      "@reactful/web": "latest"
+   },
+   "devDependencies": {
+      "bun-types": "^1.0.20",
+      "typescript": "^5.3.3",
+      "@types/react": "^18.2.57"
+   }
+}

package/common/tsconfig.json

@@ -0,0 +1,24 @@
+{
+   "exclude": ["node_modules"], 
+   "compilerOptions": {
+      "rootDir": ".",
+      "jsx": "react",
+      "target": "esnext",
+      "module": "esnext",
+      "types": ["bun-types"],
+      "moduleDetection": "auto",
+      "moduleResolution": "bundler",
+      "noEmit": true,
+      "strict": false,
+      "allowJs": true,
+      "sourceMap": true,
+      "composite": true,
+      "declaration": true,
+      "skipLibCheck": true,
+      "noImplicitAny": false,
+      "esModuleInterop": true,
+      "downlevelIteration": true,
+      "allowSyntheticDefaultImports": true,
+      "forceConsistentCasingInFileNames": true
+   }
+}

package/index.js

@@ -0,0 +1,77 @@
+import inquirer from 'inquirer'
+import { $ } from "bun"
+import path from 'path'
+import fs from 'fs'
+
+const GREEN = '\x1b[32m';
+const RESET = '\x1b[0m';
+const prefix = `${GREEN}+${RESET}`
+const line = ' '.repeat(50)
+const decor = '-'.repeat(15)
+
+console.log(line)
+console.log(`${decor}( ${GREEN}reactful${RESET}.js )${decor}`)
+console.log(line)
+
+const templatePath = path.join(process.cwd(), 'templates')
+
+const templates = fs.readdirSync(templatePath)
+   .map(x => ({ name:x, path: `${templatePath}/${x}`}))
+   .filter(x => fs.statSync(x.path).isDirectory())      
+   .map(x => ({ name: x.name, value: x.name }))
+
+const questions = [
+   {
+      type: 'list',
+      name: 'template',
+      message: 'Which template?',
+      choices: templates, 
+      prefix
+   },
+   { type: 'input', name: 'project', message: 'Project name?', prefix },
+   { type: 'confirm', name: 'vscode', message: 'VS Code IDE?', prefix },
+   { type: 'confirm', name: 'install', message: 'Install?', prefix },
+]
+
+inquirer.prompt(questions).then(async function (answers) {
+   const fromTemplate = path.join(process.cwd(), base, 'templates', answers.template)
+   const destProject = path.join(process.cwd(), answers.project)
+   const fromCommon = path.join(process.cwd(), base, 'common')
+
+   copyFolder(fromTemplate, destProject)
+   copyFolder(fromCommon, destProject)
+   namingJSON(destProject, answers.project)
+
+   console.log('')
+
+   await $`cd ${answers.project}; bun install`
+})
+
+function namingJSON(directory, projectName) {
+   const url = `${directory}/package.json`
+   const txt = fs.readFileSync(url, { encoding:'utf-8' })
+   const obj = JSON.parse(txt)
+
+   obj.name = projectName
+
+   fs.writeFileSync(url, JSON.stringify(obj, null, 3))
+}
+
+function copyFolder(fromDir, destDir) {
+   if (!fs.existsSync(fromDir)) 
+      return console.error('Directory not found')
+
+  if (!fs.existsSync(destDir)) 
+      fs.mkdirSync(destDir)
+
+  const files = fs.readdirSync(fromDir)
+
+  files.forEach(item => {
+      const fromPath = `${fromDir}/${item}`
+      const destPath = `${destDir}/${item}`
+      const isFolder = fs.statSync(fromPath).isDirectory()
+
+      if (isFolder) copyFolder(fromPath, destPath)      
+      else fs.copyFileSync(fromPath, destPath)
+  })
+}

package/package.json

@@ -0,0 +1,16 @@
+{
+   "name": "@reactful/create",
+   "version": "0.0.51",
+   "main": "index.js",
+   "description": "reactful scafold tool",
+   "author": "jonathan de sena ribeiro <jsenaribeiro@gmail.com>",
+   "license": "MIT",
+   "bin": "index.js",
+   "scripts": {
+      "deploy": "npm publish --access public"
+   },
+   "dependencies": {
+      "inquirer": "^9.2.13",
+      "fs": "^0.0.1-security"
+   }
+}

package/templates/empty/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <meta name="description" content="Home page" >
+   <title>Welcome</title>
+</head>
+<body>
+   <div id="root" ></div>
+</body>
+</html>

package/templates/empty/index.ts

@@ -0,0 +1,5 @@
+import React from "react"
+import reactful from "reactful/server"
+
+await reactful.server("#root").render()
+

package/templates/minimal/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <meta name="description" content="Home page" >
+   <title>Welcome</title>
+</head>
+<body>
+   <div id="root" ></div>
+</body>
+</html>

package/templates/minimal/index.ts

@@ -0,0 +1,5 @@
+import React from "react"
+import reactful from "reactful/server"
+
+await reactful.server("#root").render()
+

package/templates/sampling/apis/auth/db.ts

@@ -0,0 +1,15 @@
+const database = [
+   { username: 'usr', password: 'pwd' },
+   { username: 'test', password: '123' },
+]
+
+export const db = {
+   
+   has(username, password) {
+      const contains = database
+         .filter(x => x.username == username)
+         .some(x => x.password == password)
+
+      return Promise.resolve(contains)
+   }
+}

package/templates/sampling/apis/auth/index.ts

@@ -0,0 +1,28 @@
+"user server"
+
+import { delay } from '../../../commons/src'
+import { db } from "./db"
+
+const SECRET_KEY = '0123456789'
+
+export async function post(request: Request) {
+   await delay(3000)
+
+   const AUTHORIZATION = request.headers.get('authorization')
+   const UNAUTHORIZED = { status: 401, headers: { 'Content-Type': 'text/plain' }}
+   const NO_HEADERS = 'Authorization header missing!'
+   const NOT_LOGIN = 'Authentication failed!'
+   
+   if (!AUTHORIZATION?.startsWith('Basic ')) 
+      return new Response(NO_HEADERS, UNAUTHORIZED)
+
+   const auth = AUTHORIZATION.split(' ')[1]
+   const credential = Buffer.from(auth, 'base64').toString('utf-8')
+   const [ username, password ] = credential.split(':')
+   const exists = await db.has(username, password)
+   const settings = exists ? { } : UNAUTHORIZED   
+   const access_token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'
+   const text = exists ? JSON.stringify({ access_token }) : NOT_LOGIN 
+ 
+   return new Response(text, settings)
+}

package/templates/sampling/apis/hello.ts

@@ -0,0 +1,3 @@
+export function get(request: Request) {
+   return new Response("hello world")
+}

package/templates/sampling/apis/quotes.ts

@@ -0,0 +1,16 @@
+export function get(request: Request) {
+   function getRandomInt(max) { return Math.floor(Math.random() * max); }    
+
+   const messages = [
+      "Man is the measure of all things (Protagoras)",
+      "The unexamined life is not worth living (Socrates)",
+      "One cannot step twice in the same river (Heraclitus)",
+      "Life must be understood backward. But it must be lived forward (Kierkegaard)",
+      "Science is what you know. Philosophy is what you don't know (Russell)",
+      "I can control my passions and emotions if I can understand their nature (Spinoza)" 
+   ]
+
+   const message = messages[getRandomInt(messages.length)]
+
+   return new Response(message)
+}

package/templates/sampling/apis/sub/index.ts

@@ -0,0 +1,3 @@
+export function get(request: Request) {
+   return new Response("hi sub index")
+}

package/templates/sampling/apis/sub/sub.ts

@@ -0,0 +1,3 @@
+export function get(request: Request) {
+   return new Response("hi sub-sub.ts")
+}

package/templates/sampling/assets/default.css

@@ -0,0 +1,91 @@
+@import url('https://fonts.cdnfonts.com/css/share-tech');
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+button,
+textarea,
+input,
+select {
+   font-family: agave !important
+}
+
+@media (prefers-color-scheme: dark) {
+   body {
+      background-color: #333;
+      color: #EEE;
+   }
+
+   a {
+      color: wheat
+   }
+
+   a:hover {
+      color: yellow
+   }
+
+   button {
+      background-color: #AAA;
+      border-width: 1px;
+      padding: 10px 5px;
+   }
+
+   input,
+   textarea {
+      color: #EEE;
+      background-color: #444;
+      border-color: #555;
+      border-style: solid;
+      border-width: 1px;
+      outline: none;
+   }
+
+   input:focus {
+      border-color: #AAA;
+      outline: none;
+   }
+}
+
+input.Hello,
+[bind='value'],
+[own^='Sub'] {
+   width: 50px;
+}
+
+label.Hello {
+   margin-bottom: 20px;
+}
+
+label.Hello code {
+   font-size: 12px;
+   color: silver;
+}
+
+button.Detail {
+   padding: 10px;
+   margin: 10px;
+   cursor: pointer;
+   background-color: #ccc;
+   border: 1px solid #000;
+   transition: margin-top 0.2s ease-in-out, margin-bottom 0.2s ease-in-out;
+}
+
+button.Detail:hover {
+   background-color: #ddd;
+}
+
+button.Detail:active {
+   margin-top: 5px;
+   margin-bottom: 5px;
+}
+
+
+button.Detail:active {
+   color: white;
+   background-color: #777;
+   transform: translate(2px, 2px);
+}

package/templates/sampling/assets/icon.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="263px" height="388px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g><path style="opacity:1" fill="#f4ddb2" d="M 74.5,-0.5 C 75.5,-0.5 76.5,-0.5 77.5,-0.5C 107.762,24.9817 138.096,50.4817 168.5,76C 122.614,121.98 103.114,177.48 110,242.5C 118.974,305.846 150.474,354.179 204.5,387.5C 201.5,387.5 198.5,387.5 195.5,387.5C 125.186,377.001 70.6858,342.001 32,282.5C 13.2853,251.287 2.45197,217.62 -0.5,181.5C -0.5,171.5 -0.5,161.5 -0.5,151.5C 5.05174,91.1449 30.0517,40.4783 74.5,-0.5 Z"/></g>
+<g><path style="opacity:1" fill="#f4ddb2" d="M 262.5,175.5 C 262.5,180.833 262.5,186.167 262.5,191.5C 254.191,224.617 232.858,240.451 198.5,239C 177.426,234.92 162.593,223.087 154,203.5C 145.539,175.55 153.039,153.05 176.5,136C 202.655,122.121 226.488,125.288 248,145.5C 255.287,154.405 260.12,164.405 262.5,175.5 Z"/></g>
+</svg>

package/templates/sampling/assets/manifest.json

@@ -0,0 +1,57 @@
+{
+   "name": "React Minus",
+   "start_url": ".",
+   "theme_color": "#333",
+   "short_name": "reactful",
+   "display": "standalone",
+   "background_color": "#333",
+   "description": "A sample app",
+   "icons": [
+     {
+       "src": "logo-48.png",
+       "sizes": "48x48",
+       "type": "image/png",
+       "purpose": "any maskable"
+     },
+     {
+       "src": "logo-72.png",
+       "sizes": "72x72",
+       "type": "image/png",
+       "purpose": "any maskable"
+     },
+     {
+       "src": "logo-96.png",
+       "sizes": "96x96",
+       "type": "image/png",
+       "purpose": "any maskable"
+     },
+     {
+       "src": "logo-144.png",
+       "sizes": "144x144",
+       "type": "image/png",
+       "purpose": "any maskable"
+     },
+     {
+       "src": "logo-168.png",
+       "sizes": "168x168",
+       "type": "image/png",
+       "purpose": "any maskable"
+     },
+     {
+       "src": "logo-192.png",
+       "sizes": "192x192",
+       "type": "image/png",
+       "purpose": "any maskable"
+     },
+     {
+       "src": "logo-512.png",
+       "sizes": "512x512",
+       "type": "image/png",
+       "purpose": "any maskable"
+     }
+   ],
+   "related_applications": [{
+       "platform": "play",
+       "url": "https://play.google.com/store/apps/details?id=sample"
+   }]
+ }