@public-ui/sample-react 1.7.0-rc.10

package/src/components/popover/basic.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { KolButton, KolInputPassword, KolInputText, KolPopover } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const PopoverBasic: FC = () => {
+	const [top, setTop] = React.useState(false);
+	const [right, setRight] = React.useState(false);
+	const [bottom, setBottom] = React.useState(false);
+	const [left, setLeft] = React.useState(false);
+	const [login, setLogin] = React.useState(false);
+
+	return (
+		<div className="grid gap-4 max-w-[400px] mx-auto pt-8">
+			<KolButton _label="Oben" _icon="codicon codicon-arrow-up" _variant="primary" _on={{ onClick: () => setTop(!top) }}></KolButton>
+			<KolPopover _show={top}>Ich bin oberhalb</KolPopover>
+			<KolButton _label="Rechts" _icon="codicon codicon-arrow-right" _variant="danger" _on={{ onClick: () => setRight(!right) }}></KolButton>
+			<KolPopover _align="right" _show={right}>
+				Ich bin rechts
+			</KolPopover>
+			<KolButton _label="Unten" _icon="codicon codicon-arrow-down" _variant="secondary" _on={{ onClick: () => setBottom(!bottom) }}></KolButton>
+			<KolPopover _align="bottom" _show={bottom}>
+				Ich bin unterhalb
+			</KolPopover>
+			<KolButton _label="Links" _icon="codicon codicon-arrow-left" _variant="normal" _on={{ onClick: () => setLeft(!left) }}></KolButton>
+			<KolPopover _align="left" _show={left}>
+				Ich bin links
+			</KolPopover>
+			<KolButton _label="PR starten" _icon="codicon codicon-git-pull-request" _variant="normal" _on={{ onClick: () => setLogin(!login) }}></KolButton>
+			<KolPopover _show={login}>
+				<KolInputText>Benutzername</KolInputText>
+				<KolInputPassword>Passwort</KolInputPassword>
+			</KolPopover>
+		</div>
+	);
+};

package/src/components/popover/routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '../../shares/types';
+import { PopoverBasic } from './basic';
+
+export const POPOVER_ROUTES: Routes = {
+	popover: {
+		basic: PopoverBasic,
+	},
+};

package/src/components/progress/basic.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { KolProgress } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const ProgressBasic: FC = () => (
+	<div className="grid gap-4">
+		<KolProgress _variant="bar" _max={100} _value={33}></KolProgress>
+		<KolProgress _variant="cycle" _max={100} _value={33}></KolProgress>
+	</div>
+);

package/src/components/progress/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { ProgressBasic } from './basic';
+
+export const PROGRESS_ROUTES: Routes = {
+	progress: {
+		basic: ProgressBasic,
+	},
+};

package/src/components/select/basic.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { SelectOption } from '@public-ui/components';
+
+import { KolForm, KolSelect } from '@public-ui/react';
+
+import { FC } from 'react';
+
+import countries from 'world_countries_lists/data/countries/de/countries.json';
+
+import { ERROR_MSG } from '../../shares/constants';
+
+const STATUS_OPTIONS: SelectOption<string>[] = [
+	{
+		label: '- Keine Auswahl',
+		value: '',
+		disabled: true,
+	},
+];
+
+type Country = {
+	id: number;
+	alpha2: string;
+	alpha3: string;
+	name: string;
+};
+(countries as Country[]).forEach((country) =>
+	STATUS_OPTIONS.push({
+		label: country.name,
+		value: country.alpha2,
+	}),
+);
+
+export const SelectBasic: FC = () => (
+	<KolForm className="grid gap-4">
+		<KolSelect
+			_id=""
+			_options={STATUS_OPTIONS}
+			_error={ERROR_MSG}
+			_label="Anrede"
+			_icon={{
+				left: {
+					icon: 'codicon codicon-arrow-left',
+				},
+				right: {
+					icon: 'codicon codicon-arrow-right',
+				},
+			}}
+		/>
+		<KolSelect _id="" _options={STATUS_OPTIONS} _label="Anrede" _multiple _required _error={ERROR_MSG} />
+	</KolForm>
+);

package/src/components/select/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { SelectBasic } from './basic';
+
+export const SELECT_ROUTES: Routes = {
+	select: {
+		basic: SelectBasic,
+	},
+};

