@public-ui/sample-react 4.0.0-alpha.1 → 4.0.0-alpha.11

package/src/components/button/expert-slot.tsx

@@ -1,16 +1,53 @@
+import { KolButton, KolHeading } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { ButtonVariants } from './partials/variants';
+import { useToasterService } from '../../hooks/useToasterService';
 import { SampleDescription } from '../SampleDescription';
 
-export const ButtonExpertSlot: FC = () => (
-	<>
-		<SampleDescription>
-			<p>KolButton show a button-element with expert slot.</p>
-		</SampleDescription>
+export const ButtonExpertSlot: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
 
-		<ButtonVariants _label="">
-			<span slot="expert">I am more than just a button</span>
-		</ButtonVariants>
-	</>
-);
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This story demonstrates the expert slot feature of KolButton. The expert slot allows you to insert custom content into the button, providing advanced
+					customization options beyond the standard label and icon properties.
+				</p>
+			</SampleDescription>
+
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Buttons with Expert Slot Content" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _icons="fa-solid fa-house" _label="" _variant="primary" _on={dummyEventHandler}>
+							<span slot="expert">I am more than just a button</span>
+						</KolButton>
+						<KolButton _icons="fa-solid fa-heart" _label="" _variant="secondary" _on={dummyEventHandler}>
+							<span slot="expert">Custom content here</span>
+						</KolButton>
+						<KolButton _icons="fa-solid fa-trash" _label="" _variant="danger" _on={dummyEventHandler}>
+							<span slot="expert">Delete with custom text</span>
+						</KolButton>
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Disabled Buttons with Expert Slot" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _disabled _icons="fa-solid fa-house" _label="" _variant="primary" _on={dummyEventHandler}>
+							<span slot="expert">Disabled expert slot</span>
+						</KolButton>
+						<KolButton _disabled _icons="fa-solid fa-smile" _label="" _variant="ghost" _on={dummyEventHandler}>
+							<span slot="expert">Another disabled one</span>
+						</KolButton>
+					</div>
+				</section>
+			</div>
+		</>
+	);
+};

package/src/components/button/hide-label.tsx

@@ -0,0 +1,57 @@
+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 ButtonHideLabel: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This story demonstrates buttons with hidden labels. The label is still accessible to screen readers but visually hidden, showing only the icon. This
+					is useful for icon-only buttons.
+				</p>
+			</SampleDescription>
+
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Buttons with Hidden Labels" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _hideLabel _icons="fa-solid fa-house" _label="Home" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-heart" _label="Like" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-robot" _label="Subscribe" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-robot" _label="Buy me a coffee" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-trash" _label="Delete" _variant="danger" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-smile" _label="Settings" _variant="ghost" _on={dummyEventHandler} />
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Comparison: With and Without Hidden Label" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _icons="fa-solid fa-house" _label="Home" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-house" _label="Home" _variant="primary" _on={dummyEventHandler} />
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Disabled with Hidden Label" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _disabled _hideLabel _icons="fa-solid fa-house" _label="Home" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="fa-solid fa-heart" _label="Like" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="fa-solid fa-robot" _label="Subscribe" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="fa-solid fa-robot" _label="Buy me a coffee" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="fa-solid fa-trash" _label="Delete" _variant="danger" _on={dummyEventHandler} />
+					</div>
+				</section>
+			</div>
+		</>
+	);
+};

package/src/components/button/icons.tsx

@@ -1,14 +1,11 @@
-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 { SampleDescription } from '../SampleDescription';
+import React from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
 
 export const ButtonIcons: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
-
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,
 	};
@@ -16,28 +13,118 @@ export const ButtonIcons: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample shows KolButton with icons in all alignments.</p>
+				<p>
+					This story showcases buttons with icons in various positions and configurations. Icons can be placed on the left, right, top, bottom, or in multiple
+					positions at once.
+				</p>
 			</SampleDescription>
 
