@public-ui/sample-react 3.0.1-rc.0 → 3.0.2-6ae0104cda0b7b19a5b0d6bbc5f990b9fe544fa0.0

package/src/components/table/horizontal-scrollbar.tsx

@@ -36,7 +36,7 @@ export const TableHorizontalScrollbar: FC = () => {
 
 				<KolTableStateful
 					_label="Table for demonstration purposes with horizontal scrollbar."
-					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
+					_minWidth={hasWidthRestriction ? '600px' : '300px'}
 					_headers={HEADERS}
 					_data={DATA}
 					className="block"
@@ -47,7 +47,7 @@ export const TableHorizontalScrollbar: FC = () => {
 
 				<KolTableStateful
 					_label="Table for demonstration purposes with horizontal scrollbar with auto minWidth."
-					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
+					_minWidth={hasWidthRestriction ? '600px' : '300px'}
 					_headers={HEADERS}
 					_data={[]}
 					className="block"

package/src/components/tabs/create-button.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import type { FC } from 'react';
+import { KolTabs } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+
+export const CreateButton: FC = () => {
+	const [tabs, setTabs] = useState([
+		{
+			_label: 'First tab',
+		},
+		{
+			_label: 'Second Tab',
+		},
+	]);
+
+	const addTab = () => {
+		setTabs([
+			...tabs,
+			{
+				_label: `Tab #${tabs.length + 1}`,
+			},
+		]);
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows KolTabs with a &quot;create tab&quot; button.</p>
+			</SampleDescription>
+
+			<KolTabs _tabs={tabs} className="mt-4" _label="Tabs with create button" _hasCreateButton _on={{ onCreate: addTab }}>
+				{tabs.map((tab, index) => (
+					<div key={`tab-${index}`} slot={`tab-${index}`}>
+						Contents of {tab._label}
+					</div>
+				))}
+
+				<div slot="tab-1">Contents of Tab 2</div>
+			</KolTabs>
+		</>
+	);
+};

package/src/components/tabs/routes.ts

@@ -3,10 +3,12 @@ import { TabsBasic } from './basic';
 import { TabsAlign } from './align';
 import { TabsIconsOnly } from './icons-only';
 import { TabsBehavior } from './behavior';
+import { CreateButton } from './create-button';
 
 export const TABS_ROUTES: Routes = {
 	tabs: {
 		basic: TabsBasic,
+		'create-button': CreateButton,
 		'icons-only': TabsIconsOnly,
 		behavior: TabsBehavior,
 		align: TabsAlign,

package/src/components/toolbar/basic.tsx

@@ -1,10 +1,41 @@
 import type { FC } from 'react';
 import React, { useContext } from 'react';
-import { KolBadge, KolToolbar } from '@public-ui/react';
+import { KolBadge, KolHeading, KolToolbar } from '@public-ui/react';
 import { HideMenusContext } from '../../shares/HideMenusContext';
 import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarBasic: FC = () => {
+	const TOOLBAR_ITEMS = [
+		{
+			_label: 'Back',
+			_hideLabel: true,
+			_icons: {
+				left: {
+					icon: 'codicon codicon-arrow-left',
+				},
+			},
+		},
+		{
+			_label: 'Next',
+			_hideLabel: true,
+			_icons: {
+				right: {
+					icon: 'codicon codicon-arrow-right',
+				},
+			},
+		},
+		{
+			_href: '#/back-page',
+			_label: 'Simple Link 1',
+		},
+		{
+			_href: '#/back-page',
+			_label: 'Simple Link 3',
+		},
+		{
+			_label: 'Bold',
+		},
+	];
 	const hideMenus = useContext(HideMenusContext);
 	return (
 		<>
@@ -16,41 +47,13 @@ export const ToolbarBasic: FC = () => {
 			</SampleDescription>
 			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 
-			<KolToolbar
-				class="block w-fit"
-				_label="Toolbar"
-				_items={[
-					{
-						_label: 'Back',
-						_hideLabel: true,
-						_icons: {
-							left: {
-								icon: 'codicon codicon-arrow-left',
-							},
-						},
-					},
-					{
-						_label: 'Next',
-						_hideLabel: true,
-						_icons: {
-							right: {
-								icon: 'codicon codicon-arrow-right',
-							},
-						},
-					},
-					{
-						_href: '#/back-page',
-						_label: 'Simple Link 1',
-					},
-					{
-						_href: '#/back-page',
-						_label: 'Simple Link 3',
-					},
-					{
-						_label: 'Bold',
-					},
-				]}
-			/>
+			<div className="flex flex-col gap-4">
+				<KolHeading _label="Orientation horizontal" _level={2} />
+				<KolToolbar class="block w-fit" _label="Toolbar" _items={TOOLBAR_ITEMS} />
+
+				<KolHeading _label="Orientation vertical" _level={2} />
+				<KolToolbar class="block w-fit" _label="Toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
+			</div>
 		</>
 	);
 };

package/src/react.main.tsx

@@ -1,7 +1,7 @@
+import { setTagNameTransformer } from '@public-ui/react';
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
-import { setTagNameTransformer } from '@public-ui/react';
 
 import { bootstrap, KoliBriDevHelper } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
@@ -30,7 +30,7 @@ if (ENABLE_TAG_NAME_TRANSFORMER) {
 const getThemes = async () => {
 	if (process.env.THEME_MODULE) {
 		/* Visual regression testing mode: Themes are overridden with a certain theme module, that should be used instead. */
-		const { [(process.env.THEME_EXPORT as string) || 'default']: theme } = (await import(process.env.THEME_MODULE)) as Record<string, Theme>;
+		const { [(process.env.THEME_EXPORT as string) || 'default']: theme } = (await import(/* @vite-ignore */ process.env.THEME_MODULE)) as Record<string, Theme>;
 		return [theme];
 	}
 
@@ -129,7 +129,7 @@ void (async () => {
 		const root = createRoot(htmlDivElement);
 		root.render(
 			<StrictMode>
-				<Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+				<Router>
 					<App />
 				</Router>
 			</StrictMode>,

package/src/style.scss

@@ -83,9 +83,8 @@ hr {
 }
 
 @media print {
-
 	.no-print,
 	.no-print * {
 		display: none !important;
 	}
-}
+}

package/tsconfig.json

@@ -26,5 +26,6 @@
 		"jsxFactory": "React.createElement",
 		"jsxFragmentFactory": "React.Fragment"
 	},
-	"include": ["src/**/*", "e2e/**/*"]
+	"include": ["**/*.ts", "**/*.tsx"],
+	"exclude": ["node_modules", "dist"]
 }

package/unocss.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from '@unocss/webpack';
-import { presetUno } from '@unocss/preset-uno';
+import { defineConfig } from '@unocss/vite';
+import { presetMini } from '@unocss/preset-mini';
 
 function pxValueToRem(size: number): string {
 	return `calc(${size}rem / var(--kolibri-root-font-size, 16))`;
@@ -10,152 +10,251 @@ function convertRem(value: number): string {
 }
 
 function convertDynamicClassValueToRem(value: string) {
-	return pxValueToRem(Number.parseFloat(value) * 16 / 4);
+	return pxValueToRem((Number.parseFloat(value) * 16) / 4);
 }
 
 export default defineConfig({
 	rules: [
-		[/^p-(\d+)$/, ([, d]) => ({
-			padding: convertDynamicClassValueToRem(d)
-		})],
-
-		[/^px-(\d+)$/, ([, d]) => ({
-			'padding-left': convertDynamicClassValueToRem(d),
-			'padding-right': convertDynamicClassValueToRem(d)
-		})],
-		[/^py-(\d+)$/, ([, d]) => ({
-			'padding-top': convertDynamicClassValueToRem(d),
-			'padding-bottom': convertDynamicClassValueToRem(d)
-		})],
-
-		[/^ps-(\d+)$/, ([, d]) => ({
-			'padding-inline-start': convertDynamicClassValueToRem(d)
-		})],
-		[/^pe-(\d+)$/, ([, d]) => ({
-			'padding-inline-end': convertDynamicClassValueToRem(d)
-		})],
-
-		[/^pt-(\d+)$/, ([, d]) => ({
-			'padding-top': convertDynamicClassValueToRem(d)
-		})],
-		[/^pl-(\d+)$/, ([, d]) => ({
-			'padding-left': convertDynamicClassValueToRem(d)
-		})],
-		[/^pr-(\d+)$/, ([, d]) => ({
-			'padding-right': convertDynamicClassValueToRem(d)
-		})],
-		[/^pb-(\d+)$/, ([, d]) => ({
-			'padding-bottom': convertDynamicClassValueToRem(d)
-		})],
-
-		[/^p-t-(\d+)$/, ([, d]) => ({
-			'padding-top': convertDynamicClassValueToRem(d)
-		})],
-		[/^p-l-(\d+)$/, ([, d]) => ({
-			'padding-left': convertDynamicClassValueToRem(d)
-		})],
-		[/^p-r-(\d+)$/, ([, d]) => ({
-			'padding-right': convertDynamicClassValueToRem(d)
-		})],
-		[/^p-b-(\d+)$/, ([, d]) => ({
-			'padding-bottom': convertDynamicClassValueToRem(d)
-		})],
-
-		[/^m-(\d+)$/, ([, d]) => ({
-			margin: convertDynamicClassValueToRem(d)
-		})],
-
-		[/^mx-(\d+)$/, ([, d]) => ({
-			'margin-left': convertDynamicClassValueToRem(d),
-			'margin-right': convertDynamicClassValueToRem(d)
-		})],
-		[/^my-(\d+)$/, ([, d]) => ({
-			'margin-top': convertDynamicClassValueToRem(d),
-			'margin-bottom': convertDynamicClassValueToRem(d)
-		})],
-
-		[/^ms-(\d+)$/, ([, d]) => ({
-			'margin-inline-start': convertDynamicClassValueToRem(d)
-		})],
-		[/^me-(\d+)$/, ([, d]) => ({
-			'margin-inline-end': convertDynamicClassValueToRem(d)
-		})],
-
-		[/^mt$/, ([, d]) => ({
-			'margin-top': pxValueToRem(16)
-		})],
-		[/^ml$/, ([, d]) => ({
-			'margin-left': pxValueToRem(16)
-		})],
-		[/^mr$/, ([, d]) => ({
-			'margin-right': pxValueToRem(16)
-		})],
-		[/^mb$/, ([, d]) => ({
-			'margin-bottom': pxValueToRem(16)
-		})],
-
-		[/^mt-(\d+)$/, ([, d]) => ({
-			'margin-top': convertDynamicClassValueToRem(d)
-		})],
-		[/^ml-(\d+)$/, ([, d]) => ({
-			'margin-left': convertDynamicClassValueToRem(d)
-		})],
-		[/^mr-(\d+)$/, ([, d]) => ({
-			'margin-right': convertDynamicClassValueToRem(d)
-		})],
-		[/^mb-(\d+)$/, ([, d]) => ({
-			'margin-bottom': convertDynamicClassValueToRem(d)
-		})],
-
-		[/^m-t-(\d+)$/, ([, d]) => ({
-			'margin-top': convertDynamicClassValueToRem(d)
-		})],
-		[/^m-l-(\d+)$/, ([, d]) => ({
-			'margin-left': convertDynamicClassValueToRem(d)
-		})],
-		[/^m-r-(\d+)$/, ([, d]) => ({
-			'margin-right': convertDynamicClassValueToRem(d)
-		})],
-		[/^m-b-(\d+)$/, ([, d]) => ({
-			'margin-bottom': convertDynamicClassValueToRem(d)
-		})],
-
-		[/^mb-sm$/, ([, d]) => ({
-			'margin-bottom': pxValueToRem(14)
-		})],
+		[
+			/^p-(\d+)$/,
+			([, d]) => ({
+				padding: convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^px-(\d+)$/,
+			([, d]) => ({
+				'padding-left': convertDynamicClassValueToRem(d),
+				'padding-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^py-(\d+)$/,
+			([, d]) => ({
+				'padding-top': convertDynamicClassValueToRem(d),
+				'padding-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^ps-(\d+)$/,
+			([, d]) => ({
+				'padding-inline-start': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^pe-(\d+)$/,
+			([, d]) => ({
+				'padding-inline-end': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^pt-(\d+)$/,
+			([, d]) => ({
+				'padding-top': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^pl-(\d+)$/,
+			([, d]) => ({
+				'padding-left': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^pr-(\d+)$/,
+			([, d]) => ({
+				'padding-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^pb-(\d+)$/,
+			([, d]) => ({
+				'padding-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^p-t-(\d+)$/,
+			([, d]) => ({
+				'padding-top': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^p-l-(\d+)$/,
+			([, d]) => ({
+				'padding-left': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^p-r-(\d+)$/,
+			([, d]) => ({
+				'padding-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^p-b-(\d+)$/,
+			([, d]) => ({
+				'padding-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^m-(\d+)$/,
+			([, d]) => ({
+				margin: convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^mx-(\d+)$/,
+			([, d]) => ({
+				'margin-left': convertDynamicClassValueToRem(d),
+				'margin-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^my-(\d+)$/,
+			([, d]) => ({
+				'margin-top': convertDynamicClassValueToRem(d),
+				'margin-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^ms-(\d+)$/,
+			([, d]) => ({
+				'margin-inline-start': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^me-(\d+)$/,
+			([, d]) => ({
+				'margin-inline-end': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^mt$/,
+			() => ({
+				'margin-top': pxValueToRem(16),
+			}),
+		],
+		[
+			/^ml$/,
+			() => ({
+				'margin-left': pxValueToRem(16),
+			}),
+		],
+		[
+			/^mr$/,
+			() => ({
+				'margin-right': pxValueToRem(16),
+			}),
+		],
+		[
+			/^mb$/,
+			() => ({
+				'margin-bottom': pxValueToRem(16),
+			}),
+		],
+
+		[
+			/^mt-(\d+)$/,
+			([, d]) => ({
+				'margin-top': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^ml-(\d+)$/,
+			([, d]) => ({
+				'margin-left': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^mr-(\d+)$/,
+			([, d]) => ({
+				'margin-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^mb-(\d+)$/,
+			([, d]) => ({
+				'margin-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^m-t-(\d+)$/,
+			([, d]) => ({
+				'margin-top': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^m-l-(\d+)$/,
+			([, d]) => ({
+				'margin-left': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^m-r-(\d+)$/,
+			([, d]) => ({
+				'margin-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^m-b-(\d+)$/,
+			([, d]) => ({
+				'margin-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^mb-sm$/,
+			() => ({
+				'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$/, () => ({
-			width: pxValueToRem(24 * 16) // 24rem
-		})],
+		[
+			/^w-sm$/,
+			() => ({
+				width: pxValueToRem(24 * 16), // 24rem
+			}),
+		],
 	],
 	extendTheme: (theme: any) => {
 		return {
 			...theme,
 			fontSize: {
-				xs: [ convertRem(0.75), '1' ],
-				sm: [ convertRem(0.875), '1.25' ],
-				base: [ convertRem(1), '1.5' ],
-				lg: [ convertRem(1.125), '1.75' ],
-				xl: [ convertRem(1.25), '1.75' ],
-				'2xl': [ convertRem(1.5), '2' ],
-				'3xl': [ convertRem(1.875), '2.25' ],
-				'4xl': [ convertRem(2.25), '2.5' ],
-				'5xl': [ convertRem(3), '1' ],
-				'6xl': [ convertRem(3.75), '1' ],
-				'7xl': [ convertRem(4.5), '1' ],
-				'8xl': [ convertRem(6), '1' ],
-				'9xl': [ convertRem(8), '1' ],
-				'kol-test': ['625%', '1']
-			  },
-			  borderRadius: {
+				xs: [convertRem(0.75), '1'],
+				sm: [convertRem(0.875), '1.25'],
+				base: [convertRem(1), '1.5'],
+				lg: [convertRem(1.125), '1.75'],
+				xl: [convertRem(1.25), '1.75'],
+				'2xl': [convertRem(1.5), '2'],
+				'3xl': [convertRem(1.875), '2.25'],
+				'4xl': [convertRem(2.25), '2.5'],
+				'5xl': [convertRem(3), '1'],
+				'6xl': [convertRem(3.75), '1'],
+				'7xl': [convertRem(4.5), '1'],
+				'8xl': [convertRem(6), '1'],
+				'9xl': [convertRem(8), '1'],
+				'kol-test': ['625%', '1'],
+			},
+			borderRadius: {
 				DEFAULT: convertRem(0.25),
 				none: '0',
 				sm: convertRem(0.125),
@@ -164,9 +263,9 @@ export default defineConfig({
 				xl: convertRem(0.75),
 				'2xl': convertRem(1),
 				'3xl': convertRem(1.5),
-				full: '9999px'
-			  },
-			  containers: {
+				full: '9999px',
+			},
+			containers: {
 				xs: `(min-width: ${convertRem(20)})`,
 				sm: `(min-width: ${convertRem(24)})`,
 				md: `(min-width: ${convertRem(28)})`,
@@ -178,9 +277,9 @@ export default defineConfig({
 				'5xl': `(min-width: ${convertRem(64)})`,
 				'6xl': `(min-width: ${convertRem(72)})`,
 				'7xl': `(min-width: ${convertRem(80)})`,
-				prose: '(min-width: 65ch)'
-			  },
-			  spacing: {
+				prose: '(min-width: 65ch)',
+			},
+			spacing: {
 				DEFAULT: convertRem(1),
 				none: '0',
 				xs: convertRem(0.75),
@@ -194,9 +293,9 @@ export default defineConfig({
 				'6xl': convertRem(3.75),
 				'7xl': convertRem(4.5),
 				'8xl': convertRem(6),
-				'9xl': convertRem(8)
-			  },
-			  textIndent: {
+				'9xl': convertRem(8),
+			},
+			textIndent: {
 				DEFAULT: convertRem(1.5),
 				xs: convertRem(0.5),
 				sm: convertRem(1),
@@ -204,16 +303,16 @@ export default defineConfig({
 				lg: convertRem(2),
 				xl: convertRem(2.5),
 				'2xl': convertRem(3),
-				'3xl': convertRem(4)
-			  },
-			  textStrokeWidth: {
+				'3xl': convertRem(4),
+			},
+			textStrokeWidth: {
 				DEFAULT: convertRem(1.5),
 				none: '0',
 				sm: 'thin',
 				md: 'medium',
-				lg: 'thick'
-			  },
-		}
+				lg: 'thick',
+			},
+		};
 	},
-	presets: [presetUno()],
+	presets: [presetMini()],
 });