From c26b885f5fb6d093b769f0c328efa3eea54b4e72 Mon Sep 17 00:00:00 2001 From: camilovegag Date: Wed, 3 Jul 2024 23:09:45 -0500 Subject: [PATCH] Install tailwind and lucide --- package.json | 10 ++ packages/berlin/components.json | 17 +++ packages/berlin/package.json | 11 ++ packages/berlin/postcss.config.js | 6 ++ packages/berlin/src/index.css | 76 ++++++++++++++ packages/berlin/src/lib/utils.ts | 6 ++ packages/berlin/src/main.tsx | 2 +- packages/berlin/tailwind.config.js | 77 ++++++++++++++ pnpm-lock.yaml | 161 ++++++++++++++++++++++++++--- vite.config.ts | 18 ---- 10 files changed, 353 insertions(+), 31 deletions(-) create mode 100644 packages/berlin/components.json create mode 100644 packages/berlin/postcss.config.js create mode 100644 packages/berlin/src/index.css create mode 100644 packages/berlin/src/lib/utils.ts create mode 100644 packages/berlin/tailwind.config.js delete mode 100644 vite.config.ts diff --git a/package.json b/package.json index 9debc022..af5d49d8 100644 --- a/package.json +++ b/package.json @@ -27,8 +27,12 @@ "@pcd/semaphore-identity-pcd": "^0.8.0", "@pcd/semaphore-signature-pcd": "^0.9.0", "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-icons": "^1.3.0", "@tanstack/react-query": "^5.13.4", "@tanstack/react-query-devtools": "^5.13.5", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.0", + "lucide-react": "^0.397.0", "react": "^18.2.0", "react-content-loader": "^7.0.0", "react-dom": "^18.2.0", @@ -37,22 +41,28 @@ "react-markdown": "^9.0.1", "react-router-dom": "^6.20.1", "styled-components": "^6.1.1", + "tailwind-merge": "^2.2.2", + "tailwindcss-animate": "^1.0.7", "zod": "^3.22.4", "zustand": "^4.4.7" }, "devDependencies": { "@hookform/devtools": "^4.3.1", "@tanstack/eslint-plugin-query": "^5.18.0", + "@types/node": "^20.12.4", "@types/react": "^18.2.37", "@types/react-dom": "^18.2.15", "@typescript-eslint/eslint-plugin": "^6.19.0", "@typescript-eslint/parser": "^6.19.0", "@vitejs/plugin-react": "^4.2.0", + "autoprefixer": "^10.4.19", "eslint": "^8.56.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.4", + "postcss": "^8.4.38", "prettier": "^3.1.1", + "tailwindcss": "^3.4.3", "typescript": "^5.5.2", "vite": "^5.0.0", "vite-plugin-node-polyfills": "^0.17.0" diff --git a/packages/berlin/components.json b/packages/berlin/components.json new file mode 100644 index 00000000..8a529f4e --- /dev/null +++ b/packages/berlin/components.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.js", + "css": "src/index.css", + "baseColor": "slate", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/_components", + "utils": "@/lib/utils" + } +} diff --git a/packages/berlin/package.json b/packages/berlin/package.json index 99cdc60f..edc1067d 100644 --- a/packages/berlin/package.json +++ b/packages/berlin/package.json @@ -11,7 +11,18 @@ "preview": "vite preview" }, "dependencies": { + "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-popover": "^1.0.7", + "@radix-ui/react-separator": "^1.1.0", + "@radix-ui/react-slot": "^1.0.2", "api": "workspace:*", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.0", + "cmdk": "^1.0.0", + "lucide-react": "^0.397.0", + "tailwind-merge": "^2.2.2", + "tailwindcss-animate": "^1.0.7", "ui": "workspace:*" } } diff --git a/packages/berlin/postcss.config.js b/packages/berlin/postcss.config.js new file mode 100644 index 00000000..2aa7205d --- /dev/null +++ b/packages/berlin/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/packages/berlin/src/index.css b/packages/berlin/src/index.css new file mode 100644 index 00000000..8abdb15c --- /dev/null +++ b/packages/berlin/src/index.css @@ -0,0 +1,76 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + :root { + --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.5rem; + } + + .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%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/packages/berlin/src/lib/utils.ts b/packages/berlin/src/lib/utils.ts new file mode 100644 index 00000000..9ad0df42 --- /dev/null +++ b/packages/berlin/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from 'clsx'; +import { twMerge } from 'tailwind-merge'; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/packages/berlin/src/main.tsx b/packages/berlin/src/main.tsx index 95dc2ece..6f5ba456 100644 --- a/packages/berlin/src/main.tsx +++ b/packages/berlin/src/main.tsx @@ -6,7 +6,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import BerlinApp from './App.tsx'; import ThemedApp from './global.styled'; -// import 'ui/dist/style.css'; +import './index.css'; const queryClient = new QueryClient(); diff --git a/packages/berlin/tailwind.config.js b/packages/berlin/tailwind.config.js new file mode 100644 index 00000000..fe12db56 --- /dev/null +++ b/packages/berlin/tailwind.config.js @@ -0,0 +1,77 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + darkMode: ['class'], + content: [ + './pages/**/*.{ts,tsx}', + './components/**/*.{ts,tsx}', + './app/**/*.{ts,tsx}', + './src/**/*.{ts,tsx}', + ], + prefix: '', + theme: { + container: { + center: true, + padding: '2rem', + screens: { + '2xl': '1400px', + }, + }, + extend: { + colors: { + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))', + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))', + }, + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))', + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))', + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))', + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))', + }, + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))', + }, + }, + borderRadius: { + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)', + }, + keyframes: { + 'accordion-down': { + from: { height: '0' }, + to: { height: 'var(--radix-accordion-content-height)' }, + }, + 'accordion-up': { + from: { height: 'var(--radix-accordion-content-height)' }, + to: { height: '0' }, + }, + }, + animation: { + 'accordion-down': 'accordion-down 0.2s ease-out', + 'accordion-up': 'accordion-up 0.2s ease-out', + }, + }, + }, + plugins: [require('tailwindcss-animate')], +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 342af50f..1165a1f1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,12 +26,24 @@ importers: '@radix-ui/react-dialog': specifier: ^1.0.5 version: 1.0.5(@types/react-dom@18.2.17)(@types/react@18.2.42)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-icons': + specifier: ^1.3.0 + version: 1.3.0(react@18.2.0) '@tanstack/react-query': specifier: ^5.13.4 version: 5.13.4(react@18.2.0) '@tanstack/react-query-devtools': specifier: ^5.13.5 version: 5.13.5(@tanstack/react-query@5.13.4(react@18.2.0))(react@18.2.0) + class-variance-authority: + specifier: ^0.7.0 + version: 0.7.0 + clsx: + specifier: ^2.1.0 + version: 2.1.0 + lucide-react: + specifier: ^0.397.0 + version: 0.397.0(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -56,6 +68,12 @@ importers: styled-components: specifier: ^6.1.1 version: 6.1.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + tailwind-merge: + specifier: ^2.2.2 + version: 2.2.2 + tailwindcss-animate: + specifier: ^1.0.7 + version: 1.0.7(tailwindcss@3.4.3) zod: specifier: ^3.22.4 version: 3.22.4 @@ -69,6 +87,9 @@ importers: '@tanstack/eslint-plugin-query': specifier: ^5.18.0 version: 5.18.1(eslint@8.56.0)(typescript@5.5.2) + '@types/node': + specifier: ^20.12.4 + version: 20.12.4 '@types/react': specifier: ^18.2.37 version: 18.2.42 @@ -84,6 +105,9 @@ importers: '@vitejs/plugin-react': specifier: ^4.2.0 version: 4.2.1(vite@5.0.6(@types/node@20.12.4)) + autoprefixer: + specifier: ^10.4.19 + version: 10.4.19(postcss@8.4.38) eslint: specifier: ^8.56.0 version: 8.56.0 @@ -96,9 +120,15 @@ importers: eslint-plugin-react-refresh: specifier: ^0.4.4 version: 0.4.5(eslint@8.56.0) + postcss: + specifier: ^8.4.38 + version: 8.4.38 prettier: specifier: ^3.1.1 version: 3.2.5 + tailwindcss: + specifier: ^3.4.3 + version: 3.4.3 typescript: specifier: ^5.5.2 version: 5.5.2 @@ -113,9 +143,42 @@ importers: packages/berlin: dependencies: + '@radix-ui/react-dialog': + specifier: ^1.0.5 + version: 1.0.5(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-icons': + specifier: ^1.3.0 + version: 1.3.0(react@18.2.0) + '@radix-ui/react-popover': + specifier: ^1.0.7 + version: 1.0.7(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-separator': + specifier: ^1.1.0 + version: 1.1.0(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-slot': + specifier: ^1.0.2 + version: 1.0.2(@types/react@18.2.74)(react@18.2.0) api: specifier: workspace:* version: link:../api + class-variance-authority: + specifier: ^0.7.0 + version: 0.7.0 + clsx: + specifier: ^2.1.0 + version: 2.1.0 + cmdk: + specifier: ^1.0.0 + version: 1.0.0(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + lucide-react: + specifier: ^0.397.0 + version: 0.397.0(react@18.2.0) + tailwind-merge: + specifier: ^2.2.2 + version: 2.2.2 + tailwindcss-animate: + specifier: ^1.0.7 + version: 1.0.7(tailwindcss@3.4.3) ui: specifier: workspace:* version: link:../ui @@ -970,6 +1033,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-compose-refs@1.1.0': + resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-context@1.0.1': resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==} peerDependencies: @@ -1106,6 +1178,32 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-primitive@2.0.0': + resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + + '@radix-ui/react-separator@1.1.0': + resolution: {integrity: sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-slot@1.0.2': resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} peerDependencies: @@ -1115,6 +1213,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-slot@1.1.0': + resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-use-callback-ref@1.0.1': resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} peerDependencies: @@ -2636,6 +2743,11 @@ packages: resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==} engines: {node: '>=10'} + lucide-react@0.397.0: + resolution: {integrity: sha512-rUcbRY5jFP/4za/OJvaRUUmdPsPb940Tw9zE1ehrRZmr9JnkDcW8OV3POR3XfEAAMDkssiTc5IWBFv8Y//pkDQ==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 + magic-string@0.30.5: resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==} engines: {node: '>=12'} @@ -2993,10 +3105,6 @@ packages: postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} - postcss@8.4.32: - resolution: {integrity: sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==} - engines: {node: ^10 || ^12 || >=14} - postcss@8.4.38: resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==} engines: {node: ^10 || ^12 || >=14} @@ -4822,6 +4930,12 @@ snapshots: optionalDependencies: '@types/react': 18.2.74 + '@radix-ui/react-compose-refs@1.1.0(@types/react@18.2.74)(react@18.2.0)': + dependencies: + react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.74 + '@radix-ui/react-context@1.0.1(@types/react@18.2.42)(react@18.2.0)': dependencies: '@babel/runtime': 7.24.4 @@ -5073,6 +5187,24 @@ snapshots: '@types/react': 18.2.74 '@types/react-dom': 18.2.24 + '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': + dependencies: + '@radix-ui/react-slot': 1.1.0(@types/react@18.2.74)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.74 + '@types/react-dom': 18.2.24 + + '@radix-ui/react-separator@1.1.0(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': + dependencies: + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.24)(@types/react@18.2.74)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.74 + '@types/react-dom': 18.2.24 + '@radix-ui/react-slot@1.0.2(@types/react@18.2.42)(react@18.2.0)': dependencies: '@babel/runtime': 7.23.9 @@ -5089,6 +5221,13 @@ snapshots: optionalDependencies: '@types/react': 18.2.74 + '@radix-ui/react-slot@1.1.0(@types/react@18.2.74)(react@18.2.0)': + dependencies: + '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.74)(react@18.2.0) + react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.74 + '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.42)(react@18.2.0)': dependencies: '@babel/runtime': 7.23.9 @@ -6909,6 +7048,10 @@ snapshots: dependencies: yallist: 4.0.0 + lucide-react@0.397.0(react@18.2.0): + dependencies: + react: 18.2.0 + magic-string@0.30.5: dependencies: '@jridgewell/sourcemap-codec': 1.4.15 @@ -7418,12 +7561,6 @@ snapshots: postcss-value-parser@4.2.0: {} - postcss@8.4.32: - dependencies: - nanoid: 3.3.7 - picocolors: 1.0.0 - source-map-js: 1.0.2 - postcss@8.4.38: dependencies: nanoid: 3.3.7 @@ -7827,7 +7964,7 @@ snapshots: '@types/stylis': 4.2.4 css-to-react-native: 3.2.0 csstype: 3.1.2 - postcss: 8.4.32 + postcss: 8.4.38 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) shallowequal: 1.1.0 @@ -8126,7 +8263,7 @@ snapshots: vite@5.0.6(@types/node@20.12.4): dependencies: esbuild: 0.19.8 - postcss: 8.4.32 + postcss: 8.4.38 rollup: 4.6.1 optionalDependencies: '@types/node': 20.12.4 diff --git a/vite.config.ts b/vite.config.ts deleted file mode 100644 index 5724869f..00000000 --- a/vite.config.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react'; -import { nodePolyfills } from 'vite-plugin-node-polyfills'; - -// https://vitejs.dev/config/ -export default defineConfig({ - // This is needed because qr-image relies on it being here - // https://github.com/alexeyten/qr-image/issues/13#issuecomment-421289572 - plugins: [ - react(), - nodePolyfills({ - include: ['process'], - globals: { - process: true, - }, - }), - ], -});