initial storybook implmentation

horreum-web/.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from "@storybook/react-webpack5"
+
+const config: StorybookConfig = {
+    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@storybook/preset-create-react-app",
+        "@storybook/addon-onboarding",
+        "@storybook/addon-interactions",
+    ],
+    framework: {
+        name: "@storybook/react-webpack5",
+        options: {
+            builder: {
+                useSWC: true,
+            },
+        },
+    },
+    docs: {
+        autodocs: "tag",
+    },
+    staticDirs: ["../public"],
+}
+export default config

horreum-web/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react"
+import "@patternfly/patternfly/patternfly.css"
+const preview: Preview = {
+    parameters: {
+        actions: { argTypesRegex: "^on[A-Z].*" },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+}
+
+export default preview

horreum-web/package.json

@@ -42,6 +42,7 @@
     "redux": "4.2.1",
     "redux-first-history": "5.1.1",
     "redux-thunk": "2.4.1",
+    "storybook": "^7.6.7",
     "typescript": "4.9.5",
     "uuid": "9.0.0"
   },
@@ -51,10 +52,23 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint \"**/*.{ts,tsx}\"",
-    "prettier-format": "prettier --config .prettierrc \"**/*.{ts,tsx}\" --write"
+    "prettier-format": "prettier --config .prettierrc \"**/*.{ts,tsx}\" --write",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "eslintConfig": {
-    "extends": "react-app",
+    "extends": [
+      "r",
+      "e",
+      "a",
+      "c",
+      "t",
+      "-",
+      "a",
+      "p",
+      "p",
+      "plugin:storybook/recommended"
+    ],
     "rules": {
       "no-lone-blocks": 0
     }
@@ -72,11 +86,23 @@
     ]
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/blocks": "^7.6.7",
+    "@storybook/preset-create-react-app": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-webpack5": "^7.6.7",
+    "@storybook/test": "^7.6.7",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
     "eslint": "8.49.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "prettier": "3.1.1",
+    "prop-types": "^15.8.1",
     "react-error-overlay": "6.0.11",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "webpack": "^5.89.0"
   }
 }

horreum-web/src/components/AccessChoice.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import AccessChoice from './AccessChoice';
+import { Access } from "../api"
+
+const meta = {
+    title: "components/AccessChoice",
+    component: AccessChoice,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+
+    }
+} satisfies Meta<typeof AccessChoice>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Public: Story = {
+    args: {
+        checkedValue: Access.Public
+    }
+}
+export const Private: Story = {
+    args: {
+        checkedValue: Access.Private
+    }
+}
+export const Protected: Story = {
+    args: {
+        checkedValue: Access.Protected
+    }
+}

horreum-web/src/components/AccessIcon.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import AccessIcon from './AccessIcon';
+import { Access } from "../api"
+const meta = {
+    title: "components/AccessIcon",
+    component: AccessIcon,
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+        layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    // More on argTypes: https://storybook.js.org/docs/api/argtypes
+    argTypes: {
+
+    },  
+} satisfies Meta<typeof AccessIcon>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Public: Story = {
+    args: {
+        access: Access.Public
+    }
+}
+export const Private: Story = {
+    args: {
+        access: Access.Private
+    }
+}
+export const Protected: Story = {
+    args: {
+        access: Access.Protected
+    }
+}

horreum-web/src/components/AccessIconOnly.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import AccessIconOnly from './AccessIconOnly';
+import { Access } from "../api"
+const meta = {
+    title: "components/AccessIconOnly",
+    component: AccessIconOnly,
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+        layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    // More on argTypes: https://storybook.js.org/docs/api/argtypes
+    argTypes: {
+
+    },  
+} satisfies Meta<typeof AccessIconOnly>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Public: Story = {
+    args: {
+        access: Access.Public
+    }
+}
+export const Private: Story = {
+    args: {
+        access: Access.Private
+    }
+}
+export const Protected: Story = {
+    args: {
+        access: Access.Protected
+    }
+}

