@public-ui/sample-react 4.0.0-alpha.3 → 4.0.0-alpha.5

package/src/components/tabs/align.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
 import React from 'react';
 
+import type { AlignPropType } from '@public-ui/components';
 import { KolHeading, KolTabs } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
-import type { AlignPropType } from '@public-ui/components';
 
 const tabs = [
 	{

package/src/components/tabs/create-button.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import type { FC } from 'react';
 import { KolTabs } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useState } from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const CreateButton: FC = () => {

package/src/components/tabs/routes.ts

@@ -1,9 +1,9 @@
 import { Routes } from '../../shares/types';
-import { TabsBasic } from './basic';
 import { TabsAlign } from './align';
-import { TabsIconsOnly } from './icons-only';
+import { TabsBasic } from './basic';
 import { TabsBehavior } from './behavior';
 import { CreateButton } from './create-button';
+import { TabsIconsOnly } from './icons-only';
 
 export const TABS_ROUTES: Routes = {
 	tabs: {

package/src/components/textarea/basic.tsx

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

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

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
-import { KolTextarea } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
+import { KolTextarea } from '@public-ui/react-v19';
+import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 

package/src/components/textarea/routes.ts

@@ -1,9 +1,9 @@
 import { Routes } from '../../shares/types';
 import { TextareaAdjustHeight } from './adjust-height';
 import { TextareaBasic } from './basic';
-import { TextareaWithCounter } from './with-counter';
 import { TextareaResize } from './resize';
 import { TextareaRows } from './rows';
+import { TextareaWithCounter } from './with-counter';
 
 export const TEXTAREA_ROUTES: Routes = {
 	textarea: {

package/src/components/toast/basic.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
+import type { AlertTypePropType } from '@public-ui/components';
 import { ToasterService } from '@public-ui/components';
 import { KolButton } from '@public-ui/react-v19';
-import type { AlertTypePropType } from '@public-ui/components';
 
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';

package/src/components/toolbar/basic.tsx

@@ -1,11 +1,13 @@
+import type { ToolbarItemsPropType } from '@public-ui/components';
+import { KolHeading, KolToolbar } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolHeading, KolToolbar } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarBasic: FC = () => {
-	const TOOLBAR_ITEMS = [
+	const TOOLBAR_ITEMS: ToolbarItemsPropType = [
 		{
+			type: 'button',
 			_label: 'Back',
 			_hideLabel: true,
 			_icons: {
@@ -15,6 +17,7 @@ export const ToolbarBasic: FC = () => {
 			},
 		},
 		{
+			type: 'button',
 			_label: 'Next',
 			_hideLabel: true,
 			_icons: {
@@ -24,14 +27,17 @@ export const ToolbarBasic: FC = () => {
 			},
 		},
 		{
+			type: 'link',
 			_href: '#/back-page',
 			_label: 'Simple Link 1',
 		},
 		{
+			type: 'link',
 			_href: '#/back-page',
 			_label: 'Simple Link 3',
 		},
 		{
+			type: 'button',
 			_label: 'Bold',
 		},
 	];

package/src/components/toolbar/disabled.tsx

@@ -1,6 +1,6 @@
+import { KolToolbar } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolToolbar } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarDisabled: FC = () => {
@@ -15,6 +15,7 @@ export const ToolbarDisabled: FC = () => {
 				class="block w-fit"
 				_items={[
 					{
+						type: 'button',
 						_label: 'Back',
 						_disabled: true,
 						_hideLabel: true,
@@ -25,6 +26,7 @@ export const ToolbarDisabled: FC = () => {
 						},
 					},
 					{
+						type: 'button',
 						_label: 'Next',
 						_hideLabel: true,
 						_icons: {
@@ -34,15 +36,18 @@ export const ToolbarDisabled: FC = () => {
 						},
 					},
 					{
+						type: 'link',
 						_href: '#/back-page',
 						_label: 'Simple Link 1',
 					},
 					{
+						type: 'link',
 						_href: '#/back-page',
 						_disabled: true,
 						_label: 'Simple Link 3',
 					},
 					{
+						type: 'button',
 						_label: 'Bold',
 					},
 				]}

package/src/components/tree/basic.tsx

@@ -1,9 +1,9 @@
+import { KolButton, KolTree, KolTreeItem } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useContext, useState } from 'react';
-import { KolButton, KolTree, KolTreeItem } from '@public-ui/react-v19';
-import { getRandomEmoji } from '../../shares/randomEmoji';
 import { useParams } from 'react-router';
 import { HideMenusContext } from '../../shares/HideMenusContext';
+import { getRandomEmoji } from '../../shares/randomEmoji';
 import { SampleDescription } from '../SampleDescription';
 
 export const TreeBasic: FC = () => {

package/src/scenarios/appointment-form/AppointmentForm.tsx

@@ -1,5 +1,5 @@
 import { Formik } from 'formik';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import * as Yup from 'yup';
 
 import { KolLink, KolTabs } from '@public-ui/react-v19';
@@ -10,8 +10,8 @@ import { DistrictForm } from './DistrictForm';
 import { PersonalInformationForm } from './PersonalInformationForm';
 import { Summary } from './Summary';
 
-import type { FormikHelpers, FormikProps } from 'formik';
 import type { Iso8601 } from '@public-ui/components';
+import type { FormikHelpers, FormikProps } from 'formik';
 import { SampleDescription } from '../../components/SampleDescription';
 // export interface FormProps {}
 export interface FormValues {

package/src/scenarios/appointment-form/AvailableAppointmentsForm.tsx

@@ -1,13 +1,13 @@
 import { Field, useFormikContext } from 'formik';
-import React, { useEffect, useState, useRef, useCallback } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { KolButton, KolForm, KolHeading, KolInputDate, KolInputRadio, KolSpin } from '@public-ui/react-v19';
 
 import { fetchAvailableTimes } from './appointmentService';
 
-import type { FormValues } from './AppointmentForm';
-import type { FieldProps, FieldInputProps } from 'formik';
 import type { Option } from '@public-ui/components';
+import type { FieldInputProps, FieldProps } from 'formik';
+import type { FormValues } from './AppointmentForm';
 import { createErrorList, focusErrorList } from './formUtils';
 
 export function AvailableAppointmentsForm() {

package/src/scenarios/appointment-form/DistrictForm.tsx

@@ -1,5 +1,5 @@
 import { Field, useFormikContext } from 'formik';
-import React, { useState, useRef } from 'react';
+import React, { useRef, useState } from 'react';
 
 import { KolButton, KolForm, KolHeading, KolSelect } from '@public-ui/react-v19';
 

package/src/scenarios/appointment-form/PersonalInformationForm.tsx

@@ -1,5 +1,5 @@
 import { Field, useFormikContext } from 'formik';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { KolButton, KolForm, KolHeading, KolInputEmail, KolInputText, KolSelect } from '@public-ui/react-v19';
 

package/src/scenarios/button-shortkey-table.tsx

@@ -0,0 +1,127 @@
+import type { KoliBriTableHeaders } from '@public-ui/components';
+import { ToasterService } from '@public-ui/components';
+import { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useRef } from 'react';
+import { SampleDescription } from '../components/SampleDescription';
+import { getRoot } from '../shares/react-roots';
+
+const RowActions: FC<{ label: string }> = ({ label }) => {
+	const toaster = ToasterService.getInstance(document);
+	const editButtonRef = useRef<HTMLKolButtonElement | null>(null);
+	const deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);
+
+	const handleEditClick = () => {
+		toaster.enqueue({
+			label: 'Edit clicked',
+			description: `The button "edit" has been clicked for ${label}`,
+			type: 'info',
+		});
+	};
+
+	const handleDeleteClick = () => {
+		toaster.enqueue({
+			label: 'Delete clicked',
+			description: `The button "delete" has been clicked for ${label}`,
+			type: 'warning',
+		});
+	};
+
+	const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {
+		switch (event.code) {
+			case 'KeyE':
+				void editButtonRef.current?.kolFocus();
+				handleEditClick();
+				return;
+			case 'KeyD':
+				void deleteButtonRef.current?.kolFocus();
+				handleDeleteClick();
+				return;
+		}
+	};
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
+			style={{
+				display: 'flex',
+				gap: 'calc(10rem / var(--kolibri-root-font-size, 16))',
+			}}
+			onKeyUp={handleKeyUp}
+		>
+			<KolButton ref={editButtonRef} _label={'Edit'} _shortKey={'e'} _on={{ onClick: handleEditClick }} />
+			<KolButton ref={deleteButtonRef} _label={'Delete'} _shortKey={'d'} _variant={'danger'} _on={{ onClick: handleDeleteClick }} />
+		</div>
+	);
+};
+
+export const ButtonShortkeyTable: FC = () => {
+	type Data = {
+		label: string;
+	};
+	const DATA: Data[] = [
+		{
+			label: 'Row 1',
+		},
+		{
+			label: 'Row 2',
+		},
+		{
+			label: 'Row 3',
+		},
+		{
+			label: 'Row 4',
+		},
+	];
+
+	const HEADERS: KoliBriTableHeaders = {
+		horizontal: [
+			[
+				{
+					label: 'Label',
+					key: 'label',
+					textAlign: 'left',
+				},
+				{
+					label: 'Actions',
+					key: 'actions',
+					textAlign: 'left',
+
+					render: (el, cell) => {
+						getRoot(createReactRenderElement(el)).render(<RowActions label={(cell.data as Data).label} />);
+					},
+				},
+			],
+		],
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This scenario demonstrates an interactive table where each row contains buttons with shortcut keys. The shortcut keys provide visual keyboard
+					indicators and are also functionally implemented.
+				</p>
+				<p>
+					<strong>How to use:</strong> Move focus within one of the &quot;Actions&quot; cells and press &quot;e&quot; to edit or &quot;d&quot; to delete the
+					corresponding row.
+				</p>
+			</SampleDescription>
+
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Interactive Table with Button Shortkeys" />
+					<KolTableStateful
+						_label={`Interactive table with shortkey buttons in each row`}
+						_data={DATA}
+						_headers={HEADERS}
+						_minWidth="400px"
+						_pagination={{
+							_page: 1,
+						}}
+					/>
+				</section>
+			</div>
+		</>
+	);
+};

package/src/scenarios/change-tabindex.tsx

@@ -1,32 +1,32 @@
 /* eslint-disable jsx-a11y/tabindex-no-positive */
 
-import { SampleDescription } from '../components/SampleDescription';
+import type { Option, StencilUnknown } from '@public-ui/components';
 import {
 	KolButton,
 	KolButtonLink,
 	KolCard,
 	KolCombobox,
 	KolInputCheckbox,
+	KolInputColor,
 	KolInputDate,
 	KolInputEmail,
 	KolInputFile,
-	KolInputColor,
 	KolInputNumber,
 	KolInputPassword,
 	KolInputRadio,
 	KolInputRange,
 	KolInputText,
-	KolLinkButton,
 	KolLink,
+	KolLinkButton,
 	KolSingleSelect,
 	KolSplitButton,
 	KolTextarea,
 } from '@public-ui/react-v19';
-import React from 'react';
 import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
 import { ERROR_MSG, HINT_MSG } from '../shares/constants';
 import { COUNTRY_OPTIONS, COUNTRY_SUGGESTIONS } from '../shares/country';
-import type { Option, StencilUnknown } from '@public-ui/components';
 
 export const ChangeTabindex: FC = () => {
 	return (

package/src/scenarios/custom-tooltip-css-properties.tsx

@@ -0,0 +1,42 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolButton } from '@public-ui/react-v19';
+import { SampleDescription } from '../components/SampleDescription';
+import { useToasterService } from '../hooks/useToasterService';
+
+export const CustomTooltipCssProperties: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample demonstrates how tooltip animation duration and width can be customized via
+					<code>--kolibri-tooltip-animation-duration</code> and <code>--kol-tooltip-width</code>.
+				</p>
+			</SampleDescription>
+
+			<div className="flex justify-center items-center gap-4">
+				<KolButton
+					_label="Custom duration"
+					_hideLabel
+					style={{ '--kolibri-tooltip-animation-duration': '2500ms' }}
+					_icons="codicon codicon-clock"
+					_on={dummyEventHandler}
+				></KolButton>
+				<KolButton
+					_label="Custom width"
+					_hideLabel
+					style={{ '--kol-tooltip-width': '400px' }}
+					_icons="codicon codicon-arrow-both"
+					_on={dummyEventHandler}
+				></KolButton>
+			</div>
+		</>
+	);
+};

package/src/scenarios/date-in-form.tsx

@@ -0,0 +1,24 @@
+import { KolButton, KolForm, KolInputDate } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
+
+export const DateInForm: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolForm with KolInputDate inside to make sure enter on the date icon does not submit the form.</p>
+		</SampleDescription>
+
+		<KolForm
+			_on={{
+				onSubmit: () => {
+					console.error('submitted');
+					alert('submitted');
+				},
+			}}
+		>
+			<KolInputDate _label="date" _name="datum" />
+			<KolButton _label="Submit" _type="submit" />
+		</KolForm>
+	</>
+);

package/src/scenarios/focus-elements.tsx

@@ -1,3 +1,4 @@
+import type { FocusableElement } from '@public-ui/components';
 import {
 	KolAccordion,
 	KolAlert,
@@ -23,11 +24,9 @@ import {
 	KolTextarea,
 } from '@public-ui/react-v19';
 import type { FC, ForwardRefRenderFunction } from 'react';
-import { useMemo } from 'react';
-import React, { forwardRef, useLayoutEffect, useRef } from 'react';
+import React, { forwardRef, useLayoutEffect, useMemo, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { SampleDescription } from '../components/SampleDescription';
-import type { FocusableElement } from '@public-ui/components';
 
 const getFocusElements = () => {
 	const focusElements = new Map<string, ForwardRefRenderFunction<any, any>>();

package/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { KolTableStateful, KolTabs, KolNav } from '@public-ui/react-v19';
 import type { KoliBriTableHeaders, TabButtonProps } from '@public-ui/components';
+import { KolNav, KolTableStateful, KolTabs } from '@public-ui/react-v19';
+import * as React from 'react';
 import { SampleDescription } from '../../components/SampleDescription';
 import { LINKS } from '../../components/nav/links';
 import DATA from './databasedata.json';

package/src/scenarios/input-group-with-error.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import type { FC } from 'react';
+import type { SelectOption } from '@public-ui/components';
 import { KolAlert, KolInputCheckbox, KolInputText, KolSelect } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
 import { SampleDescription } from '../components/SampleDescription';
-import type { SelectOption } from '@public-ui/components';
 
 export const InputGroupWithError: FC = () => {
 	const phoneError = true;

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

@@ -5,6 +5,7 @@ import {
 	KolButton,
 	KolButtonLink,
 	KolCard,
+	KolCombobox,
 	KolInputCheckbox,
 	KolInputColor,
 	KolInputDate,
@@ -17,15 +18,14 @@ import {
 	KolInputText,
 	KolSelect,
 	KolSingleSelect,
-	KolCombobox,
 	KolTextarea,
 } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../components/SampleDescription';
 import { COUNTRY_SUGGESTIONS } from '../shares/country';
 
-import type { HTMLStencilElement } from '@stencil/core/internal';
 import type { W3CInputValue } from '@public-ui/components';
+import type { HTMLStencilElement } from '@stencil/core/internal';
 
 const EventTargetContext = createContext<EventTarget | undefined>(undefined);
 const EventLoggerActiveContext = createContext<boolean>(false);