@windstream/react-shared-components 0.0.1

package/src/components/material-icon/MaterialIcon.stories.tsx

@@ -0,0 +1,330 @@
+import { MaterialIcon } from "./index";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof MaterialIcon> = {
+  title: "Components/MaterialIcon",
+  component: MaterialIcon,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "Material Design icon component with customizable size, color, and styling.",
+      },
+    },
+  },
+  argTypes: {
+    name: {
+      control: { type: "select" },
+      options: [
+        "home",
+        "search",
+        "check",
+        "settings",
+        "groups",
+        "mail",
+        "call",
+        "info",
+      ],
+      description: "Material icon name",
+    },
+    size: {
+      control: { type: "select" },
+      options: [20, 24, 32, 40, 48],
+      description: "Icon size",
+    },
+    weight: {
+      control: { type: "select" },
+      options: [100, 200, 300, 400, 500, 600, 700],
+      description: "Icon weight",
+    },
+    color: {
+      control: { type: "color" },
+      description: "Icon color",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes",
+    },
+  },
+  args: {
+    name: "home",
+    size: 24,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default icon
+export const Default: Story = {
+  args: {},
+};
+
+// Different sizes
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <div className="text-center">
+        <MaterialIcon name="home" size={20} />
+        <p className="mt-1 text-xs">20px</p>
+      </div>
+      <div className="text-center">
+        <MaterialIcon name="home" size={24} />
+        <p className="mt-1 text-xs">24px</p>
+      </div>
+      <div className="text-center">
+        <MaterialIcon name="home" size={40} />
+        <p className="mt-1 text-xs">40px</p>
+      </div>
+      <div className="text-center">
+        <MaterialIcon name="home" size={48} />
+        <p className="mt-1 text-xs">48px</p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "All available icon sizes.",
+      },
+    },
+  },
+};
+
+// Common icons
+export const CommonIcons: Story = {
+  render: () => (
+    <div className="grid grid-cols-4 gap-4">
+      <div className="rounded-lg border p-4 text-center">
+        <MaterialIcon name="home" size={40} />
+        <p className="mt-2 text-sm">home</p>
+      </div>
+      <div className="rounded-lg border p-4 text-center">
+        <MaterialIcon name="search" size={40} />
+        <p className="mt-2 text-sm">search</p>
+      </div>
+      <div className="rounded-lg border p-4 text-center">
+        <MaterialIcon name="check" size={40} />
+        <p className="mt-2 text-sm">check</p>
+      </div>
+      <div className="rounded-lg border p-4 text-center">
+        <MaterialIcon name="settings" size={40} />
+        <p className="mt-2 text-sm">settings</p>
+      </div>
+      <div className="rounded-lg border p-4 text-center">
+        <MaterialIcon name="groups" size={40} />
+        <p className="mt-2 text-sm">groups</p>
+      </div>
+      <div className="rounded-lg border p-4 text-center">
+        <MaterialIcon name="mail" size={40} />
+        <p className="mt-2 text-sm">mail</p>
+      </div>
+      <div className="rounded-lg border p-4 text-center">
+        <MaterialIcon name="call" size={40} />
+        <p className="mt-2 text-sm">call</p>
+      </div>
+      <div className="rounded-lg border p-4 text-center">
+        <MaterialIcon name="info" size={40} />
+        <p className="mt-2 text-sm">info</p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Common Material Design icons.",
+      },
+    },
+  },
+};
+
+// Colored icons
+export const ColoredIcons: Story = {
+  render: () => (
+    <div className="grid grid-cols-4 gap-4">
+      <div className="text-center">
+        <MaterialIcon name="check" size={40} color="#ef4444" />
+        <p className="mt-2 text-sm text-red-500">Red</p>
+      </div>
+      <div className="text-center">
+        <MaterialIcon name="check_circle" size={40} color="#10b981" />
+        <p className="mt-2 text-sm text-green-500">Green</p>
+      </div>
+      <div className="text-center">
+        <MaterialIcon name="info" size={40} color="#3b82f6" />
+        <p className="mt-2 text-sm text-blue-500">Blue</p>
+      </div>
+      <div className="text-center">
+        <MaterialIcon name="error" size={40} color="#f59e0b" />
+        <p className="mt-2 text-sm text-yellow-500">Yellow</p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Icons with different colors.",
+      },
+    },
+  },
+};
+
+// Icon with text
+export const IconWithText: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <MaterialIcon name="mail" />
+        <span>Email notifications</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <MaterialIcon name="call" />
+        <span>Phone support</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <MaterialIcon name="forum" />
+        <span>Live chat</span>
+      </div>
+      <div className="flex items-center gap-2">
+        <MaterialIcon name="help" />
+        <span>Help center</span>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Icons used alongside text content.",
+      },
+    },
+  },
+};
+
+// Interactive icons
+export const InteractiveIcons: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-4">
+      <button className="rounded-lg border p-3 transition-colors hover:bg-gray-50">
+        <MaterialIcon name="check_box_outline_blank" size={40} />
+        <p className="mt-2 text-sm">Like</p>
+      </button>
+      <button className="rounded-lg border p-3 transition-colors hover:bg-gray-50">
+        <MaterialIcon name="share" size={40} />
+        <p className="mt-2 text-sm">Share</p>
+      </button>
+      <button className="rounded-lg border p-3 transition-colors hover:bg-gray-50">
+        <MaterialIcon name="check" size={40} />
+        <p className="mt-2 text-sm">Bookmark</p>
+      </button>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Interactive icon buttons.",
+      },
+    },
+  },
+};
+
+// Status icons
+export const StatusIcons: Story = {
+  render: () => (
+    <div className="grid grid-cols-4 gap-4">
+      <div className="text-center">
+        <MaterialIcon name="check_circle" size={40} />
+        <p className="mt-2 text-sm text-green-600">Success</p>
+      </div>
+      <div className="text-center">
+        <MaterialIcon name="error" size={40} />
+        <p className="mt-2 text-sm text-red-600">Error</p>
+      </div>
+      <div className="text-center">
+        <MaterialIcon name="error" size={40} />
+        <p className="mt-2 text-sm text-yellow-600">Warning</p>
+      </div>
+      <div className="text-center">
+        <MaterialIcon name="info" size={40} />
+        <p className="mt-2 text-sm text-blue-600">Info</p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Status and feedback icons.",
+      },
+    },
+  },
+};
+
+// All sizes showcase
+export const AllSizes: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Icon Sizes</h3>
+        <div className="flex items-center gap-6">
+          <div className="text-center">
+            <MaterialIcon name="check" size={20} />
+            <p className="mt-1 text-xs">Small</p>
+          </div>
+          <div className="text-center">
+            <MaterialIcon name="check" size={24} />
+            <p className="mt-1 text-xs">Medium</p>
+          </div>
+          <div className="text-center">
+            <MaterialIcon name="check" size={40} />
+            <p className="mt-1 text-xs">Large</p>
+          </div>
+          <div className="text-center">
+            <MaterialIcon name="check" size={48} />
+            <p className="mt-1 text-xs">XLarge</p>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Common Icons</h3>
+        <div className="grid grid-cols-6 gap-4">
+          <div className="text-center">
+            <MaterialIcon name="home" />
+            <p className="mt-1 text-xs">home</p>
+          </div>
+          <div className="text-center">
+            <MaterialIcon name="search" />
+            <p className="mt-1 text-xs">search</p>
+          </div>
+          <div className="text-center">
+            <MaterialIcon name="check" />
+            <p className="mt-1 text-xs">check</p>
+          </div>
+          <div className="text-center">
+            <MaterialIcon name="settings" />
+            <p className="mt-1 text-xs">settings</p>
+          </div>
+          <div className="text-center">
+            <MaterialIcon name="groups" />
+            <p className="mt-1 text-xs">groups</p>
+          </div>
+          <div className="text-center">
+            <MaterialIcon name="mail" />
+            <p className="mt-1 text-xs">mail</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Complete showcase of all icon sizes and common icons.",
+      },
+    },
+  },
+};

