import { Meta } from '@storybook/addon-docs';

<Meta title="Docs/Quick Start" />

## Install

```bash
# Npm
> npm install opize-design-system styled-components @phosphor-icons/react

# Yarn
> yarn add opize-design-system styled-components @phosphor-icons/react

```

> #### update
>
> 현재 Opize Design System은 개발 중으므로 지속적으로 버전이 올라가고 있습니다. 특정 버전의 `opize-design-system`을 이용하려면 아래 명령어를 입력하세요.
>
> -   npm: `npm install opize-design-system@<version>`
> -   yarn: `yarn upgrade opize-design-system@<version>`

## Setup

Opize Design System은 내부적으로 Context를 사용합니다. 이에 따라 라이브러리를 사용하기 위해서는 `<OpizeWrapper>` 컴포넌트를 추가해야 합니다.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { OpizeWrapper } from 'opize-design-system';

import App from './App';

ReactDOM.render(
    <OpizeWrapper>
        <App />
    </OpizeWrapper>,
    document.getElementById('root')
);
```

### In NextJS

    -   `Page Router` (pages 폴더가 있는 경우)를 사용하는 경우 `_app.tsx` 파일에 `<OpizeWrapper>` 를 추가해주세요.
    -   `App Router` (app 폴더가 있는 경우)를 사용하는 경우 app 폴더 바로 아래의 `layout.tsx` 파일에 `<OpizeWrapper>` 를 추가해주세요.

## Usage

```jsx
import { Button } from 'opize-design-system';
```

### In NextJS

NextJS의 App Router에서는 점으로 연결된 컴포넌트를 사용할 수 없어요. 이 경우 .을 제외하고 사용해주세요.

```tsx
// 일반적인 React
import { Flex } from 'opize-design-system';

<Flex.Column>...</Flex.Column>;

// NextJS (App Router)
import { FlexColumn } from 'opize-design-system';

<FlexColumn>...</FlexColumn>;
```