@colisweb/rescript-toolkit 2.67.0 → 2.67.1

package/.gitlab-ci.yml

@@ -47,7 +47,7 @@ publish rescript-toolkit:
 # -----------------------------------------------
 pages:
   image: node:16-bullseye
-  extends: .rules-only-for-tags
+  extends: .rules-only-for-master
   tags:
     - aws
   stage: deploy
@@ -55,9 +55,10 @@ pages:
     - export NPM_TOKEN=${NPM_TOKEN:-undefined}
     - yarn
     - yarn build
+    - cp -a dist/. public/
   artifacts:
     paths:
-      - dist
+      - public
   cache:
     key: "yarn-$CI_COMMIT_REF_SLUG"
     paths:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.67.0",
+  "version": "2.67.1",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",
@@ -59,8 +59,7 @@
     "lenses-ppx": "6.1.10",
     "list-selectors": "2.0.1",
     "lodash": "4.17.21",
-    "postcss": "8.4.19",
-    "postcss-loader": "4.2.0",
+    "postcss": "8.4.21",
     "postcss-preset-env": "7.8.3",
     "prismjs": "1.29.0",
     "react": "18.2.0",
@@ -95,12 +94,16 @@
     "@vitejs/plugin-react": "^3.0.0",
     "babel-loader": "8.2.5",
     "highlight.js": "11.7.0",
-    "husky": "8.0.2",
+    "husky": "8.0.3",
     "is-ci": "3.0.1",
     "raw-loader": "4.0.2",
     "react-is": "18.2.0",
+    "rehype-add-classes": "^1.0.0",
+    "rehype-autolink-headings": "^6.1.1",
+    "rehype-highlight": "^6.0.0",
+    "rehype-slug": "^5.1.0",
     "sass": "1.56.1",
-    "vite": "^4.0.0"
+    "vite": "4.0.4"
   },
   "packageManager": "yarn@3.3.1"
 }

package/playground/{App.res → PlaygroundApp.res}

