@public-ui/sample-react 2.1.2 → 2.1.4-alpha.1

package/src/components/handout/table-data.ts

@@ -0,0 +1,543 @@
+export const TABLE_DATA = [
+	{
+		montag: 'Alex',
+		dienstag: 'Anna',
+		mittwoch: 'Amalia',
+		donnerstag: 'Arthur',
+		freitag: 'Alex',
+		samstag: 'Andrea',
+		sonntag: 'Arnold',
+	},
+	{
+		montag: 'Helena',
+		dienstag: 'Fabian',
+		mittwoch: 'Marie',
+		donnerstag: 'Ben',
+		freitag: 'Marcus',
+		samstag: 'Alex',
+		sonntag: 'Marcus',
+	},
+	{
+		montag: 'Fabian',
+		dienstag: 'Helena',
+		mittwoch: 'Fabian',
+		donnerstag: 'Maya',
+		freitag: 'Ben',
+		samstag: 'Alex',
+		sonntag: 'Helena',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Finn',
+		dienstag: 'Roger',
+		mittwoch: 'Christian',
+		donnerstag: 'Caspar',
+		freitag: 'David',
+		samstag: 'Bernard',
+		sonntag: 'Anna',
+	},
+	{
+		montag: 'Alex',
+		dienstag: 'Anna',
+		mittwoch: 'Amalia',
+		donnerstag: 'Arthur',
+		freitag: 'Alex',
+		samstag: 'Andrea',
+		sonntag: 'Arnold',
+	},
+	{
+		montag: 'Helena',
+		dienstag: 'Fabian',
+		mittwoch: 'Marie',
+		donnerstag: 'Ben',
+		freitag: 'Marcus',
+		samstag: 'Alex',
+		sonntag: 'Marcus',
+	},
+	{
+		montag: 'Fabian',
+		dienstag: 'Helena',
+		mittwoch: 'Fabian',
+		donnerstag: 'Maya',
+		freitag: 'Ben',
+		samstag: 'Alex',
+		sonntag: 'Helena',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Finn',
+		dienstag: 'Roger',
+		mittwoch: 'Christian',
+		donnerstag: 'Caspar',
+		freitag: 'David',
+		samstag: 'Bernard',
+		sonntag: 'Anna',
+	},
+	{
+		montag: 'Alex',
+		dienstag: 'Anna',
+		mittwoch: 'Amalia',
+		donnerstag: 'Arthur',
+		freitag: 'Alex',
+		samstag: 'Andrea',
+		sonntag: 'Arnold',
+	},
+	{
+		montag: 'Helena',
+		dienstag: 'Fabian',
+		mittwoch: 'Marie',
+		donnerstag: 'Ben',
+		freitag: 'Marcus',
+		samstag: 'Alex',
+		sonntag: 'Marcus',
+	},
+	{
+		montag: 'Fabian',
+		dienstag: 'Helena',
+		mittwoch: 'Fabian',
+		donnerstag: 'Maya',
+		freitag: 'Ben',
+		samstag: 'Alex',
+		sonntag: 'Helena',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Finn',
+		dienstag: 'Roger',
+		mittwoch: 'Christian',
+		donnerstag: 'Caspar',
+		freitag: 'David',
+		samstag: 'Bernard',
+		sonntag: 'Anna',
+	},
+	{
+		montag: 'Alex',
+		dienstag: 'Anna',
+		mittwoch: 'Amalia',
+		donnerstag: 'Arthur',
+		freitag: 'Alex',
+		samstag: 'Andrea',
+		sonntag: 'Arnold',
+	},
+	{
+		montag: 'Helena',
+		dienstag: 'Fabian',
+		mittwoch: 'Marie',
+		donnerstag: 'Ben',
+		freitag: 'Marcus',
+		samstag: 'Alex',
+		sonntag: 'Marcus',
+	},
+	{
+		montag: 'Fabian',
+		dienstag: 'Helena',
+		mittwoch: 'Fabian',
+		donnerstag: 'Maya',
+		freitag: 'Ben',
+		samstag: 'Alex',
+		sonntag: 'Helena',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Finn',
+		dienstag: 'Roger',
+		mittwoch: 'Christian',
+		donnerstag: 'Caspar',
+		freitag: 'David',
+		samstag: 'Bernard',
+		sonntag: 'Anna',
+	},
+	{
+		montag: 'Alex',
+		dienstag: 'Anna',
+		mittwoch: 'Amalia',
+		donnerstag: 'Arthur',
+		freitag: 'Alex',
+		samstag: 'Andrea',
+		sonntag: 'Arnold',
+	},
+	{
+		montag: 'Helena',
+		dienstag: 'Fabian',
+		mittwoch: 'Marie',
+		donnerstag: 'Ben',
+		freitag: 'Marcus',
+		samstag: 'Alex',
+		sonntag: 'Marcus',
+	},
+	{
+		montag: 'Fabian',
+		dienstag: 'Helena',
+		mittwoch: 'Fabian',
+		donnerstag: 'Maya',
+		freitag: 'Ben',
+		samstag: 'Alex',
+		sonntag: 'Helena',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Finn',
+		dienstag: 'Roger',
+		mittwoch: 'Christian',
+		donnerstag: 'Caspar',
+		freitag: 'David',
+		samstag: 'Bernard',
+		sonntag: 'Anna',
+	},
+];
+export type TableDataType = (typeof TABLE_DATA)[0];

