@mzc-fe/design-system 0.0.2 → 0.0.3

package/README.md

@@ -34,6 +34,20 @@ function App() {
 }
 ```
 
+> **⚠️ Tailwind CSS 사용 시 주의사항**
+>
+> 프로젝트에서 Tailwind CSS를 함께 사용하는 경우, `design-system.css`가 **반드시** `@import 'tailwindcss'`보다 **먼저** import되어야 합니다. 순서가 잘못되면 디자인 시스템의 스타일이 Tailwind에 의해 덮어씌워질 수 있습니다.
+>
+> ```css
+> /* ✅ 올바른 순서 */
+> @import "@mzc-fe/design-system/dist/design-system.css";
+> @import "tailwindcss";
+>
+> /* ❌ 잘못된 순서 */
+> @import "tailwindcss";
+> @import "@mzc-fe/design-system/dist/design-system.css";
+> ```
+
 ### 디자인 토큰 사용
 
 ```tsx
@@ -71,6 +85,40 @@ yarn build
 yarn lint
 ```
 
+### 로컬 테스트 (yalc)
+
+다른 프로젝트에서 배포 전 디자인 시스템을 테스트하려면 [yalc](https://github.com/wclr/yalc)를 사용합니다.
+
+```bash
+# yalc 전역 설치 (최초 1회)
+npm install -g yalc
+
+# 디자인 시스템 빌드 및 로컬 배포
+yarn publish:local
+```
+
+테스트할 프로젝트에서:
+
+```bash
+# 디자인 시스템 로컬 버전 연결
+yalc add @mzc-fe/design-system
+
+# 의존성 재설치
+yarn install
+```
+
+테스트 완료 후 정리:
+
+```bash
+# 로컬 버전 연결 해제
+yalc remove @mzc-fe/design-system
+
+# 또는 모든 yalc 패키지 제거
+yalc remove --all
+```
+
+> **💡 Tip**: 디자인 시스템을 수정할 때마다 `yarn publish:local`을 실행하고, 테스트 프로젝트에서 `yalc update`를 실행하면 변경사항이 반영됩니다.
+
 ### 프로젝트 구조
 
 ```

package/dist/components/accordion/index.d.ts

@@ -0,0 +1 @@
+export * from './accordion';

package/dist/components/alert/index.d.ts

@@ -0,0 +1 @@
+export * from './alert';

package/dist/components/alert-dialog/index.d.ts

@@ -0,0 +1 @@
+export * from './alert-dialog';

package/dist/components/aspect-ratio/index.d.ts

@@ -0,0 +1 @@
+export * from './aspect-ratio';

package/dist/components/avatar/index.d.ts

@@ -0,0 +1 @@
+export * from './avatar';

package/dist/components/badge/index.d.ts

@@ -0,0 +1 @@
+export * from './badge';

package/dist/components/breadcrumb/index.d.ts

@@ -0,0 +1 @@
+export * from './breadcrumb';

package/dist/components/button/index.d.ts

@@ -0,0 +1 @@
+export * from './button';

package/dist/components/{button-group.d.ts → button-group/button-group.d.ts}

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { Separator } from './separator';
+import { Separator } from '../separator';
 declare const buttonGroupVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/button-group/index.d.ts

@@ -0,0 +1 @@
+export * from './button-group';

package/dist/components/{calendar.d.ts → calendar/calendar.d.ts}

@@ -1,5 +1,5 @@
 import { DayPicker, DayButton } from 'react-day-picker';
-import { Button } from './button';
+import { Button } from '../button';
 import * as React from "react";
 declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];

package/dist/components/calendar/index.d.ts

@@ -0,0 +1 @@
+export * from './calendar';

package/dist/components/card/index.d.ts

@@ -0,0 +1 @@
+export * from './card';

package/dist/components/{carousel.d.ts → carousel/carousel.d.ts}

@@ -1,5 +1,5 @@
 import { default as useEmblaCarousel, UseEmblaCarouselType } from 'embla-carousel-react';
-import { Button } from './button';
+import { Button } from '../button';
 import * as React from "react";
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;

package/dist/components/carousel/index.d.ts

@@ -0,0 +1 @@
+export * from './carousel';

package/dist/components/chart/index.d.ts

@@ -0,0 +1 @@
+export * from './chart';

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './checkbox';

package/dist/components/collapsible/index.d.ts

@@ -0,0 +1 @@
+export * from './collapsible';

package/dist/components/{command.d.ts → command/command.d.ts}

@@ -1,5 +1,5 @@
 import { Command as CommandPrimitive } from 'cmdk';
