JakeLaCombe

interface Edge {
    node: string;
    weight: number;
}

class Graph {
    public adjList: Map<string, Edge[]>

    constructor()

JakeLaCombe

interface NodeMapping {
    [index: number]: {
        [index: number]: string
    }
}

class Graph {
    private graph: {[index: string]: string[]};

    constructor(labels: string[], map: NodeMapping, edges: [number, number][][])

JakeLaCombe

interface State {
  zoomState: 'zoomstart' | 'zoomend'
}

const VisualizationContext: State = {
  zoomState: 'zoomend'
}

const Visualization = (zoomState) => {

JakeLaCombe

/* eslint-disable class-methods-use-this */

import React from 'react';
import { Form, Field, FormSpy } from 'react-final-form';
import InputField from 'terra-form-input/lib/InputField';
import Checkbox from 'terra-form-checkbox';
import CheckboxField from 'terra-form-checkbox/lib/CheckboxField';
import TerraField from 'terra-form-field';
import Radio from 'terra-form-radio';
import RadioField from 'terra-form-radio/lib/RadioField';

JakeLaCombe

Input Field Props Table

(For this tech design, the same principles would apply for a TextareaField and SelectField component)

Summary

Terra input field essentially wraps a terra-form-input inside of a terra-form-field component. It would contain first class parameters that map up to all the props for a field, and pass them into a field component. In addition, InputField would contain a prop inputAttrs that passes those props to the input element.

React Props

• error - Error message for when the input is invalid.

JakeLaCombe

# Example Adapter

```jsx
const TextFieldAdapter = ({ input, meta, placeholder, required, ...rest }) => (
  <Field
    {...rest}
    error={meta.submitError}
    isInvalid={meta.submitFailed}
    required={required}
  >

JakeLaCombe

Validators

import validator from 'validator';
const required = (value) => {
  if (!value.toString().trim().length) {
    // We can return string or jsx as the 'error' prop for the validated Component
    return 'require';
  }
};

JakeLaCombe

Validators

const validator = {
  username: {
    rules: [
      {
        test: /^[a-z0-9_]+$/,
        message: 'Username must contain only alphabets-numeric lowercase characters',
      },

JakeLaCombe

Example Validations

// rules.js
import * as ErrorMessages from './errorMessages.js';

export const required = (text) => {
  if (text) {
    return null;
  } else {
    return ErrorMessages.isRequired;

JakeLaCombe

{
      "--terra-list-divider-border":"1px solid #dedfe0",
      "--terra-list-chevron-color":"#bcbfc0",
      "--terra-list-item-selected-background-color":"#ebf6fd",
      "--terra-list-item-selected-divider-color":"#0092e0",
      "--terra-list-item-hover-background-color":"#ebf6fd",
      "--terra-list-item-selected-hover-background-color":"#d4ecfb",
      "--terra-alert-icon-font-size":"1.286em",
      "--terra-alert-custom-text-color":"#1c1f21",
      "--terra-alert-alert-background-color":"#fed1d1",