package/src/components/input-checkbox/button.tsx

@@ -2,8 +2,9 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputCheckboxVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import type { Components } from '@public-ui/components';
+import { InputCheckboxVariants } from './partials/variants';
 
 export const InputCheckboxButton: FC = () => (
 	<>
@@ -15,6 +16,6 @@ export const InputCheckboxButton: FC = () => (
 				dargestellt.
 			</p>
 		</SampleDescription>
-		<FormWrap RefComponent={InputCheckboxVariants} _variant="button" />
+		<FormWrap<Components.KolInputCheckbox> RefComponent={InputCheckboxVariants} _variant="button" />
 	</>
 );

package/src/components/input-password/show-password.tsx

@@ -1,21 +1,11 @@
 import type { FC } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef } from 'react';
 
 import { KolForm, KolInputPassword } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputPasswordShowPassword: FC = () => {
-	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 	const passwordRef = useRef<HTMLKolInputPasswordElement>(null);
-	const handleTogglePasswordClick = () => {
-		setIsPasswordVisible(!isPasswordVisible);
-	};
-	useEffect(() => {
-		const input = passwordRef.current?.shadowRoot?.querySelector('input');
-		if (input) {
-			input.type = isPasswordVisible ? 'text' : 'password';
-		}
-	}, [isPasswordVisible]);
 
 	return (
 		<>
@@ -26,42 +16,14 @@ export const InputPasswordShowPassword: FC = () => {
 				</p>
 			</SampleDescription>
 			<KolForm>
-				<KolInputPassword
-					_placeholder="Mit 'Passwort anzeigen' Button"
-					_label="Passwort"
-					ref={passwordRef}
-					_smartButton={{
-						_icons: {
-							left: {
-								icon: 'codicon codicon-eye',
-							},
-						},
-						_hideLabel: true,
-						_label: `Passwort ${isPasswordVisible ? 'ausblenden' : 'einblenden'}`,
-						_on: {
-							onClick: handleTogglePasswordClick,
-						},
-					}}
-					className="block"
-				/>
+				<KolInputPassword _placeholder="Mit 'Passwort anzeigen' Button" _label="Passwort" ref={passwordRef} className="block" _variant="visibility-toggle" />
 				<KolInputPassword
 					_placeholder="Mit 'Passwort anzeigen' Button und disabled"
 					_label="Passwort"
 					ref={passwordRef}
-					_smartButton={{
-						_icons: {
-							left: {
-								icon: 'codicon codicon-eye',
-							},
-						},
-						_hideLabel: true,
-						_label: `Passwort ${isPasswordVisible ? 'ausblenden' : 'einblenden'}`,
-						_on: {
-							onClick: handleTogglePasswordClick,
-						},
-					}}
 					className="block"
 					_disabled
+					_variant="visibility-toggle"
 				/>
 			</KolForm>
 		</>

package/src/components/input-text/routes.ts

@@ -1,14 +1,12 @@
 import { Routes } from '../../shares/types';
 import { InputTextBasic } from './basic';
 import { InputTextBlur } from './blur';
-import { InputTextFocus } from './focus';
 import { InputTextHideErrors } from './hide-errors';
 
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
 		basic: InputTextBasic,
 		blur: InputTextBlur,
-		focus: InputTextFocus,
 		'hide-errors': InputTextHideErrors,
 	},
 };

package/src/components/skip-nav/basic.tsx

@@ -19,15 +19,15 @@ export const SkipNavBasic: FC = () => (
 			_links={[
 				{
 					_label: 'Zum Anfang',
-					_selector: 'header',
+					_href: '#header',
 				},
 				{
 					_label: 'Zum Formular',
-					_selector: '#form',
+					_href: '#form',
 				},
 				{
 					_label: 'Zum Ende',
-					_selector: 'footer',
+					_href: '#footer',
 				},
 			]}
 		></KolSkipNav>

package/src/components/table/badge-size.tsx

@@ -26,17 +26,17 @@ const HEADERS: KoliBriTableHeaders = {
 				textAlign: 'center',
 				width: '20em',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				sort: (data: Data[]) =>
+				sort: (data) =>
 					data.sort((data0, data1) => {
-						if (data0.date < data1.date) return -1;
-						else if (data1.date < data0.date) return 1;
+						if ((data0 as Data).date < (data1 as Data).date) return -1;
+						else if ((data1 as Data).date < (data0 as Data).date) return 1;
 						else return 0;
 					}),
 			},
 			{
 				label: 'Aktion',
 				key: 'order',
-				render: (el, cell, tupel) => {
+				render: (el) => {
 					getRoot(el).render(
 						<KolBadge
 							style={{

package/src/components/table/column-alignment.tsx

@@ -6,8 +6,7 @@ import { KolHeading, KolTable } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }];
-type Data = (typeof DATA)[0];
-const genericNonSorter = (data: Data[]): Data[] => data;
+const genericNonSorter = <T,>(data: T): T => data;
 
 export const TableColumnAlignment: FC = () => (
 	<>

package/src/components/table/horizontal-scrollbar.tsx

@@ -5,7 +5,7 @@ import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
 
 import { SampleDescription } from '../SampleDescription';
 
-import type { KoliBriTableHeaders } from '@public-ui/components/src';
+import type { KoliBriTableHeaders } from '@public-ui/components';
 
 const DATA = [{ small: 'Small Example', large: 'Larger Example' }];
 const HEADERS: KoliBriTableHeaders = {