@public-ui/sample-react 2.1.7 → 2.1.8-rc.0

package/src/components/table/interactive-child-elements.tsx

@@ -1,10 +1,9 @@
+import type { ButtonVariantPropType, KoliBriTableCell, KoliBriTableHeaderCell } from '@public-ui/components';
+import { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react';
 import type { FC } from 'react';
 import React from 'react';
-import { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react';
-import { SampleDescription } from '../SampleDescription';
 import { getRoot } from '../../shares/react-roots';
-import type { ButtonVariantPropType, KoliBriTableCell } from '@public-ui/components';
-import type { KoliBriTableHeaderCell } from '@public-ui/components/src/schema';
+import { SampleDescription } from '../SampleDescription';
 
 const getButtonHeaderCell = (variant: ButtonVariantPropType): KoliBriTableHeaderCell => {
 	const capitalizedVariant = variant.charAt(0).toUpperCase() + variant.slice(1);
@@ -33,73 +32,75 @@ export const InteractiveChildElements: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolTableStateless
-			_label="Button styles"
-			_headerCells={{
-				horizontal: [
-					[
-						{ label: '', asTd: true, width: '20ex' },
-						getButtonHeaderCell('primary'),
-						getButtonHeaderCell('secondary'),
-						getButtonHeaderCell('normal'),
-						getButtonHeaderCell('danger'),
-						getButtonHeaderCell('ghost'),
+		<section className="w-full flex flex-col">
+			<KolTableStateless
+				_label="Button styles"
+				_headerCells={{
+					horizontal: [
+						[
+							{ label: '', asTd: true, width: '20ex' },
+							getButtonHeaderCell('primary'),
+							getButtonHeaderCell('secondary'),
+							getButtonHeaderCell('normal'),
+							getButtonHeaderCell('danger'),
+							getButtonHeaderCell('ghost'),
+						],
 					],
-				],
-				vertical: [[{ label: 'Button' }, { label: 'Link-Button' }]],
-			}}
-			_data={[
-				{
-					primary: 'button',
-					secondary: 'button',
-					normal: 'button',
-					danger: 'button',
-					ghost: 'button',
-				},
-				{
-					primary: 'link-button',
-					secondary: 'link-button',
-					normal: 'link-button',
-					danger: 'link-button',
-					ghost: 'link-button',
-				},
-			]}
-			className="block"
-		/>
+					vertical: [[{ label: 'Button' }, { label: 'Link-Button' }]],
+				}}
+				_data={[
+					{
+						primary: 'button',
+						secondary: 'button',
+						normal: 'button',
+						danger: 'button',
+						ghost: 'button',
+					},
+					{
+						primary: 'link-button',
+						secondary: 'link-button',
+						normal: 'link-button',
+						danger: 'link-button',
+						ghost: 'link-button',
+					},
+				]}
+				className="block"
+			/>
 
-		<KolTableStateless
-			_label="Link styles"
-			_headerCells={{
-				horizontal: [
-					[
-						{ label: '', asTd: true, width: '20ex' },
-						{
-							key: 'regular',
-							label: 'Regular',
-							textAlign: 'left',
-							render: (element: HTMLElement, cell: KoliBriTableCell) => {
-								const commonProps = {
-									_label: cell.label,
-									_icons: { right: 'codicon codicon-squirrel' },
-								};
-								getRoot(createReactRenderElement(element)).render(
-									cell.label === 'button-link' ? <KolButtonLink {...commonProps} /> : <KolLink _href="#/back-page" {...commonProps} />,
-								);
+			<KolTableStateless
+				_label="Link styles"
+				_headerCells={{
+					horizontal: [
+						[
+							{ label: '', asTd: true, width: '20ex' },
+							{
+								key: 'regular',
+								label: 'Regular',
+								textAlign: 'left',
+								render: (element: HTMLElement, cell: KoliBriTableCell) => {
+									const commonProps = {
+										_label: cell.label,
+										_icons: { right: 'codicon codicon-squirrel' },
+									};
+									getRoot(createReactRenderElement(element)).render(
+										cell.label === 'button-link' ? <KolButtonLink {...commonProps} /> : <KolLink _href="#/back-page" {...commonProps} />,
+									);
+								},
 							},
-						},
+						],
 					],
-				],
-				vertical: [[{ label: 'Link' }, { label: 'Button-Link' }]],
-			}}
-			_data={[
-				{
-					regular: 'link',
-				},
-				{
-					regular: 'button-link',
-				},
-			]}
-			className="block mt"
-		/>
+					vertical: [[{ label: 'Link' }, { label: 'Button-Link' }]],
+				}}
+				_data={[
+					{
+						regular: 'link',
+					},
+					{
+						regular: 'button-link',
+					},
+				]}
+				className="block mt"
+			/>
+		</section>
 	</>
 );

package/src/components/table/pagination-position.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolTable } from '@public-ui/react';
+import { KolHeading, KolTable } from '@public-ui/react';
 
 import { SampleDescription } from '../SampleDescription';
 import { DATE_FORMATTER } from './formatter';
@@ -21,22 +21,24 @@ const HEADERS: KoliBriTableHeaders = {
 const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
 
 export const PaginationPosition: FC = () => (
-	<div className="grid gap-14">
+	<div className="w-full grid gap-14">
 		<SampleDescription>
 			<p>This sample shows KolTable with different pagination positions.</p>
 		</SampleDescription>
 
-		<section>
-			<h2>Table with pagination at the bottom.</h2>
-			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="bottom"></KolTable>
-		</section>
-		<section>
-			<h2>Table with pagination at the top.</h2>
-			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="top"></KolTable>
-		</section>
-		<section>
-			<h2>Table with pagination at both top and bottom.</h2>
-			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="both"></KolTable>
+		<section className="w-full flex flex-col gap-14">
+			<section className="grid gap-4">
+				<KolHeading _level={2} _label="Table with pagination at the bottom."></KolHeading>
+				<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="bottom"></KolTable>
+			</section>
+			<section className="grid gap-4">
+				<KolHeading _level={2} _label="Table with pagination at the top."></KolHeading>
+				<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="top"></KolTable>
+			</section>
+			<section className="grid gap-4">
+				<KolHeading _level={2} _label="Table with pagination at both top and bottom."></KolHeading>
+				<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="both"></KolTable>
+			</section>
 		</section>
 	</div>
 );

package/src/components/table/render-cell.tsx

@@ -104,6 +104,6 @@ export const TableRenderCell: FC = () => (
 			<p>This sample shows KolTable using React render functions for the cell contents.</p>
 		</SampleDescription>
 
-		<KolTable _label="Sort by date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />
+		<KolTable _label="Sort by date column" _data={DATA} _headers={HEADERS} className="w-full" />
 	</>
 );

package/src/components/table/sort-data.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolTable } from '@public-ui/react';
+import { KolHeading, KolTable } from '@public-ui/react';
 import type { KoliBriTableHeaders } from '@public-ui/components';
 import type { Data } from './test-data';
 import { DATA } from './test-data';
@@ -59,12 +59,15 @@ export const TableSortData: FC = () => (
 			<p>This sample shows KolTable with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>
 		</SampleDescription>
 
-		<h2>Vertical</h2>
-
-		<KolTable _label="Sort a date column" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className="block" />
-
-		<h2>Horizontal</h2>
-
-		<KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS_HORIZONTAL} className="block" />
+		<section className="w-full grid gap-4">
+			<section className="grid gap-4">
+				<KolHeading _level={2} _label="Vertical" />
+				<KolTable _label="Sort a date column" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className="block" />
+			</section>
+			<section className="grid gap-4">
+				<KolHeading _level={2} _label="Horizontal" />
+				<KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS_HORIZONTAL} className="block" />
+			</section>
+		</section>
 	</>
 );

package/src/components/table/stateful-with-selection.tsx

@@ -1,8 +1,10 @@
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
-import { KolButton, KolTableStateful } from '@public-ui/react';
+import { KolButton, KolTableStateful, createReactRenderElement } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
+import { getRoot } from '../../shares/react-roots';
+import type { KoliBriTableCell } from '@public-ui/components';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -43,40 +45,47 @@ export const TableStatefulWithSelection: FC = () => {
 		};
 	}, [kolTableStatefulRef]);
 
