dst-rg 1.0.0

package/src/components/CheckboxGroup/PlanCard/_.stories.tsx

@@ -0,0 +1,165 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { PlanCard } from ".";
+
+const meta: Meta<typeof PlanCard> = {
+  title: "Components/PlanCard",
+  component: PlanCard,
+  tags: ["autodocs"],
+};
+export default meta;
+
+type Story = StoryObj<typeof PlanCard>;
+
+export const Default: Story = {
+  args: {
+    title: "Basic Plan",
+    price: "$20",
+    per: "month",
+    size: "md",
+    headerTitle: "Subscribe to newsletter",
+    description:
+      "Get the latest updates, articles, and promotions delivered to your inbox.",
+    badgeContent: "limited time only",
+    id: "basic-plan",
+    checkboxIndex: 0,
+  },
+  render: (args) => {
+    const PlanCardStory = () => {
+      const [checked, setChecked] = useState(false);
+
+      return (
+        <PlanCard
+          {...args}
+          checked={checked}
+          onChange={() => setChecked(!checked)}
+        />
+      );
+    };
+
+    return <PlanCardStory />;
+  },
+};
+
+export const WithHeader: Story = {
+  args: {
+    title: "Basic Plan",
+    price: "$20",
+    per: "month",
+    hasHeader: true,
+    size: "md",
+    headerTitle: "Subscribe to newsletter",
+    description:
+      "Get the latest updates, articles, and promotions delivered to your inbox.",
+    badgeContent: "limited time only",
+    id: "basic-plan",
+    checkboxIndex: 0,
+  },
+  render: (args) => {
+    const PlanCardStory = () => {
+      const [checked, setChecked] = useState(false);
+
+      return (
+        <PlanCard
+          {...args}
+          checked={checked}
+          onChange={() => setChecked(!checked)}
+        />
+      );
+    };
+
+    return <PlanCardStory />;
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    title: "Basic Plan",
+    price: "$20",
+    per: "month",
+    hasHeader: true,
+    size: "md",
+    headerTitle: "Subscribe to newsletter",
+    description:
+      "Get the latest updates, articles, and promotions delivered to your inbox.",
+    badgeContent: "limited time only",
+    id: "basic-plan",
+    checkboxIndex: 0,
+    disabled: true,
+  },
+  render: (args) => {
+    const PlanCardStory = () => {
+      const [checked, setChecked] = useState(false);
+
+      return <PlanCard {...args} onChange={() => setChecked(!checked)} />;
+    };
+
+    return <PlanCardStory />;
+  },
+};
+export const CheckedDisabled: Story = {
+  args: {
+    title: "Basic Plan",
+    price: "$20",
+    per: "month",
+    hasHeader: true,
+    size: "md",
+    headerTitle: "Subscribe to newsletter",
+    description:
+      "Get the latest updates, articles, and promotions delivered to your inbox.",
+    badgeContent: "limited time only",
+    id: "basic-plan",
+    checkboxIndex: 0,
+    disabled: true,
+    checked: true,
+  },
+  render: (args) => {
+    const PlanCardStory = () => {
+      const [checked, setChecked] = useState(true);
+
+      return (
+        <PlanCard
+          {...args}
+          checked={true}
+          onChange={() => setChecked(!checked)}
+        />
+      );
+    };
+
+    return <PlanCardStory />;
+  },
+};
+
+export const DefaultRadio: Story = {
+  args: {
+    title: "Basic Plan",
+    price: "$20",
+    per: "month",
+    size: "md",
+    headerTitle: "Subscribe to newsletter",
+    description:
+      "Get the latest updates, articles, and promotions delivered to your inbox.",
+    badgeContent: "limited time only",
+    id: "basic-plan",
+    checkboxIndex: 0,
+    type: "radio",
+    name: "plan-group", // important for radio
+    value: "basic-plan", // required for identifying the selected value
+  },
+  render: (args) => {
+    const PlanCardStory = () => {
+      const [checked, setChecked] = useState(false);
+
+      return (
+        <PlanCard
+          {...args}
+          checked={checked}
+          onCardClick={() => setChecked(true)}
+          onChange={() => setChecked(true)}
+        />
+      );
+    };
+
+    return <PlanCardStory />;
+  },
+};

package/src/components/CheckboxGroup/PlanCard/_.style.ts

