docs: add mdx storybook

Author: in-ch

stories/Introduction.stories.mdx renamed to stories/ToggleFileTree.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Introduction" />
+<Meta title="ReactToggleFileTree" />
 
 <style>
   {`

stories/ToggleList.stories.mdx

@@ -0,0 +1,179 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="ReactToggleList" />
+
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 900;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 10px;
+    }
+
+    @media (min-width: 620px) {
+      .link-list {
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .link-item {
+      display: block;
+      padding: 20px 30px 20px 15px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+
+    .link-item img {
+      height: 40px;
+      width: 40px;
+      margin-right: 15px;
+      flex: none;
+    }
+
+    .link-item span {
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip2 {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #85eaf2;
+      color: #17b0bd;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+    .tip-wrapper a{
+      margin-left:5px;
+    }
+    .br {
+      width:10px;
+      height:30px;
+    }
+  `}
+</style>
+
+# react-toggle-list
+
+The `react-toggle-list` is can hide and show content inside.
+
+## Document
+
+---
+
+- [Installation](#installation)
+- [How to use](#how-to-use)
+- [Contribute](#contribute)
+
+## Installation
+
+---
+
+This library use `react-toggle-list`, so you need to install it.
+
+```bash
+npm install --save react-toggle-list
+```
+
+or
+
+```bash
+yarn add react-toggle-list
+```
+
+## How to use
+
+---
+
+```tsx
+import { ReactToggleList } from 'react-toggle-list';
+
+const subItems = ['string1', 'string2', 'string3'];
+
+<ReactToggleList title="example" subItems={subItems} />;
+```
+
+## Contribute
+
+---
+
+You can follow below to contribute `react-toggle-list`
+
+Clone the repository.
+
+```bash
+git clone https://github.com/in-ch/react-file-folder.git
+```

stories/ToggleList.stories.tsx

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { ReactToggleList } from '../packages/react-toggle-list/src';