Migrate Storybook for Next.js

.github/workflows/ci.yml

@@ -180,7 +180,7 @@ jobs:
         run: yarn install
 
       - name: Build Storybook
-        run: yarn workspace mit-learn build-storybook
+        run: yarn workspace ol-components build-storybook
 
   openapi-generated-client-check-v0:
     # This job checks that the output of openapi-generator-typescript-axios that

frontends/main/src/app-pages/ChannelPage/ChannelPage.tsx

@@ -11,72 +11,17 @@ import type {
   BooleanFacets,
 } from "@mitodl/course-search-utils"
 import { ChannelTypeEnum } from "api/v0"
-import { useLearningResourceTopics } from "api/hooks/learningResources"
-import { ChipLink, Container, styled, Typography } from "ol-components"
-import { propsNotNil } from "ol-utilities"
 import LearningResourceDrawer from "@/page-components/LearningResourceDrawer/LearningResourceDrawer"
 
-const SubTopicsContainer = styled(Container)(({ theme }) => ({
-  marginBottom: "60px",
-  [theme.breakpoints.down("sm")]: {
-    marginBottom: "24px",
-  },
-}))
-
-const SubTopicsHeader = styled(Typography)(({ theme }) => ({
-  marginBottom: "10px",
-  ...theme.typography.subtitle1,
-}))
-
-const ChipsContainer = styled.div({
-  display: "flex",
-  flexWrap: "wrap",
-  gap: "12px",
-})
-
 type RouteParams = {
   channelType: ChannelTypeEnum
   name: string
 }
 
