[DS-152] docs index

packages/design-system/.storybook/main.js

@@ -2,11 +2,7 @@ const path = require("path");
 const alias = require("../config/alias");
 
 module.exports = {
-  stories: [
-    "./Welcome/Welcome.stories.tsx",
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   refs: {
     "design-system-icons": {
       title: "Lunit Design System Icons",

packages/design-system/.storybook/manager.js

@@ -1,6 +1,14 @@
-import { addons } from '@storybook/addons'
-import yourTheme from './YourTheme';
+import { addons } from "@storybook/addons";
+import { create } from "@storybook/theming";
+import Logo from "./assets/logo.svg";
+
+const theme = create({
+  base: "light",
+  brandTitle: "Lunit Design System Library",
+  brandUrl: "https://www.lunit.io",
+  brandImage: Logo,
+});
 
 addons.setConfig({
-  theme: yourTheme,
-});
+  theme,
+});

packages/design-system/src/stories/GettingStarted.mdx

@@ -0,0 +1,88 @@
+import {  Meta } from '@storybook/blocks';
+
+<Meta title="Getting Started/Overview" />
+
+# Lunit Design System Library
+
+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](https://mui.com/material-ui/getting-started/), a popular React UI framework.
+
+## Installation
+
+```bash
+npm install @lunit/design-system
+```
+
+Material UI is peer dependency of Lunit Design System Library. You need to install Material UI first.
+
+```json
+"peerDependencies": {
+  "@mui/material": "^5.0.0",
+  "@types/react": "^17.0.0 || ^18.0.0",
+  "react": "^17.0.0 || ^18.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0"
+}
+```
+
+## Usage
+
+### Theme
+
+This library is based on Material UI's themes feature, so it imports themes and puts them into the provider. We also recommend using the `CssBaseline` component.
+
+```tsx
+import {
+  createTheme,
+  ThemeProvider,
+} from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { themeOptions } from '@lunit/design-system';
+
+const theme = createTheme(themeOptions);
+
+const App = () => {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <YourApp />
+    </ThemeProvider>
+  );
+};
+```
+
+If you want to customize the theme, use the `deepmerge` utility.
+
+[https://mui.com/material-ui/customization/theming/#createtheme-options-args-theme](https://mui.com/material-ui/customization/theming/#createtheme-options-args-theme)
+
+### Fonts
+
+This library uses the `Pretendard` font-family by default. The [Pretendard font](https://github.com/orioncactus/pretendard) does not come with this library, so you will need to provide it yourself via Webfonts. You can change the font by setting the `fontFamily` property in the theme.
+
+```tsx
+const theme = createTheme(
+  deepmerge(themeOptions, {
+    typography: {
+      fontFamily: [
+        'Pretendard Variable',
+        'sans-serif',
+      ]
+    }
+  })
+);
+```
+
+## Foundation
+
+This library provides a set of foundational styles that are used in Lunit's products. Please refer Colors, Typography, and Elevation in the sidebar.
+
+## Components
+
+This library provides a variety of components that are used in Lunit's products. Please refer Components in the sidebar.
+
+## Reference
+
+- [Lunit Design System Figma](https://www.figma.com/file/oh2WsSLBuX30Yp589gyliB/Design-System_1.0.7_Latest?node-id=0%3A1&mode=dev)
+
+## Support
+
+- Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
+- Slack: #tf_design_system