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

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,
@@ -29,16 +27,18 @@ import {
 	KolNav,
 	KolProgress,
 	KolSelect,
-	KolTable,
+	KolTableStateful,
 	KolTabs,
 	KolTextarea,
 	KolVersion,
-} from '@public-ui/react';
+} 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();
@@ -53,11 +53,6 @@ function KolButtonWrapper({ _on, ...other }: ButtonProps & { style: Record<strin
 const TABLE_HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{
-				label: '',
-				rowSpan: 2,
-				asTd: true,
-			},
 			{
 				label: 'Workdays',
 				colSpan: 5,
@@ -76,21 +71,20 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					renderElement.setAttribute('role', 'presentation');
 					el.innerHTML = '';
 					el.appendChild(renderElement);
-					getRoot(renderElement).render(<KolButtonWrapper _label={cell.label} style={{ fontSize: '75%' }} data-theme="default" />);
+					getRoot(renderElement).render(<KolButtonWrapper _label={cell.label} style={{ fontSize: '75%' }} />);
 				},
-				sort: (data) => {
-					return data.sort((first, second) => {
-						if ((first as TableDataType).monday < (second as TableDataType).monday) {
-							return -1;
-						}
-						if ((first as TableDataType).monday > (second as TableDataType).monday) {
-							return 1;
-						}
-						return 0;
-					});
+				compareFn: (first, second) => {
+					if ((first as TableDataType).monday < (second as TableDataType).monday) {
+						return -1;
+					}
+					if ((first as TableDataType).monday > (second as TableDataType).monday) {
+						return 1;
+					}
+					return 0;
 				},
 				sortDirection: 'ASC',
 				textAlign: 'right',
+				width: '100px',
 			},
 			{
 				key: 'tuesday',
@@ -102,18 +96,17 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#060" _label={cell.label}></KolBadge>);
 				},
-				sort: (data) => {
-					return data.sort((first, second) => {
-						if ((first as TableDataType).tuesday < (second as TableDataType).tuesday) {
-							return -1;
-						}
-						if ((first as TableDataType).tuesday > (second as TableDataType).tuesday) {
-							return 1;
-						}
-						return 0;
-					});
+				compareFn: (first, second) => {
+					if ((first as TableDataType).tuesday < (second as TableDataType).tuesday) {
+						return -1;
+					}
+					if ((first as TableDataType).tuesday > (second as TableDataType).tuesday) {
+						return 1;
+					}
+					return 0;
 				},
 				sortDirection: 'DESC',
+				width: '100px',
 			},
 			{
 				key: 'wednesday',
@@ -125,6 +118,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#006" _label={cell.label}></KolBadge>);
 				},
+				width: '110px',
 			},
 			{
 				key: 'thursday',
@@ -136,6 +130,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#600" _label={cell.label}></KolBadge>);
 				},
+				width: '100px',
 			},
 			{
 				key: 'friday',
@@ -147,6 +142,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#303" _label={cell.label}></KolBadge>);
 				},
+				width: '100px',
 			},
 			{
 				key: 'saturday',
@@ -158,6 +154,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#330" _label={cell.label}></KolBadge>);
 				},
+				width: '100px',
 			},
 			{
 				key: 'sunday',
@@ -169,6 +166,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#033" _label={cell.label}></KolBadge>);
 				},
+				width: '100px',
 			},
 		],
 	],
