@aehrc/smart-forms-renderer 0.4.0 → 0.5.0

package/src/theme/Theme.tsx

@@ -0,0 +1,107 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { ThemeOptions } from '@mui/material';
+import { CssBaseline } from '@mui/material';
+import {
+  alpha,
+  createTheme,
+  StyledEngineProvider,
+  ThemeProvider as MUIThemeProvider
+} from '@mui/material/styles';
+import palette from './palette';
+import typography from './typography';
+import GlobalStyles from './globalStyles';
+import componentsOverride from './overrides/Overrides';
+import { grey } from '@mui/material/colors';
+
+// ----------------------------------------------------------------------
+// Module Augmentation
+
+declare module '@mui/material/styles' {
+  // noinspection JSUnusedGlobalSymbols
+  interface Theme {
+    customShadows: {
+      z1: string;
+      z4: string;
+      z8: string;
+      z12: string;
+      z16: string;
+      z20: string;
+      z24: string;
+      card: string;
+      dialog: string;
+      dropdown: string;
+    };
+  }
+
+  // noinspection JSUnusedGlobalSymbols
+  interface ThemeOptions {
+    customShadows: {
+      z1: string;
+      z4: string;
+      z8: string;
+      z12: string;
+      z16: string;
+      z20: string;
+      z24: string;
+      card: string;
+      dialog: string;
+      dropdown: string;
+    };
+  }
+}
+// ----------------------------------------------------------------------
+
+const transparent = alpha(grey[500], 0.16);
+
+export const themeOptions: ThemeOptions = {
+  palette,
+  shape: { borderRadius: 6 },
+  typography,
+  customShadows: {
+    z1: `0 1px 2px 0 ${transparent}`,
+    z4: `0 4px 8px 0 ${transparent}`,
+    z8: `0 8px 16px 0 ${transparent}`,
+    z12: `0 12px 24px -4px ${transparent}`,
+    z16: `0 16px 32px -4px ${transparent}`,
+    z20: `0 20px 40px -4px ${transparent}`,
+    z24: `0 24px 48px 0 ${transparent}`,
+    //
+    card: `0 0 2px 0 ${alpha(grey[500], 0.2)}, 0 12px 24px -4px ${alpha(grey[500], 0.12)}`,
+    dialog: `-40px 40px 80px -8px ${alpha(grey[500], 0.24)}`,
+    dropdown: `0 0 2px 0 ${alpha(grey[500], 0.24)}, -20px 20px 40px -4px ${alpha(grey[500], 0.24)}`
+  }
+};
+
+function ThemeProvider({ children }: { children: ReactNode }) {
+  const theme = createTheme(themeOptions);
+  theme.components = componentsOverride(theme);
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <MUIThemeProvider theme={theme}>
+        <CssBaseline />
+        <GlobalStyles />
+        {children}
+      </MUIThemeProvider>
+    </StyledEngineProvider>
+  );
+}
+
+export default ThemeProvider;

package/src/theme/globalStyles.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { GlobalStyles as MUIGlobalStyles } from '@mui/material';
+
+export default function GlobalStyles() {
+  return (
+    <MUIGlobalStyles
+      styles={{
+        '*': {
+          boxSizing: 'border-box'
+        },
+        html: {
+          margin: 0,
+          padding: 0,
+          width: '100%',
+          height: '100%',
+          WebkitOverflowScrolling: 'touch'
+        },
+        body: {
+          margin: 0,
+          padding: 0,
+          width: '100%',
+          height: '100%'
+        },
+        '#root': {
+          width: '100%',
+          height: '100%'
+        },
+        input: {
+          '&[type=number]': {
+            MozAppearance: 'textfield',
+            '&::-webkit-outer-spin-button': {
+              margin: 0,
+              WebkitAppearance: 'none'
+            },
+            '&::-webkit-inner-spin-button': {
+              margin: 0,
+              WebkitAppearance: 'none'
+            }
+          }
+        },
+        img: {
+          display: 'block',
+          maxWidth: '100%'
+        },
+        ul: {
+          margin: 0,
+          padding: 0
+        }
+      }}
+    />
+  );
+}

package/src/{components/FormComponents/Item.styles.js → theme/overrides/Accordion.ts}