package/src/components/skip-nav/basic.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { KolIndentedText, KolSkipNav } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const SkipNavBasic: FC = () => (
+	<div className="grid gap-4">
+		<KolIndentedText>
+			<p>
+				<b>Links sind unsichtbar geschalten</b>
+				<br />
+				Um die Links zu sehen, am besten einmal in diesen Bereich klicken und Tab-Taste drücken.
+			</p>
+		</KolIndentedText>
+		<KolSkipNav
+			_ariaLabel="Versteckte Navigation"
+			_links={[
+				{
+					_label: 'Zum Anfang',
+					_selector: 'header',
+				},
+				{
+					_label: 'Zum Formular',
+					_selector: '#form',
+				},
+				{
+					_label: 'Zum Ende',
+					_selector: 'footer',
+				},
+			]}
+		></KolSkipNav>
+	</div>
+);

package/src/components/skip-nav/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { SkipNavBasic } from './basic';
+
+export const SKIP_NAV_ROUTES: Routes = {
+	'skip-nav': {
+		basic: SkipNavBasic,
+	},
+};

package/src/components/spin/basic.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { KolSpin } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const SpinBasic: FC = () => <KolSpin _show />;

package/src/components/spin/custom.css

@@ -0,0 +1,52 @@
+.loader {
+	width: 48px;
+	height: 48px;
+	border: 5px solid #333;
+	border-radius: 50%;
+	display: inline-block;
+	box-sizing: border-box;
+	position: relative;
+	animation: pulse 1s linear infinite;
+}
+.loader:after {
+	content: '';
+	position: absolute;
+	width: 48px;
+	height: 48px;
+	border: 5px solid #f00;
+	border-radius: 50%;
+	display: inline-block;
+	box-sizing: border-box;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	animation: scaleUp 1s linear infinite;
+}
+
+@keyframes scaleUp {
+	0% {
+		transform: translate(-50%, -50%) scale(0);
+	}
+	60%,
+	100% {
+		transform: translate(-50%, -50%) scale(1);
+	}
+}
+@keyframes pulse {
+	0%,
+	60%,
+	100% {
+		transform: scale(1);
+	}
+	80% {
+		transform: scale(1.2);
+	}
+}
+
+/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */
+@media (prefers-reduced-motion) {
+	.loader,
+	.loader:after {
+		animation-duration: 2s;
+	}
+}

package/src/components/spin/custom.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { KolSpin } from '@public-ui/react';
+import './custom.css';
+
+import { FC } from 'react';
+
+export const SpinCustom: FC = () => (
+	<KolSpin _show _variant="none">
+		<span slot="expert" className="loader"></span>
+	</KolSpin>
+);

package/src/components/spin/cycle.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { KolSpin } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const SpinCycle: FC = () => <KolSpin _show _variant="cycle" />;

package/src/components/spin/routes.ts

@@ -0,0 +1,13 @@
+import { Routes } from '../../shares/types';
+
+import { SpinBasic } from './basic';
+import { SpinCustom } from './custom';
+import { SpinCycle } from './cycle';
+
+export const SPIN_ROUTES: Routes = {
+	spin: {
+		basic: SpinBasic,
+		cycle: SpinCycle,
+		custom: SpinCustom,
+	},
+};

package/src/components/split-button/basic.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { KolSplitButton } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const SplitButtonBasic: FC = () => {
+	const [showDropdown, setShowDropdown] = useState(false);
+
+	return (
+		<div className="grid gap-4">
+			<KolSplitButton _label="Nur der Pfeil öffnet" _onClick={console.log}>
+				I am
+				<br />a dwarf
+			</KolSplitButton>
+			<KolSplitButton _label="ohne label" _hide-label _icon="codicon codicon-git-pull-request">
+				and
+				<br />
+				I&apos;m
+				<br />
+				digging
+				<br />a hole
+			</KolSplitButton>
+			<KolSplitButton _label="kick me">
+				diggy
+				<br />
+				diggy
+				<br />
+				hole
+			</KolSplitButton>
+			<KolSplitButton _label="schon offen" _show-dropdown={showDropdown}>
+				diggy
+				<br />
+				diggy
+				<br />
+				hole
+			</KolSplitButton>
+			<KolSplitButton _label={`vorherigen ${showDropdown ? 'schließen' : 'öffnen'}`} _onClick={() => setShowDropdown(!showDropdown)}>
+				diggy
+				<br />
+				diggy
+				<br />
+				hole
+			</KolSplitButton>
+		</div>
+	);
+};

package/src/components/split-button/routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '../../shares/types';
+import { SplitButtonBasic } from './basic';
+
+export const SPLIT_BUTTON_ROUTES: Routes = {
+	'split-button': {
+		basic: SplitButtonBasic,
+	},
+};

