Adding shadcn guide to README.md (Jonghakseo#739)

Jonghakseo · HiCreatrip · PatrykKuniczak · web-flow · commit 3779bc51cded · 2024-09-17T11:41:18.000+09:00
Co-authored-by: Jonghakseo &lt;jonghak.seo@creatrip.com&gt;
Co-authored-by: Patryk Kuniczak &lt;p.kuniczak@gmail.com&gt;
diff --git a/packages/ui/README.md b/packages/ui/README.md
@@ -104,3 +104,249 @@ Modify the `tailwind.config.ts` file to make global style changes to the package
 ## Modifying the css variable of the UI library
 
 Modify the css variable in the `ui/lib/global.css` code to change the css variable of the package.
+
+## Guide for Adding shadcn to the UI Package
+
+You can refer to the this [manual guide](https://ui.shadcn.com/docs/installation/manual)
+
+1. Create components.json in packages/ui
+
+Create a file named `components.json` in the `packages/ui` directory with the following content:
+
+```json
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "lib/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/lib/components",
+    "utils": "@/lib/utils",
+    "ui": "@/lib/components/ui",
+    "lib": "@/lib"
+  }
+}
+```
+
+2. Install dependencies
+
+Run the following command from the root of your project:
+
+```shell
+pnpm add tailwindcss-animate class-variance-authority -F ui
+```
+
+3. Edit `withUI.ts` in `lib` folder
+
+This configuration file is from the manual guide. You can refer to the manual guide to modify the configuration file. ([`Configure tailwind.config.js`](https://ui.shadcn.com/docs/installation/manual))
+
+```ts
+import deepmerge from 'deepmerge';
+import type { Config } from 'tailwindcss/types/config';
+import { fontFamily } from 'tailwindcss/defaultTheme';
+import tailwindAnimate from 'tailwindcss-animate';
+
+export function withUI(tailwindConfig: Config): Config {
+  return deepmerge(
+    shadcnConfig,
+    deepmerge(tailwindConfig, {
+      content: ['./node_modules/@extension/ui/lib/**/*.{tsx,ts,js,jsx}'],
+    }),
+  );
+}
+
+const shadcnConfig = {
+  darkMode: ['class'],
+  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)',
+      },
+      fontFamily: {
+        sans: ['var(--font-sans)', ...fontFamily.sans],
+      },
+      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: [tailwindAnimate],
+};
+```
+
+4. Edit `global.css` in `lib` folder
+
+This configuration also comes from the manual guide. You can refer to the manual guide to modify the configuration file. ([`Configure styles`](https://ui.shadcn.com/docs/installation/manual))
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 47.4% 11.2%;
+
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 47.4% 11.2%;
+
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 47.4% 11.2%;
+
+        --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%;
+
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+
+        --destructive: 0 100% 50%;
+        --destructive-foreground: 210 40% 98%;
+
+        --ring: 215 20.2% 65.1%;
+
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 224 71% 4%;
+        --foreground: 213 31% 91%;
+
+        --muted: 223 47% 11%;
+        --muted-foreground: 215.4 16.3% 56.9%;
+
+        --accent: 216 34% 17%;
+        --accent-foreground: 210 40% 98%;
+
+        --popover: 224 71% 4%;
+        --popover-foreground: 215 20.2% 65.1%;
+
+        --border: 216 34% 17%;
+        --input: 216 34% 17%;
+
+        --card: 224 71% 4%;
+        --card-foreground: 213 31% 91%;
+
+        --primary: 210 40% 98%;
+        --primary-foreground: 222.2 47.4% 1.2%;
+
+        --secondary: 222.2 47.4% 11.2%;
+        --secondary-foreground: 210 40% 98%;
+
+        --destructive: 0 63% 31%;
+        --destructive-foreground: 210 40% 98%;
+
+        --ring: 216 34% 17%;
+
+        --radius: 0.5rem;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+        font-feature-settings: "rlig" 1, "calt" 1;
+    }
+}
+```
+
+5. Add shadcn components
+
+Finally, run this command from the root of your project to add the button component:
+
+```shell
+pnpm dlx shadcn@latest add button -c ./packages/ui
+```
+
+This will add the shadcn button component to your UI package.
+
+Remember to adjust any paths or package names if your project structure differs from the assumed layout in this guide. 
+
+6. Export components
+
+Make the `index.ts` file in the `components/ui` directory export the button component:
+
+```ts
+export * from './button';
+```
+
+Edit the `index.ts` file in the `packages/ui` directory to export the shadcn ui component:
+
+```ts
+// export * from './lib/components'; // remove this line: duplicated button component
+export * from './lib/components/ui';
+```
diff --git a/packages/ui/build.mjs b/packages/ui/build.mjs
@@ -1,4 +1,5 @@
 import fs from 'node:fs';
+import { replaceTscAliasPaths } from 'tsc-alias';
 import { resolve } from 'node:path';
 import esbuild from 'esbuild';
 
@@ -15,4 +16,17 @@ const buildOptions = {
 };
 
 await esbuild.build(buildOptions);
+
+/**
+ * Post build paths resolve since ESBuild only natively
+ * support paths resolution for bundling scenario
+ * @url https://github.com/evanw/esbuild/issues/394#issuecomment-1537247216
+ */
+await replaceTscAliasPaths({
+  configFile: 'tsconfig.json',
+  watch: false,
+  outDir: 'dist',
+  declarationDir: 'dist',
+});
+
 fs.copyFileSync(resolve('lib', 'global.css'), resolve('dist', 'global.css'));
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -24,7 +24,8 @@
   },
   "devDependencies": {
     "@extension/tsconfig": "workspace:*",
-    "deepmerge": "^4.3.1"
+    "deepmerge": "^4.3.1",
+    "tsc-alias": "^1.8.10"
   },
   "dependencies": {
     "clsx": "^2.1.1",
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
@@ -3,7 +3,10 @@
   "compilerOptions": {
     "outDir": "dist",
     "baseUrl": ".",
-    "types": ["chrome"]
+    "types": ["chrome"],
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
   "include": ["index.ts", "lib"]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
