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

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { KolForm, KolInputText } from '@public-ui/react';
+
+import { FC } from 'react';
+
+import { ERROR_MSG, HINT_MSG } from '../../shares/constants';
+
+export const InputTextBasic: FC = () => (
+	<KolForm className="grid gap-4">
+		<KolInputText
+			_id=""
+			_hint={HINT_MSG}
+			_error={ERROR_MSG}
+			_placeholder="Mit Icons"
+			_icon={{
+				left: 'codicon codicon-arrow-left',
+				right: {
+					icon: 'codicon codicon-arrow-right',
+					style: {
+						'font-size': '200%',
+					},
+				},
+			}}
+			_on={{
+				onBlur: console.log,
+				onChange: console.log,
+				onClick: console.log,
+				onFocus: console.log,
+			}}
+			_hideLabel
+			_required
+			_smartButton={{
+				_icon: {
+					left: {
+						icon: 'codicon codicon-eye',
+					},
+				},
+				_hideLabel: true,
+				_label: 'Passwort anzeigen',
+				_on: {
+					onClick: () => {},
+				},
+			}}
+			_type="search"
+			_label="Suche"
+		/>
+		<KolInputText
+			_id=""
+			_error={ERROR_MSG}
+			_placeholder="Mit Icons"
+			_label="Suche"
+			_icon={{
+				left: {
+					icon: 'codicon codicon-arrow-left',
+				},
+				right: {
+					icon: 'codicon codicon-arrow-right',
+				},
+			}}
+			_hideLabel
+			_type="search"
+		/>
+		<KolInputText _id="" _placeholder="Placeholder" _label="Vorname (text)" _required />
+		<KolInputText _id="" _placeholder="Placeholder" _label="Suche (search)" _type="search" />
+		<KolInputText _id="vorname" _placeholder="Placeholder" _error={ERROR_MSG} _type="url" _label="URL (url)" />
+		<KolInputText _id="" _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" />
+		<KolInputText _id="" _placeholder="Placeholder" _read-only _label="Vorname (text, readonly)" />
+		<KolInputText _id="" _value="Value" _read-only _label="Vorname (text, readonly)" />
+		<KolInputText _id="" _placeholder="Placeholder" _disabled _label="Vorname (text, disabled)" />
+		<KolInputText _id="" _value="Value" _disabled _label="Vorname (text, disabled)" />
+	</KolForm>
+);

package/src/samples/input-text/blur.tsx

@@ -0,0 +1,16 @@
+import { KolForm, KolInputText } from '@public-ui/react';
+import React from 'react';
+
+import { FC } from 'react';
+
+export const InputTextBlur: FC = () => (
+	<KolForm className="grid gap-4">
+		<KolInputText
+			_on={{
+				onBlur: console.log,
+			}}
+			_type="search"
+			_label="Suche"
+		/>
+	</KolForm>
+);

package/src/samples/input-text/focus.tsx

@@ -0,0 +1,24 @@
+import React, { useLayoutEffect, useRef } from 'react';
+import { KolButton, KolForm, KolInputText } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const InputTextFocus: FC = () => {
+	const ref = useRef<HTMLKolInputTextElement | null>(null);
+
+	useLayoutEffect(() => {
+		setTimeout(() => {
+			ref.current?.focus();
+		}, 100);
+	}, [ref]);
+
+	return (
+		<KolForm className="grid gap-4">
+			<KolInputText ref={ref} _id="vorname" _label="Vorname" />
+			<KolInputText _label="Nachname" />
+			<div>
+				<KolButton _label="Submit"></KolButton>
+			</div>
+		</KolForm>
+	);
+};

