Fixes stories for manifest

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/ui/src/components/Button/Button.tsx

@@ -23,7 +23,36 @@ import { useStyles } from '../../hooks/useStyles';
 import { ButtonDefinition } from './definition';
 import styles from './Button.module.css';
 
-/** @public */
+/**
+ * A button component built on React Aria Components that provides accessible
+ * interactive elements for triggering actions.
+ *
+ * @remarks
+ * The Button component supports multiple variants (primary, secondary, tertiary, danger),
+ * sizes (small, medium), and states including loading and disabled. It automatically
+ * handles keyboard navigation, focus management, and ARIA attributes for accessibility.
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <Button>Click me</Button>
+ * ```
+ *
+ * @example
+ * With icons and loading state:
+ * ```tsx
+ * <Button
+ *   variant="primary"
+ *   size="medium"
+ *   iconStart={<IconComponent />}
+ *   loading={isSubmitting}
+ * >
+ *   Submit
+ * </Button>
+ * ```
+ *
+ * @public
+ */
 export const Button = forwardRef(
   (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {
     const { classNames, dataAttributes, cleanedProps } = useStyles(

packages/ui/src/components/Card/Card.stories.tsx

@@ -33,14 +33,13 @@ export const Default = meta.story({
   ),
 });
 
-export const CustomSize = meta.story({
+export const CustomSize = Default.extend({
   args: {
     style: {
       width: '300px',
       height: '200px',
     },
   },
-  render: Default.input.render,
 });
 
 export const WithLongBody = meta.story({

packages/ui/src/components/Dialog/Dialog.stories.tsx

@@ -143,30 +143,26 @@ export const FixedWidth = meta.story({
   ),
 });
 
-export const FixedHeight = meta.story({
+export const FixedHeight = FixedWidth.extend({
   args: {
     defaultOpen: true,
+    width: undefined,
     height: 500,
   },
-  render: FixedWidth.input.render,
 });
 
-export const FixedWidthAndHeight = meta.story({
+export const FixedWidthAndHeight = FixedWidth.extend({
   args: {
-    defaultOpen: true,
-    width: 600,
     height: 400,
   },
-  render: FixedWidth.input.render,
 });
 
-export const FullWidthAndHeight = meta.story({
+export const FullWidthAndHeight = FixedWidth.extend({
   args: {
     defaultOpen: true,
     width: '100%',
     height: '100%',
   },
-  render: FixedWidth.input.render,
 });
 
 export const Confirmation = meta.story({
@@ -233,18 +229,16 @@ export const WithForm = meta.story({
   ),
 });
 
-export const PreviewFixedWidthAndHeight = meta.story({
+export const PreviewFixedWidthAndHeight = FixedWidth.extend({
   args: {
     defaultOpen: undefined,
     width: 600,
     height: 400,
   },
-  render: FixedWidth.input.render,
 });
 
-export const PreviewWithForm = meta.story({
+export const PreviewWithForm = WithForm.extend({
   args: {
     defaultOpen: undefined,
   },
-  render: WithForm.input.render,
 });

packages/ui/src/components/Grid/Grid.stories.tsx

@@ -22,6 +22,8 @@ import { Flex } from '../Flex';
 const meta = preview.meta({
   title: 'Backstage UI/Grid',
   component: Grid.Root,
+  // We will add this story in the manifest when the component is not composed.
+  tags: ['!manifest'],
 });
 
 const FakeBox = () => (

packages/ui/src/components/Header/Header.stories.tsx

@@ -240,13 +240,10 @@ export const WithCustomActions = meta.story({
   ),
 });
 
-export const WithAllOptionsAndTabs = meta.story({
+export const WithAllOptionsAndTabs = WithCustomActions.extend({
   args: {
-    ...WithCustomActions.input.args,
     tabs,
   },
-  decorators: [withRouter],
-  render: WithCustomActions.input.render,
 });
 
 export const WithHeaderPage = meta.story({

packages/ui/src/components/PasswordField/PasswordField.stories.tsx

@@ -99,12 +99,10 @@ export const WithIcon = meta.story({
   ),
 });
 
-export const DisabledWithIcon = meta.story({
+export const DisabledWithIcon = WithIcon.extend({
   args: {
-    ...WithIcon.input.args,
     isDisabled: true,
   },
-  render: WithIcon.input.render,
 });
 
 export const ShowError = meta.story({

packages/ui/src/components/TagGroup/TagGroup.stories.tsx

@@ -37,7 +37,7 @@ export interface ListItem {
 
 const meta = preview.meta({
   title: 'Backstage UI/TagGroup',
-  component: TagGroup<ListItem>,
+  component: TagGroup,
   argTypes: {
     selectionMode: {
       control: { type: 'inline-radio' },
@@ -117,11 +117,11 @@ export const SelectionModeSingle = meta.story({
     const [selected, setSelected] = useState<Selection>(new Set(['travel']));
 
     return (
-      <TagGroup
+      <TagGroup<ListItem>
+        {...args}
         items={initialList}
         selectedKeys={selected}
         onSelectionChange={setSelected}
-        {...args}
       >
         {item => <Tag>{item.name}</Tag>}
       </TagGroup>
@@ -140,11 +140,11 @@ export const SelectionModeMultiple = meta.story({
     );
 
     return (
-      <TagGroup
+      <TagGroup<ListItem>
+        {...args}
         items={initialList}
         selectedKeys={selected}
         onSelectionChange={setSelected}
-        {...args}
       >
         {item => <Tag>{item.name}</Tag>}
       </TagGroup>
@@ -198,17 +198,17 @@ export const RemovingTags = meta.story({
   render: args => {
     const [selected, setSelected] = useState<Selection>(new Set(['travel']));
 
-    const list = useListData({
+    const list = useListData<ListItem>({
       initialItems: initialList,
     });
 
     return (
-      <TagGroup
+      <TagGroup<ListItem>
+        {...args}
         items={list.items}
         onRemove={keys => list.remove(...keys)}
         selectedKeys={selected}
         onSelectionChange={setSelected}
-        {...args}
       >
         {item => <Tag>{item.name}</Tag>}
       </TagGroup>
@@ -223,17 +223,17 @@ export const WithIconAndRemoveButton = meta.story({
   render: args => {
     const [selected, setSelected] = useState<Selection>(new Set(['travel']));
 
-    const list = useListData({
+    const list = useListData<ListItem>({
       initialItems: initialList,
     });
 
     return (
-      <TagGroup
+      <TagGroup<ListItem>
+        {...args}
         items={list.items}
         onRemove={keys => list.remove(...keys)}
         selectedKeys={selected}
         onSelectionChange={setSelected}
-        {...args}
       >
         {item => (
           <Tag icon={item.icon ? item.icon : undefined}>{item.name}</Tag>

packages/ui/src/components/TextField/TextField.stories.tsx

@@ -104,12 +104,10 @@ export const WithIcon = meta.story({
   ),
 });
 
-export const DisabledWithIcon = meta.story({
+export const DisabledWithIcon = WithIcon.extend({
   args: {
-    ...WithIcon.input.args,
     isDisabled: true,
   },
-  render: WithIcon.input.render,
 });
 
 export const ShowError = meta.story({