@public-ui/sample-react 1.7.24 → 1.7.26-rc.0

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>
-);