@public-ui/sample-react 1.7.0-rc.13 → 1.7.0-rc.16

package/dist/main.js.LICENSE.txt

@@ -0,0 +1,57 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
+
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @remix-run/router v1.9.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.16.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */

package/dist/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

package/package.json

@@ -1,62 +1,62 @@
 {
-	"name": "@public-ui/sample-react",
-	"version": "1.7.0-rc.13",
-	"description": "This app contains samples for the KoliBri/Public UI",
-	"license": "EUPL-1.2",
-	"scripts": {
-		"clean": "git clean -f -d -X",
-		"clean:locks": "rimraf package-lock.json pnpm-lock.yaml && npm run clean",
-		"build": "rimraf dist && cross-env NODE_ENV=production webpack",
-		"format": "prettier --check src",
-		"lint": "eslint \"{src,tests}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
-		"serve": "cross-env NODE_ENV=development webpack serve --devtool=source-map",
-		"start": "npm run serve",
-		"unused": "ts-prune -e src",
-		"postinstall": "npm-run-all postinstall:*",
-		"postinstall:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
-		"postinstall:themes-assets": "cpy \"node_modules/@public-ui/themes/assets/**/*\" public/assets --dot"
-	},
-	"dependencies": {
-		"@leanup/stack": "1.3.48",
-		"@leanup/stack-react": "1.3.48",
-		"@leanup/stack-webpack": "1.3.48",
-		"@public-oss/kolibri-themes": "0.0.3",
-		"@public-ui/components": "1.7.0-rc.13",
-		"@public-ui/react": "1.7.0-rc.13",
-		"@public-ui/themes": "1.7.0-rc.13",
-		"@types/node": "20.6.2",
-		"@types/react": "18.2.22",
-		"@types/react-dom": "18.2.7",
-		"@unocss/preset-uno": "0.56.0",
-		"@unocss/webpack": "0.56.0",
-		"ajv": "8.12.0",
-		"chromedriver": "116.0.0",
-		"cpy-cli": "5.0.0",
-		"eslint-plugin-jsx-a11y": "6.7.1",
-		"eslint-plugin-react": "7.33.2",
-		"nightwatch-axe-verbose": "2.2.2",
-		"npm-run-all": "4.1.5",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
-		"react-router": "6.16.0",
-		"react-router-dom": "6.16.0",
-		"rimraf": "3.0.2",
-		"ts-prune": "0.10.3",
-		"typescript": "5.2.2",
-		"world_countries_lists": "2.8.2"
-	},
-	"files": [
-		".eslintignore",
-		".eslintrc.js",
-		".gitignore",
-		".prettierignore",
-		"dist/**",
-		"prettier.config.js",
-		"public/**",
-		"src/**",
-		"test-build.sh",
-		"tsconfig.json",
-		"unocss.config.ts",
-		"webpack.config.js"
-	]
-}
+  "name": "@public-ui/sample-react",
+  "version": "1.7.0-rc.16",
+  "description": "This app contains samples for the KoliBri/Public UI",
+  "license": "EUPL-1.2",
+  "dependencies": {
+    "@leanup/stack": "1.3.48",
+    "@leanup/stack-react": "1.3.48",
+    "@leanup/stack-webpack": "1.3.48",
+    "@public-oss/kolibri-themes": "0.0.3",
+    "@public-ui/components": "1.7.0-rc.16",
+    "@public-ui/react": "1.7.0-rc.16",
+    "@public-ui/themes": "1.7.0-rc.16",
+    "@types/node": "20.6.5",
+    "@types/react": "18.2.22",
+    "@types/react-dom": "18.2.7",
+    "@unocss/preset-uno": "0.56.2",
+    "@unocss/webpack": "0.56.2",
+    "ajv": "8.12.0",
+    "chromedriver": "116.0.0",
+    "cpy-cli": "5.0.0",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-react": "7.33.2",
+    "nightwatch-axe-verbose": "2.2.2",
+    "npm-run-all": "4.1.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router": "6.16.0",
+    "react-router-dom": "6.16.0",
+    "rimraf": "3.0.2",
+    "ts-prune": "0.10.3",
+    "typescript": "5.2.2",
+    "world_countries_lists": "2.8.2"
+  },
+  "files": [
+    ".eslintignore",
+    ".eslintrc.js",
+    ".gitignore",
+    ".prettierignore",
+    "dist/**",
+    "prettier.config.js",
+    "public/**",
+    "src/**",
+    "test-build.sh",
+    "tsconfig.json",
+    "unocss.config.ts",
+    "webpack.config.js"
+  ],
+  "scripts": {
+    "clean": "git clean -f -d -X",
+    "clean:locks": "rimraf package-lock.json pnpm-lock.yaml && npm run clean",
+    "build": "rimraf dist && cross-env NODE_ENV=production webpack",
+    "format": "prettier --check src",
+    "lint": "eslint \"{src,tests}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
+    "serve": "cross-env NODE_ENV=development webpack serve --devtool=source-map",
+    "start": "npm run serve",
+    "unused": "ts-prune -e src",
+    "postinstall": "npm-run-all postinstall:*",
+    "postinstall:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
+    "postinstall:themes-assets": "cpy \"node_modules/@public-ui/themes/assets/**/*\" public/assets --dot"
+  }
+}

