From df8574f59844f7bdf08e37374791a9066e24d959 Mon Sep 17 00:00:00 2001 From: Stefan Dietz Date: Tue, 17 Dec 2024 19:23:42 +0100 Subject: [PATCH] Remove deprecated component KolTable and rewrite samples to KolTableStateful Refs: #7015 --- docs/BREAKING_CHANGES.v3.md | 1 + .../src/components/@else/all/component.tsx | 1 - .../src/components/@else/all/readme.md | 4 - .../src/components/component-list.ts | 2 - .../src/components/table/shadow.tsx | 87 -------------- .../components/src/core/component-names.ts | 2 - .../components/src/schema/components/table.ts | 1 - packages/components/stencil.config.ts | 1 - .../designer/src/components/editor/store.tsx | 113 +----------------- packages/designer/src/components/tags.ts | 1 - .../react/src/components/handout/basic.tsx | 4 +- .../src/components/table/column-alignment.tsx | 12 +- .../src/components/table/complex-headers.tsx | 6 +- .../components/table/horizontal-scrollbar.tsx | 18 ++- .../react/src/components/table/multi-sort.tsx | 8 +- .../components/table/pagination-position.tsx | 16 ++- .../src/components/table/render-cell.tsx | 6 +- .../react/src/components/table/sort-data.tsx | 8 +- .../src/components/table/with-footer.tsx | 6 +- .../src/components/table/with-pagination.tsx | 6 +- .../TableHorizontalScrollbarAdvanced.tsx | 4 +- 21 files changed, 55 insertions(+), 252 deletions(-) delete mode 100644 packages/components/src/components/table/shadow.tsx diff --git a/docs/BREAKING_CHANGES.v3.md b/docs/BREAKING_CHANGES.v3.md index 0b318664af..7e72b5647a 100644 --- a/docs/BREAKING_CHANGES.v3.md +++ b/docs/BREAKING_CHANGES.v3.md @@ -14,6 +14,7 @@ The following components have been removed: - kol-indented-text - kol-link-group - kol-logo +- kol-table ## Changed Components diff --git a/packages/components/src/components/@else/all/component.tsx b/packages/components/src/components/@else/all/component.tsx index 2f64f865d8..1c84555af6 100644 --- a/packages/components/src/components/@else/all/component.tsx +++ b/packages/components/src/components/@else/all/component.tsx @@ -50,7 +50,6 @@ export class KolAll implements Generic.Element.ComponentApi - diff --git a/packages/components/src/components/@else/all/readme.md b/packages/components/src/components/@else/all/readme.md index e6b87f370b..7a77e6e641 100644 --- a/packages/components/src/components/@else/all/readme.md +++ b/packages/components/src/components/@else/all/readme.md @@ -36,7 +36,6 @@ - [kol-select](../select) - [kol-skip-nav](../skip-nav) - [kol-spin](../spin) -- [kol-table](../table) - [kol-tabs](../tabs) - [kol-textarea](../textarea) - [kol-tooltip](../tooltip) @@ -76,7 +75,6 @@ graph TD; kol-all --> kol-select kol-all --> kol-skip-nav kol-all --> kol-spin - kol-all --> kol-table kol-all --> kol-tabs kol-all --> kol-textarea kol-all --> kol-tooltip @@ -112,8 +110,6 @@ graph TD; kol-pagination --> kol-button kol-select --> kol-alert kol-skip-nav --> kol-link - kol-table --> kol-button - kol-table --> kol-select kol-tabs --> kol-icon-icofont kol-textarea --> kol-alert kol-version --> kol-badge diff --git a/packages/components/src/components/component-list.ts b/packages/components/src/components/component-list.ts index 2a855d251f..3f8f98025b 100644 --- a/packages/components/src/components/component-list.ts +++ b/packages/components/src/components/component-list.ts @@ -43,7 +43,6 @@ import { KolSpin } from './spin/shadow'; import { KolSingleSelect } from './single-select/shadow'; import { KolSplitButton } from './split-button/shadow'; import { KolSymbol } from './symbol/component'; -import { KolTable } from './table/shadow'; import { KolTabs } from './tabs/shadow'; import { KolTextarea } from './textarea/shadow'; import { KolToastContainer } from './toaster/shadow'; @@ -103,7 +102,6 @@ export const COMPONENTS = [ KolSingleSelect, KolSplitButton, KolSymbol, - KolTable, KolTabs, KolTextarea, KolToastContainer, diff --git a/packages/components/src/components/table/shadow.tsx b/packages/components/src/components/table/shadow.tsx deleted file mode 100644 index c148fb0111..0000000000 --- a/packages/components/src/components/table/shadow.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import type { - KoliBriTableDataType, - KoliBriTableHeaders, - KoliBriTablePaginationProps, - PaginationPositionPropType, - Stringified, - TableProps, - TableSelectionPropType, - TableStatefulCallbacksPropType, -} from '../../schema'; -import type { JSX } from '@stencil/core'; -import { h } from '@stencil/core'; -import { Component, Prop } from '@stencil/core'; -import { KolTableStatefulTag } from '../../core/component-names'; - -/** - * @deprecated Use KolTableStateful instead. - */ -@Component({ - tag: 'kol-table', - shadow: true, -}) -export class KolTable implements TableProps { - /** - * Defines whether to allow multi sort. - */ - @Prop() public _allowMultiSort?: boolean; - - /** - * Defines the primary table data. - */ - @Prop() public _data!: Stringified; - - /** - * Defines the data for the table footer. - */ - @Prop() public _dataFoot?: Stringified; - - /** - * Defines the horizontal and vertical table headers. - */ - @Prop() public _headers!: Stringified; - - /** - * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). - */ - @Prop() public _label!: string; - - /** - * Defines the table min-width. - */ - @Prop() public _minWidth?: string; - - /** - * Defines whether to show the data distributed over multiple pages. - */ - @Prop() public _pagination?: boolean | Stringified; - /** - * Controls the position of the pagination. - */ - @Prop() public _paginationPosition?: PaginationPositionPropType = 'bottom'; - /** - * Defines how rows can be selected and the current selection. - */ - @Prop() public _selection?: TableSelectionPropType; - /** - * Defines the callback functions for table events. - */ - @Prop() public _on?: TableStatefulCallbacksPropType; - - public render(): JSX.Element { - return ( - - ); - } -} diff --git a/packages/components/src/core/component-names.ts b/packages/components/src/core/component-names.ts index 0244f6e9c0..3a548d003c 100644 --- a/packages/components/src/core/component-names.ts +++ b/packages/components/src/core/component-names.ts @@ -47,7 +47,6 @@ export let KolSymbolTag = 'kol-symbol' as const; export let KolTableStatefulTag = 'kol-table-stateful'; export let KolTableStatelessTag = 'kol-table-stateless' as const; export let KolTableStatelessWcTag = 'kol-table-stateless-wc' as const; -export let KolTableTag = 'kol-table' as const; export let KolTabsTag = 'kol-tabs' as const; export let KolTextareaTag = 'kol-textarea' as const; export let KolToastContainerTag = 'kol-toast-container' as const; @@ -109,7 +108,6 @@ export const setCustomTagNames = (transformTagName: (tagName: string) => string) KolTableStatefulTag = transformTagName(KolTableStatefulTag) as 'kol-table-stateful'; KolTableStatelessTag = transformTagName(KolTableStatelessTag as string) as 'kol-table-stateless'; KolTableStatelessWcTag = transformTagName(KolTableStatelessWcTag as string) as 'kol-table-stateless-wc'; - KolTableTag = transformTagName(KolTableTag as string) as 'kol-table'; KolTabsTag = transformTagName(KolTabsTag as string) as 'kol-tabs'; KolTextareaTag = transformTagName(KolTextareaTag as string) as 'kol-textarea'; KolToastContainerTag = transformTagName(KolToastContainerTag as string) as 'kol-toast-container'; diff --git a/packages/components/src/schema/components/table.ts b/packages/components/src/schema/components/table.ts index 8b457fb284..6d5cbc57d2 100644 --- a/packages/components/src/schema/components/table.ts +++ b/packages/components/src/schema/components/table.ts @@ -68,6 +68,5 @@ type OptionalStates = { selection: KoliBriTableSelection; } & StatefulPropTableCallbacks; -export type TableProps = Generic.Element.Members; export type TableStates = Generic.Element.Members; export type TableAPI = Generic.Element.ComponentApi; diff --git a/packages/components/stencil.config.ts b/packages/components/stencil.config.ts index 920d5ff6f8..c4afca6733 100644 --- a/packages/components/stencil.config.ts +++ b/packages/components/stencil.config.ts @@ -48,7 +48,6 @@ const TAGS = [ 'kol-spin', 'kol-split-button', 'kol-symbol', - 'kol-table', 'kol-table-stateless', 'kol-table-stateful', 'kol-tabs', diff --git a/packages/designer/src/components/editor/store.tsx b/packages/designer/src/components/editor/store.tsx index f9188005b4..01d85ae069 100644 --- a/packages/designer/src/components/editor/store.tsx +++ b/packages/designer/src/components/editor/store.tsx @@ -1,4 +1,4 @@ -import { Bundesanstalt, Bundesministerium, ButtonOrLinkOrTextWithChildrenProps, SelectOption, TabButtonProps, ToasterService } from '@public-ui/components'; +import { AlertType, ButtonOrLinkOrTextWithChildrenProps, SelectOption, TabButtonProps, ToasterService } from '@public-ui/components'; import { KolAbbr, KolAccordion, @@ -31,15 +31,12 @@ import { KolSelect, KolSkipNav, KolSpin, - KolTable, KolTabs, KolTextarea, KolVersion, } from '@public-ui/solid'; import { Component } from 'solid-js'; import { COUNTRIES } from './countries'; -import { DATA, Zeiten } from './data'; -import { AlertType } from '@public-ui/components'; // https://css-tricks.com/snippets/javascript/random-hex-color/ const randomColor = () => Math.floor(Math.random() * 16777215).toString(16); @@ -1306,114 +1303,6 @@ export const components: Record = { ), - 'KOL-TABLE': () => ( -
- { - return data.sort((first, second) => { - if (first.stadtteil < second.stadtteil) { - return -1; - } - if (first.stadtteil > second.stadtteil) { - return 1; - } - return 0; - }); - }, - }, - { label: 'Montag', key: 'montag', textAlign: 'center' }, - { label: 'Dienstag', key: 'dienstag', textAlign: 'center' }, - { label: 'Mittwoch', key: 'mittwoch', textAlign: 'center' }, - { label: 'Donnerstag', key: 'donnerstag', textAlign: 'center' }, - { label: 'Freitag', key: 'freitag', textAlign: 'center' }, - ], - ], - }} - _minWidth="50em" - _pagination={{ - _page: 1, - }} - style={{ - display: 'inline-grid', - width: '100%', - }} - /> - -
- ), 'KOL-TABS': () => (
diff --git a/packages/designer/src/components/tags.ts b/packages/designer/src/components/tags.ts index dafbbfbc0e..7ad757b85e 100644 --- a/packages/designer/src/components/tags.ts +++ b/packages/designer/src/components/tags.ts @@ -37,7 +37,6 @@ export const TAG_NAMES: string[] = [ 'kol-progress', 'kol-skip-nav', 'kol-spin', - 'kol-table', 'kol-tabs', 'kol-toast-container', 'kol-tooltip-wc', diff --git a/packages/samples/react/src/components/handout/basic.tsx b/packages/samples/react/src/components/handout/basic.tsx index 2064330531..3699d4e8f8 100644 --- a/packages/samples/react/src/components/handout/basic.tsx +++ b/packages/samples/react/src/components/handout/basic.tsx @@ -29,7 +29,7 @@ import { KolNav, KolProgress, KolSelect, - KolTable, + KolTableStateful, KolTabs, KolTextarea, KolVersion, @@ -475,7 +475,7 @@ export const HandoutBasic: FC = () => {
- +
diff --git a/packages/samples/react/src/components/table/column-alignment.tsx b/packages/samples/react/src/components/table/column-alignment.tsx index 2b375b1d54..1b8cb70117 100644 --- a/packages/samples/react/src/components/table/column-alignment.tsx +++ b/packages/samples/react/src/components/table/column-alignment.tsx @@ -1,7 +1,7 @@ import type { FC } from 'react'; import React from 'react'; -import { KolHeading, KolTable } from '@public-ui/react'; +import { KolHeading, KolTableStateful } from '@public-ui/react'; import { SampleDescription } from '../SampleDescription'; @@ -11,12 +11,12 @@ const genericNonSorter = (data: T): T => data; export const TableColumnAlignment: FC = () => ( <> -

This sample shows KolTable with columns headers and data in different text alignments.

+

This sample shows KolTableStateful with columns headers and data in different text alignments.
- ( /> - ( /> - ( /> - ( <> -

This sample shows KolTable using vertical and horizontal headers, applying colspan and rowspan.

+

This sample shows KolTableStateful using vertical and horizontal headers, applying colspan and rowspan.
- { <>

- This sample shows KolTable with and without horizontal scrollbars. When a scrollbar is present, it should be possible to focus the table container and - to scroll it using arrow keys. + This sample shows KolTableStateful with and without horizontal scrollbars. When a scrollbar is present, it should be possible to focus the table + container and to scroll it using arrow keys.

- { - { Scrollbar appears on very small viewport sizes

- +
); diff --git a/packages/samples/react/src/components/table/multi-sort.tsx b/packages/samples/react/src/components/table/multi-sort.tsx index 5a59d7a8b9..742d0d9e25 100644 --- a/packages/samples/react/src/components/table/multi-sort.tsx +++ b/packages/samples/react/src/components/table/multi-sort.tsx @@ -1,7 +1,7 @@ import type { FC } from 'react'; import React, { useState } from 'react'; -import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react'; +import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react'; import type { KoliBriTableHeaders, KoliBriTableDataType } from '@public-ui/components'; import type { Data } from './test-data'; import { DATA } from './test-data'; @@ -74,7 +74,7 @@ export const MultiSortTable: FC = () => { return ( <> -

This sample shows KolTable with multi-sort functionality, allowing sorting by both "order" and "date" columns.

+

This sample shows KolTableStateful with multi-sort functionality, allowing sorting by both "order" and "date" columns.
@@ -86,7 +86,7 @@ export const MultiSortTable: FC = () => { _variant="switch" _on={{ onChange: (_, value) => setAllowMultiSortVertical(Boolean(value)) }} > - { _variant="switch" _on={{ onChange: (_, value) => setAllowMultiSortHorizontal(Boolean(value)) }} > - (
-

This sample shows KolTable with different pagination positions.

+

This sample shows KolTableStateful with different pagination positions.
- +
- +
- +
diff --git a/packages/samples/react/src/components/table/render-cell.tsx b/packages/samples/react/src/components/table/render-cell.tsx index 1442ddc7b3..ed6d2b9573 100644 --- a/packages/samples/react/src/components/table/render-cell.tsx +++ b/packages/samples/react/src/components/table/render-cell.tsx @@ -1,7 +1,7 @@ import type { FC } from 'react'; import React from 'react'; -import { createReactRenderElement, KolButton, KolInputText, KolTable } from '@public-ui/react'; +import { createReactRenderElement, KolButton, KolInputText, KolTableStateful } from '@public-ui/react'; import { getRoot } from '../../shares/react-roots'; import { SampleDescription } from '../SampleDescription'; @@ -112,9 +112,9 @@ const HEADERS: KoliBriTableHeaders = { export const TableRenderCell: FC = () => ( <> -

This sample shows KolTable using React render functions for the cell contents.

+

This sample shows KolTableStateful using React render functions for the cell contents.

 - + ); diff --git a/packages/samples/react/src/components/table/sort-data.tsx b/packages/samples/react/src/components/table/sort-data.tsx index df322b5e01..648cff1259 100644 --- a/packages/samples/react/src/components/table/sort-data.tsx +++ b/packages/samples/react/src/components/table/sort-data.tsx @@ -1,7 +1,7 @@ import type { FC } from 'react'; import React from 'react'; -import { KolHeading, KolTable } from '@public-ui/react'; +import { KolHeading, KolTableStateful } from '@public-ui/react'; import type { KoliBriTableHeaders } from '@public-ui/components'; import type { Data } from './test-data'; import { DATA } from './test-data'; @@ -56,17 +56,17 @@ const HEADERS_VERTICAL: KoliBriTableHeaders = { export const TableSortData: FC = () => ( <> -

This sample shows KolTable with sortable columns. The sort-order can be changed by clicking the "date" header column.

+

This sample shows KolTableStateful with sortable columns. The sort-order can be changed by clicking the "date" header column.
- +
- +
diff --git a/packages/samples/react/src/components/table/with-footer.tsx b/packages/samples/react/src/components/table/with-footer.tsx index 71fcaaca2c..98d3265638 100644 --- a/packages/samples/react/src/components/table/with-footer.tsx +++ b/packages/samples/react/src/components/table/with-footer.tsx @@ -1,15 +1,15 @@ import type { FC } from 'react'; import React from 'react'; -import { KolTable } from '@public-ui/react'; +import { KolTableStateful } from '@public-ui/react'; import { SampleDescription } from '../SampleDescription'; export const TableWithFooter: FC = () => ( <> -

This sample shows KolTable with footer data.

+

This sample shows KolTableStateful with footer data.

 - ( <> -

This sample shows how KolTable can be navigated using a pagination.

+

This sample shows how KolTableStateful can be navigated using a pagination.
- +
); diff --git a/packages/samples/react/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx b/packages/samples/react/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx index cb76da6453..77ed3d5961 100644 --- a/packages/samples/react/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx +++ b/packages/samples/react/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { KolTable, KolTabs, KolNav } from '@public-ui/react'; +import { KolTableStateful, KolTabs, KolNav } from '@public-ui/react'; import type { KoliBriTableHeaders, TabButtonProps } from '@public-ui/components'; import { SampleDescription } from '../../components/SampleDescription'; import { LINKS } from '../../components/nav/links'; @@ -62,7 +62,7 @@ function TableHorizontalScrollbarAdvanced() {
-