✨ Add Checkbox with a WIP onChange API

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

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

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