+	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
+		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Click ${cell.data?.id}`}></KolButton>);
+	};
+
 	return (
 		<>
 			<SampleDescription>
 				<p>This sample shows KolTableStateful with checkboxes for selection enabled.</p>
 			</SampleDescription>
 
-			<KolTableStateful
-				_label="Table with selection checkboxes"
-				_headers={{
-					horizontal: [
-						[
-							{ key: 'id', label: '#ID', textAlign: 'left' },
-							{ key: 'name', label: 'Name', textAlign: 'left' },
+			<section className="w-full">
+				<KolTableStateful
+					_label="Table with selection checkboxes"
+					_headers={{
+						horizontal: [
+							[
+								{ key: 'id', label: '#ID', textAlign: 'left' },
+								{ key: 'name', label: 'Name', textAlign: 'left' },
+								{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },
+							],
 						],
-					],
-				}}
-				_data={DATA}
-				_selection={selection}
-				_on={{ onSelectionChange: handleSelectionChangeCallback }}
-				className="block"
-				style={{ maxWidth: '600px' }}
-				ref={kolTableStatefulRef}
-			/>
-			<div className="grid grid-cols-3 items-end gap-4 mt-4">
-				<KolButton
-					_label="getSelection()"
-					_on={{
-						onClick: () => {
-							void handleButtonClick();
-						},
 					}}
-				></KolButton>
-				<pre>{JSON.stringify(selectedValue, null, 2)}</pre>
-			</div>
+					_data={DATA}
+					_selection={selection}
+					_on={{ onSelectionChange: handleSelectionChangeCallback }}
+					className="block"
+					style={{ maxWidth: '600px' }}
+					ref={kolTableStatefulRef}
+				/>
+				<div className="grid grid-cols-3 items-end gap-4 mt-4">
+					<KolButton
+						_label="getSelection()"
+						_on={{
+							onClick: () => {
+								void handleButtonClick();
+							},
+						}}
+					></KolButton>
+					<pre className="text-base">{JSON.stringify(selectedValue, null, 2)}</pre>
+				</div>
+			</section>
 		</>
 	);
 };

package/src/components/table/stateful-with-single-selection.tsx

@@ -1,8 +1,10 @@
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
-import { KolButton, KolTableStateful } from '@public-ui/react';
+import { KolButton, KolTableStateful, createReactRenderElement } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
+import { getRoot } from '../../shares/react-roots';
+import type { KoliBriTableCell } from '@public-ui/components';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -45,40 +47,47 @@ export const TableStatefulWithSingleSelection: FC = () => {
 		};
 	}, [kolTableStatefulRef]);
 
+	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
+		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Click ${cell.data?.id}`}></KolButton>);
+	};
+
 	return (
 		<>
 			<SampleDescription>
 				<p>This sample shows KolTableStateful with radio buttons for selection enabled.</p>
 			</SampleDescription>
 
-			<KolTableStateful
-				_label="Table with selection radio"
-				_headers={{
-					horizontal: [
-						[
-							{ key: 'id', label: '#ID', textAlign: 'left' },
-							{ key: 'name', label: 'Name', textAlign: 'left' },
+			<section className="w-full">
+				<KolTableStateful
+					_label="Table with selection radio"
+					_headers={{
+						horizontal: [
+							[
+								{ key: 'id', label: '#ID', textAlign: 'left' },
+								{ key: 'name', label: 'Name', textAlign: 'left' },
+								{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },
+							],
 						],
-					],
-				}}
-				_data={DATA}
-				_selection={selection}
-				_on={{ onSelectionChange: handleSelectionChangeCallback }}
-				className="block"
-				style={{ maxWidth: '600px' }}
-				ref={kolTableStatefulRef}
-			/>
-			<div className="grid grid-cols-3 items-end gap-4 mt-4">
-				<KolButton
-					_label="getSelection()"
-					_on={{
-						onClick: () => {
-							void handleButtonClick();
-						},
 					}}
-				></KolButton>
-				<pre>{JSON.stringify(selectedValue, null, 2)}</pre>
-			</div>
+					_data={DATA}
+					_selection={selection}
+					_on={{ onSelectionChange: handleSelectionChangeCallback }}
+					className="block"
+					style={{ maxWidth: '600px' }}
+					ref={kolTableStatefulRef}
+				/>
+				<div className="grid grid-cols-3 items-end gap-4 mt-4">
+					<KolButton
+						_label="getSelection()"
+						_on={{
+							onClick: () => {
+								void handleButtonClick();
+							},
+						}}
+					></KolButton>
+					<pre className="text-base">{JSON.stringify(selectedValue, null, 2)}</pre>
+				</div>
+			</section>
 		</>
 	);
 };

package/src/components/table/stateless-with-selection.tsx

@@ -1,8 +1,10 @@
 import type { FC } from 'react';
 import React, { useEffect, useState, useRef } from 'react';
-import { KolTableStateless } from '@public-ui/react';
+import { KolButton, KolTableStateless, createReactRenderElement } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableSelection } from '@public-ui/components';
+import { getRoot } from '../../shares/react-roots';
+import type { KoliBriTableCell } from '@public-ui/components';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -39,29 +41,36 @@ export const TableStatelessWithSelection: FC = () => {
 		};
 	}, [kolTableStatelessRef]);
 
