form style refactor + charts

packages/web/src/utility/FormProvider.js

@@ -1,18 +1,20 @@
 import React from 'react';
+import { FormFieldTemplateDefault } from './formStyle';
 import keycodes from './keycodes';
 
 const FormContext = React.createContext(null);
+const FormFieldTemplateContext = React.createContext(null);
 
-export function FormProvider({ children, initialValues = {} }) {
+export function FormProvider({ children, initialValues = {}, template = FormFieldTemplateDefault }) {
   const [values, setValues] = React.useState(initialValues);
   return (
-    <FormProviderCore values={values} setValues={setValues}>
+    <FormProviderCore values={values} setValues={setValues} template={template}>
       {children}
     </FormProviderCore>
   );
 }
 
-export function FormProviderCore({ children, values, setValues }) {
+export function FormProviderCore({ children, values, setValues, template = FormFieldTemplateDefault }) {
   const [submitAction, setSubmitAction] = React.useState(null);
   const handleEnter = React.useCallback(
     (e) => {
@@ -43,9 +45,21 @@ export function FormProviderCore({ children, values, setValues }) {
     setFieldValue,
     setSubmitAction,
   };
-  return <FormContext.Provider value={provider}>{children}</FormContext.Provider>;
+  return (
+    <FormContext.Provider value={provider}>
+      <FormFieldTemplateProvider template={template}>{children}</FormFieldTemplateProvider>
+    </FormContext.Provider>
+  );
 }
 
 export function useForm() {
   return React.useContext(FormContext);
 }
+
+export function FormFieldTemplateProvider({ children, template = FormFieldTemplateDefault }) {
+  return <FormFieldTemplateContext.Provider value={template}>{children}</FormFieldTemplateContext.Provider>;
+}
+
+export function useFormFieldTemplate() {
+  return React.useContext(FormFieldTemplateContext);
+}

packages/web/src/utility/formStyle.js

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+import React from 'react';
+import useTheme from '../theme/useTheme';
+
+export const FormRow = styled.div`
+  display: flex;
+  margin: 10px;
+`;
+
+export const FormLabel = styled.div`
+  width: 10vw;
+  font-weight: bold;
+`;
+
+export const FormValue = styled.div``;
+
+export function FormFieldTemplateDefault({ label, children, type }) {
+  return (
+    <FormRow>
+      <FormLabel>{label}</FormLabel>
+      <FormValue>{children}</FormValue>
+    </FormRow>
+  );
+}
+
+export const FormRowTiny = styled.div`
+  margin: 5px;
+`;
+
+export const FormLabelTiny = styled.div`
+  color: ${(props) => props.theme.manager_font3};
+`;
+
+export const FormValueTiny = styled.div`
+  margin-left: 15px;
+  margin-top: 3px;
+`;
+
+export function FormFieldTemplateTiny({ label, children, type }) {
+  const theme = useTheme();
+  if (type == 'checkbox') {
+    return (
+      <FormRowTiny>
+        {children} {label}
+      </FormRowTiny>
+    );
+  }
+  return (
+    <FormRowTiny>
+      <FormLabelTiny theme={theme}>{label}</FormLabelTiny>
+      <FormValueTiny>{children}</FormValueTiny>
+    </FormRowTiny>
+  );
+}

packages/web/src/utility/forms.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import Select from 'react-select';
 import Creatable from 'react-select/creatable';
 import { TextField, SelectField, CheckboxField } from './inputs';
@@ -14,25 +13,8 @@ import {
 import getAsArray from './getAsArray';
 import axios from './axios';
 import useTheme from '../theme/useTheme';
-import { useForm } from './FormProvider';
+import { useForm, useFormFieldTemplate } from './FormProvider';
 
-export const FormRow = styled.div`
-  display: flex;
-  margin: 10px;
-`;
-
-export const FormButtonRow = styled.div`
-  display: flex;
-  // justify-content: flex-end;
-  margin: 10px;
-`;
-
-export const FormLabel = styled.div`
-  width: 10vw;
-  font-weight: bold;
-`;
-
-export const FormValue = styled.div``;
 
 export function FormTextFieldRaw({ name, focused = false, ...other }) {
   const { values, setFieldValue } = useForm();
@@ -48,13 +30,11 @@ export function FormTextFieldRaw({ name, focused = false, ...other }) {
 }
 
 export function FormTextField({ name, label, focused = false, ...other }) {
+  const FieldTemplate = useFormFieldTemplate();
   return (
-    <FormRow>
-      <FormLabel>{label}</FormLabel>
-      <FormValue>
-        <FormTextFieldRaw name={name} focused={focused} {...other} />
-      </FormValue>
-    </FormRow>
+    <FieldTemplate label={label} type="text">
+      <FormTextFieldRaw name={name} focused={focused} {...other} />
+    </FieldTemplate>
   );
 }
 
@@ -70,13 +50,11 @@ export function FormCheckboxFieldRaw({ name = undefined, defaultValue = undefine
 }
 
 export function FormCheckboxField({ label, ...other }) {
+  const FieldTemplate = useFormFieldTemplate();
   return (
-    <FormRow>
-      <FormLabel>{label}</FormLabel>
-      <FormValue>
-        <FormCheckboxFieldRaw {...other} />
-      </FormValue>
-    </FormRow>
+    <FieldTemplate label={label} type="checkbox">
+      <FormCheckboxFieldRaw {...other} />
+    </FieldTemplate>
   );
 }
 
@@ -93,15 +71,13 @@ export function FormSelectFieldRaw({ children, name, ...other }) {
 }
 
 export function FormSelectField({ label, name, children = null, ...other }) {
+  const FieldTemplate = useFormFieldTemplate();
   return (
-    <FormRow>
-      <FormLabel>{label}</FormLabel>
-      <FormValue>
-        <FormSelectFieldRaw name={name} {...other}>
-          {children}
-        </FormSelectFieldRaw>
-      </FormValue>
-    </FormRow>
+    <FieldTemplate label={label} type="select">
+      <FormSelectFieldRaw name={name} {...other}>
+        {children}
+      </FormSelectFieldRaw>
+    </FieldTemplate>
   );
 }