enhance: add vite-based version of design system including Shadcn (#119)

* start vite migration

* chore: upgrade pnpm

* add prettier

* add constants and copy, format

* updates

* initialize shadcn

* delete design system v3

* upgrade prettier etc

* install tailwind plugins

* add ladle

* ts for ladle

* working ladle with our design system theme

* fix package manager entry in package.json

* unknown instead of any

* update deps

* format

.github/workflows/main.yml

@@ -15,7 +15,7 @@ jobs:
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 9.6.0
+          version: 9.7.0
           run_install: true
 
       - run: pnpm run lint
@@ -34,7 +34,7 @@ jobs:
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 9.6.0
+          version: 9.7.0
           run_install: true
 
       - run: pnpm run check
@@ -53,7 +53,7 @@ jobs:
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 9.6.0
+          version: 9.7.0
           run_install: true
 
       - run: pnpm run format:check
@@ -72,7 +72,7 @@ jobs:
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 9.6.0
+          version: 9.7.0
           run_install: true
 
       - run: pnpm run test -- --ci --coverage --maxWorkers=2
@@ -92,7 +92,7 @@ jobs:
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 9.6.0
+          version: 9.7.0
           run_install: true
 
       - name: Build

.github/workflows/size.yml

@@ -15,7 +15,7 @@ jobs:
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 9.6.0
+          version: 9.7.0
           run_install: true
 
       - uses: andresz1/size-limit-action@v1

package.json

@@ -40,9 +40,9 @@
   },
   "volta": {
     "node": "20.16.0",
-    "pnpm": "9.6.0"
+    "pnpm": "9.7.0"
   },
-  "packageManager": "pnpm@9.6.0",
+  "packageManager": "pnpm@9.7.0",
   "workspaces": [
     "packages/*"
   ]

packages/design-system-vite/.gitattributes

@@ -0,0 +1 @@
+* text eol=lf

packages/design-system-v3/.gitignore → packages/design-system-vite/.gitignore

@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.cache/
+build/
+.vercel/

packages/design-system-vite/.ladle/components.tsx

@@ -0,0 +1,10 @@
+// organize-imports-ignore
+import type { GlobalProvider } from '@ladle/react'
+import React from 'react'
+
+import 'tailwindcss/src/css/preflight.css'
+import 'tailwindcss/tailwind.css'
+
+export const Provider: GlobalProvider = ({ children, globalState }) => (
+  <>{children}</>
+)

packages/design-system-vite/.ladle/head.html

@@ -0,0 +1,22 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
+<link
+  href="https://fonts.googleapis.com/css2?family=Source+Sans+3&display=swap"
+  rel="stylesheet"
+/>
+
+<style>
+  :root {
+    --theme-color-primary: #dc6027;
+    --theme-color-primary-80: #e38052;
+    --theme-color-primary-60: #eaa07d;
+    --theme-color-primary-40: #f1bfa9;
+    --theme-color-primary-20: #f8dfd4;
+    --theme-color-secondary: #a3adb7;
+    --theme-color-secondary-80: #b5bdc5;
+    --theme-color-secondary-60: #c8ced4;
+    --theme-color-secondary-40: #dadee2;
+    --theme-color-secondary-20: #edeff1;
+    --theme-font-primary: 'Source Sans 3';
+  }
+</style>

packages/design-system-vite/.prettierignore

@@ -0,0 +1 @@
+dist/

packages/design-system-vite/.prettierrc.js

@@ -0,0 +1,13 @@
+/**
+ * @see https://prettier.io/docs/en/configuration.html
+ * @type {import("prettier").Config}
+ */
+export default {
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'es5',
+  plugins: [
+    import('prettier-plugin-organize-imports'),
+    import('prettier-plugin-tailwindcss'),
+  ],
+}

packages/design-system-vite/README.md

@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json', './tsconfig.app.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

packages/design-system-v3/components.json → packages/design-system-vite/components.json

@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.js",
-    "css": "src/globals.css",
+    "css": "src/tailwind.css",
     "baseColor": "slate",
     "cssVariables": true,
     "prefix": ""
@@ -14,4 +14,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}