fix(stories): update stories to version 7 format

oaknational · May 23, 2023 · 737509a · 737509a
1 parent 92568fa
commit 737509a
Show file tree

Hide file tree

Showing 11 changed files with 163 additions and 148 deletions.
diff --git a/src/components/AppHeader/AppHeader.stories.tsx b/src/components/AppHeader/AppHeader.stories.tsx
@@ -1,23 +1,25 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import AnalyticsDecorator from "../../storybook-decorators/AnalyticsDecorator";
 import { MenuProvider } from "../../context/Menu";
 
 import Component from "./AppHeader";
 
-export default {
+const meta: Meta<typeof Component> = {
   title: "Headers & Footers/App Header",
   decorators: [AnalyticsDecorator],
   component: Component,
   argTypes: {},
-} as ComponentMeta<typeof Component>;
+};
 
-const Template: ComponentStory<typeof Component> = (args) => (
-  <MenuProvider>
-    <Component {...args} />
-  </MenuProvider>
-);
+export default meta;
+type Story = StoryObj<typeof Component>;
 
-export const AppHeader = Template.bind({});
-AppHeader.args = {};
+export const Flex: Story = {
+  args: {},
+  render: (args) => (
+    <MenuProvider>
+      <Component {...args} />
+    </MenuProvider>
+  ),
+};
diff --git a/src/components/BioCardList/BioCardList.stories.tsx b/src/components/BioCardList/BioCardList.stories.tsx
@@ -1,33 +1,34 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { OverlayProvider } from "react-aria";
 
 import Component from ".";
 
