@colisweb/rescript-toolkit 2.67.0 → 2.67.1

package/playground/{Doc.res → docs/Playground_Docs.res}

@@ -1,32 +1,32 @@
 module ApiDecoding = {
-  @module("../../../docs/ApiDecoding.mdx") @react.component
+  @module("../../../../playground/docs/ApiDecoding.mdx") @react.component
   external make: unit => React.element = "default"
 }
 module Form = {
-  @module("../../../docs/Form.mdx") @react.component
+  @module("../../../../playground/docs/Form.mdx") @react.component
   external make: unit => React.element = "default"
 }
 module Identifiers = {
-  @module("../../../docs/Identifiers.mdx") @react.component
+  @module("../../../../playground/docs/Identifiers.mdx") @react.component
   external make: unit => React.element = "default"
 }
 module Primitives = {
-  @module("../../../docs/Primitives.mdx") @react.component
+  @module("../../../../playground/docs/Primitives.mdx") @react.component
   external make: unit => React.element = "default"
 }
 module Requests = {
-  @module("../../../docs/Request.mdx") @react.component
+  @module("../../../../playground/docs/Request.mdx") @react.component
   external make: unit => React.element = "default"
 }
 module Setup = {
-  @module("../../../docs/Setup.mdx") @react.component
+  @module("../../../../playground/docs/Setup.mdx") @react.component
   external make: unit => React.element = "default"
 }
 module Router = {
-  @module("../../../docs/Router.mdx") @react.component
+  @module("../../../../playground/docs/Router.mdx") @react.component
   external make: unit => React.element = "default"
 }
 module Unleash = {
-  @module("../../../docs/Unleash.mdx") @react.component
+  @module("../../../../playground/docs/Unleash.mdx") @react.component
   external make: unit => React.element = "default"
 }

package/playground/docs/Primitives.mdx

@@ -0,0 +1,53 @@
+# Primitives
+
+Utililties functions for primitives types :
+
+- `option`
+- `string`
+- `array`
+
+## Option
+
+### string
+
+- `fromString` : `string => option(string)`
+- `toString` : `option(string) => string`
+
+```rescript
+let anEmptyString = "";
+
+Toolkit.Primitives.Option.fromString(anEmptyString)
+->Option.map(v => v ++ "test");
+
+Toolkit.Primitives.Option.toString(Some("test")); // "test"
+Toolkit.Primitives.Option.toString(None); // ""
+```
+
+### boolean
+
+- `fromBool` : `bool => option(bool)`
+
+```rescript
+Toolkit.Primitives.Option.fromBool(true); // Some(true)
+Toolkit.Primitives.Option.fromBool(false); // None
+```
+
+## Array
+
+```rescript
+let variable = ["abc", "dce", ""];
+
+Js.log(Primitives.Array.joinNonEmpty(anEmptyString)); // "abc, dce"
+Js.log(Primitives.Array.joinNonEmpty(~separator="+", anEmptyString)); // "abc+dce"
+Js.log(variable->Primitives.Array.tail); // ""
+```
+
+## Result
+
+```rescript
+let result = Ok("test");
+let test = Error("error");
+
+Js.log(Primitives.Result.get(result)); // Some("test")
+Js.log(Primitives.Result.get(test)); // None
+```

package/playground/docs/Request.mdx