@@ -199,7 +197,7 @@ export const HandoutBasic: FC = () => {
 
 	return (
 		<div className="grid gap-4">
-			<div className="grid gap-4 grid-cols-[auto_1fr_1fr] items-center">
+			<div className="grid gap-4 md:grid-cols-[auto_1fr_1fr] items-center">
 				<KolKolibri className="block w-75px" _labeled={false}></KolKolibri>
 				<KolHeading _label="" _level={1}>
 					<span slot="expert">
@@ -257,10 +255,8 @@ export const HandoutBasic: FC = () => {
 						<p>
 							I am <KolAbbr>e.g.</KolAbbr> an abbreviation without label.
 						</p>
-						<div className="grid grid-cols-2 items-center">
-							<KolProgress _variant="bar" _max={100} _value={33} _label="Progress" />
-							<KolProgress _variant="cycle" _max={100} _value={66} _label="Progress" />
-						</div>
+						<KolProgress _variant="bar" _max={100} _value={33} _label="Progress" />
+						<KolProgress _variant="cycle" _max={100} _value={66} _label="Progress" />
 					</div>
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-6 xl:col-span-3" _label="Button, LinkButton and Tab" _level={2}>
@@ -435,7 +431,6 @@ export const HandoutBasic: FC = () => {
 							/>
 						</div>
 						{/* <KolSkipNav></KolSkipNav> */}
-						{/* <KolLinkGroup _label=""></KolLinkGroup> */}
 						<div>
 							<KolBreadcrumb
 								_label="Breadcrumb aus Text-Links"
@@ -453,7 +448,7 @@ export const HandoutBasic: FC = () => {
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Input" _level={2}>
 					<KolForm slot="">
-						<div className="grid gap-4 grid-cols-3 p-2">
+						<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 p-2">
 							<KolInputColor _label={`Color`} />
 							<KolInputFile _label={`Upload file`} />
 							<KolInputNumber _label={`Number input`} />
@@ -472,7 +467,9 @@ export const HandoutBasic: FC = () => {
 							<div className="grid gap-4">
 								<KolInputRadio _orientation="horizontal" _options="[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]" _value="0" _label={`Salutation`} />
 								<KolInputCheckbox _label="">
-									I accept the <KolAbbr _label="General Terms and Conditions">AGB</KolAbbr>.
+									<span slot="expert">
+										I accept the <KolAbbr _label="General Terms and Conditions">AGB</KolAbbr>.
+									</span>
 								</KolInputCheckbox>
 							</div>
 							<KolTextarea _rows={4} _label={`Textarea`} />
@@ -480,8 +477,8 @@ export const HandoutBasic: FC = () => {
 					</KolForm>
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Table with Pagination" _level={2}>
-					<div slot="" className="grid gap-2 p-2">
-						<KolTable _label="Table" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTable>
+					<div slot="" className="grid gap-2 p-2 flex">
+						<KolTableStateful _label="Table" _minWidth="800px" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>
 					</div>
 				</KolCard>
 			</div>

package/src/components/heading/badged.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolBadge, KolHeading } from '@public-ui/react';
+import { KolBadge, KolHeading } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/heading/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolHeading } from '@public-ui/react';
+import { KolHeading } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/heading/paragraph.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolHeading } from '@public-ui/react';
+import { KolHeading } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/heading/routes.ts

@@ -2,11 +2,13 @@ import { Routes } from '../../shares/types';
 import { HeadingBadged } from './badged';
 import { HeadingBasic } from './basic';
 import { HeadingParagraph } from './paragraph';
+import { HeadingSecondary } from './secondary';
 
 export const HEADING_ROUTES: Routes = {
 	heading: {
 		basic: HeadingBasic,
 		badge: HeadingBadged,
 		paragraph: HeadingParagraph,
+		secondary: HeadingSecondary,
 	},
 };

package/src/components/heading/secondary.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { KolHeading } from '@public-ui/react-v19';
+
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const HeadingSecondary: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This sample shows KolHeading with the prop <code>_secondaryHeadline</code> in use.
+			</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolHeading _label="This is a H1 headline" _secondaryHeadline="This is a secondary headline" _level={1} />
+		</div>
+	</>
+);

package/src/components/icon/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolIcon } from '@public-ui/react';
+import { KolIcon } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -8,12 +8,17 @@ 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 _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={{
 					color: 'red',
 				}}

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';
 
 export const ImageBasic: FC = () => (
 	<>
@@ -9,6 +9,6 @@ export const ImageBasic: FC = () => (
 			<p>KolImage renders an image. The sample shows an image with alternative text.</p>
 		</SampleDescription>
 
-		<KolImage className="w-80%" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />
+		<KolImage className="w-image" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />
 	</>
 );

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 = () => (
 	<>
@@ -11,6 +11,6 @@ export const InputCheckboxBasic: FC = () => (
 			<p>KolInputCheckbox renders a checkbox. The sample shows KolInputCheckbox in a form context with all variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputCheckboxVariants} />
+		<FormWrap RefComponent={InputCheckboxVariants} showButtons={false} />
 	</>
 );

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 = () => (
@@ -12,6 +12,6 @@ export const InputCheckboxButton: FC = () => (
 			<p>This sample shows KolInputCheckbox in the variant &quot;button&quot;.</p>
 		</SampleDescription>
 
-		<FormWrap<Components.KolInputCheckbox> RefComponent={InputCheckboxVariants} _variant="button" />
+		<FormWrap<Components.KolInputCheckbox> RefComponent={InputCheckboxVariants} _variant="button" showButtons={false} />
 	</>
 );

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

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

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

@@ -3,10 +3,11 @@ import React, { forwardRef } from 'react';
 import { InputCheckboxCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputCheckboxVariants = forwardRef<HTMLKolInputCheckboxElement, Components.KolInputCheckbox>(function InputCheckboxVariant(props, ref) {
 	return (
 		<>
-			<div className="grid md:grid-cols-2 gap-4">
+			<SampleColumns>
 				<fieldset>
 					<legend>Label align &quot;left&quot; with label</legend>
 					<InputCheckboxCases {...props} _labelAlign="left" />
@@ -15,8 +16,8 @@ export const InputCheckboxVariants = forwardRef<HTMLKolInputCheckboxElement, Com
 					<legend>Label align &quot;left&quot; without Label (hideLabel)</legend>
 					<InputCheckboxCases ref={ref} {...props} _hideLabel _labelAlign="left" />
 				</fieldset>
-			</div>
-			<div className="grid md:grid-cols-2 gap-4">
+			</SampleColumns>
+			<SampleColumns>
 				<fieldset>
 					<legend>Label align &quot;right&quot; with label</legend>
 					<InputCheckboxCases {...props} />
@@ -25,7 +26,7 @@ export const InputCheckboxVariants = forwardRef<HTMLKolInputCheckboxElement, Com
 					<legend>Label align &quot;right&quot; without Label (hideLabel)</legend>
 					<InputCheckboxCases ref={ref} {...props} _hideLabel />
 				</fieldset>
-			</div>
+			</SampleColumns>
 		</>
 	);
 });

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 = () => (
 	<>
@@ -10,6 +10,6 @@ export const InputCheckboxSwitch: FC = () => (
 			<p>This sample shows KolInputCheckbox in the variant &quot;switch&quot;.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputCheckboxVariants} _variant="switch" />
+		<FormWrap RefComponent={InputCheckboxVariants} _variant="switch" showButtons={false} />
 	</>
 );

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 = () => (
 	<>
@@ -11,6 +11,6 @@ export const InputColorBasic: FC = () => (
 			<p>KolInputColor renders a color input. The sample shows KolInputColor in a form context with all variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputColorVariants} />
+		<FormWrap RefComponent={InputColorVariants} showButtons={false} />
 	</>
 );

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

@@ -1,10 +1,9 @@
+import type { Components } from '@public-ui/components';
+import { KolInputColor } from '@public-ui/react-v19';
 import React, { forwardRef } from 'react';
 
-import { KolInputColor } from '@public-ui/react';
-
 import { ERROR_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.KolInputColor>(function InputColorCases(props, ref) {
 	return (
 		<div className="grid gap-4">
@@ -26,6 +25,10 @@ export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.K
 				_suggestions="['#000000','#f08080', '#0000ff','#00ff00']"
 				_touched
 			/>
+			<KolInputColor {...props} _msg={{ _type: 'info', _description: 'Just a hint message.' }} _label="Color" _touched />
+			<KolInputColor {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Color" _touched />
+			<KolInputColor {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Color" _touched />
+			<KolInputColor {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Color" _touched />
 			<KolInputColor {...props} ref={ref} _accessKey="C" _hint="Hint text" _label="Color with hint" _value="#f08080" />
 			<KolInputColor {...props} _disabled _label="Color (Disabled)" _value="#f08080" />
 			<KolInputColor {...props} _label="With access key" _accessKey="c"></KolInputColor>

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

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputColorCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputColorVariants = forwardRef<HTMLKolInputColorElement, Components.KolInputColor>(function InputColorVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Color</legend>
 				<InputColorCases {...props} />
@@ -14,6 +15,6 @@ export const InputColorVariants = forwardRef<HTMLKolInputColorElement, Component
 				<legend>Color (hideLabel)</legend>
 				<InputColorCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

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 = () => (
 	<>
@@ -11,6 +11,6 @@ export const InputDateBasic: FC = () => (
 			<p>KolInputDate renders all types of fields for date and time input. The sample shows KolInputDate in a form context with all variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputDateVariants} />
+		<FormWrap RefComponent={InputDateVariants} showButtons={false} />
 	</>
 );