chore(tabs): refactor storybook

packages/tabs/.size-snapshot.json

@@ -19,21 +19,21 @@
     }
   },
   "index.cjs.js": {
-    "bundled": 5331,
-    "minified": 2979,
-    "gzipped": 1184
+    "bundled": 5425,
+    "minified": 3059,
+    "gzipped": 1197
   },
   "index.esm.js": {
-    "bundled": 4780,
-    "minified": 2529,
-    "gzipped": 1073,
+    "bundled": 4834,
+    "minified": 2575,
+    "gzipped": 1083,
     "treeshaked": {
       "rollup": {
-        "code": 147,
+        "code": 160,
         "import_statements": 101
       },
       "webpack": {
-        "code": 1250
+        "code": 1267
       }
     }
   }

packages/tabs/README.md

@@ -14,11 +14,14 @@ npm install @zendeskgarden/container-tabs
 
 ## Usage
 
-For live examples check out our [storybook](https://zendeskgarden.github.io/react-containers?path=/story/tabs-container--usetabs).
+This container implements the
+[tabs](https://www.w3.org/TR/wai-aria-practices/#tabpanel) design pattern and
+can be used to build a tabbed interface. Check out
+[storybook](https://zendeskgarden.github.io/react-containers) for live examples.
 
 ### useTabs
 
-```jsx static
+```jsx
 import { useTabs } from '@zendeskgarden/container-tabs';
 
 const tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
@@ -82,7 +85,7 @@ const Tabs = () => {
 
 ### TabsContainer
 
-```jsx static
+```jsx
 import { TabsContainer } from '@zendeskgarden/container-tabs';
 
 const Tabs = () => {

packages/tabs/demo/#readme.stories.mdx

@@ -0,0 +1,6 @@
+import { Meta, Description } from '@storybook/addon-docs';
+import README from '../README.md';
+
+<Meta title="Packages/Tabs/README" />
+
+<Description>{README}</Description>

packages/tabs/demo/stories/TabsStory.tsx

@@ -0,0 +1,118 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React, { createRef, RefObject } from 'react';
+import { Story } from '@storybook/react';
+import {
+  ITabsContainerProps,
+  IUseTabsProps,
+  IUseTabsReturnValue,
+  TabsContainer,
+  useTabs
+} from '@zendeskgarden/container-tabs';
+import classNames from 'classnames';
+
+interface IComponentProps extends IUseTabsReturnValue<string> {
+  tabs: RefObject<HTMLLIElement>[];
+  vertical: IUseTabsProps<any>['vertical'];
+  rtl: IUseTabsProps<any>['rtl'];
+}
+
+const Component = ({
+  tabs,
+  getTabListProps,
+  getTabPanelProps,
+  getTabProps,
+  selectedItem,
+  vertical,
+  rtl
+}: IComponentProps) => (
+  <div
+    className={classNames({
+      flex: vertical,
+      'flex-row-reverse': vertical && rtl
+    })}
+  >
+    <ul
+      {...getTabListProps()}
+      className={classNames('border-solid', 'border-transparent', 'flex', {
+        'flex-col': vertical,
+        'border-b-grey-600': !vertical,
+        'flex-row-reverse': !vertical && rtl,
+        'border-r-grey-600': vertical && !rtl,
+        'border-l-grey-600': vertical && rtl
+      })}
+    >
+      {tabs.map((tab, index) => (
+        <li
+          key={index}
+          {...getTabProps({ index, item: index.toString(), focusRef: tab })}
+          className={classNames(
+            'border-3',
+            'border-solid',
+            'border-transparent',
+            'cursor-pointer',
+            'px-2',
+            'py-1',
+            {
+              'border-b-blue-600': selectedItem === index.toString() && !vertical,
+              'border-r-blue-600': selectedItem === index.toString() && vertical && !rtl,
+              'border-l-blue-600': selectedItem === index.toString() && vertical && rtl
+            }
+          )}
+        >{`Tab ${index + 1}`}</li>
+      ))}
+    </ul>
+    {tabs.map((_, index) => (
+      <div
+        key={index}
+        {...getTabPanelProps({ index, item: index.toString() })}
+        className="p-2"
+      >{`Panel ${index + 1}`}</div>
+    ))}
+  </div>
+);
+
+interface IProps extends IUseTabsProps<string> {
+  tabRefs: RefObject<HTMLLIElement>[];
+}
+
+const Container = ({ tabRefs, ...props }: IProps) => (
+  <TabsContainer {...props}>
+    {containerProps => (
+      <Component tabs={tabRefs} vertical={props.vertical} rtl={props.rtl} {...containerProps} />
+    )}
+  </TabsContainer>
+);
+
+const Hook = ({ tabRefs, ...props }: IProps) => {
+  const hookProps = useTabs(props);
+
+  return <Component tabs={tabRefs} vertical={props.vertical} rtl={props.rtl} {...hookProps} />;
+};
+
+interface IArgs extends ITabsContainerProps {
+  as: 'hook' | 'container';
+  tabs: number;
+}
+
+export const TabsStory: Story<IArgs> = ({ as, tabs, ...props }: IArgs) => {
+  const Tabs = () => {
+    const tabRefs = Array.from({ length: tabs }, () => createRef<HTMLLIElement>());
+
+    switch (as) {
+      case 'container':
+        return <Container tabRefs={tabRefs} {...props} />;
+
+      case 'hook':
+      default:
+        return <Hook tabRefs={tabRefs} {...props} />;
+    }
+  };
+
+  return <Tabs />;
+};

packages/tabs/demo/tabs.stories.mdx

@@ -0,0 +1,55 @@
+import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { useArgs } from '@storybook/client-api';
+import { TabsContainer } from '@zendeskgarden/container-tabs';
+import { TabsStory } from './stories/TabsStory';
+
+<Meta
+  title="Packages/Tabs"
+  component={TabsContainer}
+  args={{
+    as: 'hook',
+    tabs: 3
+  }}
+  argTypes={{
+    as: { options: ['container', 'hook'], control: 'radio', table: { category: 'Story' } },
+    tabs: { control: { type: 'range', min: 1, max: 5 }, table: { category: 'Story' } }
+  }}
+/>
+
+# API
+
+<ArgsTable />
+
+# Demo
+
+## Uncontrolled
+
+<Canvas>
+  <Story
+    name="Uncontrolled"
+    args={{
+      defaultSelectedIndex: 0
+    }}
+    argTypes={{ selectedItem: { control: false } }}
+  >
+    {args => <TabsStory {...args} />}
+  </Story>
+</Canvas>
+
+## Controlled
+
+<Canvas>
+  <Story
+    name="Controlled"
+    args={{
+      selectedItem: '0'
+    }}
+    argTypes={{ defaultSelectedIndex: { control: false } }}
+  >
+    {args => {
+      const updateArgs = useArgs()[1];
+      const handleSelect = selectedItem => updateArgs({ selectedItem });
+      return <TabsStory {...args} onSelect={handleSelect} />;
+    }}
+  </Story>
+</Canvas>

packages/tabs/src/TabsContainer.tsx

@@ -29,7 +29,9 @@ TabsContainer.propTypes = {
   children: PropTypes.func,
   render: PropTypes.func,
   vertical: PropTypes.bool,
+  rtl: PropTypes.bool,
   idPrefix: PropTypes.string,
   defaultSelectedIndex: PropTypes.number,
+  selectedItem: PropTypes.any,
   onSelect: PropTypes.func
 };

packages/tabs/src/index.ts

@@ -6,7 +6,9 @@
  */
 
 /* Hooks */
-export { useTabs, IUseTabsProps, IUseTabsReturnValue } from './useTabs';
+export { useTabs } from './useTabs';
+export type { IUseTabsProps, IUseTabsReturnValue } from './useTabs';
 
 /* Render-props */
-export { TabsContainer, ITabsContainerProps } from './TabsContainer';
+export { TabsContainer } from './TabsContainer';
+export type { ITabsContainerProps } from './TabsContainer';