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

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

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Textarea from "./Textarea";
+
+const meta: Meta<typeof Textarea> = {
+  title: "UI/Atoms/Textarea",
+  component: Textarea,
+  parameters: {
+    docs: {
+      description: {
+        component: "A styled textarea component for longer text input. Supports error states and resize options.",
+      },
+    },
+  },
+  argTypes: {
+    placeholder: {
+      control: "text",
+      description: "Placeholder text",
+    },
+    rows: {
+      control: "number",
+      description: "Number of visible rows",
+    },
+    error: {
+      control: "boolean",
+      description: "Whether the textarea is in an error state",
+    },
+    resize: {
+      control: "select",
+      options: ["none", "both", "horizontal", "vertical"],
+      description: "Resize behavior",
+    },
+  },
+};
+
+export const Primary: StoryObj<typeof Textarea> = {
+  args: {
+    placeholder: "Enter description...",
+    rows: 4,
+  },
+};
+
+export const WithDefaultValue: StoryObj<typeof Textarea> = {
+  args: {
+    defaultValue: "This is a default value",
+    rows: 4,
+  },
+};
+
+export const WithError: StoryObj<typeof Textarea> = {
+  args: {
+    placeholder: "Enter description...",
+    rows: 4,
+    error: true,
+  },
+};
+
+export const NoResize: StoryObj<typeof Textarea> = {
+  args: {
+    placeholder: "Fixed size textarea",
+    rows: 4,
+    resize: "none",
+  },
+};
+
+export const LargeTextarea: StoryObj<typeof Textarea> = {
+  args: {
+    placeholder: "Enter a longer description...",
+    rows: 8,
+  },
+};
+
+export default meta;

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

