Add async and mock functionality to storybook and adjusted eslint

.eslintrc.json

@@ -7,18 +7,37 @@
   },
   "extends": [
     "next/core-web-vitals",
+    "plugin:jsdoc/recommended-typescript",
     "plugin:storybook/recommended",
+    "plugin:prettier/recommended",
     "plugin:deprecation/recommended"
   ],
   "rules": {
+    "prettier/prettier": "warn",
     "@typescript-eslint/no-unused-vars": "off",
     "unused-imports/no-unused-imports": "error",
     "unused-imports/no-unused-vars": [
       "warn",
       { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
     ],
-    "no-console": ["error", { "allow": ["warn"] }],
-    "quotes": ["error", "double"]
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "quotes": ["error", "double"],
+    "jsdoc/require-returns": "off",
+    "jsdoc/tag-lines": [
+      "warn",
+      "any",
+      {
+        "endLines":0,
+        "startLines":1
+      }
+    ]
+  },
+  "settings": {
+    "jsdoc": {
+      "tagNamePreference": {
+        "returns": "return"
+      }
+    }
   },
   "plugins": ["unused-imports"],
   "ignorePatterns": ["**/__generated__/**/*"]

.storybook/main.ts

@@ -1,5 +1,4 @@
 import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin";
-import path from "path";
 import type {StorybookConfig} from "@storybook/nextjs";
 
 const config: StorybookConfig = {
@@ -11,6 +10,9 @@ const config: StorybookConfig = {
       },
     },
   },
+  features: {
+    experimentalRSC: true,
+  },
   typescript: {
     reactDocgen: 'react-docgen',
     check: false,
@@ -23,19 +25,16 @@ const config: StorybookConfig = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    '@storybook/addon-styling',
+    "storybook-addon-module-mock",
     {
-      name: '@storybook/addon-styling',
+      name: '@storybook/addon-styling-webpack',
       options: {
         // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md
         // For more details on this addon's options.
         postCss: true,
       },
     },
   ],
