@public-ui/sample-react 2.1.7 → 2.1.8-rc.0

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

@@ -42,50 +42,52 @@ export function InputTextFormatterDemo() {
 					vice versa the formatting is removed again (machine format)
 				</p>
 			</SampleDescription>
-			<Formik<FormValues> initialValues={initialValues} onSubmit={handleSubmit}>
-				{(form) => (
-					<>
-						<div className="p-2">
-							<KolHeading _label="Formatted Form Field" _level={2} />
-							<KolForm>
-								<Field name="iban">
-									{({ field }: FieldProps<FormValues['iban']>) => (
-										<div className="block mt-2">
-											<KolInputText
-												onBlur={() => {
-													void form.setFieldTouched('iban', true);
-												}}
-												id="field-iban"
-												_label="IBAN"
-												_value={formatter.format(field.value ?? '')}
-												_msg={{
-													_type: 'error',
-													_description: form.errors.iban || '',
-												}}
-												_touched={form.touched.iban}
-												_required
-												_on={{
-													onInput: (event, value: unknown) => {
-														if (event.target) {
-															const parsed_value = formatter.parse((value as string) ?? '');
+			<section className="w-full flex flex-col">
+				<Formik<FormValues> initialValues={initialValues} onSubmit={handleSubmit}>
+					{(form) => (
+						<>
+							<div className="p-2">
+								<KolHeading _label="Formatted Form Field" _level={2} />
+								<KolForm>
+									<Field name="iban">
+										{({ field }: FieldProps<FormValues['iban']>) => (
+											<div className="block mt-2">
+												<KolInputText
+													onBlur={() => {
+														void form.setFieldTouched('iban', true);
+													}}
+													id="field-iban"
+													_label="IBAN"
+													_value={formatter.format(field.value ?? '')}
+													_msg={{
+														_type: 'error',
+														_description: form.errors.iban || '',
+													}}
+													_touched={form.touched.iban}
+													_required
+													_on={{
+														onInput: (event, value: unknown) => {
+															if (event.target) {
+																const parsed_value = formatter.parse((value as string) ?? '');
 
-															void form.setFieldValue('iban', parsed_value, true);
-														}
-													},
-												}}
-											/>
-										</div>
-									)}
-								</Field>
-							</KolForm>
-						</div>
-						<div className="p-2">
-							<KolHeading _label="Model" _level={2} />
-							<pre>{JSON.stringify(form.values, null, 2)}</pre>
-						</div>
-					</>
-				)}
-			</Formik>
+																void form.setFieldValue('iban', parsed_value, true);
+															}
+														},
+													}}
+												/>
+											</div>
+										)}
+									</Field>
+								</KolForm>
+							</div>
+							<div className="p-2">
+								<KolHeading _label="Model" _level={2} />
+								<pre className="text-base">{JSON.stringify(form.values, null, 2)}</pre>
+							</div>
+						</>
+					)}
+				</Formik>
+			</section>
 		</>
 	);
 }

package/src/components/link/image.tsx

@@ -12,7 +12,6 @@ export const LinkImage: FC = () => (
 
 		<div className="grid gap-4">
 			<KolLink _href="#/back-page" _label="I am a link that is rendered as text" />
-			<br />
 			<KolLink _href="#/back-page" _label="">
 				<img alt="Presentation of the KoliBri theming" slot="expert" src="abgrenzung.jpg" width="300" />
 			</KolLink>

package/src/components/link/target.tsx

@@ -13,7 +13,7 @@ export const LinkTarget: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="d-flex gap-4">
+		<div className="text-base d-flex gap-4">
 			<ul>
 				<li>
 					<KolLink _href="#/back-page" _label="Link without target" />

package/src/components/modal/basic.tsx

@@ -17,7 +17,7 @@ export const ModalBasic: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<div>
+			<div className="flex">
 				<KolModal _label="Primary modal" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
 					<KolCard _label="I am a modal.">
 						<KolButton

package/src/components/nav/basic.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 
-import { KolInputCheckbox, KolNav } from '@public-ui/react';
+import { KolHeading, KolInputCheckbox, KolNav } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
-import { LINKS } from './links';
+import { LINKS, LINKS_WITHOUT_SUBMENU } from './links';
 
 import type { FC } from 'react';
 export const NavBasic: FC = () => {
@@ -17,16 +17,27 @@ export const NavBasic: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<KolInputCheckbox
-				_label="Show icons when expanded"
-				_checked={hasIconsWhenExpanded}
-				_on={{
-					onChange: (_event, value: unknown) => {
-						setHasIconsWhenExpanded(value as boolean);
-					},
-				}}
-			></KolInputCheckbox>
-			<KolNav class="block w-fit" _label="Main navigation" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
+			<section className="grid gap-8">
+				<section>
+					<KolInputCheckbox
+						_label="Show icons when expanded"
+						_checked={hasIconsWhenExpanded}
+						_on={{
+							onChange: (_event, value: unknown) => {
+								setHasIconsWhenExpanded(value as boolean);
+							},
+						}}
+					></KolInputCheckbox>
+				</section>
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Navigation without submenu" />
+					<KolNav class="block w-fit" _label="Main navigation" _links={LINKS_WITHOUT_SUBMENU} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
+				</section>
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Navigation with submenu" />
+					<KolNav class="block w-fit" _label="Main navigation" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
+				</section>
+			</section>
 		</>
 	);
 };

