feat: rewrite Overlay to WebComponent with LitElement

- add storybook for Overlay
- adjust storybook vite config into a split file
- move plugins from dependencies to peerDependencies with mark as optional

.commitlintrc.yml

@@ -1,19 +1,68 @@
+# Git Commit Message Convention
+# - follow: https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md
+# - tool:   https://commitlint.js.org/#/concepts-commit-conventions
+#
+#  ```
+#  <type>(<scope?>): <subject>
+#  <BLANK LINE>
+#  <body?>
+#  <BLANK LINE>
+#  <footer?>
+#  ```
 extends:
-  - "@commitlint/config-conventional"
+  # https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional
+  - '@commitlint/config-conventional'
+
+# # https://commitlint.js.org/#/reference-rules
 rules:
+  # https://commitlint.js.org/#/reference-rules?id=type-enum
   type-enum:
-    - 2
+    - 2 # error
     - always
-    - - feat
-      - fix
-      - polish
+    - - build
+      - chore
+      - ci
       - docs
-      - style
+      - feat
+      - fix
+      - perf
       - refactor
       - revert
-      - perf
+      - style
       - test
-      - workflow
-      - ci
-      - build
-      - chore
+      - polish
+      - hotfix
+
+  # https://commitlint.js.org/#/reference-rules?id=scope-case
+  scope-case:
+    - 2 # error
+    - always
+    - - lower-case
+      - upper-case
+      - kebab-case
+      - pascal-case
+      - start-case
+
+  # https://commitlint.js.org/#/reference-rules?id=subject-case
+  subject-case:
+    - 1 # warning
+    - always
+    - - lower-case
+      - sentence-case
+      - start-case
+
+  # https://commitlint.js.org/#/reference-rules?id=header-max-length
+  header-max-length:
+    - 2 # error
+    - always
+    - 120
+
+  # https://commitlint.js.org/#/reference-rules?id=footer-leading-blank
+  footer-leading-blank:
+    - 2 # error
+    - always
+
+  # https://commitlint.js.org/#/reference-rules?id=body-leading-blank
+  body-leading-blank:
+    - 2 # error
+    - always

.eslintrc.cjs

