@windstream/react-shared-components 0.0.1

package/src/components/spinner/Spinner.stories.tsx

@@ -0,0 +1,335 @@
+import { Spinner } from "./index";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Spinner> = {
+  title: "Components/Spinner",
+  component: Spinner,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A loading spinner component with customizable size, color, and animation.",
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["small", "medium", "large", "xlarge"],
+      description: "Spinner size",
+    },
+    color: {
+      control: { type: "color" },
+      description: "Spinner color",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes",
+    },
+  },
+  args: {
+    size: "medium",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default spinner
+export const Default: Story = {
+  args: {},
+};
+
+// Different sizes
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-8">
+      <div className="text-center">
+        <Spinner size="small" />
+        <p className="mt-2 text-xs">Small</p>
+      </div>
+      <div className="text-center">
+        <Spinner size="medium" />
+        <p className="mt-2 text-xs">Medium</p>
+      </div>
+      <div className="text-center">
+        <Spinner size="large" />
+        <p className="mt-2 text-xs">Large</p>
+      </div>
+      <div className="text-center">
+        <Spinner size="xlarge" />
+        <p className="mt-2 text-xs">XLarge</p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "All available spinner sizes.",
+      },
+    },
+  },
+};
+
+// Colored spinners
+export const ColoredSpinners: Story = {
+  render: () => (
+    <div className="grid grid-cols-4 gap-6">
+      <div className="text-center">
+        <Spinner size="large" color="#3b82f6" />
+        <p className="mt-2 text-sm text-blue-600">Blue</p>
+      </div>
+      <div className="text-center">
+        <Spinner size="large" color="#10b981" />
+        <p className="mt-2 text-sm text-green-600">Green</p>
+      </div>
+      <div className="text-center">
+        <Spinner size="large" color="#ef4444" />
+        <p className="mt-2 text-sm text-red-600">Red</p>
+      </div>
+      <div className="text-center">
+        <Spinner size="large" color="#f59e0b" />
+        <p className="mt-2 text-sm text-yellow-600">Yellow</p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Spinners with different colors.",
+      },
+    },
+  },
+};
+
+// Spinner with text
+export const SpinnerWithText: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="flex items-center gap-3">
+        <Spinner size="small" />
+        <span className="text-sm text-gray-600">Loading...</span>
+      </div>
+      <div className="flex items-center gap-3">
+        <Spinner size="medium" />
+        <span className="text-sm text-gray-600">Processing request...</span>
+      </div>
+      <div className="flex items-center gap-3">
+        <Spinner size="large" />
+        <span className="text-sm text-gray-600">Saving changes...</span>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Spinners used alongside loading text.",
+      },
+    },
+  },
+};
+
+// Button with spinner
+export const ButtonWithSpinner: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <button className="flex items-center gap-2 rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 disabled:opacity-50">
+        <Spinner size="small" color="white" />
+        <span>Loading...</span>
+      </button>
+
+      <button className="flex items-center gap-2 rounded bg-gray-600 px-4 py-2 text-white hover:bg-gray-700 disabled:opacity-50">
+        <Spinner size="small" color="white" />
+        <span>Processing...</span>
+      </button>
+
+      <button className="flex items-center gap-2 rounded bg-green-600 px-4 py-2 text-white hover:bg-green-700 disabled:opacity-50">
+        <Spinner size="small" color="white" />
+        <span>Saving...</span>
+      </button>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Spinners integrated into buttons for loading states.",
+      },
+    },
+  },
+};
+
+// Card with spinner
+export const CardWithSpinner: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-6">
+      <div className="rounded-lg border p-6">
+        <div className="flex h-32 items-center justify-center">
+          <div className="text-center">
+            <Spinner size="large" />
+            <p className="mt-3 text-sm text-gray-600">Loading content...</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="rounded-lg border p-6">
+        <div className="flex h-32 items-center justify-center">
+          <div className="text-center">
+            <Spinner size="large" color="#10b981" />
+            <p className="mt-3 text-sm text-gray-600">Processing data...</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Spinners in card layouts for content loading states.",
+      },
+    },
+  },
+};
+
+// Inline spinner
+export const InlineSpinner: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-gray-700">
+        This is some text with an inline{" "}
+        <Spinner size="small" className="mx-1 inline" /> spinner.
+      </p>
+
+      <p className="text-gray-700">
+        Another example with a{" "}
+        <Spinner size="small" color="#ef4444" className="mx-1 inline" /> colored
+        spinner.
+      </p>
+
+      <div className="flex items-center gap-2">
+        <span>Status:</span>
+        <Spinner size="small" />
+        <span className="text-sm text-gray-500">Checking...</span>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Inline spinners within text content.",
+      },
+    },
+  },
+};
+
+// Loading states
+export const LoadingStates: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="rounded-lg border p-4">
+        <h3 className="mb-2 font-medium">Initial Loading</h3>
+        <div className="flex items-center gap-3">
+          <Spinner size="medium" />
+          <span className="text-sm text-gray-600">Loading application...</span>
+        </div>
+      </div>
+
+      <div className="rounded-lg border p-4">
+        <h3 className="mb-2 font-medium">Data Fetching</h3>
+        <div className="flex items-center gap-3">
+          <Spinner size="medium" color="#3b82f6" />
+          <span className="text-sm text-gray-600">Fetching user data...</span>
+        </div>
+      </div>
+
+      <div className="rounded-lg border p-4">
+        <h3 className="mb-2 font-medium">Form Submission</h3>
+        <div className="flex items-center gap-3">
+          <Spinner size="medium" color="#10b981" />
+          <span className="text-sm text-gray-600">Submitting form...</span>
+        </div>
+      </div>
+
+      <div className="rounded-lg border p-4">
+        <h3 className="mb-2 font-medium">File Upload</h3>
+        <div className="flex items-center gap-3">
+          <Spinner size="medium" color="#f59e0b" />
+          <span className="text-sm text-gray-600">Uploading file...</span>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Different loading states with appropriate messaging.",
+      },
+    },
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">Spinner Sizes</h3>
+        <div className="flex items-center gap-8">
+          <div className="text-center">
+            <Spinner size="small" />
+            <p className="mt-2 text-xs">Small</p>
+          </div>
+          <div className="text-center">
+            <Spinner size="medium" />
+            <p className="mt-2 text-xs">Medium</p>
+          </div>
+          <div className="text-center">
+            <Spinner size="large" />
+            <p className="mt-2 text-xs">Large</p>
+          </div>
+          <div className="text-center">
+            <Spinner size="xlarge" />
+            <p className="mt-2 text-xs">XLarge</p>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">Color Variants</h3>
+        <div className="grid grid-cols-5 gap-4">
+          <div className="text-center">
+            <Spinner size="large" color="#3b82f6" />
+            <p className="mt-2 text-xs text-blue-600">Blue</p>
+          </div>
+          <div className="text-center">
+            <Spinner size="large" color="#10b981" />
+            <p className="mt-2 text-xs text-green-600">Green</p>
+          </div>
+          <div className="text-center">
+            <Spinner size="large" color="#ef4444" />
+            <p className="mt-2 text-xs text-red-600">Red</p>
+          </div>
+          <div className="text-center">
+            <Spinner size="large" color="#f59e0b" />
+            <p className="mt-2 text-xs text-yellow-600">Yellow</p>
+          </div>
+          <div className="text-center">
+            <Spinner size="large" color="#8b5cf6" />
+            <p className="mt-2 text-xs text-purple-600">Purple</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Complete showcase of all spinner sizes and colors.",
+      },
+    },
+  },
+};

