dst-rg 1.0.0

package/src/components/Checkbox/_.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Checkbox } from "."; // adjust the path if needed
+
+const meta: Meta<typeof Checkbox> = {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  tags: ["autodocs"],
+  argTypes: {
+    onClick: { action: "clicked" },
+    onChange: { action: "changed" },
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+    },
+    disabled: { control: "boolean" },
+    defaultChecked: { control: "boolean" },
+    isIndeterminate: { control: "boolean" },
+  },
+  args: {
+    id: "default-checkbox",
+    name: "default-checkbox",
+    children: "Accept Terms",
+    size: "md",
+    disabled: false,
+    defaultChecked: false,
+    isIndeterminate: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {};
+
+export const DefaultChecked: Story = {
+  args: {
+    defaultChecked: true,
+    id: "checked-checkbox",
+    name: "checked-checkbox",
+    children: "Pre-checked Option",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    id: "disabled-checkbox",
+    name: "disabled-checkbox",
+    children: "Disabled Checkbox",
+  },
+};
+
+export const Indeterminate: Story = {
+  args: {
+    isIndeterminate: true,
+    id: "indeterminate-checkbox",
+    name: "indeterminate-checkbox",
+    children: "Indeterminate Checkbox",
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Checkbox id="checkbox-sm" name="checkbox-sm" size="sm">
+        Small
+      </Checkbox>
+      <Checkbox id="checkbox-md" name="checkbox-md" size="md">
+        Medium
+      </Checkbox>
+      <Checkbox id="checkbox-lg" name="checkbox-lg" size="lg">
+        Large
+      </Checkbox>
+    </div>
+  ),
+};
+
+export const WithName: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-2">
+        <Checkbox id="checkbox-name-1" name="checkbox-name-1" />
+        <label htmlFor="checkbox-name-1" className="ml-2">
+          Checkbox controlled by name
+        </label>
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox id="checkbox-name-2" name="checkbox-name-2" size="lg" />
+        <label htmlFor="checkbox-name-2" className="ml-2">
+          Large checkbox with name
+        </label>
+      </div>
+    </div>
+  ),
+};

package/src/components/Checkbox/_.style.ts

@@ -0,0 +1,24 @@
+import { cva } from "class-variance-authority";
+
+const baseStyles =
+  "border-rborder-primary rounded-xs border-[1px] peer-checked:border-rbg-brand-solid peer-checked:bg-rbg-brand-solid flex items-center justify-center";
+
+const sizeStyle = {
+  sm: "w-3.5 h-3.5",
+  md: "w-4 h-4",
+  lg: "w-4.5 h-4.5",
+};
+
+export const checkboxVariants = cva(baseStyles, {
+  variants: {
+    size: sizeStyle,
+    disabled: {
+      true: " bg-rbg-disabled-subtle cursor-auto",
+      false: " group cursor-pointer",
+      undefined: "group cursor-pointer",
+    },
+  },
+  defaultVariants: {
+    size: "sm",
+  },
+});

package/src/components/Checkbox/_.test.tsx

@@ -0,0 +1,85 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { Checkbox } from "."; // update the import path to match your project structure
+
+describe("Checkbox Component", () => {
+  it("renders with default props", () => {
+    render(<Checkbox id="checkbox-default" name="checkbox-default" />);
+    const checkbox = screen.getByTestId("checkbox");
+    expect(checkbox).toBeInTheDocument();
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it("renders as checked when `checked` is true", () => {
+    render(<Checkbox id="checkbox-checked" checked name="checkbox-checked" />);
+    const checkbox = screen.getByTestId("checkbox");
+    expect(checkbox).toBeChecked();
+  });
+
+  it("calls onChange when clicked", () => {
+    const onChange = vi.fn();
+    render(<Checkbox id="checkbox-onchange" onChange={onChange} name="checkbox-onchange" />);
+    const checkbox = screen.getByTestId("checkbox");
+    fireEvent.click(checkbox);
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("does NOT call onChange when disabled", () => {
+    const onChange = vi.fn();
+    render(<Checkbox id="checkbox-disabled" disabled onChange={onChange} name="checkbox-disabled" />);
+    const checkbox = screen.getByTestId("checkbox");
+    fireEvent.click(checkbox);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("renders children and toggles checkbox on child click (manual toggle)", () => {
+    render(
+      <Checkbox id="checkbox-children" defaultChecked={false} name="checkbox-children">
+        <span>Click label</span>
+      </Checkbox>
+    );
+    const label = screen.getByText("Click label");
+    expect(label).toBeInTheDocument();
+    fireEvent.click(label);
+    const checkbox = screen.getByTestId("checkbox");
+    expect(checkbox).toBeInTheDocument();
+  });
+
+  it("renders minus icon when indeterminate is true", () => {
+    render(<Checkbox id="checkbox-minus" isIndeterminate name="checkbox-minus" />);
+    const minus = screen.getByTestId("minus-icon");
+    expect(minus).toBeInTheDocument();
+  });
+
+  it("renders tick icon when not indeterminate", () => {
+    render(<Checkbox id="checkbox-tick" name="checkbox-tick" />);
+    const tick = screen.getByTestId("tickbox-icon");
+    expect(tick).toBeInTheDocument();
+  });
+
+  it("applies correct size variant classes", () => {
+    const { rerender, container } = render(
+      <Checkbox id="checkbox-size-sm" size="sm" name="checkbox-size-sm" />
+    );
+
+    let label = container.querySelector("label");
+    expect(label?.className).toMatch(/w-3\.5/);
+
+    rerender(<Checkbox id="checkbox-size-md" size="md" name="checkbox-size-md" />);
+    label = container.querySelector("label");
+    expect(label?.className).toMatch(/w-4/);
+
+    rerender(<Checkbox id="checkbox-size-lg" size="lg" name="checkbox-size-lg" />);
+    label = container.querySelector("label");
+    expect(label?.className).toMatch(/w-4\.5/);
+  });
+
+  it("calls onClick prop when label is clicked", () => {
+    const handleClick = vi.fn();
+    render(<Checkbox id="checkbox-click" onClick={handleClick} name="checkbox-click" />);
+    const checkbox = screen.getByTestId("checkbox");
+    fireEvent.click(checkbox);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/Checkbox/_.types.ts

@@ -0,0 +1,23 @@
+export const ringPadding = {
+  sm: "p-1",
+  md: "p-[5px]",
+  lg: "p-1.5",
+};
+export interface CommonCheckboxProps {
+  id?: string; // required string
+  name: string; // required string for form control
+  checkboxIndex?: number; // required number
+  checked?: boolean; // required
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void; // required
+  size?: "sm" | "md" | "lg";
+  type?: "radio" | "checkbox";
+  disabled?: boolean;
+}
+export interface CheckboxProps extends CommonCheckboxProps {
+  defaultChecked?: boolean;
+  label?: string;
+  value?: string;
+  onClick?: () => void;
+  children?: React.ReactNode;
+  isIndeterminate?: boolean;
+}

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,93 @@
+import Minus from "@/icons/general/minus";
+import TickBox from "@/icons/general/tick-box";
+import { cn } from "@/lib/utils";
+import { useEffect, useRef } from "react";
+import { checkboxVariants } from "./_.style";
+import { CheckboxProps, ringPadding } from "./_.types";
+
+export const Checkbox = ({
+  size = "sm",
+  children,
+  id,
+  disabled = false,
+  checkboxIndex = 1,
+  isIndeterminate = false,
+  checked,
+  onChange,
+  onClick,
+  defaultChecked,
+  name,
+  label,
+  ...props
+}: Readonly<CheckboxProps>) => {
+  const checkboxRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = isIndeterminate;
+    }
+  }, [isIndeterminate]);
+
+  // for handling label text click
+  function handleCheckText() {
+    if (checkboxRef.current && !disabled) {
+      checkboxRef.current.click();
+      checkboxRef.current.focus();
+    }
+  }
+  const strokeColor = disabled ? "#D0D5DD" : "white";
+  let icon = null as React.ReactNode;
+  if (disabled) {
+    if (checked) {
+      icon = isIndeterminate ? (
+        <Minus stroke={strokeColor} />
+      ) : (
+        <TickBox stroke={strokeColor} />
+      );
+    }
+  } else {
+    icon = isIndeterminate ? (
+      <Minus stroke={strokeColor} />
+    ) : (
+      <TickBox stroke={strokeColor} />
+    );
+  }
+  return (
+    <div className="flex items-center cursor-pointer gap-2 justify-start">
+      <input
+        type="checkbox"
+        data-testid="checkbox"
+        id={id}
+        ref={checkboxRef}
+        onChange={(e) => !disabled && onChange && onChange(e)}
+        onClick={onClick}
+        disabled={disabled}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        className="peer hidden"
+        {...props}
+      />
+      <label
+        htmlFor={id ?? name}
+        tabIndex={checkboxIndex}
+        className={cn(
+          checkboxVariants({ size, disabled }),
+          `${disabled && "!bg-rbg-disabled !border-rborder-primary"} `
+        )}
+      >
+        <div
+          className={`${ringPadding[size]} ${
+            !disabled && "group-focus-within:border-2 border-rbg-brand-solid "
+          } flex items-center justify-center rounded-md`}
+        >
+          {icon}
+        </div>
+      </label>
+      {(children ?? label) && (
+        <div className="leading-none" onClick={() => handleCheckText()}>
+          {children ?? label}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,104 @@
+import IconWrapper from "@/components/ui/icon-wrapper";
+import MasterCard from "@/icons/general/master-card";
+import { Meta, StoryFn } from "@storybook/react-vite";
+import { ReactNode } from "react";
+import { PaymentCard } from ".";
+
+// Define the types for the args
+interface PaymentCardArgs {
+  checked?: boolean;
+  disabled?: boolean;
+  size?: "sm" | "md";
+  type?: "radio" | "checkbox";
+  hasHeader?: boolean;
+  title: string;
+  description: string;
+  value?: string;
+  footer: ReactNode;
+  icon: ReactNode;
+  cardOnclick?: () => void;
+}
+
+// Default export for Storybook to associate this with the component
+export default {
+  title: "Components/PaymentCard",
+  component: PaymentCard,
+  argTypes: {
+    checked: { control: "boolean" },
+    disabled: { control: "boolean" },
+    size: {
+      control: {
+        type: "select",
+        options: ["sm", "md"],
+      },
+    },
+    hasHeader: { control: "boolean" },
+    title: { control: "text" },
+    description: { control: "text" },
+    value: { control: "text" },
+    footer: { control: "text" },
+    icon: { control: "text" },
+  },
+} as Meta;
+
+// Template function for stories using StoryFn
+const Template: StoryFn<PaymentCardArgs> = (args) => {
+  const footer: ReactNode = (
+    <div className="text-xs text-gray-500">Footer Content</div>
+  );
+  const icon: ReactNode = (
+    <IconWrapper className="!h-8 !w-[46px]" data-testid="icon-wrapper">
+      <MasterCard />
+    </IconWrapper>
+  );
+
+  return (
+    <PaymentCard
+      title={args.title}
+      description={args.description}
+      value={args.value}
+      footer={footer}
+      icon={icon}
+      checked={args.checked}
+      type={args.type}
+      size={args.size}
+      disabled={args.disabled}
+      onChange={() => { }}
+    />
+  );
+};
+
+// Story with Header
+export const Default = Template.bind({});
+Default.args = {
+  title: "Premium Plan",
+  description: "Description for the premium plan",
+  value: "premium-plan",
+  checked: true,
+  size: "md",
+  disabled: false,
+  type: "checkbox",
+  hasHeader: true, // This will enable the header in the PaymentCard
+};
+
+// Story with Disabled State
+export const Disabled = Template.bind({});
+Disabled.args = {
+  title: "Disabled Plan",
+  description: "Description for the disabled plan",
+  value: "disabled-plan",
+  checked: false,
+  size: "md",
+  disabled: true, // This will disable the PaymentCard
+  hasHeader: false,
+};
+// Story with Header
+export const RadioCard = Template.bind({});
+RadioCard.args = {
+  title: "Premium Plan",
+  description: "Description for the premium plan",
+  value: "premium-plan",
+  size: "md",
+  disabled: false,
+  type: "radio",
+};

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

@@ -0,0 +1,28 @@
+const textSizeStyle = {
+  sm: "text-sm",
+  md: "text-md",
+};
+const labelBaseClass = `
+    rounded-2xl md:w-3xl text-md h-fit min-w-[343px] text-rtext-tertiary-600 flex gap-2 cursor-pointer
+    border-2 border-rborder-secondary rounded-2xl`;
+
+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" : ""}`,
+  };
+};
+

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

@@ -0,0 +1,58 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { PaymentCard } from ".";
+
+describe("PaymentCard", () => {
+  const baseProps = {
+    id: "test-card",
+    title: "Test Title",
+    description: "Test Description",
+    checked: true,
+    value: "test-value",
+    name: "test-name",
+    footer: <div data-testid="footer">Footer Content</div>,
+    icon: <span data-testid="icon">Icon</span>,
+  };
+
+  it("renders title and description", () => {
+    render(<PaymentCard {...baseProps} />);
+    expect(screen.getByText("Test Title")).toBeInTheDocument();
+    expect(screen.getByText("Test Description")).toBeInTheDocument();
+  });
+
+  it("renders a checkbox by default", () => {
+    render(<PaymentCard {...baseProps} type="checkbox" />);
+    expect(screen.getByRole("checkbox")).toBeInTheDocument();
+  });
+
+  it("renders a radio when type is 'radio'", () => {
+    render(<PaymentCard {...baseProps} type="radio" />);
+    expect(screen.getByRole("radio")).toBeInTheDocument();
+  });
+
+  it("calls onChange when input is clicked", () => {
+    const onChange = vi.fn();
+    render(<PaymentCard {...baseProps} onChange={onChange} />);
+    fireEvent.click(screen.getByRole("checkbox"));
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("calls cardOnclick when the card is clicked", () => {
+    const cardOnclick = vi.fn();
+    render(<PaymentCard {...baseProps} cardOnclick={cardOnclick} />);
+    // Target the label element itself, not just the title
+    fireEvent.click(screen.getByText("Test Title"));
+    expect(cardOnclick).toHaveBeenCalled();
+  });
+
+  it("disables input when disabled prop is true", () => {
+    render(<PaymentCard {...baseProps} disabled={true} />);
+    expect(screen.getByRole("checkbox")).toBeDisabled();
+  });
+
+  it("renders custom icon and footer", () => {
+    render(<PaymentCard {...baseProps} />);
+    expect(screen.getByTestId("icon")).toBeInTheDocument();
+    expect(screen.getByTestId("footer")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,28 @@
+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 paymentCardProps extends CommonCheckboxProps {
+  title: string;
+  description: string;
+  value?: string;
+  footer: ReactNode;
+  icon: ReactNode;
+  name?: string;
+  cardOnclick?: () => void;
+}

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

@@ -0,0 +1,71 @@
+import { Checkbox } from "@/components/Checkbox";
+import { Radio } from "@/components/Radio";
+import { paymentCardStyles } from "./_.style";
+import { paymentCardProps } from "./_.types";
+
+export const PaymentCard = ({
+  size = "sm",
+  title = "",
+  description,
+  checked,
+  disabled,
+  id,
+  value = "",
+  footer,
+  icon,
+  type = "checkbox",
+  onChange,
+  name = "",
+  cardOnclick,
+  inputProps,
+  checkboxIndex,
+}: Readonly<paymentCardProps>) => {
+  const styles = paymentCardStyles({
+    checked,
+    disabled,
+    size,
+  });
+  return (
+    <label
+      onClick={cardOnclick}
+      htmlFor={id}
+      tabIndex={checkboxIndex}
+      className={styles.label}
+    >
+      {icon}
+      <div className="flex flex-col gap-3 grow justify-between">
+        <div className="flex flex-col">
+          <h3 className="font-medium text-foreground text-rtext-secondary-700">
+            {title}
+          </h3>
+
+          <span className="text-rtext-tertiary-600">{description}</span>
+        </div>
+        {footer}
+      </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}
+            onChange={onChange}
+            size={size}
+          />
+        )}
+      </div>
+    </label>
+  );
+};