frontend: Storybook updates

frontend/.storybook/main.ts

@@ -1,7 +1,11 @@
+/** @format */
+
+import { dirname, join } from "path";
 import { StorybookConfig } from "@storybook/react-webpack5";
 
 const config: StorybookConfig = {
-  stories: ["../packages/**/*.stories.@(tsx|jsx)"],
+  stories: ["../packages/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+
   typescript: {
     reactDocgen: "react-docgen-typescript",
     reactDocgenTypescriptOptions: {
@@ -11,10 +15,12 @@ const config: StorybookConfig = {
       },
     },
   },
+
   framework: {
-    name: "@storybook/react-webpack5",
+    name: getAbsolutePath("@storybook/react-webpack5"),
     options: { fastRefresh: true },
   },
+
   webpackFinal: async (config, { configType }) => {
     config?.module?.rules?.push({
       test: /\.(ts|tsx)$/,
@@ -32,6 +38,7 @@ const config: StorybookConfig = {
 
     return config;
   },
+
   babel: async (options) => ({
     ...options,
     plugins: [
@@ -41,11 +48,30 @@ const config: StorybookConfig = {
       ["@babel/plugin-proposal-class-properties", { loose: true }],
     ],
   }),
+
   addons: [
-    "@storybook/addon-essentials",
-    "@storybook/addon-links",
-    "@storybook/addon-a11y",
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-console"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-storysource"),
+    getAbsolutePath("@storybook/addon-themes"),
+    getAbsolutePath("@storybook/addon-viewport"),
+    getAbsolutePath("@storybook/preset-create-react-app"),
   ],
+
+  docs: {
+    defaultName: "Documentation",
+    autodocs: "tag",
+  },
+  staticDirs: ["../packages/app/public"],
+  core: {
+    disableTelemetry: true,
+  },
 };
 
 export default config;
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}

frontend/.storybook/manager.js

@@ -1,6 +1,6 @@
-import { addons } from "@storybook/addons";
+import { addons } from "@storybook/manager-api";
 import storybookTheme from "./theme";
 
 addons.setConfig({
   theme: storybookTheme,
-});
+});

frontend/.storybook/preview.js

@@ -1,3 +1,5 @@
+/** @format */
+
 import React from "react";
 import { Theme } from "./../packages/core/src/AppProvider/themes";
 
@@ -10,6 +12,9 @@ export const decorators = [
 ];
 
 export const parameters = {
+  controls: {
+    expanded: true,
+  },
   backgrounds: {
     default: "clutch",
     values: [
@@ -28,6 +33,7 @@ export const parameters = {
 const preview = {
   decorators,
   parameters,
+  tags: ["autodocs"],
 };
 
 export default preview;

frontend/package.json

@@ -42,7 +42,7 @@
     "publishBeta": "yarn compile && yarn workspaces foreach --no-private -Ai run publishBeta",
     "register-workflows": "yarn workspace @clutch-sh/app run register-workflows",
     "start": "yarn run clean && yarn run register-workflows && yarn run buildWatch",
-    "storybook": "rm -rf node_modules/.cache/storybook/ && storybook dev --disable-telemetry -p 6006 -h localhost",
+    "storybook": "rm -rf node_modules/.cache/storybook/ && storybook dev -p 6006 -h localhost",
     "storybook:build": "NODE_OPTIONS=--max_old_space_size=4096 storybook build -o netlify/storybook-static",
     "test": "yarn workspaces foreach -Aip run test --silent",
     "test:coverage": "yarn workspaces foreach -Aip run test:coverage --silent",
@@ -99,22 +99,28 @@
     "typescript": "^4.2.3"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^7.6.0",
-    "@storybook/addon-actions": "^7.6.0",
-    "@storybook/addon-essentials": "^7.6.0",
-    "@storybook/addon-links": "^7.6.0",
-    "@storybook/node-logger": "^7.6.0",
-    "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react-webpack5": "^7.6.0",
-    "@storybook/theming": "^7.6.0",
+    "@storybook/addon-a11y": "^8.3.3",
+    "@storybook/addon-actions": "^8.3.3",
+    "@storybook/addon-console": "^3.0.0",
+    "@storybook/addon-essentials": "^8.3.3",
+    "@storybook/addon-links": "^8.3.3",
+    "@storybook/addon-storysource": "^8.3.3",
+    "@storybook/addon-themes": "^8.3.3",
+    "@storybook/addon-viewport": "^8.3.3",
+    "@storybook/blocks": "^8.3.3",
+    "@storybook/manager-api": "^8.3.3",
+    "@storybook/node-logger": "^8.3.3",
+    "@storybook/preset-create-react-app": "^8.3.3",
+    "@storybook/react-webpack5": "^8.3.3",
+    "@storybook/theming": "^8.3.3",
     "@types/eslint": "^8",
     "jest": "^27.0.0",
     "license-checker": "^25.0.1",
     "pre-commit": "^1.2.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "sort-package-json": "^1.48.1",
-    "storybook": "^7.6.0",
+    "storybook": "^8.3.3",
     "typescript": "^4.2.3"
   },
   "engines": {

frontend/packages/core/src/AppLayout/header.tsx

@@ -44,7 +44,14 @@ interface HeaderProps extends AppConfiguration {
    * Will enable the user information component in the header
    */
   userInfo?: boolean;
+  /**
+   * The banners to render
+   */
   banners?: AppBanners;
+  /**
+   * The children to render
+   */
+  children?: React.ReactNode;
 }
 
 const AppBar = styled(MuiAppBar)(({ theme }: { theme: Theme }) => ({
@@ -72,7 +79,7 @@ const StyledLogo = styled("img")({
   verticalAlign: "middle",
 });
 
-const Header: React.FC<HeaderProps> = ({
+const Header = ({
   title = "clutch",
   logo = <Logo />,
   banners,
@@ -83,7 +90,7 @@ const Header: React.FC<HeaderProps> = ({
   notifications = false,
   userInfo = true,
   children = null,
-}) => {
+}: HeaderProps) => {
   return (
     <>
       <AppBar position="fixed" elevation={0}>
@@ -129,3 +136,4 @@ const Header: React.FC<HeaderProps> = ({
 };
 
 export default Header;
+export { Header };

frontend/packages/core/src/AppLayout/index.tsx

@@ -7,7 +7,7 @@ import Loadable from "../loading";
 import type { AppConfiguration } from "../Types";
 
 import Drawer from "./drawer";
-import Header, { APP_BAR_HEIGHT } from "./header";
+import { APP_BAR_HEIGHT, Header } from "./header";
 
 const AppGrid = styled(MuiGrid)({
   flex: 1,

frontend/packages/core/src/AppLayout/stories/drawer.stories.tsx

@@ -3,12 +3,13 @@ import { MemoryRouter } from "react-router";
 import { Grid } from "@mui/material";
 import type { Meta } from "@storybook/react";
 
+import { UserPreferencesProvider } from "../../Contexts";
 import { ApplicationContext } from "../../Contexts/app-context";
 import Drawer from "../drawer";
-import Header from "../header";
+import { Header } from "../header";
 
 export default {
-  title: "Core/AppLayout/Drawer",
+  title: "Core/Layout/Drawer",
   component: Drawer,
   decorators: [
     StoryFn => (
@@ -64,8 +65,10 @@ export default {
 export const Primary = () => <Drawer />;
 
 export const WithHeader = () => (
-  <Grid container direction="column">
-    <Header />
-    <Drawer />
-  </Grid>
+  <UserPreferencesProvider>
+    <Grid container direction="column">
+      <Header />
+      <Drawer />
+    </Grid>
+  </UserPreferencesProvider>
 );

frontend/packages/core/src/AppLayout/stories/header.stories.tsx

@@ -1,62 +1,70 @@
 import * as React from "react";
 import { MemoryRouter } from "react-router";
-import type { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 
-import { ApplicationContext } from "../../Contexts/app-context";
-import HeaderComponent from "../header";
+import { ApplicationContext, UserPreferencesProvider } from "../../Contexts";
+import { Header } from "../header";
 
-export default {
-  title: "Core/AppLayout/Header",
-  component: HeaderComponent,
+const workflows = [
+  {
+    developer: { name: "Lyft", contactUrl: "mailto:hello@clutch.sh" },
+    displayName: "EC2",
+    group: "AWS",
+    icon: { path: "" },
+    path: "ec2",
+    routes: [
+      {
+        component: () => <div>Terminate Instance</div>,
+        componentProps: { resolverType: "clutch.aws.ec2.v1.Instance" },
+        description: "Terminate an EC2 instance.",
+        displayName: "Terminate Instance",
+        path: "instance/terminate",
+        requiredConfigProps: ["resolverType"],
+        trending: true,
+      },
+      {
+        component: () => <div>Resize ASG</div>,
+        componentProps: { resolverType: "clutch.aws.ec2.v1.AutoscalingGroup" },
+        description: "Resize an autoscaling group.",
+        displayName: "Resize Autoscaling Group",
+        path: "asg/resize",
+        requiredConfigProps: ["resolverType"],
+      },
+    ],
+  },
+];
+
+const meta: Meta<typeof Header> = {
+  title: "Core/Layout/Header",
+  component: Header,
+  argTypes: {
+    logo: {
+      control: "text",
+    },
+  },
   decorators: [
-    () => (
-      <MemoryRouter>
-        <HeaderComponent />
-      </MemoryRouter>
-    ),
-    StoryFn => {
-      return (
-        <ApplicationContext.Provider
-          // eslint-disable-next-line react/jsx-no-constructed-context-values
-          value={{
-            workflows: [
-              {
-                developer: { name: "Lyft", contactUrl: "mailto:hello@clutch.sh" },
-                displayName: "EC2",
-                group: "AWS",
-                icon: { path: "" },
-                path: "ec2",
-                routes: [
-                  {
-                    component: () => <div>Terminate Instance</div>,
-                    componentProps: { resolverType: "clutch.aws.ec2.v1.Instance" },
-                    description: "Terminate an EC2 instance.",
-                    displayName: "Terminate Instance",
-                    path: "instance/terminate",
-                    requiredConfigProps: ["resolverType"],
-                    trending: true,
-                  },
-                  {
-                    component: () => <div>Resize ASG</div>,
-                    componentProps: { resolverType: "clutch.aws.ec2.v1.AutoscalingGroup" },
-                    description: "Resize an autoscaling group.",
-                    displayName: "Resize Autoscaling Group",
-                    path: "asg/resize",
-                    requiredConfigProps: ["resolverType"],
-                  },
-                ],
-              },
-            ],
-          }}
-        >
+    StoryFn => (
+      <ApplicationContext.Provider
+        // eslint-disable-next-line react/jsx-no-constructed-context-values
+        value={{
+          workflows,
+        }}
+      >
+        <UserPreferencesProvider>
           <StoryFn />
-        </ApplicationContext.Provider>
-      );
-    },
+        </UserPreferencesProvider>
+      </ApplicationContext.Provider>
+    ),
   ],
-  parameters: {
-    layout: "fullscreen",
-  },
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
 
-export const Header: React.FC<{}> = () => <HeaderComponent />;
+export const Basic: Story = {
+  render: args => (
+    <MemoryRouter>
+      <Header {...args} />
+    </MemoryRouter>
+  ),
+};

frontend/packages/core/src/AppLayout/stories/logo.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta } from "@storybook/react";
 import LogoComponent from "../logo";
 
 export default {
-  title: "Core/AppLayout/Logo",
+  title: "Core/Layout/Header/Logo",
   component: LogoComponent,
 } as Meta;
 

frontend/packages/core/src/AppLayout/stories/notifications.stories.tsx

@@ -7,7 +7,7 @@ import type { NotificationsProp } from "../notifications";
 import NotificationsComponent from "../notifications";
 
 export default {
-  title: "Core/AppLayout/Notifications",
+  title: "Core/Layout/Header/Notifications",
   component: NotificationsComponent,
 } as Meta;
 

frontend/packages/core/src/AppLayout/stories/searchfield.stories.tsx

@@ -8,7 +8,7 @@ import { ApplicationContext } from "../../Contexts/app-context";
 import SearchFieldComponent from "../search";
 
 export default {
-  title: "Core/AppLayout/Search Field",
+  title: "Core/Layout/Header/Search Field",
   component: SearchFieldComponent,
   decorators: [
     Search => {

frontend/packages/core/src/AppLayout/stories/user-information.stories.tsx

@@ -7,7 +7,7 @@ import type { UserInformationProps } from "../user";
 import { UserInformation as UserInformationComponent } from "../user";
 
 export default {
-  title: "Core/AppLayout/User Information",
+  title: "Core/Layout/Header/User Info",
   component: UserInformationComponent,
 } as Meta;
 

frontend/packages/core/src/AppProvider/registrar.tsx

@@ -67,7 +67,7 @@ const registeredWorkflows = async (
 ): Promise<Workflow[]> => {
   // eslint-disable-next-line no-async-promise-executor
   return new Promise(async resolve => {
-    let validWorkflows = Object.keys(workflows || [])
+    let validWorkflows: Workflow[] = Object.keys(workflows || [])
       .map((workflowId: string) => {
         const workflow = workflows[workflowId]();
         const icon = configuration?.[workflowId]?.icon || { path: "" };