+	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
+		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Click ${cell.data?.id}`}></KolButton>);
+	};
+
 	return (
 		<>
 			<SampleDescription>
 				<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>
 			</SampleDescription>
 
-			<KolTableStateless
-				_label="Table with selection checkboxes"
-				_headerCells={{
-					horizontal: [
-						[
-							{ key: 'id', label: '#ID', textAlign: 'left' },
-							{ key: 'name', label: 'Name', textAlign: 'left' },
+			<section className="w-full">
+				<KolTableStateless
+					_label="Table with selection checkboxes"
+					_headerCells={{
+						horizontal: [
+							[
+								{ key: 'id', label: '#ID', textAlign: 'left' },
+								{ key: 'name', label: 'Name', textAlign: 'left' },
+								{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },
+							],
 						],
-					],
-				}}
-				_data={DATA}
-				_selection={selection}
-				_on={{ onSelectionChange: handleSelectionChangeCallback }}
-				className="block"
-				style={{ maxWidth: '600px' }}
-				ref={kolTableStatelessRef}
-			/>
+					}}
+					_data={DATA}
+					_selection={selection}
+					_on={{ onSelectionChange: handleSelectionChangeCallback }}
+					className="block"
+					style={{ maxWidth: '600px' }}
+					ref={kolTableStatelessRef}
+				/>
+			</section>
 		</>
 	);
 };

package/src/components/table/stateless-with-single-selection.tsx

@@ -1,8 +1,10 @@
 import type { FC } from 'react';
 import React, { useEffect, useState, useRef } from 'react';
-import { KolTableStateless } from '@public-ui/react';
+import { KolButton, KolTableStateless, createReactRenderElement } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableSelection } from '@public-ui/components';
+import { getRoot } from '../../shares/react-roots';
+import type { KoliBriTableCell } from '@public-ui/components';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -40,29 +42,36 @@ export const TableStatelessWithSingleSelection: FC = () => {
 		};
 	}, [kolTableStatelessRef]);
 
+	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
+		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Click ${cell.data?.id}`}></KolButton>);
+	};
+
 	return (
 		<>
 			<SampleDescription>
 				<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>
 			</SampleDescription>
 
-			<KolTableStateless
-				_label="Table with selection checkboxes"
-				_headerCells={{
-					horizontal: [
-						[
-							{ key: 'id', label: '#ID', textAlign: 'left' },
-							{ key: 'name', label: 'Name', textAlign: 'left' },
+			<section className="w-full">
+				<KolTableStateless
+					_label="Table with selection checkboxes"
+					_headerCells={{
+						horizontal: [
+							[
+								{ key: 'id', label: '#ID', textAlign: 'left' },
+								{ key: 'name', label: 'Name', textAlign: 'left' },
+								{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },
+							],
 						],
-					],
-				}}
-				_data={DATA}
-				_selection={selection}
-				_on={{ onSelectionChange: handleSelectionChangeCallback }}
-				className="block"
-				style={{ maxWidth: '600px' }}
-				ref={kolTableStatelessRef}
-			/>
+					}}
+					_data={DATA}
+					_selection={selection}
+					_on={{ onSelectionChange: handleSelectionChangeCallback }}
+					className="block"
+					style={{ maxWidth: '600px' }}
+					ref={kolTableStatelessRef}
+				/>
+			</section>
 		</>
 	);
 };