@@ -14,14 +14,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { FormGroup, RadioGroup, styled, Typography } from '@mui/material';
-export const QFormGroup = styled(FormGroup)(() => ({
-    marginBottom: 4
-}));
-export const QRadioGroup = styled(RadioGroup)(() => ({
-    marginBottom: 4
-}));
-export const QItemTypography = styled(Typography)(() => ({
-    marginTop: 4
-}));
-//# sourceMappingURL=Item.styles.js.map
+
+import type { Theme } from '@mui/material';
+
+export default function Accordion(theme: Theme) {
+  return {
+    MuiAccordion: {
+      styleOverrides: {
+        root: {
+          boxShadow: theme.customShadows.z1,
+          borderRadius: Number(theme.shape.borderRadius) * 2,
+          '&:before': {
+            display: 'none'
+          }
+        }
+      }
+    }
+  };
+}

package/src/{interfaces/answerExpression.interface.js → theme/overrides/Autocomplete.ts}

@@ -14,5 +14,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export {};
-//# sourceMappingURL=answerExpression.interface.js.map
+
+import type { Theme } from '@mui/material';
+
+export default function Autocomplete(theme: Theme) {
+  return {
+    MuiAutocomplete: {
+      styleOverrides: {
+        paper: {
+          boxShadow: theme.customShadows.z20
+        }
+      }
+    }
+  };
+}

package/src/theme/overrides/Backdrop.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { alpha } from '@mui/material/styles';
+import type { Theme } from '@mui/material';
+
+export default function Backdrop(theme: Theme) {
+  return {
+    MuiBackdrop: {
+      styleOverrides: {
+        root: {
+          backgroundColor: alpha(theme.palette.grey[800], 0.8)
+        },
+        invisible: {
+          background: 'transparent'
+        }
+      }
+    }
+  };
+}

package/src/theme/overrides/Button.ts

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { alpha } from '@mui/material/styles';
+import type { Theme } from '@mui/material';
+
+export default function Button(theme: Theme) {
+  return {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          '&:hover': {
+            boxShadow: 'none'
+          }
+        },
+        sizeLarge: {
+          height: 48
+        },
+        containedInherit: {
+          color: theme.palette.grey[800],
+          boxShadow: theme.customShadows.z8,
+          '&:hover': {
+            backgroundColor: theme.palette.grey[400]
+          }
+        },
+        outlinedInherit: {
+          border: `1px solid ${alpha(theme.palette.grey[500], 0.32)}`,
+          '&:hover': {
+            backgroundColor: theme.palette.action.hover
+          }
+        },
+        textInherit: {
+          '&:hover': {
+            backgroundColor: theme.palette.action.hover
+          }
+        }
+      }
+    }
+  };
+}

package/src/theme/overrides/Card.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Theme } from '@mui/material';
+
+export default function Card(theme: Theme) {
+  return {
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          boxShadow: theme.customShadows.card,
+          borderRadius: Number(theme.shape.borderRadius) * 2,
+          position: 'relative',
+          zIndex: 0 // Fix Safari overflow: hidden with border radius
+        }
+      }
+    },
+    MuiCardHeader: {
+      defaultProps: {
+        titleTypographyProps: { variant: 'h6' },
+        subheaderTypographyProps: { variant: 'body2' }
+      },
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(3, 3, 0)
+        }
+      }
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(3)
+        }
+      }
+    }
+  };
+}

package/src/theme/overrides/Input.ts

@@ -0,0 +1,83 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { alpha } from '@mui/material/styles';
+import type { Theme } from '@mui/material';
+
+export default function Input(theme: Theme) {
+  return {
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          '&.Mui-disabled': {
+            '& svg': { color: theme.palette.text.disabled }
+          }
+        },
+        input: {
+          '&::placeholder': {
+            opacity: 1,
+            color: theme.palette.text.disabled
+          }
+        }
+      }
+    },
+    MuiInput: {
+      styleOverrides: {
+        underline: {
+          '&:before': {
+            borderBottomColor: alpha(theme.palette.grey[500], 0.56)
+          }
+        }
+      }
+    },
+    MuiFilledInput: {
+      styleOverrides: {
+        root: {
+          backgroundColor: alpha(theme.palette.grey[500], 0.12),
+          '&:hover': {
+            backgroundColor: alpha(theme.palette.grey[500], 0.16)
+          },
+          '&.Mui-focused': {
+            backgroundColor: theme.palette.action.focus
+          },
+          '&.Mui-disabled': {
+            backgroundColor: theme.palette.action.disabledBackground
+          }
+        },
+        underline: {
+          '&:before': {
+            borderBottomColor: alpha(theme.palette.grey[500], 0.56)
+          }
+        }
+      }
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: alpha(theme.palette.grey[500], 0.32)
+          },
+          '&.Mui-disabled': {
+            '& .MuiOutlinedInput-notchedOutline': {
+              borderColor: theme.palette.action.disabledBackground
+            }
+          }
+        }
+      }
+    }
+  };
+}

