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

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/basic.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import React from 'react';
 import { FormWrap } from '../FormWrap';
-import { ComboboxVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { ComboboxVariants } from './partials/variants';
 export const ComboboxBasic: FC = () => {
 	return (
 		<>

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/partials/cases.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { KolCombobox } from '@public-ui/react-v19';
 
+import type { Components } from '@public-ui/components';
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 import { COUNTRY_SUGGESTIONS } from '../../../shares/country';
-import type { Components } from '@public-ui/components';
 
 export const ComboboxCases = (props: Partial<Components.KolCombobox>) => {
 	return (

package/src/components/combobox/partials/variants.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
 import type { Components } from '@public-ui/components';
+import React from 'react';
 
-import { ComboboxCases } from './cases';
 import { SampleColumns } from '../../SampleColumns';
+import { ComboboxCases } from './cases';
 
 export const ComboboxVariants = (props: Partial<Components.KolCombobox>) => {
 	return (

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/drawer/basic.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import type { AlignPropType } from '@public-ui/components';
-import { KolDrawer, KolButton, KolInputCheckbox } from '@public-ui/react-v19';
+import { KolButton, KolDrawer, KolInputCheckbox } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import { DrawerRadioAlign } from './partials/align';

package/src/components/drawer/controlled.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import type { AlignPropType } from '@public-ui/components';
-import { KolDrawer, KolButton } from '@public-ui/react-v19';
+import { KolButton, KolDrawer } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import { DrawerRadioAlign } from './partials/align';

package/src/components/form/basic.tsx

@@ -1,7 +1,7 @@
+import { KolForm, KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { KolForm, KolInputText } from '@public-ui/react-v19';
 
 export const FormBasic: FC = () => (
 	<>

package/src/components/handout/basic.tsx

@@ -1,6 +1,4 @@
 import type { ButtonProps, KoliBriTableHeaders } from '@public-ui/components';
-import type { FC } from 'react';
-import React from 'react';
 import {
 	KolAbbr,
 	KolAccordion,
@@ -34,11 +32,13 @@ import {
 	KolTextarea,
 	KolVersion,
 } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
 
-import { getTheme, getThemeName } from '../../shares/store';
+import { useToasterService } from '../../hooks/useToasterService';
 import { getRoot } from '../../shares/react-roots';
+import { getTheme, getThemeName } from '../../shares/store';
 import { TABLE_DATA, type TableDataType } from './table-data';
-import { useToasterService } from '../../hooks/useToasterService';
 
 function KolButtonWrapper({ _on, ...other }: ButtonProps & { style: Record<string, unknown> }) {
 	const { dummyClickEventHandler } = useToasterService();

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,
 	},
 };

package/src/components/image/basic.tsx

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

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

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputCheckboxVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { InputCheckboxVariants } from './partials/variants';
 
 export const InputCheckboxBasic: FC = () => (
 	<>

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

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
 import React from 'react';
 
+import type { Components } from '@public-ui/components';
 import { FormWrap } from '../FormWrap';
 import { SampleDescription } from '../SampleDescription';
-import type { Components } from '@public-ui/components';
 import { InputCheckboxVariants } from './partials/variants';
 
 export const InputCheckboxButton: FC = () => (

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

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import React from 'react';
+import { FormWrap } from '../FormWrap';
 import { SampleDescription } from '../SampleDescription';
 import { InputCheckboxVariants } from './partials/variants';
-import { FormWrap } from '../FormWrap';
 
 export const InputCheckboxSwitch: FC = () => (
 	<>

package/src/components/input-color/basic.tsx

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputColorVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { InputColorVariants } from './partials/variants';
 
 export const InputColorBasic: FC = () => (
 	<>

package/src/components/input-color/partials/cases.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
-import { KolInputColor } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
+import { KolInputColor } from '@public-ui/react-v19';
+import React, { forwardRef } from 'react';
 
 import { ERROR_MSG } from '../../../shares/constants';
 

package/src/components/input-date/basic.tsx

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputDateVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { InputDateVariants } from './partials/variants';
 
 export const InputDateBasic: FC = () => (
 	<>

package/src/components/input-date/copy-paste.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { KolButton, KolInputDate, KolInputText } from '@public-ui/react-v19';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 /** -----------------------------

package/src/components/input-date/partials/cases.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
-import { KolInputDate } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
+import { KolInputDate } from '@public-ui/react-v19';
+import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 

package/src/components/input-date/partials/minMax.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { KolInputDate } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
+import { KolInputDate } from '@public-ui/react-v19';
+import React from 'react';
 
 export const InputDateMinMaxCases = (props: Components.KolInputDate) => {
 	const minDateIso = '2024-09-26';

package/src/components/input-date/partials/variants.tsx

@@ -3,8 +3,8 @@ import React, { forwardRef } from 'react';
 import { InputDateCases } from './cases';
 
 import type { Components } from '@public-ui/components';
-import { InputDateMinMaxCases } from './minMax';
 import { SampleColumns } from '../../SampleColumns';
+import { InputDateMinMaxCases } from './minMax';
 export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateVariant(props, ref) {
 	return (
 		<SampleColumns>

package/src/components/input-date/reset.tsx

@@ -1,5 +1,5 @@
-import React, { useRef } from 'react';
 import { KolButton, KolInputDate } from '@public-ui/react-v19';
+import React, { useRef } from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputDateReset = () => {

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

@@ -1,8 +1,8 @@
 import { Routes } from '../../shares/types';
 import { InputDateBasic } from './basic';
+import { InputDateCopyPaste } from './copy-paste';
 import { InputDateReset } from './reset';
 import { InputDateShowHideMsg } from './show-hide-msg';
-import { InputDateCopyPaste } from './copy-paste';
 
 export const INPUT_DATE_ROUTES: Routes = {
 	'input-date': {

package/src/components/input-email/basic.tsx

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputEmailVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { InputEmailVariants } from './partials/variants';
 
 export const InputEmailBasic: FC = () => (
 	<>

package/src/components/input-email/partials/cases.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
-import { KolInputEmail } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
+import { KolInputEmail } from '@public-ui/react-v19';
+import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 

package/src/components/input-file/basic.tsx

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputFileVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { InputFileVariants } from './partials/variants';
 
 export const InputFileBasic: FC = () => (
 	<>

package/src/components/input-file/partials/cases.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
-import { KolInputFile } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
+import { KolInputFile } from '@public-ui/react-v19';
+import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 

package/src/components/input-file/partials/variants.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 
-import { InputFileCases } from './cases';
 import { SampleColumns } from '../../SampleColumns';
+import { InputFileCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 export const InputFileVariants = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileVariant(props, ref) {

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

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputPasswordVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { InputPasswordVariants } from './partials/variants';
 
 export const InputPasswordBasic: FC = () => (
 	<>

package/src/components/input-password/partials/cases.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
-import { KolInputPassword } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
+import { KolInputPassword } from '@public-ui/react-v19';
+import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 

package/src/components/input-radio/basic.tsx

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputRadioVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { InputRadioVariants } from './partials/variants';
 
 export const InputRadioBasic: FC = () => (
 	<>

package/src/components/input-radio/partials/variants.tsx

@@ -3,8 +3,8 @@ import React, { forwardRef } from 'react';
 import { InputRadioCases } from './cases';
 
 import type { Components } from '@public-ui/components';
-import { SampleColumns } from '../../SampleColumns';
 import { KolHeading } from '@public-ui/react-v19';
+import { SampleColumns } from '../../SampleColumns';
 
 export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioVariant(props, ref) {
 	return (

package/src/components/input-range/basic.tsx

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputRangeVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { InputRangeVariants } from './partials/variants';
 
 export const InputRangeBasic: FC = () => (
 	<>

package/src/components/input-range/partials/cases.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
-import { KolInputRange } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
+import { KolInputRange } from '@public-ui/react-v19';
+import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 

package/src/components/input-text/basic.tsx

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputTextVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { InputTextVariants } from './partials/variants';
 
 export const InputTextBasic: FC = () => (
 	<>

package/src/components/input-text/expert-slot.tsx

@@ -1,6 +1,6 @@
+import { KolInputText } from '@public-ui/react-v19';
 import * as React from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { KolInputText } from '@public-ui/react-v19';
 
 export const InputTextExpertSlot = () => {
 	return (

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

@@ -1,9 +1,10 @@
 import { Routes } from '../../shares/types';
 import { InputTextBasic } from './basic';
+import { InputTextExpertSlot } from './expert-slot';
 import { InputTextHideMsg } from './hide-msg';
-import { InputTextFormatterDemo } from './text-formatter';
+import { InputTextSelectRange } from './select-range';
 import { InputTextSmartButton } from './smart-button';
-import { InputTextExpertSlot } from './expert-slot';
+import { InputTextFormatterDemo } from './text-formatter';
 
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
@@ -12,5 +13,6 @@ export const INPUT_TEXT_ROUTES: Routes = {
 		'text-formatter': InputTextFormatterDemo,
 		'smart-button': InputTextSmartButton,
 		'expert-slot': InputTextExpertSlot,
+		'select-range': InputTextSelectRange,
 	},
 };

package/src/components/input-text/select-range.tsx

@@ -0,0 +1,36 @@
+import { KolButtonLink, KolInputText } from '@public-ui/react-v19';
+import * as React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextSelectRange = () => {
+	const textInput = React.useRef<HTMLKolInputTextElement>(null);
+
+	function setSelectioStart() {
+		textInput.current?.focus();
+		textInput.current?.setSelectionStart(8);
+	}
+
+	function setSelectionRange() {
+		textInput.current?.focus();
+		textInput.current?.setSelectionRange(2, 5);
+	}
+
+	function setRangeText() {
+		textInput.current?.focus();
+		textInput.current?.setRangeText('INSERTED', 5, 9, 'select');
+	}
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows how to change the selection in a KolInputText.</p>
+			</SampleDescription>
+			<div className="grid gap-4">
+				<KolInputText _value="Very long value" _label="Text Input Label" ref={textInput} />
+				<KolButtonLink _label="Set Start" onClick={setSelectioStart} />
+				<KolButtonLink _label="Set Range" onClick={setSelectionRange} />
+				<KolButtonLink _label="Set Range Text" onClick={setRangeText} />
+			</div>
+		</>
+	);
+};

package/src/components/input-text/smart-button.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { SampleDescription } from '../SampleDescription';
 import { ToasterService } from '@public-ui/components';
 import { KolInputText } from '@public-ui/react-v19';
+import * as React from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 const smartButtonProps = {
 	_icons: 'codicon codicon-info',