@public-ui/mcp 4.0.1 → 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 +2 -2
- package/shared/sample-index.json +58 -10
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,7 +46,7 @@
|
|
|
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",
|
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
|
}
|
|
@@ -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
|
{
|
|
@@ -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
|
{
|
|
@@ -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: '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-
|
|
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
|
{
|
|
@@ -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",
|
|
@@ -744,6 +752,14 @@
|
|
|
744
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",
|
|
745
753
|
"kind": "sample"
|
|
746
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",
|
|
761
|
+
"kind": "sample"
|
|
762
|
+
},
|
|
747
763
|
{
|
|
748
764
|
"id": "sample/input-text/disabled",
|
|
749
765
|
"group": "input-text",
|
|
@@ -888,6 +904,14 @@
|
|
|
888
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",
|
|
889
905
|
"kind": "sample"
|
|
890
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
|
+
},
|
|
891
915
|
{
|
|
892
916
|
"id": "sample/link/react-router",
|
|
893
917
|
"group": "link",
|
|
@@ -1056,6 +1080,22 @@
|
|
|
1056
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",
|
|
1057
1081
|
"kind": "sample"
|
|
1058
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
|
+
},
|
|
1059
1099
|
{
|
|
1060
1100
|
"id": "sample/table/column-alignment",
|
|
1061
1101
|
"group": "table",
|
|
@@ -1133,7 +1173,7 @@
|
|
|
1133
1173
|
"group": "table",
|
|
1134
1174
|
"name": "render-cell",
|
|
1135
1175
|
"path": "packages/samples/react/src/components/table/render-cell.tsx",
|
|
1136
|
-
"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",
|
|
1137
1177
|
"kind": "sample"
|
|
1138
1178
|
},
|
|
1139
1179
|
{
|
|
@@ -1213,7 +1253,7 @@
|
|
|
1213
1253
|
"group": "table",
|
|
1214
1254
|
"name": "sticky-header",
|
|
1215
1255
|
"path": "packages/samples/react/src/components/table/sticky-header.tsx",
|
|
1216
|
-
"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",
|
|
1217
1257
|
"kind": "sample"
|
|
1218
1258
|
},
|
|
1219
1259
|
{
|
|
@@ -1488,6 +1528,14 @@
|
|
|
1488
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",
|
|
1489
1529
|
"kind": "scenario"
|
|
1490
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
|
+
},
|
|
1491
1539
|
{
|
|
1492
1540
|
"id": "spec/abbr",
|
|
1493
1541
|
"group": "spec",
|