Skip to content

N
nextjs-starter-template
Commit 968d9eb9 by Moorthy G
Options

feat: upgrade to tailwind v4

parent a642a4f7
Showing with 136 additions and 276 deletions
.storybook/main.ts
......@@ -4,14 +4,15 @@ import path from 'path';
const config: StorybookConfig = {
stories: [
'../components/**/*.stories.@(ts|tsx|js|jsx|mdx)',
'../theme/**/*.stories.@(ts|tsx|js|jsx|mdx)'
'../styles/**/*.stories.@(ts|tsx|js|jsx|mdx)'
],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-onboarding',
'@storybook/addon-interactions',
'storybook-dark-mode'
'storybook-dark-mode',
'@storybook/addon-themes'
],
webpackFinal: async (config) => {
if (config.resolve) {
......
.storybook/preview.tsx
import React from 'react';
import { themes } from '@storybook/theming';
import { HeroUIProvider } from "@heroui/react";
import './style.css';
import '@/styles/globals.css';
import type { Preview } from '@storybook/react';
const decorators: Preview['decorators'] = [
(Story, { globals: { locale, disableAnimation } }) => {
const direction =
// @ts-ignore
locale && new Intl.Locale(locale)?.textInfo?.direction === 'rtl'
? 'rtl'
: undefined;
return (
<HeroUIProvider locale={locale} disableAnimation={disableAnimation}>
<div className="bg-dark" lang={locale} dir={direction}>
<Story />
</div>
</HeroUIProvider>
);
}
];
const parameters: Preview['parameters'] = {
actions: { argTypesRegex: '^on[A-Z].*' },
options: {
storySort: {
method: 'alphabetical',
order: ['Foundations']
}
},
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i
}
},
darkMode: {
current: 'dark',
stylePreview: true,
darkClass: 'dark',
lightClass: 'light',
classTarget: 'html',
dark: {
...themes.dark,
appBg: '#161616',
barBg: 'black',
background: 'black',
appContentBg: 'black',
appBorderRadius: 14
},
light: {
...themes.light
}
}
};
const globalTypes: Preview['globalTypes'] = {
locale: {
toolbar: {
icon: 'globe',
items: ['en', 'ar'].map((locale) => ({
value: locale,
title: new Intl.DisplayNames(undefined, { type: 'language' }).of(
locale
),
right:
// @ts-ignore
new Intl.Locale(locale)?.textInfo?.direction === 'rtl'
? 'Right to Left'
: undefined
}))
}
},
disableAnimation: {
name: 'Disable Animation',
description: 'Disable all animations in the stories',
toolbar: {
icon: 'photodrag',
items: [
{ value: true, title: 'True' },
{ value: false, title: 'False' }
]
}
}
};
const preview: Preview = {
decorators,
parameters,
globalTypes
};
export default preview;
import React from 'react';
import { withThemeByClassName } from '@storybook/addon-themes';
import { HeroUIProvider } from '@heroui/react';
import type { Preview, ReactRenderer } from '@storybook/react';
import '@/styles/global.css';
const decorators: Preview['decorators'] = [
(Story, { globals: { locale, disableAnimation } }) => {
const direction =
// @ts-ignore
locale && new Intl.Locale(locale)?.textInfo?.direction === 'rtl'
? 'rtl'
: undefined;
return (
<HeroUIProvider locale={locale} disableAnimation={disableAnimation}>
<div className="bg-dark" lang={locale} dir={direction}>
<Story />
</div>
</HeroUIProvider>
);
},
withThemeByClassName<ReactRenderer>({
themes: {
light: '',
dark: 'dark'
},
defaultTheme: 'light'
})
];
const parameters: Preview['parameters'] = {
actions: { argTypesRegex: '^on[A-Z].*' },
options: {
storySort: {
method: 'alphabetical',
order: ['Foundations']
}
},
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i
}
}
};
const globalTypes: Preview['globalTypes'] = {
locale: {
toolbar: {
icon: 'globe',
items: ['en', 'ar'].map((locale) => ({
value: locale,
title: new Intl.DisplayNames(undefined, { type: 'language' }).of(
locale
),
right:
// @ts-ignore
new Intl.Locale(locale)?.textInfo?.direction === 'rtl'
? 'Right to Left'
: undefined
}))
}
},
disableAnimation: {
name: 'Disable Animation',
description: 'Disable all animations in the stories',
toolbar: {
icon: 'photodrag',
items: [
{ value: true, title: 'True' },
{ value: false, title: 'False' }
]
}
}
};
const preview: Preview = {
decorators,
parameters,
globalTypes
};
export default preview;
.storybook/style.css deleted 100644 → 0
@tailwind base;
@tailwind components;
@tailwind utilities;
h1 {
@apply text-4xl font-bold !text-foreground;
}
h2 {
@apply text-2xl font-bold !text-foreground !border-none;
}
h3 {
@apply text-xl font-bold !text-neutral-600;
}
.dark .sbdocs-wrapper,
.dark .sbdocs-preview {
background-color: #000000;
color: #fff;
}
.dark .sbdocs-preview {
border: 1px solid #292929;
}
.dark .docblock-code-toggle {
background: transparent;
color: #d4d4d4;
}
.dark div:has(.docblock-code-toggle) {
background: transparent;
}
.dark .os-theme-dark {
background: #161616;
color: #fff;
}
.dark .sbdocs-title {
color: #fff;
}
.dark .docblock-argstable-head {
background: #161616;
}
.dark .docblock-argstable-head th {
color: #bcbcbc;
border-bottom: 1px solid #292929 !important;
}
.dark .docblock-argstable-head th span {
color: #bcbcbc;
}
.dark #docs-root tbody td {
background: #161616 !important;
color: #bcbcbc !important;
}
.dark #docs-root tbody tr:first-child td:first-child {
border-top-left-radius: 0 !important;
}
.dark #docs-root tbody tr:first-child td:last-child {
border-top-right-radius: 0 !important;
}
.dark #docs-root tbody tr:not(:first-child) {
border-top: 1px solid #292929 !important;
}
app/layout.tsx
import Providers from '@/components/layout/Providers';
import '@/styles/globals.css';
import '@/styles/global.css';
interface LayoutProps {
children: React.ReactNode;
......
components/layout/PageNotFound/styles.module.scss deleted 100644 → 0
@use '@styles/vars.scss';
.notFound {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10vh 1em;
box-sizing: border-box;
h2 {
font-size: 10em;
font-weight: 100;
line-height: 0.8;
margin: 0;
color: #1ea7fd;
}
a {
margin-top: 2em;
}
}
@include vars.mQuery(xl) {
.notFound {
font-size: 0.9em;
}
}
components/shared/ResponsiveImage/ResponsiveImage.tsx
......@@ -58,7 +58,7 @@ export const ResponsiveImage: React.FC<ResponsiveImageProps> & {
return (
<picture>
{children}
<img alt="" {...props} {...rest} />
<img {...props} {...rest} />
</picture>
);
}
......
lib/merge-clsx.ts
......@@ -11,12 +11,7 @@ const COMMON_UNITS = ['small', 'medium', 'large'];
*/
const twMerge = extendTailwindMerge({
extend: {
theme: {
opacity: ['disabled'],
spacing: ['divider'],
borderWidth: COMMON_UNITS,
borderRadius: COMMON_UNITS
},
theme: {},
classGroups: {
shadow: [{ shadow: COMMON_UNITS }],
'font-size': [{ text: ['tiny', ...COMMON_UNITS] }],
......
package.json
......@@ -11,7 +11,8 @@
"analyze": "cross-env ANALYZE=true next build"
},
"dependencies": {
"@heroui/react": "2.7.6",
"@heroui/react": "2.8.0-beta.4",
"@tailwindcss/postcss": "^4.1.6",
"@types/node": "^22.15.17",
"@types/react": "^19.1.3",
"autoprefixer": "^10.4.21",
......@@ -24,8 +25,8 @@
"react": "^19.1.0",
"react-dom": "^19.1.0",
"sharp": "^0.34.1",
"tailwind-merge": "^2.6.0",
"tailwindcss": "^3.4.1",
"tailwind-merge": "^3.3.0",
"tailwindcss": "^4.1.6",
"typescript": "^5.8.3"
},
"devDependencies": {
......@@ -35,6 +36,7 @@
"@storybook/addon-interactions": "8.6.12",
"@storybook/addon-links": "^8.6.12",
"@storybook/addon-onboarding": "8.6.12",
"@storybook/addon-themes": "^8.6.12",
"@storybook/blocks": "8.6.12",
"@storybook/nextjs": "^8.6.12",
"@storybook/react": "8.6.12",
......
pnpm-lock.yaml
This source diff could not be displayed because it is too large. You can view the blob instead.
postcss.config.js → postcss.config.mjs
module.exports = {
export default {
plugins: {
tailwindcss: {},
autoprefixer: {}
'@tailwindcss/postcss': {}
}
};
styles/global.css 0 → 100644
@import 'tailwindcss';
@plugin './hero.ts';
@source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
@custom-variant dark (&:is(.dark *));
styles/globals.css deleted 100644 → 0
@tailwind base;
@tailwind components;
@tailwind utilities;
styles/hero.ts 0 → 100644
import { heroui } from '@heroui/react';
import themes from './themes';
export default heroui({ themes });
theme/typography.stories.tsx → styles/stories/typography.stories.tsx
export default {
title: 'Foundations/Typography'
};
export const Typography = () => (
<div className="container">
<div className="flex flex-col gap-4 mb-5">
<div className="text-9xl font-bold">Heading</div>
<div className="text-8xl font-bold">Heading</div>
<div className="text-7xl font-bold">Heading</div>
<div className="text-6xl font-bold">Heading</div>
<div className="text-5xl font-bold">Heading</div>
<div className="text-4xl font-bold">Heading</div>
<div className="text-3xl font-bold">Heading</div>
<div className="text-2xl font-bold">Heading</div>
<div className="text-xl font-bold">Heading</div>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo et quae
consequuntur voluptatum quibusdam, autem velit quidem laborum, dignissimos
doloremque ullam eos fugit repellendus maiores eveniet repellat dolor eius
perspiciatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<p>
Quasi aliquam impedit magnam tempora doloribus voluptatibus, at ea dolores
facilis et quod hic, cumque repellendus quidem expedita explicabo
architecto, possimus minima!
</p>
</div>
);
export default {
title: 'Foundations/Typography'
};
export const Typography = () => (
<div className="container">
<div className="flex flex-col gap-4 mb-5">
<div className="text-9xl font-bold">Heading</div>
<div className="text-8xl font-bold">Heading</div>
<div className="text-7xl font-bold">Heading</div>
<div className="text-6xl font-bold">Heading</div>
<div className="text-5xl font-bold">Heading</div>
<div className="text-4xl font-bold">Heading</div>
<div className="text-3xl font-bold">Heading</div>
<div className="text-2xl font-bold">Heading</div>
<div className="text-xl font-bold">Heading</div>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo et quae
consequuntur voluptatum quibusdam, autem velit quidem laborum, dignissimos
doloremque ullam eos fugit repellendus maiores eveniet repellat dolor eius
perspiciatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<p>
Quasi aliquam impedit magnam tempora doloribus voluptatibus, at ea dolores
facilis et quod hic, cumque repellendus quidem expedita explicabo
architecto, possimus minima!
</p>
</div>
);
tailwind.config.ts deleted 100644 → 0
import { heroui } from '@heroui/react';
import colors from './theme/colors';
import type { Config } from 'tailwindcss';
const config: Config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./theme/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'
],
theme: {
extend: {
fontFamily: {
sans: ['Indivisible', 'sans-serif']
}
}
},
darkMode: 'class',
plugins: [
heroui({
themes: {
light: colors.light,
dark: colors.dark
}
})
]
};
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