Opize-design-system NPM

Overview

Opize Design System은 디자인에 대한 고민 대신, 아이디어를 현실로 만들도록 도와주는 Opize의 디자인 시스템입니다.

Opize Design System Storybook

⚠️ Work In Process - 개발중인 프로젝트

⚠️ warn: 최근에 v1 로 업데이트되면서 많은 부분이 달라졌어요. 문서를 잘 확인해주세요.

Opize Design System은 현재 개발중인 프로젝트로, 아직은 이 라이브러리를 사용하는 것을 추천하지 않아요.

컴포넌트의 속성과 타입이 예고 없이 변경될 수 있어요.
해결되지 못한 버그로 인해 치명적인 문제가 발생할 수 있어요.
코드 최적화가 이루어지지 않아 퍼포먼스에 영향을 미칠 수 있어요.
작성 & 보완되지 않은 문서가 존재할 수 있어요.

Quick Start

Install

> npm install opize-design-system styled-components @phosphor-icons/react

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

Setup

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

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

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

<Button>Button</Button>;

In NextJS

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

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

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

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

<FlexColumn>...</FlexColumn>;