From 8ff256293af8b688275116dd851e7008af9187e3 Mon Sep 17 00:00:00 2001
From: hasyed-akamai <hasyed@akamai.com>
Date: Wed, 18 Dec 2024 16:57:23 +0530
Subject: [PATCH] feat: [M3-8177] - Add `MultipleIPInput` Story (#11389)

* feat: [M3-8177] - Add MultipleIPInput Story

* Added changeset: MultipleIPInput Story in Storybook

* Add functionality to `HelperText` and `Placeholder`

* Add functionality to `Placeholder`
---
 .../pr-11389-added-1733834884159.md           |  5 ++
 .../MultipleIPInput.stories.tsx               | 75 +++++++++++++++++++
 .../MultipleIPInput/MultipleIPInput.tsx       | 68 +++++++++++++++++
 3 files changed, 148 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-11389-added-1733834884159.md
 create mode 100644 packages/manager/src/components/MultipleIPInput/MultipleIPInput.stories.tsx

diff --git a/packages/manager/.changeset/pr-11389-added-1733834884159.md b/packages/manager/.changeset/pr-11389-added-1733834884159.md
new file mode 100644
index 00000000000..c47338e9bf0
--- /dev/null
+++ b/packages/manager/.changeset/pr-11389-added-1733834884159.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+MultipleIPInput Story in Storybook ([#11389](https://github.com/linode/manager/pull/11389))
diff --git a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.stories.tsx b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.stories.tsx
new file mode 100644
index 00000000000..7bf2157e428
--- /dev/null
+++ b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.stories.tsx
@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+
+import { MultipleIPInput } from './MultipleIPInput';
+
+import type { MultipeIPInputProps } from './MultipleIPInput';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof MultipleIPInput>;
+
+const mockTitle = 'IP Address';
+
+const defaultArgs = {
+  buttonText: 'Add An IP',
+  ips: [{ address: '192.0.2.1/01' }, { address: '192.0.2.1/02' }],
+  title: mockTitle,
+};
+
+const meta: Meta<typeof MultipleIPInput> = {
+  component: MultipleIPInput,
+  decorators: [
+    (Story: StoryFn) => (
+      <div style={{ margin: '2em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  title: 'Components/MultipleIPInput',
+};
+
+export default meta;
+
+const MultipleIPInputWithState = ({ ...args }: MultipeIPInputProps) => {
+  const [ips, setIps] = useState(args.ips);
+
+  const handleChange = (newIps: typeof ips) => {
+    setIps(newIps);
+  };
+
+  return <MultipleIPInput {...args} ips={ips} onChange={handleChange} />;
+};
+
+export const Default: Story = {
+  args: defaultArgs,
+  render: (args) => {
+    return <MultipleIPInputWithState {...args} />;
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...defaultArgs,
+    disabled: true,
+  },
+};
+
+export const HelperText: Story = {
+  args: {
+    ...defaultArgs,
+    helperText: 'helperText',
+  },
+  render: (args) => {
+    return <MultipleIPInputWithState {...args} />;
+  },
+};
+
+export const Placeholder: Story = {
+  args: {
+    ips: [{ address: '' }],
+    placeholder: 'placeholder',
+    title: mockTitle,
+  },
+  render: (args) => {
+    return <MultipleIPInputWithState {...args} />;
+  },
+};
diff --git a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx
index 2080d9a92ba..1f936b8ee8a 100644
--- a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx
+++ b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx
@@ -61,21 +61,89 @@ const useStyles = makeStyles()((theme: Theme) => ({
 }));
 
 export interface MultipeIPInputProps {
+  /**
+   * Text displayed on the button.
+   */
   buttonText?: string;
+
+  /**
+   * Custom CSS class for additional styling.
+   */
   className?: string;
+
+  /**
+   * Disables the component (non-interactive).
+   * @default false
+   */
   disabled?: boolean;
+
+  /**
+   * Error message for invalid input.
+   */
   error?: string;
+
+  /**
+   * Indicates if the input relates to database access controls.
+   * @default false
+   */
   forDatabaseAccessControls?: boolean;
+
+  /**
+   * Indicates if the input is for VPC IPv4 ranges.
+   * @default false
+   */
   forVPCIPv4Ranges?: boolean;
+
+  /**
+   * Helper text for additional guidance.
+   */
   helperText?: string;
+
+  /**
+   * Custom input properties passed to the underlying input component.
+   */
   inputProps?: InputBaseProps;
+
+  /**
+   * Array of `ExtendedIP` objects representing managed IPs.
+   */
   ips: ExtendedIP[];
+
+  /**
+   * Styles the button as a link.
+   * @default false
+   */
   isLinkStyled?: boolean;
+
+  /**
+   * Callback triggered when the input loses focus, passing updated `ips`.
+   */
   onBlur?: (ips: ExtendedIP[]) => void;
+
+  /**
+   * Callback triggered when IPs change, passing updated `ips`.
+   */
   onChange: (ips: ExtendedIP[]) => void;
+
+  /**
+   * Placeholder text for an empty input field.
+   */
   placeholder?: string;
+
+  /**
+   * Indicates if the input is required for form submission.
+   * @default false
+   */
   required?: boolean;
+
+  /**
+   * Title or label for the input field.
+   */
   title: string;
+
+  /**
+   * Tooltip text for extra info on hover.
+   */
   tooltip?: string;
 }