From 548133e6be5922376414caec9f687e86a4ac7484 Mon Sep 17 00:00:00 2001 From: Marcin Krueger Date: Mon, 19 Sep 2022 15:42:45 +0200 Subject: [PATCH] [AAE-10282] Storybook DataColumn Component (#7775) * [AAE-10282] Storybook add stories for data-column component" * [AAE-10282] Storybook adjust mock data for stories * [AAE-10282] Storybook add proper controls and create custom CSS and tooltip stories * [AAE-10282] Storybook create new stories with template pattern * [AAE-10282] Storybook finish all stories * [AAE-10282] Storybook clean stories code * [AAE-10282] Storybook add documentation table for stories * [AAE-10282] Storybook add types for arguments and change stories titles * [AAE-10282] Storybook remove empty arrays * [AAE-10282] Storybook Rebase * [AAE-10282] Storybook fix linting problems * fix circular dep Co-authored-by: Tomasz --- .../data-column.component.stories.ts | 409 ++++++++++++++++++ lib/core/src/lib/mock/data-column.mock.ts | 52 ++- 2 files changed, 460 insertions(+), 1 deletion(-) create mode 100644 lib/core/src/lib/data-column/data-column.component.stories.ts diff --git a/lib/core/src/lib/data-column/data-column.component.stories.ts b/lib/core/src/lib/data-column/data-column.component.stories.ts new file mode 100644 index 0000000000..7bf569bd0a --- /dev/null +++ b/lib/core/src/lib/data-column/data-column.component.stories.ts @@ -0,0 +1,409 @@ +/*! + * @license + * Copyright 2019 Alfresco Software, Ltd. + * + * 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 { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { DataColumnModule } from './data-column.module'; +import { DataColumnComponent } from './data-column.component'; +import { DataTableModule } from './../datatable/datatable.module'; +import { CoreStoryModule } from '../testing/core.story.module'; +import * as data from './../mock/data-column.mock'; +import { RouterTestingModule } from '@angular/router/testing'; +import { DataRow } from './../datatable'; + +export default { + component: DataColumnComponent, + title: 'Core/Data Column/Data Column', + decorators: [ + moduleMetadata({ + imports: [ + CoreStoryModule, + DataColumnModule, + DataTableModule, + RouterTestingModule + ] + }) + ], + argTypes: { + copyContent: { + description: + 'Enables/disables a Clipboard directive to allow copying of cell contents.', + control: { type: 'boolean' }, + defaultValue: false, + table: { + category: 'Component Inputs', + type: { + summary: 'boolean' + } + } + }, + cssClass: { + description: + 'Additional CSS class to be applied to column (header and cells).', + control: { type: 'text' }, + defaultValue: '', + table: { + category: 'Component Inputs', + type: { + summary: 'string' + } + } + }, + customData: { + description: + 'You can specify any custom data which can be used by any specific feature', + control: { disable: true }, + table: { + category: 'Component Inputs', + type: { + summary: 'any' + } + } + }, + draggable: { + description: 'Toggles drag and drop for header column.', + control: { type: 'boolean' }, + defaultValue: false, + table: { + category: 'Component Inputs', + type: { + summary: 'boolean' + }, + defaultValue: { + summary: false + } + } + }, + editable: { + description: 'Toggles the editing support of the column data.', + control: { type: 'boolean', disable: true }, + defaultValue: false, + table: { + category: 'Component Inputs', + type: { + summary: 'boolean' + }, + defaultValue: { + summary: false + } + } + }, + focus: { + description: 'Enable or disable cell focus', + control: { disable: true }, + table: { + category: 'Component Inputs', + type: { + summary: 'boolean' + }, + defaultValue: { + summary: true + } + } + }, + format: { + description: + 'Value format (if supported by the parent component), for example format of the date.', + control: { type: 'select', disable: true }, + options: [ + 'medium', + 'short', + 'long', + 'full', + 'shortDate', + 'mediumDate', + 'longDate', + 'fullDate', + 'shortTime', + 'mediumTime', + 'longTime', + 'fullTime', + 'timeAgo' + ], + table: { + category: 'Component Inputs', + type: { + summary: 'string' + } + } + }, + formatTooltip: { + description: 'Custom tooltip formatter function.', + control: { disable: true }, + table: { + category: 'Component Inputs', + type: { + summary: 'Function' + } + } + }, + id: { + description: 'Column identifier.', + control: { disable: true }, + table: { + category: 'Component Inputs', + type: { + summary: 'string' + }, + defaultValue: { + summary: '' + } + } + }, + isHidden: { + description: 'Hides columns', + control: { type: 'boolean' }, + defaultValue: false, + table: { + category: 'Component Inputs', + type: { + summary: 'boolean' + }, + defaultValue: { + summary: 'false' + } + } + }, + key: { + description: + 'Data source key. Can be either a column/property key like title or a property path like `createdBy.name`.', + control: { type: 'text', disable: false }, + table: { + category: 'Component Inputs', + type: { + summary: 'string' + } + } + }, + sortable: { + description: + 'Toggles ability to sort by this column, for example by clicking the column header.', + control: { type: 'boolean' }, + defaultValue: true, + table: { + category: 'Component Inputs', + type: { + summary: 'boolean' + }, + defaultValue: { + summary: true + } + } + }, + sortingKey: { + description: + 'When using server side sorting the column used by the api call where the sorting will be performed', + control: { disable: true }, + table: { + category: 'Component Inputs', + type: { + summary: 'string' + } + } + }, + srTitle: { + description: 'Title to be used for screen readers.', + control: { type: 'text' }, + defaultValue: '', + table: { + category: 'Component Inputs', + type: { + summary: 'string' + } + } + }, + title: { + description: + 'Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically.', + control: { type: 'text' }, + defaultValue: '', + table: { + category: 'Component Inputs', + type: { + summary: 'string' + }, + defaultValue: { + summary: '' + } + } + }, + type: { + description: + 'Value type for the column. Possible settings are `text`, `image`, `date`, `fileSize`, `location`, and `json`.', + control: { disable: true }, + table: { + category: 'Component Inputs', + type: { + summary: 'string' + }, + defaultValue: { + summary: 'text' + } + }, + defaultValue: 'text' + }, + data: { + description: 'Provides data for DataTable component', + control: { disable: true }, + mapping: { + text: data.dataText, + icon: data.dataIcon, + file: data.dataSizeInBytes + }, + table: { + category: 'Components data', + type: { + summary: 'ObjectDataTableAdapter' + } + } + }, + columns: { + description: 'Provides columns for DataTable component', + control: { disable: true }, + table: { + category: 'Components data', + type: { + summary: 'array' + } + } + }, + rows: { + description: 'Provides rows for DataTable component', + control: { disable: true }, + table: { + category: 'Components data', + type: { + summary: 'array' + } + } + } + } +} as Meta; + +const formatCustomTooltip = (row: DataRow): string => + row ? row.getValue('id') + ' by formatCustomTooltip' : null; + +const template: Story = ( + args: DataColumnComponent & { columns: any; rows: any; data: any } +) => ({ + props: args, + template: ` + ${ + args.columns && args.rows + ? '' + : '' + } + + + + + ` +}); + +export const textColumn = template.bind({}); +textColumn.args = { + data: 'text', + key: 'id', + type: 'text', + title: 'Text Column' +}; + +export const iconColumn = template.bind({}); +iconColumn.argTypes = { + copyContent: { control: { disable: true } } +}; +iconColumn.args = { + data: 'icon', + key: 'icon', + type: 'icon', + title: 'Icon Column' +}; + +export const dateColumn = template.bind({}); +dateColumn.argTypes = { + format: { control: { disable: false } }, + title: { control: { disable: true } }, + copyContent: { control: { disable: true } }, + sortable: { control: { disable: true } }, + draggable: { control: { disable: true } }, + isHidden: { control: { disable: true } } +}; +dateColumn.args = { + data: undefined, + format: 'medium', + columns() { + return [{ ...data.dateColumns, format: this.format }]; + }, + rows: data.dateRows, + key: 'id', + type: 'date' +}; + +export const fileColumn = template.bind({}); +fileColumn.argTypes = { + copyContent: { control: { disable: true } } +}; +fileColumn.args = { + data: 'file', + key: 'size', + type: 'fileSize', + title: 'File Column' +}; + +export const locationColumn = template.bind({}); +locationColumn.argTypes = { + copyContent: { control: { disable: true } } +}; +locationColumn.args = { + columns: data.locationColumns, + rows: data.locationRows, + key: 'id', + type: 'location', + title: 'Location Column' +}; + +export const jsonColumn = template.bind({}); +jsonColumn.argTypes = { + editable: { control: { disable: false } }, + copyContent: { control: { disable: true } } +}; +jsonColumn.args = { + data: 'text', + key: 'id', + type: 'json', + title: 'JSON Column' +}; + +export const customTooltipColumn = template.bind({}); +customTooltipColumn.args = { + data: 'text', + key: 'id', + type: 'text', + title: 'Custom Tooltip Column', + formatTooltip: formatCustomTooltip +}; diff --git a/lib/core/src/lib/mock/data-column.mock.ts b/lib/core/src/lib/mock/data-column.mock.ts index 64c0d264e9..7aa628331e 100644 --- a/lib/core/src/lib/mock/data-column.mock.ts +++ b/lib/core/src/lib/mock/data-column.mock.ts @@ -15,9 +15,12 @@ * limitations under the License. */ +import { ObjectDataTableAdapter } from '../datatable/data/object-datatable-adapter'; import { DataColumn } from '../datatable/data/data-column.model'; -export const getDataColumnMock = (column: Partial> = {}): DataColumn => ({ +export const getDataColumnMock = ( + column: Partial> = {} +): DataColumn => ({ id: 'columnId', key: 'key', type: 'text', @@ -37,3 +40,50 @@ export const getDataColumnMock = (column: Partial> = customData: undefined, ...column }); + +export const dataText = new ObjectDataTableAdapter([ + { id: '1 first' }, + { id: '2 second' }, + { id: '3 third' } +]); + +export const dateRows = [ + { createdOn: new Date(2016, 6, 1, 11, 8, 4) }, + { createdOn: new Date(2018, 4, 3, 12, 8, 4) }, + { createdOn: new Date(2021, 2, 3, 9, 8, 4) } +]; + +export const dateColumns = { + type: 'date', + key: 'createdOn', + title: 'Created On' +}; + +export const locationRows = [ + { + path: { + elements: [ + { id: '1', name: 'path' }, + { id: '2', name: 'to' }, + { id: '3', name: 'location' } + ], + name: '/path/to/location-link' + } + } +]; + +export const locationColumns = [ + { format: '/somewhere', type: 'location', key: 'path', title: 'Location' } +]; + +export const dataIcon = new ObjectDataTableAdapter([ + { icon: 'alarm' }, + { icon: 'folder_open' }, + { icon: 'accessibility' } +]); + +export const dataSizeInBytes = new ObjectDataTableAdapter([ + { size: 12313 }, + { size: 23 }, + { size: 42421412421 } +]);