@public-ui/sample-react 2.0.9 → 2.0.10

package/src/scenarios/complex-form/common/form/component.tsx

@@ -1,25 +0,0 @@
-import React, { FC, ReactNode } from 'react';
-
-import { KolForm, KolLinkGroup } from '@public-ui/react';
-
-type Props = {
-	submitted: boolean;
-	children: ReactNode;
-	onSubmit: (event: Event) => void;
-};
-
-export const FromComponent: FC<Props> = (props) => (
-	<>
-		{props.submitted === true && (
-			<KolLinkGroup tabIndex={0} class="fehlerliste" data-removed-_label="Fehlerliste" _label="Fehlerliste" _level={3} _links={[]} />
-		)}
-		<KolForm
-			className="block mb-2"
-			_on={{
-				onSubmit: props.onSubmit,
-			}}
-		>
-			{props.children}
-		</KolForm>
-	</>
-);

package/src/scenarios/complex-form/common/form/types.ts

@@ -1,13 +0,0 @@
-export type Fehler = {
-	_label: string;
-	_selector: string;
-};
-
-export type FormProps = {
-	onSubmitted: (event: Event) => void;
-};
-
-export type FormState = {
-	loader: boolean;
-	touched: boolean;
-};

package/src/scenarios/complex-form/component.tsx

