Initial commit

.gitignore

@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log
+storybook-static

.storybook/main.js

+
+
+/** @type { import('@storybook/nextjs').StorybookConfig } */
+const config = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [],
+  "framework": {
+    "name": "@storybook/nextjs",
+    "options": {}
+  },
+  "staticDirs": [
+    "..\\public"
+  ]
+};
+export default config;
\ No newline at end of file

.storybook/preview.js

+/** @type { import('@storybook/nextjs').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
\ No newline at end of file

package.json

@@ -6,11 +6,21 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@react-icons/all-files": "^4.1.0",
+    "clsx": "^2.1.1",
+    "next": "15.3.4",
+    "prop-types": "^15.8.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.3.4"
+    "react-icons": "^5.5.0"
+  },
+  "devDependencies": {
+    "@storybook/nextjs": "^9.0.13",
+    "storybook": "^9.0.13"
   }
 }

src/components/form/button/Button.jsx

+import clsx from "clsx";
+import PropTypes from "prop-types";
+import styles from "./Button.module.css";
+export const Button = ({ variant, size, label, loading, ...props }) => {
+  return (
+    <button
+      className={clsx(
+        styles.button,
+        styles[variant],
+        styles[size],
+        loading && styles.loading
+      )}
+      disabled={loading || props.disabled}
+      {...props}
+    >
+      {loading ? "Loading..." : label}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  variant: PropTypes.oneOf(["primary", "secondary"]).isRequired,
+  size: PropTypes.oneOf(["sm", "md", "lg"]),
+  label: PropTypes.string.isRequired,
+  loading: PropTypes.bool,
+};
+
+Button.defaultProps = {
+  size: "md",
+  loading: false,
+};

src/components/form/button/Button.module.css

+.button {
+  width: 100%;
+}
+
+.button button {
+  width: 100%;
+  height: 2rem;
+}

src/components/form/button/Button.stories.jsx

+import { Children } from "react";
+import { Button } from "./Button";
+
+export default {
+  title: "Form/button",
+  component: Button,
+
+  argTypes: {
+    onClick: { action: "onClick" },
+  },
+};
+
+export const primary = {
+  render: (args) => <Button {...args} />,
+  args: {
+    primary: true,
+    children: "Submit",
+    color: "#000",
+  },
+};

src/components/form/search/Search.jsx

+import React from "react";
+import style from "./Search.module.css";
+import { IoIosSearch } from "react-icons/io";
+export const Search = ({ placeholder, onChange, ...props }) => {
+  return (
+    <div className={style.searchContainer}>
+      <div className={style.search}>
+        <IoIosSearch />
+        <input placeholder={placeholder} onChange={onChange} {...props} />
+      </div>
+    </div>
+  );
+};

src/components/form/search/Search.module.css

+.search {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.search input {
+  width: 100%;
+  height: 2rem;
+}
+
+.search input:focus {
+  outline: none;
+}

src/components/form/search/Search.stories.jsx

+import { Search } from "./Search";
+
+export default {
+  title: "Form/Search",
+  component: "Search",
+  argTypes: {
+    onChange: { action: "search-item" },
+  },
+};
+
+export const search = {
+  render:(args) => <Search {...args} />,
+  args:{
+    placeholder:"Discover news articles and more",
+  },
+};

src/components/layout/Card/Header.jsx

+import React from "react";
+import style from "./Header.module.css";
+
+export const Header = ({ color, title, Icon, ...props }) => {
+  return (
+    <div className={style.container}>
+      <div className={style.head}>
+        <h2 style={{ color }} {...props}>
+          {title}
+        </h2>
+      </div>
+      <div className={style.icon}>{Icon && <Icon />}</div>
+    </div>
+  );
+};

src/components/layout/Card/Header.module.css

+.container {
+  display: flex;
+  justify-content: space-around;
+}
+
+.icon {
+  margin-top: 1.rem;
+}

src/components/layout/Card/Header.stories.jsx

+import { Header } from "./Header";
+
+export default {
+  title: "Card/Header",
+  component: Header,
+};
+
+export const header = {
+  render: (args) => <Header {...args} />,
+  args: {
+    title: "NewsBlog",
+  },
+};

src/components/layout/Typography/Typography.jsx

+import React from "react";
+import style from "./Typography.module.css";
+export const Typography = ({ color, children, ...props }) => {
+  return (
+    <div className={style.type}>
+      <p color={color} {...props}>
+        {children}
+      </p>
+    </div>
+  );
+};

src/components/layout/Typography/Typography.stories.jsx

+import { Typography } from "./Typography";
+
+export default {
+  title: "Card/Typography",
+  component: Typography,
+
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export const typography = {
+  render: (args) => <Typography {...args} />,
+  args: {
+    children:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua,",
+  },
+};

src/components/top-level/Cards/Card.jsx

+import React from "react";
+import style from "./Card.module.css";
+import { Header } from "@/components/layout/Card/Header";
+import { Typography } from "@/components/layout/Typography/Typography";
+export const Card = ({ img, title, children, ...props }) => {
+  return (
+    <div className={style.card}>
+      <img src={img} {...props} />
+      <div className={style.container}>
+        <Header title={title} />
+
+        <Typography>{children}</Typography>
+      </div>
+    </div>
+  );
+};

src/components/top-level/Cards/Card.module.css

+.card {
+  display: flex;
+  flex-direction: column;
+  width: 12rem;
+  padding: 2rem;
+  border: 1px solid green;
+  border-radius: 2rem;
+}

src/components/top-level/Cards/Card.stories.jsx

+import { Card } from "./Card";
+
+export default {
+  title: "Top-level/cards",
+  component: Card,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export const card = {
+  render: (args) => <Card {...args} />,
+
+  args: {
+    title: "How to get perfect stars for begining runners",
+    children:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+};