Merge pull request #339 from theMattCode/feature/upgrade-next-and-storybook

Upgrade Next.js and Storybook.js

Author: theMattCode

.storybook/main.js

@@ -7,10 +7,8 @@ module.exports = {
   ],
 
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@chromatic-com/storybook"
+    "@chromatic-com/storybook",
+    "@storybook/addon-docs"
   ],
 
   framework: {

.storybook/preview.js

@@ -9,8 +9,14 @@ export const parameters = {
     },
   },
   viewport: {
-    viewports: DEFAULT_VIEWPORTS,
-    defaultViewport: "medium",
+    options: DEFAULT_VIEWPORTS
   },
   chromatic: { viewports: [320, 640, 768, 1024, 1200] },
 };
+
+export const initialGlobals = {
+  viewport: {
+    value: "medium",
+    isRotated: false
+  }
+};

components/announcements/Announcements.stories.tsx

@@ -1,5 +1,5 @@
 import { AnnouncementsBlock } from "#/components/announcements/AnnouncementsBlock";
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/nextjs";
 import { Announcements } from "#/components/announcements/Announcements";
 import { Announcement } from "#/content/announcements";
 

components/elements/Elements.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/nextjs";
 
 const meta: Meta = {
   title: "Elements",

components/markdown/Markdown.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/nextjs";
 import RichTextComponent from "#/components/markdown/Markdown";
 
 const meta: Meta = {

components/markdown/Markdown.tsx

@@ -45,7 +45,7 @@ export default function Markdown({ content }: Props): JSX.Element | null {
             ),
             img: (props) => (
               <span className="w-full flex flex-col items-center py-2 gap-1">
-                <Image alt={props.alt ?? ""} src={props.src ?? ""} width={1280} height={768} unoptimized={true} />
+                <Image alt={props.alt ?? ""} src={`${props.src}`} width={1280} height={768} unoptimized={true} />
                 {props.alt && (
                   <span className="w-full flex flex-row justify-center text-sm text-gray-700">{props.alt}</span>
                 )}

components/match/SoccerMatch.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/nextjs";
 import { SoccerMatchReport } from "#/components/match/SoccerMatchReport";
 
 const meta: Meta<typeof SoccerMatchReport> = {

components/sponsor/Sponsor.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/nextjs";
 import { Sponsor } from "#/components/sponsor/Sponsor";
 import { sponsors } from "#/content/sponsor";
 

components/sponsor/SponsorGrid.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/nextjs";
 import { Sponsor } from "#/components/sponsor/Sponsor";
 import SponsorGrid from "#/components/sponsor/SponsorGrid";
 

components/web/person/PersonCard.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/nextjs";
 import { getPersonByTag } from "#/content/people";
 import { PersonCard } from "#/components/web/person/PersonCard";