@public-ui/sample-react 1.7.3 → 1.7.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
@@ -8,9 +8,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.3",
-    "@public-ui/react": "1.7.3",
-    "@public-ui/themes": "1.7.3",
+    "@public-ui/components": "1.7.5",
+    "@public-ui/react": "1.7.5",
+    "@public-ui/themes": "1.7.5",
     "@types/node": "20.8.0",
     "@types/react": "18.2.23",
     "@types/react-dom": "18.2.8",

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

@@ -8,7 +8,7 @@ export const ButtonLinkImage: FC = () => (
 		<KolButtonLink _label="Ich bin ein Link, der als Text gerendert wird" />
 		<br />
 		<KolButtonLink _label="">
-			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />
+			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="/abgrenzung.jpg" width="300" />
 		</KolButtonLink>
 	</div>
 );

package/src/components/card/selection.tsx

@@ -20,7 +20,7 @@ export const CardSelection: FC = () => (
 			</div>
 			<div slot="content">
 				<div>
-					<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+					<img alt="Darstellung des KoliBri-Theming" src="/abgrenzung.jpg" width="100%" />
 				</div>
 			</div>
 			<div slot="footer">
@@ -38,7 +38,7 @@ export const CardSelection: FC = () => (
 			</div>
 			<div slot="content">
 				<div>
-					<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+					<img alt="Darstellung des KoliBri-Theming" src="/abgrenzung.jpg" width="100%" />
 				</div>
 			</div>
 			<div slot="footer">
@@ -56,7 +56,7 @@ export const CardSelection: FC = () => (
 			</div>
 			<div slot="content">
 				<div>
-					<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+					<img alt="Darstellung des KoliBri-Theming" src="/abgrenzung.jpg" width="100%" />
 				</div>
 			</div>
 			<div slot="footer">

package/src/components/handout/basic.tsx

@@ -1006,7 +1006,7 @@ export const HandoutBasic: FC = () => (
 			</KolCard>
 		</div>
 		<KolVersion _version="5.0.2-test.2"></KolVersion>
-		{/* <KolImage _src="assets/images/abgrenzung.jpg" _alt="KoliBri Darstellung"></KolImage> */}
+		{/* <KolImage _src="/abgrenzung.jpg" _alt="KoliBri Darstellung"></KolImage> */}
 		{/* <KolIndentedText></KolIndentedText> */}
 		{/* <KolQuote></KolQuote> */}
 	</div>

package/src/components/image/basic.tsx

@@ -2,4 +2,4 @@ import { FC } from 'react';
 import { KolImage } from '@public-ui/react';
 import React from 'react';
 
-export const ImageBasic: FC = () => <KolImage _src="https://placehold.co/100x100/cc006e/white" _alt="Beispielbild: 100 × 100" />;
+export const ImageBasic: FC = () => <KolImage className="w-80%" _src="/abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />;

package/src/components/link/image.tsx

@@ -8,12 +8,12 @@ export const LinkImage: FC = () => (
 		<KolLink _href="#" _label="Ich bin ein Link, der als Text gerendert wird" />
 		<br />
 		<KolLink _href="#" _label="">
-			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />
+			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="/abgrenzung.jpg" width="300" />
 			<KolKolibri style={{ width: '300px' }}></KolKolibri>
 		</KolLink>
 		<br />
 		<KolLink _href="#" _label="">
-			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />
+			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="/abgrenzung.jpg" width="300" />
 		</KolLink>
 	</div>
 );

package/src/components/logo/basic.tsx

@@ -2,4 +2,4 @@ import React, { FC } from 'react';
 import { KolLogo } from '@public-ui/react';
 import { Bundesministerium } from '@public-ui/components';
 
-export const LogoBasic: FC = () => <KolLogo _org={Bundesministerium['Die Bundesregierung']} style={{ width: 300 }} />;
+export const LogoBasic: FC = () => <KolLogo className="w-50%" _org={Bundesministerium['Die Bundesregierung']} />;

package/src/components/nav/active.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { KolNav } from '@public-ui/react';
 
 import { FC, useEffect, useState } from 'react';
-
-import { useNavigate } from 'react-router';
+import { ButtonOrLinkOrTextWithChildrenProps } from '@public-ui/components';
 
 export const NavActive: FC = () => {
-	const [links, setLinks] = useState([]);
+	const [links, setLinks] = useState<ButtonOrLinkOrTextWithChildrenProps[]>([]);
 
 	const handleLinks = (route: string) => {
 		const link = links.find((link) => link._label === route);
+		if (!link) return;
 		link._active = !link._active;
 		setLinks(links);
 	};
@@ -18,7 +18,7 @@ export const NavActive: FC = () => {
 		setLinks([
 			{
 				_label: 'Main',
-				_icons: 'fa-solid fa-house',
+				_icons: 'codicon codicon-home',
 				_on: {
 					onClick: () => handleLinks('Main'),
 				},
@@ -36,7 +36,7 @@ export const NavActive: FC = () => {
 				},
 			},
 			{
-				_active: false,
+				_active: true,
 				_label: 'Alert',
 				_on: {
 					onClick: () => handleLinks('Alert'),
@@ -44,12 +44,13 @@ export const NavActive: FC = () => {
 				_children: [
 					{
 						_label: 'Main',
-						_icons: 'fa-solid fa-house',
+						_icons: 'codicon codicon-home',
 						_on: {
 							onClick: () => handleLinks('/'),
 						},
 					},
 					{
+						_active: true,
 						_label: 'Abbr',
 						_href: '/abbr',
 						_on: {

package/src/components/nav/basic.tsx

@@ -9,7 +9,7 @@ export const NavBasic: FC = () => (
 		_links={[
 			{
 				_label: 'Homepage',
-				_icons: 'fa-solid fa-house',
+				_icons: 'codicon codicon-home',
 				_href: '#/',
 			},
 			{

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

@@ -1,8 +1,7 @@
 import React, { FC } from 'react';
 
 import { KolTable } from '@public-ui/react';
-import { KoliBriTableHeaders } from '@public-ui/components';
-import { KoliBriTablePaginationProps } from '@public-ui/components/src';
+import { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-ui/components';
 import { DATA } from './test-data';
 
 const HEADERS: KoliBriTableHeaders = {
@@ -13,7 +12,7 @@ const HEADERS: KoliBriTableHeaders = {
 		],
 	],
 };
-const PAGINATION: KoliBriTablePaginationProps = { _page: 2, _total: 1 };
+const PAGINATION: KoliBriTablePaginationProps = { _page: 2, _max: 1 };
 
 export const TableWithPagination: FC = () => (
 	<div>

package/src/components/toast/basic.tsx

@@ -1,14 +1,35 @@
 import { ToasterService } from '@public-ui/components';
 import { KolButton } from '@public-ui/react';
-import React from 'react';
+import React, { FC } from 'react';
+import { getRoot } from '../../shares/react-roots';
 
 const toaster = ToasterService.getInstance(document);
 
-import { FC } from 'react';
+const handleButtonClickSimple = () => {
+	void toaster.enqueue({
+		description: 'Toasty',
+		label: `Initial Toast`,
+		type: 'warning',
+	});
+};
 
-const handleButtonClick = () => {
+const handleButtonClickComplex = () => {
 	void toaster.enqueue({
-		description: `Toasty`,
+		render: (element: HTMLElement, { close }) => {
+			getRoot(element).render(
+				<>
+					<KolButton
+						_label={'Hello World from Toast!'}
+						_on={{
+							onClick: () => {
+								console.log('Toast Button clicked!');
+								close();
+							},
+						}}
+					/>
+				</>,
+			);
+		},
 		label: `Initial Toast`,
 		type: 'warning',
 	});
@@ -16,6 +37,7 @@ const handleButtonClick = () => {
 
 export const ToastBasic: FC = () => (
 	<div>
-		<KolButton _label="Show toast" _on={{ onClick: handleButtonClick }}></KolButton>
+		<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>
+		<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
 	</div>
 );

package/src/components/toast-legacy/basic.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FC } from 'react';
+import { KolButton, KolToast } from '@public-ui/react';
+import { ToasterServiceLegacy } from '@public-ui/components';
+
+export const ToastBasic: FC = () => {
+	const toaster = ToasterServiceLegacy.getInstance(document);
+
+	const handleButtonClick = () => {
+		toaster.enqueue({
+			label: `Noch ein Toast`,
+			description: `Beschreibung zum Toast`,
+			type: 'info',
+		});
+	};
+	return (
+		<div>
+			<KolToast _label="Legacy Toast Titel">Toast content</KolToast>
+			<KolToast _label="Zweiter Toast mit Schließen-Button" _hasCloser>
+				Toast content
+			</KolToast>
+
+			<KolButton _label="Weiteren Toast öffnen" _on={{ onClick: handleButtonClick }}></KolButton>
+		</div>
+	);
+};

package/src/components/toast-legacy/routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '../../shares/types';
+import { ToastBasic } from './basic';
+
+export const TOAST_LEGACY_ROUTES: Routes = {
+	'toast-legacy': {
+		basic: ToastBasic,
+	},
+};

package/src/shares/routes.ts

@@ -47,6 +47,7 @@ import { TOAST_ROUTES } from '../components/toast/routes';
 import { VERSION_ROUTES } from '../components/version/routes';
 import { SCENARIO_ROUTES } from '../scenarios/routes';
 import { Routes } from './types';
+import { TOAST_LEGACY_ROUTES } from '../components/toast-legacy/routes';
 
 export const ROUTES: Routes = {
 	...HANDOUT_ROUTES,
@@ -96,6 +97,7 @@ export const ROUTES: Routes = {
 	...TABS_ROUTES,
 	...TEXTAREA_ROUTES,
 	...TOAST_ROUTES,
+	...TOAST_LEGACY_ROUTES,
 	...VERSION_ROUTES,
 	...SCENARIO_ROUTES,
 };

package/dist/9230.js

@@ -1,2 +0,0 @@
-/*! For license information please see 9230.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[9230],{9230:(e,t,a)=>{switch(location.pathname){case"/dev/toaster.html":a.e(8408).then(a.bind(a,8408));break;case"/dev/reprod-accordion-does-not-toggle-with-open.html":a.e(9598).then(a.bind(a,9598));break;case"/dev/details-synced-open-state.html":a.e(9329).then(a.bind(a,9329))}}}]);