@uniquegood/realworld-studio-design

Build Realworld Studio UI components faster

Table of contents

• 🚀 Getting Started
• 📖 Example
• 📕 Components

Getting Started

Download

Yarn

yarn add @uniquegood/realworld-studio-design @types/react-transition-group @emotion/core@^10.0.0

Start

App Provider는 애플리케이션 계층 전체에서 전역 설정을 공유 할 수 있도록하는 필수 구성 요소입니다.

import { AppProvider } from '@uniquegood/realworld-studio-design';
import { App } from './App';

const rootEl = document.getElementById('root');

ReactDOM.render(
  <AppProvider>
    <App />
  </AppProvider>,
  rootEl
);

if (module.hot) {
  module.hot.accept('./App', () => {
    const NextApp = require('./App').default;
    ReactDOM.render(<NextApp />, rootEl);
  });
}

Example

import { Button } from '@uniquegood/realworld-studio-design';

const ButtonExample = () => {
  return (
    <Button type="primary" size="medium">primary</Button>
  )
}

Components

atoms

• Avatar
• Badge
• Button
• CheckBox
• Divider
• Icon
• Image
• Input
• Label
• RadioButton
• Select
• Tooltip
• Typography

molecules

• ActionList
• Banner
• ButtonGroup
• Card
• Dropzone
• Popover
• Toast

organisms

• FormGroup
• Modal
• Navigation
• TopBar