@public-ui/sample-react 2.1.4 → 2.1.5-rc.2

package/src/components/card/selection.tsx

@@ -1,83 +0,0 @@
-import React from 'react';
-
-import { KolButton, KolCard, KolInputCheckbox } from '@public-ui/react';
-
-import type { FC } from 'react';
-import { SampleDescription } from '../SampleDescription';
-
-const STYLE = {
-	display: 'flex',
-	justifyContent: 'space-between',
-	alignItems: 'center',
-	gap: '.5rem',
-};
-
-export const CardSelection: FC = () => (
-	<>
-		<SampleDescription>
-			<p>Hier werden drei Beispielbilder nach klicken auf &apos;Öffnen&apos; angezeigt. Die Checkboxen &apos;Auswählen&apos; können an und abgewählt werden.</p>
-		</SampleDescription>
-		<div className="flex flex-wrap gap-2">
-			<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
-				<div>
-					<div>
-						TeCorp Endplatte
-						<br />
-						VZTA
-					</div>
-					<div>
-						<div>
-							<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
-						</div>
-					</div>
-					<div>
-						<div style={STYLE}>
-							<KolInputCheckbox _label={`Auswählen`} />
-							<KolButton _variant="primary" _label="Öffnen"></KolButton>
-						</div>
-					</div>
-				</div>
-			</KolCard>
-			<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
-				<div>
-					<div>
-						TeCorp Endplatte
-						<br />
-						VZTA
-					</div>
-					<div>
-						<div>
-							<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
-						</div>
-					</div>
-					<div>
-						<div style={STYLE}>
-							<KolInputCheckbox _label={`Auswählen`} />
-							<KolButton _variant="primary" _label="Öffnen"></KolButton>
-						</div>
-					</div>
-				</div>
-			</KolCard>
-			<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
-				<div>
-					<div>
-						TeCorp Endplatte
-						<br />
-						VZTA
-					</div>
-					<div>
-						<div>
-							<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
-						</div>
-					</div>
-					<div>
-						<div style={STYLE}>
-							<KolInputCheckbox _label={`Auswählen`} />
-							<KolButton _variant="primary" _label="Öffnen"></KolButton>
-						</div>
-					</div>
-				</div>
-			</KolCard>
-		</div>
-	</>
-);

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

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { KolForm, KolInputRadio } from '@public-ui/react';
-
-import { ERROR_MSG } from '../../shares/constants';
-import { SampleDescription } from '../SampleDescription';
-
-import type { FC } from 'react';
-
-const options = [
-	{ label: 'Frau', value: 'Frau' },
-	{ disabled: true, label: 'Herr (disabled)', value: 'Herr' },
-	{ label: 'Firma', value: 'Firma' },
-];
-
-export const InputRadioSelect: FC = () => (
-	<>
-		<SampleDescription>
-			<p>Hier ist ein Beispiel Radio-Button. Nur eine gleichzeitige Auswahl ist möglich. </p>
-		</SampleDescription>
-		<KolForm className="grid gap-4">
-			<KolInputRadio _msg={{ _type: 'error', _description: ERROR_MSG }} _options={options} _label="Anrede" />
-		</KolForm>
-	</>
-);

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

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

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

@@ -1,66 +0,0 @@
-import type { FC } from 'react';
-import React from 'react';
-
-import { KolBadge, KolTable } from '@public-ui/react';
-
-import { getRoot } from '../../shares/react-roots';
-import type { Data } from './test-data';
-import { DATA } from './test-data';
-import { SampleDescription } from '../SampleDescription';
-
-import type { KoliBriTableHeaders } from '@public-ui/components';
-
-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', width: '10em' },
-			{
-				label: 'date',
-				key: 'date',
-				textAlign: 'center',
-				width: '20em',
-				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				sort: (data) =>
-					data.sort((data0, data1) => {
-						if ((data0 as Data).date < (data1 as Data).date) return -1;
-						else if ((data1 as Data).date < (data0 as Data).date) return 1;
-						else return 0;
-					}),
-			},
-			{
-				label: 'Aktion',
-				key: 'order',
-				render: (el) => {
-					getRoot(el).render(
-						<KolBadge
-							style={{
-								backgroundColor: 'red',
-								width: '80%',
-							}}
-							_icons="codicon codicon-location"
-							_label={'Speichern'}
-						/>,
-					);
-				},
-			},
-		],
-	],
-};
-
-export const TableBadgeSize: FC = () => (
-	<>
-		<SampleDescription>
-			<p>
-				Hier ist eine Tabelle, die durch anklicken des Knopfes sortiert werden kann. Entweder nach der Reihenfolge, nach dem ältesten Datum oder nach dem
-				jüngsten Datum.
-			</p>
-		</SampleDescription>
-		<KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />
-	</>
-);

package/src/components/textarea/disabled.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import { KolForm, KolTextarea } from '@public-ui/react';
-
-import type { FC } from 'react';
-import { SampleDescription } from '../SampleDescription';
-
-export const TextareaDisabled: FC = () => (
-	<>
-		<SampleDescription>
-			<p>Hier ist ein Beispiel für ein deaktiviertes Textfeld.</p>
-		</SampleDescription>
-		<KolForm>
-			<KolTextarea
-				_disabled
-				_msg={{ _type: 'error', _description: 'Es ist ein Fehler aufgetreten' }}
-				_value="Kleiner Text im Eingabefeld ..."
-				_label="Texteingabe"
-			/>
-		</KolForm>
-	</>
-);

package/src/components/textarea/placeholder.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import { KolForm, KolTextarea } from '@public-ui/react';
-
-import type { FC } from 'react';
-import { SampleDescription } from '../SampleDescription';
-
-export const TextareaPlaceholder: FC = () => (
-	<>
-		<SampleDescription>
-			<p>Hier ist ein Beispiel für ein Freitextfeld mit Platzhaltertext.</p>
-		</SampleDescription>
-		<KolForm>
-			<KolTextarea _placeholder="Hier steht ein Platzhaltertext" _label="Texteingabe" />
-		</KolForm>
-	</>
-);

package/src/components/textarea/readonly.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import { KolForm, KolTextarea } from '@public-ui/react';
-
-import type { FC } from 'react';
-import { SampleDescription } from '../SampleDescription';
-
-export const TextareaReadOnly: FC = () => (
-	<>
-		<SampleDescription>
-			<p>Hier ist ein Beispiel für ein Textfeld, in das nicht geschrieben werden kann.</p>
-		</SampleDescription>
-		<KolForm>
-			<KolTextarea
-				_msg={{ _type: 'error', _description: 'Es ist ein Fehler aufgetreten' }}
-				_readOnly
-				_value="Kleiner Text im Eingabefeld ..."
-				_label="Texteingabe"
-			/>
-		</KolForm>
-	</>
-);