From 632048601bea57b00410aab1c6611436e2b1e22f Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Thu, 19 Aug 2021 04:50:23 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Start=20working=20on=20inputs=20?=
 =?UTF-8?q?(`input-field`)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .storybook/preview.js                   |  2 +-
 src/components/inputs/Field.stories.jsx | 29 +++++++++++++++++++
 src/components/inputs/Field.tsx         | 37 +++++++++++++++++++++++++
 3 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 src/components/inputs/Field.stories.jsx
 create mode 100644 src/components/inputs/Field.tsx

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 5409af6..59142b7 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -3,6 +3,6 @@ import { Bluelib } from "../src/components/Bluelib"
 
 export const parameters = {
     actions: {
-      argTypesRegex: "^on[A-Z].*"
+        argTypesRegex: "^on[A-Z][a-z]*$"
     },
 }
\ No newline at end of file
diff --git a/src/components/inputs/Field.stories.jsx b/src/components/inputs/Field.stories.jsx
new file mode 100644
index 0000000..693a1e0
--- /dev/null
+++ b/src/components/inputs/Field.stories.jsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Field } from "./Field"
+
+
+export default {
+    component: Field,
+    title: "Inputs/Field",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+        disabled: {
+            control: {type: "boolean"},
+        },
+    },
+}
+
+
+export const Default = props => (
+    <Field {...props}/>
+)
+Default.args = {
+    placeholder: "Enter text here",
+    disabled: false,
+    required: false,
+}
diff --git a/src/components/inputs/Field.tsx b/src/components/inputs/Field.tsx
new file mode 100644
index 0000000..cf44796
--- /dev/null
+++ b/src/components/inputs/Field.tsx
@@ -0,0 +1,37 @@
+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 FieldProps {
+    placeholder: string,
+    required?: boolean,
+    disabled?: boolean,
+
+    onChange?: (event: React.FormEvent<HTMLInputElement>) => boolean,
+    onInput?: (event: React.FormEvent<HTMLInputElement>) => boolean,
+    onInvalid?: (event: React.FormEvent<HTMLInputElement>) => boolean,
+    onReset?: (event: React.FormEvent<HTMLInputElement>) => boolean,
+    onSubmit?: (event: React.FormEvent<HTMLInputElement>) => boolean,
+
+    [props: string]: any,
+}
+
+
+export function Field({onChange, onInput, onInvalid, ...props}: FieldProps): JSX.Element {
+
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "input", "input-field")
+
+    // Propagate change events only if the element is enabled
+    if(!props.disabled) {
+        props.onChange = onChange
+        props.onInput = onInput
+        props.onInvalid = onInvalid
+    }
+
+    return (
+        <BaseElement kind={"input"} {...props}/>
+    )
+}