@public-ui/sample-react 4.0.1-rc.1 → 4.0.1

package/src/components/input-color/partials/cases.tsx

@@ -12,7 +12,7 @@ export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.K
 					{...props}
 					_msg={{ _type: 'error', _description: ERROR_MSG }}
 					_icons={{
-						left: 'fa-solid fa-palette',
+						left: 'kolicon-kolibri',
 					}}
 					_label="Color (Black background test)"
 					_value="#f08080"

package/src/components/input-file/partials/cases.tsx

@@ -13,7 +13,7 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 					_label="Upload file (Black background test)"
 					_icons={{
 						left: {
-							icon: 'fa-solid fa-floppy-disk',
+							icon: 'kolicon-check',
 						},
 					}}
 					_touched
@@ -27,7 +27,7 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 				_label="Upload file (Black background test)"
 				_icons={{
 					left: {
-						icon: 'fa-solid fa-floppy-disk',
+						icon: 'kolicon-check',
 					},
 				}}
 				_touched

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

@@ -15,7 +15,7 @@ export const InputTextBasic: FC = () => (
 			<KolInputText _label="Name" _required _hint="Enter your surname" />
 			<KolInputText _label="Name" _value="Anderson-Clark" _disabled />
 			<KolInputText _label="Name" _readOnly _value="Anderson-Clark" />
-			<KolInputText _label="Name" _icons="fa-solid fa-user" _value="Anderson-Clark" />
+			<KolInputText _label="Name" _icons="kolicon-house" _value="Anderson-Clark" />
 		</div>
 	</>
 );

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/components/input-text/smart-button.tsx

@@ -10,7 +10,7 @@ const smartButtonProps = {
 
 const icons = {
 	left: {
-		icon: 'fa-solid fa-magnifying-glass',
+		icon: 'kolicon-eye',
 	},
 	right: {
 		icon: 'kolicon-check',

package/src/components/link/access-key.tsx

@@ -14,7 +14,7 @@ export const LinkAccessKey: FC = () => (
 			<KolLink _href="#/back-page" _label="With S access key" _accessKey="S" />
 			<KolLink _href="#/back-page" _label="Very small s" _accessKey="s" />
 			<KolLink _href="#/back-page" _label="Access key does not appear in label" _accessKey="s" />
-			<KolLink _hideLabel _icons="fa-solid fa-house" _href="#/back-page" _label="access key without label" _accessKey="s" />
+			<KolLink _hideLabel _icons="kolicon-house" _href="#/back-page" _label="access key without label" _accessKey="s" />
 		</div>
 	</>
 );

package/src/components/link/basic.tsx

@@ -16,8 +16,8 @@ export const LinkBasic: FC = () => (
 		<div className="grid gap-4">
 			<KolLink _href="#/back-page" _inline={false} _label="Simple Link" />
 			<KolLink _disabled _href="#/back-page" _inline={false} _label="Simple Link (disabled)" />
-			<KolLink _hideLabel _icons="fa-solid fa-house" _href="#/back-page" _inline={false} _label="Icon Link" />
-			<KolLink _disabled _hideLabel _icons="fa-solid fa-house" _href="#/back-page" _inline={false} _label="Icon Link (disabled)" />
+			<KolLink _hideLabel _icons="kolicon-house" _href="#/back-page" _inline={false} _label="Icon Link" />
+			<KolLink _disabled _hideLabel _icons="kolicon-house" _href="#/back-page" _inline={false} _label="Icon Link (disabled)" />
 			<p>
 				In this paragraph, a link is inserted that contains no additional attributes. <KolLink _href="#/back-page" _label="Simple Link" /> It is rendered by
 				default as a <strong>inline element</strong>.

package/src/components/link/icons.tsx

@@ -12,43 +12,43 @@ export const LinkIcons: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolLink _icons="fa-solid fa-house" _label="I am a link with an icon on the left" _href="#/back-page" />
+			<KolLink _icons="kolicon-house" _label="I am a link with an icon on the left" _href="#/back-page" />
 			<KolLink
 				_icons={{
-					right: 'fa-solid fa-house',
+					right: 'kolicon-house',
 				}}
 				_label="I am a link with an icon on the right"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
-					top: 'fa-solid fa-house',
+					top: 'kolicon-house',
 				}}
 				_label="I am a link with an icon at the top"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
-					bottom: 'fa-solid fa-house',
+					bottom: 'kolicon-house',
 				}}
 				_label="I am a link with icon below"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
-					top: 'fa-solid fa-house',
-					right: 'fa-solid fa-house',
-					bottom: 'fa-solid fa-house',
-					left: 'fa-solid fa-house',
+					top: 'kolicon-house',
+					right: 'kolicon-house',
+					bottom: 'kolicon-house',
+					left: 'kolicon-house',
 				}}
 				_label="I am a link with all icons"
 				_href="#/back-page"
 			/>
 
