@public-ui/sample-react 1.7.0-rc.9 → 1.7.1

package/src/components/input-email/partials/variants.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { InputEmailCases } from './cases';
+
+export const InputEmailVariants = forwardRef<HTMLKolInputEmailElement, Components.KolInputEmail>(function InputEmailVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Email</legend>
+				<InputEmailCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Email (hideLabel)</legend>
+				<InputEmailCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

package/src/components/input-file/basic.tsx

@@ -1,25 +1,5 @@
-import React from 'react';
-import { KolInputFile, KolForm } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
+import { InputFileVariants } from './partials/variants';
 
-import { FC } from 'react';
-
-import { ERROR_MSG } from '../../shares/constants';
-
-export const InputFileBasic: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolInputFile
-			_id="file"
-			_name="file"
-			_required
-			_error={ERROR_MSG}
-			_label="Datei hochladen"
-			_icon={{
-				left: {
-					icon: 'codicon codicon-save',
-				},
-			}}
-		/>
-		<KolInputFile _id="file" _multiple _error={ERROR_MSG} _label="Datei hochladen (Multiple)" />
-		<KolInputFile _disabled _id="file" _label="Datei hochladen (Disabled)" />
-	</KolForm>
-);
+export const InputFileBasic: FC = () => <FormWrap RefComponent={InputFileVariants} />;

package/src/components/input-file/partials/cases.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+
+import { KolInputFile } from '@public-ui/react';
+
+import { Components } from '@public-ui/components';
+import { ERROR_MSG } from '../../../shares/constants';
+
+export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolInputFile
+				{...props}
+				_required
+				_error={ERROR_MSG}
+				_label="Datei hochladen"
+				_icons={{
+					left: {
+						icon: 'codicon codicon-save',
+					},
+				}}
+				_touched
+			/>
+			<KolInputFile {...props} ref={ref} _multiple _error={ERROR_MSG} _label="Datei hochladen (Multiple)" />
+			<KolInputFile {...props} _disabled _label="Datei hochladen (Disabled)" />
+		</div>
+	);
+});

package/src/components/input-file/partials/variants.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { InputFileCases } from './cases';
+
+export const InputFileVariants = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>File</legend>
+				<InputFileCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>File (hideLabel)</legend>
+				<InputFileCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

package/src/components/input-number/basic.tsx

@@ -1,30 +1,5 @@
-import React from 'react';
-import { KolForm, KolInputNumber } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
+import { InputNumberVariants } from './partials/variants';
 
-import { FC } from 'react';
-
-import { ERROR_MSG } from '../../shares/constants';
-
-export const InputNumberBasic: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolInputNumber
-			_id="number"
-			_name="number"
-			_required
-			_error={ERROR_MSG}
-			_placeholder="Mit Icons"
-			_label="Zahleneingabe"
-			_icon={{
-				left: {
-					icon: 'codicon codicon-arrow-left',
-				},
-				right: {
-					icon: 'codicon codicon-arrow-right',
-				},
-			}}
-		/>
-		<KolInputNumber _id="number" _max={10} _min={-10} _step={2} _label="Zahleneingabe (-10 bis 10 in 2er Schritten)" />
-		<KolInputNumber _id="number" _read-only _label="Zahleneingabe (Readonly)" />
-		<KolInputNumber _disabled _id="number" _label="Zahleneingabe (Disabled)" />
-	</KolForm>
-);
+export const InputNumberBasic: FC = () => <FormWrap RefComponent={InputNumberVariants} />;

package/src/components/input-number/partials/cases.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef } from 'react';
+
+import { KolInputNumber } from '@public-ui/react';
+
+import { Components } from '@public-ui/components';
+import { ERROR_MSG } from '../../../shares/constants';
+
+export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components.KolInputNumber>(function InputNumberCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolInputNumber
+				{...props}
+				_required
+				_error={ERROR_MSG}
+				_touched
+				_placeholder="Mit Icons"
+				_label="Zahleneingabe"
+				_icons={{
+					left: {
+						icon: 'codicon codicon-arrow-left',
+					},
+					right: {
+						icon: 'codicon codicon-arrow-right',
+					},
+				}}
+			/>
+			<KolInputNumber {...props} ref={ref} _max={10} _min={-10} _step={2} _label="Zahleneingabe (-10 bis 10 in 2er Schritten)" />
+			<KolInputNumber {...props} _readOnly _label="Zahleneingabe (Readonly)" />
+			<KolInputNumber {...props} _disabled _label="Zahleneingabe (Disabled)" />
+		</div>
+	);
+});

