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