@public-ui/sample-react 2.0.4 → 2.0.6

package/src/components/nav/links.ts

@@ -4,64 +4,64 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: 'Homepage',
 		_icons: 'codicon codicon-home',
-		_href: '#/',
+		_href: '#/back-page',
 	},
 	{
 		_label: '2 Navigation point',
-		_href: '#/untermenu',
+		_href: '#/back-page',
 	},
 	{
 		_label: '3 Navigation point',
-		_href: '#abc',
+		_href: '#/back-page',
 		_icons: 'codicon codicon-home',
 		_children: [
 			{
 				_label: '3.1 Navigation point',
 				_icons: 'codicon codicon-home',
-				_href: '#/',
+				_href: '#/back-page',
 			},
 			{
 				_label: '3.2 Navigation point',
-				_href: '#abc',
+				_href: '#/back-page',
 				_target: 'asdasd',
 			},
 			{
 				_label: '3.3 Navigation point',
-				_href: '#abc',
+				_href: '#/back-page',
 				_children: [
 					{
 						_label: '3.3.1 Navigation point',
-						_href: '#abc',
+						_href: '#/back-page',
 					},
-					{ _label: '3.3.2 Navigation point', _href: '#abc' },
+					{ _label: '3.3.2 Navigation point', _href: '#/back-page' },
 				],
 			},
 			{
 				_label: '3.4 Navigation point',
-				_href: '#abc',
+				_href: '#/back-page',
 				_children: [
 					{
 						_label: '3.4.1 Navigation point',
-						_href: '#abc',
+						_href: '#/back-page',
 						_children: [
-							{ _label: '3.4.1.1 Navigation point', _href: '#abc' },
-							{ _label: '3.4.1.2 Navigation point (active)', _href: '#abc' },
+							{ _label: '3.4.1.1 Navigation point', _href: '#/back-page' },
+							{ _label: '3.4.1.2 Navigation point (active)', _href: '#/back-page' },
 						],
 					},
-					{ _label: '3.4.2 Navigation point', _href: '#abc' },
+					{ _label: '3.4.2 Navigation point', _href: '#/back-page' },
 				],
 			},
-			{ _label: '3.5 Navigation point', _href: '#abc' },
+			{ _label: '3.5 Navigation point', _href: '#/back-page' },
 		],
 	},
-	{ _label: '4 Navigation point', _href: '#abc' },
+	{ _label: '4 Navigation point', _href: '#/back-page' },
 	{
 		_label: '5 Keine eigene Seite, nur Kategorie',
 		_active: true,
 		_children: [
 			{
 				_label: '5.1 Verschachtelter Link',
-				_href: '#abc',
+				_href: '#/back-page',
 			},
 		],
 	},
@@ -71,7 +71,7 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 		_children: [
 			{
 				_label: '6.1 Verschachtelter Link',
-				_href: '#abc',
+				_href: '#/back-page',
 			},
 		],
 	},

