Skip to content

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

refactor: update stories layout

parent e4f424b4
Showing with 63 additions and 74 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";
import type { Meta, StoryObj } from '@storybook/nextjs';
import { Button, type ButtonProps } from '@heroui/button';
const meta: Meta<typeof Button> = {
title: 'Basic/Button',
......@@ -31,77 +29,77 @@ const Template = ({ color }: TemplateProps) => {
<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>
<h6 className="mb-2 font-semibold">Variants</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button color={color} size="sm" isLoading>
Small button
<Button color={color} variant="solid">
Solid Button
</Button>
<Button color={color} size="md" isLoading>
Medium button
<Button color={color} variant="faded">
Faded Button
</Button>
<Button color={color} size="lg" isLoading>
Large button
<Button color={color} variant="bordered">
Bordered Button
</Button>
<Button color={color} variant="light">
Light Button
</Button>
<Button color={color} size="sm" variant="ghost" isLoading>
Small Outline
<Button color={color} variant="flat">
Flat Button
</Button>
<Button color={color} size="md" variant="ghost" isLoading>
Medium Outline
<Button color={color} variant="ghost">
Ghost Button
</Button>
<Button color={color} size="lg" variant="ghost" isLoading>
Large Outline
<Button color={color} variant="shadow">
Shadow Button
</Button>
</div>
<h6 className="mb-2 font-semibold">Disabled</h6>
<h6 className="mb-2 font-semibold">Loading Variants</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button color={color} size="sm" isDisabled>
Small button
<Button color={color} variant="solid">
Solid Button
</Button>
<Button color={color} size="md" isDisabled>
Medium button
<Button color={color} variant="faded" isLoading>
Faded Button
</Button>
<Button color={color} size="lg" isDisabled>
Large button
<Button color={color} variant="bordered" isLoading>
Bordered Button
</Button>
<Button color={color} variant="light" isLoading>
Light Button
</Button>
<Button color={color} size="sm" variant="ghost" isDisabled>
Small Outline
<Button color={color} variant="flat" isLoading>
Flat Button
</Button>
<Button color={color} size="md" variant="ghost" isDisabled>
Medium Outline
<Button color={color} variant="ghost" isLoading>
Ghost Button
</Button>
<Button color={color} size="lg" variant="ghost" isDisabled>
Large Outline
<Button color={color} variant="shadow" isLoading>
Shadow Button
</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
<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} size="md" fullWidth>
Medium button
<Button color={color} variant="faded" isDisabled>
Faded Button
</Button>
<Button color={color} size="lg" fullWidth>
Large button
<Button color={color} variant="bordered" isDisabled>
Bordered Button
</Button>
<Button color={color} variant="light" isDisabled>
Light Button
</Button>
<Button color={color} size="sm" variant="ghost" fullWidth>
Small Outline
<Button color={color} variant="flat" isDisabled>
Flat Button
</Button>
<Button color={color} size="md" variant="ghost" fullWidth>
Medium Outline
<Button color={color} variant="ghost" isDisabled>
Ghost Button
</Button>
<Button color={color} size="lg" variant="ghost" fullWidth>
Large Outline
<Button color={color} variant="shadow" isDisabled>
Shadow Button
</Button>
</div>
</div>
......@@ -117,12 +115,3 @@ export const Primary: Story = {
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" />
};
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'
title: 'Foundations/02-Typography'
};
export const Typography = () => (
......
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