Skip to content

N
nextjs-starter-template
Commit 6f07c285 by Moorthy G
Options

feat(storybook): add locale selction & theme selection

parent 119e5b69
Showing with 222 additions and 17 deletions
.storybook/main.ts
......@@ -7,7 +7,8 @@ const config: StorybookConfig = {
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-onboarding',
'@storybook/addon-interactions'
'@storybook/addon-interactions',
'storybook-dark-mode'
],
webpackFinal: async (config) => {
if (config.resolve) {
......
.storybook/preview.ts deleted 100644 → 0
import '@/styles/globals.css';
import type { Preview } from '@storybook/react';
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i
}
}
}
};
export default preview;
.storybook/preview.tsx 0 → 100644
import React from 'react';
import { themes } from '@storybook/theming';
import { NextUIProvider } from '@nextui-org/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 (
<NextUIProvider locale={locale} disableAnimation={disableAnimation}>
<div className="bg-dark" lang={locale} dir={direction}>
<Story />
</div>
</NextUIProvider>
);
}
];
const parameters: Preview['parameters'] = {
actions: { argTypesRegex: '^on[A-Z].*' },
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;
.storybook/style.css 0 → 100644
@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;
}
package.json
......@@ -36,6 +36,7 @@
"@storybook/nextjs": "^8.1.4",
"@storybook/react": "8.1.4",
"@storybook/test": "8.1.4",
"@storybook/theming": "^8.1.5",
"@types/eslint": "^8.56.10",
"cross-env": "^7.0.3",
"cz-conventional-changelog": "^3.3.0",
......@@ -46,6 +47,7 @@
"prettier": "^3.2.5",
"pretty-quick": "^4.0.0",
"storybook": "^8.1.4",
"storybook-dark-mode": "^4.0.1",
"webpack-bundle-analyzer": "^4.10.2"
}
}
pnpm-lock.yaml
......@@ -78,6 +78,9 @@ importers:
'@storybook/test':
specifier: 8.1.4
version: 8.1.4
'@storybook/theming':
specifier: ^8.1.5
version: 8.1.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@types/eslint':
specifier: ^8.56.10
version: 8.56.10
......@@ -108,6 +111,9 @@ importers:
storybook:
specifier: ^8.1.4
version: 8.1.4(@babel/preset-env@7.24.6(@babel/core@7.24.6))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
storybook-dark-mode:
specifier: ^4.0.1
version: 4.0.1(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
webpack-bundle-analyzer:
specifier: ^4.10.2
version: 4.10.2
......@@ -2625,6 +2631,9 @@ packages:
'@storybook/client-logger@8.1.4':
resolution: {integrity: sha512-I0PqDoNZf4rqrJYwFHhCwuXumpxvzyTzI5qI5R2JT93i49QShI3pLXY31C9VemVBJmS+pBWVOm6RTIdkQiKVWw==}
'@storybook/client-logger@8.1.5':
resolution: {integrity: sha512-zd+aENXnOHsxBATppELmhw/UywLzCxQjz/8i/xkUjeTRB4Ggp0hJlOUdJUEdIJz631ydyytfvM70ktBj9gMl1w==}
'@storybook/codemod@8.1.4':
resolution: {integrity: sha512-glPwKFc07h3h4ZhakEZIF/8fq3fGGM19hpB+RZRHU3dz4NL/TiZXwboxa61wNZe1ehWqbGDaecwANK45DWsNuA==}
......@@ -2766,6 +2775,17 @@ packages:
react-dom:
optional: true
'@storybook/theming@8.1.5':
resolution: {integrity: sha512-E4z1t49fMbVvd/t2MSL0Ecp5zbqsU/QfWBX/eorJ+m+Xc9skkwwG5qf/FnP9x4RZ9KaX8U8+862t0eafVvf4Tw==}
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
peerDependenciesMeta:
react:
optional: true
react-dom:
optional: true
'@storybook/types@8.1.4':
resolution: {integrity: sha512-QfTJg5Hu3c0eiD38Z75bZsw0iCIpruOTGV5O65vCpNun7D6WUyyMM0aUJN3ytujGiHfjsWVgiSe+WoHxdy/fEA==}
......@@ -6349,6 +6369,9 @@ packages:
store2@2.14.3:
resolution: {integrity: sha512-4QcZ+yx7nzEFiV4BMLnr/pRa5HYzNITX2ri0Zh6sT9EyQHbBHacC6YigllUPU9X3D0f/22QCgfokpKs52YRrUg==}
storybook-dark-mode@4.0.1:
resolution: {integrity: sha512-9l3qY8NdgwZnY+NlO1XHB3eUb6FmZo9GazJeUSeFkjRqwA5FmnMSeq0YVqEOqfwniM/TvQwOiTYd5g/hC2wugA==}
storybook@8.1.4:
resolution: {integrity: sha512-HPrpoRGmxNfseGeWu06AQbEifI+uZq4yC1c89BFRJ8/llkJwCCCreLGHULZqw4YHylGkUXxhg0Hv36wJGCqxCw==}
hasBin: true
......@@ -10656,6 +10679,10 @@ snapshots:
dependencies:
'@storybook/global': 5.0.0
'@storybook/client-logger@8.1.5':
dependencies:
'@storybook/global': 5.0.0
'@storybook/codemod@8.1.4':
dependencies:
'@babel/core': 7.24.6
......@@ -11122,6 +11149,16 @@ snapshots:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
'@storybook/theming@8.1.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1)
'@storybook/client-logger': 8.1.5
'@storybook/global': 5.0.0
memoizerific: 1.11.3
optionalDependencies:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
'@storybook/types@8.1.4':
dependencies:
'@storybook/channels': 8.1.4
......@@ -15190,6 +15227,22 @@ snapshots:
store2@2.14.3: {}
storybook-dark-mode@4.0.1(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@storybook/components': 8.1.4(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@storybook/core-events': 8.1.4
'@storybook/global': 5.0.0
'@storybook/icons': 1.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@storybook/manager-api': 8.1.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@storybook/theming': 8.1.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
fast-deep-equal: 3.1.3
memoizerific: 1.11.3
transitivePeerDependencies:
- '@types/react'
- '@types/react-dom'
- react
- react-dom
storybook@8.1.4(@babel/preset-env@7.24.6(@babel/core@7.24.6))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@storybook/cli': 8.1.4(@babel/preset-env@7.24.6(@babel/core@7.24.6))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
......
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