Skip to content

N
nextjs-starter-template
Commit 119e5b69 by Moorthy G
Options

feat: setup next ui

parent 475f9464
Showing with 138 additions and 172 deletions
.npmrc 0 → 100644
public-hoist-pattern[]=*@nextui-org/*
README.md
# Nextjs Starter Template # MAF CORPORATE WEBSITE
## Tools Configured ## Tools Configured
......
app/another/page.tsx
import Button from '@/components/base/Button'; import Link from 'next/link';
import { Button } from '@nextui-org/button';
const AnotherPage = () => { const AnotherPage = () => {
return ( return (
...@@ -7,7 +8,7 @@ const AnotherPage = () => { ...@@ -7,7 +8,7 @@ const AnotherPage = () => {
<h3 className="text-3xl text-gray-600 font-semibold mb-5 px-5"> <h3 className="text-3xl text-gray-600 font-semibold mb-5 px-5">
You&lsquo;ve landed on another page You&lsquo;ve landed on another page
</h3> </h3>
<Button href="/" size="md"> <Button as={Link} href="/" color="primary" size="lg">
Navigate home page Navigate home page
</Button> </Button>
</center> </center>
......
app/layout.tsx
import Providers from '@/components/layout/Providers';
import '@/styles/globals.css'; import '@/styles/globals.css';
interface LayoutProps { interface LayoutProps {
...@@ -11,7 +12,9 @@ export default function RootLayout({ children }: LayoutProps) { ...@@ -11,7 +12,9 @@ export default function RootLayout({ children }: LayoutProps) {
<meta content="width=device-width, initial-scale=1" name="viewport" /> <meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</head> </head>
<body>{children}</body> <body>
<Providers>{children}</Providers>
</body>
</html> </html>
); );
} }
app/page.tsx
import Button from '@/components/base/Button';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link';
import { Button } from '@nextui-org/button';
const HomePage = () => { const HomePage = () => {
return ( return (
...@@ -33,9 +34,16 @@ const HomePage = () => { ...@@ -33,9 +34,16 @@ const HomePage = () => {
height={70} height={70}
className="w-24" className="w-24"
/> />
<Image
src="/img/next-ui.svg"
alt="NextUI"
width={180}
height={180}
className="w-24"
/>
</div> </div>
</div> </div>
<Button href="/another" size="md"> <Button as={Link} href="/another" color="primary" size="lg">
Navigate to another page Navigate to another page
</Button> </Button>
</center> </center>
......
components/base/Button/Button.stories.tsx → components/base/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react'; import type { Meta, StoryObj } from '@storybook/react';
import Button from './Button'; import { Button } from '@nextui-org/button';
import type { ButtonProps } from '@nextui-org/button';
const meta: Meta<typeof Button> = { const meta: Meta<typeof Button> = {
title: 'Basic/Button', title: 'Basic/Button',
...@@ -11,139 +13,116 @@ export default meta; ...@@ -11,139 +13,116 @@ export default meta;
type Story = StoryObj<typeof meta>; type Story = StoryObj<typeof meta>;
interface TemplateProps { type TemplateProps = {
variant: 'primary' | 'light' | 'dark'; color: ButtonProps['color'];
} };
const Template = ({ variant }: TemplateProps) => { const Template = ({ color }: TemplateProps) => {
return ( return (
<div style={{ color: variant === 'light' ? '#fff' : '' }}> <div>
<h6 className="mb-2 font-semibold">Size</h6> <h6 className="mb-2 font-semibold">Size</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center"> <div className="flex gap-5 mb-4 flex-wrap items-center">
<Button variant={variant} size="sm"> <Button color={color} size="sm">
Small button Small button
</Button> </Button>
<Button variant={variant}>Medium button</Button> <Button color={color} size="md">
<Button variant={variant} href="/" size="sm"> Medium button
Small Anchor
</Button> </Button>
<Button variant={variant} href="/"> <Button color={color} size="lg">
Medium Anchor Large button
</Button> </Button>
<Button variant={variant} size="sm" outline> <Button color={color} size="sm" variant="ghost">
Small Outline Small Outline
</Button> </Button>
<Button variant={variant} outline> <Button color={color} size="md" variant="ghost">
Medium Outline Medium Outline
</Button> </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">Loading</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center"> <div className="flex gap-5 mb-4 flex-wrap items-center">
<Button variant={variant} size="sm" loading> <Button color={color} size="sm" isLoading>
Small button Small button
</Button> </Button>
<Button variant={variant} loading> <Button color={color} size="md" isLoading>
Medium button Medium button
</Button> </Button>
<Button variant={variant} href="/" size="sm" loading> <Button color={color} size="lg" isLoading>
Small Anchor Large button
</Button> </Button>
<Button variant={variant} href="/" loading> <Button color={color} size="sm" variant="ghost" isLoading>
Medium Anchor
</Button>
<Button variant={variant} size="sm" loading outline>
Small Outline Small Outline
</Button> </Button>
<Button variant={variant} loading outline> <Button color={color} size="md" variant="ghost" isLoading>
Medium Outline Medium Outline
</Button> </Button>
<Button color={color} size="lg" variant="ghost" isLoading>
Large Outline
</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 flex-wrap items-center"> <div className="flex gap-5 mb-4 flex-wrap items-center">
<Button variant={variant} size="sm" disabled> <Button color={color} size="sm" isDisabled>
Small button Small button
</Button> </Button>
<Button variant={variant} disabled> <Button color={color} size="md" isDisabled>
Medium button Medium button
</Button> </Button>
<Button variant={variant} size="sm" disabled outline> <Button color={color} size="lg" isDisabled>
Small Outline Large button
</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 flex-wrap items-center">
<Button variant={variant} size="sm" loading disabled>
Small button
</Button>
<Button variant={variant} loading disabled>
Medium button
</Button> </Button>
<Button variant={variant} size="sm" disabled loading outline> <Button color={color} size="sm" variant="ghost" isDisabled>
Small Outline Small Outline
</Button> </Button>
<Button variant={variant} disabled loading outline> <Button color={color} size="md" variant="ghost" isDisabled>
Medium Outline Medium Outline
</Button> </Button>
</div> <Button color={color} size="lg" variant="ghost" isDisabled>
<h6 className="mb-2 font-semibold">Multiline</h6> Large Outline
<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.
</Button>
<Button variant={variant}>
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 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.
</Button>
<Button variant={variant} loading>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br /> Quas
exercitationem unde voluptate iure dolore laudantium.
</Button> </Button>
</div> </div>
<h6 className="mb-2 font-semibold">Block</h6> <h6 className="mb-2 font-semibold">Full Width</h6>
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5">
<Button variant={variant} size="sm" block> <Button color={color} size="sm" fullWidth>
Small button Small button
</Button> </Button>
<Button variant={variant} block> <Button color={color} size="md" fullWidth>
Medium button Medium button
</Button> </Button>
<Button variant={variant} size="sm" block loading> <Button color={color} size="lg" fullWidth>
Small button Large button
</Button> </Button>
<Button variant={variant} block loading> <Button color={color} size="sm" variant="ghost" fullWidth>
Medium button Small Outline
</Button> </Button>
<Button variant={variant} size="sm" block loading disabled> <Button color={color} size="md" variant="ghost" fullWidth>
Small button Medium Outline
</Button> </Button>
<Button variant={variant} block loading disabled> <Button color={color} size="lg" variant="ghost" fullWidth>
Medium button Large Outline
</Button> </Button>
</div> </div>
</div> </div>
); );
}; };
export const Default: Story = {
render: () => <Template color="default" />
};
export const Primary: Story = { export const Primary: Story = {
render: () => <Template variant="primary" /> render: () => <Template color="primary" />
};
export const Secondary: Story = {
render: () => <Template color="secondary" />
};
export const Success: Story = {
render: () => <Template color="success" />
}; };
export const Light: Story = { export const Warning: Story = {
parameters: { render: () => <Template color="warning" />
backgrounds: { default: 'dark' }
},
render: () => <Template variant="light" />
}; };
export const Dark: Story = { export const Danger: Story = {
render: () => <Template variant="dark" /> render: () => <Template color="danger" />
}; };
components/base/Button/Button.tsx deleted 100644 → 0
import cn from 'classnames';
import Link from 'next/link';
interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
variant?: 'primary' | 'light' | 'dark';
size?: 'sm' | 'md';
block?: boolean;
outline?: boolean;
loading?: boolean;
disabled?: boolean;
href?: string;
children: React.ReactNode;
}
export default function Button({
variant = 'primary',
size = 'md',
block = false,
loading = false,
outline = false,
disabled = false,
href,
children,
...rest
}: ButtonProps) {
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}>
{children}
{loading && <Loader />}
</Link>
) : (
<button disabled={disabled} className={classNames} {...rest}>
{children}
{loading && <Loader />}
</button>
);
}
function Loader() {
return (
<span className="rounded-full h-5 w-5 border-2 border-b-transparent border-current animate-spin ms-2" />
);
}
components/base/Button/index.ts deleted 100644 → 0
export { default } from './Button';
components/layout/PageNotFound/PageNotFound.tsx
import Image from 'next/image'; import Image from 'next/image';
import Button from '@/components/base/Button'; import { Button } from '@nextui-org/button';
import FourOhFour from './img/404.png'; import FourOhFour from './img/404.png';
export default function PageNotFound() { export default function PageNotFound() {
return ( return (
<div className="flex flex-col justify-center items-center"> <div className="flex flex-col justify-center items-center">
<Image src={FourOhFour} alt="404, Page Not Found!" /> <Image src={FourOhFour} alt="404, Page Not Found!" />
<Button href="/">Back to Home</Button> <Button href="/" color="primary" size="md">
Back to Home
</Button>
</div> </div>
); );
} }
components/layout/Providers/Providers.tsx 0 → 100644
'use client';
import { useRouter } from 'next/navigation';
import { NextUIProvider } from '@nextui-org/react';
type ProvidersProps = {
children: React.ReactNode;
};
const Providers: React.FC<ProvidersProps> = ({ children }) => {
const router = useRouter();
return <NextUIProvider navigate={router.push}>{children}</NextUIProvider>;
};
export default Providers;
components/layout/Providers/index.ts 0 → 100644
export { default } from './Providers';
package.json
{ {
"name": "nextjs-starter-template", "name": "nextjs-starter-template",
"version": "0.1.0", "version": "0.0.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",
...@@ -11,10 +11,12 @@ ...@@ -11,10 +11,12 @@
"analyze": "cross-env ANALYZE=true next build" "analyze": "cross-env ANALYZE=true next build"
}, },
"dependencies": { "dependencies": {
"@nextui-org/react": "^2.4.0",
"@types/node": "^20.12.12", "@types/node": "^20.12.12",
"@types/react": "^18.3.3", "@types/react": "^18.3.3",
"autoprefixer": "^10.4.19", "autoprefixer": "^10.4.19",
"classnames": "^2.5.1", "classnames": "^2.5.1",
"framer-motion": "^11.2.9",
"next": "^14.2.3", "next": "^14.2.3",
"postcss": "^8.4.38", "postcss": "^8.4.38",
"react": "^18.3.1", "react": "^18.3.1",
......
pnpm-lock.yaml
This source diff could not be displayed because it is too large. You can view the blob instead.
public/img/next-ui.svg 0 → 100644
<svg width="110" height="23" viewBox="0 0 110 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44.4154 1.42847V20.5656H42.6892L31.2113 4.54013H31.0595V20.5656H29.2856V1.42847H31.0026L42.5184 17.4726H42.6701V1.42847H44.4154ZM55.1154 20.8652C53.7558 20.8652 52.5796 20.5522 51.5867 19.9261C50.5845 19.2896 49.7867 18.3854 49.2864 17.3191C48.7458 16.2071 48.4755 14.9254 48.4755 13.4739C48.4755 12.0285 48.7458 10.7438 49.2864 9.61956C49.7777 8.55303 50.5549 7.63873 51.5346 6.97511C52.5177 6.32921 53.6779 5.99501 54.8594 6.01735C55.6418 6.01559 56.4174 6.15957 57.1455 6.44171C57.8903 6.73251 58.5643 7.17513 59.1233 7.74054C59.7375 8.36859 60.2111 9.11668 60.5133 9.9364C60.8548 10.8178 61.0256 11.8597 61.0256 13.0621V13.8845H51.257V12.4174H59.2988C59.3125 11.5551 59.1191 10.7018 58.7343 9.92715C58.3817 9.21532 57.8411 8.61011 57.1692 8.17505C56.4528 7.73954 55.6244 7.51593 54.7827 7.53084C53.9409 7.54574 53.1212 7.79852 52.4211 8.25911C51.714 8.75103 51.1472 9.41392 50.7753 10.184C50.3758 10.9999 50.1698 11.8946 50.173 12.8004V13.6788C50.173 14.8188 50.3737 15.814 50.7753 16.6643C51.14 17.4723 51.7346 18.1587 52.4872 18.6406C53.2271 19.1078 54.1029 19.3414 55.1148 19.3414C55.7355 19.3537 56.3527 19.2457 56.9312 19.0236C57.4252 18.8299 57.8738 18.5389 58.2497 18.1686C58.5941 17.8291 58.8694 17.4279 59.0606 16.9865L60.6637 17.5004C60.4272 18.128 60.0568 18.6984 59.5775 19.173C59.0432 19.7046 58.4039 20.1228 57.6992 20.4017C56.8778 20.7236 55.9995 20.8812 55.1155 20.8652H55.1154ZM65.3981 6.21273L69.1545 12.3332L72.9109 6.21273H74.8744L70.1884 13.389L74.8744 20.5653H72.9109L69.1545 14.6413L65.3981 20.5656H63.444L68.0731 13.3894L63.444 6.21311L65.3981 6.21273ZM84.1611 6.21273V7.66117H77.2079V6.21273H84.1611ZM79.3803 2.77408H81.0782V16.8185C81.0782 17.4165 81.1826 17.8853 81.3913 18.2249C81.5776 18.5448 81.8637 18.7971 82.207 18.9444C82.5461 19.0853 82.9108 19.1569 83.2789 19.1546C83.4695 19.157 83.66 19.1429 83.8481 19.1125C84.0061 19.0845 84.1452 19.0549 84.2655 19.0238L84.6258 20.5282C84.428 20.6002 84.2251 20.6579 84.0187 20.7011C83.7252 20.759 83.4263 20.7856 83.127 20.7804C82.5079 20.7806 81.8968 20.6432 81.339 20.3786C80.7686 20.1123 80.2819 19.699 79.9304 19.1825C79.5636 18.653 79.3802 17.9958 79.3802 17.2108L79.3803 2.77408ZM101.292 1.42847H103.066V14.0994C103.086 15.3247 102.765 16.532 102.136 17.5895C101.516 18.6145 100.622 19.4518 99.5514 20.0097C98.4478 20.5984 97.1656 20.8928 95.7049 20.8928C94.2504 20.8928 92.9698 20.5969 91.8632 20.0052C90.7918 19.4465 89.8963 18.6096 89.2735 17.5851C88.6445 16.5295 88.3229 15.3235 88.3439 14.0997V1.42847H90.1177V13.9779C90.1007 14.9272 90.3396 15.8639 90.8102 16.6925C91.2693 17.4843 91.9446 18.1334 92.7595 18.5661C93.5974 19.0208 94.5792 19.2482 95.7049 19.2482C96.8306 19.2482 97.8139 19.0208 98.655 18.5661C99.4714 18.1352 100.147 17.4856 100.605 16.6924C101.072 15.8628 101.31 14.9265 101.292 13.9778L101.292 1.42847ZM110 1.42847V20.5656H108.227V1.42847H110Z" fill="black"/>
<path d="M16.5441 0H5.95589C2.66654 0 0 2.66654 0 5.95589V16.5441C0 19.8335 2.66654 22.5 5.95589 22.5H16.5441C19.8335 22.5 22.5 19.8335 22.5 16.5441V5.95589C22.5 2.66654 19.8335 0 16.5441 0Z" fill="black"/>
<path d="M12.3517 6.48096H13.2266V12.8253C13.2368 13.4388 13.0782 14.0433 12.7681 14.5727C12.4623 15.086 12.0213 15.5052 11.4932 15.7846C10.9489 16.0793 10.3164 16.2267 9.59577 16.2267C8.87838 16.2267 8.24669 16.0785 7.70071 15.7822C7.17244 15.5024 6.73085 15.0833 6.42381 14.5704C6.11357 14.0418 5.95494 13.438 5.96532 12.8253V6.48096H6.84042V12.7644C6.83199 13.2397 6.94985 13.7087 7.18195 14.1236C7.40832 14.52 7.74135 14.845 8.14319 15.0617C8.5563 15.2894 9.04055 15.4032 9.59595 15.4032C10.1514 15.4032 10.6364 15.2894 11.051 15.0617C11.4536 14.846 11.7869 14.5207 12.0125 14.1236C12.2431 13.7083 12.3601 13.2394 12.3517 12.7644V6.48096ZM16.6467 6.48096V16.0629H15.7718V6.48096H16.6467Z" fill="white"/>
</svg>
tailwind.config.ts
const { nextui } = require('@nextui-org/react');
import type { Config } from 'tailwindcss'; import type { Config } from 'tailwindcss';
const config: Config = { const config: Config = {
content: [ content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}', './pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}' './app/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
], ],
theme: { theme: {
extend: { extend: {
colors: { colors: {
primary: { primary: {
DEFAULT: 'hsl(340, 76%, 47%)', '50': '#fdf2f7',
light: 'hsl(340, 76%, 57%)', '100': '#fde6f0',
dark: 'hsl(340, 76%, 37%)' '200': '#fccee3',
'300': '#fba6ca',
'400': '#f86ea6',
'500': '#f14385',
'600': '#d31d59',
'700': '#c31348',
'800': '#a1133c',
'900': '#861535',
foreground: '#ffffff',
DEFAULT: '#d31d59'
}, },
secondary: { secondary: {
DEFAULT: 'hsl(205, 76%, 47%)', '50': '#f1f8fe',
light: 'hsl(205, 76%, 57%)', '100': '#e2effc',
dark: 'hsl(205, 76%, 37%)' '200': '#bfdef8',
'300': '#86c4f3',
'400': '#46a6ea',
'500': '#1d87d3',
'600': '#106db9',
'700': '#0e5796',
'800': '#104a7c',
'900': '#133f67',
'950': '#0d2844',
foreground: '#ffffff',
DEFAULT: '#1d87d3'
}, },
light: '#f4f4f4', light: '#f4f4f4',
dark: '#222222' dark: '#222222'
} }
} }
}, },
plugins: [] darkMode: 'class',
plugins: [nextui()]
}; };
export default config; export default config;
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