@@ -0,0 +1,281 @@
+# How to manage an API request
+
+## 1. Create the request config
+
+You have to declare 3 types :
+
+- `argument` is what you give to the function
+- `response` is what your API answer
+- `error` is the potential custom errors that can occur (⚠️ this has to be handled manually)
+
+And the `exec` method.
+
+We use [decco](https://github.com/reasonml-labs/decco) to serialize / deserialize the data.
+
+```rescript
+let request = Axios.Instance.create(
+  Axios.makeConfig(~baseURL=envState.apiUrl,()),
+);
+
+module FetchUsers = {
+  module Config = {
+    type argument = unit;
+
+    @decco
+    type response = array<user>
+    @decco
+    and user = {
+      name: string
+    };
+
+    type error = string;
+
+    let exec = () => {
+      request->Request.get("/", response_decode);
+    };
+  };
+  module Request = Toolkit.Request.Make(Config);
+};
+
+FetchUsers.Request.exec();
+```
+
+### 1.2 Send data
+
+We create a decodable `body` type that we give to the `argument` type.
+This decodable `body` will be used in the exec method.
+
+```rescript
+module UpdateUser = {
+  module Config = {
+    type argument = body
+    @decco
+    and body = {
+      name: string,
+    };
+
+    @decco
+    type response = unit;
+
+    type error = unit;
+
+    let exec = body => {
+      request->Request.postData("/update-user", response_decode, body->body_encode);
+    };
+  };
+  module Request = Toolkit_Request.Make(Config);
+};
+
+UpdateUser.Request.exec({ name: "test" })
+```
+
+### 1.3 Handle errors
+
+In order to handle special errors comming from the API, you can use the `mapError` parameter.
+
+This parameter requires a callback which contains the **response** as argument and needs to return this type :
+
+```rescript
+option<result<'data, error<'a>>>
+```
+
+The `result` is useful for some cases when an API error should not break the flow so you can handle the specific error and just return `Ok()`.
+
+#### Request error type
+
+```rescript
+type undecodedResponse = {
+  data: undecodedData,
+  headers,
+  config,
+  status: int,
+};
+
+type noResponse = {
+  message: string,
+  config,
+};
+
+// We get this type in mapError callback argument
+type failedResponse = {
+  message: string,
+  config,
+  response,
+}
+and response = {
+  data: failedResponseData,
+  headers,
+  status: int,
+};
+
+type error<'a> = [
+  | #noResponse(noResponse)
+  | #invalidResponse(failedResponse)
+  | #invalidResponseData(undecodedResponse, string)
+  | #invalidErrorData
+  | #unknown(Js.Promise.error)
+  | #custom('a)
+]
+```
+
+```rescript
+let exec = token => {
+  request->Request.get(
+    "/test",
+    ~mapError=
+      error => {
+        // have to return option(Toolkit.Request.error('a'))
+      },
+    response_decode,
+  );
+};
+```
+
+`failedResponseData` can be anything depending on the API behavior. So you have to use `Obj.magic` to cast and use the correct field.
+
+```rescript
+let handleError = (error: failedResponse) => {
+  // the API return an object { code: string }
+  let code = error.response.data->Obj.magic##code;
+
+  // If code can be undefined
+  code
+  ->Option.map(code => {
+    switch (code) {
+      | "some_code" => Error(#custom("message"))
+      | "other_code" => Error(#invalidErrorData)
+      | "its_ok" => Ok()
+      | _ => Error(#custom("unknown"))
+    }
+  })
+};
+```
+
+Often, we use decco in order to handle complex error (error with data). We create a custom Decoder for this kind of case
+
+```rescript
+module UpdateUser = {
+  module Config = {
+    type argument = body
+    @decco
+    and body = {name: string};
+
+    @decco
+    type response = unit;
+
+    module Error =
+      Decoders.Enum({
+        @deriving(jsConverter)
+        type enum = [
+          | #"unknown-user"
+          | #invalidData
+          | #unknownError
+        ];
+      });
+
+    @decco
+    type error = Error.t;
+
+    let exec = body => {
+      request->Request.postData(
+        "/update-user",
+        response_decode,
+        body->body_encode,
+        ~mapError=
+          ({response}) => {
+            switch (response.data->Obj.magic->error_decode) {
+            | Ok(error) => Some(Error(`custom(error)))
+            | Error(err) =>
+              Js.log(err);
+              Some(Error(`custom(`unknownError)));
+            }
+          }
+      );
+    };
+  };
+  module Request = Toolkit_Request.Make(Config);
+};
+
+UpdateUser.Request.exec({ name: "test" })
+->Promise.tapError(err => {
+  switch (err) {
+    | #custom(#"unknown-user") => Js.log("user not found")
+    | #custom(#unknownError) => Js.log("alert sentry")
+    | _ => Js.log("generic handler")
+  }
+})
+```
+
+## 2. Use request in React
+
+### 2.1 Fetching data with swr
+
+There are several ways to manage a request in React, we chose to use [swr](https://swr.vercel.app/) with [react-suspense](https://reactjs.org/docs/concurrent-mode-suspense.html) enabled.
+We have a functor to generate automaticatly a swr fetcher based on the request created before :
+
+```rescript
+module GetUsers = {
+  module Config = {
+    type argument = unit;
+
+    @decco
+    type response = array<user>
+    @decco
+    and user = {
+      name: string
+    };
+
+    type error = string;
+
+    let exec = () => {
+      request->Request.get("/users", response_decode);
+    };
+  };
+  module Request = Toolkit.Request.Make();
+};
+
+
+module GetUsersFetcher =
+  Fetcher.Make({
+    module Request = GetUsers.Request;
+    let key = () => [|
+      "GetUsers",
+    |];
+  });
+```
+
+Later in the react app
+
+```rescript
+module PageUsers = {
+  [@react.component]
+  let make = () => {
+    let (users, _, _) = GetUsersFetcher.use();
+
+    <div>
+      {
+        users
+        ->Belt.Array.mapWithIndex((i, user) => {
+          <div key={i->Belt.Int.toString}>
+            {user.name->React.String}
+          </div>
+        })
+      }
+    </div>
+  };
+};
+
+[@react.component]
+let make = () => {
+  <ErrorBoundary>
+    <React.Suspense fallback={<Spinner />}>
+      <PageUsers />
+    </React.Suspense>
+  </ErrorBoundary>
+};
+```
+
+There are 2 functions generated by the fetcher functor :
+
+- `use` can be used when the API will always return something
+- `useOptional` return an `option<'a>` so it's used when the API can return nothing

