@public-ui/sample-react 4.0.0-alpha.4 → 4.0.0-alpha.5

package/src/components/button/routes.ts

@@ -3,16 +3,24 @@ import { ButtonAccessKey } from './access-key';
 import { ButtonAriaDescription } from './aria-description';
 import { ButtonBaselined } from './baselined';
 import { ButtonBasic } from './basic';
+import { ButtonDisabled } from './disabled';
 import { ButtonExpertSlot } from './expert-slot';
+import { ButtonHideLabel } from './hide-label';
 import { ButtonIcons } from './icons';
 import { ButtonRowReverseTooltip } from './row-reverse-tooltip';
 import { ButtonShortKey } from './short-key';
+import { ButtonSpinner } from './spinner';
+import { ButtonVariants } from './variants';
 import { ButtonWidth } from './width';
 
 export const BUTTON_ROUTES: Routes = {
 	button: {
 		basic: ButtonBasic,
+		variants: ButtonVariants,
+		disabled: ButtonDisabled,
+		'hide-label': ButtonHideLabel,
 		icons: ButtonIcons,
+		spinner: ButtonSpinner,
 		width: ButtonWidth,
 		'access-key': ButtonAccessKey,
 		'aria-description': ButtonAriaDescription,

package/src/components/button/row-reverse-tooltip.tsx

@@ -1,4 +1,4 @@
-import { KolButton } from '@public-ui/react-v19';
+import { KolButton, KolHeading } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -8,18 +8,18 @@ export const ButtonRowReverseTooltip: FC = () => {
 		<>
 			<SampleDescription>
 				<p>
-					This sample demonstrates how the tooltip adapts its width when containing long text inside a row-reverse flex container. The effect becomes visible
-					when inspecting the layout with DevTools and reducing the available width (e.g. by narrowing the screen).
+					This story demonstrates how the tooltip adapts its width when containing long text inside a row-reverse flex container. The effect becomes visible
+					when inspecting the layout with DevTools and reducing the available width (e.g., by narrowing the screen).
 				</p>
 			</SampleDescription>
 
-			<div className="flex flex-row-reverse">
-				<KolButton
-					_icons="codicon codicon-home"
-					_hideLabel
-					_label="This is a very, very long tooltip text that exceeds the width."
-					_variant="primary"
-				></KolButton>
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Button in Row-Reverse Container" />
+					<div className="flex flex-row-reverse">
+						<KolButton _icons="codicon codicon-home" _hideLabel _label="This is a very, very long tooltip text that exceeds the width." _variant="primary" />
+					</div>
+				</section>
 			</div>
 		</>
 	);

package/src/components/button/short-key.tsx

@@ -1,61 +1,9 @@
-import type { KoliBriTableHeaders } from '@public-ui/components';
-import { ToasterService } from '@public-ui/components';
-import { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react-v19';
+import { KolButton, KolHeading } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import React, { useRef } from 'react';
+import React from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
-import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
 
-const RowActions: FC<{ label: string }> = ({ label }) => {
-	const toaster = ToasterService.getInstance(document);
-	const editButtonRef = useRef<HTMLKolButtonElement | null>(null);
-	const deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);
-
-	const handleEditClick = () => {
-		toaster.enqueue({
-			label: 'Edit clicked',
-			description: `The button "edit" has been clicked for ${label}`,
-			type: 'info',
-		});
-	};
-
-	const handleDeleteClick = () => {
-		toaster.enqueue({
-			label: 'Delete clicked',
-			description: `The button "delete" has been clicked for ${label}`,
-			type: 'warning',
-		});
-	};
-
-	const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {
-		switch (event.code) {
-			case 'KeyE':
-				void editButtonRef.current?.kolFocus();
-				handleEditClick();
-				return;
-			case 'KeyD':
-				void deleteButtonRef.current?.kolFocus();
-				handleDeleteClick();
-				return;
-		}
-	};
-
-	return (
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<div
-			style={{
-				display: 'flex',
-				gap: 'calc(10rem / var(--kolibri-root-font-size, 16))',
-			}}
-			onKeyUp={handleKeyUp}
-		>
-			<KolButton ref={editButtonRef} _label={'Edit'} _shortKey={'e'} _on={{ onClick: handleEditClick }} />
-			<KolButton ref={deleteButtonRef} _label={'Delete'} _shortKey={'d'} _variant={'danger'} _on={{ onClick: handleDeleteClick }} />
-		</div>
-	);
-};
-
 export const ButtonShortKey: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
 
@@ -63,77 +11,47 @@ export const ButtonShortKey: FC = () => {
 		onClick: dummyClickEventHandler,
 	};
 
-	type Data = {
-		label: string;
-	};
-	const DATA: Data[] = [
-		{
-			label: 'Row 1',
-		},
-		{
-			label: 'Row 2',
-		},
-	];
-
-	const HEADERS: KoliBriTableHeaders = {
-		horizontal: [
-			[
-				{
-					label: 'Label',
-					key: 'label',
-					textAlign: 'left',
-				},
-				{
-					label: 'Actions',
-					key: 'actions',
-					textAlign: 'left',
-
-					render: (el, cell) => {
-						getRoot(createReactRenderElement(el)).render(<RowActions label={(cell.data as Data).label} />);
-					},
-				},
-			],
-		],
-	};
-
 	return (
 		<>
 			<SampleDescription>
 				<p>
-					The first sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed
-					separately.
-				</p>
-				<p>
-					The second sample showcases a table where each row contains two KolButtons, each with its own shortcut key. To trigger an action, move the focus to
-					any of the &quot;Actions&quot; cells and press &quot;e&quot; or &quot;d.&quot; Doing so will activate the corresponding action and display a Toast
-					notification for demonstration purposes.
+					This story demonstrates buttons with short keys (visual keyboard shortcuts). The short key is displayed as a visual indicator within the button label,
+					but it is purely visual and needs custom functionality implementation to make it interactive.
 				</p>
 			</SampleDescription>
 
-			<div className="flex flex-wrap gap-4">
-				<KolButton _label="With S short key" _shortKey="S" _on={dummyEventHandler}></KolButton>
-				<KolButton _label="Very small b" _shortKey="b" _on={dummyEventHandler}></KolButton>
-				<KolButton _label="Short key does not appear in label" _shortKey="x" _on={dummyEventHandler}></KolButton>
-				<KolButton _label="short key without label" _hideLabel _shortKey="k" _icons="codicon codicon-dashboard" _on={dummyEventHandler}></KolButton>
-				<KolButton
-					_label="with inline icons"
-					_icons={{
-						left: 'codicon codicon-dashboard',
-						right: 'codicon codicon-dashboard',
-					}}
-					_shortKey="n"
-					_on={dummyEventHandler}
-				/>
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Buttons with Short Keys" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _label="With S short key" _shortKey="S" _on={dummyEventHandler} />
+						<KolButton _label="Very small b" _shortKey="b" _on={dummyEventHandler} />
+						<KolButton _label="Short key does not appear in label" _shortKey="x" _on={dummyEventHandler} />
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Short Key with Hidden Label" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _label="short key without label" _hideLabel _shortKey="k" _icons="codicon codicon-dashboard" _on={dummyEventHandler} />
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Short Key with Inline Icons" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton
+							_label="with inline icons"
+							_icons={{
+								left: 'codicon codicon-dashboard',
+								right: 'codicon codicon-dashboard',
+							}}
+							_shortKey="n"
+							_on={dummyEventHandler}
+						/>
+					</div>
+				</section>
 			</div>
-
-			<KolHeading _level={2} _label="Interactive sample" className="mt" />
-
-			<KolTableStateful
-				_label={`Move focus within one of the "Actions" cells and press "e" or "d" to trigger an action.`}
-				_data={DATA}
-				_headers={HEADERS}
-				_minWidth="400px"
-			/>
 		</>
 	);
 };

package/src/components/button/spinner.tsx

@@ -0,0 +1,112 @@
+import { KolButton, KolHeading } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
+
+export const ButtonSpinner: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This story demonstrates icon-only buttons with an animated spinning loader icon. The animation is applied using CSS parts to target the icon element
+					directly.
+				</p>
+			</SampleDescription>
+
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Animated Spinner Icon via CSS Part" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton
+							className="spinner-button"
+							_hideLabel
+							_icons={{
+								left: 'codicon codicon-loading',
+							}}
+							_label="Loading"
+							_variant="primary"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							className="spinner-button spinner-slow"
+							_hideLabel
+							_icons={{
+								left: 'codicon codicon-sync',
+							}}
+							_label="Syncing"
+							_variant="secondary"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							className="spinner-button spinner-slower"
+							_hideLabel
+							_icons={{
+								left: 'codicon codicon-settings-gear',
+							}}
+							_label="Processing"
+							_variant="tertiary"
+							_on={dummyEventHandler}
+						/>
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Spinner with Label" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton
+							className="spinner-button"
+							_icons={{
+								left: 'codicon codicon-loading',
+							}}
+							_label="Loading..."
+							_variant="primary"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							className="spinner-button"
+							_icons={{
+								left: 'codicon codicon-sync',
+							}}
+							_label="Syncing..."
+							_variant="secondary"
+							_on={dummyEventHandler}
+						/>
+					</div>
+				</section>
+			</div>
+
+			<style>
+				{`
+					@keyframes spin {
+						from {
+							transform: rotate(0deg);
+						}
+						to {
+							transform: rotate(360deg);
+						}
+					}
+
+					/* Target the icon part inside the button */
+					.spinner-button::part(icon) {
+						animation: spin 1s linear infinite;
+					}
+
+					.spinner-button.spinner-slow::part(icon) {
+						animation: spin 1.5s linear infinite;
+					}
+
+					.spinner-button.spinner-slower::part(icon) {
+						animation: spin 2s linear infinite;
+					}
+				`}
+			</style>
+		</>
+	);
+};

