Merge pull request #376 from lifeomic/csf3-d

Update D- Components to Storybook CSF3

src/components/DayPicker/DayPicker.stories.tsx

@@ -1,120 +1,120 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { DayPicker } from './DayPicker';
 
-export default {
+const meta: Meta<typeof DayPicker> = {
   title: 'Form Components/DayPicker',
   component: DayPicker,
-  argTypes: {},
-} as ComponentMeta<typeof DayPicker>;
-
-const Template: ComponentStory<typeof DayPicker> = (args) => (
-  <DayPicker {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Day Picker',
+  args: {
+    label: 'Day Picker',
+  },
+  decorators: [
+    (story) => <div style={{ width: '460px', height: '350px' }}>{story()}</div>,
+  ],
 };
+export default meta;
+type Story = StoryObj<typeof DayPicker>;
 
-export const ValueAndOnDayChange = Template.bind({});
-ValueAndOnDayChange.parameters = {
-  docs: {
-    description: {
-      story: `\`DayPicker\` is a controlled component, and uses the \`value\` and \`onDayChange\` props
-to facilitate input.
+export const Default: Story = {};
 
-If \`value\` is set to \`undefined\`, the provided \`placeholder\` message will be shown.
+export const ValueAndOnDayChange: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: `\`DayPicker\` is a controlled component, and uses the \`value\` and \`onDayChange\` props
+  to facilitate input.
 
-\`onDayChange\` is called in two scenarios:
+  If \`value\` is set to \`undefined\`, the provided \`placeholder\` message will be shown.
 
-- a date was selected in the calendar UI
-- if manual input is enabled (via \`parseDate\`), and the input is updated to a valid date string.`,
+  \`onDayChange\` is called in two scenarios:
+
+  - a date was selected in the calendar UI
+  - if manual input is enabled (via \`parseDate\`), and the input is updated to a valid date string.`,
+      },
     },
   },
-};
-ValueAndOnDayChange.args = {
-  label: 'Day Picker',
-  value: new Date(),
+  args: {
+    value: new Date(),
+  },
 };
 
-export const FormatDate = Template.bind({});
-FormatDate.parameters = {
-  docs: {
-    description: {
-      story: `Custom text formats can be supported via the \`formatDate\` prop`,
+export const FormatDate: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: `Custom text formats can be supported via the \`formatDate\` prop`,
+      },
     },
   },
-};
-FormatDate.args = {
-  label: 'Day Picker',
-  value: new Date(),
-  formatDate: (date: Date) => date.toISOString().slice(0, 10),
+  args: {
+    value: new Date(),
+    formatDate: (date: Date) => date.toISOString().slice(0, 10),
+  },
 };
 
-export const ManualInput = Template.bind({});
-ManualInput.parameters = {
-  docs: {
-    description: {
-      story: `By default, \`DayPicker\` does not allow for manual input into the text field.
+export const ManualInput: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: `By default, \`DayPicker\` does not allow for manual input into the text field.
 
-Providing the \`parseDate\` prop will enable this behavior.
+  Providing the \`parseDate\` prop will enable this behavior.
 
-You can use the \`onTextChange\` prop to visually handle malformed strings, e.g. via an error message.`,
+  You can use the \`onTextChange\` prop to visually handle malformed strings, e.g. via an error message.`,
+      },
     },
   },
-};
-ManualInput.args = {
-  label: 'Day Picker',
-  value: new Date(),
-  formatDate: (date: Date) => date.toISOString().slice(0, 10),
-  parseDate: (_text: string) => new Date(),
-  onTextChange: (_text: string) => {},
+  args: {
+    value: new Date(),
+    formatDate: (date: Date) => date.toISOString().slice(0, 10),
+    parseDate: (_text: string) => new Date(),
+    onTextChange: (_text: string) => {},
+  },
 };
 
