@public-ui/sample-react 4.0.0-alpha.1 → 4.0.0-alpha.11

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

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
-import { KolInputPassword } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
+import { KolInputPassword } from '@public-ui/react-v19';
+import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
@@ -21,17 +21,18 @@ export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, Compon
 				_label="Passwort"
 				_icons={{
 					left: {
-						icon: 'codicon codicon-arrow-left',
+						icon: 'kolicon-chevron-left',
 					},
 					right: {
-						icon: 'codicon codicon-arrow-right',
+						icon: 'kolicon-chevron-right',
 					},
 				}}
 				_touched
 			/>
-			<KolInputPassword {...props} _placeholder="Placeholder" _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Password" />
-			<KolInputPassword {...props} _placeholder="Placeholder" _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Password" />
-			<KolInputPassword {...props} _placeholder="Placeholder" _msg={{ _type: 'success', _description: 'Success message' }} _label="Password" />
+			<KolInputPassword {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Passwort" _touched />
+			<KolInputPassword {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Passwort" _touched />
+			<KolInputPassword {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Passwort" _touched />
+			<KolInputPassword {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Passwort" _touched />
 			<KolInputPassword {...props} _disabled _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Passwort (Disabled)" _touched />
 			<KolInputPassword {...props} _readOnly _label="Passwort (Readonly)" />
 			<KolInputPassword {...props} ref={ref} _shortKey="c" _label="With access key" />

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

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputRadioVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { InputRadioVariants } from './partials/variants';
 
 export const InputRadioBasic: FC = () => (
 	<>

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

@@ -3,8 +3,8 @@ import React, { forwardRef } from 'react';
 import { InputRadioCases } from './cases';
 
 import type { Components } from '@public-ui/components';
-import { SampleColumns } from '../../SampleColumns';
 import { KolHeading } from '@public-ui/react-v19';
+import { SampleColumns } from '../../SampleColumns';
 
 export const InputRadioVariants = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioVariant(props, ref) {
 	return (

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

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputRangeVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { InputRangeVariants } from './partials/variants';
 
 export const InputRangeBasic: FC = () => (
 	<>

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

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
-import { KolInputRange } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
+import { KolInputRange } from '@public-ui/react-v19';
+import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
@@ -16,10 +16,10 @@ export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.K
 					_label="Slider (Black background test)"
 					_icons={{
 						left: {
-							icon: 'codicon codicon-arrow-left',
+							icon: 'kolicon-chevron-left',
 						},
 						right: {
-							icon: 'codicon codicon-arrow-right',
+							icon: 'kolicon-chevron-right',
 						},
 					}}
 					_touched
@@ -37,9 +37,10 @@ export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.K
 				_label="Slider with error"
 				_touched
 			/>
-			<KolInputRange {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Slider" />
-			<KolInputRange {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Slider" />
-			<KolInputRange {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Slider" />
+			<KolInputRange {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Slider" _touched />
+			<KolInputRange {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Slider" _touched />
+			<KolInputRange {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Slider" _touched />
+			<KolInputRange {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Slider" _touched />
 			<KolInputRange {...props} _disabled _min={0} _max={50} _label="Slider (disabled)" />
 			<KolInputRange {...props} _min={0} _max={50} _label="With access key" _accessKey="c" />
 			<KolInputRange {...props} _min={0} _max={50} _label="With short key" _shortKey="s" />

package/src/components/input-text/access-short-key.tsx

@@ -0,0 +1,19 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextAccessShortKey: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates access keys and short keys for KolInputText. Access keys provide keyboard shortcuts for focusing inputs.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="With access key (Alt+F)" _value="Press Alt+F to focus" _accessKey="f" />
+			<KolInputText _label="With short key (Alt+N)" _value="Press Alt+N to focus" _shortKey="n" />
+			<KolInputText _label="Access key (Alt+E)" _value="" _placeholder="Email address" _accessKey="e" />
+			<KolInputText _label="Short key (Alt+P)" _value="" _placeholder="Phone number" _shortKey="p" />
+		</div>
+	</>
+);

package/src/components/input-text/background-test.tsx

@@ -0,0 +1,20 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextBackground: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story showcases the component placed on a colored background.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4 bg-blue-400 p-4 rounded">
+			<strong>Default background:</strong>
+			<KolInputText _label="First name" _value="John Doe" />
+
+			<strong>Unset background:</strong>
+			<KolInputText style={{ backgroundColor: 'unset' }} _label="First name" _value="John Doe" />
+		</div>
+	</>
+);

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

@@ -1,16 +1,21 @@
+import { KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-
-import { FormWrap } from '../FormWrap';
-import { InputTextVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputTextBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>KolInputText renders a text input field. The sample shows KolInputText in a form context with all variations and states.</p>
+			<p>This story showcases the most important InputText variants: default, required, validation error, disabled, read-only, and with icons.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputTextVariants} showButtons={false} />
+		<div className="grid gap-4">
+			<KolInputText _label="Name" _value="Anderson-Clark" />
+			<KolInputText _label="Name" _required _msg={{ _type: 'error', _description: 'Please enter your name' }} _touched />
+			<KolInputText _label="Name" _required _hint="Enter your surname" />
+			<KolInputText _label="Name" _value="Anderson-Clark" _disabled />
+			<KolInputText _label="Name" _readOnly _value="Anderson-Clark" />
+			<KolInputText _label="Name" _icons="fa-solid fa-user" _value="Anderson-Clark" />
+		</div>
 	</>
 );

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

@@ -0,0 +1,19 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextDisabled: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates the disabled state of KolInputText. Disabled inputs cannot be edited or focused.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="Disabled with placeholder" _placeholder="Placeholder text" _disabled />
+			<KolInputText _label="Disabled with value" _value="This field is disabled" _disabled />
+			<KolInputText _label="Disabled with error message" _value="Invalid value" _msg={{ _type: 'error', _description: 'Error message' }} _disabled _touched />
+			<KolInputText _label="Comparison: Enabled" _value="This field is enabled" />
+		</div>
+	</>
+);

package/src/components/input-text/expert-slot.tsx

@@ -1,17 +1,33 @@
+import { KolBadge, KolIcon, KolInputText } from '@public-ui/react-v19';
 import * as React from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { KolInputText } from '@public-ui/react-v19';
 
 export const InputTextExpertSlot = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample show KolInputText with expert slot.</p>
+				<p>This sample shows KolInputText with expert slot. The expert slot allows for complex custom content beyond simple text inputs.</p>
 			</SampleDescription>
 
-			<KolInputText _label="" _type="text">
-				<span slot="expert">I am more than just a input field</span>
-			</KolInputText>
+			<div className="grid gap-4">
+				<KolInputText _label="" _type="text">
+					<span slot="expert">I am more than just a input field</span>
+				</KolInputText>
+
+				<KolInputText _label="" _type="text" _value="Complex example">
+					<div slot="expert" className="flex items-center gap-2">
+						<KolBadge _label="Premium" _color="#1a73e8" />
+						<KolIcon _icons="kolicon-check" _label="" />
+						<span>Verified account with premium features</span>
+					</div>
+				</KolInputText>
+
+				<KolInputText _label="" _type="text" _placeholder="Enter your email">
+					<div slot="expert" style={{ padding: '0.5rem', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>
+						<strong>Note:</strong> This email will be used for account recovery and notifications.
+					</div>
+				</KolInputText>
+			</div>
 		</>
 	);
 };

package/src/components/input-text/hide-label.tsx

@@ -0,0 +1,48 @@
+import { KolAlert, KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextHideLabel: FC = () => (
+	<div className="grid gap-4">
+		<SampleDescription>
+			<p>
+				This story demonstrates the <code>_hideLabel</code> feature for KolInputText. It allows hiding the label visually while keeping it accessible for screen
+				readers.
+			</p>
+		</SampleDescription>
+
+		<section>
+			<KolInputText _hideLabel _label="Search" _placeholder="Search..." _type="search" />
+		</section>
+
+		<section>
+			<KolInputText _hideLabel _label="Email" _placeholder="Enter email" _msg={{ _type: 'error', _description: 'Invalid email format' }} _touched />
+		</section>
+
+		<section>
+			<fieldset className="grid md:grid-cols-2 gap-4">
+				<legend>Street Address</legend>
+				<KolAlert className="col-span-2" _level={0} _type="error">
+					Please complete the address
+				</KolAlert>
+				<KolInputText
+					_hideLabel
+					_hideMsg
+					_label="Street name"
+					_placeholder="Street name"
+					_msg={{ _type: 'error', _description: 'Please complete the address' }}
+					_touched
+				/>
+				<KolInputText
+					_hideLabel
+					_hideMsg
+					_label="House number"
+					_placeholder="Number"
+					_msg={{ _type: 'error', _description: 'Please complete the address' }}
+					_touched
+				/>
+			</fieldset>
+		</section>
+	</div>
+);

package/src/components/input-text/hide-msg.tsx

@@ -1,4 +1,4 @@
-import { KolAlert, KolCard, KolInputText } from '@public-ui/react-v19';
+import { KolAlert, KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -12,10 +12,10 @@ export const InputTextHideMsg: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolCard _label="Normal input field with error" _level={0}>
+		<section>
 			<KolInputText _msg={{ _type: 'error', _description: 'Error message' }} _label="Input with error" _touched />
-		</KolCard>
-		<KolCard _label="Input fields with hidden error" _level={0}>
+		</section>
+		<section>
 			<fieldset className="grid md:grid-cols-2 gap-4">
 				<legend>Combined input field</legend>
 				<KolAlert className="col-span-2" _level={0} _type="error">
@@ -24,6 +24,6 @@ export const InputTextHideMsg: FC = () => (
 				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label="First input" _touched />
 				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label="Second input with error" _touched />
 			</fieldset>
-		</KolCard>
+		</section>
 	</div>
 );

package/src/components/input-text/message-types.tsx

@@ -0,0 +1,20 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextMessageTypes: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates all available message types for KolInputText: default, info, error, warning, and success.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="Default message" _value="Valid value" _msg={{ _type: 'default', _description: 'This is a default message' }} _touched />
+			<KolInputText _label="Error message" _value="Invalid value" _msg={{ _type: 'error', _description: 'This is an error message' }} _touched />
+			<KolInputText _label="Info message" _value="Some value" _msg={{ _type: 'info', _description: 'This is an informational message' }} _touched />
+			<KolInputText _label="Success message" _value="Valid value" _msg={{ _type: 'success', _description: 'This is a success message' }} _touched />
+			<KolInputText _label="Warning message" _value="Valid value" _msg={{ _type: 'warning', _description: 'This is a warning message' }} _touched />
+		</div>
+	</>
+);

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

@@ -0,0 +1,20 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextPlaceholder: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates the placeholder feature of KolInputText.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="First name" _placeholder="Enter your first name" />
+			<KolInputText _label="Email address" _placeholder="user@example.com" />
+			<KolInputText _label="Phone number" _placeholder="+49 123 456789" _type="tel" />
+			<KolInputText _label="Website" _placeholder="https://example.com" _type="url" />
+			<KolInputText _label="Search" _placeholder="Search..." _type="search" />
+		</div>
+	</>
+);

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

@@ -0,0 +1,25 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextReadonly: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates the readonly state of KolInputText. Readonly inputs can be focused but not edited.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="Readonly with placeholder" _placeholder="Placeholder text" _readOnly />
+			<KolInputText _label="Readonly with value" _value="This field is readonly" _readOnly />
+			<KolInputText
+				_label="Readonly with info message"
+				_value="Read-only value"
+				_msg={{ _type: 'info', _description: 'This field cannot be edited' }}
+				_readOnly
+				_touched
+			/>
+			<KolInputText _label="Comparison: Editable" _value="This field is editable" />
+		</div>
+	</>
+);

package/src/components/input-text/routes.ts

@@ -1,16 +1,32 @@
 import { Routes } from '../../shares/types';
+import { InputTextAccessShortKey } from './access-short-key';
+import { InputTextBackground } from './background-test';
 import { InputTextBasic } from './basic';
+import { InputTextDisabled } from './disabled';
+import { InputTextExpertSlot } from './expert-slot';
+import { InputTextHideLabel } from './hide-label';
 import { InputTextHideMsg } from './hide-msg';
-import { InputTextFormatterDemo } from './text-formatter';
+import { InputTextMessageTypes } from './message-types';
+import { InputTextPlaceholder } from './placeholder';
+import { InputTextReadonly } from './readonly';
+import { InputTextSelectRange } from './select-range';
 import { InputTextSmartButton } from './smart-button';
-import { InputTextExpertSlot } from './expert-slot';
+import { InputTextFormatterDemo } from './text-formatter';
 
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
 		basic: InputTextBasic,
+		'message-types': InputTextMessageTypes,
+		placeholder: InputTextPlaceholder,
+		disabled: InputTextDisabled,
+		readonly: InputTextReadonly,
+		'access-short-key': InputTextAccessShortKey,
+		'hide-label': InputTextHideLabel,
 		'hide-msg': InputTextHideMsg,
 		'text-formatter': InputTextFormatterDemo,
 		'smart-button': InputTextSmartButton,
 		'expert-slot': InputTextExpertSlot,
+		'select-range': InputTextSelectRange,
+		background: InputTextBackground,
 	},
 };

package/src/components/input-text/select-range.tsx

@@ -0,0 +1,36 @@
+import { KolButtonLink, KolInputText } from '@public-ui/react-v19';
+import * as React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextSelectRange = () => {
+	const textInput = React.useRef<HTMLKolInputTextElement>(null);
+
+	function setSelectioStart() {
+		textInput.current?.focus();
+		textInput.current?.setSelectionStart(8);
+	}
+
+	function setSelectionRange() {
+		textInput.current?.focus();
+		textInput.current?.setSelectionRange(2, 5);
+	}
+
+	function setRangeText() {
+		textInput.current?.focus();
+		textInput.current?.setRangeText('INSERTED', 5, 9, 'select');
+	}
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows how to change the selection in a KolInputText.</p>
+			</SampleDescription>
+			<div className="grid gap-4">
+				<KolInputText _value="Very long value" _label="Text Input Label" ref={textInput} />
+				<KolButtonLink _label="Set Start" onClick={setSelectioStart} />
+				<KolButtonLink _label="Set Range" onClick={setSelectionRange} />
+				<KolButtonLink _label="Set Range Text" onClick={setRangeText} />
+			</div>
+		</>
+	);
+};

package/src/components/input-text/smart-button.tsx

@@ -1,19 +1,19 @@
-import * as React from 'react';
-import { SampleDescription } from '../SampleDescription';
 import { ToasterService } from '@public-ui/components';
 import { KolInputText } from '@public-ui/react-v19';
+import * as React from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 const smartButtonProps = {
-	_icons: 'codicon codicon-info',
+	_icons: 'kolicon-alert-info',
 	_hideLabel: true,
 };
 
 const icons = {
 	left: {
-		icon: 'codicon codicon-arrow-left',
+		icon: 'fa-solid fa-magnifying-glass',
 	},
 	right: {
-		icon: 'codicon codicon-arrow-right',
+		icon: 'kolicon-check',
 	},
 };
 
@@ -48,13 +48,14 @@ export const InputTextSmartButton = () => {
 					_icons={icons}
 				></KolInputText>
 				<KolInputText
-					_label="Disabled input with button and without icons"
+					_label="Disabled input with button and icons"
 					_disabled
 					_type="text"
 					_smartButton={{
 						...smartButtonProps,
 						_label: 'Disabled Button',
 					}}
+					_icons={icons}
 				></KolInputText>
 			</div>
 		</>