@@ -0,0 +1,32 @@
+export const iconSizeStyle = {
+  sm: "16",
+  md: "20",
+};
+export const textSizeStyle = {
+  sm: "text-sm",
+  md: "text-md",
+};
+const labelBaseClass = `
+   md:w-3xl h-fit min-w-[343px] text-rtext-tertiary-600 rounded-2xl flex group gap-2 cursor-pointer
+    border-2 border-rborder-secondary rounded-2xl`;
+
+export const planCardStyles = ({
+  checked,
+  disabled,
+  size,
+  hasHeader,
+}: {
+  checked?: boolean;
+  disabled?: boolean;
+  hasHeader?: boolean;
+  size?: "md" | "sm";
+}): { label: string } => {
+  return {
+    label: `${labelBaseClass} ${hasHeader ? "flex-col" : "p-4"} ${size && textSizeStyle[size]
+      } ${disabled
+        ? "bg-rbg-disabled-subtle"
+        : "group"
+      } ${checked ? "!border-rbg-brand-solid" : ""}`,
+  };
+};
+

package/src/components/CheckboxGroup/PlanCard/_.test.tsx

@@ -0,0 +1,54 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { PlanCard } from ".";
+
+describe("PlanCard", () => {
+  const defaultProps = {
+    id: "test-plan",
+    checkboxIndex: 0,
+    checked: false,
+    size: "sm" as const,
+    onChange: vi.fn(),
+    type: "checkbox" as const,
+    disabled: false,
+    price: "$20",
+    per: "month",
+    title: "Basic Plan",
+    description: "Best for starters",
+  };
+
+  it("renders the plan card with basic info", () => {
+    render(<PlanCard {...defaultProps} />);
+    expect(screen.getByText("Basic Plan")).toBeInTheDocument();
+    expect(screen.getByText("Best for starters")).toBeInTheDocument();
+    // expect(screen.getByText("$20")).toBeInTheDocument();
+    // expect(screen.getByText("month")).toBeInTheDocument();
+  });
+
+  it("fires onChange when clicked", () => {
+    render(<PlanCard {...defaultProps} />);
+    const label = screen.getByLabelText(/Basic Plan/i);
+    fireEvent.click(label);
+    expect(defaultProps.onChange).toHaveBeenCalled();
+  });
+
+  //   it("disables interaction when disabled is true", () => {
+  //     render(<PlanCard {...defaultProps} disabled={true} />);
+  //     const label = screen.getByLabelText(/Basic Plan/i);
+  //     expect(label).toHaveClass("bg-rbg-disabled-subtle");
+  //     fireEvent.click(label);
+  //     expect(defaultProps.onChange).not.toHaveBeenCalled();
+  //   });
+
+  it("adds correct styles when checked", () => {
+    render(<PlanCard {...defaultProps} checked={true} />);
+    const wrapper = screen.getByTestId("plan-card-wrapper");
+    expect(wrapper.className).toMatch(/border-2/);
+  });
+
+  //   it("renders with header if hasHeader is true", () => {
+  //     render(<PlanCard {...defaultProps} hasHeader={true} />);
+  //     const label = screen.getByLabelText(/Basic Plan/i);
+  //     expect(label.className).toMatch(/flex-col/);
+  //   });
+});

package/src/components/CheckboxGroup/PlanCard/_.types.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+
+export const ringPadding = {
+  sm: "p-1",
+  md: "p-[5px]",
+  lg: "p-1.5",
+};
+
+export interface CommonCheckboxProps {
+  id?: string; // required string
+  checkboxIndex?: number; // required number
+  checked?: boolean; // required
+  size?: "sm" | "md";
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void; // required
+  inputProps?: object;
+  type?: "radio" | "checkbox";
+  disabled?: boolean;
+}
+export interface PlanCardProps extends CommonCheckboxProps {
+  value?: string;
+  price: string;
+  per: string;
+  title: string;
+  description: string;
+  hasHeader?: boolean;
+  headerTitle?: string;
+  badgeContent?: ReactNode;
+  defaultChecked?: boolean;
+  label?: string;
+  name?: string;
+  onClick?: () => void;
+  onCardClick?: () => void;
+  children?: React.ReactNode;
+  isIndeterminate?: boolean;
+}

package/src/components/CheckboxGroup/PlanCard/index.tsx

@@ -0,0 +1,53 @@
+import { PlanCardBasic } from "@/components/ui/checkbox-group/plan-card/basic";
+import { PlanCardWithHeader } from "@/components/ui/checkbox-group/plan-card/with-header";
+import { planCardStyles } from "./_.style";
+import { PlanCardProps } from "./_.types";
+
+export const PlanCard = ({
+  hasHeader = false,
+  per,
+  size = "sm",
+  title = "",
+  description,
+  price,
+  badgeContent,
+  checked,
+  disabled,
+  type,
+  name,
+  value,
+  onChange,
+  onCardClick,
+  id,
+  checkboxIndex,
+}: Readonly<PlanCardProps>) => {
+  const CardComponent = hasHeader ? PlanCardWithHeader : PlanCardBasic;
+  const styles = planCardStyles({
+    checked,
+    disabled,
+    hasHeader,
+    size,
+  });
+  return (
+    <label {...(process.env.NODE_ENV === "test" && {
+      "data-testid": "plan-card-wrapper",
+    })} onClick={onCardClick} htmlFor={id} tabIndex={checkboxIndex} className={styles.label}>
+      <CardComponent
+        type={type}
+        checkboxIndex={checkboxIndex}
+        checked={checked}
+        name={name}
+        per={per}
+        size={size}
+        title={title}
+        description={description}
+        price={price}
+        badgeContent={badgeContent}
+        id={id}
+        value={value}
+        disabled={disabled}
+        onChange={onChange}
+      />
+    </label>
+  );
+}

