Skip to content

Commit 6e66f8c

Browse files
veejveej
committed
fixes build
1 parent fe64d91 commit 6e66f8c

File tree

8 files changed

+47
-32
lines changed

8 files changed

+47
-32
lines changed

‎packages/bento-design-system/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@
127127
"react-select": "5.7.4",
128128
"react-table": "7.8.0",
129129
"recharts": "2.8.0",
130-
"ts-pattern": "3.3.5"
130+
"ts-pattern": "5.7.0"
131131
},
132132
"devDependencies": {
133133
"@babel/core": "7.22.20",

‎packages/bento-design-system/src/DateField/DateInput.tsx

+14-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { useDatePicker, useDateRangePicker } from "@react-aria/datepicker";
22
import { useDatePickerState, useDateRangePickerState } from "@react-stately/datepicker";
3-
import { useRef } from "react";
3+
import { HTMLAttributes, useRef } from "react";
44
import { match } from "ts-pattern";
55
import { FieldProps } from "../Field/FieldProps";
66
import { CalendarDate, DateValue, getLocalTimeZone } from "@internationalized/date";
77
import { BaseDateInput } from "./BaseDateInput";
88
import { RangeValue } from "@react-types/shared";
99
import { DateProps, SingleDateProps, RangeDateProps } from "./types";
1010
import { dateToCalendarDate } from "./utils";
11+
import { AtLeast } from "src/util/AtLeast";
1112

1213
type StandaloneProps<T> = Pick<
1314
FieldProps<T>,
@@ -16,11 +17,15 @@ type StandaloneProps<T> = Pick<
1617

1718
type SingleDateInputProps = SingleDateProps &
1819
StandaloneProps<Date | null> &
19-
DateProps & { validationState: "valid" | "invalid" };
20+
DateProps & { validationState?: "valid" | "invalid" } & AtLeast<
21+
Pick<HTMLAttributes<HTMLInputElement>, "aria-label" | "aria-labelledby">
22+
>;
2023

2124
type RangeDateInputProps = RangeDateProps &
2225
StandaloneProps<[Date, Date] | null> &
23-
DateProps & { validationState: "valid" | "invalid" };
26+
DateProps & { validationState?: "valid" | "invalid" } & AtLeast<
27+
Pick<HTMLAttributes<HTMLInputElement>, "aria-label" | "aria-labelledby">
28+
>;
2429

2530
function SingleDateInput(props: SingleDateInputProps) {
2631
const localTimeZone = getLocalTimeZone();
@@ -34,7 +39,7 @@ function SingleDateInput(props: SingleDateInputProps) {
3439
},
3540
isDisabled: props.disabled,
3641
isReadOnly: props.isReadOnly ?? props.readOnly,
37-
validationState: props.validationState,
42+
validationState: props.validationState ?? "valid",
3843
minValue: props.minDate ? dateToCalendarDate(props.minDate) : undefined,
3944
maxValue: props.maxDate ? dateToCalendarDate(props.maxDate) : undefined,
4045
isDateUnavailable: props.shouldDisableDate
@@ -82,7 +87,7 @@ function RangeDateInput(props: RangeDateInputProps) {
8287
},
8388
isDisabled: props.disabled,
8489
isReadOnly: props.isReadOnly ?? props.readOnly,
85-
validationState: props.validationState,
90+
validationState: props.validationState ?? "valid",
8691
minValue: props.minDate ? dateToCalendarDate(props.minDate) : undefined,
8792
maxValue: props.maxDate ? dateToCalendarDate(props.maxDate) : undefined,
8893
isDateUnavailable: props.shouldDisableDate
@@ -112,8 +117,11 @@ function RangeDateInput(props: RangeDateInputProps) {
112117
export type DateInputProps = SingleDateInputProps | RangeDateInputProps;
113118

114119
export function DateInput(props: SingleDateInputProps | RangeDateInputProps) {
120+
if (props.type == undefined) {
121+
return <SingleDateInput {...props} />;
122+
}
115123
return match(props)
116-
.with({ type: "single" }, { type: undefined }, (props) => <SingleDateInput {...props} />)
124+
.with({ type: "single" }, (props) => <SingleDateInput {...props} />)
117125
.with({ type: "range" }, (props) => <RangeDateInput {...props} />)
118126
.exhaustive();
119127
}

‎packages/bento-design-system/src/DateField/Input.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { IconCalendar, IconMinus } from "../Icons";
2323
import { AriaButtonProps } from "@react-types/button";
2424
import { IconButton } from "../IconButton/IconButton";
2525
import { getReadOnlyBackgroundStyle } from "../Field/utils";
26-
import { match, __ } from "ts-pattern";
26+
import { match, P } from "ts-pattern";
2727
import { dateFieldRecipe, dateSegment } from "./DateField.css";
2828
import { ValidationState } from "@react-types/shared";
2929
import { Column, Columns } from "../Layout/Columns";
@@ -106,9 +106,9 @@ export function Input(props: Props) {
106106
props.fieldProps.start.validationState,
107107
props.fieldProps.end.validationState,
108108
] as const)
109-
.with(["invalid", __], [__, "invalid"], () => "invalid" as const)
109+
.with(["invalid", P.any], [P.any, "invalid"], () => "invalid" as const)
110110
.with([undefined, undefined], () => "notSet" as const)
111-
.with([__, "valid"], ["valid", __], () => "valid" as const)
111+
.with([P.any, "valid"], ["valid", P.any], () => "valid" as const)
112112
.exhaustive();
113113

114114
return {

‎packages/bento-design-system/src/FileUploaderField/FileUploaderField.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useField } from "@react-aria/label";
22
import { assignInlineVars } from "@vanilla-extract/dynamic";
33
import { useCallback, useEffect, useState } from "react";
44
import { ErrorCode as DropzoneErrorCode, FileRejection, useDropzone } from "react-dropzone";
5-
import { match, __ } from "ts-pattern";
5+
import { match, P } from "ts-pattern";
66
import {
77
Body,
88
Box,
@@ -202,7 +202,7 @@ export function FileUploaderField<E extends string>({
202202
{ status: "invalid" },
203203
(v) => v.issues.map((issue) => renderIssue(issue, v.file)) as NonEmptyArray<Children>
204204
)
205-
.with({ status: "valid" }, __.nullish, (v) =>
205+
.with({ status: "valid" }, P.nullish, (v) =>
206206
issues
207207
? (issues.map((issue) => renderIssue(issue, v?.file)) as NonEmptyArray<Children>)
208208
: undefined
@@ -287,8 +287,8 @@ export function FileUploaderField<E extends string>({
287287
})}
288288
style={assignInlineVars({
289289
[fieldHeight]: match(height)
290-
.with(__.number, (v) => `${v}px`)
291-
.with(__.string, (v) => v)
290+
.with(P.number, (v) => `${v}px`)
291+
.with(P.string, (v) => v)
292292
.exhaustive(),
293293
})}
294294
{...rootProps}

‎packages/bento-design-system/src/NumberField/BaseNumberInput.tsx

+9-6
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { inputContainerRecipe, input } from "../Field/Field.css";
55
import { bodyRecipe } from "../Typography/Body/Body.css";
66
import { BaseNumberProps, FormatProps } from "./types";
77
import { useBentoConfig } from "../BentoConfigContext";
8-
import { match, not, __ } from "ts-pattern";
8+
import { match } from "ts-pattern";
99
import { getReadOnlyBackgroundStyle } from "../Field/utils";
1010
import { getRadiusPropsFromConfig } from "../util/BorderRadiusConfig";
1111

@@ -62,11 +62,14 @@ export function BaseNumberInput(props: Props) {
6262
}
6363
})();
6464

65-
const rightAccessory = match([props.rightAccessory, rightAccessoryContent] as const)
66-
.with([__.nullish, __.nullish], () => undefined)
67-
.with([__.nullish, not(__.nullish)], () => rightAccessoryContent)
68-
.with([not(__.nullish), __.nullish], () => props.rightAccessory)
69-
.with([not(__.nullish), not(__.nullish)], () => (
65+
const hasRightAccessory = props.rightAccessory != null;
66+
const hasRightAccessoryContent = rightAccessoryContent != null;
67+
68+
const rightAccessory = match([hasRightAccessory, hasRightAccessoryContent] as const)
69+
.with([false, false], () => undefined)
70+
.with([false, true], () => rightAccessoryContent)
71+
.with([true, false], () => props.rightAccessory)
72+
.with([true, true], () => (
7073
<Columns space={config.internalSpacing} alignY="center">
7174
{props.rightAccessory}
7275
{rightAccessoryContent}

‎packages/bento-design-system/src/ReadOnlyField/ReadOnlyField.tsx

+9-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { match, __, not } from "ts-pattern";
1+
import { match } from "ts-pattern";
22
import { useBentoConfig } from "../BentoConfigContext";
33
import { IconButton } from "../IconButton/IconButton";
44
import { Columns } from "../Layout/Columns";
@@ -64,11 +64,14 @@ export function ReadOnlyField(props: Props) {
6464
/>
6565
) : undefined;
6666

67-
const rightAccessory = match([props.rightAccessory, copyButtonAccessory] as const)
68-
.with([__.nullish, __.nullish], () => undefined)
69-
.with([__.nullish, not(__.nullish)], () => copyButtonAccessory)
70-
.with([not(__.nullish), __.nullish], () => props.rightAccessory)
71-
.with([not(__.nullish), not(__.nullish)], () => (
67+
const hasRightAccessory = props.rightAccessory != null;
68+
const hasCopyButtonAccessory = copyButtonAccessory != null;
69+
70+
const rightAccessory = match([hasRightAccessory, hasCopyButtonAccessory] as const)
71+
.with([false, false], () => undefined)
72+
.with([false, true], () => copyButtonAccessory)
73+
.with([true, false], () => props.rightAccessory)
74+
.with([true, true], () => (
7275
<Columns space={inputConfig.paddingX} alignY="center">
7376
{props.rightAccessory}
7477
{copyButtonAccessory}

‎packages/bento-design-system/src/Table/Table.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ import {
5252
Row as RowType,
5353
} from "./types";
5454
import { useMemo, useState, CSSProperties, useEffect, useRef } from "react";
55-
import { match, __ } from "ts-pattern";
55+
import { match, P } from "ts-pattern";
5656
import { useBentoConfig } from "../BentoConfigContext";
5757
import { assignInlineVars } from "@vanilla-extract/dynamic";
5858
import { useVirtualizer } from "@tanstack/react-virtual";
@@ -349,16 +349,16 @@ export function Table<
349349
return match(gridWidth)
350350
.with("fit-content", () => "max-content")
351351
.with("fill-available", () => "minmax(max-content, auto)")
352-
.with({ custom: __.string }, ({ custom: width }) => width)
353-
.with({ custom: __.number }, ({ custom: width }) => `${width}px`)
352+
.with({ custom: P.string }, ({ custom: width }) => width)
353+
.with({ custom: P.number }, ({ custom: width }) => `${width}px`)
354354
.exhaustive();
355355
}
356356

357357
function tableHeight(height: Props<C>["height"]): string | undefined {
358358
return match(height)
359-
.with({ custom: __.string }, ({ custom: width }) => width)
360-
.with({ custom: __.number }, ({ custom: width }) => `${width}px`)
361-
.with(__.nullish, () => undefined)
359+
.with({ custom: P.string }, ({ custom: width }) => width)
360+
.with({ custom: P.number }, ({ custom: width }) => `${width}px`)
361+
.with(P.nullish, () => undefined)
362362
.exhaustive();
363363
}
364364

‎packages/bento-design-system/stories/Components/Inputs/DateInput.stories.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const meta = {
1919
component: DateInput,
2020
args: {
2121
name: "date",
22+
["aria-label"]: "Birth date",
2223
},
2324
} satisfies Meta<DateInputProps>;
2425

0 commit comments

Comments
 (0)