package/src/components/input-number/partials/variants.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { InputNumberCases } from './cases';
+
+export const InputNumberVariants = forwardRef<HTMLKolInputNumberElement, Components.KolInputNumber>(function InputNumberVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Number</legend>
+				<InputNumberCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Number (hideLabel)</legend>
+				<InputNumberCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

package/src/components/input-password/basic.tsx

@@ -1,28 +1,5 @@
-import React from 'react';
-import { KolForm, KolInputPassword } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
+import { InputPasswordVariants } from './partials/variants';
 
-import { FC } from 'react';
-
-import { ERROR_MSG } from '../../shares/constants';
-
-export const InputPasswordBasic: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolInputPassword _disabled _error={ERROR_MSG} _label="Passwort (Disabled)" />
-		<KolInputPassword _read-only _label="Passwort (Readonly)" />
-		<KolInputPassword
-			_name="password"
-			_required
-			_error={ERROR_MSG}
-			_placeholder="Mit Icons"
-			_label="Passwort"
-			_icon={{
-				left: {
-					icon: 'codicon codicon-arrow-left',
-				},
-				right: {
-					icon: 'codicon codicon-arrow-right',
-				},
-			}}
-		/>
-	</KolForm>
-);
+export const InputPasswordBasic: FC = () => <FormWrap RefComponent={InputPasswordVariants} />;

package/src/components/input-password/partials/cases.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef } from 'react';
+
+import { KolInputPassword } from '@public-ui/react';
+
+import { Components } from '@public-ui/components';
+import { ERROR_MSG } from '../../../shares/constants';
+
+export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, Components.KolInputPassword>(function InputPasswordCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolInputPassword {...props} _disabled _error={ERROR_MSG} _label="Passwort (Disabled)" _touched />
+			<KolInputPassword {...props} _readOnly _label="Passwort (Readonly)" />
+			<KolInputPassword
+				{...props}
+				ref={ref}
+				_required
+				_error={ERROR_MSG}
+				_placeholder="Mit Icons"
+				_label="Passwort"
+				_icons={{
+					left: {
+						icon: 'codicon codicon-arrow-left',
+					},
+					right: {
+						icon: 'codicon codicon-arrow-right',
+					},
+				}}
+				_touched
+			/>
+		</div>
+	);
+});

package/src/components/input-password/partials/variants.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { InputPasswordCases } from './cases';
+
+export const InputPasswordVariants = forwardRef<HTMLKolInputPasswordElement, Components.KolInputPassword>(function InputPasswordVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Password</legend>
+				<InputPasswordCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Password (hideLabel)</legend>
+				<InputPasswordCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

package/src/components/input-password/show-password.tsx

@@ -15,13 +15,13 @@ export const InputPasswordShowPassword: FC = () => {
 	}, [isPasswordVisible]);
 
 	return (
-		<KolForm className="grid gap-4">
+		<KolForm>
 			<KolInputPassword
 				_placeholder="Mit 'Passwort anzeigen' Button"
 				_label="Passwort"
 				ref={passwordRef}
 				_smartButton={{
-					_icon: {
+					_icons: {
 						left: {
 							icon: 'codicon codicon-eye',
 						},
@@ -32,6 +32,7 @@ export const InputPasswordShowPassword: FC = () => {
 						onClick: handleTogglePasswordClick,
 					},
 				}}
+				className="block"
 			/>
 		</KolForm>
 	);

package/src/components/input-radio/basic.tsx

@@ -1,46 +1,5 @@
-import React from 'react';
-import { KolForm, KolInputRadio } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
+import { InputRadioVariants } from './partials/variants';
 
-import { FC } from 'react';
-
-import { ERROR_MSG } from '../../shares/constants';
-
-export const InputRadioBasic: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolInputRadio
-			_id="anrede"
-			_error={ERROR_MSG}
-			_name="anrede"
-			_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"
-			_label="Anrede"
-		/>
-		<KolInputRadio
-			_id="anrede"
-			_required
-			_error={ERROR_MSG}
-			_name="anrede2"
-			_value="Firma"
-			_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)','value':'Herr'},{'label':'Firma','value':'Firma'}]"
-			_label="Anrede"
-		/>
-		<KolInputRadio
-			_id="anrede"
-			_orientation="horizontal"
-			_required
-			_error={ERROR_MSG}
-			_name="anrede2"
-			_value="Firma"
-			_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"
-			_label="Anrede (horizontal)"
-		/>
-		<KolInputRadio
-			_id="anrede"
-			_disabled
-			_error={ERROR_MSG}
-			_name="anrede3"
-			_value="Firma"
-			_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"
-			_label="Anrede"
-		/>
-	</KolForm>
-);
+export const InputRadioBasic: FC = () => <FormWrap RefComponent={InputRadioVariants} />;

