Merge pull request #396 from lifeomic/csf3-t1

Update first half of T- Components to Storybook CSF3
lifeomic · Sep 5, 2023 · 8b574c0 · 8b574c0
2 parents f3bc839 + d38a64c
commit 8b574c0
Show file tree

Hide file tree

Showing 3 changed files with 165 additions and 102 deletions.
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
@@ -1,33 +1,101 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, StoryFn, Meta } from '@storybook/react';
 
 import { Tabs } from './Tabs';
 import { TabList } from './TabList';
 import { Tab } from './Tab';
 import { TabPanel } from './TabPanel';
 
-export default {
-  title: 'Components/Tabs',
+const meta: Meta<typeof Tabs> = {
   component: Tabs,
-  argTypes: {},
-  subcomponents: { Tab, TabList, TabPanel },
-} as ComponentMeta<typeof Tabs>;
+};
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <TabList aria-label="My Tabs">
+          <Tab stopId="tab1">Tab 1 Pill</Tab>
+          <Tab stopId="tab2">Tab 2 Pill</Tab>
+          <Tab stopId="tab3" disabled>
+            Tab 3 Pill
+          </Tab>
+        </TabList>
+        <TabPanel stopId="tab1">Tab 1 selected</TabPanel>
+        <TabPanel stopId="tab2">Tab 2 selected</TabPanel>
+      </>
+    ),
+  },
+};
 
-const Template: ComponentStory<typeof Tabs> = (args) => <Tabs {...args} />;
+const TemplateManual: StoryFn<typeof Tabs> = (args) => {
+  const [activeTab, setActiveTab] = React.useState('tab1');
+  const [content, setContent] = React.useState(
+    'No side effect has been called yet...'
+  );
 
-export const Default = Template.bind({});
-Default.args = {
-  children: (
+  return (
     <>
-      <TabList aria-label="My Tabs">
-        <Tab stopId="tab1">Tab 1 Pill</Tab>
-        <Tab stopId="tab2">Tab 2 Pill</Tab>
-        <Tab stopId="tab3" disabled>
-          Tab 3 Pill
-        </Tab>
-      </TabList>
-      <TabPanel>Tab 2 selected</TabPanel>
-      <TabPanel>Tab 1 selected</TabPanel>
+      <Tabs {...args} selectedTabId={activeTab}>
+        <TabList aria-label="My Tabs">
+          <Tab
+            stopId="tab1"
+            onClick={() => {
+              setActiveTab('tab1');
+              setContent('Some side effect from tab 1');
+            }}
+          >
+            Tab 1 Pill
+          </Tab>
+          <Tab
+            stopId="tab2"
+            onClick={() => {
+              setActiveTab('tab2');
+              setContent('Some side effect from tab 2');
+            }}
+          >
+            Tab 2 Pill
+          </Tab>
+          <Tab
+            stopId="tab3"
+            onClick={() => {
+              setActiveTab('tab3');
+              setContent('Some side effect from tab 3');
+            }}
+          >
+            Tab 3 Pill
+          </Tab>
+        </TabList>
+        <TabPanel stopId="tab1">
+          <p>Tab 1 content</p>
+        </TabPanel>
+        <TabPanel stopId="tab2">
+          <p>Tab 2 content</p>
+        </TabPanel>
+        <TabPanel stopId="tab3">
+          <p>Tab 3 content</p>
+        </TabPanel>
+      </Tabs>
+      <div style={{ backgroundColor: 'whitesmoke', padding: '1rem' }}>
+        <p>{content}</p>
+      </div>
     </>
-  ),
+  );
+};
+
+export const ManualControl: Story = {
+  render: TemplateManual,
+  args: {
+    manualControl: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Manual control allows you to run side effects by handling tab change manually with an onClick() on each tab',
+      },
+    },
+  },
 };
diff --git a/src/components/Text/Text.stories.tsx b/src/components/Text/Text.stories.tsx
@@ -1,35 +1,32 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { Text } from './Text';
 