package/src/App.tsx

@@ -85,6 +85,8 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
 const ROUTE_LIST = getRouteList(ROUTES);
 const ROUTE_TREE = getRouteTree(ROUTES);
 
+console.log('ROUTE_LIST', ROUTE_LIST);
+
 const componentList: Map<string, Option<string>> = new Map();
 ROUTE_LIST.forEach((route) => {
 	const routeSplit = route.split('/');

package/src/components/FocusInput.tsx

@@ -0,0 +1,56 @@
+import { KolButton, KolForm } from '@public-ui/react';
+import React, { FC, useLayoutEffect, useRef } from 'react';
+import { InputCheckboxVariants } from './input-checkbox/partials/variants';
+import { InputColorVariants } from './input-color/partials/variants';
+import { InputDateVariants } from './input-date/partials/variants';
+import { InputEmailVariants } from './input-email/partials/variants';
+import { InputFileVariants } from './input-file/partials/variants';
+import { InputNumberVariants } from './input-number/partials/variants';
+import { InputPasswordVariants } from './input-password/partials/variants';
+import { InputRadioVariants } from './input-radio/partials/variants';
+import { InputRangeVariants } from './input-range/partials/variants';
+import { InputTextVariants } from './input-text/partials/variants';
+import { SelectVariants } from './select/partials/variants';
+import { TextareaVariants } from './textarea/partials/variants';
+
+type Props = {
+	RefInput:
+		| typeof InputCheckboxVariants
+		| typeof InputColorVariants
+		| typeof InputDateVariants
+		| typeof InputEmailVariants
+		| typeof InputFileVariants
+		| typeof InputNumberVariants
+		| typeof InputPasswordVariants
+		| typeof InputRadioVariants
+		| typeof InputRangeVariants
+		| typeof InputTextVariants
+		| typeof SelectVariants
+		| typeof TextareaVariants;
+	props?: Record<string, unknown>;
+};
+
+export const FocusInput: FC<Props> = ({ RefInput, props }) => {
+	const ref = useRef(null);
+
+	useLayoutEffect(() => {
+		setTimeout(() => {
+			if (ref.current) {
+				(ref.current as unknown as HTMLElement).focus();
+			}
+		}, 500);
+	}, [ref]);
+
+	return (
+		<KolForm>
+			<div className="grid gap-4">
+				<RefInput ref={ref} {...props} />
+				<div className="flex gap-4">
+					<KolButton _label="Submit" _icons="codicon codicon-arrow-right" _type="submit" _variant="primary" />
+					<KolButton _label="Reset" _type="reset" _variant="tertiary" />
+					<KolButton _label="Help" _type="button" _variant="ghost" />
+				</div>
+			</div>
+		</KolForm>
+	);
+};

package/src/components/Sidebar.tsx

@@ -65,11 +65,11 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 
 			<KolHeading _label="Komponenten" _level={2} className="block mt"></KolHeading>
 			<div className="flex flex-justify-between flex-items-center mt">
-				<KolButton _icon="codicon codicon-arrow-left" _hideLabel _label="Vorherige Komponente auswählen" _on={{ onClick: handlePreviousClick }} />
+				<KolButton _icons="codicon codicon-arrow-left" _hideLabel _label="Vorherige Komponente auswählen" _on={{ onClick: handlePreviousClick }} />
 				<span className="text-center">
 					{formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
 				</span>
-				<KolButton _icon="codicon codicon-arrow-right" _hideLabel _label="Nächste Komponente auswählen" _on={{ onClick: handleNextClick }} />
+				<KolButton _icons="codicon codicon-arrow-right" _hideLabel _label="Nächste Komponente auswählen" _on={{ onClick: handleNextClick }} />
 			</div>
 
 			<ComponentNavContainer isMobile={isMobile}>

package/src/components/alert/basic.tsx

@@ -23,6 +23,12 @@ const AlertByType: FC<PropsByType> = ({ level, type, variant }) => (
 		<KolAlert _type={type} _variant={variant}>
 			In diesem Alert wird nur der Text ohne Überschrift verwendet.
 		</KolAlert>
+		<KolAlert _heading="Das ist die Überschrift des Alert." _level={level} _type={type} _variant={variant} _hasCloser>
+			Das ist der Text des Alert. Mit Schließen-Button.
+		</KolAlert>
+		<KolAlert _type={type} _variant={variant} _hasCloser>
+			In diesem Alert wird nur der Text ohne Überschrift verwendet. Mit Schließen-Button.
+		</KolAlert>
 	</>
 );
 

package/src/components/alert/card-msg.tsx

@@ -6,6 +6,5 @@ import { AlertBasic } from './basic';
 export const AlertCardMsg: FC = () => (
 	<div className="grid">
 		<AlertBasic variant="card" />
-		<AlertBasic variant="msg" />
 	</div>
 );

package/src/components/alert/html.tsx

@@ -8,15 +8,15 @@ export const AlertHtml: FC = () => (
 		<KolAlert _heading="Ausgabe von HTML-Code im Alert" _type="info">
 			{' '}
 			<h2 className="mt-2 mb-3">Hier wird eine H2-Überschrift ausgegeben</h2>
-			<div className="row">
-				<div className="col-12 col-sm-6">
+			<div style={{ display: 'grid', gridAutoFlow: 'column', gap: '1rem' }}>
+				<div>
 					<h4>Text in einer linken Spalte</h4>
 					<p>
 						Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem sed fugiat dolorum ratione et, ullam officia nobis nihil debitis, consectetur dicta
 						accusantium. Vitae debitis, quibusdam vel recusandae deleniti placeat dolorem?
 					</p>
 				</div>
-				<div className="col-12 col-sm-6">
+				<div>
 					<h4>Text in einer rechten Spalte</h4>
 					<p>
 						Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod beatae officiis, velit nam dicta quae repellat perspiciatis explicabo illo. Possimus,

package/src/components/badge/button.tsx

@@ -6,7 +6,7 @@ import { FC } from 'react';
 const PROPS = {
 	_label: 'Label',
 	_smartButton: {
-		_icon: 'codicon codicon-close',
+		_icons: 'codicon codicon-close',
 		_label: 'Entfernen',
 		_on: {
 			onClick: () => alert('clicked'),

package/src/components/breadcrumb/basic.tsx

@@ -21,7 +21,7 @@ export const BreadcrumbBasic: FC = () => (
 			_links={[
 				{
 					_label: 'Startseite',
-					_icon: 'codicon codicon-home',
+					_icons: 'codicon codicon-home',
 					_hideLabel: true,
 					_href: '#/',
 				},
@@ -38,7 +38,7 @@ export const BreadcrumbBasic: FC = () => (
 		<KolBreadcrumb
 			_ariaLabel="Breadcrumb aus Icons- und Text-Links"
 			_links={[
-				{ _label: 'Startseite', _icon: 'codicon codicon-home', _href: '#/' },
+				{ _label: 'Startseite', _icons: 'codicon codicon-home', _href: '#/' },
 				{
 					_label: 'Unterseite der Startseite und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen',
 					_href: '#/unterseite',

package/src/components/button/hide-label.tsx

@@ -4,7 +4,7 @@ import { KolButton } from '@public-ui/react';
 import { FC } from 'react';
 
 const ARGS = {
-	_icon: 'codicon codicon-home',
+	_icons: 'codicon codicon-home',
 	_hideLabel: true,
 	_on: {
 		onClick: (_event, _value) => alert('Klick!'),

package/src/components/button/icons.tsx

@@ -5,7 +5,7 @@ import { FC } from 'react';
 
 export const ButtonIcons: FC = () => (
 	<KolButton
-		_icon={{
+		_icons={{
 			bottom: 'codicon codicon-arrow-down',
 			left: {
 				icon: 'codicon codicon-arrow-left',

package/src/components/button/width.tsx

@@ -6,7 +6,7 @@ import { FC } from 'react';
 const ARGS = {
 	className: 'w-8rem',
 	_on: {
-		onClick: (_event, _value) => alert('Klick!'),
+		onClick: () => alert('Klick!'),
 	},
 };
 

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

@@ -7,7 +7,7 @@ export const ButtonGroupBasic: FC = () => (
 	<KolButtonGroup>
 		<KolButton _label="Active" _variant="primary"></KolButton>
 		<KolButton _label="Not active" _disabled></KolButton>
-		<KolButton _label="Active" _icon="codicon codicon-home" _variant="danger"></KolButton>
-		<KolButton _label="Active" _icon="codicon codicon-trash" _hideLabel _variant="ghost"></KolButton>
+		<KolButton _label="Active" _icons="codicon codicon-home" _variant="danger"></KolButton>
+		<KolButton _label="Active" _icons="codicon codicon-trash" _hideLabel _variant="ghost"></KolButton>
 	</KolButtonGroup>
 );

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

@@ -5,19 +5,19 @@ import { FC } from 'react';
 
 export const ButtonLinkBasic: FC = () => (
 	<div className="grid gap-4">
-		<KolButtonLink _href="#" _label="Simple Link" />
 		<p>
-			In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolButtonLink _href="#" _label="Simple Link" /> Er wird standardmäßig als{' '}
+			In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolButtonLink _label="Simple Link" /> Er wird standardmäßig als{' '}
 			<strong>inline-Element</strong> ausgegeben.
 		</p>
 		<p>
 			In diesem Absatz wird ein Link gesetzt, der einmal als inline-block-Element ausgegeben wird.{' '}
-			<KolButtonLink class="d-inline-block" _href="#" _label="Simple Link" />. Damit kann man mir per CSS-Styles eine Breite, eine Höhe und andere Eigenschaften
-			zuweisen.
+			<KolButtonLink style={{ display: 'inline-block', margin: '1rem', border: '1px dotted' }} _label="Simple Link" />. Damit kann man mir per CSS-Styles eine
+			Breite, eine Höhe und andere Eigenschaften zuweisen.
 			<br />
 			<br />
 			Danach folgt ein Link, der als block-Element ausgegeben wird.
-			<KolButtonLink class="d-block" _href="#" _label="Simple Link" />, daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
+			<KolButtonLink style={{ display: 'block' }} _label="Simple Link" />
+			Daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
 		</p>
 	</div>
 );

package/src/components/button-link/icons.tsx

@@ -5,27 +5,27 @@ import { FC } from 'react';
 
 export const ButtonLinkIcons: FC = () => (
 	<div className="grid gap-4">
-		<KolButtonLink _icon="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
+		<KolButtonLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
 		<KolButtonLink
-			_icon={{
+			_icons={{
 				right: 'codicon codicon-home',
 			}}
 			_label="Ich bin ein Link mit Icon rechts"
 		/>
 		<KolButtonLink
-			_icon={{
+			_icons={{
 				top: 'codicon codicon-home',
 			}}
 			_label="Ich bin ein Link mit Icon oben"
 		/>
 		<KolButtonLink
-			_icon={{
+			_icons={{
 				bottom: 'codicon codicon-home',
 			}}
 			_label="Ich bin ein Link mit Icon unten"
 		/>
 		<KolButtonLink
-			_icon={{
+			_icons={{
 				top: 'codicon codicon-home',
 				right: 'codicon codicon-home',
 				bottom: 'codicon codicon-home',

package/src/components/button-link/image.tsx

@@ -5,9 +5,9 @@ import { FC } from 'react';
 
 export const ButtonLinkImage: FC = () => (
 	<div className="grid gap-4">
-		<KolButtonLink _href="#" _label="Ich bin ein Link, der als Text gerendert wird" />
+		<KolButtonLink _label="Ich bin ein Link, der als Text gerendert wird" />
 		<br />
-		<KolButtonLink _href="#" _label="">
+		<KolButtonLink _label="">
 			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />
 		</KolButtonLink>
 	</div>

package/src/components/button-link/routes.ts

@@ -6,13 +6,10 @@ import { ButtonLinkIcons } from './icons';
 
 import { ButtonLinkImage } from './image';
 
-import { ButtonLinkTarget } from './target';
-
 export const BUTTON_LINK_ROUTES: Routes = {
 	'button-link': {
 		basic: ButtonLinkBasic,
 		icons: ButtonLinkIcons,
 		image: ButtonLinkImage,
-		target: ButtonLinkTarget,
 	},
 };

package/src/components/card/confirm.tsx

@@ -11,7 +11,7 @@ export const CardConfirm: FC = () => (
 			perferendis qui animi nesciunt illo facere, doloribus sint cupiditate nihil dolorem voluptate ab esse! Ducimus ad est commodi molestias voluptas
 			reiciendis.
 		</p>
-		<div slot="footer" className="d-flex gap-2 float-end">
+		<div slot="footer" className="flex gap-2 flex-justify-end">
 			<KolButton className="w-12rem" _variant="primary" _label="Speichern"></KolButton>
 			<KolButton className="w-12rem" _variant="secondary" _label="Abbrechen"></KolButton>
 		</div>

package/src/components/card/selection.tsx

@@ -11,7 +11,7 @@ const STYLE = {
 };
 
 export const CardSelection: FC = () => (
-	<div className="d-flex gap-2">
+	<div className="flex gap-2">
 		<KolCard _hasFooter _heading="DEBTI-25437/17-1">
 			<div slot="header">
 				TeCorp Endplatte
@@ -25,7 +25,7 @@ export const CardSelection: FC = () => (
 			</div>
 			<div slot="footer">
 				<div style={STYLE}>
-					<KolInputCheckbox _id="article-0">Auswählen</KolInputCheckbox>
+					<KolInputCheckbox>Auswählen</KolInputCheckbox>
 					<KolButton _variant="primary" _label="Öffnen"></KolButton>
 				</div>
 			</div>
@@ -43,7 +43,7 @@ export const CardSelection: FC = () => (
 			</div>
 			<div slot="footer">
 				<div style={STYLE}>
-					<KolInputCheckbox _id="article-1">Auswählen</KolInputCheckbox>
+					<KolInputCheckbox>Auswählen</KolInputCheckbox>
 					<KolButton _variant="primary" _label="Öffnen"></KolButton>
 				</div>
 			</div>
@@ -61,7 +61,7 @@ export const CardSelection: FC = () => (
 			</div>
 			<div slot="footer">
 				<div style={STYLE}>
-					<KolInputCheckbox _id="article-2">Auswählen</KolInputCheckbox>
+					<KolInputCheckbox>Auswählen</KolInputCheckbox>
 					<KolButton _variant="primary" _label="Öffnen"></KolButton>
 				</div>
 			</div>