feat: controlled embedded tab (#258)

Author: snqb

src/components/embedded-tabs/EmbeddedTabs.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { useState } from 'react';
 import { Box, BoxProps } from 'rebass';
 import * as S from './styles';
 import Tab, { Props as EmbeddedTabItem } from './Tab';
@@ -9,13 +9,7 @@ export interface Props extends Omit<BoxProps, 'css'> {
   onTabChange?: (tabIndex: number) => void;
 }
 
-const EmbeddedTabs: FC<Props> = ({
-  tabs,
-  onTabChange,
-  initialTab = 0,
-  sx = {},
-  ...boxProps
-}: Props) => {
+const EmbeddedTabs = ({ onTabChange, initialTab = 0, ...restProps }: Props) => {
   const [activeIndex, setActiveIndex] = useState(initialTab);
 
   const handleTabClick = (newIndex: number) => {
@@ -26,13 +20,41 @@ const EmbeddedTabs: FC<Props> = ({
     }
   };
 
+  return (
+    <Controlled
+      activeTab={activeIndex}
+      onTabChange={handleTabClick}
+      {...restProps}
+    />
+  );
+};
+
+export default EmbeddedTabs;
+
+export interface ControlledProps extends Omit<Props, 'initialTab'> {
+  activeTab: number;
+}
+
+export const Controlled = ({
+  tabs,
+  onTabChange,
+  sx = {},
+  activeTab,
+  ...boxProps
+}: ControlledProps) => {
+  const handleTabClick = (newIndex: number) => {
+    if (onTabChange) {
+      onTabChange(newIndex);
+    }
+  };
+
   return (
     <Box sx={{ ...S.tabsList, ...sx }} {...boxProps}>
       {tabs.map(({ title, onClick: onTabClick, ...tabProps }, index) => (
         <Tab
           key={title}
           title={title}
-          active={index === activeIndex}
+          active={index === activeTab}
           onClick={() => {
             if (onTabClick) {
               onTabClick();
@@ -48,5 +70,3 @@ const EmbeddedTabs: FC<Props> = ({
     </Box>
   );
 };
-
-export default EmbeddedTabs;

src/components/embedded-tabs/embedded-tabs.stories.tsx

@@ -1,30 +1,20 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import React, { useState } from 'react';
-import { Box } from 'rebass';
+import { Box, Flex } from 'rebass';
 import Labeling from '../typography/labeling';
-import EmbeddedTabs, { Props } from './EmbeddedTabs';
+import EmbeddedTabs, {
+  EmbeddedTabsProps,
+  ControlledEmbeddedTabsProps,
+} from '.';
+import Button from '../button';
+import Subtitle from '../typography/subtitle';
 
 export default {
   title: 'Quartz/EmbeddedTabs',
   component: EmbeddedTabs,
+  subcomponents: { Controlled: EmbeddedTabs.Controlled },
 } as Meta;
 
-const argTypes = {
-  tabs: {
-    required: true,
-    description: 'A list of tab items.',
-  },
-  initialTab: {
-    required: false,
-    description: 'The initial tab to be selected.',
-    default: 0,
-  },
-  onTabChange: {
-    description: 'Callback to be called when a tab is selected.',
-    required: false
-  },
-};
-
 const tabs = [
   {
     title: 'Validation Reports',
@@ -41,7 +31,7 @@ const tabs = [
   },
 ];
 
-const Template: Story<Props> = (props) => {
+export const Uncontrolled: Story<EmbeddedTabsProps> = (props) => {
   const [activeTab, setActiveTab] = useState(props.initialTab ?? 0);
 
   return (
@@ -54,10 +44,51 @@ const Template: Story<Props> = (props) => {
   );
 };
 
-export const Default = Template.bind({});
+export const Controlled: Story<ControlledEmbeddedTabsProps> = (props) => {
+  const [activeTab, setActiveTab] = useState(0);
+
+  return (
+    <Box width="700px">
+      <EmbeddedTabs.Controlled
+        {...props}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+      />
+      <Box mt={3}>
+        <Labeling bold>
+          This component is controlled. Active tab: {tabs[activeTab].title}{' '}
+        </Labeling>
+        <Flex mt={2} sx={{ gap: '10px' }}>
+          <Button onClick={() => setActiveTab(2)}>Jump to Statistics</Button>
+          <Button onClick={() => setActiveTab(1)}>Jump to Results</Button>
+        </Flex>
+      </Box>
+    </Box>
+  );
+};
 
-Default.args = {
+const args = {
   tabs,
 };
 
-Default.argTypes = argTypes;
+const argTypes = {
+  tabs: {
+    required: true,
+    description: 'A list of tab items.',
+  },
+  initialTab: {
+    required: false,
+    description: 'The initial tab to be selected.',
+    default: 0,
+  },
+  onTabChange: {
+    description: 'Callback to be called when a tab is selected.',
+    required: false,
+  },
+};
+
+Uncontrolled.args = args;
+Uncontrolled.argTypes = argTypes;
+
+Controlled.args = args;
+Controlled.argTypes = argTypes;

src/components/embedded-tabs/index.ts

@@ -1,3 +1,14 @@
-export { default } from './EmbeddedTabs';
-export type { Props as EmbeddedTabsProps } from './EmbeddedTabs';
 export type { Props as EmbeddedTabsItem } from './Tab';
+
+import EmbeddedTabs, { Controlled } from './EmbeddedTabs';
+
+type IEmbeddedTabs = typeof EmbeddedTabs;
+
+interface EmbeddedTabsComponent extends IEmbeddedTabs {
+  Controlled: typeof Controlled;
+}
+
+(EmbeddedTabs as EmbeddedTabsComponent).Controlled = Controlled;
+
+export type { Props as EmbeddedTabsProps, ControlledProps as ControlledEmbeddedTabsProps } from './EmbeddedTabs';
+export default EmbeddedTabs as EmbeddedTabsComponent;