1  # UI Package
  2  
  3  This package provides components that make up the UI.
  4  
  5  ## Installation
  6  
  7  First, move to the page you want to use.
  8  
  9  ```shell
 10  cd pages/options
 11  ```
 12  
 13  Add the following to the dependencies in `package.json`.
 14  
 15  ```json
 16  {
 17    "dependencies": {
 18      "@extension/ui": "workspace:*"
 19    }
 20  }
 21  ```
 22  
 23  Then, run `pnpm install`.
 24  
 25  ```shell
 26  pnpm install
 27  ```
 28  
 29  Add the following to the `tailwind.config.ts` file.
 30  
 31  ```ts
 32  import baseConfig from '@extension/tailwindcss-config';
 33  import { withUI } from '@extension/ui';
 34  
 35  export default withUI({
 36    ...baseConfig,
 37    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
 38  });
 39  ```
 40  
 41  Add the following to the `index.tsx` file.
 42  
 43  ```tsx
 44  import '@extension/ui/dist/global.css';
 45  ```
 46  
 47  ## Add Component
 48  
 49  Add the following to the `lib/components/index.ts` file.
 50  
 51  ```tsx
 52  export * from './Button';
 53  ```
 54  
 55  Add the following to the `lib/components/Button.tsx` file.
 56  
 57  ```tsx
 58  import { ComponentPropsWithoutRef } from 'react';
 59  import { cn } from '../utils';
 60  
 61  export type ButtonProps = {
 62    theme?: 'light' | 'dark';
 63  } & ComponentPropsWithoutRef<'button'>;
 64  
 65  export function Button({ theme, className, children, ...props }: ButtonProps) {
 66    return (
 67      <button
 68        className={cn(
 69          className,
 70          'mt-4 py-1 px-4 rounded shadow hover:scale-105',
 71          theme === 'light' ? 'bg-white text-black' : 'bg-black text-white',
 72        )}
 73        {...props}>
 74        {children}
 75      </button>
 76    );
 77  }
 78  ```
 79  
 80  ## Usage
 81  
 82  ```tsx
 83  import { Button } from '@extension/ui';
 84  
 85  export default function ToggleButton() {
 86    const [theme, setTheme] = useState<'light' | 'dark'>('light');
 87  
 88    const toggle = () => {
 89      setTheme(theme === 'light' ? 'dark' : 'light');
 90    };
 91  
 92    return (
 93      <Button theme={theme} onClick={toggle}>
 94        Toggle
 95      </Button>
 96    );
 97  }
 98  ```
 99  
