Skip to content

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

refactor: update stories layout

parent e4f424b4
Showing with 154 additions and 538 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/colors.stories.tsx
import React from 'react'; import React from 'react';
import { Meta } from '@storybook/react'; import { Meta } from '@storybook/nextjs';
import { parseToRgba, readableColor } from 'color2k';
type ColorsItem = { type ColorsItem = {
color: string; color: string;
...@@ -15,32 +14,6 @@ type SwatchColors = { ...@@ -15,32 +14,6 @@ type SwatchColors = {
type SwatchSetProps = { type SwatchSetProps = {
colors: SwatchColors[]; colors: SwatchColors[];
isSemantic?: boolean;
};
const Swatch = ({ color }: { color: string }) => {
const colorText = color
? `#${parseToRgba(color)
.slice(0, 3)
.map((x) => x.toString(16).padStart(2, '0'))
.join('')
.toUpperCase()}`
: 'N/A';
return (
<div
className="flex flex-col items-center justify-center w-28 h-28 m-2 rounded-xl shadow-lg"
style={{
backgroundColor: color
}}>
<span
style={{
color: readableColor(color)
}}>
{colorText}
</span>
</div>
);
}; };
const SemanticSwatch = ({ const SemanticSwatch = ({
...@@ -54,465 +27,119 @@ const SemanticSwatch = ({ ...@@ -54,465 +27,119 @@ const SemanticSwatch = ({
}) => { }) => {
return ( return (
<div <div
className={`${className} flex flex-col items-center justify-center w-28 h-28 m-2 rounded-xl shadow-lg`}> className={`${className} ${textClassName} text-sm flex flex-col items-center justify-center w-24 h-24 m-1 rounded shadow-lg`}>
<span className={`${textClassName} text-sm`}>{color}</span> <span>{color}</span>
</div> </div>
); );
}; };
const SwatchSet = ({ colors, isSemantic = false }: SwatchSetProps) => ( const SwatchSet = ({ colors }: SwatchSetProps) => (
<div className="flex flex-row flex-wrap items-center justify-center w-full h-full p-2"> <div className="flex flex-row flex-wrap items-center justify-center w-full h-full py-2">
{colors.map(({ title, items }) => ( {colors.map(({ title, items }) => (
<div key={title} className="flex flex-col items-start w-full h-full"> <div key={title} className="flex flex-col items-start w-full h-full">
<h2 className="text-xl font-bold text-foreground">{title}</h2> <h2 className="text-xl font-bold text-foreground">{title}</h2>
<div className="flex flex-row flex-wrap items-center justify-start w-full h-full p-4"> <div className="flex flex-row flex-wrap items-center justify-start w-full h-full py-4">
{items.map((c, index) => {items.map((c, index) => (
isSemantic ? (
<SemanticSwatch <SemanticSwatch
key={`${c.color}-${index}`} key={`${c.color}-${index}`}
className={c.className} className={c.className}
color={c.color} color={c.color}
textClassName={c.textClassName} textClassName={c.textClassName}
/> />
) : ( ))}
<Swatch key={`${c.color}-${index}`} color={c.color} />
)
)}
</div> </div>
</div> </div>
))} ))}
</div> </div>
); );
export default { // Background color key -> Text color value mapping
title: 'Foundations/SemanticColors', /** we need it for tailwind to detect the color */
component: SwatchSet, const COLOR_CLASS_MAP = {
argTypes: { layout: {
isSemantic: { 'bg-background': 'text-foreground',
control: false 'bg-foreground': 'text-background',
} 'bg-divider': 'text-foreground',
'bg-focus': 'text-primary-foreground'
},
base: {
'bg-default': 'text-default-foreground',
'bg-primary': 'text-primary-foreground',
'bg-secondary': 'text-secondary-foreground',
'bg-danger': 'text-danger-foreground',
'bg-warning': 'text-warning-foreground',
'bg-success': 'text-success-foreground'
},
default: {
'bg-default-50': 'text-default-900',
'bg-default-100': 'text-default-900',
'bg-default-200': 'text-default-800',
'bg-default-300': 'text-default-800',
'bg-default-400': 'text-default-800',
'bg-default-500': 'text-default-foreground',
'bg-default-600': 'text-default-50',
'bg-default-700': 'text-default-100',
'bg-default-800': 'text-default-100',
'bg-default-900': 'text-default-100'
},
primary: {
'bg-primary-50': 'text-primary-900',
'bg-primary-100': 'text-primary-900',
'bg-primary-200': 'text-primary-800',
'bg-primary-300': 'text-primary-800',
'bg-primary-400': 'text-primary-800',
'bg-primary-500': 'text-primary-foreground',
'bg-primary-600': 'text-primary-50',
'bg-primary-700': 'text-primary-100',
'bg-primary-800': 'text-primary-100',
'bg-primary-900': 'text-primary-100'
},
secondary: {
'bg-secondary-50': 'text-secondary-900',
'bg-secondary-100': 'text-secondary-700',
'bg-secondary-200': 'text-secondary-700',
'bg-secondary-300': 'text-secondary-700',
'bg-secondary-400': 'text-secondary-700',
'bg-secondary-500': 'text-secondary-50',
'bg-secondary-600': 'text-secondary-50',
'bg-secondary-700': 'text-secondary-100',
'bg-secondary-800': 'text-secondary-100',
'bg-secondary-900': 'text-secondary-100'
} }
};
const generateColorScale = (colorName: string): ColorsItem[] => {
const colorMap = COLOR_CLASS_MAP[colorName as keyof typeof COLOR_CLASS_MAP];
if (!colorMap) return [];
return Object.keys(colorMap).map((bgClassName) => {
// Extract color name from bg class (e.g., 'bg-default-50' -> 'default-50')
const colorDisplayName = bgClassName.replace('bg-', '');
return {
color: colorDisplayName,
className: bgClassName,
textClassName: colorMap[bgClassName as keyof typeof colorMap]
};
});
};
const generateColorSections = (): SwatchColors[] => {
const colorNames = Object.keys(COLOR_CLASS_MAP);
return colorNames.map((colorName) => ({
title: colorName.charAt(0).toUpperCase() + colorName.slice(1),
items: generateColorScale(colorName)
}));
};
export default {
title: 'Foundations/01-SemanticColors',
component: SwatchSet
} as Meta<typeof SwatchSet>; } as Meta<typeof SwatchSet>;
export const SemanticColors = { export const SemanticColors = {
args: { args: {
isSemantic: true, colors: generateColorSections()
colors: [
{
title: 'Layout',
items: [
{
color: 'background',
className: 'bg-background',
textClassName: 'text-foreground'
},
{
color: 'foreground',
className: 'bg-foreground',
textClassName: 'text-background'
},
{
color: 'divider',
className: 'bg-divider',
textClassName: 'text-foreground'
},
{
color: 'focus',
className: 'bg-focus',
textClassName: 'text-primary-foreground'
}
]
},
{
title: 'Content',
items: [
{
color: 'content1',
className: 'bg-content1',
textClassName: 'text-content1-foreground'
},
{
color: 'content2',
className: 'bg-content2',
textClassName: 'text-content2-foreground'
},
{
color: 'content3',
className: 'bg-content3',
textClassName: 'text-content3-foreground'
},
{
color: 'content4',
className: 'bg-content4',
textClassName: 'text-content4-foreground'
}
]
},
{
title: 'Base',
items: [
{
color: 'default',
className: 'bg-default',
textClassName: 'text-default-foreground'
},
{
color: 'primary',
className: 'bg-primary',
textClassName: 'text-primary-foreground'
},
{
color: 'secondary',
className: 'bg-secondary',
textClassName: 'text-secondary-foreground'
},
{
color: 'success',
className: 'bg-success',
textClassName: 'text-success-foreground'
},
{
color: 'warning',
className: 'bg-warning',
textClassName: 'text-warning-foreground'
},
{
color: 'danger',
className: 'bg-danger',
textClassName: 'text-danger-foreground'
}
]
},
{
title: 'Default',
items: [
{
color: 'default-50',
className: 'bg-default-50',
textClassName: 'text-default-900'
},
{
color: 'default-100',
className: 'bg-default-100',
textClassName: 'text-default-900'
},
{
color: 'default-200',
className: 'bg-default-200',
textClassName: 'text-default-800'
},
{
color: 'default-300',
className: 'bg-default-300',
textClassName: 'text-default-800'
},
{
color: 'default-400',
className: 'bg-default-400',
textClassName: 'text-default-800'
},
{
color: 'default-500',
className: 'bg-default-500',
textClassName: 'text-default-foreground'
},
{
color: 'default-600',
className: 'bg-default-600',
textClassName: 'text-default-50'
},
{
color: 'default-700',
className: 'bg-default-700',
textClassName: 'text-default-100'
},
{
color: 'default-800',
className: 'bg-default-800',
textClassName: 'text-default-100'
},
{
color: 'default-900',
className: 'bg-default-900',
textClassName: 'text-default-100'
}
]
},
{
title: 'Primary',
items: [
{
color: 'primary-50',
className: 'bg-primary-50',
textClassName: 'text-primary-900'
},
{
color: 'primary-100',
className: 'bg-primary-100',
textClassName: 'text-primary-900'
},
{
color: 'primary-200',
className: 'bg-primary-200',
textClassName: 'text-primary-800'
},
{
color: 'primary-300',
className: 'bg-primary-300',
textClassName: 'text-primary-800'
},
{
color: 'primary-400',
className: 'bg-primary-400',
textClassName: 'text-primary-800'
},
{
color: 'primary-500',
className: 'bg-primary-500',
textClassName: 'text-primary-foreground'
},
{
color: 'primary-600',
className: 'bg-primary-600',
textClassName: 'text-primary-50'
},
{
color: 'primary-700',
className: 'bg-primary-700',
textClassName: 'text-primary-100'
},
{
color: 'primary-800',
className: 'bg-primary-800',
textClassName: 'text-primary-100'
},
{
color: 'primary-900',
className: 'bg-primary-900',
textClassName: 'text-primary-100'
}
]
},
{
title: 'Secondary',
items: [
{
color: 'secondary-50',
className: 'bg-secondary-50',
textClassName: 'text-secondary-900'
},
{
color: 'secondary-100',
className: 'bg-secondary-100',
textClassName: 'text-secondary-900'
},
{
color: 'secondary-200',
className: 'bg-secondary-200',
textClassName: 'text-secondary-800'
},
{
color: 'secondary-300',
className: 'bg-secondary-300',
textClassName: 'text-secondary-800'
},
{
color: 'secondary-400',
className: 'bg-secondary-400',
textClassName: 'text-secondary-800'
},
{
color: 'secondary-500',
className: 'bg-secondary-500',
textClassName: 'text-secondary-foreground'
},
{
color: 'secondary-600',
className: 'bg-secondary-600',
textClassName: 'text-secondary-50'
},
{
color: 'secondary-700',
className: 'bg-secondary-700',
textClassName: 'text-secondary-100'
},
{
color: 'secondary-800',
className: 'bg-secondary-800',
textClassName: 'text-secondary-100'
},
{
color: 'secondary-900',
className: 'bg-secondary-900',
textClassName: 'text-secondary-100'
}
]
},
{
title: 'Success',
items: [
{
color: 'success-50',
className: 'bg-success-50',
textClassName: 'text-success-900'
},
{
color: 'success-100',
className: 'bg-success-100',
textClassName: 'text-success-900'
},
{
color: 'success-200',
className: 'bg-success-200',
textClassName: 'text-success-800'
},
{
color: 'success-300',
className: 'bg-success-300',
textClassName: 'text-success-800'
},
{
color: 'success-400',
className: 'bg-success-400',
textClassName: 'text-success-800'
},
{
color: 'success-500',
className: 'bg-success-500',
textClassName: 'text-success-foreground'
},
{
color: 'success-600',
className: 'bg-success-600',
textClassName: 'text-success-50'
},
{
color: 'success-700',
className: 'bg-success-700',
textClassName: 'text-success-100'
},
{
color: 'success-800',
className: 'bg-success-800',
textClassName: 'text-success-100'
},
{
color: 'success-900',
className: 'bg-success-900',
textClassName: 'text-success-100'
}
]
},
{
title: 'Warning',
items: [
{
color: 'warning-50',
className: 'bg-warning-50',
textClassName: 'text-warning-900'
},
{
color: 'warning-100',
className: 'bg-warning-100',
textClassName: 'text-warning-900'
},
{
color: 'warning-200',
className: 'bg-warning-200',
textClassName: 'text-warning-800'
},
{
color: 'warning-300',
className: 'bg-warning-300',
textClassName: 'text-warning-800'
},
{
color: 'warning-400',
className: 'bg-warning-400',
textClassName: 'text-warning-800'
},
{
color: 'warning-500',
className: 'bg-warning-500',
textClassName: 'text-warning-foreground'
},
{
color: 'warning-600',
className: 'bg-warning-600',
textClassName: 'text-warning-50'
},
{
color: 'warning-700',
className: 'bg-warning-700',
textClassName: 'text-warning-100'
},
{
color: 'warning-800',
className: 'bg-warning-800',
textClassName: 'text-warning-100'
},
{
color: 'warning-900',
className: 'bg-warning-900',
textClassName: 'text-warning-100'
}
]
},
{
title: 'Danger',
items: [
{
color: 'danger-50',
className: 'bg-danger-50',
textClassName: 'text-danger-900'
},
{
color: 'danger-100',
className: 'bg-danger-100',
textClassName: 'text-danger-900'
},
{
color: 'danger-200',
className: 'bg-danger-200',
textClassName: 'text-danger-800'
},
{
color: 'danger-300',
className: 'bg-danger-300',
textClassName: 'text-danger-800'
},
{
color: 'danger-400',
className: 'bg-danger-400',
textClassName: 'text-danger-800'
},
{
color: 'danger-500',
className: 'bg-danger-500',
textClassName: 'text-danger-foreground'
},
{
color: 'danger-600',
className: 'bg-danger-600',
textClassName: 'text-danger-50'
},
{
color: 'danger-700',
className: 'bg-danger-700',
textClassName: 'text-danger-100'
},
{
color: 'danger-800',
className: 'bg-danger-800',
textClassName: 'text-danger-100'
},
{
color: 'danger-900',
className: 'bg-danger-900',
textClassName: 'text-danger-100'
}
]
}
]
} }
}; };
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