ui-components: Input

Base implementation of Input component
- Added Storybook as a playground to validate styles.
- Supports only `text` type yet.
- Added tests to validate default state and user interaction with component

packages/storybook-ui-components/stories/Input.stories.js

@@ -0,0 +1,22 @@
+import React, { useState } from "react";
+import { withKnobs, text, boolean } from "@storybook/addon-knobs";
+import { Input } from "@cockroachlabs/ui-components";
+
+export default {
+  title: "Input",
+  components: Input,
+  decorators: [withKnobs],
+};
+
+export const Demo = () => {
+  const [value, setValue] = useState();
+  return (
+    <Input
+      initialValue={text("Initial value", "Initial text")}
+      value={text("value", value)}
+      disabled={boolean("disabled", false)}
+      onChange={setValue}
+      invalid={boolean("invalid", false)}
+    />
+  );
+};

packages/ui-components/src/Input/Input.module.scss

@@ -0,0 +1,41 @@
+@import "../styles/tokens.scss";
+
+.input {
+  height: 40px;
+  border-radius: 3px;
+  font-family: Source Sans Pro, sans-serif; // TODO (koorosh): replace with token value
+  font-size: 14px; // TODO (koorosh): replace with token value (default font size)
+  line-height: 22px;
+  border: solid 1px $crl-neutral-4;
+  background-color: $crl-base-white;
+  padding: 0 crl-gutters(1.5);
+
+  &:focus {
+    border: solid 1px $crl-base-blue;
+  }
+
+  &:hover {
+    border: solid 1px $crl-neutral-5;
+  }
+}
+
+.invalid {
+  border: solid 1px $crl-base-red;
+  background-color: $crl-red-1;
+  color: $crl-base-red;
+
+  &:focus, &:hover {
+    border: solid 1px $crl-base-red;
+  }
+}
+
+.disabled {
+  background: $crl-neutral-1;
+  color: $crl-base-text--light;
+  border: solid 1px $crl-neutral-3;
+  cursor: default;
+
+  &:focus, &:hover {
+    border: solid 1px $crl-neutral-3;
+  }
+}

packages/ui-components/src/Input/Input.tsx

@@ -0,0 +1,85 @@
+import React, {
+  ChangeEvent,
+  CSSProperties,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import classNames from "classnames/bind";
+import styles from "./input.module.scss";
+
+export interface InputProps {
+  type?: string;
+  className?: string;
+  style?: CSSProperties;
+  initialValue?: string;
+  value?: string;
+  autoComplete?: string;
+  placeholder?: string;
+  onChange?: (value: string) => void;
+  name?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+}
+
+const cx = classNames.bind(styles);
+
+const Input: React.FC<InputProps> = ({
+  name,
+  type = "text",
+  autoComplete = "off",
+  className,
+  style,
+  value: outerValue,
+  initialValue = "",
+  placeholder,
+  onChange,
+  disabled = false,
+  invalid = false,
+}) => {
+  const [value, setValue] = useState(outerValue || initialValue);
+
+  useEffect(() => {
+    setValue(outerValue);
+  }, [outerValue]);
+
+  const onChangeHandler = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setValue(event.target.value);
+      if (onChange && !disabled) {
+        onChange(event.target.value);
+      }
+    },
+    [onChange, disabled],
+  );
+
+  const classnames = useMemo(
+    () =>
+      cx(
+        "input",
+        {
+          disabled,
+          invalid,
+        },
+        className,
+      ),
+    [className, invalid, disabled],
+  );
+
+  return (
+    <input
+      name={name}
+      type={type}
+      value={value}
+      placeholder={placeholder}
+      className={classnames}
+      style={style}
+      onChange={onChangeHandler}
+      autoComplete={autoComplete}
+      disabled={disabled}
+    />
+  );
+};
+
+export default Input;

packages/ui-components/src/Input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from "./Input";

packages/ui-components/src/Input/input.test.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { shallow } from "enzyme";
+import Input from "./Input";
+
+describe("Input", () => {
+  describe("Default props", () => {
+    it("provides correct default values to inner <input /> element", () => {
+      const wrapper = shallow<HTMLInputElement>(<Input />);
+      const props = wrapper.props();
+      expect(props.disabled).toBeFalsy();
+      expect(props.value).toEqual("");
+      expect(props.className).toEqual("input");
+      expect(props.name).toBeUndefined();
+      expect(props.style).toBeUndefined();
+      expect(props.type).toEqual("text");
+    });
+  });
+
+  describe("Style classes", () => {
+    it("sets .disabled class when Input is disabled", () => {
+      const wrapper = shallow(<Input disabled />);
+      expect(wrapper.hasClass("disabled")).toBeTruthy();
+    });
+
+    it("sets .invalid class when Input is disabled", () => {
+      const wrapper = shallow(<Input invalid />);
+      expect(wrapper.hasClass("invalid")).toBeTruthy();
+    });
+  });
+
+  describe("onChange handler", () => {
+    it("calls callback function with typed text", () => {
+      const onChangeSpyFn = jasmine.createSpy();
+      const text = "some text";
+      const wrapper = shallow(<Input onChange={onChangeSpyFn} />);
+      wrapper.simulate("change", { target: { value: text } });
+      expect(onChangeSpyFn).toHaveBeenCalledWith(text);
+    });
+
+    it("does not call callback when Input is disabled", () => {
+      const onChangeSpyFn = jasmine.createSpy();
+      const text = "some text";
+      const wrapper = shallow(
+        <Input onChange={onChangeSpyFn} disabled={true} />,
+      );
+      wrapper.simulate("change", { target: { value: text } });
+      expect(onChangeSpyFn).not.toHaveBeenCalled();
+    });
+  });
+});

packages/ui-components/src/index.js

@@ -1 +1,2 @@
 export { Badge } from "./Badge";
+export { Input } from "./Input";