mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[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 <tomasz.gnyp@hyland.com>
This commit is contained in:
Marcin Krueger
GitHub
409
lib/core/src/lib/data-column/data-column.component.stories.ts
Normal file
409
lib/core/src/lib/data-column/data-column.component.stories.ts
Normal file
@@ -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<DataColumnComponent> = (
|
||||||
|
args: DataColumnComponent & { columns: any; rows: any; data: any }
|
||||||
|
) => ({
|
||||||
|
props: args,
|
||||||
|
template: `
|
||||||
|
${
|
||||||
|
args.columns && args.rows
|
||||||
|
? '<adf-datatable [columns]="columns' +
|
||||||
|
(args.type === 'date' ? '()' : '') +
|
||||||
|
'" [rows]="rows">'
|
||||||
|
: '<adf-datatable [data]="data">'
|
||||||
|
}
|
||||||
|
<data-columns>
|
||||||
|
<data-column [key]="key" [type]="type"
|
||||||
|
title="${args.title}"
|
||||||
|
[editable]="${args.editable}"
|
||||||
|
[sortable]="${args.sortable}"
|
||||||
|
[draggable]="${args.draggable}"
|
||||||
|
[copyContent]="${args.copyContent}"
|
||||||
|
format="${args.format}"
|
||||||
|
[isHidden]="${args.isHidden}"
|
||||||
|
class="${args.cssClass}"
|
||||||
|
sr-title="${args.srTitle}"
|
||||||
|
[formatTooltip]="formatTooltip">
|
||||||
|
</data-column>
|
||||||
|
</data-columns>
|
||||||
|
</adf-datatable>`
|
||||||
|
});
|
||||||
|
|
||||||
|
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
|
||||||
|
};
|
||||||
@@ -15,9 +15,12 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import { ObjectDataTableAdapter } from '../datatable/data/object-datatable-adapter';
|
||||||
import { DataColumn } from '../datatable/data/data-column.model';
|
import { DataColumn } from '../datatable/data/data-column.model';
|
||||||
|
|
||||||
export const getDataColumnMock = <T = unknown>(column: Partial<DataColumn<T>> = {}): DataColumn<T> => ({
|
export const getDataColumnMock = <T = unknown>(
|
||||||
|
column: Partial<DataColumn<T>> = {}
|
||||||
|
): DataColumn<T> => ({
|
||||||
id: 'columnId',
|
id: 'columnId',
|
||||||
key: 'key',
|
key: 'key',
|
||||||
type: 'text',
|
type: 'text',
|
||||||
@@ -37,3 +40,50 @@ export const getDataColumnMock = <T = unknown>(column: Partial<DataColumn<T>> =
|
|||||||
customData: undefined,
|
customData: undefined,
|
||||||
...column
|
...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 }
|
||||||
|
]);
|
||||||
|
|||||||
Reference in New Issue
Block a user