@public-ui/sample-react 1.7.0-rc.8 → 1.7.0

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

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { InputRangeCases } from './cases';
+
+export const InputRangeVariants = forwardRef<HTMLKolInputRangeElement, Components.KolInputRange>(function InputRangeVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Range</legend>
+				<InputRangeCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Range (hideLabel)</legend>
+				<InputRangeCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

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

@@ -1,72 +1,5 @@
-import React from 'react';
-import { KolForm, KolInputText } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
+import { InputTextVariants } from './partials/variants';
 
-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>
-);
+export const InputTextBasic: FC = () => <FormWrap RefComponent={InputTextVariants} />;

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

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

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

@@ -9,15 +9,17 @@ export const InputTextFocus: FC = () => {
 	useLayoutEffect(() => {
 		setTimeout(() => {
 			ref.current?.focus();
-		}, 100);
+		}, 500);
 	}, [ref]);
 
 	return (
-		<KolForm className="grid gap-4">
-			<KolInputText ref={ref} _id="vorname" _label="Vorname" />
-			<KolInputText _label="Nachname" />
-			<div>
-				<KolButton _label="Submit"></KolButton>
+		<KolForm>
+			<div className="grid gap-4">
+				<KolInputText ref={ref} _label="Vorname" />
+				<KolInputText _label="Nachname" />
+				<div>
+					<KolButton _label="Submit"></KolButton>
+				</div>
 			</div>
 		</KolForm>
 	);

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

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react';
+
+import { KolInputText } from '@public-ui/react';
+
+import { Components } from '@public-ui/components';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
+
+export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.KolInputText>(function InputTextCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolInputText
+				{...props}
+				_hint={HINT_MSG}
+				_error={ERROR_MSG}
+				_placeholder="Mit Icons"
+				_icons={{
+					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
+				_type="search"
+				_touched
+				_label="Suche"
+			/>
+			<KolInputText {...props} ref={ref} _placeholder="Placeholder" _label="Vorname (text)" _required />
+			<KolInputText {...props} _placeholder="Placeholder" _label="Suche (search)" _type="search" />
+			<KolInputText {...props} _placeholder="Placeholder" _error={ERROR_MSG} _touched _type="url" _label="URL (url)" />
+			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" />
+			<KolInputText {...props} _placeholder="Placeholder" _readOnly _label="Vorname (text, readonly)" />
+			<KolInputText {...props} _value="Value" _readOnly _label="Vorname (text, readonly)" />
+			<KolInputText {...props} _placeholder="Placeholder" _disabled _label="Vorname (text, disabled)" />
+			<KolInputText {...props} _value="Value" _disabled _label="Vorname (text, disabled)" />
+		</div>
+	);
+});

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

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { InputTextCases } from './cases';
+
+export const InputTextVariants = forwardRef<HTMLKolInputTextElement, Components.KolInputText>(function InputTextVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Text</legend>
+				<InputTextCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Text (hideLabel)</legend>
+				<InputTextCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

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

@@ -4,12 +4,9 @@ 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/components/kolibri/animated.tsx

@@ -0,0 +1,4 @@
+import React, { FC } from 'react';
+import { KolKolibri } from '@public-ui/react';
+
+export const KolibriAnimated: FC = () => <KolKolibri _animate style={{ width: 300 }}></KolKolibri>;

package/src/components/kolibri/basic.tsx

@@ -0,0 +1,4 @@
+import React, { FC } from 'react';
+import { KolKolibri } from '@public-ui/react';
+
+export const KolibriBasic: FC = () => <KolKolibri style={{ width: 300 }} />;

package/src/components/kolibri/no-label.tsx

@@ -0,0 +1,4 @@
+import React, { FC } from 'react';
+import { KolKolibri } from '@public-ui/react';
+
+export const KolibriNoLabel: FC = () => <KolKolibri _labeled={false} style={{ width: 300 }}></KolKolibri>;

package/src/components/kolibri/routes.ts

@@ -0,0 +1,13 @@
+import { Routes } from '../../shares/types';
+
+import { KolibriBasic } from './basic';
+import { KolibriAnimated } from './animated';
+import { KolibriNoLabel } from './no-label';
+
+export const KOLIBRI_ROUTES: Routes = {
+	kolibri: {
+		basic: KolibriBasic,
+		animated: KolibriAnimated,
+		'no-label': KolibriNoLabel,
+	},
+};

package/src/components/link/icons.tsx

@@ -5,27 +5,27 @@ 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 _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
 		<KolLink
-			_icon={{
+			_icons={{
 				right: 'codicon codicon-home',
 			}}
 			_label="Ich bin ein Link mit Icon rechts"
 		/>
 		<KolLink
-			_icon={{
+			_icons={{
 				top: 'codicon codicon-home',
 			}}
 			_label="Ich bin ein Link mit Icon oben"
 		/>
 		<KolLink
-			_icon={{
+			_icons={{
 				bottom: 'codicon codicon-home',
 			}}
 			_label="Ich bin ein Link mit Icon unten"
 		/>
 		<KolLink
-			_icon={{
+			_icons={{
 				top: 'codicon codicon-home',
 				right: 'codicon codicon-home',
 				bottom: 'codicon codicon-home',

package/src/components/link/image.tsx

@@ -9,9 +9,8 @@ export const LinkImage: FC = () => (
 		<br />
 		<KolLink _href="#" _label="">
 			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />
-			<KolKolibri></KolKolibri>
+			<KolKolibri style={{ width: '300px' }}></KolKolibri>
 		</KolLink>
-		<KolKolibri />
 		<br />
 		<KolLink _href="#" _label="">
 			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />

package/src/components/link/target.tsx

@@ -5,11 +5,10 @@ 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" />
+		<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="#" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link ohne Target" />{' '}
+		<KolLink _href="#" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
+		<KolLink _href="#" _icons="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
 	</div>
 );

package/src/components/link-group/basic.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+import { KolLinkGroup } from '@public-ui/react';
+
+const links = [
+	{ _label: 'Link 1', _href: 'https://www.w3.org' },
+	{ _label: 'Link 2', _href: 'https://www.w3.org' },
+	{ _label: 'Link 3', _href: 'https://www.w3.org' },
+];
+export const LinkGroupBasic: FC = () => <KolLinkGroup _links={links} />;

package/src/components/link-group/horizontal.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+import { KolLinkGroup } from '@public-ui/react';
+
+const links = [
+	{ _label: 'Link 1', _href: 'https://www.w3.org' },
+	{ _label: 'Link 2', _href: 'https://www.w3.org' },
+	{ _label: 'Link 3', _href: 'https://www.w3.org' },
+];
+export const LinkGroupHorizontal: FC = () => <KolLinkGroup _links={links} _orientation="horizontal" />;

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

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

package/src/components/logo/basic.tsx

@@ -0,0 +1,5 @@
+import React, { FC } from 'react';
+import { KolLogo } from '@public-ui/react';
+import { Bundesministerium } from '@public-ui/components';
+
+export const LogoBasic: FC = () => <KolLogo _org={Bundesministerium['Die Bundesregierung']} style={{ width: 300 }} />;

package/src/components/logo/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { LogoBasic } from './basic';
+
+export const LOGO_ROUTES: Routes = {
+	logo: {
+		basic: LogoBasic,
+	},
+};

package/src/components/modal/basic.tsx

@@ -0,0 +1,37 @@
+import React, { FC, useRef } from 'react';
+import { KolButton, KolCard, KolModal } from '@public-ui/react';
+
+export const ModalBasic: FC = () => {
+	const modalElement = useRef<HTMLKolModalElement>(null);
+
+	return (
+		<div>
+			<KolModal _ariaLabel="" _width="80%" ref={modalElement}>
+				<KolCard _heading="Ich bin ein Modal" style={{ width: '100%' }}>
+					<div slot="content">
+						<KolButton
+							_label="Schließen"
+							_on={{
+								onClick: () => {
+									if (modalElement?.current) {
+										modalElement.current._activeElement = null;
+									}
+								},
+							}}
+						/>
+					</div>
+				</KolCard>
+			</KolModal>
+			<KolButton
+				_label="Modal öffnen"
+				_on={{
+					onClick: (event: Event) => {
+						if (modalElement?.current) {
+							modalElement.current._activeElement = event.target as HTMLElement;
+						}
+					},
+				}}
+			/>
+		</div>
+	);
+};

package/src/components/modal/routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+
+import { ModalBasic } from './basic';
+
+export const MODAL_ROUTES: Routes = {
+	modal: {
+		basic: ModalBasic,
+	},
+};

package/src/components/nav/active.tsx

@@ -18,7 +18,7 @@ export const NavActive: FC = () => {
 		setLinks([
 			{
 				_label: 'Main',
-				_icon: 'fa-solid fa-house',
+				_icons: 'fa-solid fa-house',
 				_on: {
 					onClick: () => handleLinks('Main'),
 				},
@@ -44,7 +44,7 @@ export const NavActive: FC = () => {
 				_children: [
 					{
 						_label: 'Main',
-						_icon: 'fa-solid fa-house',
+						_icons: 'fa-solid fa-house',
 						_on: {
 							onClick: () => handleLinks('/'),
 						},

package/src/components/nav/basic.tsx

@@ -9,7 +9,7 @@ export const NavBasic: FC = () => (
 		_links={[
 			{
 				_label: 'Homepage',
-				_icon: 'fa-solid fa-house',
+				_icons: 'fa-solid fa-house',
 				_href: '#/',
 			},
 			{
@@ -34,7 +34,7 @@ export const NavBasic: FC = () => (
 						_active: true,
 						_label: '3.3 Navigation point',
 						_href: '#abc',
-						_icon: 'fa-solid fa-cat',
+						_icons: 'fa-solid fa-cat',
 						_children: [
 							{
 								_active: true,

package/src/components/pagination/basic.tsx

@@ -5,8 +5,9 @@ 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" />
+		<KolPagination _max={10} _page={6} _siblingCount={0} _label="Test Paginierung 1" />
+		<KolPagination _max={10} _page={6} _siblingCount={2} _variant="danger" _label="Test Paginierung 2" />
+		<KolPagination _max={10} _page={6} _siblingCount={0} _boundaryCount={2} _variant="ghost" _label="Test Paginierung 3" />
+		<KolPagination _max={6} _page={6} _siblingCount={0} _boundaryCount={2} _variant="ghost" _label="Test Paginierung 3" />
 	</div>
 );

package/src/components/popover/basic.tsx

@@ -12,21 +12,21 @@ export const PopoverBasic: FC = () => {
 
 	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>
+			<KolButton _label="Oben" _icons="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>
+			<KolButton _label="Rechts" _icons="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>
+			<KolButton _label="Unten" _icons="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>
+			<KolButton _label="Links" _icons="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>
+			<KolButton _label="PR starten" _icons="codicon codicon-git-pull-request" _variant="normal" _on={{ onClick: () => setLogin(!login) }}></KolButton>
 			<KolPopover _show={login}>
 				<KolInputText>Benutzername</KolInputText>
 				<KolInputPassword>Passwort</KolInputPassword>

package/src/components/quote/basic.tsx

@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+import { KolQuote } from '@public-ui/react';
+
+export const QuoteBasic: FC = () => (
+	<KolQuote _href="https://datatracker.ietf.org/doc/html/rfc1149" _quote="Avian carriers can provide high delay." _variant="inline"></KolQuote>
+);

package/src/components/quote/block.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import { KolQuote } from '@public-ui/react';
+
+export const QuoteBlock: FC = () => (
+	<KolQuote
+		_label="RFC 1149"
+		_href="https://datatracker.ietf.org/doc/html/rfc1149"
+		_quote="Avian carriers can provide high delay, low throughput, and low altitude
+								service. The connection topology is limited to a single point-to-point path
+								for each carrier, used with standard carriers, but many carriers can be used
+								without significant interference with each other, outside early spring.
+								This is because of the 3D ether space available to the carriers, in contrast
+								to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
+								avoidance system, which increases availability."
+		_variant="block"
+	></KolQuote>
+);

package/src/components/quote/routes.ts

@@ -0,0 +1,11 @@
+import { Routes } from '../../shares/types';
+
+import { QuoteBasic } from './basic';
+import { QuoteBlock } from './block';
+
+export const QUOTE_ROUTES: Routes = {
+	quote: {
+		basic: QuoteBasic,
+		block: QuoteBlock,
+	},
+};

package/src/components/select/basic.tsx

@@ -1,51 +1,5 @@
-import React from 'react';
-import { SelectOption } from '@public-ui/components';
+import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
+import { SelectVariants } from './partials/variants';
 
-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>
-);
+export const SelectBasic: FC = () => <FormWrap RefComponent={SelectVariants} />;