-			<div>
-				<KolButton
-					_icons={{
-						bottom: 'codicon codicon-arrow-down',
-						left: {
-							icon: 'codicon codicon-arrow-left',
-						},
-						top: {
-							style: {
-								'font-size': '200%',
-								transform: 'rotate(45deg)',
-							},
-							icon: 'codicon codicon-arrow-up',
-						},
-						right: 'codicon codicon-arrow-right',
-					}}
-					_label="Label"
-					_on={dummyEventHandler}
-				/>
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Basic Icon Positions" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton
+							_icons={{
+								left: 'kolicon-chevron-left',
+							}}
+							_label="Icon Left"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							_icons={{
+								right: 'kolicon-chevron-right',
+							}}
+							_label="Icon Right"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							_icons={{
+								top: 'kolicon-chevron-up',
+							}}
+							_label="Icon Top"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							_icons={{
+								bottom: 'kolicon-chevron-down',
+							}}
+							_label="Icon Bottom"
+							_on={dummyEventHandler}
+						/>
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Multiple Icon Positions" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton
+							_icons={{
+								left: 'kolicon-chevron-left',
+								right: 'kolicon-chevron-right',
+							}}
+							_label="Left & Right"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							_icons={{
+								top: 'kolicon-chevron-up',
+								bottom: 'kolicon-chevron-down',
+							}}
+							_label="Top & Bottom"
+							_on={dummyEventHandler}
+						/>
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="All Icon Positions" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton
+							_icons={{
+								top: {
+									style: {
+										transform: 'rotate(45deg)',
+									},
+									icon: 'kolicon-chevron-up',
+								},
+								bottom: 'kolicon-chevron-down',
+								left: {
+									icon: 'kolicon-chevron-left',
+								},
+								right: 'kolicon-chevron-right',
+							}}
+							_label="All Directions"
+							_on={dummyEventHandler}
+						/>
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Simple Icon String" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _icons="fa-solid fa-house" _label="Home Icon" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-heart" _label="Heart Icon" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-trash" _label="Trash Icon" _on={dummyEventHandler} />
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Large Icon on Top" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton
+							_icons={{
+								top: {
+									style: {
+										'font-size': '400%',
+									},
+									icon: 'fa-solid fa-house',
+								},
+							}}
+							_label="Home"
+							_on={dummyEventHandler}
+						/>
+					</div>
+				</section>
 			</div>
 		</>
 	);

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 { ButtonIcons } from './icons';
-import { ButtonWidth } from './width';
-import { ButtonShortKey } from './short-key';
+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,6 +1,6 @@
+import { KolButton, KolHeading } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolButton } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonRowReverseTooltip: FC = () => {
@@ -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="fa-solid fa-house" _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,8 @@
-import { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react-v19';
+import { KolButton, KolHeading } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import { useRef } from 'react';
 import React from 'react';
-import { SampleDescription } from '../SampleDescription';
 import { useToasterService } from '../../hooks/useToasterService';
-import { getRoot } from '../../shares/react-roots';
-import type { KoliBriTableHeaders } from '@public-ui/components';
-import { ToasterService } from '@public-ui/components';
-
-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>
-	);
-};
+import { SampleDescription } from '../SampleDescription';
 
 export const ButtonShortKey: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
@@ -64,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="fa-solid fa-gauge" _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: 'fa-solid fa-gauge',
+								right: 'fa-solid fa-gauge',
+							}}
+							_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: 'fa-solid fa-spinner',
+							}}
+							_label="Loading"
+							_variant="primary"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							className="spinner-button spinner-slow"
+							_hideLabel
+							_icons={{
+								left: 'fa-solid fa-rotate',
+							}}
+							_label="Syncing"
+							_variant="secondary"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							className="spinner-button spinner-slower"
+							_hideLabel
+							_icons={{
+								left: 'fa-solid fa-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: 'fa-solid fa-spinner',
+							}}
+							_label="Loading..."
+							_variant="primary"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							className="spinner-button"
+							_icons={{
+								left: 'fa-solid fa-rotate',
+							}}
+							_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="fa-solid fa-house" _label="Primary" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-robot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-robot" _label="Normal" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-trash" _label="Danger" _variant="danger" _on={dummyEventHandler} />
+						<KolButton _icons="fa-solid fa-smile" _label="Ghost" _variant="ghost" _on={dummyEventHandler} />
+					</div>
+				</section>
+			</div>
+		</>
+	);
+};