@reactful/create 0.0.51

package/templates/sampling/routes/system.tsx

@@ -0,0 +1,23 @@
+import OS from "os"
+import React from "react"
+import { seo, style } from '@reactful/web'
+
+const metatags: MetaTags = { 
+   charset:"UTF-16", 
+   rating:"general", 
+   keywords:"hello, hi" 
+}
+
+//@ts-ignore
+@seo('System', metatags)
+@style('/assets/system.css')
+export default function System() {
+   const [ type, arch, release ] = [OS.type(), OS.arch(), OS.release()]
+
+   return <>
+      <h1>Server OS</h1>
+      <h2>server side information</h2>
+      <pre>{type} | {arch} | {release} </pre>
+      <section shown={false}>DONT SHOW ME!</section>
+   </>
+}

package/templates/sampling/tests/access.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test'
+
+const cases = [
+   ['/about', 'About'],
+   ['/clock', 'World Clock'],
+   ['/htmlx', 'HTML-X'],
+   ['/system', 'Server OS'],
+   ['/quotes', 'My custom error component', 'Philosophy quote of the day'],
+   ['/counter', 'Counter'],
+   ['/hello', 'Hello Forms'],
+   ['/forms', 'Uncontrolled Components'],
+   ['/profile/123', 'Profile'],
+]
+
+cases.forEach(function(scenario) {
+   const [ href, head, that ] = scenario
+
+   test(href, async ({ page }) => {
+      await page.goto('http://localhost:3000/')
+      await page.goto(href)
+      await page.waitForTimeout(333)
+      await page.waitForURL(`http://localhost:3000${href}`);
+
+      const h1 = await page.locator(`h1`).innerHTML()    
+      const ok = [head,that].includes(h1)
+
+      if (!ok) expect(h1).toBe(that || head)      
+    })
+})

package/templates/sampling/tests/counter.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('counter: statefull props', async ({ page }) => {
+   await page.goto('http://localhost:3000/counter')
+   await page.waitForTimeout(99)   
+   await page.click('button', { delay:99 })
+   await page.click('button', { delay:99 })
+   await page.click('button', { delay:99 })
+   await page.waitForTimeout(99)
+
+   const btn = await page.locator('button').innerText()
+   expect(btn.trim()).toBe('COUNTED: 3')
+ })
+
+ test('counter: shown custom props directive', async ({ page }) => {
+   await page.goto('http://localhost:3000/counter')
+   const h2IsVisible = await page.locator('h6').isVisible()   
+   expect(h2IsVisible).toBe(false)
+ })

package/templates/sampling/tests/form.spec.ts

@@ -0,0 +1,51 @@
+// import { test, expect } from '@playwright/test'
+
+// async function goto(page) {
+//    await page.goto('http://localhost:3000/forms')
+//    await page.waitForTimeout(1500) 
+// }
+
+// test(`form validation: checkbox`, async function({ page }) {
+//    await goto(page)
+//    await page.click('button', { delay:333 })
+
+//    const check = await page.locator('[type="checkbox"]')
+//    const checkHandle = await check!.evaluateHandle(x => x['validationMessage'])
+//    const validationMessage = await checkHandle.jsonValue()
+
+//    expect(validationMessage).toBe('Please check this box if you want to proceed')
+// })
+
+// test(`form validation: input`, async function({ page }) {
+//    await goto(page)
+//    await page.click('[uid="14"]')
+//    await page.click('button', { delay:333 })
+
+//    const input = await page.evaluate(() => document.querySelector('[bind="mode"]'))
+//    const validationMessage = input && input['validationMessage']
+
+//    // const input = await page.$('[bind="mode"]');
+//    // const inputHandle = await input!.evaluateHandle(x => x['validationMessage'])
+//    // const validationMessage = await inputHandle.jsonValue()
+
+//    expect(validationMessage).toBe('Mode is required!')
+// })
+
+// test(`form action: errors feedback`, async function({ page }) {
+//    await goto(page)
+
+//    const checkbox = await page.getByLabel('Accepted?')
+//    await checkbox.click()
+
+//    await page.getByLabel('Accepted?').click()
+//    await page.fill('[bind="mode"]', 'ok', { timeout:99 })
+//    await page.click('button', { delay:333 })
+
+//    const progress = await page.locator('progress').isVisible()
+//    expect(progress).toBe(true)
+
+//    await page.waitForTimeout(333)
+
+//    const li = await page.locator('ul > li').innerHTML()
+//    expect(li).toContain('URL not found')
+// })

package/templates/sampling/tests/hello.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+const cases = [
+   ['local', 'hi!', '[id="1"]', '#l1'],
+   ['global (outer)', 'hi!', '[id="2"]', '#l2'],
+   ['global (inner)', 'hi!', '[id="3"]', '#l2'],
+]
+
+cases.forEach(function(scenario) {
+   const [ scope, text, inputId, labelId ] = scenario
+
+   test(`hello: ${scope} props binding`, async function({ page }) {
+      await page.goto('http://localhost:3000/hello')
+      await page.waitForTimeout(99) 
+
+      for await (const char of text.split('')) {
+         await page.waitForTimeout(99) 
+         await page.type(inputId, char, { delay: 99 })
+      }
+
+      await page.waitForTimeout(99) 
+      const result = await page.locator(labelId).innerText()
+      expect(result).toBe(text)
+   })
+})

package/templates/sampling/tests/path.test.ts

@@ -0,0 +1,20 @@
+import { test, expect } from 'bun:test'
+
+const scenarios = [
+   ['url', '/routes', '/'],
+   ['sub url', '/routes/sub', '/sub'],
+   ['http', 'http://domain.com/routes', '/'],
+   ['https', 'https://domain.com/routes', '/'],
+   ['https port', 'https://domain.com:3000/routes', '/'],
+   ['https port file', 'https://domain.com:3000/routes/file.tsx', '/file'],
+   ['https port index', 'https://domain.com:3000/routes/index', '/'],
+   ['https port sub file', 'https://domain.com:3000/routes/sub/file.tsx', '/sub/file'],
+]
+
+scenarios.forEach(function([ scenario, sampling, expected ]) {   
+   test(`new Path(url).href: ${scenario}`, function() {  
+      const resulted = new URL(sampling).pathname
+      expect(resulted).toBe(expected as any)
+      // console.log('sampling:', sampling)
+   })
+})

package/testings/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/testings/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/testings/apis/hello.ts

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

package/testings/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/testings/apis/sub/index.ts

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

package/testings/apis/sub/sub.ts

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

package/testings/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/testings/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/testings/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"
+   }]
+ }