package/src/components/nav/horizontal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { KolNav } from '@public-ui/react';
+import { KolHeading, KolNav } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
-import { LINKS } from './links';
+import { LINKS, LINKS_WITHOUT_SUBMENU } from './links';
 
 import type { FC } from 'react';
 export const NavHorizontal: FC = () => (
@@ -10,6 +10,15 @@ export const NavHorizontal: FC = () => (
 			<p>This sample shows KolNav with horizontal alignment.</p>
 		</SampleDescription>
 
-		<KolNav _label="Main navigation" _links={LINKS} _orientation="horizontal" />
+		<section className="grid gap-8">
+			<section className="grid gap-4">
+				<KolHeading _level={2} _label="Navigation without submenu" />
+				<KolNav _label="Main navigation" _links={LINKS_WITHOUT_SUBMENU} _orientation="horizontal" />
+			</section>
+			<section className="grid gap-4">
+				<KolHeading _level={2} _label="Navigation with submenu" />
+				<KolNav _label="Main navigation" _links={LINKS} _orientation="horizontal" />
+			</section>
+		</section>
 	</>
 );

package/src/components/nav/links.ts

@@ -92,3 +92,39 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 		],
 	},
 ];
+
+export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
+	{
+		_label: 'Homepage',
+		_icons: 'codicon codicon-home',
+		_on: {
+			onClick: () => console.log('Homepage clicked'),
+		},
+	},
+	{
+		_label: '2 Navigation point',
+		_href: '#/back-page',
+		_on: {
+			onClick: () => console.log('Link clicked'),
+		},
+	},
+	{
+		_label: '3 Navigation point',
+		_href: '#/back-page',
+		_icons: 'codicon codicon-home',
+	},
+	{
+		_label: '4 Navigation point with children and onClick',
+		_on: {
+			onClick: () => console.log('4.1 Nested link clicked'),
+		},
+	},
+	{
+		_label: '5 No own page, only category',
+		_active: true,
+	},
+	{
+		_label: '6 No own page, with icon',
+		_icons: 'codicon codicon-squirrel',
+	},
+];

package/src/components/table/column-alignment.tsx

