@public-ui/sample-react 1.7.0-rc.6 → 1.7.0-rc.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/sample-react",
-	"version": "1.7.0-rc.6",
+	"version": "1.7.0-rc.7",
 	"description": "This app contains samples for the KoliBri/Public UI",
 	"license": "EUPL-1.2",
 	"scripts": {
@@ -20,16 +20,16 @@
 		"kolibri-sample-react-test-build": "test-build.sh"
 	},
 	"dependencies": {
-		"@leanup/stack": "1.3.47",
-		"@leanup/stack-react": "1.3.44",
-		"@leanup/stack-webpack": "1.3.47",
+		"@leanup/stack": "1.3.48",
+		"@leanup/stack-react": "1.3.48",
+		"@leanup/stack-webpack": "1.3.48",
 		"@public-oss/kolibri-themes": "0.0.3",
-		"@public-ui/components": "1.7.0-rc.6",
-		"@public-ui/react": "1.7.0-rc.6",
-		"@public-ui/themes": "1.7.0-rc.6",
+		"@public-ui/components": "1.7.0-rc.7",
+		"@public-ui/react": "1.7.0-rc.7",
+		"@public-ui/themes": "1.7.0-rc.7",
 		"@types/react": "18.2.21",
 		"@types/react-dom": "18.2.7",
-		"@unocss/preset-mini": "0.55.7",
+		"@unocss/preset-uno": "0.55.7",
 		"@unocss/webpack": "0.55.7",
 		"ajv": "8.12.0",
 		"chromedriver": "116.0.0",
@@ -59,8 +59,5 @@
 		"tsconfig.json",
 		"unocss.config.ts",
 		"webpack.config.js"
-	],
-	"publishConfig": {
-		"registry": "https://registry.npmjs.org/"
-	}
+	]
 }

package/prettier.config.js

@@ -1,5 +1,4 @@
 module.exports = {
-	...require('@leanup/stack/prettier.config'),
 	printWidth: 160,
 	singleQuote: true,
 	useTabs: true,

package/src/App.tsx

@@ -1,29 +1,18 @@
-import React, { useMemo } from 'react';
-import { Navigate, Route, Routes } from 'react-router-dom';
+import React, { FC } from 'react';
+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, KolButton, KolSelect, KolVersion } from '@public-ui/react';
-import { FC, useState } from 'react';
+import { KolAlert } from '@public-ui/react';
 import { ROUTES } from './shares/routes';
-import { THEME_OPTIONS, Theme } from './shares/theme';
+import { Theme, THEME_OPTIONS } from './shares/theme';
 import PackageJson from '../package.json';
-import { getTheme, setTheme, setStorage, getThemeName } from './shares/store';
-
-const THEME_REGEX = /theme=([^&]+)/;
+import { getTheme, getThemeName, setStorage, setTheme } from './shares/store';
+import { Sidebar } from './components/Sidebar';
+import { useLocation } from 'react-router';
 
 setStorage(localStorage);
 