-			<KolLink _icons="fa-solid fa-house" _href="https://public-ui.github.io/" _label="I am a external link with an icon on the left" _target="_blank" />
+			<KolLink _icons="kolicon-house" _href="https://public-ui.github.io/" _label="I am a external link with an icon on the left" _target="_blank" />
 			<KolLink
 				_icons={{
-					right: 'fa-solid fa-house',
+					right: 'kolicon-house',
 				}}
 				_href="https://public-ui.github.io/"
 				_label="I am a external linkwith an icon on the right"
@@ -56,7 +56,7 @@ export const LinkIcons: FC = () => (
 			/>
 			<KolLink
 				_icons={{
-					top: 'fa-solid fa-house',
+					top: 'kolicon-house',
 				}}
 				_href="https://public-ui.github.io/"
 				_label="I am a external link with an icon at the top"
@@ -64,7 +64,7 @@ export const LinkIcons: FC = () => (
 			/>
 			<KolLink
 				_icons={{
-					bottom: 'fa-solid fa-house',
+					bottom: 'kolicon-house',
 				}}
 				_href="https://public-ui.github.io/"
 				_label="I am a external link with icon below"
@@ -75,10 +75,10 @@ export const LinkIcons: FC = () => (
 				_label="I am a external link with all icons"
 				_target="_blank"
 				_icons={{
-					top: 'fa-solid fa-house',
-					right: 'fa-solid fa-house',
-					bottom: 'fa-solid fa-house',
-					left: 'fa-solid fa-house',
+					top: 'kolicon-house',
+					right: 'kolicon-house',
+					bottom: 'kolicon-house',
+					left: 'kolicon-house',
 				}}
 			/>
 		</div>

package/src/components/link/short-key.tsx

@@ -16,7 +16,7 @@ export const LinkShortKey: FC = () => (
 			<KolLink _href="#/back-page" _label="With S short key" _shortKey="S" />
 			<KolLink _href="#/back-page" _label="Very small s" _shortKey="s" />
 			<KolLink _href="#/back-page" _label="Short key does not appear in label" _shortKey="s" />
-			<KolLink _hideLabel _icons="fa-solid fa-house" _href="#/back-page" _label="short key without label" _shortKey="s" />
+			<KolLink _hideLabel _icons="kolicon-house" _href="#/back-page" _label="short key without label" _shortKey="s" />
 		</div>
 	</>
 );

package/src/components/link/target.tsx

@@ -25,13 +25,13 @@ export const LinkTarget: FC = () => (
 					<KolLink _href="#/back-page" _label="Link with target (_blank)" _target="_blank" />
 				</li>
 				<li>
-					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link without target" />
+					<KolLink _href="#/back-page" _icons="kolicon-house" _hideLabel _label="Link without target" />
 				</li>
 				<li>
-					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link with target (_self)" _target="_self" />
+					<KolLink _href="#/back-page" _icons="kolicon-house" _hideLabel _label="Link with target (_self)" _target="_self" />
 				</li>
 				<li>
-					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link with target (_blank)" _target="_blank" />
+					<KolLink _href="#/back-page" _icons="kolicon-house" _hideLabel _label="Link with target (_blank)" _target="_blank" />
 				</li>
 			</ul>
 		</div>

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

@@ -16,20 +16,20 @@ export const PopoverButtonBasic: FC = () => {
 	const TOOLBAR_ITEMS: ToolbarItemsPropType = [
 		{
 			type: 'button',
-			_label: 'Edit',
-			_icons: 'fa-solid fa-pen',
+			_label: 'Show',
+			_icons: 'kolicon-eye',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
 			_label: 'Delete',
-			_icons: 'fa-solid fa-trash',
+			_icons: 'kolicon-minus',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
-			_label: 'Duplicate',
-			_icons: 'fa-solid fa-copy',
+			_label: 'Add',
+			_icons: 'kolicon-plus',
 			_on: dummyEventHandler,
 		},
 	];

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

@@ -17,7 +17,7 @@ export const PopoverButtonInline: FC = () => {
 				<p>
 					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.
-					<KolPopoverButton _inline={true} _label="Help" _icons="fa-solid fa-circle-question" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
+					<KolPopoverButton _inline={true} _label="Help" _icons="kolicon-alert-info" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
 						<div className="w-sm p-2 border border-solid border-gray">
 							<KolHeading _label="Help Information" _level={0}></KolHeading>
 							<p>

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

@@ -16,19 +16,19 @@ export const SplitButtonBasic: FC = () => {
 		{
 			type: 'button',
 			_label: 'Save',
-			_icons: 'fa-solid fa-floppy-disk',
+			_icons: 'kolicon-check',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
-			_label: 'Move',
-			_icons: 'fa-solid fa-arrows-up-down-left-right',
+			_label: 'Move Up',
+			_icons: 'kolicon-chevron-up',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
 			_label: 'Delete',
-			_icons: 'fa-solid fa-trash',
+			_icons: 'kolicon-minus',
 			_on: dummyEventHandler,
 		},
 	];

package/src/components/table/render-cell.tsx

@@ -105,7 +105,7 @@ const HEADERS: KoliBriTableHeaders = {
 							}}
 						>
 							<KolInputText _label="Input" />
-							<KolButtonWrapper label="Save" icons={{ left: 'fa-solid fa-floppy-disk' }} />
+							<KolButtonWrapper label="Save" icons={{ left: 'kolicon-check' }} />
 						</div>,
 					);
 				},

package/src/components/tabs/align.tsx

@@ -7,7 +7,7 @@ import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
-		_icons: 'fa-solid fa-chart-pie',
+		_icons: 'kolicon-check',
 		_label: 'First tab',
 		_on: {
 			onSelect: (event: Event) => {
@@ -16,16 +16,16 @@ const tabs = [
 		},
 	},
 	{
-		_icons: 'fa-solid fa-calendar',
+		_icons: 'kolicon-link-external',
 		_label: 'Second Tab',
 	},
 	{
 		_disabled: true,
-		_icons: 'fa-solid fa-briefcase',
+		_icons: 'kolicon-house',
 		_label: 'Disabled Tab',
 	},
 	{
-		_icons: 'fa-solid fa-address-card',
+		_icons: 'kolicon-eye',
 		_label: 'Last tab',
 	},
 ];

package/src/components/tabs/basic.tsx

@@ -6,7 +6,7 @@ import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
-		_icons: 'fa-solid fa-chart-pie',
+		_icons: 'kolicon-check',
 		_label: 'First tab',
 		_on: {
 			onSelect: (event: Event) => {
@@ -15,16 +15,16 @@ const tabs = [
 		},
 	},
 	{
-		_icons: 'fa-solid fa-calendar',
+		_icons: 'kolicon-link-external',
 		_label: 'Second Tab',
 	},
 	{
 		_disabled: true,
-		_icons: 'fa-solid fa-briefcase',
+		_icons: 'kolicon-house',
 		_label: 'Disabled Tab',
 	},
 	{
-		_icons: 'fa-solid fa-address-card',
+		_icons: 'kolicon-eye',
 		_label: 'Last tab',
 	},
 ];

package/src/components/tabs/behavior.tsx

@@ -6,7 +6,7 @@ import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
-		_icons: 'fa-solid fa-chart-pie',
+		_icons: 'kolicon-check',
 		_label: 'First tab',
 		_on: {
 			onSelect: (event: Event) => {
@@ -15,16 +15,16 @@ const tabs = [
 		},
 	},
 	{
-		_icons: 'fa-solid fa-calendar',
+		_icons: 'kolicon-link-external',
 		_label: 'Second Tab',
 	},
 	{
 		_disabled: true,
-		_icons: 'fa-solid fa-briefcase',
+		_icons: 'kolicon-house',
 		_label: 'Disabled Tab',
 	},
 	{
-		_icons: 'fa-solid fa-address-card',
+		_icons: 'kolicon-eye',
 		_label: 'Last tab',
 	},
 ];

package/src/components/tabs/icons-only.tsx

@@ -6,25 +6,26 @@ import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
-		_icons: 'fa-solid fa-chart-pie',
-		_label: 'First Tab',
-		_hideLabel: true,
+		_icons: 'kolicon-check',
+		_label: 'First tab',
+		_on: {
+			onSelect: (event: Event) => {
+				console.log('First tab selected', event);
+			},
+		},
 	},
 	{
-		_icons: 'fa-solid fa-calendar',
+		_icons: 'kolicon-link-external',
 		_label: 'Second Tab',
-		_hideLabel: true,
 	},
 	{
 		_disabled: true,
-		_icons: 'fa-solid fa-briefcase',
+		_icons: 'kolicon-house',
 		_label: 'Disabled Tab',
-		_hideLabel: true,
 	},
 	{
-		_icons: 'fa-solid fa-address-card',
-		_label: 'Last Tab',
-		_hideLabel: true,
+		_icons: 'kolicon-eye',
+		_label: 'Last tab',
 	},
 ];
 export const TabsIconsOnly: FC = () => (

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-Bf4ZVveI.js

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

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

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

package/dist/assets/has-closer-OxGfsISj-D0v-A6GF.js

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

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

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

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

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

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

@@ -1,2 +0,0 @@
-import{Y as e,Z as i,M as s}from"./index-CKa15LKw.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-Cb6csF7u.js.map

package/dist/assets/image-source-udiqQ1zY-C6_-uNyn.js

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