refactor: ui design

Signed-off-by: Ryan Wang <[email protected]>
halo-dev · Aug 6, 2024 · d01d4ad · d01d4ad
1 parent 36df00c
commit d01d4ad
Show file tree

Hide file tree

Showing 10 changed files with 2,589 additions and 280 deletions.
diff --git a/package.json b/package.json
@@ -17,13 +17,13 @@
     "release:packages": "pnpm --filter \"./packages/**\" release"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.5.1",
-    "@types/node": "^18.18.6",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
-    "eslint": "^8.52.0",
+    "@rushstack/eslint-patch": "^1.10.4",
+    "@types/node": "^18.19.43",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "eslint": "^8.57.0",
     "prettier": "^2.8.8",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0"
+    "typescript": "^5.5.4",
+    "vite": "^5.3.5"
   }
 }
diff --git a/packages/search-widget/.eslintrc.json b/packages/search-widget/.eslintrc.json
@@ -3,7 +3,8 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "@unocss"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

diff --git a/packages/search-widget/index.html b/packages/search-widget/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Search Widget Preview</title>
+    <script type="module" src="/src/index.ts"></script>
+
+    <style>
+      body {
+        margin: 0 auto;
+        max-width: 1024px;
+        padding: 2rem;
+      }
+
+      :root {
+        <!-- color-scheme: dark; -->
+      }
+
+      body > * {
+        margin: 1rem 0;
+      }
+    </style>
+  </head>
+  <body>
+    <search-modal open></search-modal>
+  </body>
+</html>
diff --git a/packages/search-widget/package.json b/packages/search-widget/package.json
@@ -17,18 +17,22 @@
     "var.css"
   ],
   "scripts": {
-    "dev": "tsc -w",
-    "build": "tsc",
+    "dev": "vite --config vite.config.dev.ts",
+    "build": "vite build --config vite.config.lib.ts",
     "lint": "lit-analyzer && eslint 'src/**/*.ts'",
     "prettier": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.gitignore --write"
   },
   "dependencies": {
     "@halo-dev/api-client": "2.17.0",
-    "lit": "^3.1.4",
+    "lit": "^3.2.0",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
-    "lit-analyzer": "^1.2.1"
+    "@unocss/eslint-config": "^0.61.9",
+    "@unocss/reset": "^0.61.9",
+    "lit-analyzer": "^1.2.1",
+    "unocss": "^0.61.9",
+    "vite-plugin-dts": "4.0.0-beta.2"
   }
 }
diff --git a/packages/search-widget/src/search-form.ts b/packages/search-widget/src/search-form.ts
@@ -1,12 +1,12 @@
 import { HaloDocument, SearchOption, SearchResult } from '@halo-dev/api-client';
-import { LitElement, PropertyValueMap, css, html } from 'lit';
+import resetStyles from '@unocss/reset/tailwind.css?inline';
+import { LitElement, PropertyValueMap, css, html, unsafeCSS } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { Ref, createRef, ref } from 'lit/directives/ref.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import type { DebouncedFunc } from 'lodash-es';
 import { debounce } from 'lodash-es';
-import baseStyles from './styles/base';
 import varStyles from './styles/var';
 
 @customElement('search-form')
@@ -124,7 +124,7 @@ export class SearchForm extends LitElement {
         includeCategoryNames: [],
         includeOwnerNames: [],
         includeTagNames: [],
-        includeTypes: ['post'],
+        includeTypes: [],
         keyword,
         limit: 20,
       };
@@ -176,9 +176,11 @@ export class SearchForm extends LitElement {
   };
 
   static override styles = [
+    unsafeCSS(resetStyles),
     varStyles,
-    baseStyles,
     css`
+      @unocss-placeholder;
+
       .search-form__input {
         border-bottom-width: 1px;
         border-color: var(--color-form-divider);

diff --git a/packages/search-widget/src/search-modal.ts b/packages/search-widget/src/search-modal.ts
@@ -1,9 +1,10 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement, css, html, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import './search-form';
 import varStyles from './styles/var';
 import baseStyles from './styles/base';
+import resetStyles from '@unocss/reset/tailwind.css?inline';
 
 @customElement('search-modal')
 export class SearchModal extends LitElement {
@@ -53,9 +54,10 @@ export class SearchModal extends LitElement {
   }
 
   static override styles = [
+    unsafeCSS(resetStyles),
     varStyles,
-    baseStyles,
     css`
+      @unocss-placeholder;
       .modal__wrapper {
         position: fixed;
         left: 0px;

diff --git a/packages/search-widget/uno.config.ts b/packages/search-widget/uno.config.ts
@@ -0,0 +1,5 @@
+import { defineConfig, presetUno, transformerDirectives } from 'unocss';
+export default defineConfig({
+  presets: [presetUno()],
+  transformers: [transformerDirectives()],
+});
diff --git a/packages/search-widget/vite.config.dev.ts b/packages/search-widget/vite.config.dev.ts
@@ -0,0 +1,19 @@
+import UnoCSS from 'unocss/vite';
+import { defineConfig, Plugin } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    UnoCSS({
+      mode: 'shadow-dom',
+      configFile: './uno.config.ts',
+    }) as Plugin,
+  ],
+  server: {
+    proxy: {
+      '/apis': {
+        target: 'http://localhost:8090',
+        changeOrigin: true,
+      },
+    },
+  },
+});
diff --git a/packages/search-widget/vite.config.lib.ts b/packages/search-widget/vite.config.lib.ts
@@ -0,0 +1,27 @@
+import UnoCSS from 'unocss/vite';
+import { defineConfig, Plugin } from 'vite';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: 'src/index.ts',
+      name: 'search-widget',
+      fileName: 'index',
+      formats: ['es'],
+    },
+    emptyOutDir: true,
+    rollupOptions: {
+      output: {
+        extend: true,
+      },
+    },
+  },
+  plugins: [
+    UnoCSS({
+      mode: 'shadow-dom',
+      configFile: './uno.config.ts',
+    }) as Plugin,
+    dts() as Plugin,
+  ],
+});