package/playground/docs/Router.mdx

@@ -0,0 +1,43 @@
+# Router
+
+Type-safe navigation
+
+## Usage
+
+```rescript
+open Toolkit
+
+module StoreId = Identifiers.MakeString()
+
+module RouterConfig = {
+  type admin = Home
+
+  type t =
+    | Home
+    | StoreDetails(StoreId.t)
+    | Admin(admin)
+    | NotFound
+
+  let make = url =>
+    switch url.path {
+    | list{} => Home
+    | list{"stores", storeId} => StoreDetails(StoreId.make(storeId))
+    | list{"admin", ...rest} =>
+      switch rest {
+      | list{} => Admin(Home)
+      | _ => NotFound
+      }
+    | _ => NotFound
+    }
+
+  let toString = route =>
+    switch route {
+    | Home => ""
+    | StoreDetails(storeId) => "/stores/" ++ storeId->StoreId.toString
+    | Admin(Home) => "/admin/"
+    | NotFound => "/404"
+    }
+}
+
+module Navigation = Router.Make(RouterConfig)
+```

package/playground/docs/Setup.mdx

@@ -0,0 +1,58 @@
+# ReScript toolkit
+
+## Setup
+
+Install the package :
+
+```bash
+npm i -S @colisweb/rescript-toolkit
+```
+
+Add the package to the `bsconfig.json` file :
+
+```json
+{
+  "bs-dependencies": ["@colisweb/rescript-toolkit"]
+}
+```
+
+Import the style in your app :
+
+```js
+// App.js
+import "@colisweb/rescript-toolkit/src/ui/styles.css";
+```
+
+### Add Tailwind
+
+This toolkit is based on [tailwindcss](https://tailwindcss.com/).
+We share a postcss config that you can include to your webpack config
+
+## Usage
+
+The bindings in the _vendors_ are **globaly accessible**. Everything else is scoped into the `Toolkit` namespace.
+
+```rescript
+open Toolkit;
+
+@react.component
+let make = () => {
+  let dialog = Hooks.useDisclosure();
+
+  <div className=Tw.(style([bgWhite])) />
+};
+```
+
+### Local development
+
+Run bsb
+
+```bash
+npm run dev
+```
+
+Run storybook
+
+```bash
+npm run storybook
+```

package/playground/docs/Unleash.mdx

@@ -0,0 +1,53 @@
+# Unleash
+
+[Unleash](https://github.com/Unleash/unleash) is feature flipping solution. It allows us to activate or restrain fonctionalities acording a configuration.
+
+## Usage
+
+### 1. Create a rule
+
+We use a functor to enforce several parameters :
+
+| Params      |                     value                      |
+| ----------- | :--------------------------------------------: |
+| parameters  |                  'parameters                   |
+| input       |                     'input                     |
+| output      |                    'output                     |
+| envUrl      |                     string                     |
+| featureName |                     string                     |
+| exec        | ('input, Unleash.config(parameters)) => output |
+
+```rescript
+module OutdatedApplicationConfig = {
+  @decco
+  type parameters = {version: string}
+  type input = unit
+  type output = bool
+  let envUrl = Env.unleashUrl
+  let featureName = "minimum-supported-version"
+
+  let exec = (_, config: Unleash.config<parameters>) => {
+    let appVersion =
+      ReactNativeVersionNumber.appVersion->Js.Nullable.toOption->Option.getWithDefault("")
+
+    config.strategies
+    ->Array.get(0)
+    ->Option.mapWithDefault(false, strategy =>
+      config.enabled ? Semver.lt(appVersion, strategy.parameters.version) : false
+    )
+  }
+}
+
+module OutdatedApplication = Toolkit.Unleash.MakeFeature(OutdatedApplicationConfig)
+```
+
+### 2. Use the rule
+
+```rescript
+OutdatedApplication.exec()
+->Promise.tapOk(outdated => {
+  if (outdated) {
+    Js.log("app outdated");
+  }
+})
+```

package/playground/main.jsx

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
 import "../src/ui/styles.css";
 import "../src/ui/Toolkit__Ui_DatetimeInput.css";
 import "./custom.css";
-import App from "../lib/es6_global/playground/App.bs";
+import App from "../lib/es6_global/playground/PlaygroundApp.bs";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 

package/src/intl/Toolkit__Intl.res

@@ -31,16 +31,11 @@ let availableLanguagesFromString = v =>
   | _ => #fr
   }
 
-let createIntl = (locale: availableLanguages, messages) => {
+let createIntl = (~onError=?, locale: availableLanguages, messages) => {
   let cache = createIntlCache()
 
   createIntl(
-    intlConfig(
-      ~locale=locale->availableLanguagesToString,
-      ~messages,
-      ~onError=message => Toolkit__BrowserLogger.error2("create intl error", message),
-      (),
-    ),
+    intlConfig(~locale=locale->availableLanguagesToString, ~messages, ~onError?, ()),
     cache,
   )
 }
@@ -48,6 +43,7 @@ let createIntl = (locale: availableLanguages, messages) => {
 module type IntlConfig = {
   let messages: messages
   let defaultLocale: option<availableLanguages>
+  let onError: string => unit
 }
 
 module Make = (Config: IntlConfig) => {
@@ -67,10 +63,10 @@ module Make = (Config: IntlConfig) => {
 
   type action = SetLocale(availableLanguages)
 
-  let store = Restorative.createStore({locale: locale, intl: intl}, (_state, action) =>
+  let store = Restorative.createStore({locale, intl}, (_state, action) =>
     switch action {
     | SetLocale(locale) => {
-        locale: locale,
+        locale,
         intl: {
           let messages = switch locale {
           | #fr => Config.messages.fr->toDict

package/src/intl/Toolkit__Intl.resi

@@ -14,6 +14,7 @@ let availableLanguagesFromString: string => availableLanguages
 module type IntlConfig = {
   let messages: messages
   let defaultLocale: option<availableLanguages>
+  let onError: string => unit
 }
 
 module Make: (Config: IntlConfig) =>

package/src/logger/Toolkit__BrowserLogger.res

@@ -51,22 +51,22 @@ let warning3 = (str, str2, str3) => {
 }
 
 let error = (str: string) => {
-  if nodeEnv !== "production" {
-    Js.Console.log3("%cERROR", errorStyle, str)
-  } else {
-    DatadogRum.Browser.addError(makeError(str))
-  }
+  DatadogRum.Browser.addError(makeError(str))
+  // if nodeEnv !== "production" {
+  //   Js.Console.log3("%cERROR", errorStyle, str)
+  // } else {
+  // }
 }
 
 let error2 = (str, str2) => {
-  if nodeEnv !== "production" {
-    Js.Console.log4("%cERROR", errorStyle, str, str2)
-  } else {
-    DatadogRum.Browser.addErrorWithContext(
-      makeError(str),
-      {
-        "cause": str2,
-      },
-    )
-  }
+  DatadogRum.Browser.addErrorWithContext(
+    makeError(str),
+    {
+      "cause": str2,
+    },
+  )
+  // if nodeEnv !== "production" {
+  //   Js.Console.log4("%cERROR", errorStyle, str, str2)
+  // } else {
+  // }
 }

package/src/tailwind/tailwind.config.cjs

@@ -1,5 +1,3 @@
-const defaultColors = require("tailwindcss/colors");
-
 module.exports = {
   theme: {
     extend: {
@@ -65,9 +63,9 @@ module.exports = {
       screen: "100vh",
     },
     colors: {
-      white: defaultColors.white,
-      black: defaultColors.black,
-      transparent: defaultColors.transparent,
+      white: "#fff",
+      black: "#000",
+      transparent: "transparent",
       routeWithdraw: "#176693",
       gray: {
         100: "#f7fafc",