Skip to content

Commit

Permalink
Add storybook example
Browse files Browse the repository at this point in the history
  • Loading branch information
louwie17 committed Sep 17, 2024
1 parent c74e428 commit ecba739
Showing 1 changed file with 47 additions and 0 deletions.
47 changes: 47 additions & 0 deletions packages/dataviews/src/components/dataform/stories/index.story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { useState } from '@wordpress/element';
* Internal dependencies
*/
import DataForm from '../index';
import type { CombinedFormField } from '../../../types';

const meta = {
title: 'DataViews/DataForm',
Expand Down Expand Up @@ -76,6 +77,11 @@ const fields = [
{ value: 'published', label: 'Published' },
],
},
{
id: 'password',
label: 'Password',
type: 'text' as const,
},
];

export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
Expand Down Expand Up @@ -118,3 +124,44 @@ export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
/>
);
};

export const CombinedFields = ( { type }: { type: 'panel' | 'regular' } ) => {
const [ post, setPost ] = useState( {
title: 'Hello, World!',
order: 2,
author: 1,
status: 'draft',
} );

const form = {
fields: [ 'title', 'status_and_visibility', 'order', 'author' ],
layout: {
combinedFields: [
{
id: 'status_and_visibility',
label: 'Status & Visibility',
children: [ 'status', 'password' ],
direction: 'vertical',
render: ( { item } ) => item.status,
},
] as CombinedFormField< any >[],
},
};

return (
<DataForm
data={ post }
fields={ fields }
form={ {
...form,
type,
} }
onChange={ ( edits ) =>
setPost( ( prev ) => ( {
...prev,
...edits,
} ) )
}
/>
);
};

0 comments on commit ecba739

Please sign in to comment.