@@ -72,18 +72,25 @@ let make = () => {
           <PlaygroundRouter.Breadcrumb />
           <div className="p-4">
             {switch currentRoute {
-            | Home => <Doc.Setup />
+            | Home => <Playground_Docs.Setup />
             | Docs(doc) =>
               switch doc {
-              | Identifiers => <Doc.Identifiers />
-              | ApiDecoding => <Doc.ApiDecoding />
-              | Form => <Doc.Form />
-              | Requests => <Doc.Requests />
+              | Identifiers => <Playground_Docs.Identifiers />
+              | ApiDecoding => <Playground_Docs.ApiDecoding />
+              | Form => <Playground_Docs.Form />
+              | Requests => <Playground_Docs.Requests />
               }
+            | DesignSystem(_route) => React.null
+            // switch route {
+            //   | Fonts => <Playground_DesignSystem.Fonts />
+            //   | Colors => <Playground_DesignSystem.Colors />
+            //   | MediaQueries => <Playground_DesignSystem.MediaQueries />
+            //   }
+
             | Components(component) =>
               switch component {
-              | List => <Playground_ComponentsList />
-              | Details(component) => <Playground_ComponentDetails component />
+              | List => <PlaygroundComponents.List />
+              | Details(component) => <PlaygroundComponents.Details component />
               }
 
             | NotFound => "NotFound"->React.string

package/playground/PlaygroundComponents.res

@@ -0,0 +1,109 @@
+module type Config = {
+  let resi: string
+  let codeExample: string
+  @react.component
+  let make: unit => React.element
+}
+
+let components: array<(string, module(Config))> = [
+  ("card", module(Playground_Card)),
+  ("switch", module(Playground_Switch)),
+]
+
+module List = {
+  module ComponentLink = {
+    @react.component
+    let make = (~name) => {
+      <PlaygroundRouter.Link
+        route={Components(Details(name))}
+        className="p-4 rounded-lg border bg-white hover:border-primary-700 w-64">
+        <strong className="capitalize"> {name->React.string} </strong>
+      </PlaygroundRouter.Link>
+    }
+  }
+
+  @react.component
+  let make = () => {
+    let (search, setSearch) = React.useState(() => "")
+
+    <div>
+      <h1 className="text-4xl font-bold font-display mb-4 flex flex-row gap-4 items-center">
+        {"Components"->React.string}
+        <input
+          type_="search"
+          placeholder="Search"
+          value={search}
+          onChange={event => {
+            let target = event->ReactEvent.Form.target
+
+            setSearch(_ => target["value"])
+          }}
+          className="bg-white text-sm font-sans px-4 font-normal  rounded-md border border-neutral-300 focus:border-primary-700 h-10 w-60"
+        />
+      </h1>
+      <div className="flex flex-row flex-wrap gap-4">
+        {components
+        ->Array.keep(((name, _)) => name->Js.String2.toLowerCase->Js.String2.includes(search))
+        ->Array.map(((name, _)) => <ComponentLink name key={name} />)
+        ->React.array}
+      </div>
+    </div>
+  }
+}
+
+module Details = {
+  module Component = {
+    @react.component
+    let make = (~component: module(Config)) => {
+      let module(Config) = component
+      <div>
+        <ReachUi.Tabs>
+          <ReachUi.TabList className="mb-4">
+            <ReachUi.Tab> {"Example"->React.string} </ReachUi.Tab>
+            <ReachUi.Tab> {"Code example"->React.string} </ReachUi.Tab>
+            <ReachUi.Tab> {"API"->React.string} </ReachUi.Tab>
+          </ReachUi.TabList>
+          <ReachUi.TabPanels>
+            <ReachUi.TabPanel>
+              <Config />
+            </ReachUi.TabPanel>
+            <ReachUi.TabPanel>
+              <Playground_CodeBlock code={Config.codeExample} />
+            </ReachUi.TabPanel>
+            <ReachUi.TabPanel>
+              <Playground_CodeBlock code={Config.resi} />
+            </ReachUi.TabPanel>
+          </ReachUi.TabPanels>
+        </ReachUi.Tabs>
+      </div>
+    }
+  }
+
+  @react.component
+  let make = (~component: string) => {
+    PlaygroundRouter.Breadcrumb.use([
+      {
+        route: Components(List),
+        text: "Components"->React.string,
+      },
+      {
+        route: Components(Details(component)),
+        text: <span className="capitalize"> {`${component}`->React.string} </span>,
+      },
+    ])
+    <div>
+      <h1 className="text-4xl font-bold font-display mb-4 capitalize">
+        {component->React.string}
+      </h1>
+      <div>
+        {components
+        ->Array.getBy(((name, _)) => {
+          component === name
+        })
+        ->Option.mapWithDefault("unknown"->React.string, ((_, playgroundModule)) => {
+          <Component component={playgroundModule} />
+        })}
+      </div>
+    </div>
+  }
+}

package/playground/PlaygroundLocales.res

@@ -6,4 +6,5 @@ include Toolkit.Intl.Make({
     fr: Array.concatMany([toolkitLocalesFr]),
   }
   let defaultLocale = None
+  let onError = msg => Js.log(msg)
 })

package/playground/PlaygroundRouter.res

@@ -8,10 +8,16 @@ module RouterConfig = {
     | Requests
     | Form
 
+  type designRoutes =
+    | Fonts
+    | Colors
+    | MediaQueries
+
   type t =
     | Home
     | Docs(docRoutes)
     | Components(componentRoutes)
+    | DesignSystem(designRoutes)
     | NotFound
 
   let make = (url: RescriptReactRouter.url) => {
@@ -25,6 +31,13 @@ module RouterConfig = {
       | list{"requests"} => Docs(Requests)
       | _ => NotFound
       }
+    | list{"design", ...rest} =>
+      switch rest {
+      | list{"fonts"} => DesignSystem(Fonts)
+      | list{"colors"} => DesignSystem(Colors)
+      | list{"mediaQueries"} => DesignSystem(MediaQueries)
+      | _ => NotFound
+      }
     | list{"components", ...rest} =>
       switch rest {
       | list{} => Components(List)
@@ -50,6 +63,16 @@ module RouterConfig = {
         }
       }
 
+    | DesignSystem(designRoute) => {
+        let base = "/design"
+
+        switch designRoute {
+        | Fonts => `${base}/fonts`
+        | Colors => `${base}/colors`
+        | MediaQueries => `${base}/mediaQueries`
+        }
+      }
+
     | Components(route) => {
         let base = "/components"
 

package/playground/{CodeBlock.res → Playground_CodeBlock.res}

@@ -3,34 +3,30 @@ module HighlightJs = {
   external registerLanguage: (string, 'a) => unit = "registerLanguage"
   @module("highlight.js") @scope("default")
   external highlightAll: unit => unit = "highlightAll"
+
+  type result = {value: string}
+  @module("highlight.js") @scope("default")
+  external highlight: (string, 'a) => result = "highlight"
 }
 
 @module("../../../playground/utils/rescript-highlight")
 external rescriptModule: 'a = "default"
-@module("highlight.js/lib/languages/bash")
-external bashModule: 'a = "default"
-@module("highlight.js/lib/languages/javascript")
-external javascriptModule: 'a = "default"
 
 HighlightJs.registerLanguage("rescript", rescriptModule)
-HighlightJs.registerLanguage("bash", bashModule)
-HighlightJs.registerLanguage("js", javascriptModule)
 
 @react.component
-let make = (~children, ~className="") => {
-  React.useEffect0(() => {
-    HighlightJs.highlightAll()
-
-    None
-  })
-
+let make = (~code) => {
   <div className="Code border rounded-lg mb-6 relative">
     <pre className="p-4">
-      <code className={className}> {children} </code>
+      <code
+        dangerouslySetInnerHTML={
+          "__html": HighlightJs.highlight(code, {"language": "rescript"}).value,
+        }
+      />
     </pre>
     <button
-      className="absolute right-0 bottom-0 bg-white rounded-tl rounded-br text-sm px-2 border-t border-l hover:bg-neutral-200"
-      onClick={_ => Browser.Navigator.Clipboard.writeText(Obj.magic(children))}>
+      className="absolute right-0 top-0 bg-white rounded-tl rounded-br text-sm px-2 border-b border-l hover:bg-neutral-200"
+      onClick={_ => Browser.Navigator.Clipboard.writeText(Obj.magic(code))}>
       {"Copy"->React.string}
     </button>
   </div>

package/playground/design/Playground_DesignSystem.res

@@ -0,0 +1,12 @@
+module Fonts = {
+  @module("../../../../playground/design/DesignSystem_Fonts.mdx") @react.component
+  external make: unit => React.element = "default"
+}
+module Colors = {
+  @module("../../../../playground/design/DesignSystem_Colors.mdx") @react.component
+  external make: unit => React.element = "default"
+}
+module MediaQueries = {
+  @module("../../../../playground/design/DesignSystem_MediaQueries.mdx") @react.component
+  external make: unit => React.element = "default"
+}

package/playground/{stories/TailwindConfigBreakpoints.js → design/TailwindConfigBreakpoints.jsx}

@@ -1,4 +1,4 @@
-import tailwindConfig from "../src/tailwind/tailwind.config";
+import * as tailwindConfig from "../../src/tailwind/tailwind.config.js";
 
 const screens = tailwindConfig.theme.screens;
 

package/playground/{stories/TailwindConfigColorsPreview.js → design/TailwindConfigColorsPreview.jsx}

@@ -1,4 +1,4 @@
-import tailwindConfig from "../../src/tailwind/tailwind.config";
+import * as tailwindConfig from "../../src/tailwind/tailwind.config.js";
 
 const colors = tailwindConfig.theme.colors;
 

package/playground/{stories/TailwindConfigFontsPreview.js → design/TailwindConfigFontsPreview.jsx}

@@ -1,4 +1,4 @@
-import tailwindConfig from "../src/tailwind/tailwind.config";
+import * as tailwindConfig from "../../src/tailwind/tailwind.config.js";
 
 const fontFamily = tailwindConfig.theme.fontFamily;
 const fontSize = tailwindConfig.theme.fontSize;

package/playground/docs/ApiDecoding.mdx

@@ -0,0 +1,70 @@
+# Decode content from API result
+
+## API
+
+### Decode an enumeration
+
+```rescript
+module LiftEnum = {
+  @deriving(jsConverter)
+  type enum = [
+    | #withLift
+    | #withoutLift
+    | #unknown
+  ]
+}
+
+module Lift = Toolkit.Decoder.Enum(LiftEnum)
+
+@decco
+type response = {lift: Lift.t}
+```
+
+### Decode a date
+
+```rescript
+@decco
+type response = {
+  createdAt: Toolkit.Decoder.Date.t
+}
+```
+
+### Decode unit measure
+
+There are 2 options :
+
+- the field has the unit like : `19 mm`
+- the field has only the value
+
+#### Automatic unit handling
+
+```rescript
+[@decco]
+type response = {
+  length: Toolkit.Decoder.UnitMeasure.Dimension.WithUnit.t
+}
+```
+
+#### Known unit
+
+```rescript
+[@decco]
+type response = {
+  weight: Toolkit.Decoder.UnitMeasure.Weight.Kg.t
+}
+```
+
+### Decode an Array written as a String
+
+This codec is intended for encoding the array params of API requests of scala services.
+
+```rescript
+@decco
+type params = {
+  lengths: Toolkit.Decoder.StringArray<Toolkit.Decoder.UnitMeasure.Dimension.WithUnit.t>
+};
+
+let params = {lengths:[#cm(1),#m(40), #km(3)]};
+let encodedParams = params->params_encode; // "1.00 cm,40.00 m,3.00 km"
+let decodedParams = encodedParams->params_decode; // Ok([#cm(1),#m(40),#km(3)])
+```

package/playground/docs/Form.mdx

@@ -0,0 +1,109 @@
+# Handling forms
+
+We have created a fork of [reform@9.8.0](https://github.com/Astrocoders/reform) we had some features :
+
+- `onSubmit` must return a `Promise.promise(result('a, 'e))`
+- `SubmitFailed(option('error'))` to the `formState('error)` variant
+
+## Usage
+
+### Define a FormState
+
+The module must contains an `error` type and an include of `state` type with `%lenses`
+
+```rescript
+module FormState = {
+  type error = ColiswebApi.V5.Store.Contact.CreateContact.Request.error;
+  include [%lenses
+            type state = {
+              firstName: string,
+              lastName: string,
+              email: string,
+              phone1: string,
+              phone2: string,
+            }
+          ];
+};
+
+module FormApi = Toolkit.Form.Make(FormState);
+```
+
+### Use the form in React
+
+```rescript
+// ...
+@react.component
+let make = () => {
+
+  let initialState =
+    FormState.{
+      firstName: "",
+      lastName: "",
+      phone1: "",
+      phone2: "",
+      email: "",
+    };
+
+  let schema =
+    FormApi.Form.Validation.Schema([
+      StringNonEmpty(FirstName),
+      StringNonEmpty(LastName),
+      Email(Email),
+    ]);
+
+  let onSubmit = (form: FormApi.Form.onSubmitAPI) => {
+    let {values}: FormApi.Form.state = form.state;
+
+    ColiswebApi.V5.Store.Contact.CreateContact.Config.exec((
+      clientId,
+      storeId,
+      {
+        firstName: values.firstName->OptionUtils.fromString,
+        lastName: values.lastName->OptionUtils.fromString,
+        email: values.email,
+        phone1: values.phone1->OptionUtils.fromString,
+        phone2: values.phone2->OptionUtils.fromString,
+      },
+    ))
+    ->Promise.flatMapOk(result =>
+        reloadContact()->Promise.map(_ => Ok(result))
+      )
+    ->Promise.tapOk(_ => hide())
+  };
+
+  let form = FormApi.Form.use(~initialState, ~schema, ~onSubmit, ());
+
+  <FormApi.Form.Provider value=form>
+    <form onSubmit={event => {
+        ReactEvent.Synthetic.preventDefault(event);
+        form.submit();
+      }}>
+
+      <Form.Field
+        field
+        render={({handleChange, error, value, validate}) => {
+          let isInvalid = error->Option.isSome;
+          <>
+            <input value onChange={BsReform.Helpers.handleChange(handleChange)} />
+
+            {
+              error->Option.mapWithDefault(React.null, e => <p>e->React.string</p>)
+            }
+          </>;
+        }}
+      />;
+
+      <Button
+        type_="submit"
+        color=#primary
+        isLoading={form.state.formState === Submitting}
+        onClick={_ => form.submit()}>
+        <FormattedMessage
+          id="forms.controls.confirm"
+          defaultMessage="Confirm"
+        />
+      </Button>
+    </form>
+  </FormApi.Form.Provider>;
+}
+```

package/playground/docs/Identifiers.mdx

@@ -0,0 +1,38 @@
+# Avoid string type with unique identifiers
+
+Convert a string or an int in an opaque type with a decco decoder.
+
+### `string` identifier
+
+```rescript
+module DeliveryId = Toolkit.Identifier.MakeString({});
+
+/**
+ somewhere
+**/
+@decco
+type response = {
+  deliveryId: DeliveryId.t
+};
+
+let deliveryId = DeliveryId.make("some-id");
+deliveryId->DeliveryId.toString // "some-id"
+```
+
+### `int` identifier
+
+```rescript
+module DeliveryId = Toolkit.Identifier.MakeInt({});
+
+/**
+ somewhere
+**/
+@decco
+type response = {
+  deliveryId: DeliveryId.t
+};
+
+let deliveryId = DeliveryId.make(12);
+deliveryId->DeliveryId.toString; // "12"
+deliveryId->DeliveryId.toInt; // 12
+```