@public-ui/sample-react 1.7.25 → 1.7.26-rc.1

package/dist/9192.js.LICENSE.txt

@@ -1,3 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */

package/src/components/accordion/header.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import { KolAccordion } from '@public-ui/react';
-
-import { FC } from 'react';
-
-export const AccordionHeader: FC = () => (
-	<div className="grid gap-4">
-		<KolAccordion _heading="Accordion mit Header" _level={1} _open>
-			<div slot="header">Hier kann noch was in den Header</div>
-			<div slot="content">
-				Dieser Inhalt wird direkt beim Laden der Seite angezeigt.
-				<br />
-				Mit Klick auf die Überschrift wird der Inhalt versteckt.
-			</div>
-		</KolAccordion>
-	</div>
-);

package/src/components/accordion/list.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { KolAccordion, KolButton } from '@public-ui/react';
-
-import { FC } from 'react';
-
-const LIST = [
-	{
-		heading: 'Überschrift Accordion Tab 1',
-		content: 'Inhalt Accordion Tab 1',
-	},
-	{
-		heading: 'Überschrift Accordion Tab 2',
-		content: 'Inhalt Accordion Tab 2',
-	},
-	{
-		heading: 'Überschrift Accordion Tab 3',
-		content: 'Inhalt Accordion Tab 3',
-	},
-];
-
-export const AccordionList: FC = () => (
-	<div className="grid gap-4">
-		{LIST.map(({ heading, content }, index) => (
-			<KolAccordion _heading={heading} _level={1} _open={index === 1} key={index}>
-				<p slot="header">
-					<KolButton _label={'Bearbeiten'} />
-				</p>
-				<p slot="content">{content}</p>
-			</KolAccordion>
-		))}
-	</div>
-);

package/src/components/button/hide-label.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { KolButton } from '@public-ui/react';
-
-import { FC } from 'react';
-
-const ARGS = {
-	_icons: 'codicon codicon-home',
-	_hideLabel: true,
-	_on: {
-		onClick: (_event, _value) => alert('Klick!'),
-	},
-};
-
-export const ButtonIconOnly: FC = () => (
-	<div className="grid gap-14">
-		<div className="flex flex-wrap gap-14">
-			<KolButton _label="Primary" _variant="primary" _tooltipAlign="top" {...ARGS}></KolButton>
-			<KolButton _label="Secondary" _variant="secondary" _tooltipAlign="right" {...ARGS}></KolButton>
-			<KolButton _label="Normal" _variant="normal" _tooltipAlign="bottom" {...ARGS}></KolButton>
-			<KolButton _label="Danger" _variant="danger" _tooltipAlign="left" {...ARGS}></KolButton>
-			<KolButton _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
-		</div>
-		<div className="flex flex-wrap gap-14">
-			<KolButton _disabled _label="Primary" _variant="primary" {...ARGS}></KolButton>
-			<KolButton _disabled _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
-			<KolButton _disabled _label="Normal" _variant="normal" {...ARGS}></KolButton>
-			<KolButton _disabled _label="Danger" _variant="danger" {...ARGS}></KolButton>
-			<KolButton _disabled _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
-		</div>
-	</div>
-);

package/src/components/card/confirm.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { KolButton, KolCard } from '@public-ui/react';
-
-import { FC } from 'react';
-
-export const CardConfirm: FC = () => (
-	<KolCard _has-footer _heading="Überschrift">
-		<p className="p-2" slot="content">
-			Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta pariatur laudantium saepe ipsa atque officia cupiditate repudiandae harum earum aut
-			doloribus autem libero exercitationem dolor ad, magni dignissimos ratione fuga. Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
-			perferendis qui animi nesciunt illo facere, doloribus sint cupiditate nihil dolorem voluptate ab esse! Ducimus ad est commodi molestias voluptas
-			reiciendis.
-		</p>
-		<div slot="footer" className="flex gap-2 flex-justify-end">
-			<KolButton className="w-12rem" _variant="primary" _label="Speichern"></KolButton>
-			<KolButton className="w-12rem" _variant="secondary" _label="Abbrechen"></KolButton>
-		</div>
-	</KolCard>
-);

package/src/components/card/flex.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { KolCard } from '@public-ui/react';
-
-import { FC } from 'react';
-
-export const CardFlex: FC = () => (
-	<div className="grid grid-cols-2 gap-4">
-		<KolCard _heading="Titel" _hasFooter>
-			<div slot="header">Zusätzlicher Header</div>
-			<div slot="content">Inhalt</div>
-			<div slot="footer">Fusszeile</div>
-		</KolCard>
-		<KolCard _heading="Titel" _hasFooter>
-			<div slot="header">Zusätzlicher Header</div>
-			<div slot="content">
-				Inhalt
-				<br />
-				Inhalt
-			</div>
-			<div slot="footer">Fusszeile</div>
-		</KolCard>
-		<KolCard _heading="Titel" _hasFooter>
-			<div slot="header">Zusätzlicher Header</div>
-			<div slot="content">
-				Inhalt
-				<br />
-				Inhalt
-				<br />
-				Inhalt
-			</div>
-			<div slot="footer">Fusszeile</div>
-		</KolCard>
-		<KolCard _heading="Titel" _hasFooter>
-			<div slot="header">Zusätzlicher Header</div>
-			<div slot="content">Inhalt</div>
-			<div slot="footer">Fusszeile</div>
-		</KolCard>
-		<KolCard _heading="Titel" _hasFooter>
-			<div slot="header">Zusätzlicher Header</div>
-			<div slot="content">Inhalt</div>
-			<div slot="footer">Fusszeile</div>
-		</KolCard>
-	</div>
-);

