@public-ui/sample-react 3.0.0-rc.7 → 3.0.0-rc.9

package/src/scenarios/same-height-of-all-interactive-elements.tsx

@@ -0,0 +1,62 @@
+import {
+	KolButton,
+	KolCombobox,
+	KolInputColor,
+	KolInputDate,
+	KolInputEmail,
+	KolInputFile,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRange,
+	KolInputText,
+	KolLinkButton,
+	KolSelect,
+	KolSingleSelect,
+	KolTextarea,
+} from '@public-ui/react';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
+import { useToasterService } from '../hooks/useToasterService';
+
+export const SameHeightOfAllInteractiveElements: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					All interactive elements, such as buttons and input fields, should have the same height to ensure a consistent and visually balanced user interface.
+				</p>
+			</SampleDescription>
+			<div className="w-full flex flex-wrap gap-4">
+				<KolButton _icons="codicon codicon-home" _label="Button" _on={dummyEventHandler} />
+				<KolButton _hideLabel _icons="codicon codicon-home" _label="Button" _on={dummyEventHandler} />
+				<KolLinkButton _href="#" _icons="codicon codicon-home" _label="Link-Button" _on={dummyEventHandler} />
+				<KolLinkButton _hideLabel _href="#" _icons="codicon codicon-home" _label="Link-Button" _on={dummyEventHandler} />
+				<KolCombobox _hideLabel _icons="codicon codicon-home" _label="Combobox" _suggestions={[]} />
+				<KolInputColor
+					_hideLabel
+					_icons={{
+						left: 'codicon codicon-home',
+					}}
+					_label="Input-Color"
+				/>
+				<KolInputFile _hideLabel _icons="codicon codicon-home" _label="Input-File" />
+				<KolInputDate _hideLabel _icons="codicon codicon-home" _label="Input-Date" />
+				<KolInputEmail _hideLabel _icons="codicon codicon-home" _label="Input-Email" />
+				<KolInputNumber _hideLabel _icons="codicon codicon-home" _label="Input-Number" />
+				<KolInputPassword _hideLabel _icons="codicon codicon-home" _label="Input-Password" />
+				<KolInputRange _hideLabel _icons="codicon codicon-home" _label="Input-Range" />
+				<KolInputText _hideLabel _icons="codicon codicon-home" _label="Input-Text" />
+				<KolSelect _hideLabel _icons="codicon codicon-home" _label="Combobox" _options={[]} />
+				<KolSingleSelect _hideLabel _icons="codicon codicon-home" _label="Combobox" _options={[]} />
+				<KolTextarea _hideLabel _icons="codicon codicon-home" _label="Combobox" />
+			</div>
+		</>
+	);
+};

package/src/style.scss

@@ -23,13 +23,20 @@ hr {
 
 .indented-text {
 	p {
-		font-family: var(--font-family);
-		border-left: -2px solid var(--color-primary-variant);
-		padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));
-		margin-left: rem(-2);
+		margin: 0;
 	}
 }
 
