mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
chore(root): storybook project moved to packages folder
This commit is contained in:
Junior Garcia
parent
7153ac81ea
commit
be6d1e3893
@ -1,8 +0,0 @@
|
||||
const {theme} = require("@nextui-org/theme/plugin");
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["../**/src/**/*.{js,jsx,ts,tsx}", "../**/stories/**/*.{js,jsx,ts,tsx}"],
|
||||
darkMode: 'class',
|
||||
plugins: [theme()],
|
||||
}
|
||||
@ -15,3 +15,5 @@ export const commonColors = {
|
||||
red,
|
||||
yellow,
|
||||
};
|
||||
|
||||
export type CommonColors = typeof commonColors;
|
||||
|
||||
201
packages/core/theme/stories/colors.stories.tsx
Normal file
201
packages/core/theme/stories/colors.stories.tsx
Normal file
@ -0,0 +1,201 @@
|
||||
import React from "react";
|
||||
import {ComponentStory, ComponentMeta} from "@storybook/react";
|
||||
import {parseToRgba, readableColor} from "color2k";
|
||||
|
||||
import {commonColors} from "../src/colors";
|
||||
|
||||
type ColorsItem = {
|
||||
color: string;
|
||||
className?: string;
|
||||
textClassName?: string;
|
||||
};
|
||||
|
||||
type SwatchColors = {
|
||||
title: string;
|
||||
items: ColorsItem[];
|
||||
};
|
||||
|
||||
type SwatchSetProps = {
|
||||
colors: SwatchColors[];
|
||||
isSematic?: boolean;
|
||||
};
|
||||
|
||||
const Swatch = ({color}: {color: string}) => {
|
||||
const colorText = color
|
||||
? `#${parseToRgba(color)
|
||||
.slice(0, 3)
|
||||
.map((x) => x.toString(16).padStart(2, "0"))
|
||||
.join("")
|
||||
.toUpperCase()}`
|
||||
: "N/A";
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center w-24 h-24 m-2 rounded-xl shadow-lg"
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
color: readableColor(color),
|
||||
}}
|
||||
>
|
||||
{colorText}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SematicSwatch = ({
|
||||
color,
|
||||
className,
|
||||
textClassName,
|
||||
}: {
|
||||
color: string;
|
||||
className?: string;
|
||||
textClassName?: string;
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={`${className} flex flex-col items-center justify-center w-24 h-24 m-2 rounded-xl shadow-lg`}
|
||||
>
|
||||
<span className={textClassName}>{color}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SwatchSet = ({colors, isSematic = false}: SwatchSetProps) => (
|
||||
<div className="flex flex-row flex-wrap items-center justify-center w-full h-full p-4">
|
||||
{colors.map(({title, items}) => (
|
||||
<div key={title} className="flex flex-col items-start w-full h-full p-4">
|
||||
<h2 className="text-xl font-bold text-foreground">{title}</h2>
|
||||
<div className="flex flex-row flex-wrap items-center justify-start w-full h-full p-4">
|
||||
{items.map((c, index) =>
|
||||
isSematic ? (
|
||||
<SematicSwatch
|
||||
key={`${c.color}-${index}`}
|
||||
className={c.className}
|
||||
color={c.color}
|
||||
textClassName={c.textClassName}
|
||||
/>
|
||||
) : (
|
||||
<Swatch key={`${c.color}-${index}`} color={c.color} />
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default {
|
||||
title: "Theme/Colors",
|
||||
component: SwatchSet,
|
||||
} as ComponentMeta<typeof SwatchSet>;
|
||||
|
||||
const Template: ComponentStory<typeof SwatchSet> = (args: SwatchSetProps) => (
|
||||
<SwatchSet {...args} />
|
||||
);
|
||||
|
||||
const getCommonItems = (colors: string[]) => {
|
||||
return colors.map((color) => ({
|
||||
color,
|
||||
}));
|
||||
};
|
||||
|
||||
export const CommonColors = Template.bind({});
|
||||
CommonColors.args = {
|
||||
colors: [
|
||||
{
|
||||
title: "App Colors",
|
||||
items: getCommonItems([commonColors.white, commonColors.black]),
|
||||
},
|
||||
{
|
||||
title: "Blue",
|
||||
items: getCommonItems([...Object.values(commonColors.blue)]),
|
||||
},
|
||||
{
|
||||
title: "Purple",
|
||||
items: getCommonItems([...Object.values(commonColors.purple)]),
|
||||
},
|
||||
{
|
||||
title: "Green",
|
||||
items: getCommonItems([...Object.values(commonColors.green)]),
|
||||
},
|
||||
{
|
||||
title: "Red",
|
||||
items: getCommonItems([...Object.values(commonColors.red)]),
|
||||
},
|
||||
{
|
||||
title: "Pink",
|
||||
items: getCommonItems([...Object.values(commonColors.pink)]),
|
||||
},
|
||||
{
|
||||
title: "Yellow",
|
||||
items: getCommonItems([...Object.values(commonColors.yellow)]),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const SemanticColors = Template.bind({});
|
||||
SemanticColors.args = {
|
||||
isSematic: true,
|
||||
colors: [
|
||||
{
|
||||
title: "Layout",
|
||||
items: [
|
||||
{
|
||||
color: "background",
|
||||
className: "bg-background",
|
||||
textClassName: "text-foreground",
|
||||
},
|
||||
{
|
||||
color: "foreground",
|
||||
className: "bg-foreground",
|
||||
textClassName: "text-background",
|
||||
},
|
||||
{
|
||||
color: "border",
|
||||
className: "bg-border",
|
||||
textClassName: "text-foreground",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Base",
|
||||
items: [
|
||||
{
|
||||
color: "neutral",
|
||||
className: "bg-neutral",
|
||||
textClassName: "text-neutral-contrastText",
|
||||
},
|
||||
{
|
||||
color: "primary",
|
||||
className: "bg-primary",
|
||||
textClassName: "text-primary-contrastText",
|
||||
},
|
||||
{
|
||||
color: "secondary",
|
||||
className: "bg-secondary",
|
||||
textClassName: "text-secondary-contrastText",
|
||||
},
|
||||
{
|
||||
color: "success",
|
||||
className: "bg-success",
|
||||
textClassName: "text-success-contrastText",
|
||||
},
|
||||
{
|
||||
color: "warning",
|
||||
className: "bg-warning",
|
||||
textClassName: "text-warning-contrastText",
|
||||
},
|
||||
{
|
||||
color: "danger",
|
||||
className: "bg-danger",
|
||||
textClassName: "text-danger-contrastText",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -1,14 +1,15 @@
|
||||
module.exports = {
|
||||
stories: [
|
||||
"../../link/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../avatar/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../user/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../button/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../spinner/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../code/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../tooltip/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../snippet/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../chip/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../core/theme/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../components/link/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../components/avatar/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../components/user/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../components/button/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../components/spinner/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../components/code/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../components/tooltip/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../components/snippet/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
"../../components/chip/stories/*.stories.@(js|jsx|ts|tsx)",
|
||||
],
|
||||
staticDirs: ["../public"],
|
||||
addons: [
|
||||
3779
packages/storybook/public/tailwind.css
Normal file
3779
packages/storybook/public/tailwind.css
Normal file
File diff suppressed because it is too large
Load Diff
12
packages/storybook/tailwind.config.js
Normal file
12
packages/storybook/tailwind.config.js
Normal file
@ -0,0 +1,12 @@
|
||||
const {theme} = require("@nextui-org/theme/plugin");
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
"../components/**/src/**/*.{js,jsx,ts,tsx}",
|
||||
"../components/**/stories/**/*.{js,jsx,ts,tsx}",
|
||||
"../core/theme/stories/**/*.{js,jsx,ts,tsx}",
|
||||
],
|
||||
darkMode: "class",
|
||||
plugins: [theme()],
|
||||
};
|
||||
110
pnpm-lock.yaml
generated
110
pnpm-lock.yaml
generated
@ -723,59 +723,6 @@ importers:
|
||||
clean-package: 2.2.0
|
||||
react: 18.2.0
|
||||
|
||||
packages/components/storybook:
|
||||
specifiers:
|
||||
'@babel/core': ^7.16.7
|
||||
'@babel/preset-env': ^7.14.5
|
||||
'@babel/preset-react': ^7.14.5
|
||||
'@babel/preset-typescript': ^7.14.5
|
||||
'@nextui-org/theme': workspace:*
|
||||
'@storybook/addon-a11y': ^6.5.12
|
||||
'@storybook/addon-actions': ^6.5.12
|
||||
'@storybook/addon-docs': ^6.5.10
|
||||
'@storybook/addon-essentials': ^6.5.12
|
||||
'@storybook/addon-interactions': ^6.5.10
|
||||
'@storybook/addon-links': ^6.5.12
|
||||
'@storybook/addon-postcss': ^2.0.0
|
||||
'@storybook/addon-storysource': ^6.5.16
|
||||
'@storybook/addons': ^6.5.16
|
||||
'@storybook/builder-webpack5': ^6.5.12
|
||||
'@storybook/manager-webpack5': ^6.5.12
|
||||
'@storybook/react': ^6.5.12
|
||||
'@storybook/theming': ^6.5.16
|
||||
autoprefixer: ^10.4.13
|
||||
babel-loader: ^8.2.3
|
||||
concurrently: ^7.6.0
|
||||
postcss: ^8.4.21
|
||||
storybook-dark-mode: ^1.1.2
|
||||
tailwindcss: ^3.2.4
|
||||
dependencies:
|
||||
'@nextui-org/theme': link:../../core/theme
|
||||
devDependencies:
|
||||
'@babel/core': 7.21.0
|
||||
'@babel/preset-env': 7.20.2_@babel+core@7.21.0
|
||||
'@babel/preset-react': 7.18.6_@babel+core@7.21.0
|
||||
'@babel/preset-typescript': 7.21.0_@babel+core@7.21.0
|
||||
'@storybook/addon-a11y': 6.5.16
|
||||
'@storybook/addon-actions': 6.5.16
|
||||
'@storybook/addon-docs': 6.5.16_@babel+core@7.21.0
|
||||
'@storybook/addon-essentials': 6.5.16_6epg6i43rcjfozpei4jqaaefti
|
||||
'@storybook/addon-interactions': 6.5.16
|
||||
'@storybook/addon-links': 6.5.16
|
||||
'@storybook/addon-postcss': 2.0.0
|
||||
'@storybook/addon-storysource': 6.5.16
|
||||
'@storybook/addons': 6.5.16
|
||||
'@storybook/builder-webpack5': 6.5.16
|
||||
'@storybook/manager-webpack5': 6.5.16
|
||||
'@storybook/react': 6.5.16_gfzdo3ad3cmaxbni4zyiwl5zrm
|
||||
'@storybook/theming': 6.5.16
|
||||
autoprefixer: 10.4.13_postcss@8.4.21
|
||||
babel-loader: 8.3.0_@babel+core@7.21.0
|
||||
concurrently: 7.6.0
|
||||
postcss: 8.4.21
|
||||
storybook-dark-mode: 1.1.2
|
||||
tailwindcss: 3.2.7_postcss@8.4.21
|
||||
|
||||
packages/components/tooltip:
|
||||
specifiers:
|
||||
'@nextui-org/aria-utils': workspace:*
|
||||
@ -1018,6 +965,59 @@ importers:
|
||||
clean-package: 2.2.0
|
||||
react: 18.2.0
|
||||
|
||||
packages/storybook:
|
||||
specifiers:
|
||||
'@babel/core': ^7.16.7
|
||||
'@babel/preset-env': ^7.14.5
|
||||
'@babel/preset-react': ^7.14.5
|
||||
'@babel/preset-typescript': ^7.14.5
|
||||
'@nextui-org/theme': workspace:*
|
||||
'@storybook/addon-a11y': ^6.5.12
|
||||
'@storybook/addon-actions': ^6.5.12
|
||||
'@storybook/addon-docs': ^6.5.10
|
||||
'@storybook/addon-essentials': ^6.5.12
|
||||
'@storybook/addon-interactions': ^6.5.10
|
||||
'@storybook/addon-links': ^6.5.12
|
||||
'@storybook/addon-postcss': ^2.0.0
|
||||
'@storybook/addon-storysource': ^6.5.16
|
||||
'@storybook/addons': ^6.5.16
|
||||
'@storybook/builder-webpack5': ^6.5.12
|
||||
'@storybook/manager-webpack5': ^6.5.12
|
||||
'@storybook/react': ^6.5.12
|
||||
'@storybook/theming': ^6.5.16
|
||||
autoprefixer: ^10.4.13
|
||||
babel-loader: ^8.2.3
|
||||
concurrently: ^7.6.0
|
||||
postcss: ^8.4.21
|
||||
storybook-dark-mode: ^1.1.2
|
||||
tailwindcss: ^3.2.4
|
||||
dependencies:
|
||||
'@nextui-org/theme': link:../core/theme
|
||||
devDependencies:
|
||||
'@babel/core': 7.21.0
|
||||
'@babel/preset-env': 7.20.2_@babel+core@7.21.0
|
||||
'@babel/preset-react': 7.18.6_@babel+core@7.21.0
|
||||
'@babel/preset-typescript': 7.21.0_@babel+core@7.21.0
|
||||
'@storybook/addon-a11y': 6.5.16
|
||||
'@storybook/addon-actions': 6.5.16
|
||||
'@storybook/addon-docs': 6.5.16_@babel+core@7.21.0
|
||||
'@storybook/addon-essentials': 6.5.16_6epg6i43rcjfozpei4jqaaefti
|
||||
'@storybook/addon-interactions': 6.5.16
|
||||
'@storybook/addon-links': 6.5.16
|
||||
'@storybook/addon-postcss': 2.0.0
|
||||
'@storybook/addon-storysource': 6.5.16
|
||||
'@storybook/addons': 6.5.16
|
||||
'@storybook/builder-webpack5': 6.5.16
|
||||
'@storybook/manager-webpack5': 6.5.16
|
||||
'@storybook/react': 6.5.16_gfzdo3ad3cmaxbni4zyiwl5zrm
|
||||
'@storybook/theming': 6.5.16
|
||||
autoprefixer: 10.4.13_postcss@8.4.21
|
||||
babel-loader: 8.3.0_@babel+core@7.21.0
|
||||
concurrently: 7.6.0
|
||||
postcss: 8.4.21
|
||||
storybook-dark-mode: 1.1.2
|
||||
tailwindcss: 3.2.7_postcss@8.4.21
|
||||
|
||||
packages/utilities/aria-utils:
|
||||
specifiers:
|
||||
'@nextui-org/system': workspace:*
|
||||
@ -1708,7 +1708,7 @@ packages:
|
||||
'@babel/core': ^7.0.0-0
|
||||
dependencies:
|
||||
'@babel/core': 7.12.9
|
||||
'@babel/helper-plugin-utils': 7.10.4
|
||||
'@babel/helper-plugin-utils': 7.20.2
|
||||
'@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.12.9
|
||||
'@babel/plugin-transform-parameters': 7.20.7_@babel+core@7.12.9
|
||||
|
||||
@ -3379,7 +3379,7 @@ packages:
|
||||
react-dom: '>= 16.8.6'
|
||||
dependencies:
|
||||
'@babel/runtime': 7.21.0
|
||||
clsx: 1.1.0
|
||||
clsx: 1.2.1
|
||||
focus-lock: 0.8.1
|
||||
react-merge-refs: 1.1.0
|
||||
dev: true
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user