refactor(demo): new demo application

gecut · Mar 25, 2024 · d277578 · d277578
1 parent a73f96d
commit d277578
Show file tree

Hide file tree

Showing 18 changed files with 595 additions and 1,175 deletions.
diff --git a/demo/.gitignore b/demo/.gitignore
diff --git a/demo/dialog/index.html b/demo/dialog/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gecut Dialog</title>
-    <link rel="stylesheet" href="/demo/__styles.css" />
+    <script type="module" src="../main/global.ts"></script>
+    <script type="module" src="./scripts.ts"></script>
   </head>
   <body class="bg-surface max-w-screen-sm mx-auto px-2"></body>
-  <script type="module" src="scripts.js"></script>
 </html>
diff --git a/demo/dialog/preview.png b/demo/dialog/preview.png
diff --git a/demo/index.html b/demo/index.html
@@ -1,22 +1,16 @@
-<html lang="en">
+<html lang="en" class="color-scheme-auto bg-background">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gecut</title>
-    <style>
-      html {
-        color-scheme: light dark;
-      }
-    </style>
+    <script type="module" src="main/scripts.ts"></script>
+    <script type="module" src="main/global.ts"></script>
   </head>
 
-  <body>
-    <ol>
-      <li><a href="./es-bench/">ES Bench</a></li>
-      <li><a href="./fetch/">Fetch</a></li>
-      <li><a href="./math/">Math</a></li>
-      <li><a href="./validator/">Validator</a></li>
-    </ol>
+  <body class="bg-surface container mx-auto p-4">
+    <h2 class="text-headlineMedium text-onSurface">Hybrid UI Demos</h2>
+
+    <div id="container" class="w-full gap-4 py-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"></div>
   </body>
 </html>
diff --git a/demo/main/global.css b/demo/main/global.css
@@ -0,0 +1,7 @@
+@import '@gecut/styles/css';
+@import '@gecut/styles/palettes/h260.css';
+
+html,
+body {
+  @apply h-full;
+}
diff --git a/demo/main/global.ts b/demo/main/global.ts
@@ -0,0 +1 @@
+import './global.css';
diff --git a/demo/main/scripts.ts b/demo/main/scripts.ts
@@ -0,0 +1,55 @@
+/* eslint-disable max-len */
+import {classMap} from 'lit/directives/class-map.js';
+import {map} from 'lit/directives/map.js';
+import {html, render} from 'lit/html.js';
+
+interface Demo {
+  title: string;
+  href: string;
+
+  align?: 'center' | 'bottom' | 'top';
+}
+
+const container = document.getElementById('container');
+const demos: Demo[] = [
+  {
+    title: 'Dialog',
+    href: '/dialog/',
+    align: 'center',
+  },
+  {
+    title: 'Top App Bar',
+    href: '/top-bar/',
+    align: 'top',
+  },
+];
+
+if (container)
+  render(
+    map(
+      demos,
+      (demo) => html`
+        <a
+          href=${demo.href}
+          class="flex flex-col p-4 !m-0 group card-elevated dark:card-filled-selectable w-full hover:elevation-5 transition-shadow duration-500 dark:!shadow-none"
+        >
+          <div class="aspect-w-4 aspect-h-3 w-full overflow-hidden rounded-md relative">
+            <img
+              src="${demo.href}preview.png"
+              class="h-full w-full object-cover invert dark:invert-0 ${classMap({
+                'object-center': demo.align === 'center' || !demo.align,
+                'object-top': demo.align === 'top',
+                'object-bottom': demo.align === 'bottom',
+              })}"
+            />
+
+            <div
+              class="absolute z-above inset-0 shadow-[inset_0px_4px_48px_0px_#0002] group-hover:shadow-[inset_0px_8px_16px_4px_#0004] transition-shadow duration-500 dark:!shadow-none"
+            ></div>
+          </div>
+          <h2 class="text-onSurfaceVariant text-titleMedium mt-4">${demo.title}</h2>
+        </a>
+      `,
+    ),
+    container,
+  );
diff --git a/demo/package.json b/demo/package.json
@@ -5,13 +5,22 @@
   "author": "S. MohammadMahdi Zamanian <[email protected]> (https://mm25zamanian.ir)",
   "type": "module",
   "private": true,
