N-ui-compoment NPM

source update 방법

source update(git으로 부터 소스 업데이트)

git pull

추가 패키지 Update(추가된 react package update)

npm install

storybook 실행

npm run storybook

branch 변경 방법

branch 확인

$ git branch -a
* main
  remotes/origin/HEAD -> origin/main
  remotes/origin/astlachesis
  remotes/origin/kiminae
  remotes/origin/main

branch 변경

브렌치에 kiminae는 존재하지 않고 remotes/origin/kiminae 만 존재하는 경우

$ git checkout -t remotes/origin/kiminae

브렌치에 kiminae 가 존재하는 경우

$ git checkout kiminae

실행 결과

$ git branch -a
* kiminae
  main
  remotes/origin/HEAD -> origin/main
  remotes/origin/astlachesis
  remotes/origin/kiminae
  remotes/origin/main

상태 확인

$ git status
현재 브랜치 kiminae
브랜치가 'origin/kiminae'에 맞게 업데이트된 상태입니다.

커밋하도록 정하지 않은 변경 사항:
  (무엇을 커밋할지 바꾸려면 "git add <파일>..."을 사용하십시오)
  (use "git restore <file>..." to discard changes in working directory)
	수정함:        README.md

추적하지 않는 파일:
  (커밋할 사항에 포함하려면 "git add <파일>..."을 사용하십시오)
	.idea/

커밋할 변경 사항을 추가하지 않았습니다 ("git add" 및/또는 "git commit -a"를
사용하십시오)

실행 방법

prepare
- stable -> 22.0 (-> v22.0.0) 사용
- nvm을 이용한 설치는 link 참조(https://jin2rang.tistory.com/entry/Window-Nodejs-설치2)

git clone

git clone http://192.168.10.111/infra-common/shacdn-storybook.git

package install
```
npm install
```
storybook 실행
```
npm run storybook
```

초기 환경 설정 방법

storybook 설치
```
npx storybook@latest init
```
- next.js(TS) 선택
shadcn-ui 설치
```
npx shadcn-ui@latest init
```
- Which style would you like to use? › Default
- Which color would you like to use as base color? › Slate
- Would you like to use CSS variables for colors? › yes
shadcn-ui component (ex. button) 설치
```
npx shadcn-ui@latest add button
```

Button.stories.tsx 추가

repo root 디렉토리의 src/stories/Button.stories.tsx 에 하단 내용 추가

import type {Meta, StoryObj} from "@storybook/react"
import {Button} from "@/components/ui/button";


// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
const meta: Meta<typeof Button> = {
    title: "Example/Button",
    component: Button,
    tags: ["autodocs"],
    argTypes: {
        children: { control: "text", defaultValue: "Button" },
        variant: {
            control: "select",
            options: [
                "primary",
                "destructive",
                "outline",
                "secondary",
                "ghost",
                "link",
            ],
        },
        size: { control: "radio", options: ["sm", "md", "lg", "icon"] },
        asChild: { control: "boolean" },
        onClick: { action: "clicked", type: "function" },
    },
};

export default meta;
type Story = StoryObj<typeof Button>;

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const Default: Story = {
    args: {
        variant: "default",
        children: "Button",
    },
};

export const Destructive: Story = {
    args: {
        variant: "destructive",
        children: "Destructive Button",
    },
};

export const Outline: Story = {
    args: {
        variant: "outline",
        children: "Outline Button",
    },
};

export const Secondary: Story = {
    args: {
        variant: "secondary",
        children: "Secondary Button",
    },
};

export const Ghost: Story = {
    args: {
        variant: "ghost",
        children: "Ghost Button",
    },
};

export const Link: Story = {
    args: {
        variant: "link",
        children: "Link Button",
    },
};

global.css import
- repo root 디렉토리의 .storybook/preview.ts 수정
```
vi .storybook/preview.ts
```
- 아래 내용 추가
```
import "@/styles/globals.css"
```
실행
```
npm run storybook
```