refactor(ui-patterns): split package into lib and playground (#1116)

inovex · Dec 5, 2023 · f4cadea · f4cadea
1 parent 3ba61af
commit f4cadea
Show file tree

Hide file tree

Showing 22 changed files with 689 additions and 71 deletions.
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "start:vue-example:only": "nx run elements-vue-example:start",
     "start:landingpage": "nx run-many --target=start --projects=landingpage,elements-react,elements --output-style=stream",
     "start:landingpage:only": "nx run landingpage:start",
-    "start:ui-patterns": "nx run ui-patterns:dev",
+    "start:ui-patterns-playground": "nx run ui-patterns-playground:start",
     "---build---": "",
     "build": "nx run-many --target=build --output-style=stream",
     "build:core": "nx run elements:build",
@@ -30,6 +30,7 @@
     "build:vue-example": "nx run elements-vue-example:build",
     "build:landingpage": "nx run landingpage:build",
     "build:ui-patterns": "nx run ui-patterns:build",
+    "build:ui-patterns-playground": "nx run ui-patterns-playground:build",
     "---test---": "",
     "test": "nx run-many --target=test --output-style=stream --configuration=ci",
     "test:core": "nx run elements:test",
@@ -43,6 +44,7 @@
     "lint:react": "nx run elements-react:lint",
     "lint:vue": "nx run elements-vue:lint",
     "lint:ui-patterns": "nx run ui-patterns:lint",
+    "lint:ui-patterns-playground": "nx run ui-patterns-playground:lint",
     "format": "yarn prettier --check **/*.{js,ts,tsx,md,html,css,scss}",
     "format:fix": "yarn prettier --write ./**/*.{js,ts,tsx,md,html,css,scss}",
     "---misc---": "",

diff --git a/packages/ui-patterns-playground/.eslintrc.cjs b/packages/ui-patterns-playground/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/packages/ui-patterns-playground/.gitignore b/packages/ui-patterns-playground/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/ui-patterns-playground/README.md b/packages/ui-patterns-playground/README.md
@@ -0,0 +1,3 @@
+# @inovex.de/ui-patterns-playground
+
+This package serves as a testing and demonstration environment for the UI patterns using the inovex Elements web components styled with Tailwind CSS.
diff --git a/packages/ui-patterns/index.html → packages/ui-patterns-playground/index.html b/packages/ui-patterns/index.html → packages/ui-patterns-playground/index.html
@@ -2,10 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Inovex Elements Patterns</title>
   </head>
+
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>

diff --git a/packages/ui-patterns-playground/package.json b/packages/ui-patterns-playground/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "ui-patterns-playground",
+  "private": true,
+  "version": "8.1.3",
+  "type": "module",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@inovex.de/ui-patterns": "8.1.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0"
+  }
+}
diff --git a/packages/ui-patterns-playground/project.json b/packages/ui-patterns-playground/project.json
@@ -0,0 +1,56 @@
+{
+    "name": "ui-patterns-playground",
+    "projectType": "application",
+    "sourceRoot": "packages/ui-patterns-playground/src",
+    "tags": [],
+    "targets": {
+      "build": {
+        "executor": "nx:run-commands",
+        "outputs": ["{projectRoot}/dist"],
+        "options": {
+          "cwd": "packages/ui-patterns-playground",
+          "commands": ["vite build"]
+        }
+      },
+      "start": {
+        "executor": "nx:run-commands",
+        "options": {
+          "cwd": "packages/ui-patterns-playground"
+        },
+        "defaultConfiguration": "dev",
+        "configurations": {
+          "dev": {
+            "command": "vite --port 4500"
+          },
+          "prod": {
+            "command": "vite preview --port 4500"
+          }
+        }
+      },
+      "lint": {
+        "executor": "nx:run-commands",
+        "options": {
+          "cwd": "packages/ui-patterns-playground",
+          "command": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+        },
+        "configurations": {
+          "fix": {
+            "command": "eslint . --ext ts,tsx --fix --report-unused-disable-directives --max-warnings 0"
+          }
+        }
+      },
+      "clean": {
+        "executor": "nx:run-commands",
+        "options": {
+          "cwd": "packages/ui-patterns-playground",
+          "command": "shx rm -rf dist"
+        },
+        "configurations": {
+          "nodejs": {
+            "command": "shx rm -rf node_modules"
+          }
+        }
+      }
+    }
+  }
+
diff --git a/packages/ui-patterns-playground/public/favicon-16x16.png b/packages/ui-patterns-playground/public/favicon-16x16.png
diff --git a/packages/ui-patterns-playground/public/favicon-32x32.png b/packages/ui-patterns-playground/public/favicon-32x32.png
diff --git a/packages/ui-patterns-playground/src/App.css b/packages/ui-patterns-playground/src/App.css
diff --git a/packages/ui-patterns-playground/src/App.tsx b/packages/ui-patterns-playground/src/App.tsx
@@ -0,0 +1,13 @@
+import './App.css';
+import { MyPatternA } from '@inovex.de/ui-patterns';
+import '@inovex.de/elements-react';
+
+function App() {
+  return (
+    <>
+      <MyPatternA />
+    </>
+  );
+}
+
+export default App;
diff --git a/packages/ui-patterns-playground/src/index.css b/packages/ui-patterns-playground/src/index.css
@@ -0,0 +1 @@
+@import '@inovex.de/ui-patterns/dist/style.css';
diff --git a/packages/ui-patterns/src/main.tsx → packages/ui-patterns-playground/src/main.tsx b/packages/ui-patterns/src/main.tsx → packages/ui-patterns-playground/src/main.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
+import App from './App.tsx';
 import './index.css';
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,