package/src/components/CheckboxGroup/UserCard/_.stories.tsx

@@ -0,0 +1,89 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { paymentCardProps } from "./_.types";
+import { UserCard } from ".";
+
+type ExtendedProps = paymentCardProps & {
+  forceFocus?: boolean;
+};
+
+const meta: Meta<ExtendedProps> = {
+  title: "Components/UserCard",
+  component: UserCard,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      options: ["sm", "md"],
+      control: { type: "radio" },
+    },
+    type: {
+      options: ["checkbox", "radio"],
+      control: { type: "radio" },
+    },
+    forceFocus: {
+      control: "boolean",
+    },
+    onChange: { action: "changed" },
+    cardOnclick: { action: "card clicked" },
+  },
+};
+
+export default meta;
+
+const defaultArgs: ExtendedProps = {
+  id: "usercard-1",
+  checkboxIndex: 0,
+  description: "Sample user description",
+  userFullName: "Jane Doe",
+  username: "@janedoe",
+  checked: false,
+  disabled: false,
+  size: "sm",
+  type: "checkbox",
+  name: "userCard",
+  value: "1",
+  forceFocus: false,
+};
+
+//
+// ✅ This wrapper gives it real interactive behavior in Storybook.
+//
+const InteractiveStory = (args: ExtendedProps) => {
+  const [checked, setChecked] = useState(args.checked ?? false);
+
+  const handleChange = () => {
+    setChecked((prev) => !prev);
+  };
+
+  return (
+    <UserCard
+      {...args}
+      checked={checked}
+      onChange={handleChange}
+      cardOnclick={handleChange}
+    />
+  );
+};
+
+export const Default: StoryObj<ExtendedProps> = {
+  args: {
+    ...defaultArgs,
+  },
+  render: (args) => <InteractiveStory {...args} />,
+};
+
+export const Checked: StoryObj<ExtendedProps> = {
+  args: {
+    ...defaultArgs,
+    checked: true,
+  },
+  render: (args) => <InteractiveStory {...args} />,
+};
+export const RadioUserCard: StoryObj<ExtendedProps> = {
+  args: {
+    ...defaultArgs,
+    checked: true,
+    type: "radio",
+  },
+  render: (args) => <InteractiveStory {...args} />,
+};

package/src/components/CheckboxGroup/UserCard/_.style.ts

@@ -0,0 +1,42 @@
+const iconSizeStyle = {
+  sm: "16",
+  md: "20",
+};
+const textSizeStyle = {
+  sm: "text-sm",
+  md: "text-md",
+};
+const avatarSizeStyle = {
+  sm: "w-8 h-8",
+  md: "w-10 h-10",
+};
+const labelBaseClass = `
+    min-w-[343px] md:w-3xl rounded-xl flex group gap-2 cursor-pointer
+    border-2 border-rborder-secondary rounded-2xl text-rtext-tertiary-600`;
+
+export const paymentCardStyles = ({
+  checked,
+  disabled,
+  size,
+  hasHeader,
+}: {
+  checked?: boolean;
+  disabled?: boolean;
+  hasHeader?: boolean;
+  size?: "md" | "sm";
+}) => {
+  return {
+    label: ` ${labelBaseClass} ${hasHeader ? "flex-col" : "p-4"} ${size && textSizeStyle[size]
+      } ${disabled
+        ? "bg-rbg-disabled-subtle"
+        : "group"
+      } ${checked ? "!border-rbg-brand-solid" : ""}`,
+  };
+};
+
+export {
+  iconSizeStyle,
+  textSizeStyle,
+  avatarSizeStyle,
+  labelBaseClass,
+};

package/src/components/CheckboxGroup/UserCard/_.test.tsx