package/src/components/input-radio/horizontal.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { KolButton, KolDetails, KolInputCheckbox, KolInputRadio } from '@public-ui/react';
-import { FC, useState } from 'react';
+import React, { FC, useState } from 'react';
+
 import { Orientation } from '@public-ui/components';
+import { KolButton, KolDetails, KolForm, KolInputCheckbox, KolInputRadio } from '@public-ui/react';
 
 export const InputRadioHorizontal: FC = () => {
 	const [show, setShow] = useState(true);
@@ -33,9 +33,12 @@ export const InputRadioHorizontal: FC = () => {
 				<KolInputCheckbox _label="Switch orientation (horizontal/vertical)" _on={{ onChange: toggleOrientation }} _variant="switch" />
 			</div>
 			{show && (
-				<div className="container my-4 d-grid gap-4">
-					<KolInputRadio _label={`Test (${orientation})`} _options={options} _orientation={orientation} />
-				</div>
+				<KolForm>
+					<div className="container my-4 d-grid gap-4">
+						<KolInputRadio _label={`Test (${orientation})`} _options={options} _orientation={orientation} _required />
+						<KolInputRadio _hideLabel _label={`Test (${orientation})`} _options={options} _orientation={orientation} _required />
+					</div>
+				</KolForm>
 			)}
 		</div>
 	);

package/src/components/input-radio/partials/cases.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef } from 'react';
+
+import { KolInputRadio } from '@public-ui/react';
+
+import { Components } from '@public-ui/components';
+import { ERROR_MSG } from '../../../shares/constants';
+
+export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolInputRadio
+				{...props}
+				_error={ERROR_MSG}
+				_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"
+				_label="Anrede"
+			/>
+			<KolInputRadio
+				{...props}
+				_required
+				_error={ERROR_MSG}
+				_touched
+				_value="Firma"
+				_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)','value':'Herr'},{'label':'Firma','value':'Firma'}]"
+				_label="Anrede (mit Fehler)"
+			/>
+			<KolInputRadio
+				{...props}
+				ref={ref}
+				_orientation="horizontal"
+				_required
+				_value="Firma"
+				_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"
+				_label="Anrede (horizontal)"
+			/>
+			<KolInputRadio
+				{...props}
+				_disabled
+				_orientation="horizontal"
+				_required
+				_error={ERROR_MSG}
+				_touched
+				_value="Firma"
+				_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"
+				_label="Anrede (horizontal mit Fehler)"
+			/>
+			<KolInputRadio
+				{...props}
+				_disabled
+				_value="Firma"
+				_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"
+				_label="Anrede"
+				_touched
+			/>
+		</div>
+	);
+});

package/src/components/input-radio/partials/variants.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { InputRadioCases } from './cases';
+
+export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Radio</legend>
+				<InputRadioCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Radio (hideLabel)</legend>
+				<InputRadioCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

package/src/components/input-radio/select.tsx

@@ -13,6 +13,6 @@ const options = [
 
 export const InputRadioSelect: FC = () => (
 	<KolForm className="grid gap-4">
-		<KolInputRadio _id="anrede-radio" _error={ERROR_MSG} _name="anrede" _options={options} _label="Anrede" />
+		<KolInputRadio _error={ERROR_MSG} _options={options} _label="Anrede" />
 	</KolForm>
 );

package/src/components/input-range/basic.tsx

@@ -1,29 +1,5 @@
-import React from 'react';
-import { KolForm, KolInputRange } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
+import { InputRangeVariants } from './partials/variants';
 
-import { FC } from 'react';
-
-import { ERROR_MSG } from '../../shares/constants';
-
-export const InputRangeBasic: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolInputRange
-			_id="range"
-			_min={0}
-			_max={50}
-			_name="range"
-			_error={ERROR_MSG}
-			_label="Schieberegler"
-			_icon={{
-				left: {
-					icon: 'codicon codicon-arrow-left',
-				},
-				right: {
-					icon: 'codicon codicon-arrow-right',
-				},
-			}}
-		/>
-		<KolInputRange _id="range" _min={0} _max={50} _step={10} _error={ERROR_MSG} _label="Schieberegler" />
-		<KolInputRange _disabled _id="range" _min={0} _max={50} _label="Schieberegler" />
-	</KolForm>
-);
+export const InputRangeBasic: FC = () => <FormWrap RefComponent={InputRangeVariants} />;

