Add stories for assign attribute value modals

.changeset/sparkly-buckets-vanish.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Maintanance: Added stories for Assign attribute value modals and configuration for mocking GraphQL responses in Storybook.

.storybook/vite.storybook.config.js

@@ -11,6 +11,7 @@ export default defineConfig({
       "@dashboard": path.resolve(__dirname, "..", "./src"),
       src: path.resolve(__dirname, "..", "./src"),
       moment: path.resolve(__dirname, "..", "./node_modules/moment/min/moment-with-locales.js"),
+      "@storybookUtils": path.resolve(__dirname, "..", "./storybookUtils"),
     },
   },
 

codegen-main.ts

@@ -69,6 +69,28 @@ const config: CodegenConfig = {
         typesPath: "./types.generated",
       },
     },
+    "./src/graphql/fabbricaTypes.generated.ts": {
+      plugins: ["typescript"],
+      config: {
+        enumsAsTypes: true,
+        avoidOptionals: true,
+        nonOptionalTypename: true,
+        scalars: {
+          Day: "number",
+          Hour: "number",
+          Date: "string",
+        },
+        namingConvention: {
+          enumValues: "change-case-all#upperCase",
+        },
+      },
+    },
+    "./src/graphql/fabbrica.generated.ts": {
+      plugins: ["@mizdra/graphql-codegen-typescript-fabbrica"],
+      config: {
+        typesFile: "./fabbricaTypes.generated",
+      },
+    },
   },
 };
 

eslint.config.mjs

@@ -200,7 +200,7 @@ export default tseslint.config(
     },
   }, // Disable rules for specific files
   {
-    files: ["vite.config.js"],
+    files: ["vite.config.js", ".storybook/vite.storybook.config.js"],
     languageOptions: {
       globals: {
         ...globals.node,

package.json

@@ -157,6 +157,7 @@
     "@graphql-codegen/typescript-operations": "^2.5.13",
     "@graphql-codegen/typescript-react-apollo": "^3.3.7",
     "@graphql-eslint/eslint-plugin": "^4.4.0",
+    "@mizdra/graphql-codegen-typescript-fabbrica": "^0.6.1",
     "@playwright/test": "1.56.1",
     "@saleor/app-sdk": "1.7.0",
     "@sentry/cli": "^2.58.2",

src/components/AssignCategoryDialog/AssignCategoryDialog.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CategoryFactory } from "@storybookUtils/AssignDialogShared/factories";
+import { ComponentProps } from "react";
+import { fn } from "storybook/test";
+
+import AssignCategoryDialog from "./AssignCategoryDialog";
+
+type Props = ComponentProps<typeof AssignCategoryDialog>;
+
+const meta: Meta<typeof AssignCategoryDialog> = {
+  title: "Components/Dialogs/AssignCategoryDialog",
+  component: AssignCategoryDialog,
+  loaders: [async () => ({ categories: await CategoryFactory.buildList(8) })],
+  render: (args: Props, { loaded }: { loaded: { categories: Props["categories"] } }) => (
+    <AssignCategoryDialog {...args} categories={args.categories ?? loaded.categories} />
+  ),
+  argTypes: {
+    confirmButtonState: {
+      control: "inline-radio",
+      options: ["default", "loading", "success", "error"],
+    },
+    onClose: { table: { disable: true } },
+    onFetch: { table: { disable: true } },
+    onFetchMore: { table: { disable: true } },
+    onSubmit: { table: { disable: true } },
+    categories: { table: { disable: true } },
+    labels: { table: { disable: true } },
+  },
+  args: {
+    open: true,
+    loading: false,
+    hasMore: false,
+    confirmButtonState: "default",
+    onClose: fn(),
+    onFetch: fn(),
+    onFetchMore: fn(),
+    onSubmit: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AssignCategoryDialog>;
+
+export const Default: Story = {};
+
+export const SingleSelection: Story = {
+  args: { selectionMode: "single" },
+};
+
+export const Loading: Story = {
+  args: { loading: true, categories: [] },
+};
+
+export const Empty: Story = {
+  args: { categories: [] },
+};
+
+export const HasMore: Story = {
+  args: { hasMore: true },
+};