@lunit/design-system

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 Component Storybook
• Design System Figma

Installation

Currently, the design system only supports material ui v5, so you need to install those versions.

npm install @emotion/react@11.14.0 @emotion/styled@11.11.0 @mui/material@5.18.0 @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