-export const MinDate = Template.bind({});
-MinDate.args = {
-  label: 'Day Picker',
-  value: new Date(),
-  minDate: new Date(),
+export const MinDate: Story = {
+  args: {
+    value: new Date(),
+    minDate: new Date(),
+  },
 };
 
-export const MaxDate = Template.bind({});
-MaxDate.args = {
-  label: 'Day Picker',
-  value: new Date(),
-  maxDate: new Date(),
+export const MaxDate: Story = {
+  args: {
+    value: new Date(),
+    maxDate: new Date(),
+  },
 };
 
-export const DisableDay = Template.bind({});
-DisableDay.args = {
-  label: 'Day Picker',
-  value: new Date(),
-  disableDay: (date: Date) => date.getDate() % 2 === 0,
+export const DisableDay: Story = {
+  args: {
+    value: new Date(),
+    disableDay: (date: Date) => date.getDate() % 2 === 0,
+  },
 };
 
-export const AnchorPosition = Template.bind({});
-AnchorPosition.args = {
-  label: 'Day Picker',
-  value: new Date(),
-  anchorPosition: 'top-right',
+export const AnchorPosition: Story = {
+  args: {
+    value: new Date(),
+    anchorPosition: 'bottom-right',
+  },
 };
 
-export const InverseDark = Template.bind({});
-InverseDark.parameters = {
-  backgrounds: { default: 'dark' },
-};
-InverseDark.args = {
-  label: 'Day Picker',
-  color: 'inverse',
+export const InverseDark: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
 
-export const InverseBlue = Template.bind({});
-InverseBlue.parameters = {
-  backgrounds: { default: 'blue' },
-};
-InverseBlue.args = {
-  label: 'Day Picker',
-  color: 'inverse',
+export const InverseBlue: Story = {
+  parameters: {
+    backgrounds: { default: 'blue' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };

src/components/Divider/Divider.stories.tsx

@@ -1,33 +1,40 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { Divider } from './Divider';
 
-export default {
+const meta: Meta<typeof Divider> = {
   title: 'Layout/Divider',
   component: Divider,
-  argTypes: {},
-} as ComponentMeta<typeof Divider>;
-
-const Template: ComponentStory<typeof Divider> = (args) => (
-  <Divider {...args} />
-);
+};
+export default meta;
+type Story = StoryObj<typeof Divider>;
 
-export const Default = Template.bind({});
-Default.args = {};
+export const Default: Story = {};
 
-export const InverseDark = Template.bind({});
-InverseDark.parameters = {
-  backgrounds: { default: 'dark' },
-};
-InverseDark.args = {
-  color: 'inverse',
+export const InverseDark: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
 
-export const InverseBlue = Template.bind({});
-InverseBlue.parameters = {
-  backgrounds: { default: 'blue' },
+export const InverseBlue: Story = {
+  parameters: {
+    backgrounds: { default: 'blue' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
-InverseBlue.args = {
-  color: 'inverse',
+
+export const Direction: Story = {
+  args: {
+    direction: 'row',
+  },
+  decorators: [
+    (story: Function) => <div style={{ height: '50px' }}>{story()}</div>,
+  ],
 };

src/components/DotLoader/DotLoader.stories.tsx

@@ -1,17 +1,36 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, StoryFn, Meta } from '@storybook/react';
+import { makeStyles } from '../../styles';
 
 import { DotLoader } from './DotLoader';
 
-export default {
+const useStyles = makeStyles(() => ({
+  styledLoader: {
+    fill: 'black',
+  },
+}));
+
+const meta: Meta<typeof DotLoader> = {
   title: 'Components/DotLoader',
   component: DotLoader,
   argTypes: {},
-} as ComponentMeta<typeof DotLoader>;
+} as Meta<typeof DotLoader>;
+export default meta;
+type Story = StoryObj<typeof DotLoader>;
+
+const Template: StoryFn<typeof DotLoader> = (args) => {
+  const classes = useStyles({});
+  return <DotLoader {...args} dotStyle={classes.styledLoader} />;
+};
+
+export const Default: Story = {};
 
-const Template: ComponentStory<typeof DotLoader> = (args) => (
-  <DotLoader {...args} />
-);
+export const Small: Story = {
+  args: {
+    size: 1,
+  },
+};
 
-export const Default = Template.bind({});
-Default.args = {};
+export const Styled: Story = {
+  render: Template,
+};