package/src/components/input-range/partials/cases.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react';
+
+import { KolInputRange } from '@public-ui/react';
+
+import { Components } from '@public-ui/components';
+import { ERROR_MSG } from '../../../shares/constants';
+
+export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.KolInputRange>(function InputRangeCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolInputRange
+				{...props}
+				_min={0}
+				_max={50}
+				_error={ERROR_MSG}
+				_label="Schieberegler"
+				_icons={{
+					left: {
+						icon: 'codicon codicon-arrow-left',
+					},
+					right: {
+						icon: 'codicon codicon-arrow-right',
+					},
+				}}
+				_touched
+			/>
+			<KolInputRange {...props} ref={ref} _min={0} _max={50} _step={10} _error={ERROR_MSG} _label="Schieberegler mit Fehler" _touched />
+			<KolInputRange {...props} _disabled _min={0} _max={50} _label="Schieberegler (disabled)" />
+		</div>
+	);
+});

package/src/components/input-range/partials/variants.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { InputRangeCases } from './cases';
+
+export const InputRangeVariants = forwardRef<HTMLKolInputRangeElement, Components.KolInputRange>(function InputRangeVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Range</legend>
+				<InputRangeCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Range (hideLabel)</legend>
+				<InputRangeCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

package/src/components/input-text/basic.tsx

@@ -1,72 +1,5 @@
-import React from 'react';
-import { KolForm, KolInputText } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
+import { InputTextVariants } from './partials/variants';
 
-import { FC } from 'react';
-
-import { ERROR_MSG, HINT_MSG } from '../../shares/constants';
-
-export const InputTextBasic: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolInputText
-			_id=""
-			_hint={HINT_MSG}
-			_error={ERROR_MSG}
-			_placeholder="Mit Icons"
-			_icon={{
-				left: 'codicon codicon-arrow-left',
-				right: {
-					icon: 'codicon codicon-arrow-right',
-					style: {
-						'font-size': '200%',
-					},
-				},
-			}}
-			_on={{
-				onBlur: console.log,
-				onChange: console.log,
-				onClick: console.log,
-				onFocus: console.log,
-			}}
-			_hideLabel
-			_required
-			_smartButton={{
-				_icon: {
-					left: {
-						icon: 'codicon codicon-eye',
-					},
-				},
-				_hideLabel: true,
-				_label: 'Passwort anzeigen',
-				_on: {
-					onClick: () => {},
-				},
-			}}
-			_type="search"
-			_label="Suche"
-		/>
-		<KolInputText
-			_id=""
-			_error={ERROR_MSG}
-			_placeholder="Mit Icons"
-			_label="Suche"
-			_icon={{
-				left: {
-					icon: 'codicon codicon-arrow-left',
-				},
-				right: {
-					icon: 'codicon codicon-arrow-right',
-				},
-			}}
-			_hideLabel
-			_type="search"
-		/>
-		<KolInputText _id="" _placeholder="Placeholder" _label="Vorname (text)" _required />
-		<KolInputText _id="" _placeholder="Placeholder" _label="Suche (search)" _type="search" />
-		<KolInputText _id="vorname" _placeholder="Placeholder" _error={ERROR_MSG} _type="url" _label="URL (url)" />
-		<KolInputText _id="" _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" />
-		<KolInputText _id="" _placeholder="Placeholder" _read-only _label="Vorname (text, readonly)" />
-		<KolInputText _id="" _value="Value" _read-only _label="Vorname (text, readonly)" />
-		<KolInputText _id="" _placeholder="Placeholder" _disabled _label="Vorname (text, disabled)" />
-		<KolInputText _id="" _value="Value" _disabled _label="Vorname (text, disabled)" />
-	</KolForm>
-);
+export const InputTextBasic: FC = () => <FormWrap RefComponent={InputTextVariants} />;

package/src/components/input-text/blur.tsx

@@ -1,10 +1,8 @@
 import { KolForm, KolInputText } from '@public-ui/react';
-import React from 'react';
-
-import { FC } from 'react';
+import React, { FC } from 'react';
 
 export const InputTextBlur: FC = () => (
-	<KolForm className="grid gap-4">
+	<KolForm>
 		<KolInputText
 			_on={{
 				onBlur: console.log,

package/src/components/input-text/focus.tsx

@@ -9,15 +9,17 @@ export const InputTextFocus: FC = () => {
 	useLayoutEffect(() => {
 		setTimeout(() => {
 			ref.current?.focus();
-		}, 100);
+		}, 500);
 	}, [ref]);
 
 	return (
-		<KolForm className="grid gap-4">
-			<KolInputText ref={ref} _id="vorname" _label="Vorname" />
-			<KolInputText _label="Nachname" />
-			<div>
-				<KolButton _label="Submit"></KolButton>
+		<KolForm>
+			<div className="grid gap-4">
+				<KolInputText ref={ref} _label="Vorname" />
+				<KolInputText _label="Nachname" />
+				<div>
+					<KolButton _label="Submit"></KolButton>
+				</div>
 			</div>
 		</KolForm>
 	);