@public-ui/sample-react 2.1.7 → 2.1.8

package/src/scenarios/inputs-get-value.tsx

@@ -80,7 +80,7 @@ const Scenario = (props: Props) => {
 					},
 				}}
 			></KolButton>
-			<pre>{formatter(value)}</pre>
+			<pre className="text-base">{formatter(value)}</pre>
 		</div>
 	);
 };
@@ -100,127 +100,129 @@ export const InputsGetValue: FC = () => {
 						</p>
 					</SampleDescription>
 
-					<KolCard _label="Sample options" className="block ha mb-8">
-						<KolInputCheckbox
-							_label="Log events to console"
-							_value={true}
-							_checked={eventLoggerActive}
-							_on={{ onChange: (_, active) => setEventLoggerActive(active as boolean) }}
-						/>
-					</KolCard>
+					<section className="w-full flex flex-col">
+						<KolCard _label="Sample options" className="block ha mb-8">
+							<KolInputCheckbox
+								_label="Log events to console"
+								_value={true}
+								_checked={eventLoggerActive}
+								_on={{ onChange: (_, active) => setEventLoggerActive(active as boolean) }}
+							/>
+						</KolCard>
 
-					<div className="grid gap-4">
-						<Scenario testId="scenario-inputText" InputComponent={KolInputText} inputProps={{ _label: 'InputText' }} />
-						<Scenario
-							testId="scenario-inputCheckboxString"
-							InputComponent={KolInputCheckbox}
-							inputProps={{ _label: 'KolInputCheckbox (value)', _value: 'Checkbox True Value' }}
-						/>
-						<Scenario testId="scenario-inputCheckboxBoolean" InputComponent={KolInputCheckbox} inputProps={{ _label: 'KolInputCheckbox (boolean)' }} />
-						<Scenario testId="scenario-inputColor" InputComponent={KolInputColor} inputProps={{ _label: 'KolInputColor' }} />
-						<Scenario testId="scenario-inputDate" InputComponent={KolInputDate} inputProps={{ _label: 'KolInputDate' }} />
-						<Scenario testId="scenario-inputEmail" InputComponent={KolInputEmail} inputProps={{ _label: 'KolInputEmail' }} />
-						<Scenario
-							testId="scenario-inputFile"
-							InputComponent={KolInputFile}
-							inputProps={{ _label: 'KolInputFile' }}
-							formatter={(value) =>
-								value instanceof FileList
-									? `FileList{${Array.from(value)
-											.map((file: File) => file.name)
-											.join(', ')}}`
-									: JSON.stringify(value)
-							}
-						/>
-						<Scenario testId="scenario-inputNumber" InputComponent={KolInputNumber} inputProps={{ _label: 'KolInputNumber' }} />
-						<Scenario testId="scenario-inputPassword" InputComponent={KolInputPassword} inputProps={{ _label: 'KolInputPassword' }} />
-						<Scenario testId="scenario-inputRange" InputComponent={KolInputRange} inputProps={{ _label: 'KolInputRange' }} />
-						<Scenario
-							testId="scenario-inputRadio"
-							InputComponent={KolInputRadio}
-							inputProps={{
-								_label: 'KolInputRadio',
-								_orientation: 'horizontal',
-								_options: [
-									{ label: 'New York', value: 'New York' },
-									{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
-									{ label: 'Rosenheim', value: 'Rosenheim' },
-								],
-								_value: 'New York',
-							}}
-						/>
-						<Scenario
-							testId="scenario-select"
-							InputComponent={KolSelect}
-							inputProps={{
-								_label: 'KolSelect',
-								_options: [
-									{ label: 'New York', value: 'New York' },
-									{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
-									{ label: 'Rosenheim', value: 'Rosenheim' },
-								],
-							}}
-						/>
-						<Scenario
-							testId="scenario-singleSelect"
-							InputComponent={KolSingleSelect}
-							inputProps={{
-								_label: 'KolSingleSelect',
-								_options: [
-									{ label: 'New York', value: 'New York' },
-									{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
-									{ label: 'Rosenheim', value: 'Rosenheim' },
-								],
-								_value: 'Rosenheim',
-							}}
-						/>
-						<Scenario
-							testId="scenario-combobox"
-							InputComponent={KolCombobox}
-							inputProps={{
-								_label: 'KolCombobox',
-								_suggestions: COUNTRY_SUGGESTIONS,
-								_value: 'Deutschland',
-							}}
-						/>
-						<Scenario
-							testId="scenario-textarea"
-							InputComponent={KolTextarea}
-							inputProps={{
-								_label: 'KolTextarea',
-							}}
-						/>
-						<Scenario
-							testId="scenario-button"
-							InputComponent={KolButton}
-							inputProps={{
-								_label: 'KolButton',
-								_variant: 'ghost',
-								_value: 'KolButton value',
-							}}
-						/>
-						<Scenario
-							testId="scenario-buttonLink"
-							InputComponent={KolButtonLink}
-							inputProps={{
-								_label: 'KolButtonLink',
-								_value: 'KolButtonLink value',
-							}}
-						/>
-
-						<div className="grid grid-cols-3 gap-4">
-							<div></div>
-							<KolButton
-								_label="Run all"
-								_variant="primary"
-								_on={{
-									onClick: () => {
-										eventTarget.dispatchEvent(new Event('runAll'));
-									},
+						<div className="grid gap-4">
+							<Scenario testId="scenario-inputText" InputComponent={KolInputText} inputProps={{ _label: 'InputText' }} />
+							<Scenario
+								testId="scenario-inputCheckboxString"
+								InputComponent={KolInputCheckbox}
+								inputProps={{ _label: 'KolInputCheckbox (value)', _value: 'Checkbox True Value' }}
+							/>
+							<Scenario testId="scenario-inputCheckboxBoolean" InputComponent={KolInputCheckbox} inputProps={{ _label: 'KolInputCheckbox (boolean)' }} />
+							<Scenario testId="scenario-inputColor" InputComponent={KolInputColor} inputProps={{ _label: 'KolInputColor' }} />
+							<Scenario testId="scenario-inputDate" InputComponent={KolInputDate} inputProps={{ _label: 'KolInputDate' }} />
+							<Scenario testId="scenario-inputEmail" InputComponent={KolInputEmail} inputProps={{ _label: 'KolInputEmail' }} />
+							<Scenario
+								testId="scenario-inputFile"
+								InputComponent={KolInputFile}
+								inputProps={{ _label: 'KolInputFile' }}
+								formatter={(value) =>
+									value instanceof FileList
+										? `FileList{${Array.from(value)
+												.map((file: File) => file.name)
+												.join(', ')}}`
+										: JSON.stringify(value)
+								}
+							/>
+							<Scenario testId="scenario-inputNumber" InputComponent={KolInputNumber} inputProps={{ _label: 'KolInputNumber' }} />
+							<Scenario testId="scenario-inputPassword" InputComponent={KolInputPassword} inputProps={{ _label: 'KolInputPassword' }} />
+							<Scenario testId="scenario-inputRange" InputComponent={KolInputRange} inputProps={{ _label: 'KolInputRange' }} />
+							<Scenario
+								testId="scenario-inputRadio"
+								InputComponent={KolInputRadio}
+								inputProps={{
+									_label: 'KolInputRadio',
+									_orientation: 'horizontal',
+									_options: [
+										{ label: 'New York', value: 'New York' },
+										{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
+										{ label: 'Rosenheim', value: 'Rosenheim' },
+									],
+									_value: 'New York',
+								}}
+							/>
+							<Scenario
+								testId="scenario-select"
+								InputComponent={KolSelect}
+								inputProps={{
+									_label: 'KolSelect',
+									_options: [
+										{ label: 'New York', value: 'New York' },
+										{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
+										{ label: 'Rosenheim', value: 'Rosenheim' },
+									],
+								}}
+							/>
+							<Scenario
+								testId="scenario-singleSelect"
+								InputComponent={KolSingleSelect}
+								inputProps={{
+									_label: 'KolSingleSelect',
+									_options: [
+										{ label: 'New York', value: 'New York' },
+										{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
+										{ label: 'Rosenheim', value: 'Rosenheim' },
+									],
+									_value: 'Rosenheim',
+								}}
+							/>
+							<Scenario
+								testId="scenario-combobox"
+								InputComponent={KolCombobox}
+								inputProps={{
+									_label: 'KolCombobox',
+									_suggestions: COUNTRY_SUGGESTIONS,
+									_value: 'Deutschland',
 								}}
-							></KolButton>
+							/>
+							<Scenario
+								testId="scenario-textarea"
+								InputComponent={KolTextarea}
+								inputProps={{
+									_label: 'KolTextarea',
+								}}
+							/>
+							<Scenario
+								testId="scenario-button"
+								InputComponent={KolButton}
+								inputProps={{
+									_label: 'KolButton',
+									_variant: 'ghost',
+									_value: 'KolButton value',
+								}}
+							/>
+							<Scenario
+								testId="scenario-buttonLink"
+								InputComponent={KolButtonLink}
+								inputProps={{
+									_label: 'KolButtonLink',
+									_value: 'KolButtonLink value',
+								}}
+							/>
+
+							<div className="grid grid-cols-3 gap-4">
+								<div></div>
+								<KolButton
+									_label="Run all"
+									_variant="primary"
+									_on={{
+										onClick: () => {
+											eventTarget.dispatchEvent(new Event('runAll'));
+										},
+									}}
+								></KolButton>
+							</div>
 						</div>
-					</div>
+					</section>
 				</EventLoggerActiveContext.Provider>
 			</EventTargetContext.Provider>
 		</>

package/src/scenarios/routes.ts

@@ -6,15 +6,17 @@ import { InputsGetValue } from './inputs-get-value';
 import { StaticForm } from './static-form';
 import { FocusElements } from './focus-elements';
 import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
+import { InputGroupWithError } from './input-group-with-error';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
 		'appointment-form': AppointmentForm,
-		'inputs-get-value': InputsGetValue,
 		'custom-tooltip-width': CustomTooltipWidth,
-		'static-form': StaticForm,
 		'disabled-interactive-scenario': DisabledInteractiveElements,
 		'focus-elements': FocusElements,
+		'input-group-with-error': InputGroupWithError,
+		'inputs-get-value': InputsGetValue,
+		'static-form': StaticForm,
 		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,
 	},
 };

package/src/scenarios/static-form.tsx

@@ -14,6 +14,7 @@ import {
 	KolSingleSelect,
 	KolCombobox,
 	KolTextarea,
+	KolHeading,
 } from '@public-ui/react';
 import type { FC } from 'react';
 import React from 'react';
@@ -47,70 +48,72 @@ export const StaticForm: FC = () => {
 				</ol>
 			</SampleDescription>
 
-			{searchParams.size > 0 && (
-				<>
-					<h2>Submitted data</h2>
-					<pre>
-						<code>{JSON.stringify(Object.fromEntries(searchParams.entries()), null, 2)}</code>
-					</pre>
-				</>
-			)}
+			<section className="w-full flex flex-col">
+				{searchParams.size > 0 && (
+					<div className="grid gap-4">
+						<KolHeading _level={2} _label="Submitted data" />
+						<pre className="text-base">
+							<code>{JSON.stringify(Object.fromEntries(searchParams.entries()), null, 2)}</code>
+						</pre>
+					</div>
+				)}
 
-			<form className="grid gap-4" method="get" noValidate>
-				<KolInputCheckbox _name="checkbox" _label="Checkbox" />
-				<KolInputColor _name="color" _label="Color" />
-				<KolInputDate _name="date" _label="Date" />
-				<KolInputEmail _name="email" _label="Email" />
-				<KolInputFile _name="file" _label="File" />
-				<KolInputFile _name="file" _label="Files (multiple)" _multiple />
-				<KolInputNumber _name="number" _label="Number" />
-				<KolInputPassword _name="password" _label="Password" />
-				<KolInputRadio
-					_name="radio"
-					_label="Radio"
-					_options={[
-						{ label: 'Option A', value: 'A' },
-						{ label: 'Option B', value: 'B' },
-					]}
-				/>
-				<KolInputRange _name="range" _label="Range" />
-				<KolInputText _name="text" _label="Text" />
-				<KolSelect
-					_name="select"
-					_label="Select"
-					_options={[
-						{ label: 'Option A', value: 'A' },
-						{ label: 'Option B', value: 'B' },
-					]}
-				/>
-				<KolSelect
-					_name="select"
-					_label="Select (multiple)"
-					_multiple
-					_options={[
-						{ label: 'Option A', value: 'A' },
-						{ label: 'Option B', value: 'B' },
-					]}
-					_rows={2}
-				/>
-				<KolSingleSelect
-					_name="singleSelect"
-					_label="Single Select"
-					_options={[
-						{ label: 'Option A', value: 'A' },
-						{ label: 'Option B', value: 'B' },
-					]}
-				/>
-				<KolCombobox _name="combobox" _label="Combobox" _suggestions={COUNTRY_SUGGESTIONS} />
-				<KolTextarea _name="textarea" _label="Textarea" _rows={5} />
-				<div className="flex flex-wrap gap-4">
-					<KolButton _label="Submit" _type="submit" _variant="primary" />
-					<KolButton _label="Reset" _type="reset" />
-				</div>
+				<form className="grid gap-4" method="get" noValidate>
+					<KolInputCheckbox _name="checkbox" _label="Checkbox" />
+					<KolInputColor _name="color" _label="Color" />
+					<KolInputDate _name="date" _label="Date" />
+					<KolInputEmail _name="email" _label="Email" />
+					<KolInputFile _name="file" _label="File" />
+					<KolInputFile _name="file" _label="Files (multiple)" _multiple />
+					<KolInputNumber _name="number" _label="Number" />
+					<KolInputPassword _name="password" _label="Password" />
+					<KolInputRadio
+						_name="radio"
+						_label="Radio"
+						_options={[
+							{ label: 'Option A', value: 'A' },
+							{ label: 'Option B', value: 'B' },
+						]}
+					/>
+					<KolInputRange _name="range" _label="Range" />
+					<KolInputText _name="text" _label="Text" />
+					<KolSelect
+						_name="select"
+						_label="Select"
+						_options={[
+							{ label: 'Option A', value: 'A' },
+							{ label: 'Option B', value: 'B' },
+						]}
+					/>
+					<KolSelect
+						_name="select"
+						_label="Select (multiple)"
+						_multiple
+						_options={[
+							{ label: 'Option A', value: 'A' },
+							{ label: 'Option B', value: 'B' },
+						]}
+						_rows={2}
+					/>
+					<KolSingleSelect
+						_name="singleSelect"
+						_label="Single Select"
+						_options={[
+							{ label: 'Option A', value: 'A' },
+							{ label: 'Option B', value: 'B' },
+						]}
+					/>
+					<KolCombobox _name="combobox" _label="Combobox" _suggestions={COUNTRY_SUGGESTIONS} />
+					<KolTextarea _name="textarea" _label="Textarea" _rows={5} />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _label="Submit" _type="submit" _variant="primary" />
+						<KolButton _label="Reset" _type="reset" />
+					</div>
 
-				{/* Add a random string to allow the form to be always submitted. Without it, if theres no change to the data, the form simply won't submit when requested. */}
-				<input type="hidden" value={crypto.randomUUID()} name="random" />
-			</form>
+					{/* Add a random string to allow the form to be always submitted. Without it, if theres no change to the data, the form simply won't submit when requested. */}
+					<input type="hidden" value={crypto.randomUUID()} name="random" />
+				</form>
+			</section>
 		</>
 	);
 };

package/src/style.scss

@@ -1,6 +1,15 @@
+@import './@shared/mixins';
+
+:root {
+	--kolibri-root-font-size: 100;
+	font-size: 625%;
+}
+
 body {
 	margin: 0;
 	font-family: Verdana;
+	font-size: rem(16);
+	line-height: normal;
 }
 
 dl,
@@ -8,18 +17,6 @@ hr {
 	margin: 0;
 }
 
-.w-4rem {
-	width: 4rem;
-}
-
-.w-8rem {
-	width: 8rem;
-}
-
-.w-12rem {
-	width: 12rem;
-}
-
 .grid-cols-2 {
 	grid-template-columns: auto auto;
 }
@@ -42,7 +39,7 @@ hr {
 			bottom: 0;
 			left: 0;
 			width: 330px;
-			margin: 1rem;
+			margin: rem(16);
 			flex-direction: column;
 			display: flex;
 

package/tsconfig.json

@@ -9,8 +9,7 @@
 		"preserveSymlinks": true,
 		"moduleResolution": "node",
 		"lib": ["es2017", "dom"],
-		"types": ["node", "react", "react-dom"],
-		"typeRoots": ["node_modules/@types", "src/types"],
+		"typeRoots": ["node_modules/@types"],
 		"noUnusedLocals": true,
 		"resolveJsonModule": true,
 		"noEmit": true,