Skip to content

Commit

Permalink
⚗️ Implemented full form previews POC
Browse files Browse the repository at this point in the history
  • Loading branch information
sergei-maertens committed Aug 16, 2024
1 parent 30cbdfe commit fd9a13f
Show file tree
Hide file tree
Showing 47 changed files with 836 additions and 82 deletions.
9 changes: 6 additions & 3 deletions src/components/ComponentPreview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,11 @@ const GenericComponentPreview: React.FC<GenericComponentPreviewProps> = ({
}) => {
const {key} = component;
const entry = getRegistryEntry(component);
const {preview: PreviewComponent, defaultValue = ''} = entry;
if (PreviewComponent === null) {
const {
preview: {panel: PanelPreviewComponent},
defaultValue = '',
} = entry;
if (PanelPreviewComponent === null) {
return null;
}
const isMultiple = hasOwnProperty(component, 'multiple') ? component.multiple : false;
Expand All @@ -106,7 +109,7 @@ const GenericComponentPreview: React.FC<GenericComponentPreviewProps> = ({
component={component}
initialValues={initialValues}
>
<PreviewComponent component={component} />
<PanelPreviewComponent component={component} />
</ComponentPreviewWrapper>
);
};
Expand Down
148 changes: 148 additions & 0 deletions src/components/FormPreview.stories.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
import {Meta, StoryObj} from '@storybook/react';
import {expect, userEvent, waitFor, within} from '@storybook/test';

import {BuilderContextDecorator} from '@/sb-decorators';

import FormPreview from './FormPreview';

export default {
title: 'Public API/FormPreview (⚠️ UNSTABLE)',
component: FormPreview,
decorators: [BuilderContextDecorator],
parameters: {
modal: {noModal: true},
},
} satisfies Meta<typeof FormPreview>;

type Story = StoryObj<typeof FormPreview>;

export const SingleTextField: Story = {
name: 'Form with text field',
args: {
components: [
{
id: 'oiejwa',
type: 'textfield',
key: 'parent.aTextField',
label: 'A text field',
defaultValue: 'a default value',
},
],
},
play: async ({canvasElement}) => {
const canvas = within(canvasElement);
await userEvent.click(canvas.getByRole('button', {name: 'Edit'}));
await waitFor(async () => {
expect(await canvas.findByRole('dialog')).toBeVisible();
});
},
};

export const FieldSet: Story = {
name: 'Form with fieldset',
args: {
components: [
{
id: 'oiejwa',
type: 'textfield',
key: 'aTextField',
label: 'A text field',
},
{
id: 'wieurq4',
type: 'fieldset',
key: 'aFieldset',
label: 'Fieldset with nested components',
hideHeader: false,
components: [
{
id: 'vr832jc',
type: 'textfield',
key: 'nestedTextfield',
label: 'Nested textfield',
},
{
id: 'vrekjc',
type: 'textfield',
key: 'nestedTextfield2',
label: 'Nested textfield 2',
},
],
},
{
id: 'cols1',
type: 'columns',
key: 'cols1',
columns: [
{
size: 6,
sizeMobile: 4,
components: [
{
id: 'number1',
type: 'number',
key: 'number1',
label: 'Number',
},
],
},
{
size: 3,
sizeMobile: 4,
components: [
{
id: 'email1',
type: 'email',
key: 'email1',
label: 'Email 1',
validateOn: 'blur',
},
{
id: 'email2',
type: 'email',
key: 'email2',
label: 'Email 2',
validateOn: 'blur',
},
],
},
{
size: 3,
sizeMobile: 4,
components: [
{
id: 'content1',
type: 'content',
key: 'content1',
html: '<p>Some free form content</p>',
},
],
},
],
},
{
id: 'editgrid1',
type: 'editgrid',
key: 'editgrid1',
label: 'Contacts',
groupLabel: 'Person',
disableAddingRemovingRows: false,
components: [
{
id: 'editgridNested1',
type: 'textfield',
key: 'editgridNested1',
label: 'Name',
},
{
id: 'editgridNested2',
type: 'phoneNumber',
key: 'editgridNested2',
label: 'Phone number',
inputMask: null,
},
],
},
],
},
};
Loading

0 comments on commit fd9a13f

Please sign in to comment.