Docs: Created ArgTypes component and stories

code/ui/blocks/src/blocks/ArgTypes.stories.tsx

@@ -1,14 +1,13 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ArgTypes } from './ArgTypes';
-import * as ButtonStories from '../examples/Button.stories';
+import * as ExampleStories from '../examples/ArgTypesParameters.stories';
 
 const meta: Meta<typeof ArgTypes> = {
   title: 'Blocks/ArgTypes',
   component: ArgTypes,
   parameters: {
-    relativeCsfPaths: ['../examples/Button.stories', '../blocks/ArgTypes.stories'],
+    relativeCsfPaths: ['../examples/ArgTypesParameters.stories'],
   },
 };
 export default meta;
@@ -19,88 +18,65 @@ export const Default: Story = {};
 
 export const OfComponent: Story = {
   args: {
-    of: ButtonStories.default.component,
+    of: ExampleStories.default.component,
   },
 };
 
 export const OfMeta: Story = {
   args: {
-    of: ButtonStories.default,
+    of: ExampleStories.default,
   },
 };
 
 export const OfStory: Story = {
   args: {
-    of: ButtonStories.Primary,
+    of: ExampleStories.NoParameters,
   },
 };
 
 // NOTE: this will throw with no of prop
 export const OfStoryUnattached: Story = {
   parameters: { attached: false },
   args: {
-    of: ButtonStories.Primary,
-  },
-};
-
-export const Simple = {
-  render: () => <div>Story for reference</div>,
-  argTypes: {
-    a: { type: { name: 'string' }, name: 'A', description: 'a' },
-    b: { type: { name: 'string', required: true }, name: 'B', description: 'b' },
+    of: ExampleStories.NoParameters,
   },
 };
 
 export const IncludeProp: Story = {
   args: {
-    of: Simple,
-    include: ['A'],
+    of: ExampleStories.NoParameters,
+    include: ['a'],
   },
 };
 
-export const SimpleInclude = {
-  ...Simple,
-  parameters: { docs: { argTypes: { include: ['A'] } } },
-};
-
 export const IncludeParameter: Story = {
   args: {
-    of: SimpleInclude,
+    of: ExampleStories.Include,
   },
 };
 
 export const ExcludeProp: Story = {
   args: {
-    of: Simple,
-    exclude: ['A'],
+    of: ExampleStories.NoParameters,
+    exclude: ['a'],
   },
 };
 
-export const SimpleExclude = {
-  ...Simple,
-  parameters: { docs: { argTypes: { exclude: ['A'] } } },
-};
-
 export const ExcludeParameter: Story = {
   args: {
-    of: SimpleExclude,
+    of: ExampleStories.Exclude,
   },
 };
 
 export const SortProp: Story = {
   args: {
-    of: Simple,
-    sort: 'requiredFirst',
+    of: ExampleStories.NoParameters,
+    sort: 'alpha',
   },
 };
 
-export const SimpleSort = {
-  ...Simple,
-  parameters: { docs: { argTypes: { sort: 'requiredFirst' } } },
-};
-
 export const SortParameter: Story = {
   args: {
-    of: SimpleSort,
+    of: ExampleStories.Sort,
   },
 };

code/ui/blocks/src/blocks/ArgTypes.tsx

@@ -3,7 +3,7 @@ import type { Parameters, Renderer, StrictArgTypes } from '@storybook/csf';
 import type { ModuleExports } from '@storybook/types';
 import type { FC } from 'react';
 import type { PropDescriptor } from '@storybook/preview-api';
-import { combineParameters, filterArgTypes } from '@storybook/preview-api';
+import { filterArgTypes } from '@storybook/preview-api';
 import type { ArgTypesExtractor } from '@storybook/docs-tools';
 import React from 'react';
 
@@ -47,14 +47,9 @@ function getArgTypesFromResolved(resolved: ReturnType<typeof useOf>, props: ArgT
 
   if (resolved.type === 'meta') {
     const {
-      preparedMeta: { component, argTypes, parameters },
+      preparedMeta: { argTypes, parameters },
     } = resolved;
-    const componentArgTypes = component && extractComponentArgTypes(component, parameters);
-    const metaArgTypes = filterArgTypes(argTypes, props.include, props.exclude);
-    return {
-      argTypes: combineParameters(componentArgTypes, metaArgTypes) as StrictArgTypes,
-      parameters,
-    };
+    return { argTypes, parameters };
   }
 
   // In the case of the story, the enhanceArgs argTypeEnhancer has already added the extracted

code/ui/blocks/src/examples/ArgTypesParameters.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ArgTypesParameters } from './ArgTypesParameters';
+
+/**
+ * Reference stories to be used by the ArgTypes stories
+ */
+const meta = {
+  title: 'Example/Stories for ArgTypes',
+  component: ArgTypesParameters,
+  args: { b: 'b' },
+  argTypes: {
+    // @ts-expect-error Meta type is trying to force us to use real props as args
+    extraMetaArgType: {
+      type: { name: 'string' },
+      name: 'Extra Meta',
+      description: 'An extra argtype added at the meta level',
+      table: { defaultValue: { summary: "'a default value'" } },
+    },
+  },
+} satisfies Meta<typeof ArgTypesParameters>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * This is the primary mode for the button
+ *
+ * _this description was written as a comment above the story_
+ */
+export const NoParameters: Story = {
+  argTypes: {
+    // @ts-expect-error Story type is trying to force us to use real props as args
+    extraStoryArgType: {
+      type: { name: 'string' },
+      name: 'Extra Story',
+      description: 'An extra argtype added at the story level',
+      table: { defaultValue: { summary: "'a default value'" } },
+    },
+  },
+};
+
+export const Include = {
+  ...NoParameters,
+  parameters: { docs: { argTypes: { include: ['a'] } } },
+};
+
+export const Exclude = {
+  ...NoParameters,
+  parameters: { docs: { argTypes: { exclude: ['a'] } } },
+};
+
+export const Sort = {
+  ...NoParameters,
+  parameters: { docs: { argTypes: { sort: 'alpha' } } },
+};

code/ui/blocks/src/examples/ArgTypesParameters.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+type PropTypes = { a?: string; b: string };
+
+export const ArgTypesParameters = ({ a = 'a', b }: PropTypes) => <div>Example story</div>;

code/ui/blocks/src/examples/Button.stories.tsx

@@ -12,13 +12,6 @@ const meta = {
   tags: ['autodocs'],
   argTypes: {
     backgroundColor: { control: 'color' },
-    // @ts-expect-error Meta type is trying to force us to use real props as args
-    extraMetaArgType: {
-      type: { name: 'string' },
-      name: 'Extra Meta',
-      description: 'An extra argtype added at the meta level',
-      table: { defaultValue: { summary: "'a default value'" } },
-    },
   },
   parameters: {
     // Stop *this* story from being stacked in Chromatic
@@ -43,15 +36,6 @@ export const Primary: Story = {
     primary: true,
     label: 'Button',
   },
-  argTypes: {
-    // @ts-expect-error Story type is trying to force us to use real props as args
-    extraStoryArgType: {
-      type: { name: 'string' },
-      name: 'Extra Story',
-      description: 'An extra argtype added at the story level',
-      table: { defaultValue: { summary: "'a default value'" } },
-    },
-  },
 };
 
 export const Secondary: Story = {