feat(components): add tabs component (#717)

.changeset/olive-cups-relax.md

@@ -0,0 +1,6 @@
+---
+"@bigcommerce/components": minor
+"@bigcommerce/docs": minor
+---
+
+Add tabs component

apps/docs/stories/tabs.stories.tsx

@@ -0,0 +1,33 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@bigcommerce/components/tabs';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Tabs> = {
+  component: Tabs,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+const mockedTabs = ['orders', 'addresses', 'settings'];
+
+export const BasicExample: Story = {
+  args: {
+    children: 'Tab Content goes here..',
+  },
+  render: ({ children }) => (
+    <Tabs activationMode="manual" defaultValue="settings">
+      <TabsList aria-label="Account tabs">
+        {mockedTabs.map((tab) => (
+          <TabsTrigger key={tab} value={tab}>
+            {tab}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      <TabsContent value="orders">{children}</TabsContent>
+      <TabsContent value="addresses">{children}</TabsContent>
+      <TabsContent value="settings">{children}</TabsContent>
+    </Tabs>
+  ),
+};

packages/components/package.json

@@ -27,6 +27,7 @@
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "embla-carousel-react": "8.0.0-rc15",

packages/components/src/components/tabs/index.ts

@@ -0,0 +1,3 @@
+'use client';
+
+export * from './tabs';

packages/components/src/components/tabs/tabs.tsx

@@ -0,0 +1,46 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';
+
+import { cn } from '~/lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = forwardRef<
+  ElementRef<typeof TabsPrimitive.List>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    className={cn('mb-8 flex list-none items-start overflow-x-auto text-base', className)}
+    ref={ref}
+    {...props}
+  />
+));
+
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = forwardRef<
+  ElementRef<typeof TabsPrimitive.Trigger>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    className={cn(
+      'px-4 pb-2 data-[state=active]:border-b-4 data-[state=active]:border-primary data-[state=active]:text-primary',
+      className,
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = forwardRef<
+  ElementRef<typeof TabsPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content className={cn('', className)} ref={ref} {...props} />
+));
+
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };