Skip to content

N
nextjs-starter-template
Commit cb616f80 by Moorthy G
Options

refactor: update stories layout

parent e4f424b4
Showing with 158 additions and 169 deletions
README.md
# MAF CORPORATE WEBSITE
# NEXTJS STARTER TEMPLATE
## Tools Configured
......
components/base/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from "@heroui/button";
import type { ButtonProps } from "@heroui/button";
const meta: Meta<typeof Button> = {
title: 'Basic/Button',
component: Button,
tags: ['autodocs']
};
export default meta;
type Story = StoryObj<typeof meta>;
type TemplateProps = {
color: ButtonProps['color'];
};
const Template = ({ color }: TemplateProps) => {
return (
<div>
<h6 className="mb-2 font-semibold">Size</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button color={color} size="sm">
Small button
</Button>
<Button color={color} size="md">
Medium button
</Button>
<Button color={color} size="lg">
Large button
</Button>
<Button color={color} size="sm" variant="ghost">
Small Outline
</Button>
<Button color={color} size="md" variant="ghost">
Medium Outline
</Button>
<Button color={color} size="lg" variant="ghost">
Large Outline
</Button>
</div>
<h6 className="mb-2 font-semibold">Loading</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button color={color} size="sm" isLoading>
Small button
</Button>
<Button color={color} size="md" isLoading>
Medium button
</Button>
<Button color={color} size="lg" isLoading>
Large button
</Button>
<Button color={color} size="sm" variant="ghost" isLoading>
Small Outline
</Button>
<Button color={color} size="md" variant="ghost" isLoading>
Medium Outline
</Button>
<Button color={color} size="lg" variant="ghost" isLoading>
Large Outline
</Button>
</div>
<h6 className="mb-2 font-semibold">Disabled</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button color={color} size="sm" isDisabled>
Small button
</Button>
<Button color={color} size="md" isDisabled>
Medium button
</Button>
<Button color={color} size="lg" isDisabled>
Large button
</Button>
<Button color={color} size="sm" variant="ghost" isDisabled>
Small Outline
</Button>
<Button color={color} size="md" variant="ghost" isDisabled>
Medium Outline
</Button>
<Button color={color} size="lg" variant="ghost" isDisabled>
Large Outline
</Button>
</div>
<h6 className="mb-2 font-semibold">Full Width</h6>
<div className="flex flex-col gap-5">
<Button color={color} size="sm" fullWidth>
Small button
</Button>
<Button color={color} size="md" fullWidth>
Medium button
</Button>
<Button color={color} size="lg" fullWidth>
Large button
</Button>
<Button color={color} size="sm" variant="ghost" fullWidth>
Small Outline
</Button>
<Button color={color} size="md" variant="ghost" fullWidth>
Medium Outline
</Button>
<Button color={color} size="lg" variant="ghost" fullWidth>
Large Outline
</Button>
</div>
</div>
);
};
export const Default: Story = {
render: () => <Template color="default" />
};
export const Primary: Story = {
render: () => <Template color="primary" />
};
export const Secondary: Story = {
render: () => <Template color="secondary" />
};
export const Success: Story = {
render: () => <Template color="success" />
};
export const Warning: Story = {
render: () => <Template color="warning" />
};
export const Danger: Story = {
render: () => <Template color="danger" />
};
import type { Meta, StoryObj } from '@storybook/nextjs';
import { Button, type ButtonProps } from '@heroui/button';
const meta: Meta<typeof Button> = {
title: 'Basic/Button',
component: Button,
tags: ['autodocs']
};
export default meta;
type Story = StoryObj<typeof meta>;
type TemplateProps = {
color: ButtonProps['color'];
};
const Template = ({ color }: TemplateProps) => {
return (
<div>
<h6 className="mb-2 font-semibold">Size</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button color={color} size="sm">
Small button
</Button>
<Button color={color} size="md">
Medium button
</Button>
<Button color={color} size="lg">
Large button
</Button>
</div>
<h6 className="mb-2 font-semibold">Variants</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button color={color} variant="solid">
Solid Button
</Button>
<Button color={color} variant="faded">
Faded Button
</Button>
<Button color={color} variant="bordered">
Bordered Button
</Button>
<Button color={color} variant="light">
Light Button
</Button>
<Button color={color} variant="flat">
Flat Button
</Button>
<Button color={color} variant="ghost">
Ghost Button
</Button>
<Button color={color} variant="shadow">
Shadow Button
</Button>
</div>
<h6 className="mb-2 font-semibold">Loading Variants</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button color={color} variant="solid">
Solid Button
</Button>
<Button color={color} variant="faded" isLoading>
Faded Button
</Button>
<Button color={color} variant="bordered" isLoading>
Bordered Button
</Button>
<Button color={color} variant="light" isLoading>
Light Button
</Button>
<Button color={color} variant="flat" isLoading>
Flat Button
</Button>
<Button color={color} variant="ghost" isLoading>
Ghost Button
</Button>
<Button color={color} variant="shadow" isLoading>
Shadow Button
</Button>
</div>
<h6 className="mb-2 font-semibold">Disabled Variants</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button color={color} variant="solid" isDisabled>
Solid Button
</Button>
<Button color={color} variant="faded" isDisabled>
Faded Button
</Button>
<Button color={color} variant="bordered" isDisabled>
Bordered Button
</Button>
<Button color={color} variant="light" isDisabled>
Light Button
</Button>
<Button color={color} variant="flat" isDisabled>
Flat Button
</Button>
<Button color={color} variant="ghost" isDisabled>
Ghost Button
</Button>
<Button color={color} variant="shadow" isDisabled>
Shadow Button
</Button>
</div>
</div>
);
};
export const Default: Story = {
render: () => <Template color="default" />
};
export const Primary: Story = {
render: () => <Template color="primary" />
};
export const Secondary: Story = {
render: () => <Template color="secondary" />
};
package.json
......@@ -11,21 +11,21 @@
"analyze": "cross-env ANALYZE=true next build"
},
"dependencies": {
"@heroui/react": "2.8.0-beta.4",
"@storybook/react": "^9.0.15",
"@heroui/react": "2.8.0-beta.15",
"@storybook/react": "^9.0.16",
"@tailwindcss/postcss": "^4.1.11",
"@types/node": "^24.0.10",
"@types/node": "^24.0.13",
"@types/react": "^19.1.8",
"autoprefixer": "^10.4.21",
"classnames": "^2.5.1",
"clsx": "^2.1.1",
"color2k": "^2.0.3",
"framer-motion": "^12.23.0",
"framer-motion": "^12.23.3",
"next": "^15.3.5",
"postcss": "^8.5.6",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"sharp": "^0.34.2",
"sharp": "^0.34.3",
"tailwindcss": "^4.1.11",
"typescript": "^5.8.3"
},
......@@ -33,19 +33,19 @@
"@commitlint/cli": "^19.8.1",
"@commitlint/config-conventional": "^19.8.1",
"@next/bundle-analyzer": "^15.3.5",
"@storybook/addon-links": "^9.0.15",
"@storybook/addon-themes": "^9.0.15",
"@storybook/nextjs": "^9.0.15",
"@storybook/addon-links": "^9.0.16",
"@storybook/addon-themes": "^9.0.16",
"@storybook/nextjs": "^9.0.16",
"@types/eslint": "^9.6.1",
"cross-env": "^7.0.3",
"cz-conventional-changelog": "^3.3.0",
"eslint": "^9.30.1",
"eslint-config-next": "^15.3.5",
"eslint-plugin-storybook": "^9.0.15",
"eslint-plugin-storybook": "^9.0.16",
"husky": "^9.1.7",
"prettier": "^3.6.2",
"pretty-quick": "^4.2.2",
"storybook": "^9.0.15"
"storybook": "^9.0.16"
},
"packageManager": "pnpm@10.6.5+sha256.47c8bca42b4b48534b5b1b28d573c506773937b02f68e52992fbd8269131c5c8"
}
pnpm-lock.yaml
This source diff could not be displayed because it is too large. You can view the blob instead.
styles/stories/typography.stories.tsx
export default {
title: 'Foundations/Typography'
};
export const Typography = () => (
<div className="container">
<div className="flex flex-col gap-4 mb-5">
<div className="text-9xl font-bold">Heading</div>
<div className="text-8xl font-bold">Heading</div>
<div className="text-7xl font-bold">Heading</div>
<div className="text-6xl font-bold">Heading</div>
<div className="text-5xl font-bold">Heading</div>
<div className="text-4xl font-bold">Heading</div>
<div className="text-3xl font-bold">Heading</div>
<div className="text-2xl font-bold">Heading</div>
<div className="text-xl font-bold">Heading</div>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo et quae
consequuntur voluptatum quibusdam, autem velit quidem laborum, dignissimos
doloremque ullam eos fugit repellendus maiores eveniet repellat dolor eius
perspiciatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<p>
Quasi aliquam impedit magnam tempora doloribus voluptatibus, at ea dolores
facilis et quod hic, cumque repellendus quidem expedita explicabo
architecto, possimus minima!
</p>
</div>
);
export default {
title: 'Foundations/02-Typography'
};
export const Typography = () => (
<div className="container">
<div className="flex flex-col gap-4 mb-5">
<div className="text-9xl font-bold">Heading</div>
<div className="text-8xl font-bold">Heading</div>
<div className="text-7xl font-bold">Heading</div>
<div className="text-6xl font-bold">Heading</div>
<div className="text-5xl font-bold">Heading</div>
<div className="text-4xl font-bold">Heading</div>
<div className="text-3xl font-bold">Heading</div>
<div className="text-2xl font-bold">Heading</div>
<div className="text-xl font-bold">Heading</div>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo et quae
consequuntur voluptatum quibusdam, autem velit quidem laborum, dignissimos
doloremque ullam eos fugit repellendus maiores eveniet repellat dolor eius
perspiciatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<p>
Quasi aliquam impedit magnam tempora doloribus voluptatibus, at ea dolores
facilis et quod hic, cumque repellendus quidem expedita explicabo
architecto, possimus minima!
</p>
</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