Merge pull request #384 from Game-as-a-Service/feat/login-page-v2

feat/login page v2

components/shared/BoxFancy/BoxFancy.stories.tsx

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import BoxFancy, {
+  BoxFancyBorderGradientVariant,
+  BoxFancyBorderRadiusVariant,
+  BoxFancyBorderWidthVariant,
+} from "@/components/shared/BoxFancy/index";
+
+const borderSizeOptions: (BoxFancyBorderWidthVariant | undefined)[] = [
+  undefined,
+  "none",
+  "small",
+  "medium",
+  "large",
+  "xLarge",
+  "extraLarge",
+];
+const borderRadiusOptions: (BoxFancyBorderRadiusVariant | undefined)[] = [
+  undefined,
+  "none",
+  "small",
+  "medium",
+  "large",
+  "xLarge",
+  "extraLarge",
+  "full",
+];
+const borderGradientColorOptions: (
+  | BoxFancyBorderGradientVariant
+  | undefined
+)[] = [undefined, "none", "purple", "black"];
+const componentOptions = [
+  undefined,
+  "div",
+  "a",
+  "button",
+  "span",
+  "canvas",
+  "textarea",
+];
+
+const meta: Meta<typeof BoxFancy> = {
+  title: "general/BoxFancy",
+  component: BoxFancy,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="flex flex-col items-center gap-[11px]">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    children: "Love this border",
+  },
+  argTypes: {
+    borderSize: {
+      control: { type: "select" },
+      options: borderSizeOptions,
+    },
+    borderRadius: {
+      control: { type: "select" },
+      options: borderRadiusOptions,
+    },
+    borderGradientColor: {
+      control: { type: "select" },
+      options: borderGradientColorOptions,
+    },
+    className: {
+      control: { type: "text" },
+      description: "custom class name",
+      defaultValue: "",
+    },
+    style: {
+      control: { type: "object" },
+      description: "custom style",
+      defaultValue: {},
+    },
+    component: {
+      control: { type: "select" },
+      description: "Polymorphic element tag",
+      options: componentOptions,
+    },
+    ref: { control: { disable: true } },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BoxFancy>;
+
+export const Playground: Story = {
+  render: (args) => <BoxFancy {...args} />,
+};
+
+export const BorderSize: Story = {
+  render: (args) => (
+    <>
+      {borderSizeOptions.map((borderSize) => (
+        <BoxFancy key={borderSize} borderSize={borderSize} {...args}>
+          {args.children}
+        </BoxFancy>
+      ))}
+    </>
+  ),
+};
+export const BorderRadius: Story = {
+  render: (args) => (
+    <>
+      {borderRadiusOptions.map((borderRadius) => (
+        <BoxFancy key={borderRadius} borderRadius={borderRadius} {...args}>
+          {args.children}
+        </BoxFancy>
+      ))}
+    </>
+  ),
+};
+export const BorderGradientColor: Story = {
+  render: (args) => (
+    <>
+      {borderSizeOptions.map((borderGradientColor) => (
+        <BoxFancy
+          key={borderGradientColor}
+          borderSize={borderGradientColor}
+          {...args}
+        >
+          {args.children}
+        </BoxFancy>
+      ))}
+    </>
+  ),
+};

components/shared/BoxFancy/BoxFancy.test.tsx

@@ -0,0 +1,156 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import {
+  BoxFancy,
+  BoxFancyBorderGradientVariant,
+  BoxFancyBorderRadiusVariant,
+  BoxFancyBorderWidthVariant,
+  BoxFancyProps,
+} from "./BoxFancy";
+
+type ClassesFoundTest = {
+  classes: string;
+  found: boolean;
+};
+
+type BorderWidthTest = {
+  borderWidth?: BoxFancyBorderWidthVariant;
+} & ClassesFoundTest;
+
+type BorderRadiusTest = {
+  borderRadius?: BoxFancyBorderRadiusVariant;
+} & ClassesFoundTest;
+
+type BorderGradientTest = {
+  borderGradientColor?: BoxFancyBorderGradientVariant;
+} & ClassesFoundTest;
+
+const borderWidthTestTable: BorderWidthTest[] = [
+  { borderWidth: "none", classes: "p-\\[1px\\]", found: false },
+  { borderWidth: "small", classes: "p-\\[1px\\]", found: true },
+  { borderWidth: "medium", classes: "p-1", found: true },
+  { borderWidth: "large", classes: "p-1\\.5", found: true },
+  { borderWidth: "xLarge", classes: "p-2", found: true },
+  { borderWidth: "extraLarge", classes: "p-3", found: true },
+];
+
+const borderRadiusTestTable: BorderRadiusTest[] = [
+  { borderRadius: "none", classes: "rounded-2xl", found: false },
+  { borderRadius: "small", classes: "rounded-sm", found: true },
+  { borderRadius: "medium", classes: "rounded-lg", found: true },
+  { borderRadius: "large", classes: "rounded-xl", found: true },
+  { borderRadius: "xLarge", classes: "rounded-2xl", found: true },
+  { borderRadius: "extraLarge", classes: "rounded-3xl", found: true },
+  { borderRadius: "full", classes: "rounded-full", found: true },
+];
+
+const borderGradientTestTable: BorderGradientTest[] = [
+  {
+    borderGradientColor: "none",
+    classes: "gradient-purple",
+    found: false,
+  },
+  {
+    borderGradientColor: "purple",
+    classes: "gradient-purple",
+    found: true,
+  },
+  {
+    borderGradientColor: "black",
+    classes: "gradient-black",
+    found: true,
+  },
+];
+
+describe("BoxFancy", () => {
+  it("should render successfully", () => {
+    const { baseElement } = render(<BoxFancy />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it("should render children", () => {
+    const { baseElement } = render(<BoxFancy>Test</BoxFancy>);
+    expect(baseElement.textContent).toContain("Test");
+  });
+
+  it.each<BorderWidthTest>(borderWidthTestTable)(
+    "should render with correct border size",
+    ({ borderWidth, classes, found }) => {
+      const { baseElement } = render(
+        <BoxFancy borderWidth={borderWidth}>Test</BoxFancy>
+      );
+
+      const matchers = [
+        () => expect(baseElement.querySelector(`.${classes}`)),
+        () => expect(baseElement.querySelector(`.before\\:${classes}`)),
+      ];
+      matchers.forEach((matcher) =>
+        found ? matcher().toBeTruthy() : matcher().toBeFalsy()
+      );
+    }
+  );
+
+  it.each<BorderRadiusTest>(borderRadiusTestTable)(
+    "should render with correct border radius",
+    ({ borderRadius, classes, found }) => {
+      const { baseElement } = render(
+        <BoxFancy borderRadius={borderRadius}>Test</BoxFancy>
+      );
+
+      const matchers = [
+        () => expect(baseElement.querySelector(`.${classes}`)),
+        () => expect(baseElement.querySelector(`.before\\:${classes}`)),
+      ];
+      matchers.forEach((matcher) =>
+        found ? matcher().toBeTruthy() : matcher().toBeFalsy()
+      );
+    }
+  );
+
+  it.each<BorderGradientTest>(borderGradientTestTable)(
+    "should render with correct border gradient color",
+    ({ borderGradientColor, classes, found }) => {
+      const { baseElement } = render(
+        <BoxFancy borderGradientColor={borderGradientColor}>Test</BoxFancy>
+      );
+
+      const matchers = [
+        () => expect(baseElement.querySelector(`.before\\:${classes}`)),
+      ];
+      matchers.forEach((matcher) =>
+        found ? matcher().toBeTruthy() : matcher().toBeFalsy()
+      );
+    }
+  );
+
+  it("renders with other custom props", () => {
+    const customProps: BoxFancyProps = {
+      style: { backgroundColor: "red" },
+      className: "custom-class",
+    };
+
+    const { container } = render(
+      <BoxFancy {...customProps}>Custom Content</BoxFancy>
+    );
+
+    const targetElement = container.firstChild;
+    expect(targetElement).toBeInTheDocument();
+    expect(targetElement).toHaveClass("custom-class");
+    expect(targetElement).toHaveStyle("background-color: red");
+  });
+
+  it("should render with ref", () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(<BoxFancy ref={ref} />);
+    expect(ref.current).toBeInTheDocument();
+  });
+
+  it("should render with component(element tag) and ref", () => {
+    const ref = React.createRef<HTMLInputElement>();
+    render(
+      <BoxFancy component="input" ref={ref} type="number" defaultValue="123" />
+    );
+    expect(ref.current).toBeInTheDocument();
+    expect(ref.current?.value).toEqual("123");
+  });
+});