fix: create our own Tabs component

Author: recklyss

package.json

@@ -26,8 +26,8 @@
   },
   "dependencies": {
     "dayjs": "^1.11.13",
-    "wired-elements": "^3.0.0-rc.6",
-    "react-icons": "^4.8.0"
+    "react-icons": "^4.8.0",
+    "wired-elements": "^3.0.0-rc.6"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.8.0",

src/components/Item/Item.tsx

@@ -7,6 +7,8 @@ interface ItemProps {
   children?: React.ReactNode;
   selected?: boolean;
   value?: string;
+  onClick?: () => void;
+  borderBottom?: string;
 }
 
 const WiredItemComponent = createComponent({
@@ -15,8 +17,9 @@ const WiredItemComponent = createComponent({
   elementClass: _WiredItem
 });
 
-const StyledItem = styled(WiredItemComponent)`
+const StyledItem = styled(WiredItemComponent)<{ borderBottom?: string }>`
   --wired-item-selected-color: #f90;
+  border-bottom: ${({ borderBottom }) => borderBottom || 'none'};
 
   opacity: 1;
 
@@ -25,8 +28,8 @@ const StyledItem = styled(WiredItemComponent)`
   }
 `;
 
-export const Item: React.FC<ItemProps> = ({ selected, children, value }) => (
-  <StyledItem selected={selected} value={value}>
+export const Item: React.FC<ItemProps> = ({ selected, children, value, onClick, borderBottom }) => (
+  <StyledItem selected={selected} value={value} onClick={onClick} borderBottom={borderBottom}>
     {children}
   </StyledItem>
 );

src/components/Tabs/Tabs.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Tabs } from './Tabs';
+import { Card } from '../Card/Card';
 
 const meta = {
   title: 'Components/Tabs',
@@ -12,5 +13,45 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: {}
+  args: {
+    selected: 'Tab 1',
+    elevation: 1,
+    width: '300px',
+    tabs: [
+      {
+        title: 'Tab 1',
+        content: (
+          <div>
+            <h3>Welcome to Tab 1</h3>
+            <p>This is the content for the first tab. It can contain any React elements.</p>
+          </div>
+        ),
+      },
+      {
+        title: 'Tab 2',
+        content: (
+          <div>
+            <h3>Tab 2 Content</h3>
+            <Card elevation={2}>
+              <p>You can even nest other wired components inside tabs!</p>
+            </Card>
+          </div>
+        ),
+      },
+      {
+        title: 'Tab 3',
+        content: (
+          <div>
+            <h3>Tab 3 Features</h3>
+            <ul>
+              <li>Fully customizable</li>
+              <li>Maintains wired look</li>
+              <li>Keyboard accessible</li>
+            </ul>
+          </div>
+        ),
+      },
+    ],
+    onChange: (selected) => console.log(`Selected tab: ${selected}`),
+  },
 };

src/components/Tabs/Tabs.tsx

@@ -1,21 +1,67 @@
 import * as React from 'react';
-import { createComponent } from '@lit/react';
-import { WiredTabs as _WiredTabs } from 'wired-elements/lib/wired-tabs.js';
+import styled from 'styled-components';
+import { Item } from '../Item/Item';
+import { Card } from '../Card/Card';
+
+interface Tab {
+  title: string;
+  content: React.ReactNode;
+}
 
 interface TabsProps {
   selected?: string;
   onChange?: (selected: string) => void;
+  tabs: Tab[];
+  elevation?: number;
+  width?: string;
 }
 
-export const Tabs = ({ selected, onChange }: TabsProps) => (
-  <TabsComponent 
-    selected={selected} 
-    onChange={(event) => onChange?.((event as unknown as CustomEvent).detail)} 
-  />
-);
-
-const TabsComponent = createComponent({
-  react: React,
-  tagName: 'wired-tabs',
-  elementClass: _WiredTabs
-});
+const TabList = styled.div<{ width?: string }>`
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+  width: ${({ width }) => width || '100%'};
+`;
+
+const TabContent = styled(Card)`
+  padding: 16px;
+  min-height: 200px;
+`;
+
+export const Tabs: React.FC<TabsProps> = ({ selected, onChange, tabs, elevation = 1, width }) => {
+  const [activeTab, setActiveTab] = React.useState(selected || tabs[0]?.title);
+
+  React.useEffect(() => {
+    if (selected) {
+      setActiveTab(selected);
+    }
+  }, [selected]);
+
+  const handleTabClick = (title: string) => {
+    setActiveTab(title);
+    onChange?.(title);
+  };
+
+  const activeContent = tabs.find(tab => tab.title === activeTab)?.content;
+
+  return (
+    <div>
+      <TabList width={width}>
+        {tabs.map((tab) => (
+          <Item
+            key={tab.title}
+            value={tab.title}
+            selected={tab.title === activeTab}
+            borderBottom={tab.title === activeTab ? '1px solid var(--wired-item-selected-color)' : 'none'}
+            onClick={() => handleTabClick(tab.title)}
+          >
+            {tab.title}
+          </Item>
+        ))}
+      </TabList>
+      <TabContent elevation={elevation === 0 ? undefined : elevation} width={width}>
+        {activeContent}
+      </TabContent>
+    </div>
+  );
+};