@@ -14,74 +14,76 @@ export const TableColumnAlignment: FC = () => (
 			<p>This sample shows KolTable with columns headers and data in different text alignments.</p>
 		</SampleDescription>
 
-		<KolHeading _label="Simple table" _level={3}></KolHeading>
-		<KolTable
-			_label="Table for demonstration purposes with different text align properties"
-			_headers={{
-				horizontal: [
-					[
-						{ label: 'left', key: 'left', textAlign: 'left' },
-						{ label: 'center', key: 'center', textAlign: 'center' },
-						{ label: 'right', key: 'right', textAlign: 'right' },
+		<section className="w-full flex flex-col">
+			<KolHeading _label="Simple table" _level={3}></KolHeading>
+			<KolTable
+				_label="Table for demonstration purposes with different text align properties"
+				_headers={{
+					horizontal: [
+						[
+							{ label: 'left', key: 'left', textAlign: 'left' },
+							{ label: 'center', key: 'center', textAlign: 'center' },
+							{ label: 'right', key: 'right', textAlign: 'right' },
+						],
 					],
-				],
-			}}
-			_data={DATA}
-			className="block"
-			style={{ maxWidth: '600px' }}
-		/>
+				}}
+				_data={DATA}
+				className="block"
+				style={{ maxWidth: '600px' }}
+			/>
 
-		<KolHeading _label="Table with sortable columns" _level={3} className="block mt-6"></KolHeading>
-		<KolTable
-			_label="Table for demonstration purposes with sortable columns"
-			_headers={{
-				horizontal: [
-					[
-						{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
-						{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
-						{ label: 'right', key: 'right', textAlign: 'right', sort: genericNonSorter },
+			<KolHeading _label="Table with sortable columns" _level={3} className="block mt-6"></KolHeading>
+			<KolTable
+				_label="Table for demonstration purposes with sortable columns"
+				_headers={{
+					horizontal: [
+						[
+							{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
+							{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
+							{ label: 'right', key: 'right', textAlign: 'right', sort: genericNonSorter },
+						],
 					],
-				],
-			}}
-			_data={DATA}
-			className="block"
-			style={{ maxWidth: '600px' }}
-		/>
+				}}
+				_data={DATA}
+				className="block"
+				style={{ maxWidth: '600px' }}
+			/>
 
-		<KolHeading _label="Table some sortable columns" _level={3} className="block mt-6"></KolHeading>
-		<KolTable
-			_label="Table for demonstration purposes with some but not all columns sortable"
-			_headers={{
-				horizontal: [
-					[
-						{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
-						{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
-						{ label: 'right', key: 'right', textAlign: 'right' },
+			<KolHeading _label="Table some sortable columns" _level={3} className="block mt-6"></KolHeading>
+			<KolTable
+				_label="Table for demonstration purposes with some but not all columns sortable"
+				_headers={{
+					horizontal: [
+						[
+							{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
+							{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
+							{ label: 'right', key: 'right', textAlign: 'right' },
+						],
 					],
-				],
-			}}
-			_data={DATA}
-			className="block"
-			style={{ maxWidth: '600px' }}
-		/>
+				}}
+				_data={DATA}
+				className="block"
+				style={{ maxWidth: '600px' }}
+			/>
 
-		<KolHeading _label="Table with vertical heading" _level={3} className="block mt-6"></KolHeading>
-		<KolTable
-			_label="Table for demonstration purposes with vertical heading"
-			_headers={{
-				horizontal: [
-					[
-						{ label: '', asTd: true },
-						{ label: 'left', key: 'left', textAlign: 'left' },
-						{ label: 'center', key: 'center', textAlign: 'center' },
-						{ label: 'right', key: 'right', textAlign: 'right' },
+			<KolHeading _label="Table with vertical heading" _level={3} className="block mt-6"></KolHeading>
+			<KolTable
+				_label="Table for demonstration purposes with vertical heading"
+				_headers={{
+					horizontal: [
+						[
+							{ label: '', asTd: true },
+							{ label: 'left', key: 'left', textAlign: 'left' },
+							{ label: 'center', key: 'center', textAlign: 'center' },
+							{ label: 'right', key: 'right', textAlign: 'right' },
+						],
 					],
-				],
-				vertical: [[{ label: 'Vertical' }]],
-			}}
-			_data={DATA}
-			className="block"
-			style={{ maxWidth: '600px' }}
-		/>
+					vertical: [[{ label: 'Vertical' }]],
+				}}
+				_data={DATA}
+				className="block"
+				style={{ maxWidth: '600px' }}
+			/>
+		</section>
 	</>
 );

package/src/components/table/complex-headers.tsx

@@ -9,84 +9,86 @@ export const TableComplexHeaders: FC = () => (
 			<p>This sample shows KolTable using vertical and horizontal headers, applying colspan and rowspan.</p>
 		</SampleDescription>
 
-		<KolTable
-			_label="Business hours"
-			_data={[
-				{
-					asp: 'Center',
-					monday: '08:00',
-					tuesday: '08:00',
-					wednesday: '10:00',
-					thursday: '11:00',
-					friday: '08:00',
-				},
-				{
-					asp: 'Tiergarten',
-					monday: '08:00',
-					tuesday: '08:00',
-					wednesday: '10:00',
-					thursday: '11:00',
-					friday: '08:00',
-				},
-				{
-					asp: 'Maxvorstadt',
-					monday: '08:00',
-					tuesday: '08:00',
-					wednesday: '10:00',
-					thursday: '11:00',
-					friday: '08:00',
-				},
-			]}
-			_headers={{
-				vertical: [[{ label: 'Berlin', rowSpan: 2 }, { label: 'München' }]],
-				horizontal: [
-					[
-						{
-							label: '',
-							colSpan: 7,
-						},
-						{
-							label: 'Weekend',
-							colSpan: 2,
-						},
+		<section className="w-full flex flex-col">
+			<KolTable
+				_label="Business hours"
+				_data={[
+					{
+						asp: 'Center',
+						monday: '08:00',
+						tuesday: '08:00',
+						wednesday: '10:00',
+						thursday: '11:00',
+						friday: '08:00',
+					},
+					{
+						asp: 'Tiergarten',
+						monday: '08:00',
+						tuesday: '08:00',
+						wednesday: '10:00',
+						thursday: '11:00',
+						friday: '08:00',
+					},
+					{
+						asp: 'Maxvorstadt',
+						monday: '08:00',
+						tuesday: '08:00',
+						wednesday: '10:00',
+						thursday: '11:00',
+						friday: '08:00',
+					},
+				]}
+				_headers={{
+					vertical: [[{ label: 'Berlin', rowSpan: 2 }, { label: 'München' }]],
+					horizontal: [
+						[
+							{
+								label: '',
+								colSpan: 7,
+							},
+							{
+								label: 'Weekend',
+								colSpan: 2,
+							},
+						],
+						[
+							{ label: '' },
+							{
+								label: 'District',
+								key: 'asp',
+							},
+							{
+								label: 'Monday',
+								key: 'monday',
+							},
+							{
+								label: 'Tuesday',
+								key: 'tuesday',
+							},
+							{
+								label: 'Wednesday',
+								key: 'wednesday',
+							},
+							{
+								label: 'Thursday',
+								key: 'thursday',
+							},
+							{
+								label: 'Friday',
+								key: 'friday',
+							},
+							{
+								label: 'Saturday',
+								key: 'saturday',
+							},
+							{
+								label: 'Sunday',
+								key: 'sunday',
+							},
+						],
 					],
-					[
-						{ label: '' },
-						{
-							label: 'District',
-							key: 'asp',
-						},
-						{
-							label: 'Monday',
-							key: 'monday',
-						},
-						{
-							label: 'Tuesday',
-							key: 'tuesday',
-						},
-						{
-							label: 'Wednesday',
-							key: 'wednesday',
-						},
-						{
-							label: 'Thursday',
-							key: 'thursday',
-						},
-						{
-							label: 'Friday',
-							key: 'friday',
-						},
-						{
-							label: 'Saturday',
-							key: 'saturday',
-						},
-						{
-							label: 'Sunday',
-							key: 'sunday',
-						},
-					],
-				],
-			}}
-		/>
+				}}
+			/>
+		</section>
 	</>
 );

package/src/components/table/horizontal-scrollbar.tsx

@@ -29,34 +29,36 @@ export const TableHorizontalScrollbar: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<KolHeading _label="Table with scrollbar" _level={2} />
-
-			<KolTable
-				_label="Table for demonstration purposes with horizontal scrollbar."
-				_minWidth={hasWidthRestriction ? '600px' : 'auto'}
-				_headers={HEADERS}
-				_data={DATA}
-				className="block"
-				style={{ width: '400px' }}
-			/>
-
-			<KolInputCheckbox
-				_checked={hasWidthRestriction}
-				_label="Toggle width restriction"
-				_variant="switch"
-				_on={{
-					onChange: (_event, value) => {
-						setHasWidthRestriction(Boolean(value));
-					},
-				}}
-			></KolInputCheckbox>
-
-			<KolHeading _label="Same table without scrollbar" _level={2} className="block mt-4" />
-			<p className="mt-0">
-				<i>Scrollbar appears on very small viewport sizes</i>
-			</p>
-
-			<KolTable _label="Table for demonstration purposes without horizontal scrollbar" _minWidth="600px" _headers={HEADERS} _data={DATA} className="block" />
+			<section className="w-full flex flex-col">
+				<KolHeading _label="Table with scrollbar" _level={2} />
+
+				<KolTable
+					_label="Table for demonstration purposes with horizontal scrollbar."
+					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
+					_headers={HEADERS}
+					_data={DATA}
+					className="block"
+					style={{ width: '400px' }}
+				/>
+
+				<KolInputCheckbox
+					_checked={hasWidthRestriction}
+					_label="Toggle width restriction"
+					_variant="switch"
+					_on={{
+						onChange: (_event, value) => {
+							setHasWidthRestriction(Boolean(value));
+						},
+					}}
+				></KolInputCheckbox>
+
+				<KolHeading _label="Same table without scrollbar" _level={2} className="block mt-4" />
+				<p className="mt-0">
+					<i>Scrollbar appears on very small viewport sizes</i>
+				</p>
+
+				<KolTable _label="Table for demonstration purposes without horizontal scrollbar" _minWidth="600px" _headers={HEADERS} _data={DATA} className="block" />
+			</section>
 		</>
 	);
 };