refactor: [M3-7542] - TagsInput & TagsPanel Storybook v7 Stories

packages/manager/.changeset/pr-9963-tech-stories-1701881397641.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+TagsInput & TagsPanel Storybook v7 Stories ([#9963](https://github.com/linode/manager/pull/9963))

packages/manager/.storybook/preview.tsx

@@ -89,7 +89,6 @@ const preview: Preview = {
           <Description />
           <Primary />
           <Controls />
-          <Stories />
         </>
       ),
     },

packages/manager/src/components/Tag/Tag.stories.tsx

@@ -21,6 +21,6 @@ const meta: Meta<TagProps> = {
     label: 'Tag',
   },
   component: Tag,
-  title: 'Components/Chip/Tag',
+  title: 'Components/Tags/Tag',
 };
 export default meta;

packages/manager/src/components/TagsInput/TagsInput.stories.tsx

@@ -0,0 +1,50 @@
+import { useArgs } from '@storybook/client-api';
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Box } from 'src/components/Box';
+
+import { TagsInput } from './TagsInput';
+
+import type { TagsInputProps } from './TagsInput';
+import type { Item } from 'src/components/EnhancedSelect/Select';
+
+export const Default: StoryObj<TagsInputProps> = {
+  args: {
+    disabled: false,
+    hideLabel: false,
+    label: '',
+    menuPlacement: 'bottom',
+    name: '',
+    tagError: '',
+    value: [
+      { label: 'tag-1', value: 'tag-1' },
+      { label: 'tag-2', value: 'tag-2' },
+    ],
+  },
+  render: (args) => {
+    const TagsInputWrapper = () => {
+      const [, setTags] = useArgs();
+      const handleUpdateTags = (selected: Item[]) => {
+        return setTags({ value: selected });
+      };
+
+      return (
+        <Box sx={{ alignItems: 'center', display: 'flex', height: 300 }}>
+          <TagsInput
+            {...args}
+            onChange={(selected) => handleUpdateTags(selected)}
+          />
+        </Box>
+      );
+    };
+
+    return TagsInputWrapper();
+  },
+};
+
+const meta: Meta<TagsInputProps> = {
+  component: TagsInput,
+  title: 'Components/Tags/Tags Input',
+};
+export default meta;

packages/manager/src/components/TagsInput/TagsInput.tsx

@@ -17,17 +17,43 @@ export interface Tag {
 }
 
 export interface TagsInputProps {
+  /**
+   * If true, the component is disabled.
+   *
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * If true, the label is hidden, yet still accessible to screen readers.
+   */
   hideLabel?: boolean;
+  /**
+   * The label for the input.
+   */
   label?: string;
+  /**
+   * The placement of the menu, relative to the select input.
+   */
   menuPlacement?: 'auto' | 'bottom' | 'top';
+  /**
+   * The name of the input.
+   */
   name?: string;
+  /**
+   * Callback fired when the value changes.
+   */
   onChange: (selected: Item[]) => void;
+  /**
+   * An error to display beneath the input.
+   */
   tagError?: string;
+  /**
+   * The value of the input.
+   */
   value: Item[];
 }
 
-const TagsInput = (props: TagsInputProps) => {
+export const TagsInput = (props: TagsInputProps) => {
   const {
     disabled,
     hideLabel,
@@ -115,5 +141,3 @@ const TagsInput = (props: TagsInputProps) => {
     />
   );
 };
-
-export { TagsInput };

packages/manager/src/components/TagsPanel/TagsPanel.stories.tsx

@@ -0,0 +1,40 @@
+import { useArgs } from '@storybook/client-api';
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Box } from 'src/components/Box';
+
+import { TagsPanel } from './TagsPanel';
+
+import type { TagsPanelProps } from './TagsPanel';
+
+const _tags: string[] = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'];
+
+export const Default: StoryObj<TagsPanelProps> = {
+  render: (args) => {
+    const TagsInputWrapper = () => {
+      const [{ tags }, updateArgs] = useArgs();
+      const handleUpdateTags = (selected: string[]) => {
+        return Promise.resolve(updateArgs({ tags: selected }));
+      };
+
+      return (
+        <Box sx={{ height: 300 }}>
+          <TagsPanel {...args} tags={tags} updateTags={handleUpdateTags} />
+        </Box>
+      );
+    };
+
+    return TagsInputWrapper();
+  },
+};
+
+const meta: Meta<TagsPanelProps> = {
+  args: {
+    disabled: false,
+    tags: _tags,
+  },
+  component: TagsPanel,
+  title: 'Components/Tags/Tags Panel',
+};
+export default meta;