@@ -1,164 +0,0 @@
-import React from 'react';
-import type { FC } from 'react';
-
-import { KolHeading, KolProgress, KolTable, KolTabs } from '@public-ui/react';
-
-import { TerminKopfdatenComponent } from './kopfdaten/component';
-import { TerminLocationComponent } from './location/component';
-import { TerminScheduleComponent } from './schedule/component';
-
-type Zeiten = {
-	stadtteil: string;
-	zeiten: string;
-	montag: string;
-	dienstag: string;
-	mittwoch: string;
-	donnerstag: string;
-	freitag: string;
-};
-
-export const TerminComponent: FC = () => (
-	<>
-		<div className="grid sm:grid-cols-1 gap-2 my-3">
-			<KolHeading _label="Terminreservierung" />
-			<KolHeading _label="Termine für Einwohnermelde- (incl. Pass- und Ausweisangelegenheiten) und Kraftfahrzeugangelegenheiten" _level={2} />
-			<div style={{ fontFamily: 'Arial' }}>
-				<p className="py-2">Derzeit kann generell nur mit vorheriger Terminvereinbarung bei den Bürgerdiensten vorgesprochen werden.</p>
-				<p className="py-2">
-					Die Termine für Einwohnermelde- und Kraftfahrzeugangelegenheiten werden täglich ab 07:00 Uhr für den gleichen Tag, für den gleichen Tag 7 Tage und für
-					den gleichen Tag 14 Tage später freigegeben. So können Sie jeden Tag spontan Termine für den gleichen Tag und planbar Termine für eine Woche oder zwei
-					Wochen später erhalten.
-				</p>
-				<p className="py-2">
-					Sofern online keine Termine innerhalb der nächsten 14 Tage mehr verfügbar sind, führt auch eine darüber hinaus gehende telefonische Kontaktaufnahme
-					leider zu keinem anderen Ergebnis. In diesem Fall versuchen Sie es bitte am nächsten Morgen erneut.
-				</p>
-				<p className="py-2">
-					Bitte achten Sie darauf, den richtigen Kalender für Ihr Anliegen auszuwählen. Hinweis: Bitte geben Sie bei Ihrer Terminvereinbarung zur lückenlosen
-					Kontaktverfolgung immer Ihre korrekte Telefonnummer und E-Mail Adresse an. Wir behalten uns vor, gebuchte Termine mit falschen Angaben zu löschen.
-				</p>
-			</div>
-		</div>
-		<div className="grid sm:grid-cols-1 gap-2">
-			<KolTable
-				_label="Öffnungszeiten"
-				_data={
-					[
-						{
-							stadtteil: 'Brackel',
-							montag: '08:00 - 12:00, 14:00 - 16:00',
-							dienstag: '08:00 - 12:00, 14:00 - 15:00',
-							mittwoch: '08:00 - 12:00, 14:00 - 15:00',
-							donnerstag: '08:00 - 12:00, 14:00 - 18:00',
-							freitag: '08:00 - 12:00',
-						},
-						{
-							stadtteil: 'Dorstfeld',
-							montag: '09:00 - 12:00, 14:00 - 16:00',
-							dienstag: '09:00 - 12:00, 14:00 - 15:00',
-							mittwoch: '09:00 - 12:00, 14:00 - 15:00',
-							donnerstag: '09:00 - 12:00, 14:00 - 18:00',
-							freitag: '09:00 - 12:00',
-						},
-						{
-							stadtteil: 'Aplerbeck',
-							montag: '08:00 - 12:00, 14:00 - 16:00',
-							dienstag: '08:00 - 12:00, 14:00 - 15:00',
-							mittwoch: '08:00 - 12:00, 14:00 - 15:00',
-							donnerstag: '08:00 - 12:00, 14:00 - 18:00',
-							freitag: '08:00 - 12:00',
-						},
-						{
-							stadtteil: 'Innenstadt Ost',
-							montag: '07:00 - 12:00, 14:00 - 16:00',
-							dienstag: '07:00 - 12:00, 14:00 - 15:00',
-							mittwoch: '07:00 - 12:00, 14:00 - 15:00',
-							donnerstag: '07:00 - 12:00, 14:00 - 18:00',
-							freitag: '07:00 - 12:00, 13:00 - 16:00',
-						},
-						{
-							stadtteil: 'Innenstadt West',
-							montag: '07:00 - 12:00, 14:00 - 16:00',
-							dienstag: '07:00 - 12:00, 14:00 - 15:00',
-							mittwoch: '07:00 - 12:00, 14:00 - 15:00',
-							donnerstag: '07:00 - 12:00, 14:00 - 18:00',
-							freitag: '07:00 - 12:00, 13:00 - 16:00',
-							/*render: (el, data) => {
-						el.innerHTML = `<kol-badge _color="#ff0000" _label="NIX"></kol-badge>`;
-					  },*/
-						},
-					] as Zeiten[]
-				}
-				_headers={{
-					horizontal: [
-						[
-							{ label: '', asTd: true },
-							{ label: 'Tag', colSpan: 5 },
-						],
-						[
-							{
-								label: 'Stadtteil',
-								key: 'stadtteil',
-								textAlign: 'left',
-								sort: (data: Zeiten[]) => {
-									return data.sort((first, second) => {
-										if (first.stadtteil < second.stadtteil) {
-											return -1;
-										}
-										if (first.stadtteil > second.stadtteil) {
-											return 1;
-										}
-										return 0;
-									});
-								},
-							},
-							{ label: 'Montag', key: 'montag', textAlign: 'center' },
-							{ label: 'Dienstag', key: 'dienstag', textAlign: 'center' },
-							{ label: 'Mittwoch', key: 'mittwoch', textAlign: 'center' },
-							{ label: 'Donnerstag', key: 'donnerstag', textAlign: 'center' },
-							{ label: 'Freitag', key: 'freitag', textAlign: 'center' },
-						],
-					],
-				}}
-				_minWidth="50em"
-				style={{
-					display: 'inline-grid',
-					width: '100%',
-				}}
-			></KolTable>
-			<KolTabs
-				className="block mt-4"
-				_ariaLabel="Registerkarten"
-				_tabs={[
-					{
-						_label: '1. Einwohnermeldeämter',
-					},
-					{
-						_label: '2. Freie Termine',
-					},
-					{
-						_label: '3. Persönliche Daten',
-					},
-				]}
-			>
-				<div>
-					<KolHeading _level={2} _label="Wählen Sie einen Stadtteil aus" />
-					<TerminLocationComponent onSubmitted={() => {}} />
-				</div>
-				<div>
-					<KolHeading _level={2} _label="Wählen Sie einen Termin aus" />
-					<TerminScheduleComponent onSubmitted={() => {}} />
-				</div>
-				<div>
-					<KolHeading _level={2} _label="Geben Sie Ihre Kontaktdaten ein" />
-					<TerminKopfdatenComponent onSubmitted={() => {}} />
-				</div>
-			</KolTabs>
-		</div>
-		<div className="grid sm:grid-cols-1 gap-2">
-			<div className="border-top"></div>
-			<KolHeading _level={3} _label="Fortschritt" />
-			<KolProgress _value={0} _max={100} _unit="Prozent des Formulars"></KolProgress>
-		</div>
-	</>
-);

package/src/scenarios/complex-form/kopfdaten/component.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import type { FC } from 'react';
-
-import { KolAbbr, KolButton, KolInputEmail, KolInputRadio, KolInputText, KolSpin } from '@public-ui/react';
-
-import { FromComponent } from '../common/form/component';
-import { FormProps } from '../common/form/types';
-
-export const TerminKopfdatenComponent: FC<FormProps> = (props) => (
-	<FromComponent submitted={true} onSubmit={() => {}}>
-		<div className="grid grid-cols-2 gap-4">
-			<KolInputRadio
-				_id="anrede"
-				_list={[
-					{ label: 'Herr', value: 'Herr' },
-					{ label: 'Frau', value: 'Frau' },
-				]}
-				_touched={true}
-			></KolInputRadio>
-			<KolInputText _id="termin_kopfdaten_vorname" _type="text" _autoComplete="on" _touched={true}></KolInputText>
-			<KolInputText _id="termin_kopfdaten_nachname" _type="text" _autoComplete="on" _touched={true}></KolInputText>
-			<KolInputText _id="termin_kopfdaten_strasse" _type="text" _autoComplete="on" _touched={true}></KolInputText>
-			<div className="grid grid-cols-6 gap-4">
-				<KolInputText _id="termin_kopfdaten_plz" _type="text" _autoComplete="on" _touched={true}>
-					<KolAbbr _title="Postleitzahl" _tooltipAlign="right">
-						PLZ
-					</KolAbbr>
-				</KolInputText>
-				<KolInputText _id="termin_kopfdaten_ort" _type="text" _autoComplete="on" _touched={true}></KolInputText>
-			</div>
-			<KolInputText
-				_id="termin_kopfdaten_telefon"
-				_icon="icofont-phone"
-				_list={['01234 / 567890']}
-				_type="tel"
-				_autoComplete="on"
-				_touched={true}
-			></KolInputText>
-			<KolInputEmail
-				_id="termin_kopfdaten_email"
-				_icon="icofont-email"
-				_list={['elke.mustermann@test.de', 'max.mustermann@test.de']}
-				_touched={true}
-				_autoComplete="on"
-			></KolInputEmail>
-			<div>
-				<KolButton className="inline-block my-1" _icon="icofont-paper-plane" _type="submit" _label="Terminanfrage absenden"></KolButton>
-				<KolSpin _show={true} className="ml-4" />
-			</div>
-		</div>
-	</FromComponent>
-);

