@public-ui/sample-react 4.0.0-alpha.0 → 4.0.0-alpha.10

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="codicon codicon-home" _label="" _variant="primary" _on={dummyEventHandler}>
+							<span slot="expert">I am more than just a button</span>
+						</KolButton>
+						<KolButton _icons="codicon codicon-heart" _label="" _variant="secondary" _on={dummyEventHandler}>
+							<span slot="expert">Custom content here</span>
+						</KolButton>
+						<KolButton _icons="codicon codicon-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="codicon codicon-home" _label="" _variant="primary" _on={dummyEventHandler}>
+							<span slot="expert">Disabled expert slot</span>
+						</KolButton>
+						<KolButton _disabled _icons="codicon codicon-reactions" _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="codicon codicon-home" _label="Home" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="codicon codicon-heart" _label="Like" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="codicon codicon-bell" _label="Subscribe" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="codicon codicon-coffee" _label="Buy me a coffee" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="codicon codicon-trash" _label="Delete" _variant="danger" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="codicon codicon-settings-gear" _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="codicon codicon-home" _label="Home" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="codicon codicon-home" _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="codicon codicon-home" _label="Home" _variant="primary" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="codicon codicon-heart" _label="Like" _variant="secondary" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="codicon codicon-bell" _label="Subscribe" _variant="tertiary" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="codicon codicon-coffee" _label="Buy me a coffee" _variant="normal" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="codicon codicon-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';
-
+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: 'codicon codicon-arrow-left',
+							}}
+							_label="Icon Left"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							_icons={{
+								right: 'codicon codicon-arrow-right',
+							}}
+							_label="Icon Right"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							_icons={{
+								top: 'codicon codicon-arrow-up',
+							}}
+							_label="Icon Top"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							_icons={{
+								bottom: 'codicon codicon-arrow-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: 'codicon codicon-arrow-left',
+								right: 'codicon codicon-arrow-right',
+							}}
+							_label="Left & Right"
+							_on={dummyEventHandler}
+						/>
+						<KolButton
+							_icons={{
+								top: 'codicon codicon-arrow-up',
+								bottom: 'codicon codicon-arrow-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: 'codicon codicon-arrow-up',
+								},
+								bottom: 'codicon codicon-arrow-down',
+								left: {
+									icon: 'codicon codicon-arrow-left',
+								},
+								right: 'codicon codicon-arrow-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="codicon codicon-home" _label="Home Icon" _on={dummyEventHandler} />
+						<KolButton _icons="codicon codicon-heart" _label="Heart Icon" _on={dummyEventHandler} />
+						<KolButton _icons="codicon codicon-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: 'codicon codicon-home',
+								},
+							}}
+							_label="Home"
+							_on={dummyEventHandler}
+						/>
+					</div>
+				</section>
 			</div>
 		</>
 	);

package/src/components/button/routes.ts

@@ -3,20 +3,30 @@ 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 { ButtonWidth } from './width';
+import { ButtonRowReverseTooltip } from './row-reverse-tooltip';
 import { ButtonShortKey } from './short-key';
-import { ButtonExpertSlot } from './expert-slot';
+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,
 		baselined: ButtonBaselined,
 		'short-key': ButtonShortKey,
 		'expert-slot': ButtonExpertSlot,
+		'row-reverse-tooltip': ButtonRowReverseTooltip,
 	},
 };

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

@@ -0,0 +1,26 @@
+import { KolButton, KolHeading } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const ButtonRowReverseTooltip: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					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="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,8 +1,8 @@
-import { KolButton } from '@public-ui/react';
-import React from 'react';
+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 ButtonShortKey: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
@@ -15,23 +15,42 @@ export const ButtonShortKey: FC = () => {
 		<>
 			<SampleDescription>
 				<p>
-					This sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.{' '}
+					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 s" _shortKey="s" _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="s" _icons="codicon codicon-dashboard" _on={dummyEventHandler}></KolButton>
-				<KolButton
-					_label="with inline icons"
-					_icons={{
-						left: 'codicon codicon-dashboard',
-						right: 'codicon codicon-dashboard',
-					}}
-					_shortKey="s"
-				/>
+			<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>
 		</>
 	);

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,10 +1,8 @@
-import React from 'react';
-
-import { KolButton } from '@public-ui/react';
-
+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 ButtonWidth: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
@@ -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/button-link/aria-description.tsx

@@ -1,6 +1,6 @@
-import { KolButtonLink } from '@public-ui/react';
-import React from 'react';
+import { KolButtonLink } from '@public-ui/react-v19';
 import type { FC } from 'react';
+import React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonLinkAriaDescription: FC = () => (