docs: aside,tabs

Author: Onlylonger

docs/components/aside/index.mdx

@@ -0,0 +1,33 @@
+# Aside
+
+常用于侧边栏导航
+
+## Playground
+
+<code src="./playground.tsx" />
+
+## API
+
+### Aside
+
+| Property       | Description              | Type                                                                                | Default Value |
+| -------------- | ------------------------ | ----------------------------------------------------------------------------------- | ------------- |
+| defaultList`*` | 侧边栏菜单列表           | `AsideListItem[]`                                                                   | -             |
+| activeKey`*`   | 选中的菜单               | `string`                                                                            | -             |
+| className      | 类名                     | `string`                                                                            | -             |
+| title          | 顶部模块                 | `ReactNode`                                                                         | -             |
+| footer         | 底部模块                 | `ReactNode`                                                                         | -             |
+| onNav          | 点击菜单后触发的回掉函数 | `(value: { title: string;url?: string; icon?: LucideIcon; key?: string; }) => void` | -             |
+
+### AsideProvider
+
+无输入参数
+
+### useAside
+
+#### 输出
+
+| Property | Description    | Type         | Default Value |
+| -------- | -------------- | ------------ | ------------- |
+| open     | 是否打开面板   | `boolean`    | `false`       |
+| toggle   | 折叠当前侧边栏 | `() => void` | -             |

docs/components/aside/playground.tsx

@@ -0,0 +1,83 @@
+import { AsideProvider, Aside, AsidebarTrigger, Button } from '@shilong/react'
+import { Calendar, Group, Home, KeyRound, Search, User } from 'lucide-react'
+import { useState } from 'react'
+
+const items = [
+  {
+    groupTitle: 'User',
+    menusList: [
+      {
+        title: 'Home',
+        url: '/',
+        icon: Home,
+        key: 'home',
+      },
+      {
+        title: 'User',
+        url: '/user',
+        icon: User,
+        key: 'user',
+      },
+      {
+        title: 'Group',
+        icon: Group,
+        children: [
+          {
+            title: 'Item1',
+            url: '/item1',
+            icon: Calendar,
+            key: 'item1',
+          },
+          {
+            title: 'Item2',
+            url: '/item2',
+            icon: Search,
+            key: 'item2',
+          },
+        ],
+      },
+      {
+        title: 'Role',
+        url: '/role',
+        icon: KeyRound,
+        key: 'role',
+      },
+    ],
+  },
+]
+
+function App() {
+  const [routeKey, setRouteKey] = useState('item1')
+
+  return (
+    <AsideProvider>
+      <div
+        style={{
+          display: 'flex',
+        }}
+      >
+        <Aside
+          activeKey={routeKey}
+          defaultList={items}
+          onNav={(v) => {
+            v.key && setRouteKey(v.key)
+          }}
+        />
+        <div>
+          <div>
+            <AsidebarTrigger
+              render={(val) => (
+                <Button variant="outline" onClick={() => val.toggle()}>
+                  Toggle
+                </Button>
+              )}
+            />
+          </div>
+          <div>main</div>
+        </div>
+      </div>
+    </AsideProvider>
+  )
+}
+
+export default App

docs/components/tabs/index.mdx

@@ -0,0 +1,18 @@
+# Tabs
+
+常用于选择某一个标签值
+
+## Playground
+
+<code src="./playground.tsx" />
+
+## API
+
+### Tabs
+
+| Property | Description            | Type                                                      | Default Value |
+| -------- | ---------------------- | --------------------------------------------------------- | ------------- |
+| list`*`  | 标签列表               | `{ label: string; value: string; disabled?: boolean; }[]` | -             |
+| value    | 选中的标签值           | `string`                                                  | -             |
+| onChange | 选中或者关闭的回掉函数 | `(action: 'select' \| 'close', value: Item) => void`      | -             |
+| closable | 是否可以关闭标签       | `boolean`                                                 | -             |

docs/components/tabs/playground.tsx

@@ -0,0 +1,23 @@
+import { Tabs } from '@shilong/react'
+
+function App() {
+  return (
+    <Tabs
+      list={[
+        {
+          label: '1111',
+          value: '222',
+        },
+        {
+          label: '222',
+          value: '33',
+        },
+      ]}
+      onChange={(_, v) => {
+        console.log(v)
+      }}
+    />
+  )
+}
+
+export default App

playground/src/App.tsx

@@ -1,6 +1,7 @@
 import { Calendar, Group, Home, KeyRound, Search, User } from 'lucide-react'
 import { Aside, AsidebarTrigger, useAside } from '../../src/components/aside'
 import { AsideProvider } from '../../src/components/aside/context'
+import { Tabs } from '../../src/components/tabs/Tabs'
 
 import { useState } from 'react'
 
@@ -70,6 +71,25 @@ export default function App() {
               render={(val) => <span onClick={() => val.toggle()}>nihao</span>}
             />
           </div>
+          <div>
+            <Tabs
+              list={[
+                {
+                  label: '1111',
+                  value: '222',
+                },
+                {
+                  label: '222',
+                  value: '33',
+                  // disabled: true,
+                },
+              ]}
+              closable
+              onChange={(a) => {
+                console.log(a)
+              }}
+            />
+          </div>
         </div>
       </AsideProvider>
     </div>

rspress.config.ts

@@ -47,6 +47,14 @@ const componentsList = [
     text: 'Skeleton',
     link: '/components/skeleton',
   },
+  {
+    text: 'Aside',
+    link: '/components/aside',
+  },
+  {
+    text: 'Tabs',
+    link: '/components/tabs',
+  },
   // {
   //   text: 'DataTable',
   //   link: '/components/data-table',

src/components/button/ResetButton.tsx

@@ -0,0 +1,9 @@
+import { clsx } from '@shilong/utils'
+import type { ComponentProps } from 'react'
+import { base } from './styles.css'
+
+export const ResetButton = (props: ComponentProps<'button'>) => {
+  const { className, ...reset } = props
+
+  return <button className={clsx(base, className)} {...reset} />
+}

src/components/index.ts

@@ -0,0 +1,46 @@
+import { clsx } from '@shilong/utils'
+import { ResetButton } from '../button/ResetButton'
+import * as styles from './styles.css'
+import { useState } from 'react'
+import { X } from 'lucide-react'
+import type { TabsProps } from './type'
+
+const Tabs = (props: TabsProps) => {
+  const { list, value, onChange, closable = false } = props
+
+  const [ownValue, setOwnValue] = useState(list[0].value)
+
+  const finalValue = value ?? ownValue
+
+  return (
+    <div className={styles.container}>
+      {list.map((tab) => (
+        <ResetButton
+          key={tab.value}
+          className={clsx(
+            styles.button,
+            finalValue === tab.value && styles.buttonActive,
+          )}
+          disabled={tab.disabled}
+          onClick={() => {
+            setOwnValue(tab.value)
+            onChange?.('select', tab)
+          }}
+        >
+          {tab.label}
+          {closable && (
+            <X
+              className={styles.icon}
+              onClick={(e) => {
+                e.stopPropagation()
+                onChange?.('close', tab)
+              }}
+            />
+          )}
+        </ResetButton>
+      ))}
+    </div>
+  )
+}
+
+export { Tabs }

src/components/tabs/Tabs.tsx

@@ -0,0 +1 @@
+export * from './Tabs'