package/src/scenarios/complex-form/location/component.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import type { FC } from 'react';
-
-import { KolButton, KolSelect, KolSpin } from '@public-ui/react';
-
-import { FromComponent } from '../common/form/component';
-import { FormProps } from '../common/form/types';
-import { LOCATION_OPTIONS } from './location.form';
-
-export const TerminLocationComponent: FC<FormProps> = () => (
-	<FromComponent submitted={true} onSubmit={() => {}}>
-		<div className="grid sm:grid-cols-1 xl:grid-cols-2 gap-2 my-2">
-			<KolSelect _id="termin-location-location" _list={LOCATION_OPTIONS} _touched={true}></KolSelect>
-		</div>
-		<KolButton className="inline-block my-1" _icon="icofont-arrow-right" _iconAlign="right" _label="Zur Terminauswahl" _type="submit"></KolButton>
-		<KolSpin _show={true} className="ml-4" />
-	</FromComponent>
-);

package/src/scenarios/complex-form/location/location.form.ts

@@ -1,22 +0,0 @@
-export const LOCATION_OPTIONS = [
-	{
-		value: 'Aplerbeck',
-		label: 'Aplerbeck',
-	},
-	{
-		value: 'Brackel',
-		label: 'Brackel',
-	},
-	{
-		value: 'Dorstfeld',
-		label: 'Dorstfeld',
-	},
-	{
-		value: 'Innenstadt Ost',
-		label: 'Innenstadt Ost',
-	},
-	{
-		value: 'Innenstadt West',
-		label: 'Innenstadt West',
-	},
-];

package/src/scenarios/complex-form/schedule/component.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import type { FC } from 'react';
-
-import { KolButton, KolInputDate, KolSpin } from '@public-ui/react';
-
-import { FromComponent } from '../common/form/component';
-import { FormProps } from '../common/form/types';
-
-export const TerminScheduleComponent: FC<FormProps> = (props) => (
-	<FromComponent submitted={true} onSubmit={() => {}}>
-		<div className="grid sm:grid-cols-1 xl:grid-cols-2 gap-2 my-2">
-			<KolInputDate _id="termin-schedule-schedule" _type="date" _touched={true}></KolInputDate>
-			<KolInputDate _id="termin-schedule-time" _type="time" _touched={true}></KolInputDate>
-		</div>
-		<KolButton className="inline-block my-1" _icon="icofont-arrow-right" _iconAlign="right" _label="Zu den Kontaktdaten" _type="submit"></KolButton>
-		<KolSpin _show={true} className="ml-4" />
-	</FromComponent>
-);

package/src/scenarios/complex-form/schedule/schedule.form.ts

@@ -1,34 +0,0 @@
-import { FormControl, InputControl, RequiredValidator, ValidationHandler } from '@leanup/form';
-
-export interface Schedule {
-	schedule: string;
-	time: string;
-}
-
-export class ScheduleForm extends FormControl {
-	public constructor() {
-		super('schedule');
-
-		this.addControl(
-			new InputControl('schedule', {
-				label: 'Datum',
-				mandatory: true,
-			}),
-		);
-
-		this.addControl(
-			new InputControl('time', {
-				label: 'Uhrzeit',
-				mandatory: true,
-			}),
-		);
-
-		const validationHandler = new ValidationHandler();
-		validationHandler.validators.add([new RequiredValidator('Bitte wählen Sie ein Datum aus.')]);
-		this.getInput('schedule')?.setValidationHandler(validationHandler);
-
-		const timeHandler = new ValidationHandler();
-		timeHandler.validators.add([new RequiredValidator('Bitte wählen Sie eine Uhrzeit aus.')]);
-		this.getInput('time')?.setValidationHandler(timeHandler);
-	}
-}