package/src/components/table/stateless.tsx

@@ -11,34 +11,36 @@ export const TableStateless: FC = () => (
 			<p>This sample shows how KolTableStateless can be used directly, with the KolTableStateful wrapper.</p>
 		</SampleDescription>
 
-		<KolTableStateless
-			_label="Table for demonstration purposes"
-			_headerCells={{
-				horizontal: [
-					[
-						{ key: 'left', label: 'left', textAlign: 'left', sortDirection: 'ASC' },
-						{ key: 'center', label: 'center', textAlign: 'center', sortDirection: 'DESC' },
-						{ key: 'right', label: 'right', textAlign: 'right', sortDirection: 'NOS' },
-						{ key: 'nosort', label: 'no sort option' },
+		<section className="w-full">
+			<KolTableStateless
+				_label="Table for demonstration purposes"
+				_headerCells={{
+					horizontal: [
+						[
+							{ key: 'left', label: 'left', textAlign: 'left', sortDirection: 'ASC' },
+							{ key: 'center', label: 'center', textAlign: 'center', sortDirection: 'DESC' },
+							{ key: 'right', label: 'right', textAlign: 'right', sortDirection: 'NOS' },
+							{ key: 'nosort', label: 'no sort option' },
+						],
 					],
-				],
-				vertical: [
-					[
-						{ key: 'vertical-left', label: 'left', textAlign: 'left', sortDirection: 'ASC' },
-						{ key: 'vertical-center', label: 'center', textAlign: 'center', sortDirection: 'DESC' },
-						{ key: 'vertical-right', label: 'right', textAlign: 'right', sortDirection: 'NOS' },
-						{ key: 'vertical-nosort', label: 'no sort option' },
+					vertical: [
+						[
+							{ key: 'vertical-left', label: 'left', textAlign: 'left', sortDirection: 'ASC' },
+							{ key: 'vertical-center', label: 'center', textAlign: 'center', sortDirection: 'DESC' },
+							{ key: 'vertical-right', label: 'right', textAlign: 'right', sortDirection: 'NOS' },
+							{ key: 'vertical-nosort', label: 'no sort option' },
+						],
 					],
-				],
-			}}
-			_data={DATA}
-			className="block"
-			style={{ maxWidth: '600px' }}
-			_on={{
-				onSort: (_event, payload) => {
-					console.log(payload);
-				},
-			}}
-		/>
+				}}
+				_data={DATA}
+				className="block"
+				style={{ maxWidth: '600px' }}
+				_on={{
+					onSort: (_event, payload) => {
+						console.log(payload);
+					},
+				}}
+			/>
+		</section>
 	</>
 );

package/src/components/table/with-footer.tsx

@@ -10,6 +10,7 @@ export const TableWithFooter: FC = () => (
 		</SampleDescription>
 
 		<KolTable
+			className="w-full"
 			_label="Business hours"
 			_headers={{
 				horizontal: [

package/src/components/table/with-pagination.tsx

@@ -25,7 +25,7 @@ export const TableWithPagination: FC = () => (
 		<SampleDescription>
 			<p>This sample shows how KolTable can be navigated using a pagination.</p>
 		</SampleDescription>
-		<div>
+		<div className="w-full">
 			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTable>
 		</div>
 	</>