mplemented storybook changes

.storybook/preview.ts

@@ -18,9 +18,10 @@ const preview: Preview = {
       default: 'light',
       options: {
         light: { name: 'light', value: '#ffe788' },
-        dark: { name: 'dark', value: 'black' },
+        dark: { name: 'dark', value: '#0b0d0e' },
       },
     },
+      layout: "fullscreen", 
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -35,7 +36,7 @@ const preview: Preview = {
   decorators: [ThemeDecorator],
   
   initialGlobals: {
-    backgrounds: { value: 'white' },
+    backgrounds: { value: '#ffe788' },
   },
 }
 

src/app/globals.css

@@ -5,6 +5,7 @@
   --primary-text-color: #2d3748;
   --secondary-text-color: #9d99b3;
   --disabled-button-bg: rgba(115, 40, 255, 0.26);
+  --story-bg: #ffe788;
 }
 
 [data-theme="dark-theme"] {
@@ -13,6 +14,7 @@
   --primary-text-color: #e4e4e4;
   --secondary-text-color: #8fa2ae;
   --disabled-button-bg: rgba(193, 180, 216, 0.516);
+  --story-bg: #0b0d0e;
 }
 
 html,

src/components/Base/Button/Button.stories.tsx

@@ -9,9 +9,11 @@ export const Primary = {
   args: {},
   render: () => {
     return (
-      <>
-        <h2 className={styles.storyTitle}>Size</h2>
-        <section className={styles["btn-wrapper"]}>
+      <div className="bg-[var(--story-bg)] h-full w-[100vw]">
+        <h2 className="text-[var(--primary-text-color)] font-[Inter-Medium] p-4 text-2xl">
+          Size
+        </h2>
+        <section className="flex gap-[2rem] flex-wrap items-center p-3">
           <Button variant="primary" size="sm" disabled={false}>
             Small
           </Button>
@@ -22,8 +24,10 @@ export const Primary = {
             Large
           </Button>
         </section>
-        <h2 className={styles.storyTitle}>Loader</h2>
-        <section className={styles["btn-wrapper"]}>
+        <h2 className="text-[var(--primary-text-color)] font-[Inter-Medium] p-4 text-2xl">
+          Loader
+        </h2>
+        <section className="flex gap-[2rem] flex-wrap items-center p-3">
           <Button variant="primary" size="sm" loading={true}>
             Button
           </Button>
@@ -34,8 +38,10 @@ export const Primary = {
             Button
           </Button>
         </section>
-        <h2 className={styles.storyTitle}>Disabled</h2>
-        <section className={styles["btn-wrapper"]}>
+        <h2 className="text-[var(--primary-text-color)] font-[Inter-Medium] p-4 text-2xl">
+          Disabled
+        </h2>
+        <section className="flex gap-[2rem] flex-wrap items-center p-3">
           <Button variant="primary" size="sm" disabled={true}>
             Button
           </Button>
@@ -46,8 +52,10 @@ export const Primary = {
             Button
           </Button>
         </section>
-        <h2 className={styles.storyTitle}>Loader and Disabled</h2>
-        <section className={styles["btn-wrapper"]}>
+        <h2 className="text-[var(--primary-text-color)] font-[Inter-Medium] p-4 text-2xl">
+          Loader and Disabled
+        </h2>
+        <section className="flex gap-[2rem] flex-wrap items-center p-3">
           <Button variant="primary" size="sm" loading={true} disabled={true}>
             Button
           </Button>
@@ -58,7 +66,73 @@ export const Primary = {
             Button
           </Button>
         </section>
-      </>
+      </div>
+    );
+  },
+};
+
+export const Secondary = {
+  args: {},
+  render: () => {
+    return (
+      <div className="bg-[var(--story-bg)] h-full w-[100vw]">
+        <h2 className="text-[var(--primary-text-color)] font-[Inter-Medium] p-4 text-2xl">
+          Size
+        </h2>
+        <section className="flex gap-[2rem] flex-wrap items-center p-3">
+          <Button variant="secondary" size="sm" disabled={false}>
+            Small
+          </Button>
+          <Button variant="secondary" size="md">
+            Medium
+          </Button>
+          <Button variant="secondary" size="lg">
+            Large
+          </Button>
+        </section>
+        <h2 className="text-[var(--primary-text-color)] font-[Inter-Medium] p-4 text-2xl">
+          Loader
+        </h2>
+        <section className="flex gap-[2rem] flex-wrap items-center p-3">
+          <Button variant="secondary" size="sm" loading={true}>
+            Button
+          </Button>
+          <Button variant="secondary" size="md" loading={true}>
+            Button
+          </Button>
+          <Button variant="secondary" size="lg" loading={true}>
+            Button
+          </Button>
+        </section>
+        <h2 className="text-[var(--primary-text-color)] font-[Inter-Medium] p-4 text-2xl">
+          Disabled
+        </h2>
+        <section className="flex gap-[2rem] flex-wrap items-center p-3">
+          <Button variant="secondary" size="sm" disabled={true}>
+            Button
+          </Button>
+          <Button variant="secondary" size="md" disabled={true}>
+            Button
+          </Button>
+          <Button variant="secondary" size="lg" disabled={true}>
+            Button
+          </Button>
+        </section>
+        <h2 className="text-[var(--primary-text-color)] font-[Inter-Medium] p-4 text-2xl">
+          Loader and Disabled
+        </h2>
+        <section className="flex gap-[2rem] flex-wrap items-center p-3">
+          <Button variant="secondary" size="sm" loading={true} disabled={true}>
+            Button
+          </Button>
+          <Button variant="secondary" size="md" loading={true} disabled={true}>
+            Button
+          </Button>
+          <Button variant="secondary" size="lg" loading={true} disabled={true}>
+            Button
+          </Button>
+        </section>
+      </div>
     );
   },
 };

src/components/Base/Input/Input.stories.tsx

@@ -11,7 +11,12 @@ export default {
 
 export const Default = (args: any) => {
   const [value, setValue] = useState("");
+  const [errorvalue, setErrorValue] = useState("");
   return (
+    <div className="bg-[var(--story-bg)] h-[100vh] p-10">
+      <h1 className="pt-8 pb-3 font-[Inter-Medium] text-2xl text-[var(--primary-text-color)]">
+        Default
+      </h1>
       <Input
         {...args}
         value={value}
@@ -19,5 +24,18 @@ export const Default = (args: any) => {
         onChange={(e) => setValue(e.target.value)}
         onClear={() => setValue("")}
       />
+      <h1 className="pt-8 pb-3 font-[Inter-Medium] text-2xl text-[var(--primary-text-color)]">
+        Error
+      </h1>
+      <Input
+        {...args}
+        value={errorvalue}
+        placeholder="Discover news, articles and more..."
+        onChange={(e) => setErrorValue(e.target.value)}
+        onClear={() => setErrorValue("")}
+        error={true}
+        message="Please enter a valid email address."
+      />
+    </div>
   );
 };

src/components/Base/Input/Input.tsx

@@ -5,6 +5,7 @@ import classNames from "classnames";
 type InputProps = {
   label?: string;
   error?: boolean;
+  message?: string;
   onClear?: () => void;
   onEnter?: (value: string) => void;
 } & React.InputHTMLAttributes<HTMLInputElement>;
@@ -15,6 +16,7 @@ export default function Input({
   value,
   error,
   onEnter,
+  message,
   ...props
 }: InputProps) {
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -24,12 +26,12 @@ export default function Input({
   };
 
   const inputWrapper = classNames(
-    "flex items-center rounded-[10px] border-[rgba(255,255,255,0.451)] border-[0.2px]",
+    "flex items-center rounded-[10px] border-[rgba(255,255,255,0.451)] border-[0.2px] ",
     { "shadow-[0_0_3px_3px_rgb(223,56,56)]": error === true }
   );
 
   const inputClass = classNames(
-    "outline-none h-[12px] w-full text-[15px] text-[var(--primary-text-color)] bg-[var(--secondary-bg-color)] py-[1.5rem] font-[Inter-Medium]",
+    "outline-none h-[12px] w-full text-[15px] text-[var(--primary-text-color)] bg-[var(--secondary-bg-color)] py-[1.5rem] font-[Inter-Medium] ",
     {
       "!px-[1rem] !py-[1.5rem] rounded-tl-[10px] rounded-bl-[10px]":
         value != "",
@@ -38,14 +40,14 @@ export default function Input({
   );
 
   const searchWrapper = classNames(
-    "py-[1rem] px-[1rem] bg-[var(--secondary-bg-color)] rounded-tl-[10px] rounded-bl-[10px]",
+    "py-[1.02rem] px-[1rem] bg-[var(--secondary-bg-color)] rounded-tl-[10px] rounded-bl-[10px]",
     {
       hidden: value != "",
     }
   );
 
   const clearWrapper = classNames(
-    "rounded-tr-[10px] rounded-br-[10px] bg-[var(--secondary-bg-color)] p-[1rem] cursor-pointer",
+    "rounded-tr-[10px] rounded-br-[10px] bg-[var(--secondary-bg-color)] p-[0.9rem] cursor-pointer",
     {
       hidden: value === "",
     }
@@ -95,6 +97,11 @@ export default function Input({
           <Image height={20} src={img} alt="img" />
         </div>
       </div>
+      {message && (
+        <div className="text-[var(--primary-text-color)] py-3 font-[inter-Regular] text-red-600">
+          {message}
+        </div>
+      )}
     </>
   );
 }

src/components/Base/Typography/Typography.module.css

-.typograpy {
-  font-family: "Inter-Medium";
-  color: rgb(111, 111, 111);
-}

src/components/Base/Typography/typograhy.stories.tsx

-import styles from "./Typography.module.css";
 export default {
   tags: ["autodocs"],
   title: "Components/Base/Typography",
@@ -7,14 +6,14 @@ export default {
 export const Default = {
   render: () => {
     return (
-      <div className={styles.typograpy}>
-        <h1>Heading 1</h1>
-        <h2>Heading 2</h2>
-        <h3>Heading 3</h3>
-        <h4>Heading 4</h4>
-        <h5>Heading 5</h5>
-        <h6>Heading 6</h6>
-        <p>
+      <div className="w-[100vw] h-[100vh] text[var(--primary-text-color)] bg-[#ffe788]">
+        <h1 className="p-2 text-4xl font-bold">Heading 1</h1>
+        <h2 className="p-2 text-3xl font-bold">Heading 2</h2>
+        <h3 className="p-2 text-2xl font-bold">Heading 3</h3>
+        <h4 className="p-2 text-xl font-bold">Heading 4</h4>
+        <h5 className="p-2 text-lg font-bold">Heading 5</h5>
+        <h6 className="p-2 text-md font-bold">Heading 6</h6>
+        <p className="p-2 text-md ">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec
           nulla dignissim, malesuada diam vel, vulputate quam. Nunc nulla dui,
           eleifend vel massa ac, imperdiet tincidunt arcu.Lorem ipsum dolor sit

src/components/Layout/Header/Header.stories.tsx

 import Header from "./Header";
 import "../../../app/globals.css";
+import { useState } from "react";
 export default {
   title: "Components/Layout/Header",
   component: Header,
   tags: ["autodocs"],
+  argTypes: {
+    theme: {
+      control: { type: "select" },
+      options: ["light-theme", "dark-theme"],
+    },
+  },
 };
-
-export const Default = {};
+export const Default = {
+  args: {
+    theme: "light-theme", // ✅ default value
+  },
+  render: (args: any) => {
+    return (
+      <div className="w-[100vw] h-[100vh] bg-[#ffe788]">
+        <Header {...args} />
+      </div>
+    );
+  },
+};
+// export const Default = () => {
+//   const [theme, setTheme] = useState("light-theme");
+//   const themeUpdate = (value: string) => {
+//     setTheme(value);
+//   };
+//   return <Header theme={theme} updateTheme={themeUpdate} />;
+// };

src/components/Layout/Header/Header.tsx

@@ -3,20 +3,33 @@ import Input from "@/components/Base/Input/Input";
 import themeLogo from "../../../../public/imgaes/moon-svgrepo-com.svg";
 import lightTheme from "../../../../public/imgaes/sun.svg";
 import Image from "next/image";
-import { useState } from "react";
-export default function Header() {
+import { useEffect, useState } from "react";
+export default function Header({ theme, updateTheme }: any) {
   const [isDark, setIsDark] = useState("");
   const [searchValue, setSearchValue] = useState("");
 
-  const handleThemeToggle = () => {
-    setIsDark((prev) => {
+  useEffect(() => {
     document.documentElement.setAttribute(
       "data-theme",
-        prev === "light-theme" ? "dark-theme" : "light-theme"
+      theme === "dark-theme" ? "dark-theme" : "light-theme"
     );
+  }, [theme]);
 
-      return prev === "light-theme" ? "dark-theme" : "light-theme";
-    });
+  const handleThemeToggle = () => {
+    // setIsDark((prev) => {
+    //   document.documentElement.setAttribute(
+    //     "data-theme",
+    //     prev === "light-theme" ? "dark-theme" : "light-theme"
+    //   );
+    //   return prev === "light-theme" ? "dark-theme" : "light-theme";
+    // });
+    // updateTheme((prev: string) => {
+    //   document.documentElement.setAttribute(
+    //     "data-theme",
+    //     prev === "light-theme" ? "dark-theme" : "light-theme"
+    //   );
+    //   return prev === "light-theme" ? "dark-theme" : "light-theme";
+    // });
   };
 
   const handleInputChange = (e: any) => {
@@ -50,7 +63,7 @@ export default function Header() {
         />
       </div>
       <div className="cursor-pointer" onClick={handleThemeToggle}>
-        {isDark == "dark-theme" ? (
+        {theme === "dark-theme" ? (
           <Image src={lightTheme} alt="image" width={25} />
         ) : (
           <Image src={themeLogo} alt="theme-img" width={25} />

src/components/TopLevel/BlogDetail/BlogDetail.module.css

@@ -24,7 +24,6 @@ article {
 
 .img-section img {
   border-radius: 15px;
-  object-fit: stretch;
   width: 100%;
   object-fit: cover;
   display: block;
@@ -37,5 +36,4 @@ article {
   border-radius: 15px;
   background-color: var(--primary-bg-color);
   color: var(--primary-text-color);
-  box-sizing: border-box;
 }

src/components/TopLevel/BlogDetail/BlogDetail.stories.tsx

@@ -9,40 +9,20 @@ export const Default = {
   args: {
     title:
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget venenatis leo. Donec mattis tortor in nisl lacinia, ",
-    postedOn: "july 11, 2020",
+    postedOn: "July 11, 2020",
     postedBy: "Charlotte Maria",
     readTime: "1",
     tag: "fashion",
     img: "https://picsum.photos/1000/300",
-    content: `
-          # My Developer Journey
-
-          Welcome to my **developer blog**. I use this space to document what I learn, build, and break. 😅
-
-          ## 🔧 Skills I’m Learning
-
-          - HTML, CSS & JavaScript
-          - React & Next.js
-          - Node.js + Express
-          - MongoDB
-          - TypeScript
-
-          ## 📚 Favorite Resources
-
-          1. [MDN Web Docs](https://developer.mozilla.org)
-          2. [FreeCodeCamp](https://freecodecamp.org)
-          3. [Frontend Mentor](https://frontendmentor.io)
-
-          # Welcome to My Blog
-
-          This is a simple **Markdown** example to demonstrate basic formatting. You can _italicize_ text or make it **bold**.
-
-          ## Things I Like:
-
-          - 🧠 Learning new tech
-          - 📝 Writing blogs
-          - 🔗 [Check my website](https://example.com)
+    content:
+      '\n# My Developer Journey\n\nWelcome to my **developer blog**. I use this space to document what I learn, build, and break. 😅\n\n## 🔧 Skills I’m Learning\n\n- HTML, CSS & JavaScript lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget venenatis leo. Donec mattis tortor in nisl lacinia, \n- React & Next.js Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget venenatis leo. Donec mattis tortor in nisl lacinia, \n- Node.js + Express Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget venenatis leo. Donec mattis tortor in nisl lacinia, \n- MongoDB Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget venenatis leo. Donec mattis tortor in nisl lacinia, \n- TypeScript Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget venenatis leo. Donec mattis tortor in nisl lacinia, \n\n## 📚 Favorite Resources\n\n1. [MDN Web Docs](https://developer.mozilla.org)\n2. [FreeCodeCamp](https://freecodecamp.org)\n3. [Frontend Mentor](https://frontendmentor.io)\n\n# Welcome to My Blog\n\nThis is a simple **Markdown** example to demonstrate basic formatting. You can _italicize_ text or make it **bold**.\n\n## Things I Like:\n\n- 🧠 Learning new tech\n- 📝 Writing blogs\n- 🔗 [Check my website](https://example.com)\n\nHere’s a sample code snippet:\n\n```js\nconsole.log("Hello world!");\n```\n',
+  },
 
-          Here’s a sample code snippet:`,
+  render: (args: any) => {
+    return (
+      <div className="bg-[var(--secondary-bg-color)] py-4">
+        <BlogDetail {...args} />
+      </div>
+    );
   },
 };

src/components/TopLevel/BlogDetail/BlogDetail.tsx

 import ReactMarkdown from "react-markdown";
-import styles from "./BlogDetail.module.css";
+
+type BlogDetailProps = {
+  title: string;
+  postedOn: string;
+  postedBy: string;
+  tag: string;
+  readTime: string;
+  img: string;
+  content: string;
+};
 
 function BlogDetail({
   title,
@@ -9,30 +18,54 @@ function BlogDetail({
   readTime,
   img,
   content,
-}: any) {
+}: BlogDetailProps) {
   return (
-    <article>
-      <section className={styles["title-section"]}>
+    <article className="w-[85%] mx-auto">
+      <section
+        className={
+          "font-[Playfair-Medium] max-w-[85%] text-[30px] text-[var(--primary-text-color)] box-border pl-12 "
+        }
+      >
         <p>{title}</p>
-        <div className={styles["meta-container"]}>
-          <div>
-            Posted on <span>{postedOn}</span>
+        <div
+          className={"flex font-[Inter-Regular] text-[15px] gap-[2rem] pt-4"}
+        >
+          <div className="text-[var(--secondary-text-color)]">
+            Posted on{" "}
+            <span className="font-bold text-[var(--primary-text-color)]">
+              {postedOn}
+            </span>
+          </div>
+          <div className="text-[var(--secondary-text-color)]">
+            By{" "}
+            <span className="font-bold text-[var(--primary-text-color)]">
+              {postedBy}
+            </span>
           </div>
-          <div>
-            By <span>{postedBy}</span>
+          <div className="text-[var(--secondary-text-color)]">
+            Published in{" "}
+            <span className="font-bold text-[var(--primary-text-color)]">
+              {tag}
+            </span>
           </div>
-          <div>Published in {tag}</div>
-          <div>
-            <span>{readTime} min read</span>
+          <div className="font-bold text-[var(--primary-text-color)]">
+            {readTime} <span>min read</span>
           </div>
         </div>
       </section>
 
-      <section className={styles["img-section"]}>
-        <img src={img || "https://picsum.photos/1000/400"} alt={title} />
+      <section className={"rounded py-[2rem] w-[100%]"}>
+        <img
+          className="rounded-md block w-full object-cover"
+          src={img || "https://picsum.photos/1000/400"}
+          alt={title}
+        />
       </section>
-
-      <section className={styles["markdown-section"]}>
+      <section
+        className={
+          "p-8 font-[Inter-Medium] w-full rounded-md bg-[var(--primary-bg-color)] text-[var(--primary-text-color)]"
+        }
+      >
         <ReactMarkdown>{content}</ReactMarkdown>
       </section>
     </article>

src/components/TopLevel/CardList/Card/Card.stories.tsx

@@ -17,4 +17,12 @@ export const Default = {
     readTime: "2",
     imgUrl: "https://picsum.photos/350/300",
   },
+
+  render: (args: any) => {
+    return (
+      <div className="bg-[var(--story-bg)] h-[100vh] flex justify-center items-center">
+        <Card {...args} />
+      </div>
+    );
+  },
 };

src/components/TopLevel/CardList/CardWrapper/CardWrapper.stories.tsx

@@ -267,5 +267,13 @@ export const Default = {
         },
       },
     ],
+
+    render: (args: any) => {
+      return (
+        <div className="bg-[var(--secondary-bg-color)] ">
+          <CardWrapper {...args} />
+        </div>
+      );
+    },
   },
 };