From b84af99c36717b2c4c8de54a906b3968c667c586 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Mon, 6 Mar 2023 15:52:01 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20a=20temporary=20Checkb?=
 =?UTF-8?q?ox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We need a temporary Checkbox in order to implement the row
selection feature of the future DataGrid. This do not come
from designer sketches for now.
---
 .../Forms/Checkbox/index.stories.tsx          | 25 +++++++++++++++++++
 .../src/components/Forms/Checkbox/index.tsx   | 17 +++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 packages/react/src/components/Forms/Checkbox/index.stories.tsx
 create mode 100644 packages/react/src/components/Forms/Checkbox/index.tsx

diff --git a/packages/react/src/components/Forms/Checkbox/index.stories.tsx b/packages/react/src/components/Forms/Checkbox/index.stories.tsx
new file mode 100644
index 0000000..014bd1b
--- /dev/null
+++ b/packages/react/src/components/Forms/Checkbox/index.stories.tsx
@@ -0,0 +1,25 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { Checkbox } from "components/Forms/Checkbox/index";
+
+export default {
+  title: "Components/Forms (WIP)/Checkbox",
+  component: Checkbox,
+} as ComponentMeta<typeof Checkbox>;
+
+const Template: ComponentStory<typeof Checkbox> = (args) => (
+  <Checkbox {...args} aria-label="Checkbox" />
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Indeterminate = Template.bind({});
+Indeterminate.args = {
+  indeterminate: true,
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+  checked: true,
+};
diff --git a/packages/react/src/components/Forms/Checkbox/index.tsx b/packages/react/src/components/Forms/Checkbox/index.tsx
new file mode 100644
index 0000000..820c028
--- /dev/null
+++ b/packages/react/src/components/Forms/Checkbox/index.tsx
@@ -0,0 +1,17 @@
+import React, { HTMLProps, useEffect, useRef } from "react";
+
+export const Checkbox = ({
+  indeterminate,
+  className = "",
+  ...rest
+}: { indeterminate?: boolean } & HTMLProps<HTMLInputElement>) => {
+  const ref = useRef<HTMLInputElement>(null!);
+
+  useEffect(() => {
+    if (typeof indeterminate === "boolean") {
+      ref.current.indeterminate = !rest.checked && indeterminate;
+    }
+  }, [ref, indeterminate]);
+
+  return <input type="checkbox" ref={ref} className={className} {...rest} />;
+};