feat(apps/examples): add material ui demo

apps/demo/src/app/app.spec.tsx

@@ -1,5 +1,6 @@
 import { render, act, RenderResult } from '@testing-library/react';
 import { Provider } from 'react-redux';
+import { BrowserRouter as Router } from 'react-router-dom';
 
 import configureStore from './store/configureStore';
 
@@ -8,9 +9,11 @@ import App from './app';
 const store = configureStore();
 
 const renderWithStore = () => (
-  <Provider store={store}>
-    <App />
-  </Provider>
+  <Router>
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </Router>
 );
 
 describe('App', () => {
@@ -27,9 +30,9 @@ describe('App', () => {
     expect(baseElement).toBeTruthy();
   });
 
-  it('should have a greeting as the title', () => {
+  it('should display the organisation and repo name', () => {
     const { getByText } = wrapper;
 
-    expect(getByText('Welcome to demo!')).toBeTruthy();
+    expect(getByText('@BedrockStreaming/forms')).toBeTruthy();
   });
 });

apps/demo/src/app/app.tsx

@@ -1,23 +1,26 @@
-import styled from 'styled-components';
-import Form from './examples/with-redux/form.component';
-import { ReactComponent as Logo } from './logo.svg';
+import { Switch, Route } from 'react-router-dom';
 
-const Container = styled.div`
-  background: lightgrey;
-  height: 100vh;
-`;
+import { Layout } from './components/app/layout.component';
+import MUIForm from './examples/with-material-ui/form.component';
+import StyledForm from './examples/with-styled-components/form.component';
 
 export function App() {
   return (
-    <Container>
-      <header>
-        <Logo width="75" height="75" />
-        <h1>Welcome to demo!</h1>
-      </header>
+    <Layout>
       <main>
-        <Form />
+        <Switch>
+          <Route exact path="/">
+            <MUIForm />
+          </Route>
+          <Route exact path="/examples/styled-components">
+            <StyledForm />
+          </Route>
+          <Route exact path="/examples/material-ui">
+            <MUIForm />
+          </Route>
+        </Switch>
       </main>
-    </Container>
+    </Layout>
   );
 }
 

apps/demo/src/app/components/app/layout.component.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+import Container from '@mui/material/Container';
+import { NavBar } from './navbar.component';
+
+const mdTheme = createTheme();
+
+export function Layout({ children }: { children: any }) {
+  return (
+    <ThemeProvider theme={mdTheme}>
+      <NavBar />
+      <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+        {children}
+      </Container>
+    </ThemeProvider>
+  );
+}

apps/demo/src/app/components/app/navbar.component.tsx

@@ -0,0 +1,40 @@
+import { Link } from 'react-router-dom';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import Button from '@mui/material/Button';
+
+const pages = ['styled-components', 'material-ui'];
+
+export const NavBar = () => {
+  return (
+    <AppBar position="static">
+      <Container maxWidth="xl">
+        <Toolbar disableGutters>
+          <Typography
+            variant="h6"
+            noWrap
+            component="div"
+            sx={{ flexGrow: 1, display: 'flex' }}
+          >
+            @BedrockStreaming/forms
+          </Typography>
+          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
+            {pages.map((page) => (
+              <Button
+                component={Link}
+                key={page}
+                to={`/examples/${page}`}
+                sx={{ my: 2, color: 'white', display: 'block' }}
+              >
+                {page}
+              </Button>
+            ))}
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+};

apps/demo/src/app/examples/with-js/dictionary.js

@@ -3,10 +3,11 @@ import styled from 'styled-components';
 import { checkRules } from '@bedrockstreaming/form-validation-rule-list';
 import { getValidationRulesHints } from '@bedrockstreaming/form-builder';
 
-import { ValidatedPasswordTextField } from './components/textfield/validatedPasswordTextField.component';
-import { ValidatedTextField } from './components/textfield/validatedTextField.component';
-
-import { BirthdateInput } from './components/birthdate/birthdateInput.component';
+import {
+  ValidatedTextField,
+  ValidatedPasswordTextField
+} from '@forms/examples/styled-inputs';
+import { BirthdateInput } from '@forms/examples/birthdate';
 
 const validationColors = {};
 
@@ -70,6 +71,7 @@ export const dictionary = {
     return (
       <TextFieldMarginWrapper>
         <BirthdateInput
+          component={ValidatedTextField}
           label={label}
           hasError={hasError}
           valid={isValid}

apps/demo/src/app/examples/with-js/form.component.js

@@ -12,7 +12,7 @@ import {
 import { config } from '../../config';
 import { dictionary } from './dictionary';
 import { useSubmit } from './hooks/useSubmit.hook';
-import { extraValidation } from './extraValidation';
+import { extraValidation } from '../../extraValidation';
 
 const formId = 'register';
 const {

apps/demo/src/app/examples/with-material-ui/dictionary/date.component.tsx

@@ -0,0 +1,80 @@
+import { Ref, useMemo } from 'react';
+import { FieldErrors, Path, FieldValues } from 'react-hook-form';
+import {
+  getValidationRulesHints,
+  Validations
+} from '@bedrockstreaming/form-builder';
+import {
+  checkRules,
+  withValidationRuleList
+} from '@bedrockstreaming/form-validation-rule-list';
+import { TextField } from '@mui/material';
+import _ from 'lodash';
+
+import { BirthdateInput } from '@forms/examples/birthdate';
+
+import {
+  colorByRulesClassnames,
+  weightByRulesClassnames
+} from '../../../constants/validationColors.constants';
+
+const ValidatedTextField = withValidationRuleList(TextField);
+
+export const DateInput = ({
+  'data-testid': dataTestId,
+  errors,
+  validation,
+  name,
+  optionalText,
+  label,
+  id,
+  value,
+  setFieldValue,
+  onChange,
+  onBlur,
+  propRef
+}: {
+  'data-testid': string;
+  errors: FieldErrors;
+  id: string;
+  label: string;
+  name: string;
+  onBlur: (event: any) => void;
+  onChange: (event: any) => void;
+  optionalText?: string;
+  propRef: Ref<any>;
+  type?: string;
+  value?: string | number;
+  validation: Validations;
+  setFieldValue: (id: Path<FieldValues>, value: any) => void;
+}) => {
+  const inputProps = useMemo(() => ({ ref: propRef }), [propRef]);
+  const rules = getValidationRulesHints({
+    errors,
+    validation
+  });
+
+  const hasError = !!checkRules(value, rules).length;
+
+  return (
+    <div>
+      <BirthdateInput
+        component={ValidatedTextField}
+        setFieldValue={setFieldValue}
+        inputProps={inputProps}
+        id={id}
+        label={label}
+        name={name}
+        error={hasError}
+        helperText={optionalText}
+        onBlur={onBlur}
+        onChange={onChange}
+        rules={rules}
+        value={value}
+        data-testid={dataTestId}
+        colorByRulesClassnames={colorByRulesClassnames}
+        weightByRulesClassnames={weightByRulesClassnames}
+      />
+    </div>
+  );
+};

apps/demo/src/app/examples/with-material-ui/dictionary/password.component.tsx

@@ -0,0 +1,76 @@
+import { Ref, useMemo } from 'react';
+import { FieldErrors } from 'react-hook-form';
+import {
+  getValidationRulesHints,
+  Validations
+} from '@bedrockstreaming/form-builder';
+import {
+  checkRules,
+  withValidationRuleList
+} from '@bedrockstreaming/form-validation-rule-list';
+
+import { TextField } from '@mui/material';
+import _ from 'lodash';
+
+import {
+  colorByRulesClassnames,
+  weightByRulesClassnames
+} from '../../../constants/validationColors.constants';
+
+const ValidatedTextField = withValidationRuleList(TextField);
+
+export const Password = ({
+  'data-testid': dataTestId,
+  errors,
+  id,
+  label,
+  name,
+  onBlur,
+  onChange,
+  optionalText,
+  propRef,
+  type,
+  value,
+  validation
+}: {
+  'data-testid': string;
+  errors: FieldErrors;
+  id: string;
+  label: string;
+  name: string;
+  onBlur: (event: any) => void;
+  onChange: (event: any) => void;
+  optionalText?: string;
+  propRef: Ref<any>;
+  type?: string;
+  value?: string | number;
+  validation: Validations;
+}) => {
+  const inputProps = useMemo(() => ({ ref: propRef }), [propRef]);
+
+  const rules = getValidationRulesHints({
+    errors,
+    validation
+  });
+
+  const hasError = !!checkRules(value, rules).length;
+
+  return (
+    <ValidatedTextField
+      type="password"
+      inputProps={inputProps}
+      id={id}
+      label={label}
+      name={name}
+      error={hasError}
+      helperText={optionalText}
+      onBlur={onBlur}
+      onChange={onChange}
+      rules={rules}
+      value={value}
+      data-testid={dataTestId}
+      colorByRulesClassnames={colorByRulesClassnames}
+      weightByRulesClassnames={weightByRulesClassnames}
+    />
+  );
+};

apps/demo/src/app/examples/with-material-ui/dictionary/submit.component.tsx

@@ -0,0 +1,9 @@
+import { Button } from '@mui/material';
+
+export const Submit = ({ label, ...props }: { label: string }) => {
+  return (
+    <Button variant="contained" sx={{ margin: 1 }} type="submit" {...props}>
+      {label}
+    </Button>
+  );
+};