✨(react) add a temporary Checkbox

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.

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,
+};

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} />;
+};