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 => ( + +) +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) => boolean, + onInput?: (event: React.FormEvent) => boolean, + onInvalid?: (event: React.FormEvent) => boolean, + onReset?: (event: React.FormEvent) => boolean, + onSubmit?: (event: React.FormEvent) => 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 ( + + ) +}