This commit is contained in:
@@ -124,7 +124,7 @@ export const DateOnly: Story = {
|
|||||||
type: 'date',
|
type: 'date',
|
||||||
label: 'Publish date',
|
label: 'Publish date',
|
||||||
},
|
},
|
||||||
render: (args) => {
|
render: function DateOnlyRender(args) {
|
||||||
const [value, setValue] = useState('2031-05-20');
|
const [value, setValue] = useState('2031-05-20');
|
||||||
return (
|
return (
|
||||||
<DatePicker
|
<DatePicker
|
||||||
@@ -144,7 +144,7 @@ export const DateTime: Story = {
|
|||||||
type: 'datetime-local',
|
type: 'datetime-local',
|
||||||
label: 'Schedule at',
|
label: 'Schedule at',
|
||||||
},
|
},
|
||||||
render: (args) => {
|
render: function DateTimeRender(args) {
|
||||||
const [value, setValue] = useState('2031-05-20T14:30');
|
const [value, setValue] = useState('2031-05-20T14:30');
|
||||||
return (
|
return (
|
||||||
<DatePicker
|
<DatePicker
|
||||||
@@ -167,7 +167,7 @@ export const TimeOnlyInline: Story = {
|
|||||||
size: 'sm',
|
size: 'sm',
|
||||||
rightIcon: <CalendarDaysIcon className="h-4 w-4 ui-body-secondary" />,
|
rightIcon: <CalendarDaysIcon className="h-4 w-4 ui-body-secondary" />,
|
||||||
},
|
},
|
||||||
render: (args) => {
|
render: function TimeOnlyInlineRender(args) {
|
||||||
const [value, setValue] = useState('09:00');
|
const [value, setValue] = useState('09:00');
|
||||||
return (
|
return (
|
||||||
<DatePicker
|
<DatePicker
|
||||||
@@ -182,7 +182,8 @@ export const TimeOnlyInline: Story = {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Error: Story = {
|
export const ErrorState: Story = {
|
||||||
|
name: 'Error',
|
||||||
args: {
|
args: {
|
||||||
type: 'datetime-local',
|
type: 'datetime-local',
|
||||||
label: 'Schedule at',
|
label: 'Schedule at',
|
||||||
@@ -205,7 +206,7 @@ export const SizeMatrix: Story = {
|
|||||||
type: 'datetime-local',
|
type: 'datetime-local',
|
||||||
label: 'Schedule at',
|
label: 'Schedule at',
|
||||||
},
|
},
|
||||||
render: (args) => {
|
render: function SizeMatrixRender(args) {
|
||||||
const [value, setValue] = useState('2031-05-20T14:30');
|
const [value, setValue] = useState('2031-05-20T14:30');
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-cols-1 gap-3">
|
<div className="grid grid-cols-1 gap-3">
|
||||||
|
|||||||
@@ -99,7 +99,7 @@ export default meta;
|
|||||||
type Story = StoryObj<typeof meta>;
|
type Story = StoryObj<typeof meta>;
|
||||||
|
|
||||||
export const Stacked: Story = {
|
export const Stacked: Story = {
|
||||||
render: (args) => {
|
render: function StackedRender(args) {
|
||||||
const [value, setValue] = useState(args.value);
|
const [value, setValue] = useState(args.value);
|
||||||
return (
|
return (
|
||||||
<Dropdown
|
<Dropdown
|
||||||
@@ -119,7 +119,7 @@ export const Inline: Story = {
|
|||||||
layout: 'inline',
|
layout: 'inline',
|
||||||
size: 'sm',
|
size: 'sm',
|
||||||
},
|
},
|
||||||
render: (args) => {
|
render: function InlineRender(args) {
|
||||||
const [value, setValue] = useState(args.value);
|
const [value, setValue] = useState(args.value);
|
||||||
return (
|
return (
|
||||||
<Dropdown
|
<Dropdown
|
||||||
@@ -147,7 +147,7 @@ export const WithError: Story = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const SizeMatrix: Story = {
|
export const SizeMatrix: Story = {
|
||||||
render: (args) => {
|
render: function SizeMatrixRender(args) {
|
||||||
const [value, setValue] = useState(args.value);
|
const [value, setValue] = useState(args.value);
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-cols-1 gap-3">
|
<div className="grid grid-cols-1 gap-3">
|
||||||
|
|||||||
@@ -67,7 +67,7 @@ export const Basic: Story = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const WithActions: Story = {
|
export const WithActions: Story = {
|
||||||
render: (args) => {
|
render: function WithActionsRender(args) {
|
||||||
const [title, setTitle] = useState('Storybook powered CMS');
|
const [title, setTitle] = useState('Storybook powered CMS');
|
||||||
const [status, setStatus] = useState('draft');
|
const [status, setStatus] = useState('draft');
|
||||||
|
|
||||||
|
|||||||
@@ -127,7 +127,7 @@ export const Text: Story = {
|
|||||||
label: 'Title',
|
label: 'Title',
|
||||||
placeholder: 'Write a title',
|
placeholder: 'Write a title',
|
||||||
},
|
},
|
||||||
render: (args) => {
|
render: function TextRender(args) {
|
||||||
const [value, setValue] = useState('Storybook integration');
|
const [value, setValue] = useState('Storybook integration');
|
||||||
return (
|
return (
|
||||||
<InputField
|
<InputField
|
||||||
@@ -148,7 +148,7 @@ export const PasswordWithToggle: Story = {
|
|||||||
label: 'Password',
|
label: 'Password',
|
||||||
placeholder: 'Type a strong password',
|
placeholder: 'Type a strong password',
|
||||||
},
|
},
|
||||||
render: (args) => {
|
render: function PasswordWithToggleRender(args) {
|
||||||
const [value, setValue] = useState('pa55word');
|
const [value, setValue] = useState('pa55word');
|
||||||
return (
|
return (
|
||||||
<InputField
|
<InputField
|
||||||
@@ -171,7 +171,7 @@ export const InlineWithIcon: Story = {
|
|||||||
size: 'sm',
|
size: 'sm',
|
||||||
rightIcon: <MagnifyingGlassIcon className="h-4 w-4 ui-body-secondary" />,
|
rightIcon: <MagnifyingGlassIcon className="h-4 w-4 ui-body-secondary" />,
|
||||||
},
|
},
|
||||||
render: (args) => {
|
render: function InlineWithIconRender(args) {
|
||||||
const [value, setValue] = useState('posts');
|
const [value, setValue] = useState('posts');
|
||||||
return (
|
return (
|
||||||
<InputField
|
<InputField
|
||||||
@@ -186,7 +186,8 @@ export const InlineWithIcon: Story = {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Error: Story = {
|
export const ErrorState: Story = {
|
||||||
|
name: 'Error',
|
||||||
args: {
|
args: {
|
||||||
type: 'email',
|
type: 'email',
|
||||||
label: 'Email',
|
label: 'Email',
|
||||||
@@ -210,7 +211,7 @@ export const SizeMatrix: Story = {
|
|||||||
label: 'Name',
|
label: 'Name',
|
||||||
placeholder: 'Enter value',
|
placeholder: 'Enter value',
|
||||||
},
|
},
|
||||||
render: (args) => {
|
render: function SizeMatrixRender(args) {
|
||||||
const [value, setValue] = useState('Beatrice');
|
const [value, setValue] = useState('Beatrice');
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-cols-1 gap-3">
|
<div className="grid grid-cols-1 gap-3">
|
||||||
|
|||||||
@@ -53,7 +53,8 @@ type Story = StoryObj<typeof meta>;
|
|||||||
|
|
||||||
export const Body: Story = {};
|
export const Body: Story = {};
|
||||||
|
|
||||||
export const Error: Story = {
|
export const ErrorState: Story = {
|
||||||
|
name: 'Error',
|
||||||
args: {
|
args: {
|
||||||
variant: 'error',
|
variant: 'error',
|
||||||
children: 'This field is required',
|
children: 'This field is required',
|
||||||
|
|||||||
@@ -115,7 +115,7 @@ export default meta;
|
|||||||
type Story = StoryObj<typeof meta>;
|
type Story = StoryObj<typeof meta>;
|
||||||
|
|
||||||
export const Editable: Story = {
|
export const Editable: Story = {
|
||||||
render: (args) => {
|
render: function EditableRender(args) {
|
||||||
const [markdown, setMarkdown] = useState(args.markdown);
|
const [markdown, setMarkdown] = useState(args.markdown);
|
||||||
return (
|
return (
|
||||||
<div className="w-full max-w-2xl">
|
<div className="w-full max-w-2xl">
|
||||||
|
|||||||
@@ -183,7 +183,7 @@ export const Empty: Story = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const InteractiveSortingAndPagination: Story = {
|
export const InteractiveSortingAndPagination: Story = {
|
||||||
render: () => {
|
render: function InteractiveSortingAndPaginationRender() {
|
||||||
const [sorting, setSorting] = useState<SortState | null>({
|
const [sorting, setSorting] = useState<SortState | null>({
|
||||||
field: 'name',
|
field: 'name',
|
||||||
direction: 'asc',
|
direction: 'asc',
|
||||||
|
|||||||
Reference in New Issue
Block a user