Skip to content

B
blog-app
Commit 9846f0f8 by Syed Abdul Rahman
Options

mplemented storybook changes

parent 16cc6dcc
Showing with 248 additions and 87 deletions
.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 deleted 100644 → 0
.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>
);
},
},
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment