archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

Pr/1224 (#1301)

Browse Source 
* chore: storybook migration

* chore: storybook migration

* chore: storybook migration

* fix: moved options in arg types out of control

* fix: fixed type issues

* fix: renamed sb:start script to start

* chore: migrate csf 2 to csf 3

* fix: removed storybook build from root build script

* chore: kick

* chore(root): pnpm lock updated

* chore(root): new changeset

---------

Co-authored-by: Jakob Guddas <github@jguddas.de>
This commit is contained in:
Junior Garcia 2023-08-06 15:04:26 -03:00 committed by GitHub
parent ec2ed200f5
commit d794225cb7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
47 changed files with 5908 additions and 6954 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
.changeset/selfish-coins-shave.md Normal file
View File

@ -0,0 +1,34 @@
---
"@nextui-org/pagination": patch
"@nextui-org/accordion": patch
"@nextui-org/checkbox": patch
"@nextui-org/dropdown": patch
"@nextui-org/progress": patch
"@nextui-org/skeleton": patch
"@nextui-org/divider": patch
"@nextui-org/popover": patch
"@nextui-org/snippet": patch
"@nextui-org/spinner": patch
"@nextui-org/tooltip": patch
"@nextui-org/avatar": patch
"@nextui-org/button": patch
"@nextui-org/navbar": patch
"@nextui-org/spacer": patch
"@nextui-org/switch": patch
"@nextui-org/badge": patch
"@nextui-org/image": patch
"@nextui-org/input": patch
"@nextui-org/modal": patch
"@nextui-org/radio": patch
"@nextui-org/table": patch
"@nextui-org/card": patch
"@nextui-org/chip": patch
"@nextui-org/code": patch
"@nextui-org/link": patch
"@nextui-org/tabs": patch
"@nextui-org/user": patch
"@nextui-org/kbd": patch
"@nextui-org/theme": patch
---
Plugin types adapted to work with latest version of postcss

12
package.json
View File

@ -13,17 +13,17 @@
},
"scripts": {
"dev": "pnpm sb && pnpm dev:docs",
"build": "turbo build --filter=!@nextui-org/docs",
"build:fast": "turbo build:fast --filter=!@nextui-org/docs ",
"build": "turbo build --filter=!@nextui-org/docs --filter=!@nextui-org/storybook",
"build:fast": "turbo build:fast --filter=!@nextui-org/docs --filter=!@nextui-org/storybook",
"dev:docs": "turbo dev --filter=@nextui-org/docs",
"build:docs": "turbo build --filter=@nextui-org/docs",
"build:docs-meta": "node ./scripts/update-index-docs.js",
"start:docs": "turbo start --filter=@nextui-org/docs",
"deploy:docs": "pnpm --filter @nextui-org/docs deploy",
"deploy:stage-docs": "pnpm --filter @nextui-org/docs deploy:stage",
"sb": "pnpm --filter @nextui-org/storybook storybook",
"build:sb": "pnpm --filter @nextui-org/storybook build-storybook",
"start:sb": "pnpm --filter @nextui-org/storybook start:storybook",
"sb": "pnpm --filter @nextui-org/storybook dev",
"build:sb": "pnpm --filter @nextui-org/storybook build",
"start:sb": "pnpm --filter @nextui-org/storybook start",
"test": "jest --verbose --config ./jest.config.js",
"typecheck": "turbo typecheck",
"lint": "pnpm lint:pkg && pnpm lint:docs",
@ -66,7 +66,6 @@
"@react-bootstrap/babel-preset": "^2.1.0",
"@react-types/link": "^3.3.3",
"@react-types/shared": "^3.18.0",
"@storybook/react": "^6.5.16",
"@swc-node/jest": "^1.5.2",
"@swc/core": "^1.3.35",
"@swc/jest": "^0.2.24",
@ -83,6 +82,7 @@
"@types/testing-library__jest-dom": "5.14.5",
"@typescript-eslint/eslint-plugin": "^5.42.0",
"@typescript-eslint/parser": "^5.42.0",
"@storybook/react": "^7.1.1",
"chalk": "^4.1.2",
"concurrently": "^7.6.0",
"commitlint-plugin-function-rules": "^1.7.1",

182
packages/components/accordion/stories/accordion.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {accordionItem} from "@nextui-org/theme";
import {
AnchorIcon,
@ -22,8 +22,8 @@ export default {
variant: {
control: {
type: "select",
options: ["default", "shadow", "bordered", "splitted"],
},
options: ["default", "shadow", "bordered", "splitted"],
},
isDisabled: {
control: {
@ -33,8 +33,8 @@ export default {
selectionMode: {
control: {
type: "select",
options: ["single", "multiple"],
},
options: ["single", "multiple"],
},
disableAnimation: {
control: {
@ -42,7 +42,7 @@ export default {
},
},
},
} as ComponentMeta<typeof Accordion>;
} as Meta<typeof Accordion>;
const defaultProps = {
...accordionItem.defaultVariants,
@ -311,84 +311,111 @@ const CustomWithClassNamesTemplate = (args: AccordionProps) => {
);
};
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
render: Template,
args: {
...defaultProps,
},
};
export const IsCompact = Template.bind({});
IsCompact.args = {
...defaultProps,
isCompact: true,
export const IsCompact = {
render: Template,
args: {
...defaultProps,
isCompact: true,
},
};
export const Multiple = Template.bind({});
Multiple.args = {
...defaultProps,
selectionMode: "multiple",
export const Multiple = {
render: Template,
args: {
...defaultProps,
selectionMode: "multiple",
},
};
export const DefaultExpanded = Template.bind({});
DefaultExpanded.args = {
...defaultProps,
defaultExpandedKeys: ["2"],
export const DefaultExpanded = {
render: Template,
args: {
...defaultProps,
defaultExpandedKeys: ["2"],
},
};
export const DisabledKeys = Template.bind({});
DisabledKeys.args = {
...defaultProps,
disabledKeys: ["2"],
export const DisabledKeys = {
render: Template,
args: {
...defaultProps,
disabledKeys: ["2"],
},
};
export const WithSubtitle = TemplateWithSubtitle.bind({});
WithSubtitle.args = {
...defaultProps,
export const WithSubtitle = {
render: TemplateWithSubtitle,
args: {
...defaultProps,
},
};
export const WithStartContent = TemplateWithStartContent.bind({});
WithStartContent.args = {
...defaultProps,
export const WithStartContent = {
render: TemplateWithStartContent,
args: {
...defaultProps,
},
};
export const Variants = VariantsTemplate.bind({});
Variants.args = {
...defaultProps,
export const Variants = {
render: VariantsTemplate,
args: {
...defaultProps,
},
};
export const CustomMotion = Template.bind({});
CustomMotion.args = {
...defaultProps,
motionProps: {
variants: {
enter: {
y: 0,
opacity: 1,
height: "auto",
transition: {
height: {
type: "spring",
stiffness: 500,
damping: 30,
duration: 1,
},
opacity: {
easings: "ease",
duration: 1,
export const CustomMotion = {
render: Template,
args: {
...defaultProps,
motionProps: {
variants: {
enter: {
y: 0,
opacity: 1,
height: "auto",
transition: {
height: {
type: "spring",
stiffness: 500,
damping: 30,
duration: 1,
},
opacity: {
easings: "ease",
duration: 1,
},
},
},
},
exit: {
y: -10,
opacity: 0,
height: 0,
transition: {
height: {
easings: "ease",
duration: 0.25,
},
opacity: {
easings: "ease",
duration: 0.3,
exit: {
y: -10,
opacity: 0,
height: 0,
transition: {
height: {
easings: "ease",
duration: 0.25,
},
opacity: {
easings: "ease",
duration: 0.3,
},
},
},
},
@ -396,17 +423,26 @@ CustomMotion.args = {
},
};
export const CustomIndicator = CustomInidicatorTemplate.bind({});
CustomIndicator.args = {
...defaultProps,
export const CustomIndicator = {
render: CustomInidicatorTemplate,
args: {
...defaultProps,
},
};
export const Controlled = ControlledTemplate.bind({});
Controlled.args = {
...defaultProps,
export const Controlled = {
render: ControlledTemplate,
args: {
...defaultProps,
},
};
export const CustomWithClassNames = CustomWithClassNamesTemplate.bind({});
CustomWithClassNames.args = {
...defaultProps,
export const CustomWithClassNames = {
render: CustomWithClassNamesTemplate,
args: {
...defaultProps,
},
};

110
packages/components/avatar/stories/avatar-group.stories.tsx
View File

@ -1,6 +1,6 @@
/* eslint-disable react/display-name */
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {Avatar, AvatarGroup, AvatarGroupProps} from "../src";
@ -9,22 +9,16 @@ export default {
component: AvatarGroup,
argTypes: {
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
control: {type: "select"},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg", "full"],
},
control: {type: "select"},
options: ["none", "sm", "md", "lg", "full"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
control: {type: "select"},
options: ["sm", "md", "lg"],
},
spacing: {
control: {
@ -32,7 +26,7 @@ export default {
},
},
},
} as ComponentMeta<typeof AvatarGroup>;
} as Meta<typeof AvatarGroup>;
const Template = (args: AvatarGroupProps) => (
<AvatarGroup {...args}>
@ -48,49 +42,67 @@ const Template = (args: AvatarGroupProps) => (
</AvatarGroup>
);
export const Default = Template.bind({});
Default.args = {
color: "primary",
isBordered: true,
export const Default = {
render: Template,
args: {
color: "primary",
isBordered: true,
},
};
export const Grid = Template.bind({});
Grid.args = {
color: "primary",
isBordered: true,
max: 7,
isGrid: true,
export const Grid = {
render: Template,
args: {
color: "primary",
isBordered: true,
max: 7,
isGrid: true,
},
};
export const isDisabled = Template.bind({});
isDisabled.args = {
color: "warning",
isBordered: true,
isDisabled: true,
export const isDisabled = {
render: Template,
args: {
color: "warning",
isBordered: true,
isDisabled: true,
},
};
export const WithMaxCount = Template.bind({});
WithMaxCount.args = {
color: "primary",
isBordered: true,
max: 3,
export const WithMaxCount = {
render: Template,
args: {
color: "primary",
isBordered: true,
max: 3,
},
};
export const WithTotal = Template.bind({});
WithTotal.args = {
color: "primary",
isBordered: true,
max: 3,
total: 10,
export const WithTotal = {
render: Template,
args: {
color: "primary",
isBordered: true,
max: 3,
total: 10,
},
};
export const CustomCount = Template.bind({});
CustomCount.args = {
color: "primary",
isBordered: true,
max: 3,
total: 10,
renderCount: (count: number) => (
<p className="text-sm text-black dark:text-white ml-2">+{count}</p>
),
export const CustomCount = {
render: Template,
args: {
color: "primary",
isBordered: true,
max: 3,
total: 10,
renderCount: (count: number) => (
<p className="text-sm text-black dark:text-white ml-2">+{count}</p>
),
},
};

223
packages/components/avatar/stories/avatar.stories.tsx
View File

@ -1,9 +1,9 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {Activity, Camera} from "@nextui-org/shared-icons";
import {avatar} from "@nextui-org/theme";
import {Avatar, AvatarProps} from "../src";
import {Avatar} from "../src";
export default {
title: "Components/Avatar",
@ -12,143 +12,156 @@ export default {
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg", "full"],
},
options: ["none", "sm", "md", "lg", "full"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
},
} as ComponentMeta<typeof Avatar>;
const Template = (args: AvatarProps) => <Avatar {...args} />;
} as Meta<typeof Avatar>;
const defaultProps = {
...avatar.defaultVariants,
};
export const Default = Template.bind({});
Default.args = {
...defaultProps,
};
export const WithText = Template.bind({});
WithText.args = {
...defaultProps,
name: "JW",
color: "danger",
};
export const IsDisabled = Template.bind({});
IsDisabled.args = {
...defaultProps,
src: "https://i.pravatar.cc/300?u=a042581f4e29026709d",
color: "secondary",
isBordered: true,
isDisabled: true,
};
export const WithImage = Template.bind({});
WithImage.args = {
...defaultProps,
src: "https://i.pravatar.cc/300?u=a042581f4e29026705d",
};
export const isBordered = Template.bind({});
isBordered.args = {
...defaultProps,
src: "https://i.pravatar.cc/300?u=a042581f4e29026709d",
color: "secondary",
isBordered: true,
};
export const isFocusable = Template.bind({});
isFocusable.args = {
...defaultProps,
src: "https://i.pravatar.cc/300?u=a042581f4e29026707d",
isFocusable: true,
};
export const WithIcon = Template.bind({});
WithIcon.args = {
...defaultProps,
size: "lg",
};
export const Custom = Template.bind({});
Custom.args = {
...defaultProps,
icon: <Activity fill="currentColor" size={20} />,
radius: "xl",
classNames: {
base: "shadow-lg bg-cyan-200 dark:bg-cyan-800",
export const Default = {
args: {
...defaultProps,
},
};
export const CustomSize = Template.bind({});
CustomSize.args = {
...defaultProps,
classNames: {
base: "w-32 h-32 text-base",
export const WithText = {
args: {
...defaultProps,
name: "JW",
color: "danger",
},
};
export const CustomSizeImg = Template.bind({});
CustomSizeImg.args = {
...defaultProps,
src: "https://i.pravatar.cc/300?u=a042581f4e29026705d",
name: "Junior",
classNames: {
base: "w-32 h-32 text-base",
export const IsDisabled = {
args: {
...defaultProps,
src: "https://i.pravatar.cc/300?u=a042581f4e29026709d",
color: "secondary",
isBordered: true,
isDisabled: true,
},
};
export const DefaultIcon = Template.bind({});
DefaultIcon.args = {
...defaultProps,
classNames: {
icon: "text-default-400",
export const WithImage = {
args: {
...defaultProps,
src: "https://i.pravatar.cc/300?u=a042581f4e29026705d",
},
};
export const IconFallback = Template.bind({});
IconFallback.args = {
...defaultProps,
src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
showFallback: true,
export const isBordered = {
args: {
...defaultProps,
src: "https://i.pravatar.cc/300?u=a042581f4e29026709d",
color: "secondary",
isBordered: true,
},
};
export const InitialsFallback = Template.bind({});
InitialsFallback.args = {
...defaultProps,
src: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6",
name: "Junior",
showFallback: true,
export const isFocusable = {
args: {
...defaultProps,
src: "https://i.pravatar.cc/300?u=a042581f4e29026707d",
isFocusable: true,
},
};
export const CustomFallback = Template.bind({});
CustomFallback.args = {
...defaultProps,
src: "https://images.unsplash.com/broken",
showFallback: true,
fallback: (
<Camera className="animate-pulse w-6 h-6 text-default-500" fill="currentColor" size={20} />
),
export const WithIcon = {
args: {
...defaultProps,
size: "lg",
},
};
export const BrokenImage = Template.bind({});
BrokenImage.args = {
...defaultProps,
src: "https://images.unsplash.com/broken-image",
name: "Junior",
showFallback: true,
export const Custom = {
args: {
...defaultProps,
icon: <Activity fill="currentColor" size={20} />,
radius: "xl",
classNames: {
base: "shadow-lg bg-cyan-200 dark:bg-cyan-800",
},
},
};
export const CustomSize = {
args: {
...defaultProps,
classNames: {
base: "w-32 h-32 text-base",
},
},
};
export const CustomSizeImg = {
args: {
...defaultProps,
src: "https://i.pravatar.cc/300?u=a042581f4e29026705d",
name: "Junior",
classNames: {
base: "w-32 h-32 text-base",
},
},
};
export const DefaultIcon = {
args: {
...defaultProps,
classNames: {
icon: "text-default-400",
},
},
};
export const IconFallback = {
args: {
...defaultProps,
src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
showFallback: true,
},
};
export const InitialsFallback = {
args: {
...defaultProps,
src: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6",
name: "Junior",
showFallback: true,
},
};
export const CustomFallback = {
args: {
...defaultProps,
src: "https://images.unsplash.com/broken",
showFallback: true,
fallback: (
<Camera className="animate-pulse w-6 h-6 text-default-500" fill="currentColor" size={20} />
),
},
};
export const BrokenImage = {
args: {
...defaultProps,
src: "https://images.unsplash.com/broken-image",
name: "Junior",
showFallback: true,
},
};

112
packages/components/badge/stories/badge.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {badge} from "@nextui-org/theme";
import {Avatar} from "@nextui-org/avatar";
import {CheckIcon} from "@nextui-org/shared-icons";
@ -20,32 +20,32 @@ export default {
variant: {
control: {
type: "select",
options: ["solid", "flat", "faded", "shadow"],
},
options: ["solid", "flat", "faded", "shadow"],
},
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
shape: {
control: {
type: "select",
options: ["rectangle", "circle"],
},
options: ["rectangle", "circle"],
},
placement: {
control: {
type: "select",
options: ["top-right", "top-left", "bottom-right", "bottom-left"],
},
options: ["top-right", "top-left", "bottom-right", "bottom-left"],
},
isInvisible: {
control: {
@ -58,7 +58,7 @@ export default {
},
},
},
} as ComponentMeta<typeof Badge>;
} as Meta<typeof Badge>;
const defaultProps = {
...badge.defaultVariants,
@ -106,53 +106,71 @@ const InvisibleTemplate = (args: BadgeProps) => {
);
};
export const Default = Template.bind({});
Default.args = {
...defaultProps,
};
export const Default = {
render: Template,
export const Dot = Template.bind({});
Dot.args = {
...defaultProps,
content: "",
color: "success",
size: "sm",
};
export const HorizontalOffset = Template.bind({});
HorizontalOffset.args = {
...defaultProps,
variant: "shadow",
color: "secondary",
content: <CheckIcon />,
placement: "bottom-right",
size: "md",
classNames: {
badge: "p-0.5 right-[50%]",
args: {
...defaultProps,
},
};
export const VerticalOffset = Template.bind({});
VerticalOffset.args = {
...defaultProps,
variant: "shadow",
color: "secondary",
content: <CheckIcon />,
placement: "bottom-right",
size: "md",
classNames: {
badge: "p-0.5 right-[50%] bottom-[50%]",
export const Dot = {
render: Template,
args: {
...defaultProps,
content: "",
color: "success",
size: "sm",
},
};
export const Shapes = ShapesTemplate.bind({});
Shapes.args = {
...defaultProps,
color: "danger",
export const HorizontalOffset = {
render: Template,
args: {
...defaultProps,
variant: "shadow",
color: "secondary",
content: <CheckIcon />,
placement: "bottom-right",
size: "md",
classNames: {
badge: "p-0.5 right-[50%]",
},
},
};
export const Invisible = InvisibleTemplate.bind({});
Invisible.args = {
...defaultProps,
color: "danger",
export const VerticalOffset = {
render: Template,
args: {
...defaultProps,
variant: "shadow",
color: "secondary",
content: <CheckIcon />,
placement: "bottom-right",
size: "md",
classNames: {
badge: "p-0.5 right-[50%] bottom-[50%]",
},
},
};
export const Shapes = {
render: ShapesTemplate,
args: {
...defaultProps,
color: "danger",
},
};
export const Invisible = {
render: InvisibleTemplate,
args: {
...defaultProps,
color: "danger",
},
};

21
packages/components/button/stories/button-group.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {button, buttonGroup} from "@nextui-org/theme";
import {Button, ButtonGroup, ButtonGroupProps} from "../src";
@ -11,26 +11,26 @@ export default {
variant: {
control: {
type: "select",
options: ["solid", "bordered", "light", "flat", "shadow", "ghost"],
},
options: ["solid", "bordered", "light", "flat", "shadow", "ghost"],
},
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg", "full"],
},
options: ["none", "sm", "md", "lg", "full"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
fullWidth: {
control: {
@ -48,7 +48,7 @@ export default {
},
},
},
} as ComponentMeta<typeof ButtonGroup>;
} as Meta<typeof ButtonGroup>;
const defaultProps = {
...button.defaultVariants,
@ -63,7 +63,10 @@ const Template = (args: ButtonGroupProps) => (
</ButtonGroup>
);
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
render: Template,
args: {
...defaultProps,
},
};

94
packages/components/button/stories/button.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {button} from "@nextui-org/theme";
import {Camera, HeadphonesIcon, Notification} from "@nextui-org/shared-icons";
@ -12,26 +12,26 @@ export default {
variant: {
control: {
type: "select",
options: ["solid", "bordered", "light", "flat", "faded", "shadow", "ghost"],
},
options: ["solid", "bordered", "light", "flat", "faded", "shadow", "ghost"],
},
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
spinnerPlacement: {
control: {
type: "select",
options: ["start", "end"],
},
options: ["start", "end"],
},
fullWidth: {
control: {
@ -41,8 +41,8 @@ export default {
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg", "full"],
},
options: ["none", "sm", "md", "lg", "full"],
},
isDisabled: {
control: {
@ -60,7 +60,7 @@ export default {
},
},
},
} as ComponentMeta<typeof Button>;
} as Meta<typeof Button>;
const defaultProps = {
children: "Button",
@ -68,8 +68,6 @@ const defaultProps = {
...button.defaultVariants,
};
const Template = (args: ButtonProps) => <Button {...args} />;
const StateTemplate = (args: ButtonProps) => {
const [isOpen, setIsOpen] = React.useState(false);
@ -84,52 +82,62 @@ const StateTemplate = (args: ButtonProps) => {
);
};
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
args: {
...defaultProps,
},
};
export const WithState = StateTemplate.bind({});
WithState.args = {
...defaultProps,
export const WithState = {
render: StateTemplate,
args: {
...defaultProps,
},
};
export const IsDisabled = Template.bind({});
IsDisabled.args = {
...defaultProps,
isDisabled: true,
export const IsDisabled = {
args: {
...defaultProps,
isDisabled: true,
},
};
export const DisableRipple = Template.bind({});
DisableRipple.args = {
...defaultProps,
disableRipple: true,
export const DisableRipple = {
args: {
...defaultProps,
disableRipple: true,
},
};
export const WithIcons = Template.bind({});
WithIcons.args = {
...defaultProps,
startContent: <Notification className="fill-current" />,
endContent: <Camera className="fill-current" />,
export const WithIcons = {
args: {
...defaultProps,
startContent: <Notification className="fill-current" />,
endContent: <Camera className="fill-current" />,
},
};
export const IconButton = Template.bind({});
IconButton.args = {
...defaultProps,
isIconOnly: true,
children: <HeadphonesIcon className="w-5 h-5" />,
export const IconButton = {
args: {
...defaultProps,
isIconOnly: true,
children: <HeadphonesIcon className="w-5 h-5" />,
},
};
export const IsLoading = Template.bind({});
IsLoading.args = {
...defaultProps,
color: "primary",
isLoading: true,
export const IsLoading = {
args: {
...defaultProps,
color: "primary",
isLoading: true,
},
};
export const CustomWithClassNames = Template.bind({});
CustomWithClassNames.args = {
...defaultProps,
radius: "full",
className: "bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg",
export const CustomWithClassNames = {
args: {
...defaultProps,
radius: "full",
className: "bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg",
},
};

89
packages/components/card/stories/card.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {card} from "@nextui-org/theme";
import {Link} from "@nextui-org/link";
import {Button} from "@nextui-org/button";
@ -15,14 +15,14 @@ export default {
shadow: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg"],
},
options: ["none", "sm", "md", "lg"],
},
fullWidth: {
control: {
@ -67,7 +67,7 @@ export default {
</div>
),
],
} as ComponentMeta<typeof Card>;
} as Meta<typeof Card>;
const defaultProps = {
...card.defaultVariants,
@ -406,47 +406,74 @@ const CenterImgWithHeaderTemplate = (args: CardProps) => {
);
};
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
render: Template,
args: {
...defaultProps,
},
};
export const WithDivider = WithDividerTemplate.bind({});
WithDivider.args = {
...defaultProps,
export const WithDivider = {
render: WithDividerTemplate,
args: {
...defaultProps,
},
};
export const WithFooter = WithFooterTemplate.bind({});
WithFooter.args = {
...defaultProps,
export const WithFooter = {
render: WithFooterTemplate,
args: {
...defaultProps,
},
};
export const WithAbsImageHeader = WithAbsImageHeaderTemplate.bind({});
WithAbsImageHeader.args = {
...defaultProps,
export const WithAbsImageHeader = {
render: WithAbsImageHeaderTemplate,
args: {
...defaultProps,
},
};
export const WithAbsImgHeaderFooter = WithAbsImgHeaderFooterTemplate.bind({});
WithAbsImgHeaderFooter.args = {
...defaultProps,
export const WithAbsImgHeaderFooter = {
render: WithAbsImgHeaderFooterTemplate,
args: {
...defaultProps,
},
};
export const CoverImg = CoverImgTemplate.bind({});
CoverImg.args = {
...defaultProps,
export const CoverImg = {
render: CoverImgTemplate,
args: {
...defaultProps,
},
};
export const CenterImg = CenterImgTemplate.bind({});
CenterImg.args = {
...defaultProps,
export const CenterImg = {
render: CenterImgTemplate,
args: {
...defaultProps,
},
};
export const PrimaryAction = PrimaryActionTemplate.bind({});
PrimaryAction.args = {
...defaultProps,
export const PrimaryAction = {
render: PrimaryActionTemplate,
args: {
...defaultProps,
},
};
export const CenterImgWithHeader = CenterImgWithHeaderTemplate.bind({});
CenterImgWithHeader.args = {
...defaultProps,
export const CenterImgWithHeader = {
render: CenterImgWithHeaderTemplate,
args: {
...defaultProps,
},
};

219
packages/components/checkbox/stories/checkbox-group.stories.tsx
View File

@ -1,14 +1,9 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {checkbox} from "@nextui-org/theme";
import {CheckboxGroup, Checkbox, CheckboxGroupProps} from "../src";
import {
CustomWithClassNames as CheckboxItemWithStyles,
CustomWithHooks as CheckboxItemWithHooks,
} from "./checkbox.stories";
export default {
title: "Components/CheckboxGroup",
component: CheckboxGroup,
@ -16,20 +11,20 @@ export default {
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg", "full"],
},
options: ["none", "sm", "md", "lg", "full"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
lineThrough: {
control: {
@ -42,7 +37,7 @@ export default {
},
},
},
} as ComponentMeta<typeof Checkbox>;
} as Meta<typeof Checkbox>;
const defaultProps = {
...checkbox.defaultVariants,
@ -58,156 +53,92 @@ const Template = (args: CheckboxGroupProps) => (
</CheckboxGroup>
);
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
render: Template,
args: {
...defaultProps,
},
};
export const WithLabel = Template.bind({});
WithLabel.args = {
label: "Select cities",
export const WithLabel = {
render: Template,
args: {
label: "Select cities",
},
};
export const DefaultValue = Template.bind({});
DefaultValue.args = {
...defaultProps,
label: "Select cities",
defaultValue: ["buenos-aires", "london"],
export const DefaultValue = {
render: Template,
args: {
...defaultProps,
label: "Select cities",
defaultValue: ["buenos-aires", "london"],
},
};
export const Horizontal = Template.bind({});
Horizontal.args = {
label: "Select cities",
orientation: "horizontal",
export const Horizontal = {
render: Template,
args: {
label: "Select cities",
orientation: "horizontal",
},
};
export const IsDisabled = Template.bind({});
IsDisabled.args = {
label: "Select cities",
isDisabled: true,
export const IsDisabled = {
render: Template,
args: {
label: "Select cities",
isDisabled: true,
},
};
export const LineThrough = Template.bind({});
LineThrough.args = {
label: "Select cities",
lineThrough: true,
export const LineThrough = {
render: Template,
args: {
label: "Select cities",
lineThrough: true,
},
};
export const WithDescription = Template.bind({});
WithDescription.args = {
...defaultProps,
description: "Select the cities you want to visit",
export const WithDescription = {
render: Template,
args: {
...defaultProps,
description: "Select the cities you want to visit",
},
};
export const Invalid = Template.bind({});
Invalid.args = {
...defaultProps,
validationState: "invalid",
export const Invalid = {
render: Template,
args: {
...defaultProps,
validationState: "invalid",
},
};
export const WithErrorMessage = Template.bind({});
WithErrorMessage.args = {
...defaultProps,
validationState: "invalid",
errorMessage: "The selected cities cannot be visited at the same time",
export const WithErrorMessage = {
render: Template,
args: {
...defaultProps,
validationState: "invalid",
errorMessage: "The selected cities cannot be visited at the same time",
},
};
export const DisableAnimation = Template.bind({});
DisableAnimation.args = {
label: "Select cities",
disableAnimation: true,
};
export const Controlled = () => {
const [groupSelected, setGroupSelected] = React.useState<string[]>(["buenos-aires", "sydney"]);
React.useEffect(() => {
// eslint-disable-next-line no-console
console.log("CheckboxGroup ", groupSelected);
}, [groupSelected]);
return (
<div className="flex flex-row gap-2">
<CheckboxGroup
color="warning"
label="Select cities"
value={groupSelected}
onChange={setGroupSelected}
>
<Checkbox color="primary" value="buenos-aires">
Buenos Aires
</Checkbox>
<Checkbox value="sydney">Sydney</Checkbox>
<Checkbox value="london">London</Checkbox>
<Checkbox value="tokyo">Tokyo</Checkbox>
</CheckboxGroup>
</div>
);
};
export const CustomWithClassNames = () => {
const [groupSelected, setGroupSelected] = React.useState<string[]>([]);
return (
<>
<CheckboxGroup label="Select employees" value={groupSelected} onChange={setGroupSelected}>
<CheckboxItemWithStyles value="junior" />
<CheckboxItemWithStyles
userName="John Doe"
userProfile={{
avatar: "https://i.pravatar.cc/300?u=a042581f4e29026707d",
username: "johndoe",
url: "#",
}}
userRole="Product Designer"
value="johndoe"
/>
<CheckboxItemWithStyles
userName="Zoey Lang"
userProfile={{
avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
username: "zoeylang",
url: "#",
}}
userRole="Technical Writer"
value="zoeylang"
/>
<CheckboxItemWithStyles
userName="William Howard"
userProfile={{
avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
username: "william",
url: "#",
}}
userRole="Sales Manager"
value="william"
/>
</CheckboxGroup>
<p className="mt-4 ml-1 text-default-500">Selected: {groupSelected.join(", ")}</p>
</>
);
};
export const CustomWithHooks = () => {
const [groupSelected, setGroupSelected] = React.useState<string[]>([]);
return (
<>
<CheckboxGroup
className="gap-1"
label="Select amenities"
orientation="horizontal"
value={groupSelected}
onChange={setGroupSelected}
>
<CheckboxItemWithHooks value="wifi">Wifi</CheckboxItemWithHooks>
<CheckboxItemWithHooks value="tv">TV</CheckboxItemWithHooks>
<CheckboxItemWithHooks value="kitchen">Kitchen</CheckboxItemWithHooks>
<CheckboxItemWithHooks value="parking">Parking</CheckboxItemWithHooks>
<CheckboxItemWithHooks value="pool">Pool</CheckboxItemWithHooks>
<CheckboxItemWithHooks value="gym">Gym</CheckboxItemWithHooks>
</CheckboxGroup>
<p className="mt-4 ml-1 text-default-500">Selected: {groupSelected.join(", ")}</p>
</>
);
export const DisableAnimation = {
render: Template,
args: {
label: "Select cities",
disableAnimation: true,
},
};

230
packages/components/checkbox/stories/checkbox.stories.tsx
View File

@ -1,20 +1,9 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {checkbox, colors} from "@nextui-org/theme";
import {CheckIcon, CloseIcon} from "@nextui-org/shared-icons";
import {User} from "@nextui-org/user";
import {Link} from "@nextui-org/link";
import {Chip, ChipProps} from "@nextui-org/chip";
import {clsx} from "@nextui-org/shared-utils";
import {VisuallyHidden} from "@react-aria/visually-hidden";
import {Meta} from "@storybook/react";
import {checkbox} from "@nextui-org/theme";
import {CloseIcon} from "@nextui-org/shared-icons";
import {
Checkbox,
CheckboxIconProps,
CheckboxProps,
useCheckbox,
useCheckboxGroupContext,
} from "../src";
import {Checkbox, CheckboxIconProps, CheckboxProps} from "../src";
export default {
title: "Components/Checkbox",
@ -23,20 +12,20 @@ export default {
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg", "full"],
},
options: ["none", "sm", "md", "lg", "full"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
lineThrough: {
control: {
@ -49,15 +38,13 @@ export default {
},
},
},
} as ComponentMeta<typeof Checkbox>;
} as Meta<typeof Checkbox>;
const defaultProps: CheckboxProps = {
...checkbox.defaultVariants,
children: "Option",
};
const Template = (args: CheckboxProps) => <Checkbox {...args} />;
const ControlledTemplate = (args: CheckboxProps) => {
const [selected, setSelected] = React.useState<boolean>(true);
@ -76,172 +63,73 @@ const ControlledTemplate = (args: CheckboxProps) => {
);
};
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
args: {
...defaultProps,
},
};
export const IsDisabled = Template.bind({});
IsDisabled.args = {
...defaultProps,
isDisabled: true,
export const IsDisabled = {
args: {
...defaultProps,
isDisabled: true,
},
};
export const DefaultSelected = Template.bind({});
DefaultSelected.args = {
...defaultProps,
defaultSelected: true,
export const DefaultSelected = {
args: {
...defaultProps,
defaultSelected: true,
},
};
export const CustomIconNode = Template.bind({});
CustomIconNode.args = {
...defaultProps,
icon: <CloseIcon />,
export const CustomIconNode = {
args: {
...defaultProps,
icon: <CloseIcon />,
},
};
export const CustomIconFunction = Template.bind({});
CustomIconFunction.args = {
...defaultProps,
// eslint-disable-next-line react/display-name
icon: (props: CheckboxIconProps) => <CloseIcon {...props} />,
export const CustomIconFunction = {
args: {
...defaultProps,
// eslint-disable-next-line react/display-name
icon: (props: CheckboxIconProps) => <CloseIcon {...props} />,
},
};
export const AlwaysSelected = Template.bind({});
AlwaysSelected.args = {
...defaultProps,
isSelected: true,
export const AlwaysSelected = {
args: {
...defaultProps,
isSelected: true,
},
};
export const IsIndeterminate = Template.bind({});
IsIndeterminate.args = {
...defaultProps,
isIndeterminate: true,
export const IsIndeterminate = {
args: {
...defaultProps,
isIndeterminate: true,
},
};
export const LineThrough = Template.bind({});
LineThrough.args = {
...defaultProps,
lineThrough: true,
export const LineThrough = {
args: {
...defaultProps,
lineThrough: true,
},
};
export const DisableAnimation = Template.bind({});
DisableAnimation.args = {
...defaultProps,
disableAnimation: true,
export const DisableAnimation = {
args: {
...defaultProps,
disableAnimation: true,
},
};
export const Controlled = ControlledTemplate.bind({});
Controlled.args = {
...defaultProps,
};
interface CustomCheckboxProps extends CheckboxProps {
userName?: string;
userProfile?: {
username?: string;
avatar?: string;
url?: string;
};
userRole?: string;
status?: string;
statusColor?: ChipProps["color"];
}
export const CustomWithClassNames = (props: CustomCheckboxProps) => {
const {
value,
userName = "Junior Garcia",
userProfile = {
avatar: "https://avatars.githubusercontent.com/u/30373425?v=4",
username: "jrgarciadev",
url: "https://twitter.com/jrgarciadev",
},
userRole = "Software Developer",
status = "Active",
statusColor = "secondary",
...otherProps
} = props;
const groupContext = useCheckboxGroupContext();
const isInGroup = !!groupContext;
const [isSelected, setIsSelected] = React.useState<boolean>(false);
const checkboxProps = !isInGroup
? {
isSelected,
onValueChange: setIsSelected,
}
: {};
const isChecked = isInGroup && value ? groupContext?.groupState.isSelected(value) : isSelected;
return (
<Checkbox
{...otherProps}
aria-label={userName}
classNames={{
base: clsx(
"inline-flex w-full max-w-md bg-content1 hover:bg-content2 items-center justify-start cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
{
"border-primary": isChecked,
},
),
label: "w-full",
}}
value={value}
{...checkboxProps}
>
<div className="w-full flex justify-between gap-2">
<User
avatarProps={{size: "sm", src: userProfile.avatar}}
description={
<Link href={userProfile.url} size="sm">
@{userProfile.username}
</Link>
}
name={userName}
/>
<div className="flex flex-col items-end gap-1">
<span className="text-xs text-default-500">{userRole}</span>
<Chip color={statusColor} size="sm" variant="flat">
{status}
</Chip>
</div>
</div>
</Checkbox>
);
};
export const CustomWithHooks = (props: CheckboxProps) => {
const {children, isSelected, isFocusVisible, getBaseProps, getLabelProps, getInputProps} =
useCheckbox({
"aria-label": props["aria-label"] || "Toggle status",
...props,
});
return (
<label {...getBaseProps()}>
<VisuallyHidden>
<input {...getInputProps()} />
</VisuallyHidden>
<Chip
classNames={{
base: clsx("border-default hover:bg-default-200", {
"border-primary bg-primary hover:bg-primary-600 hover:border-primary-600": isSelected,
"outline-none ring-2 ring-focus ring-offset-2 ring-offset-background": isFocusVisible,
}),
content: clsx("text-primary", {
"text-primary-foreground pl-1": isSelected,
}),
}}
color="primary"
startContent={isSelected ? <CheckIcon className="ml-1" color={colors.white} /> : null}
variant="faded"
{...getLabelProps()}
>
{children ? children : isSelected ? "Enabled" : "Disabled"}
</Chip>
</label>
);
export const Controlled = {
render: ControlledTemplate,
args: {
...defaultProps,
},
};

94
packages/components/chip/stories/chip.stories.tsx
View File

@ -1,10 +1,10 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {chip} from "@nextui-org/theme";
import {Avatar} from "@nextui-org/avatar";
import {CheckIcon} from "@nextui-org/shared-icons";
import {Chip, ChipProps} from "../src";
import {Chip} from "../src";
export default {
title: "Components/Chip",
@ -13,26 +13,26 @@ export default {
variant: {
control: {
type: "select",
options: ["solid", "bordered", "light", "flat", "faded", "shadow", "dot"],
},
options: ["solid", "bordered", "light", "flat", "faded", "shadow", "dot"],
},
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg", "full"],
},
options: ["none", "sm", "md", "lg", "full"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
isDisabled: {
control: {
@ -40,59 +40,63 @@ export default {
},
},
},
} as ComponentMeta<typeof Chip>;
} as Meta<typeof Chip>;
const defaultProps = {
...chip.defaultVariants,
children: "Chip",
};
const Template = (args: ChipProps) => <Chip {...args} />;
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
args: {
...defaultProps,
},
};
export const StartContent = Template.bind({});
StartContent.args = {
...defaultProps,
startContent: (
<span aria-label="celebration" className="ml-1" role="img">
🎉
</span>
),
export const StartContent = {
args: {
...defaultProps,
startContent: (
<span aria-label="celebration" className="ml-1" role="img">
🎉
</span>
),
},
};
export const EndContent = Template.bind({});
EndContent.args = {
...defaultProps,
endContent: (
<span aria-label="rocket" className="mr-1" role="img">
🚀
</span>
),
export const EndContent = {
args: {
...defaultProps,
endContent: (
<span aria-label="rocket" className="mr-1" role="img">
🚀
</span>
),
},
};
export const Closeable = Template.bind({});
Closeable.args = {
...defaultProps,
// eslint-disable-next-line
onClose: () => console.log("Close"),
export const Closeable = {
args: {
...defaultProps,
// eslint-disable-next-line
onClose: () => console.log("Close"),
},
};
export const CustomCloseIcon = Template.bind({});
CustomCloseIcon.args = {
...defaultProps,
endContent: <CheckIcon />,
// eslint-disable-next-line
onClose: () => console.log("Close"),
export const CustomCloseIcon = {
args: {
...defaultProps,
endContent: <CheckIcon />,
// eslint-disable-next-line
onClose: () => console.log("Close"),
},
};
export const WithAvatar = Template.bind({});
WithAvatar.args = {
...defaultProps,
variant: "flat",
color: "secondary",
avatar: <Avatar name="JW" src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />,
export const WithAvatar = {
args: {
...defaultProps,
variant: "flat",
color: "secondary",
avatar: <Avatar name="JW" src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />,
},
};

22
packages/components/code/stories/code.stories.tsx
View File

@ -1,8 +1,7 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {code} from "@nextui-org/theme";
import {Code, CodeProps} from "../src";
import {Code} from "../src";
export default {
title: "Components/Code",
@ -11,32 +10,31 @@ export default {
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg", "full"],
},
options: ["none", "sm", "md", "lg", "full"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
},
} as ComponentMeta<typeof Code>;
} as Meta<typeof Code>;
const defaultProps = {
children: "npm install @nextui-org/react",
...code.defaultVariants,
};
const Template = (args: CodeProps) => <Code {...args} />;
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
args: {
...defaultProps,
},
};

15
packages/components/divider/stories/divider.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {divider} from "@nextui-org/theme";
import {Divider, DividerProps} from "../src";
@ -11,8 +11,8 @@ export default {
orientation: {
control: {
type: "select",
options: ["horizontal", "vertical"],
},
options: ["horizontal", "vertical"],
},
},
decorators: [
@ -22,7 +22,7 @@ export default {
</div>
),
],
} as ComponentMeta<typeof Divider>;
} as Meta<typeof Divider>;
const defaultProps = {
...divider.defaultVariants,
@ -45,7 +45,10 @@ const Template = (args: DividerProps) => (
</div>
);
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
render: Template,
args: {
...defaultProps,
},
};

191
packages/components/dropdown/stories/dropdown.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {dropdown, popover} from "@nextui-org/theme";
import {Button} from "@nextui-org/button";
import {Avatar} from "@nextui-org/avatar";
@ -29,45 +29,45 @@ export default {
variant: {
control: {
type: "select",
options: ["solid", "bordered", "light", "flat", "faded", "shadow"],
},
options: ["solid", "bordered", "light", "flat", "faded", "shadow"],
},
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg", "full"],
},
options: ["none", "sm", "md", "lg", "full"],
},
placement: {
control: {
type: "select",
options: [
"top",
"bottom",
"right",
"left",
"top-start",
"top-end",
"bottom-start",
"bottom-end",
"left-start",
"left-end",
"right-start",
"right-end",
],
},
options: [
"top",
"bottom",
"right",
"left",
"top-start",
"top-end",
"bottom-start",
"bottom-end",
"left-start",
"left-end",
"right-start",
"right-end",
],
},
backdrop: {
control: {
type: "select",
options: ["transparent", "blur", "opaque"],
},
options: ["transparent", "blur", "opaque"],
},
offset: {
control: {
@ -102,7 +102,7 @@ export default {
</div>
),
],
} as ComponentMeta<typeof Dropdown>;
} as Meta<typeof Dropdown>;
const defaultProps = {
...popover.defaultVariants,
@ -523,84 +523,123 @@ const CustomTriggerTemplate = ({variant, ...args}) => {
);
};
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
render: Template,
args: {
...defaultProps,
},
};
export const WithArrow = Template.bind({});
WithArrow.args = {
...defaultProps,
showArrow: true,
export const WithArrow = {
render: Template,
args: {
...defaultProps,
showArrow: true,
},
};
export const WithDivider = DividerTemplate.bind({});
WithDivider.args = {
...defaultProps,
export const WithDivider = {
render: DividerTemplate,
args: {
...defaultProps,
},
};
export const DisabledKeys = DisabledKeysTemplate.bind({});
DisabledKeys.args = {
...defaultProps,
export const DisabledKeys = {
render: DisabledKeysTemplate,
args: {
...defaultProps,
},
};
export const SingleSelection = SingleSelectionTemplate.bind({});
SingleSelection.args = {
...defaultProps,
export const SingleSelection = {
render: SingleSelectionTemplate,
args: {
...defaultProps,
},
};
export const MultipleSelection = MultipleSelectionTemplate.bind({});
MultipleSelection.args = {
...defaultProps,
export const MultipleSelection = {
render: MultipleSelectionTemplate,
args: {
...defaultProps,
},
};
export const WithShortcut = WithShortcutTemplate.bind({});
WithShortcut.args = {
...defaultProps,
export const WithShortcut = {
render: WithShortcutTemplate,
args: {
...defaultProps,
},
};
export const WithStartContent = WithStartContentTemplate.bind({});
WithStartContent.args = {
...defaultProps,
variant: "flat",
color: "secondary",
export const WithStartContent = {
render: WithStartContentTemplate,
args: {
...defaultProps,
variant: "flat",
color: "secondary",
},
};
export const WithEndContent = WithEndContentTemplate.bind({});
WithEndContent.args = {
...defaultProps,
variant: "faded",
color: "success",
export const WithEndContent = {
render: WithEndContentTemplate,
args: {
...defaultProps,
variant: "faded",
color: "success",
},
};
export const WithDescription = WithDescriptionTemplate.bind({});
WithDescription.args = {
...defaultProps,
variant: "flat",
color: "secondary",
className: "min-w-[240px]",
export const WithDescription = {
render: WithDescriptionTemplate,
args: {
...defaultProps,
variant: "flat",
color: "secondary",
className: "min-w-[240px]",
},
};
export const WithSections = WithSectionsTemplate.bind({});
WithSections.args = {
...defaultProps,
variant: "flat",
color: "secondary",
className: "min-w-[240px]",
export const WithSections = {
render: WithSectionsTemplate,
args: {
...defaultProps,
variant: "flat",
color: "secondary",
className: "min-w-[240px]",
},
};
export const WithCustomTrigger = CustomTriggerTemplate.bind({});
WithCustomTrigger.args = {
...defaultProps,
variant: "flat",
offset: 14,
export const WithCustomTrigger = {
render: CustomTriggerTemplate,
args: {
...defaultProps,
variant: "flat",
offset: 14,
},
};
export const DisableAnimation = WithStartContentTemplate.bind({});
DisableAnimation.args = {
...defaultProps,
showArrow: true,
variant: "flat",
color: "secondary",
disableAnimation: true,
export const DisableAnimation = {
render: WithStartContentTemplate,
args: {
...defaultProps,
showArrow: true,
variant: "flat",
color: "secondary",
disableAnimation: true,
},
};

117
packages/components/image/stories/image.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {image} from "@nextui-org/theme";
import {Image, ImageProps} from "../src";
@ -11,14 +11,14 @@ export default {
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg", "full"],
},
options: ["none", "sm", "md", "lg", "full"],
},
shadow: {
control: {
type: "select",
options: ["none", "sm", "md", "lg"],
},
options: ["none", "sm", "md", "lg"],
},
isBlurred: {
control: {
@ -43,7 +43,7 @@ export default {
</div>
),
],
} as ComponentMeta<typeof Image>;
} as Meta<typeof Image>;
const defaultProps = {
...image.defaultVariants,
@ -52,8 +52,6 @@ const defaultProps = {
disableSkeleton: true,
};
const Template = (args: ImageProps) => <Image {...args} />;
const LoadingTemplate = (args: ImageProps) => {
const [isLoading, setIsLoading] = React.useState(true);
@ -72,64 +70,75 @@ const LoadingTemplate = (args: ImageProps) => {
return <Image {...args} isLoading={isLoading} />;
};
export const Default = Template.bind({});
Default.args = {
width: 300,
...defaultProps,
export const Default = {
args: {
width: 300,
...defaultProps,
},
};
export const Blurred = Template.bind({});
Blurred.args = {
...defaultProps,
width: 300,
isBlurred: true,
src: require("./assets/local-image-small.jpg"),
// src:
// "https://images.unsplash.com/photo-1519638831568-d9897f54ed69?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
export const Blurred = {
args: {
...defaultProps,
width: 300,
isBlurred: true,
src: require("./assets/local-image-small.jpg"),
// src:
// "https://images.unsplash.com/photo-1519638831568-d9897f54ed69?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80",
},
};
export const Zoomed = Template.bind({});
Zoomed.args = {
...defaultProps,
width: 300,
isZoomed: true,
radius: "lg",
src: "https://nextui.org/images/card-example-2.jpeg",
export const Zoomed = {
args: {
...defaultProps,
width: 300,
isZoomed: true,
radius: "lg",
src: "https://nextui.org/images/card-example-2.jpeg",
},
};
export const Shadow = Template.bind({});
Shadow.args = {
...defaultProps,
width: 300,
isZoomed: true,
radius: "lg",
shadow: "md",
src: require("./assets/local-image-small.jpg"),
export const Shadow = {
args: {
...defaultProps,
width: 300,
isZoomed: true,
radius: "lg",
shadow: "md",
src: require("./assets/local-image-small.jpg"),
},
};
export const AnimatedLoad = Template.bind({});
AnimatedLoad.args = {
...defaultProps,
width: 300,
radius: "lg",
src: "https://app.requestly.io/delay/3000/https://images.unsplash.com/photo-1539571696357-5a69c17a67c6",
export const AnimatedLoad = {
args: {
...defaultProps,
width: 300,
radius: "lg",
src: "https://app.requestly.io/delay/3000/https://images.unsplash.com/photo-1539571696357-5a69c17a67c6",
},
};
export const Fallback = LoadingTemplate.bind({});
Fallback.args = {
...defaultProps,
width: 300,
radius: "lg",
src: "https://app.requestly.io/delay/3000/https://images.unsplash.com/photo-1539571696357-5a69c17a67c6",
fallbackSrc: "https://via.placeholder.com/300x450",
export const Fallback = {
render: LoadingTemplate,
args: {
...defaultProps,
width: 300,
radius: "lg",
src: "https://app.requestly.io/delay/3000/https://images.unsplash.com/photo-1539571696357-5a69c17a67c6",
fallbackSrc: "https://via.placeholder.com/300x450",
},
};
export const Skeleton = LoadingTemplate.bind({});
Skeleton.args = {
...defaultProps,
width: 300,
height: 450,
radius: "lg",
src: "https://app.requestly.io/delay/3000/https://images.unsplash.com/photo-1494790108377-be9c29b29330",
disableSkeleton: false,
export const Skeleton = {
render: LoadingTemplate,
args: {
...defaultProps,
width: 300,
height: 450,
radius: "lg",
src: "https://app.requestly.io/delay/3000/https://images.unsplash.com/photo-1494790108377-be9c29b29330",
disableSkeleton: false,
},
};

246
packages/components/input/stories/input.stories.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable jsx-a11y/interactive-supports-focus */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {input} from "@nextui-org/theme";
import {
MailFilledIcon,
@ -20,32 +20,32 @@ export default {
variant: {
control: {
type: "select",
options: ["flat", "faded", "bordered", "underlined"],
},
options: ["flat", "faded", "bordered", "underlined"],
},
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
radius: {
control: {
type: "select",
options: ["none", "base", "sm", "md", "lg", "xl", "full"],
},
options: ["none", "base", "sm", "md", "lg", "xl", "full"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
labelPlacement: {
control: {
type: "select",
options: ["inside", "outside", "outside-left"],
},
options: ["inside", "outside", "outside-left"],
},
isDisabled: {
control: {
@ -60,7 +60,7 @@ export default {
</div>
),
],
} as ComponentMeta<typeof Input>;
} as Meta<typeof Input>;
const defaultProps = {
...input.defaultVariants,
@ -445,127 +445,181 @@ const CustomWithHooksTemplate = (args: InputProps) => {
);
};
export const Default = MirrorTemplate.bind({});
Default.args = {
...defaultProps,
export const Default = {
render: MirrorTemplate,
args: {
...defaultProps,
},
};
export const Required = MirrorTemplate.bind({});
Required.args = {
...defaultProps,
isRequired: true,
export const Required = {
render: MirrorTemplate,
args: {
...defaultProps,
isRequired: true,
},
};
export const Disabled = Template.bind({});
Disabled.args = {
...defaultProps,
defaultValue: "junior@nextui.org",
variant: "faded",
isDisabled: true,
export const Disabled = {
render: Template,
args: {
...defaultProps,
defaultValue: "junior@nextui.org",
variant: "faded",
isDisabled: true,
},
};
export const ReadOnly = Template.bind({});
ReadOnly.args = {
...defaultProps,
defaultValue: "junior@nextui.org",
variant: "bordered",
isReadOnly: true,
export const ReadOnly = {
render: Template,
args: {
...defaultProps,
defaultValue: "junior@nextui.org",
variant: "bordered",
isReadOnly: true,
},
};
export const WithDescription = MirrorTemplate.bind({});
WithDescription.args = {
...defaultProps,
description: "We'll never share your email with anyone else.",
export const WithDescription = {
render: MirrorTemplate,
args: {
...defaultProps,
description: "We'll never share your email with anyone else.",
},
};
export const Password = PasswordTemplate.bind({});
Password.args = {
...defaultProps,
label: "Password",
placeholder: "Enter your password",
variant: "bordered",
export const Password = {
render: PasswordTemplate,
args: {
...defaultProps,
label: "Password",
placeholder: "Enter your password",
variant: "bordered",
},
};
export const LabelPlacement = LabelPlacementTemplate.bind({});
LabelPlacement.args = {
...defaultProps,
export const LabelPlacement = {
render: LabelPlacementTemplate,
args: {
...defaultProps,
},
};
export const Clearable = Template.bind({});
Clearable.args = {
...defaultProps,
variant: "bordered",
placeholder: "Enter your email",
defaultValue: "junior@nextui.org",
// eslint-disable-next-line no-console
onClear: () => console.log("input cleared"),
export const Clearable = {
render: Template,
args: {
...defaultProps,
variant: "bordered",
placeholder: "Enter your email",
defaultValue: "junior@nextui.org",
// eslint-disable-next-line no-console
onClear: () => console.log("input cleared"),
},
};
export const StartContent = StartContentTemplate.bind({});
StartContent.args = {
...defaultProps,
labelPlacement: "outside",
export const StartContent = {
render: StartContentTemplate,
args: {
...defaultProps,
labelPlacement: "outside",
},
};
export const EndContent = EndContentTemplate.bind({});
EndContent.args = {
...defaultProps,
variant: "bordered",
labelPlacement: "outside",
export const EndContent = {
render: EndContentTemplate,
args: {
...defaultProps,
variant: "bordered",
labelPlacement: "outside",
},
};
export const StartAndEndContent = StartAndEndContentTemplate.bind({});
StartAndEndContent.args = {
...defaultProps,
variant: "bordered",
labelPlacement: "outside",
export const StartAndEndContent = {
render: StartAndEndContentTemplate,
args: {
...defaultProps,
variant: "bordered",
labelPlacement: "outside",
},
};
export const WithErrorMessage = Template.bind({});
WithErrorMessage.args = {
...defaultProps,
errorMessage: "Please enter a valid email address",
export const WithErrorMessage = {
render: Template,
args: {
...defaultProps,
errorMessage: "Please enter a valid email address",
},
};
export const InvalidValidationState = Template.bind({});
InvalidValidationState.args = {
...defaultProps,
variant: "bordered",
defaultValue: "invalid@email.com",
validationState: "invalid",
placeholder: "Enter your email",
errorMessage: "Please enter a valid email address",
export const InvalidValidationState = {
render: Template,
args: {
...defaultProps,
variant: "bordered",
defaultValue: "invalid@email.com",
validationState: "invalid",
placeholder: "Enter your email",
errorMessage: "Please enter a valid email address",
},
};
export const RegexValidation = RegexValidationTemplate.bind({});
RegexValidation.args = {
...defaultProps,
variant: "faded",
export const RegexValidation = {
render: RegexValidationTemplate,
args: {
...defaultProps,
variant: "faded",
},
};
export const InputTypes = InputTypesTemplate.bind({});
InputTypes.args = {
...defaultProps,
export const InputTypes = {
render: InputTypesTemplate,
args: {
...defaultProps,
},
};
export const Controlled = ControlledTemplate.bind({});
Controlled.args = {
...defaultProps,
variant: "bordered",
export const Controlled = {
render: ControlledTemplate,
args: {
...defaultProps,
variant: "bordered",
},
};
export const CustomWithClassNames = CustomWithClassNamesTemplate.bind({});
CustomWithClassNames.args = {
...defaultProps,
export const CustomWithClassNames = {
render: CustomWithClassNamesTemplate,
args: {
...defaultProps,
},
};
export const CustomWithHooks = CustomWithHooksTemplate.bind({});
CustomWithHooks.args = {
...defaultProps,
label: "Search",
type: "search",
placeholder: "Type to search...",
startContent: (
<SearchIcon className="text-black/50 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
),
export const CustomWithHooks = {
render: CustomWithHooksTemplate,
args: {
...defaultProps,
label: "Search",
type: "search",
placeholder: "Type to search...",
startContent: (
<SearchIcon className="text-black/50 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
),
},
};

112
packages/components/input/stories/textarea.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {input} from "@nextui-org/theme";
import {Textarea, TextAreaProps} from "../src";
@ -11,32 +11,32 @@ export default {
variant: {
control: {
type: "select",
options: ["flat", "faded", "bordered", "underlined"],
},
options: ["flat", "faded", "bordered", "underlined"],
},
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
radius: {
control: {
type: "select",
options: ["none", "base", "sm", "md", "lg", "xl", "full"],
},
options: ["none", "base", "sm", "md", "lg", "xl", "full"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
labelPlacement: {
control: {
type: "select",
options: ["inside", "outside", "outside-left"],
},
options: ["inside", "outside", "outside-left"],
},
isDisabled: {
control: {
@ -51,7 +51,7 @@ export default {
</div>
),
],
} as ComponentMeta<typeof Textarea>;
} as Meta<typeof Textarea>;
const defaultProps = {
...input.defaultVariants,
@ -81,55 +81,79 @@ const MaxRowsTemplate = (args: TextAreaProps) => (
</div>
);
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
render: Template,
args: {
...defaultProps,
},
};
export const Required = Template.bind({});
Required.args = {
...defaultProps,
isRequired: true,
export const Required = {
render: Template,
args: {
...defaultProps,
isRequired: true,
},
};
export const Disabled = Template.bind({});
Disabled.args = {
...defaultProps,
defaultValue: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
variant: "faded",
isDisabled: true,
export const Disabled = {
render: Template,
args: {
...defaultProps,
defaultValue: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
variant: "faded",
isDisabled: true,
},
};
export const ReadOnly = Template.bind({});
ReadOnly.args = {
...defaultProps,
defaultValue: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
variant: "bordered",
isReadOnly: true,
export const ReadOnly = {
render: Template,
args: {
...defaultProps,
defaultValue: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
variant: "bordered",
isReadOnly: true,
},
};
export const MinRows = MinRowsTemplate.bind({});
MinRows.args = {
...defaultProps,
export const MinRows = {
render: MinRowsTemplate,
args: {
...defaultProps,
},
};
export const MaxRows = MaxRowsTemplate.bind({});
MaxRows.args = {
...defaultProps,
defaultValue:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec",
export const MaxRows = {
render: MaxRowsTemplate,
args: {
...defaultProps,
defaultValue:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec ultricies ultricies, nisl nisl aliquam nisl, eget tincidunt nunc nisl eget nisl. Nullam euismod, nisl nec",
},
};
export const WithErrorMessage = Template.bind({});
WithErrorMessage.args = {
...defaultProps,
errorMessage: "Please enter a valid description",
export const WithErrorMessage = {
render: Template,
args: {
...defaultProps,
errorMessage: "Please enter a valid description",
},
};
export const InvalidValidationState = Template.bind({});
InvalidValidationState.args = {
...defaultProps,
validationState: "invalid",
defaultValue: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
errorMessage: "Please enter a valid description",
export const InvalidValidationState = {
render: Template,
args: {
...defaultProps,
validationState: "invalid",
defaultValue: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
errorMessage: "Please enter a valid description",
},
};

60
packages/components/kbd/stories/kbd.stories.tsx
View File

@ -1,8 +1,7 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {kbd} from "@nextui-org/theme";
import {Kbd, KbdProps} from "../src";
import {Kbd} from "../src";
export default {
title: "Components/Kbd",
@ -11,41 +10,40 @@ export default {
keys: {
control: {
type: "select",
options: [
"command",
"shift",
"ctrl",
"option",
"enter",
"delete",
"escape",
"tab",
"capslock",
"up",
"right",
"down",
"left",
"pageup",
"pagedown",
"home",
"end",
"help",
"space",
],
},
options: [
"command",
"shift",
"ctrl",
"option",
"enter",
"delete",
"escape",
"tab",
"capslock",
"up",
"right",
"down",
"left",
"pageup",
"pagedown",
"home",
"end",
"help",
"space",
],
},
},
} as ComponentMeta<typeof Kbd>;
} as Meta<typeof Kbd>;
const defaultProps = {
...kbd.defaultVariants,
keys: ["command"],
};
const Template = (args: KbdProps) => <Kbd {...args} />;
export const Default = Template.bind({});
Default.args = {
...defaultProps,
children: "K",
export const Default = {
args: {
...defaultProps,
children: "K",
},
};

25
packages/components/link/stories/link.stories.tsx
View File

@ -1,6 +1,6 @@
import type {VariantProps} from "@nextui-org/theme";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import React from "react";
import {tv} from "@nextui-org/theme";
import {link} from "@nextui-org/theme";
@ -14,20 +14,20 @@ export default {
color: {
control: {
type: "select",
options: ["foreground", "primary", "secondary", "success", "warning", "danger"],
},
options: ["foreground", "primary", "secondary", "success", "warning", "danger"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
underline: {
control: {
type: "select",
options: ["none", "hover", "always", "active", "focus"],
},
options: ["none", "hover", "always", "active", "focus"],
},
isDisabled: {
control: {
@ -35,7 +35,7 @@ export default {
},
},
},
} as ComponentMeta<typeof Link>;
} as Meta<typeof Link>;
const children = `"First solve the problem. Then, write the code." - Jon Johnson.`;
@ -48,12 +48,15 @@ const defaultProps = {
const Template = (args: LinkProps) => <Link {...args} href="#" />;
export const Default = Template.bind({});
Default.args = {
...defaultProps,
isDisabled: false,
color: "foreground",
size: "md",
export const Default = {
render: Template,
args: {
...defaultProps,
isDisabled: false,
color: "foreground",
size: "md",
},
};
export const Underline = Template.bind({}) as any;

103
packages/components/modal/stories/modal.stories.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/no-autofocus */
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {modal} from "@nextui-org/theme";
import {Button} from "@nextui-org/button";
import {Input} from "@nextui-org/input";
@ -27,20 +27,20 @@ export default {
size: {
control: {
type: "select",
options: ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "full"],
},
options: ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "full"],
},
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg"],
},
options: ["none", "sm", "md", "lg"],
},
backdrop: {
control: {
type: "select",
options: ["transparent", "blur", "opaque"],
},
options: ["transparent", "blur", "opaque"],
},
disableAnimation: {
control: {
@ -70,7 +70,7 @@ export default {
</div>
),
],
} as ComponentMeta<typeof Modal>;
} as Meta<typeof Modal>;
const defaultProps = {
...modal.defaultVariants,
@ -205,54 +205,75 @@ const OpenChangeTemplate = (args: ModalProps) => {
);
};
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
render: Template,
args: {
...defaultProps,
},
};
export const DefaultOpen = Template.bind({});
DefaultOpen.args = {
...defaultProps,
defaultOpen: true,
export const DefaultOpen = {
render: Template,
args: {
...defaultProps,
defaultOpen: true,
},
};
export const OpenChange = OpenChangeTemplate.bind({});
OpenChange.args = {
...defaultProps,
scrollBehavior: "inside",
export const OpenChange = {
render: OpenChangeTemplate,
args: {
...defaultProps,
scrollBehavior: "inside",
},
};
export const InsideScroll = InsideScrollTemplate.bind({});
InsideScroll.args = {
...defaultProps,
scrollBehavior: "inside",
export const InsideScroll = {
render: InsideScrollTemplate,
args: {
...defaultProps,
scrollBehavior: "inside",
},
};
export const OutsideScroll = OutsideScrollTemplate.bind({});
OutsideScroll.args = {
...defaultProps,
export const OutsideScroll = {
render: OutsideScrollTemplate,
args: {
...defaultProps,
},
};
export const DisableAnimation = Template.bind({});
DisableAnimation.args = {
...defaultProps,
disableAnimation: true,
export const DisableAnimation = {
render: Template,
args: {
...defaultProps,
disableAnimation: true,
},
};
export const CustomMotion = Template.bind({});
CustomMotion.args = {
...defaultProps,
motionProps: {
variants: {
enter: {
opacity: 1,
y: 0,
duration: 0.3,
},
exit: {
y: 20,
opacity: 0,
duration: 0.3,
export const CustomMotion = {
render: Template,
args: {
...defaultProps,
motionProps: {
variants: {
enter: {
opacity: 1,
y: 0,
duration: 0.3,
},
exit: {
y: 20,
opacity: 0,
duration: 0.3,
},
},
},
},

79
packages/components/navbar/stories/navbar.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {navbar} from "@nextui-org/theme";
import {Link} from "@nextui-org/link";
import {Button} from "@nextui-org/button";
@ -36,14 +36,14 @@ export default {
position: {
control: {
type: "select",
options: ["static", "fixed"],
},
options: ["static", "fixed"],
},
maxWidth: {
control: {
type: "select",
options: ["sm", "md", "lg", "xl", "2xl", "full"],
},
options: ["sm", "md", "lg", "xl", "2xl", "full"],
},
isBlurred: {
control: {
@ -58,7 +58,7 @@ export default {
</div>
),
],
} as ComponentMeta<typeof Navbar>;
} as Meta<typeof Navbar>;
const defaultProps = {
...navbar.defaultVariants,
@ -556,41 +556,62 @@ const WithSearchInputTemplate = (args: NavbarProps) => {
);
};
export const Static = Template.bind({});
Static.args = {
...defaultProps,
position: "static",
export const Static = {
render: Template,
args: {
...defaultProps,
position: "static",
},
};
export const Sticky = Template.bind({});
Sticky.args = {
...defaultProps,
position: "sticky",
export const Sticky = {
render: Template,
args: {
...defaultProps,
position: "sticky",
},
};
export const HideOnScroll = Template.bind({});
HideOnScroll.args = {
...defaultProps,
position: "sticky",
shouldHideOnScroll: true,
export const HideOnScroll = {
render: Template,
args: {
...defaultProps,
position: "sticky",
shouldHideOnScroll: true,
},
};
export const WithMenu = WithMenuTemplate.bind({});
WithMenu.args = {
...defaultProps,
export const WithMenu = {
render: WithMenuTemplate,
args: {
...defaultProps,
},
};
export const WithDropdown = WithDropdownTemplate.bind({});
WithDropdown.args = {
...defaultProps,
export const WithDropdown = {
render: WithDropdownTemplate,
args: {
...defaultProps,
},
};
export const WithAvatarUser = WithAvatarUserTemplate.bind({});
WithAvatarUser.args = {
...defaultProps,
export const WithAvatarUser = {
render: WithAvatarUserTemplate,
args: {
...defaultProps,
},
};
export const WithSearchInput = WithSearchInputTemplate.bind({});
WithSearchInput.args = {
...defaultProps,
export const WithSearchInput = {
render: WithSearchInputTemplate,
args: {
...defaultProps,
},
};

88
packages/components/pagination/stories/pagination.stories.tsx
View File

@ -1,16 +1,10 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {button, pagination} from "@nextui-org/theme";
import {cn} from "@nextui-org/system";
import {ChevronIcon} from "@nextui-org/shared-icons";
import {
Pagination,
PaginationItemRenderProps,
PaginationItemType,
PaginationProps,
usePagination,
} from "../src";
import {Pagination, PaginationItemRenderProps, PaginationItemType, usePagination} from "../src";
export default {
title: "Components/Pagination",
@ -34,26 +28,26 @@ export default {
variant: {
control: {
type: "select",
options: ["flat", "bordered", "light", "faded"],
},
options: ["flat", "bordered", "light", "faded"],
},
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg", "full"],
},
options: ["none", "sm", "md", "lg", "full"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
showShadow: {
control: {
@ -66,7 +60,7 @@ export default {
},
},
},
} as ComponentMeta<typeof Pagination>;
} as Meta<typeof Pagination>;
const defaultProps = {
...pagination.defaultVariants,
@ -76,37 +70,40 @@ const defaultProps = {
initialPage: 1,
};
const Template = (args: PaginationProps) => <Pagination {...args} />;
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
args: {
...defaultProps,
},
};
export const WithControls = Template.bind({});
WithControls.args = {
...defaultProps,
showControls: true,
export const WithControls = {
args: {
...defaultProps,
showControls: true,
},
};
export const PaginationLoop = Template.bind({});
PaginationLoop.args = {
...defaultProps,
showControls: true,
loop: true,
export const PaginationLoop = {
args: {
...defaultProps,
showControls: true,
loop: true,
},
};
export const InitialPage = Template.bind({});
InitialPage.args = {
...defaultProps,
initialPage: 3,
export const InitialPage = {
args: {
...defaultProps,
initialPage: 3,
},
};
export const IsCompact = Template.bind({});
IsCompact.args = {
...defaultProps,
showControls: true,
isCompact: true,
export const IsCompact = {
args: {
...defaultProps,
showControls: true,
isCompact: true,
},
};
export const Controlled = () => {
@ -198,15 +195,16 @@ export const CustomItems = () => {
);
};
export const CustomWithClassNames = Template.bind({});
CustomWithClassNames.args = {
...defaultProps,
showShadow: true,
classNames: {
base: "gap-0 rounded border-2 border-default",
item: "w-8 h-8 text-sm rounded-none bg-transparent",
cursor:
"bg-gradient-to-b shadow-lg shadow-default from-default-500 to-default-800 dark:from-default-300 dark:to-default-100 text-white font-bold",
export const CustomWithClassNames = {
args: {
...defaultProps,
showShadow: true,
classNames: {
base: "gap-0 rounded border-2 border-default",
item: "w-8 h-8 text-sm rounded-none bg-transparent",
cursor:
"bg-gradient-to-b shadow-lg shadow-default from-default-500 to-default-800 dark:from-default-300 dark:to-default-100 text-white font-bold",
},
},
};

189
packages/components/popover/stories/popover.stories.tsx
View File

@ -1,6 +1,6 @@
/* eslint-disable jsx-a11y/no-autofocus */
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {popover, ButtonVariantProps} from "@nextui-org/theme";
import {Button} from "@nextui-org/button";
import {Input} from "@nextui-org/input";
@ -15,51 +15,51 @@ export default {
variant: {
control: {
type: "select",
options: ["solid", "bordered", "light", "flat", "faded", "shadow"],
},
options: ["solid", "bordered", "light", "flat", "faded", "shadow"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
color: {
control: {
type: "select",
options: ["default", "foreground", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "foreground", "primary", "secondary", "success", "warning", "danger"],
},
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg", "full"],
},
options: ["none", "sm", "md", "lg", "full"],
},
placement: {
control: {
type: "select",
options: [
"top",
"bottom",
"right",
"left",
"top-start",
"top-end",
"bottom-start",
"bottom-end",
"left-start",
"left-end",
"right-start",
"right-end",
],
},
options: [
"top",
"bottom",
"right",
"left",
"top-start",
"top-end",
"bottom-start",
"bottom-end",
"left-start",
"left-end",
"right-start",
"right-end",
],
},
backdrop: {
control: {
type: "select",
options: ["transparent", "blur", "opaque"],
},
options: ["transparent", "blur", "opaque"],
},
offset: {
control: {
@ -94,7 +94,7 @@ export default {
</div>
),
],
} as ComponentMeta<typeof Popover>;
} as Meta<typeof Popover>;
const defaultProps = {
...popover.defaultVariants,
@ -382,83 +382,116 @@ const WithBackdropTemplate = (args: PopoverProps) => (
</Card>
);
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
render: Template,
args: {
...defaultProps,
},
};
export const DisableAnimation = Template.bind({});
DisableAnimation.args = {
...defaultProps,
disableAnimation: true,
export const DisableAnimation = {
render: Template,
args: {
...defaultProps,
disableAnimation: true,
},
};
export const WithoutScaleTrigger = Template.bind({});
WithoutScaleTrigger.args = {
...defaultProps,
triggerScaleOnOpen: false,
export const WithoutScaleTrigger = {
render: Template,
args: {
...defaultProps,
triggerScaleOnOpen: false,
},
};
export const WithArrow = Template.bind({});
WithArrow.args = {
...defaultProps,
showArrow: true,
export const WithArrow = {
render: Template,
args: {
...defaultProps,
showArrow: true,
},
};
export const OpenChange = OpenChangeTemplate.bind({});
OpenChange.args = {
...defaultProps,
export const OpenChange = {
render: OpenChangeTemplate,
args: {
...defaultProps,
},
};
export const Placements = PlacementsTemplate.bind({});
Placements.args = {
...defaultProps,
color: "secondary",
export const Placements = {
render: PlacementsTemplate,
args: {
...defaultProps,
color: "secondary",
},
};
export const WithOffset = OffsetTemplate.bind({});
WithOffset.args = {
...defaultProps,
color: "warning",
export const WithOffset = {
render: OffsetTemplate,
args: {
...defaultProps,
color: "warning",
},
};
export const WithTitleProps = WithTitlePropsTemplate.bind({});
WithTitleProps.args = {
...defaultProps,
export const WithTitleProps = {
render: WithTitlePropsTemplate,
args: {
...defaultProps,
},
};
export const WithForm = WithFormTemplate.bind({});
WithForm.args = {
...defaultProps,
showArrow: true,
offset: 10,
placement: "top",
className: "w-[280px] bg-content1",
export const WithForm = {
render: WithFormTemplate,
args: {
...defaultProps,
showArrow: true,
offset: 10,
placement: "top",
className: "w-[280px] bg-content1",
},
};
export const WithBackdrop = WithBackdropTemplate.bind({});
WithBackdrop.args = {
...defaultProps,
showArrow: true,
offset: 10,
placement: "left",
backdrop: "blur",
className: "bg-content1",
export const WithBackdrop = {
render: WithBackdropTemplate,
args: {
...defaultProps,
showArrow: true,
offset: 10,
placement: "left",
backdrop: "blur",
className: "bg-content1",
},
};
export const CustomMotion = Template.bind({});
CustomMotion.args = {
...defaultProps,
placement: "bottom",
motionProps: {
variants: {
enter: {
opacity: 1,
duration: 0.2,
},
exit: {
opacity: 0,
duration: 0.1,
export const CustomMotion = {
render: Template,
args: {
...defaultProps,
placement: "bottom",
motionProps: {
variants: {
enter: {
opacity: 1,
duration: 0.2,
},
exit: {
opacity: 0,
duration: 0.1,
},
},
},
},

81
packages/components/progress/stories/circular-progress.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {circularProgress} from "@nextui-org/theme";
import {Card, CardBody, CardFooter} from "@nextui-org/card";
import {Chip} from "@nextui-org/chip";
@ -13,14 +13,14 @@ export default {
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
isDisabled: {
control: {
@ -28,14 +28,12 @@ export default {
},
},
},
} as ComponentMeta<typeof CircularProgress>;
} as Meta<typeof CircularProgress>;
const defaultProps = {
...circularProgress.defaultVariants,
};
const Template = (args: CircularProgressProps) => <CircularProgress {...args} />;
const IntervalTemplate = (args: CircularProgressProps) => {
const [value, setValue] = React.useState(0);
@ -78,43 +76,52 @@ const CustomClassnamesTemplate = (args: CircularProgressProps) => (
</Card>
);
export const Default = Template.bind({});
Default.args = {
...defaultProps,
"aria-label": "Loading...",
export const Default = {
args: {
...defaultProps,
"aria-label": "Loading...",
},
};
export const WithLabel = Template.bind({});
WithLabel.args = {
...defaultProps,
label: "Loading...",
export const WithLabel = {
args: {
...defaultProps,
label: "Loading...",
},
};
export const WithValueLabel = IntervalTemplate.bind({});
WithValueLabel.args = {
...defaultProps,
size: "lg",
value: 70,
color: "secondary",
showValueLabel: true,
export const WithValueLabel = {
render: IntervalTemplate,
args: {
...defaultProps,
size: "lg",
value: 70,
color: "secondary",
showValueLabel: true,
},
};
export const WithValueFormatting = Template.bind({});
WithValueFormatting.args = {
...defaultProps,
label: "Loading...",
size: "xl",
value: 70,
color: "warning",
showValueLabel: true,
formatOptions: {style: "unit", unit: "kilometer"},
export const WithValueFormatting = {
args: {
...defaultProps,
label: "Loading...",
size: "xl",
value: 70,
color: "warning",
showValueLabel: true,
formatOptions: {style: "unit", unit: "kilometer"},
},
};
export const CustomClassnames = CustomClassnamesTemplate.bind({});
CustomClassnames.args = {
...defaultProps,
size: "xl",
strokeWidth: 4,
value: 70,
showValueLabel: true,
export const CustomClassnames = {
render: CustomClassnamesTemplate,
args: {
...defaultProps,
size: "xl",
strokeWidth: 4,
value: 70,
showValueLabel: true,
},
};

88
packages/components/progress/stories/progress.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {progress} from "@nextui-org/theme";
import {Progress, ProgressProps} from "../src";
@ -11,20 +11,20 @@ export default {
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg", "full"],
},
options: ["none", "sm", "md", "lg", "full"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
isDisabled: {
control: {
@ -32,7 +32,7 @@ export default {
},
},
},
} as ComponentMeta<typeof Progress>;
} as Meta<typeof Progress>;
const defaultProps = {
...progress.defaultVariants,
@ -63,44 +63,62 @@ const IntervalTemplate = (args: ProgressProps) => {
);
};
export const Default = Template.bind({});
Default.args = {
...defaultProps,
"aria-label": "Loading...",
export const Default = {
render: Template,
args: {
...defaultProps,
"aria-label": "Loading...",
},
};
export const WithLabel = Template.bind({});
WithLabel.args = {
...defaultProps,
label: "Loading...",
export const WithLabel = {
render: Template,
args: {
...defaultProps,
label: "Loading...",
},
};
export const WithValueLabel = IntervalTemplate.bind({});
WithValueLabel.args = {
...defaultProps,
label: "Downloading...",
color: "success",
showValueLabel: true,
export const WithValueLabel = {
render: IntervalTemplate,
args: {
...defaultProps,
label: "Downloading...",
color: "success",
showValueLabel: true,
},
};
export const WithValueFormatting = Template.bind({});
WithValueFormatting.args = {
...defaultProps,
label: "Loading...",
showValueLabel: true,
formatOptions: {style: "currency", currency: "ARS"},
export const WithValueFormatting = {
render: Template,
args: {
...defaultProps,
label: "Loading...",
showValueLabel: true,
formatOptions: {style: "currency", currency: "ARS"},
},
};
export const Indeterminate = Template.bind({});
Indeterminate.args = {
...defaultProps,
size: "xs",
radius: "none",
isIndeterminate: true,
export const Indeterminate = {
render: Template,
args: {
...defaultProps,
size: "xs",
radius: "none",
isIndeterminate: true,
},
};
export const Striped = Template.bind({});
Striped.args = {
...defaultProps,
isStriped: true,
export const Striped = {
render: Template,
args: {
...defaultProps,
isStriped: true,
},
};

116
packages/components/radio/stories/radio.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {VisuallyHidden} from "@react-aria/visually-hidden";
import {radio, button} from "@nextui-org/theme";
import {clsx} from "@nextui-org/shared-utils";
@ -21,14 +21,14 @@ export default {
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
isDisabled: {
control: {
@ -36,7 +36,7 @@ export default {
},
},
},
} as ComponentMeta<typeof RadioGroup>;
} as Meta<typeof RadioGroup>;
const defaultProps = {
...radio.defaultVariants,
@ -127,63 +127,93 @@ const ControlledTemplate = (args: RadioGroupProps) => {
);
};
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
render: Template,
args: {
...defaultProps,
},
};
export const IsDisabled = Template.bind({});
IsDisabled.args = {
...defaultProps,
isDisabled: true,
export const IsDisabled = {
render: Template,
args: {
...defaultProps,
isDisabled: true,
},
};
export const DefaultChecked = Template.bind({});
DefaultChecked.args = {
...defaultProps,
defaultValue: "C",
export const DefaultChecked = {
render: Template,
args: {
...defaultProps,
defaultValue: "C",
},
};
export const IsRequired = Template.bind({});
IsRequired.args = {
...defaultProps,
isRequired: true,
export const IsRequired = {
render: Template,
args: {
...defaultProps,
isRequired: true,
},
};
export const WithDescription = Template.bind({});
WithDescription.args = {
...defaultProps,
description: "Please select an option",
export const WithDescription = {
render: Template,
args: {
...defaultProps,
description: "Please select an option",
},
};
export const Invalid = Template.bind({});
Invalid.args = {
...defaultProps,
validationState: "invalid",
export const Invalid = {
render: Template,
args: {
...defaultProps,
validationState: "invalid",
},
};
export const WithErrorMessage = Template.bind({});
WithErrorMessage.args = {
...defaultProps,
validationState: "invalid",
errorMessage: "The selected option is invalid",
export const WithErrorMessage = {
render: Template,
args: {
...defaultProps,
validationState: "invalid",
errorMessage: "The selected option is invalid",
},
};
export const Row = Template.bind({});
Row.args = {
...defaultProps,
orientation: "horizontal",
export const Row = {
render: Template,
args: {
...defaultProps,
orientation: "horizontal",
},
};
export const DisableAnimation = Template.bind({});
DisableAnimation.args = {
...defaultProps,
disableAnimation: true,
export const DisableAnimation = {
render: Template,
args: {
...defaultProps,
disableAnimation: true,
},
};
export const Controlled = ControlledTemplate.bind({});
Controlled.args = {
...defaultProps,
export const Controlled = {
render: ControlledTemplate,
args: {
...defaultProps,
},
};
const CustomRadio = (props: RadioProps) => {

17
packages/components/skeleton/stories/skeleton.stories.tsx
View File

@ -1,8 +1,8 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {skeleton} from "@nextui-org/theme";
import {Skeleton, SkeletonProps} from "../src";
import {Skeleton} from "../src";
export default {
title: "Components/Skeleton",
@ -22,7 +22,7 @@ export default {
},
},
},
} as ComponentMeta<typeof Skeleton>;
} as Meta<typeof Skeleton>;
const defaultProps = {
...skeleton.defaultVariants,
@ -30,10 +30,9 @@ const defaultProps = {
children: <div className="w-[200px] h-[100px]">NextUI</div>,
};
const Template = (args: SkeletonProps) => <Skeleton {...args} />;
export const Default = Template.bind({});
Default.args = {
...defaultProps,
className: "rounded-xl",
export const Default = {
args: {
...defaultProps,
className: "rounded-xl",
},
};

40
packages/components/snippet/stories/snippet.stories.tsx
View File

@ -1,8 +1,8 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {snippet} from "@nextui-org/theme";
import {Snippet, SnippetProps} from "../src";
import {Snippet} from "../src";
export default {
title: "Components/Snippet",
@ -11,26 +11,26 @@ export default {
variant: {
control: {
type: "select",
options: ["flat", "solid", "bordered", "shadow"],
},
options: ["flat", "solid", "bordered", "shadow"],
},
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
radius: {
control: {
type: "select",
options: ["none", "base", "sm", "md", "lg", "xl", "full"],
},
options: ["none", "base", "sm", "md", "lg", "xl", "full"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
fullWidth: {
control: {
@ -70,7 +70,7 @@ export default {
</div>
),
],
} as ComponentMeta<typeof Snippet>;
} as Meta<typeof Snippet>;
const defaultProps = {
children: "npm install @nextui-org/react",
@ -82,19 +82,19 @@ const defaultProps = {
...snippet.defaultVariants,
};
const Template = (args: SnippetProps) => <Snippet {...args} />;
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
args: {
...defaultProps,
},
};
export const MultiLine = Template.bind({});
MultiLine.args = {
...defaultProps,
children: [
"npm install @nextui-org/react",
"yarn add @nextui-org/react",
"pnpm add @nextui-org/react",
],
export const MultiLine = {
args: {
...defaultProps,
children: [
"npm install @nextui-org/react",
"yarn add @nextui-org/react",
"pnpm add @nextui-org/react",
],
},
};

28
packages/components/spacer/stories/spacer.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {spacer} from "@nextui-org/theme";
import {Spacer, SpacerProps} from "../src";
@ -31,7 +31,7 @@ export default {
</div>
),
],
} as ComponentMeta<typeof Spacer>;
} as Meta<typeof Spacer>;
const defaultProps = {
...spacer.defaultVariants,
@ -61,15 +61,21 @@ const HorizontalTemplate = (args: SpacerProps) => (
</div>
);
export const Vertical = VerticalTemplate.bind({});
Vertical.args = {
...defaultProps,
y: 1,
export const Vertical = {
render: VerticalTemplate,
args: {
...defaultProps,
y: 1,
},
};
export const Horizontal = HorizontalTemplate.bind({});
Horizontal.args = {
...defaultProps,
x: 1,
isInline: true,
export const Horizontal = {
render: HorizontalTemplate,
args: {
...defaultProps,
x: 1,
isInline: true,
},
};

30
packages/components/spinner/stories/spinner.stories.tsx
View File

@ -1,8 +1,8 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {spinner} from "@nextui-org/theme";
import {Spinner, SpinnerProps} from "../src";
import {Spinner} from "../src";
export default {
title: "Components/Spinner",
@ -11,20 +11,20 @@ export default {
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
labelColor: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
},
decorators: [
@ -34,21 +34,21 @@ export default {
</div>
),
],
} as ComponentMeta<typeof Spinner>;
} as Meta<typeof Spinner>;
const defaultProps = {
...spinner.defaultVariants,
};
const Template = (args: SpinnerProps) => <Spinner {...args} />;
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
args: {
...defaultProps,
},
};
export const WithLabel = Template.bind({});
WithLabel.args = {
...defaultProps,
label: "Loading...",
export const WithLabel = {
args: {
...defaultProps,
label: "Loading...",
},
};

105
packages/components/switch/stories/switch.stories.tsx
View File

@ -1,6 +1,6 @@
/* eslint-disable react/display-name */
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {toggle} from "@nextui-org/theme";
import {VisuallyHidden} from "@react-aria/visually-hidden";
import {SunFilledIcon, MoonFilledIcon} from "@nextui-org/shared-icons";
@ -15,14 +15,14 @@ export default {
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
isDisabled: {
control: {
@ -35,14 +35,12 @@ export default {
},
},
},
} as ComponentMeta<typeof Switch>;
} as Meta<typeof Switch>;
const defaultProps = {
...toggle.defaultVariants,
};
const Template = (args: SwitchProps) => <Switch {...args} />;
const WithIconsTemplate = (args: SwitchProps) => {
const [isSelected, setIsSelected] = React.useState<boolean>(true);
@ -133,59 +131,76 @@ const CustomWithHooksTemplate = (args: SwitchProps) => {
);
};
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
args: {
...defaultProps,
},
};
export const IsReadOnly = Template.bind({});
IsReadOnly.args = {
...defaultProps,
isReadOnly: true,
defaultSelected: true,
export const IsReadOnly = {
args: {
...defaultProps,
isReadOnly: true,
defaultSelected: true,
},
};
export const WithLabel = Template.bind({});
WithLabel.args = {
...defaultProps,
children: "Bluetooth",
export const WithLabel = {
args: {
...defaultProps,
children: "Bluetooth",
},
};
export const DisableAnimation = Template.bind({});
DisableAnimation.args = {
...defaultProps,
disableAnimation: true,
export const DisableAnimation = {
args: {
...defaultProps,
disableAnimation: true,
},
};
export const WiththumbIcon = Template.bind({});
WiththumbIcon.args = {
...defaultProps,
size: "xl",
thumbIcon: (props: SwitchThumbIconProps) =>
props.isSelected ? (
<SunFilledIcon className={props.className} />
) : (
<MoonFilledIcon className={props.className} />
),
export const WiththumbIcon = {
args: {
...defaultProps,
size: "xl",
thumbIcon: (props: SwitchThumbIconProps) =>
props.isSelected ? (
<SunFilledIcon className={props.className} />
) : (
<MoonFilledIcon className={props.className} />
),
},
};
export const WithIcons = WithIconsTemplate.bind({});
WithIcons.args = {
...defaultProps,
size: "xl",
export const WithIcons = {
render: WithIconsTemplate,
args: {
...defaultProps,
size: "xl",
},
};
export const Controlled = ControlledTemplate.bind({});
Controlled.args = {
...defaultProps,
export const Controlled = {
render: ControlledTemplate,
args: {
...defaultProps,
},
};
export const CustomWithClassNames = CustomWithClassNamesTemplate.bind({});
CustomWithClassNames.args = {
...defaultProps,
export const CustomWithClassNames = {
render: CustomWithClassNamesTemplate,
args: {
...defaultProps,
},
};
export const CustomWithHooks = CustomWithHooksTemplate.bind({});
CustomWithHooks.args = {
...defaultProps,
export const CustomWithHooks = {
render: CustomWithHooksTemplate,
args: {
...defaultProps,
},
};

327
packages/components/table/stories/table.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {table} from "@nextui-org/theme";
import {User} from "@nextui-org/user";
import {Chip, ChipProps} from "@nextui-org/chip";
@ -29,32 +29,32 @@ export default {
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
layout: {
control: {
type: "select",
options: ["auto", "fixed"],
},
options: ["auto", "fixed"],
},
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg", "full"],
},
options: ["none", "sm", "md", "lg", "full"],
},
shadow: {
control: {
type: "select",
options: ["none", "sm", "md", "lg"],
},
options: ["none", "sm", "md", "lg"],
},
selectionMode: {
control: {
type: "select",
options: ["none", "single", "multiple"],
},
options: ["none", "single", "multiple"],
},
isStriped: {
control: {
@ -62,7 +62,7 @@ export default {
},
},
},
} as ComponentMeta<typeof Table>;
} as Meta<typeof Table>;
const defaultProps = {
...table.defaultVariants,
@ -884,136 +884,193 @@ const InfinitePaginationTemplate = (args: TableProps) => {
);
};
export const Static = StaticTemplate.bind({});
Static.args = {
...defaultProps,
};
export const Static = {
render: StaticTemplate,
export const Dynamic = DynamicTemplate.bind({});
Dynamic.args = {
...defaultProps,
};
export const EmptyState = EmptyTemplate.bind({});
EmptyState.args = {
...defaultProps,
};
export const NoHeader = StaticTemplate.bind({});
NoHeader.args = {
...defaultProps,
hideHeader: true,
};
export const CustomCells = CustomCellTemplate.bind({});
CustomCells.args = {
...defaultProps,
className: "max-w-3xl",
};
export const Striped = StaticTemplate.bind({});
Striped.args = {
...defaultProps,
isStriped: true,
};
export const RemoveWrapper = StaticTemplate.bind({});
RemoveWrapper.args = {
...defaultProps,
classNames: {
table: "max-w-lg",
},
removeWrapper: true,
};
export const SingleSelection = StaticTemplate.bind({});
SingleSelection.args = {
...defaultProps,
selectionMode: "single",
};
export const MultipleSelection = StaticTemplate.bind({});
MultipleSelection.args = {
...defaultProps,
selectionMode: "multiple",
color: "secondary",
};
export const DisabledKeys = StaticTemplate.bind({});
DisabledKeys.args = {
...defaultProps,
selectionMode: "multiple",
disabledKeys: ["2"],
color: "warning",
};
export const DisallowEmptySelection = StaticTemplate.bind({});
DisallowEmptySelection.args = {
...defaultProps,
disallowEmptySelection: true,
color: "primary",
defaultSelectedKeys: ["2"],
selectionMode: "multiple",
};
export const Sortable = SortableTemplate.bind({});
Sortable.args = {
...defaultProps,
};
export const LoadMore = LoadMoreTemplate.bind({});
LoadMore.args = {
...defaultProps,
className: "max-w-3xl max-h-auto",
};
export const Paginated = PaginatedTemplate.bind({});
Paginated.args = {
...defaultProps,
className: "max-w-lg min-h-[292px]",
};
export const AsyncPaginated = AsyncPaginatedTemplate.bind({});
AsyncPaginated.args = {
...defaultProps,
className: "max-w-3xl max-h-auto min-h-[400px]",
};
export const InfinityPagination = InfinitePaginationTemplate.bind({});
InfinityPagination.args = {
...defaultProps,
className: "max-w-3xl max-h-[440px] min-h-[400px] overflow-auto",
};
export const HeaderSticky = InfinitePaginationTemplate.bind({});
HeaderSticky.args = {
...defaultProps,
layout: "fixed",
isHeaderSticky: true,
className: "max-w-3xl max-h-[440px] min-h-[400px] overflow-auto",
};
export const CustomWithClassNames = CustomCellWithClassnamesTemplate.bind({});
CustomWithClassNames.args = {
...defaultProps,
classNames: {
base: ["max-w-3xl", "bg-gradient-to-br", "from-purple-500", "to-indigo-900/90", "shadow-xl"],
th: ["bg-transparent", "text-white/70", "border-b", "border-white/10"],
td: [
"py-4",
"text-sm",
"text-white/90",
"border-b",
"border-white/10",
"group-data-[last=true]:border-b-0",
],
args: {
...defaultProps,
},
};
export const DisableAnimation = StaticTemplate.bind({});
DisableAnimation.args = {
...defaultProps,
selectionMode: "multiple",
color: "secondary",
disableAnimation: true,
export const Dynamic = {
render: DynamicTemplate,
args: {
...defaultProps,
},
};
export const EmptyState = {
render: EmptyTemplate,
args: {
...defaultProps,
},
};
export const NoHeader = {
render: StaticTemplate,
args: {
...defaultProps,
hideHeader: true,
},
};
export const CustomCells = {
render: CustomCellTemplate,
args: {
...defaultProps,
className: "max-w-3xl",
},
};
export const Striped = {
render: StaticTemplate,
args: {
...defaultProps,
isStriped: true,
},
};
export const RemoveWrapper = {
render: StaticTemplate,
args: {
...defaultProps,
classNames: {
table: "max-w-lg",
},
removeWrapper: true,
},
};
export const SingleSelection = {
render: StaticTemplate,
args: {
...defaultProps,
selectionMode: "single",
},
};
export const MultipleSelection = {
render: StaticTemplate,
args: {
...defaultProps,
selectionMode: "multiple",
color: "secondary",
},
};
export const DisabledKeys = {
render: StaticTemplate,
args: {
...defaultProps,
selectionMode: "multiple",
disabledKeys: ["2"],
color: "warning",
},
};
export const DisallowEmptySelection = {
render: StaticTemplate,
args: {
...defaultProps,
disallowEmptySelection: true,
color: "primary",
defaultSelectedKeys: ["2"],
selectionMode: "multiple",
},
};
export const Sortable = {
render: SortableTemplate,
args: {
...defaultProps,
},
};
export const LoadMore = {
render: LoadMoreTemplate,
args: {
...defaultProps,
className: "max-w-3xl max-h-auto",
},
};
export const Paginated = {
render: PaginatedTemplate,
args: {
...defaultProps,
className: "max-w-lg min-h-[292px]",
},
};
export const AsyncPaginated = {
render: AsyncPaginatedTemplate,
args: {
...defaultProps,
className: "max-w-3xl max-h-auto min-h-[400px]",
},
};
export const InfinityPagination = {
render: InfinitePaginationTemplate,
args: {
...defaultProps,
className: "max-w-3xl max-h-[440px] min-h-[400px] overflow-auto",
},
};
export const HeaderSticky = {
render: InfinitePaginationTemplate,
args: {
...defaultProps,
layout: "fixed",
isHeaderSticky: true,
className: "max-w-3xl max-h-[440px] min-h-[400px] overflow-auto",
},
};
export const CustomWithClassNames = {
render: CustomCellWithClassnamesTemplate,
args: {
...defaultProps,
classNames: {
base: ["max-w-3xl", "bg-gradient-to-br", "from-purple-500", "to-indigo-900/90", "shadow-xl"],
th: ["bg-transparent", "text-white/70", "border-b", "border-white/10"],
td: [
"py-4",
"text-sm",
"text-white/90",
"border-b",
"border-white/10",
"group-data-[last=true]:border-b-0",
],
},
},
};
export const DisableAnimation = {
render: StaticTemplate,
args: {
...defaultProps,
selectionMode: "multiple",
color: "secondary",
disableAnimation: true,
},
};

105
packages/components/tabs/stories/tabs.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {button, link, tabs} from "@nextui-org/theme";
import Lorem from "react-lorem-component";
import {Input} from "@nextui-org/input";
@ -23,26 +23,26 @@ export default {
variant: {
control: {
type: "select",
options: ["solid", "underlined", "bordered", "light"],
},
options: ["solid", "underlined", "bordered", "light"],
},
color: {
control: {
type: "select",
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "primary", "secondary", "success", "warning", "danger"],
},
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg", "full"],
},
options: ["none", "sm", "md", "lg", "full"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
isDisabled: {
control: {
@ -55,7 +55,7 @@ export default {
},
},
},
} as ComponentMeta<typeof Tabs>;
} as Meta<typeof Tabs>;
const defaultProps = {
...tabs.defaultVariants,
@ -261,53 +261,80 @@ const WithFormTemplate = (args: TabsProps) => {
);
};
export const Static = StaticTemplate.bind({});
Static.args = {
...defaultProps,
export const Static = {
render: StaticTemplate,
args: {
...defaultProps,
},
};
export const Dynamic = DynamicTemplate.bind({});
Dynamic.args = {
...defaultProps,
export const Dynamic = {
render: DynamicTemplate,
args: {
...defaultProps,
},
};
export const Controlled = ControlledTemplate.bind({});
Controlled.args = {
...defaultProps,
export const Controlled = {
render: ControlledTemplate,
args: {
...defaultProps,
},
};
export const WithIcons = WithIconsTemplate.bind({});
WithIcons.args = {
...defaultProps,
export const WithIcons = {
render: WithIconsTemplate,
args: {
...defaultProps,
},
};
export const WithForm = WithFormTemplate.bind({});
WithForm.args = {
...defaultProps,
fullWidth: true,
variant: "underlined",
export const WithForm = {
render: WithFormTemplate,
args: {
...defaultProps,
fullWidth: true,
variant: "underlined",
},
};
export const ManualKeyboardActivation = StaticTemplate.bind({});
ManualKeyboardActivation.args = {
...defaultProps,
keyboardActivation: "manual",
export const ManualKeyboardActivation = {
render: StaticTemplate,
args: {
...defaultProps,
keyboardActivation: "manual",
},
};
export const DisabledItems = StaticTemplate.bind({});
DisabledItems.args = {
...defaultProps,
disabledKeys: ["ny", "arts"],
export const DisabledItems = {
render: StaticTemplate,
args: {
...defaultProps,
disabledKeys: ["ny", "arts"],
},
};
export const Disabled = StaticTemplate.bind({});
Disabled.args = {
...defaultProps,
isDisabled: true,
export const Disabled = {
render: StaticTemplate,
args: {
...defaultProps,
isDisabled: true,
},
};
export const DisableAnimation = StaticTemplate.bind({});
DisableAnimation.args = {
...defaultProps,
disableAnimation: true,
export const DisableAnimation = {
render: StaticTemplate,
args: {
...defaultProps,
disableAnimation: true,
},
};

216
packages/components/tooltip/stories/tooltip.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {popover} from "@nextui-org/theme";
import {Button} from "@nextui-org/button";
@ -12,45 +12,45 @@ export default {
variant: {
control: {
type: "select",
options: ["solid", "bordered", "light", "flat", "faded", "shadow"],
},
options: ["solid", "bordered", "light", "flat", "faded", "shadow"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
options: ["sm", "md", "lg"],
},
color: {
control: {
type: "select",
options: ["default", "foreground", "primary", "secondary", "success", "warning", "danger"],
},
options: ["default", "foreground", "primary", "secondary", "success", "warning", "danger"],
},
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg", "full"],
},
options: ["none", "sm", "md", "lg", "full"],
},
placement: {
control: {
type: "select",
options: [
"top",
"bottom",
"right",
"left",
"top-start",
"top-end",
"bottom-start",
"bottom-end",
"left-start",
"left-end",
"right-start",
"right-end",
],
},
options: [
"top",
"bottom",
"right",
"left",
"top-start",
"top-end",
"bottom-start",
"bottom-end",
"left-start",
"left-end",
"right-start",
"right-end",
],
},
delay: {
control: {
@ -90,7 +90,7 @@ export default {
</div>
),
],
} as ComponentMeta<typeof Tooltip>;
} as Meta<typeof Tooltip>;
const defaultProps = {
...popover.defaultVariants,
@ -104,8 +104,6 @@ const defaultProps = {
children: <Button>Hover me</Button>,
};
const Template = (args: TooltipProps) => <Tooltip {...args} />;
const DelayTemplate = (args: TooltipProps) => (
<div className="flex gap-2">
<Tooltip {...args} content="Tooltip 1" delay={1000}>
@ -267,109 +265,135 @@ const ControlledTemplate = (args: TooltipProps) => {
);
};
export const Default = Template.bind({});
Default.args = {
...defaultProps,
export const Default = {
args: {
...defaultProps,
},
};
export const DisableAnimation = Template.bind({});
DisableAnimation.args = {
...defaultProps,
disableAnimation: true,
export const DisableAnimation = {
args: {
...defaultProps,
disableAnimation: true,
},
};
export const WithArrow = Template.bind({});
WithArrow.args = {
...defaultProps,
showArrow: true,
export const WithArrow = {
args: {
...defaultProps,
showArrow: true,
},
};
export const OpenChange = OpenChangeTemplate.bind({});
OpenChange.args = {
...defaultProps,
export const OpenChange = {
render: OpenChangeTemplate,
args: {
...defaultProps,
},
};
export const Placements = PlacementsTemplate.bind({});
Placements.args = {
...defaultProps,
color: "primary",
export const Placements = {
render: PlacementsTemplate,
args: {
...defaultProps,
color: "primary",
},
};
export const WithOffset = OffsetTemplate.bind({});
WithOffset.args = {
...defaultProps,
color: "secondary",
export const WithOffset = {
render: OffsetTemplate,
args: {
...defaultProps,
color: "secondary",
},
};
export const withDelay = DelayTemplate.bind({});
withDelay.args = {
...defaultProps,
export const withDelay = {
render: DelayTemplate,
args: {
...defaultProps,
},
};
export const CustomContent = Template.bind({});
CustomContent.args = {
...defaultProps,
shouldCloseOnInteractOutside: false,
content: (
<div className="px-1 py-2">
<div className="text-sm font-bold">Custom Content</div>
<div className="text-xs">This is a custom tooltip content</div>
</div>
),
export const CustomContent = {
args: {
...defaultProps,
shouldCloseOnInteractOutside: false,
content: (
<div className="px-1 py-2">
<div className="text-sm font-bold">Custom Content</div>
<div className="text-xs">This is a custom tooltip content</div>
</div>
),
},
};
export const CustomMotion = Template.bind({});
CustomMotion.args = {
...defaultProps,
motionProps: {
variants: {
exit: {
opacity: 0,
transition: {
opacity: {duration: 0.1, easings: "easeInOut"},
export const CustomMotion = {
args: {
...defaultProps,
motionProps: {
variants: {
exit: {
opacity: 0,
transition: {
opacity: {duration: 0.1, easings: "easeInOut"},
},
},
},
enter: {
opacity: 1,
transition: {
opacity: {easings: "easeOut", duration: 0.15},
enter: {
opacity: 1,
transition: {
opacity: {easings: "easeOut", duration: 0.15},
},
},
},
},
},
};
export const Multiple = MultipleTemplate.bind({});
Multiple.args = {
...defaultProps,
export const Multiple = {
render: MultipleTemplate,
args: {
...defaultProps,
},
};
export const Controlled = ControlledTemplate.bind({});
Controlled.args = {
...defaultProps,
export const Controlled = {
render: ControlledTemplate,
args: {
...defaultProps,
},
};
export const DefaultOpen = Template.bind({});
DefaultOpen.args = {
...defaultProps,
defaultOpen: true,
export const DefaultOpen = {
args: {
...defaultProps,
defaultOpen: true,
},
};
export const AlwaysOpen = Template.bind({});
AlwaysOpen.args = {
...defaultProps,
isOpen: true,
showArrow: true,
content: (
<div className="px-1 py-2">
<div className="text-sm font-bold">Custom Content</div>
<div className="text-xs">This is a custom tooltip content</div>
</div>
),
export const AlwaysOpen = {
args: {
...defaultProps,
isOpen: true,
showArrow: true,
content: (
<div className="px-1 py-2">
<div className="text-sm font-bold">Custom Content</div>
<div className="text-xs">This is a custom tooltip content</div>
</div>
),
},
};
export const Disabled = Template.bind({});
Disabled.args = {
...defaultProps,
isDisabled: true,
export const Disabled = {
args: {
...defaultProps,
isDisabled: true,
},
};

97
packages/components/user/stories/user.stories.tsx
View File

@ -1,66 +1,69 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {Link} from "@nextui-org/link";
import {User, UserProps} from "../src";
import {User} from "../src";
export default {
title: "Components/User",
component: User,
} as ComponentMeta<typeof User>;
} as Meta<typeof User>;
const url = "https://avatars.githubusercontent.com/u/30373425?v=4";
const Template = (args: UserProps) => <User {...args} />;
export const Default = Template.bind({});
Default.args = {
name: "Junior Garcia",
avatarProps: {
src: url,
},
};
export const isFocusable = Template.bind({});
isFocusable.args = {
name: "Junior Garcia",
isFocusable: true,
avatarProps: {
src: url,
},
};
export const WithDefaultAvatar = Template.bind({});
WithDefaultAvatar.args = {
name: "Junior Garcia",
avatarProps: {
export const Default = {
args: {
name: "Junior Garcia",
getInitials: (name) =>
name
.split(" ")
.map((n) => n[0])
.join(""),
avatarProps: {
src: url,
},
},
};
export const WithDescription = Template.bind({});
WithDescription.args = {
name: "Junior Garcia",
description: "Software Engineer",
avatarProps: {
src: url,
export const isFocusable = {
args: {
name: "Junior Garcia",
isFocusable: true,
avatarProps: {
src: url,
},
},
};
export const WithLinkDescription = Template.bind({});
WithLinkDescription.args = {
name: "Junior Garcia",
description: (
<Link href="https://twitter.com/jrgarciadev" size="sm">
@jrgarciadev
</Link>
),
avatarProps: {
src: url,
export const WithDefaultAvatar = {
args: {
name: "Junior Garcia",
avatarProps: {
name: "Junior Garcia",
getInitials: (name) =>
name
.split(" ")
.map((n) => n[0])
.join(""),
},
},
};
export const WithDescription = {
args: {
name: "Junior Garcia",
description: "Software Engineer",
avatarProps: {
src: url,
},
},
};
export const WithLinkDescription = {
args: {
name: "Junior Garcia",
description: (
<Link href="https://twitter.com/jrgarciadev" size="sm">
@jrgarciadev
</Link>
),
avatarProps: {
src: url,
},
},
};

2
packages/core/theme/src/plugin.ts
View File

@ -258,7 +258,7 @@ const corePlugin = (
);
};
export const nextui = (config: NextUIPluginConfig = {}) => {
export const nextui = (config: NextUIPluginConfig = {}): ReturnType<typeof plugin> => {
const {
themes: themeObject = {},
defaultTheme = "light",

920
packages/core/theme/stories/colors.stories.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentMeta} from "@storybook/react";
import {Meta} from "@storybook/react";
import {parseToRgba, readableColor} from "color2k";
import {commonColors} from "../src/colors";
@ -97,9 +97,7 @@ export default {
control: false,
},
},
} as ComponentMeta<typeof SwatchSet>;
const Template = (args: SwatchSetProps) => <SwatchSet {...args} />;
} as Meta<typeof SwatchSet>;
const getCommonItems = (colors: string[]) => {
return colors.map((color) => ({
@ -107,462 +105,464 @@ const getCommonItems = (colors: string[]) => {
}));
};
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)]),
},
{
title: "Cyan",
items: getCommonItems([...Object.values(commonColors.cyan)]),
},
],
export const 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)]),
},
{
title: "Cyan",
items: getCommonItems([...Object.values(commonColors.cyan)]),
},
],
},
};
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: "divider",
className: "bg-divider",
textClassName: "text-foreground",
},
{
color: "focus",
className: "bg-focus",
textClassName: "text-primary-foreground",
},
],
},
{
title: "Content",
items: [
{
color: "content1",
className: "bg-content1",
textClassName: "text-content1-foreground",
},
{
color: "content2",
className: "bg-content2",
textClassName: "text-content2-foreground",
},
{
color: "content3",
className: "bg-content3",
textClassName: "text-content3-foreground",
},
{
color: "content4",
className: "bg-content4",
textClassName: "text-content4-foreground",
},
],
},
{
title: "Base",
items: [
{
color: "default",
className: "bg-default",
textClassName: "text-default-foreground",
},
{
color: "primary",
className: "bg-primary",
textClassName: "text-primary-foreground",
},
{
color: "secondary",
className: "bg-secondary",
textClassName: "text-secondary-foreground",
},
{
color: "success",
className: "bg-success",
textClassName: "text-success-foreground",
},
{
color: "warning",
className: "bg-warning",
textClassName: "text-warning-foreground",
},
{
color: "danger",
className: "bg-danger",
textClassName: "text-danger-foreground",
},
],
},
{
title: "Default",
items: [
{
color: "default-50",
className: "bg-default-50",
textClassName: "text-default-900",
},
{
color: "default-100",
className: "bg-default-100",
textClassName: "text-default-900",
},
{
color: "default-200",
className: "bg-default-200",
textClassName: "text-default-800",
},
{
color: "default-300",
className: "bg-default-300",
textClassName: "text-default-800",
},
{
color: "default-400",
className: "bg-default-400",
textClassName: "text-default-800",
},
{
color: "default-500",
className: "bg-default-500",
textClassName: "text-default-foreground",
},
{
color: "default-600",
className: "bg-default-600",
textClassName: "text-default-50",
},
{
color: "default-700",
className: "bg-default-700",
textClassName: "text-default-100",
},
{
color: "default-800",
className: "bg-default-800",
textClassName: "text-default-100",
},
{
color: "default-900",
className: "bg-default-900",
textClassName: "text-default-100",
},
],
},
{
title: "Primary",
items: [
{
color: "primary-50",
className: "bg-primary-50",
textClassName: "text-primary-900",
},
{
color: "primary-100",
className: "bg-primary-100",
textClassName: "text-primary-900",
},
{
color: "primary-200",
className: "bg-primary-200",
textClassName: "text-primary-800",
},
{
color: "primary-300",
className: "bg-primary-300",
textClassName: "text-primary-800",
},
{
color: "primary-400",
className: "bg-primary-400",
textClassName: "text-primary-800",
},
{
color: "primary-500",
className: "bg-primary-500",
textClassName: "text-primary-foreground",
},
{
color: "primary-600",
className: "bg-primary-600",
textClassName: "text-primary-50",
},
{
color: "primary-700",
className: "bg-primary-700",
textClassName: "text-primary-100",
},
{
color: "primary-800",
className: "bg-primary-800",
textClassName: "text-primary-100",
},
{
color: "primary-900",
className: "bg-primary-900",
textClassName: "text-primary-100",
},
],
},
{
title: "Secondary",
items: [
{
color: "secondary-50",
className: "bg-secondary-50",
textClassName: "text-secondary-900",
},
{
color: "secondary-100",
className: "bg-secondary-100",
textClassName: "text-secondary-900",
},
{
color: "secondary-200",
className: "bg-secondary-200",
textClassName: "text-secondary-800",
},
{
color: "secondary-300",
className: "bg-secondary-300",
textClassName: "text-secondary-800",
},
{
color: "secondary-400",
className: "bg-secondary-400",
textClassName: "text-secondary-800",
},
{
color: "secondary-500",
className: "bg-secondary-500",
textClassName: "text-secondary-foreground",
},
{
color: "secondary-600",
className: "bg-secondary-600",
textClassName: "text-secondary-50",
},
{
color: "secondary-700",
className: "bg-secondary-700",
textClassName: "text-secondary-100",
},
{
color: "secondary-800",
className: "bg-secondary-800",
textClassName: "text-secondary-100",
},
{
color: "secondary-900",
className: "bg-secondary-900",
textClassName: "text-secondary-100",
},
],
},
{
title: "Success",
items: [
{
color: "success-50",
className: "bg-success-50",
textClassName: "text-success-900",
},
{
color: "success-100",
className: "bg-success-100",
textClassName: "text-success-900",
},
{
color: "success-200",
className: "bg-success-200",
textClassName: "text-success-800",
},
{
color: "success-300",
className: "bg-success-300",
textClassName: "text-success-800",
},
{
color: "success-400",
className: "bg-success-400",
textClassName: "text-success-800",
},
{
color: "success-500",
className: "bg-success-500",
textClassName: "text-success-foreground",
},
{
color: "success-600",
className: "bg-success-600",
textClassName: "text-success-50",
},
{
color: "success-700",
className: "bg-success-700",
textClassName: "text-success-100",
},
{
color: "success-800",
className: "bg-success-800",
textClassName: "text-success-100",
},
{
color: "success-900",
className: "bg-success-900",
textClassName: "text-success-100",
},
],
},
{
title: "Warning",
items: [
{
color: "warning-50",
className: "bg-warning-50",
textClassName: "text-warning-900",
},
{
color: "warning-100",
className: "bg-warning-100",
textClassName: "text-warning-900",
},
{
color: "warning-200",
className: "bg-warning-200",
textClassName: "text-warning-800",
},
{
color: "warning-300",
className: "bg-warning-300",
textClassName: "text-warning-800",
},
{
color: "warning-400",
className: "bg-warning-400",
textClassName: "text-warning-800",
},
{
color: "warning-500",
className: "bg-warning-500",
textClassName: "text-warning-foreground",
},
{
color: "warning-600",
className: "bg-warning-600",
textClassName: "text-warning-50",
},
{
color: "warning-700",
className: "bg-warning-700",
textClassName: "text-warning-100",
},
{
color: "warning-800",
className: "bg-warning-800",
textClassName: "text-warning-100",
},
{
color: "warning-900",
className: "bg-warning-900",
textClassName: "text-warning-100",
},
],
},
{
title: "Danger",
items: [
{
color: "danger-50",
className: "bg-danger-50",
textClassName: "text-danger-900",
},
{
color: "danger-100",
className: "bg-danger-100",
textClassName: "text-danger-900",
},
{
color: "danger-200",
className: "bg-danger-200",
textClassName: "text-danger-800",
},
{
color: "danger-300",
className: "bg-danger-300",
textClassName: "text-danger-800",
},
{
color: "danger-400",
className: "bg-danger-400",
textClassName: "text-danger-800",
},
{
color: "danger-500",
className: "bg-danger-500",
textClassName: "text-danger-foreground",
},
{
color: "danger-600",
className: "bg-danger-600",
textClassName: "text-danger-50",
},
{
color: "danger-700",
className: "bg-danger-700",
textClassName: "text-danger-100",
},
{
color: "danger-800",
className: "bg-danger-800",
textClassName: "text-danger-100",
},
{
color: "danger-900",
className: "bg-danger-900",
textClassName: "text-danger-100",
},
],
},
],
export const 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: "divider",
className: "bg-divider",
textClassName: "text-foreground",
},
{
color: "focus",
className: "bg-focus",
textClassName: "text-primary-foreground",
},
],
},
{
title: "Content",
items: [
{
color: "content1",
className: "bg-content1",
textClassName: "text-content1-foreground",
},
{
color: "content2",
className: "bg-content2",
textClassName: "text-content2-foreground",
},
{
color: "content3",
className: "bg-content3",
textClassName: "text-content3-foreground",
},
{
color: "content4",
className: "bg-content4",
textClassName: "text-content4-foreground",
},
],
},
{
title: "Base",
items: [
{
color: "default",
className: "bg-default",
textClassName: "text-default-foreground",
},
{
color: "primary",
className: "bg-primary",
textClassName: "text-primary-foreground",
},
{
color: "secondary",
className: "bg-secondary",
textClassName: "text-secondary-foreground",
},
{
color: "success",
className: "bg-success",
textClassName: "text-success-foreground",
},
{
color: "warning",
className: "bg-warning",
textClassName: "text-warning-foreground",
},
{
color: "danger",
className: "bg-danger",
textClassName: "text-danger-foreground",
},
],
},
{
title: "Default",
items: [
{
color: "default-50",
className: "bg-default-50",
textClassName: "text-default-900",
},
{
color: "default-100",
className: "bg-default-100",
textClassName: "text-default-900",
},
{
color: "default-200",
className: "bg-default-200",
textClassName: "text-default-800",
},
{
color: "default-300",
className: "bg-default-300",
textClassName: "text-default-800",
},
{
color: "default-400",
className: "bg-default-400",
textClassName: "text-default-800",
},
{
color: "default-500",
className: "bg-default-500",
textClassName: "text-default-foreground",
},
{
color: "default-600",
className: "bg-default-600",
textClassName: "text-default-50",
},
{
color: "default-700",
className: "bg-default-700",
textClassName: "text-default-100",
},
{
color: "default-800",
className: "bg-default-800",
textClassName: "text-default-100",
},
{
color: "default-900",
className: "bg-default-900",
textClassName: "text-default-100",
},
],
},
{
title: "Primary",
items: [
{
color: "primary-50",
className: "bg-primary-50",
textClassName: "text-primary-900",
},
{
color: "primary-100",
className: "bg-primary-100",
textClassName: "text-primary-900",
},
{
color: "primary-200",
className: "bg-primary-200",
textClassName: "text-primary-800",
},
{
color: "primary-300",
className: "bg-primary-300",
textClassName: "text-primary-800",
},
{
color: "primary-400",
className: "bg-primary-400",
textClassName: "text-primary-800",
},
{
color: "primary-500",
className: "bg-primary-500",
textClassName: "text-primary-foreground",
},
{
color: "primary-600",
className: "bg-primary-600",
textClassName: "text-primary-50",
},
{
color: "primary-700",
className: "bg-primary-700",
textClassName: "text-primary-100",
},
{
color: "primary-800",
className: "bg-primary-800",
textClassName: "text-primary-100",
},
{
color: "primary-900",
className: "bg-primary-900",
textClassName: "text-primary-100",
},
],
},
{
title: "Secondary",
items: [
{
color: "secondary-50",
className: "bg-secondary-50",
textClassName: "text-secondary-900",
},
{
color: "secondary-100",
className: "bg-secondary-100",
textClassName: "text-secondary-900",
},
{
color: "secondary-200",
className: "bg-secondary-200",
textClassName: "text-secondary-800",
},
{
color: "secondary-300",
className: "bg-secondary-300",
textClassName: "text-secondary-800",
},
{
color: "secondary-400",
className: "bg-secondary-400",
textClassName: "text-secondary-800",
},
{
color: "secondary-500",
className: "bg-secondary-500",
textClassName: "text-secondary-foreground",
},
{
color: "secondary-600",
className: "bg-secondary-600",
textClassName: "text-secondary-50",
},
{
color: "secondary-700",
className: "bg-secondary-700",
textClassName: "text-secondary-100",
},
{
color: "secondary-800",
className: "bg-secondary-800",
textClassName: "text-secondary-100",
},
{
color: "secondary-900",
className: "bg-secondary-900",
textClassName: "text-secondary-100",
},
],
},
{
title: "Success",
items: [
{
color: "success-50",
className: "bg-success-50",
textClassName: "text-success-900",
},
{
color: "success-100",
className: "bg-success-100",
textClassName: "text-success-900",
},
{
color: "success-200",
className: "bg-success-200",
textClassName: "text-success-800",
},
{
color: "success-300",
className: "bg-success-300",
textClassName: "text-success-800",
},
{
color: "success-400",
className: "bg-success-400",
textClassName: "text-success-800",
},
{
color: "success-500",
className: "bg-success-500",
textClassName: "text-success-foreground",
},
{
color: "success-600",
className: "bg-success-600",
textClassName: "text-success-50",
},
{
color: "success-700",
className: "bg-success-700",
textClassName: "text-success-100",
},
{
color: "success-800",
className: "bg-success-800",
textClassName: "text-success-100",
},
{
color: "success-900",
className: "bg-success-900",
textClassName: "text-success-100",
},
],
},
{
title: "Warning",
items: [
{
color: "warning-50",
className: "bg-warning-50",
textClassName: "text-warning-900",
},
{
color: "warning-100",
className: "bg-warning-100",
textClassName: "text-warning-900",
},
{
color: "warning-200",
className: "bg-warning-200",
textClassName: "text-warning-800",
},
{
color: "warning-300",
className: "bg-warning-300",
textClassName: "text-warning-800",
},
{
color: "warning-400",
className: "bg-warning-400",
textClassName: "text-warning-800",
},
{
color: "warning-500",
className: "bg-warning-500",
textClassName: "text-warning-foreground",
},
{
color: "warning-600",
className: "bg-warning-600",
textClassName: "text-warning-50",
},
{
color: "warning-700",
className: "bg-warning-700",
textClassName: "text-warning-100",
},
{
color: "warning-800",
className: "bg-warning-800",
textClassName: "text-warning-100",
},
{
color: "warning-900",
className: "bg-warning-900",
textClassName: "text-warning-100",
},
],
},
{
title: "Danger",
items: [
{
color: "danger-50",
className: "bg-danger-50",
textClassName: "text-danger-900",
},
{
color: "danger-100",
className: "bg-danger-100",
textClassName: "text-danger-900",
},
{
color: "danger-200",
className: "bg-danger-200",
textClassName: "text-danger-800",
},
{
color: "danger-300",
className: "bg-danger-300",
textClassName: "text-danger-800",
},
{
color: "danger-400",
className: "bg-danger-400",
textClassName: "text-danger-800",
},
{
color: "danger-500",
className: "bg-danger-500",
textClassName: "text-danger-foreground",
},
{
color: "danger-600",
className: "bg-danger-600",
textClassName: "text-danger-50",
},
{
color: "danger-700",
className: "bg-danger-700",
textClassName: "text-danger-100",
},
{
color: "danger-800",
className: "bg-danger-800",
textClassName: "text-danger-100",
},
{
color: "danger-900",
className: "bg-danger-900",
textClassName: "text-danger-100",
},
],
},
],
},
};

1
packages/storybook/.gitignore vendored
View File

@ -1 +1,2 @@
.vercel
storybook-static

38
packages/storybook/.storybook/main.js
View File

@ -1,45 +1,19 @@
module.exports = {
stories: [
"./welcome.stories.mdx", // default page
"../../components/**/stories/**/*.stories.mdx",
"./welcome.stories.mdx",
"../../components/**/stories/**/*.stories.@(js|jsx|ts|tsx)",
"../../core/theme/stories/*.stories.@(js|jsx|ts|tsx)",
],
staticDirs: ["../public"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"storybook-dark-mode",
"@storybook/addon-a11y",
{
name: "@storybook/addon-storysource",
options: {
rule: {
test: [/\.stories\.(js|jsx|ts|tsx)$/],
},
loaderOptions: {
prettierConfig: { printWidth: 80, singleQuote: false },
},
},
},
{
name: "@storybook/addon-postcss",
options: {
cssLoaderOptions: {
// When you have splitted your css over multiple files
// and use @import("./other-styles.css")
importLoaders: 1,
},
postcssLoaderOptions: {
// When using postCSS 8
implementation: require("postcss"),
},
},
},
"@storybook/addon-essentials",
"@storybook/addon-links",
"storybook-dark-mode",
],
framework: "@storybook/react",
framework: "@storybook/react-vite",
core: {
builder: "webpack5",
builder: "@storybook/builder-vite",
disableTelemetry: true,
},
typescript: {

44
packages/storybook/.storybook/preview.js → packages/storybook/.storybook/preview.tsx
View File

@ -1,25 +1,26 @@
import React from "react";
import {themes} from "@storybook/theming";
import {NextUIProvider} from "@nextui-org/react";
import Style from "./style";
import {NextUIProvider} from "@nextui-org/system/src/provider";
import type { Preview } from '@storybook/react';
import './style.css'
export const decorators = [
(Story, {globals: {locale}}) => {
const direction =
locale && new Intl.Locale(locale)?.textInfo?.direction === "rtl" ? "rtl" : undefined;
const decorators: Preview['decorators'] = [
(Story, {globals: {locale}}) => {
const direction =
// @ts-ignore
locale && new Intl.Locale(locale)?.textInfo?.direction === "rtl" ? "rtl" : undefined;
return (
<NextUIProvider locale={locale}>
<div className="bg-dark" lang={locale} dir={direction}>
<Style />
<Story />
</div>
</NextUIProvider>
);
},
];
return (
<NextUIProvider locale={locale}>
<div className="bg-dark" lang={locale} dir={direction}>
<Story />
</div>
</NextUIProvider>
);
},
]
export const parameters = {
const parameters: Preview['parameters'] = {
actions: {argTypesRegex: "^on[A-Z].*"},
options: {
storySort: {
@ -91,15 +92,22 @@ const locales = [
"zh-TW",
];
export const globalTypes = {
const globalTypes: Preview['globalTypes'] = {
locale: {
toolbar: {
icon: "globe",
items: locales.map((locale) => ({
value: locale,
title: new Intl.DisplayNames(undefined, {type: "language"}).of(locale),
// @ts-ignore
right: new Intl.Locale(locale)?.textInfo?.direction === "rtl" ? "Right to Left" : undefined,
})),
},
},
};
export default {
decorators,
parameters,
globalTypes
} satisfies Preview;

7
packages/storybook/.storybook/style.js
View File

@ -1,7 +0,0 @@
import './style.css';
function Style() {
return <div />;
}
export default Style;

46
packages/storybook/package.json
View File

@ -25,43 +25,31 @@
"url": "https://github.com/nextui-org/nextui/issues"
},
"scripts": {
"storybook": "concurrently \"pnpm watch:css\" \"pnpm watch:storybook\"",
"build-storybook": "concurrently \"pnpm:build:*\"",
"build:css": "npx tailwindcss -i ./.storybook/style.css -o ./public/tailwind.css",
"build:storybook": "build-storybook build",
"watch:css": "npx tailwindcss -i ./.storybook/style.css -o ./public/tailwind.css --watch",
"watch:storybook": "start-storybook dev -p 6006",
"start:storybook": "pnpx http-server storybook-static"
"dev": "pnpm sb dev -p 6006",
"build": "pnpm sb build",
"start": "pnpm dlx http-server storybook-static"
},
"dependencies": {
"@nextui-org/theme": "workspace:*",
"@nextui-org/system": "workspace:*",
"@nextui-org/react": "workspace:*",
"@nextui-org/theme": "workspace:*",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"@babel/core": "^7.21.0",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.0",
"@storybook/addon-a11y": "^6.5.16",
"@storybook/addon-actions": "^6.5.16",
"@storybook/addon-docs": "^6.5.16",
"@storybook/addon-essentials": "^6.5.16",
"@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",
"@storybook/theming": "^6.5.16",
"@storybook/addon-a11y": "^7.1.1",
"@storybook/addon-actions": "^7.1.1",
"@storybook/addon-docs": "^7.1.1",
"@storybook/addon-essentials": "^7.1.1",
"@storybook/addon-links": "^7.1.1",
"@storybook/builder-vite": "^7.1.1",
"vite": "^4.4.7",
"@storybook/cli": "^7.1.1",
"@storybook/react-vite": "^7.1.1",
"@storybook/react": "^7.1.1",
"@storybook/theming": "^7.1.1",
"autoprefixer": "^10.4.13",
"babel-loader": "^8.3.0",
"concurrently": "^7.6.0",
"postcss": "^8.4.21",
"storybook-dark-mode": "^2.1.1",
"storybook-dark-mode": "^3.0.0",
"tailwindcss": "^3.2.7"
},
"tsup": {

4
packages/storybook/tailwind.config.js
View File

@ -4,8 +4,8 @@ const {nextui} = require("@nextui-org/theme/plugin");
module.exports = {
content: [
"./.storybook/welcome.stories.mdx",
"../components/**/src/**/*.{js,jsx,ts,tsx}",
"../components/**/stories/**/*.{js,jsx,ts,tsx}",
"../components/*/src/**/*.{js,jsx,ts,tsx}",
"../components/*/stories/**/*.{js,jsx,ts,tsx}",
"../core/theme/src/components/**/*.{js,jsx,ts,tsx}",
"../core/theme/src/utils/**/*.{js,jsx,ts,tsx}",
"../core/theme/stories/**/*.{js,jsx,ts,tsx}",

34
plop/component/stories/{{componentName}}.stories.tsx.hbs
View File

@ -1,5 +1,5 @@
import React from "react";
import {ComponentStory, ComponentMeta} from "@storybook/react";
import {StoryFn, Meta} from "@storybook/react";
import { {{componentName}} } from "@nextui-org/theme";
import { {{capitalize componentName}}, {{capitalize componentName}}Props } from "../src";
@ -9,22 +9,16 @@ export default {
component: {{capitalize componentName}},
argTypes: {
color: {
control: {
type: "select",
options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
},
control: { type: "select" },
options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
},
radius: {
control: {
type: "select",
options: ["none", "sm", "md", "lg", "full"],
},
control: { type: "select" },
options: ["none", "sm", "md", "lg", "full"],
},
size: {
control: {
type: "select",
options: ["sm", "md", "lg"],
},
control: { type: "select" },
options: ["sm", "md", "lg"],
},
isDisabled: {
control: {
@ -32,16 +26,18 @@ export default {
},
},
},
} as ComponentMeta<typeof {{capitalize componentName}}>;
} as Meta<typeof {{capitalize componentName}}>;
const defaultProps = {
...{{componentName}}.defaultVariants,
};
const Template: ComponentStory<typeof {{capitalize componentName}}> = (args: {{capitalize componentName}}Props) => <{{capitalize componentName}} {...args} />;
const Template: StoryFn<typeof {{capitalize componentName}}> = (args: {{capitalize componentName}}Props) => <{{capitalize componentName}} {...args} />;
export const Default = Template.bind({});
Default.args = {
...defaultProps,
};
export const Default = {
render: Template,
args: {
...defaultProps,
}
}

7847
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

2
turbo.json
View File

@ -5,7 +5,7 @@
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": [".next/**", "dist/**", "lib/**"]
"outputs": [".next/**", "dist/**", "lib/**", "storybook-static/**"]
},
"build:fast": {
"outputs": ["dist/**"],