horreum-web/src/components/ActionMenu.stories.tsx

@@ -0,0 +1,58 @@
+
+
+import type { Meta, StoryObj } from '@storybook/react';
+import ActionMenu, {useChangeAccess, useDelete } from './ActionMenu';
+//Things we have to import because of component dependencies
+import { Access } from "../api"
+import {Provider} from "react-redux"
+import store from "../store"
+
+/**
+ * We have to wrap with a Provider because ActionMenu uses useTester
+ * which directly depends on the redux state from keycloak
+ */
+
+const meta = {
+    title: "components/ActionMenu",
+    component: ActionMenu,
+    decorators: [
+        //{auth: roles: ["tester", "ow-tester"]
+        (Story) => (<Provider store={store}><Story/></Provider>),
+    ],
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+
+    }
+} satisfies Meta<typeof ActionMenu>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ChangeAccess: Story = {
+    args: {
+        id: 0,
+        owner: "owner",
+        access: Access.Public,
+        description: "empty",
+        items: [useChangeAccess({
+            onAccessUpdate: (id, owner, access) => {return id},
+        })]
+    }
+}
+
+//Invalid Hook call (onDelete?) outside of react render
+//Cannot read properties of null (reading 'useState')
+//useDelete
+// export const Delete: Story = {
+//     args: {
+//         id: 1,
+//         owner: "owner",
+//         access: Access.Public,
+//         description: "empty",
+//         items: [useDelete({
+//             onDelete: (id) => {return new Promise((a,b)=>a)},
+//         })]
+//     }
+// }

horreum-web/src/components/ButtonLink.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ButtonLink from './ButtonLink';
+//Things we have to import because of component dependencies
+import {Router} from "react-router-dom"
+import {createBrowserHistory} from "history";
+
+const meta = {
+    title: "components/ButtonLink",
+    component: ButtonLink,
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (<Router history={createBrowserHistory()}><Story/></Router>),
+    ],
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    // More on argTypes: https://storybook.js.org/docs/api/argtypes
+    argTypes: {
+
+    },  
+} satisfies Meta<typeof ButtonLink>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Primary: Story = {
+    args: {
+        variant: "primary",
+        to: "link",
+        isDisabled: false,
+        children: [<>buttonLink</>]
+    },
+}
+export const Secondary: Story = {
+    args: {
+        variant: "secondary",
+        to: "link",
+        isDisabled: false,
+        children: [<>buttonLink</>]
+    },
+}
+export const Tertiary: Story = {
+    args: {
+        variant: "tertiary",
+        to: "link",
+        isDisabled: false,
+        children: [<>buttonLink</>]
+    },
+}
+export const Control: Story = {
+    args: {
+        variant: "control",
+        to: "link",
+        isDisabled: false,
+        children: [<>buttonLink</>]
+    },
+}
+export const Disabled: Story = {
+    args: {
+        variant: "primary",
+        to: "link",
+        isDisabled: true,
+        children: [<>buttonLink</>]
+    },
+}

horreum-web/src/components/ChangeAccessModal.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ChangeAccessModal from './ChangeAccessModal';
+
+//Things we have to import because of component dependencies
+import { Access } from "../api"
+import {Provider, useSelector} from "react-redux"
+import store from "../store"
+
+const meta = {
+    title: "components/ChangeAccessModal",
+    component: ChangeAccessModal,
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+        layout: 'centered',
+    },
+    decorators: [
+        (Story) => (<Provider store={store}><Story/></Provider>),
+    ],
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    // More on argTypes: https://storybook.js.org/docs/api/argtypes
+    argTypes: {
+
+    },  
+} satisfies Meta<typeof ChangeAccessModal>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+//render error because it tries to fetch the selection with teamToName
+export const Open: Story = {
+    args: {
+        isOpen: true,
+        owner: "owner",
+        access: Access.Public
+    },
+}