chore(packages/design-system-v3): add shadcn-based design-system as separate package

.github/workflows/main.yml

@@ -113,3 +113,40 @@ jobs:
           access: public
           package: packages/design-system/package.json
         if: startsWith(github.ref, 'refs/tags/')
+
+  build-v3:
+    name: Build and Publish
+    runs-on: ubuntu-latest
+    needs: [check-ts, test]
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Use Node 20
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.x
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9.7.0
+          run_install: true
+
+      - name: Build
+        working-directory: packages/design-system-v3
+        run: pnpm run build
+
+      - uses: JS-DevTools/npm-publish@v3
+        with:
+          token: ${{ secrets.NPM_TOKEN }}
+          access: public
+          package: packages/design-system-v3/package.json
+        if: startsWith(github.ref, 'refs/tags/')
+
+      - uses: JS-DevTools/npm-publish@v3
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          registry: https://npm.pkg.github.com
+          access: public
+          package: packages/design-system-v3/package.json
+        if: startsWith(github.ref, 'refs/tags/')

packages/design-system-v3/.eslintignore

@@ -0,0 +1 @@
+types/

packages/design-system-v3/.eslintrc.cjs

@@ -0,0 +1,15 @@
+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': 'off',
+  },
+}

packages/design-system-v3/.gitattributes

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

packages/design-system-v3/.gitignore

@@ -0,0 +1,28 @@
+# 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?
+
+.cache/
+build/
+.vercel/

packages/design-system-v3/.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-v3/.ladle/head.html

@@ -0,0 +1,79 @@
+<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';
+
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.3rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+
+  * {
+    font-family: var(--theme-font-primary);
+  }
+</style>

packages/design-system-v3/.prettierignore

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

packages/design-system-v3/.prettierrc.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'es5',
+  plugins: ['prettier-plugin-organize-imports', 'prettier-plugin-tailwindcss'],
+}

packages/design-system-v3/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

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/tailwind.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/ui",
+    "utils": "@/lib/utils",
+    "ui": "@/ui"
+  }
+}

packages/design-system-v3/package.json

@@ -0,0 +1,112 @@
+{
+  "name": "@uzh-df/design-system",
+  "version": "3.0.0-alpha.25",
+  "main": "dist/index.js",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@hookform/resolvers": "3.9.0",
+    "@radix-ui/react-accordion": "1.2.0",
+    "@radix-ui/react-alert-dialog": "1.1.1",
+    "@radix-ui/react-aspect-ratio": "1.1.0",
+    "@radix-ui/react-avatar": "1.1.0",
+    "@radix-ui/react-checkbox": "1.1.1",
+    "@radix-ui/react-collapsible": "1.0.3",
+    "@radix-ui/react-context-menu": "2.2.1",
+    "@radix-ui/react-dialog": "1.0.4",
+    "@radix-ui/react-dropdown-menu": "2.0.5",
+    "@radix-ui/react-hover-card": "1.1.1",
+    "@radix-ui/react-label": "2.1.0",
+    "@radix-ui/react-menubar": "1.1.1",
+    "@radix-ui/react-navigation-menu": "1.2.0",
+    "@radix-ui/react-popover": "1.1.1",
+    "@radix-ui/react-progress": "1.0.3",
+    "@radix-ui/react-radio-group": "1.2.0",
+    "@radix-ui/react-scroll-area": "1.1.0",
+    "@radix-ui/react-select": "1.2.2",
+    "@radix-ui/react-separator": "1.1.0",
+    "@radix-ui/react-slider": "1.1.2",
+    "@radix-ui/react-slot": "1.1.0",
+    "@radix-ui/react-switch": "1.0.3",
+    "@radix-ui/react-tabs": "1.0.4",
+    "@radix-ui/react-toast": "1.1.4",
+    "@radix-ui/react-toggle": "1.1.0",
+    "@radix-ui/react-toggle-group": "1.1.0",
+    "@radix-ui/react-tooltip": "1.0.6",
+    "cmdk": "1.0.0",
+    "date-fns": "3.6.0",
+    "embla-carousel-react": "8.1.8",
+    "input-otp": "1.2.4",
+    "lucide-react": "0.438.0",
+    "next-themes": "0.3.0",
+    "react-day-picker": "8.10.1",
+    "react-hook-form": "7.52.2",
+    "react-resizable-panels": "2.0.22",
+    "recharts": "2.12.7",
+    "sonner": "1.5.0",
+    "vaul": "0.9.1",
+    "zod": "3.23.8"
+  },
+  "devDependencies": {
+    "@ladle/react": "4.1.0",
+    "@tailwindcss/aspect-ratio": "0.4.2",
+    "@tailwindcss/forms": "0.5.7",
+    "@tailwindcss/typography": "0.5.13",
+    "@types/node": "^20.14.14",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "7.15.0",
+    "@typescript-eslint/parser": "7.15.0",
+    "@vitejs/plugin-react-swc": "3.7.0",
+    "autoprefixer": "10.4.20",
+    "eslint": "8.57.0",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-react-refresh": "0.4.9",
+    "npm-run-all": "4.1.5",
+    "postcss": "8.4.41",
+    "prettier": "3.3.3",
+    "prettier-plugin-organize-imports": "4.0.0",
+    "prettier-plugin-tailwindcss": "0.6.5",
+    "tailwindcss": "3.4.10",
+    "tailwindcss-animate": "1.0.7",
+    "tailwindcss-radix": "3.0.4",
+    "tsx": "4.16.5",
+    "typescript": "5.4.2",
+    "vite": "5.4.0",
+    "vite-plugin-dts": "4.0.1"
+  },
+  "peerDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "postcss": "^8.4.41",
+    "postcss-import": "^16.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.4.0"
+  },
+  "scripts": {
+    "build": "run-s build:tsc build:vite build:copy",
+    "build:copy": "tsx src/copy.ts",
+    "build:ladle": "ladle build",
+    "build:tsc": "tsc -b",
+    "build:vite": "vite build",
+    "dev": "ladle serve",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "ladle preview"
+  },
+  "engines": {
+    "node": "=20"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "type": "module"
+}

packages/design-system-v3/postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    'postcss-import': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}