package/src/components/material-icon/constants.ts

@@ -0,0 +1,95 @@
+//If new icon need to add, Add iconname in iconNameList array and follow instruction in README.md
+export const iconNameList = [
+  "info",
+  "download",
+  "featured_seasonal_and_gifts",
+  "visibility",
+  "paid",
+  "check_box",
+  "check_box_outline_blank",
+  "radio_button_unchecked",
+  "radio_button_checked",
+  "counter_1",
+  "counter_2",
+  "counter_3",
+  "error",
+  "search",
+  "cancel",
+  "router",
+  "broadcast_on_home",
+  "check",
+  "check_circle",
+  "lock",
+  "shield_lock",
+  "phone_in_talk",
+  "call",
+  "chevron_left",
+  "chevron_right",
+  "keyboard_arrow_down",
+  "keyboard_arrow_up",
+  "arrow_back",
+  "arrow_forward",
+  "help",
+  "home_pin",
+  "location_on",
+  "timer",
+  "schedule",
+  "add",
+  "remove",
+  "bolt",
+  "rocket",
+  "cloud_sync",
+  "close",
+  "groups",
+  "speed",
+  "mail",
+  "credit_card",
+  "language",
+  "forum",
+  "contract",
+  "local_atm",
+  "headset_mic",
+  "sensors",
+  "wifi",
+  "settings",
+  "home",
+  "devices",
+  "build",
+  "thumb_up",
+  "desktop_windows",
+  "block",
+  "all_inclusive",
+  "verified_user",
+  "extension",
+  "stadia_controller",
+  "visibility_off",
+  "close_fullscreen",
+  "progress_activity",
+  "travel_explore",
+  "share",
+  "business_center",
+  "upload",
+  "videocam",
+  "expand_circle_right",
+  "add_circle",
+  "do_not_disturb_on",
+  "expand_circle_up",
+  "expand_circle_down",
+  "replay",
+  "fiber_manual_record",
+  "menu",
+  "dangerous"
+] as const;
+
+export const OpticalSizes = ["20dp", "24dp", "40dp", "48dp"] as const;
+export const weights = [
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+] as const;
+export const emphasis = [-25, 0, 200] as const;
+export const sizes = [20, 24, 32, 40, 48, 52] as const;

