@colisweb/rescript-toolkit 2.71.0 → 3.0.0

package/src/ui/Toolkit__Ui_Table.res

@@ -27,12 +27,17 @@ module Pagination = {
       <div className="w-20">
         <Toolkit__Ui_Select
           value={table.state.pageSize->Int.toString}
-          onChange={value => table.setPageSize(value)}
-          options={[25, 50, 100]->Array.map(pageSize => (
-            pageSize->Int.toString,
-            pageSize->Int.toString,
-            true,
-          ))}
+          onChange={value => {
+            value
+            ->Int.fromString
+            ->Option.forEach(pageSize => {
+              table.setPageSize(pageSize)
+            })
+          }}
+          options={[25, 50, 100]->Array.map((pageSize): Toolkit__Ui_Select.selectOption => {
+            label: pageSize->Int.toString,
+            value: pageSize->Int.toString,
+          })}
         />
       </div>
     </div>

package/src/ui/Toolkit__Ui_TextInput.res

@@ -22,10 +22,10 @@ let make = React.forwardRef((
   ~isInvalid: option<bool>=?,
   ~className: string="",
   ~style: option<ReactDOM.style>=?,
-  ref_,
+  ref,
 ) =>
   <input
-    ref=?{ref_->Js.Nullable.toOption->Option.map(ReactDOM.Ref.domRef)}
+    ref=?{ref->Js.Nullable.toOption->Option.map(ReactDOM.Ref.domRef)}
     className={cx([
       className,
       "appearance-none outline-none transition duration-150 ease-in-out block w-full bg-white text-gray-800 border rounded py-2 px-4 leading-tight focus:z30 relative disabled:bg-gray-200 disabled:text-gray-700",

package/src/ui/Toolkit__Ui_WeekDateFilter.res

@@ -49,11 +49,11 @@ let make = (~initialStart=?, ~selectedDay=?, ~children: state => React.element)
         UpdateWithSideEffects(
           {
             timeslot: {
-              start: state.timeslot.start->BsDateFns.subDays(timeSlotLength)->BsDateFns.startOfDay,
-              end_: state.timeslot.start->BsDateFns.subDays(1),
+              start: state.timeslot.start->DateFns.subDays(timeSlotLength)->DateFns.startOfDay,
+              end_: state.timeslot.start->DateFns.subDays(1),
             },
             selectedDay: state.selectedDay->Option.map(_ =>
-              state.timeslot.start->BsDateFns.subDays(timeSlotLength)->BsDateFns.startOfDay
+              state.timeslot.start->DateFns.subDays(timeSlotLength)->DateFns.startOfDay
             ),
           },
           ({state}) => {
@@ -65,7 +65,7 @@ let make = (~initialStart=?, ~selectedDay=?, ~children: state => React.element)
                 }->queryParams_encode,
                 {
                   addQueryPrefix: true,
-                  serializeDate: d => d->BsDateFns.formatWithPattern("yyyy-MM-dd"),
+                  serializeDate: d => d->DateFns.formatWithPattern("yyyy-MM-dd"),
                 },
               ),
             )
@@ -76,11 +76,11 @@ let make = (~initialStart=?, ~selectedDay=?, ~children: state => React.element)
         UpdateWithSideEffects(
           {
             timeslot: {
-              start: state.timeslot.end_->BsDateFns.addDays(1),
-              end_: state.timeslot.end_->BsDateFns.addDays(timeSlotLength),
+              start: state.timeslot.end_->DateFns.addDays(1),
+              end_: state.timeslot.end_->DateFns.addDays(timeSlotLength),
             },
             selectedDay: state.selectedDay->Option.map(_ =>
-              state.timeslot.end_->BsDateFns.addDays(1)
+              state.timeslot.end_->DateFns.addDays(1)
             ),
           },
           ({state}) => {
@@ -92,7 +92,7 @@ let make = (~initialStart=?, ~selectedDay=?, ~children: state => React.element)
                 }->queryParams_encode,
                 {
                   addQueryPrefix: true,
-                  serializeDate: d => d->BsDateFns.formatWithPattern("yyyy-MM-dd"),
+                  serializeDate: d => d->DateFns.formatWithPattern("yyyy-MM-dd"),
                 },
               ),
             )
@@ -111,7 +111,7 @@ let make = (~initialStart=?, ~selectedDay=?, ~children: state => React.element)
                 }->queryParams_encode,
                 {
                   addQueryPrefix: true,
-                  serializeDate: d => d->BsDateFns.formatWithPattern("yyyy-MM-dd"),
+                  serializeDate: d => d->DateFns.formatWithPattern("yyyy-MM-dd"),
                 },
               ),
             )
