@public-ui/sample-react 4.0.1-rc.0 → 4.0.1-rc.2

package/src/components/Sidebar.tsx

@@ -1,10 +1,10 @@
 import type { FC } from 'react';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { KolButton, KolHeading, KolSelect, KolVersion } from '@public-ui/react-v19';
 
-import { THEME_OPTIONS } from '../shares/theme';
-
+import type { SelectOption } from '@public-ui/components';
+import type { Theme } from '../shares/theme';
 import type { Routes } from '../shares/types';
 import Navigation from './Navigation';
 
@@ -37,6 +37,7 @@ const BuildInformation: FC<BuildInformationProps> = ({ buildDate, commitHash })
 
 type Props = {
 	version: string;
+	themes: Theme[];
 	theme: string;
 	routes: Routes;
 	routeList: string[];
@@ -46,7 +47,7 @@ type Props = {
 	onThemeChange: (theme: unknown) => void;
 };
 
-export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample, buildDate, commitHash, onThemeChange }) => {
+export const Sidebar: FC<Props> = ({ version, themes, theme, routes, routeList, sample, buildDate, commitHash, onThemeChange }) => {
 	/* KolSelect calls onChange initially by design - work around this with a state variable  */
 
 	const getIndexOfSample = () => routeList.indexOf(sample);
@@ -68,6 +69,18 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 		location.replace(`#${routeList[nextIndex]}`);
 	};
 
+	const themeOption = useMemo<SelectOption<string>[]>(
+		() =>
+			themes.map(
+				(t) =>
+					({
+						label: t.name,
+						value: t.key,
+					}) satisfies SelectOption<string>,
+			),
+		[themes],
+	);
+
 	return (
 		<aside className="app-sidebar p-4">
 			<div className="scrollable-container-wrapper">
@@ -76,7 +89,7 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 					<KolVersion _label={version}></KolVersion>
 				</div>
 				<BuildInformation buildDate={buildDate} commitHash={commitHash} />
-				<KolSelect _label="Theme" _options={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={theme} class="mt"></KolSelect>
+				<KolSelect _label="Theme" _options={themeOption} _on={{ onChange: handleThemeSelectChange }} _value={theme} class="mt"></KolSelect>
 				<KolHeading _label="Components" _level={2} className="block mt"></KolHeading>
 				<div className="flex flex-justify-between flex-items-center mt">
 					<KolButton _icons="kolicon-chevron-left" _hideLabel _label="Previous component" _on={{ onClick: handlePreviousClick }} />

package/src/components/input-text/expert-slot.tsx

@@ -1,4 +1,4 @@
-import { KolBadge, KolIcon, KolInputText } from '@public-ui/react-v19';
+import { KolBadge, KolIcon, KolInputText, KolPopoverButton } from '@public-ui/react-v19';
 import * as React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
@@ -27,6 +27,15 @@ export const InputTextExpertSlot = () => {
 						<strong>Note:</strong> This email will be used for account recovery and notifications.
 					</div>
 				</KolInputText>
+
+				<KolInputText _label="" _type="text" _required>
+					<div slot="expert" className="inline-block">
+						<span className="expert-slot-required-label">Username</span>
+						<KolPopoverButton _label="Help" _icons="kolicon-alert-info" _variant="ghost" _hideLabel _inline>
+							<div className="w-sm p-2 border border-solid border-gray">You have to take care of the asterics on your own!</div>
+						</KolPopoverButton>
+					</div>
+				</KolInputText>
 			</div>
 		</>
 	);

package/src/index.ts

@@ -0,0 +1 @@
+export { App } from './App';

package/src/shares/store.ts

@@ -1,7 +1,13 @@
-import { Option } from '@public-ui/components';
 import PackageJson from '@public-ui/components/package.json';
 
-import { isTheme, Store, THEME_OPTIONS, ThemeAndUnstyled } from './theme';
+import { UNSTYLED_THEME, type Theme } from './theme';
+
+type Store = {
+	darkMode: boolean;
+	theme: string;
+	nextTheme?: string;
+	registeredThemes: Theme[];
+};
 
 const STORE_IDENTIFIER = `public-ui.v${PackageJson.version}`;
 
@@ -20,6 +26,7 @@ class StaticStorage {
 const STORE: Store = {
 	darkMode: false,
 	theme: 'default',
+	registeredThemes: [],
 };
 
 let STORAGE: Storage;
@@ -30,7 +37,7 @@ export function setStorage(storage: Storage) {
 		const store = JSON.parse(RESTORE as string) as Store;
 		if (typeof store === 'object' && store !== null) {
 			STORE.darkMode = store.darkMode === true;
-			if (isTheme(store.theme)) {
+			if (typeof store.theme === 'string' && store.theme.length > 0) {
 				STORE.theme = store.theme;
 			}
 		}
@@ -44,22 +51,40 @@ const setStore = () => {
 	STORAGE.setItem(STORE_IDENTIFIER, JSON.stringify(STORE));
 };
 
-export const setTheme = (theme: ThemeAndUnstyled) => {
+export const setRegisteredThemes = (themes: Theme[]) => {
+	STORE.registeredThemes = themes;
+	if (!isTheme(STORE.theme)) {
+		STORE.theme = STORE.nextTheme ?? themes[1]?.key ?? UNSTYLED_THEME.key;
+		delete STORE.nextTheme;
+	}
+	setStore();
+};
+
+const isTheme = (value: string) => {
+	return STORE.registeredThemes.findIndex((theme) => theme.key === value) !== -1 || value === UNSTYLED_THEME.key;
+};
+
+export const setTheme = (theme: string) => {
 	if (isTheme(theme)) {
 		STORE.theme = theme;
-		setStore();
+	} else if (theme) {
+		STORE.nextTheme = theme;
 	} else {
 		throw new Error(`The theme identifier "${theme}" is not valid or an available option.`);
 	}
+	setStore();
 };
 
-export const getTheme = (): ThemeAndUnstyled => {
-	return `${STORE.theme}`;
+export const getTheme = (): string => {
+	return STORE.theme ?? UNSTYLED_THEME.key;
 };
 
-export const getThemeName = (theme: ThemeAndUnstyled) => {
+export const getThemeName = (theme: string) => {
+	if (STORE.registeredThemes.length === 0) {
+		return theme;
+	}
 	if (isTheme(theme)) {
-		return THEME_OPTIONS.find((option) => (option as Option<ThemeAndUnstyled>).value === theme)?.label;
+		return STORE.registeredThemes.find((option) => option.key === theme)?.name;
 	} else {
 		throw new Error(`The theme identifier "${theme}" is not valid or an available option.`);
 	}

package/src/shares/theme.ts

@@ -1,37 +1,24 @@
-import { SelectOption } from '@public-ui/components';
-
-export const THEMES = ['default', 'ecl-ec', 'ecl-eu', 'unstyled'] as const;
-export type Theme = (typeof THEMES)[number];
-export type ThemeAndUnstyled = Theme | 'unstyled';
-
-// const drafts: ThemeAndUnstyled[] = ['ecl-ec', 'ecl-eu'];
-
-// export const isDraftTheme = (theme: ThemeAndUnstyled) => drafts.includes(theme);
-
-export const isTheme = (value: unknown) => {
-	return THEMES.find((theme) => theme === value) !== undefined;
+export type Theme = {
+	name: string;
+	key: string;
 };
 
-export type Store = {
-	darkMode: boolean;
-	theme: ThemeAndUnstyled;
+export const UNSTYLED_THEME: Theme = {
+	name: 'Unstyled (Uncolored)',
+	key: 'unstyled',
 };
 
-export const THEME_OPTIONS: SelectOption<ThemeAndUnstyled>[] = [
-	{
-		label: 'Unstyled (Uncolored)',
-		value: 'unstyled',
-	},
+export const PUBLIC_THEMES: Theme[] = [
 	{
-		label: 'Default (Tested)',
-		value: 'default',
+		name: 'Default (Tested)',
+		key: 'default',
 	},
 	{
-		label: 'European Commission (in progress)',
-		value: 'ecl-ec',
+		name: 'European Commission (in progress)',
+		key: 'ecl-ec',
 	},
 	{
-		label: 'European Union (in progress)',
-		value: 'ecl-eu',
+		name: 'European Union (in progress)',
+		key: 'ecl-eu',
 	},
 ];

package/src/style.scss

@@ -101,6 +101,10 @@ hr {
 	}
 }
 
+.expert-slot-required-label::after {
+	content: ' *' / '';
+}
+
 .loading-overlay {
 	background-color: rgb(250, 250, 250, 0.4);
 	backdrop-filter: blur(5px);

package/dist/assets/custom-class-B6h_ZSR7-BWihubgl.js

@@ -1,2 +0,0 @@
-import{q as t}from"./index-BH2YUu2l.js";const o=(a,s)=>{t(a,"_customClass",s,{defaultValue:void 0})};export{o as v};
-//# sourceMappingURL=custom-class-B6h_ZSR7-BWihubgl.js.map

package/dist/assets/disabled-D0wfAqak-CMw0aVXw.js

@@ -1,2 +0,0 @@
-import{n as o,C as s}from"./index-BH2YUu2l.js";const d=(a,t)=>{o(a,"_disabled",t,{hooks:{afterPatch:e=>{e===!0&&s()}}})};export{d as v};
-//# sourceMappingURL=disabled-D0wfAqak-CMw0aVXw.js.map

package/dist/assets/has-closer-OxGfsISj-BbQXmzbG.js

@@ -1,2 +0,0 @@
-import{n as s}from"./index-BH2YUu2l.js";const r=(a,o)=>{s(a,"_hasCloser",o)};export{r as v};
-//# sourceMappingURL=has-closer-OxGfsISj-BbQXmzbG.js.map

package/dist/assets/hide-label-90DGA8H4-Dbqb_cws.js

@@ -1,2 +0,0 @@
-import{n as t}from"./index-BH2YUu2l.js";const l=(a,e,o={})=>{t(a,"_hideLabel",e,o)};export{l as v};
-//# sourceMappingURL=hide-label-90DGA8H4-Dbqb_cws.js.map

package/dist/assets/href-BDekIhFd-CSLRlKzm.js

@@ -1,2 +0,0 @@
-import{q as e}from"./index-BH2YUu2l.js";const f=(r,t,a={})=>{e(r,"_href",t,a)};export{f as v};
-//# sourceMappingURL=href-BDekIhFd-CSLRlKzm.js.map

package/dist/assets/i18n-CvQhdUrE-DqB8fIsV.js

@@ -1,2 +0,0 @@
-import{Y as e,Z as i,M as s}from"./index-BH2YUu2l.js";let r=(t,n)=>{var a;return((a=e())!==null&&a!==void 0?a:i("de")).translate(t,n)};s()&&(r=t=>t);export{r as t};
-//# sourceMappingURL=i18n-CvQhdUrE-DqB8fIsV.js.map

package/dist/assets/image-source-udiqQ1zY-DVRav_F7.js

@@ -1,2 +0,0 @@
-import{q as o}from"./index-BH2YUu2l.js";const e=(a,r,t)=>{o(a,"_src",r,t)};export{e as v};
-//# sourceMappingURL=image-source-udiqQ1zY-DVRav_F7.js.map