Hyosun-design-system NPM

Hyosun Design System

Storybook Design System

Figma
Emotion
Rollup.js

storybook 으로 디자인 시스템 구축해보고 싶었고 겸사겸사 개인 프로젝트에서도 사용하면 좋을 것 같아서 만들게 된 프로젝트입니다.

Installation

npm url - https://www.npmjs.com/package/hyosun-design-system

storybook url - https://master--61b5cb6e444e4b003ac37f39.chromatic.com

npm

npm i hyosun-design-system

yarn

yarn add hyosun-design-system

Component

Global Style : css 초기화를 해주는 컴포넌트입니다.
Button
Icon
Input
CheckBox
Radio
Tag
Text

Example Code

01. Global component

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Global } from 'hyosun-design-system';

ReactDOM.render(
  <React.StrictMode>
    <Global />
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

글로벌 컴포넌트를 최상위에 import 해주세요.

font-family 는 Noto Sans KR 로 지정되어있습니다.

02. Button component

import React from 'react';
import { Button } from 'hyosun-design-system';

function App() {
  return (
    <div
      style={{
        width: '100%',
        height: '100vh',
        display: 'flex',
        alignItems: 'center',
        columnGap: 20,
        justifyContent: 'center',
      }}
    >
      <Button label="버튼" size="xl" />
      <Button label="버튼" size="lg" />
      <Button label="버튼" size="md" />
      <Button label="버튼" size="sm" />
      <Button label="버튼" size="xs" />
    </div>
  );
}

export default App;

button component 의 예시입니다. import 하면 아래처럼 버튼을 사용할 수 있습니다.