Lunit Design System

Introduction

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

• Design System Storybook on Chromatic
• Design System Figma

Installation

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

npm install @emotion/[email protected] @emotion/[email protected] @mui/material@^7 @lunit/design-system

Quick Start

1. Setting Provider

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 and place it in your css file.

@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.

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. Here's how to set the color theme.

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

• how to set themes of lunit design system docs

Development

• At repository root location
  • npm i : Install node modules and set Nx environment
  • npm run storybook:design-system : Runs storybook local dev server on http://localhost:6006

Create Story

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

• Writing stories Docs

// 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

Support

XE Team([email protected])