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 ## Tools Configured
......
components/base/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react'; import type { Meta, StoryObj } from '@storybook/nextjs';
import { Button } from "@heroui/button"; import { Button, type ButtonProps } from '@heroui/button';
import type { ButtonProps } from "@heroui/button";
const meta: Meta<typeof Button> = { const meta: Meta<typeof Button> = {
title: 'Basic/Button', title: 'Basic/Button',
...@@ -31,77 +29,77 @@ const Template = ({ color }: TemplateProps) => { ...@@ -31,77 +29,77 @@ const Template = ({ color }: TemplateProps) => {
<Button color={color} size="lg"> <Button color={color} size="lg">
Large button Large button
</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> </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"> <div className="flex gap-5 mb-4 flex-wrap items-center">
<Button color={color} size="sm" isLoading> <Button color={color} variant="solid">
Small button Solid Button
</Button> </Button>
<Button color={color} size="md" isLoading> <Button color={color} variant="faded">
Medium button Faded Button
</Button> </Button>
<Button color={color} size="lg" isLoading> <Button color={color} variant="bordered">
Large button Bordered Button
</Button>
<Button color={color} variant="light">
Light Button
</Button> </Button>
<Button color={color} size="sm" variant="ghost" isLoading> <Button color={color} variant="flat">
Small Outline Flat Button
</Button> </Button>
<Button color={color} size="md" variant="ghost" isLoading> <Button color={color} variant="ghost">
Medium Outline Ghost Button
</Button> </Button>
<Button color={color} size="lg" variant="ghost" isLoading> <Button color={color} variant="shadow">
Large Outline Shadow Button
</Button> </Button>
</div> </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"> <div className="flex gap-5 mb-4 flex-wrap items-center">
<Button color={color} size="sm" isDisabled> <Button color={color} variant="solid">
Small button Solid Button
</Button> </Button>
<Button color={color} size="md" isDisabled> <Button color={color} variant="faded" isLoading>
Medium button Faded Button
</Button> </Button>
<Button color={color} size="lg" isDisabled> <Button color={color} variant="bordered" isLoading>
Large button Bordered Button
</Button>
<Button color={color} variant="light" isLoading>
Light Button
</Button> </Button>
<Button color={color} size="sm" variant="ghost" isDisabled> <Button color={color} variant="flat" isLoading>
Small Outline Flat Button
</Button> </Button>
<Button color={color} size="md" variant="ghost" isDisabled> <Button color={color} variant="ghost" isLoading>
Medium Outline Ghost Button
</Button> </Button>
<Button color={color} size="lg" variant="ghost" isDisabled> <Button color={color} variant="shadow" isLoading>
Large Outline Shadow Button
</Button> </Button>
</div> </div>
<h6 className="mb-2 font-semibold">Full Width</h6> <h6 className="mb-2 font-semibold">Disabled Variants</h6>
<div className="flex flex-col gap-5"> <div className="flex gap-5 mb-4 flex-wrap items-center">
<Button color={color} size="sm" fullWidth> <Button color={color} variant="solid" isDisabled>
Small button Solid Button
</Button> </Button>
<Button color={color} size="md" fullWidth> <Button color={color} variant="faded" isDisabled>
Medium button Faded Button
</Button> </Button>
<Button color={color} size="lg" fullWidth> <Button color={color} variant="bordered" isDisabled>
Large button Bordered Button
</Button>
<Button color={color} variant="light" isDisabled>
Light Button
</Button> </Button>
<Button color={color} size="sm" variant="ghost" fullWidth> <Button color={color} variant="flat" isDisabled>
Small Outline Flat Button
</Button> </Button>
<Button color={color} size="md" variant="ghost" fullWidth> <Button color={color} variant="ghost" isDisabled>
Medium Outline Ghost Button
</Button> </Button>
<Button color={color} size="lg" variant="ghost" fullWidth> <Button color={color} variant="shadow" isDisabled>
Large Outline Shadow Button
</Button> </Button>
</div> </div>
</div> </div>
...@@ -117,12 +115,3 @@ export const Primary: Story = { ...@@ -117,12 +115,3 @@ export const Primary: Story = {
export const Secondary: Story = { export const Secondary: Story = {
render: () => <Template color="secondary" /> 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 @@ ...@@ -11,21 +11,21 @@
"analyze": "cross-env ANALYZE=true next build" "analyze": "cross-env ANALYZE=true next build"
}, },
"dependencies": { "dependencies": {
"@heroui/react": "2.8.0-beta.4", "@heroui/react": "2.8.0-beta.15",
"@storybook/react": "^9.0.15", "@storybook/react": "^9.0.16",
"@tailwindcss/postcss": "^4.1.11", "@tailwindcss/postcss": "^4.1.11",
"@types/node": "^24.0.10", "@types/node": "^24.0.13",
"@types/react": "^19.1.8", "@types/react": "^19.1.8",
"autoprefixer": "^10.4.21", "autoprefixer": "^10.4.21",
"classnames": "^2.5.1", "classnames": "^2.5.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"color2k": "^2.0.3", "color2k": "^2.0.3",
"framer-motion": "^12.23.0", "framer-motion": "^12.23.3",
"next": "^15.3.5", "next": "^15.3.5",
"postcss": "^8.5.6", "postcss": "^8.5.6",
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0", "react-dom": "^19.1.0",
"sharp": "^0.34.2", "sharp": "^0.34.3",
"tailwindcss": "^4.1.11", "tailwindcss": "^4.1.11",
"typescript": "^5.8.3" "typescript": "^5.8.3"
}, },
...@@ -33,19 +33,19 @@ ...@@ -33,19 +33,19 @@
"@commitlint/cli": "^19.8.1", "@commitlint/cli": "^19.8.1",
"@commitlint/config-conventional": "^19.8.1", "@commitlint/config-conventional": "^19.8.1",
"@next/bundle-analyzer": "^15.3.5", "@next/bundle-analyzer": "^15.3.5",
"@storybook/addon-links": "^9.0.15", "@storybook/addon-links": "^9.0.16",
"@storybook/addon-themes": "^9.0.15", "@storybook/addon-themes": "^9.0.16",
"@storybook/nextjs": "^9.0.15", "@storybook/nextjs": "^9.0.16",
"@types/eslint": "^9.6.1", "@types/eslint": "^9.6.1",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"cz-conventional-changelog": "^3.3.0", "cz-conventional-changelog": "^3.3.0",
"eslint": "^9.30.1", "eslint": "^9.30.1",
"eslint-config-next": "^15.3.5", "eslint-config-next": "^15.3.5",
"eslint-plugin-storybook": "^9.0.15", "eslint-plugin-storybook": "^9.0.16",
"husky": "^9.1.7", "husky": "^9.1.7",
"prettier": "^3.6.2", "prettier": "^3.6.2",
"pretty-quick": "^4.2.2", "pretty-quick": "^4.2.2",
"storybook": "^9.0.15" "storybook": "^9.0.16"
}, },
"packageManager": "pnpm@10.6.5+sha256.47c8bca42b4b48534b5b1b28d573c506773937b02f68e52992fbd8269131c5c8" "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 { export default {
title: 'Foundations/Typography' title: 'Foundations/02-Typography'
}; };
export const 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