package/src/components/button/variants.tsx

@@ -0,0 +1,35 @@
+import { KolButton, KolHeading } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
+
+export const ButtonVariants: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This story showcases all available button variants: primary, secondary, tertiary, normal, danger, and ghost.</p>
+			</SampleDescription>
+
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="All Button Variants" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _icons="codicon codicon-home" _label="Primary" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _icons="codicon codicon-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _icons="codicon codicon-hubot" _label="Normal" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _icons="codicon codicon-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} />
+						<KolButton _icons="codicon codicon-reactions" _label="Ghost" _variant="ghost" _on={dummyEventHandler} />
+					</div>
+				</section>
+			</div>
+		</>
+	);
+};

package/src/components/button/width.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
-
-import { KolButton } from '@public-ui/react-v19';
-
+import { KolButton, KolHeading } from '@public-ui/react-v19';
 import type { FC } from 'react';
+import React from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
 import { SampleDescription } from '../SampleDescription';
 
@@ -19,24 +17,31 @@ export const ButtonWidth: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample shows KolButton with adjusted widths.</p>
+				<p>This story demonstrates buttons with custom widths. You can control the button width using CSS classes.</p>
 			</SampleDescription>
 
-			<div className="grid gap-14">
-				<div className="flex flex-wrap gap-4">
-					<KolButton _label="Primary" _variant="primary" {...ARGS}></KolButton>
-					<KolButton _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
-					<KolButton _label="Normal" _variant="normal" {...ARGS}></KolButton>
-					<KolButton _label="Danger" _variant="danger" {...ARGS}></KolButton>
-					<KolButton _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
-				</div>
-				<div className="flex flex-wrap gap-4">
-					<KolButton _disabled _label="Primary" _variant="primary" {...ARGS}></KolButton>
-					<KolButton _disabled _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
-					<KolButton _disabled _label="Normal" _variant="normal" {...ARGS}></KolButton>
-					<KolButton _disabled _label="Danger" _variant="danger" {...ARGS}></KolButton>
-					<KolButton _disabled _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
-				</div>
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Fixed Width Buttons (8rem)" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _label="Primary" _variant="primary" {...ARGS} />
+						<KolButton _label="Secondary" _variant="secondary" {...ARGS} />
+						<KolButton _label="Normal" _variant="normal" {...ARGS} />
+						<KolButton _label="Danger" _variant="danger" {...ARGS} />
+						<KolButton _label="Ghost" _variant="ghost" {...ARGS} />
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Fixed Width Disabled Buttons (8rem)" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _disabled _label="Primary" _variant="primary" {...ARGS} />
+						<KolButton _disabled _label="Secondary" _variant="secondary" {...ARGS} />
+						<KolButton _disabled _label="Normal" _variant="normal" {...ARGS} />
+						<KolButton _disabled _label="Danger" _variant="danger" {...ARGS} />
+						<KolButton _disabled _label="Ghost" _variant="ghost" {...ARGS} />
+					</div>
+				</section>
 			</div>
 		</>
 	);

