From 930be42bed98505cd0ca05051f9d0bf77b552173 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Fri, 20 Aug 2021 05:02:54 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20Checkbox=20with=20a=20WIP=20o?=
 =?UTF-8?q?nChange=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/inputs/Checkbox.stories.jsx | 50 ++++++++++++++++++++++
 src/components/inputs/Checkbox.tsx         | 42 ++++++++++++++++++
 src/components/inputs/Radio.tsx            |  6 +--
 3 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 src/components/inputs/Checkbox.stories.jsx
 create mode 100644 src/components/inputs/Checkbox.tsx

diff --git a/src/components/inputs/Checkbox.stories.jsx b/src/components/inputs/Checkbox.stories.jsx
new file mode 100644
index 0000000..3b843f3
--- /dev/null
+++ b/src/components/inputs/Checkbox.stories.jsx
@@ -0,0 +1,50 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Checkbox } from "./Checkbox"
+import { Box } from "../panels/Box"
+import { BaseElement } from "../BaseElement"
+
+
+export default {
+    component: Checkbox,
+    title: "Inputs/Checkbox",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+    },
+}
+
+
+export const Default = props => (
+    <Checkbox value={"zero"} {...props}/>
+)
+
+
+
+export const ThreeCheckboxes = props => (
+    <BaseElement kind={"div"}>
+        <BaseElement kind={"div"} bluelibClassNames={"color-blue"}>
+            <Checkbox value={"articuno"} {...props}/> Articuno
+        </BaseElement>
+        <BaseElement kind={"div"} bluelibClassNames={"color-yellow"}>
+            <Checkbox value={"zapdos"} {...props}/> Zapdos
+        </BaseElement>
+        <BaseElement kind={"div"} bluelibClassNames={"color-red"}>
+            <Checkbox value={"moltres"} {...props}/> Moltres
+        </BaseElement>
+    </BaseElement>
+)
+ThreeCheckboxes.args = {
+    name: "example"
+}
+ThreeCheckboxes.argTypes = {
+    customColor: {
+        control: {type: "color"},
+    },
+    value: {
+        control: {type: "null"},
+    },
+}
\ No newline at end of file
diff --git a/src/components/inputs/Checkbox.tsx b/src/components/inputs/Checkbox.tsx
new file mode 100644
index 0000000..1ca93a5
--- /dev/null
+++ b/src/components/inputs/Checkbox.tsx
@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+
+
+interface CheckboxProps {
+    disabled?: boolean,
+
+    onChange?: (checked: boolean, value: string) => boolean,
+
+    name: string,
+    value: string,
+
+    [props: string]: any,
+}
+
+
+export function Checkbox({onChange, ...props}: CheckboxProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "input", "input-checkbox")
+
+    const onChangeWrapper = React.useCallback(
+
+        (event: React.ChangeEvent<HTMLInputElement>): boolean => {
+            const checked = event.target.checked
+            const value = event.target.value
+
+            if(onChange) {
+                return onChange(checked, value)
+            }
+
+            return false
+        },
+
+        [onChange]
+    )
+
+    return (
+        <BaseElement kind={"input"} type={"checkbox"} onChange={onChangeWrapper} {...props}/>
+    )
+}
diff --git a/src/components/inputs/Radio.tsx b/src/components/inputs/Radio.tsx
index d31cfca..9f60dd0 100644
--- a/src/components/inputs/Radio.tsx
+++ b/src/components/inputs/Radio.tsx
@@ -8,7 +8,7 @@ import mergeClassNames from "classnames"
 interface RadioProps {
     disabled?: boolean,
 
-    onChange?: (checked: string) => boolean,
+    onChange?: (value: string) => boolean,
 
     name: string,
     value: string,
@@ -23,10 +23,10 @@ export function Radio({onChange, ...props}: RadioProps): JSX.Element {
     const onChangeWrapper = React.useCallback(
 
         (event: React.ChangeEvent<HTMLInputElement>): boolean => {
-            const checked = event.target.value
+            const value = event.target.value
 
             if(onChange) {
-                return onChange(checked)
+                return onChange(value)
             }
 
             return false