@windstream/react-shared-components 0.0.1

package/src/components/see-more/SeeMore.stories.tsx

@@ -0,0 +1,182 @@
+import { SeeMore } from "./index";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof SeeMore> = {
+  title: "Components/SeeMore",
+  component: SeeMore,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "An expandable component that shows/hides a checklist of items with a toggle button.",
+      },
+    },
+  },
+  argTypes: {
+    list: {
+      control: { type: "object" },
+      description: "Array of strings to display in the checklist",
+    },
+    text: {
+      control: { type: "text" },
+      description: "Text for the toggle button",
+    },
+  },
+  args: {
+    list: ["Feature 1", "Feature 2", "Feature 3"],
+    text: "See details",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default see more
+export const Default: Story = {
+  args: {},
+};
+
+// Expanded by default
+export const Expanded: Story = {
+  args: {
+    list: [
+      "High-speed internet connection",
+      "24/7 customer support",
+      "No data caps",
+      "Free installation",
+    ],
+    text: "See details",
+  },
+  render: (args) => (
+    <div className="w-full max-w-md">
+      <SeeMore {...args} />
+    </div>
+  ),
+};
+
+// Collapsed by default
+export const Collapsed: Story = {
+  args: {
+    list: ["Item 1", "Item 2", "Item 3"],
+    text: "Show more",
+  },
+  render: (args) => (
+    <div className="w-full max-w-md">
+      <SeeMore {...args} />
+    </div>
+  ),
+};
+
+// With checklist items
+export const WithChecklistItems: Story = {
+  args: {
+    list: [
+      "Unlimited data usage",
+      "Free router included",
+      "24/7 technical support",
+      "No long-term contract",
+      "30-day money-back guarantee",
+    ],
+    text: "View all features",
+  },
+  render: (args) => (
+    <div className="w-full max-w-md">
+      <SeeMore {...args} />
+    </div>
+  ),
+};
+
+// Custom button text
+export const CustomButtonText: Story = {
+  args: {
+    list: ["Detail 1", "Detail 2", "Detail 3"],
+    text: "Learn more",
+  },
+  render: (args) => (
+    <div className="w-full max-w-md">
+      <SeeMore {...args} />
+    </div>
+  ),
+};
+
+// Long list
+export const LongList: Story = {
+  args: {
+    list: [
+      "Feature one with detailed description",
+      "Feature two",
+      "Feature three",
+      "Feature four",
+      "Feature five",
+      "Feature six",
+      "Feature seven",
+      "Feature eight",
+      "Feature nine",
+      "Feature ten",
+    ],
+    text: "See all features",
+  },
+  render: (args) => (
+    <div className="w-full max-w-md">
+      <SeeMore {...args} />
+    </div>
+  ),
+};
+
+// Single item
+export const SingleItem: Story = {
+  args: {
+    list: ["Single checklist item"],
+    text: "See details",
+  },
+  render: (args) => (
+    <div className="w-full max-w-md">
+      <SeeMore {...args} />
+    </div>
+  ),
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="w-full max-w-2xl space-y-8">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Default</h3>
+        <SeeMore list={["Item 1", "Item 2", "Item 3"]} />
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Custom Button Text</h3>
+        <SeeMore
+          list={["Feature 1", "Feature 2", "Feature 3"]}
+          text="View all features"
+        />
+      </div>
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Long List</h3>
+        <SeeMore
+          list={[
+            "Feature one",
+            "Feature two",
+            "Feature three",
+            "Feature four",
+            "Feature five",
+          ]}
+          text="See all details"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase of all SeeMore variants and configurations.",
+      },
+    },
+  },
+};
+

package/src/components/see-more/index.tsx

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { SeeMoreProps } from "@shared/components/see-more/types";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { Collapse } from "@shared/components/collapse";
+import { Checklist } from "@shared/components/checklist";
+import { Button } from "@shared/components/button";
+
+export const SeeMore: React.FC<SeeMoreProps> = (props) => {
+	const { list, text } = props
+	const [showDetails, setShowDetails] = useState<boolean>(true);
+	return (
+		<div className="mt-3">
+			<Button
+				type="button"
+				className="flex items-center gap-2 text-base font-semibold text-gray-900"
+				aria-expanded={showDetails}
+				onClick={(e) => { e.stopPropagation(); setShowDetails(v => !v); }}
+			>
+				<span>{text || 'See details'}</span>
+				<MaterialIcon
+					name={showDetails ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}
+					fill={1}
+					size={24}
+				/>
+			</Button>
+
+			<Collapse open={showDetails}>
+				<div className="pt-1">
+					<Checklist listItemClassName="body3" items={list} />
+				</div>
+			</Collapse>
+		</div>
+	);
+};
+
+SeeMore.displayName = "SeeMore";
+
+export type { SeeMoreProps };

package/src/components/see-more/types.ts

@@ -0,0 +1,4 @@
+export type SeeMoreProps = {
+  list: string[],
+  text?: string
+}

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

@@ -0,0 +1,410 @@
+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.",
+      },
+    },
+  },
+};