package/src/components/card/headlines.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { KolCard } from '@public-ui/react-v19';
+
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const CardHeadlines: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows cards with all headline levels as title.</p>
+			</SampleDescription>
+
+			<div className="w-full grid grid-cols-2 gap-4">
+				<KolCard _label="Card with headline level 0" _level={0}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 1" _level={1}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 2" _level={2}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 3" _level={3}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 4" _level={4}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 5" _level={5}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 6" _level={6}>
+					<div>Card contents.</div>
+				</KolCard>
+			</div>
+		</>
+	);
+};

package/src/components/card/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { CardBasic } from './basic';
+import { CardHeadlines } from './headlines';
 
 export const CARD_ROUTES: Routes = {
 	card: {
 		basic: CardBasic,
+		headlines: CardHeadlines,
 	},
 };

package/src/components/combobox/html.tsx

@@ -0,0 +1,16 @@
+import { KolCombobox } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const ComboboxHtml: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>A HTML only KolCombobox.</p>
+			</SampleDescription>
+
+			<KolCombobox _label="With string array in html" _suggestions="['Herr','Frau','Firma']" _value="Herr" />
+		</>
+	);
+};

package/src/components/combobox/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { ComboboxBasic } from './basic';
+import { ComboboxHtml } from './html';
 
 export const COMBOBOX_ROUTES: Routes = {
 	combobox: {
 		basic: ComboboxBasic,
+		html: ComboboxHtml,
 	},
 };

