Skip to content

Commit 1fde581

Browse files
marcus-wishesmarcus-wishes
authored
Merge pull request #53 from linked-planet/feature/guided-tour-component
Adding basic TourComponent with wrappers --stable
2 parents 97f6676 + 537e7b8 commit 1fde581

File tree

17 files changed

+812
-86
lines changed

17 files changed

+812
-86
lines changed

‎library/src/components/Banner.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ type BannerProps = {
1717
}
1818

1919
const announcementStyles = "bg-neutral-full text-text-inverse"
20-
const warningStyles = "bg-warning-bold text-text"
20+
const warningStyles = "bg-warning-bold text-text-inverse"
2121
const errorStyles = "bg-danger-bold text-text-inverse"
2222
const successStyles = "bg-success-bold text-text-inverse"
2323
const informationStyles = "bg-information-bold text-text-inverse"

‎library/src/components/Blanket.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React from "react"
21
import ReactDOM from "react-dom"
32
import type { ComponentPropsWithoutRef } from "react"
43
import { twMerge } from "tailwind-merge"
54
import { getPortal } from "../utils"
65

76
type BlanketProps = ComponentPropsWithoutRef<"div"> & {
87
usePortal?: boolean
8+
portalContainer?: HTMLElement | null
99
}
1010

1111
export function Blanket({
@@ -14,6 +14,7 @@ export function Blanket({
1414
"aria-label": ariaLabel,
1515
role,
1616
usePortal = true,
17+
portalContainer = getPortal("uikts-blanket"),
1718
...props
1819
}: BlanketProps) {
1920
const ele = (
@@ -38,8 +39,8 @@ export function Blanket({
3839
</div>
3940
</div>
4041
)
41-
if (!usePortal) {
42+
if (!usePortal || portalContainer === null) {
4243
return ele
4344
}
44-
return ReactDOM.createPortal(ele, getPortal("uikts-blanket"))
45+
return ReactDOM.createPortal(ele, portalContainer)
4546
}

‎library/src/components/EventList.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,21 @@ import type { Dayjs } from "dayjs"
33
import { twMerge } from "tailwind-merge"
44
import type { TimeType } from "../utils"
55

6-
export interface EventObject {
6+
export interface EventListObject {
77
key: string
88
title?: string
99
subtitle?: string
1010
startDate: Dayjs | undefined
1111
endDate: Dayjs | undefined
1212
}
1313

14-
interface EventWrapper<T extends EventObject> {
14+
interface EventWrapper<T extends EventListObject> {
1515
booking: T
1616
renderStartDate: Dayjs
1717
renderEndDate: Dayjs
1818
}
1919

20-
export interface EventListProps<T extends EventObject> {
20+
export interface EventListProps<T extends EventListObject> {
2121
items: T[]
2222
minStartTime: Dayjs
2323
maxEndTime: Dayjs
@@ -33,7 +33,7 @@ export interface EventListProps<T extends EventObject> {
3333
style?: React.CSSProperties
3434
}
3535

36-
function useOrderByDateBookings<T extends EventObject>(
36+
function useOrderByDateBookings<T extends EventListObject>(
3737
items: T[],
3838
_minStartTime: Dayjs,
3939
maxEndTime: Dayjs,
@@ -122,7 +122,7 @@ const dateFormat = Intl.DateTimeFormat(undefined, {
122122
year: "numeric",
123123
})
124124

125-
function defaultRenderEvent<T extends EventObject>(
125+
function defaultRenderEvent<T extends EventListObject>(
126126
booking: T,
127127
startDate: Dayjs | undefined,
128128
endDate: Dayjs | undefined,
@@ -149,7 +149,7 @@ function defaultRenderEvent<T extends EventObject>(
149149
)
150150
}
151151

152-
export function EventList<T extends EventObject>({
152+
export function EventList<T extends EventListObject>({
153153
items,
154154
renderEvent = defaultRenderEvent,
155155
renderTimeHeader,

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import type { FormField } from "../DynamicForm"
44
import { Label } from "../../inputs"
55
import { Checkbox } from "../../Checkbox"
66

7-
export interface CheckboxFormField<T extends FieldValues> extends FormField<T> {
7+
export interface CheckboxFormFieldProps<T extends FieldValues>
8+
extends FormField<T> {
89
onChange?: (value: string) => void
910
}
1011

@@ -15,7 +16,7 @@ export function CheckboxFormField<T extends FieldValues>({
1516
required,
1617
description,
1718
title,
18-
}: CheckboxFormField<T>) {
19+
}: CheckboxFormFieldProps<T>) {
1920
const fieldValue = formProps.watch(name)
2021
const onChangeCB = useRef(onChange)
2122
if (onChangeCB.current !== onChange) {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import type { FieldValues } from "react-hook-form"
33
import type { FormField } from "../DynamicForm"
44
import { Input, Label } from "../../inputs"
55

6-
export interface InputFormField<T extends FieldValues> extends FormField<T> {
6+
export interface InputFormFieldProps<T extends FieldValues>
7+
extends FormField<T> {
78
onChange?: (value: string) => void
89
placeholder?: string
910
}
@@ -16,7 +17,7 @@ export function InputFormField<T extends FieldValues>({
1617
description,
1718
title,
1819
placeholder,
19-
}: InputFormField<T>) {
20+
}: InputFormFieldProps<T>) {
2021
const fieldValue = formProps.watch(name)
2122
const onChangeCB = useRef(onChange)
2223
if (onChangeCB.current !== onChange) {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { FieldValues } from "react-hook-form"
33
import type { FormField } from "../DynamicForm"
44
import { Label, Select } from "../../inputs"
55

6-
export interface SelectMultiFormField<
6+
export interface SelectMultiFormFieldProps<
77
T extends FieldValues,
88
A extends string | number,
99
> extends FormField<T> {
@@ -24,7 +24,7 @@ export function SelectMultiFormField<
2424
title,
2525
options,
2626
placeholder,
27-
}: SelectMultiFormField<T, A>) {
27+
}: SelectMultiFormFieldProps<T, A>) {
2828
const fieldValue = formProps.watch(name)
2929
const onChangeCB = useRef(onChange)
3030
if (onChangeCB.current !== onChange) {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import type { FieldValues, Path } from "react-hook-form"
33
import type { FormField } from "../DynamicForm"
44
import { Label, Select } from "../../inputs"
55

6-
export interface SelectSingleFormField<
6+
export interface SelectSingleFormFieldProps<
77
T extends FieldValues,
88
A extends string | number,
99
> extends FormField<T> {
1010
options: Array<{ label: string; value: A }>
11-
onChange?: (value: string) => void
11+
onChange?: (value: A) => void
1212
placeholder?: string
1313
}
1414

@@ -24,7 +24,7 @@ export function SelectSingleFormField<
2424
required,
2525
options,
2626
placeholder,
27-
}: SelectSingleFormField<T, A>) {
27+
}: SelectSingleFormFieldProps<T, A>) {
2828
const fieldValue = formProps.watch(name)
2929
const onChangeCB = useRef(onChange)
3030
if (onChangeCB.current !== onChange) {

‎library/src/components/form/index.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import {
2+
CheckboxFormField,
3+
type CheckboxFormFieldProps as _CheckboxFormFieldProps,
4+
} from "./elements/CheckboxFormField"
5+
import {
6+
InputFormField,
7+
type InputFormFieldProps as _InputFormFieldProps,
8+
} from "./elements/InputFormField"
9+
import {
10+
SelectMultiFormField,
11+
type SelectMultiFormFieldProps as _SelectMultiFormFieldProps,
12+
} from "./elements/SelectMultiFormField"
13+
import {
14+
SelectSingleFormField,
15+
type SelectSingleFormFieldProps as _SelectSingleFormFieldProps,
16+
} from "./elements/SelectSingleFormField"
17+
import {
18+
DynamicForm as Form,
19+
type FormField as _FormField,
20+
type FormProps as _FormProps,
21+
type DynamicFormProps as _DynamicFormProps,
22+
} from "./DynamicForm"
23+
import type { FieldValues } from "react-hook-form"
24+
25+
const DynamicForm = {
26+
CheckboxFormField,
27+
InputFormField,
28+
SelectMultiFormField,
29+
SelectSingleFormField,
30+
Form,
31+
}
32+
export { DynamicForm }
33+
34+
export namespace DynamicFormTypes {
35+
export type CheckboxFormFieldProps<T extends FieldValues> =
36+
_CheckboxFormFieldProps<T>
37+
export type InputFormFieldProps<T extends FieldValues> =
38+
_InputFormFieldProps<T>
39+
export type SelectMultiFormFieldProps<
40+
T extends FieldValues,
41+
A extends string | number,
42+
> = _SelectMultiFormFieldProps<T, A>
43+
export type SelectSingleFormFieldProps<
44+
T extends FieldValues,
45+
A extends string | number,
46+
> = _SelectSingleFormFieldProps<T, A>
47+
export type FormField<T extends FieldValues> = _FormField<T>
48+
export type FormProps<T extends FieldValues> = _FormProps<T>
49+
export type DynamicFormProps<T extends FieldValues> = _DynamicFormProps<T>
50+
}

‎library/src/components/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,6 @@ export * from "./Breadcrumbs"
3434
export * from "./SectionMessage"
3535
export * from "./codeblock"
3636
export * from "./dnd"
37+
export * from "./tour"
38+
export * from "./form"
39+
export * from "./EventList"

‎library/src/components/inputs/Select.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -347,7 +347,6 @@ const SelectInner = <ValueType, IsMulti extends boolean = boolean>({
347347
invalid,
348348
)
349349

350-
351350
// get the browsers locale
352351
const locale = navigator.language
353352

@@ -373,6 +372,7 @@ const SelectInner = <ValueType, IsMulti extends boolean = boolean>({
373372
return (
374373
<div
375374
{..._props.innerProps}
375+
// biome-ignore lint/a11y/useSemanticElements: <explanation>
376376
role="button"
377377
className={_props.getClassNames(
378378
"clearIndicator",
@@ -421,6 +421,7 @@ const SelectInner = <ValueType, IsMulti extends boolean = boolean>({
421421
}`
422422
return (
423423
<div
424+
// biome-ignore lint/a11y/useSemanticElements: <explanation>
424425
role="button"
425426
{..._props.innerProps}
426427
title={title}
@@ -480,8 +481,10 @@ const SelectInner = <ValueType, IsMulti extends boolean = boolean>({
480481
_props.selectProps.menuIsOpen ? "close" : "open"
481482
} the menu`
482483
return (
484+
// biome-ignore lint/a11y/useFocusableInteractive: <explanation>
483485
<div
484486
{..._props.innerProps}
487+
// biome-ignore lint/a11y/useSemanticElements: <explanation>
485488
role="button"
486489
data-action="open_select"
487490
//aria-disabled={_props.isDisabled}

0 commit comments

Comments
 (0)