@fabio.caffarello/react-design-system 1.0.0 → 1.2.0

package/dist/ui/atoms/Badge/Badge.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from "react";
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    variant?: "success" | "warning" | "error" | "info" | "neutral";
+}
+/**
+ * Badge Component
+ *
+ * A versatile badge component for displaying status, priority, and other labels.
+ * Follows Atomic Design principles as an Atom component.
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="success">Active</Badge>
+ * <Badge variant="error">Critical</Badge>
+ * ```
+ */
+export default function Badge({ variant, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/atoms/Badge/Badge.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Badge from "./Badge";
+declare const meta: Meta<typeof Badge>;
+export declare const Success: StoryObj<typeof Badge>;
+export declare const Warning: StoryObj<typeof Badge>;
+export declare const Error: StoryObj<typeof Badge>;
+export declare const Info: StoryObj<typeof Badge>;
+export declare const Neutral: StoryObj<typeof Badge>;
+export declare const AllVariants: StoryObj<typeof Badge>;
+export declare const WithCustomContent: StoryObj<typeof Badge>;
+export default meta;

package/dist/ui/atoms/Badge/Badge.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/atoms/Select/Select.d.ts

@@ -0,0 +1,30 @@
+import type { SelectHTMLAttributes } from "react";
+interface Option {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface Props extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "children"> {
+    options: Option[];
+    placeholder?: string;
+    error?: boolean;
+}
+/**
+ * Select Component
+ *
+ * A styled select dropdown component for forms.
+ * Follows Atomic Design principles as an Atom component.
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   options={[
+ *     { value: "1", label: "Option 1" },
+ *     { value: "2", label: "Option 2" }
+ *   ]}
+ *   placeholder="Select an option"
+ * />
+ * ```
+ */
+export default function Select({ options, placeholder, error, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/atoms/Select/Select.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Select from "./Select";
+declare const meta: Meta<typeof Select>;
+export declare const Primary: StoryObj<typeof Select>;
+export declare const WithSelectedValue: StoryObj<typeof Select>;
+export declare const WithError: StoryObj<typeof Select>;
+export declare const WithDisabledOption: StoryObj<typeof Select>;
+export declare const StatusOptions: StoryObj<typeof Select>;
+export declare const PriorityOptions: StoryObj<typeof Select>;
+export default meta;

package/dist/ui/atoms/Select/Select.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/atoms/Textarea/Textarea.d.ts

@@ -0,0 +1,21 @@
+import type { TextareaHTMLAttributes } from "react";
+interface Props extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    error?: boolean;
+    resize?: "none" | "both" | "horizontal" | "vertical";
+}
+/**
+ * Textarea Component
+ *
+ * A styled textarea component for longer text input.
+ * Follows Atomic Design principles as an Atom component.
+ *
+ * @example
+ * ```tsx
+ * <Textarea
+ *   placeholder="Enter description..."
+ *   rows={4}
+ * />
+ * ```
+ */
+export default function Textarea({ error, resize, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/atoms/Textarea/Textarea.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Textarea from "./Textarea";
+declare const meta: Meta<typeof Textarea>;
+export declare const Primary: StoryObj<typeof Textarea>;
+export declare const WithDefaultValue: StoryObj<typeof Textarea>;
+export declare const WithError: StoryObj<typeof Textarea>;
+export declare const NoResize: StoryObj<typeof Textarea>;
+export declare const LargeTextarea: StoryObj<typeof Textarea>;
+export default meta;

package/dist/ui/atoms/Textarea/Textarea.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/atoms/index.d.ts

@@ -3,3 +3,6 @@ export { default as Text } from "./Text/Text";
 export { default as Input } from "./Input/Input";
 export { default as Button } from "./Button/Button";
 export { default as BoxWrapper } from "./BoxWrapper/BoxWrapper";
+export { default as Badge } from "./Badge/Badge";
+export { default as Select } from "./Select/Select";
+export { default as Textarea } from "./Textarea/Textarea";

package/dist/ui/molecules/Card/Card.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from "react";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "hover" | "selected";
+    padding?: "none" | "small" | "medium" | "large";
+}
+/**
+ * Card Component
+ *
+ * A versatile card component for displaying content in containers.
+ * Follows Atomic Design principles as a Molecule component.
+ * Can be used to replace BoxWrapper in many cases with more flexibility.
+ *
+ * @example
+ * ```tsx
+ * <Card variant="hover" padding="large">
+ *   <h3>Card Title</h3>
+ *   <p>Card content</p>
+ * </Card>
+ * ```
+ */
+export default function Card({ variant, padding, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/molecules/Card/Card.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Card from "./Card";
+declare const meta: Meta<typeof Card>;
+export declare const Default: StoryObj<typeof Card>;
+export declare const Hover: StoryObj<typeof Card>;
+export declare const Selected: StoryObj<typeof Card>;
+export declare const WithPaddingSmall: StoryObj<typeof Card>;
+export declare const WithPaddingLarge: StoryObj<typeof Card>;
+export declare const WithActions: StoryObj<typeof Card>;
+export declare const NoPadding: StoryObj<typeof Card>;
+export default meta;

package/dist/ui/molecules/Card/Card.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/molecules/index.d.ts

@@ -1 +1,2 @@
 export { default as InputWithLabel } from "./InputWithLabel/InputWithLabel";
+export { default as Card } from "./Card/Card";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fabio.caffarello/react-design-system",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.2.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/ui/index.d.ts",

package/src/ui/atoms/Badge/Badge.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Badge from "./Badge";
+
+const meta: Meta<typeof Badge> = {
+  title: "UI/Atoms/Badge",
+  component: Badge,
+  parameters: {
+    docs: {
+      description: {
+        component: "A versatile badge component for displaying status, priority, and other labels. Supports multiple variants: success, warning, error, info, and neutral.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["success", "warning", "error", "info", "neutral"],
+      description: "Visual variant of the badge",
+    },
+    children: {
+      control: "text",
+      description: "Content to display inside the badge",
+    },
+  },
+};
+
+export const Success: StoryObj<typeof Badge> = {
+  args: {
+    children: "Success",
+    variant: "success",
+  },
+};
+
+export const Warning: StoryObj<typeof Badge> = {
+  args: {
+    children: "Warning",
+    variant: "warning",
+  },
+};
+
+export const Error: StoryObj<typeof Badge> = {
+  args: {
+    children: "Error",
+    variant: "error",
+  },
+};
+
+export const Info: StoryObj<typeof Badge> = {
+  args: {
+    children: "Info",
+    variant: "info",
+  },
+};
+
+export const Neutral: StoryObj<typeof Badge> = {
+  args: {
+    children: "Neutral",
+    variant: "neutral",
+  },
+};
+
+export const AllVariants: StoryObj<typeof Badge> = {
+  render: () => (
+    <div className="flex gap-2 flex-wrap">
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="error">Error</Badge>
+      <Badge variant="info">Info</Badge>
+      <Badge variant="neutral">Neutral</Badge>
+    </div>
+  ),
+};
+
+export const WithCustomContent: StoryObj<typeof Badge> = {
+  render: () => (
+    <div className="flex gap-2 flex-wrap">
+      <Badge variant="success">Active</Badge>
+      <Badge variant="error">Critical</Badge>
+      <Badge variant="warning">Pending</Badge>
+      <Badge variant="info">New</Badge>
+      <Badge variant="neutral">Draft</Badge>
+    </div>
+  ),
+};
+
+export default meta;

package/src/ui/atoms/Badge/Badge.test.tsx

@@ -0,0 +1,63 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Badge from "./Badge";
+
+describe("Badge", () => {
+  it("renders with default variant", () => {
+    render(<Badge>Test Badge</Badge>);
+    const badge = screen.getByText("Test Badge");
+    expect(badge).toBeInTheDocument();
+    expect(badge).toHaveClass("bg-gray-100");
+  });
+
+  it("renders with success variant", () => {
+    render(<Badge variant="success">Success</Badge>);
+    const badge = screen.getByText("Success");
+    expect(badge).toHaveClass("bg-green-100", "text-green-800", "border-green-500");
+  });
+
+  it("renders with warning variant", () => {
+    render(<Badge variant="warning">Warning</Badge>);
+    const badge = screen.getByText("Warning");
+    expect(badge).toHaveClass("bg-yellow-100", "text-yellow-800", "border-yellow-500");
+  });
+
+  it("renders with error variant", () => {
+    render(<Badge variant="error">Error</Badge>);
+    const badge = screen.getByText("Error");
+    expect(badge).toHaveClass("bg-red-100", "text-red-800", "border-red-500");
+  });
+
+  it("renders with info variant", () => {
+    render(<Badge variant="info">Info</Badge>);
+    const badge = screen.getByText("Info");
+    expect(badge).toHaveClass("bg-blue-100", "text-blue-800", "border-blue-500");
+  });
+
+  it("renders with neutral variant", () => {
+    render(<Badge variant="neutral">Neutral</Badge>);
+    const badge = screen.getByText("Neutral");
+    expect(badge).toHaveClass("bg-gray-100", "text-gray-800", "border-gray-500");
+  });
+
+  it("applies custom className", () => {
+    render(<Badge className="custom-class">Test</Badge>);
+    const badge = screen.getByText("Test");
+    expect(badge).toHaveClass("custom-class");
+  });
+
+  it("has accessible role and aria-label for string children", () => {
+    render(<Badge>Accessible Badge</Badge>);
+    const badge = screen.getByRole("status");
+    expect(badge).toHaveAttribute("aria-label", "Accessible Badge");
+  });
+
+  it("renders with custom children", () => {
+    render(
+      <Badge>
+        <span>Custom Content</span>
+      </Badge>
+    );
+    expect(screen.getByText("Custom Content")).toBeInTheDocument();
+  });
+});

package/src/ui/atoms/Badge/Badge.tsx

@@ -0,0 +1,60 @@
+import type { HTMLAttributes } from "react";
+
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+  variant?: "success" | "warning" | "error" | "info" | "neutral";
+}
+
+/**
+ * Badge Component
+ * 
+ * A versatile badge component for displaying status, priority, and other labels.
+ * Follows Atomic Design principles as an Atom component.
+ * 
+ * @example
+ * ```tsx
+ * <Badge variant="success">Active</Badge>
+ * <Badge variant="error">Critical</Badge>
+ * ```
+ */
+export default function Badge({ 
+  variant = "neutral", 
+  className = "",
+  children,
+  ...props 
+}: Props) {
+  const baseClasses = [
+    "inline-flex",
+    "items-center",
+    "px-2",
+    "py-1",
+    "rounded",
+    "text-xs",
+    "font-medium",
+    "border",
+  ];
+
+  const variantClasses: Record<NonNullable<Props["variant"]>, string> = {
+    success: "bg-green-100 text-green-800 border-green-500",
+    warning: "bg-yellow-100 text-yellow-800 border-yellow-500",
+    error: "bg-red-100 text-red-800 border-red-500",
+    info: "bg-blue-100 text-blue-800 border-blue-500",
+    neutral: "bg-gray-100 text-gray-800 border-gray-500",
+  };
+
+  const classes = [
+    ...baseClasses,
+    variantClasses[variant as NonNullable<Props["variant"]>],
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <span
+      role="status"
+      aria-label={typeof children === "string" ? children : undefined}
+      className={classes}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}

package/src/ui/atoms/Select/Select.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Select from "./Select";
+
+const meta: Meta<typeof Select> = {
+  title: "UI/Atoms/Select",
+  component: Select,
+  parameters: {
+    docs: {
+      description: {
+        component: "A styled select dropdown component for forms. Supports options, placeholder, and error states.",
+      },
+    },
+  },
+  argTypes: {
+    options: {
+      control: "object",
+      description: "Array of options to display",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text for the select",
+    },
+    error: {
+      control: "boolean",
+      description: "Whether the select is in an error state",
+    },
+  },
+};
+
+const defaultOptions = [
+  { value: "1", label: "Option 1" },
+  { value: "2", label: "Option 2" },
+  { value: "3", label: "Option 3" },
+];
+
+export const Primary: StoryObj<typeof Select> = {
+  args: {
+    options: defaultOptions,
+    placeholder: "Select an option",
+  },
+};
+
+export const WithSelectedValue: StoryObj<typeof Select> = {
+  args: {
+    options: defaultOptions,
+    defaultValue: "2",
+  },
+};
+
+export const WithError: StoryObj<typeof Select> = {
+  args: {
+    options: defaultOptions,
+    placeholder: "Select an option",
+    error: true,
+  },
+};
+
+export const WithDisabledOption: StoryObj<typeof Select> = {
+  args: {
+    options: [
+      { value: "1", label: "Option 1" },
+      { value: "2", label: "Option 2 (Disabled)", disabled: true },
+      { value: "3", label: "Option 3" },
+    ],
+    placeholder: "Select an option",
+  },
+};
+
+export const StatusOptions: StoryObj<typeof Select> = {
+  args: {
+    options: [
+      { value: "DRAFT", label: "Draft" },
+      { value: "ACTIVE", label: "Active" },
+      { value: "COMPLETED", label: "Completed" },
+      { value: "ARCHIVED", label: "Archived" },
+    ],
+    placeholder: "Select status",
+  },
+};
+
+export const PriorityOptions: StoryObj<typeof Select> = {
+  args: {
+    options: [
+      { value: "LOW", label: "Low" },
+      { value: "MEDIUM", label: "Medium" },
+      { value: "HIGH", label: "High" },
+      { value: "CRITICAL", label: "Critical" },
+    ],
+    placeholder: "Select priority",
+  },
+};
+
+export default meta;

package/src/ui/atoms/Select/Select.test.tsx

@@ -0,0 +1,63 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Select from "./Select";
+
+describe("Select", () => {
+  const options = [
+    { value: "1", label: "Option 1" },
+    { value: "2", label: "Option 2" },
+    { value: "3", label: "Option 3" },
+  ];
+
+  it("renders with options", () => {
+    render(<Select options={options} />);
+    const select = screen.getByRole("combobox");
+    expect(select).toBeInTheDocument();
+    expect(screen.getByText("Option 1")).toBeInTheDocument();
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
+    expect(screen.getByText("Option 3")).toBeInTheDocument();
+  });
+
+  it("renders with placeholder", () => {
+    render(<Select options={options} placeholder="Select an option" />);
+    const placeholder = screen.getByText("Select an option");
+    expect(placeholder).toBeInTheDocument();
+    expect(placeholder).toBeDisabled();
+  });
+
+  it("applies error styling when error is true", () => {
+    render(<Select options={options} error />);
+    const select = screen.getByRole("combobox");
+    expect(select).toHaveClass("border-red-500");
+    expect(select).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("applies custom className", () => {
+    render(<Select options={options} className="custom-class" />);
+    const select = screen.getByRole("combobox");
+    expect(select).toHaveClass("custom-class");
+  });
+
+  it("renders disabled options", () => {
+    const optionsWithDisabled = [
+      { value: "1", label: "Option 1" },
+      { value: "2", label: "Option 2", disabled: true },
+    ];
+    render(<Select options={optionsWithDisabled} />);
+    const option2 = screen.getByText("Option 2");
+    expect(option2).toBeDisabled();
+  });
+
+  it("supports defaultValue", () => {
+    render(<Select options={options} defaultValue="2" />);
+    const select = screen.getByRole("combobox") as HTMLSelectElement;
+    expect(select.value).toBe("2");
+  });
+
+  it("has accessible attributes when error", () => {
+    render(<Select options={options} error id="test-select" />);
+    const select = screen.getByRole("combobox");
+    expect(select).toHaveAttribute("aria-invalid", "true");
+    expect(select).toHaveAttribute("aria-describedby", "test-select-error");
+  });
+});

package/src/ui/atoms/Select/Select.tsx

@@ -0,0 +1,85 @@
+import type { SelectHTMLAttributes } from "react";
+
+interface Option {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface Props extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "children"> {
+  options: Option[];
+  placeholder?: string;
+  error?: boolean;
+}
+
+/**
+ * Select Component
+ * 
+ * A styled select dropdown component for forms.
+ * Follows Atomic Design principles as an Atom component.
+ * 
+ * @example
+ * ```tsx
+ * <Select 
+ *   options={[
+ *     { value: "1", label: "Option 1" },
+ *     { value: "2", label: "Option 2" }
+ *   ]}
+ *   placeholder="Select an option"
+ * />
+ * ```
+ */
+export default function Select({
+  options,
+  placeholder,
+  error = false,
+  className = "",
+  ...props
+}: Props) {
+  const baseClasses = [
+    "block",
+    "w-full",
+    "rounded",
+    "h-form-element",
+    "px-large",
+    "border",
+    "text-base",
+    "focus:outline-none",
+    "focus:ring-2",
+    "focus:ring-offset-2",
+  ];
+
+  const errorClasses = error
+    ? "border-red-500 focus:ring-red-500"
+    : "border-gray-300 focus:ring-indigo-500";
+
+  const classes = [
+    ...baseClasses,
+    errorClasses,
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <select
+      className={classes}
+      aria-invalid={error}
+      aria-describedby={error ? `${props.id}-error` : undefined}
+      {...props}
+    >
+      {placeholder && (
+        <option value="" disabled>
+          {placeholder}
+        </option>
+      )}
+      {options.map((option) => (
+        <option
+          key={option.value}
+          value={option.value}
+          disabled={option.disabled}
+        >
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+}