-const getThemeFromLocation = () => {
-	if (THEME_REGEX.test(window.location.hash)) {
-		const match = window.location.hash.match(THEME_REGEX);
-		if (Array.isArray(match) && match.length > 0) {
-			return match[0].replace(THEME_REGEX, '$1').toLowerCase();
-		}
-	}
-	return getTheme();
-};
-
 const getRouteList = (routes: MyRoutes, offset = '/'): string[] => {
 	let list: string[] = [];
 	for (const key in routes) {
@@ -88,168 +77,52 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
 };
 
 const ROUTE_LIST = getRouteList(ROUTES);
+const ROUTE_TREE = getRouteTree(ROUTES);
 
-const clearHash = (str: string) => str.replace(/\?.*/g, '').replace(/^#/g, '');
-
-const getIndexOfRoute = (str: string) => {
-	return ROUTE_LIST.indexOf(clearHash(str));
-};
-
-type CustomRoute = { label: string; value: string };
-const componentList: CustomRoute[] = [];
+const componentList: Map<string, Option<string>> = new Map();
 ROUTE_LIST.forEach((route) => {
 	const routeSplit = route.split('/');
-	if (routeSplit.pop() === 'basic') componentList.push({ label: routeSplit[1], value: route });
+	if (!componentList.has(routeSplit[1])) {
+		componentList.set(routeSplit[1], {
+			label: routeSplit[1],
+			value: route,
+		});
+	}
 });
 
-function getComponentFromSample(url: string): string {
-	const routeSplit = url.split('/');
-	routeSplit[2] = 'basic';
-	return routeSplit.join('/');
-}
-
 export const App: FC = () => {
-	const [theme] = useState(getThemeFromLocation());
-	const [sample, setSample] = useState(clearHash(window.location.hash));
-	const [active, setActive] = useState(false);
-	const [firstComponentChangeEvent, setFirstComponentChangeEvent] = useState(true);
+	const routerLocation = useLocation();
+	const [searchParams, setSearchParams] = useSearchParams();
+	const theme = searchParams.get('theme') ?? getTheme();
+	const hideMenus = searchParams.has('hideMenus');
 
-	const currentComponent = useMemo(() => {
-		return getComponentFromSample(sample);
-	}, [sample]);
+	setTheme(theme as Theme); // set for `getTheme` usages within the application
 
 	document.title = `KoliBri-Handout - ${getThemeName(getTheme())} | v${PackageJson.version}`;
 	document.body.setAttribute('class', theme);
 	document.body.dataset.theme = theme;
 
-	const catchRef = () => {
-		setTimeout(() => {
-			setActive(true);
-		}, 500);
-	};
-
-	const componentSelectOn = {
-		onChange: (_e: Event, v: unknown) => {
-			/**
-			 * Drop first event as a temporary bugfix for the following issue:
-			 * When navigated to a component example which is not "basic" it would navigate away from it on the first event, because the select only stores the basic routes.
-			 * e.g. accordion/header would become accordion/basic.
-			 * This problem will become obsolete when the select gets replaced with a proper navigation (https://github.com/public-ui/kolibri/issues/5064)
-			 */
-			if (firstComponentChangeEvent) {
-				setFirstComponentChangeEvent(false);
-				return;
-			}
-
-			const path = (v as string[])[0];
-			setSample(path);
-			window.location.href = `#${path}?theme=${theme}`;
-		},
-	};
-
-	const on = {
-		onChange: (_event: Event, value: unknown) => {
-			if (active) {
-				value = Array.isArray(value) ? value[0] : value;
-				setTheme(value as Theme);
-				window.location.href =
-					window.location.href
-						.replace(THEME_REGEX, '')
-						.replace(/(\?|&{1,})$/g, '')
-						.replace(/&{2,}/g, '&') + `?theme=${value as string}`;
-				window.location.reload();
-			}
-		},
-	};
-
-	const next = {
-		onClick: () => {
-			let idx = getIndexOfRoute(window.location.hash);
-			if (idx >= ROUTE_LIST.length - 1) {
-				idx = 0;
-			} else {
-				idx += 1;
-			}
-			setSample(clearHash(ROUTE_LIST[idx]));
-			window.location.href = `#${ROUTE_LIST[idx]}?theme=${theme}`;
-		},
-	};
-
-	const prev = {
-		onClick: () => {
-			let idx = getIndexOfRoute(window.location.hash);
-			if (idx <= 0) {
-				idx = ROUTE_LIST.length - 1;
-			} else {
-				idx -= 1;
-			}
-			setSample(clearHash(ROUTE_LIST[idx]));
-			window.location.href = `#${ROUTE_LIST[idx]}?theme=${theme}`;
-		},
+	const handleThemeChange = (theme: unknown) => {
+		setSearchParams({ theme: theme as string });
+		window.location.reload();
 	};
 
 	return (
-		<div className="grid gap-4" data-theme={theme} ref={catchRef}>
-			<div className="no-print grid gap-4 toolbar">
-				<dl>
-					<dt>Beispiel:</dt>
-					<dd>
-						<strong>
-							{/* <KolLink _href={`${window.location.href}?theme=${theme}`} _label={sample} _target="codesandbox" /> */}
-							{sample.replace(/\//g, ' ')}
-						</strong>{' '}
-						({getIndexOfRoute(window.location.hash) + 1}/{ROUTE_LIST.length})
-					</dd>
-					<dd>
-						<KolVersion _version={PackageJson.version}></KolVersion>
-					</dd>
-				</dl>
-				{active && (
-					<>
-						<KolButton
-							_ariaLabel="Weiter zum nächsten Komponenten-Beispiel"
-							_icon="codicon codicon-arrow-right"
-							_hideLabel
-							_label="Weiter"
-							_on={next}
-							_tooltipAlign="left"
-						/>
-						<KolButton
-							_ariaLabel="Weiter zum nächsten Komponenten-Beispiel"
-							_icon="codicon codicon-arrow-left"
-							_hideLabel
-							_label="Zurück"
-							_on={prev}
-							_tooltipAlign="right"
-							_variant="ghost"
-						/>
-					</>
-				)}
-				<KolSelect
-					className="col-span-2 sm:col-auto"
-					_disabled={!active}
-					_hideLabel
-					_label="Komponente wechseln"
-					_id="theme-toggle"
-					_list={componentList}
-					_on={componentSelectOn}
-					_value={[currentComponent]}
-				></KolSelect>
-				<KolSelect
-					_label="Theme wechseln"
-					className="col-span-2 sm:col-auto"
-					_hideLabel
-					_disabled={!active}
-					_id="theme-toggle"
-					_list={THEME_OPTIONS}
-					_on={on}
-					_value={[theme]}
-				></KolSelect>
-			</div>
-			<hr aria-hidden="true" />
+		<div className={!hideMenus ? 'app-container' : ''} data-theme={theme}>
+			{!hideMenus && (
+				<Sidebar
+					version={PackageJson.version}
+					theme={theme}
+					sample={routerLocation.pathname}
+					routes={ROUTES}
+					routeList={ROUTE_LIST}
+					onThemeChange={handleThemeChange}
+				/>
+			)}
+
 			<div className="p-4">
 				<Routes>
-					{getRouteTree(ROUTES)}
+					{ROUTE_TREE}
 					<Route path="*" element={<KolAlert _type="info">This code example has not been migrated yet - it&#39;s coming soon!</KolAlert>} />
 				</Routes>
 			</div>

package/src/components/Sidebar.tsx

@@ -0,0 +1,81 @@
+import React, { FC, useState } from 'react';
+import { KolButton, KolHeading, KolLink, KolSelect, KolVersion } from '@public-ui/react';
+import { THEME_OPTIONS } from '../shares/theme';
+import { Routes } from '../shares/types';
+
+type Props = {
+	version: string;
+	theme: string;
+	routes: Routes;
+	routeList: string[];
+	sample: string;
+	onThemeChange: (theme: unknown) => void;
+};
+
+export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample, onThemeChange }) => {
+	/* KolSelect calls onChange initially by design - work around this with a state variable  */
+	const [isFirstThemeSelectChange, setIsFirstThemeSelectChange] = useState(true);
+
+	const getIndexOfSample = () => routeList.indexOf(sample);
+	const formatSampleAsLabel = () => sample.replace(/\//g, ' ');
+
+	const handleThemeSelectChange = (_event: Event, value: unknown) => {
+		if (isFirstThemeSelectChange) {
+			setIsFirstThemeSelectChange(false);
+		} else {
+			onThemeChange((value as [string])[0]);
+		}
+	};
+
+	const handleLinkClick = (event: Event) => {
+		location.replace((event.target as HTMLLinkElement).href); // KoliBri prevents the default click behavior as soon as an event listener is set, so we need to reimplement it.
+		document.documentElement.scrollIntoView({ behavior: 'smooth' });
+		// @todo set focus?
+	};
+
+	const handlePreviousClick = () => {
+		const currentIndex = getIndexOfSample();
+		const nextIndex = currentIndex === 0 ? routeList.length - 1 : currentIndex - 1;
+		location.replace(`#${routeList[nextIndex]}`);
+	};
+
+	const handleNextClick = () => {
+		const currentIndex = getIndexOfSample();
+		const nextIndex = currentIndex === routeList.length - 1 ? 0 : currentIndex + 1;
+		location.replace(`#${routeList[nextIndex]}`);
+	};
+
+	return (
+		<aside className="app-sidebar p-4">
+			<div className="flex flex-justify-between flex-items-center">
+				<KolHeading _label="KoliBri React"></KolHeading>
+				<KolVersion _version={version}></KolVersion>
+			</div>
+
+			<KolSelect _label="Theme wählen" _list={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={[theme]} class="mt"></KolSelect>
+
+			<KolHeading _label="Komponenten" _level={2} className="block mt"></KolHeading>
+			<div className="flex flex-justify-between flex-items-center mt">
+				<KolButton _icon="codicon codicon-arrow-left" _hideLabel _label="Vorherige Komponente auswählen" _on={{ onClick: handlePreviousClick }} />
+				{formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
+				<KolButton _icon="codicon codicon-arrow-right" _hideLabel _label="Nächste Komponente auswählen" _on={{ onClick: handleNextClick }} />
+			</div>
+			<nav className="block mt">
+				<ul className="m0 p0 list-inside">
+					{Object.entries(routes).map(([parentName, children]) => (
+						<li key={parentName} className="mt-2">
+							{parentName}
+							<ul className="list-inside ml p0">
+								{Object.keys(children).map((childName) => (
+									<li key={`${parentName}/${childName}`}>
+										<KolLink _label={childName} _href={`#/${parentName}/${childName}`} _on={{ onClick: handleLinkClick }} />
+									</li>
+								))}
+							</ul>
+						</li>
+					))}
+				</ul>
+			</nav>
+		</aside>
+	);
+};

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

@@ -2,7 +2,7 @@ import { Routes } from '../../shares/types';
 import { SplitButtonBasic } from './basic';
 
 export const SPLIT_BUTTON_ROUTES: Routes = {
-	splitButton: {
+	'split-button': {
 		basic: SplitButtonBasic,
 	},
 };

package/src/shares/store.ts

@@ -1,5 +1,5 @@
 import { isTheme, Store, Theme } from './theme';
-import PackageJson from '../../node_modules/@public-ui/components/package.json';
+import PackageJson from '@public-ui/components/package.json';
 import { THEME_OPTIONS } from './theme';
 import { Option } from '@public-ui/components';
 

package/src/style.scss

@@ -19,71 +19,20 @@ hr {
 	grid-template-columns: auto auto;
 }
 
-.toolbar {
-	grid-template-columns: auto 1fr auto 1fr auto;
-	place-items: center;
+.app-container {
+	display: grid;
+	grid-template-columns: 360px auto;
+	height: 100%;
 }
 
-.toolbar kol-button[_label="Zurück"] {
-	order: 1;
-}
-
-.toolbar dl {
-	order: 2;
-	display: flex;
-	gap: 0.5em;
-	justify-self: start;
-	place-items: center;
-}
-
-.toolbar dd {
-	margin: 0;
-}
-
-.toolbar kol-select {
-	order: 3;
-}
-
-.toolbar kol-button[_label="Weiter"] {
-	order: 4;
-}
-
-@media only screen and (max-width: 1024px) {
-	.toolbar {
-		display: grid;
-		gap: 1rem;
-		grid-template-columns: 1fr 1fr;
-	}
-
-	.toolbar kol-button[_label="Zurück"] {
-		order: 3;
-	}
-
-	.toolbar dl {
-		order: 1;
-	}
-
-	.toolbar kol-select {
-		order: 2;
-	}
-
-	.toolbar kol-button[_label="Weiter"] {
-		order: 4;
-	}
-}
-
-@media only screen and (max-width: 512px) {
-
-	.toolbar dl,
-	.toolbar kol-select {
-		grid-column: span 2;
-	}
+.app-sidebar {
+	border-right: 1px solid gray;
+	font-family: sans-serif;
 }
 
 @media print {
-
 	.no-print,
 	.no-print * {
 		display: none !important;
 	}
-}
+}

package/unocss.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from '@unocss/webpack';
-import { presetMini } from '@unocss/preset-mini';
+import { presetUno } from '@unocss/preset-uno';
 
 // ts-prune-ignore-next
 export default defineConfig({
-	presets: [presetMini()],
+	presets: [presetUno()],
 });