package/src/components/table/badge-size.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from 'react';
+
+import { KolBadge, KolTable } from '@public-ui/react';
+
+import { getRoot } from '../../shares/react-roots';
+import { KoliBriTableHeaders } from '@public-ui/components';
+import { DATA, Data } from './test-data';
+
+const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
+	day: '2-digit',
+	month: '2-digit',
+	year: 'numeric',
+});
+
+const HEADERS: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'order', key: 'order', textAlign: 'center' },
+			{
+				label: 'date',
+				key: 'date',
+				textAlign: 'center',
+				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
+				sort: (data: Data[]) =>
+					data.sort((data0, data1) => {
+						if (data0.date < data1.date) return -1;
+						else if (data1.date < data0.date) return 1;
+						else return 0;
+					}),
+			},
+			{
+				label: 'Aktion',
+				key: 'order',
+				render: (el, cell, tupel) => {
+					getRoot(el).render(
+						<KolBadge
+							style={{
+								backgroundColor: 'red',
+								width: '80%',
+							}}
+							_icon="codicon codicon-location"
+							_label={'Speichern'}
+						/>,
+					);
+				},
+			},
+		],
+	],
+};
+
+export const TableBadgeSize: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} />;

package/src/components/table/render-cell.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from 'react';
+
+import { KolButton, KolInputText, KolTable } from '@public-ui/react';
+
+import { getRoot } from '../../shares/react-roots';
+import { KoliBriTableHeaders } from '@public-ui/components';
+import { DATA, Data } from './test-data';
+
+const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
+	day: '2-digit',
+	month: '2-digit',
+	year: 'numeric',
+});
+
+const HEADERS: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: '#', key: 'order', textAlign: 'center' },
+			{
+				label: 'Datum (string)',
+				key: 'date',
+				textAlign: 'center',
+				render: (_el, _cell, tupel) => `<strong>${DATE_FORMATTER.format((tupel as Data).date)}</strong>`,
+				sort: (data: Data[]) =>
+					data.sort((data0, data1) => {
+						if (data0.date < data1.date) return -1;
+						else if (data1.date < data0.date) return 1;
+						else return 0;
+					}),
+			},
+			{
+				label: 'Aktion (react)',
+				key: 'order',
+				render: (el, cell, tupel) => {
+					// https://reactjs.org/docs/portals.html
+					getRoot(el).render(
+						<>
+							<KolButton _label={'Speichern'} />
+							<KolInputText _id="test">Eingabe</KolInputText>
+						</>,
+					);
+				},
+			},
+		],
+	],
+};
+
+export const TableRenderCell: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} />;

package/src/components/table/routes.ts

@@ -0,0 +1,15 @@
+import { Routes } from '../../shares/types';
+
+import { TableBadgeSize } from './badge-size';
+
+import { TableRenderCell } from './render-cell';
+
+import { TableSortTabel } from './sort-date';
+
+export const TABLE_ROUTES: Routes = {
+	table: {
+		'badge-size': TableBadgeSize,
+		'render-cell': TableRenderCell,
+		'sort-data': TableSortTabel,
+	},
+};

package/src/components/table/sort-date.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+
+import { KolTable } from '@public-ui/react';
+import { KoliBriTableHeaders } from '@public-ui/components';
+import { DATA, Data } from './test-data';
+
+const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
+	day: '2-digit',
+	month: '2-digit',
+	year: 'numeric',
+});
+
+const HEADERS: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'order', key: 'order', textAlign: 'center' },
+			{
+				label: 'date',
+				key: 'date',
+				textAlign: 'center',
+				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
+				sort: (data: Data[]) =>
+					data.sort((data0, data1) => {
+						if (data0.date < data1.date) return -1;
+						else if (data1.date < data0.date) return 1;
+						else return 0;
+					}),
+			},
+		],
+	],
+};
+
+export const TableSortTabel: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} />;

package/src/components/table/test-data.ts

@@ -0,0 +1,66 @@
+export type Data = {
+	order: number;
+	date: Date;
+};
+export const DATA: Data[] = [
+	{
+		order: 0,
+		date: new Date('1981-05-26T21:33:43.612Z'),
+	},
+	{
+		order: 1,
+		date: new Date('1971-04-25T19:44:17.014Z'),
+	},
+	{
+		order: 2,
+		date: new Date('1986-07-10T11:39:29.539Z'),
+	},
+	{
+		order: 3,
+		date: new Date('1976-02-02T10:00:36.346Z'),
+	},
+	{
+		order: 4,
+		date: new Date('1998-07-07T12:50:36.016Z'),
+	},
+	{
+		order: 5,
+		date: new Date('1994-09-05T05:10:44.078Z'),
+	},
+	{
+		order: 6,
+		date: new Date('1986-05-23T13:05:01.874Z'),
+	},
+	{
+		order: 7,
+		date: new Date('1975-06-29T21:51:29.359Z'),
+	},
+	{
+		order: 8,
+		date: new Date('1974-05-15T23:47:02.499Z'),
+	},
+	{
+		order: 9,
+		date: new Date('1990-05-27T10:13:19.641Z'),
+	},
+	{
+		order: 10,
+		date: new Date('1993-10-20T03:54:08.739Z'),
+	},
+	{
+		order: 11,
+		date: new Date('2000-02-25T11:55:43.705Z'),
+	},
+	{
+		order: 12,
+		date: new Date('1988-08-27T09:59:12.251Z'),
+	},
+	{
+		order: 13,
+		date: new Date('1980-10-24T10:41:24.897Z'),
+	},
+	{
+		order: 14,
+		date: new Date('1995-01-25T12:31:27.983Z'),
+	},
+];