package/src/components/icon/basic.tsx

@@ -8,11 +8,15 @@ import { SampleDescription } from '../SampleDescription';
 export const IconBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>KolIcon renders an icon. This sample shows one regular icon and one with a custom style-property, changing the icon color.</p>
+			<p>KolIcon renders codicon icons. This sample shows regular icons and one with a custom style-property, changing the icon color.</p>
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolIcon className="block w-[1em] h-[1em]" _label="" _icons="codicon codicon-home" />
+			<KolIcon className="block" _label="" _icons="codicon codicon-home" />
+			<KolIcon className="block" _label="" _icons="codicon codicon-compass-active" />
+			<KolIcon className="block" _label="" _icons="codicon codicon-debug" />
+			<KolIcon className="block" _label="" _icons="codicon codicon-squirrel" />
+
 			<KolIcon
 				className="block w-[1em] h-[1em]"
 				style={{

package/src/components/icon/font-awesome.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { KolIcon, KolInputText } from '@public-ui/react-v19';
+
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const IconFontAwesome: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolIcon renders Font Awesome icons, if you have added this font to your theme. We are showing Font Awesome Free 6.1.1.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolIcon className="block" _label="" _icons="fa-solid fa-house"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-solid fa-circle-user"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-solid fa-truck"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-solid fa-city"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-regular fa-heart"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-regular fa-thumbs-up"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-brands fa-github"></KolIcon>
+
+			<KolInputText
+				_label={'With Font Awesome icons'}
+				_icons={{
+					left: {
+						icon: 'fa-solid fa-phone',
+					},
+					right: {
+						icon: 'fa-solid fa-arrow-right',
+					},
+				}}
+			/>
+		</div>
+	</>
+);

package/src/components/icon/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { IconBasic } from './basic';
+import { IconFontAwesome } from './font-awesome';
 
 export const ICON_ROUTES: Routes = {
 	icon: {
 		basic: IconBasic,
+		'font-awesome': IconFontAwesome,
 	},
 };