added atomic structure

package.json

@@ -64,6 +64,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "classnames": "^2.5.1",
     "ini": "^5.0.0",
     "next": "^15.0.0",
     "react": "19.0.0",
@@ -73,16 +74,16 @@
     "tsnode-di": "0.0.3"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
     "@chromatic-com/storybook": "^3.2.4",
     "@storybook/addon-essentials": "^8.5.8",
     "@storybook/addon-interactions": "^8.5.8",
     "@storybook/addon-links": "^8.5.8",
     "@storybook/blocks": "^8.5.8",
     "@storybook/nextjs": "^8.5.8",
     "@storybook/test": "^8.5.8",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/chai": "^4.3.4",
     "@types/cors": "^2.8.13",
     "@types/jest": "^29.5.14",
@@ -96,18 +97,19 @@
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
     "eslint": "^8.36.0",
+    "eslint-plugin-storybook": "^0.11.3",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "eslint-plugin-storybook": "^0.11.3",
     "mini-css-extract-plugin": "^2.9.2",
     "mocha": "^10.2.0",
     "nodemon": "^1.12.1",
     "npm-run-parallel": "^0.6.0",
     "nyc": "^15.1.0",
     "sass": "^1.85.0",
     "sass-loader": "^16.0.5",
-    "ts-jest": "^29.2.6",
     "storybook": "^8.5.8",
+    "ts-jest": "^29.2.6",
     "ts-loader": "^9.4.2",
     "ts-node": "^10.9.2",
     "typedoc": "^0.23.28",

src/hooks/useToggle.ts

@@ -1,7 +1,7 @@
 "use client";
 import { useState, useCallback } from "react";
 
-export function useToggle(initial_value: boolean = false): [boolean, () => void] {
+export function useToggle(initial_value = false): [boolean, () => void] {
   const [value, setValue] = useState(initial_value);
   const toggle = useCallback(() => {
     setValue((prev) => !prev);

src/models/image-dto.ts

@@ -0,0 +1,27 @@
+export interface ImageDTO {
+  // id: string;
+  alt: string;
+  // filename: string;
+  // mimeType: string;
+  // filesize: number;
+  width: number;
+  height: number;
+  focalX?: number;
+  focalY?: number;
+  sizes?: {
+    [key: string]: ResizedImage;
+  };
+  // createdAt: string;
+  // updatedAt: string;
+  url: string;
+  // thumbnailURL: string;
+}
+
+export interface ResizedImage {
+  width: number;
+  height: number;
+  mimeType: string;
+  filesize: number;
+  filename: string;
+  url: string;
+}

src/models/index.ts

@@ -1 +1,2 @@
-export * from "./user";
+export * from "./image-dto";
+export * from "./user";

src/ui/components/atoms/Cta/Cta.module.scss

@@ -0,0 +1,94 @@
+@use "@/styles/vars.scss" as vars;
+
+.cta {
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 24px;
+  width: fit-content;
+  transition: all 0.3s ease;
+  svg *,
+  &::after {
+    transition: all 0.3s ease;
+  }
+  &.hidden {
+    display: none;
+    visibility: hidden;
+  }
+
+  &.primary {
+    border-radius: 30px;
+    background: transparent;
+    border: 1.5px solid black;
+    color: black;
+    svg * {
+      stroke: black;
+    }
+    &:hover {
+      background: black;
+      color: white;
+      svg * {
+        stroke: white;
+      }
+    }
+  }
+
+  &.secondary {
+    border-radius: 30px;
+    background: transparent;
+    border: 1.5px solid white;
+    color: white;
+    svg * {
+      stroke: white;
+    }
+    &:hover {
+      background: white;
+      color: black;
+      svg * {
+        stroke: black;
+      }
+    }
+  }
+
+  &.icon {
+    padding: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: transparent;
+    border: 1.5px solid black;
+    svg * {
+      stroke: black;
+    }
+    &:hover {
+      background: black;
+      svg * {
+        stroke: white;
+      }
+    }
+  }
+
+  &.underline {
+    padding: 4px 0;
+    position: relative;
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 1.5px;
+      background: black;
+      opacity: 0;
+    }
+    &:hover {
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+}

src/ui/components/atoms/Cta/Cta.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import Cta from "./Cta";
+import SvgChevronRight from "../Svg/SvgChevronRight";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Cta> = {
+  title: "Atoms/Cta",
+  component: Cta,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  // argTypes: {
+  //   backgroundColor: { control: "color" },
+  // },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    variant: "primary",
+    children: "CTA",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    children: "CTA",
+  },
+  globals: {
+    backgrounds: { value: "dark" },
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    variant: "icon",
+  },
+  render: (args) => (
+    <Cta {...args}>
+      <SvgChevronRight />
+    </Cta>
+  ),
+};
+
+export const Underline: Story = {
+  args: {
+    variant: "underline",
+    children: "CTA",
+  },
+};

src/ui/components/atoms/Cta/Cta.test.tsx

@@ -0,0 +1,58 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import Cta, { CtaProps } from "./Cta";
+
+const dummyData: CtaProps = {
+  variant: "primary",
+};
+
+describe(Cta, () => {
+  it("should render a button element if no href is specified", () => {
+    const { getByRole } = render(<Cta {...dummyData} />);
+    const cta = getByRole("button");
+    expect(cta).toBeInTheDocument();
+  });
+
+  it("should render a Link element if a href is specified", () => {
+    const { getByRole } = render(
+      <Cta href="https://www.google.com" {...dummyData} />
+    );
+    const cta = getByRole("link");
+    expect(cta).toBeInTheDocument();
+    expect(cta).toHaveAttribute("href", "https://www.google.com");
+  });
+
+  it("should render the correct children text", () => {
+    render(<Cta {...dummyData}>Submit</Cta>);
+    render(
+      <Cta href="www.google.com" {...dummyData}>
+        Submit
+      </Cta>
+    );
+    const button = screen.getByRole("button");
+    const link = screen.getByRole("link");
+    // Check if the button contains the correct text
+    expect(button).toHaveTextContent("Submit");
+    expect(link).toHaveTextContent("Submit");
+  });
+
+  it("should call the onClick callback when clicked", () => {
+    const handleClick = jest.fn(); // Mock function
+    render(<Cta onClick={handleClick} {...dummyData} />);
+    render(<Cta href="www.google.com" onClick={handleClick} {...dummyData} />);
+    const button = screen.getByRole("button");
+    const link = screen.getByRole("link");
+    fireEvent.click(button);
+    fireEvent.click(link);
+    // Expect the mock function to have been called twice
+    expect(handleClick).toHaveBeenCalledTimes(2);
+  });
+
+  // it("should not display if isHidden property is set to true", () => {
+  //   render(<Cta isHidden {...dummyData} />);
+  //   render(<Cta isHidden href="www.google.com" {...dummyData} />);
+  //   const button = screen.queryByRole("button");
+  //   const link = screen.queryByRole("link");
+  //   expect(button).toHaveClass("hidden");
+  //   expect(link).toHaveClass("hidden");
+  // });
+});