@colisweb/rescript-toolkit 3.4.2 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "3.4.2",
+  "version": "3.5.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",

package/playground/PlaygroundComponents.res

@@ -38,6 +38,7 @@ let components: array<(string, module(Config))> = [
   ("IconButton", module(Playground_IconButton)),
   ("CopyWrapper", module(Playground_CopyWrapper)),
   ("Listbox", module(Playground_Listbox)),
+  ("Coordinates", module(Playground_Coordinates)),
 ]
 
 module List = {

package/playground/components/Playground_Coordinates.res

@@ -0,0 +1,12 @@
+@module("@root/src/ui/Toolkit__Ui_Coordinates.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Coordinates.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  <div className="inline-block">
+    <Toolkit__Ui_Coordinates coordinates={{latitude: 50.222, longitude: 20.33333}} />
+  </div>
+}

package/src/ui/Toolkit__Ui.res

@@ -35,3 +35,4 @@ module Notice = Toolkit__Ui_Notice
 module NativeDatePicker = Toolkit__Ui_NativeDatePicker
 module ErrorBoundary = Toolkit__Ui_ErrorBoundary
 module WeekDateFilter = Toolkit__Ui_WeekDateFilter
+module Coordinates = Toolkit__Ui_Coordinates

package/src/ui/Toolkit__Ui_Coordinates.res

@@ -0,0 +1,20 @@
+open ReactIntl
+
+@react.component
+let make = (~coordinates: Toolkit__Decoders.Coordinates.t, ~copyWrapperClassName="") => {
+  let intl = useIntl()
+
+  <Toolkit__Ui_CopyWrapper
+    intl
+    className={cx(["inline-flex items-center", copyWrapperClassName])}
+    textToCopy={`${coordinates.latitude->Float.toString}, ${coordinates.longitude->Float.toString}`}>
+    <div className="inline-flex flex-row items-center gap-2 text-info-600">
+      <ReactIcons.MdMyLocation size=15 />
+      <p className="e2e-coordinates-gps">
+        {`${coordinates.latitude->Js.Float.toFixedWithPrecision(
+            ~digits=3,
+          )}, ${coordinates.longitude->Js.Float.toFixedWithPrecision(~digits=3)}`->React.string}
+      </p>
+    </div>
+  </Toolkit__Ui_CopyWrapper>
+}

package/src/ui/Toolkit__Ui_Coordinates.resi

@@ -0,0 +1,5 @@
+@react.component
+let make: (
+  ~coordinates: Toolkit__Decoders.Coordinates.t,
+  ~copyWrapperClassName: string=?,
+) => React.element

package/src/ui/Toolkit__Ui_CopyWrapper.res

@@ -10,7 +10,7 @@ module Msg = {
 
 @react.component
 let make = (~children, ~textToCopy, ~className="", ~intl) => {
-  let ref1Clipboard = Toolkit.Hooks.useClipboard(
+  let ref1Clipboard = Toolkit__Hooks.useClipboard(
     textToCopy,
     ~onCopyNotificationMessage=intl->Intl.formatMessage(Msg.copied),
   )
@@ -18,11 +18,11 @@ let make = (~children, ~textToCopy, ~className="", ~intl) => {
   <div className={cx(["rounded-md border border-info-500 bg-info-50", className])}>
     <div className="relative w-full">
       <div
-        className="absolute -right-2 top-1 p-1 bg-info-50 text-info-500 cursor-pointer hover:bg-info-400 hover:text-white rounded active:bg-info-500"
+        className="absolute left-full transform -translate-x-1/2 top-1 p-1 bg-info-50 text-info-500 cursor-pointer hover:bg-info-400 hover:text-white rounded active:bg-info-500"
         onClick={_ => {
           ref1Clipboard.copy()
         }}>
-        <ReactIcons.MdContentCopy size=10 />
+        <ReactIcons.MdContentCopy size=14 />
       </div>
       <div className="py-1 px-2 pr-4"> {children} </div>
     </div>