diff --git a/packages/ui-patterns-playground/src/vite-env.d.ts b/packages/ui-patterns-playground/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/ui-patterns-playground/tsconfig.json b/packages/ui-patterns-playground/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/ui-patterns-playground/tsconfig.node.json b/packages/ui-patterns-playground/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/packages/ui-patterns-playground/vite.config.ts b/packages/ui-patterns-playground/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
diff --git a/packages/ui-patterns/README.md b/packages/ui-patterns/README.md
@@ -88,5 +88,6 @@ To begin contributing a new UI pattern:
       // ...
    };
    ```
+   6. Additionally, import the pattern in the `ui-patterns-playground` package. This allows to showcase the pattern in the playground and test it in a development environment.
 
 Done! Your contribution is now live, both in dev mode and once deployed on our official landing page. It's ready to be viewed and copied on the library patterns page, showcasing the potential of our inovex Elements library. **Thanks for contributing and enriching our library with your UI Pattern!**
diff --git a/packages/ui-patterns/project.json b/packages/ui-patterns/project.json
@@ -1,58 +1,40 @@
 {
-    "name": "ui-patterns",
-    "projectType": "application",
-    "sourceRoot": "packages/ui-patterns/src",
-    "tags": [],
-    "targets": {
-      "build": {
-        "executor": "nx:run-commands",
-        "outputs": ["{projectRoot}/dist"],
-        "options": {
-          "cwd": "packages/ui-patterns",
-          "commands": [
-            "tsc",
-            "vite build"
-          ]
-        }
-      },
-      "dev": {
-        "executor": "nx:run-commands",
-        "options": {
-          "cwd": "packages/ui-patterns"
-        },
-        "defaultConfiguration": "dev",
-        "configurations": {
-          "dev": {
-            "command": "vite --port 4400"
-          },
-          "prod": {
-            "command": "vite preview --port 4400"
-          }
-        }
+  "name": "ui-patterns",
+  "projectType": "library",
+  "sourceRoot": "packages/ui-patterns/src",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "outputs": ["{projectRoot}/dist"],
+      "options": {
+        "cwd": "packages/ui-patterns",
+        "commands": ["tsc", "vite build"]
+      }
+    },
+    "lint": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "packages/ui-patterns",
+        "command": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
       },
-      "lint": {
-        "executor": "nx:run-commands",
-        "options": {
-          "cwd": "packages/ui-patterns",
-          "command": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
-        },
-        "configurations": {
-          "fix": {
-            "command": "eslint . --ext ts,tsx --fix --report-unused-disable-directives --max-warnings 0"
-          }
+      "configurations": {
+        "fix": {
+          "command": "eslint . --ext ts,tsx --fix --report-unused-disable-directives --max-warnings 0"
         }
+      }
+    },
+    "clean": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "packages/ui-patterns",
+        "command": "shx rm -rf dist"
       },
-      "clean": {
-        "executor": "nx:run-commands",
-        "options": {
-          "cwd": "packages/ui-patterns",
-          "command": "shx rm -rf dist"
-        },
-        "configurations": {
-          "nodejs": {
-            "command": "shx rm -rf node_modules"
-          }
+      "configurations": {
+        "nodejs": {
+          "command": "shx rm -rf node_modules"
         }
       }
     }
   }
+}
diff --git a/packages/ui-patterns/src/App.css b/packages/ui-patterns/src/App.css
diff --git a/packages/ui-patterns/src/App.tsx b/packages/ui-patterns/src/App.tsx
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# @inovex.de/ui-patterns-playground

		This package serves as a testing and demonstration environment for the UI patterns using the inovex Elements web components styled with Tailwind CSS.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		@import '@inovex.de/ui-patterns/dist/style.css';
-Original file line number
+Diff line change
@@ Expand Up / @@ -88,5 +88,6 @@ To begin contributing a new UI pattern: @@
           // ...
        };
        ```
+. Additionally, import the pattern in the `ui-patterns-playground` package. This allows to showcase the pattern in the playground and test it in a development environment.
     Done! Your contribution is now live, both in dev mode and once deployed on our official landing page. It's ready to be viewed and copied on the library patterns page, showcasing the potential of our inovex Elements library. **Thanks for contributing and enriching our library with your UI Pattern!**