@colisweb/rescript-toolkit 2.66.1 → 2.67.0

package/src/ui/Toolkit__Ui_Switch.res

@@ -1,28 +1,4 @@
-type size = [#md | #lg]
-type color = [
-  | #info
-  | #success
-  | #primary
-  | #neutral
-  | #danger
-]
-let getBulletSize = size =>
-  switch size {
-  | #md => "w-5 h-5"
-  | #lg => "w-6 h-6"
-  }
-
-let getLabelSize = size =>
-  switch size {
-  | #md => "w-12"
-  | #lg => "w-16"
-  }
-
-let getTranslateBySize = size =>
-  switch size {
-  | #md => "translate-x-6"
-  | #lg => "translate-x-9"
-  }
+type size = [#sm | #md | #lg]
 
 @react.component
 let make = (
@@ -39,7 +15,7 @@ let make = (
   ~checkedSwitchClassName="",
   ~disabledSwitchClassName="",
   ~switchRef: option<ReactDOM.domRef>=?,
-  ~color=#primary,
+  ~displayTitle=false,
 ) => {
   let (isChecked, setIsChecked) = React.useState(() => checked->Option.getWithDefault(false))
   let previousChecked = Toolkit__Hooks.usePrevious(checked)
@@ -66,16 +42,14 @@ let make = (
     <span
       className={cx([
         "shrink-0 flex items-center relative rounded-full py-[2px] cursor-pointer border transition-all",
-        getLabelSize(size),
-        isChecked
-          ? switch color {
-            | #info => "bg-info-500 border-info-500"
-            | #success => "bg-success-500 border-success-500"
-            | #primary => "bg-primary-700 border-primary-700"
-            | #neutral => "bg-neutral-700 border-neutral-700"
-            | #danger => "bg-danger-500 border-danger-500"
-            }
-          : "bg-gray-300",
+        switch size {
+        | #sm => "w-7"
+        | #md if displayTitle => "w-[56px] h-[22px]"
+        | #md => "w-[44px] h-[22px]"
+        | #lg if displayTitle => "w-[87px] [h-32px]"
+        | #lg => "w-[66px] [h-32px]"
+        },
+        isChecked ? "bg-primary-700 border-primary-700" : "bg-neutral-500",
         switchClassName,
         isChecked ? checkedSwitchClassName : "",
         disabled->Option.getWithDefault(false) ? disabledSwitchClassName : "",
@@ -93,11 +67,47 @@ let make = (
           ?checked
         />
       </ReachUi.VisuallyHidden>
+      {displayTitle
+        ? <span
+            className={cx([
+              "uppercase absolute text-white font-semibold",
+              switch (size, isChecked) {
+              | (#sm, _) => "hidden"
+              | (#md, true) => "text-xs ml-2"
+              | (#md, false) => "text-xs ml-[21px]"
+              | (#lg, true) => "text-lg ml-2"
+              | (#lg, false) => "text-lg ml-8"
+              },
+            ])}>
+            {isChecked
+              ? <ReactIntl.FormattedMessage defaultMessage={"Oui"} />
+              : <ReactIntl.FormattedMessage defaultMessage={"Non"} />}
+          </span>
+        : React.null}
       <span
         className={cx([
           "rounded-full shadow transition duration-200 ease-linear transform bg-white",
-          isChecked ? getTranslateBySize(size) : "translate-x-[3px]",
-          getBulletSize(size),
+          switch size {
+          | #sm => "w-3 h-3"
+          | #md => "w-[16px] h-[16px]"
+          | #lg => "w-6 h-6"
+          },
+          switch size {
+          | #sm if isChecked => "translate-x-[12px]"
+          | #sm => "translate-x-[2px]"
+          | #md =>
+            switch (isChecked, displayTitle) {
+            | (true, true) => "translate-x-[36px]"
+            | (true, false) => "translate-x-[24px]"
+            | (false, _) => "translate-x-[2px]"
+            }
+          | #lg =>
+            switch (isChecked, displayTitle) {
+            | (true, true) => "translate-x-[58px]"
+            | (true, false) => "translate-x-[24px]"
+            | (false, _) => "translate-x-[3px]"
+            }
+          },
         ])}
       />
     </span>

package/src/ui/Toolkit__Ui_Switch.resi

@@ -1,11 +1,4 @@
-type size = [#md | #lg]
-type color = [
-  | #info
-  | #success
-  | #primary
-  | #neutral
-  | #danger
-]
+type size = [#sm | #md | #lg]
 
 @react.component
 let make: (
@@ -22,5 +15,5 @@ let make: (
   ~checkedSwitchClassName: string=?,
   ~disabledSwitchClassName: string=?,
   ~switchRef: ReactDOM.domRef=?,
-  ~color: color=?,
+  ~displayTitle: bool=?,
 ) => React.element

package/src/ui/styles.css

@@ -3,13 +3,13 @@
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700");
 @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap");
-@import url("~@reach/accordion/styles.css");
-@import url("~@reach/listbox/styles.css");
-@import url("~@reach/menu-button/styles.css");
-@import url("~@reach/tabs/styles.css");
-@import url("~@reach/tooltip/styles.css");
-@import url("~@reach/combobox/styles.css");
-@import url("~@colisweb/react-day-picker/lib/style.css");
+@import url("@reach/accordion/styles.css");
+@import url("@reach/listbox/styles.css");
+@import url("@reach/menu-button/styles.css");
+@import url("@reach/tabs/styles.css");
+@import url("@reach/tooltip/styles.css");
+@import url("@reach/combobox/styles.css");
+@import url("@colisweb/react-day-picker/lib/style.css");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

package/src/vendors/Browser.res

@@ -71,6 +71,11 @@ module Navigator = {
     | (_, Some(l)) => l
     | (None, None) => "fr"
     }
+
+  module Clipboard = {
+    @val
+    external writeText: string => unit = "navigator.clipboard.writeText"
+  }
 }
 
 module URL = {

package/src/vendors/Browser.resi

@@ -46,6 +46,11 @@ module Navigator: {
   @val external language: option<string> = "window.navigator.language"
 
   let getBrowserLanguage: unit => string
+
+  module Clipboard: {
+    @val
+    external writeText: string => unit = "navigator.clipboard.writeText"
+  }
 }
 
 module URL: {

package/src/vendors/BsReactIcons.res

@@ -6009,3 +6009,8 @@ module FaMinusCircle = {
   external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
     "FaMinusCircle"
 }
+module SiDatabricks = {
+  @module("react-icons/si") @react.component
+  external make: (~size: int=?, ~color: string=?, ~className: string=?) => React.element =
+    "SiDatabricks"
+}

package/src/vendors/BsReactSelect.res

@@ -133,21 +133,25 @@ module ReactAsyncSelectMultiple = {
 }
 
 module ReactSelectMultipleCreateInput = {
+  type labelOption<'value> = {
+    label: string,
+    value: 'value,
+  }
   module ReactSelect = {
-    type components = {"DropDownIndicator": React.element}
-
+    type components = {"DropdownIndicator": React.element}
+    type labeledValue = {value: string, label: string}
     @module("react-select/creatable") @react.component
     external make: (
       ~components: components,
-      ~inputValue: string=?,
+      ~inputValue: string,
       ~isClearable: option<bool>=?,
       ~isMulti: option<bool>=?,
       ~menuIsOpen: option<bool>=?,
-      ~onChange: array<string> => unit=?,
-      ~onInputChange: string => unit=?,
+      ~onChange: array<labelOption<'a>> => unit,
+      ~onInputChange: string => unit,
       ~onKeyDown: ReactEvent.Keyboard.t => unit,
       ~placeholder: option<string>=?,
-      ~value: array<string>,
+      ~value: array<labelOption<'a>>,
       ~isDisabled: option<bool>=?,
       ~isLoading: option<bool>=?,
       ~className: option<string>=?,
@@ -157,10 +161,8 @@ module ReactSelectMultipleCreateInput = {
 
   @react.component
   let make = (
-    ~inputValue: option<string>=?,
-    ~onInputChange: option<string => unit>=?,
     ~value: array<string>,
-    ~onChange: option<array<string> => unit>=?,
+    ~onChange: array<string> => unit,
     ~isClearable=true,
     ~placeholder="",
     ~isDisabled=false,
@@ -168,19 +170,21 @@ module ReactSelectMultipleCreateInput = {
     ~className: option<string>=?,
     ~id: option<string>=?,
   ) => {
+    let (inputValue, onInputChange) = React.useState(() => "")
+    let onInputChange = v => onInputChange(_ => v)
+
     <ReactSelect
-      components={"DropDownIndicator": React.null}
+      components={"DropdownIndicator": React.null}
       isMulti=true
       onKeyDown={e => {
-        switch inputValue {
-        | Some("")
-        | None => ()
-        | Some(inputValue) =>
+        if inputValue === "" {
+          ()
+        } else {
           switch e->ReactEvent.Keyboard.key {
           | "Enter"
           | "Tab" => {
-              onInputChange->Option.forEach(fn => fn(""))
-              onChange->Option.forEach(fn => fn(value->Array.concat([inputValue])))
+              onInputChange("")
+              onChange(value->Array.concat([inputValue]))
               e->ReactEvent.Keyboard.preventDefault
             }
 
@@ -189,12 +193,12 @@ module ReactSelectMultipleCreateInput = {
         }
       }}
       menuIsOpen={false}
-      ?inputValue
+      inputValue
       isClearable
-      ?onChange
-      ?onInputChange
+      onChange={values => onChange(values->Array.map(({label}) => label))}
+      onInputChange
       placeholder
-      value
+      value={value->Array.mapWithIndex((i, v) => {label: v, value: v ++ i->Js.Int.toString})}
       isDisabled
       isLoading
       ?className

package/vite.config.js

@@ -0,0 +1,22 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import createReScriptPlugin from "@jihchi/vite-plugin-rescript";
+import mdx from "@mdx-js/rollup";
+import fs from "fs";
+
+const appDirectory = fs.realpathSync(process.cwd());
+
+export default defineConfig({
+  plugins: [mdx(), createReScriptPlugin(), react()],
+  define: {
+    global: {},
+  },
+  resolve: {
+    alias: [
+      {
+        find: "@root",
+        replacement: (_) => appDirectory,
+      },
+    ],
+  },
+});