package/src/components/material-icon/index.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { cx } from "../../utils";
+import type { IconProps } from "./types";
+
+const MaterialIcon: React.FC<IconProps> = ({
+  name,
+  fill = 0,
+  opticalSize = "48dp",
+  weight = "200",
+  emphasis = 145,
+  size = 24,
+  color = "currentColor",
+  style = {},
+  className,
+  onClick,
+  dataTestId,
+}) => {
+  const fontVariationSettings = `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${emphasis}, 'opsz' ${opticalSize.substring(0, 2)}`;
+
+  const combinedStyle: React.CSSProperties = {
+    fontVariationSettings,
+    fontSize: `${size}px`,
+    fontFamily: "'Material Symbols Rounded'",
+    color: color || "currentColor",
+    ...style,
+  };
+
+  return (
+    <span
+      style={combinedStyle}
+      className={cx("material-symbols-rounded", className)}
+      onClick={onClick}
+      data-testid={dataTestId}
+    >
+      {name}
+    </span>
+  );
+};
+
+export { MaterialIcon };
+
+MaterialIcon.displayName = "MaterialIcon";
+
+export type { IconProps, IconName } from "./types";

package/src/components/material-icon/types.ts

@@ -0,0 +1,31 @@
+import type { CSSProperties } from "react";
+import {
+  emphasis,
+  iconNameList,
+  OpticalSizes,
+  sizes,
+  weights,
+} from "./constants";
+
+export type Fill = 1 | 0;
+
+export type IconName = (typeof iconNameList)[number];
+
+export type OpticalSize = (typeof OpticalSizes)[number];
+export type Weight = (typeof weights)[number];
+export type Emphasis = (typeof emphasis)[number];
+export type Size = (typeof sizes)[number];
+
+export type IconProps = {
+  name: IconName;
+  fill?: Fill;
+  opticalSize?: OpticalSize;
+  weight?: Weight;
+  emphasis?: Emphasis;
+  size?: Size;
+  color?: string;
+  style?: CSSProperties;
+  className?: string;
+  onClick?: () => void;
+  dataTestId?: string;
+};