package/src/components/card/selection.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import { KolButton, KolCard, KolInputCheckbox } from '@public-ui/react';
-
-import { FC } from 'react';
-
-const STYLE = {
-	display: 'flex',
-	justifyContent: 'space-between',
-	alignItems: 'center',
-	gap: '.5rem',
-};
-
-export const CardSelection: FC = () => (
-	<div className="flex gap-2">
-		<KolCard _hasFooter _heading="DEBTI-25437/17-1">
-			<div slot="header">
-				TeCorp Endplatte
-				<br />
-				VZTA
-			</div>
-			<div slot="content">
-				<div>
-					<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
-				</div>
-			</div>
-			<div slot="footer">
-				<div style={STYLE}>
-					<KolInputCheckbox>Auswählen</KolInputCheckbox>
-					<KolButton _variant="primary" _label="Öffnen"></KolButton>
-				</div>
-			</div>
-		</KolCard>
-		<KolCard _hasFooter _heading="DEBTI-25437/17-1">
-			<div slot="header">
-				TeCorp Endplatte
-				<br />
-				VZTA
-			</div>
-			<div slot="content">
-				<div>
-					<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
-				</div>
-			</div>
-			<div slot="footer">
-				<div style={STYLE}>
-					<KolInputCheckbox>Auswählen</KolInputCheckbox>
-					<KolButton _variant="primary" _label="Öffnen"></KolButton>
-				</div>
-			</div>
-		</KolCard>
-		<KolCard _hasFooter _heading="DEBTI-25437/17-1">
-			<div slot="header">
-				TeCorp Endplatte
-				<br />
-				VZTA
-			</div>
-			<div slot="content">
-				<div>
-					<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
-				</div>
-			</div>
-			<div slot="footer">
-				<div style={STYLE}>
-					<KolInputCheckbox>Auswählen</KolInputCheckbox>
-					<KolButton _variant="primary" _label="Öffnen"></KolButton>
-				</div>
-			</div>
-		</KolCard>
-	</div>
-);

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

@@ -1,18 +0,0 @@
-import React from 'react';
-import { KolForm, KolInputRadio } from '@public-ui/react';
-
-import { FC } from 'react';
-
-import { ERROR_MSG } from '../../shares/constants';
-
-const options = [
-	{ label: 'Frau', value: 'Frau' },
-	{ disabled: true, label: 'Herr (disabled)', value: 'Herr' },
-	{ label: 'Firma', value: 'Firma' },
-];
-
-export const InputRadioSelect: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolInputRadio _error={ERROR_MSG} _options={options} _label="Anrede" />
-	</KolForm>
-);

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

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

package/src/components/nav/active.tsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import { KolNav } from '@public-ui/react';
-
-import { FC, useEffect, useState } from 'react';
-import { ButtonOrLinkOrTextWithChildrenProps } from '@public-ui/components';
-
-export const NavActive: FC = () => {
-	const [links, setLinks] = useState<ButtonOrLinkOrTextWithChildrenProps[]>([]);
-
-	const handleLinks = (route: string) => {
-		const link = links.find((link) => link._label === route);
-		if (!link) return;
-		link._active = !link._active;
-		setLinks(links);
-	};
-
-	useEffect(() => {
-		setLinks([
-			{
-				_label: 'Main',
-				_icons: 'codicon codicon-home',
-				_on: {
-					onClick: () => handleLinks('Main'),
-				},
-			},
-			{
-				_label: 'Abbr',
-				_on: {
-					onClick: () => handleLinks('Abbr'),
-				},
-			},
-			{
-				_label: 'Accordion',
-				_on: {
-					onClick: () => handleLinks('Accordion'),
-				},
-			},
-			{
-				_active: true,
-				_label: 'Alert',
-				_on: {
-					onClick: () => handleLinks('Alert'),
-				},
-				_children: [
-					{
-						_label: 'Main',
-						_icons: 'codicon codicon-home',
-						_on: {
-							onClick: () => handleLinks('/'),
-						},
-					},
-					{
-						_active: true,
-						_label: 'Abbr',
-						_href: '#/back-page',
-						_on: {
-							onClick: () => handleLinks('/abbr'),
-						},
-					},
-					{
-						_label: 'Accordion',
-						_href: '#/back-page',
-						_on: {
-							onClick: () => handleLinks('/accordion'),
-						},
-					},
-					{
-						_label: 'Alert',
-						_href: '#/back-page',
-					},
-					{
-						_label: 'Badget',
-						_on: {
-							onClick: () => handleLinks('/badget'),
-						},
-					},
-				],
-			},
-			{
-				_label: 'Badget',
-				_on: {
-					onClick: () => handleLinks('Badget'),
-				},
-			},
-		]);
-	}, []);
-
-	return <KolNav _ariaLabel="Main navigation" _links={links} />;
-};

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

@@ -1,51 +0,0 @@
-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%',
-							}}
-							_icons="codicon codicon-location"
-							_label={'Speichern'}
-						/>,
-					);
-				},
-			},
-		],
-	],
-};
-
-export const TableBadgeSize: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;

package/src/components/textarea/disabled.tsx

@@ -1,10 +0,0 @@
-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." _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
-	</KolForm>
-);

package/src/components/textarea/placeholder.tsx

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

package/src/components/textarea/readonly.tsx

@@ -1,10 +0,0 @@
-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." _readOnly _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
-	</KolForm>
-);