@@ -0,0 +1,55 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Textarea from "./Textarea";
+
+describe("Textarea", () => {
+  it("renders with placeholder", () => {
+    render(<Textarea placeholder="Enter text..." />);
+    const textarea = screen.getByPlaceholderText("Enter text...");
+    expect(textarea).toBeInTheDocument();
+  });
+
+  it("renders with default value", () => {
+    render(<Textarea defaultValue="Default text" />);
+    const textarea = screen.getByDisplayValue("Default text");
+    expect(textarea).toBeInTheDocument();
+  });
+
+  it("applies error styling when error is true", () => {
+    render(<Textarea error />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("border-red-500");
+    expect(textarea).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("applies custom className", () => {
+    render(<Textarea className="custom-class" />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("custom-class");
+  });
+
+  it("applies resize-none class when resize is none", () => {
+    render(<Textarea resize="none" />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("resize-none");
+  });
+
+  it("applies resize-y class when resize is vertical", () => {
+    render(<Textarea resize="vertical" />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("resize-y");
+  });
+
+  it("has accessible attributes when error", () => {
+    render(<Textarea error id="test-textarea" />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveAttribute("aria-invalid", "true");
+    expect(textarea).toHaveAttribute("aria-describedby", "test-textarea-error");
+  });
+
+  it("respects rows prop", () => {
+    render(<Textarea rows={10} />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveAttribute("rows", "10");
+  });
+});

package/src/ui/atoms/Textarea/Textarea.tsx

@@ -0,0 +1,67 @@
+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 = false,
+  resize = "vertical",
+  className = "",
+  ...props
+}: Props) {
+  const baseClasses = [
+    "block",
+    "w-full",
+    "rounded",
+    "px-large",
+    "py-medium",
+    "border",
+    "text-base",
+    "focus:outline-none",
+    "focus:ring-2",
+    "focus:ring-offset-2",
+  ];
+
+  const resizeClasses: Record<NonNullable<Props["resize"]>, string> = {
+    none: "resize-none",
+    both: "resize",
+    horizontal: "resize-x",
+    vertical: "resize-y",
+  };
+
+  const errorClasses = error
+    ? "border-red-500 focus:ring-red-500"
+    : "border-gray-300 focus:ring-indigo-500";
+
+  const classes = [
+    ...baseClasses,
+    resizeClasses[resize],
+    errorClasses,
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <textarea
+      className={classes}
+      aria-invalid={error}
+      aria-describedby={error && props.id ? `${props.id}-error` : undefined}
+      {...props}
+    />
+  );
+}

package/src/ui/atoms/index.ts

@@ -7,3 +7,9 @@ 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/src/ui/molecules/Card/Card.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Card from "./Card";
+import { Text, Button } from "../../atoms";
+
+const meta: Meta<typeof Card> = {
+  title: "UI/Molecules/Card",
+  component: Card,
+  parameters: {
+    docs: {
+      description: {
+        component: "A versatile card component for displaying content in containers. Supports multiple variants and padding options.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "hover", "selected"],
+      description: "Visual variant of the card",
+    },
+    padding: {
+      control: "select",
+      options: ["none", "small", "medium", "large"],
+      description: "Padding size",
+    },
+  },
+};
+
+export const Default: StoryObj<typeof Card> = {
+  args: {
+    children: (
+      <>
+        <Text as="h3" className="text-lg font-semibold mb-2">Card Title</Text>
+        <Text as="p" className="text-gray-600">This is a default card with medium padding.</Text>
+      </>
+    ),
+  },
+};
+
+export const Hover: StoryObj<typeof Card> = {
+  args: {
+    variant: "hover",
+    children: (
+      <>
+        <Text as="h3" className="text-lg font-semibold mb-2">Hover Card</Text>
+        <Text as="p" className="text-gray-600">This card has hover effects. Hover over it!</Text>
+      </>
+    ),
+  },
+};
+
+export const Selected: StoryObj<typeof Card> = {
+  args: {
+    variant: "selected",
+    children: (
+      <>
+        <Text as="h3" className="text-lg font-semibold mb-2">Selected Card</Text>
+        <Text as="p" className="text-gray-600">This card appears selected with a blue border.</Text>
+      </>
+    ),
+  },
+};
+
+export const WithPaddingSmall: StoryObj<typeof Card> = {
+  args: {
+    padding: "small",
+    children: (
+      <>
+        <Text as="h3" className="text-lg font-semibold mb-2">Small Padding</Text>
+        <Text as="p" className="text-gray-600">This card has small padding.</Text>
+      </>
+    ),
+  },
+};
+
+export const WithPaddingLarge: StoryObj<typeof Card> = {
+  args: {
+    padding: "large",
+    children: (
+      <>
+        <Text as="h3" className="text-lg font-semibold mb-2">Large Padding</Text>
+        <Text as="p" className="text-gray-600">This card has large padding for more spacious content.</Text>
+      </>
+    ),
+  },
+};
+
+export const WithActions: StoryObj<typeof Card> = {
+  args: {
+    variant: "hover",
+    padding: "large",
+    children: (
+      <>
+        <Text as="h3" className="text-lg font-semibold mb-2">Card with Actions</Text>
+        <Text as="p" className="text-gray-600 mb-4">This card includes action buttons.</Text>
+        <div className="flex gap-2">
+          <Button variant="regular">Primary Action</Button>
+          <Button variant="secondary">Secondary</Button>
+        </div>
+      </>
+    ),
+  },
+};
+
+export const NoPadding: StoryObj<typeof Card> = {
+  args: {
+    padding: "none",
+    children: (
+      <div className="p-4">
+        <Text as="h3" className="text-lg font-semibold mb-2">No Padding Card</Text>
+        <Text as="p" className="text-gray-600">This card has no default padding. Content controls its own spacing.</Text>
+      </div>
+    ),
+  },
+};
+
+export default meta;

package/src/ui/molecules/Card/Card.test.tsx

@@ -0,0 +1,58 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Card from "./Card";
+
+describe("Card", () => {
+  it("renders with children", () => {
+    render(<Card>Test Content</Card>);
+    expect(screen.getByText("Test Content")).toBeInTheDocument();
+  });
+
+  it("renders with default variant", () => {
+    const { container } = render(<Card>Content</Card>);
+    const card = container.firstChild as HTMLElement;
+    expect(card).toHaveClass("bg-white", "rounded-lg", "border", "border-gray-200");
+  });
+
+  it("applies hover variant classes", () => {
+    const { container } = render(<Card variant="hover">Content</Card>);
+    const card = container.firstChild as HTMLElement;
+    expect(card).toHaveClass("hover:shadow-md", "transition-shadow", "cursor-pointer");
+  });
+
+  it("applies selected variant classes", () => {
+    const { container } = render(<Card variant="selected">Content</Card>);
+    const card = container.firstChild as HTMLElement;
+    expect(card).toHaveClass("border-indigo-500", "shadow-md");
+  });
+
+  it("applies medium padding by default", () => {
+    const { container } = render(<Card>Content</Card>);
+    const card = container.firstChild as HTMLElement;
+    expect(card).toHaveClass("p-4");
+  });
+
+  it("applies small padding", () => {
+    const { container } = render(<Card padding="small">Content</Card>);
+    const card = container.firstChild as HTMLElement;
+    expect(card).toHaveClass("p-2");
+  });
+
+  it("applies large padding", () => {
+    const { container } = render(<Card padding="large">Content</Card>);
+    const card = container.firstChild as HTMLElement;
+    expect(card).toHaveClass("p-6");
+  });
+
+  it("applies no padding", () => {
+    const { container } = render(<Card padding="none">Content</Card>);
+    const card = container.firstChild as HTMLElement;
+    expect(card).not.toHaveClass("p-2", "p-4", "p-6");
+  });
+
+  it("applies custom className", () => {
+    const { container } = render(<Card className="custom-class">Content</Card>);
+    const card = container.firstChild as HTMLElement;
+    expect(card).toHaveClass("custom-class");
+  });
+});

package/src/ui/molecules/Card/Card.tsx

@@ -0,0 +1,63 @@
+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 = "default",
+  padding = "medium",
+  className = "",
+  children,
+  ...props
+}: Props) {
+  const baseClasses = [
+    "bg-white",
+    "rounded-lg",
+    "border",
+    "border-gray-200",
+    "shadow-sm",
+  ];
+
+  const variantClasses: Record<NonNullable<Props["variant"]>, string> = {
+    default: "",
+    hover: "hover:shadow-md transition-shadow cursor-pointer",
+    selected: "border-indigo-500 shadow-md",
+  };
+
+  const paddingClasses: Record<NonNullable<Props["padding"]>, string> = {
+    none: "",
+    small: "p-2",
+    medium: "p-4",
+    large: "p-6",
+  };
+
+  const classes = [
+    ...baseClasses,
+    variantClasses[variant],
+    paddingClasses[padding],
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <div className={classes} {...props}>
+      {children}
+    </div>
+  );
+}

package/src/ui/molecules/index.ts

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