@windstream/react-shared-components 0.1.34 → 0.1.36

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

@@ -1,411 +1,411 @@
-import { Select } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Select> = {
-  title: "Components/Select",
-  component: Select,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "A powerful select component built with react-select, featuring search/filtering, custom styling, and enhanced UX that matches the consumer app pattern.",
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: { type: "select" },
-      options: ["default", "unstyled"],
-      description: "Select styling variant",
-    },
-    size: {
-      control: { type: "select" },
-      options: ["sm", "md"],
-      description: "Select size",
-    },
-    placeholder: {
-      control: { type: "text" },
-      description: "Placeholder text",
-    },
-    isDisabled: {
-      control: { type: "boolean" },
-      description: "Disable the select",
-    },
-    hasError: {
-      control: { type: "boolean" },
-      description: "Show error state",
-    },
-    error: {
-      control: { type: "text" },
-      description: "Error message text",
-    },
-    helperText: {
-      control: { type: "text" },
-      description: "Helper text",
-    },
-    label: {
-      control: { type: "text" },
-      description: "Label text",
-    },
-    isCustomStyle: {
-      control: { type: "boolean" },
-      description: "Use custom styling for dropdown indicator and values",
-    },
-    isSearchable: {
-      control: { type: "boolean" },
-      description: "Enable search/filtering functionality",
-    },
-    isClearable: {
-      control: { type: "boolean" },
-      description: "Allow clearing the selected value",
-    },
-  },
-  args: {
-    placeholder: "Select an option...",
-    variant: "default",
-    size: "md",
-    isDisabled: false,
-    hasError: false,
-    isCustomStyle: false,
-    isSearchable: true,
-    isClearable: false,
-    options: [
-      { label: "Option 1", value: "option1" },
-      { label: "Option 2", value: "option2" },
-      { label: "Option 3", value: "option3" },
-    ],
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Default select
-export const Default: Story = {
-  args: {},
-};
-
-// Select with label
-export const WithLabel: Story = {
-  render: (args: any) => (
-    <div className="space-y-2">
-      <Select
-        {...args}
-        label="Choose an option"
-        placeholder="Select an option"
-      />
-    </div>
-  ),
-  args: {
-    label: "Choose an option",
-    placeholder: "Select an option",
-  },
-};
-
-// Error state
-export const Error: Story = {
-  args: {
-    hasError: true,
-    error: "This field is required",
-    placeholder: "Invalid selection",
-  },
-  render: (args: any) => (
-    <div className="space-y-2">
-      <Select {...args} />
-    </div>
-  ),
-};
-
-// With helper text
-export const WithHelperText: Story = {
-  args: {
-    helperText: "Please select the most appropriate option",
-    placeholder: "Select an option",
-  },
-};
-
-// Small select
-export const Small: Story = {
-  args: {
-    size: "sm",
-    placeholder: "Small select",
-  },
-};
-
-// Medium select
-export const Medium: Story = {
-  args: {
-    size: "md",
-    placeholder: "Medium select",
-  },
-};
-
-// Disabled select
-export const Disabled: Story = {
-  args: {
-    isDisabled: true,
-    placeholder: "Disabled select",
-  },
-};
-
-// Unstyled variant
-export const Unstyled: Story = {
-  args: {
-    variant: "unstyled",
-    placeholder: "Unstyled select",
-  },
-};
-
-// Searchable select
-export const Searchable: Story = {
-  args: {
-    isSearchable: true,
-    placeholder: "Type to search...",
-    options: [
-      { label: "Apple", value: "apple" },
-      { label: "Banana", value: "banana" },
-      { label: "Cherry", value: "cherry" },
-      { label: "Date", value: "date" },
-      { label: "Elderberry", value: "elderberry" },
-      { label: "Fig", value: "fig" },
-      { label: "Grape", value: "grape" },
-    ],
-  },
-};
-
-// Clearable select
-export const Clearable: Story = {
-  args: {
-    isClearable: true,
-    placeholder: "Select and clear option",
-    value: { label: "Option 2", value: "option2" },
-  },
-};
-
-// Custom style select
-export const CustomStyle: Story = {
-  args: {
-    isCustomStyle: true,
-    placeholder: "Custom styled select",
-    options: [
-      { label: "Custom Option 1", value: "custom1" },
-      { label: "Custom Option 2", value: "custom2" },
-      { label: "Custom Option 3", value: "custom3" },
-    ],
-  },
-};
-
-// With filtering options
-export const WithFiltering: Story = {
-  args: {
-    isSearchable: true,
-    placeholder: "Search with custom filter...",
-    filterOptions: {
-      ignoreCase: true,
-      ignoreAccents: true,
-      matchFrom: "any",
-    },
-    options: [
-      { label: "São Paulo", value: "sao-paulo" },
-      { label: "Café", value: "cafe" },
-      { label: "Naïve", value: "naive" },
-      { label: "Café au lait", value: "cafe-au-lait" },
-      { label: "São José", value: "sao-jose" },
-    ],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Select with custom filtering options that ignore case and accents for better search experience.",
-      },
-    },
-  },
-};
-
-// With many options
-export const ManyOptions: Story = {
-  args: {
-    placeholder: "Choose a country",
-    options: [
-      { label: "United States", value: "us" },
-      { label: "Canada", value: "ca" },
-      { label: "United Kingdom", value: "uk" },
-      { label: "Germany", value: "de" },
-      { label: "France", value: "fr" },
-      { label: "Spain", value: "es" },
-      { label: "Italy", value: "it" },
-      { label: "Japan", value: "jp" },
-      { label: "China", value: "cn" },
-      { label: "Australia", value: "au" },
-      { label: "Brazil", value: "br" },
-      { label: "India", value: "in" },
-    ],
-  },
-};
-
-// With selected value
-export const WithSelectedValue: Story = {
-  args: {
-    value: { label: "Option 2", value: "option2" },
-    placeholder: "Select an option",
-  },
-};
-
-// All variants showcase
-export const AllVariants: Story = {
-  render: () => (
-    <div className="space-y-6">
-      <div className="grid grid-cols-2 gap-4">
-        <div>
-          <label className="mb-1 block text-sm font-medium text-gray-700">
-            Default
-          </label>
-          <Select
-            variant="default"
-            placeholder="Default select"
-            options={[
-              { label: "Option 1", value: "option1" },
-              { label: "Option 2", value: "option2" },
-              { label: "Option 3", value: "option3" },
-            ]}
-          />
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-medium text-gray-700">
-            Error
-          </label>
-          <Select
-            hasError
-            error="This field is required"
-            placeholder="Error select"
-            options={[
-              { label: "Option 1", value: "option1" },
-              { label: "Option 2", value: "option2" },
-              { label: "Option 3", value: "option3" },
-            ]}
-          />
-        </div>
-      </div>
-      <div className="grid grid-cols-2 gap-4">
-        <div>
-          <label className="mb-1 block text-sm font-medium text-gray-700">
-            Small
-          </label>
-          <Select
-            size="sm"
-            placeholder="Small select"
-            options={[
-              { label: "Option 1", value: "option1" },
-              { label: "Option 2", value: "option2" },
-              { label: "Option 3", value: "option3" },
-            ]}
-          />
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-medium text-gray-700">
-            Medium
-          </label>
-          <Select
-            size="md"
-            placeholder="Medium select"
-            options={[
-              { label: "Option 1", value: "option1" },
-              { label: "Option 2", value: "option2" },
-              { label: "Option 3", value: "option3" },
-            ]}
-          />
-        </div>
-      </div>
-      <div className="grid grid-cols-2 gap-4">
-        <div>
-          <label className="mb-1 block text-sm font-medium text-gray-700">
-            Disabled
-          </label>
-          <Select
-            isDisabled
-            placeholder="Disabled select"
-            options={[
-              { label: "Option 1", value: "option1" },
-              { label: "Option 2", value: "option2" },
-              { label: "Option 3", value: "option3" },
-            ]}
-          />
-        </div>
-        <div>
-          <label className="mb-1 block text-sm font-medium text-gray-700">
-            With Helper Text
-          </label>
-          <Select
-            helperText="Please select an option"
-            placeholder="Select with helper"
-            options={[
-              { label: "Option 1", value: "option1" },
-              { label: "Option 2", value: "option2" },
-              { label: "Option 3", value: "option3" },
-            ]}
-          />
-        </div>
-      </div>
-    </div>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Showcase of all select variants, sizes, and states.",
-      },
-    },
-  },
-};
-
-// Form example
-export const FormExample: Story = {
-  render: () => (
-    <form className="space-y-4">
-      <div>
-        <label className="mb-1 block text-sm font-medium text-gray-700">
-          Country *
-        </label>
-        <Select
-          placeholder="Select your country"
-          hasError
-          error="Country is required"
-          options={[
-            { label: "United States", value: "us" },
-            { label: "Canada", value: "ca" },
-            { label: "United Kingdom", value: "uk" },
-            { label: "Germany", value: "de" },
-            { label: "France", value: "fr" },
-          ]}
-        />
-      </div>
-      <div>
-        <label className="mb-1 block text-sm font-medium text-gray-700">
-          State/Province
-        </label>
-        <Select
-          placeholder="Select your state"
-          helperText="Optional field"
-          options={[
-            { label: "California", value: "ca" },
-            { label: "New York", value: "ny" },
-            { label: "Texas", value: "tx" },
-            { label: "Florida", value: "fl" },
-          ]}
-        />
-      </div>
-    </form>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: "Example of select components used in a form context.",
-      },
-    },
-  },
-};
+import { Select } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Select> = {
+  title: "Components/Select",
+  component: Select,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A powerful select component built with react-select, featuring search/filtering, custom styling, and enhanced UX that matches the consumer app pattern.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["default", "unstyled"],
+      description: "Select styling variant",
+    },
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md"],
+      description: "Select size",
+    },
+    placeholder: {
+      control: { type: "text" },
+      description: "Placeholder text",
+    },
+    isDisabled: {
+      control: { type: "boolean" },
+      description: "Disable the select",
+    },
+    hasError: {
+      control: { type: "boolean" },
+      description: "Show error state",
+    },
+    error: {
+      control: { type: "text" },
+      description: "Error message text",
+    },
+    helperText: {
+      control: { type: "text" },
+      description: "Helper text",
+    },
+    label: {
+      control: { type: "text" },
+      description: "Label text",
+    },
+    isCustomStyle: {
+      control: { type: "boolean" },
+      description: "Use custom styling for dropdown indicator and values",
+    },
+    isSearchable: {
+      control: { type: "boolean" },
+      description: "Enable search/filtering functionality",
+    },
+    isClearable: {
+      control: { type: "boolean" },
+      description: "Allow clearing the selected value",
+    },
+  },
+  args: {
+    placeholder: "Select an option...",
+    variant: "default",
+    size: "md",
+    isDisabled: false,
+    hasError: false,
+    isCustomStyle: false,
+    isSearchable: true,
+    isClearable: false,
+    options: [
+      { label: "Option 1", value: "option1" },
+      { label: "Option 2", value: "option2" },
+      { label: "Option 3", value: "option3" },
+    ],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default select
+export const Default: Story = {
+  args: {},
+};
+
+// Select with label
+export const WithLabel: Story = {
+  render: (args: any) => (
+    <div className="space-y-2">
+      <Select
+        {...args}
+        label="Choose an option"
+        placeholder="Select an option"
+      />
+    </div>
+  ),
+  args: {
+    label: "Choose an option",
+    placeholder: "Select an option",
+  },
+};
+
+// Error state
+export const Error: Story = {
+  args: {
+    hasError: true,
+    error: "This field is required",
+    placeholder: "Invalid selection",
+  },
+  render: (args: any) => (
+    <div className="space-y-2">
+      <Select {...args} />
+    </div>
+  ),
+};
+
+// With helper text
+export const WithHelperText: Story = {
+  args: {
+    helperText: "Please select the most appropriate option",
+    placeholder: "Select an option",
+  },
+};
+
+// Small select
+export const Small: Story = {
+  args: {
+    size: "sm",
+    placeholder: "Small select",
+  },
+};
+
+// Medium select
+export const Medium: Story = {
+  args: {
+    size: "md",
+    placeholder: "Medium select",
+  },
+};
+
+// Disabled select
+export const Disabled: Story = {
+  args: {
+    isDisabled: true,
+    placeholder: "Disabled select",
+  },
+};
+
+// Unstyled variant
+export const Unstyled: Story = {
+  args: {
+    variant: "unstyled",
+    placeholder: "Unstyled select",
+  },
+};
+
+// Searchable select
+export const Searchable: Story = {
+  args: {
+    isSearchable: true,
+    placeholder: "Type to search...",
+    options: [
+      { label: "Apple", value: "apple" },
+      { label: "Banana", value: "banana" },
+      { label: "Cherry", value: "cherry" },
+      { label: "Date", value: "date" },
+      { label: "Elderberry", value: "elderberry" },
+      { label: "Fig", value: "fig" },
+      { label: "Grape", value: "grape" },
+    ],
+  },
+};
+
+// Clearable select
+export const Clearable: Story = {
+  args: {
+    isClearable: true,
+    placeholder: "Select and clear option",
+    value: { label: "Option 2", value: "option2" },
+  },
+};
+
+// Custom style select
+export const CustomStyle: Story = {
+  args: {
+    isCustomStyle: true,
+    placeholder: "Custom styled select",
+    options: [
+      { label: "Custom Option 1", value: "custom1" },
+      { label: "Custom Option 2", value: "custom2" },
+      { label: "Custom Option 3", value: "custom3" },
+    ],
+  },
+};
+
+// With filtering options
+export const WithFiltering: Story = {
+  args: {
+    isSearchable: true,
+    placeholder: "Search with custom filter...",
+    filterOptions: {
+      ignoreCase: true,
+      ignoreAccents: true,
+      matchFrom: "any",
+    },
+    options: [
+      { label: "São Paulo", value: "sao-paulo" },
+      { label: "Café", value: "cafe" },
+      { label: "Naïve", value: "naive" },
+      { label: "Café au lait", value: "cafe-au-lait" },
+      { label: "São José", value: "sao-jose" },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Select with custom filtering options that ignore case and accents for better search experience.",
+      },
+    },
+  },
+};
+
+// With many options
+export const ManyOptions: Story = {
+  args: {
+    placeholder: "Choose a country",
+    options: [
+      { label: "United States", value: "us" },
+      { label: "Canada", value: "ca" },
+      { label: "United Kingdom", value: "uk" },
+      { label: "Germany", value: "de" },
+      { label: "France", value: "fr" },
+      { label: "Spain", value: "es" },
+      { label: "Italy", value: "it" },
+      { label: "Japan", value: "jp" },
+      { label: "China", value: "cn" },
+      { label: "Australia", value: "au" },
+      { label: "Brazil", value: "br" },
+      { label: "India", value: "in" },
+    ],
+  },
+};
+
+// With selected value
+export const WithSelectedValue: Story = {
+  args: {
+    value: { label: "Option 2", value: "option2" },
+    placeholder: "Select an option",
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="mb-1 block text-sm font-medium text-gray-700">
+            Default
+          </label>
+          <Select
+            variant="default"
+            placeholder="Default select"
+            options={[
+              { label: "Option 1", value: "option1" },
+              { label: "Option 2", value: "option2" },
+              { label: "Option 3", value: "option3" },
+            ]}
+          />
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-gray-700">
+            Error
+          </label>
+          <Select
+            hasError
+            error="This field is required"
+            placeholder="Error select"
+            options={[
+              { label: "Option 1", value: "option1" },
+              { label: "Option 2", value: "option2" },
+              { label: "Option 3", value: "option3" },
+            ]}
+          />
+        </div>
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="mb-1 block text-sm font-medium text-gray-700">
+            Small
+          </label>
+          <Select
+            size="sm"
+            placeholder="Small select"
+            options={[
+              { label: "Option 1", value: "option1" },
+              { label: "Option 2", value: "option2" },
+              { label: "Option 3", value: "option3" },
+            ]}
+          />
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-gray-700">
+            Medium
+          </label>
+          <Select
+            size="md"
+            placeholder="Medium select"
+            options={[
+              { label: "Option 1", value: "option1" },
+              { label: "Option 2", value: "option2" },
+              { label: "Option 3", value: "option3" },
+            ]}
+          />
+        </div>
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="mb-1 block text-sm font-medium text-gray-700">
+            Disabled
+          </label>
+          <Select
+            isDisabled
+            placeholder="Disabled select"
+            options={[
+              { label: "Option 1", value: "option1" },
+              { label: "Option 2", value: "option2" },
+              { label: "Option 3", value: "option3" },
+            ]}
+          />
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-medium text-gray-700">
+            With Helper Text
+          </label>
+          <Select
+            helperText="Please select an option"
+            placeholder="Select with helper"
+            options={[
+              { label: "Option 1", value: "option1" },
+              { label: "Option 2", value: "option2" },
+              { label: "Option 3", value: "option3" },
+            ]}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all select variants, sizes, and states.",
+      },
+    },
+  },
+};
+
+// Form example
+export const FormExample: Story = {
+  render: () => (
+    <form className="space-y-4">
+      <div>
+        <label className="mb-1 block text-sm font-medium text-gray-700">
+          Country *
+        </label>
+        <Select
+          placeholder="Select your country"
+          hasError
+          error="Country is required"
+          options={[
+            { label: "United States", value: "us" },
+            { label: "Canada", value: "ca" },
+            { label: "United Kingdom", value: "uk" },
+            { label: "Germany", value: "de" },
+            { label: "France", value: "fr" },
+          ]}
+        />
+      </div>
+      <div>
+        <label className="mb-1 block text-sm font-medium text-gray-700">
+          State/Province
+        </label>
+        <Select
+          placeholder="Select your state"
+          helperText="Optional field"
+          options={[
+            { label: "California", value: "ca" },
+            { label: "New York", value: "ny" },
+            { label: "Texas", value: "tx" },
+            { label: "Florida", value: "fl" },
+          ]}
+        />
+      </div>
+    </form>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Example of select components used in a form context.",
+      },
+    },
+  },
+};