-import { Dialog } from './dialog';
+import { Dialog } from '../dialog';
 import * as React from "react";
 declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
 declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {

package/dist/components/command/index.d.ts

@@ -0,0 +1 @@
+export * from './command';

package/dist/components/context-menu/index.d.ts

@@ -0,0 +1 @@
+export * from './context-menu';

package/dist/components/dialog/index.d.ts

@@ -0,0 +1 @@
+export * from './dialog';

package/dist/components/drawer/index.d.ts

@@ -0,0 +1 @@
+export * from './drawer';

package/dist/components/dropdown-menu/index.d.ts

@@ -0,0 +1 @@
+export * from './dropdown-menu';

package/dist/components/empty/index.d.ts

@@ -0,0 +1 @@
+export * from './empty';

package/dist/components/{field.d.ts → field/field.d.ts}

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { Label } from './label';
+import { Label } from '../label';
 declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react/jsx-runtime").JSX.Element;
 declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
     variant?: "legend" | "label";

package/dist/components/field/index.d.ts

@@ -0,0 +1 @@
+export * from './field';

package/dist/components/form/index.d.ts

@@ -0,0 +1 @@
+export * from './form';

package/dist/components/hover-card/index.d.ts

@@ -0,0 +1 @@
+export * from './hover-card';

package/dist/components/input/index.d.ts

@@ -0,0 +1 @@
+export * from './input';

package/dist/components/input-group/index.d.ts

@@ -0,0 +1 @@
+export * from './input-group';

package/dist/components/{input-group.d.ts → input-group/input-group.d.ts}

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { Button } from './button';
+import { Button } from '../button';
 import * as React from "react";
 declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({

package/dist/components/input-otp/index.d.ts

@@ -0,0 +1 @@
+export * from './input-otp';

package/dist/components/item/index.d.ts

@@ -0,0 +1 @@
+export * from './item';

package/dist/components/{item.d.ts → item/item.d.ts}

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { Separator } from './separator';
+import { Separator } from '../separator';
 import * as React from "react";
 declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;

package/dist/components/kbd/index.d.ts

@@ -0,0 +1 @@
+export * from './kbd';

package/dist/components/label/index.d.ts

@@ -0,0 +1 @@
+export * from './label';

package/dist/components/menubar/index.d.ts

@@ -0,0 +1 @@
+export * from './menubar';

package/dist/components/navigation-menu/index.d.ts

@@ -0,0 +1 @@
+export * from './navigation-menu';

package/dist/components/pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './pagination';

package/dist/components/{pagination.d.ts → pagination/pagination.d.ts}

@@ -1,4 +1,4 @@
-import { Button } from './button';
+import { Button } from '../button';
 import * as React from "react";
 declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
 declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;

package/dist/components/popover/index.d.ts

@@ -0,0 +1 @@
+export * from './popover';

package/dist/components/progress/index.d.ts

@@ -0,0 +1 @@
+export * from './progress';

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1 @@
+export * from './radio-group';

package/dist/components/resizable/index.d.ts

@@ -0,0 +1 @@
+export * from './resizable';

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1 @@
+export * from './scroll-area';

package/dist/components/select/index.d.ts

@@ -0,0 +1 @@
+export * from './select';

package/dist/components/separator/index.d.ts

@@ -0,0 +1 @@
+export * from './separator';

package/dist/components/sheet/index.d.ts

@@ -0,0 +1 @@
+export * from './sheet';

package/dist/components/sidebar/index.d.ts

@@ -0,0 +1 @@
+export * from './sidebar';

package/dist/components/{sidebar.d.ts → sidebar/sidebar.d.ts}

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
-import { Button } from './button';
-import { Input } from './input';
-import { Separator } from './separator';
-import { TooltipContent } from './tooltip';
+import { Button } from '../button';
+import { Input } from '../input';
+import { Separator } from '../separator';
+import { TooltipContent } from '../tooltip';
 import * as React from "react";
 type SidebarContextProps = {
     state: "expanded" | "collapsed";

package/dist/components/skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from './skeleton';

package/dist/components/slider/index.d.ts

@@ -0,0 +1 @@
+export * from './slider';

package/dist/components/sonner/index.d.ts

@@ -0,0 +1,2 @@
+export { Toaster } from './sonner';
+export { toast } from 'sonner';

package/dist/components/spinner/index.d.ts

@@ -0,0 +1 @@
+export * from './spinner';

package/dist/components/switch/index.d.ts

@@ -0,0 +1 @@
+export * from './switch';

package/dist/components/table/index.d.ts

@@ -0,0 +1 @@
+export * from './table';

package/dist/components/tabs/index.d.ts

@@ -0,0 +1 @@
+export * from './tabs';

package/dist/components/textarea/index.d.ts

@@ -0,0 +1 @@
+export * from './textarea';

package/dist/components/toggle/index.d.ts

@@ -0,0 +1 @@
+export * from './toggle';

package/dist/components/toggle-group/index.d.ts

@@ -0,0 +1 @@
+export * from './toggle-group';

package/dist/components/{toggle-group.d.ts → toggle-group/toggle-group.d.ts}

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { toggleVariants } from './toggle';
+import { toggleVariants } from '../toggle';
 import * as React from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 declare function ToggleGroup({ className, variant, size, spacing, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & {

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './tooltip';