@@ -122,11 +122,11 @@ let make = (~initialStart=?, ~selectedDay=?, ~children: state => React.element)
     () => {
       let defaultTimeslot: Toolkit__Decoders.DatetimeTimeSlot.t = {
         let today = Js.Date.make()
-        let timeSlotStart = isSm ? BsDateFns.startOfWeek(today, {weekStartsOn: 1}) : today
+        let timeSlotStart = isSm ? DateFns.startOfWeek(today, {weekStartsOn: 1}) : today
 
         let timeSlotEnd = isSm
-          ? BsDateFns.endOfWeek(today, {weekStartsOn: 1})
-          : today->BsDateFns.addDays(2)
+          ? DateFns.endOfWeek(today, {weekStartsOn: 1})
+          : today->DateFns.addDays(2)
         {
           start: timeSlotStart,
           end_: timeSlotEnd,
@@ -136,7 +136,7 @@ let make = (~initialStart=?, ~selectedDay=?, ~children: state => React.element)
       {
         timeslot: initialStart->Option.mapWithDefault(defaultTimeslot, start => {
           start,
-          end_: start->BsDateFns.addDays(timeSlotLength - 1),
+          end_: start->DateFns.addDays(timeSlotLength - 1),
         }),
         selectedDay: selectedDay->Option.isSome
           ? selectedDay
@@ -158,15 +158,15 @@ let make = (~initialStart=?, ~selectedDay=?, ~children: state => React.element)
         icon={<ReactIcons.MdKeyboardArrowLeft size=30 />}
       />
       <div className="flex items-center mx-2">
-        {BsDateFns.eachDayOfInterval({
+        {DateFns.eachDayOfInterval({
           start: timeslot.start,
           end_: timeslot.end_,
         })
         ->Array.mapWithIndex((i, day) => {
           let isSelected =
-            selectedDay->Option.mapWithDefault(false, sDay => BsDateFns.isSameDay(sDay, day))
+            selectedDay->Option.mapWithDefault(false, sDay => DateFns.isSameDay(sDay, day))
           <React.Fragment key={`${i->Int.toString}-day`}>
-            {i == 0 || day->BsDateFns.isFirstDayOfMonth
+            {i == 0 || day->DateFns.isFirstDayOfMonth
               ? <p className="text-xs text-neutral-600 uppercase">
                   <FormattedDate value=day month=#short />
                 </p>

package/src/utils/Toolkit__Utils_UnitMeasure.res

@@ -91,15 +91,15 @@ module Time = {
 
     let duration = switch value {
     | #min(v) =>
-      BsDateFns.intervalToDuration(
+      DateFns.intervalToDuration(
         ~interval={
           start: _initialDate,
-          end_: _initialDate->BsDateFns.addMinutes(v),
+          end_: _initialDate->DateFns.addMinutes(v),
         },
       )
     | #h(v) =>
-      BsDateFns.intervalToDuration(
-        ~interval={start: _initialDate, end_: _initialDate->BsDateFns.addHours(v)},
+      DateFns.intervalToDuration(
+        ~interval={start: _initialDate, end_: _initialDate->DateFns.addHours(v)},
       )
     }
 

package/src/vendors/{BsReactDayPicker.res → ReactDayPicker.res}

@@ -71,7 +71,6 @@ module ReactDayPicker = {
       ~months: 'a=?,
       ~showOutsideDays: bool=?,
       ~dayPickerProps: dayPickerProps=?,
-      ~formatDate: Js.Date.t => string=?,
       ~ref: ReactDOM.Ref.t=?,
     ) => React.element = "DayPickerInput"
   }

package/src/vendors/ReactIcons.res

@@ -6028,3 +6028,8 @@ module BsPalette = {
   external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
     "BsPalette"
 }
+module VscFolderLibrary = {
+  @module("react-icons/vsc") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "VscFolderLibrary"
+}

package/src/vendors/{BsReactSelect.res → ReactSelect.res}

@@ -13,18 +13,18 @@ type optionMessageCb = {inputValue: string}
 module ReactSelect = {
   @module("react-select") @react.component
   external make: (
-    ~defaultMenuIsOpen: option<bool>=?,
+    ~defaultMenuIsOpen: bool=?,
     ~name: string,
-    ~autoFocus: option<bool>=?,
-    ~isMulti: option<bool>=?,
-    ~isDisabled: option<bool>=?,
-    ~isLoading: option<bool>=?,
-    ~isSearchable: option<bool>=?,
-    ~placeholder: option<string>=?,
-    ~className: option<string>=?,
-    ~classNamePrefix: option<string>=?,
-    ~value: option<labelOption<'value>>=?,
-    ~defaultValue: option<'value>=?,
+    ~autoFocus: bool=?,
+    ~isMulti: bool=?,
+    ~isDisabled: bool=?,
+    ~isLoading: bool=?,
+    ~isSearchable: bool=?,
+    ~placeholder: string=?,
+    ~className: string=?,
+    ~classNamePrefix: string=?,
+    ~value: labelOption<'value>=?,
+    ~defaultValue: 'value=?,
     ~onChange: labelOption<'value> => unit,
     ~options: array<labelOption<'value>>,
     ~noOptionsMessage: option<optionMessage => Js.Nullable.t<string>>=?,
@@ -36,33 +36,33 @@ module ReactSelectMultiple = {
     @module("react-select") @react.component
     external make: (
       ~name: string,
-      ~defaultMenuIsOpen: option<bool>=?,
-      ~autoFocus: option<bool>=?,
-      ~isMulti: option<bool>=?,
-      ~isDisabled: option<bool>=?,
-      ~isLoading: option<bool>=?,
-      ~isSearchable: option<bool>=?,
-      ~placeholder: option<string>=?,
-      ~className: option<string>=?,
-      ~classNamePrefix: option<string>=?,
+      ~defaultMenuIsOpen: bool=?,
+      ~autoFocus: bool=?,
+      ~isMulti: bool=?,
+      ~isDisabled: bool=?,
+      ~isLoading: bool=?,
+      ~isSearchable: bool=?,
+      ~placeholder: string=?,
+      ~className: string=?,
+      ~classNamePrefix: string=?,
       ~defaultValue: array<labelOption<'value>>=?,
       ~onChange: array<labelOption<'value>> => unit,
       ~options: array<labelOption<'value>>,
-      ~noOptionsMessage: option<optionMessage => Js.Nullable.t<string>>=?,
+      ~noOptionsMessage: optionMessage => Js.Nullable.t<string>=?,
     ) => React.element = "default"
   }
 
   @react.component
   let make = (
     ~name: string,
-    ~autoFocus: option<bool>=?,
-    ~isSearchable: option<bool>=?,
-    ~defaultMenuIsOpen: option<bool>=?,
-    ~isDisabled: option<bool>=?,
-    ~isLoading: option<bool>=?,
-    ~placeholder: option<string>=?,
-    ~className: option<string>=?,
-    ~classNamePrefix: option<string>=?,
+    ~autoFocus: bool=?,
+    ~isSearchable: bool=?,
+    ~defaultMenuIsOpen: bool=?,
+    ~isDisabled: bool=?,
+    ~isLoading: bool=?,
+    ~placeholder: string=?,
+    ~className: string=?,
+    ~classNamePrefix: string=?,
     ~defaultValue: array<labelOption<'value>>,
     ~onChange: array<labelOption<'value>> => unit,
     ~options: array<labelOption<'value>>,
@@ -90,20 +90,20 @@ module ReactAsyncSelect = {
   @module("react-select/async") @react.component
   external make: (
     ~name: string,
-    ~autoFocus: option<bool>=?,
-    ~isMulti: option<bool>=?,
-    ~isDisabled: option<bool>=?,
-    ~isLoading: option<bool>=?,
-    ~isSearchable: option<bool>=?,
-    ~placeholder: option<string>=?,
+    ~autoFocus: bool=?,
+    ~isMulti: bool=?,
+    ~isDisabled: bool=?,
+    ~isLoading: bool=?,
+    ~isSearchable: bool=?,
+    ~placeholder: string=?,
     ~noOptionsMessage: optionMessageCb => string=?,
     ~loadingMessage: optionMessageCb => string=?,
-    ~className: option<string>=?,
-    ~classNamePrefix: option<string>=?,
-    ~value: option<labelOption<'value>>=?,
+    ~className: string=?,
+    ~classNamePrefix: string=?,
+    ~value: labelOption<'value>=?,
     ~defaultValue: option<'value>=?,
     ~onChange: labelOption<'value> => unit,
-    ~cacheOptions: option<bool>=?,
+    ~cacheOptions: bool=?,
     ~defaultOptions: option<array<labelOption<'value>>>=?,
     ~loadOptions: string => Promise.Js.t<array<labelOption<'value>>, string>,
   ) => React.element = "default"
@@ -113,20 +113,20 @@ module ReactAsyncSelectMultiple = {
   @module("react-select/async") @react.component
   external make: (
     ~name: string,
-    ~autoFocus: option<bool>=?,
-    ~isMulti: option<bool>=?,
-    ~isDisabled: option<bool>=?,
-    ~isLoading: option<bool>=?,
-    ~isSearchable: option<bool>=?,
-    ~placeholder: option<string>=?,
+    ~autoFocus: bool=?,
+    ~isMulti: bool=?,
+    ~isDisabled: bool=?,
+    ~isLoading: bool=?,
+    ~isSearchable: bool=?,
+    ~placeholder: string=?,
     ~noOptionsMessage: optionMessageCb => string=?,
     ~loadingMessage: optionMessageCb => string=?,
-    ~className: option<string>=?,
-    ~classNamePrefix: option<string>=?,
+    ~className: string=?,
+    ~classNamePrefix: string=?,
     ~value: option<array<labelOption<'value>>>=?,
     ~defaultValue: option<'value>=?,
     ~onChange: array<labelOption<'value>> => unit,
-    ~cacheOptions: option<bool>=?,
+    ~cacheOptions: bool=?,
     ~defaultOptions: option<array<labelOption<'value>>>=?,
     ~loadOptions: string => Promise.Js.t<array<labelOption<'value>>, string>,
   ) => React.element = "default"
@@ -144,18 +144,18 @@ module ReactSelectMultipleCreateInput = {
     external make: (
       ~components: components,
       ~inputValue: string,
-      ~isClearable: option<bool>=?,
-      ~isMulti: option<bool>=?,
-      ~menuIsOpen: option<bool>=?,
+      ~isClearable: bool=?,
+      ~isMulti: bool=?,
+      ~menuIsOpen: bool=?,
       ~onChange: array<labelOption<'a>> => unit,
       ~onInputChange: string => unit,
       ~onKeyDown: ReactEvent.Keyboard.t => unit,
-      ~placeholder: option<string>=?,
+      ~placeholder: string=?,
       ~value: array<labelOption<'a>>,
-      ~isDisabled: option<bool>=?,
-      ~isLoading: option<bool>=?,
-      ~className: option<string>=?,
-      ~id: option<string>=?,
+      ~isDisabled: bool=?,
+      ~isLoading: bool=?,
+      ~className: string=?,
+      ~id: string=?,
     ) => React.element = "default"
   }
 
@@ -167,8 +167,8 @@ module ReactSelectMultipleCreateInput = {
     ~placeholder="",
     ~isDisabled=false,
     ~isLoading=false,
-    ~className: option<string>=?,
-    ~id: option<string>=?,
+    ~className: string=?,
+    ~id: string=?,
   ) => {
     let (inputValue, onInputChange) = React.useState(() => "")
     let onInputChange = v => onInputChange(_ => v)

package/src/vendors/reach-ui/ReachUi_Accordion.res

@@ -4,24 +4,23 @@ module Accordion = {
   @module("@reach/accordion") @react.component
   external make: (
     ~children: React.element,
-    ~index: option<int>=?,
-    ~defaultIndex: option<int>=?,
-    ~collapsible: option<bool>=?,
-    ~multiple: option<bool>=?,
-    ~readOnly: option<bool>=?,
-    ~onChange: option<int => unit>=?,
-    ~readOnly: option<bool>=?,
+    ~index: int=?,
+    ~defaultIndex: int=?,
+    ~collapsible: bool=?,
+    ~multiple: bool=?,
+    ~readOnly: bool=?,
+    ~onChange: int => unit=?,
   ) => React.element = "Accordion"
 }
 
 module AccordionItem = {
   @module("@reach/accordion") @react.component
-  external make: (~children: React.element, ~_as: option<as_>=?) => React.element = "AccordionItem"
+  external make: (~children: React.element, ~_as: as_=?) => React.element = "AccordionItem"
 }
 
 module AccordionPanel = {
   @module("@reach/accordion") @react.component
-  external make: (~children: React.element, ~_as: option<as_>=?) => React.element = "AccordionPanel"
+  external make: (~children: React.element, ~_as: as_=?) => React.element = "AccordionPanel"
 }
 module AccordionButton = {
   @module("@reach/accordion") @react.component
@@ -36,11 +35,10 @@ module ControlledAccordionMultiple = {
   @module("@reach/accordion") @react.component
   external make: (
     ~children: React.element,
-    ~index: option<array<int>>=?,
-    ~defaultIndex: option<int>=?,
-    ~readOnly: option<bool>=?,
-    ~onChange: option<int => unit>=?,
-    ~readOnly: option<bool>=?,
+    ~index: array<int>=?,
+    ~defaultIndex: int=?,
+    ~readOnly: bool=?,
+    ~onChange: int => unit=?,
   ) => React.element = "Accordion"
 }
 

package/src/vendors/reach-ui/ReachUi_AlertDialog.res

@@ -1,43 +1,17 @@
 module AlertDialog = {
   type props<'a> = {
-    "isOpen": bool,
-    "onDismiss": unit => unit,
-    "leastDestructiveRef": React.ref<'a>,
-    "aria-label": option<string>,
-    "aria-labelledby": option<string>,
-    "style": // "allowPinchZoom": option(bool),
-    option<ReactDOM.Style.t>,
-    "className": option<string>,
-    "children": React.element,
+    isOpen: bool,
+    onDismiss: unit => unit,
+    leastDestructiveRef: React.ref<'a>,
+    ariaLabel?: string,
+    ariaLabelledby?: string,
+    style?: ReactDOM.Style.t,
+    className?: string,
+    children: React.element,
   }
 
   @module("@reach/alert-dialog")
   external make: React.component<props<'a>> = "AlertDialog"
-
-  let makeProps = (
-    ~isOpen: bool,
-    ~onDismiss: unit => unit,
-    ~leastDestructiveRef: React.ref<'a>,
-    ~ariaLabel: option<string>=?,
-    ~ariaLabelledby: option<string>=?,
-    // Disable allowPinchZoom for now since it causes an annoying react dom warning
-    // ~allowPinchZoom: option(bool)=?,
-    ~style: option<ReactDOM.Style.t>=?,
-    ~className: option<string>=?,
-    ~children: React.element,
-    (),
-  ) =>
-    {
-      "isOpen": isOpen,
-      "onDismiss": onDismiss,
-      "leastDestructiveRef": leastDestructiveRef,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledby,
-      "style": style,
-      "className": className,
-      // "allowPinchZoom": allowPinchZoom,
-      "children": children,
-    }
 }
 
 module AlertDialogLabel = {

package/src/vendors/reach-ui/ReachUi_Dialog.res

@@ -1,13 +1,12 @@
 module Dialog = {
   type props = {
-    "isOpen": bool,
-    "onDismiss": unit => unit,
-    "aria-label": option<string>,
-    "aria-labelledby": option<string>,
-    "style": // "allowPinchZoom": option(bool),
-    option<ReactDOM.Style.t>,
-    "className": option<string>,
-    "children": React.element,
+    isOpen: bool,
+    onDismiss: unit => unit,
+    ariaLabel?: string,
+    ariaLabelledby?: string,
+    style?: ReactDOM.Style.t,
+    className: string,
+    children: React.element,
   }
 
   @module("@reach/dialog")
@@ -18,8 +17,6 @@ module Dialog = {
     ~onDismiss: unit => unit,
     ~ariaLabel: option<string>=?,
     ~ariaLabelledby: option<string>=?,
-    // Disable allowPinchZoom for now since it causes an annoying react dom warning
-    // ~allowPinchZoom: option(bool)=?,
     ~style: option<ReactDOM.Style.t>=?,
     ~className: option<string>=?,
     ~children: React.element,

package/src/vendors/reach-ui/ReachUi_Listbox.res

@@ -168,15 +168,14 @@ module ListboxList = {
 
 module ListboxOption = {
   type props = {
-    "value": option<string>,
-    "label": option<string>,
-    "disabled": option<bool>,
-    "onMouseUp": option<ReactEvent.Mouse.t => unit>,
-    "onKeyDown": option<ReactEvent.Keyboard.t => unit>,
-    "as": option<as_>,
-    "style": option<ReactDOM.Style.t>,
-    "className": option<string>,
-    "children": React.element,
+    value?: string,
+    label?: string,
+    disabled?: bool,
+    onMouseUp?: ReactEvent.Mouse.t => unit,
+    onKeyDown?: ReactEvent.Keyboard.t => unit,
+    style?: ReactDOM.Style.t,
+    className?: string,
+    children: React.element,
   }
 
   @module("@reach/listbox")

package/src/vendors/reach-ui/ReachUi_MenuButton.res

@@ -48,38 +48,15 @@ module MenuItems = {
 }
 
 module MenuItem = {
-  type props = {
-    "onSelect": unit => unit,
-    "onMouseUp": option<ReactEvent.Mouse.t => unit>,
-    "onKeyDown": option<ReactEvent.Keyboard.t => unit>,
-    "as": option<as_>,
-    "style": option<ReactDOM.Style.t>,
-    "className": option<string>,
-    "children": React.element,
-  }
-
-  @module("@reach/menu-button")
-  external make: React.component<props> = "MenuItem"
-
-  let makeProps = (
+  @module("@reach/menu-button") @react.component
+  external make: (
     ~onSelect: unit => unit,
-    ~onMouseUp: option<ReactEvent.Mouse.t => unit>=?,
-    ~onKeyDown: option<ReactEvent.Keyboard.t => unit>=?,
-    ~as_: option<as_>=?,
-    ~style: option<ReactDOM.Style.t>=?,
-    ~className: option<string>=?,
+    ~onMouseUp: ReactEvent.Mouse.t => unit=?,
+    ~onKeyDown: ReactEvent.Keyboard.t => unit=?,
+    ~style: ReactDOM.Style.t=?,
+    ~className: string=?,
     ~children: React.element,
-    (),
-  ) =>
-    {
-      "onSelect": onSelect,
-      "onMouseUp": onMouseUp,
-      "onKeyDown": onKeyDown,
-      "as": as_,
-      "style": style,
-      "className": className,
-      "children": children,
-    }
+  ) => React.element = "MenuItem"
 }
 
 module MenuLink = {

package/src/vendors/reach-ui/ReachUi_Popover.res

@@ -6,9 +6,3 @@ external make: (
   ~className: string=?,
   ~children: React.element,
 ) => React.element = "default"
-
-@module("@reach/popover") @react.component
-external positionDefault: 'position = "positionDefault"
-
-@module("@reach/popover") @react.component
-external positionMatchWidth: 'position = "positionMatchWidth"