@public-ui/sample-react 2.1.3 → 2.1.4-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.1.3",
+  "version": "2.1.4-alpha.1",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
@@ -29,9 +29,9 @@
     "typescript": "5.5.2",
     "world_countries_lists": "2.9.0",
     "yup": "1.4.0",
-    "@public-ui/react": "2.1.3",
-    "@public-ui/components": "2.1.3",
-    "@public-ui/themes": "2.1.3"
+    "@public-ui/react": "2.1.4-alpha.1",
+    "@public-ui/components": "2.1.4-alpha.1",
+    "@public-ui/themes": "2.1.4-alpha.1"
   },
   "files": [
     ".eslintignore",
@@ -51,7 +51,7 @@
     "build": "rimraf dist && cross-env NODE_ENV=production webpack",
     "build:deps": "pnpm --filter @public-ui/sample-react^... build",
     "format": "prettier --check src",
-    "lint": "eslint \"{src,tests}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
+    "lint": "tsc --noemit && eslint \"{src,tests}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
     "prepare:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
     "prepare:themes-assets": "cpy \"node_modules/@public-ui/themes/assets/**/*\" public/assets --dot",
     "serve": "cross-env NODE_ENV=development webpack serve --devtool=source-map",

package/src/components/FormWrap.tsx

@@ -1,31 +1,27 @@
-import type { FC } from 'react';
 import React from 'react';
 
 import { KolButton, KolForm } from '@public-ui/react';
-import type { RefFormComponent } from './types';
 
-type FormWrapProps = {
-	RefComponent: RefFormComponent;
-} & Record<string, unknown>;
-
-export const FormWrap: FC<FormWrapProps> = (props) => (
-	<KolForm>
-		<div className="grid gap-4">
-			<props.RefComponent {...props} />
-			<div className="flex gap-4">
-				<KolButton _label="Submit" _icons="codicon codicon-arrow-right" _type="submit" _variant="primary" />
-				<KolButton
-					_label="Bunte Icons"
-					_icons={{
-						left: { icon: 'codicon codicon-heart-filled', style: { color: '#cc006e' } },
-						right: { icon: 'codicon codicon-squirrel', style: { color: '#b41b1b' } },
-					}}
-					_type="submit"
-					_variant="secondary"
-				/>
-				<KolButton _label="Reset" _type="reset" _variant="tertiary" />
-				<KolButton _label="Help" _type="button" _variant="ghost" />
+export const FormWrap = <P,>({ RefComponent: Component, ...props }: { RefComponent: any } & Partial<P>) => {
+	return (
+		<KolForm>
+			<div className="grid gap-4">
+				<Component {...props} />
+				<div className="flex gap-4">
+					<KolButton _label="Submit" _icons="codicon codicon-arrow-right" _type="submit" _variant="primary" />
+					<KolButton
+						_label="Bunte Icons"
+						_icons={{
+							left: { icon: 'codicon codicon-heart-filled', style: { color: '#cc006e' } },
+							right: { icon: 'codicon codicon-squirrel', style: { color: '#b41b1b' } },
+						}}
+						_type="submit"
+						_variant="secondary"
+					/>
+					<KolButton _label="Reset" _type="reset" _variant="tertiary" />
+					<KolButton _label="Help" _type="button" _variant="ghost" />
+				</div>
 			</div>
-		</div>
-	</KolForm>
-);
+		</KolForm>
+	);
+};

package/src/components/alert/basic.tsx

@@ -10,7 +10,7 @@ type PropsByType = {
 	variant: AlertVariant;
 };
 type PropsBasic = {
-	variant: AlertVariant;
+	variant?: AlertVariant;
 };
 
 const AlertByType: FC<PropsByType> = ({ level, type, variant }) => (

package/src/components/button/partials/cases.tsx

@@ -1,9 +1,9 @@
-import type { Components } from '@public-ui/components';
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { KolButton } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
 
-export const ButtonCases = forwardRef<HTMLKolButtonElement, Components.KolButton>(function InputCheckboxCases(props, ref) {
+export const ButtonCases = function ButtonCases(props: Partial<Components.KolButton>) {
 	return (
 		<div className="flex flex-wrap gap-4">
 			<KolButton {...props} _icons="codicon codicon-home" _label="Primary" _variant="primary"></KolButton>
@@ -11,7 +11,7 @@ export const ButtonCases = forwardRef<HTMLKolButtonElement, Components.KolButton
 			<KolButton {...props} _icons="codicon codicon-hubot" _label="Normal" _variant="normal"></KolButton>
 			<KolButton {...props} _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary"></KolButton>
 			<KolButton {...props} _icons="codicon codicon-trash" _label="Danger" _variant="danger"></KolButton>
-			<KolButton ref={ref} {...props} _icons="codicon codicon-reactions" _label="Ghost" _variant="ghost"></KolButton>
+			<KolButton {...props} _icons="codicon codicon-reactions" _label="Ghost" _variant="ghost"></KolButton>
 		</div>
 	);
-});
+};

package/src/components/button/partials/variants.tsx

@@ -1,28 +1,27 @@
-import type { Components } from '@public-ui/components';
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { ButtonCases } from './cases';
 
-export const ButtonVariants = forwardRef<HTMLKolButtonElement, Components.KolButton>(function InputCheckboxVariant(props, ref) {
+export const ButtonVariants = function ButtonVariant() {
 	return (
 		<div className="grid gap-4">
 			<h1>Button</h1>
 			<section>
 				<h2>Button</h2>
-				<ButtonCases {...props} />
+				<ButtonCases />
 			</section>
 			<section>
 				<h2>Button (disabled)</h2>
-				<ButtonCases {...props} _disabled />
+				<ButtonCases _disabled />
 			</section>
 			<section>
 				<h2>Button (hideLabel)</h2>
-				<ButtonCases ref={ref} {...props} _hideLabel />
+				<ButtonCases _hideLabel />
 			</section>
 			<section>
 				<h2>Button (disabled, hideLabel)</h2>
-				<ButtonCases {...props} _disabled _hideLabel />
+				<ButtonCases _disabled _hideLabel />
 			</section>
 		</div>
 	);
-});
+};

package/src/components/card/routes.ts

@@ -3,10 +3,8 @@ import { CardBasic } from './basic';
 import { CardConfirm } from './confirm';
 import { CardFlex } from './flex';
 import { CardSelection } from './selection';
-import { SampleDescription } from '../SampleDescription';
 
 export const CARD_ROUTES: Routes = {
-	//SYNTAXERROR
 	card: {
 		basic: CardBasic,
 		confirm: CardConfirm,

package/src/components/combobox/partials/cases.tsx

@@ -3,11 +3,10 @@ import React, { forwardRef } from 'react';
 import { KolCombobox } from '@public-ui/react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
-
-import type { Components } from '@public-ui/components';
 import { COUNTRY_SUGGESTIONS } from '../../../shares/country';
+import type { Components } from '@public-ui/components';
 
-export const ComboboxCases = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function ComboboxCases(props) {
+export const ComboboxCases = forwardRef<HTMLKolComboboxElement, Components.KolCombobox>(function InputComboboxCases(props) {
 	return (
 		<div className="grid gap-4">
 			<KolCombobox
@@ -18,6 +17,7 @@ export const ComboboxCases = forwardRef<HTMLKolSelectElement, Components.KolSele
 				_value={'Deutschland'}
 				_on={{
 					onBlur: console.log,
+					onInput: console.log,
 					onChange: console.log,
 					onClick: console.log,
 					onFocus: console.log,

package/src/components/combobox/partials/variants.tsx

@@ -1,14 +1,14 @@
 import React, { forwardRef } from 'react';
+import type { Components } from '@public-ui/components';
 
 import { ComboboxCases } from './cases';
 
-import type { Components } from '@public-ui/components';
-export const ComboboxVariants = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectVariant(props, ref) {
+export const ComboboxVariants = forwardRef<HTMLKolComboboxElement, Components.KolCombobox>(function InputComboboxVariant(props, ref) {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">
 			<fieldset>
 				<legend>Text</legend>
-				<ComboboxCases {...props} />
+				<ComboboxCases ref={ref} {...props} />
 			</fieldset>
 			<fieldset>
 				<legend>Text (hideLabel)</legend>

package/src/components/drawer/basic.tsx

@@ -0,0 +1,61 @@
+import type { FC } from 'react';
+import React, { useRef, useState, useContext, useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import { HideMenusContext } from '../../shares/HideMenusContext';
+import type { AlignPropType } from '@public-ui/components';
+import { KolDrawer, KolButton, KolBadge } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+
+import { DrawerRadioAlign } from './partials/align';
+
+export const DrawerBasic: FC = () => {
+	const [searchParams] = useSearchParams();
+	const defaultAlign = searchParams.get('align') as AlignPropType;
+	const hideMenus = useContext(HideMenusContext);
+	const drawerElement = useRef<HTMLKolDrawerElement>(null);
+	const drawerModalElement = useRef<HTMLKolDrawerElement>(null);
+	const [align, setAlign] = useState<AlignPropType>(defaultAlign);
+	useEffect(() => {
+		if (defaultAlign) {
+			drawerModalElement.current?.open();
+		}
+	}, [defaultAlign]);
+	return (
+		<>
+			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
+			<SampleDescription>
+				<p>
+					Hier ist ein Beispiel für ein Drawer. Dieser lässt sich öffnen und schließen mit Methoden. Dadurch erscheint ein Dialog mit Text und
+					&apos;Schließen&apos; Button. Durch anklicken des &apos;Schließen&apos; Button, schließt sich der Dialog wieder. Zusätzlich lässt sich der Dialog als
+					Modal (_modal) durch ESC schließen. Beide Varianten können über das Attribut _align links, oben, rechts oder unten ausgerichtet werden.
+				</p>
+			</SampleDescription>
+			<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />
+			<div className="flex flex-wrap gap-4">
+				<KolDrawer ref={drawerElement} _label="Ich bin ein Drawer" _align={align} _on={{ onClose: () => console.log('Drawer onClose triggered!') }}>
+					<p>
+						Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+						voluptua.
+					</p>
+					<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
+				</KolDrawer>
+				<KolButton _label="Open drawer" _on={{ onClick: () => drawerElement.current?.open() }} />
+				<KolDrawer
+					ref={drawerModalElement}
+					_modal
+					_align={align}
+					_label="Ich bin ein Drawer Modal"
+					_on={{ onClose: () => console.log('Drawer Modal onClose triggered!') }}
+				>
+					<p>
+						Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+						voluptua.
+					</p>
+					<KolButton _label="Close drawer modal" _on={{ onClick: () => drawerModalElement.current?.close() }} />
+				</KolDrawer>
+				<KolButton _label="Open drawer as modal" _on={{ onClick: () => drawerModalElement.current?.open() }} />
+			</div>
+		</>
+	);
+};

package/src/components/drawer/controlled.tsx

@@ -0,0 +1,47 @@
+import type { FC } from 'react';
+import React, { useState, useContext } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import { HideMenusContext } from '../../shares/HideMenusContext';
+import type { AlignPropType } from '@public-ui/components';
+import { KolDrawer, KolButton, KolBadge } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+
+import { DrawerRadioAlign } from './partials/align';
+
+export const DrawerControlled: FC = () => {
+	const [searchParams] = useSearchParams();
+	const defaultAlign = searchParams.get('align') as AlignPropType;
+	const hideMenus = useContext(HideMenusContext);
+	const [open, setOpen] = useState(false);
+	const [modalOpen, setModalOpen] = useState(false);
+	const [align, setAlign] = useState<AlignPropType>(defaultAlign);
+	return (
+		<div>
+			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
+			<SampleDescription>
+				<p>
+					Hier ist ein Beispiel für einen kontrollierten Drawer. Dieser lässt sich öffnen und schließen über das Attribut _open. Zusätzlich lässt sich der
+					Dialog als Modal (_modal) durch ESC schließen. Der Drawer kann über das Attribut _align links, oben, rechts oder unten ausgerichtet werden.
+				</p>
+			</SampleDescription>
+			<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />
+			<div className="flex flex-wrap gap-4">
+				<KolDrawer _open={open} _align={align} _label="Ich bin ein kotrollierter Drawer" _on={{ onClose: () => setOpen(false) }}>
+					<div>
+						<p>Lorem ipsum dolor sit amet,</p>
+						<KolButton _label="Close drawer" _on={{ onClick: () => setOpen(false) }} />
+					</div>
+				</KolDrawer>
+				<KolButton _label="Open drawer" _on={{ onClick: () => setOpen(true) }} />
+				<KolDrawer _open={modalOpen} _modal _align={align} _label="Ich bin ein kotrollierter Modal Drawer" _on={{ onClose: () => setModalOpen(false) }}>
+					<div>
+						<p>Lorem ipsum dolor sit amet,</p>
+						<KolButton _label="Close drawer" _on={{ onClick: () => setModalOpen(false) }} />
+					</div>
+				</KolDrawer>
+				<KolButton _label="Open drawer as modal" _on={{ onClick: () => setModalOpen(true) }} />
+			</div>
+		</div>
+	);
+};

package/src/components/drawer/partials/align.tsx

@@ -0,0 +1,26 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolInputRadio } from '@public-ui/react';
+
+import type { AlignPropType } from '@public-ui/components';
+
+const options = ['left', 'top', 'right', 'bottom'].map((align) => ({
+	label: align,
+	value: align,
+}));
+
+type DrawerRadioAlignProps = {
+	value?: AlignPropType;
+	onChange?: (_: Event, value: unknown) => void;
+};
+
+export const DrawerRadioAlign: FC<DrawerRadioAlignProps> = ({ value = 'left', onChange }) => {
+	return (
+		<div className="grid gap-4">
+			<div className="container my-4 d-grid gap-4">
+				<KolInputRadio _label="Drawer alignment" _value={value} _options={options} _orientation="horizontal" _on={{ onChange }} />
+			</div>
+		</div>
+	);
+};

package/src/components/drawer/routes.ts

@@ -0,0 +1,10 @@
+import { Routes } from '../../shares/types';
+import { DrawerBasic } from './basic';
+import { DrawerControlled } from './controlled';
+
+export const DRAWER_ROUTES: Routes = {
+	drawer: {
+		basic: DrawerBasic,
+		controlled: DrawerControlled,
+	},
+};