fixes build

Author: veej

Diff for: packages/bento-design-system/package.json

@@ -127,7 +127,7 @@
     "react-select": "5.7.4",
     "react-table": "7.8.0",
     "recharts": "2.8.0",
-    "ts-pattern": "3.3.5"
+    "ts-pattern": "5.7.0"
   },
   "devDependencies": {
     "@babel/core": "7.22.20",

Diff for: packages/bento-design-system/src/DateField/DateInput.tsx

@@ -1,13 +1,14 @@
 import { useDatePicker, useDateRangePicker } from "@react-aria/datepicker";
 import { useDatePickerState, useDateRangePickerState } from "@react-stately/datepicker";
-import { useRef } from "react";
+import { HTMLAttributes, useRef } from "react";
 import { match } from "ts-pattern";
 import { FieldProps } from "../Field/FieldProps";
 import { CalendarDate, DateValue, getLocalTimeZone } from "@internationalized/date";
 import { BaseDateInput } from "./BaseDateInput";
 import { RangeValue } from "@react-types/shared";
 import { DateProps, SingleDateProps, RangeDateProps } from "./types";
 import { dateToCalendarDate } from "./utils";
+import { AtLeast } from "src/util/AtLeast";
 
 type StandaloneProps<T> = Pick<
   FieldProps<T>,
@@ -16,11 +17,15 @@ type StandaloneProps<T> = Pick<
 
 type SingleDateInputProps = SingleDateProps &
   StandaloneProps<Date | null> &
-  DateProps & { validationState: "valid" | "invalid" };
+  DateProps & { validationState?: "valid" | "invalid" } & AtLeast<
+    Pick<HTMLAttributes<HTMLInputElement>, "aria-label" | "aria-labelledby">
+  >;
 
 type RangeDateInputProps = RangeDateProps &
   StandaloneProps<[Date, Date] | null> &
-  DateProps & { validationState: "valid" | "invalid" };
+  DateProps & { validationState?: "valid" | "invalid" } & AtLeast<
+    Pick<HTMLAttributes<HTMLInputElement>, "aria-label" | "aria-labelledby">
+  >;
 
 function SingleDateInput(props: SingleDateInputProps) {
   const localTimeZone = getLocalTimeZone();
@@ -34,7 +39,7 @@ function SingleDateInput(props: SingleDateInputProps) {
     },
     isDisabled: props.disabled,
     isReadOnly: props.isReadOnly ?? props.readOnly,
-    validationState: props.validationState,
+    validationState: props.validationState ?? "valid",
     minValue: props.minDate ? dateToCalendarDate(props.minDate) : undefined,
     maxValue: props.maxDate ? dateToCalendarDate(props.maxDate) : undefined,
     isDateUnavailable: props.shouldDisableDate
@@ -82,7 +87,7 @@ function RangeDateInput(props: RangeDateInputProps) {
     },
     isDisabled: props.disabled,
     isReadOnly: props.isReadOnly ?? props.readOnly,
-    validationState: props.validationState,
+    validationState: props.validationState ?? "valid",
     minValue: props.minDate ? dateToCalendarDate(props.minDate) : undefined,
     maxValue: props.maxDate ? dateToCalendarDate(props.maxDate) : undefined,
     isDateUnavailable: props.shouldDisableDate
@@ -112,8 +117,11 @@ function RangeDateInput(props: RangeDateInputProps) {
 export type DateInputProps = SingleDateInputProps | RangeDateInputProps;
 
 export function DateInput(props: SingleDateInputProps | RangeDateInputProps) {
+  if (props.type == undefined) {
+    return <SingleDateInput {...props} />;
+  }
   return match(props)
-    .with({ type: "single" }, { type: undefined }, (props) => <SingleDateInput {...props} />)
+    .with({ type: "single" }, (props) => <SingleDateInput {...props} />)
     .with({ type: "range" }, (props) => <RangeDateInput {...props} />)
     .exhaustive();
 }

Diff for: packages/bento-design-system/src/DateField/Input.tsx

@@ -23,7 +23,7 @@ import { IconCalendar, IconMinus } from "../Icons";
 import { AriaButtonProps } from "@react-types/button";
 import { IconButton } from "../IconButton/IconButton";
 import { getReadOnlyBackgroundStyle } from "../Field/utils";
-import { match, __ } from "ts-pattern";
+import { match, P } from "ts-pattern";
 import { dateFieldRecipe, dateSegment } from "./DateField.css";
 import { ValidationState } from "@react-types/shared";
 import { Column, Columns } from "../Layout/Columns";
@@ -106,9 +106,9 @@ export function Input(props: Props) {
             props.fieldProps.start.validationState,
             props.fieldProps.end.validationState,
           ] as const)
-            .with(["invalid", __], [__, "invalid"], () => "invalid" as const)
+            .with(["invalid", P.any], [P.any, "invalid"], () => "invalid" as const)
             .with([undefined, undefined], () => "notSet" as const)
-            .with([__, "valid"], ["valid", __], () => "valid" as const)
+            .with([P.any, "valid"], ["valid", P.any], () => "valid" as const)
             .exhaustive();
 
       return {

Diff for: packages/bento-design-system/src/FileUploaderField/FileUploaderField.tsx

@@ -2,7 +2,7 @@ import { useField } from "@react-aria/label";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useCallback, useEffect, useState } from "react";
 import { ErrorCode as DropzoneErrorCode, FileRejection, useDropzone } from "react-dropzone";
-import { match, __ } from "ts-pattern";
+import { match, P } from "ts-pattern";
 import {
   Body,
   Box,
@@ -202,7 +202,7 @@ export function FileUploaderField<E extends string>({
       { status: "invalid" },
       (v) => v.issues.map((issue) => renderIssue(issue, v.file)) as NonEmptyArray<Children>
     )
-    .with({ status: "valid" }, __.nullish, (v) =>
+    .with({ status: "valid" }, P.nullish, (v) =>
       issues
         ? (issues.map((issue) => renderIssue(issue, v?.file)) as NonEmptyArray<Children>)
         : undefined
@@ -287,8 +287,8 @@ export function FileUploaderField<E extends string>({
         })}
         style={assignInlineVars({
           [fieldHeight]: match(height)
-            .with(__.number, (v) => `${v}px`)
-            .with(__.string, (v) => v)
+            .with(P.number, (v) => `${v}px`)
+            .with(P.string, (v) => v)
             .exhaustive(),
         })}
         {...rootProps}

Diff for: packages/bento-design-system/src/NumberField/BaseNumberInput.tsx

@@ -5,7 +5,7 @@ import { inputContainerRecipe, input } from "../Field/Field.css";
 import { bodyRecipe } from "../Typography/Body/Body.css";
 import { BaseNumberProps, FormatProps } from "./types";
 import { useBentoConfig } from "../BentoConfigContext";
-import { match, not, __ } from "ts-pattern";
+import { match } from "ts-pattern";
 import { getReadOnlyBackgroundStyle } from "../Field/utils";
 import { getRadiusPropsFromConfig } from "../util/BorderRadiusConfig";
 
@@ -62,11 +62,14 @@ export function BaseNumberInput(props: Props) {
     }
   })();
 
-  const rightAccessory = match([props.rightAccessory, rightAccessoryContent] as const)
-    .with([__.nullish, __.nullish], () => undefined)
-    .with([__.nullish, not(__.nullish)], () => rightAccessoryContent)
-    .with([not(__.nullish), __.nullish], () => props.rightAccessory)
-    .with([not(__.nullish), not(__.nullish)], () => (
+  const hasRightAccessory = props.rightAccessory != null;
+  const hasRightAccessoryContent = rightAccessoryContent != null;
+
+  const rightAccessory = match([hasRightAccessory, hasRightAccessoryContent] as const)
+    .with([false, false], () => undefined)
+    .with([false, true], () => rightAccessoryContent)
+    .with([true, false], () => props.rightAccessory)
+    .with([true, true], () => (
       <Columns space={config.internalSpacing} alignY="center">
         {props.rightAccessory}
         {rightAccessoryContent}

Diff for: packages/bento-design-system/src/ReadOnlyField/ReadOnlyField.tsx

@@ -1,4 +1,4 @@
-import { match, __, not } from "ts-pattern";
+import { match } from "ts-pattern";
 import { useBentoConfig } from "../BentoConfigContext";
 import { IconButton } from "../IconButton/IconButton";
 import { Columns } from "../Layout/Columns";
@@ -64,11 +64,14 @@ export function ReadOnlyField(props: Props) {
     />
   ) : undefined;
 
-  const rightAccessory = match([props.rightAccessory, copyButtonAccessory] as const)
-    .with([__.nullish, __.nullish], () => undefined)
-    .with([__.nullish, not(__.nullish)], () => copyButtonAccessory)
-    .with([not(__.nullish), __.nullish], () => props.rightAccessory)
-    .with([not(__.nullish), not(__.nullish)], () => (
+  const hasRightAccessory = props.rightAccessory != null;
+  const hasCopyButtonAccessory = copyButtonAccessory != null;
+
+  const rightAccessory = match([hasRightAccessory, hasCopyButtonAccessory] as const)
+    .with([false, false], () => undefined)
+    .with([false, true], () => copyButtonAccessory)
+    .with([true, false], () => props.rightAccessory)
+    .with([true, true], () => (
       <Columns space={inputConfig.paddingX} alignY="center">
         {props.rightAccessory}
         {copyButtonAccessory}

Diff for: packages/bento-design-system/src/Table/Table.tsx

@@ -52,7 +52,7 @@ import {
   Row as RowType,
 } from "./types";
 import { useMemo, useState, CSSProperties, useEffect, useRef } from "react";
-import { match, __ } from "ts-pattern";
+import { match, P } from "ts-pattern";
 import { useBentoConfig } from "../BentoConfigContext";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useVirtualizer } from "@tanstack/react-virtual";
@@ -349,16 +349,16 @@ export function Table<
     return match(gridWidth)
       .with("fit-content", () => "max-content")
       .with("fill-available", () => "minmax(max-content, auto)")
-      .with({ custom: __.string }, ({ custom: width }) => width)
-      .with({ custom: __.number }, ({ custom: width }) => `${width}px`)
+      .with({ custom: P.string }, ({ custom: width }) => width)
+      .with({ custom: P.number }, ({ custom: width }) => `${width}px`)
       .exhaustive();
   }
 
   function tableHeight(height: Props<C>["height"]): string | undefined {
     return match(height)
-      .with({ custom: __.string }, ({ custom: width }) => width)
-      .with({ custom: __.number }, ({ custom: width }) => `${width}px`)
-      .with(__.nullish, () => undefined)
+      .with({ custom: P.string }, ({ custom: width }) => width)
+      .with({ custom: P.number }, ({ custom: width }) => `${width}px`)
+      .with(P.nullish, () => undefined)
       .exhaustive();
   }
 

Diff for: packages/bento-design-system/stories/Components/Inputs/DateInput.stories.tsx

@@ -19,6 +19,7 @@ const meta = {
   component: DateInput,
   args: {
     name: "date",
+    ["aria-label"]: "Birth date",
   },
 } satisfies Meta<DateInputProps>;