100  ## Modifying the tailwind config of the UI library
101  
102  Modify the `tailwind.config.ts` file to make global style changes to the package.
103  
104  ## Modifying the css variable of the UI library
105  
106  Modify the css variable in the `ui/lib/global.css` code to change the css variable of the package.
107  
108  ## Guide for Adding shadcn to the UI Package
109  
110  You can refer to the this [manual guide](https://ui.shadcn.com/docs/installation/manual)
111  
112  1. Create components.json in packages/ui
113  
114  Create a file named `components.json` in the `packages/ui` directory with the following content:
115  
116  ```json
117  {
118    "$schema": "https://ui.shadcn.com/schema.json",
119    "style": "default",
120    "rsc": false,
121    "tsx": true,
122    "tailwind": {
123      "config": "tailwind.config.ts",
124      "css": "lib/global.css",
125      "baseColor": "neutral",
126      "cssVariables": true,
127      "prefix": ""
128    },
129    "aliases": {
130      "components": "@/lib/components",
131      "utils": "@/lib/utils",
132      "ui": "@/lib/components/ui",
133      "lib": "@/lib"
134    }
135  }
136  ```
137  
138  2. Install dependencies
139  
140  Run the following command from the root of your project:
141  
142  ```shell
143  pnpm add tailwindcss-animate class-variance-authority -F ui
144  ```
145  
146  3. Edit `withUI.ts` in `lib` folder
147  
148  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))
149  
150  ```ts
151  import deepmerge from 'deepmerge';
152  import type { Config } from 'tailwindcss/types/config';
153  import { fontFamily } from 'tailwindcss/defaultTheme';
154  import tailwindAnimate from 'tailwindcss-animate';
155  
156  export function withUI(tailwindConfig: Config): Config {
157    return deepmerge(
158      shadcnConfig,
159      deepmerge(tailwindConfig, {
160        content: ['./node_modules/@extension/ui/lib/**/*.{tsx,ts,js,jsx}'],
161      }),
162    );
163  }
164  
165  const shadcnConfig = {
166    darkMode: ['class'],
167    theme: {
168      container: {
169        center: true,
170        padding: '2rem',
171        screens: {
172          '2xl': '1400px',
173        },
174      },
175      extend: {
176        colors: {
177          border: 'hsl(var(--border))',
178          input: 'hsl(var(--input))',
179          ring: 'hsl(var(--ring))',
180          background: 'hsl(var(--background))',
181          foreground: 'hsl(var(--foreground))',
182          primary: {
183            DEFAULT: 'hsl(var(--primary))',
184            foreground: 'hsl(var(--primary-foreground))',
185          },
186          secondary: {
187            DEFAULT: 'hsl(var(--secondary))',
188            foreground: 'hsl(var(--secondary-foreground))',
189          },
190          destructive: {
191            DEFAULT: 'hsl(var(--destructive))',
192            foreground: 'hsl(var(--destructive-foreground))',
193          },
194          muted: {
195            DEFAULT: 'hsl(var(--muted))',
196            foreground: 'hsl(var(--muted-foreground))',
197          },
198          accent: {
199            DEFAULT: 'hsl(var(--accent))',
200            foreground: 'hsl(var(--accent-foreground))',
201          },
202          popover: {
203            DEFAULT: 'hsl(var(--popover))',
204            foreground: 'hsl(var(--popover-foreground))',
205          },
206          card: {
207            DEFAULT: 'hsl(var(--card))',
208            foreground: 'hsl(var(--card-foreground))',
209          },
210        },
211        borderRadius: {
212          lg: `var(--radius)`,
213          md: `calc(var(--radius) - 2px)`,
214          sm: 'calc(var(--radius) - 4px)',
215        },
216        fontFamily: {
217          sans: ['var(--font-sans)', ...fontFamily.sans],
218        },
219        keyframes: {
220          'accordion-down': {
221            from: { height: '0' },
222            to: { height: 'var(--radix-accordion-content-height)' },
223          },
224          'accordion-up': {
225            from: { height: 'var(--radix-accordion-content-height)' },
226            to: { height: '0' },
227          },
228        },
229        animation: {
230          'accordion-down': 'accordion-down 0.2s ease-out',
231          'accordion-up': 'accordion-up 0.2s ease-out',
232        },
233      },
234    },
235    plugins: [tailwindAnimate],
236  };
237  ```
238  
239  4. Edit `global.css` in `lib` folder
240  
241  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))
242  
243  ```css
244  @tailwind base;
245  @tailwind components;
246  @tailwind utilities;
247  
248  @layer base {
249      :root {
250          --background: 0 0% 100%;
251          --foreground: 222.2 47.4% 11.2%;
252  
253          --muted: 210 40% 96.1%;
254          --muted-foreground: 215.4 16.3% 46.9%;
255  
256          --popover: 0 0% 100%;
257          --popover-foreground: 222.2 47.4% 11.2%;
258  
259          --border: 214.3 31.8% 91.4%;
260          --input: 214.3 31.8% 91.4%;
261  
262          --card: 0 0% 100%;
263          --card-foreground: 222.2 47.4% 11.2%;
264  
265          --primary: 222.2 47.4% 11.2%;
266          --primary-foreground: 210 40% 98%;
267  
268          --secondary: 210 40% 96.1%;
269          --secondary-foreground: 222.2 47.4% 11.2%;
270  
271          --accent: 210 40% 96.1%;
272          --accent-foreground: 222.2 47.4% 11.2%;
273  
274          --destructive: 0 100% 50%;
275          --destructive-foreground: 210 40% 98%;
276  
277          --ring: 215 20.2% 65.1%;
278  
279          --radius: 0.5rem;
280      }
281  
282      .dark {
283          --background: 224 71% 4%;
284          --foreground: 213 31% 91%;
285  
286          --muted: 223 47% 11%;
287          --muted-foreground: 215.4 16.3% 56.9%;
288  
289          --accent: 216 34% 17%;
290          --accent-foreground: 210 40% 98%;
291  
292          --popover: 224 71% 4%;
293          --popover-foreground: 215 20.2% 65.1%;
294  
295          --border: 216 34% 17%;
296          --input: 216 34% 17%;
297  
298          --card: 224 71% 4%;
299          --card-foreground: 213 31% 91%;
300  
301          --primary: 210 40% 98%;
302          --primary-foreground: 222.2 47.4% 1.2%;
303  
304          --secondary: 222.2 47.4% 11.2%;
305          --secondary-foreground: 210 40% 98%;
306  
307          --destructive: 0 63% 31%;
308          --destructive-foreground: 210 40% 98%;
309  
310          --ring: 216 34% 17%;
311  
312          --radius: 0.5rem;
313      }
314  }
315  
316  @layer base {
317      * {
318          @apply border-border;
319      }
320      body {
321          @apply bg-background text-foreground;
322          font-feature-settings: "rlig" 1, "calt" 1;
323      }
324  }
325  ```
326  
327  5. Add shadcn components
328  
329  Finally, run this command from the root of your project to add the button component:
330  
331  ```shell
332  pnpm dlx shadcn@latest add button -c ./packages/ui
333  ```
334  
335  This will add the shadcn button component to your UI package.
336  
337  Remember to adjust any paths or package names if your project structure differs from the assumed layout in this guide. 
338  
339  6. Export components
340  
341  Make the `index.ts` file in the `components/ui` directory export the button component:
342  
343  ```ts
344  export * from './button';
345  ```
346  
347  Edit the `index.ts` file in the `packages/ui` directory to export the shadcn ui component:
348  
349  ```ts
350  // export * from './lib/components'; // remove this line: duplicated button component
351  export * from './lib/components/ui';
352  ```