Remove deprecated component KolTable and rewrite samples to KolTableS…

…tateful Refs: #7015
public-ui · Dec 17, 2024 · df8574f · df8574f
1 parent 8f53cb8
commit df8574f
Show file tree

Hide file tree

Showing 21 changed files with 55 additions and 252 deletions.
diff --git 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
@@ -50,7 +50,6 @@ export class KolAll implements Generic.Element.ComponentApi<RequiredProps, Optio
 				<kol-select _label="" _options={[]}></kol-select>
 				<kol-skip-nav _label="" _links={[]}></kol-skip-nav>
 				<kol-spin></kol-spin>
-				<kol-table _label="" _data={[]} _headers={{}}></kol-table>
 				<kol-tabs _label="" _tabs={[]}></kol-tabs>
 				<kol-textarea _label=""></kol-textarea>
 				<kol-tooltip-wc _label="Label"></kol-tooltip-wc>

diff --git 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
@@ -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
diff --git 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
@@ -68,6 +68,5 @@ type OptionalStates = {
 	selection: KoliBriTableSelection;
 } & StatefulPropTableCallbacks;
 
-export type TableProps = Generic.Element.Members<RequiredProps, OptionalProps>;
 export type TableStates = Generic.Element.Members<RequiredStates, OptionalStates>;
 export type TableAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;
diff --git 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
@@ -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<string, Component> = {
 			<KolSpin _show _variant="none" />
 		</div>
 	),
-	'KOL-TABLE': () => (
-		<div class="grid gap-6">
-			<KolTable
-				_label="Öffnungszeiten"
-				_data={DATA}
-				_headers={{
-					horizontal: [
-						[
-							{ label: '', asTd: true },
-							{ label: 'Tag', colSpan: 5 },
-						],
-						[
-							{
-								label: 'Stadtteil',
-								key: 'stadtteil',
-								textAlign: 'left',
-								sort: (data: Zeiten[]) => {
-									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%',
-				}}
-			/>
-			<KolTable
-				_label="Öffnungszeiten"
-				_data={[
-					{
-						asp: 'City',
-						montag: '08:00',
-						dienstag: '08:00',
-						mittwoch: '10:00',
-						donnerstag: '11:00',
-						freitag: '08:00',
-					},
-					{
-						asp: 'City-Süd',
-						montag: '08:00',
-						dienstag: '08:00',
-						mittwoch: '10:00',
-						donnerstag: '11:00',
-						freitag: '08:00',
-					},
-					{
-						asp: 'City-Nord',
-						montag: '08:00',
-						dienstag: '08:00',
-						mittwoch: '10:00',
-						donnerstag: '11:00',
-						freitag: '08:00',
-					},
-				]}
-				_headers={{
-					vertical: [[{ label: 'Berlin' }, { label: 'Hamburg' }, { label: 'München' }]],
-					horizontal: [
-						[
-							{ label: '' },
-							{
-								label: 'Stadtteil',
-								key: 'asp',
-							},
-							{
-								label: 'Montag',
-								key: 'montag',
-							},
-							{
-								label: 'Dienstag',
-								key: 'dienstag',
-							},
-							{
-								label: 'Mittwoch',
-								key: 'mittwoch',
-							},
-							{
-								label: 'Donnerstag',
-								key: 'donnerstag',
-							},
-							{
-								label: 'Freitag',
-								key: 'freitag',
-							},
-						],
-					],
-				}}
-			/>
-		</div>
-	),
 	'KOL-TABS': () => (
 		<div class="grid gap-6">
 			<KolTabs _label="" _selected={0} _tabs={DEFAULT_TABS} _align="top">

diff --git 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
@@ -29,7 +29,7 @@ import {
 	KolNav,
 	KolProgress,
 	KolSelect,
-	KolTable,
+	KolTableStateful,
 	KolTabs,
 	KolTextarea,
 	KolVersion,
@@ -475,7 +475,7 @@ export const HandoutBasic: FC = () => {
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Table with Pagination" _level={2}>
 					<div slot="" className="grid gap-2 p-2">
-						<KolTable _label="Table" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTable>
+						<KolTableStateful _label="Table" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>
 					</div>
 				</KolCard>
 			</div>

diff --git 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 = <T,>(data: T): T => data;
 export const TableColumnAlignment: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows KolTable with columns headers and data in different text alignments.</p>
+			<p>This sample shows KolTableStateful with columns headers and data in different text alignments.</p>
 		</SampleDescription>
 
 		<section className="w-full flex flex-col">
 			<KolHeading _label="Simple table" _level={3}></KolHeading>
-			<KolTable
+			<KolTableStateful
 				_label="Table for demonstration purposes with different text align properties"
 				_headers={{
 					horizontal: [
@@ -33,7 +33,7 @@ export const TableColumnAlignment: FC = () => (
 			/>
 
 			<KolHeading _label="Table with sortable columns" _level={3} className="block mt-6"></KolHeading>
-			<KolTable
+			<KolTableStateful
 				_label="Table for demonstration purposes with sortable columns"
 				_headers={{
 					horizontal: [
@@ -50,7 +50,7 @@ export const TableColumnAlignment: FC = () => (
 			/>
 
 			<KolHeading _label="Table some sortable columns" _level={3} className="block mt-6"></KolHeading>
-			<KolTable
+			<KolTableStateful
 				_label="Table for demonstration purposes with some but not all columns sortable"
 				_headers={{
 					horizontal: [
@@ -67,7 +67,7 @@ export const TableColumnAlignment: FC = () => (
 			/>
 
 			<KolHeading _label="Table with vertical heading" _level={3} className="block mt-6"></KolHeading>
-			<KolTable
+			<KolTableStateful
 				_label="Table for demonstration purposes with vertical heading"
 				_headers={{
 					horizontal: [