fix(stories): fix type errors on exsting stories

oaknational · May 23, 2023 · 92568fa · 92568fa
1 parent 2e26c97
commit 92568fa
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 98 deletions.
diff --git a/src/components/Card/CardLinkIcon.stories.tsx b/src/components/Card/CardLinkIcon.stories.tsx
@@ -1,22 +1,21 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import Component from "./CardLinkIcon";
 
-export default {
+const meta: Meta<typeof Component> = {
   title: "Cards/Card Link Icon",
   component: Component,
   argTypes: {},
-} as ComponentMeta<typeof Component>;
-
-const Template: ComponentStory<typeof Component> = (args) => (
-  <Component {...args} />
-);
+};
 
-export const CardLinkIcon = Template.bind({});
+export default meta;
+type Story = StoryObj<typeof Component>;
 
-CardLinkIcon.args = {
-  title: "Title",
-  href: "/",
-  background: "teachersPastelYellow",
-  titleTag: "h3",
+export const CardLinkIcon: Story = {
+  args: {
+    title: "Title",
+    href: "/",
+    background: "teachersPastelYellow",
+    titleTag: "h3",
+  },
 };
diff --git a/src/components/Card/SubjectUnitLessonTitleCard.stories.tsx b/src/components/Card/SubjectUnitLessonTitleCard.stories.tsx
@@ -1,43 +1,42 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import Component from "./SubjectUnitLessonTitleCard";
 
-export default {
+const meta: Meta<typeof Component> = {
   title: "Cards/Title card",
   component: Component,
   argTypes: {},
-} as ComponentMeta<typeof Component>;
-
-const Template: ComponentStory<typeof Component> = (args) => (
-  <Component {...args} />
-);
-
-export const TitleCardLesson = Template.bind({});
-
-TitleCardLesson.args = {
-  title: "Binary conversion",
-  page: "lesson",
-  keyStage: "Key stage 4",
-  keyStageSlug: "key-stage-4",
-  subject: "Computing",
-  subjectSlug: "computing",
 };
 
-export const TitleCardUnit = Template.bind({});
-
-TitleCardUnit.args = {
-  title: "Data representation",
-  page: "unit",
-  keyStage: "Key stage 4",
-  keyStageSlug: "key-stage-4",
+export default meta;
+type Story = StoryObj<typeof Component>;
+
+export const TitleCardLesson: Story = {
+  args: {
+    title: "Binary conversion",
+    page: "lesson",
+    keyStage: "Key stage 4",
+    keyStageSlug: "key-stage-4",
+    subject: "Computing",
+    subjectSlug: "computing",
+  },
 };
 
-export const TitleCardSubject = Template.bind({});
+export const TitleCardUnit: Story = {
+  args: {
+    title: "Data representation",
+    page: "unit",
+    keyStage: "Key stage 4",
+    keyStageSlug: "key-stage-4",
+  },
+};
 
-TitleCardSubject.args = {
-  title: "Computer Science",
-  page: "subject",
-  keyStage: "Key stage 4",
-  keyStageSlug: "key-stage-4",
-  slug: "computer-science",
+export const TitleCardSubject: Story = {
+  args: {
+    title: "Computer Science",
+    page: "subject",
+    keyStage: "Key stage 4",
+    keyStageSlug: "key-stage-4",
+    slug: "computer-science",
+  },
 };
diff --git a/src/components/Posts/PostList/UpcomingWebinarListItem/UpcomingWebinarListItem.stories.tsx b/src/components/Posts/PostList/UpcomingWebinarListItem/UpcomingWebinarListItem.stories.tsx
@@ -1,10 +1,10 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import Box from "../../../Box";
 
 import Component from ".";
 
-export default {
+const meta: Meta<typeof Component> = {
   title: "Blogs & Webinars/Post List/UpcomingWebinarListItem",
   component: Component,
   decorators: [
@@ -14,22 +14,20 @@ export default {
       </Box>
     ),
   ],
-  argTypes: {
-    argTypes: { signUpOnClick: { action: "clicked" } },
-  },
-} as ComponentMeta<typeof Component>;
-
-const Template: ComponentStory<typeof Component> = (args) => {
-  return <Component {...args} />;
+  argTypes: { signUpOnClick: { action: "clicked" } },
 };
 
-export const UpcomingWebinarListItem = Template.bind({});
-UpcomingWebinarListItem.args = {
-  titleTag: "h3",
-  title: "Why are teachers still using Oak?",
-  summary:
-    "We know schools are facing yet another challenging term, with increasing numbers of staff and pupils isolating due to Covid, isolating due to Covid, isolating due to Covid, isolating due to Covid",
-  date: "2052-03-31T14:30:00.000Z",
-  slug: "why-oak",
-  signUpHref: "https://example.com",
+export default meta;
+type Story = StoryObj<typeof Component>;
+
+export const UpcomingWebinarListItem: Story = {
+  args: {
+    titleTag: "h3",
+    title: "Why are teachers still using Oak?",
+    summary:
+      "We know schools are facing yet another challenging term, with increasing numbers of staff and pupils isolating due to Covid, isolating due to Covid, isolating due to Covid, isolating due to Covid",
+    date: "2052-03-31T14:30:00.000Z",
+    slug: "why-oak",
+    signUpHref: "https://example.com",
+  },
 };
diff --git a/src/components/pages/LandingPages/LandingPageTextAndMedia.stories.tsx b/src/components/pages/LandingPages/LandingPageTextAndMedia.stories.tsx
@@ -1,48 +1,50 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import Flex from "../../Flex";
 import { mockImageAsset } from "../../../__tests__/__helpers__/cms";
 
 import { LandingPageTextAndMedia as Component } from "./LandingPageTextAndMedia";
 
-export default {
+const meta: Meta<typeof Component> = {
   title: "Sanity/Pages/Landing Pages",
   component: Component,
   argTypes: {},
-} as ComponentMeta<typeof Component>;
+};
 
-const Template: ComponentStory<typeof Component> = (args) => (
-  <Flex
-    $pa={32}
-    $background={"teachersLilac"}
-    $justifyContent={"center"}
-    $width="100%"
-  >
-    <Component {...args} />
-  </Flex>
-);
+export default meta;
+type Story = StoryObj<typeof Component>;
 
-export const LandingPagesTextAndMedia = Template.bind({});
-LandingPagesTextAndMedia.args = {
-  title: "title",
-  bodyPortableText: [
-    {
-      _key: "fba015024518",
-      _type: "block",
-      children: [
-        {
-          _key: "e55d6209321d0",
-          _type: "span",
-          marks: [],
-          text: "Our interim board oversees all of Oak’s work. They provide strategic direction, enable us to deliver on our plans, scrutinise our work and safeguard our independence. The interim board will be in place whilst a permanent board is chosen through a public appointments process.",
-        },
-      ],
-      markDefs: [],
-      style: "normal",
-    },
-  ],
-  alignMedia: "left",
-  mediaType: "image",
-  image: mockImageAsset(),
+export const LandingPagesTextAndMedia: Story = {
+  args: {
+    title: "title",
+    bodyPortableText: [
+      {
+        _key: "fba015024518",
+        _type: "block",
+        children: [
+          {
+            _key: "e55d6209321d0",
+            _type: "span",
+            marks: [],
+            text: "Our interim board oversees all of Oak’s work. They provide strategic direction, enable us to deliver on our plans, scrutinise our work and safeguard our independence. The interim board will be in place whilst a permanent board is chosen through a public appointments process.",
+          },
+        ],
+        markDefs: [],
+        style: "normal",
+      },
+    ],
+    alignMedia: "left",
+    mediaType: "image",
+    image: mockImageAsset(),
+  },
+  render: (args) => (
+    <Flex
+      $pa={32}
+      $background={"teachersLilac"}
+      $justifyContent={"center"}
+      $width="100%"
+    >
+      <Component {...args} />
+    </Flex>
+  ),
 };