# Lunit Design System

## Introduction

Lunit Design System Library is a collection of reusable components and styles that are used to build Lunit's products.<br />
It is built on top of Material UI, a popular React UI framework.

- [Design System Storybook on Chromatic](https://www.chromatic.com/library?appId=62d7d1f2efc8a1e364b5e5e8)
- [Design System Figma](https://www.figma.com/design/9CoirIDPof6exynJosiGXi/Design-System_2.0.0_Latest?node-id=0-1&p=f&m=dev)

## Installation

Currently, the design system supports Material UI v7, so you need to install compatible versions.

```bash
npm install @emotion/react@11.14.0 @emotion/styled@11.11.0 @mui/material@^7 @lunit/design-system
```

## Quick Start

### 1. Setting Provider

```tsx
import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
import { deepmerge } from '@mui/utils';
import CssBaseline from '@mui/material/CssBaseline';
import { themeOptions } from '@lunit/design-system';

const theme = createTheme(
  deepmerge(themeOptions, {
    typography: {
      fontFamily: ['Pretendard Variable'],
    },
  }),
);

function ThemeProvider({ children }: { children: React.ReactNode }) {
  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </MuiThemeProvider>
  );
}

function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}
```

### 2. Setting Pretendard Font

#### React App with vite

Download the PretendardVariable.woff2 font in [Pretendard GitHub](https://github.com/orioncactus/pretendard?tab=readme-ov-file#%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C) and place it in your css file.

```css
@font-face {
  font-family: 'Pretendard Variable';
  src: url('./assets/fonts/PretendardVariable.woff2') format('woff2');
}
```

#### Next App

Apply the Pretendard font using NextFont in the Provider.

```tsx
import localFont from 'next/font/local';

const pretendard = localFont({
  src: './fonts/PretendardVariable.woff2',
});

const theme = createTheme(
  deepmerge(themeOptions, {
    typography: {
      fontFamily: [pretendard.style.fontFamily, 'Pretendard Variable'],
    },
  }),
);
```

#### Setting Theme color

The color token in the design system shows different colors depending on the theme you have set up.<br />
Here's how to set the color theme.

> Note: If you don't set a theme, the `Dark 1 theme` is applied,<br />
> and the text may not be visible if the background is white. <br />
> You can fix this by modifying the theme. Please refer to the guide below

- [how to set themes of lunit design system docs](https://main--62d7d1f2efc8a1e364b5e5e8.chromatic.com/?path=/docs/foundation-colors--docs#how-to-set-themes)

## Development

- At `repository root` location
  - `npm i` : Install node modules and set Nx environment
  - `npm run storybook:design-system` : Runs [storybook](https://storybook.js.org) local dev server on http://localhost:6006

### Create Story

A story is simply a case in which one component is executable.<br />
You can browse the stories in the UI and see the code behind them in files<br />
that end with `.stories.js(jsx)` or `.stories.ts(tsx)`.

- [Writing stories Docs](https://storybook.js.org/docs/react/writing-stories/introductio)

```jsx
// Button.stories.js|jsx

import React from 'react';

import { Button } from './Button';

export default {
  /* 👇 The title controls the name shown in the storybook sidebar. */
  title: 'Components/Button',
  component: Button,
};

export const Primary = () => <Button primary>Button</Button>;
```

## Deployment

- [@lunit/design-system npm publish docs](https://lunit.atlassian.net/wiki/x/FoKe8)

## Support

_XE Team(xe@lunit.io)_