feat: add sidebar

packages/sidebar/index.tsx

@@ -1 +1,17 @@
-import React from 'react';
+import InternalSidebar from '@/sidebar/sidebar';
+import SidebarItem from '@/sidebar/sidebar-item';
+
+export type { SidebarProps } from '@/sidebar/sidebar';
+export type { SidebarItemProps } from '@/sidebar/sidebar-item';
+
+type InternalSidebarType = typeof InternalSidebar;
+
+export interface SidebarInterface extends InternalSidebarType {
+  Item: typeof SidebarItem;
+}
+
+const Sidebar = InternalSidebar as SidebarInterface;
+
+Sidebar.Item = SidebarItem;
+
+export default Sidebar;

packages/sidebar/sidebar-item.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export interface SidebarItemProps {
+  key: string;
+  title: React.ReactNode;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const SidebarItem: React.FC<SidebarItemProps> = React.memo((props) => {
+  return props.children as React.ReactElement;
+});
+
+SidebarItem.displayName = 'SidebarItem';
+
+export default SidebarItem;

packages/sidebar/sidebar.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import cx from 'classnames';
+
+import SidebarItem from '@/sidebar/sidebar-item';
+
+export interface SidebarProps {
+  activeKey: string;
+  onChange?: (key: string) => void;
+  children?: React.ReactNode;
+}
+
+const classPrefix = `ygm-sidebar`;
+
+const Sidebar: React.FC<SidebarProps> = React.memo((props) => {
+  const [activeKey, setActiveKey] = React.useState<string>(props.activeKey);
+
+  const items: React.ReactElement<React.ComponentProps<typeof SidebarItem>>[] = [];
+
+  React.Children.forEach(props.children, (child) => {
+    if (!React.isValidElement(child)) return;
+    if (!child.key) return;
+    items.push(child);
+  });
+
+  const onItem = React.useCallback(() => {}, []);
+
+  return (
+    <div className={classPrefix}>
+      <div className={`${classPrefix}-items`}>
+        {items.map((item) => {
+          const active = item.key === activeKey;
+
+          return (
+            <div
+              className={cx(`${classPrefix}-item`, {
+                [`${classPrefix}-item-active`]: active,
+              })}
+              key={item.key}
+              onClick={onItem}
+            >
+              <div className={`${classPrefix}-item-title`}>{item.props.title}</div>
+            </div>
+          );
+        })}
+      </div>
+
+      {items.map((item) => (
+        <div key={item.key} className={`${classPrefix}-content`}>
+          {item.props.children}
+        </div>
+      ))}
+    </div>
+  );
+});
+
+Sidebar.displayName = 'Sidebar';
+
+export default Sidebar;

packages/sidebar/styles/index.scss

@@ -0,0 +1,10 @@
+@import '../../styles/variable.scss';
+
+$class-prefix-space: 'ygm-sidebar';
+
+.#{$class-prefix-tabs} {
+  --height: 100%;
+  --width: 105px;
+  --item-border-radius: 8px;
+  --background-color: ;
+}

packages/tabs/index.tsx

@@ -1,17 +1,17 @@
-import Tabs from '@/tabs/tabs';
+import InternalTabs from '@/tabs/tabs';
 import Tab from '@/tabs/tab';
 
 export type { TabsProps } from '@/tabs/tabs';
 export type { TabProps } from '@/tabs/tab';
 
-type TTabs = typeof Tabs;
+type InternalTabsType = typeof InternalTabs;
 
-export interface ITabs extends TTabs {
+export interface TabsInterface extends InternalTabsType {
   Tab: typeof Tab;
 }
 
-const MyTabs: ITabs = Tabs as ITabs;
+const Tabs = InternalTabs as TabsInterface;
 
-MyTabs.Tab = Tab;
+Tabs.Tab = Tab;
 
-export default MyTabs;
+export default Tabs;

packages/tabs/styles/index.scss

@@ -1,8 +1,8 @@
 @import '../../styles/variable.scss';
 
-$class-prefix-space: 'ygm-tabs';
+$class-prefix-tabs: 'ygm-tabs';
 
-.#{$class-prefix-space} {
+.#{$class-prefix-tabs} {
   position: relative;
   user-select: none;
 
@@ -19,18 +19,18 @@ $class-prefix-space: 'ygm-tabs';
     }
 
     &-card {
-      .#{$class-prefix-space}-tab-active {
+      .#{$class-prefix-tabs}-tab-active {
         background: $ygm-color-primary;
 
-        .#{$class-prefix-space}-tab-title {
+        .#{$class-prefix-tabs}-tab-title {
           color: $ygm-color-white;
         }
       }
     }
 
     &-card {
       background-color: $ygm-border-color;
-      .#{$class-prefix-space}-tab-title {
+      .#{$class-prefix-tabs}-tab-title {
         color: #838a96;
       }
     }
@@ -51,7 +51,7 @@ $class-prefix-space: 'ygm-tabs';
     }
 
     &-active {
-      .#{$class-prefix-space}-tab-title {
+      .#{$class-prefix-tabs}-tab-title {
         color: $ygm-color-primary;
       }
     }

packages/tabs/tab.tsx

@@ -8,7 +8,7 @@ export interface TabProps {
 }
 
 const Tab: React.FC<TabProps> = React.memo((props) => {
-  return <div>{props.children}</div>;
+  return props.children as React.ReactElement;
 });
 
 Tab.displayName = 'Tab';