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);
+}