package/src/components/textarea/adjust-height.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { KolForm, KolTextarea } from '@public-ui/react';
+
+import { FC } from 'react';
+
+const VALUE = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
+magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
+elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
+et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+sit amet.`;
+
+export const TextareaAdjustHeight: FC = () => (
+	<KolForm className="row">
+		<div className="col-sm-6">
+			<KolTextarea _adjustHeight={true} _id="text-vertical" _resize="vertical" _value={VALUE} _label="Texteingabe (horizontal)" />
+		</div>
+		<div className="col-sm-6">
+			<KolTextarea _adjustHeight={true} _id="text-none" _resize="none" _value={VALUE} _label="Texteingabe (none)" />
+		</div>
+	</KolForm>
+);

package/src/components/textarea/basic.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { KolForm, KolTextarea } from '@public-ui/react';
+
+import { FC } from 'react';
+import { ERROR_MSG } from '../../shares/constants';
+
+export const TextareaBasic: FC = () => (
+	<KolForm>
+		<KolTextarea _id="text" _error={ERROR_MSG} _label="Texteingabe" />
+	</KolForm>
+);

package/src/components/textarea/disabled.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { KolForm, KolTextarea } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const TextareaDisabled: FC = () => (
+	<KolForm>
+		<KolTextarea _disabled _error="Es ist ein Fehler aufgetreten." _id="text" _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
+	</KolForm>
+);

package/src/components/textarea/placeholder.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { KolForm, KolTextarea } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const TextareaPlaceholder: FC = () => (
+	<KolForm>
+		<KolTextarea _id="text" _placeholder="Hier steht ein Platzhaltertext" _label="Texteingabe" />
+	</KolForm>
+);

package/src/components/textarea/readonly.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { KolForm, KolTextarea } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const TextareaReadOnly: FC = () => (
+	<KolForm>
+		<KolTextarea _error="Es ist ein Fehler aufgetreten." _id="text" _readOnly _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
+	</KolForm>
+);

package/src/components/textarea/resize.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { KolForm, KolTextarea } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const TextareaResize: FC = () => (
+	<KolForm className="grid gap-4">
+		<KolTextarea _id="text-both" _resize="both" _label="Texteingabe (both)" />
+		<KolTextarea _id="text-verical" _resize="vertical" _label="Texteingabe (vertical)" />
+		<KolTextarea _id="text-horizontal" _resize="horizontal" _label="Texteingabe (horizontal)" />
+		<KolTextarea _id="text-none" _resize="none" _label="Texteingabe (none)" />
+	</KolForm>
+);

package/src/components/textarea/routes.ts

@@ -0,0 +1,27 @@
+import { Routes } from '../../shares/types';
+
+import { TextareaBasic } from './basic';
+
+import { TextareaAdjustHeight } from './adjust-height';
+
+import { TextareaDisabled } from './disabled';
+
+import { TextareaPlaceholder } from './placeholder';
+
+import { TextareaReadOnly } from './readonly';
+
+import { TextareaResize } from './resize';
+
+import { TextareaRows } from './rows';
+
+export const TEXTAREA_ROUTES: Routes = {
+	textarea: {
+		basic: TextareaBasic,
+		'adjust-height': TextareaAdjustHeight,
+		disabled: TextareaDisabled,
+		placeholder: TextareaPlaceholder,
+		readonly: TextareaReadOnly,
+		resize: TextareaResize,
+		rows: TextareaRows,
+	},
+};

package/src/components/textarea/rows.tsx

@@ -0,0 +1,10 @@
+import { KolForm, KolTextarea } from '@public-ui/react';
+import React from 'react';
+
+import { FC } from 'react';
+
+export const TextareaRows: FC = () => (
+	<KolForm>
+		<KolTextarea _id="text" _rows={10} _label="Texteingabe" />
+	</KolForm>
+);