Add stories for assign attribute value modals

[witoszekdev]

Added stories for "Assign ..." modals + configuration for writing more stories, see below.

Stories have manual controls (to hide data props and on* handlers) and setup to display user actions in storybook (e.g. onFilterChange)

Preview

Factories for creating mock data

Previous Dashboard stories had very large files with mock data, which were very similar to each other. These were used to render entire dashboard views. This was hard to maintain, because each props change required updates in numerous storybook files.

Instead in this PR we'll use factories to define how to create each GraphQL type (e.g. Channel, Image, etc.) which can be reused anywhere.

Configured new codegen plugin: @mizdra/graphql-codegen-typescript-fabbrica. It generates factories, that can be used for easily writing mock data to use with tests and stories. Factories are fully typed, they accept default data (which can be also dynamic). Then to build the mock data, we can just call Factory.build(). There are different build methods, e.g. .buildList to generate n items in an array.

Example:

Static fields

export const ChannelFactory = defineChannelFactory({
  defaultFields: {
    __typename: "Channel",
    id: dynamic(({ seq }) => `channel-${seq}`),
    name: "Default Channel",
    slug: "default-channel",
    currencyCode: "USD",
    isActive: true,
  },
});

// in story or other factory

ChannelFactory.build();

Dynamic fields

import {
  defineCategoryFactory,
} from "@dashboard/graphql/fabbrica.generated";


// first create factory

export const CategoryFactory = defineCategoryFactory({
  defaultFields: {
    __typename: "Category",
    id: dynamic(({ seq }) => `category-${seq}`),
    name: dynamic(
      ({ seq }) =>
        [
          "Apparel",
          "Electronics",
          "Home & Garden",
          "Sports & Outdoors",
          "Books & Media",
          "Health & Beauty",
          "Toys & Games",
          "Food & Beverages",
        ][seq % 8]!,
    ),
  },
});


// in story

{ categories: await CategoryFactory.buildList(8) }

More details: https://github.com/mizdra/graphql-codegen-typescript-fabbrica

Request mocking PoC

Added ApolloProvider which uses ApolloLink to return mocked GraphQL responses, based on the document name (e.g. _GetPageTypesChoicesDocument). This allows mocking simple data that is deeply nested (e.g. ConditionalFilters define their own queries, which are reused everywhere)

See: storybookUtils/AssignDialogShared/storyDecorators.tsx

This works for simple use-cases, where we just need to have static definition of responses.

Next steps

• Add more stories
• Use different approach for mocking GraphQL? (ideally we everything should be mockable via props, to test just the UI)
• Migrate to Vitest, so we can use integration tests in Storybook
• Migrate to TypeScript esnext or bundler moduleResolution, right now we need to hack around this with .d.ts

[changeset-bot]

🦋 Changeset detected

Latest commit: 8b4d8b1

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

❌ Patch coverage is 0% with 33 lines in your changes missing coverage. Please review.
✅ Project coverage is 42.55%. Comparing base (9a9769c) to head (8b4d8b1).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
...ssignProductDialog/AssignProductDialog.stories.tsx	0.00%	9 Missing ⚠️
...ignCategoryDialog/AssignCategoryDialog.stories.tsx	0.00%	8 Missing ⚠️
...ollectionDialog/AssignCollectionDialog.stories.tsx	0.00%	8 Missing ⚠️
...ssignVariantDialog/AssignVariantDialog.stories.tsx	0.00%	8 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6334      +/-   ##
==========================================
- Coverage   42.58%   42.55%   -0.04%     
==========================================
  Files        2495     2499       +4     
  Lines       43305    43338      +33     
  Branches    10249     9855     -394     
==========================================
  Hits        18442    18442              
- Misses      23547    24859    +1312     
+ Partials     1316       37    -1279     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Differences Found

⚠️ 2 packages or licenses were added.

Expand

License	Package
MIT	@mizdra/graphql-codegen-typescript-fabbrica
MIT	graphql-relay

Summary

Expand

License Name	Package Count	Packages
0BSD	1	Packages tslib
CC0-1.0	1	Packages type-fest
MIT/X11	1	Packages nub
MPL-1.1	1	Packages harmony-reflect
MPL-2.0	1	Packages dompurify
Public Domain	1	Packages jsonify
Python-2.0	1	Packages argparse
WTFPL	1	Packages utf8-byte-length
CC-BY-4.0	2	Packages @saleor/macaw-ui caniuse-lite
SEE LICENSE IN LICENSE	2	Packages posthog-js spawndamnit
BlueOak-1.0.0	7	Packages @isaacs/cliui glob jackspeak lru-cache minimatch package-json-from-dist path-scurry
<<missing>>	11	Packages @sentry/cli @sentry/cli-darwin @sentry/cli-linux-arm @sentry/cli-linux-arm64 @sentry/cli-linux-i686 @sentry/cli-linux-x64 @sentry/cli-win32-arm64 @sentry/cli-win32-i686 @sentry/cli-win32-x64 busboy streamsearch
BSD-2-Clause	23	Packages browser-process-hrtime css-select css-what domelementtype domhandler domutils dotenv dotenv-expand entities escodegen eslint-scope espree esprima esrecurse estraverse esutils nth-check regjsparser stringify-object terser And 3 more...
ISC	48	Packages @istanbuljs/load-nyc-config anymatch boolbase cli-width cliui electron-to-chromium fastq flatted foreground-child fs.realpath get-caller-file get-own-enumerable-property-symbols glob glob-parent graceful-fs inflight inherits ini isexe knip And 28 more...
BSD-3-Clause	52	Packages @protobufjs/aspromise @protobufjs/base64 @protobufjs/codegen @protobufjs/eventemitter @protobufjs/fetch @protobufjs/float @protobufjs/inquire @protobufjs/path @protobufjs/pool @protobufjs/utf8 @saleor/app-sdk @sentry/cli @sentry/cli-darwin @sentry/cli-linux-arm @sentry/cli-linux-arm64 @sentry/cli-linux-i686 @sentry/cli-linux-x64 @sentry/cli-win32-i686 @sentry/cli-win32-x64 @sinonjs/commons And 32 more...
Apache-2.0	64	Packages @editorjs/editorjs @eslint/config-array @eslint/config-helpers @eslint/core @eslint/object-schema @eslint/plugin-kit @humanfs/core @humanfs/node @humanwhocodes/module-importer @humanwhocodes/retry @opentelemetry/api @opentelemetry/api-logs @opentelemetry/core @opentelemetry/exporter-logs-otlp-http @opentelemetry/otlp-exporter-base @opentelemetry/otlp-transformer @opentelemetry/resources @opentelemetry/sdk-logs @opentelemetry/sdk-metrics @opentelemetry/sdk-trace-base And 44 more...
MIT	1305	Packages @adobe/css-tools @apollo/client @ardatan/relay-compiler @ardatan/sync-fetch @babel/code-frame @babel/compat-data @babel/core @babel/generator @babel/helper-annotate-as-pure @babel/helper-compilation-targets @babel/helper-create-class-features-plugin @babel/helper-globals @babel/helper-member-expression-to-functions @babel/helper-module-imports @babel/helper-module-transforms @babel/helper-optimise-call-expression @babel/helper-plugin-utils @babel/helper-replace-supers @babel/helper-skip-transparent-expression-wrappers @babel/helper-string-parser And 1285 more...