Adding basic TourComponent with wrappers --stable

library/src/components/Banner.tsx

@@ -17,7 +17,7 @@ type BannerProps = {
 }
 
 const announcementStyles = "bg-neutral-full text-text-inverse"
-const warningStyles = "bg-warning-bold text-text"
+const warningStyles = "bg-warning-bold text-text-inverse"
 const errorStyles = "bg-danger-bold text-text-inverse"
 const successStyles = "bg-success-bold text-text-inverse"
 const informationStyles = "bg-information-bold text-text-inverse"

library/src/components/Blanket.tsx

@@ -1,11 +1,11 @@
-import React from "react"
 import ReactDOM from "react-dom"
 import type { ComponentPropsWithoutRef } from "react"
 import { twMerge } from "tailwind-merge"
 import { getPortal } from "../utils"
 
 type BlanketProps = ComponentPropsWithoutRef<"div"> & {
 	usePortal?: boolean
+	portalContainer?: HTMLElement | null
 }
 
 export function Blanket({
@@ -14,6 +14,7 @@ export function Blanket({
 	"aria-label": ariaLabel,
 	role,
 	usePortal = true,
+	portalContainer = getPortal("uikts-blanket"),
 	...props
 }: BlanketProps) {
 	const ele = (
@@ -38,8 +39,8 @@ export function Blanket({
 			</div>
 		</div>
 	)
-	if (!usePortal) {
+	if (!usePortal || portalContainer === null) {
 		return ele
 	}
-	return ReactDOM.createPortal(ele, getPortal("uikts-blanket"))
+	return ReactDOM.createPortal(ele, portalContainer)
 }

library/src/components/EventList.tsx

@@ -3,21 +3,21 @@ import type { Dayjs } from "dayjs"
 import { twMerge } from "tailwind-merge"
 import type { TimeType } from "../utils"
 
-export interface EventObject {
+export interface EventListObject {
 	key: string
 	title?: string
 	subtitle?: string
 	startDate: Dayjs | undefined
 	endDate: Dayjs | undefined
 }
 
-interface EventWrapper<T extends EventObject> {
+interface EventWrapper<T extends EventListObject> {
 	booking: T
 	renderStartDate: Dayjs
 	renderEndDate: Dayjs
 }
 
-export interface EventListProps<T extends EventObject> {
+export interface EventListProps<T extends EventListObject> {
 	items: T[]
 	minStartTime: Dayjs
 	maxEndTime: Dayjs
@@ -33,7 +33,7 @@ export interface EventListProps<T extends EventObject> {
 	style?: React.CSSProperties
 }
 
-function useOrderByDateBookings<T extends EventObject>(
+function useOrderByDateBookings<T extends EventListObject>(
 	items: T[],
 	_minStartTime: Dayjs,
 	maxEndTime: Dayjs,
@@ -122,7 +122,7 @@ const dateFormat = Intl.DateTimeFormat(undefined, {
 	year: "numeric",
 })
 
-function defaultRenderEvent<T extends EventObject>(
+function defaultRenderEvent<T extends EventListObject>(
 	booking: T,
 	startDate: Dayjs | undefined,
 	endDate: Dayjs | undefined,
@@ -149,7 +149,7 @@ function defaultRenderEvent<T extends EventObject>(
 	)
 }
 
-export function EventList<T extends EventObject>({
+export function EventList<T extends EventListObject>({
 	items,
 	renderEvent = defaultRenderEvent,
 	renderTimeHeader,

library/src/components/form/elements/CheckboxFormField.tsx

@@ -4,7 +4,8 @@ import type { FormField } from "../DynamicForm"
 import { Label } from "../../inputs"
 import { Checkbox } from "../../Checkbox"
 
-export interface CheckboxFormField<T extends FieldValues> extends FormField<T> {
+export interface CheckboxFormFieldProps<T extends FieldValues>
+	extends FormField<T> {
 	onChange?: (value: string) => void
 }
 
@@ -15,7 +16,7 @@ export function CheckboxFormField<T extends FieldValues>({
 	required,
 	description,
 	title,
-}: CheckboxFormField<T>) {
+}: CheckboxFormFieldProps<T>) {
 	const fieldValue = formProps.watch(name)
 	const onChangeCB = useRef(onChange)
 	if (onChangeCB.current !== onChange) {

library/src/components/form/elements/InputFormField.tsx

@@ -3,7 +3,8 @@ import type { FieldValues } from "react-hook-form"
 import type { FormField } from "../DynamicForm"
 import { Input, Label } from "../../inputs"
 
-export interface InputFormField<T extends FieldValues> extends FormField<T> {
+export interface InputFormFieldProps<T extends FieldValues>
+	extends FormField<T> {
 	onChange?: (value: string) => void
 	placeholder?: string
 }
@@ -16,7 +17,7 @@ export function InputFormField<T extends FieldValues>({
 	description,
 	title,
 	placeholder,
-}: InputFormField<T>) {
+}: InputFormFieldProps<T>) {
 	const fieldValue = formProps.watch(name)
 	const onChangeCB = useRef(onChange)
 	if (onChangeCB.current !== onChange) {

library/src/components/form/elements/SelectMultiFormField.tsx

@@ -3,7 +3,7 @@ import type { FieldValues } from "react-hook-form"
 import type { FormField } from "../DynamicForm"
 import { Label, Select } from "../../inputs"
 
-export interface SelectMultiFormField<
+export interface SelectMultiFormFieldProps<
 	T extends FieldValues,
 	A extends string | number,
 > extends FormField<T> {
@@ -24,7 +24,7 @@ export function SelectMultiFormField<
 	title,
 	options,
 	placeholder,
-}: SelectMultiFormField<T, A>) {
+}: SelectMultiFormFieldProps<T, A>) {
 	const fieldValue = formProps.watch(name)
 	const onChangeCB = useRef(onChange)
 	if (onChangeCB.current !== onChange) {

library/src/components/form/elements/SelectSingleFormField.tsx

@@ -3,12 +3,12 @@ import type { FieldValues, Path } from "react-hook-form"
 import type { FormField } from "../DynamicForm"
 import { Label, Select } from "../../inputs"
 
-export interface SelectSingleFormField<
+export interface SelectSingleFormFieldProps<
 	T extends FieldValues,
 	A extends string | number,
 > extends FormField<T> {
 	options: Array<{ label: string; value: A }>
-	onChange?: (value: string) => void
+	onChange?: (value: A) => void
 	placeholder?: string
 }
 
@@ -24,7 +24,7 @@ export function SelectSingleFormField<
 	required,
 	options,
 	placeholder,
-}: SelectSingleFormField<T, A>) {
+}: SelectSingleFormFieldProps<T, A>) {
 	const fieldValue = formProps.watch(name)
 	const onChangeCB = useRef(onChange)
 	if (onChangeCB.current !== onChange) {

library/src/components/form/index.ts

@@ -0,0 +1,50 @@
+import {
+	CheckboxFormField,
+	type CheckboxFormFieldProps as _CheckboxFormFieldProps,
+} from "./elements/CheckboxFormField"
+import {
+	InputFormField,
+	type InputFormFieldProps as _InputFormFieldProps,
+} from "./elements/InputFormField"
+import {
+	SelectMultiFormField,
+	type SelectMultiFormFieldProps as _SelectMultiFormFieldProps,
+} from "./elements/SelectMultiFormField"
+import {
+	SelectSingleFormField,
+	type SelectSingleFormFieldProps as _SelectSingleFormFieldProps,
+} from "./elements/SelectSingleFormField"
+import {
+	DynamicForm as Form,
+	type FormField as _FormField,
+	type FormProps as _FormProps,
+	type DynamicFormProps as _DynamicFormProps,
+} from "./DynamicForm"
+import type { FieldValues } from "react-hook-form"
+
+const DynamicForm = {
+	CheckboxFormField,
+	InputFormField,
+	SelectMultiFormField,
+	SelectSingleFormField,
+	Form,
+}
+export { DynamicForm }
+
+export namespace DynamicFormTypes {
+	export type CheckboxFormFieldProps<T extends FieldValues> =
+		_CheckboxFormFieldProps<T>
+	export type InputFormFieldProps<T extends FieldValues> =
+		_InputFormFieldProps<T>
+	export type SelectMultiFormFieldProps<
+		T extends FieldValues,
+		A extends string | number,
+	> = _SelectMultiFormFieldProps<T, A>
+	export type SelectSingleFormFieldProps<
+		T extends FieldValues,
+		A extends string | number,
+	> = _SelectSingleFormFieldProps<T, A>
+	export type FormField<T extends FieldValues> = _FormField<T>
+	export type FormProps<T extends FieldValues> = _FormProps<T>
+	export type DynamicFormProps<T extends FieldValues> = _DynamicFormProps<T>
+}

library/src/components/index.ts

@@ -34,3 +34,6 @@ export * from "./Breadcrumbs"
 export * from "./SectionMessage"
 export * from "./codeblock"
 export * from "./dnd"
+export * from "./tour"
+export * from "./form"
+export * from "./EventList"

library/src/components/inputs/Select.tsx

@@ -347,7 +347,6 @@ const SelectInner = <ValueType, IsMulti extends boolean = boolean>({
 		invalid,
 	)
 
-
 	// get the browsers locale
 	const locale = navigator.language
 
@@ -373,6 +372,7 @@ const SelectInner = <ValueType, IsMulti extends boolean = boolean>({
 				return (
 					<div
 						{..._props.innerProps}
+						// biome-ignore lint/a11y/useSemanticElements: <explanation>
 						role="button"
 						className={_props.getClassNames(
 							"clearIndicator",
@@ -421,6 +421,7 @@ const SelectInner = <ValueType, IsMulti extends boolean = boolean>({
 				}`
 				return (
 					<div
+						// biome-ignore lint/a11y/useSemanticElements: <explanation>
 						role="button"
 						{..._props.innerProps}
 						title={title}
@@ -480,8 +481,10 @@ const SelectInner = <ValueType, IsMulti extends boolean = boolean>({
 						_props.selectProps.menuIsOpen ? "close" : "open"
 					} the menu`
 				return (
+					// biome-ignore lint/a11y/useFocusableInteractive: <explanation>
 					<div
 						{..._props.innerProps}
+						// biome-ignore lint/a11y/useSemanticElements: <explanation>
 						role="button"
 						data-action="open_select"
 						//aria-disabled={_props.isDisabled}