@public-ui/sample-react 2.0.4 → 2.0.5

package/dist/main.js.LICENSE.txt

@@ -33,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.14.2
+ * @remix-run/router v1.15.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -44,7 +44,7 @@
  */
 
 /**
- * React Router v6.21.3
+ * React Router v6.22.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
     "@leanup/stack": "1.3.49",
     "@leanup/stack-react": "1.3.49",
     "@leanup/stack-webpack": "1.3.49",
-    "@public-ui/components": "2.0.4",
-    "@public-ui/react": "2.0.4",
-    "@public-ui/themes": "2.0.4",
-    "@types/node": "20.11.6",
-    "@types/react": "18.2.48",
-    "@types/react-dom": "18.2.18",
-    "@unocss/preset-uno": "0.58.3",
-    "@unocss/webpack": "0.58.3",
+    "@public-ui/components": "2.0.5",
+    "@public-ui/react": "2.0.5",
+    "@public-ui/themes": "2.0.5",
+    "@types/node": "20.11.17",
+    "@types/react": "18.2.55",
+    "@types/react-dom": "18.2.19",
+    "@unocss/preset-uno": "0.58.5",
+    "@unocss/webpack": "0.58.5",
     "ajv": "8.12.0",
-    "chromedriver": "120.0.2",
+    "chromedriver": "121.0.0",
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-react": "7.33.2",
@@ -25,12 +25,12 @@
     "npm-run-all": "4.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router": "6.21.3",
-    "react-router-dom": "6.21.3",
+    "react-router": "6.22.0",
+    "react-router-dom": "6.22.0",
     "rimraf": "3.0.2",
     "ts-prune": "0.10.3",
     "typescript": "5.3.3",
-    "world_countries_lists": "2.8.2",
+    "world_countries_lists": "2.9.0",
     "yup": "1.3.3"
   },
   "files": [
@@ -48,9 +48,8 @@
     "webpack.config.js"
   ],
   "scripts": {
-    "clean": "git clean -f -d -X",
-    "clean:locks": "rimraf package-lock.json pnpm-lock.yaml && npm run clean",
     "build": "rimraf dist && cross-env NODE_ENV=production webpack",
+    "build:deps": "pnpm --filter @public-ui/sample-react^... build",
     "format": "prettier --check src",
     "lint": "eslint \"{src,tests}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
     "serve": "cross-env NODE_ENV=development webpack serve --devtool=source-map",

package/src/App.tsx

@@ -1,18 +1,23 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+import { useLocation } from 'react-router';
 import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
-import { Route as MyRoute, Routes as MyRoutes } from './shares/types';
 
-import { Option } from '@public-ui/components';
-import { KolAlert, KolBadge } from '@public-ui/react';
-import { ROUTES } from './shares/routes';
-import { isDraftTheme, Theme, THEME_OPTIONS } from './shares/theme';
 import PackageJson from '@public-ui/components/package.json';
-import { getTheme, getThemeName, setStorage, setTheme } from './shares/store';
+import { KolAlert, KolBadge } from '@public-ui/react';
+
 import { Sidebar } from './components/Sidebar';
-import { useLocation } from 'react-router';
-import { HideMenusContext } from './shares/HideMenusContext';
 import { useSetCurrentLocation } from './hooks/useSetCurrentLocation';
+import { HideMenusContext } from './shares/HideMenusContext';
+import { ROUTES } from './shares/routes';
+import { getTheme, getThemeName, setStorage, setTheme } from './shares/store';
+import { isDraftTheme, THEME_OPTIONS } from './shares/theme';
+import { BackPage } from './components/BackPage';
+
+import type { Route as MyRoute, Routes as MyRoutes } from './shares/types';
 
+import type { Option } from '@public-ui/components';
+import type { Theme } from './shares/theme';
 setStorage(localStorage);
 
 const getRouteList = (routes: MyRoutes, offset = '/'): string[] => {
@@ -133,10 +138,11 @@ export const App: FC = () => {
 				)}
 
 				<div className="p-4" id="route-container">
-					{!hideMenus && isDraftTheme(theme) && <KolBadge className="mb-3" _label="DRAFT" _color="#db5461" />}
+					{!hideMenus && isDraftTheme(theme) && <KolBadge className="block mb-3" _label="DRAFT" _color="#db5461" />}
 					<Routes>
 						{ROUTE_TREE}
 						<Route path="*" element={<KolAlert _type="info">This code example has not been migrated yet - it&#39;s coming soon!</KolAlert>} />
+						<Route path="back-page" element={<BackPage />} />
 					</Routes>
 				</div>
 			</div>

package/src/components/BackPage.tsx

@@ -0,0 +1,17 @@
+import { KolAlert, KolButton } from '@public-ui/react';
+import React from 'react';
+
+import type { FC } from 'react';
+
+export const BackPage: FC = () => {
+	const goBack = {
+		onClick: () => history.back(),
+	};
+
+	return (
+		<KolAlert _label="This is an example page" _level={0} _type="info">
+			<p>You followed an example link.</p>
+			{history.length > 1 && <KolButton _label="Go Back" _on={goBack} />}
+		</KolAlert>
+	);
+};

package/src/components/FocusInput.tsx

@@ -1,5 +1,7 @@
-import React, { FC, useRef } from 'react';
-import { RefComponent } from './types';
+import type { FC } from 'react';
+import React, { useRef } from 'react';
+
+import type { RefComponent } from './types';
 
 type FokusElementProps = {
 	RefComponent: RefComponent;

package/src/components/FormWrap.tsx

@@ -1,7 +1,11 @@
+import React from 'react';
+
 import { KolButton, KolForm } from '@public-ui/react';
-import React, { FC } from 'react';
+
 import { FocusElement } from './FocusInput';
-import { RefFormComponent } from './types';
+
+import type { FC } from 'react';
+import type { RefFormComponent } from './types';
 
 type FormWrapProps = {
 	RefComponent: RefFormComponent;

package/src/components/SampleDescription.tsx

@@ -1,5 +1,8 @@
-import React, { FC, PropsWithChildren, useContext } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+import React, { useContext } from 'react';
+
 import { KolIndentedText, KolLink } from '@public-ui/react';
+
 import { HideMenusContext } from '../shares/HideMenusContext';
 
 export const SampleDescription: FC<PropsWithChildren> = (props) => {

package/src/components/Sidebar.tsx

@@ -1,9 +1,12 @@
-import React, { FC, PropsWithChildren, useState } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+import React, { useState } from 'react';
+
 import { KolAccordion, KolButton, KolHeading, KolLink, KolSelect, KolVersion } from '@public-ui/react';
-import { THEME_OPTIONS } from '../shares/theme';
-import { Routes } from '../shares/types';
+
 import { useMobile } from '../hooks/useMobile';
+import { THEME_OPTIONS } from '../shares/theme';
 
+import type { Routes } from '../shares/types';
 type Props = {
 	version: string;
 	theme: string;
@@ -81,7 +84,12 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 								<ul className="list-inside ml p0">
 									{Object.keys(children).map((childName) => (
 										<li key={`${parentName}/${childName}`}>
-											<KolLink _label={childName} _href={`#/${parentName}/${childName}`} _on={{ onClick: handleLinkClick }} />
+											{/* Handle special case for nested routes in tree example - this might need a proper refactoring in the future  */}
+											{parentName === 'tree' && childName === 'basic/:subPage' ? (
+												<KolLink _label="basic" _href={`#/${parentName}/basic/home`} _on={{ onClick: handleLinkClick }} />
+											) : (
+												<KolLink _label={childName} _href={`#/${parentName}/${childName}`} _on={{ onClick: handleLinkClick }} />
+											)}
 										</li>
 									))}
 								</ul>