package/src/components/pagination/basic.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolPagination } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const PaginationBasic: FC = () => (
 	<div className="grid gap-4">

package/src/components/pagination/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { PaginationBasic } from './basic';
 
 export const PAGINATION_ROUTES: Routes = {

package/src/components/progress/basic.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolProgress } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const ProgressBasic: FC = () => (
 	<div className="grid gap-4">

package/src/components/progress/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { ProgressBasic } from './basic';
 
 export const PROGRESS_ROUTES: Routes = {

package/src/components/quote/basic.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { KolQuote } from '@public-ui/react';
 
 export const QuoteBasic: FC = () => (

package/src/components/quote/block.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { KolQuote } from '@public-ui/react';
 
 export const QuoteBlock: FC = () => (

package/src/components/quote/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { QuoteBasic } from './basic';
 import { QuoteBlock } from './block';
 

package/src/components/select/basic.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { FormWrap } from '../FormWrap';
 import { SelectVariants } from './partials/variants';
 

package/src/components/select/partials/cases.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react';
+import countries from 'world_countries_lists/data/countries/de/countries.json';
 
-import { Components, SelectOption } from '@public-ui/components';
 import { KolSelect } from '@public-ui/react';
-import { ERROR_MSG } from '../../../shares/constants';
 
-import countries from 'world_countries_lists/data/countries/de/countries.json';
+import { ERROR_MSG } from '../../../shares/constants';
 
+import type { Components, SelectOption } from '@public-ui/components';
 type Country = {
 	id: number;
 	alpha2: string;

package/src/components/select/partials/variants.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 
-import { Components } from '@public-ui/components';
 import { SelectCases } from './cases';
 
+import type { Components } from '@public-ui/components';
 export const SelectVariants = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectVariant(props, ref) {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">

package/src/components/select/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { SelectBasic } from './basic';
 
 export const SELECT_ROUTES: Routes = {

package/src/components/skip-nav/basic.tsx

@@ -1,5 +1,8 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { KolSkipNav } from '@public-ui/react';
+
 import { SampleDescription } from '../SampleDescription';
 
 export const SkipNavBasic: FC = () => (

package/src/components/skip-nav/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { SkipNavBasic } from './basic';
 
 export const SKIP_NAV_ROUTES: Routes = {

package/src/components/spin/basic.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+
 import { KolSpin } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const SpinBasic: FC = () => <KolSpin _show />;

package/src/components/spin/custom.tsx

@@ -1,8 +1,10 @@
+import './custom.css';
+
 import React from 'react';
+
 import { KolSpin } from '@public-ui/react';
-import './custom.css';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const SpinCustom: FC = () => (
 	<KolSpin _show _variant="none">

package/src/components/spin/cycle.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+
 import { KolSpin } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const SpinCycle: FC = () => <KolSpin _show _variant="cycle" />;

package/src/components/spin/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { SpinBasic } from './basic';
 import { SpinCustom } from './custom';
 import { SpinCycle } from './cycle';

package/src/components/split-button/basic.tsx

@@ -1,7 +1,9 @@
+import React from 'react';
+
 import { ToasterService } from '@public-ui/components';
-import React, { FC } from 'react';
 import { KolSplitButton } from '@public-ui/react';
 
+import type { FC } from 'react';
 const toaster = ToasterService.getInstance(document);
 
 export const SplitButtonBasic: FC = () => {

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

@@ -1,11 +1,13 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React 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';
+import { DATA } from './test-data';
 
+import type { KoliBriTableHeaders } from '@public-ui/components';
+import type { Data } from './test-data';
 const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 	day: '2-digit',
 	month: '2-digit',

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

@@ -1,6 +1,8 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolHeading, KolTable } from '@public-ui/react';
 
-import { KolTable, KolHeading } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }];

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

@@ -1,9 +1,11 @@
-import React, { FC, useState } from 'react';
+import type { FC } from 'react';
+import React, { useState } from 'react';
 
 import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
-import { KoliBriTableHeaders } from '@public-ui/components/src';
+
 import { SampleDescription } from '../SampleDescription';
 
+import type { KoliBriTableHeaders } from '@public-ui/components/src';
 const DATA = [{ small: 'Small Example', large: 'Larger Example' }];
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [

package/src/components/table/pagination-position.tsx

@@ -1,10 +1,14 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 import { KolTable } from '@public-ui/react';
-import { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-ui/components';
-import { Data, DATA } from './test-data';
-import { DATE_FORMATTER } from './formatter';
+
 import { SampleDescription } from '../SampleDescription';
+import { DATE_FORMATTER } from './formatter';
+import { DATA } from './test-data';
+
+import type { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-ui/components';
+import type { Data } from './test-data';
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[

package/src/components/table/render-cell.tsx

@@ -1,12 +1,13 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 import { KolButton, KolInputText, KolTable } from '@public-ui/react';
 
 import { getRoot } from '../../shares/react-roots';
-import { KoliBriTableHeaders } from '@public-ui/components';
-import { DATE_FORMATTER } from './formatter';
 import { SampleDescription } from '../SampleDescription';
+import { DATE_FORMATTER } from './formatter';
 
+import type { KoliBriTableHeaders } from '@public-ui/components';
 type Data = {
 	order: number;
 	date: Date;

package/src/components/table/routes.ts

@@ -1,12 +1,11 @@
 import { Routes } from '../../shares/types';
-
 import { TableBadgeSize } from './badge-size';
 import { TableColumnAlignment } from './column-alignment';
+import { TableHorizontalScrollbar } from './horizontal-scrollbar';
+import { PaginationPosition } from './pagination-position';
 import { TableRenderCell } from './render-cell';
 import { TableSortData } from './sort-data';
 import { TableWithPagination } from './with-pagination';
-import { PaginationPosition } from './pagination-position';
-import { TableHorizontalScrollbar } from './horizontal-scrollbar';
 
 export const TABLE_ROUTES: Routes = {
 	table: {

package/src/components/table/sort-data.tsx

@@ -1,9 +1,12 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 import { KolTable } from '@public-ui/react';
-import { KoliBriTableHeaders } from '@public-ui/components';
-import { DATA, Data } from './test-data';
 
+import { DATA } from './test-data';
+
+import type { KoliBriTableHeaders } from '@public-ui/components';
+import type { Data } from './test-data';
 const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 	day: '2-digit',
 	month: '2-digit',

package/src/components/table/with-pagination.tsx

@@ -1,10 +1,13 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 import { KolTable } from '@public-ui/react';
-import { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-ui/components';
-import { Data, DATA } from './test-data';
+
 import { DATE_FORMATTER } from './formatter';
+import { DATA } from './test-data';
 
+import type { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-ui/components';
+import type { Data } from './test-data';
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[

package/src/components/tabs/basic.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { KolTabs } from '@public-ui/react';
 
 const tabs = [

package/src/components/tabs/icons-only.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { KolTabs } from '@public-ui/react';
 
 const tabs = [

package/src/components/tabs/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { TabsBasic } from './basic';
 import { TabsIconsOnly } from './icons-only';
 

package/src/components/textarea/adjust-height.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolForm, KolTextarea } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 const VALUE = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
 magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd

package/src/components/textarea/basic.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { FormWrap } from '../FormWrap';
 import { TextareaVariants } from './partials/variants';
 

package/src/components/textarea/counter.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { KolTextarea } from '@public-ui/react';
 
 export const TextareaCounter: FC = () => (

package/src/components/textarea/disabled.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolForm, KolTextarea } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const TextareaDisabled: FC = () => (
 	<KolForm>

package/src/components/textarea/partials/cases.tsx

@@ -1,9 +1,10 @@
 import React, { forwardRef } from 'react';
 
-import { Components } from '@public-ui/components';
 import { KolTextarea } from '@public-ui/react';
+
 import { ERROR_MSG } from '../../../shares/constants';
 
+import type { Components } from '@public-ui/components';
 export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaCases(props, ref) {
 	return (
 		<div className="grid gap-4">

package/src/components/textarea/partials/variants.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 
-import { Components } from '@public-ui/components';
 import { TextareaCases } from './cases';
 
+import type { Components } from '@public-ui/components';
 export const TextareaVariants = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaVariant(props, ref) {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">

package/src/components/textarea/placeholder.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolForm, KolTextarea } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const TextareaPlaceholder: FC = () => (
 	<KolForm>

package/src/components/textarea/readonly.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolForm, KolTextarea } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const TextareaReadOnly: FC = () => (
 	<KolForm>

package/src/components/textarea/resize.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolForm, KolTextarea } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const TextareaResize: FC = () => (
 	<KolForm className="grid gap-4">

package/src/components/textarea/routes.ts

@@ -1,19 +1,12 @@
 import { Routes } from '../../shares/types';
-
-import { TextareaBasic } from './basic';
-
 import { TextareaAdjustHeight } from './adjust-height';
-
+import { TextareaBasic } from './basic';
+import { TextareaCounter } from './counter';
 import { TextareaDisabled } from './disabled';
-
 import { TextareaPlaceholder } from './placeholder';
-
 import { TextareaReadOnly } from './readonly';
-
 import { TextareaResize } from './resize';
-
 import { TextareaRows } from './rows';
-import { TextareaCounter } from './counter';
 
 export const TEXTAREA_ROUTES: Routes = {
 	textarea: {

package/src/components/textarea/rows.tsx

@@ -1,7 +1,8 @@
-import { KolForm, KolTextarea } from '@public-ui/react';
 import React from 'react';
 
-import { FC } from 'react';
+import { KolForm, KolTextarea } from '@public-ui/react';
+
+import type { FC } from 'react';
 
 export const TextareaRows: FC = () => (
 	<KolForm>

package/src/components/toast/basic.tsx

@@ -1,8 +1,11 @@
+import React from 'react';
+
 import { ToasterService } from '@public-ui/components';
 import { KolButton } from '@public-ui/react';
-import React, { FC } from 'react';
+
 import { getRoot } from '../../shares/react-roots';
 
+import type { FC } from 'react';
 const toaster = ToasterService.getInstance(document);
 
 export const ToastBasic: FC = () => {

package/src/components/tree/basic.tsx

@@ -0,0 +1,72 @@
+import type { FC } from 'react';
+import React, { useContext, useState } from 'react';
+import { KolBadge, KolButton, KolTree, KolTreeItem } from '@public-ui/react';
+import { getRandomEmoji } from '../../shares/randomEmoji';
+import { useParams } from 'react-router';
+import { HideMenusContext } from '../../shares/HideMenusContext';
+
+export const TreeBasic: FC = () => {
+	const hideMenus = useContext(HideMenusContext);
+	const { subPage } = useParams();
+	const [homeLabel, setHomeLabel] = useState('1 Home');
+	const [showPets, setShowPets] = useState(false);
+	const [showEurope, setShowEurope] = useState(false);
+	const [showProducts, setShowProducts] = useState(true);
+	const updateHomeLabel = () => {
+		setHomeLabel(`1 Home ${getRandomEmoji()}`);
+	};
+
+	const getItemProps = (page: string) => {
+		return {
+			_href: `#/tree/basic/${page}${hideMenus ? '?hideMenus' : ''}`,
+			_active: page === subPage,
+		};
+	};
+
+	return (
+		<>
+			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
+
+			<KolTree _label="Sitemap" class="block w-fit">
+				<KolTreeItem _label={homeLabel} {...getItemProps('home')}></KolTreeItem>
+				<KolTreeItem _label="2 About (open initially)" {...getItemProps('about')} _open>
+					<KolTreeItem _label="2.1 Team" {...getItemProps('team')}>
+						<KolTreeItem _label="2.1.1. Values" {...getItemProps('values')}></KolTreeItem>
+						<KolTreeItem _label="2.1.2. Members" {...getItemProps('members')}>
+							<KolTreeItem _label="2.1.2.1 Humans" {...getItemProps('humans')}></KolTreeItem>
+							{showPets && <KolTreeItem _label="2.1.2.2 Pets" {...getItemProps('pets')}></KolTreeItem>}
+						</KolTreeItem>
+						<KolTreeItem _label="2.1.3 Locations" {...getItemProps('locations')}>
+							{showEurope && (
+								<KolTreeItem _label="2.1.3.1 Europe" {...getItemProps('europe')}>
+									<KolTreeItem _label="2.1.3.1.1 Denmark" {...getItemProps('denmark')} />
+									<KolTreeItem _label="2.1.3.1.2 Netherlands" {...getItemProps('netherlands')} />
+								</KolTreeItem>
+							)}
+						</KolTreeItem>
+					</KolTreeItem>
+				</KolTreeItem>
+				{showProducts && (
+					<KolTreeItem _label="3. Products" {...getItemProps('products')}>
+						<KolTreeItem _label="3.1 Home" {...getItemProps('home-products')}>
+							<KolTreeItem _label="3.1.1 Refrigerators" {...getItemProps('fridges')}></KolTreeItem>
+							<KolTreeItem _label="3.1.2 Coffee makers" {...getItemProps('coffee-makers')}></KolTreeItem>
+						</KolTreeItem>
+						<KolTreeItem _label="3.1 Office" {...getItemProps('office-products')}>
+							<KolTreeItem _label="3.2.1 Printers" {...getItemProps('printers')}></KolTreeItem>
+						</KolTreeItem>
+					</KolTreeItem>
+				)}
+			</KolTree>
+
+			<p>Current tree item: {subPage ?? 'none'}</p>
+
+			<div className="flex flex-row gap-2">
+				<KolButton _label="Change label for '1 Home'" _on={{ onClick: updateHomeLabel }}></KolButton>
+				<KolButton _label="Toggle '2.1.2.2 Pets'" _on={{ onClick: () => setShowPets(!showPets) }}></KolButton>
+				<KolButton _label="Toggle '2.2.1 Europe' (two levels at once)" _on={{ onClick: () => setShowEurope(!showEurope) }}></KolButton>
+				<KolButton _label="Toggle '3. Products'" _on={{ onClick: () => setShowProducts(!showProducts) }}></KolButton>
+			</div>
+		</>
+	);
+};