@@ -0,0 +1,66 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { UserCard } from ".";
+import { paymentCardProps } from "./_.types";
+
+const defaultProps: paymentCardProps = {
+  id: "user-card",
+  description: "Test description",
+  username: "@johndoe",
+  userFullName: "John Doe",
+  checked: false,
+  onChange: vi.fn(),
+  size: "sm",
+  type: "checkbox",
+};
+
+describe("UserCard (PaymentCard) Component", () => {
+  it("renders avatar image with correct alt", () => {
+    render(<UserCard {...defaultProps} />);
+    const img = screen.getByAltText("avatar");
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute("src", "/Avatar.png");
+  });
+
+  it("renders full name and username", () => {
+    render(<UserCard {...defaultProps} />);
+    expect(screen.getByText("John Doe")).toBeInTheDocument();
+    expect(screen.getByText("@johndoe")).toBeInTheDocument();
+  });
+
+  it("calls onChange when checkbox is clicked", () => {
+    render(<UserCard {...defaultProps} />);
+    const checkbox = screen.getByRole("checkbox");
+    fireEvent.click(checkbox);
+    expect(defaultProps.onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("handles card click if cardOnclick is passed", () => {
+    const cardOnclick = vi.fn();
+    render(<UserCard {...defaultProps} cardOnclick={cardOnclick} />);
+    const cardWrapper = screen.getByText("John Doe").closest("div");
+    fireEvent.click(cardWrapper!);
+    expect(cardOnclick).toHaveBeenCalledTimes(2);
+  });
+
+  it("renders Radio component when type is radio", () => {
+    render(<UserCard {...defaultProps} type="radio" />);
+    const radioButton = screen.getByRole("radio");
+    expect(radioButton).toBeInTheDocument();
+  });
+
+  it("calls onChange when radio is clicked", () => {
+    const onChange = vi.fn();
+    render(
+      <UserCard
+        {...defaultProps}
+        type="radio"
+        onChange={onChange} // pass the mock onChange function
+      />
+    );
+
+    const radioButton = screen.getByRole("radio");
+    fireEvent.click(radioButton);
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/CheckboxGroup/UserCard/_.types.ts

@@ -0,0 +1,26 @@
+
+export const ringPadding = {
+  sm: "p-1",
+  md: "p-[5px]",
+  lg: "p-1.5",
+};
+
+export interface CommonCheckboxProps {
+  id?: string; // required string
+  checkboxIndex?: number; // required number
+  checked?: boolean; // required
+  size?: "sm" | "md";
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void; // required
+  inputProps?: object;
+  type?: "radio" | "checkbox";
+  disabled?: boolean;
+}
+export interface paymentCardProps extends CommonCheckboxProps {
+  description: string;
+  value?: string;
+  name?: string;
+  userFullName: string;
+  cardOnclick?: () => void;
+  inputProps?: object;
+  username: string;
+}

package/src/components/CheckboxGroup/UserCard/index.tsx

@@ -0,0 +1,75 @@
+import { Checkbox } from "@/components/Checkbox";
+
+import { Radio } from "@/components/Radio";
+import { avatarSizeStyle, paymentCardStyles } from "./_.style";
+import { paymentCardProps } from "./_.types";
+
+export const UserCard = ({
+  size = "sm",
+  description,
+  checked,
+  disabled,
+  id,
+  value = "",
+  type = "checkbox",
+  onChange,
+  name = "",
+  inputProps,
+  username,
+  checkboxIndex,
+  userFullName,
+  cardOnclick,
+}: Readonly<paymentCardProps>) => {
+  const styles = paymentCardStyles({
+    checked,
+    disabled,
+    hasHeader: false,
+    size,
+  });
+  return (
+    <label onClick={cardOnclick} htmlFor={id} tabIndex={checkboxIndex} className={styles.label}>
+      <img
+        src="/Avatar.png"
+        alt="avatar"
+        role="avatar"
+        className={`rounded-full ${avatarSizeStyle[size]}`}
+      />
+      <div className="flex flex-col gap-3 grow justify-between">
+        <div className="flex flex-col">
+          <div className="flex gap-1">
+            <h3 className="font-medium text-foreground text-rtext-secondary-700">
+              {userFullName}
+            </h3>
+            <span className="text-rtext-tertiary-600">{username}</span>
+          </div>
+          <span className="text-rtext-tertiary-600">{description}</span>
+        </div>
+      </div>
+      <div className="flex items-start gap-2">
+        {type === "radio" ? (
+          <Radio
+            onChange={onChange}
+            checked={checked}
+            disabled={disabled}
+            value={value}
+            name={name}
+            size={size}
+            id={id}
+            {...inputProps}
+          />
+        ) : (
+          <Checkbox
+            {...inputProps}
+            disabled={disabled}
+            id={id}
+            name={name}
+            checked={checked}
+            onChange={onChange}
+            size={size}
+            value={value}
+          />
+        )}
+      </div>
+    </label>
+  );
+}