package/src/components/spinner/index.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { cx } from "../../utils";
+import { SpinnerProps } from "./types";
+
+export const Spinner: React.FunctionComponent<SpinnerProps> = props => {
+  const { color = "#fff", size = "medium" } = props;
+
+  const sizeClasses = {
+    small: "w-4 h-4",
+    medium: "w-6 h-6",
+    large: "w-8 h-8",
+    xlarge: "w-12 h-12",
+  };
+
+  return (
+    <div role="status" className={"relative flex flex-row items-center"}>
+      <svg
+        aria-hidden="true"
+        className={cx(
+          "mr-2 h-5 w-5 text-transparent animate-spin",
+          sizeClasses[size],
+          props.className
+        )}
+        style={{ animation: "spin 0.75s linear infinite" }}
+        viewBox="0 0 100 100"
+        fill={color}
+      >
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+        />
+        <path
+          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+          fill="currentFill"
+        />
+      </svg>
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+};
+
+Spinner.displayName = "Spinner";
+
+export type { SpinnerProps };

package/src/components/spinner/types.ts

@@ -0,0 +1,5 @@
+export type SpinnerProps = {
+    size?: "small" | "medium" | "large" | "xlarge";
+    color?: string;
+    className?: string;
+  } & React.HTMLAttributes<HTMLDivElement>;

package/src/components/text/Text.stories.tsx

@@ -0,0 +1,302 @@
+import { Text } from "./index";
+import { DocsPage } from "@shared/stories/DocsTemplate";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Text> = {
+  title: "Components/Text",
+  component: Text,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A flexible text component with multiple typography variants and semantic elements.",
+      },
+    },
+  },
+  argTypes: {
+    as: {
+      control: { type: "select" },
+      options: [
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "p",
+        "span",
+        "div",
+        "label",
+      ],
+      description: "HTML element to render",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes (use typography classes like body1, heading1, etc.)",
+    },
+    children: {
+      control: { type: "text" },
+      description: "Text content",
+    },
+  },
+  args: {
+    children: "Sample text content",
+    className: "body1",
+    as: "p",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default text
+export const Default: Story = {
+  args: {},
+};
+
+// Headings
+export const Headings: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Text as="h1" className="heading1">
+        Heading 1
+      </Text>
+      <Text as="h2" className="heading2">
+        Heading 2
+      </Text>
+      <Text as="h3" className="heading3">
+        Heading 3
+      </Text>
+      <Text as="h4" className="heading4">
+        Heading 4
+      </Text>
+      <Text as="h5" className="heading5">
+        Heading 5
+      </Text>
+      <Text as="h6" className="heading6">
+        Heading 6
+      </Text>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "All heading variants with appropriate semantic HTML elements.",
+      },
+    },
+  },
+};
+
+// Subheadings
+export const Subheadings: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Text className="subheading1">Subheading 1</Text>
+      <Text className="subheading2">Subheading 2</Text>
+      <Text className="subheading3">Subheading 3</Text>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "All subheading variants.",
+      },
+    },
+  },
+};
+
+// Body text
+export const BodyText: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Text className="body1">
+        Body 1 text is used for the main content of your application. It
+        provides good readability and is suitable for paragraphs and longer text
+        content.
+      </Text>
+      <Text className="body2">
+        Body 2 text is slightly smaller and can be used for secondary content,
+        descriptions, or supporting text that doesn't need as much emphasis.
+      </Text>
+      <Text className="body3">
+        Body 3 text is the smallest body variant, perfect for fine print,
+        captions, or less important information.
+      </Text>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Body text variants for different content hierarchy levels.",
+      },
+    },
+  },
+};
+
+// Labels
+export const Labels: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <Text as="label" className="mb-2 block body1">
+          Label 1
+        </Text>
+        <input
+          type="text"
+          className="rounded border px-3 py-2"
+          placeholder="Input with label"
+        />
+      </div>
+      <div>
+        <Text as="label" className="mb-2 block body2">
+          Label 2
+        </Text>
+        <input
+          type="text"
+          className="rounded border px-3 py-2"
+          placeholder="Input with label"
+        />
+      </div>
+      <div>
+        <Text as="label" className="mb-2 block body3">
+          Label 3
+        </Text>
+        <input
+          type="text"
+          className="rounded border px-3 py-2"
+          placeholder="Input with label"
+        />
+      </div>
+      <div>
+        <Text as="label" className="mb-2 block footnote">
+          Label 4
+        </Text>
+        <input
+          type="text"
+          className="rounded border px-3 py-2"
+          placeholder="Input with label"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Label variants commonly used with form inputs.",
+      },
+    },
+  },
+};
+
+// Utility text
+export const UtilityText: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Text className="footnote">
+        Footnote text is used for additional information, citations, or less
+        important details.
+      </Text>
+      <Text className="micro">
+        Micro text is the smallest text variant, perfect for timestamps, version
+        numbers, or other very small information.
+      </Text>
+      <Text className="unstyled">
+        Unstyled text inherits all styling from its parent element.
+      </Text>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Utility text variants for specific use cases.",
+      },
+    },
+  },
+};
+
+// Semantic elements
+export const SemanticElements: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Text as="h1" className="heading1">
+        Main Page Title
+      </Text>
+      <Text as="h2" className="heading2">
+        Page Description
+      </Text>
+      <Text as="p" className="body1">
+        This is a paragraph element that provides the main content of the page.
+        It demonstrates how the Text component can be used with semantic HTML
+        elements.
+      </Text>
+      <Text as="label" className="block body1">
+        Form Label
+      </Text>
+      <Text as="span" className="footnote">
+        Additional information
+      </Text>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Examples of using different semantic HTML elements with the Text component.",
+      },
+    },
+  },
+};
+
+// All variants showcase
+export const AllVariants: Story = {
+  render: () => (
+    <div className="max-w-4xl space-y-6">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Headings</h3>
+        <div className="space-y-2">
+          <Text as="h1" className="heading1">Heading 1</Text>
+          <Text as="h2" className="heading2">Heading 2</Text>
+          <Text as="h3" className="heading3">Heading 3</Text>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Body Text</h3>
+        <div className="space-y-2">
+          <Text as="p" className="body1">Body 1 - Main content text</Text>
+          <Text as="p" className="body2">Body 2 - Secondary content text</Text>
+          <Text as="p" className="body3">Body 3 - Smaller content text</Text>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Labels</h3>
+        <div className="space-y-2">
+          <Text as="label" className="body1">Label 1</Text>
+          <Text as="label" className="body2">Label 2</Text>
+          <Text as="label" className="body3">Label 3</Text>
+          <Text className="footnote">Label 4</Text>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Utility</h3>
+        <div className="space-y-2">
+          <Text className="footnote">Footnote text</Text>
+          <Text className="micro">Micro text</Text>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Complete showcase of all text variants in organized sections.",
+      },
+    },
+  },
+};