@axinom/mosaic-ui 0.71.0 → 0.72.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.71.0",
+  "version": "0.72.0-rc.4",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -28,11 +28,11 @@
     "test:ci": "vitest run --reporter=default --reporter=junit --coverage --coverage.reporter=cobertura --coverage.reporter=html",
     "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\" --loglevel silent",
     "lint": "eslint . --ext .ts,.tsx,.js --color --cache",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "cross-env STORYBOOK_A11Y=true storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.33",
+    "@axinom/mosaic-core": "^0.4.34-rc.4",
     "@faker-js/faker": "^7.4.0",
     "@geoffcox/react-splitter": "^2.1.2",
     "@mui/base": "5.0.0-beta.40",
@@ -62,21 +62,17 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@mdx-js/react": "^1.6.22",
     "@optimize-lodash/rollup-plugin": "^4.0.1",
     "@rollup/plugin-commonjs": "^15.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-url": "^8.0.1",
-    "@storybook/addon-essentials": "^7.0.6",
-    "@storybook/addon-interactions": "^7.0.6",
-    "@storybook/addon-links": "^7.0.6",
-    "@storybook/addon-storysource": "^7.0.6",
-    "@storybook/addons": "^7.0.6",
+    "@storybook/addon-a11y": "10.4.2",
+    "@storybook/addon-docs": "^10.4.2",
+    "@storybook/addon-links": "^10.4.2",
+    "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.0.6",
-    "@storybook/react-webpack5": "^7.0.6",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.6",
+    "@storybook/react": "^10.4.2",
+    "@storybook/react-webpack5": "^10.4.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
@@ -104,7 +100,7 @@
     "rollup-plugin-visualizer": "^5.8.3",
     "sass": "^1.57.1",
     "sass-loader": "^12.3.0",
-    "storybook": "^7.0.6",
+    "storybook": "^10.4.2",
     "style-loader": "^3.3.1",
     "typescript": "^5.9.3",
     "typescript-plugin-css-modules": "^5.0.2",
@@ -113,5 +109,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "75dcfd9bf92de1ef72a28f073e43a7dfaa7b430b"
+  "gitHead": "1286a116f2e06be15726a9094b19987c56d3bc49"
 }

package/src/components/Actions/Action/index.ts

@@ -1 +1,2 @@
-export { Action, ActionProps } from './Action';
+export { Action } from './Action';
+export type { ActionProps } from './Action';

package/src/components/Actions/Actions.stories.tsx

@@ -1,7 +1,7 @@
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
+import { action } from 'storybook/actions';
 import { createGroups, generateItemArray } from '../../helpers/storybook';
 import { Actions, ActionsProps } from './Actions';
 import { ActionData } from './Actions.models';

package/src/components/Actions/index.ts

@@ -1,2 +1,3 @@
-export { Actions, ActionsProps } from './Actions';
+export { Actions } from './Actions';
+export type { ActionsProps } from './Actions';
 export * from './Actions.models';

package/src/components/Buttons/Button/index.ts

@@ -1,2 +1,2 @@
 export { Button } from './Button';
-export { ButtonProps } from './Button.model';
+export type { ButtonProps } from './Button.model';

package/src/components/Buttons/CompositeButton/index.ts

@@ -1,2 +1,2 @@
 export { CompositeButton } from './CompositeButton';
-export { CompositeButtonProps } from './CompositeButton.model';
+export type { CompositeButtonProps } from './CompositeButton.model';

package/src/components/Buttons/TextButton/index.ts

@@ -1,2 +1,2 @@
 export { TextButton } from './TextButton';
-export { TextButtonProps } from './TextButton.model';
+export type { TextButtonProps } from './TextButton.model';

package/src/components/DynamicDataList/DynamicDataList.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+import { action } from 'storybook/actions';
 import * as Yup from 'yup';
 import { createGroups, generateItemArray } from '../../helpers/storybook';
 import { ButtonContext } from '../Buttons';

package/src/components/EmptyStation/EmptyStation.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../helpers/storybook';
 import { IconName } from '../Icons/Icons.models';
 import { EmptyStation } from './EmptyStation';