package/src/samples/input-text/hidden-label.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { KolForm, KolInputText } from '@public-ui/react';
+
+import { FC } from 'react';
+
+import { ERROR_MSG, HINT_MSG } from '../../shares/constants';
+
+export const InputTextHiddenLabel: FC = () => (
+	<KolForm className="grid gap-4">
+		<KolInputText
+			_id=""
+			_hint={HINT_MSG}
+			_hideLabel
+			_error={ERROR_MSG}
+			_placeholder="Mit Icons"
+			_icon={{
+				left: 'codicon codicon-arrow-left',
+				right: {
+					icon: 'codicon codicon-arrow-right',
+					style: {
+						'font-size': '200%',
+					},
+				},
+			}}
+			_required
+			_smartButton={{
+				_icon: {
+					left: {
+						icon: 'codicon codicon-eye',
+					},
+				},
+				_hideLabel: true,
+				_label: 'Passwort anzeigen',
+				_on: {
+					onClick: () => {},
+				},
+			}}
+			_type="search"
+			_label="Suche"
+		/>
+		<KolInputText
+			_id=""
+			_error={ERROR_MSG}
+			_hideLabel
+			_placeholder="Mit Icons"
+			_icon={{
+				left: {
+					icon: 'codicon codicon-arrow-left',
+				},
+				right: {
+					icon: 'codicon codicon-arrow-right',
+				},
+			}}
+			_type="search"
+			_label="Suche"
+		/>
+		<KolInputText _id="" _hideLabel _placeholder="Placeholder" _label="Vorname (text)" _required />
+		<KolInputText _id="" _placeholder="Placeholder" _type="search" _label="Suche (search)" />
+		<KolInputText _id="vorname" _placeholder="Placeholder" _error={ERROR_MSG} _type="url" _label="URL (url)" />
+		<KolInputText _id="" _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" />
+		<KolInputText _id="" _placeholder="Placeholder" _read-only _label="Vorname (text, readonly)" />
+		<KolInputText _id="" _value="Value" _read-only _label="Vorname (text, readonly)" />
+		<KolInputText _id="" _placeholder="Placeholder" _disabled _label="Vorname (text, disabled)" />
+		<KolInputText _id="" _value="Value" _disabled _label="Vorname (text, disabled)" />
+	</KolForm>
+);

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

@@ -0,0 +1,16 @@
+import { Routes } from '../../shares/types';
+
+import { InputTextBasic } from './basic';
+import { InputTextBlur } from './blur';
+import { InputTextFocus } from './focus';
+
+import { InputTextHiddenLabel } from './hidden-label';
+
+export const INPUT_TEXT_ROUTES: Routes = {
+	'input-text': {
+		basic: InputTextBasic,
+		'hidden-label': InputTextHiddenLabel,
+		blur: InputTextBlur,
+		focus: InputTextFocus,
+	},
+};

package/src/samples/link/basic.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { KolLink } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const LinkBasic: FC = () => (
+	<div className="grid gap-4">
+		<KolLink _href="#" _label="Simple Link" />
+		<p>
+			In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolLink _href="#" _label="Simple Link" /> Er wird standardmäßig als{' '}
+			<strong>inline-Element</strong> ausgegeben.
+		</p>
+		<p>
+			In diesem Absatz wird ein Link gesetzt, der einmal als inline-block-Element ausgegeben wird.{' '}
+			<KolLink class="d-inline-block" _href="#" _label="Simple Link" />. Damit kann man mir per CSS-Styles eine Breite, eine Höhe und andere Eigenschaften
+			zuweisen.
+			<br />
+			<br />
+			Danach folgt ein Link, der als block-Element ausgegeben wird.
+			<KolLink class="d-block" _href="#" _label="Simple Link" />, daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
+		</p>
+	</div>
+);

package/src/samples/link/icons.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { KolLink } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const LinkIcons: FC = () => (
+	<div className="grid gap-4">
+		<KolLink _icon="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
+		<KolLink
+			_icon={{
+				right: 'codicon codicon-home',
+			}}
+			_label="Ich bin ein Link mit Icon rechts"
+		/>
+		<KolLink
+			_icon={{
+				top: 'codicon codicon-home',
+			}}
+			_label="Ich bin ein Link mit Icon oben"
+		/>
+		<KolLink
+			_icon={{
+				bottom: 'codicon codicon-home',
+			}}
+			_label="Ich bin ein Link mit Icon unten"
+		/>
+		<KolLink
+			_icon={{
+				top: 'codicon codicon-home',
+				right: 'codicon codicon-home',
+				bottom: 'codicon codicon-home',
+				left: 'codicon codicon-home',
+			}}
+			_label="Ich bin ein Link mit allen Icons"
+		/>
+	</div>
+);

package/src/samples/link/image.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { KolKolibri, KolLink } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const LinkImage: FC = () => (
+	<div className="grid gap-4">
+		<KolLink _href="#" _label="Ich bin ein Link, der als Text gerendert wird" />
+		<br />
+		<KolLink _href="#" _label="">
+			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />
+			<KolKolibri></KolKolibri>
+		</KolLink>
+		<KolKolibri />
+		<br />
+		<KolLink _href="#" _label="">
+			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />
+		</KolLink>
+	</div>
+);

