From 95c4b59dfd5550c04d72ca2f376c91c4998b30d6 Mon Sep 17 00:00:00 2001 From: Ryukemeister Date: Thu, 19 Oct 2023 15:22:30 +0530 Subject: [PATCH] setting up shadcn --- packages/atoms/components.json | 16 +++++++ packages/atoms/globals.css | 75 +++++++++++++++++++++++++++++- packages/atoms/package.json | 10 +++- packages/atoms/tailwind.config.cjs | 75 +++++++++++++++++++++++++++++- packages/atoms/tsconfig.json | 3 +- packages/atoms/vite.config.ts | 6 +++ 6 files changed, 181 insertions(+), 4 deletions(-) create mode 100644 packages/atoms/components.json diff --git a/packages/atoms/components.json b/packages/atoms/components.json new file mode 100644 index 0000000000..5d015cdde7 --- /dev/null +++ b/packages/atoms/components.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "tailwind.config.cjs", + "css": "globals.css", + "baseColor": "slate", + "cssVariables": true + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils" + } +} diff --git a/packages/atoms/globals.css b/packages/atoms/globals.css index 12686157f6..d14fea2837 100644 --- a/packages/atoms/globals.css +++ b/packages/atoms/globals.css @@ -6,5 +6,78 @@ @tailwind base; @tailwind components; @tailwind utilities; - + @import "../ui/styles/shared-globals.css"; + +@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; + } +} \ No newline at end of file diff --git a/packages/atoms/package.json b/packages/atoms/package.json index 11de78770e..f2e9c473e6 100644 --- a/packages/atoms/package.json +++ b/packages/atoms/package.json @@ -11,6 +11,7 @@ }, "devDependencies": { "@rollup/plugin-node-resolve": "^15.0.1", + "@types/node": "^20.8.7", "@types/react": "18.0.26", "@types/react-dom": "^18.0.9", "@vitejs/plugin-react": "^2.2.0", @@ -18,5 +19,12 @@ "typescript": "^4.9.4", "vite": "^4.1.2" }, - "main": "./index" + "main": "./index", + "dependencies": { + "class-variance-authority": "^0.7.0", + "clsx": "^2.0.0", + "lucide-react": "^0.288.0", + "tailwind-merge": "^1.14.0", + "tailwindcss-animate": "^1.0.7" + } } diff --git a/packages/atoms/tailwind.config.cjs b/packages/atoms/tailwind.config.cjs index 55b6825ae4..3121f1d653 100644 --- a/packages/atoms/tailwind.config.cjs +++ b/packages/atoms/tailwind.config.cjs @@ -3,5 +3,78 @@ const base = require("@calcom/config/tailwind-preset"); /** @type {import('tailwindcss').Config} */ module.exports = { ...base, - content: ["./bookings/**/*.tsx"], + darkMode: ["class"], + content: [ + "./pages/**/*.{ts,tsx}", + "./components/**/*.{ts,tsx}", + "./app/**/*.{ts,tsx}", + "./src/**/*.{ts,tsx}", + "./bookings/**/*.tsx", + ], + 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/packages/atoms/tsconfig.json b/packages/atoms/tsconfig.json index b8fb2a6430..1a202bf8bb 100644 --- a/packages/atoms/tsconfig.json +++ b/packages/atoms/tsconfig.json @@ -3,7 +3,8 @@ "compilerOptions": { "baseUrl": ".", "paths": { - "~/*": ["/*"] + "~/*": ["/*"], + "@/*": ["./src/*"] }, "resolveJsonModule": true }, diff --git a/packages/atoms/vite.config.ts b/packages/atoms/vite.config.ts index 0950e3ce06..833917b440 100644 --- a/packages/atoms/vite.config.ts +++ b/packages/atoms/vite.config.ts @@ -1,7 +1,12 @@ +import react from "@vitejs/plugin-react"; +import path from "path"; import { resolve } from "path"; import { defineConfig } from "vite"; +// setting up shadcn for vite: https://ui.shadcn.com/docs/installation/vite + export default defineConfig({ + plugins: [react()], build: { lib: { entry: [resolve(__dirname, "booker/export.ts")], @@ -23,6 +28,7 @@ export default defineConfig({ fs: resolve("../../node_modules/rollup-plugin-node-builtins"), path: resolve("../../node_modules/rollup-plugin-node-builtins"), os: resolve("../../node_modules/rollup-plugin-node-builtins"), + "@": path.resolve(__dirname, "./src"), }, }, });