package/src/components/Explorer/BulkEdit/BulkEdit.model.ts

@@ -23,5 +23,12 @@ export interface BulkEditConfig {
     set?: string;
     filter?: string;
   };
+  /**
+   * Names of the filter fields whose values are backed by a GraphQL enum.
+   * Their values are wrapped so they are emitted as bare enum literals
+   * (e.g. `status: { in: [ACTIVE] }`) rather than quoted strings when the
+   * filter is inlined into the generated mutation document.
+   */
+  filterEnumFields?: string[];
   fields: BulkEditFieldConfigMap;
 }

package/src/components/Explorer/BulkEdit/GenerateMutation.spec.tsx

@@ -157,6 +157,57 @@ describe('generateBulkEditMutation', () => {
     );
   });
 
+  it('should emit enum filter values as bare enum literals, not quoted strings', () => {
+    const config: BulkEditConfig = {
+      mutation: 'bulkEditUsersAsync',
+      filterEnumFields: ['status'],
+      fields: {
+        name: {
+          type: 'String',
+          label: 'Name',
+          originalFieldName: 'name',
+          action: 'set',
+        },
+      },
+    };
+
+    const result = generateBulkEditMutation(
+      config,
+      { name: 'New Name' },
+      { status: { in: ['ACTIVE', 'BLOCKED'], isNull: false } },
+    );
+
+    // `status` values are bare enum literals, while `isNull` stays boolean.
+    expect(result).toBe(
+      `mutation { bulkEditUsersAsync (set: {name: "New Name"}, filter: {status: {in: [ACTIVE, BLOCKED], isNull: false}}) { filterMatchedIds } }`,
+    );
+  });
+
+  it('should leave the filter untouched when no filterEnumFields are configured', () => {
+    const config: BulkEditConfig = {
+      mutation: 'bulkEditUsersAsync',
+      fields: {
+        name: {
+          type: 'String',
+          label: 'Name',
+          originalFieldName: 'name',
+          action: 'set',
+        },
+      },
+    };
+
+    const result = generateBulkEditMutation(
+      config,
+      { name: 'New Name' },
+      { status: { in: ['ACTIVE'] } },
+    );
+
+    // Without filterEnumFields the value remains a quoted string.
+    expect(result).toBe(
+      `mutation { bulkEditUsersAsync (set: {name: "New Name"}, filter: {status: {in: ["ACTIVE"]}}) { filterMatchedIds } }`,
+    );
+  });
+
   it('should use custom key names when provided in config', () => {
     const configWithCustomKeys: BulkEditConfig = {
       mutation: 'bulkEditCustom',

package/src/components/Explorer/BulkEdit/GenerateMutation.tsx

@@ -1,6 +1,7 @@
 import { jsonToGraphQLQuery } from 'json-to-graphql-query';
 import { Data } from '../../../types';
 import { BulkEditConfig } from './BulkEdit.model';
+import { wrapFilterEnums } from './helpers/wrapFilterEnums';
 
 export const generateBulkEditMutation = <T extends Data>(
   config: BulkEditConfig,
@@ -154,6 +155,15 @@ export const generateBulkEditMutation = <T extends Data>(
     throw new Error('No valid fields to generate mutation');
   }
 
+  // Enum filter values must be emitted as bare GraphQL enum literals
+  // (e.g. `status: { in: [ACTIVE] }`), not quoted strings, when inlined into
+  // the mutation document. Wrap them based on the enum fields declared in the
+  // config so `jsonToGraphQLQuery` renders them without quotes.
+  const wrappedFilter: object | undefined =
+    filter && config.filterEnumFields?.length
+      ? (wrapFilterEnums(filter, config.filterEnumFields) as object)
+      : filter;
+
   return jsonToGraphQLQuery({
     mutation: {
       [mutation]: {
@@ -170,7 +180,7 @@ export const generateBulkEditMutation = <T extends Data>(
           ...(Object.keys(set).length > 0 && {
             [setKey]: set,
           }),
-          ...(filter && { [filterKey]: filter }),
+          ...(wrappedFilter && { [filterKey]: wrappedFilter }),
         },
         filterMatchedIds: true,
       },

package/src/components/Explorer/BulkEdit/helpers/wrapFilterEnums.spec.ts

@@ -0,0 +1,80 @@
+import { EnumType } from 'json-to-graphql-query';
+import { describe, expect, it } from 'vitest';
+import { wrapFilterEnums } from './wrapFilterEnums';
+
+describe('wrapFilterEnums', () => {
+  it('wraps the values of an `in` list as enum literals', () => {
+    expect(
+      wrapFilterEnums({ status: { in: ['ACTIVE', 'BLOCKED'] } }, ['status']),
+    ).toEqual({
+      status: { in: [new EnumType('ACTIVE'), new EnumType('BLOCKED')] },
+    });
+  });
+
+  it('wraps a scalar operator value as an enum literal', () => {
+    expect(
+      wrapFilterEnums({ status: { equalTo: 'ACTIVE' } }, ['status']),
+    ).toEqual({ status: { equalTo: new EnumType('ACTIVE') } });
+  });
+
+  it('leaves the boolean `isNull` operator untouched', () => {
+    expect(
+      wrapFilterEnums({ status: { in: ['ACTIVE'], isNull: false } }, [
+        'status',
+      ]),
+    ).toEqual({ status: { in: [new EnumType('ACTIVE')], isNull: false } });
+  });
+
+  it('leaves fields that are not enum-backed untouched', () => {
+    expect(
+      wrapFilterEnums(
+        {
+          status: { equalTo: 'ACTIVE' },
+          email: { includesInsensitive: 'axinom' },
+        },
+        ['status'],
+      ),
+    ).toEqual({
+      status: { equalTo: new EnumType('ACTIVE') },
+      email: { includesInsensitive: 'axinom' },
+    });
+  });
+
+  it('recurses through the logical and/or/not operators', () => {
+    expect(
+      wrapFilterEnums(
+        {
+          and: [
+            { status: { equalTo: 'ACTIVE' } },
+            { not: { status: { equalTo: 'BLOCKED' } } },
+          ],
+        },
+        ['status'],
+      ),
+    ).toEqual({
+      and: [
+        { status: { equalTo: new EnumType('ACTIVE') } },
+        { not: { status: { equalTo: new EnumType('BLOCKED') } } },
+      ],
+    });
+  });
+
+  it('returns the filter unchanged when no enum fields are present', () => {
+    const filter = { status: { in: ['ACTIVE'] } };
+    expect(wrapFilterEnums(filter, [])).toEqual({ status: { in: ['ACTIVE'] } });
+  });
+
+  it('leaves a null enum value untouched rather than wrapping it', () => {
+    expect(wrapFilterEnums({ status: { equalTo: null } }, ['status'])).toEqual({
+      status: { equalTo: null },
+    });
+  });
+
+  it('throws for a value that is not a valid enum literal token', () => {
+    expect(() =>
+      wrapFilterEnums({ status: { equalTo: 'ACTIVE"} injection' } }, [
+        'status',
+      ]),
+    ).toThrow(/Invalid enum value/);
+  });
+});

package/src/components/Explorer/BulkEdit/helpers/wrapFilterEnums.ts

@@ -0,0 +1,87 @@
+import { EnumType } from 'json-to-graphql-query';
+
+// A GraphQL enum value is a Name: /[_A-Za-z][_0-9A-Za-z]*/.
+const ENUM_LITERAL_PATTERN = /^[_A-Za-z][_0-9A-Za-z]*$/;
+
+/**
+ * Recursively wraps the values of enum-backed filter fields with `EnumType` so
+ * they are serialized as bare GraphQL enum literals (e.g. `status: { in: [ACTIVE] }`)
+ * rather than quoted strings when the filter is inlined into a mutation document.
+ * Descends through the logical `and`/`or`/`not` operators and leaves every other
+ * field untouched.
+ *
+ * @param filter     the (PostGraphile) filter object to transform.
+ * @param enumFields names of the filter fields whose values are enum-backed.
+ */
+export function wrapFilterEnums(
+  filter: unknown,
+  enumFields: string[],
+): unknown {
+  if (Array.isArray(filter)) {
+    return filter.map((item) => wrapFilterEnums(item, enumFields));
+  }
+
+  if (filter === null || typeof filter !== 'object') {
+    return filter;
+  }
+
+  return Object.entries(filter as Record<string, unknown>).reduce(
+    (acc, [key, value]) => {
+      if (key === 'and' || key === 'or' || key === 'not') {
+        acc[key] = wrapFilterEnums(value, enumFields);
+      } else if (enumFields.includes(key)) {
+        acc[key] = wrapEnumCondition(value);
+      } else {
+        acc[key] = value;
+      }
+      return acc;
+    },
+    {} as Record<string, unknown>,
+  );
+}
+
+/**
+ * Wraps each operator value of a filter condition (e.g. `{ in: ['ACTIVE'] }`,
+ * `{ equalTo: 'ACTIVE' }`) with `EnumType`. The boolean `isNull` operator is
+ * left as-is since it is not an enum value.
+ */
+function wrapEnumCondition(condition: unknown): unknown {
+  if (condition === null || typeof condition !== 'object') {
+    return condition;
+  }
+
+  return Object.entries(condition as Record<string, unknown>).reduce(
+    (acc, [op, value]) => {
+      if (op === 'isNull') {
+        acc[op] = value;
+      } else {
+        acc[op] = Array.isArray(value)
+          ? value.map((item) => toEnumLiteral(item))
+          : toEnumLiteral(value);
+      }
+      return acc;
+    },
+    {} as Record<string, unknown>,
+  );
+}
+
+/**
+ * Wraps a single enum value with `EnumType` so it is emitted as a bare GraphQL
+ * enum literal. `null`/`undefined` are left untouched (e.g. `equalTo: null`),
+ * and any value that is not a valid enum literal token throws instead of being
+ * inlined unquoted — guarding against an invalid (or injectable) document.
+ */
+function toEnumLiteral(value: unknown): unknown {
+  if (value === null || value === undefined) {
+    return value;
+  }
+
+  const token = String(value);
+  if (!ENUM_LITERAL_PATTERN.test(token)) {
+    throw new Error(
+      `Invalid enum value "${token}" in bulk edit filter: enum values must match ${ENUM_LITERAL_PATTERN}.`,
+    );
+  }
+
+  return new EnumType(token);
+}

package/src/components/Explorer/BulkEdit/index.ts

@@ -1,6 +1,7 @@
 export { EnumType as BulkEditEnumType } from 'json-to-graphql-query';
 export type * from './BulkEdit.model';
-export { BulkEditContext, BulkEditContextType } from './BulkEditContext';
+export { BulkEditContext } from './BulkEditContext';
+export type { BulkEditContextType } from './BulkEditContext';
 export {
   BulkEditFormFieldsConfigConverter,
   defaultComponentMap,

package/src/components/Explorer/Explorer.stories.tsx

@@ -1,9 +1,9 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import { Field } from 'formik';
 import React, { useContext } from 'react';
 import { MemoryRouter } from 'react-router';
+import { action } from 'storybook/actions';
 import * as Yup from 'yup';
 import {
   createGroups,

package/src/components/Explorer/NavigationExplorer/NavigationExplorer.stories.tsx

@@ -1,8 +1,8 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React, { useMemo } from 'react';
 import { MemoryRouter } from 'react-router-dom';
+import { action } from 'storybook/actions';
 import {
   createGroups,
   generateItemArray,

package/src/components/Explorer/SelectionExplorer/SelectionExplorer.stories.tsx

@@ -1,9 +1,9 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import { noop } from 'lodash';
 import React, { useMemo } from 'react';
 import { MemoryRouter } from 'react-router';
+import { action } from 'storybook/actions';
 import {
   createGroups,
   generateItemArray,

package/src/components/Explorer/index.ts

@@ -1,37 +1,34 @@
 export {
-  BulkEditConfig,
   BulkEditContext,
-  BulkEditContextType,
   BulkEditEnumType,
-  BulkEditFieldConfig,
-  BulkEditFieldConfigMap,
   BulkEditFormFieldsConfigConverter,
   defaultComponentMap,
   generateBulkEditMutation,
 } from './BulkEdit';
-export { Explorer, ExplorerProps } from './Explorer';
-export {
+export type {
+  BulkEditConfig,
+  BulkEditContextType,
+  BulkEditFieldConfig,
+  BulkEditFieldConfigMap,
+} from './BulkEdit';
+export { Explorer } from './Explorer';
+export type { ExplorerProps } from './Explorer';
+export type {
   ExplorerBulkAction,
   ExplorerDataProvider,
   ExplorerDataProviderConnection,
   ItemSelection,
   PageIdentifier,
 } from './Explorer.model';
-export {
-  NavigationExplorer,
-  NavigationExplorerProps,
-} from './NavigationExplorer/NavigationExplorer';
-export {
-  QuickEditContext,
-  QuickEditContextType,
-} from './QuickEdit/QuickEditContext';
-export {
-  SelectionExplorer,
-  SelectionExplorerProps,
-} from './SelectionExplorer/SelectionExplorer';
 export {
   createInMemoryDataProvider,
   findAnywhereInString,
   findAnywhereInStringCaseInsensitive,
   findExact,
 } from './helpers/InMemoryDataProvider';
+export { NavigationExplorer } from './NavigationExplorer/NavigationExplorer';
+export type { NavigationExplorerProps } from './NavigationExplorer/NavigationExplorer';
+export { QuickEditContext } from './QuickEdit/QuickEditContext';
+export type { QuickEditContextType } from './QuickEdit/QuickEditContext';
+export { SelectionExplorer } from './SelectionExplorer/SelectionExplorer';
+export type { SelectionExplorerProps } from './SelectionExplorer/SelectionExplorer';

package/src/components/Filters/Filters.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { generateItemArray } from '../../helpers/storybook';
 import { TextButton } from '../Buttons/TextButton/TextButton';
 import { Checkbox } from '../FormElements';

package/src/components/FormElements/Checkbox/Checkbox.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { Checkbox } from './Checkbox';
 

package/src/components/FormElements/CustomTags/CustomTags.stories.tsx

@@ -1,6 +1,6 @@
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { CustomTags } from './CustomTags';
 

package/src/components/FormElements/DateTimeField/DateTimeText.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { DateTimeText } from './DateTimeText';
 

package/src/components/FormElements/FileUploadControl/FileUploadControl.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { noop } from '../../../helpers/utils';
 import { FileUploadControl } from './FileUploadControl';

package/src/components/FormElements/MaskedSingleLineText/MaskedSingleLineText.stories.tsx

@@ -1,6 +1,6 @@
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { MaskedSingleLineText } from './MaskedSingleLineText';
 

package/src/components/FormElements/Radio/Radio.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { Radio } from './Radio';
 

package/src/components/FormElements/Select/Select.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { Select } from './Select';
 

package/src/components/FormElements/SingleLineText/SingleLineText.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { SingleLineText } from './SingleLineText';
 

package/src/components/FormElements/Tags/Tags.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups, generateItemArray } from '../../../helpers/storybook';
 import { Tags } from './Tags';
 

package/src/components/FormElements/TextArea/TextArea.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { TextArea } from './TextArea';
 

package/src/components/FormElements/ToggleButton/ToggleButton.stories.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
-import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
+import { action } from 'storybook/actions';
 import { createGroups } from '../../../helpers/storybook';
 import { ToggleButton } from './ToggleButton';
 

package/src/components/FormElements/formElements.mdx

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { SampleForm } from './formStoryHelper';
+
+<Meta title="Primary Components/Form Elements" />
+
+# Form Components
+
+This is a sample form, using the form components of this library.  
+For a more detailed description of the single elements, please refer to the
+other stories in this folder.
+
+<SampleForm />