package/src/components/modal/Modal.stories.tsx

@@ -0,0 +1,171 @@
+import { Modal } from "./index";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Modal> = {
+  title: "Components/Modal",
+  component: Modal,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A flexible modal component with customizable sizing, animations, and behavior options. Supports portal rendering, escape key handling, and overlay click dismissal.",
+      },
+    },
+  },
+  argTypes: {
+    isOpen: {
+      control: { type: "boolean" },
+      description: "Whether the modal is open",
+    },
+    title: {
+      control: { type: "text" },
+      description: "Optional title for the modal header",
+    },
+    size: {
+      control: { type: "select" },
+      options: ["xs", "sm", "md", "lg", "xl"],
+      description: "Modal size variant",
+    },
+    animation: {
+      control: { type: "select" },
+      options: ["popper", "bottomSheet"],
+      description: "Animation variant",
+    },
+    shape: {
+      control: { type: "select" },
+      options: ["rounded", "square"],
+      description: "Shape variant",
+    },
+    shouldCloseOnEsc: {
+      control: { type: "boolean" },
+      description: "Whether to close on escape key",
+    },
+    shouldCloseOnOverlayClick: {
+      control: { type: "boolean" },
+      description: "Whether to close on overlay click",
+    },
+  },
+  args: {
+    isOpen: true,
+    title: "Modal Title",
+    size: "md",
+    animation: "popper",
+    shape: "rounded",
+    shouldCloseOnEsc: true,
+    shouldCloseOnOverlayClick: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <div className="space-y-4">
+        <p className="text-gray-600">
+          This is a default modal with some content. You can close it by clicking
+          the X button, pressing Escape, or clicking outside the modal.
+        </p>
+        <div className="flex justify-end space-x-2">
+          <button className="px-4 py-2 text-gray-600 hover:text-gray-800">
+            Cancel
+          </button>
+          <button className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
+            Confirm
+          </button>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "xs",
+    children: (
+      <div className="text-center">
+        <p className="text-gray-600">Small modal content</p>
+      </div>
+    ),
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "xl",
+    children: (
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Large Modal</h3>
+        <p className="text-gray-600">
+          This is a large modal that can accommodate more content. It's useful
+          for forms, detailed information, or complex layouts.
+        </p>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="p-4 bg-gray-100 rounded">Content 1</div>
+          <div className="p-4 bg-gray-100 rounded">Content 2</div>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const BottomSheet: Story = {
+  args: {
+    animation: "bottomSheet",
+    size: "sm",
+    className: "top-auto bottom-0 max-w-none rounded-t-lg",
+    children: (
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Bottom Sheet</h3>
+        <p className="text-gray-600">
+          This modal slides up from the bottom, perfect for mobile interfaces.
+        </p>
+        <div className="space-y-2">
+          <button className="w-full p-3 text-left hover:bg-gray-100 rounded">
+            Option 1
+          </button>
+          <button className="w-full p-3 text-left hover:bg-gray-100 rounded">
+            Option 2
+          </button>
+          <button className="w-full p-3 text-left hover:bg-gray-100 rounded">
+            Option 3
+          </button>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const WithoutTitle: Story = {
+  args: {
+    title: undefined,
+    children: (
+      <div className="space-y-4">
+        <p className="text-gray-600">
+          This modal doesn't have a title in the header, but still has a close
+          button.
+        </p>
+      </div>
+    ),
+  },
+};
+
+export const NoCloseButton: Story = {
+  args: {
+    closeButtonClassName: "hidden",
+    children: (
+      <div className="space-y-4">
+        <p className="text-gray-600">
+          This modal doesn't have a close button. You can only close it by
+          pressing Escape or clicking outside.
+        </p>
+      </div>
+    ),
+  },
+};