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