package/src/theme/overrides/Overrides.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Card from './Card';
+import Paper from './Paper';
+import Input from './Input';
+import Table from './Table';
+import Button from './Button';
+import Backdrop from './Backdrop';
+import Typography from './Typography';
+import Autocomplete from './Autocomplete';
+import Accordion from './Accordion';
+import SpeedDial from './SpeedDial';
+import type { Theme } from '@mui/material';
+
+function ComponentsOverrides(theme: Theme) {
+  return Object.assign(
+    Accordion(theme),
+    Card(theme),
+    Table(theme),
+    Input(theme),
+    Paper(),
+    Button(theme),
+    Backdrop(theme),
+    Typography(theme),
+    Autocomplete(theme),
+    SpeedDial(theme)
+  );
+}
+
+export default ComponentsOverrides;

package/src/{interfaces/enableWhen.interface.js → theme/overrides/Paper.ts}

@@ -14,5 +14,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export {};
-//# sourceMappingURL=enableWhen.interface.js.map
+
+export default function Paper() {
+  return {
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0
+      },
+      styleOverrides: {
+        root: {
+          backgroundImage: 'none'
+        }
+      }
+    }
+  };
+}

package/src/{hooks/useInitialiseGroupTable.js → theme/overrides/SpeedDial.ts}

@@ -14,23 +14,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { nanoid } from 'nanoid';
-function useInitialiseGroupTable(qrItems) {
-    let initialGroupTableRows = [
-        {
-            nanoId: nanoid(),
-            qrItem: null
+
+import type { Theme } from '@mui/material';
+
+export default function SpeedDial(theme: Theme) {
+  return {
+    MuiSpeedDialAction: {
+      styleOverrides: {
+        staticTooltipLabel: {
+          backgroundColor: theme.palette.grey[600],
+          color: theme.palette.common.white,
+          fontSize: theme.typography.subtitle2.fontSize,
+          fontWeight: theme.typography.subtitle2.fontWeight,
+          boxShadow: theme.customShadows.z8,
+          maxWidth: 200,
+          whiteSpace: 'nowrap'
         }
-    ];
-    if (qrItems.length > 0) {
-        initialGroupTableRows = qrItems.map((qrItem) => {
-            return {
-                nanoId: nanoid(),
-                qrItem
-            };
-        });
+      }
     }
-    return initialGroupTableRows;
+  };
 }
-export default useInitialiseGroupTable;
-//# sourceMappingURL=useInitialiseGroupTable.js.map

package/src/{hooks/useBackToTop.js → theme/overrides/Table.ts}

@@ -14,13 +14,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-function useBackToTop() {
-    const { pathname } = useLocation();
-    useEffect(() => {
-        window.scrollTo(0, 0);
-    }, [pathname]);
+
+import type { Theme } from '@mui/material/styles';
+
+export default function Table(theme: Theme) {
+  return {
+    MuiTableCell: {
+      styleOverrides: {
+        head: {
+          color: theme.palette.text.secondary,
+          backgroundColor: theme.palette.customBackground.neutral
+        }
+      }
+    }
+  };
 }
-export default useBackToTop;
-//# sourceMappingURL=useBackToTop.js.map

package/src/{components/FormComponents/Typography.styles.js → theme/overrides/Typography.ts}

@@ -14,10 +14,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { styled, Typography } from '@mui/material';
-export const QGroupHeadingTypography = styled(Typography, {
-    shouldForwardProp: (prop) => prop !== 'isTabHeading'
-})(({ isTabHeading }) => ({
-    fontSize: isTabHeading ? 16 : 15
-}));
-//# sourceMappingURL=Typography.styles.js.map
+
+import type { Theme } from '@mui/material';
+
+export default function Typography(theme: Theme) {
+  return {
+    MuiTypography: {
+      styleOverrides: {
+        paragraph: {
+          marginBottom: theme.spacing(2)
+        },
+        gutterBottom: {
+          marginBottom: theme.spacing(1)
+        }
+      }
+    }
+  };
+}