@@ -8,7 +8,6 @@ module.exports = {
    * https://github.com/antfu/eslint-config/blob/v0.39.7
    */
   extends: [
-    '@antfu',
     '@antfu/react',
   ],
 
@@ -194,6 +193,7 @@ module.exports = {
           'TSTypeParameterInstantiation',
           'TSIntersectionType',
           'TSUnionType',
+          'PropertyDefinition[decorators]',
           // 'ConditionalExpression',
           // 'TemplateLiteral *',
           // 'JSXElement',

.husky/commit-msg

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# https://commitlint.js.org/#/reference-cli
+exec npx --no -- commitlint --edit "$1"

.husky/pre-commit

@@ -3,4 +3,6 @@
 # run by git
 . "$(dirname -- "$0")/_/husky.sh"
 
-TIMING=1 npx lint-staged
+# https://github.com/lint-staged/lint-staged
+# `TIMING` for eslint
+TIMING=1 exec npx lint-staged

docs/components/landing-page/landing-page.tsx

@@ -123,7 +123,6 @@ export const LandingPage = () => {
               />
             </Feature>
 
-
             <Feature
               large
               id='working-pipeline'

docs/development.md

@@ -17,6 +17,7 @@ pnpm i
 pnpm update -rDL typescript
 # it's equal to
 pnpm update --recursive --dev --latest typescript
+# https://pnpm.io/cli/update
 ```
 
 Or
@@ -69,6 +70,8 @@ sync demo code from vite4 to other examples:
 ./scripts/sync-page-code.sh
 ```
 
+> **NOTE:** use copied files rather than symlink is design for StackBlitz online demo with pure subpath.
+
 
 ### build examples sites
 

docs/package.json

@@ -45,6 +45,6 @@
     "react-dev-inspector": "workspace:*",
     "rimraf": "3.0.2",
     "tailwindcss": "3.3.3",
-    "typescript": "5.1.6"
+    "typescript": "5.3.2"
   }
 }

docs/utils/tw-styled/styled.tsx

@@ -35,7 +35,20 @@ type StyledTagCreator = {
 
 interface StyledCreator extends StyledComponentCreator, StyledTagCreator {}
 
-
+/**
+ * style-component method for tailwindcss
+ *
+ * Note: add this config in VSCode `settings.json` for code hinting
+ *   via [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense):
+ *
+ * ```json
+ * "tailwindCSS.experimental.classRegex": [
+ *   "className: *`([^`]*)`",
+ *   "className: *\"([^\"]*)\"",
+ *   "className: *'([^']*)'",
+ * ],
+ * ```
+ */
 export const twStyled = (
   <T, P extends { className?: string }, Tag extends keyof JSX.IntrinsicElements>(
     Component: ForwardRefRenderFunction<T, P> | ComponentType<P> | Tag,

examples/cra5-with-rewired/package.json

@@ -26,8 +26,8 @@
     "react-github-corner": "2.5.0"
   },
   "devDependencies": {
-    "@react-dev-inspector/babel-plugin": "beta",
-    "@react-dev-inspector/middleware": "beta",
+    "@react-dev-inspector/babel-plugin": "^2",
+    "@react-dev-inspector/middleware": "^2",
     "@types/node": "16.18.7",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
@@ -39,12 +39,12 @@
     "postcss": "8.4.26",
     "postcss-loader": "7.3.3",
     "react-app-rewired": "2.2.1",
-    "react-dev-inspector": "beta",
+    "react-dev-inspector": "^2",
     "react-scripts": "5.0.1",
     "rimraf": "3.0.2",
     "style-loader": "3.3.3",
     "tailwindcss": "3.3.3",
-    "typescript": "5.1.6"
+    "typescript": "5.3.2"
   },
   "browserslist": {
     "production": [

examples/cra5-with-rewired/src/ShowPage/styles.tsx

@@ -26,7 +26,7 @@ export const Title = styled.h1({
 export const Slogan = styled.p({
   displayName: 'Slogan',
   className: `
-    mt-6 leading-8 text-gray-600 text-[min(4.5vw,1.25rem)] leading-[min(6vw,1.75rem)] sm:text-lg
+    mt-6 text-gray-600 text-[min(4.5vw,1.25rem)] leading-[min(6vw,1.75rem)] sm:text-lg
     transition-all duration-200 ease
   `,
 })

examples/cra5-with-rewired/src/ShowPage/tw-styled/styled.tsx

@@ -36,6 +36,20 @@ type StyledTagCreator = {
 interface StyledCreator extends StyledComponentCreator, StyledTagCreator {}
 
 
+/**
+ * style-component method for tailwindcss
+ *
+ * Note: add this config in VSCode `settings.json` for code hinting
+ *   via [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense):
+ *
+ * ```json
+ * "tailwindCSS.experimental.classRegex": [
+ *   "className: *`([^`]*)`",
+ *   "className: *\"([^\"]*)\"",
+ *   "className: *'([^']*)'",
+ * ],
+ * ```
+ */
 export const twStyled = (
   <T, P extends { className?: string }, Tag extends keyof JSX.IntrinsicElements>(
     Component: ForwardRefRenderFunction<T, P> | ComponentType<P> | Tag,

examples/nextjs-custom-server/components/ShowPage/styles.tsx

@@ -26,7 +26,7 @@ export const Title = styled.h1({
 export const Slogan = styled.p({
   displayName: 'Slogan',
   className: `
-    mt-6 leading-8 text-gray-600 text-[min(4.5vw,1.25rem)] leading-[min(6vw,1.75rem)] sm:text-lg
+    mt-6 text-gray-600 text-[min(4.5vw,1.25rem)] leading-[min(6vw,1.75rem)] sm:text-lg
     transition-all duration-200 ease
   `,
 })

examples/nextjs-custom-server/components/ShowPage/tw-styled/styled.tsx

@@ -36,6 +36,20 @@ type StyledTagCreator = {
 interface StyledCreator extends StyledComponentCreator, StyledTagCreator {}
 
 
+/**
+ * style-component method for tailwindcss
+ *
+ * Note: add this config in VSCode `settings.json` for code hinting
+ *   via [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense):
+ *
+ * ```json
+ * "tailwindCSS.experimental.classRegex": [
+ *   "className: *`([^`]*)`",
+ *   "className: *\"([^\"]*)\"",
+ *   "className: *'([^']*)'",
+ * ],
+ * ```
+ */
 export const twStyled = (
   <T, P extends { className?: string }, Tag extends keyof JSX.IntrinsicElements>(
     Component: ForwardRefRenderFunction<T, P> | ComponentType<P> | Tag,

examples/nextjs-custom-server/package.json

@@ -26,8 +26,8 @@
     "react-github-corner": "2.5.0"
   },
   "devDependencies": {
-    "@react-dev-inspector/babel-plugin": "beta",
-    "@react-dev-inspector/middleware": "beta",
+    "@react-dev-inspector/babel-plugin": "^2",
+    "@react-dev-inspector/middleware": "^2",
     "@types/node": "16.18.7",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
@@ -36,10 +36,10 @@
     "next": "13.1.0",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.26",
-    "react-dev-inspector": "beta",
+    "react-dev-inspector": "^2",
     "rimraf": "3.0.2",
     "tailwindcss": "3.3.3",
-    "typescript": "5.1.6"
+    "typescript": "5.3.2"
   },
   "browserslist": {
     "production": [

examples/rspack/package.json

@@ -26,8 +26,8 @@
   },
   "devDependencies": {
     "@babel/preset-typescript": "7.22.5",
-    "@react-dev-inspector/babel-plugin": "beta",
-    "@react-dev-inspector/middleware": "beta",
+    "@react-dev-inspector/babel-plugin": "^2",
+    "@react-dev-inspector/middleware": "^2",
     "@rspack/cli": "0.3.1",
     "@types/node": "16.18.7",
     "@types/react": "18.0.26",
@@ -38,11 +38,11 @@
     "npm-run-all": "4.1.5",
     "postcss": "8.4.26",
     "postcss-loader": "7.3.3",
-    "react-dev-inspector": "beta",
+    "react-dev-inspector": "^2",
     "rimraf": "3.0.2",
     "tailwindcss": "3.3.3",
     "ts-node": "10.9.1",
-    "typescript": "5.1.6"
+    "typescript": "5.3.2"
   },
   "browserslist": {
     "production": [

examples/rspack/src/ShowPage/styles.tsx

@@ -26,7 +26,7 @@ export const Title = styled.h1({
 export const Slogan = styled.p({
   displayName: 'Slogan',
   className: `
-    mt-6 leading-8 text-gray-600 text-[min(4.5vw,1.25rem)] leading-[min(6vw,1.75rem)] sm:text-lg
+    mt-6 text-gray-600 text-[min(4.5vw,1.25rem)] leading-[min(6vw,1.75rem)] sm:text-lg
     transition-all duration-200 ease
   `,
 })

examples/rspack/src/ShowPage/tw-styled/styled.tsx

@@ -36,6 +36,20 @@ type StyledTagCreator = {
 interface StyledCreator extends StyledComponentCreator, StyledTagCreator {}
 
 
+/**
+ * style-component method for tailwindcss
+ *
+ * Note: add this config in VSCode `settings.json` for code hinting
+ *   via [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense):
+ *
+ * ```json
+ * "tailwindCSS.experimental.classRegex": [
+ *   "className: *`([^`]*)`",
+ *   "className: *\"([^\"]*)\"",
+ *   "className: *'([^']*)'",
+ * ],
+ * ```
+ */
 export const twStyled = (
   <T, P extends { className?: string }, Tag extends keyof JSX.IntrinsicElements>(
     Component: ForwardRefRenderFunction<T, P> | ComponentType<P> | Tag,

examples/umi3/package.json

@@ -27,16 +27,16 @@
     "react-github-corner": "2.5.0"
   },
   "devDependencies": {
-    "@emotion/babel-plugin": "^11.9.2",
-    "@react-dev-inspector/umi3-plugin": "beta",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@react-dev-inspector/umi3-plugin": "^2",
     "@types/node": "16.18.7",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
     "@zthxxx/tsconfig": "1.0.2",
     "npm-run-all": "4.1.5",
-    "react-dev-inspector": "beta",
+    "react-dev-inspector": "^2",
     "rimraf": "3.0.2",
-    "typescript": "5.1.6",
+    "typescript": "5.3.2",
     "umi": "3.5.41"
   }
 }

examples/umi4/package.json

@@ -26,8 +26,8 @@
     "react-github-corner": "2.5.0"
   },
   "devDependencies": {
-    "@react-dev-inspector/umi4-plugin": "beta",
-    "@swc/core": "^1.3.82",
+    "@react-dev-inspector/umi4-plugin": "^2",
+    "@swc/core": "^1.3.99",
     "@types/node": "16.18.7",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
@@ -36,11 +36,11 @@
     "autoprefixer": "10.4.14",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.26",
-    "react-dev-inspector": "beta",
+    "react-dev-inspector": "^2",
     "rimraf": "3.0.2",
     "swc-plugin-auto-css-modules": "^1.5.0",
     "tailwindcss": "3.3.3",
-    "typescript": "5.1.6",
+    "typescript": "5.3.2",
     "umi": "4.0.72"
   }
 }

examples/umi4/src/ShowPage/styles.tsx

@@ -26,7 +26,7 @@ export const Title = styled.h1({
 export const Slogan = styled.p({
   displayName: 'Slogan',
   className: `
-    mt-6 leading-8 text-gray-600 text-[min(4.5vw,1.25rem)] leading-[min(6vw,1.75rem)] sm:text-lg
+    mt-6 text-gray-600 text-[min(4.5vw,1.25rem)] leading-[min(6vw,1.75rem)] sm:text-lg
     transition-all duration-200 ease
   `,
 })