-type SubTopicDisplayProps = {
-  parentTopicId: number
-}
-
-const SubTopicsDisplay: React.FC<SubTopicDisplayProps> = (props) => {
-  const { parentTopicId } = props
-  const topicsQuery = useLearningResourceTopics({
-    parent_topic_id: [parentTopicId],
-  })
-  const totalSubtopics = topicsQuery.data?.results.length ?? 0
-  const subTopics = topicsQuery.data?.results.filter(
-    propsNotNil(["channel_url"]),
-  )
-  return (
-    totalSubtopics > 0 && (
-      <SubTopicsContainer>
-        <SubTopicsHeader>Related Topics</SubTopicsHeader>
-        <ChipsContainer>
-          {subTopics?.map((topic) => (
-            <ChipLink
-              size="large"
-              variant="outlinedWhite"
-              key={topic.id}
-              href={topic.channel_url}
-              label={topic.name}
-            />
-          ))}
-        </ChipsContainer>
-      </SubTopicsContainer>
-    )
-  )
-}
-
 const ChannelPage: React.FC = () => {
   const { channelType, name } = useParams<RouteParams>()
   const channelQuery = useChannelDetail(String(channelType), String(name))
   const searchParams: Facets & BooleanFacets = {}
-  const publicDescription = channelQuery.data?.public_description
 
   if (channelQuery.data?.search_filter) {
     const urlParams = new URLSearchParams(channelQuery.data.search_filter)
@@ -97,15 +42,7 @@ const ChannelPage: React.FC = () => {
       <>
         <LearningResourceDrawer />
         <ChannelPageTemplate name={name} channelType={channelType}>
-          {publicDescription && (
-            <Typography variant="body1">{publicDescription}</Typography>
-          )}
-          {channelQuery.data?.channel_type === ChannelTypeEnum.Topic &&
-          channelQuery.data?.topic_detail?.topic ? (
-            <SubTopicsDisplay
-              parentTopicId={channelQuery.data?.topic_detail?.topic}
-            />
-          ) : null}
+          <p>{channelQuery.data?.public_description}</p>
           {channelQuery.data?.search_filter && (
             <ChannelSearch
               channelTitle={channelQuery.data.title}

frontends/main/src/app-pages/LearningPathDetailsPage/ListDetailsPage.tsx

@@ -20,7 +20,7 @@ const ListDetailsPage: React.FC<ItemsListingComponentProps> = ({
 }) => {
   return (
     <BannerPage
-      src="/static/images/course_search_banner.png"
+      src="/images/backgrounds/course_search_banner.png"
       className="learningpaths-page"
     >
       {/* TODO <MetaTags title={list?.title} social={false} /> */}

frontends/main/src/app/GlobalStyles.ts

@@ -0,0 +1,2 @@
+import "slick-carousel/slick/slick.css"
+import "slick-carousel/slick/slick-theme.css"

frontends/main/src/app/layout.tsx

@@ -1,9 +1,13 @@
+"use client"
+
 import React from "react"
 import Header from "@/page-components/Header/Header"
 import Footer from "@/page-components/Footer/Footer"
 import { PageWrapper, PageWrapperInner } from "./styled"
 import Providers from "./providers"
-import GlobalStyles from "./GlobalStyles"
+import { MITLearnGlobalStyles } from "ol-components"
+
+import "./GlobalStyles"
 
 export default function RootLayout({
   children,
@@ -14,7 +18,7 @@ export default function RootLayout({
     <html lang="en">
       <body>
         <Providers>
-          <GlobalStyles />
+          <MITLearnGlobalStyles />
           <PageWrapper>
             <Header />
             <PageWrapperInner>{children}</PageWrapperInner>

frontends/mit-learn/package.json

@@ -11,9 +11,7 @@
     "watch": "NODE_ENV=development LOAD_ENV_FILES=true webpack serve",
     "watch:docker": "NODE_ENV=development webpack serve",
     "build": "webpack --config webpack.config.js --bail",
-    "build-exports": "webpack --config webpack.exports.js --bail",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-exports": "webpack --config webpack.exports.js --bail"
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",
@@ -23,7 +21,6 @@
     "@storybook/addon-essentials": "^8.0.9",
     "@storybook/addon-interactions": "^8.0.9",
     "@storybook/addon-links": "^8.0.9",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
     "@storybook/blocks": "^8.0.9",
     "@storybook/react": "^8.0.9",
     "@storybook/react-webpack5": "^8.0.9",

frontends/ol-components/.storybook/main.ts

@@ -0,0 +1,79 @@
+import { resolve, join, dirname } from "path"
+import * as dotenv from "dotenv"
+import * as webpack from "webpack"
+import { StorybookConfig } from '@storybook/nextjs';
+
+dotenv.config({ path: resolve(__dirname, "../../../.env") })
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string) {
+  return dirname(require.resolve(join(value, "package.json")))
+}
+
+const config: StorybookConfig = {
+  stories: [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.tsx",
+    "../../ol-components/src/**/*.mdx",
+    "../../ol-components/src/**/*.stories.@(tsx|ts)",
+  ],
+
+  staticDirs: ["./public"],
+
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
+    getAbsolutePath("@storybook/addon-mdx-gfm")
+  ],
+
+  framework:  {
+    name: getAbsolutePath("@storybook/nextjs"),
+    options: {}
+  },
+
+  docs: {},
+
+  webpackFinal: async (config: any) => {
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        APP_SETTINGS: {
+          EMBEDLY_KEY: JSON.stringify(process.env.EMBEDLY_KEY),
+          PUBLIC_URL: JSON.stringify(process.env.PUBLIC_URL),
+        },
+      }),
+    )
+
+
+    /* Fix for this error:
+       Module not found: Error: Can't resolve 'react-dom/test-utils' in './node_modules/@testing-library/react/dist/@testing-library'
+
+       Described here: https://github.com/vercel/next.js/issues/55620
+
+       react-dom/test-utils is deprecated and replaced with @testing-library/react and @storybook/nextjs introduces an incompatibility.
+       The fix is to use @storybook/test in place of @testing-library/react, which provides the same API.
+       The issue is that we are using factories from api/test-utils, which imports ol-test-utilities, which imports @testing-library/react, which itself requires react-dom/test-utils,
+       We should not use @storybook packages in ol-test-utilities or anywhere outside of ol-components as they are not related
+       so below we are aliasing @testing-library/react.
+     */
+      config.resolve = {
+        ...config.resolve,
+        alias: {
+          ...config.resolve?.alias,
+          "@testing-library/react": "@storybook/test"
+        }
+      }
+
+    return config
+  },
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript"
+  }
+}
+
+export default config

frontends/mit-learn/.storybook/preview.tsx → frontends/ol-components/.storybook/preview.tsx

@@ -1,15 +1,13 @@
 import React from "react"
-import { ThemeProvider } from "ol-components"
-
 import { Preview } from "@storybook/react"
-import GlobalStyles from "../src/GlobalStyles"
+import { ThemeProvider, MITLearnGlobalStyles } from "ol-components"
 
 const preview: Preview = {
   decorators: [
     (Story) => (
       <ThemeProvider>
+        <MITLearnGlobalStyles />
         <Story />
-        <GlobalStyles />
       </ThemeProvider>
     ),
   ],
@@ -28,7 +26,7 @@ const preview: Preview = {
       },
     },
   },
-  globals: {
+  initialGlobals: {
     EMBEDLY_KEY: process.env.EMBEDLY_KEY,
   },
 }