@public-ui/mcp 4.0.1-rc.2 → 4.0.2-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -4
- package/shared/sample-index.json +98 -42
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/mcp",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.2-rc.0",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": {
|
|
@@ -46,19 +46,19 @@
|
|
|
46
46
|
"express": "5.2.1",
|
|
47
47
|
"fuse.js": "7.1.0",
|
|
48
48
|
"zod": "3.25.76",
|
|
49
|
-
"@public-ui/components": "4.0.
|
|
49
|
+
"@public-ui/components": "4.0.2-rc.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@modelcontextprotocol/inspector": "0.18.0",
|
|
53
53
|
"@types/express": "5.0.6",
|
|
54
|
-
"@types/node": "24.10.
|
|
54
|
+
"@types/node": "24.10.8",
|
|
55
55
|
"@typescript-eslint/eslint-plugin": "7.18.0",
|
|
56
56
|
"@typescript-eslint/parser": "7.18.0",
|
|
57
57
|
"eslint": "8.57.1",
|
|
58
58
|
"eslint-config-prettier": "9.1.2",
|
|
59
59
|
"eslint-plugin-html": "8.1.3",
|
|
60
60
|
"eslint-plugin-json": "3.1.0",
|
|
61
|
-
"knip": "5.80.
|
|
61
|
+
"knip": "5.80.2",
|
|
62
62
|
"nodemon": "3.1.11",
|
|
63
63
|
"prettier": "3.7.4",
|
|
64
64
|
"prettier-plugin-organize-imports": "4.3.0",
|
package/shared/sample-index.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"metadata": {
|
|
3
|
-
"generatedAt": "2026-01-
|
|
3
|
+
"generatedAt": "2026-01-22T19:02:22.762Z",
|
|
4
4
|
"buildMode": "ci",
|
|
5
5
|
"counts": {
|
|
6
|
-
"total":
|
|
6
|
+
"total": 241,
|
|
7
7
|
"totalDocs": 21,
|
|
8
8
|
"totalSpecs": 51,
|
|
9
|
-
"totalSamples":
|
|
10
|
-
"totalScenarios":
|
|
9
|
+
"totalSamples": 153,
|
|
10
|
+
"totalScenarios": 16
|
|
11
11
|
},
|
|
12
12
|
"repo": {
|
|
13
|
-
"commit": "
|
|
13
|
+
"commit": "ee18a043f88ec11dc2bcfc2b4db91b3dd28d67ac",
|
|
14
14
|
"branch": "develop",
|
|
15
15
|
"repoUrl": "https://github.com/public-ui/kolibri"
|
|
16
16
|
}
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"group": "docs",
|
|
46
46
|
"name": "BREAKING_CHANGES.v4",
|
|
47
47
|
"path": "docs/BREAKING_CHANGES.v4.md",
|
|
48
|
-
"code": "# Breaking Changes for version 4\n\n## Introduction\n\nNew major versions of KoliBri are developed with the goal of simplifying maintenance and support and promoting further development.\n\nFor more information, see the [KoliBri Maintenance and Support Strategy](https://github.com/public-ui/kolibri/blob/develop/MIGRATION.md).\n\n## Loader entry point\n\nImport the component loader from `@public-ui/components/loader`. The previous `@public-ui/components/dist/loader` path is no longer part of the public API surface.\n\n**Before:**\n\n```ts\nimport { defineCustomElements } from '@public-ui/components/dist/loader';\n```\n\n**After:**\n\n```ts\nimport { defineCustomElements } from '@public-ui/components/loader';\n```\n\n## Changed Components\n\n### All components\n\n- The `_id` prop has been removed from components that use Shadow DOM. IDs within a shadow tree are not visible outside, so each component now generates its own stable ID internally and manages all references. For tests or external lookups, set an `id` on the host element instead.\n- The `_msg` prop no longer supports the `_label` and `_variant` options. Messages always render with the `msg` variant and without a label.\n- Input messages only render once the field is marked as `_touched`, regardless of the message type. Ensure `_touched` is set when a message should be displayed.\n- The `kolFocus()` and `kolFocusLink()` methods have been removed in v4. Use the native `focus()` method instead.\n - **Migration note:** Runtime backward compatibility for `kolFocus()` and `kolFocusLink()` is not provided. If your code still calls these helper methods, you must update it (for example, by running the KoliBri migration CLI) to use the native `focus()` method on the relevant element.\n- DOM events emitted by components now use native event names without the `kol` prefix. Listen for `change`, `submit`, `click`, and similar names. All `kol*` event aliases have been removed.\n\n**Complete list of event name changes:**\n\n| Old Event Name | New Event Name |\n| ---------------------- | ------------------- |\n| `kolBlur` | `blur` |\n| `kolChange` | `change` |\n| `kolChangeHeaderCells` | `changeheadercells` |\n| `kolChangePage` | `changepage` |\n| `kolChangePageSize` | `changepagesize` |\n| `kolClick` | `click` |\n| `kolClose` | `close` |\n| `kolCreate` | `create` |\n| `kolFocus` | `focus` |\n| `kolInput` | `input` |\n| `kolKeydown` | `keydown` |\n| `kolMousedown` | `mousedown` |\n| `kolReset` | `reset` |\n| `kolSelect` | `select` |\n| `kolSelectionChange` | `selectionchange` |\n| `kolSort` | `sort` |\n| `kolSubmit` | `submit` |\n| `kolToggle` | `toggle` |\n\n**Before:**\n\n```ts\nelement.addEventListener('kolSubmit', handler);\nelement.dispatchEvent(new CustomEvent('kolChange', { detail: value }));\n```\n\n**After:**\n\n```ts\nelement.addEventListener('submit', handler);\nelement.dispatchEvent(new CustomEvent('change', { detail: value }));\n```\n\n> **W3C Standard Compliance:** All custom event names now follow the W3C naming convention and use lowercase letters only (see [W3C Event Reference](https://developer.mozilla.org/en-US/docs/Web/API/Document/selectionchange_event)). This includes custom events like `changeheadercells`, `changepage`, `changepagesize`, and `selectionchange`. While standard DOM events (like `blur`, `change`, `click`) were already lowercase, our custom composite event names have been updated from camelCase to lowercase for consistency with web standards.\n\n> **TypeScript note:** If you use TypeScript event maps or typed listeners, update any type declarations that still reference the old `kol*` event names. This includes global `HTMLElementEventMap` / `DocumentEventMap` augmentations, custom event map interfaces, and `CustomEvent` type aliases keyed by names like `'kolSubmit'` or `'kolChange'`. Replace those keys with the new native event names (for example, `'submit'`, `'change'`, `'changeheadercells'`, etc.) so your type checks stay in sync with the runtime events.\n\n**Migration examples for custom events:**\n\n```ts\n// Before (v3)\nelement.addEventListener('kolChangeHeaderCells', handler);\nelement.addEventListener('kolChangePage', handler);\nelement.addEventListener('kolSelectionChange', handler);\n\n// After (v4)\nelement.addEventListener('changeheadercells', handler);\nelement.addEventListener('changepage', handler);\nelement.addEventListener('selectionchange', handler);\n```\n\n### kol-combobox & kol-single-select\n\n- `_hideClearButton` has been replaced with `_hasClearButton` (default: `true`). Set `_hasClearButton=\"false\"` to hide the clear button while keeping existing values intact. The migration CLI rewrites `_hide-clear-button` attributes and `_hideClearButton` props automatically, flipping boolean values so behaviour stays the same.\n\n### kol-nav\n\n- The `orientation` property has been removed from kol-nav. It is now always in vertical mode by default.\n\n**Before:**\n\n```html\n<kol-nav _orientation=\"vertical\" _label=\"\" _links=\"[]\"></kol-nav>\n```\n\n**After (v4):**\n\n```html\n<kol-nav _label=\"\" _links=\"[]\"></kol-nav>\n```\n\n### ToasterService and toast component\n\n- The `variant` property has been removed from Toast objects. All toasts now use the `card` variant by default.\n- The `defaultVariant` option has been removed from `ToasterService.getInstance()`. The service no longer accepts variant configuration.\n\n**Before:**\n\n```typescript\n// ToasterService configuration\nconst toaster = ToasterService.getInstance(document, {\n\tdefaultVariant: 'card', // ← removed\n});\n\n// Toast with variant\ntoaster.enqueue({\n\tdescription: 'Message',\n\tlabel: 'Label',\n\ttype: 'info',\n\tvariant: 'card', // ← removed\n});\n```\n\n**After:**\n\n```typescript\n// ToasterService configuration\nconst toaster = ToasterService.getInstance(document);\n\n// Toast without variant (uses card variant automatically)\ntoaster.enqueue({\n\tdescription: 'Message',\n\tlabel: 'Label',\n\ttype: 'info',\n});\n\n### kol-modal → kol-dialog\n\n- The Modal component was renamed to Dialog. Use the new tag `<kol-dialog>` (or the `KolDialog` React wrapper) instead of `<kol-modal>` / `KolModal`.\n- No functional API changes are intended; this is a naming alignment. The migration CLI for v4 rewrites the tag name automatically.\n```\n\n### kol-table-stateless & kol-table-stateful\n\n#### Selection Callbacks\n\nThe `onSelectionChange` callback signatures have been simplified to always return arrays:\n\n**kol-table-stateless** - Always returns `KoliBriTableSelectionKeys` (array of keys):\n\n**Before (v3):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableSelectionKeys | KoliBriTableSelectionKey) => {\n\t// Type guard required\n\tconst keys = Array.isArray(selection) ? selection : [selection];\n\tsetSelectedKeys(keys);\n};\n```\n\n**After (v4):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableSelectionKeys) => {\n\t// Direct usage - always an array\n\tsetSelectedKeys(selection);\n};\n```\n\n**kol-table-stateful** - Always returns `KoliBriTableDataType[] | null` (array of objects or null):\n\n**Before (v3):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | null) => {\n\t// Type guard required for single selection\n\tif (Array.isArray(selection)) {\n\t\tsetSelectedData(selection);\n\t} else if (selection !== null) {\n\t\tsetSelectedData([selection]);\n\t}\n};\n```\n\n**After (v4):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableDataType[] | null) => {\n\t// Direct usage - always an array or null\n\tsetSelectedData(selection || []);\n};\n```\n\n#### Header Cell Width and Label Requirements, \\_minWidth Removal\n\nThe `_minWidth` property has been removed from kol-table components. The table now uses `table-layout: fixed` in CSS. When `width` values are provided on header cells, the sum of all widths determines the table's minimum width.\n\n**Breaking Type Changes:**\n\n- `KoliBriTableCell.width` remains optional, but is now `number | undefined` (pixels only, no string units)\n - When provided, must be a number (e.g., `200` for 200 pixels)\n - When omitted, the column width is determined by CSS (auto-sized by content)\n\n**CSS Behavior Change:**\n\nThe table now uses `table-layout: fixed`, which provides:\n\n- Predictable column widths: Columns with explicit `width` are exactly as wide as specified\n- Better performance: Browser doesn't need to calculate widths based on content\n- Flexible layout: Columns without `width` are auto-sized; the table's minimum width is only the sum of explicitly defined column widths\n\n**Before (v3):**\n\n```typescript\n// _minWidth property on component, table-layout: auto (content-dependent widths)\n<kol-table-stateful _minWidth=\"400px\" _headerCells={headerCells}></kol-table-stateful>\n\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'name', label: 'Name' }, // width optional\n\t\t\t{ key: 'age', label: 'Age', width: '150px' }, // width as string with unit\n\t\t],\n\t],\n\tvertical: [],\n};\n```\n\n**After (v4):**\n\n```typescript\n// _minWidth removed - table uses table-layout: fixed\n<kol-table-stateful _headerCells={headerCells}></kol-table-stateful>\n\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'name', label: 'Name' }, // width optional - column auto-sizes\n\t\t\t{ key: 'age', label: 'Age', width: 150 }, // width as number (pixels)\n\t\t],\n\t],\n\tvertical: [],\n};\n// Table minimum width is 150px (only columns with explicit width are counted)\n```\n\n**Migration:**\n\n- Remove all `_minWidth` properties from table components\n- Convert any `width` string values (e.g., `'150px'`) to numbers (e.g., `150`)\n- The `width` property is optional – omit it if you want the column to auto-size\n- The `label` property is already required\n- With `table-layout: fixed`, columns with explicit widths are exact – plan your widths to accommodate content\n\n#### Multiple Header Rows and Width Calculation\n\nWhen using multiple header rows (e.g., a parent row with merged columns and a child row with individual columns), the table's minimum width is calculated by summing **all** width values from **all** header rows.\n\n**Important:** With multiple header rows, you should specify width on **either** the merged (parent) column **or** the individual (child) columns—not both. If you specify widths on both levels, all widths are summed together, which may result in a wider table than intended.\n\n**Guidelines:**\n\n- **Equal distribution:** Specify only the width of the merged (parent) column. Child columns will distribute the space equally based on their content.\n- **More control:** Specify widths on individual (child) columns instead of the merged column. This gives precise control over each column's width.\n\n**Example 1: Width on merged column only (equal distribution)**\n\n```typescript\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Personal Info', colSpan: 2, width: 300 }, // Merged column with total width\n\t\t],\n\t\t[\n\t\t\t{ key: 'firstName', label: 'First Name' }, // Child column - auto-sizes within parent\n\t\t\t{ key: 'lastName', label: 'Last Name' }, // Child column - auto-sizes within parent\n\t\t],\n\t],\n};\n// Table minimum width: 300px\n```\n\n**Example 2: Width on individual columns only (more control)**\n\n```typescript\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Personal Info', colSpan: 2 }, // Merged column - no width specified\n\t\t],\n\t\t[\n\t\t\t{ key: 'firstName', label: 'First Name', width: 150 }, // Explicit width\n\t\t\t{ key: 'lastName', label: 'Last Name', width: 200 }, // Explicit width\n\t\t],\n\t],\n};\n// Table minimum width: 350px (150 + 200)\n```\n\n**Example 3: Avoid specifying widths on both levels**\n\n```typescript\n// ⚠️ NOT RECOMMENDED - widths are summed from all rows\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Personal Info', colSpan: 2, width: 300 }, // Parent width: 300\n\t\t],\n\t\t[\n\t\t\t{ key: 'firstName', label: 'First Name', width: 150 }, // Child width: 150\n\t\t\t{ key: 'lastName', label: 'Last Name', width: 200 }, // Child width: 200\n\t\t],\n\t],\n};\n// Table minimum width: 650px (300 + 150 + 200) - probably not intended!\n```\n\n### Pagination\n\n- The pagination text (e.g., \"Page 1 of 10\") is now integrated into the Pagination component itself. Previously, this text had to be provided by the application code or was handled by the Stateful Table component.\n- The `_page` property now automatically generates and displays the pagination information text within the component.\n\n**Before (Version 3):**\n\n```typescript\n// Application code had to provide pagination text\n<kol-pagination _page={currentPage} _total={totalPages}></kol-pagination>\n<div>Page {currentPage} of {totalPages}</div>\n\n// Or it was handled by Stateful Table\n<kol-table-stateful></kol-table-stateful>\n```\n\n**After (Version 4):**\n\n```typescript\n// Pagination component handles text internally\n<kol-pagination _page={currentPage} _total={totalPages}></kol-pagination>\n// Text is automatically displayed within the component\n```\n\n#### Settings Menu\n\nThe settings menu is now part of the `_horizontalHeaderCells` prop. The settings for visibility (`visible`), hidability (`hidable`), sortability (`sortable`), and resizability (`resizable`) are now managed directly through the header cell configuration.\n\n**Header Cell Properties:**\n\n- **`label: string`** - Required. The display text for the column header.\n- **`width?: number`** - Optional. Column width in pixels. The sum of all defined widths determines the table's minimum width. Columns without `width` auto-size.\n- **`visible: boolean`** - Controls whether the column is currently displayed in the table. Users can toggle this in the settings menu if `hidable` is true.\n- **`hidable: boolean`** - Determines if the column can be hidden/shown by the user through the settings menu. If false, the visibility cannot be changed by the user (but may still be changed programmatically).\n- **`sortable: boolean`** - Controls whether a sort button appears in the column header. If true, users can click to sort. The current sort direction is indicated by `sortDirection` ('ASC', 'DESC', or 'NOS').\n- **`resizable: boolean`** - Determines if the column width can be adjusted by the user through the settings menu.\n\n**Before:**\n\n```tsx\n// Settings were applied immediately\n<kol-table-stateless\n\t_hasSettingsMenu\n\t_headerCells={headerCells}\n\t_tableSettings={tableSettings}\n\t_on={{\n\t\tonSettingsChange: (event, tableSettings) => {\n\t\t\t// Settings applied immediately\n\t\t\tsetTableSettings(tableSettings);\n\t\t},\n\t}}\n/>\n```\n\n**After:**\n\n```tsx\n// Settings are only applied after clicking \"Apply\"\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tkey: 'firstName',\n\t\t\t\tlabel: 'First Name',\n\t\t\t\twidth: 200, // Optional: width in pixels\n\t\t\t\tvisible: true, // Column is displayed\n\t\t\t\thidable: true, // User can hide this column\n\t\t\t\tsortable: true, // User can sort by this column\n\t\t\t\tresizable: true, // User can resize this column\n\t\t\t\tsortDirection: 'ASC', // Current sort state\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'age',\n\t\t\t\tlabel: 'Age',\n\t\t\t\twidth: 100, // Optional: width in pixels\n\t\t\t\tvisible: true,\n\t\t\t\thidable: false, // This column cannot be hidden by user\n\t\t\t\tsortable: true,\n\t\t\t\tresizable: false, // Fixed width\n\t\t\t},\n\t\t],\n\t],\n\tvertical: [],\n};\n\n<kol-table-stateless\n\t_hasSettingsMenu\n\t_headerCells={headerCells}\n\t_on={{\n\t\tonChangeHeaderCells: (event, headerCells) => {\n\t\t\t// Settings only updated after user confirms in the menu\n\t\t\t// The callback receives the complete header cell structure with both\n\t\t\t// horizontal and vertical cells. Only the horizontal cells may have\n\t\t\t// been modified by the settings menu; vertical cells are preserved unchanged.\n\t\t\tsetHeaderCells(headerCells);\n\t\t},\n\t}}\n/>;\n```\n\n**Behavior:**\n\n- When `_hasSettingsMenu={true}`, a settings button appears in the table header\n- Users can modify column visibility, width, and other properties through the settings dialog\n- Changes are only applied to the table when the user clicks \"Apply\" or \"OK\"\n- The `onChangeHeaderCells` callback receives the updated header cells after confirmation\n- Columns with `hidable={false}` cannot be toggled in the settings menu\n- Columns with `resizable={false}` cannot be resized by the user\n",
|
|
48
|
+
"code": "# Breaking Changes for version 4\n\n## Introduction\n\nNew major versions of KoliBri are developed with the goal of simplifying maintenance and support and promoting further development.\n\nFor more information, see the [KoliBri Maintenance and Support Strategy](https://github.com/public-ui/kolibri/blob/develop/MIGRATION.md).\n\n## KolIcons instead of Codicons\n\nKoliBri now provides its own comprehensive icon set called **KolIcons**, replacing the previous dependency on Microsoft's Codicons. This change provides better control over iconography, improved consistency across the component library, and reduced external dependencies.\n\n### Asset Loading\n\nIn HTML documents, load the KolIcons stylesheet instead of Codicons:\n\n**Before (v3):**\n\n```html\n<link rel=\"stylesheet\" href=\"/assets/codicons/codicon.css\" />\n```\n\n**After (v4):**\n\n```html\n<link rel=\"stylesheet\" href=\"/assets/kolicons/style.css\" />\n```\n\n### Using Codicons Alongside KolIcons (Optional)\n\nIf your application still uses Codicons, you can include both stylesheets. However, this is **optional** and most projects can migrate fully to KolIcons:\n\n```html\n<link rel=\"stylesheet\" href=\"/assets/kolicons/style.css\" />\n<!-- Only if you still use Codicons elsewhere in your app -->\n<link rel=\"stylesheet\" href=\"/assets/codicons/codicon.css\" />\n```\n\n### CSS Import\n\nIn modern bundlers (webpack, Vite, etc.), import KolIcons in your main entry point:\n\n**Before (v3):**\n\n```ts\nimport '@public-ui/components/assets/codicons/codicon.css';\n```\n\n**After (v4):**\n\n```ts\nimport '@public-ui/components/assets/kolicons/style.css';\n```\n\n### Icon Class Names\n\nUpdate all icon references in your code from `codicon` to `kolicon`. For example:\n\n**Before (v3):**\n\n```tsx\n<KolButton _label=\"Save\" _icons=\"codicon codicon-save\" />\n<KolIcon _icon=\"codicon codicon-check\" />\n```\n\n**After (v4):**\n\n```tsx\n<KolButton _label=\"Save\" _icons=\"kolicon kolicon-save\" />\n<KolIcon _icon=\"kolicon kolicon-check\" />\n```\n\nSee the [KolIcons documentation](https://develop--kolibri-public-ui.netlify.app/#/icon/all-kolicons) for the complete list of available icon names.\n\n### Font Files\n\nThe font file is now located at:\n\n```\nnode_modules/@public-ui/components/assets/kolicons/kolicons.ttf\n```\n\nIf you're manually copying assets to a public folder for custom builds:\n\n```bash\ncp node_modules/@public-ui/components/assets/kolicons/style.css dist/assets/kolicons/\ncp node_modules/@public-ui/components/assets/kolicons/kolicons.ttf dist/assets/kolicons/\n```\n\n## Loader entry point\n\nImport the component loader from `@public-ui/components/loader`. The previous `@public-ui/components/dist/loader` path is no longer part of the public API surface.\n\n**Before:**\n\n```ts\nimport { defineCustomElements } from '@public-ui/components/dist/loader';\n```\n\n**After:**\n\n```ts\nimport { defineCustomElements } from '@public-ui/components/loader';\n```\n\n## Changed Components\n\n### All components\n\n- The `_id` prop has been removed from components that use Shadow DOM. IDs within a shadow tree are not visible outside, so each component now generates its own stable ID internally and manages all references. For tests or external lookups, set an `id` on the host element instead.\n- The `_msg` prop no longer supports the `_label` and `_variant` options. Messages always render with the `msg` variant and without a label.\n- Input messages only render once the field is marked as `_touched`, regardless of the message type. Ensure `_touched` is set when a message should be displayed.\n- The `kolFocus()` and `kolFocusLink()` methods have been removed in v4. Use the native `focus()` method instead.\n - **Migration note:** Runtime backward compatibility for `kolFocus()` and `kolFocusLink()` is not provided. If your code still calls these helper methods, you must update it (for example, by running the KoliBri migration CLI) to use the native `focus()` method on the relevant element.\n- DOM events emitted by components now use native event names without the `kol` prefix. Listen for `change`, `submit`, `click`, and similar names. All `kol*` event aliases have been removed.\n\n**Complete list of event name changes:**\n\n| Old Event Name | New Event Name |\n| ---------------------- | ------------------- |\n| `kolBlur` | `blur` |\n| `kolChange` | `change` |\n| `kolChangeHeaderCells` | `changeheadercells` |\n| `kolChangePage` | `changepage` |\n| `kolChangePageSize` | `changepagesize` |\n| `kolClick` | `click` |\n| `kolClose` | `close` |\n| `kolCreate` | `create` |\n| `kolFocus` | `focus` |\n| `kolInput` | `input` |\n| `kolKeydown` | `keydown` |\n| `kolMousedown` | `mousedown` |\n| `kolReset` | `reset` |\n| `kolSelect` | `select` |\n| `kolSelectionChange` | `selectionchange` |\n| `kolSort` | `sort` |\n| `kolSubmit` | `submit` |\n| `kolToggle` | `toggle` |\n\n**Before:**\n\n```ts\nelement.addEventListener('kolSubmit', handler);\nelement.dispatchEvent(new CustomEvent('kolChange', { detail: value }));\n```\n\n**After:**\n\n```ts\nelement.addEventListener('submit', handler);\nelement.dispatchEvent(new CustomEvent('change', { detail: value }));\n```\n\n> **W3C Standard Compliance:** All custom event names now follow the W3C naming convention and use lowercase letters only (see [W3C Event Reference](https://developer.mozilla.org/en-US/docs/Web/API/Document/selectionchange_event)). This includes custom events like `changeheadercells`, `changepage`, `changepagesize`, and `selectionchange`. While standard DOM events (like `blur`, `change`, `click`) were already lowercase, our custom composite event names have been updated from camelCase to lowercase for consistency with web standards.\n\n> **TypeScript note:** If you use TypeScript event maps or typed listeners, update any type declarations that still reference the old `kol*` event names. This includes global `HTMLElementEventMap` / `DocumentEventMap` augmentations, custom event map interfaces, and `CustomEvent` type aliases keyed by names like `'kolSubmit'` or `'kolChange'`. Replace those keys with the new native event names (for example, `'submit'`, `'change'`, `'changeheadercells'`, etc.) so your type checks stay in sync with the runtime events.\n\n**Migration examples for custom events:**\n\n```ts\n// Before (v3)\nelement.addEventListener('kolChangeHeaderCells', handler);\nelement.addEventListener('kolChangePage', handler);\nelement.addEventListener('kolSelectionChange', handler);\n\n// After (v4)\nelement.addEventListener('changeheadercells', handler);\nelement.addEventListener('changepage', handler);\nelement.addEventListener('selectionchange', handler);\n```\n\n### kol-combobox & kol-single-select\n\n- `_hideClearButton` has been replaced with `_hasClearButton` (default: `true`). Set `_hasClearButton=\"false\"` to hide the clear button while keeping existing values intact. The migration CLI rewrites `_hide-clear-button` attributes and `_hideClearButton` props automatically, flipping boolean values so behaviour stays the same.\n\n### kol-nav\n\n- The `orientation` property has been removed from kol-nav. It is now always in vertical mode by default.\n\n**Before:**\n\n```html\n<kol-nav _orientation=\"vertical\" _label=\"\" _links=\"[]\"></kol-nav>\n```\n\n**After (v4):**\n\n```html\n<kol-nav _label=\"\" _links=\"[]\"></kol-nav>\n```\n\n### ToasterService and toast component\n\n- The `variant` property has been removed from Toast objects. All toasts now use the `card` variant by default.\n- The `defaultVariant` option has been removed from `ToasterService.getInstance()`. The service no longer accepts variant configuration.\n\n**Before:**\n\n```typescript\n// ToasterService configuration\nconst toaster = ToasterService.getInstance(document, {\n\tdefaultVariant: 'card', // ← removed\n});\n\n// Toast with variant\ntoaster.enqueue({\n\tdescription: 'Message',\n\tlabel: 'Label',\n\ttype: 'info',\n\tvariant: 'card', // ← removed\n});\n```\n\n**After:**\n\n```typescript\n// ToasterService configuration\nconst toaster = ToasterService.getInstance(document);\n\n// Toast without variant (uses card variant automatically)\ntoaster.enqueue({\n\tdescription: 'Message',\n\tlabel: 'Label',\n\ttype: 'info',\n});\n\n### kol-modal → kol-dialog\n\n- The Modal component was renamed to Dialog. Use the new tag `<kol-dialog>` (or the `KolDialog` React wrapper) instead of `<kol-modal>` / `KolModal`.\n- No functional API changes are intended; this is a naming alignment. The migration CLI for v4 rewrites the tag name automatically.\n```\n\n### kol-table-stateless & kol-table-stateful\n\n#### Selection Callbacks\n\nThe `onSelectionChange` callback signatures have been simplified to always return arrays:\n\n**kol-table-stateless** - Always returns `KoliBriTableSelectionKeys` (array of keys):\n\n**Before (v3):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableSelectionKeys | KoliBriTableSelectionKey) => {\n\t// Type guard required\n\tconst keys = Array.isArray(selection) ? selection : [selection];\n\tsetSelectedKeys(keys);\n};\n```\n\n**After (v4):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableSelectionKeys) => {\n\t// Direct usage - always an array\n\tsetSelectedKeys(selection);\n};\n```\n\n**kol-table-stateful** - Always returns `KoliBriTableDataType[] | null` (array of objects or null):\n\n**Before (v3):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | null) => {\n\t// Type guard required for single selection\n\tif (Array.isArray(selection)) {\n\t\tsetSelectedData(selection);\n\t} else if (selection !== null) {\n\t\tsetSelectedData([selection]);\n\t}\n};\n```\n\n**After (v4):**\n\n```typescript\nonSelectionChange: (_event: Event, selection: KoliBriTableDataType[] | null) => {\n\t// Direct usage - always an array or null\n\tsetSelectedData(selection || []);\n};\n```\n\n#### Header Cell Width and Label Requirements, \\_minWidth Removal\n\nThe `_minWidth` property has been removed from kol-table components. The table now uses `table-layout: fixed` in CSS. When `width` values are provided on header cells, the sum of all widths determines the table's minimum width.\n\n**Breaking Type Changes:**\n\n- `KoliBriTableCell.width` remains optional, but is now `number | undefined` (pixels only, no string units)\n - When provided, must be a number (e.g., `200` for 200 pixels)\n - When omitted, the column width is determined by CSS (auto-sized by content)\n\n**CSS Behavior Change:**\n\nThe table now uses `table-layout: fixed`, which provides:\n\n- Predictable column widths: Columns with explicit `width` are exactly as wide as specified\n- Better performance: Browser doesn't need to calculate widths based on content\n- Flexible layout: Columns without `width` are auto-sized; the table's minimum width is only the sum of explicitly defined column widths\n\n**Before (v3):**\n\n```typescript\n// _minWidth property on component, table-layout: auto (content-dependent widths)\n<kol-table-stateful _minWidth=\"400px\" _headerCells={headerCells}></kol-table-stateful>\n\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'name', label: 'Name' }, // width optional\n\t\t\t{ key: 'age', label: 'Age', width: '150px' }, // width as string with unit\n\t\t],\n\t],\n\tvertical: [],\n};\n```\n\n**After (v4):**\n\n```typescript\n// _minWidth removed - table uses table-layout: fixed\n<kol-table-stateful _headerCells={headerCells}></kol-table-stateful>\n\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'name', label: 'Name' }, // width optional - column auto-sizes\n\t\t\t{ key: 'age', label: 'Age', width: 150 }, // width as number (pixels)\n\t\t],\n\t],\n\tvertical: [],\n};\n// Table minimum width is 150px (only columns with explicit width are counted)\n```\n\n**Migration:**\n\n- Remove all `_minWidth` properties from table components\n- Convert any `width` string values (e.g., `'150px'`) to numbers (e.g., `150`)\n- The `width` property is optional – omit it if you want the column to auto-size\n- The `label` property is already required\n- With `table-layout: fixed`, columns with explicit widths are exact – plan your widths to accommodate content\n\n#### Multiple Header Rows and Width Calculation\n\nWhen using multiple header rows (e.g., a parent row with merged columns and a child row with individual columns), the table's minimum width is calculated by summing **all** width values from **all** header rows.\n\n**Important:** With multiple header rows, you should specify width on **either** the merged (parent) column **or** the individual (child) columns—not both. If you specify widths on both levels, all widths are summed together, which may result in a wider table than intended.\n\n**Guidelines:**\n\n- **Equal distribution:** Specify only the width of the merged (parent) column. Child columns will distribute the space equally based on their content.\n- **More control:** Specify widths on individual (child) columns instead of the merged column. This gives precise control over each column's width.\n\n**Example 1: Width on merged column only (equal distribution)**\n\n```typescript\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Personal Info', colSpan: 2, width: 300 }, // Merged column with total width\n\t\t],\n\t\t[\n\t\t\t{ key: 'firstName', label: 'First Name' }, // Child column - auto-sizes within parent\n\t\t\t{ key: 'lastName', label: 'Last Name' }, // Child column - auto-sizes within parent\n\t\t],\n\t],\n};\n// Table minimum width: 300px\n```\n\n**Example 2: Width on individual columns only (more control)**\n\n```typescript\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Personal Info', colSpan: 2 }, // Merged column - no width specified\n\t\t],\n\t\t[\n\t\t\t{ key: 'firstName', label: 'First Name', width: 150 }, // Explicit width\n\t\t\t{ key: 'lastName', label: 'Last Name', width: 200 }, // Explicit width\n\t\t],\n\t],\n};\n// Table minimum width: 350px (150 + 200)\n```\n\n**Example 3: Avoid specifying widths on both levels**\n\n```typescript\n// ⚠️ NOT RECOMMENDED - widths are summed from all rows\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Personal Info', colSpan: 2, width: 300 }, // Parent width: 300\n\t\t],\n\t\t[\n\t\t\t{ key: 'firstName', label: 'First Name', width: 150 }, // Child width: 150\n\t\t\t{ key: 'lastName', label: 'Last Name', width: 200 }, // Child width: 200\n\t\t],\n\t],\n};\n// Table minimum width: 650px (300 + 150 + 200) - probably not intended!\n```\n\n### Pagination\n\n- The pagination text (e.g., \"Page 1 of 10\") is now integrated into the Pagination component itself. Previously, this text had to be provided by the application code or was handled by the Stateful Table component.\n- The `_page` property now automatically generates and displays the pagination information text within the component.\n\n**Before (Version 3):**\n\n```typescript\n// Application code had to provide pagination text\n<kol-pagination _page={currentPage} _total={totalPages}></kol-pagination>\n<div>Page {currentPage} of {totalPages}</div>\n\n// Or it was handled by Stateful Table\n<kol-table-stateful></kol-table-stateful>\n```\n\n**After (Version 4):**\n\n```typescript\n// Pagination component handles text internally\n<kol-pagination _page={currentPage} _total={totalPages}></kol-pagination>\n// Text is automatically displayed within the component\n```\n\n#### Settings Menu\n\nThe settings menu is now part of the `_horizontalHeaderCells` prop. The settings for visibility (`visible`), hidability (`hidable`), sortability (`sortable`), and resizability (`resizable`) are now managed directly through the header cell configuration.\n\n**Header Cell Properties:**\n\n- **`label: string`** - Required. The display text for the column header.\n- **`width?: number`** - Optional. Column width in pixels. The sum of all defined widths determines the table's minimum width. Columns without `width` auto-size.\n- **`visible: boolean`** - Controls whether the column is currently displayed in the table. Users can toggle this in the settings menu if `hidable` is true.\n- **`hidable: boolean`** - Determines if the column can be hidden/shown by the user through the settings menu. If false, the visibility cannot be changed by the user (but may still be changed programmatically).\n- **`sortable: boolean`** - Controls whether a sort button appears in the column header. If true, users can click to sort. The current sort direction is indicated by `sortDirection` ('ASC', 'DESC', or 'NOS').\n- **`resizable: boolean`** - Determines if the column width can be adjusted by the user through the settings menu.\n\n**Before:**\n\n```tsx\n// Settings were applied immediately\n<kol-table-stateless\n\t_hasSettingsMenu\n\t_headerCells={headerCells}\n\t_tableSettings={tableSettings}\n\t_on={{\n\t\tonSettingsChange: (event, tableSettings) => {\n\t\t\t// Settings applied immediately\n\t\t\tsetTableSettings(tableSettings);\n\t\t},\n\t}}\n/>\n```\n\n**After:**\n\n```tsx\n// Settings are only applied after clicking \"Apply\"\nconst headerCells = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tkey: 'firstName',\n\t\t\t\tlabel: 'First Name',\n\t\t\t\twidth: 200, // Optional: width in pixels\n\t\t\t\tvisible: true, // Column is displayed\n\t\t\t\thidable: true, // User can hide this column\n\t\t\t\tsortable: true, // User can sort by this column\n\t\t\t\tresizable: true, // User can resize this column\n\t\t\t\tsortDirection: 'ASC', // Current sort state\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'age',\n\t\t\t\tlabel: 'Age',\n\t\t\t\twidth: 100, // Optional: width in pixels\n\t\t\t\tvisible: true,\n\t\t\t\thidable: false, // This column cannot be hidden by user\n\t\t\t\tsortable: true,\n\t\t\t\tresizable: false, // Fixed width\n\t\t\t},\n\t\t],\n\t],\n\tvertical: [],\n};\n\n<kol-table-stateless\n\t_hasSettingsMenu\n\t_headerCells={headerCells}\n\t_on={{\n\t\tonChangeHeaderCells: (event, headerCells) => {\n\t\t\t// Settings only updated after user confirms in the menu\n\t\t\t// The callback receives the complete header cell structure with both\n\t\t\t// horizontal and vertical cells. Only the horizontal cells may have\n\t\t\t// been modified by the settings menu; vertical cells are preserved unchanged.\n\t\t\tsetHeaderCells(headerCells);\n\t\t},\n\t}}\n/>;\n```\n\n**Behavior:**\n\n- When `_hasSettingsMenu={true}`, a settings button appears in the table header\n- Users can modify column visibility, width, and other properties through the settings dialog\n- Changes are only applied to the table when the user clicks \"Apply\" or \"OK\"\n- The `onChangeHeaderCells` callback receives the updated header cells after confirmation\n- Columns with `hidable={false}` cannot be toggled in the settings menu\n- Columns with `resizable={false}` cannot be resized by the user\n",
|
|
49
49
|
"kind": "doc"
|
|
50
50
|
},
|
|
51
51
|
{
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"group": "docs",
|
|
78
78
|
"name": "CONTRIBUTING",
|
|
79
79
|
"path": "CONTRIBUTING.md",
|
|
80
|
-
"code": "# Contributing\n\nWe would love for you to contribute to **KoliBri**and help make it even better than it is today! As a contributor, we ask that you follow the following guidelines:\n\n- [Contributing](#contributing)\n - [Code of Conduct](#code-of-conduct)\n - [Questions and problems](#questions-and-problems)\n - [Report an error](#report-an-error)\n - [Further development](#further-development)\n - [Git flow](#git-flow)\n - [Developing](#developing)\n - [Develop new component](#develop-new-component)\n - [Switching between branches](#switching-between-branches)\n - [Back porting to older Major-Versions](#back-porting-to-older-major-versions)\n - [Snapshot Testing for Visual Changes](#snapshot-testing-for-visual-changes)\n - [How to Update Snapshots](#how-to-update-snapshots)\n\n## Code of Conduct\n\nHelp us keep **KoliBri** open and inclusive. Please read and follow our [Code of Conduct](CODE_OF_CONDUCT.md).\n\n## Questions and problems\n\nPlease do not create issue tickets for general support questions. We want to use the ticket system for tracking bug reports and feature requests.\n\nInstead, we recommend first checking [Stack Overflow](https://stackoverflow.com/questions/tagged/kolibri) to see whether someone else has already solved the question or problem. You can also create new questions with the tag “hummingbird”.\nTo save your time and ours, we will close all general questions in the ticket system and redirect those asking to Stack Overflow.\n\nIf you would like to contact us, please send us an email to [kolibri@itzbund.de](mailto:kolibri@itzbund.de).\n\n## Report an error\n\nIf you find an error in the source code, you can report it to our ticket system.\n\nIt would be even better if you suggested a solution to us as a pull request.\n\n## Further development\n\nYou can request new features by submitting an issue to our ticket system. If you would like to implement a new function, please note the following steps for further action:\n\n- It is helpful to read the KoliBri [architecture concept](https://public-ui.github.io/docs/concepts/architecture) before implementing.\n- For major innovations, please create a ticket with the description of the new function.\n- For small innovations, you can offer and justify the implementation directly as a pull request.\n\n### Git flow\n\nWe work according to the Git flow: https://medium.com/android-news/gitflow-with-github-c675aa4f606a\n\n### Developing\n\n1. For contributing, you need a [GitHub account](https://github.com/login)\n2. Fork [our repository](https://github.com/public-ui/kolibri) on GitHub\n3. Open your preferred command line interface\n4. Clone the forked repository via HTTPS to your local machine. The VS Code GitHub extension can handle authentication.\n5. Navigate the project root directory\n6. Create a new branch for your changes\n7. Install Node.js version 22\n8. [Install PNPM](https://pnpm.io/installation) on you local machine\n9. Install all packages with `pnpm i`\n10. Build all packages within the mono repository `pnpm -r build`\n11. Navigate to the desired package in our monorepo\n12. When you want to start the project navigate to `packages/components/` and run `pnpm dev`\n13. To watch for changes navigate to `packages/samples/react/` and execute `pnpm start`. `http://localhost:8080/` will open automatically\n\n### VS Code Setup\n\nWe recommend using [Visual Studio Code](https://code.visualstudio.com/):\n\n- Install the Prettier and ESLint extensions.\n- Enable \"Format on Save\" in your settings.\n\n### Tests\n\nAll tests run via GitHub Actions when you open a pull request. Monitor them under the **Actions** tab.\n\n### Develop new component\n\nRefer to [new component](docs/tutorials/NEW_COMPONENT.md) tutorial.\n\n### Switching between branches\n\nWhen changing the current working branch, it is important to reinstall all dependencies, as these may have changed. It is very important that all packages are built when working on dependents. This is because the packages always use the built state of the referenced packages in the mono repo.\nTo avoid unexpected problems, it is therefore always advisable to build all packages once. This can be done with these steps:\n\n- Reinstall all dependencies: `pnpm i`\n- Build all packages: `pnpm -r build`\n- You can then switch to the package to be processed and start it with `pnpm start`.\n\nIf it is also necessary to edit dependent packages such as `@public-ui/components`, these must be rebuilt for each change. Such packages offer the `dev` script for this purpose. This automatically rebuilds the package after each change.\n\n### Back porting to older Major-Versions\n\nBy default, development is carried out in the `development` branch for the following version. However, if it becomes necessary to provide an issue for an older major release, such as version 1.x.x, the code change must also be merged into the corresponding release branch. In this case, it would be the `release/1` branch. It is important that the branch that was created from the `develop` is not merged into the release branch, as otherwise the next patch version will receive all the changes from the current development status.\nThe simplest procedure is therefore to create a new branch from the release branch (e.g. `release/1`) and transfer the individual commits of the feature branch from the `develop` to the new branch using cherry-picking. This branch can then be merged into the release branch as normal with a new pull request.\n\n### Snapshot Testing for Visual Changes\n\nThe Continuous Integration (CI) pipeline incorporates automated visual regression testing using the React sample app across all available themes.\n\nWhen introducing visual modifications to components, themes, or the React sample app, initial test failures are expected. To address this, the\n`update-snapshots.yml` action on GitHub should be executed, followed by a **careful review** of the changes.\n\n#### How to Update Snapshots\n\nThe following methods can be used to update the snapshots.\n\n1. **GitHub website:** Update the snapshots directly on the GitHub website by following these steps.\n\n- Navigate to the `Actions` tab in the `kolibri` repository.\n- Execute the `03 - Update Snapshots` action.\n- Select the desired branch in which you want to update the snapshots.\n- The workflow checks out the branch, updates all snapshot files, and commits the changes to that branch.\n\n2. **Terminal Command:** Use the [GitHub CLI (gh)](https://cli.github.com/) to run the `update-snapshots.yml` action from the local terminal. This method is recommended for updating snapshots on the current branch without navigating to the GitHub website. For terminal convenience, the [GitHub CLI (gh)](https://cli.github.com/) needs to be installed.\n\n- Run the following command within the project directory to update the snapshots in your checked-out branch:\n ```bash\n gh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD`\n ```\n- If your want to delete all snapshots before regenerating them add `-f purge_snapshots=true` to the command:\n ```bash\n gh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD` -f purge_snapshots=true\n ```\n- You can also run the action on a different branch by specifying the another target branch with the `-r <branch_name>` flag. For example, to update snapshots on the `main` branch:\n ```bash\n gh workflow run update-snapshots.yml -r main\n ```\n\nThese steps ensure that visual snapshots are updated systematically, maintaining the integrity of the testing process.\n",
|
|
80
|
+
"code": "# Contributing\n\nWe would love for you to contribute to **KoliBri**and help make it even better than it is today! As a contributor, we ask that you follow the following guidelines:\n\n- [Contributing](#contributing)\n - [Code of Conduct](#code-of-conduct)\n - [Questions and problems](#questions-and-problems)\n - [Report an error](#report-an-error)\n - [Further development](#further-development)\n - [Git flow](#git-flow)\n - [Developing](#developing)\n - [Develop new component](#develop-new-component)\n - [Switching between branches](#switching-between-branches)\n - [Back porting to older Major-Versions](#back-porting-to-older-major-versions)\n - [Snapshot Testing for Visual Changes](#snapshot-testing-for-visual-changes)\n - [How to Update Snapshots](#how-to-update-snapshots)\n\n## Code of Conduct\n\nHelp us keep **KoliBri** open and inclusive. Please read and follow our [Code of Conduct](CODE_OF_CONDUCT.md).\n\n## Questions and problems\n\nPlease do not create issue tickets for general support questions. We want to use the ticket system for tracking bug reports and feature requests.\n\nInstead, we recommend first checking [Stack Overflow](https://stackoverflow.com/questions/tagged/kolibri) to see whether someone else has already solved the question or problem. You can also create new questions with the tag “hummingbird”.\nTo save your time and ours, we will close all general questions in the ticket system and redirect those asking to Stack Overflow.\n\nIf you would like to contact us, please send us an email to [kolibri@itzbund.de](mailto:kolibri@itzbund.de).\n\n## Report an error\n\nIf you find an error in the source code, you can report it to our ticket system.\n\nIt would be even better if you suggested a solution to us as a pull request.\n\n## Further development\n\nYou can request new features by submitting an issue to our ticket system. If you would like to implement a new function, please note the following steps for further action:\n\n- It is helpful to read the KoliBri [architecture concept](https://public-ui.github.io/docs/concepts/architecture) before implementing.\n- For major innovations, please create a ticket with the description of the new function.\n- For small innovations, you can offer and justify the implementation directly as a pull request.\n\n### Git flow\n\nWe work according to the Git flow: https://medium.com/android-news/gitflow-with-github-c675aa4f606a\n\n### Developing\n\n1. For contributing, you need a [GitHub account](https://github.com/login)\n2. Fork [our repository](https://github.com/public-ui/kolibri) on GitHub\n3. Open your preferred command line interface\n4. Clone the forked repository via HTTPS to your local machine. The VS Code GitHub extension can handle authentication.\n5. Navigate the project root directory\n6. Create a new branch for your changes\n7. Install Node.js version 22\n8. [Install PNPM](https://pnpm.io/installation) on you local machine\n9. Install all packages with `pnpm i`\n10. Build all packages within the mono repository `pnpm -r build`\n11. Navigate to the desired package in our monorepo\n12. When you want to start the project navigate to `packages/components/` and run `pnpm dev`\n13. To watch for changes navigate to `packages/samples/react/` and execute `pnpm start`. `http://localhost:8080/` will open automatically\n\nRun ESLint across the repository with `pnpm lint` (or `pnpm lint:eslint` to invoke ESLint directly); the configuration lives in `packages/*/eslint.config.cjs`. Formatting is handled by Prettier via `pnpm format`, so run format first to keep ESLint focused on code-quality rules rather than style drift.\n\n### VS Code Setup\n\nWe recommend using [Visual Studio Code](https://code.visualstudio.com/):\n\n- Install the Prettier and ESLint extensions.\n- Enable \"Format on Save\" in your settings.\n\n### Tests\n\nAll tests run via GitHub Actions when you open a pull request. Monitor them under the **Actions** tab.\n\n### Develop new component\n\nRefer to [new component](docs/tutorials/NEW_COMPONENT.md) tutorial.\n\n### Switching between branches\n\nWhen changing the current working branch, it is important to reinstall all dependencies, as these may have changed. It is very important that all packages are built when working on dependents. This is because the packages always use the built state of the referenced packages in the mono repo.\nTo avoid unexpected problems, it is therefore always advisable to build all packages once. This can be done with these steps:\n\n- Reinstall all dependencies: `pnpm i`\n- Build all packages: `pnpm -r build`\n- You can then switch to the package to be processed and start it with `pnpm start`.\n\nIf it is also necessary to edit dependent packages such as `@public-ui/components`, these must be rebuilt for each change. Such packages offer the `dev` script for this purpose. This automatically rebuilds the package after each change.\n\n### Back porting to older Major-Versions\n\nBy default, development is carried out in the `development` branch for the following version. However, if it becomes necessary to provide an issue for an older major release, such as version 1.x.x, the code change must also be merged into the corresponding release branch. In this case, it would be the `release/1` branch. It is important that the branch that was created from the `develop` is not merged into the release branch, as otherwise the next patch version will receive all the changes from the current development status.\nThe simplest procedure is therefore to create a new branch from the release branch (e.g. `release/1`) and transfer the individual commits of the feature branch from the `develop` to the new branch using cherry-picking. This branch can then be merged into the release branch as normal with a new pull request.\n\n### Snapshot Testing for Visual Changes\n\nThe Continuous Integration (CI) pipeline incorporates automated visual regression testing using the React sample app across all available themes.\n\nWhen introducing visual modifications to components, themes, or the React sample app, initial test failures are expected. To address this, the\n`update-snapshots.yml` action on GitHub should be executed, followed by a **careful review** of the changes.\n\n#### How to Update Snapshots\n\nThe following methods can be used to update the snapshots.\n\n1. **GitHub website:** Update the snapshots directly on the GitHub website by following these steps.\n\n- Navigate to the `Actions` tab in the `kolibri` repository.\n- Execute the `03 - Update Snapshots` action.\n- Select the desired branch in which you want to update the snapshots.\n- The workflow checks out the branch, updates all snapshot files, and commits the changes to that branch.\n\n2. **Terminal Command:** Use the [GitHub CLI (gh)](https://cli.github.com/) to run the `update-snapshots.yml` action from the local terminal. This method is recommended for updating snapshots on the current branch without navigating to the GitHub website. For terminal convenience, the [GitHub CLI (gh)](https://cli.github.com/) needs to be installed.\n\n- Run the following command within the project directory to update the snapshots in your checked-out branch:\n ```bash\n gh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD`\n ```\n- If your want to delete all snapshots before regenerating them add `-f purge_snapshots=true` to the command:\n ```bash\n gh workflow run update-snapshots.yml -r `git rev-parse --abbrev-ref HEAD` -f purge_snapshots=true\n ```\n- You can also run the action on a different branch by specifying the another target branch with the `-r <branch_name>` flag. For example, to update snapshots on the `main` branch:\n ```bash\n gh workflow run update-snapshots.yml -r main\n ```\n\nThese steps ensure that visual snapshots are updated systematically, maintaining the integrity of the testing process.\n",
|
|
81
81
|
"kind": "doc"
|
|
82
82
|
},
|
|
83
83
|
{
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
"group": "docs",
|
|
94
94
|
"name": "HOWTO_ICON_FONTS",
|
|
95
95
|
"path": "docs/HOWTO_ICON_FONTS.md",
|
|
96
|
-
"code": "# HOWTO: Bundle KoliBri Icon Fonts\n\nKoliBri ships the [`kol-icon`](https://public-ui.github.io/components/icon/) component to render pictograms.
|
|
96
|
+
"code": "# HOWTO: Bundle KoliBri Icon Fonts\n\nKoliBri ships the [`kol-icon`](https://public-ui.github.io/components/icon/) component to render pictograms. Starting with **v4**, KoliBri includes its own font-based icon set called **KolIcons**. Previously, this relied on [Codicon](https://github.com/microsoft/vscode-codicons).\n\nThis guide shows how to install and bundle the KolIcons font assets that are published with `@public-ui/components`.\n\n> **Migration from v3 to v4:** If you're upgrading from v3, see [BREAKING_CHANGES.v4.md](./BREAKING_CHANGES.v4.md#kolicons-instead-of-codicons) for migration details.\n\n## 1. Install the assets\n\nThe KolIcons font files are part of the KoliBri component package. Ensure your project depends on it:\n\n```bash\npnpm add @public-ui/components\n# or\nnpm install @public-ui/components\n```\n\nAfter installation, the font files live inside `node_modules/@public-ui/components/assets/kolicons/`.\n\n## 2. Import the CSS in your application\n\nThe CSS file declares the `kolicon` font-face and points to the matching `kolicons.ttf` file. Import it once inside your application entry point or global stylesheet:\n\n```ts\n// main.ts / index.tsx\nimport '@public-ui/components/assets/kolicons/style.css';\n```\n\nFor bundlers that do not understand CSS imports, copy `style.css` and `kolicons.ttf` into your public assets folder and load them manually in `index.html`:\n\n```html\n<link rel=\"stylesheet\" href=\"/assets/kolicons/style.css\" />\n```\n\nMake sure the relative path inside `style.css` still points to the TTF file after copying.\n\n## 3. Reference the icons from components\n\nUse KolIcon class names via the `_icons` property. Multiple icons can be provided by separating classes with a space:\n\n```tsx\n<KolButton _label=\"Save\" _icons=\"kolicon kolicon-save\" />\n<KolIcon _icon=\"kolicon kolicon-check\" />\n```\n\nThe first class (`kolicon`) ensures the font family is applied, the second selects the glyph.\n\n### Available Icon Names\n\nView the complete list of available KolIcons in the [KolIcons directory](https://github.com/public-ui/kolibri/tree/develop/packages/components/src/assets/kolicons). Icon names follow the pattern `kolicon-{name}`.\n\n## 4. Serve the font file\n\nVerify that your build pipeline copies `kolicons.ttf` into the final distribution folder. Frameworks such as Next.js, Vite, and Angular CLI automatically include imported assets when the CSS file is referenced. For custom setups, add a build step that copies the font file alongside your compiled assets:\n\n```bash\ncp node_modules/@public-ui/components/assets/kolicons/kolicons.ttf dist/assets/kolicons/\n```\n\n## 5. Test your setup\n\nLoad a page that renders `kol-icon` or any component using `_icons`. You should no longer see empty boxes. Browser developer tools let you check that the `kolicons.ttf` file is requested successfully.\n\nKeeping the CSS import in place ensures AI agents and developers alike ship the correct assets whenever `kol-icon` is used.\n\n## Using Codicons (Optional Legacy Support)\n\nIf your application still uses Codicons from an earlier version, you can optionally load both fonts:\n\n```ts\nimport '@public-ui/components/assets/kolicons/style.css';\nimport '@public-ui/components/assets/codicons/codicon.css';\n```\n\nHowever, we recommend migrating all Codicons to KolIcons for consistency and reduced bundle size.\n",
|
|
97
97
|
"kind": "doc"
|
|
98
98
|
},
|
|
99
99
|
{
|
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
"group": "docs",
|
|
150
150
|
"name": "README",
|
|
151
151
|
"path": "README.md",
|
|
152
|
-
"code": "# Welcome to KoliBri\n\n[](https://www.npmjs.com/package/@public-ui/components)\n[](https://github.com/public-ui/kolibri/blob/main/LICENSE)\n[](https://www.npmjs.com/package/@public-ui/components)\n[](https://github.com/public-ui/kolibri/issues)\n[](https://github.com/public-ui/kolibri/pulls)\n[](https://bundlephobia.com/result?p=@public-ui/components)\n\n\n> \"The accessible HTML standard\"\n\n**KoliBri** stands for \"component library for accessibility\" and was released as\nopen source by the\n[Informationstechnikzentrum Bund (ITZBund)](https://itzbund.de) for reuse and\ncontinued development.\n\n## Vision\n\nTogether we make **HTML** accessible using **reusable web components** to ensure **usability** and **accessibility**.\n\n## Mission\n\nThe [HTML web standard](https://html.spec.whatwg.org) is itself very “openly” specified in order to be as long-lasting and robust as possible. It therefore often happens that HTML compositions are not easily accessible, semantic and valid.\n\nKoliBri is based directly on the [Web standards](https://www.w3.org/standards/webdesign/) of the [W3C](https://www.w3.org) (framework-agnostic), and is generic Reference implementation of the [WCAG standard](https://www.w3.org/WAI/standards-guidelines/wcag/) and the [BITV](https://www.bitvtest.de/bitv_test.html) for accessibility and implemented as a multi-theming capable presentation layer. There is no technical reference and no data transfer functionality. This means that KoliBri is equally reusable for the realization of static websites as well as dynamic web applications with different corporate designs and style guides and is therefore very interesting for open source.\n\n## Roadmap\n\nKoliBri is always actively working on improvements, new features and future-oriented innovations for the latest major release. In parallel, a selected LTS release is maintained with regard to bug fixes.\n\n| Version | Release type | Release | Period | End-of-Support |\n| ------: | :----------: | :------: | :----: | :------------: |\n| 0.x | Initial | Jul 2020 | - | Dec 2021 |\n| 1.x | LTS | Dec 2021 | 3y | Dec 2024 |\n| 2.x | LTS | Dec 2023 | 3y | Dec 2026 |\n| 3.x | STS | Dec 2024 | 15m | Dec 2025 |\n| 4.x | LTS | Dec 2025 | 3y | Dec 2028 |\n| 5.x | STS | Dec 2026 | 15m | Dec 2027 |\n\n```mermaid\ngantt\n title LTS & STS\n dateFormat YYYY-MM-DD\n\n 0.x Initial implementation :, 2020-07-01, 17M\n 1.x (LTS) :, 2021-12-01, 3y\n 2.x (LTS) :, 2023-12-01, 3y\n 3.x (STS) :crit , 2024-12-01, 15M\n 4.x (LTS) :, 2025-12-01, 3y\n 5.x (STS) :crit , 2026-12-01, 15M\n 6.x (LTS) :, 2027-12-01, 3y\n\n```\n\n## Installation\n\nInstall the packages with [pnpm](https://pnpm.io):\n\n```bash\npnpm install\n```\n\nRun the build once to generate the components:\n\n```bash\npnpm -r build\n```\n\n### Quick start\n\nInstall the default theme and register the components:\n\n```ts\npnpm add @public-ui/components @public-ui/theme-default\n\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nregister(DEFAULT, defineCustomElements);\n```\n\n### Avoid CSS Custom Property Collisions\n\nKoliBri themes expose a few CSS custom properties so consumers can adapt the look and feel.\nBecause these properties remain global—even inside a Shadow DOM—using too many of them can\nclash with variables defined on the host page.\n\nUse namespaced custom properties only for values that must be overridden from the outside.\nFor internal calculations rely on SASS variables instead of additional CSS properties.\nThis keeps components robust and prevents unexpected style leaks.\n\n## Collaboration and cooperation\n\nThe **focus** of KoliBri is on **small** (atomic), very **flexible** and highly **reusable** HTML compositions (e.g. buttons). We offer an accessible, semantic and valid standard implementation of such components that can be reused for any higher-level HTML structure or component (molecule, organism or template).\nThese atomic components are where we should **collaborate** and **cooperate** to combine our skills and knowledge. The synergy effects on the basic components allow you to focus more on subject-specific content.\n\nLet's make KoliBri **better** and **more colorful** together!\n\n> Continue [to **Documentation**](https://public-ui.github.io/en/)…\n\n## Contributing\n\nBug reports and pull requests are welcome. Please read our [contribution guide](./CONTRIBUTING.md) before getting started.\n\n## Resources\n\n- [Get Started](https://public-ui.github.io/en/docs/get-started/first-steps)\n- [Contributing](./CONTRIBUTING.md)\n- [Code of Conduct](./CODE_OF_CONDUCT.md)\n- [Known Issues](http://public-ui.github.io/en/docs/known-issues)\n- [Security](./docs/SECURITY.md)\n",
|
|
152
|
+
"code": "# Welcome to KoliBri\n\n[](https://www.npmjs.com/package/@public-ui/components)\n[](https://github.com/public-ui/kolibri/blob/main/LICENSE)\n[](https://www.npmjs.com/package/@public-ui/components)\n[](https://github.com/public-ui/kolibri/issues)\n[](https://github.com/public-ui/kolibri/pulls)\n[](https://bundlephobia.com/result?p=@public-ui/components)\n\n\n> \"The accessible HTML standard\"\n\n**KoliBri** stands for \"component library for accessibility\" and was released as\nopen source by the\n[Informationstechnikzentrum Bund (ITZBund)](https://itzbund.de) for reuse and\ncontinued development.\n\n## Vision\n\nTogether we make **HTML** accessible using **reusable web components** to ensure **usability** and **accessibility**.\n\n## Mission\n\nThe [HTML web standard](https://html.spec.whatwg.org) is itself very “openly” specified in order to be as long-lasting and robust as possible. It therefore often happens that HTML compositions are not easily accessible, semantic and valid.\n\nKoliBri is based directly on the [Web standards](https://www.w3.org/standards/webdesign/) of the [W3C](https://www.w3.org) (framework-agnostic), and is generic Reference implementation of the [WCAG standard](https://www.w3.org/WAI/standards-guidelines/wcag/) and the [BITV](https://www.bitvtest.de/bitv_test.html) for accessibility and implemented as a multi-theming capable presentation layer. There is no technical reference and no data transfer functionality. This means that KoliBri is equally reusable for the realization of static websites as well as dynamic web applications with different corporate designs and style guides and is therefore very interesting for open source.\n\n## Roadmap\n\nKoliBri is always actively working on improvements, new features and future-oriented innovations for the latest major release. In parallel, a selected LTS release is maintained with regard to bug fixes.\n\n| Version | Release type | Release | Period | End-of-Support |\n| ------: | :----------: | :------: | :----: | :------------: |\n| 0.x | Initial | Jul 2020 | - | Dec 2021 |\n| 1.x | LTS | Dec 2021 | 3y | Dec 2024 |\n| 2.x | LTS | Dec 2023 | 3y | Dec 2026 |\n| 3.x | STS | Dec 2024 | 15m | Dec 2025 |\n| 4.x | LTS | Dec 2025 | 3y | Dec 2028 |\n| 5.x | STS | Dec 2026 | 15m | Dec 2027 |\n\n```mermaid\ngantt\n title LTS & STS\n dateFormat YYYY-MM-DD\n\n 0.x Initial implementation :, 2020-07-01, 17M\n 1.x (LTS) :, 2021-12-01, 3y\n 2.x (LTS) :, 2023-12-01, 3y\n 3.x (STS) :crit , 2024-12-01, 15M\n 4.x (LTS) :, 2025-12-01, 3y\n 5.x (STS) :crit , 2026-12-01, 15M\n 6.x (LTS) :, 2027-12-01, 3y\n\n```\n\n## Installation\n\nInstall the packages with [pnpm](https://pnpm.io):\n\n```bash\npnpm install\n```\n\nRun the build once to generate the components:\n\n```bash\npnpm -r build\n```\n\n### Quick start\n\nInstall the default theme and register the components:\n\n```ts\npnpm add @public-ui/components @public-ui/theme-default\n\nimport { register } from '@public-ui/components';\nimport { defineCustomElements } from '@public-ui/components/loader';\nimport { DEFAULT } from '@public-ui/theme-default';\n\nregister(DEFAULT, defineCustomElements);\n```\n\n### Avoid CSS Custom Property Collisions\n\nKoliBri themes expose a few CSS custom properties so consumers can adapt the look and feel.\nBecause these properties remain global—even inside a Shadow DOM—using too many of them can\nclash with variables defined on the host page.\n\nUse namespaced custom properties only for values that must be overridden from the outside.\nFor internal calculations rely on SASS variables instead of additional CSS properties.\nThis keeps components robust and prevents unexpected style leaks.\n\n## Collaboration and cooperation\n\nThe **focus** of KoliBri is on **small** (atomic), very **flexible** and highly **reusable** HTML compositions (e.g. buttons). We offer an accessible, semantic and valid standard implementation of such components that can be reused for any higher-level HTML structure or component (molecule, organism or template).\nThese atomic components are where we should **collaborate** and **cooperate** to combine our skills and knowledge. The synergy effects on the basic components allow you to focus more on subject-specific content.\n\nLet's make KoliBri **better** and **more colorful** together!\n\n> Continue [to **Documentation**](https://public-ui.github.io/en/)…\n\n## Contributing\n\nBug reports and pull requests are welcome. Please read our [contribution guide](./CONTRIBUTING.md) before getting started.\n\n## SLSA/Provenance\n\nWe aim for **SLSA Build Level 3** for the npm packages published from this repository. Releases are built in GitHub Actions with OIDC-based identity and published with npm provenance (`--provenance`), producing verifiable attestations for the published artifacts. See the [publish workflow](./.github/workflows/publish.yml) for the release steps and npm provenance configuration.\n\n**Verification example**\n\n```bash\n# Inspect provenance metadata for a published package\npnpm view @public-ui/components dist.provenance\n\n# (Optional) Verify signatures/provenance if your npm client supports it\npnpm audit signatures --package=@public-ui/components@<version>\n```\n\n## Resources\n\n- [Get Started](https://public-ui.github.io/en/docs/get-started/first-steps)\n- [Contributing](./CONTRIBUTING.md)\n- [Code of Conduct](./CODE_OF_CONDUCT.md)\n- [Known Issues](http://public-ui.github.io/en/docs/known-issues)\n- [Security](./docs/SECURITY.md)\n",
|
|
153
153
|
"kind": "doc"
|
|
154
154
|
},
|
|
155
155
|
{
|
|
@@ -253,7 +253,7 @@
|
|
|
253
253
|
"group": "badge",
|
|
254
254
|
"name": "basic",
|
|
255
255
|
"path": "packages/samples/react/src/components/badge/basic.tsx",
|
|
256
|
-
"code": "import React from 'react';\n\nimport { KolBadge } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const BadgeBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolBadge shows badges with a label, background color and optional icon.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t<KolBadge _label=\"black\"></KolBadge>\n\t\t\t<KolBadge _color=\"#86ffc6\" _label=\"teal\"></KolBadge>\n\t\t\t<KolBadge _color=\"#06539e\" _label=\"blue\"></KolBadge>\n\t\t\t<KolBadge _color=\"#ae0000\" _label=\"red with icon\" _icons=\"
|
|
256
|
+
"code": "import React from 'react';\n\nimport { KolBadge } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const BadgeBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolBadge shows badges with a label, background color and optional icon.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t<KolBadge _label=\"black\"></KolBadge>\n\t\t\t<KolBadge _color=\"#86ffc6\" _label=\"teal\"></KolBadge>\n\t\t\t<KolBadge _color=\"#06539e\" _label=\"blue\"></KolBadge>\n\t\t\t<KolBadge _color=\"#ae0000\" _label=\"red with icon\" _icons=\"kolicon-house\"></KolBadge>\n\t\t\t<KolBadge _color=\"#8b008b\" _label=\"purple with icon\" _icons=\"kolicon-kolibri\"></KolBadge>\n\t\t</div>\n\t</>\n);\n",
|
|
257
257
|
"kind": "sample"
|
|
258
258
|
},
|
|
259
259
|
{
|
|
@@ -261,7 +261,7 @@
|
|
|
261
261
|
"group": "badge",
|
|
262
262
|
"name": "button",
|
|
263
263
|
"path": "packages/samples/react/src/components/badge/button.tsx",
|
|
264
|
-
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolBadge } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst createBadgeProps = (label: string) => ({\n\t_label: label,\n\t_smartButton: {\n\t\t_ariaDescription: label,\n\t\t_icons: 'kolicon-cross',\n\t\t_label: `Remove`,\n\t\t_on: {\n\t\t\tonClick: () => alert('clicked'),\n\t\t},\n\t},\n});\n\nexport const BadgeButton: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolBadge with an optional <code>smartButton</code>. The sample defines a "close" button with X-icon a click event listener.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t<KolBadge {...createBadgeProps('black')}></KolBadge>\n\t\t\t<KolBadge _color=\"#86ffc6\" {...createBadgeProps('teal')}></KolBadge>\n\t\t\t<KolBadge _color=\"#06539e\" {...createBadgeProps('blue')}></KolBadge>\n\t\t\t<KolBadge _color=\"#ae0000\" _icons=\"
|
|
264
|
+
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolBadge } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst createBadgeProps = (label: string) => ({\n\t_label: label,\n\t_smartButton: {\n\t\t_ariaDescription: label,\n\t\t_icons: 'kolicon-cross',\n\t\t_label: `Remove`,\n\t\t_on: {\n\t\t\tonClick: () => alert('clicked'),\n\t\t},\n\t},\n});\n\nexport const BadgeButton: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolBadge with an optional <code>smartButton</code>. The sample defines a "close" button with X-icon a click event listener.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t<KolBadge {...createBadgeProps('black')}></KolBadge>\n\t\t\t<KolBadge _color=\"#86ffc6\" {...createBadgeProps('teal')}></KolBadge>\n\t\t\t<KolBadge _color=\"#06539e\" {...createBadgeProps('blue')}></KolBadge>\n\t\t\t<KolBadge _color=\"#ae0000\" _icons=\"kolicon-house\" {...createBadgeProps('red with icon')}></KolBadge>\n\t\t\t<KolBadge _color=\"#8b008b\" _icons=\"kolicon-kolibri\" {...createBadgeProps('purple with icon')}></KolBadge>\n\t\t</div>\n\t</>\n);\n",
|
|
265
265
|
"kind": "sample"
|
|
266
266
|
},
|
|
267
267
|
{
|
|
@@ -277,7 +277,7 @@
|
|
|
277
277
|
"group": "breadcrumb",
|
|
278
278
|
"name": "basic",
|
|
279
279
|
"path": "packages/samples/react/src/components/breadcrumb/basic.tsx",
|
|
280
|
-
"code": "import React from 'react';\n\nimport { KolBreadcrumb } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const BreadcrumbBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolBreadcrumb shows a breadcrumb navigation. The sample illustrates a variation of link, text and icon elements.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb aus Text-Links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{ _label: 'Homepage', _href: '#/back-page' },\n\t\t\t\t\t{ _label: 'Bottom of the homepage', _href: '#/back-page' },\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb from icons or text links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Homepage',\n\t\t\t\t\t\t_icons: '
|
|
280
|
+
"code": "import React from 'react';\n\nimport { KolBreadcrumb } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const BreadcrumbBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolBreadcrumb shows a breadcrumb navigation. The sample illustrates a variation of link, text and icon elements.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb aus Text-Links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{ _label: 'Homepage', _href: '#/back-page' },\n\t\t\t\t\t{ _label: 'Bottom of the homepage', _href: '#/back-page' },\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb from icons or text links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Homepage',\n\t\t\t\t\t\t_icons: 'kolicon-house',\n\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Subpage of the start page with very long link test',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb\n\t\t\t\t_label=\"Breadcrumb from icons and text links\"\n\t\t\t\t_links={[\n\t\t\t\t\t{ _label: 'Homepage', _icons: 'kolicon-house', _href: '#/back-page' },\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Subpage of the main page and I_am_a_really_long_compound_word_trying_to_break_the_layout',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t></KolBreadcrumb>\n\t\t\t<KolBreadcrumb _label=\"Minimal Breadcrumb\" _links={[{ _label: 'Homepage', _href: '#/back-page' }]}></KolBreadcrumb>\n\t\t</div>\n\t</>\n);\n",
|
|
281
281
|
"kind": "sample"
|
|
282
282
|
},
|
|
283
283
|
{
|
|
@@ -301,7 +301,7 @@
|
|
|
301
301
|
"group": "button-link",
|
|
302
302
|
"name": "icons",
|
|
303
303
|
"path": "packages/samples/react/src/components/button-link/icons.tsx",
|
|
304
|
-
"code": "import React from 'react';\n\nimport { KolButtonLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonLinkIcons: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolButtonLink with icons in different locations.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolButtonLink _icons=\"
|
|
304
|
+
"code": "import React from 'react';\n\nimport { KolButtonLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonLinkIcons: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolButtonLink with icons in different locations.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolButtonLink _icons=\"kolicon-house\" _label=\"I am a link with an icon on the left\" />\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon on the right\"\n\t\t\t/>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon at the top\"\n\t\t\t/>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with icon below\"\n\t\t\t/>\n\t\t\t<KolButtonLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t\tleft: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with all icons\"\n\t\t\t/>\n\t\t\t<KolButtonLink _icons=\"kolicon-house\" _hideLabel _label=\"I am a link with icon only\" />\n\t\t</div>\n\t</>\n);\n",
|
|
305
305
|
"kind": "sample"
|
|
306
306
|
},
|
|
307
307
|
{
|
|
@@ -317,7 +317,7 @@
|
|
|
317
317
|
"group": "button",
|
|
318
318
|
"name": "access-key",
|
|
319
319
|
"path": "packages/samples/react/src/components/button/access-key.tsx",
|
|
320
|
-
"code": "import { KolButton, KolHeading, KolLink } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonAccessKey: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates buttons with{' '}\n\t\t\t\t\t<KolLink _label=\"access keys\" _href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey\" _target=\"blank\" />. Access keys\n\t\t\t\t\tallow users to trigger buttons using keyboard shortcuts.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Buttons with Access Keys\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"With S access key\" _accessKey=\"S\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Very small b\" _accessKey=\"b\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Access key does not appear in label\" _accessKey=\"x\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Access Key with Hidden Label\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"access key without label\" _hideLabel _accessKey=\"a\" _icons=\"
|
|
320
|
+
"code": "import { KolButton, KolHeading, KolLink } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonAccessKey: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates buttons with{' '}\n\t\t\t\t\t<KolLink _label=\"access keys\" _href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey\" _target=\"blank\" />. Access keys\n\t\t\t\t\tallow users to trigger buttons using keyboard shortcuts.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Buttons with Access Keys\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"With S access key\" _accessKey=\"S\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Very small b\" _accessKey=\"b\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Access key does not appear in label\" _accessKey=\"x\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Access Key with Hidden Label\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"access key without label\" _hideLabel _accessKey=\"a\" _icons=\"kolicon-cogwheel\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Access Key with Inline Icons\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_label=\"with inline icons\"\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t\tright: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_accessKey=\"n\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
321
321
|
"kind": "sample"
|
|
322
322
|
},
|
|
323
323
|
{
|
|
@@ -333,7 +333,7 @@
|
|
|
333
333
|
"group": "button",
|
|
334
334
|
"name": "baselined",
|
|
335
335
|
"path": "packages/samples/react/src/components/button/baselined.tsx",
|
|
336
|
-
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonBaselined: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates button baseline alignment. It shows multiple buttons with and without icons that are vertically aligned, useful for testing\n\t\t\t\t\tlayout consistency.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Vertically Aligned Buttons\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t\t<KolButton _label=\"Label-Text\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"
|
|
336
|
+
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonBaselined: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates button baseline alignment. It shows multiple buttons with and without icons that are vertically aligned, useful for testing\n\t\t\t\t\tlayout consistency.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Vertically Aligned Buttons\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t\t<KolButton _label=\"Label-Text\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-cogwheel\" _label=\"Label-Text with Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
337
337
|
"kind": "sample"
|
|
338
338
|
},
|
|
339
339
|
{
|
|
@@ -341,7 +341,7 @@
|
|
|
341
341
|
"group": "button",
|
|
342
342
|
"name": "basic",
|
|
343
343
|
"path": "packages/samples/react/src/components/button/basic.tsx",
|
|
344
|
-
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates the most important features of the KolButton component. It showcases the different button variants, icons, disabled state, and\n\t\t\t\t\thidden labels.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t{/* Button Variants */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Button Variants\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"
|
|
344
|
+
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates the most important features of the KolButton component. It showcases the different button variants, icons, disabled state, and\n\t\t\t\t\thidden labels.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t{/* Button Variants */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Button Variants\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"Primary\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-kolibri\" _label=\"Secondary\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-cogwheel\" _label=\"Tertiary\" _variant=\"tertiary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-cogwheel\" _label=\"Normal\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-alert-warning\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-eye-closed\" _label=\"Ghost\" _variant=\"ghost\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t{/* Disabled State */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Disabled State\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-house\" _label=\"Primary\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-kolibri\" _label=\"Secondary\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-alert-warning\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t{/* Hidden Label */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Hidden Label (Icon Only)\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-house\" _label=\"Primary\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-kolibri\" _label=\"Secondary\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-alert-warning\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t{/* Icon Positions */}\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Left\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icons Both Sides\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
345
345
|
"kind": "sample"
|
|
346
346
|
},
|
|
347
347
|
{
|
|
@@ -349,7 +349,7 @@
|
|
|
349
349
|
"group": "button",
|
|
350
350
|
"name": "disabled",
|
|
351
351
|
"path": "packages/samples/react/src/components/button/disabled.tsx",
|
|
352
|
-
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonDisabled: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This story demonstrates the disabled state of buttons. Disabled buttons are not clickable and appear visually dimmed.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Disabled Buttons\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _icons=\"
|
|
352
|
+
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonDisabled: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This story demonstrates the disabled state of buttons. Disabled buttons are not clickable and appear visually dimmed.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Disabled Buttons\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-house\" _label=\"Primary\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-kolibri\" _label=\"Secondary\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-cogwheel\" _label=\"Tertiary\" _variant=\"tertiary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-cogwheel\" _label=\"Normal\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-alert-warning\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-eye-closed\" _label=\"Ghost\" _variant=\"ghost\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Comparison: Enabled vs Disabled\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"Enabled\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-house\" _label=\"Disabled\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
353
353
|
"kind": "sample"
|
|
354
354
|
},
|
|
355
355
|
{
|
|
@@ -357,7 +357,7 @@
|
|
|
357
357
|
"group": "button",
|
|
358
358
|
"name": "expert-slot",
|
|
359
359
|
"path": "packages/samples/react/src/components/button/expert-slot.tsx",
|
|
360
|
-
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonExpertSlot: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates the expert slot feature of KolButton. The expert slot allows you to insert custom content into the button, providing advanced\n\t\t\t\t\tcustomization options beyond the standard label and icon properties.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Buttons with Expert Slot Content\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"
|
|
360
|
+
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonExpertSlot: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates the expert slot feature of KolButton. The expert slot allows you to insert custom content into the button, providing advanced\n\t\t\t\t\tcustomization options beyond the standard label and icon properties.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Buttons with Expert Slot Content\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"\" _variant=\"primary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">I am more than just a button</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-kolibri\" _label=\"\" _variant=\"secondary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Custom content here</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-alert-warning\" _label=\"\" _variant=\"danger\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Delete with custom text</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Disabled Buttons with Expert Slot\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-house\" _label=\"\" _variant=\"primary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Disabled expert slot</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-eye-closed\" _label=\"\" _variant=\"ghost\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Another disabled one</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
361
361
|
"kind": "sample"
|
|
362
362
|
},
|
|
363
363
|
{
|
|
@@ -365,7 +365,7 @@
|
|
|
365
365
|
"group": "button",
|
|
366
366
|
"name": "hide-label",
|
|
367
367
|
"path": "packages/samples/react/src/components/button/hide-label.tsx",
|
|
368
|
-
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonHideLabel: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates buttons with hidden labels. The label is still accessible to screen readers but visually hidden, showing only the icon. This\n\t\t\t\t\tis useful for icon-only buttons.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Buttons with Hidden Labels\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"
|
|
368
|
+
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonHideLabel: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates buttons with hidden labels. The label is still accessible to screen readers but visually hidden, showing only the icon. This\n\t\t\t\t\tis useful for icon-only buttons.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Buttons with Hidden Labels\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-house\" _label=\"Home\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-kolibri\" _label=\"Like\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-cogwheel\" _label=\"Subscribe\" _variant=\"tertiary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-cogwheel\" _label=\"Buy me a coffee\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-alert-warning\" _label=\"Delete\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-eye-closed\" _label=\"Settings\" _variant=\"ghost\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Comparison: With and Without Hidden Label\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"Home\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-house\" _label=\"Home\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Disabled with Hidden Label\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"kolicon-house\" _label=\"Home\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"kolicon-kolibri\" _label=\"Like\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"kolicon-cogwheel\" _label=\"Subscribe\" _variant=\"tertiary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"kolicon-cogwheel\" _label=\"Buy me a coffee\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _disabled _hideLabel _icons=\"kolicon-alert-warning\" _label=\"Delete\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
369
369
|
"kind": "sample"
|
|
370
370
|
},
|
|
371
371
|
{
|
|
@@ -373,7 +373,7 @@
|
|
|
373
373
|
"group": "button",
|
|
374
374
|
"name": "icons",
|
|
375
375
|
"path": "packages/samples/react/src/components/button/icons.tsx",
|
|
376
|
-
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonIcons: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story showcases buttons with icons in various positions and configurations. Icons can be placed on the left, right, top, bottom, or in multiple\n\t\t\t\t\tpositions at once.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Basic Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Left\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Top\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Bottom\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Multiple Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Left & Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Top & Bottom\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"All Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: {\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\ttransform: 'rotate(45deg)',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"All Directions\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Simple Icon String\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"
|
|
376
|
+
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonIcons: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story showcases buttons with icons in various positions and configurations. Icons can be placed on the left, right, top, bottom, or in multiple\n\t\t\t\t\tpositions at once.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Basic Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Left\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Top\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Icon Bottom\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Multiple Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Left & Right\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Top & Bottom\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"All Icon Positions\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: {\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\ttransform: 'rotate(45deg)',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"All Directions\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Simple Icon String\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"Home Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-kolibri\" _label=\"Heart Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-alert-warning\" _label=\"Trash Icon\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Large Icon on Top\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\ttop: {\n\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\t'font-size': '400%',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\ticon: 'kolicon-house',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Home\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
377
377
|
"kind": "sample"
|
|
378
378
|
},
|
|
379
379
|
{
|
|
@@ -381,7 +381,7 @@
|
|
|
381
381
|
"group": "button",
|
|
382
382
|
"name": "row-reverse-tooltip",
|
|
383
383
|
"path": "packages/samples/react/src/components/button/row-reverse-tooltip.tsx",
|
|
384
|
-
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonRowReverseTooltip: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates how the tooltip adapts its width when containing long text inside a row-reverse flex container. The effect becomes visible\n\t\t\t\t\twhen inspecting the layout with DevTools and reducing the available width (e.g., by narrowing the screen).\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Button in Row-Reverse Container\" />\n\t\t\t\t\t<div className=\"flex flex-row-reverse\">\n\t\t\t\t\t\t<KolButton _icons=\"
|
|
384
|
+
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonRowReverseTooltip: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates how the tooltip adapts its width when containing long text inside a row-reverse flex container. The effect becomes visible\n\t\t\t\t\twhen inspecting the layout with DevTools and reducing the available width (e.g., by narrowing the screen).\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Button in Row-Reverse Container\" />\n\t\t\t\t\t<div className=\"flex flex-row-reverse\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _hideLabel _label=\"This is a very, very long tooltip text that exceeds the width.\" _variant=\"primary\" />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
385
385
|
"kind": "sample"
|
|
386
386
|
},
|
|
387
387
|
{
|
|
@@ -389,7 +389,7 @@
|
|
|
389
389
|
"group": "button",
|
|
390
390
|
"name": "short-key",
|
|
391
391
|
"path": "packages/samples/react/src/components/button/short-key.tsx",
|
|
392
|
-
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonShortKey: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates buttons with short keys (visual keyboard shortcuts). The short key is displayed as a visual indicator within the button label,\n\t\t\t\t\tbut it is purely visual and needs custom functionality implementation to make it interactive.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Buttons with Short Keys\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"With S short key\" _shortKey=\"S\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Very small b\" _shortKey=\"b\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Short key does not appear in label\" _shortKey=\"x\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Short Key with Hidden Label\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"short key without label\" _hideLabel _shortKey=\"k\" _icons=\"
|
|
392
|
+
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonShortKey: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates buttons with short keys (visual keyboard shortcuts). The short key is displayed as a visual indicator within the button label,\n\t\t\t\t\tbut it is purely visual and needs custom functionality implementation to make it interactive.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Buttons with Short Keys\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"With S short key\" _shortKey=\"S\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Very small b\" _shortKey=\"b\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _label=\"Short key does not appear in label\" _shortKey=\"x\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Short Key with Hidden Label\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _label=\"short key without label\" _hideLabel _shortKey=\"k\" _icons=\"kolicon-cogwheel\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Short Key with Inline Icons\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_label=\"with inline icons\"\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t\tright: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_shortKey=\"n\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
393
393
|
"kind": "sample"
|
|
394
394
|
},
|
|
395
395
|
{
|
|
@@ -397,7 +397,7 @@
|
|
|
397
397
|
"group": "button",
|
|
398
398
|
"name": "spinner",
|
|
399
399
|
"path": "packages/samples/react/src/components/button/spinner.tsx",
|
|
400
|
-
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonSpinner: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates icon-only buttons with an animated spinning loader icon. The animation is applied using CSS parts to target the icon element\n\t\t\t\t\tdirectly.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Animated Spinner Icon via CSS Part\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: '
|
|
400
|
+
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonSpinner: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates icon-only buttons with an animated spinning loader icon. The animation is applied using CSS parts to target the icon element\n\t\t\t\t\tdirectly.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Animated Spinner Icon via CSS Part\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Loading\"\n\t\t\t\t\t\t\t_variant=\"primary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button spinner-slow\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Syncing\"\n\t\t\t\t\t\t\t_variant=\"secondary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button spinner-slower\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Processing\"\n\t\t\t\t\t\t\t_variant=\"tertiary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Spinner with Label\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button\"\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Loading...\"\n\t\t\t\t\t\t\t_variant=\"primary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\tclassName=\"spinner-button\"\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: 'kolicon-cogwheel',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label=\"Syncing...\"\n\t\t\t\t\t\t\t_variant=\"secondary\"\n\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\n\t\t\t<style>\n\t\t\t\t{`\n\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\tfrom {\n\t\t\t\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tto {\n\t\t\t\t\t\t\ttransform: rotate(360deg);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Target the icon part inside the button */\n\t\t\t\t\t.spinner-button::part(icon) {\n\t\t\t\t\t\tanimation: spin 1s linear infinite;\n\t\t\t\t\t}\n\n\t\t\t\t\t.spinner-slow::part(icon) {\n\t\t\t\t\t\tanimation-duration: 1.5s;\n\t\t\t\t\t}\n\n\t\t\t\t\t.spinner-slower::part(icon) {\n\t\t\t\t\t\tanimation-duration: 2s;\n\t\t\t\t\t}\n\n\t\t\t\t\t@media (prefers-reduced-motion) {\n\t\t\t\t\t\t.spinner-button::part(icon){\n\t\t\t\t\t\t\tanimation-duration: 10s;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t`}\n\t\t\t</style>\n\t\t</>\n\t);\n};\n",
|
|
401
401
|
"kind": "sample"
|
|
402
402
|
},
|
|
403
403
|
{
|
|
@@ -405,7 +405,7 @@
|
|
|
405
405
|
"group": "button",
|
|
406
406
|
"name": "variants",
|
|
407
407
|
"path": "packages/samples/react/src/components/button/variants.tsx",
|
|
408
|
-
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonVariants: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This story showcases all available button variants: primary, secondary, tertiary, normal, danger, and ghost.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"All Button Variants\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"
|
|
408
|
+
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonVariants: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This story showcases all available button variants: primary, secondary, tertiary, normal, danger, and ghost.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"All Button Variants\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"Primary\" _variant=\"primary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-kolibri\" _label=\"Secondary\" _variant=\"secondary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-cogwheel\" _label=\"Tertiary\" _variant=\"tertiary\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-cogwheel\" _label=\"Normal\" _variant=\"normal\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-alert-warning\" _label=\"Danger\" _variant=\"danger\" _on={dummyEventHandler} />\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-eye-closed\" _label=\"Ghost\" _variant=\"ghost\" _on={dummyEventHandler} />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
409
409
|
"kind": "sample"
|
|
410
410
|
},
|
|
411
411
|
{
|
|
@@ -472,6 +472,14 @@
|
|
|
472
472
|
"code": "import type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport type { AlignPropType } from '@public-ui/components';\nimport { KolButton, KolDrawer, KolInputCheckbox } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport { DrawerRadioAlign } from './partials/align';\nexport const DrawerBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst defaultAlign = searchParams.get('align') as AlignPropType;\n\tconst defaultCloser = searchParams.get('closer') === 'true';\n\tconst drawerElement = useRef<HTMLKolDrawerElement>(null);\n\n\tconst [align, setAlign] = useState<AlignPropType>(defaultAlign || 'left');\n\tconst [hasCloser, setHasCloser] = useState<boolean>(defaultCloser);\n\n\tuseEffect(() => {\n\t\tif (defaultAlign) {\n\t\t\tdrawerElement.current?.open();\n\t\t}\n\t}, [defaultAlign]);\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolDrawer shows a dialog attached to one of the sides of the viewport, when opened. This sample illustrates the four alignments.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />\n\n\t\t\t<KolInputCheckbox\n\t\t\t\t_label=\"Drawer has closer\"\n\t\t\t\tclassName=\"mb-4\"\n\t\t\t\t_checked={hasCloser}\n\t\t\t\t_on={{\n\t\t\t\t\tonInput: (_, value) => {\n\t\t\t\t\t\tsetHasCloser((value as null | boolean) === true);\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t/>\n\n\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t<KolDrawer\n\t\t\t\t\tref={drawerElement}\n\t\t\t\t\t_label=\"I am a drawer\"\n\t\t\t\t\t_align={align}\n\t\t\t\t\t_hasCloser={hasCloser}\n\t\t\t\t\t_on={{ onClose: () => console.log('Drawer onClose triggered!') }}\n\t\t\t\t>\n\t\t\t\t\t<div className={align === 'left' || align === 'right' ? 'drawer-content-vertical' : ''}>\n\t\t\t\t\t\t<p className=\"mt-0\">\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\t\t\tvoluptua.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<KolButton _label=\"Close drawer\" _on={{ onClick: () => drawerElement.current?.close() }} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolDrawer>\n\t\t\t\t<KolButton _label=\"Open drawer\" _on={{ onClick: () => drawerElement.current?.open() }} />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
473
473
|
"kind": "sample"
|
|
474
474
|
},
|
|
475
|
+
{
|
|
476
|
+
"id": "sample/drawer/big-content",
|
|
477
|
+
"group": "drawer",
|
|
478
|
+
"name": "big-content",
|
|
479
|
+
"path": "packages/samples/react/src/components/drawer/big-content.tsx",
|
|
480
|
+
"code": "// DrawerScrolled Class\n\nimport type { AlignPropType } from '@public-ui/components';\nimport { KolButton, KolDrawer } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useRef, useState } from 'react';\nimport { SampleDescription } from '../SampleDescription';\nimport { DrawerRadioAlign } from './partials/align';\n\nexport const DrawerBigContent: FC = () => {\n\tconst drawerElement = useRef<HTMLKolDrawerElement>(null);\n\tconst [align, setAlign] = useState<AlignPropType>('bottom');\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample demonstrates how KolDrawer handles content that exceeds the drawer dimensions.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-col gap-4 mb-4\">\n\t\t\t\t<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />\n\t\t\t</div>\n\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t<KolDrawer ref={drawerElement} _label=\"Scrollable Drawer\" _align={align}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twidth: align === 'left' || align === 'right' ? '20vw' : undefined,\n\t\t\t\t\t\t\theight: align === 'top' || align === 'bottom' ? '20vh' : undefined,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<h3>Large Content Area (Scrollable)</h3>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\t\t\tvoluptua. 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\n\t\t\t\t\t\t\tamet.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\t\t\tvoluptua. 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\n\t\t\t\t\t\t\tamet.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\t\t\tvoluptua. 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\n\t\t\t\t\t\t\tamet.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\t\t\tvoluptua. 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\n\t\t\t\t\t\t\tamet.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\t\t\tvoluptua. 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\n\t\t\t\t\t\t\tamet.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\t\t\tvoluptua. 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\n\t\t\t\t\t\t\tamet.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\t\t\tvoluptua. 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\n\t\t\t\t\t\t\tamet.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\t\t\tvoluptua. 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\n\t\t\t\t\t\t\tamet.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div style={{ marginTop: 'auto', paddingTop: '40px' }}>\n\t\t\t\t\t\t\t<KolButton _label=\"Close drawer\" _on={{ onClick: () => drawerElement.current?.close() }} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</KolDrawer>\n\n\t\t\t\t<KolButton _label=\"Open scrollable drawer\" _on={{ onClick: () => drawerElement.current?.open() }} />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
481
|
+
"kind": "sample"
|
|
482
|
+
},
|
|
475
483
|
{
|
|
476
484
|
"id": "sample/drawer/controlled",
|
|
477
485
|
"group": "drawer",
|
|
@@ -509,7 +517,7 @@
|
|
|
509
517
|
"group": "handout",
|
|
510
518
|
"name": "basic",
|
|
511
519
|
"path": "packages/samples/react/src/components/handout/basic.tsx",
|
|
512
|
-
"code": "import type { ButtonProps, KoliBriTableCell, KoliBriTableHeaders } from '@public-ui/components';\nimport {\n\tKolAbbr,\n\tKolAccordion,\n\tKolAlert,\n\tKolBadge,\n\tKolBreadcrumb,\n\tKolButton,\n\tKolButtonLink,\n\tKolCard,\n\tKolDetails,\n\tKolForm,\n\tKolHeading,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolKolibri,\n\tKolLink,\n\tKolLinkButton,\n\tKolNav,\n\tKolProgress,\n\tKolSelect,\n\tKolTableStateful,\n\tKolTabs,\n\tKolTextarea,\n\tKolVersion,\n} from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { getTheme, getThemeName } from '../../shares/store';\nimport { TABLE_DATA, type TableDataType } from './table-data';\n\nfunction KolButtonWrapper({ _on, ...other }: ButtonProps & { style: Record<string, unknown> }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton {...other} _on={dummyEventHandler} />;\n}\n\nconst TABLE_HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: 'Workdays',\n\t\t\t\tcolSpan: 5,\n\t\t\t\twidth: 500,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Weekend',\n\t\t\t\tcolSpan: 2,\n\t\t\t\twidth: 200,\n\t\t\t},\n\t\t],\n\t\t[\n\t\t\t{\n\t\t\t\tkey: 'monday',\n\t\t\t\tlabel: 'Monday',\n\t\t\t\trender: (el: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolButtonWrapper _label={label} style={{ fontSize: '75%' }} />);\n\t\t\t\t},\n\t\t\t\tcompareFn: (first, second) => {\n\t\t\t\t\tif ((first as TableDataType).monday < (second as TableDataType).monday) {\n\t\t\t\t\t\treturn -1;\n\t\t\t\t\t}\n\t\t\t\t\tif ((first as TableDataType).monday > (second as TableDataType).monday) {\n\t\t\t\t\t\treturn 1;\n\t\t\t\t\t}\n\t\t\t\t\treturn 0;\n\t\t\t\t},\n\t\t\t\tsortDirection: 'ASC',\n\t\t\t\ttextAlign: 'right',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'tuesday',\n\t\t\t\tlabel: 'Tuesday',\n\t\t\t\trender: (el: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#060\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\tcompareFn: (first, second) => {\n\t\t\t\t\tif ((first as TableDataType).tuesday < (second as TableDataType).tuesday) {\n\t\t\t\t\t\treturn -1;\n\t\t\t\t\t}\n\t\t\t\t\tif ((first as TableDataType).tuesday > (second as TableDataType).tuesday) {\n\t\t\t\t\t\treturn 1;\n\t\t\t\t\t}\n\t\t\t\t\treturn 0;\n\t\t\t\t},\n\t\t\t\tsortDirection: 'DESC',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'wednesday',\n\t\t\t\tlabel: 'Wednesday',\n\t\t\t\trender: (el: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#006\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 110,\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'thursday',\n\t\t\t\tlabel: 'Thursday',\n\t\t\t\trender: (el: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#600\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'friday',\n\t\t\t\tlabel: 'Friday',\n\t\t\t\trender: (el: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#303\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'saturday',\n\t\t\t\tlabel: 'Saturday',\n\t\t\t\trender: (el: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#330\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'sunday',\n\t\t\t\tlabel: 'Sunday',\n\t\t\t\trender: (el: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#033\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t],\n\t],\n\tvertical: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: 'Early',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Noon',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Evening',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Night',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst renderCellContent = (element: HTMLElement, content: React.ReactNode) => {\n\tconst renderElement = document.createElement('div');\n\trenderElement.setAttribute('role', 'presentation');\n\telement.innerHTML = '';\n\telement.appendChild(renderElement);\n\tgetRoot(renderElement).render(content);\n};\n\nexport const HandoutBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<div className=\"grid gap-4\">\n\t\t\t<div className=\"grid gap-4 md:grid-cols-[auto_1fr_1fr] items-center\">\n\t\t\t\t<KolKolibri className=\"block w-75px\" _labeled={false}></KolKolibri>\n\t\t\t\t<KolHeading _label=\"\" _level={1}>\n\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\tKolibri-Handout <small>for {getThemeName(getTheme())}</small>\n\t\t\t\t\t</span>\n\t\t\t\t</KolHeading>\n\t\t\t\t<KolDetails _label=\"Abstract\" _open>\n\t\t\t\t\tThe handout shows a selection of KoliBri components in the style of <strong>{getThemeName(getTheme())}</strong>. Since KoliBri offers self-contained,\n\t\t\t\t\taccessible web components that can be customized to your own corporate design using theming, you don't have to develop these components yourself.\n\t\t\t\t\tFor more information read our documentation and follow us (\n\t\t\t\t\t<KolLink _label=\"https://github.com/public-ui/kolibri\" _href=\"https://github.com/public-ui/kolibri\" _target=\"_blank\" />\n\t\t\t\t\t).\n\t\t\t\t</KolDetails>\n\t\t\t</div>\n\t\t\t<div className=\"grid gap-4 sm:grid-cols-6 md:grid-cols-6 xl:grid-cols-12\">\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2\" _label=\"Heading\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 1\" _level={1}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 2\" _level={2}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 3\" _level={3}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 4\" _level={4}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 5\" _level={5}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 6\" _level={6}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 6\" _secondaryHeadline=\"Lessons\" _level={6}></KolHeading>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t{/* <KolCard className=\"col-span-3\" _label=\"Accordion\" _level={2}>\n\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 1\" _level={1} _open>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 1</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 2\" _level={2}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 2</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 3\" _level={3}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 3</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 4\" _level={4}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 4</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 5\" _level={5}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 5</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 6\" _level={6}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 6</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t</div>\n\t\t\t</KolCard> */}\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2\" _label=\"Abbreviation and Progress\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tI am <KolAbbr _label=\"as an example\">e.g.</KolAbbr> an abbreviation.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tI am <KolAbbr>e.g.</KolAbbr> an abbreviation without label.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<KolProgress _variant=\"bar\" _max={100} _value={33} _label=\"Progress\" />\n\t\t\t\t\t\t<KolProgress _variant=\"cycle\" _max={100} _value={66} _label=\"Progress\" />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-6 xl:col-span-3\" _label=\"Button, LinkButton and Tab\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolTabs _label=\"\" _selected={0} _tabs={[{ _label: 'Button' }, { _label: 'LinkButton' }, { _label: 'Disabled Tab', _disabled: true }]}>\n\t\t\t\t\t\t\t<div className=\"grid gap-2 py-2\">\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ left: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ left: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-left\" _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ right: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ right: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-right\" _label=\"secondary\" _variant=\"secondary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ top: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ top: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-up\" _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ bottom: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ bottom: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-down\" _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _label=\"ghost\" _variant=\"ghost\"></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _label=\"ghost\" _variant=\"ghost\"></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _icons=\"fa-solid fa-house\" _hideLabel _label=\"ghost\" _variant=\"ghost\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"grid gap-2 py-2\">\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ left: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ left: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-left\" _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ right: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ right: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-right\" _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ top: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ top: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-up\" _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ bottom: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ bottom: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-down\" _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"ghost\" _variant=\"ghost\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"ghost\" _variant=\"ghost\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons=\"fa-solid fa-house\" _hideLabel _label=\"ghost\" _variant=\"ghost\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolTabs>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-2 xl:col-span-2\" _label=\"Accordion, Link and ButtonLink\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolAccordion _label=\"Links\" _level={3} _open>\n\t\t\t\t\t\t\t<div className=\"grid gap-2\" slot=\"\">\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link text\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"fa-solid fa-house\" _label=\"Link text with icon\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"fa-solid fa-house\" _hideLabel _label=\"Link text with icon only\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"/\" _label=\"Visited link\"></KolLink>\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\tI am a <KolLink _href=\"#/back-page\" _label=\"externer Link\" _target=\"w3c\"></KolLink> in the running text.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t\t<KolAccordion _label=\"ButtonLinks\" _level={3}>\n\t\t\t\t\t\t\t<div className=\"grid gap-2\" slot=\"\">\n\t\t\t\t\t\t\t\t<KolButtonLink _label=\"Link text\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<KolButtonLink _icons=\"fa-solid fa-house\" _label=\"Link text with icon\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<KolButtonLink _icons=\"fa-solid fa-house\" _hideLabel _label=\"Link text with icon only\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\tI am a <KolButtonLink _label=\"Link\"></KolButtonLink> in the running text.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<KolButtonLink\n\t\t\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t_label=\"Icons\"\n\t\t\t\t\t\t\t\t></KolButtonLink>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-3\" _label=\"Alert\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolAlert _label=\"Default message\" _type=\"default\">\n\t\t\t\t\t\t\tThis is the text of the alert.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t\t<KolAlert _type=\"success\">Success message text</KolAlert>\n\t\t\t\t\t\t<KolAlert _type=\"error\" _hasCloser>\n\t\t\t\t\t\t\tThis is a error message text.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t\t<KolAlert _label=\"Info card\" _type=\"info\" _variant=\"card\">\n\t\t\t\t\t\t\tThis is the text of the alert.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t\t<KolAlert _label=\"Warning card\" _type=\"warning\" _hasCloser _variant=\"card\">\n\t\t\t\t\t\t\tThis is the text of the alert.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-2 xl:col-span-2\" _label=\"Nav and Breadcrumb\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<KolNav\n\t\t\t\t\t\t\t\t_label=\"Main navigation\"\n\t\t\t\t\t\t\t\t_links={[\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t_label: 'Homepage',\n\t\t\t\t\t\t\t\t\t\t_icons: 'fa-solid fa-house',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t_label: '2 Navigation point',\n\t\t\t\t\t\t\t\t\t\t_icons: 'fa-solid fa-house',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t_active: true,\n\t\t\t\t\t\t\t\t\t\t_label: '3 Navigation point',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t_icons: 'fa-solid fa-house',\n\t\t\t\t\t\t\t\t\t\t_children: [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.1 Navigation point',\n\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'fa-solid fa-house',\n\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.2 External navigation point',\n\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'fa-solid fa-house',\n\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t\t_target: '_blank',\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.3 Navigation point',\n\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'fa-solid fa-house',\n\t\t\t\t\t\t\t\t\t\t\t\t_children: [\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_active: true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.3.1 Navigation point (active)',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'fa-solid fa-house',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ _label: '3.3.2 Navigation point', _icons: 'fa-solid fa-house', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{ _label: '3 Navigation point', _icons: 'fa-solid fa-house', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t_hasCompactButton\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{/* <KolSkipNav></KolSkipNav> */}\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<KolBreadcrumb\n\t\t\t\t\t\t\t\t_label=\"Breadcrumb aus Text-Links\"\n\t\t\t\t\t\t\t\t_links={[\n\t\t\t\t\t\t\t\t\t{ _label: 'Homepage', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t\t{ _label: 'Bottom of the homepage', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t></KolBreadcrumb>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5\" _label=\"Input\" _level={2}>\n\t\t\t\t\t<KolForm slot=\"\">\n\t\t\t\t\t\t<div className=\"grid gap-4 sm:grid-cols-2 md:grid-cols-3 p-2\">\n\t\t\t\t\t\t\t<KolInputColor _label={`Color`} />\n\t\t\t\t\t\t\t<KolInputFile _label={`Upload file`} />\n\t\t\t\t\t\t\t<KolInputNumber _label={`Number input`} />\n\t\t\t\t\t\t\t<KolInputDate _type=\"date\" _label={`Date`} />\n\t\t\t\t\t\t\t<KolInputEmail\n\t\t\t\t\t\t\t\t_icons=\"{'left': 'fa-solid fa-house'}\"\n\t\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: 'Test of an error message' }}\n\t\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t\t_label={`E-mail address`}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<KolInputText _hint=\"I am a hint.\" _label={`First name`} />\n\t\t\t\t\t\t\t<KolInputPassword _label={`password`} />\n\t\t\t\t\t\t\t<KolSelect _options=\"[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]\" _label={`Stimmung`} />\n\t\t\t\t\t\t\t<KolInputRange _min={0} _max={50} _value={25} _label={`Slider`} />\n\t\t\t\t\t\t\t<KolInputRadio className=\"herr-frau\" _options=\"[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]\" _value=\"1\" _label={`Salutation`} />\n\t\t\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t\t\t<KolInputRadio _orientation=\"horizontal\" _options=\"[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]\" _value=\"0\" _label={`Salutation`} />\n\t\t\t\t\t\t\t\t<KolInputCheckbox _label=\"\">\n\t\t\t\t\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\t\t\t\t\tI accept the <KolAbbr _label=\"General Terms and Conditions\">AGB</KolAbbr>.\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</KolInputCheckbox>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<KolTextarea _rows={4} _label={`Textarea`} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolForm>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5\" _label=\"Table with Pagination\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"gap-2 p-2 flex flex-col\">\n\t\t\t\t\t\t<KolTableStateful _label=\"Table\" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t</div>\n\t\t\t<KolVersion _label=\"5.0.2-test.2\"></KolVersion>\n\t\t\t{/* <KolImage _src=\"abgrenzung.jpg\" _alt=\"KoliBri Darstellung\"></KolImage> */}\n\t\t\t{/* <KolIndentedText></KolIndentedText> */}\n\t\t\t{/* <KolQuote></KolQuote> */}\n\t\t</div>\n\t);\n};\n",
|
|
520
|
+
"code": "import type { ButtonProps, KoliBriTableCell, KoliBriTableHeaders } from '@public-ui/components';\nimport {\n\tKolAbbr,\n\tKolAccordion,\n\tKolAlert,\n\tKolBadge,\n\tKolBreadcrumb,\n\tKolButton,\n\tKolButtonLink,\n\tKolCard,\n\tKolDetails,\n\tKolForm,\n\tKolHeading,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolKolibri,\n\tKolLink,\n\tKolLinkButton,\n\tKolNav,\n\tKolProgress,\n\tKolSelect,\n\tKolTableStateful,\n\tKolTabs,\n\tKolTextarea,\n\tKolVersion,\n} from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { getRoot } from '../../shares/react-roots';\nimport { getTheme, getThemeName } from '../../shares/store';\nimport { TABLE_DATA, type TableDataType } from './table-data';\n\nfunction KolButtonWrapper({ _on, ...other }: ButtonProps & { style: Record<string, unknown> }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton {...other} _on={dummyEventHandler} />;\n}\n\nconst TABLE_HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: 'Workdays',\n\t\t\t\tcolSpan: 5,\n\t\t\t\twidth: 500,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Weekend',\n\t\t\t\tcolSpan: 2,\n\t\t\t\twidth: 200,\n\t\t\t},\n\t\t],\n\t\t[\n\t\t\t{\n\t\t\t\tkey: 'monday',\n\t\t\t\tlabel: 'Monday',\n\t\t\t\trender: (el: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolButtonWrapper _label={label} style={{ fontSize: '75%' }} />);\n\t\t\t\t},\n\t\t\t\tcompareFn: (first, second) => {\n\t\t\t\t\tif ((first as TableDataType).monday < (second as TableDataType).monday) {\n\t\t\t\t\t\treturn -1;\n\t\t\t\t\t}\n\t\t\t\t\tif ((first as TableDataType).monday > (second as TableDataType).monday) {\n\t\t\t\t\t\treturn 1;\n\t\t\t\t\t}\n\t\t\t\t\treturn 0;\n\t\t\t\t},\n\t\t\t\tsortDirection: 'ASC',\n\t\t\t\ttextAlign: 'right',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'tuesday',\n\t\t\t\tlabel: 'Tuesday',\n\t\t\t\trender: (el: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#060\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\tcompareFn: (first, second) => {\n\t\t\t\t\tif ((first as TableDataType).tuesday < (second as TableDataType).tuesday) {\n\t\t\t\t\t\treturn -1;\n\t\t\t\t\t}\n\t\t\t\t\tif ((first as TableDataType).tuesday > (second as TableDataType).tuesday) {\n\t\t\t\t\t\treturn 1;\n\t\t\t\t\t}\n\t\t\t\t\treturn 0;\n\t\t\t\t},\n\t\t\t\tsortDirection: 'DESC',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'wednesday',\n\t\t\t\tlabel: 'Wednesday',\n\t\t\t\trender: (el: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#006\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 110,\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'thursday',\n\t\t\t\tlabel: 'Thursday',\n\t\t\t\trender: (el: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#600\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'friday',\n\t\t\t\tlabel: 'Friday',\n\t\t\t\trender: (el: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#303\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'saturday',\n\t\t\t\tlabel: 'Saturday',\n\t\t\t\trender: (el: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#330\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'sunday',\n\t\t\t\tlabel: 'Sunday',\n\t\t\t\trender: (el: HTMLElement, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\trenderCellContent(el, <KolBadge _color=\"#033\" _label={label}></KolBadge>);\n\t\t\t\t},\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t],\n\t],\n\tvertical: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: 'Early',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Noon',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Evening',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Night',\n\t\t\t\twidth: 100,\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst renderCellContent = (element: HTMLElement, content: React.ReactNode) => {\n\tconst renderElement = document.createElement('div');\n\trenderElement.setAttribute('role', 'presentation');\n\telement.innerHTML = '';\n\telement.appendChild(renderElement);\n\tgetRoot(renderElement).render(content);\n};\n\nexport const HandoutBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<div className=\"grid gap-4\">\n\t\t\t<div className=\"grid gap-4 md:grid-cols-[auto_1fr_1fr] items-center\">\n\t\t\t\t<KolKolibri className=\"block w-75px\" _labeled={false}></KolKolibri>\n\t\t\t\t<KolHeading _label=\"\" _level={1}>\n\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\tKolibri-Handout <small>for {getThemeName(getTheme())}</small>\n\t\t\t\t\t</span>\n\t\t\t\t</KolHeading>\n\t\t\t\t<KolDetails _label=\"Abstract\" _open>\n\t\t\t\t\tThe handout shows a selection of KoliBri components in the style of <strong>{getThemeName(getTheme())}</strong>. Since KoliBri offers self-contained,\n\t\t\t\t\taccessible web components that can be customized to your own corporate design using theming, you don't have to develop these components yourself.\n\t\t\t\t\tFor more information read our documentation and follow us (\n\t\t\t\t\t<KolLink _label=\"https://github.com/public-ui/kolibri\" _href=\"https://github.com/public-ui/kolibri\" _target=\"_blank\" />\n\t\t\t\t\t).\n\t\t\t\t</KolDetails>\n\t\t\t</div>\n\t\t\t<div className=\"grid gap-4 sm:grid-cols-6 md:grid-cols-6 xl:grid-cols-12\">\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2\" _label=\"Heading\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 1\" _level={1}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 2\" _level={2}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 3\" _level={3}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 4\" _level={4}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 5\" _level={5}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 6\" _level={6}></KolHeading>\n\t\t\t\t\t\t<KolHeading _label=\"Heading Level 6\" _secondaryHeadline=\"Lessons\" _level={6}></KolHeading>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t{/* <KolCard className=\"col-span-3\" _label=\"Accordion\" _level={2}>\n\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 1\" _level={1} _open>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 1</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 2\" _level={2}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 2</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 3\" _level={3}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 3</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 4\" _level={4}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 4</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 5\" _level={5}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 5</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t<KolAccordion _label=\"Überschrift Level 6\" _level={6}>\n\t\t\t\t\t\t<div slot=\"\">Inhalt Accordion Tab 6</div>\n\t\t\t\t\t</KolAccordion>\n\t\t\t\t</div>\n\t\t\t</KolCard> */}\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2\" _label=\"Abbreviation and Progress\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tI am <KolAbbr _label=\"as an example\">e.g.</KolAbbr> an abbreviation.\n\t\t\t\t\t\t</p>\n\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tI am <KolAbbr>e.g.</KolAbbr> an abbreviation without label.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<KolProgress _variant=\"bar\" _max={100} _value={33} _label=\"Progress\" />\n\t\t\t\t\t\t<KolProgress _variant=\"cycle\" _max={100} _value={66} _label=\"Progress\" />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-6 xl:col-span-3\" _label=\"Button, LinkButton and Tab\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolTabs _label=\"\" _selected={0} _tabs={[{ _label: 'Button' }, { _label: 'LinkButton' }, { _label: 'Disabled Tab', _disabled: true }]}>\n\t\t\t\t\t\t\t<div className=\"grid gap-2 py-2\">\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ left: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ left: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-left\" _label=\"primary\" _variant=\"primary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ right: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ right: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-right\" _label=\"secondary\" _variant=\"secondary\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ top: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ top: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-up\" _label=\"danger\" _variant=\"danger\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _icons={{ bottom: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _icons={{ bottom: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-chevron-down\" _label=\"normal\" _variant=\"normal\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolButton _label=\"ghost\" _variant=\"ghost\"></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _disabled _label=\"ghost\" _variant=\"ghost\"></KolButton>\n\t\t\t\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _hideLabel _label=\"ghost\" _variant=\"ghost\" _on={dummyEventHandler}></KolButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"grid gap-2 py-2\">\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ left: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ left: 'kolicon-chevron-left' }} _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-left\" _label=\"primary\" _variant=\"primary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ right: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ right: 'kolicon-chevron-right' }} _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-right\" _label=\"secondary\" _variant=\"secondary\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ top: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ top: 'kolicon-chevron-up' }} _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-up\" _label=\"danger\" _variant=\"danger\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ bottom: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons={{ bottom: 'kolicon-chevron-down' }} _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _hideLabel _icons=\"kolicon-chevron-down\" _label=\"normal\" _variant=\"normal\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center\">\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"ghost\" _variant=\"ghost\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _label=\"ghost\" _variant=\"ghost\"></KolLinkButton>\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons=\"kolicon-house\" _hideLabel _label=\"ghost\" _variant=\"ghost\"></KolLinkButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolTabs>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-2 xl:col-span-2\" _label=\"Accordion, Link and ButtonLink\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolAccordion _label=\"Links\" _level={3} _open>\n\t\t\t\t\t\t\t<div className=\"grid gap-2\" slot=\"\">\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link text\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"kolicon-house\" _label=\"Link text with icon\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"kolicon-house\" _hideLabel _label=\"Link text with icon only\"></KolLink>\n\t\t\t\t\t\t\t\t<KolLink _href=\"/\" _label=\"Visited link\"></KolLink>\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\tI am a <KolLink _href=\"#/back-page\" _label=\"externer Link\" _target=\"w3c\"></KolLink> in the running text.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t\t<KolAccordion _label=\"ButtonLinks\" _level={3}>\n\t\t\t\t\t\t\t<div className=\"grid gap-2\" slot=\"\">\n\t\t\t\t\t\t\t\t<KolButtonLink _label=\"Link text\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<KolButtonLink _icons=\"kolicon-house\" _label=\"Link text with icon\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<KolButtonLink _icons=\"kolicon-house\" _hideLabel _label=\"Link text with icon only\"></KolButtonLink>\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\tI am a <KolButtonLink _label=\"Link\"></KolButtonLink> in the running text.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<KolButtonLink\n\t\t\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\t\t\tleft: 'kolicon-chevron-left',\n\t\t\t\t\t\t\t\t\t\tright: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t\t\t\ttop: 'kolicon-chevron-up',\n\t\t\t\t\t\t\t\t\t\tbottom: 'kolicon-chevron-down',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t_label=\"Icons\"\n\t\t\t\t\t\t\t\t></KolButtonLink>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolAccordion>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-3\" _label=\"Alert\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<KolAlert _label=\"Default message\" _type=\"default\">\n\t\t\t\t\t\t\tThis is the text of the alert.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t\t<KolAlert _type=\"success\">Success message text</KolAlert>\n\t\t\t\t\t\t<KolAlert _type=\"error\" _hasCloser>\n\t\t\t\t\t\t\tThis is a error message text.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t\t<KolAlert _label=\"Info card\" _type=\"info\" _variant=\"card\">\n\t\t\t\t\t\t\tThis is the text of the alert.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t\t<KolAlert _label=\"Warning card\" _type=\"warning\" _hasCloser _variant=\"card\">\n\t\t\t\t\t\t\tThis is the text of the alert.\n\t\t\t\t\t\t</KolAlert>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-2 xl:col-span-2\" _label=\"Nav and Breadcrumb\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"grid gap-2 p-2\">\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<KolNav\n\t\t\t\t\t\t\t\t_label=\"Main navigation\"\n\t\t\t\t\t\t\t\t_links={[\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t_label: 'Homepage',\n\t\t\t\t\t\t\t\t\t\t_icons: 'kolicon-house',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t_label: '2 Navigation point',\n\t\t\t\t\t\t\t\t\t\t_icons: 'kolicon-house',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t_active: true,\n\t\t\t\t\t\t\t\t\t\t_label: '3 Navigation point',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t_icons: 'kolicon-house',\n\t\t\t\t\t\t\t\t\t\t_children: [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.1 Navigation point',\n\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'kolicon-house',\n\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.2 External navigation point',\n\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'kolicon-house',\n\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t\t_target: '_blank',\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.3 Navigation point',\n\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'kolicon-house',\n\t\t\t\t\t\t\t\t\t\t\t\t_children: [\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_active: true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_label: '3.3.1 Navigation point (active)',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_icons: 'kolicon-house',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ _label: '3.3.2 Navigation point', _icons: 'kolicon-house', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t{ _label: '3 Navigation point', _icons: 'kolicon-house', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t_hasCompactButton\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{/* <KolSkipNav></KolSkipNav> */}\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<KolBreadcrumb\n\t\t\t\t\t\t\t\t_label=\"Breadcrumb aus Text-Links\"\n\t\t\t\t\t\t\t\t_links={[\n\t\t\t\t\t\t\t\t\t{ _label: 'Homepage', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t\t{ _label: 'Bottom of the homepage', _href: '#/back-page' },\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t_label: 'Underside of the underside',\n\t\t\t\t\t\t\t\t\t\t_href: '#/back-page',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t></KolBreadcrumb>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5\" _label=\"Input\" _level={2}>\n\t\t\t\t\t<KolForm slot=\"\">\n\t\t\t\t\t\t<div className=\"grid gap-4 sm:grid-cols-2 md:grid-cols-3 p-2\">\n\t\t\t\t\t\t\t<KolInputColor _label={`Color`} />\n\t\t\t\t\t\t\t<KolInputFile _label={`Upload file`} />\n\t\t\t\t\t\t\t<KolInputNumber _label={`Number input`} />\n\t\t\t\t\t\t\t<KolInputDate _type=\"date\" _label={`Date`} />\n\t\t\t\t\t\t\t<KolInputEmail\n\t\t\t\t\t\t\t\t_icons=\"{'left': 'kolicon-house'}\"\n\t\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: 'Test of an error message' }}\n\t\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t\t_label={`E-mail address`}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<KolInputText _hint=\"I am a hint.\" _label={`First name`} />\n\t\t\t\t\t\t\t<KolInputPassword _label={`password`} />\n\t\t\t\t\t\t\t<KolSelect _options=\"[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]\" _label={`Stimmung`} />\n\t\t\t\t\t\t\t<KolInputRange _min={0} _max={50} _value={25} _label={`Slider`} />\n\t\t\t\t\t\t\t<KolInputRadio className=\"herr-frau\" _options=\"[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]\" _value=\"1\" _label={`Salutation`} />\n\t\t\t\t\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t\t\t\t\t<KolInputRadio _orientation=\"horizontal\" _options=\"[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]\" _value=\"0\" _label={`Salutation`} />\n\t\t\t\t\t\t\t\t<KolInputCheckbox _label=\"\">\n\t\t\t\t\t\t\t\t\t<span slot=\"expert\">\n\t\t\t\t\t\t\t\t\t\tI accept the <KolAbbr _label=\"General Terms and Conditions\">AGB</KolAbbr>.\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</KolInputCheckbox>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<KolTextarea _rows={4} _label={`Textarea`} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolForm>\n\t\t\t\t</KolCard>\n\t\t\t\t<KolCard className=\"col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5\" _label=\"Table with Pagination\" _level={2}>\n\t\t\t\t\t<div slot=\"\" className=\"gap-2 p-2 flex flex-col\">\n\t\t\t\t\t\t<KolTableStateful _label=\"Table\" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t</div>\n\t\t\t<KolVersion _label=\"5.0.2-test.2\"></KolVersion>\n\t\t\t{/* <KolImage _src=\"abgrenzung.jpg\" _alt=\"KoliBri Darstellung\"></KolImage> */}\n\t\t\t{/* <KolIndentedText></KolIndentedText> */}\n\t\t\t{/* <KolQuote></KolQuote> */}\n\t\t</div>\n\t);\n};\n",
|
|
513
521
|
"kind": "sample"
|
|
514
522
|
},
|
|
515
523
|
{
|
|
@@ -544,12 +552,20 @@
|
|
|
544
552
|
"code": "import React from 'react';\n\nimport { KolHeading } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const HeadingSecondary: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolHeading with the prop <code>_secondaryHeadline</code> in use.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolHeading _label=\"This is a H1 headline\" _secondaryHeadline=\"This is a secondary headline\" _level={1} />\n\t\t</div>\n\t</>\n);\n",
|
|
545
553
|
"kind": "sample"
|
|
546
554
|
},
|
|
555
|
+
{
|
|
556
|
+
"id": "sample/icon/all-kolicons",
|
|
557
|
+
"group": "icon",
|
|
558
|
+
"name": "all-kolicons",
|
|
559
|
+
"path": "packages/samples/react/src/components/icon/all-kolicons.tsx",
|
|
560
|
+
"code": "import React, { useEffect, useState } from 'react';\n\nimport { KolIcon } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const IconAllKolicons: FC = () => {\n\tconst [icons, setIcons] = useState<object>({});\n\n\tuseEffect(() => {\n\t\tfetch('/assets/kolicons/kolicons.json')\n\t\t\t.then((response) => response.json())\n\t\t\t.then((data) => {\n\t\t\t\tsetIcons(data);\n\t\t\t});\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows all kolicons with their names.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid grid-cols-2 gap-8 p-8\">\n\t\t\t\t{Object.entries(icons).map(([key]) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div className=\"flex gap-4\" key={key}>\n\t\t\t\t\t\t\t<KolIcon _label=\"\" _icons={'kolicon-' + key} />\n\t\t\t\t\t\t\t<span>kolicon-{key}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
561
|
+
"kind": "sample"
|
|
562
|
+
},
|
|
547
563
|
{
|
|
548
564
|
"id": "sample/icon/basic",
|
|
549
565
|
"group": "icon",
|
|
550
566
|
"name": "basic",
|
|
551
567
|
"path": "packages/samples/react/src/components/icon/basic.tsx",
|
|
552
|
-
"code": "import React from 'react';\n\nimport { KolIcon } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const IconBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolIcon renders codicon icons. This sample shows regular icons and one with a custom style-property, changing the icon color.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"kolicon-alert-info\" />\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"kolicon-kolibri\" />\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"
|
|
568
|
+
"code": "import React from 'react';\n\nimport { KolIcon } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const IconBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolIcon renders codicon icons. This sample shows regular icons and one with a custom style-property, changing the icon color.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"kolicon-alert-info\" />\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"kolicon-kolibri\" />\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"kolicon-house\" />\n\t\t\t<KolIcon className=\"block\" _label=\"\" _icons=\"kolicon-settings\" />\n\n\t\t\t<KolIcon\n\t\t\t\tclassName=\"block w-[1em] h-[1em]\"\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: 'red',\n\t\t\t\t}}\n\t\t\t\t_label=\"\"\n\t\t\t\t_icons=\"kolicon-house\"\n\t\t\t/>\n\t\t</div>\n\t</>\n);\n",
|
|
553
569
|
"kind": "sample"
|
|
554
570
|
},
|
|
555
571
|
{
|
|
@@ -733,7 +749,15 @@
|
|
|
733
749
|
"group": "input-text",
|
|
734
750
|
"name": "basic",
|
|
735
751
|
"path": "packages/samples/react/src/components/input-text/basic.tsx",
|
|
736
|
-
"code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story showcases the most important InputText variants: default, required, validation error, disabled, read-only, and with icons.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText _label=\"Name\" _value=\"Anderson-Clark\" />\n\t\t\t<KolInputText _label=\"Name\" _required _msg={{ _type: 'error', _description: 'Please enter your name' }} _touched />\n\t\t\t<KolInputText _label=\"Name\" _required _hint=\"Enter your surname\" />\n\t\t\t<KolInputText _label=\"Name\" _value=\"Anderson-Clark\" _disabled />\n\t\t\t<KolInputText _label=\"Name\" _readOnly _value=\"Anderson-Clark\" />\n\t\t\t<KolInputText _label=\"Name\" _icons=\"
|
|
752
|
+
"code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story showcases the most important InputText variants: default, required, validation error, disabled, read-only, and with icons.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText _label=\"Name\" _value=\"Anderson-Clark\" />\n\t\t\t<KolInputText _label=\"Name\" _required _msg={{ _type: 'error', _description: 'Please enter your name' }} _touched />\n\t\t\t<KolInputText _label=\"Name\" _required _hint=\"Enter your surname\" />\n\t\t\t<KolInputText _label=\"Name\" _value=\"Anderson-Clark\" _disabled />\n\t\t\t<KolInputText _label=\"Name\" _readOnly _value=\"Anderson-Clark\" />\n\t\t\t<KolInputText _label=\"Name\" _icons=\"kolicon-house\" _value=\"Anderson-Clark\" />\n\t\t</div>\n\t</>\n);\n",
|
|
753
|
+
"kind": "sample"
|
|
754
|
+
},
|
|
755
|
+
{
|
|
756
|
+
"id": "sample/input-text/counter",
|
|
757
|
+
"group": "input-text",
|
|
758
|
+
"name": "counter",
|
|
759
|
+
"path": "packages/samples/react/src/components/input-text/counter.tsx",
|
|
760
|
+
"code": "import { KolInputText } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const InputTextCounter: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This story showcases an input with a counter for the chars in the field. Maximal length is 30.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolInputText _label=\"Name\" _icons=\"kolicon-house\" _value=\"Anderson-Clark\" _hasCounter _maxLength={30} />\n\t\t</div>\n\t</>\n);\n",
|
|
737
761
|
"kind": "sample"
|
|
738
762
|
},
|
|
739
763
|
{
|
|
@@ -805,7 +829,7 @@
|
|
|
805
829
|
"group": "input-text",
|
|
806
830
|
"name": "smart-button",
|
|
807
831
|
"path": "packages/samples/react/src/components/input-text/smart-button.tsx",
|
|
808
|
-
"code": "import { ToasterService } from '@public-ui/components';\nimport { KolInputText } from '@public-ui/react-v19';\nimport * as React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst smartButtonProps = {\n\t_icons: 'kolicon-alert-info',\n\t_hideLabel: true,\n};\n\nconst icons = {\n\tleft: {\n\t\ticon: '
|
|
832
|
+
"code": "import { ToasterService } from '@public-ui/components';\nimport { KolInputText } from '@public-ui/react-v19';\nimport * as React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst smartButtonProps = {\n\t_icons: 'kolicon-alert-info',\n\t_hideLabel: true,\n};\n\nconst icons = {\n\tleft: {\n\t\ticon: 'kolicon-eye',\n\t},\n\tright: {\n\t\ticon: 'kolicon-check',\n\t},\n};\n\nexport const InputTextSmartButton = () => {\n\tconst toaster = ToasterService.getInstance(document);\n\n\tconst handleClick = {\n\t\tonClick: () => {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Smart-Button clicked',\n\t\t\t\tlabel: `Toaster`,\n\t\t\t\ttype: 'default',\n\t\t\t});\n\t\t},\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows the smart button feature for KolInputText. It allows the usage of a button inside the bnput.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolInputText\n\t\t\t\t\t_label=\"Input with button and icons\"\n\t\t\t\t\t_type=\"text\"\n\t\t\t\t\t_smartButton={{\n\t\t\t\t\t\t...smartButtonProps,\n\t\t\t\t\t\t_label: 'Open Toast',\n\t\t\t\t\t\t_on: handleClick,\n\t\t\t\t\t}}\n\t\t\t\t\t_icons={icons}\n\t\t\t\t></KolInputText>\n\t\t\t\t<KolInputText\n\t\t\t\t\t_label=\"Disabled input with button and icons\"\n\t\t\t\t\t_disabled\n\t\t\t\t\t_type=\"text\"\n\t\t\t\t\t_smartButton={{\n\t\t\t\t\t\t...smartButtonProps,\n\t\t\t\t\t\t_label: 'Disabled Button',\n\t\t\t\t\t}}\n\t\t\t\t\t_icons={icons}\n\t\t\t\t></KolInputText>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
809
833
|
"kind": "sample"
|
|
810
834
|
},
|
|
811
835
|
{
|
|
@@ -845,7 +869,7 @@
|
|
|
845
869
|
"group": "link",
|
|
846
870
|
"name": "access-key",
|
|
847
871
|
"path": "packages/samples/react/src/components/link/access-key.tsx",
|
|
848
|
-
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkAccessKey: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolLink with access key. The access keys can be used to trigger the buttons using the keyboard.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"With S access key\" _accessKey=\"S\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Very small s\" _accessKey=\"s\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Access key does not appear in label\" _accessKey=\"s\" />\n\t\t\t<KolLink _hideLabel _icons=\"
|
|
872
|
+
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkAccessKey: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolLink with access key. The access keys can be used to trigger the buttons using the keyboard.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"With S access key\" _accessKey=\"S\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Very small s\" _accessKey=\"s\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Access key does not appear in label\" _accessKey=\"s\" />\n\t\t\t<KolLink _hideLabel _icons=\"kolicon-house\" _href=\"#/back-page\" _label=\"access key without label\" _accessKey=\"s\" />\n\t\t</div>\n\t</>\n);\n",
|
|
849
873
|
"kind": "sample"
|
|
850
874
|
},
|
|
851
875
|
{
|
|
@@ -861,7 +885,7 @@
|
|
|
861
885
|
"group": "link",
|
|
862
886
|
"name": "basic",
|
|
863
887
|
"path": "packages/samples/react/src/components/link/basic.tsx",
|
|
864
|
-
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolLink renders a link. This sample shows disabled links, links with hidden label, the boolean _inline property and links with different CSS{' '}\n\t\t\t\t<code>display</code>-properties.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _inline={false} _label=\"Simple Link\" />\n\t\t\t<KolLink _disabled _href=\"#/back-page\" _inline={false} _label=\"Simple Link (disabled)\" />\n\t\t\t<KolLink _hideLabel _icons=\"
|
|
888
|
+
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tKolLink renders a link. This sample shows disabled links, links with hidden label, the boolean _inline property and links with different CSS{' '}\n\t\t\t\t<code>display</code>-properties.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _inline={false} _label=\"Simple Link\" />\n\t\t\t<KolLink _disabled _href=\"#/back-page\" _inline={false} _label=\"Simple Link (disabled)\" />\n\t\t\t<KolLink _hideLabel _icons=\"kolicon-house\" _href=\"#/back-page\" _inline={false} _label=\"Icon Link\" />\n\t\t\t<KolLink _disabled _hideLabel _icons=\"kolicon-house\" _href=\"#/back-page\" _inline={false} _label=\"Icon Link (disabled)\" />\n\t\t\t<p>\n\t\t\t\tIn this paragraph, a link is inserted that contains no additional attributes. <KolLink _href=\"#/back-page\" _label=\"Simple Link\" /> It is rendered by\n\t\t\t\tdefault as a <strong>inline element</strong>.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tIn this paragraph, a link is inserted that is rendered as an inline-block element.{' '}\n\t\t\t\t<KolLink class=\"d-inline-block\" _accessKey=\"S\" _href=\"#/back-page\" _label=\"Simple Link\" />. This allows you to assign width, height, and other\n\t\t\t\tproperties to it using CSS styles.\n\t\t\t\t<br />\n\t\t\t\t<br />\n\t\t\t\tAfter that, there is a link that is rendered as a block element. <KolLink class=\"d-block\" _href=\"#/back-page\" _label=\"Simple Link\" />, therefore, I span\n\t\t\t\tthe entire width of the parent element, causing a line break.\n\t\t\t</p>\n\t\t</div>\n\t</>\n);\n",
|
|
865
889
|
"kind": "sample"
|
|
866
890
|
},
|
|
867
891
|
{
|
|
@@ -869,7 +893,7 @@
|
|
|
869
893
|
"group": "link",
|
|
870
894
|
"name": "icons",
|
|
871
895
|
"path": "packages/samples/react/src/components/link/icons.tsx",
|
|
872
|
-
"code": "import React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkIcons: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolLink with icons in different alignments and combinations.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _icons=\"
|
|
896
|
+
"code": "import React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkIcons: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolLink with icons in different alignments and combinations.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _icons=\"kolicon-house\" _label=\"I am a link with an icon on the left\" _href=\"#/back-page\" />\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon on the right\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with an icon at the top\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with icon below\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t\tleft: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_label=\"I am a link with all icons\"\n\t\t\t\t_href=\"#/back-page\"\n\t\t\t/>\n\n\t\t\t<KolLink _icons=\"kolicon-house\" _href=\"https://public-ui.github.io/\" _label=\"I am a external link with an icon on the left\" _target=\"_blank\" />\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external linkwith an icon on the right\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with an icon at the top\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_icons={{\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with icon below\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t/>\n\t\t\t<KolLink\n\t\t\t\t_href=\"https://public-ui.github.io/\"\n\t\t\t\t_label=\"I am a external link with all icons\"\n\t\t\t\t_target=\"_blank\"\n\t\t\t\t_icons={{\n\t\t\t\t\ttop: 'kolicon-house',\n\t\t\t\t\tright: 'kolicon-house',\n\t\t\t\t\tbottom: 'kolicon-house',\n\t\t\t\t\tleft: 'kolicon-house',\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t</>\n);\n",
|
|
873
897
|
"kind": "sample"
|
|
874
898
|
},
|
|
875
899
|
{
|
|
@@ -880,6 +904,14 @@
|
|
|
880
904
|
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkImage: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolLink can be used with slot-content instead of a label as well. This sample demonstrates the slot content used to display an image.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"I am a link that is rendered as text\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"\">\n\t\t\t\t<img alt=\"Presentation of the KoliBri theming\" slot=\"expert\" src=\"abgrenzung.jpg\" width=\"300\" />\n\t\t\t</KolLink>\n\t\t</div>\n\t</>\n);\n",
|
|
881
905
|
"kind": "sample"
|
|
882
906
|
},
|
|
907
|
+
{
|
|
908
|
+
"id": "sample/link/linked-headline",
|
|
909
|
+
"group": "link",
|
|
910
|
+
"name": "linked-headline",
|
|
911
|
+
"path": "packages/samples/react/src/components/link/linked-headline.tsx",
|
|
912
|
+
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkHeadline: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows a linked headline with anchor.</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"/#/link/linked-headline#headline1\" _label=\"\">\n\t\t\t\t<KolHeading _label=\"I'm H2-heading number one\" _level={2} slot=\"expert\" id=\"headline1\" />\n\t\t\t</KolLink>\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t</p>\n\t\t\t<KolLink _href=\"/#/link/linked-headline#headline2\" _label=\"\">\n\t\t\t\t<KolHeading _label=\"I'm H2-heading number two\" _level={2} slot=\"expert\" id=\"headline2\" />\n\t\t\t</KolLink>\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t</p>\n\t\t\t<KolLink _href=\"/#/link/linked-headline#headline3\" _label=\"\">\n\t\t\t\t<KolHeading _label=\"I'm H2-heading number three\" _level={2} slot=\"expert\" id=\"headline3\" />\n\t\t\t</KolLink>\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\tvoluptua. 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.\n\t\t\t</p>\n\t\t</div>\n\t</>\n);\n",
|
|
913
|
+
"kind": "sample"
|
|
914
|
+
},
|
|
883
915
|
{
|
|
884
916
|
"id": "sample/link/react-router",
|
|
885
917
|
"group": "link",
|
|
@@ -893,7 +925,7 @@
|
|
|
893
925
|
"group": "link",
|
|
894
926
|
"name": "short-key",
|
|
895
927
|
"path": "packages/samples/react/src/components/link/short-key.tsx",
|
|
896
|
-
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkShortKey: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"With S short key\" _shortKey=\"S\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Very small s\" _shortKey=\"s\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Short key does not appear in label\" _shortKey=\"s\" />\n\t\t\t<KolLink _hideLabel _icons=\"
|
|
928
|
+
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkShortKey: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"grid gap-4\">\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"With S short key\" _shortKey=\"S\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Very small s\" _shortKey=\"s\" />\n\t\t\t<KolLink _href=\"#/back-page\" _label=\"Short key does not appear in label\" _shortKey=\"s\" />\n\t\t\t<KolLink _hideLabel _icons=\"kolicon-house\" _href=\"#/back-page\" _label=\"short key without label\" _shortKey=\"s\" />\n\t\t</div>\n\t</>\n);\n",
|
|
897
929
|
"kind": "sample"
|
|
898
930
|
},
|
|
899
931
|
{
|
|
@@ -901,7 +933,7 @@
|
|
|
901
933
|
"group": "link",
|
|
902
934
|
"name": "target",
|
|
903
935
|
"path": "packages/samples/react/src/components/link/target.tsx",
|
|
904
|
-
"code": "import React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkTarget: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolLink with different <code>_target</code>-properties.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"text-base d-flex gap-4\">\n\t\t\t<ul>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link without target\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link with target (_self)\" _target=\"_self\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link with target (_blank)\" _target=\"_blank\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"
|
|
936
|
+
"code": "import React from 'react';\n\nimport { KolLink } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkTarget: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolLink with different <code>_target</code>-properties.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<div className=\"text-base d-flex gap-4\">\n\t\t\t<ul>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link without target\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link with target (_self)\" _target=\"_self\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Link with target (_blank)\" _target=\"_blank\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"kolicon-house\" _hideLabel _label=\"Link without target\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"kolicon-house\" _hideLabel _label=\"Link with target (_self)\" _target=\"_self\" />\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<KolLink _href=\"#/back-page\" _icons=\"kolicon-house\" _hideLabel _label=\"Link with target (_blank)\" _target=\"_blank\" />\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t</>\n);\n",
|
|
905
937
|
"kind": "sample"
|
|
906
938
|
},
|
|
907
939
|
{
|
|
@@ -941,7 +973,7 @@
|
|
|
941
973
|
"group": "popover-button",
|
|
942
974
|
"name": "basic",
|
|
943
975
|
"path": "packages/samples/react/src/components/popover-button/basic.tsx",
|
|
944
|
-
"code": "import type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolHeading, KolPopoverButton, KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PopoverButtonBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst buttonRef = React.useRef<HTMLKolPopoverButtonElement | null>(null);\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\tconst TOOLBAR_ITEMS: ToolbarItemsPropType = [\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: '
|
|
976
|
+
"code": "import type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolHeading, KolPopoverButton, KolToolbar } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useEffect } from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PopoverButtonBasic: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\tconst buttonRef = React.useRef<HTMLKolPopoverButtonElement | null>(null);\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\tconst TOOLBAR_ITEMS: ToolbarItemsPropType = [\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Show',\n\t\t\t_icons: 'kolicon-eye',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Delete',\n\t\t\t_icons: 'kolicon-minus',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Add',\n\t\t\t_icons: 'kolicon-plus',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t];\n\n\tuseEffect(() => {\n\t\t// Ensure the popover is closed on initial render\n\t\tif (buttonRef.current) {\n\t\t\tbuttonRef.current.showPopover();\n\t\t\tbuttonRef.current.focus();\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThe PopoverButton component combines a button with a popover that appears when clicked. The popover can be positioned in different directions (top,\n\t\t\t\t\tright, bottom, left) using the <code>_popoverAlign</code> prop.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolPopoverButton _label={'Actions'} _variant=\"primary\" _icons={{ right: 'kolicon-chevron-down' }} ref={buttonRef}>\n\t\t\t\t\t<KolToolbar _label=\"Action toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t\t</KolPopoverButton>\n\t\t\t\t<KolPopoverButton _label=\"Help\" _icons=\"kolicon-alert-info\" _popoverAlign=\"right\" _tooltipAlign=\"bottom\" _hideLabel>\n\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">\n\t\t\t\t\t\t<KolHeading _label=\"Help Information\" _level={0}></KolHeading>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!\n\t\t\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</KolPopoverButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
945
977
|
"kind": "sample"
|
|
946
978
|
},
|
|
947
979
|
{
|
|
@@ -949,7 +981,7 @@
|
|
|
949
981
|
"group": "popover-button",
|
|
950
982
|
"name": "inline",
|
|
951
983
|
"path": "packages/samples/react/src/components/popover-button/inline.tsx",
|
|
952
|
-
"code": "import { KolHeading, KolPopoverButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PopoverButtonInline: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tA PopoverButton inline with some dummy text. Here the PopoverButton has the height of the surrounding text. As statet in\n\t\t\t\t\t<a href=\"https://www.w3.org/WAI/WCAG21/Understanding/target-size.html\">Understanding SC 2.5.5</a> target size of a help icon in text can be smaller\n\t\t\t\t\tthan 44px by 44px.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!\n\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t<KolPopoverButton _inline={true} _label=\"Help\" _icons=\"
|
|
984
|
+
"code": "import { KolHeading, KolPopoverButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const PopoverButtonInline: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tA PopoverButton inline with some dummy text. Here the PopoverButton has the height of the surrounding text. As statet in\n\t\t\t\t\t<a href=\"https://www.w3.org/WAI/WCAG21/Understanding/target-size.html\">Understanding SC 2.5.5</a> target size of a help icon in text can be smaller\n\t\t\t\t\tthan 44px by 44px.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!\n\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t<KolPopoverButton _inline={true} _label=\"Help\" _icons=\"kolicon-alert-info\" _popoverAlign=\"right\" _tooltipAlign=\"bottom\" _hideLabel>\n\t\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">\n\t\t\t\t\t\t\t<KolHeading _label=\"Help Information\" _level={0}></KolHeading>\n\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!\n\t\t\t\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolPopoverButton>\n\t\t\t\t\t<br />\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!\n\t\t\t\t\tExercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
953
985
|
"kind": "sample"
|
|
954
986
|
},
|
|
955
987
|
{
|
|
@@ -1037,7 +1069,7 @@
|
|
|
1037
1069
|
"group": "split-button",
|
|
1038
1070
|
"name": "basic",
|
|
1039
1071
|
"path": "packages/samples/react/src/components/split-button/basic.tsx",
|
|
1040
|
-
"code": "import React from 'react';\n\nimport type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolSplitButton, KolToolbar } from '@public-ui/react-v19';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const SplitButtonBasic: FC = () => {\n\tconst { buttonWithTextClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: buttonWithTextClickEventHandler,\n\t};\n\tconst TOOLBAR_ITEMS: ToolbarItemsPropType = [\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Save',\n\t\t\t_icons: '
|
|
1072
|
+
"code": "import React from 'react';\n\nimport type { ToolbarItemsPropType } from '@public-ui/components';\nimport { KolSplitButton, KolToolbar } from '@public-ui/react-v19';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const SplitButtonBasic: FC = () => {\n\tconst { buttonWithTextClickEventHandler } = useToasterService();\n\tconst dummyEventHandler = {\n\t\tonClick: buttonWithTextClickEventHandler,\n\t};\n\tconst TOOLBAR_ITEMS: ToolbarItemsPropType = [\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Save',\n\t\t\t_icons: 'kolicon-check',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Move Up',\n\t\t\t_icons: 'kolicon-chevron-up',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t\t{\n\t\t\ttype: 'button',\n\t\t\t_label: 'Delete',\n\t\t\t_icons: 'kolicon-minus',\n\t\t\t_on: dummyEventHandler,\n\t\t},\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThe <code>SplitButton</code> component combines a primary action button with a context menu. Clicking the main button triggers the\n\t\t\t\t\t<strong> Edit</strong> action. The context menu opens a vertical list of additional actions:\n\t\t\t\t\t<strong> Save</strong>, <strong>Move</strong>, and <strong>Delete</strong>.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t<KolSplitButton _label=\"Edit\" _on={dummyEventHandler}>\n\t\t\t\t\t<KolToolbar _label=\"Action toolbar\" _items={TOOLBAR_ITEMS} _orientation=\"vertical\" />\n\t\t\t\t</KolSplitButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
1041
1073
|
"kind": "sample"
|
|
1042
1074
|
},
|
|
1043
1075
|
{
|
|
@@ -1048,6 +1080,22 @@
|
|
|
1048
1080
|
"code": "/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport * as React from 'react';\n\nimport { KolButton, KolInputText, KolSplitButton } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const SplitButtonWithContext: FC = () => {\n\tconst splitButtonRef = React.useRef<HTMLKolSplitButtonElement & { closePopup: any }>(null);\n\n\tconst handleCloseClick = () => {\n\t\tsplitButtonRef.current?.closePopup();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>SplitButton renders a button with an additional context-menu, that can be opened by clicking the arrow icon.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t<KolSplitButton ref={splitButtonRef as any} _label=\"Only the arrow opens\">\n\t\t\t\t\t<div style={{ width: 300, padding: 16, border: '1px solid #ccc' }} onClick={(e) => e.stopPropagation()}>\n\t\t\t\t\t\t<p>SplitButton renders a button with an additional context-menu, that can be opened by clicking the arrow icon.</p>\n\t\t\t\t\t\t<div style={{ gap: 16, display: 'flex', flexDirection: 'column' }}>\n\t\t\t\t\t\t\t<KolInputText _label=\"User\" />\n\t\t\t\t\t\t\t<KolInputText _label=\"Role\" />\n\t\t\t\t\t\t\t<KolButton _label=\"Close\" _on={{ onClick: handleCloseClick }} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</KolSplitButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
1049
1081
|
"kind": "sample"
|
|
1050
1082
|
},
|
|
1083
|
+
{
|
|
1084
|
+
"id": "sample/table/action-columns",
|
|
1085
|
+
"group": "table",
|
|
1086
|
+
"name": "action-columns",
|
|
1087
|
+
"path": "packages/samples/react/src/components/table/action-columns.tsx",
|
|
1088
|
+
"code": "import type { KoliBriTableHeaderCellWithLogic } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\ntype ProjectTask = {\n\tid: string;\n\tproject: string;\n\towner: string;\n};\n\nconst HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {\n\thorizontal: [\n\t\t[\n\t\t\t{ key: 'id', label: 'ID', width: 80 },\n\t\t\t{ key: 'project', label: 'Project' },\n\t\t\t{ key: 'owner', label: 'Owner', width: 140 },\n\t\t\t{\n\t\t\t\ttype: 'action',\n\t\t\t\tkey: 'actions',\n\t\t\t\tlabel: 'Actions',\n\t\t\t\twidth: 250,\n\t\t\t\tactions: (row) => {\n\t\t\t\t\tconst simpleRow = row as ProjectTask;\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Details',\n\t\t\t\t\t\t\t_icons: 'kolicon-eye',\n\t\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t\t_on: {\n\t\t\t\t\t\t\t\tonClick: () => alert(`Details: ${simpleRow.id} - ${simpleRow.project}`),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Start',\n\t\t\t\t\t\t\t_icons: 'kolicon-chevron-right',\n\t\t\t\t\t\t\t_variant: 'secondary',\n\t\t\t\t\t\t\t_on: {\n\t\t\t\t\t\t\t\tonClick: () => alert(`Start task ${simpleRow.id}`),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'link',\n\t\t\t\t\t\t\t_label: 'View',\n\t\t\t\t\t\t\t_href: `#/back-page?taskId=${simpleRow.id}`,\n\t\t\t\t\t\t\t_target: '_blank',\n\t\t\t\t\t\t\t_icons: 'kolicon-external-link',\n\t\t\t\t\t\t\t_hideLabel: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t];\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\ttype: 'action',\n\t\t\t\tkey: 'externalActions',\n\t\t\t\tlabel: 'External Actions',\n\t\t\t\twidth: 280,\n\t\t\t\tactions: (row) => {\n\t\t\t\t\tconst simpleRow = row as ProjectTask;\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'link',\n\t\t\t\t\t\t\t_label: 'View on Dashboard',\n\t\t\t\t\t\t\t_href: `#/back-page?taskId=${simpleRow.id}`,\n\t\t\t\t\t\t\t_target: '_blank',\n\t\t\t\t\t\t\t_icons: 'kolicon-external-link',\n\t\t\t\t\t\t\t_hideLabel: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t];\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nconst DATA: ProjectTask[] = [\n\t{\n\t\tid: 'T-01',\n\t\tproject: 'Onboarding checklist',\n\t\towner: 'Alex Rivera',\n\t},\n\t{\n\t\tid: 'T-02',\n\t\tproject: 'Accessibility audit',\n\t\towner: 'Jamie Chen',\n\t},\n];\n\nexport const TableActionColumns: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tSimple example using the refactored action column: Actions are defined once in the column header definition using a factory function. Two rows with\n\t\t\t\tinline action buttons demonstrate clean separation between data and UI behavior.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full\">\n\t\t\t<KolTableStateful _label=\"Tasks with action buttons\" _headers={HEADERS} _data={DATA} className=\"block\" />\n\t\t</section>\n\t</>\n);\n",
|
|
1089
|
+
"kind": "sample"
|
|
1090
|
+
},
|
|
1091
|
+
{
|
|
1092
|
+
"id": "sample/table/action-columns-performance",
|
|
1093
|
+
"group": "table",
|
|
1094
|
+
"name": "action-columns-performance",
|
|
1095
|
+
"path": "packages/samples/react/src/components/table/action-columns-performance.tsx",
|
|
1096
|
+
"code": "import type { KoliBriTableDataType, KoliBriTableHeaderCellWithLogic } from '@public-ui/components';\nimport { KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nconst ROWS_COUNT = 50;\n\ntype DataRow = {\n\tid: number;\n\tname: string;\n\temail: string;\n\tstatus: string;\n};\n\nconst FIRST_NAMES = [\n\t'Max',\n\t'Erika',\n\t'John',\n\t'Jane',\n\t'Peter',\n\t'Anna',\n\t'Michael',\n\t'Sarah',\n\t'Thomas',\n\t'Lisa',\n\t'Daniel',\n\t'Maria',\n\t'Christian',\n\t'Laura',\n\t'Stefan',\n\t'Julia',\n\t'Andreas',\n\t'Sophie',\n\t'Markus',\n\t'Emma',\n];\nconst LAST_NAMES = [\n\t'Mustermann',\n\t'Musterfrau',\n\t'Doe',\n\t'Smith',\n\t'Schmidt',\n\t'Müller',\n\t'Weber',\n\t'Meyer',\n\t'Wagner',\n\t'Becker',\n\t'Fischer',\n\t'Schneider',\n\t'Hoffmann',\n\t'Koch',\n\t'Bauer',\n\t'Richter',\n\t'Klein',\n\t'Wolf',\n\t'Schröder',\n\t'Neumann',\n];\nconst STATUSES = ['active', 'inactive', 'pending'];\n\nconst generateData = (count: number): DataRow[] => {\n\treturn Array.from({ length: count }, (_, i) => {\n\t\tconst firstName = FIRST_NAMES[i % FIRST_NAMES.length];\n\t\tconst lastName = LAST_NAMES[Math.floor(i / FIRST_NAMES.length) % LAST_NAMES.length];\n\t\tconst status = STATUSES[i % STATUSES.length];\n\t\tconst id = i + 1;\n\n\t\treturn {\n\t\t\tid,\n\t\t\tname: `${firstName} ${lastName}`,\n\t\t\temail: `${firstName.toLowerCase()}.${lastName.toLowerCase()}${id > 20 ? id : ''}@example.com`,\n\t\t\tstatus,\n\t\t};\n\t});\n};\n\nconst DATA: DataRow[] = generateData(ROWS_COUNT);\n\nconst HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tkey: 'id',\n\t\t\t\tlabel: 'ID',\n\t\t\t\ttextAlign: 'left',\n\t\t\t\twidth: 60,\n\t\t\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => (data0 as unknown as DataRow).id - (data1 as unknown as DataRow).id,\n\t\t\t\tsortDirection: 'ASC',\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'name',\n\t\t\t\tlabel: 'Name',\n\t\t\t\ttextAlign: 'left',\n\t\t\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\t\t\t(data0 as unknown as DataRow).name.localeCompare((data1 as unknown as DataRow).name, 'de'),\n\t\t\t\tsortDirection: 'ASC',\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'email',\n\t\t\t\tlabel: 'E-Mail',\n\t\t\t\ttextAlign: 'left',\n\t\t\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\t\t\t(data0 as unknown as DataRow).email.localeCompare((data1 as unknown as DataRow).email, 'de'),\n\t\t\t\tsortDirection: 'ASC',\n\t\t\t},\n\t\t\t{\n\t\t\t\tkey: 'status',\n\t\t\t\tlabel: 'Status',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: 100,\n\t\t\t\tcompareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>\n\t\t\t\t\t(data0 as unknown as DataRow).status.localeCompare((data1 as unknown as DataRow).status, 'de'),\n\t\t\t\tsortDirection: 'ASC',\n\t\t\t},\n\t\t\t{\n\t\t\t\ttype: 'action',\n\t\t\t\tkey: 'actions',\n\t\t\t\tlabel: 'Aktionen',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: 180,\n\t\t\t\tactions: (row) => {\n\t\t\t\t\tconst dataRow = row as unknown as DataRow;\n\t\t\t\t\treturn [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Bearbeiten',\n\t\t\t\t\t\t\t_icons: 'kolicon-eye',\n\t\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t\t_tooltipAlign: 'top',\n\t\t\t\t\t\t\t_variant: 'secondary',\n\t\t\t\t\t\t\t_on: {\n\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\tconsole.log('Edit clicked for:', dataRow);\n\t\t\t\t\t\t\t\t\talert(`Bearbeiten: ${dataRow.name}`);\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Löschen',\n\t\t\t\t\t\t\t_icons: 'kolicon-alert-error',\n\t\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t\t_tooltipAlign: 'top',\n\t\t\t\t\t\t\t_variant: 'danger',\n\t\t\t\t\t\t\t_on: {\n\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\tconsole.log('Delete clicked for:', dataRow);\n\t\t\t\t\t\t\t\t\talert(`Löschen: ${dataRow.name}`);\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'button',\n\t\t\t\t\t\t\t_label: 'Details anzeigen',\n\t\t\t\t\t\t\t_icons: 'kolicon-alert-info',\n\t\t\t\t\t\t\t_hideLabel: true,\n\t\t\t\t\t\t\t_tooltipAlign: 'top',\n\t\t\t\t\t\t\t_variant: 'normal',\n\t\t\t\t\t\t\t_on: {\n\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\tconsole.log('Details clicked for:', dataRow);\n\t\t\t\t\t\t\t\t\talert(`Details: ${JSON.stringify(dataRow, null, 2)}`);\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t];\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableActionColumnPerformance: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tPerformance demo: {ROWS_COUNT} rows with action buttons defined once in the column header using the refactored approach. The factory function generates\n\t\t\t\tactions for each row on demand, eliminating redundant data and improving maintainability.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tActions stay type-safe with <code>ActionColumnPropType</code> (ButtonProps or LinkProps), and no custom render functions are needed.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full\">\n\t\t\t<KolTableStateful _label=\"Benutzerverwaltung mit Action-Spalte\" _headers={HEADERS} _data={DATA} className=\"block\" />\n\t\t</section>\n\t</>\n);\n",
|
|
1097
|
+
"kind": "sample"
|
|
1098
|
+
},
|
|
1051
1099
|
{
|
|
1052
1100
|
"id": "sample/table/column-alignment",
|
|
1053
1101
|
"group": "table",
|
|
@@ -1125,7 +1173,7 @@
|
|
|
1125
1173
|
"group": "table",
|
|
1126
1174
|
"name": "render-cell",
|
|
1127
1175
|
"path": "packages/samples/react/src/components/table/render-cell.tsx",
|
|
1128
|
-
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { createReactRenderElement, KolButton, KolInputText, KolTableStateful } from '@public-ui/react-v19';\n\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\n\nimport type { IconsPropType, KoliBriTableCell, KoliBriTableHeaders } from '@public-ui/components';\nimport { useToasterService } from '../../hooks/useToasterService';\n\ntype Data = {\n\torder: number;\n\tdate: Date;\n\tshipped: boolean;\n};\
|
|
1176
|
+
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { createReactRenderElement, KolButton, KolInputText, KolTableStateful } from '@public-ui/react-v19';\n\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\n\nimport type { IconsPropType, KoliBriTableCell, KoliBriTableHeaders } from '@public-ui/components';\nimport { useToasterService } from '../../hooks/useToasterService';\n\ntype Data = {\n\torder: number;\n\tdate: Date;\n\tshipped: boolean;\n};\n\n/**\n * Generates n data entries with random dates and shipping status\n * @param n - Number of data entries to generate\n * @returns Array of Data objects\n */\nfunction generateDataEntries(n: number): Data[] {\n\tconst entries: Data[] = [];\n\tconst startDate = new Date('1970-01-01').getTime();\n\tconst endDate = new Date('2025-12-31').getTime();\n\n\tfor (let i = 0; i < n; i++) {\n\t\tconst randomTimestamp = startDate + Math.random() * (endDate - startDate);\n\t\tentries.push({\n\t\t\torder: i,\n\t\t\tshipped: Math.random() > 0.5,\n\t\t\tdate: new Date(randomTimestamp),\n\t\t});\n\t}\n\n\treturn entries;\n}\n\nconst DATA: Data[] = generateDataEntries(100);\n\nfunction KolButtonWrapper({ label, icons }: { label: string; icons: IconsPropType }) {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn <KolButton _label={label} _icons={icons} _on={dummyEventHandler} />;\n}\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{\n\t\t\t\tlabel: '#',\n\t\t\t\tkey: 'order',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: 100,\n\n\t\t\t\t/* Example 1: Use render return value to format data */\n\t\t\t\trender: (_el, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\treturn `Index: ${label}`;\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Status',\n\t\t\t\tkey: 'shipped',\n\t\t\t\ttextAlign: 'center',\n\t\t\t\twidth: 100,\n\n\t\t\t\t/* Example 2: Simple render function using textContent */\n\t\t\t\trender: (el, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\tconst element = el as HTMLElement;\n\t\t\t\t\tif (label) {\n\t\t\t\t\t\telement.textContent = `Order has been dispatched 🚚`;\n\t\t\t\t\t} else {\n\t\t\t\t\t\telement.textContent = `Order pending 📦`;\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Date (string)',\n\t\t\t\tkey: 'date',\n\t\t\t\twidth: 200,\n\t\t\t\ttextAlign: 'center',\n\n\t\t\t\t/* Example 3: Render function using innerHTML. ⚠️Make sure to sanitize data to avoid XSS. */\n\t\t\t\trender: (el, cell: KoliBriTableCell) => {\n\t\t\t\t\tconst { label } = cell as { label: string };\n\t\t\t\t\t(el as HTMLElement).innerHTML = `<strong>${DATE_FORMATTER.format(label as unknown as Date)}</strong>`;\n\t\t\t\t},\n\t\t\t\tcompareFn: (data0, data1) => (data0 as Data).date.getTime() - (data1 as Data).date.getTime(),\n\t\t\t},\n\t\t\t{\n\t\t\t\tlabel: 'Action (react)',\n\t\t\t\twidth: 200,\n\n\t\t\t\t/* Example 4: Render function using React */\n\t\t\t\trender: (el) => {\n\t\t\t\t\tgetRoot(createReactRenderElement(el)).render(\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: `grid`,\n\t\t\t\t\t\t\t\tgridAutoFlow: `column`,\n\t\t\t\t\t\t\t\talignItems: `end`,\n\t\t\t\t\t\t\t\tgap: `1rem`,\n\t\t\t\t\t\t\t\tmaxWidth: `400px`,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<KolInputText _label=\"Input\" />\n\t\t\t\t\t\t\t<KolButtonWrapper label=\"Save\" icons={{ left: 'kolicon-check' }} />\n\t\t\t\t\t\t</div>,\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t],\n};\n\nexport const TableRenderCell: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful using React render functions for the cell contents.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTableStateful _label=\"Sort by date column\" _data={DATA} _headers={HEADERS} className=\"w-full\" />\n\t</>\n);\n",
|
|
1129
1177
|
"kind": "sample"
|
|
1130
1178
|
},
|
|
1131
1179
|
{
|
|
@@ -1205,7 +1253,7 @@
|
|
|
1205
1253
|
"group": "table",
|
|
1206
1254
|
"name": "sticky-header",
|
|
1207
1255
|
"path": "packages/samples/react/src/components/table/sticky-header.tsx",
|
|
1208
|
-
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport { COMPLEX_DATA } from './test-complex-data';\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'ID', key: 'id', textAlign: 'right', width:
|
|
1256
|
+
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableHeaders, KoliBriTableSelection } from '@public-ui/components';\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport { COMPLEX_DATA } from './test-complex-data';\n\ntype Data = (typeof COMPLEX_DATA)[0];\n\nconst selection: KoliBriTableSelection = {\n\tlabel: (row) => `Selection for ${(row as Data).common_name}`,\n\tmultiple: false,\n\tkeyPropertyName: 'internalIdentifier',\n};\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'ID', key: 'id', textAlign: 'right', width: 60 },\n\t\t\t{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Habitat', key: 'habitat', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Diet', key: 'diet', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left', width: 160 },\n\t\t],\n\t],\n};\n\nexport const TableStickyHeader: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolTableStateful with vertical scrollbar. It should be focusable and scrollable with the keyboard. The table headline should be sticky\n\t\t\t\tat the top of the table. The data lists animal species with conservation-focused details.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolHeading _level={2} _label=\"Sticky headers\" />\n\t\t<KolTableStateful _label=\"Animal species overview\" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className=\"block\" _selection={selection} />\n\t</>\n);\n",
|
|
1209
1257
|
"kind": "sample"
|
|
1210
1258
|
},
|
|
1211
1259
|
{
|
|
@@ -1229,7 +1277,7 @@
|
|
|
1229
1277
|
"group": "tabs",
|
|
1230
1278
|
"name": "align",
|
|
1231
1279
|
"path": "packages/samples/react/src/components/tabs/align.tsx",
|
|
1232
|
-
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { AlignPropType } from '@public-ui/components';\nimport { KolHeading, KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: '
|
|
1280
|
+
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { AlignPropType } from '@public-ui/components';\nimport { KolHeading, KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'kolicon-check',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_icons: 'kolicon-link-external',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'kolicon-house',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_icons: 'kolicon-eye',\n\t\t_label: 'Last tab',\n\t},\n];\n\nexport const TabsAlign: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolTabs with the property <code>_align</code> set to <code>left</code>, <code>right</code>, <code>top</code> and <code>bottom</code>.\n\t\t\t</p>\n\t\t</SampleDescription>\n\t\t<div className=\"grid gap-8\">\n\t\t\t{(['left', 'right', 'top', 'bottom'] as AlignPropType[]).map((align) => {\n\t\t\t\tconst text = `Tabs with ${align} align`;\n\t\t\t\treturn (\n\t\t\t\t\t<div key={align} className=\"grid gap-4\">\n\t\t\t\t\t\t<KolHeading _level={2} _label={text} />\n\t\t\t\t\t\t<KolTabs _tabs={tabs} _align={align} _label={text}>\n\t\t\t\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t\t\t\t</KolTabs>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t</>\n);\n",
|
|
1233
1281
|
"kind": "sample"
|
|
1234
1282
|
},
|
|
1235
1283
|
{
|
|
@@ -1237,7 +1285,7 @@
|
|
|
1237
1285
|
"group": "tabs",
|
|
1238
1286
|
"name": "basic",
|
|
1239
1287
|
"path": "packages/samples/react/src/components/tabs/basic.tsx",
|
|
1240
|
-
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: '
|
|
1288
|
+
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'kolicon-check',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_icons: 'kolicon-link-external',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'kolicon-house',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_icons: 'kolicon-eye',\n\t\t_label: 'Last tab',\n\t},\n];\n\nconst tabsWithoutIcons = tabs.map((tab) => ({\n\t...tab,\n\t_icons: undefined,\n}));\n\nexport const TabsBasic: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>KolTabs renders tab captions and their associated content. This sample shows tab captions with and without icons and disabled tabs.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTabs _tabs={tabsWithoutIcons} _label=\"Regular tabs\">\n\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t</KolTabs>\n\n\t\t<KolTabs _tabs={tabs} className=\"mt-4\" _label=\"Tabs with icons\">\n\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t</KolTabs>\n\t</>\n);\n",
|
|
1241
1289
|
"kind": "sample"
|
|
1242
1290
|
},
|
|
1243
1291
|
{
|
|
@@ -1245,7 +1293,7 @@
|
|
|
1245
1293
|
"group": "tabs",
|
|
1246
1294
|
"name": "behavior",
|
|
1247
1295
|
"path": "packages/samples/react/src/components/tabs/behavior.tsx",
|
|
1248
|
-
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: '
|
|
1296
|
+
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'kolicon-check',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_icons: 'kolicon-link-external',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'kolicon-house',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_icons: 'kolicon-eye',\n\t\t_label: 'Last tab',\n\t},\n];\n\nexport const TabsBehavior: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolTabs with the property <code>_behavior</code> set to <code>select-manual</code> and <code>select-automatic</code>.\n\t\t\t</p>\n\t\t\t<p>This property allows controlling when an arrow key is pressed whether the tab change takes place right away or only focuses the tab caption.</p>\n\t\t</SampleDescription>\n\t\t<div className=\"grid gap-8\">\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label='Tabs with \"select manual\" behavior' />\n\t\t\t\t<KolTabs _tabs={tabs} _behavior=\"select-manual\" _label=\"Tabs with select manual behavior\">\n\t\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t\t</KolTabs>\n\t\t\t</div>\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label='Tabs with \"select automatic\" behavior' />\n\t\t\t\t<KolTabs _tabs={tabs} className=\"mt-4\" _behavior=\"select-automatic\" _label=\"Tabs with select automatic behavior\">\n\t\t\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t\t\t</KolTabs>\n\t\t\t</div>\n\t\t</div>\n\t</>\n);\n",
|
|
1249
1297
|
"kind": "sample"
|
|
1250
1298
|
},
|
|
1251
1299
|
{
|
|
@@ -1261,7 +1309,7 @@
|
|
|
1261
1309
|
"group": "tabs",
|
|
1262
1310
|
"name": "icons-only",
|
|
1263
1311
|
"path": "packages/samples/react/src/components/tabs/icons-only.tsx",
|
|
1264
|
-
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: '
|
|
1312
|
+
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolTabs } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nconst tabs = [\n\t{\n\t\t_icons: 'kolicon-check',\n\t\t_label: 'First tab',\n\t\t_on: {\n\t\t\tonSelect: (event: Event) => {\n\t\t\t\tconsole.log('First tab selected', event);\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\t_icons: 'kolicon-link-external',\n\t\t_label: 'Second Tab',\n\t},\n\t{\n\t\t_disabled: true,\n\t\t_icons: 'kolicon-house',\n\t\t_label: 'Disabled Tab',\n\t},\n\t{\n\t\t_icons: 'kolicon-eye',\n\t\t_label: 'Last tab',\n\t},\n];\nexport const TabsIconsOnly: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTabs with hidden labels.</p>\n\t\t</SampleDescription>\n\n\t\t<KolTabs _label=\"Tabs with icons\" _tabs={tabs}>\n\t\t\t<div slot=\"tab-0\">Contents of Tab 1</div>\n\t\t\t<div slot=\"tab-1\">Contents of Tab 2</div>\n\t\t\t<div slot=\"tab-2\">Contents of Tab 3</div>\n\t\t\t<div slot=\"tab-3\">Contents of Tab 4</div>\n\t\t</KolTabs>\n\t</>\n);\n",
|
|
1265
1313
|
"kind": "sample"
|
|
1266
1314
|
},
|
|
1267
1315
|
{
|
|
@@ -1480,6 +1528,14 @@
|
|
|
1480
1528
|
"code": "import { KolPopoverButton } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\n\nexport const TooltipPositioning: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis example demonstrates tooltip positioning within container query contexts. Container queries can interfere with fixed positioning, causing\n\t\t\t\t\ttooltips to render incorrectly relative to the viewport. The layout containment fix ensures tooltips position properly even when their parent elements\n\t\t\t\t\tuse container-based sizing and layout rules.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tcontainer: 'test / size',\n\t\t\t\t\tcontain: 'layout',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<KolPopoverButton _label=\"Sample PopoverButton—Click for Popover\" _icons=\"kolicon-alert-info\" _tooltipAlign=\"right\" _hideLabel>\n\t\t\t\t\tThis is an explanation shown on click.\n\t\t\t\t</KolPopoverButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
1481
1529
|
"kind": "scenario"
|
|
1482
1530
|
},
|
|
1531
|
+
{
|
|
1532
|
+
"id": "scenario/scenarios/z-index",
|
|
1533
|
+
"group": "scenarios",
|
|
1534
|
+
"name": "z-index",
|
|
1535
|
+
"path": "packages/samples/react/src/scenarios/z-index.tsx",
|
|
1536
|
+
"code": "import type { FC } from 'react';\nimport React, { useEffect, useRef } from 'react';\n\nimport { KolButton, KolCombobox, KolDialog, KolPopoverButton } from '@public-ui/react-v19';\nimport { useSearchParams } from 'react-router';\nimport { SampleDescription } from '../components/SampleDescription';\n\nexport const ZIndexScenario: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\n\tconst showDialog = searchParams.get('show-dialog') as string;\n\n\tconst cardRef = useRef<HTMLKolDialogElement>(null);\n\n\tconst onOpenCardDialog = {\n\t\tonClick: () => cardRef.current?.openModal(),\n\t};\n\n\tuseEffect(() => {\n\t\tif (showDialog === 'true') {\n\t\t\tcardRef.current?.openModal();\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows the combination of a few components overlaying content. Dialog, Popover, Tooltip</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<div>\n\t\t\t\t\t<KolButton _label=\"Open card dialog\" _on={onOpenCardDialog} />\n\t\t\t\t\t<KolDialog ref={cardRef} _label=\"Card dialog\" _variant=\"card\" _width=\"30%\">\n\t\t\t\t\t\t<KolPopoverButton _label=\"Help\" _icons=\"kolicon-alert-info\" _popoverAlign=\"right\" _tooltipAlign=\"bottom\" _hideLabel>\n\t\t\t\t\t\t\t<div className=\"w-sm p-2 border border-solid border-gray\">\n\t\t\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t\t\t<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed\n\t\t\t\t\t\t\t\t\tvoluptatum! Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t<KolButton _hideLabel _icons=\"kolicon-check\" _label=\"OK\" _variant=\"primary\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</KolPopoverButton>\n\t\t\t\t\t\t<KolCombobox _label=\"With string array in html\" _suggestions=\"['Herr','Frau','Firma']\" _value=\"Herr\" _hideLabel />\n\t\t\t\t\t</KolDialog>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
1537
|
+
"kind": "scenario"
|
|
1538
|
+
},
|
|
1483
1539
|
{
|
|
1484
1540
|
"id": "spec/abbr",
|
|
1485
1541
|
"group": "spec",
|