package/src/samples/link/routes.ts

@@ -0,0 +1,18 @@
+import { Routes } from '../../shares/types';
+
+import { LinkBasic } from './basic';
+
+import { LinkIcons } from './icons';
+
+import { LinkImage } from './image';
+
+import { LinkTarget } from './target';
+
+export const LINK_ROUTES: Routes = {
+	link: {
+		basic: LinkBasic,
+		icons: LinkIcons,
+		image: LinkImage,
+		target: LinkTarget,
+	},
+};

package/src/samples/link/target.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { KolLink } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const LinkTarget: FC = () => (
+	<div className="d-flex gap-4">
+		<KolLink _href="#" _label="Ich bin ein Link ohne Target" />
+		<KolLink _href="#" _label="Ich bin ein Link mit Target (_self)" _target="_self" />
+		<KolLink _href="#" _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
+		<KolLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Ich bin ein Link ohne Target" />
+		<KolLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_self)" _target="_self" />
+		<KolLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
+	</div>
+);

package/src/samples/link-button/basic.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { KolLinkButton } from '@public-ui/react';
+
+import { FC } from 'react';
+
+const ARGS = {
+	_on: {
+		onClick: (_event, _value) => alert('Klick!'),
+	},
+};
+
+export const LinkButtonBasic: FC = () => (
+	<div className="grid gap-14">
+		<div className="flex flex-warp gap-14">
+			<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Danger" _variant="danger" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Ghost" _variant="ghost" {...ARGS}></KolLinkButton>
+		</div>
+	</div>
+);

package/src/samples/link-button/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { LinkButtonBasic } from './basic';
+
+export const LINK_BUTTON_ROUTES: Routes = {
+	'link-button': {
+		basic: LinkButtonBasic,
+	},
+};

package/src/samples/link-group/routes.ts

@@ -0,0 +1,5 @@
+import { Routes } from '../../shares/types';
+
+export const LINK_GROUP_ROUTES: Routes = {
+	'link-group': {},
+};

package/src/samples/nav/active.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { KolNav } from '@public-ui/react';
+
+import { FC, useEffect, useState } from 'react';
+
+import { useNavigate } from 'react-router';
+
+export const NavActive: FC = () => {
+	const [links, setLinks] = useState([]);
+
+	const handleLinks = (route: string) => {
+		const link = links.find((link) => link._label === route);
+		link._active = !link._active;
+		setLinks(links);
+	};
+
+	useEffect(() => {
+		setLinks([
+			{
+				_label: 'Main',
+				_icon: 'fa-solid fa-house',
+				_on: {
+					onClick: () => handleLinks('Main'),
+				},
+			},
+			{
+				_label: 'Abbr',
+				_on: {
+					onClick: () => handleLinks('Abbr'),
+				},
+			},
+			{
+				_label: 'Accordion',
+				_on: {
+					onClick: () => handleLinks('Accordion'),
+				},
+			},
+			{
+				_active: false,
+				_label: 'Alert',
+				_on: {
+					onClick: () => handleLinks('Alert'),
+				},
+				_children: [
+					{
+						_label: 'Main',
+						_icon: 'fa-solid fa-house',
+						_on: {
+							onClick: () => handleLinks('/'),
+						},
+					},
+					{
+						_label: 'Abbr',
+						_href: '/abbr',
+						_on: {
+							onClick: () => handleLinks('/abbr'),
+						},
+					},
+					{
+						_label: 'Accordion',
+						_href: '/accordion',
+						_on: {
+							onClick: () => handleLinks('/accordion'),
+						},
+					},
+					{
+						_label: 'Alert',
+						_href: '/alert',
+					},
+					{
+						_label: 'Badget',
+						_on: {
+							onClick: () => handleLinks('/badget'),
+						},
+					},
+				],
+			},
+			{
+				_label: 'Badget',
+				_on: {
+					onClick: () => handleLinks('Badget'),
+				},
+			},
+		]);
+	}, []);
+
+	return <KolNav _ariaLabel="Main navigation" _links={links} />;
+};

package/src/samples/nav/aria-current.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { KolNav } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const NavAriaCurrent: FC = () => (
+	<KolNav
+		_ariaLabel="Main navigation"
+		_links={[
+			{
+				_label: 'Homepage',
+				_href: '#/',
+			},
+			{
+				_label: '2 Navigation point',
+				_href: '#/untermenu',
+				_active: true,
+			},
+		]}
+		_ariaCurrentValue="page"
+	/>
+);