-export default {
+const meta: Meta<typeof Component> = {
   title: "Lists/BioCardList",
   component: Component,
-} as ComponentMeta<typeof Component>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Component>;
 
-const Template: ComponentStory<typeof Component> = (args) => {
-  return (
+export const BioCardList: Story = {
+  args: {
+    bios: [
+      "Jack",
+      "Joe",
+      "Craig",
+      "Verity",
+      "Mitch",
+      "Tomas",
+      "Jim",
+      "Ross",
+      "Ian",
+      "Matt",
+    ].map((name, i) => ({ name, id: String(i), role: "Worker" })),
+  },
+  render: (args) => (
     <OverlayProvider>
       <Component {...args} />
     </OverlayProvider>
-  );
-};
-
-export const BioCardList = Template.bind({});
-BioCardList.args = {
-  bios: [
-    "Jack",
-    "Joe",
-    "Craig",
-    "Verity",
-    "Mitch",
-    "Tomas",
-    "Jim",
-    "Ross",
-    "Ian",
-    "Matt",
-  ].map((name, i) => ({ name, id: String(i), role: "Worker" })),
+  ),
 };
diff --git a/src/components/DownloadComponents/DownloadCard/DownloadCard.stories.tsx b/src/components/DownloadComponents/DownloadCard/DownloadCard.stories.tsx
@@ -1,15 +1,13 @@
-import React, { useState } from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import React from "react";
 
 import Component from ".";
 
-export default {
+const meta: Meta<typeof Component> = {
   title: "Download Components/Download Card",
   component: Component,
   argTypes: {
-    title: {
-      defaultValue: "Click me",
-    },
     id: {
       defaultValue: "1",
     },
@@ -23,16 +21,18 @@ export default {
       defaultValue: "presentation",
     },
   },
-} as ComponentMeta<typeof Component>;
-
-const Template: ComponentStory<typeof Component> = (args) => {
-  const [value, setValue] = useState(false);
-  return (
-    <Component {...args} checked={value} onChange={() => setValue(!value)} />
-  );
 };
 
-export const Checkbox = Template.bind({});
-Checkbox.args = {
-  extension: "pdf",
+export default meta;
+type Story = StoryObj<typeof Component>;
+
+export const Checkbox: Story = {
+  args: {
+    extension: "pdf",
+    checked: false,
+    onChange: action("changed"),
+  },
+  render: (args) => {
+    return <Component {...args} />;
+  },
 };
diff --git a/src/components/ExpandingContainer/ExpandingContainer.stories.tsx b/src/components/ExpandingContainer/ExpandingContainer.stories.tsx
@@ -1,11 +1,12 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import AnalyticsDecorator from "../../storybook-decorators/AnalyticsDecorator";
 import Card from "../Card";
 
 import Component from ".";
 
-export default {
+
+const meta: Meta<typeof Component> = {
   title: "Foundations/ExpandingContainer",
   component: Component,
   decorators: [AnalyticsDecorator, (Story) => <Story />],
@@ -22,20 +23,20 @@ export default {
     // projetable:{defaultValue, true},
     // downloadable:{defaultValue, true},
   },
-} as ComponentMeta<typeof Component>;
-
-const Template: ComponentStory<typeof Component> = (args) => (
-  <Component {...args} />
-);
+};
 
-export const ExpandingContainer = Template.bind({});
+export default meta;
+type Story = StoryObj<typeof Component>;
 
-ExpandingContainer.args = {
-  external: true,
-  projectable: true,
-  downloadable: true,
-  title: "Video",
-  programmeSlug: "secondary-ks3-maths",
-  unitSlug: "unit",
-  lessonSlug: "slug-slug-slug",
+export const ExpandingContainer: Story = {
+  args: {
+    external: true,
+    projectable: true,
+    downloadable: true,
+    title: "Video",
+    programmeSlug: "secondary-ks3-maths",
+    unitSlug: "unit",
+    lessonSlug: "slug-slug-slug",
+  },
+  render: (args) => <Component {...args} />,
 };
diff --git a/src/components/Filters/CategoryFilterList/CategoryFilterList.stories.tsx b/src/components/Filters/CategoryFilterList/CategoryFilterList.stories.tsx
@@ -1,47 +1,48 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
-import { BlogListingLinkProps } from "../../../common-lib/urls";
 import AnalyticsDecorator from "../../../storybook-decorators/AnalyticsDecorator";
 
-import useCategoryFilterList from "./useCategoryFilterList";
-
 import Component from ".";
 
-export default {
+const meta: Meta<typeof Component> = {
   title: "Filters/Category Filter List",
   decorators: [AnalyticsDecorator],
   component: Component,
-} as ComponentMeta<typeof Component>;
-
-const Template: ComponentStory<typeof Component> = (args) => {
-  const props = useCategoryFilterList<BlogListingLinkProps>({
-    selectedKey: "oak-updates",
-    getKey: (link) => link.category,
-  });
-  // Can't get storybook types to play nicely with generic component
-  // eslint-disable-next-line
-  // @ts-ignore
-  return <Component<BlogListingLinkProps> {...args} {...props} />;
 };
 
-export const CategoryFilterList = Template.bind({});
-CategoryFilterList.args = {
-  categories: [
-    {
-      linkProps: { page: "blog-index", category: "oak-updates" },
-      label: "Oak updates",
-    },
-    {
-      linkProps: { page: "blog-index", category: "lesson-planning" },
-      label: "Lesson planning",
-    },
-    {
-      linkProps: { page: "blog-index", category: "teaching-learning" },
-      label: "Teaching and learning",
-    },
-    {
-      linkProps: { page: "blog-index", category: "research" },
-      label: "Research and insights",
-    },
-  ],
+export default meta;
+type Story = StoryObj<typeof Component>;
+
+export const CategoryFilterList: Story = {
+  args: {
+    categories: [
+      {
+        linkProps: { page: "blog-index", category: "" },
+        label: "Oak updates",
+      },
+      {
+        linkProps: { page: "blog-index", category: "lesson-planning" },
+        label: "Lesson planning",
+      },
+      {
+        linkProps: { page: "blog-index", category: "teaching-learning" },
+        label: "Teaching and learning",
+      },
+      {
+        linkProps: { page: "blog-index", category: "research" },
+        label: "Research and insights",
+      },
+    ],
+  },
+  render: (args) => {
+    // get functionality working
+    // const { getIsSelected, setSelected } = useCategoryFilterList({
+    //   selectedKey: 'lesson-planning',
+    //   getKey: (linkProps: BlogListingLinkProps | WebinarListingLinkProps) =>
+    //     linkProps.category || null,
+    // });
+    return (
+      <Component {...args} />
+    );
+  },
 };
diff --git a/src/components/Filters/CategoryFilterList/CategoryFilterList.tsx b/src/components/Filters/CategoryFilterList/CategoryFilterList.tsx
@@ -27,6 +27,7 @@ const CategoryFilterList = <T extends CategoryLinkProps>(
     ...boxProps
   } = props;
 
+  console.log("CategoryFilterList", categories);
   return (
     <nav aria-labelledby={labelledBy}>
       <UL {...boxProps} $reset $mr={30}>

diff --git a/src/components/Filters/CategoryFilterList/useCategoryFilterList.ts b/src/components/Filters/CategoryFilterList/useCategoryFilterList.ts
@@ -7,7 +7,7 @@ const useCategoryFilterList = <T extends CategoryLinkProps>(props: {
   getKey: (linkProps: T) => string | undefined | null;
 }) => {
   const { selectedKey, getKey } = props;
-
+  console.log("selectedKey", selectedKey, "getKey", getKey);
   const [visiblySelected, setVisiblySelected] = useState(selectedKey);
 
   useEffect(() => {

diff --git a/src/components/Filters/LearningThemeFilters/LearningThemeFilters.stories.tsx b/src/components/Filters/LearningThemeFilters/LearningThemeFilters.stories.tsx
@@ -1,26 +1,29 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import AnalyticsDecorator from "../../../storybook-decorators/AnalyticsDecorator";
 
 import Component from ".";
 
-export default {
+const meta: Meta<typeof Component> = {
   title: "Filters/Category Filter List/LearningThemeFilters",
   decorators: [AnalyticsDecorator],
   component: Component,
-} as ComponentMeta<typeof Component>;
-
-const Template: ComponentStory<typeof Component> = (args) => {
-  return <Component {...args} />;
 };
 
-export const LearningThemeFilters = Template.bind({});
-LearningThemeFilters.args = {
-  selectedThemeSlug: "some-theme",
-  learningThemes: [],
-  linkProps: {
-    page: "unit-index",
-    viewType: "teachers",
-    programme: "some-programme",
+export default meta;
+type Story = StoryObj<typeof Component>;
+
+export const LearningThemeFilters: Story = {
+  args: {
+    selectedThemeSlug: "some-theme",
+    learningThemes: [],
+    linkProps: {
+      page: "unit-index",
+      viewType: "teachers",
+      programme: "some-programme",
+    },
+  },
+  render: (args) => {
+    return <Component {...args} />;
   },
 };
diff --git a/src/components/KeyStageKeypad/KeyStageKeypad.stories.tsx b/src/components/KeyStageKeypad/KeyStageKeypad.stories.tsx
@@ -1,29 +1,32 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import AnalyticsDecorator from "../../storybook-decorators/AnalyticsDecorator";
 import keyStageKeypad from "../../browser-lib/fixtures/keyStageKeypad";
 import Flex from "../Flex";
 
 import Component from "./KeyStageKeypad";
 
-export default {
+const meta: Meta<typeof Component> = {
   title: "Navigation",
   decorators: [AnalyticsDecorator],
   component: Component,
   argTypes: {},
-} as ComponentMeta<typeof Component>;
+};
 
-const Template: ComponentStory<typeof Component> = () => {
-  return (
-    <Flex $flexDirection={"column"} $pa={16}>
-      <Flex $background={"pupilsLightGreen"} $pa={16} $mb={12}>
-        <Component {...keyStageKeypad} />
-      </Flex>
-      <Flex $background={"pupilsLightGreen"} $pa={16} $mb={12}>
-        <Component keyStages={keyStageKeypad.keyStages} />
+export default meta;
+type Story = StoryObj<typeof Component>;
+
+export const KeyStageKeypad: Story = {
+  render: () => {
+    return (
+      <Flex $flexDirection={"column"} $pa={16}>
+        <Flex $background={"pupilsLightGreen"} $pa={16} $mb={12}>
+          <Component {...keyStageKeypad} />
+        </Flex>
+        <Flex $background={"pupilsLightGreen"} $pa={16} $mb={12}>
+          <Component keyStages={keyStageKeypad.keyStages} />
+        </Flex>
       </Flex>
-    </Flex>
-  );
+    );
+  },
 };
-
-export const KeyStageKeypad = Template.bind({});