-  docs: {
-    autodocs: "tag",
-  },
   webpackFinal: async (config) => {
     if (config.resolve) config.resolve.plugins = [new TsconfigPathsPlugin()];
     return config

.storybook/preview.ts

@@ -3,6 +3,7 @@ import '../src/styles/index.css';
 import './storybook.css';
 
 const preview: Preview = {
+  tags: ['autodocs'],
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {

.storybook/stories/config-pages/GlobalMessage.stories.tsx

@@ -0,0 +1,121 @@
+import type {Meta, StoryObj} from "@storybook/react"
+import GlobalMessage from "@components/config-pages/global-message"
+import {ComponentProps} from "react"
+import {Link, StanfordGlobalMessage, Text} from "@lib/gql/__generated__/drupal"
+import {createMock} from "storybook-addon-module-mock"
+import * as gql from "@lib/gql/gql-queries"
+
+type ComponentStoryProps = ComponentProps<typeof GlobalMessage> & {
+  messageText?: Text["processed"]
+  linkUrl?: Link["url"]
+  linkTitle?: Link["title"]
+}
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<ComponentStoryProps> = {
+  title: "Design/Config Pages/Global Message",
+  component: GlobalMessage,
+  tags: ["autodocs"],
+  argTypes: {},
+}
+
+export default meta
+type Story = StoryObj<ComponentStoryProps>
+
+const globalMessage = {
+  id: "message",
+  metatag: [],
+  suGlobalMsgEnabled: true,
+  suGlobalMsgHeader: "Global Message Header",
+  suGlobalMsgLabel: "Global Message Label",
+  suGlobalMsgMessage: {
+    processed: "<p>Erat euismod nunc ipsum morbi tincidunt accumsan bibendum elementum mi vel leo elit urna bibendum sit metus varius leo enim ex tristique amet elit interdum.</p>",
+  },
+  suGlobalMsgType: "success",
+  suGlobalMsgLink: {
+    internal: false,
+    url: "https://localhost",
+    title: "Local Link",
+  },
+} satisfies StanfordGlobalMessage
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const SuccessMessage: Story = {
+  render: ({linkUrl, linkTitle, messageText, ...args}) => {
+    return <GlobalMessage {...args} />
+  },
+  args: {},
+  parameters: {
+    moduleMock: {
+      mock: () => {
+        const mock = createMock(gql, "getConfigPage")
+        mock.mockReturnValue(Promise.resolve(globalMessage))
+        return [mock]
+      },
+    },
+  },
+}
+
+export const ErrorMessage: Story = {
+  render: ({linkUrl, linkTitle, messageText, ...args}) => {
+    return <GlobalMessage {...args} />
+  },
+  args: {},
+  parameters: {
+    moduleMock: {
+      mock: () => {
+        const mock = createMock(gql, "getConfigPage")
+        mock.mockReturnValue(Promise.resolve({...globalMessage, suGlobalMsgType: "error"}))
+        return [mock]
+      },
+    },
+  },
+}
+
+export const InfoMessage: Story = {
+  render: ({linkUrl, linkTitle, messageText, ...args}) => {
+    return <GlobalMessage {...args} />
+  },
+  args: {},
+  parameters: {
+    moduleMock: {
+      mock: () => {
+        const mock = createMock(gql, "getConfigPage")
+        mock.mockReturnValue(Promise.resolve({...globalMessage, suGlobalMsgType: "info"}))
+        return [mock]
+      },
+    },
+  },
+}
+
+export const WarningMessage: Story = {
+  render: ({linkUrl, linkTitle, messageText, ...args}) => {
+    return <GlobalMessage {...args} />
+  },
+  args: {},
+  parameters: {
+    moduleMock: {
+      mock: () => {
+        const mock = createMock(gql, "getConfigPage")
+        mock.mockReturnValue(Promise.resolve({...globalMessage, suGlobalMsgType: "warning"}))
+        return [mock]
+      },
+    },
+  },
+}
+
+export const PlainMessage: Story = {
+  render: ({linkUrl, linkTitle, messageText, ...args}) => {
+    return <GlobalMessage {...args} />
+  },
+  args: {},
+  parameters: {
+    moduleMock: {
+      mock: () => {
+        const mock = createMock(gql, "getConfigPage")
+        mock.mockReturnValue(Promise.resolve({...globalMessage, suGlobalMsgType: "plain"}))
+        return [mock]
+      },
+    },
+  },
+}

.storybook/stories/config-pages/LocalFooter.stories.tsx

@@ -1,81 +1,89 @@
-import type {Meta, StoryObj} from '@storybook/react';
-
-import LocalFooter from "@components/config-pages/local-footer";
-import {ComponentProps} from "react";
+import type {Meta, StoryObj} from "@storybook/react"
+import LocalFooter from "@components/config-pages/local-footer"
+import {ComponentProps} from "react"
+import {createMock} from "storybook-addon-module-mock"
+import * as gql from "@lib/gql/gql-queries"
+import {StanfordLocalFooter} from "@lib/gql/__generated__/drupal"
 
 type ComponentStoryProps = ComponentProps<typeof LocalFooter> & {}
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta: Meta<ComponentStoryProps> = {
-  title: 'Design/Config Pages/Local Footer',
+  title: "Design/Config Pages/Local Footer",
   component: LocalFooter,
-  tags: ['autodocs'],
-  argTypes: {
-    suLocalFootLocOp: {
-      description: "Lockup Options",
-      options: ['a', 'b', 'd', 'e', 'h', 'i', 'm', 'o', 'p', 'r', 's', 't', 'none'],
-      control: {type: "select"}
-    },
-    suFooterEnabled: {control: "boolean"}
-  }
-};
+  tags: ["autodocs"],
+  argTypes: {},
+}
 
-export default meta;
-type Story = StoryObj<ComponentStoryProps>;
+export default meta
+type Story = StoryObj<ComponentStoryProps>
+
+const localFooterConfig = {
+  id: "local-footer",
+  metatag: [],
+  suFooterEnabled: true,
+  suLocalFootAction: [
+    {title: "Action link 1", url: "https://localhost", internal: false},
+    {title: "Action link 2", url: "https://localhost", internal: false},
+  ],
+  suLocalFootAddress: {
+    additionalName: "additional_name",
+    addressLine1: "address_line1",
+    addressLine2: "address_line2",
+    administrativeArea: "administrative_area",
+    country: {code: "country_code"},
+    familyName: "family_name",
+    givenName: "given_name",
+    locality: "locality",
+    organization: "organization",
+    postalCode: "postal_code",
+    sortingCode: "sorting_code",
+  },
+  suLocalFootFButton: "suLocalFoot_f_button",
+  suLocalFootFIntro: {processed: "suLocalFoot_f_intro"},
+  suLocalFootFMethod: "suLocalFoot_f_method",
+  suLocalFootFUrl: {title: "Form Action url", url: "https://localhost", internal: false},
+  suLocalFootLine1: "suLocalFoot_line_1",
+  suLocalFootLine2: "suLocalFoot_line_2",
+  suLocalFootLine3: "suLocalFoot_line_3",
+  suLocalFootLine4: "suLocalFoot_line_4",
+  suLocalFootLine5: "suLocalFoot_line_5",
+  suLocalFootLocImg: null,
+  suLocalFootLocLink: {title: "suLocalFoot_loc_link", url: "https://localhost", internal: false},
+  suLocalFootPrCo: {processed: "suLocalFoot_pr_co"},
+  suLocalFootPrimary: [
+    {title: "Primary link 1", url: "https://localhost", internal: false},
+    {title: "Primary link 2", url: "https://localhost", internal: false},
+  ],
+  suLocalFootPrimeH: "suLocalFoot_prime_h",
+  suLocalFootSeCo: {processed: "suLocalFoot_se_co"},
+  suLocalFootSecond: [
+    {title: "Second Link 1", url: "https://localhost", internal: false},
+    {title: "Second Link 2", url: "https://localhost", internal: false},
+  ],
+  suLocalFootSecondH: "suLocalFoot_second_h",
+  suLocalFootSocial: [
+    {title: "Facebook", url: "https://localhost", internal: false},
+    {title: "YouTube", url: "https://localhost", internal: false},
+  ],
+  suLocalFootSunetT: "suLocalFoot_sunet_t",
+  suLocalFootTr2Co: {processed: "suLocalFoot_tr2_co"},
+  suLocalFootTrCo: {processed: "suLocalFoot_tr_co"},
+  suLocalFootUseLoc: true,
+  suLocalFootUseLogo: true,
+  suLocalFootLocOp: "suLocalFoot_loc_op",
+} satisfies StanfordLocalFooter
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const LocalFooterDisplay: Story = {
-  args: {
-    suFooterEnabled: true,
-    suLocalFootAction: [
-      {title: "Action link 1", url: "https://localhost", internal: false},
-      {title: "Action link 2", url: "https://localhost", internal: false}
-    ],
-    suLocalFootAddress: {
-      additionalName: "additional_name",
-      addressLine1: "address_line1",
-      addressLine2: "address_line2",
-      administrativeArea: "administrative_area",
-      country: {code: "country_code"},
-      familyName: "family_name",
-      givenName: "given_name",
-      locality: "locality",
-      organization: "organization",
-      postalCode: "postal_code",
-      sortingCode: "sorting_code",
+  args: {},
+  parameters: {
+    moduleMock: {
+      mock: () => {
+        const mock = createMock(gql, "getConfigPage")
+        mock.mockReturnValue(Promise.resolve(localFooterConfig))
+        return [mock]
+      },
     },
-    suLocalFootFButton: "suLocalFoot_f_button",
-    suLocalFootFIntro: {processed: "suLocalFoot_f_intro"},
-    suLocalFootFMethod: "suLocalFoot_f_method",
-    suLocalFootFUrl: {title: "Form Action url", url: "https://localhost", internal: false},
-    suLocalFootLine1: "suLocalFoot_line_1",
-    suLocalFootLine2: "suLocalFoot_line_2",
-    suLocalFootLine3: "suLocalFoot_line_3",
-    suLocalFootLine4: "suLocalFoot_line_4",
-    suLocalFootLine5: "suLocalFoot_line_5",
-    suLocalFootLocImg: null,
-    suLocalFootLocLink: {title: "suLocalFoot_loc_link", url: "https://localhost", internal: false},
-    suLocalFootPrCo: {processed: "suLocalFoot_pr_co"},
-    suLocalFootPrimary: [
-      {title: "Primary link 1", url: "https://localhost", internal: false},
-      {title: "Primary link 2", url: "https://localhost", internal: false}
-    ],
-    suLocalFootPrimeH: "suLocalFoot_prime_h",
-    suLocalFootSeCo: {processed: "suLocalFoot_se_co"},
-    suLocalFootSecond: [
-      {title: "Second Link 1", url: "https://localhost", internal: false},
-      {title: "Second Link 2", url: "https://localhost", internal: false}
-    ],
-    suLocalFootSecondH: "suLocalFoot_second_h",
-    suLocalFootSocial: [
-      {title: "Facebook", url: "https://localhost", internal: false},
-      {title: "YouTube", url: "https://localhost", internal: false}
-    ],
-    suLocalFootSunetT: "suLocalFoot_sunet_t",
-    suLocalFootTr2Co: {processed: "suLocalFoot_tr2_co"},
-    suLocalFootTrCo: {processed: "suLocalFoot_tr_co"},
-    suLocalFootUseLoc: true,
-    suLocalFootUseLogo: true,
-    suLocalFootLocOp: "suLocalFoot_loc_op",
   },
-};
+}