-  "devDependencies": {
-    "@types/node": "^20.11.30"
+  "scripts": {
+    "serve": "vite --host 0.0.0.0 --port 3031 --open --clearScreen -d",
+    "build": "vite build --clearScreen"
   },
-  "dependencies": {
+  "devDependencies": {
     "@gecut/components": "workspace:^",
     "@gecut/lit-helper": "workspace:^",
     "@gecut/signal": "^2.0.1-alpha.0",
-    "lit": "^3.1.2"
+    "@gecut/styles": "workspace:^",
+    "@gecut/types": "^2.1.1-alpha.0",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@types/node": "^20.11.30",
+    "autoprefixer": "^10.4.19",
+    "lit": "^3.1.2",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.2.4"
   }
 }
diff --git a/demo/postcss.config.js b/demo/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/demo/styles.css b/demo/styles.css
diff --git a/tailwind.config.mjs → demo/tailwind.config.mjs b/tailwind.config.mjs → demo/tailwind.config.mjs
@@ -26,8 +26,10 @@ export default {
 
   content: [
     'index.html',
-    'demo/**/*.html',
-    'demo/**/*.ts',
+    '**/*.html',
+    '**/*.ts',
     path.dirname(require.resolve('@gecut/components')) + '/**/*.js',
   ],
+
+  plugins: [...tailwindConfig.plugins, require('@tailwindcss/aspect-ratio')],
 };
diff --git a/demo/top-bar/index.html b/demo/top-bar/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gecut Top Bar</title>
-    <link rel="stylesheet" href="/demo/__styles.css" />
+    <script type="module" src="../main/global.ts"></script>
+    <script type="module" src="./scripts.ts"></script>
   </head>
-  <body class="bg-surface max-w-screen-sm mx-auto px-2"></body>
-  <script type="module" src="scripts.js"></script>
+  <body class="bg-surface max-w-screen-sm mx-auto px-2 root"></body>
 </html>
diff --git a/demo/top-bar/preview.png b/demo/top-bar/preview.png
diff --git a/demo/top-bar/scripts.ts b/demo/top-bar/scripts.ts
@@ -1,5 +1,7 @@
 /* eslint-disable max-len */
 import {gecutSmallTopBar} from '@gecut/components';
+import {map} from 'lit/directives/map.js';
+import {range} from 'lit/directives/range.js';
 import {html, render} from 'lit/html.js';
 
 render(
@@ -21,7 +23,12 @@ render(
       title: 'Gecut Top Bar',
     })}
     <main role="main">
-      <h1 class="text-headlineMedium text-primary">h</h1>
+      <div class="gecut-page scrollabe">
+        ${map(
+          range(window.innerHeight / 10),
+          (i) => html`<p class="text-bodyMedium text-onSurfaceVariant">Random Content: ${i}</p>`,
+        )}
+      </div>
     </main>
   `,
   document.body,

diff --git a/demo/tsconfig.json b/demo/tsconfig.json
@@ -13,5 +13,5 @@
 
   "include": ["**/*.ts"],
   "exclude": ["*.d.ts", "node_modules"],
-  "references": [{"path": "../packages/components"}, {"path": "../packages/lit-helper"}]
+  "references": [{"path": "../packages/components"}, {"path": "../packages/styles"}, {"path": "../packages/lit-helper"}]
 }
diff --git a/demo/vite.config.mts b/demo/vite.config.mts
@@ -0,0 +1,29 @@
+import {defineConfig} from 'vite';
+
+const entrys = ['dialog', 'top-bar'];
+const DIST_PATH = './dist/';
+const pages = entrys.reduce((result, name) => {
+  result[name] = `src/${name}/index.html`;
+
+  return result;
+}, {});
+
+export default defineConfig(() => {
+  return {
+    css: {
+      postcss: 'postcss.config.mjs',
+    },
+
+    build: {
+      target: ['esnext', 'edge100', 'firefox100', 'chrome100', 'safari18'],
+      outDir: DIST_PATH,
+      reportCompressedSize: true,
+      commonjsOptions: {
+        transformMixedEsModules: true,
+      },
+      rollupOptions: {
+        input: {main: 'index.html', ...pages},
+      },
+    },
+  };
+});
diff --git a/package.json b/package.json
@@ -42,15 +42,13 @@
     "build": "run-s build:ts build:r",
     "build:ts": "tsc --build",
     "build:r": "lerna run build",
-    "build:css": "tailwindcss -i ./demo/styles.css -o ./demo/__styles.css",
     "format": "run-s format:prettier format:eslint",
     "format:eslint": "yarn run lint:ts --fix",
     "format:prettier": "prettier . --ignore-path .gitignore --write",
     "clean": "git clean -d -x -f --exclude=node_modules --exclude='*.env' --exclude=_data --exclude='.pnp*' --exclude=.yarn",
-    "serve": "wds",
-    "watch": "run-p 'watch:*' serve",
+    "serve": "lerna run serve",
+    "watch": "run-p 'watch:*'",
     "watch:ts": "yarn run build:ts --watch --preserveWatchOutput",
-    "watch:css": "yarn run build:css --watch",
     "pull": "git pull",
     "release": "lerna version",
     "publish": "lerna publish from-package"
@@ -66,13 +64,11 @@
     "@types/node": "^20.11.30",
     "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@typescript-eslint/parser": "^7.3.1",
-    "@web/dev-server": "^0.4.3",
     "eslint": "^8.57.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",
-    "tailwindcss": "^3.4.1",
     "typescript": "^5.4.2"
   },
   "dependencies": {