merge new_starr_app@qas history into apps/web

git-subtree-dir: apps/web
git-subtree-mainline: eaa6d2276a
git-subtree-split: 459af9d46a

apps/web/lib/ocaml/useSketch.res

@@ -0,0 +1,67 @@
+type tool =
+  | Pen
+  | Highlighter
+  | Text
+
+type color =
+  | Black
+  | Red
+  | Blue
+  | Yellow
+
+type sketchState = {
+  isActive: bool,
+  tool: tool,
+  color: color,
+  strokeWidth: float,
+}
+
+let initialState: sketchState = {
+  isActive: false,
+  tool: Pen,
+  color: Black,
+  strokeWidth: 2.0,
+}
+
+let colorToHex = (color: color) =>
+  switch color {
+  | Black => "#000000"
+  | Red => "#ef4444"
+  | Blue => "#3b82f6"
+  | Yellow => "#eab308"
+  }
+
+let toolToOpacity = (tool: tool) =>
+  switch tool {
+  | Highlighter => 0.3
+  | Pen | Text => 1.0
+  }
+
+let isHighlighter = (tool: tool) =>
+  switch tool {
+  | Highlighter => true
+  | Pen | Text => false
+  }
+
+let toolToWidth = (tool: tool, base: float) =>
+  switch tool {
+  | Highlighter => base *. 8.0
+  | Pen => base
+  | Text => base
+  }
+
+let use = () => {
+  let (state, setState) = React.useState(() => initialState)
+
+  let activate = () => setState(prev => {...prev, isActive: true})
+
+  let deactivate = () => setState(prev => {...prev, isActive: false})
+
+  let toggle = () => setState(prev => {...prev, isActive: !prev.isActive})
+
+  let setTool = (tool: tool) => setState(prev => {...prev, tool})
+
+  let setColor = (color: color) => setState(prev => {...prev, color})
+
+  (state, activate, deactivate, toggle, setTool, setColor)
+}