mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
feat: add Storybook stories for FormRendererComponent tabs and sidenav layouts
Co-authored-by: eromano <1030050+eromano@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
co-authored by
eromano
eromano
parent
694463f914
commit
7aaaa5dd82
@@ -0,0 +1,83 @@
|
|||||||
|
/*!
|
||||||
|
* @license
|
||||||
|
* Copyright © 2005-2026 Hyland Software, Inc. and its affiliates. All rights reserved.
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { applicationConfig, Meta, StoryObj, moduleMetadata } from '@storybook/angular';
|
||||||
|
import { FormRendererComponent } from './form-renderer.component';
|
||||||
|
import { FormModel } from './widgets';
|
||||||
|
import { provideStoryCore } from '../stories/core-story.providers';
|
||||||
|
import { formSideNavLayoutMock, formTabsLayoutMock } from './mock/form.mock';
|
||||||
|
|
||||||
|
type FormRendererStoryArgs = {
|
||||||
|
readOnly: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const meta: Meta<FormRendererStoryArgs> = {
|
||||||
|
component: FormRendererComponent,
|
||||||
|
title: 'Core/Form/Form Renderer',
|
||||||
|
decorators: [
|
||||||
|
moduleMetadata({
|
||||||
|
imports: [FormRendererComponent]
|
||||||
|
}),
|
||||||
|
applicationConfig({
|
||||||
|
providers: [...provideStoryCore()]
|
||||||
|
})
|
||||||
|
],
|
||||||
|
parameters: {
|
||||||
|
docs: {
|
||||||
|
description: {
|
||||||
|
component: `Renders an ADF form definition. Supports a flat \`tabs\` layout and a hierarchical \`sidenav\` layout where categories can optionally render their children as an inline tab group.`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
argTypes: {
|
||||||
|
readOnly: {
|
||||||
|
control: 'boolean',
|
||||||
|
description: 'Toggles the read-only mode of the form',
|
||||||
|
defaultValue: false,
|
||||||
|
table: {
|
||||||
|
type: { summary: 'boolean' },
|
||||||
|
defaultValue: { summary: 'false' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
args: {
|
||||||
|
readOnly: false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<FormRendererStoryArgs>;
|
||||||
|
|
||||||
|
export const TabsLayout: Story = {
|
||||||
|
render: (args) => ({
|
||||||
|
props: {
|
||||||
|
formDefinition: new FormModel(formTabsLayoutMock),
|
||||||
|
readOnly: args.readOnly
|
||||||
|
},
|
||||||
|
template: `<adf-form-renderer [formDefinition]="formDefinition" [readOnly]="readOnly"></adf-form-renderer>`
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SidenavLayout: Story = {
|
||||||
|
render: (args) => ({
|
||||||
|
props: {
|
||||||
|
formDefinition: new FormModel(formSideNavLayoutMock),
|
||||||
|
readOnly: args.readOnly
|
||||||
|
},
|
||||||
|
template: `<adf-form-renderer [formDefinition]="formDefinition" [readOnly]="readOnly"></adf-form-renderer>`
|
||||||
|
})
|
||||||
|
};
|
||||||
@@ -645,3 +645,263 @@ export const fakeValidatorMock = {
|
|||||||
isSupported: () => true,
|
isSupported: () => true,
|
||||||
validate: () => true
|
validate: () => true
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const formTabsLayoutMock = {
|
||||||
|
id: 'form-tabs-layout-story',
|
||||||
|
name: 'Employee Details',
|
||||||
|
layout: 'tabs',
|
||||||
|
tabs: [
|
||||||
|
{ id: 'tab-personal', title: 'Personal' },
|
||||||
|
{ id: 'tab-contact', title: 'Contact' },
|
||||||
|
{ id: 'tab-employment', title: 'Employment' }
|
||||||
|
],
|
||||||
|
fields: [
|
||||||
|
{
|
||||||
|
id: 'container-personal',
|
||||||
|
type: 'container',
|
||||||
|
tab: 'tab-personal',
|
||||||
|
numberOfColumns: 2,
|
||||||
|
fields: {
|
||||||
|
'1': [
|
||||||
|
{
|
||||||
|
id: 'firstName',
|
||||||
|
name: 'First Name',
|
||||||
|
type: 'text',
|
||||||
|
required: true,
|
||||||
|
colspan: 1,
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'2': [
|
||||||
|
{
|
||||||
|
id: 'lastName',
|
||||||
|
name: 'Last Name',
|
||||||
|
type: 'text',
|
||||||
|
required: true,
|
||||||
|
colspan: 1,
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'container-contact',
|
||||||
|
type: 'container',
|
||||||
|
tab: 'tab-contact',
|
||||||
|
numberOfColumns: 2,
|
||||||
|
fields: {
|
||||||
|
'1': [
|
||||||
|
{
|
||||||
|
id: 'email',
|
||||||
|
name: 'Email',
|
||||||
|
type: 'text',
|
||||||
|
colspan: 1,
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'2': [
|
||||||
|
{
|
||||||
|
id: 'phone',
|
||||||
|
name: 'Phone',
|
||||||
|
type: 'text',
|
||||||
|
colspan: 1,
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'container-employment',
|
||||||
|
type: 'container',
|
||||||
|
tab: 'tab-employment',
|
||||||
|
numberOfColumns: 2,
|
||||||
|
fields: {
|
||||||
|
'1': [
|
||||||
|
{
|
||||||
|
id: 'department',
|
||||||
|
name: 'Department',
|
||||||
|
type: 'dropdown',
|
||||||
|
optionType: 'manual',
|
||||||
|
options: [
|
||||||
|
{ id: 'empty', name: 'Choose one...' },
|
||||||
|
{ id: 'hr', name: 'HR' },
|
||||||
|
{ id: 'eng', name: 'Engineering' }
|
||||||
|
],
|
||||||
|
value: 'empty',
|
||||||
|
colspan: 1,
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'2': [
|
||||||
|
{
|
||||||
|
id: 'startDate',
|
||||||
|
name: 'Start Date',
|
||||||
|
type: 'date',
|
||||||
|
colspan: 1,
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
outcomes: []
|
||||||
|
};
|
||||||
|
|
||||||
|
export const formSideNavLayoutMock = {
|
||||||
|
id: 'form-sidenav-layout-story',
|
||||||
|
name: 'Project Form',
|
||||||
|
layout: 'sidenav',
|
||||||
|
tabs: [
|
||||||
|
{ id: 'overview', title: 'Overview' },
|
||||||
|
{
|
||||||
|
id: 'team',
|
||||||
|
title: 'Team',
|
||||||
|
children: [
|
||||||
|
{ id: 'team-lead', title: 'Team Lead' },
|
||||||
|
{ id: 'team-members', title: 'Members' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'milestones',
|
||||||
|
title: 'Milestones',
|
||||||
|
childrenLayout: 'tabs',
|
||||||
|
children: [
|
||||||
|
{ id: 'milestone-q1', title: 'Q1' },
|
||||||
|
{ id: 'milestone-q2', title: 'Q2' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
fields: [
|
||||||
|
{
|
||||||
|
id: 'container-overview',
|
||||||
|
type: 'container',
|
||||||
|
tab: 'overview',
|
||||||
|
numberOfColumns: 2,
|
||||||
|
fields: {
|
||||||
|
'1': [
|
||||||
|
{
|
||||||
|
id: 'projectName',
|
||||||
|
name: 'Project Name',
|
||||||
|
type: 'text',
|
||||||
|
required: true,
|
||||||
|
colspan: 1,
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'2': [
|
||||||
|
{
|
||||||
|
id: 'projectStatus',
|
||||||
|
name: 'Status',
|
||||||
|
type: 'dropdown',
|
||||||
|
optionType: 'manual',
|
||||||
|
options: [
|
||||||
|
{ id: 'empty', name: 'Choose one...' },
|
||||||
|
{ id: 'active', name: 'Active' },
|
||||||
|
{ id: 'on-hold', name: 'On Hold' }
|
||||||
|
],
|
||||||
|
value: 'empty',
|
||||||
|
colspan: 1,
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'container-team-lead',
|
||||||
|
type: 'container',
|
||||||
|
tab: 'team-lead',
|
||||||
|
numberOfColumns: 2,
|
||||||
|
fields: {
|
||||||
|
'1': [
|
||||||
|
{
|
||||||
|
id: 'leadName',
|
||||||
|
name: 'Lead Name',
|
||||||
|
type: 'text',
|
||||||
|
required: true,
|
||||||
|
colspan: 1,
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'2': [
|
||||||
|
{
|
||||||
|
id: 'leadEmail',
|
||||||
|
name: 'Lead Email',
|
||||||
|
type: 'text',
|
||||||
|
colspan: 1,
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'container-team-members',
|
||||||
|
type: 'container',
|
||||||
|
tab: 'team-members',
|
||||||
|
numberOfColumns: 1,
|
||||||
|
fields: {
|
||||||
|
'1': [
|
||||||
|
{
|
||||||
|
id: 'membersCount',
|
||||||
|
name: 'Number of Members',
|
||||||
|
type: 'integer',
|
||||||
|
colspan: 1,
|
||||||
|
params: { existingColspan: 1, maxColspan: 1 }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'container-milestone-q1',
|
||||||
|
type: 'container',
|
||||||
|
tab: 'milestone-q1',
|
||||||
|
numberOfColumns: 2,
|
||||||
|
fields: {
|
||||||
|
'1': [
|
||||||
|
{
|
||||||
|
id: 'q1Goal',
|
||||||
|
name: 'Q1 Goal',
|
||||||
|
type: 'text',
|
||||||
|
colspan: 1,
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'2': [
|
||||||
|
{
|
||||||
|
id: 'q1Deadline',
|
||||||
|
name: 'Q1 Deadline',
|
||||||
|
type: 'date',
|
||||||
|
colspan: 1,
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'container-milestone-q2',
|
||||||
|
type: 'container',
|
||||||
|
tab: 'milestone-q2',
|
||||||
|
numberOfColumns: 2,
|
||||||
|
fields: {
|
||||||
|
'1': [
|
||||||
|
{
|
||||||
|
id: 'q2Goal',
|
||||||
|
name: 'Q2 Goal',
|
||||||
|
type: 'text',
|
||||||
|
colspan: 1,
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'2': [
|
||||||
|
{
|
||||||
|
id: 'q2Deadline',
|
||||||
|
name: 'Q2 Deadline',
|
||||||
|
type: 'date',
|
||||||
|
colspan: 1,
|
||||||
|
params: { existingColspan: 1, maxColspan: 2 }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
outcomes: []
|
||||||
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user