package/src/components/abbr/basic.tsx

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

package/src/components/abbr/routes.ts

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

package/src/components/accordion/basic.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
+
 import { KolAccordion } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const AccordionBasic: FC = () => (
 	<div className="grid gap-4">
 		<KolAccordion _label="Überschrift Accordion Tab 1" _level={1}>
 			<div slot="">Inhalt Accordion Tab 1</div>
 		</KolAccordion>
-		<KolAccordion _label="Überschrift Accordion Tab 2" _level={1} _open>
+		<KolAccordion _disabled _label="Überschrift Accordion Tab 2 (deaktiviert)" _level={1} _open>
 			<div slot="">Inhalt Accordion Tab 2</div>
 		</KolAccordion>
 		<KolAccordion _label="Überschrift Accordion Tab 3" _level={1}>

package/src/components/accordion/headlines.tsx

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

package/src/components/accordion/list.tsx

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

package/src/components/accordion/routes.ts

@@ -1,5 +1,4 @@
 import { Routes } from '../../shares/types';
-
 import { AccordionBasic } from './basic';
 import { AccordionHeadlines } from './headlines';
 import { AccordionList } from './list';

package/src/components/alert/basic.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
+
 import { KolAlert } from '@public-ui/react';
 
-import { FC } from 'react';
-import { AlertType, AlertVariant, HeadingLevel } from '@public-ui/components';
+import type { FC } from 'react';
+import type { AlertType, AlertVariant, HeadingLevel } from '@public-ui/components';
 
 type PropsByType = {
 	level: HeadingLevel;

package/src/components/alert/card-msg.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { FC } from 'react';
 
 import { AlertBasic } from './basic';
 
+import type { FC } from 'react';
+
 export const AlertCardMsg: FC = () => (
 	<div className="grid">
 		<AlertBasic variant="card" />

package/src/components/alert/html.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolAlert } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const AlertHtml: FC = () => (
 	<div>
@@ -9,14 +10,14 @@ export const AlertHtml: FC = () => (
 			<h2 className="mt-2 mb-3">Hier wird eine H2-Überschrift ausgegeben</h2>
 			<div className="grid gap-4 sm:grid-cols-2">
 				<div>
-					<h4>Text in einer linken Spalte</h4>
+					<h3>Text in einer linken Spalte</h3>
 					<p>
 						Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem sed fugiat dolorum ratione et, ullam officia nobis nihil debitis, consectetur dicta
 						accusantium. Vitae debitis, quibusdam vel recusandae deleniti placeat dolorem?
 					</p>
 				</div>
 				<div>
-					<h4>Text in einer rechten Spalte</h4>
+					<h3>Text in einer rechten Spalte</h3>
 					<p>
 						Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod beatae officiis, velit nam dicta quae repellat perspiciatis explicabo illo. Possimus,
 						molestiae deleniti! Exercitationem blanditiis ducimus similique tempora ratione consequuntur eaque!

package/src/components/alert/routes.ts

@@ -1,9 +1,6 @@
 import { Routes } from '../../shares/types';
-
 import { AlertBasic } from './basic';
-
 import { AlertCardMsg } from './card-msg';
-
 import { AlertHtml } from './html';
 
 export const ALERT_ROUTES: Routes = {

package/src/components/avatar/basic.tsx

@@ -1,6 +1,8 @@
+import React from 'react';
+
 import { KolAvatar } from '@public-ui/react';
-import React, { FC } from 'react';
 
+import type { FC } from 'react';
 export const AvatarBasic: FC = () => (
 	<div className="flex flex-wrap gap-4">
 		<KolAvatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Elke Mustermann" />

package/src/components/badge/basic.tsx

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

package/src/components/badge/button.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolBadge, KolHeading } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 const createBadgeProps = (label: string) => ({
 	_smartButton: {

package/src/components/badge/routes.ts

@@ -1,7 +1,5 @@
 import { Routes } from '../../shares/types';
-
 import { BadgeBasic } from './basic';
-
 import { BadgeButton } from './button';
 
 export const BADGE_ROUTES: Routes = {

package/src/components/breadcrumb/basic.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
+
 import { KolBreadcrumb } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const BreadcrumbBasic: FC = () => (
 	<div className="grid gap-4">
 		<KolBreadcrumb
 			_label="Breadcrumb aus Text-Links"
 			_links={[
-				{ _label: 'Startseite', _href: '#/' },
-				{ _label: 'Unterseite der Startseite', _href: '#/unterseite' },
+				{ _label: 'Startseite', _href: '#/back-page' },
+				{ _label: 'Unterseite der Startseite', _href: '#/back-page' },
 				{
 					_label: 'Unterseite der Unterseite',
-					_href: '#/unterseite/unterseite',
+					_href: '#/back-page',
 				},
 			]}
 		></KolBreadcrumb>
@@ -23,29 +24,29 @@ export const BreadcrumbBasic: FC = () => (
 					_label: 'Startseite',
 					_icons: 'codicon codicon-home',
 					_hideLabel: true,
-					_href: '#/',
+					_href: '#/back-page',
 				},
 				{
 					_label: 'Unterseite der Startseite mit sehr langem Link-Test',
-					_href: '#/unterseite',
+					_href: '#/back-page',
 				},
 				{
 					_label: 'Unterseite der Unterseite',
-					_href: '#/unterseite/unterseite',
+					_href: '#/back-page',
 				},
 			]}
 		></KolBreadcrumb>
 		<KolBreadcrumb
 			_label="Breadcrumb aus Icons- und Text-Links"
 			_links={[
-				{ _label: 'Startseite', _icons: 'codicon codicon-home', _href: '#/' },
+				{ _label: 'Startseite', _icons: 'codicon codicon-home', _href: '#/back-page' },
 				{
 					_label: 'Unterseite der Startseite und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen',
-					_href: '#/unterseite',
+					_href: '#/back-page',
 				},
 				{
 					_label: 'Unterseite der Unterseite',
-					_href: '#/unterseite/unterseite',
+					_href: '#/back-page',
 				},
 			]}
 		></KolBreadcrumb>

package/src/components/breadcrumb/routes.ts

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

package/src/components/button/access-key.tsx

@@ -1,6 +1,8 @@
+import React from 'react';
+
 import { KolButton } from '@public-ui/react';
-import React, { FC } from 'react';
 
+import type { FC } from 'react';
 export const ButtonAccessKey: FC = () => (
 	<div className="flex flex-wrap gap-4">
 		<KolButton _label="Mit S access key" _accessKey="S"></KolButton>

package/src/components/button/baselined.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolButton } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const ButtonBaselined: FC = () => (
 	<div className="inline-block">

package/src/components/button/basic.tsx

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

package/src/components/button/hide-label.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolButton } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 const ARGS = {
 	_icons: 'codicon codicon-home',

package/src/components/button/icons.tsx

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

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

@@ -1,7 +1,8 @@
-import { Components } from '@public-ui/components';
-import { KolButton } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
 import React, { forwardRef } from 'react';
 
+import { KolButton } from '@public-ui/react';
+
 export const ButtonCases = forwardRef<HTMLKolButtonElement, Components.KolButton>(function InputCheckboxCases(props, ref) {
 	return (
 		<div className="flex flex-wrap gap-4">

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

@@ -1,5 +1,6 @@
-import { Components } from '@public-ui/components';
+import type { Components } from '@public-ui/components';
 import React, { forwardRef } from 'react';
+
 import { ButtonCases } from './cases';
 
 export const ButtonVariants = forwardRef<HTMLKolButtonElement, Components.KolButton>(function InputCheckboxVariant(props, ref) {

package/src/components/button/routes.ts

@@ -1,14 +1,10 @@
 import { Routes } from '../../shares/types';
-
+import { ButtonAccessKey } from './access-key';
+import { ButtonBaselined } from './baselined';
 import { ButtonBasic } from './basic';
-
 import { ButtonIconOnly } from './hide-label';
-
 import { ButtonIcons } from './icons';
-
 import { ButtonWidth } from './width';
-import { ButtonAccessKey } from './access-key';
-import { ButtonBaselined } from './baselined';
 
 export const BUTTON_ROUTES: Routes = {
 	button: {

package/src/components/button/width.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolButton } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 const ARGS = {
 	className: 'w-8rem',

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

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

package/src/components/button-group/routes.ts

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

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

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

package/src/components/button-link/icons.tsx

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

package/src/components/button-link/image.tsx

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

package/src/components/button-link/routes.ts

@@ -1,9 +1,6 @@
 import { Routes } from '../../shares/types';
-
 import { ButtonLinkBasic } from './basic';
-
 import { ButtonLinkIcons } from './icons';
-
 import { ButtonLinkImage } from './image';
 
 export const BUTTON_LINK_ROUTES: Routes = {

package/src/components/card/basic.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolCard } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const CardBasic: FC = () => (
 	<KolCard _label="Titel">

package/src/components/card/confirm.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { KolButton, KolCard } from '@public-ui/react';
 
-import { FC } from 'react';
+import type { FC } from 'react';
 
 export const CardConfirm: FC = () => (
 	<KolCard _has-footer _label="Überschrift">