@public-ui/sample-react 1.7.0-rc.8 → 1.7.0-rc.9

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/sample-react",
-	"version": "1.7.0-rc.8",
+	"version": "1.7.0-rc.9",
 	"description": "This app contains samples for the KoliBri/Public UI",
 	"license": "EUPL-1.2",
 	"scripts": {
@@ -24,9 +24,9 @@
 		"@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.8",
-		"@public-ui/react": "1.7.0-rc.8",
-		"@public-ui/themes": "1.7.0-rc.8",
+		"@public-ui/components": "1.7.0-rc.9",
+		"@public-ui/react": "1.7.0-rc.9",
+		"@public-ui/themes": "1.7.0-rc.9",
 		"@types/react": "18.2.21",
 		"@types/react-dom": "18.2.7",
 		"@unocss/preset-uno": "0.55.7",

package/src/App.tsx

@@ -120,7 +120,7 @@ export const App: FC = () => {
 				/>
 			)}
 
-			<div className="p-4">
+			<div className="p-4" id="route-container">
 				<Routes>
 					{ROUTE_TREE}
 					<Route path="*" element={<KolAlert _type="info">This code example has not been migrated yet - it&#39;s coming soon!</KolAlert>} />

package/src/components/Sidebar.tsx

@@ -1,7 +1,8 @@
-import React, { FC, useState } from 'react';
-import { KolButton, KolHeading, KolLink, KolSelect, KolVersion } from '@public-ui/react';
+import React, { FC, PropsWithChildren, 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';
 
 type Props = {
 	version: string;
@@ -12,9 +13,18 @@ type Props = {
 	onThemeChange: (theme: unknown) => void;
 };
 
+const ComponentNavContainer = ({ children, isMobile }: PropsWithChildren<{ isMobile: boolean }>) =>
+	isMobile ? (
+		<KolAccordion _label="Alle Komponenten" class="mt">
+			{children}
+		</KolAccordion>
+	) : (
+		<div className="mt">{children}</div>
+	);
 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 isMobile = useMobile();
 
 	const getIndexOfSample = () => routeList.indexOf(sample);
 	const formatSampleAsLabel = () => sample.replace(/\//g, ' ');
@@ -29,8 +39,7 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 
 	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?
+		document.querySelector('#route-container')?.scrollIntoView({ behavior: 'smooth' });
 	};
 
 	const handlePreviousClick = () => {
@@ -57,25 +66,30 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 			<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})
+				<span className="text-center">
+					{formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
+				</span>
 				<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>
+
+			<ComponentNavContainer isMobile={isMobile}>
+				<nav>
+					<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>
+			</ComponentNavContainer>
 		</aside>
 	);
 };

package/src/components/input-password/basic.tsx

@@ -7,8 +7,9 @@ import { ERROR_MSG } from '../../shares/constants';
 
 export const InputPasswordBasic: FC = () => (
 	<KolForm className="grid gap-4">
+		<KolInputPassword _disabled _error={ERROR_MSG} _label="Passwort (Disabled)" />
+		<KolInputPassword _read-only _label="Passwort (Readonly)" />
 		<KolInputPassword
-			_id="password"
 			_name="password"
 			_required
 			_error={ERROR_MSG}
@@ -22,20 +23,6 @@ export const InputPasswordBasic: FC = () => (
 					icon: 'codicon codicon-arrow-right',
 				},
 			}}
-			_smartButton={{
-				_icon: {
-					left: {
-						icon: 'codicon codicon-eye',
-					},
-				},
-				_hideLabel: true,
-				_label: 'Passwort anzeigen',
-				_on: {
-					onClick: () => {},
-				},
-			}}
 		/>
-		<KolInputPassword _disabled _id="password" _error={ERROR_MSG} _label="Passwort (Disabled)" />
-		<KolInputPassword _id="password" _read-only _label="Passwort (Readonly)" />
 	</KolForm>
 );

package/src/components/input-password/routes.ts

@@ -1,9 +1,11 @@
 import { Routes } from '../../shares/types';
 
 import { InputPasswordBasic } from './basic';
+import { InputPasswordShowPassword } from './show-password';
 
 export const INPUT_PASSWORD_ROUTES: Routes = {
 	'input-password': {
 		basic: InputPasswordBasic,
+		'show-password': InputPasswordShowPassword,
 	},
 };

package/src/components/input-password/show-password.tsx

@@ -0,0 +1,38 @@
+import React, { FC, useEffect, useRef, useState } from 'react';
+import { KolForm, KolInputPassword } from '@public-ui/react';
+
+export const InputPasswordShowPassword: FC = () => {
+	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+	const passwordRef = useRef<HTMLKolInputPasswordElement>(null);
+	const handleTogglePasswordClick = () => {
+		setIsPasswordVisible(!isPasswordVisible);
+	};
+	useEffect(() => {
+		const input = passwordRef.current?.shadowRoot?.querySelector('input');
+		if (input) {
+			input.type = isPasswordVisible ? 'text' : 'password';
+		}
+	}, [isPasswordVisible]);
+
+	return (
+		<KolForm className="grid gap-4">
+			<KolInputPassword
+				_placeholder="Mit 'Passwort anzeigen' Button"
+				_label="Passwort"
+				ref={passwordRef}
+				_smartButton={{
+					_icon: {
+						left: {
+							icon: 'codicon codicon-eye',
+						},
+					},
+					_hideLabel: true,
+					_label: `Passwort ${isPasswordVisible ? 'ausblenden' : 'einblenden'}`,
+					_on: {
+						onClick: handleTogglePasswordClick,
+					},
+				}}
+			/>
+		</KolForm>
+	);
+};

package/src/hooks/useMobile.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+export function useMobile(): boolean {
+	const mediaQuery = matchMedia('(max-width: 1023px)');
+	const [matches, setMatches] = useState<boolean>(mediaQuery.matches);
+
+	const handleChange = () => {
+		setMatches(mediaQuery.matches);
+	};
+
+	useEffect(() => {
+		handleChange(); // handle initial value
+		mediaQuery.addEventListener('change', handleChange);
+
+		return () => {
+			mediaQuery.removeEventListener('change', handleChange);
+		};
+	}, [mediaQuery]);
+
+	return matches;
+}

package/src/style.scss

@@ -19,17 +19,22 @@ hr {
 	grid-template-columns: auto auto;
 }
 
-.app-container {
-	display: grid;
-	grid-template-columns: 360px auto;
-	height: 100%;
-}
-
 .app-sidebar {
-	border-right: 1px solid gray;
 	font-family: sans-serif;
 }
 
+@media (min-width: 1024px) {
+	.app-container {
+		display: grid;
+		grid-template-columns: 360px auto;
+		height: 100%;
+	}
+
+	.app-sidebar {
+		border-right: 1px solid gray;
+	}
+}
+
 @media print {
 	.no-print,
 	.no-print * {