Add description to plan category

app/frontend/src/javascript/components/base/rhf-input.tsx

@@ -0,0 +1,71 @@
+import React, { ReactNode } from 'react';
+import { FieldErrors, UseFormRegister, Validate } from 'react-hook-form';
+
+type inputType = string|number|readonly string [];
+type ruleTypes = {
+  required?: boolean | string,
+  pattern?: RegExp | {value: RegExp, message: string},
+  minLenght?: number,
+  maxLenght?: number,
+  min?: number,
+  max?: number,
+  validate?: Validate<any>;
+};
+
+interface RHFInputProps {
+  id: string,
+  register: UseFormRegister<any>,
+  label?: string,
+  tooltip?: string,
+  defaultValue?: inputType,
+  icon?: ReactNode,
+  addOn?: ReactNode,
+  addOnClassName?: string,
+  classes?: string,
+  rules?: ruleTypes,
+  readOnly?: boolean,
+  disabled?: boolean,
+  placeholder?: string,
+  error?: FieldErrors,
+  type?: 'text' | 'date' | 'password' | 'url' | 'time' | 'tel' | 'search' | 'number' | 'month' | 'email' | 'datetime-local' | 'week',
+  step?: number | 'any'
+}
+
+/**
+ * This component is a template for an input component to use within React Hook Form
+ */
+export const RHFInput: React.FC<RHFInputProps> = ({ id, register, label, tooltip, defaultValue, icon, classes, rules, readOnly, disabled, type, addOn, addOnClassName, placeholder, error, step }) => {
+  // Compose classnames from props
+  const classNames = `
+    rhf-input ${classes || ''}
+    ${error && error[id] ? 'is-incorrect' : ''}
+    ${rules && rules.required ? 'is-required' : ''}
+    ${readOnly ? 'is-readOnly' : ''}
+    ${disabled ? 'is-disabled' : ''}`;
+
+  return (
+    <label className={classNames}>
+      {label && <div className='rhf-input-header'>
+        <p>{label}</p>
+        {/* TODO: Create tooltip component */}
+        {tooltip && <span>{tooltip}</span>}
+      </div>}
+      <div className='rhf-input-field'>
+        {icon && <span className="icon">{icon}</span>}
+        <input id={id}
+          {...register(id, {
+            ...rules,
+            valueAsNumber: type === 'number',
+            value: defaultValue
+          })}
+          type={type}
+          step={step}
+          disabled={disabled}
+          readOnly={readOnly}
+          placeholder={placeholder} />
+        {addOn && <span className={`addon ${addOnClassName || ''}`}>{addOn}</span>}
+      </div>
+      {(error && error[id]) && <div className="rhf-input-error">{error[id].message}</div> }
+    </label>
+  );
+};

app/frontend/src/stylesheets/application.scss

@@ -28,6 +28,7 @@
 @import "modules/base/fab-popover";
 @import "modules/base/fab-text-editor";
 @import "modules/base/labelled-input";
+@import "modules/base/rhf-input";
 @import "modules/form/form-item";
 @import "modules/machines/machine-card";
 @import "modules/machines/machines-filters";

app/frontend/src/stylesheets/modules/base/rhf-input.scss

@@ -0,0 +1,74 @@
+.rhf-input {
+  width: 100%;
+  margin-bottom: 1.6rem;
+
+  &-header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 0.8rem;
+    p { margin: 0; }
+  }
+  &.is-required &-header p::after {
+    content: "*";
+    margin-left: 0.5ch;
+    color: var(--error);
+  }
+
+  &-field {
+    height: 4rem;
+    display: grid;
+    grid-template-areas: "icon input addon";
+    grid-template-columns: min-content 1fr min-content;
+    border: 1px solid var(--gray-soft-dark);
+    border-radius: 4px;
+    overflow: hidden;
+    transition: border-color ease-in-out 0.15s;
+
+    .icon,
+    .addon {
+      width: 4rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: var(--gray-hard-light);
+      background-color: var(--gray-soft);
+    }
+    .icon {
+      grid-area: icon;
+      border-right: 1px solid var(--gray-soft-dark);
+    }
+    input {
+      grid-area: input;
+      border: none;
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .08);
+      padding: 0 0.8rem;
+      color: var(--gray-hard-darkest);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .addon {
+      grid-area: addon;
+      border-left: 1px solid var(--gray-soft-dark);
+    }
+  }
+  &.is-incorrect &-field {
+    border-color: var(--error);
+    .icon {
+      color: var(--error);
+      border-color: var(--error);
+      background-color: var(--error-lightest);
+    }
+  }
+  &.is-disabled &-field input,
+  &.is-readOnly &-field input {
+    background-color: var(--gray-soft-light);
+  }
+
+  &-error {
+    margin-top: 0.4rem;
+    color: var(--error);
+  }
+}