+.visually-hidden {
+	clip: rect(0 0 0 0);
+	clip-path: inset(50%);
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
+
 .black-background {
 	background-color: black;
 	display: flex;
@@ -41,6 +48,10 @@ hr {
 	width: 500px;
 }
 
+.drawer-content-vertical {
+	width: rem(400);
+}
+
 @media (min-width: 1024px) {
 	.app-container {
 		display: grid;

package/unocss.config.ts

@@ -13,131 +13,130 @@ function convertDynamicClassValueToRem(value: string) {
 	return pxValueToRem(Number.parseFloat(value) * 16 / 4);
 }
 
-// ts-prune-ignore-next
 export default defineConfig({
 	rules: [
-		[/^p-(\d+)$/, ([, d]) => ({ 
-			padding: convertDynamicClassValueToRem(d) 
+		[/^p-(\d+)$/, ([, d]) => ({
+			padding: convertDynamicClassValueToRem(d)
 		})],
 
-		[/^px-(\d+)$/, ([, d]) => ({ 
+		[/^px-(\d+)$/, ([, d]) => ({
 			'padding-left': convertDynamicClassValueToRem(d),
-			'padding-right': convertDynamicClassValueToRem(d)  
+			'padding-right': convertDynamicClassValueToRem(d)
 		})],
-		[/^py-(\d+)$/, ([, d]) => ({ 
+		[/^py-(\d+)$/, ([, d]) => ({
 			'padding-top': convertDynamicClassValueToRem(d),
-			'padding-bottom': convertDynamicClassValueToRem(d)  
+			'padding-bottom': convertDynamicClassValueToRem(d)
 		})],
 
-		[/^ps-(\d+)$/, ([, d]) => ({ 
-			'padding-inline-start': convertDynamicClassValueToRem(d) 
+		[/^ps-(\d+)$/, ([, d]) => ({
+			'padding-inline-start': convertDynamicClassValueToRem(d)
 		})],
-		[/^pe-(\d+)$/, ([, d]) => ({ 
-			'padding-inline-end': convertDynamicClassValueToRem(d) 
+		[/^pe-(\d+)$/, ([, d]) => ({
+			'padding-inline-end': convertDynamicClassValueToRem(d)
 		})],
 
-		[/^pt-(\d+)$/, ([, d]) => ({ 
-			'padding-top': convertDynamicClassValueToRem(d) 
+		[/^pt-(\d+)$/, ([, d]) => ({
+			'padding-top': convertDynamicClassValueToRem(d)
 		})],
-		[/^pl-(\d+)$/, ([, d]) => ({ 
-			'padding-left': convertDynamicClassValueToRem(d) 
+		[/^pl-(\d+)$/, ([, d]) => ({
+			'padding-left': convertDynamicClassValueToRem(d)
 		})],
-		[/^pr-(\d+)$/, ([, d]) => ({ 
-			'padding-right': convertDynamicClassValueToRem(d) 
+		[/^pr-(\d+)$/, ([, d]) => ({
+			'padding-right': convertDynamicClassValueToRem(d)
 		})],
-		[/^pb-(\d+)$/, ([, d]) => ({ 
-			'padding-bottom': convertDynamicClassValueToRem(d) 
+		[/^pb-(\d+)$/, ([, d]) => ({
+			'padding-bottom': convertDynamicClassValueToRem(d)
 		})],
 
-		[/^p-t-(\d+)$/, ([, d]) => ({ 
-			'padding-top': convertDynamicClassValueToRem(d) 
+		[/^p-t-(\d+)$/, ([, d]) => ({
+			'padding-top': convertDynamicClassValueToRem(d)
 		})],
-		[/^p-l-(\d+)$/, ([, d]) => ({ 
-			'padding-left': convertDynamicClassValueToRem(d) 
+		[/^p-l-(\d+)$/, ([, d]) => ({
+			'padding-left': convertDynamicClassValueToRem(d)
 		})],
-		[/^p-r-(\d+)$/, ([, d]) => ({ 
-			'padding-right': convertDynamicClassValueToRem(d) 
+		[/^p-r-(\d+)$/, ([, d]) => ({
+			'padding-right': convertDynamicClassValueToRem(d)
 		})],
-		[/^p-b-(\d+)$/, ([, d]) => ({ 
-			'padding-bottom': convertDynamicClassValueToRem(d) 
+		[/^p-b-(\d+)$/, ([, d]) => ({
+			'padding-bottom': convertDynamicClassValueToRem(d)
 		})],
 
-		[/^m-(\d+)$/, ([, d]) => ({ 
-			margin: convertDynamicClassValueToRem(d) 
+		[/^m-(\d+)$/, ([, d]) => ({
+			margin: convertDynamicClassValueToRem(d)
 		})],
 
-		[/^mx-(\d+)$/, ([, d]) => ({ 
+		[/^mx-(\d+)$/, ([, d]) => ({
 			'margin-left': convertDynamicClassValueToRem(d),
-			'margin-right': convertDynamicClassValueToRem(d)  
+			'margin-right': convertDynamicClassValueToRem(d)
 		})],
-		[/^my-(\d+)$/, ([, d]) => ({ 
+		[/^my-(\d+)$/, ([, d]) => ({
 			'margin-top': convertDynamicClassValueToRem(d),
-			'margin-bottom': convertDynamicClassValueToRem(d)  
+			'margin-bottom': convertDynamicClassValueToRem(d)
 		})],
 
-		[/^ms-(\d+)$/, ([, d]) => ({ 
-			'margin-inline-start': convertDynamicClassValueToRem(d) 
+		[/^ms-(\d+)$/, ([, d]) => ({
+			'margin-inline-start': convertDynamicClassValueToRem(d)
 		})],
-		[/^me-(\d+)$/, ([, d]) => ({ 
-			'margin-inline-end': convertDynamicClassValueToRem(d) 
+		[/^me-(\d+)$/, ([, d]) => ({
+			'margin-inline-end': convertDynamicClassValueToRem(d)
 		})],
 
-		[/^mt$/, ([, d]) => ({ 
-			'margin-top': pxValueToRem(16) 
+		[/^mt$/, ([, d]) => ({
+			'margin-top': pxValueToRem(16)
 		})],
-		[/^ml$/, ([, d]) => ({ 
-			'margin-left': pxValueToRem(16) 
+		[/^ml$/, ([, d]) => ({
+			'margin-left': pxValueToRem(16)
 		})],
-		[/^mr$/, ([, d]) => ({ 
-			'margin-right': pxValueToRem(16) 
+		[/^mr$/, ([, d]) => ({
+			'margin-right': pxValueToRem(16)
 		})],
-		[/^mb$/, ([, d]) => ({ 
-			'margin-bottom': pxValueToRem(16) 
+		[/^mb$/, ([, d]) => ({
+			'margin-bottom': pxValueToRem(16)
 		})],
 
-		[/^mt-(\d+)$/, ([, d]) => ({ 
-			'margin-top': convertDynamicClassValueToRem(d) 
+		[/^mt-(\d+)$/, ([, d]) => ({
+			'margin-top': convertDynamicClassValueToRem(d)
 		})],
-		[/^ml-(\d+)$/, ([, d]) => ({ 
-			'margin-left': convertDynamicClassValueToRem(d) 
+		[/^ml-(\d+)$/, ([, d]) => ({
+			'margin-left': convertDynamicClassValueToRem(d)
 		})],
-		[/^mr-(\d+)$/, ([, d]) => ({ 
-			'margin-right': convertDynamicClassValueToRem(d) 
+		[/^mr-(\d+)$/, ([, d]) => ({
+			'margin-right': convertDynamicClassValueToRem(d)
 		})],
-		[/^mb-(\d+)$/, ([, d]) => ({ 
-			'margin-bottom': convertDynamicClassValueToRem(d) 
+		[/^mb-(\d+)$/, ([, d]) => ({
+			'margin-bottom': convertDynamicClassValueToRem(d)
 		})],
 
-		[/^m-t-(\d+)$/, ([, d]) => ({ 
-			'margin-top': convertDynamicClassValueToRem(d) 
+		[/^m-t-(\d+)$/, ([, d]) => ({
+			'margin-top': convertDynamicClassValueToRem(d)
 		})],
-		[/^m-l-(\d+)$/, ([, d]) => ({ 
-			'margin-left': convertDynamicClassValueToRem(d) 
+		[/^m-l-(\d+)$/, ([, d]) => ({
+			'margin-left': convertDynamicClassValueToRem(d)
 		})],
-		[/^m-r-(\d+)$/, ([, d]) => ({ 
-			'margin-right': convertDynamicClassValueToRem(d) 
+		[/^m-r-(\d+)$/, ([, d]) => ({
+			'margin-right': convertDynamicClassValueToRem(d)
 		})],
-		[/^m-b-(\d+)$/, ([, d]) => ({ 
-			'margin-bottom': convertDynamicClassValueToRem(d) 
+		[/^m-b-(\d+)$/, ([, d]) => ({
+			'margin-bottom': convertDynamicClassValueToRem(d)
 		})],
 
-		[/^mb-sm$/, ([, d]) => ({ 
-			'margin-bottom': pxValueToRem(14) 
+		[/^mb-sm$/, ([, d]) => ({
+			'margin-bottom': pxValueToRem(14)
 		})],
 
 		[/^gap-(\d+)$/, ([, d]) => ({ gap: convertDynamicClassValueToRem(d) })],
 		[/^gap-x-(\d+)$/, ([, d]) => ({ 'column-gap': convertDynamicClassValueToRem(d) })],
 		[/^gap-y-(\d+)$/, ([, d]) => ({ 'row-gap': convertDynamicClassValueToRem(d) })],
-	
-		[/^w-(\d+)rem$/, ([, d]) => ({ 
-			width: pxValueToRem(Number.parseInt(d) * 16) 
+
+		[/^w-(\d+)rem$/, ([, d]) => ({
+			width: pxValueToRem(Number.parseInt(d) * 16)
 		})],
 
-		[/^w-sm$/, () => ({ 
+		[/^w-sm$/, () => ({
 			width: pxValueToRem(24 * 16) // 24rem
 		})],
 	],
-	extendTheme: (theme: any) => { 
+	extendTheme: (theme: any) => {
 		return {
 			...theme,
 			fontSize: {

package/webpack.config.js

@@ -1,11 +1,20 @@
 const webpack = require('webpack');
 
-const OPTIONAL_THEME_PACKAGE = '@public-ui-/theme-ecl';
+/**
+ * @returns {null|string}
+ */
+function getGitCommitHash() {
+	try {
+		return require('child_process').execSync('git rev-parse --short HEAD 2>/dev/null').toString().trim();
+	} catch (e) {
+		return null;
+	}
+}
 
 module.exports = (...args) => {
 	const config = require('@leanup/stack-react/webpack.config')(...args);
 	const UnoCSS = require('@unocss/webpack').default;
-	const commitHash = require('child_process').execSync('git rev-parse --short HEAD').toString().trim();
+
 	config.plugins.push(UnoCSS());
 	config.plugins.push(
 		new webpack.EnvironmentPlugin({
@@ -15,29 +24,9 @@ module.exports = (...args) => {
 			ENABLE_TAG_NAME_TRANSFORMER: '',
 			ENABLE_THEME_PATCHING: '',
 			BUILD_DATE: new Date().toISOString(),
-			COMMIT_HASH: commitHash,
+			COMMIT_HASH: getGitCommitHash(),
 		}),
 	);
 	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;
 };