feat(core-styles): extend root postcss config

.eslintrc.json

@@ -24,7 +24,9 @@
     {
       "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nrwl/nx/typescript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
+      }
     },
     {
       "files": ["*.js", "*.jsx"],

apps/ui-patterns/jest.config.ts

@@ -1,11 +1,11 @@
 /* eslint-disable */
 export default {
-  displayName: 'tup-ui',
+  displayName: 'ui-patterns',
   preset: '../../jest.preset.js',
   transform: {
     '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
     '^.+\\.[tj]sx?$': 'babel-jest',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/apps/tup-ui',
+  coverageDirectory: '../../coverage/apps/ui-patterns',
 };

apps/ui-patterns/src/app/App.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import UIPatterns from './UIPatterns';
 
 const App: React.FC = () => {
   return (
     <Router>
-      <Switch>
-        <Route path="/" component={UIPatterns} />
-      </Switch>
+      <Routes>
+        <Route path="/" element={<UIPatterns />} />
+      </Routes>
     </Router>
   );
 };

apps/ui-patterns/src/app/UIPatterns.tsx

@@ -9,7 +9,9 @@ import UIPatternsShowMore from './UIPatternsShowMore';
 import UIPatternsPaginator from './UIPatternsPaginator';
 import UIPatternsButton from './UIPatternsButton';
 import UIPatternsSidebar from './UIPatternsSidebar';
-import styles from './UIPatterns.module.scss';
+import UIPatternsWizard from './UIPatternsWizard';
+import UIPatternsComplexWizard from './UIPatternsComplexWizard';
+import styles from './UIPatterns.module.css';
 
 const UIPatterns: React.FC = () => {
   return (
@@ -55,6 +57,14 @@ const UIPatterns: React.FC = () => {
             <h6>Sidebar</h6>
             <UIPatternsSidebar />
           </div>
+          <div className={styles['list-item']}>
+            <h6>Wizard</h6>
+            <UIPatternsWizard />
+          </div>
+          <div className={styles['list-item']}>
+            <h6>Complex Wizard</h6>
+            <UIPatternsComplexWizard />
+          </div>
         </>
       }
       contentLayoutName="oneColumn"

apps/ui-patterns/src/app/UIPatternsComplexWizard/UIPatternsComplexWizard.tsx

@@ -0,0 +1,70 @@
+/**
+ * UIPatternsComplexWizard.tsx
+ *
+ * Example of how to create a wizard that supports extra values passed in (possibly via hook)
+ * that are used in initial value generation and custom step validation. This also includes
+ * examples of how to use Field Arrays in Formik
+ */
+import React, { useCallback, useMemo } from 'react';
+import useWizardValues, { UIWizardProvider } from './useWizardValues';
+import { UIWizardStep, UIWizardSchema, UIWizardExtra } from '.';
+import { Wizard, WizardStep } from '@tacc/core-wrappers';
+import wizardSteps from './steps';
+
+export const UIPatternsComplexWizardRender: React.FC<{
+  wizardSteps: Array<UIWizardStep>;
+}> = ({ wizardSteps }) => {
+  const { values, add, extra } = useWizardValues();
+
+  // The submit button rendered by the Wizard should add values to the
+  // wizard value context
+  const formSubmit = useCallback(
+    (value: Partial<UIWizardSchema>) => {
+      console.log('Adding', value);
+      add(value);
+    },
+    [add]
+  );
+
+  // Map Array of UIWizardSteps into an array of @tacc/core-wrappers/WizardStep
+  const steps: Array<WizardStep<UIWizardSchema>> = useMemo(() => {
+    return wizardSteps.map((jobStep) => {
+      const { generateInitialValues, validateThunk, ...stepProps } = jobStep;
+      return {
+        // Call the step's custom initial value generator to pass in the extra hook values
+        initialValues: generateInitialValues({ values, extra }),
+        // generate a validation function from the UIWizardSteps's validateThunk, given the current extra hook values
+        validate: validateThunk ? validateThunk(extra) : undefined,
+        ...stepProps,
+      };
+    });
+  }, [wizardSteps, extra]);
+
+  return (
+    <Wizard steps={steps} memo={`${extra.memo}`} formSubmit={formSubmit} />
+  );
+};
+
+const UIPatternsComplexWizard: React.FC = () => {
+  const defaultValues: Partial<UIWizardSchema> = {
+    fieldArray: [{ name: 'item one', include: true }],
+    fieldArrayOfArrays: [
+      {
+        name: 'outer item',
+        fieldArray: [{ name: 'inner item one', include: true }],
+      },
+    ],
+  };
+  const extra: UIWizardExtra = {
+    extraOne: 'extra value one',
+    extraTwo: 'extra value two',
+    memo: 'wizard.memo',
+  };
+  return (
+    <UIWizardProvider value={{ defaultValues, extra }}>
+      <UIPatternsComplexWizardRender wizardSteps={wizardSteps} />
+    </UIWizardProvider>
+  );
+};
+
+export default UIPatternsComplexWizard;

apps/ui-patterns/src/app/UIPatternsComplexWizard/index.ts

@@ -0,0 +1,54 @@
+export { default } from './UIPatternsComplexWizard';
+export {
+  default as useWizardValues,
+  UIWizardProvider,
+} from './useWizardValues';
+
+export type UIWizardComplexField = {
+  name: string;
+  include?: boolean;
+};
+
+export type UIWizardArrayOfComplexFields = {
+  name: string;
+  fieldArray: Array<UIWizardComplexField>;
+};
+
+export type UIWizardSchema = {
+  fieldOne: string;
+  fieldTwo: string;
+  fieldThree: string;
+  fieldFour: number;
+  fieldArray: Array<UIWizardComplexField>;
+  fieldArrayOfArrays: Array<UIWizardArrayOfComplexFields>;
+};
+
+export type UIWizardExtra = {
+  extraOne: string;
+  extraTwo: string;
+  memo: string;
+};
+
+export type InitialValueGenerator = (hookValues: {
+  values: Partial<UIWizardSchema>;
+  extra: UIWizardExtra;
+}) => Partial<UIWizardSchema>;
+
+// An adapter type for mapping additional values to @tacc/core-wrappers/Wizard
+export type UIWizardStep = {
+  id: string;
+  name: string;
+  render: React.ReactNode;
+  summary: React.ReactNode;
+  // A generator for initial values. Due to the way Formik renders with respect to step skipping,
+  // a generator is needed to create an initialValues object
+  generateInitialValues: InitialValueGenerator;
+  // A custom validator thunk for a step that requires extra values
+  // (This returns a custom validation function)
+  validateThunk?: (
+    extra: UIWizardExtra
+    /* eslint-disable-next-line */
+  ) => (values: Partial<UIWizardSchema>) => any;
+  /* eslint-disable-next-line */
+  validationSchema: any;
+};

apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/FieldArray.module.css

@@ -0,0 +1,21 @@
+.array {
+  border: 1px solid gray;
+  padding: 0.5em 0.5em 0.5em 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.item {
+  border: 1px dotted lightgray;
+  padding: 0.5em 0.5em 0.5em 0.5em;
+  margin-bottom: 1em;
+}
+
+.array-group {
+  margin-bottom: 0.5em;
+}
+
+.description {
+  font-style: italic;
+  font-size: smaller;
+  margin-bottom: 0.5em;
+}

apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/LastStep.tsx

@@ -0,0 +1,76 @@
+import React, { useCallback, useState, useMemo } from 'react';
+import * as Yup from 'yup';
+import { UIWizardStep, UIWizardSchema, InitialValueGenerator } from '..';
+import { Button } from '@tacc/core-components';
+import { SubmitWrapper } from '@tacc/core-wrappers';
+import { validationSchema as stepOneValidationSchema } from './StepOne';
+import { validationSchema as stepTwoValidationSchema } from './StepTwo';
+import { validationSchema as stepThreeValidationSchema } from './StepThree';
+import { useWizardValues } from '../../UIPatternsWizard';
+
+export const LastStep: React.FC = () => {
+  const [submitResult, setSubmitResult] = useState({
+    data: undefined as undefined | string,
+    isLoading: false,
+    error: null,
+  });
+
+  const onSubmit = useCallback(() => {
+    setSubmitResult({ data: 'Submitted!', isLoading: false, error: null });
+  }, [setSubmitResult]);
+
+  const { data: formData } = useWizardValues();
+
+  const valid = useMemo(() => {
+    try {
+      const concatSchema = [
+        stepOneValidationSchema,
+        stepTwoValidationSchema,
+        stepThreeValidationSchema,
+      ].reduce((previous, current) => previous.concat(current), Yup.object());
+      return concatSchema.validateSync(formData);
+    } catch {
+      return false;
+    }
+  }, [formData]);
+
+  const { error, data, isLoading } = submitResult;
+  return (
+    <div>
+      <h2>Last Step</h2>
+      <div>
+        <SubmitWrapper error={error} isLoading={isLoading} success={data}>
+          <Button
+            type="primary"
+            onClick={onSubmit}
+            size="long"
+            disabled={!valid}
+          >
+            Submit
+          </Button>
+        </SubmitWrapper>
+      </div>
+    </div>
+  );
+};
+
+export const LastStepSummary: React.FC = () => {
+  return null;
+};
+
+const generateInitialValues: InitialValueGenerator =
+  (): Partial<UIWizardSchema> => ({});
+
+// Form steps require a validation schema
+const validationSchema = Yup.object({});
+
+const lastStep: UIWizardStep = {
+  id: 'stepLast',
+  name: 'Last Step',
+  render: <LastStep />,
+  summary: <LastStepSummary />,
+  generateInitialValues,
+  validationSchema,
+};
+
+export default lastStep;

apps/ui-patterns/src/app/UIPatternsComplexWizard/steps/StepOne.tsx

@@ -0,0 +1,61 @@
+import { FormikInput } from '@tacc/core-wrappers';
+import * as Yup from 'yup';
+import {
+  UIWizardStep,
+  useWizardValues,
+  UIWizardSchema,
+  InitialValueGenerator,
+} from '..';
+
+export const StepOne: React.FC = () => {
+  const { extra } = useWizardValues();
+  return (
+    <div>
+      <h2>Step One: Extra value two is {extra.extraTwo}</h2>
+      <FormikInput
+        name="fieldOne"
+        required={true}
+        label="Field One"
+        description="The first form field"
+      />
+      <FormikInput
+        name="fieldTwo"
+        required={false}
+        label="Field Two"
+        description="The second form field"
+      />
+    </div>
+  );
+};
+
+export const StepOneSummary: React.FC = () => {
+  // Retrieve the current values in the wizard to render a summary
+  const { values } = useWizardValues();
+  return (
+    <ul>
+      <li>Field One: {values.fieldOne}</li>
+      <li>Field Two: {values.fieldTwo}</li>
+    </ul>
+  );
+};
+
+const generateInitialValues: InitialValueGenerator = ({ values, extra }) => ({
+  fieldOne: values?.fieldOne ?? extra.extraOne,
+});
+
+// Form steps require a validation schema
+export const validationSchema = Yup.object({
+  fieldOne: Yup.string().required().min(1).max(64),
+  fieldTwo: Yup.string(),
+});
+
+const stepOne: UIWizardStep = {
+  id: 'stepOne',
+  name: 'Step One',
+  render: <StepOne />,
+  summary: <StepOneSummary />,
+  generateInitialValues,
+  validationSchema,
+};
+
+export default stepOne;