Skip to content

N
nextjs-starter-template
Commit 5737bb9c by Moorthy G
Options

fix(components): udpate Button, typography & pageNotFound components

parent 34e3dba8
Showing with 116 additions and 86 deletions
.storybook/preview.ts
import '@/styles/globals.css';
import type { Preview } from '@storybook/react';
import * as NextImage from 'next/image';
import { ImageProps } from 'next/image';
const preview: Preview = {
parameters: {
......@@ -14,3 +16,10 @@ const preview: Preview = {
};
export default preview;
Object.defineProperty(NextImage, 'getImageProps', {
configurable: true,
value: (props: ImageProps) => {
return { props: { ...props, srcSet: props.src } };
}
});
components/button/button.stories.tsx → components/base/Button/Button.stories.tsx
import React from 'react';
import Button from './';
import type { Meta, StoryObj } from '@storybook/react';
import Button from './Button';
export default {
const meta: Meta<typeof Button> = {
title: 'Basic/Button',
component: Button
component: Button,
tags: ['autodocs']
};
export default meta;
type Story = StoryObj<typeof meta>;
interface TemplateProps {
variant: 'primary' | 'secondary' | 'link';
variant: 'primary' | 'light' | 'dark';
}
const Template = ({ variant }: TemplateProps) => {
return (
<div>
<div style={{ color: variant === 'light' ? '#fff' : '' }}>
<h6 className="mb-2 font-semibold">Size</h6>
<div className="flex gap-5 mb-4">
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button variant={variant} size="sm">
Small button
</Button>
<Button variant={variant}>Medium button</Button>
<Button variant={variant} size="lg">
Large button
</Button>
<Button variant={variant} href="/" size="sm">
Small Anchor
</Button>
<Button variant={variant} href="/">
Medium Anchor
</Button>
<Button variant={variant} href="/" size="lg">
Large Anchor
<Button variant={variant} size="sm" outline>
Small Outline
</Button>
<Button variant={variant} outline>
Medium Outline
</Button>
</div>
<h6 className="mb-2 font-semibold">Loading</h6>
<div className="flex gap-5 mb-4">
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button variant={variant} size="sm" loading>
Small button
</Button>
<Button variant={variant} loading>
Medium button
</Button>
<Button variant={variant} size="lg" loading>
Large button
</Button>
<Button variant={variant} href="/" size="sm" loading>
Small Anchor
</Button>
<Button variant={variant} href="/" loading>
Medium Anchor
</Button>
<Button variant={variant} href="/" size="lg" loading>
Large Anchor
<Button variant={variant} size="sm" loading outline>
Small Outline
</Button>
<Button variant={variant} loading outline>
Medium Outline
</Button>
</div>
<h6 className="mb-2 font-semibold">Disabled</h6>
<div className="flex gap-5 mb-4">
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button variant={variant} size="sm" disabled>
Small button
</Button>
<Button variant={variant} disabled>
Medium button
</Button>
<Button variant={variant} size="lg" disabled>
Large button
<Button variant={variant} size="sm" disabled outline>
Small Outline
</Button>
<Button variant={variant} disabled outline>
Medium Outline
</Button>
</div>
<h6 className="mb-2 font-semibold">Disabled & Loading</h6>
<div className="flex gap-5 mb-4">
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button variant={variant} size="sm" loading disabled>
Small button
</Button>
<Button variant={variant} loading disabled>
Medium button
</Button>
<Button variant={variant} size="lg" loading disabled>
Large button
<Button variant={variant} size="sm" disabled loading outline>
Small Outline
</Button>
<Button variant={variant} disabled loading outline>
Medium Outline
</Button>
</div>
<h6 className="mb-2 font-semibold">Multiline</h6>
<div className="flex gap-5 mb-4">
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button variant={variant} size="sm">
Lorem ipsum dolor sit <br /> amet consectetur adipisicing elit. <br />{' '}
Quas exercitationem unde voluptate iure dolore laudantium.
......@@ -87,13 +98,9 @@ const Template = ({ variant }: TemplateProps) => {
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br /> Quas
exercitationem unde voluptate iure dolore laudantium.
</Button>
<Button variant={variant} size="lg">
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br /> Quas
exercitationem unde voluptate iure dolore laudantium.
</Button>
</div>
<br />
<div className="flex gap-5 mb-4">
<div className="flex gap-5 mb-4 flex-wrap items-center">
<Button variant={variant} size="sm" loading>
Lorem ipsum dolor sit <br /> amet consectetur adipisicing elit. <br />{' '}
Quas exercitationem unde voluptate iure dolore laudantium.
......@@ -102,10 +109,6 @@ const Template = ({ variant }: TemplateProps) => {
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br /> Quas
exercitationem unde voluptate iure dolore laudantium.
</Button>
<Button variant={variant} size="lg" loading>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br /> Quas
exercitationem unde voluptate iure dolore laudantium.
</Button>
</div>
<h6 className="mb-2 font-semibold">Block</h6>
<div className="flex flex-col gap-5">
......@@ -115,38 +118,32 @@ const Template = ({ variant }: TemplateProps) => {
<Button variant={variant} block>
Medium button
</Button>
<Button variant={variant} size="lg" block>
Large button
</Button>
<Button variant={variant} size="sm" block loading>
Small button
</Button>
<Button variant={variant} block loading>
Medium button
</Button>
<Button variant={variant} size="lg" block loading>
Large button
</Button>
<Button variant={variant} size="sm" block loading disabled>
Small button
</Button>
<Button variant={variant} block loading disabled>
Medium button
</Button>
<Button variant={variant} size="lg" block loading disabled>
Small button
</Button>
</div>
</div>
);
};
export const Primary = {
export const Primary: Story = {
render: () => <Template variant="primary" />
};
export const Secondary = {
render: () => <Template variant="secondary" />
export const Light: Story = {
parameters: {
backgrounds: { default: 'dark' }
},
render: () => <Template variant="light" />
};
export const Link = {
render: () => <Template variant="link" />
export const Dark: Story = {
render: () => <Template variant="dark" />
};
components/button/index.tsx → components/base/Button/Button.tsx
......@@ -2,9 +2,10 @@ import cn from 'classnames';
import Link from 'next/link';
interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
variant?: 'default' | 'primary' | 'secondary' | 'link';
size?: 'sm' | 'md' | 'lg';
variant?: 'primary' | 'light' | 'dark';
size?: 'sm' | 'md';
block?: boolean;
outline?: boolean;
loading?: boolean;
disabled?: boolean;
href?: string;
......@@ -16,28 +17,41 @@ export default function Button({
size = 'md',
block = false,
loading = false,
outline = false,
disabled = false,
href,
children,
...rest
}: ButtonProps) {
const classNames = cn('inline-flex items-center transition-colors', {
'px-4 py-2': variant !== 'link',
'text-light': variant !== 'link',
'font-semibold': variant !== 'link',
/** backgrounds */
'bg-gray-200': disabled && variant !== 'link',
'bg-primary hover:bg-primary-light': !disabled && variant === 'primary',
'bg-secondary hover:bg-secondary-light':
!disabled && variant === 'secondary',
/** text */
'text-gray-400': disabled,
'text-sm': size === 'sm',
'text-base': size === 'md',
'text-lg': size === 'lg',
/** block */
'w-full justify-center': block
});
const classNames = cn(
'inline-flex items-center font-medium uppercase focus:outline-none',
{
/** backgrounds */
'bg-gray-200': disabled,
'bg-primary text-light shadow-primary':
!disabled && !outline && variant === 'primary',
'bg-light text-dark shadow-light':
!disabled && !outline && variant === 'light',
'bg-dark text-light shadow-dark':
!disabled && !outline && variant === 'dark',
/** outline */
'text-primary border-current border shadow-primary':
!disabled && outline && variant === 'primary',
'text-light border-current border shadow-light':
!disabled && outline && variant === 'light',
'text-dark border-current border shadow-dark':
!disabled && outline && variant === 'dark',
/** text */
'text-gray-400': disabled,
/* size */
'text-sm px-8 py-3': size === 'sm',
'text-base px-9 py-3': size === 'md',
/** block */
'w-full justify-center': block,
/** hover, focus & active */
'hover:shadow-xl focus:shadow-glow active:translate-y-0.5': !disabled
}
);
return typeof href === 'string' ? (
<Link href={href} className={classNames} {...rest}>
......@@ -54,6 +68,6 @@ export default function Button({
function Loader() {
return (
<span className="rounded-full h-5 w-5 border-2 border-b-transparent border-current animate-spin ms-1" />
<span className="rounded-full h-5 w-5 border-2 border-b-transparent border-current animate-spin ms-2" />
);
}
components/base/Button/index.ts 0 → 100644
export { default } from './Button';
components/base/typography.stories.tsx
......@@ -5,12 +5,15 @@ export default {
export const TitleAndParagraph = () => (
<div className="container">
<div className="flex flex-col gap-4 mb-5">
<h1 className="text-6xl font-bold">Heading 1</h1>
<h2 className="text-5xl font-bold">Heading 2</h2>
<h3 className="text-4xl font-bold">Heading 3</h3>
<h4 className="text-3xl font-bold">Heading 4</h4>
<h5 className="text-2xl font-bold">Heading 5</h5>
<h6 className="text-xl font-bold">Heading 6</h6>
<div className="text-9xl font-bold uppercase">Heading</div>
<div className="text-8xl font-bold uppercase">Heading</div>
<div className="text-7xl font-bold uppercase">Heading</div>
<div className="text-6xl font-bold uppercase">Heading</div>
<div className="text-5xl font-bold uppercase">Heading</div>
<div className="text-4xl font-bold uppercase">Heading</div>
<div className="text-3xl font-bold uppercase">Heading</div>
<div className="text-2xl font-bold uppercase">Heading</div>
<div className="text-xl font-bold uppercase">Heading</div>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo et quae
......
components/layout/PageNotFound/PageNotFound.stories.tsx 0 → 100644
import type { Meta, StoryObj } from '@storybook/react';
import PageNotFoundComponent from './PageNotFound';
const meta: Meta<typeof PageNotFoundComponent> = {
title: 'Layout/Page Not Found',
component: PageNotFoundComponent,
parameters: {
layout: 'centered'
}
};
export default meta;
type Story = StoryObj<typeof meta>;
export const PageNotFound: Story = {};
components/layout/page-not-found/index.tsx → components/layout/PageNotFound/PageNotFound.tsx
import Image from 'next/image';
import Button from '@/components/button';
import Button from '@/components/base/Button';
import FourOhFour from './img/404.png';
export default function PageNotFound() {
......
components/layout/PageNotFound/index.ts 0 → 100644
export { default } from './PageNotFound';
components/layout/page-not-found/page-not-found.stories.tsx deleted 100644 → 0
import PageNotFoundComponent from './';
export default {
title: 'Layout/PageNotFound',
component: PageNotFoundComponent,
parameters: {
layout: 'fullscreen'
}
};
export const PageNotFound = {};
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