-export default {
-  title: 'Components/Text',
+const meta: Meta<typeof Text> = {
   component: Text,
-  argTypes: {},
-} as ComponentMeta<typeof Text>;
-
-const Template: ComponentStory<typeof Text> = (args) => <Text {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  children: 'Text',
+  args: {
+    children: 'Text',
+  },
 };
+export default meta;
+type Story = StoryObj<typeof Text>;
 
-export const InverseDark = Template.bind({});
-InverseDark.parameters = {
-  backgrounds: { default: 'dark' },
-};
-InverseDark.args = {
-  children: 'Text',
-  color: 'inverse',
-};
+export const Default: Story = {};
 
-export const InverseBlue = Template.bind({});
-InverseBlue.parameters = {
-  backgrounds: { default: 'blue' },
+export const InverseDark: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
-InverseBlue.args = {
-  children: 'Text',
-  color: 'inverse',
+
+export const InverseBlue: Story = {
+  parameters: {
+    backgrounds: { default: 'blue' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
diff --git a/src/components/TextArea/TextArea.stories.tsx b/src/components/TextArea/TextArea.stories.tsx
@@ -1,81 +1,79 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { TextArea } from './TextArea';
 import { HelpCircle } from '@lifeomic/chromicons';
 
-export default {
+const meta: Meta<typeof TextArea> = {
   title: 'Form Components/TextArea',
   component: TextArea,
-  argTypes: {},
-} as ComponentMeta<typeof TextArea>;
-
-const Template: ComponentStory<typeof TextArea> = (args) => (
-  <TextArea {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'TextArea',
+  args: {
+    label: 'TextArea',
+  },
 };
+export default meta;
+type Story = StoryObj<typeof TextArea>;
 
-export const NoLabel = Template.bind({});
-NoLabel.args = {
-  'aria-label': 'TextArea',
-};
+export const Default: Story = {};
 
-export const SecondaryLabel = Template.bind({});
-SecondaryLabel.args = {
-  label: 'TextArea',
-  secondaryLabel: 'Secondary Label',
+export const NoLabel: Story = {
+  args: {
+    label: '',
+    'aria-label': 'TextArea',
+  },
 };
 
-export const HelpMessage = Template.bind({});
-HelpMessage.args = {
-  label: 'TextArea',
-  helpMessage: 'Help Message',
+export const SecondaryLabel: Story = {
+  args: {
+    secondaryLabel: 'Secondary Label',
+  },
 };
 
-export const Tooltip = Template.bind({});
-Tooltip.args = {
-  label: 'TextArea',
-  icon: HelpCircle,
-  tooltipMessage: 'Here is descriptive text',
+export const HelpMessage: Story = {
+  args: {
+    helpMessage: 'Help Message',
+  },
 };
 
-export const Required = Template.bind({});
-Required.args = {
-  label: 'TextArea',
-  showRequiredLabel: true,
+export const Tooltip: Story = {
+  args: {
+    icon: HelpCircle,
+    tooltipMessage: 'Here is descriptive text',
+  },
 };
 
-export const Error = Template.bind({});
-Error.args = {
-  label: 'TextArea',
-  hasError: true,
-  errorMessage: 'This is required',
+export const Required: Story = {
+  args: {
+    showRequiredLabel: true,
+  },
 };
 
-export const ReadOnly = Template.bind({});
-ReadOnly.args = {
-  label: 'TextArea',
-  readOnly: true,
+export const Error: Story = {
+  args: {
+    hasError: true,
+    errorMessage: 'This is required',
+  },
 };
 
-export const InverseDark = Template.bind({});
-InverseDark.parameters = {
-  backgrounds: { default: 'dark' },
-};
-InverseDark.args = {
-  label: 'TextArea',
-  color: 'inverse',
+export const ReadOnly: Story = {
+  args: {
+    readOnly: true,
+  },
 };
 
-export const InverseBlue = Template.bind({});
-InverseBlue.parameters = {
-  backgrounds: { default: 'blue' },
+export const InverseDark: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
-InverseBlue.args = {
-  label: 'TextArea',
-  color: 'inverse',
+
+export const InverseBlue: Story = {
+  parameters: {
+    backgrounds: { default: 'blue' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };