@public-ui/sample-react 3.0.0-rc.4 → 3.0.0-rc.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "3.0.0-rc.4",
+  "version": "3.0.0-rc.6",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -38,7 +38,7 @@
     "less-loader": "12.2.0",
     "mini-css-extract-plugin": "2.9.2",
     "nightwatch-axe-verbose": "2.3.1",
-    "npm-run-all": "4.1.5",
+    "npm-run-all2": "7.0.2",
     "postcss-loader": "8.1.1",
     "prettier": "3.4.2",
     "react": "18.3.1",
@@ -56,10 +56,12 @@
     "webpack-dev-server": "5.2.0",
     "world_countries_lists": "2.9.0",
     "yup": "1.5.0",
-    "@public-ui-/theme-ecl": "2.1.3",
-    "@public-ui/components": "3.0.0-rc.4",
-    "@public-ui/react": "3.0.0-rc.4",
-    "@public-ui/theme-default": "3.0.0-rc.4"
+    "@public-ui/components": "3.0.0-rc.6",
+    "@public-ui/react": "3.0.0-rc.6",
+    "@public-ui/theme-default": "3.0.0-rc.6"
+  },
+  "optionalDependencies": {
+    "@public-ui-/theme-ecl": "2.1.3"
   },
   "files": [
     ".eslintignore",

package/src/components/handout/basic.tsx

@@ -248,10 +248,8 @@ export const HandoutBasic: FC = () => {
 						<p>
 							I am <KolAbbr>e.g.</KolAbbr> an abbreviation without label.
 						</p>
-						<div className="grid grid-cols-2 items-center">
-							<KolProgress _variant="bar" _max={100} _value={33} _label="Progress" />
-							<KolProgress _variant="cycle" _max={100} _value={66} _label="Progress" />
-						</div>
+						<KolProgress _variant="bar" _max={100} _value={33} _label="Progress" />
+						<KolProgress _variant="cycle" _max={100} _value={66} _label="Progress" />
 					</div>
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-6 xl:col-span-3" _label="Button, LinkButton and Tab" _level={2}>

package/src/components/input-radio/partials/variants.tsx

@@ -4,17 +4,19 @@ import { InputRadioCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 import { SampleColumns } from '../../SampleColumns';
+import { KolHeading } from '@public-ui/react';
+
 export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioVariant(props, ref) {
 	return (
 		<SampleColumns>
-			<fieldset>
-				<legend>Radio</legend>
+			<div className="border border-solid border-dark-100 p-3">
+				<KolHeading _level={2} _label="Radio" className="block mb-2" />
 				<InputRadioCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>Radio (hideLabel)</legend>
+			</div>
+			<div className="border border-solid border-dark-100 p-3">
+				<KolHeading _level={2} _label="Radio (hideLabel)" className="block mb-2" />
 				<InputRadioCases ref={ref} {...props} _hideLabel />
-			</fieldset>
+			</div>
 		</SampleColumns>
 	);
 });

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

@@ -0,0 +1,55 @@
+import type { FC } from 'react';
+import { useContext } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { KolButton, KolPopoverButton, KolBadge } from '@public-ui/react';
+import { useToasterService } from '../../hooks/useToasterService';
+import { HideMenusContext } from '../../shares/HideMenusContext';
+
+export const PopoverButtonBasic: FC = () => {
+	const hideMenus = useContext(HideMenusContext);
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					The PopoverButton component combines a button with a popover that appears when clicked. The popover can be positioned in different directions (top,
+					right, bottom, left) using the <code>_popoverAlign</code> prop.
+				</p>
+			</SampleDescription>
+			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
+
+			<div className="flex flex-wrap gap-4">
+				<KolPopoverButton _label={'Open popover'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }}>
+					<KolButton _label="Button within popover" _variant="primary" _on={dummyEventHandler} />
+					<br />
+					<br />
+					<KolButton _label="Second Button within popover" _on={dummyEventHandler} />
+				</KolPopoverButton>
+
+				<KolPopoverButton _label="Open popover" _popoverAlign="right" _icons={{ right: 'codicon codicon-chevron-right' }}>
+					<p className="w-sm">
+						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+						Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+					</p>
+				</KolPopoverButton>
+
+				<KolPopoverButton _label="icon-only with tooltip" _icons="codicon codicon-info" _tooltipAlign="right" _hideLabel>
+					This is an explanation shown on click.
+				</KolPopoverButton>
+
+				<KolPopoverButton _label="">
+					<span slot="expert">
+						<u>Expert slot content</u>
+					</span>
+					This sample illustrates a button with expert slot.
+				</KolPopoverButton>
+			</div>
+		</>
+	);
+};

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

@@ -0,0 +1,8 @@
+import { Routes } from '../../shares/types';
+import { PopoverButtonBasic } from './basic';
+
+export const POPOVER_BUTTON_ROUTES: Routes = {
+	'popover-button': {
+		basic: PopoverButtonBasic,
+	},
+};

package/src/components/progress/basic.tsx

@@ -11,11 +11,18 @@ export const ProgressBasic: FC = () => (
 			<p>KolProgress renders a progress indicator. The sample shows the variants &quot;bar&quot; and &quot;cycle&quot; with and without labels.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
-			<KolProgress _variant="bar" _max={100} _value={0} _label="With label"></KolProgress>
-			<KolProgress _variant="bar" _max={100} _value={33}></KolProgress>
-			<KolProgress _variant="bar" _max={100} _value={100}></KolProgress>
-			<KolProgress _variant="cycle" _max={100} _value={33}></KolProgress>
+		<div className="grid gap-4 grid-cols-1 sm:grid-cols-2">
+			<fieldset title="Percentages" className="flex flex-col gap-4">
+				<KolProgress _variant="bar" _max={7} _value={0}></KolProgress>
+				<KolProgress _variant="bar" _max={7} _value={2}></KolProgress>
+				<KolProgress _variant="bar" _max={7} _value={7}></KolProgress>
+				<KolProgress _variant="cycle" _max={7} _value={6}></KolProgress>
+			</fieldset>
+			<fieldset title="Custom units" className="flex flex-col gap-4">
+				<KolProgress _label="Distance" _variant="bar" _max={65434} _value={7236} _unit="m"></KolProgress>
+				<KolProgress _label="12 Tasks to do" _variant="bar" _max={12} _value={5} _unit="tasks completed"></KolProgress>
+				<KolProgress _label="Max 150 kg" _variant="cycle" _max={150} _value={42} _unit="kg"></KolProgress>
+			</fieldset>
 		</div>
 	</>
 );

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

@@ -7,6 +7,7 @@ import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 import type { Option, StencilUnknown } from '@public-ui/components';
 import { COUNTRY_OPTIONS } from '../../../shares/country';
 import type { Components } from '@public-ui/components';
+import { LONG_OPTIONS } from '../../../shares/longOptions';
 
 export const SingleSelectCases = (props: Components.KolSingleSelect) => {
 	return (
@@ -37,6 +38,8 @@ export const SingleSelectCases = (props: Components.KolSingleSelect) => {
 			/>
 			<KolSingleSelect {...props} _label="With access key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _accessKey="c" />
 			<KolSingleSelect {...props} _label="With short key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _shortKey="s" />
+			<KolSingleSelect {...props} _label="With long labels" _options={LONG_OPTIONS as Option<StencilUnknown>[]} _placeholder="Placeholder" />
+			<KolSingleSelect {...props} _label="With hidden clear button" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _hideClearButton />
 		</div>
 	);
 };

package/src/react.main.tsx

@@ -6,7 +6,6 @@ import { setTagNameTransformer } from '@public-ui/react';
 import { bootstrap, KoliBriDevHelper } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import { DEFAULT } from '@public-ui/theme-default';
-import { ECL_EC, ECL_EU } from '@public-ui-/theme-ecl';
 
 import { App } from './App';
 
@@ -35,8 +34,17 @@ const getThemes = async () => {
 		return [theme];
 	}
 
+	const optionalThemes: Theme[] = [];
+	const { ECL_EC, ECL_EU } = await import('@public-ui-/theme-ecl');
+
+	if (ECL_EC && ECL_EU) {
+		optionalThemes.push(ECL_EC, ECL_EU);
+	} else {
+		console.warn('Theme package @public-ui-/theme-ecl not available. Continuing without it.');
+	}
+
 	/* List of regular sample app themes */
-	return [DEFAULT, ECL_EC, ECL_EU] as Theme[];
+	return [DEFAULT, ...optionalThemes] as Theme[];
 };
 
 void (async () => {

package/src/scenarios/horizontal-scrollbar-advanced/layout.scss

@@ -1,4 +1,4 @@
-@import '../../@shared/mixins';
+@use '../../@shared/mixins' as *;
 
 .mainlayout {
 	min-height: calc(100vh - rem(32));
@@ -9,11 +9,11 @@
 	grid-template-rows: 1fr;
 	grid-template-areas: 'nav content';
 
-	& > .nav-area {
+	&>.nav-area {
 		grid-area: nav;
 	}
 
-	& > .content {
+	&>.content {
 		grid-area: content;
 	}
-}
+}

package/src/shares/longOptions.ts

@@ -0,0 +1,15 @@
+export const LONG_OPTIONS = [
+	{ value: '1', label: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam' },
+	{ value: '2', label: 'Lorem ipsum dolor' },
+	{
+		value: '3',
+		label:
+			'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 gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 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 gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+	},
+	{ value: '4', label: 'Lorem ipsum dolor' },
+	{ value: '5', label: 'Lorem ipsum dolor' },
+	{ value: '6', label: 'Lorem ipsum dolor' },
+	{ value: '7', label: 'Lorem ipsum dolor' },
+	{ value: '8', label: 'Lorem ipsum dolor' },
+	{ value: '2', label: 'Lorem ipsum dolor' },
+];

package/src/shares/routes.ts

@@ -30,8 +30,10 @@ import { LINK_ROUTES } from '../components/link/routes';
 import { MODAL_ROUTES } from '../components/modal/routes';
 import { NAV_ROUTES } from '../components/nav/routes';
 import { PAGINATION_ROUTES } from '../components/pagination/routes';
+import { POPOVER_BUTTON_ROUTES } from '../components/popover-button/routes';
 import { PROGRESS_ROUTES } from '../components/progress/routes';
 import { QUOTE_ROUTES } from '../components/quote/routes';
+import { SCENARIO_ROUTES } from '../scenarios/routes';
 import { SELECT_ROUTES } from '../components/select/routes';
 import { SKIP_NAV_ROUTES } from '../components/skip-nav/routes';
 import { SPIN_ROUTES } from '../components/spin/routes';
@@ -42,7 +44,6 @@ import { TEXTAREA_ROUTES } from '../components/textarea/routes';
 import { TOAST_ROUTES } from '../components/toast/routes';
 import { TOOLBAR_ROUTES } from '../components/toolbar/routes';
 import { VERSION_ROUTES } from '../components/version/routes';
-import { SCENARIO_ROUTES } from '../scenarios/routes';
 import { Routes } from './types';
 import { TREE_ROUTES } from '../components/tree/routes';
 import { COMBOBOX_ROUTES } from '../components/combobox/routes';
@@ -82,6 +83,7 @@ export const ROUTES: Routes = {
 	...MODAL_ROUTES,
 	...NAV_ROUTES,
 	...PAGINATION_ROUTES,
+	...POPOVER_BUTTON_ROUTES,
 	...PROGRESS_ROUTES,
 	...QUOTE_ROUTES,
 	...SELECT_ROUTES,

package/src/style.scss

@@ -1,4 +1,4 @@
-@import './@shared/mixins';
+@use './@shared/mixins' as *;
 
 :root {
 	--kolibri-root-font-size: 100;
@@ -24,7 +24,7 @@ hr {
 .indented-text {
 	p {
 		font-family: var(--font-family);
-		border-left: rem(-2) solid var(--color-primary-variant);
+		border-left: -2px solid var(--color-primary-variant);
 		padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));
 		margin-left: rem(-2);
 	}
@@ -50,7 +50,7 @@ hr {
 	}
 
 	.app-sidebar {
-		border-right: rem(1) solid gray;
+		border-right: 1px solid gray;
 		position: relative;
 
 		& .scrollable-container-wrapper {

package/webpack.config.js

@@ -1,5 +1,7 @@
 const webpack = require('webpack');
 
+const OPTIONAL_THEME_PACKAGE = '@public-ui-/theme-ecl';
+
 module.exports = (...args) => {
 	const config = require('@leanup/stack-react/webpack.config')(...args);
 	const UnoCSS = require('@unocss/webpack').default;
@@ -17,5 +19,25 @@ module.exports = (...args) => {
 		}),
 	);
 	delete config.devServer.proxy;
+
+	config.externals = [
+		...(config.externals || []),
+
+		/* Handle optional theme dependencies */
+		({ request }, callback) => {
+			if (request === OPTIONAL_THEME_PACKAGE) {
+				try {
+					require.resolve(OPTIONAL_THEME_PACKAGE);
+					// Package exists, include it
+					return callback();
+				} catch (e) {
+					// Package doesn't exist, replace with empty module
+					return callback(null, 'null');
+				}
+			}
+			callback();
+		},
+	];
+
 	return config;
 };

package/dist/4989.js

@@ -1,2 +0,0 @@
-/*! For license information please see 4989.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[4989],{7336:(e,t,i)=>{i.d(t,{i:()=>s,n:()=>c,r:()=>a});var o=i(6783),n=i(5687),r=i(1732);const l=()=>{let e=(0,r.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,r.d)(),"KoliBri",{value:e,writable:!1})),e},s=()=>{(()=>{const e=(0,r.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const t=e.getAttribute("content");"string"==typeof t&&((0,r.s)(t.includes("dev-mode=true")),(0,r.b)(t.includes("experimental-mode=true")),(0,r.c)(t.includes("color-contrast-analysis=true")))}})(),r.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${o.E.kolibriVersion}\n\t`,{forceLog:!0})},a=()=>{!0!==l().adviceShown&&(Object.defineProperty(l(),"adviceShown",{get:function(){return!0}}),r.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===n.p&&(c=()=>"nonce")},4989:(e,t,i)=>{i.r(t),i.d(t,{initialize:()=>a});var o=i(7336),n=i(1732),r=i(5800);function l(e,t){try{Object.defineProperty((()=>{let e=(0,n.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,n.d)(),"KoliBri",{value:e,writable:!1})),e})(),e,{get:function(){return t}})}catch(t){n.L.debug(`KoliBri property ${e} is already bind.`)}}const s=(e,t)=>n.L.debug(`${e} ${t?"":"not "}activated`),a=()=>{if((0,o.i)(),(0,n.e)()){(0,o.r)(),l("a11yColorContrast",r.z),l("querySelector",r.v),l("querySelectorAll",r.A),l("querySelectorColors",r.B),l("utils",(function(){return r.C})),l("parseJson",r.p),l("stringifyJson",r.D);const e=(0,n.g)().body,t=(0,n.g)().createElement("svg");if(t.setAttribute("aria-label","KoliBri-DevTools"),t.setAttribute("xmlns","http://www.w3.org/2000/svg"),t.setAttribute("role","toolbar"),t.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),t.innerHTML='<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="50"\n  height="50"\n  viewBox="0 0 600 600"\n>\n  <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n  <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n  <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n  <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n  <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n  <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',(0,n.g)().body.appendChild(t),s("Development mode",(0,n.e)()),s("Experimental mode",(0,n.a)()),s("Color contrast analysis",(0,n.f)()),(0,n.f)()){const t=setTimeout((()=>{clearTimeout(t),setInterval((()=>{r.C.queryHtmlElementColors((0,n.g)().createElement("div"),(0,r.z)(e),!1,!1)}),1e4)}),2500)}}}},5687:(e,t,i)=>{i.d(t,{b:()=>l,h:()=>n,p:()=>o,s:()=>r});let o="development";try{o="production"}catch(e){o="production"}const n=(e,t,i)=>{if(e&&t&&"string"==typeof i){const o=e.querySelector(`[slot="${i}"]`);o&&t.appendChild(o)}},r=e=>""===e,l=(e,t)=>e||t||""}}]);