package/src/samples/nav/basic.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { KolNav } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const NavBasic: FC = () => (
+	<KolNav
+		_ariaLabel="Main navigation"
+		_links={[
+			{
+				_label: 'Homepage',
+				_icon: 'fa-solid fa-house',
+				_href: '#/',
+			},
+			{
+				_label: '2 Navigation point',
+				_href: '#/untermenu',
+			},
+			{
+				_active: true,
+				_label: '3 Navigation point',
+				_href: '#abc',
+				_children: [
+					{
+						_label: '3.1 Navigation point',
+						_href: '#/',
+					},
+					{
+						_label: '3.2 Navigation point',
+						_href: '#abc',
+						_target: 'asdasd',
+					},
+					{
+						_active: true,
+						_label: '3.3 Navigation point',
+						_href: '#abc',
+						_icon: 'fa-solid fa-cat',
+						_children: [
+							{
+								_active: true,
+								_label: '3.3.1 Navigation point (active)',
+								_href: '#abc',
+							},
+							{ _label: '3.3.2 Navigation point', _href: '#abc' },
+						],
+					},
+					{
+						_label: '3.4 Navigation point',
+						_href: '#abc',
+						_children: [
+							{ _label: '3.4.1 Navigation point', _href: '#abc' },
+							{ _label: '3.4.2 Navigation point', _href: '#abc' },
+						],
+					},
+					{ _label: '3.5 Navigation point', _href: '#abc' },
+				],
+			},
+			{ _label: '4 Navigation point', _href: '#abc' },
+		]}
+		_hasCompactButton
+	/>
+);

package/src/samples/nav/horizontal.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { KolNav } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const NavHorizontal: FC = () => (
+	<KolNav
+		_ariaLabel="Main navigation"
+		_links={[
+			{
+				_label: 'Homepage',
+				_href: '#/nav/horizontal',
+			},
+			{
+				_label: '2 Navigation point',
+				_href: '#/nav/horizontal',
+			},
+			{
+				_active: true,
+				_label: '3 Navigation point',
+				_href: '#/nav/horizontal',
+				_children: [
+					{
+						_label: '3.1 Navigation point',
+					},
+					{
+						_label: '3.2 Navigation point',
+						_href: '#/nav/horizontal',
+						_target: 'asdasd',
+					},
+					{
+						_active: true,
+						_label: '3.3 Navigation point',
+						_href: '#/nav/horizontal',
+						_children: [
+							{
+								_active: true,
+								_label: '3.3.1 Navigation point (active)',
+								_href: '#abc',
+							},
+							{ _label: '3.3.2 Navigation point', _href: '#abc' },
+						],
+					},
+					{
+						_label: '3.4 Navigation point',
+						_href: '#/nav/horizontal',
+						_children: [
+							{ _label: '3.4.1 Navigation point', _href: '#abc' },
+							{ _label: '3.4.2 Navigation point', _href: '#abc' },
+						],
+					},
+					{ _label: '3.5 Navigation point', _href: '#abc' },
+				],
+			},
+			{ _label: '4 Navigation point', _href: '#abc' },
+		]}
+		_orientation="horizontal"
+	/>
+);

package/src/samples/nav/routes.ts

@@ -0,0 +1,18 @@
+import { Routes } from '../../shares/types';
+
+import { NavActive } from './active';
+
+import { NavAriaCurrent } from './aria-current';
+
+import { NavBasic } from './basic';
+
+import { NavHorizontal } from './horizontal';
+
+export const NAV_ROUTES: Routes = {
+	nav: {
+		basic: NavBasic,
+		active: NavActive,
+		'aria-current': NavAriaCurrent,
+		horizontal: NavHorizontal,
+	},
+};

package/src/samples/pagination/basic.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { KolPagination } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const PaginationBasic: FC = () => (
+	<div className="grid gap-4">
+		<KolPagination _total={10} _page={6} _siblingCount={0} />
+		<KolPagination _total={10} _page={6} _siblingCount={2} _variant="danger" />
+		<KolPagination _total={10} _page={6} _siblingCount={0} _boundaryCount={2} _variant="ghost" />
+	</div>
+);

package/src/samples/pagination/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { PaginationBasic } from './basic';
+
+export const PAGINATION_ROUTES: Routes = {
+	pagination: {
+		basic: PaginationBasic,
+	},
+};

package/src/samples/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/samples/popover/routes.ts

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