@aehrc/smart-forms-renderer 0.3.0 → 0.5.0

package/src/theme/overrides/Accordion.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 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/theme/overrides/Autocomplete.ts

@@ -0,0 +1,30 @@
+/*
+ * 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 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/theme/overrides/Paper.ts

@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+export default function Paper() {
+  return {
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0
+      },
+      styleOverrides: {
+        root: {
+          backgroundImage: 'none'
+        }
+      }
+    }
+  };
+}

package/src/theme/overrides/SpeedDial.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 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'
+        }
+      }
+    }
+  };
+}

package/src/theme/overrides/Table.ts

@@ -0,0 +1,31 @@
+/*
+ * 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/styles';
+
+export default function Table(theme: Theme) {
+  return {
+    MuiTableCell: {
+      styleOverrides: {
+        head: {
+          color: theme.palette.text.secondary,
+          backgroundColor: theme.palette.customBackground.neutral
+        }
+      }
+    }
+  };
+}

package/src/theme/overrides/Typography.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 Typography(theme: Theme) {
+  return {
+    MuiTypography: {
+      styleOverrides: {
+        paragraph: {
+          marginBottom: theme.spacing(2)
+        },
+        gutterBottom: {
+          marginBottom: theme.spacing(1)
+        }
+      }
+    }
+  };
+}

package/src/theme/palette.ts

@@ -0,0 +1,100 @@
+/*
+ * 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 { PaletteOptions } from '@mui/material/styles';
+import { alpha } from '@mui/material/styles';
+import type { PaletteColor, PaletteColorOptions } from '@mui/material';
+import { grey } from '@mui/material/colors';
+
+declare module '@mui/material/styles' {
+  // noinspection JSUnusedGlobalSymbols
+  interface Palette {
+    accent1: PaletteColor;
+    accent2: PaletteColor;
+    pale: {
+      primary: string;
+      secondary: string;
+    };
+    customBackground: {
+      neutral: string;
+    };
+  }
+
+  // noinspection JSUnusedGlobalSymbols
+  interface PaletteOptions {
+    accent1?: PaletteColorOptions;
+    accent2?: PaletteColorOptions;
+    pale?: {
+      primary: string;
+      secondary: string;
+    };
+    customBackground?: {
+      neutral: string;
+    };
+  }
+}
+
+const SECONDARY = {
+  light: '#7ac298',
+  main: '#229954',
+  dark: '#145c32',
+  contrastText: '#fff'
+};
+
+const palette: PaletteOptions = {
+  common: { black: '#000', white: '#fff' },
+  secondary: SECONDARY,
+  accent1: {
+    main: '#d2e0f6',
+    light: '#e9f0fa',
+    dark: '#bcd1f1'
+  },
+  accent2: {
+    main: '#d5f5e3',
+    light: '#eafaf1',
+    dark: '#abebc6'
+  },
+  pale: {
+    primary: '#D6EBFC',
+    secondary: '#D3EBDD'
+  },
+  divider: alpha(grey['500'], 0.24),
+  text: {
+    primary: grey['800'],
+    secondary: grey['600'],
+    disabled: grey['500']
+  },
+  background: {
+    paper: '#fff',
+    default: grey['50']
+  },
+  customBackground: {
+    neutral: '#F4F6F8'
+  },
+  action: {
+    active: grey['600'],
+    hover: alpha(grey['500'], 0.08),
+    selected: alpha(grey['500'], 0.16),
+    disabled: alpha(grey['500'], 0.8),
+    disabledBackground: alpha(grey['500'], 0.24),
+    focus: alpha(grey['500'], 0.24),
+    hoverOpacity: 0.08,
+    disabledOpacity: 0.48
+  }
+};
+
+export default palette;

package/src/theme/shadows.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 { grey } from '@mui/material/colors';
+
+function shadows() {
+  const transparent1 = alpha(grey['500'], 0.2);
+  const transparent2 = alpha(grey['500'], 0.14);
+  const transparent3 = alpha(grey['500'], 0.12);
+  return [
+    'none',
+    `0px 2px 1px -1px ${transparent1},0px 1px 1px 0px ${transparent2},0px 1px 3px 0px ${transparent3}`,
+    `0px 3px 1px -2px ${transparent1},0px 2px 2px 0px ${transparent2},0px 1px 5px 0px ${transparent3}`,
+    `0px 3px 3px -2px ${transparent1},0px 3px 4px 0px ${transparent2},0px 1px 8px 0px ${transparent3}`,
+    `0px 2px 4px -1px ${transparent1},0px 4px 5px 0px ${transparent2},0px 1px 10px 0px ${transparent3}`,
+    `0px 3px 5px -1px ${transparent1},0px 5px 8px 0px ${transparent2},0px 1px 14px 0px ${transparent3}`,
+    `0px 3px 5px -1px ${transparent1},0px 6px 10px 0px ${transparent2},0px 1px 18px 0px ${transparent3}`,
+    `0px 4px 5px -2px ${transparent1},0px 7px 10px 1px ${transparent2},0px 2px 16px 1px ${transparent3}`,
+    `0px 5px 5px -3px ${transparent1},0px 8px 10px 1px ${transparent2},0px 3px 14px 2px ${transparent3}`,
+    `0px 5px 6px -3px ${transparent1},0px 9px 12px 1px ${transparent2},0px 3px 16px 2px ${transparent3}`,
+    `0px 6px 6px -3px ${transparent1},0px 10px 14px 1px ${transparent2},0px 4px 18px 3px ${transparent3}`,
+    `0px 6px 7px -4px ${transparent1},0px 11px 15px 1px ${transparent2},0px 4px 20px 3px ${transparent3}`,
+    `0px 7px 8px -4px ${transparent1},0px 12px 17px 2px ${transparent2},0px 5px 22px 4px ${transparent3}`,
+    `0px 7px 8px -4px ${transparent1},0px 13px 19px 2px ${transparent2},0px 5px 24px 4px ${transparent3}`,
+    `0px 7px 9px -4px ${transparent1},0px 14px 21px 2px ${transparent2},0px 5px 26px 4px ${transparent3}`,
+    `0px 8px 9px -5px ${transparent1},0px 15px 22px 2px ${transparent2},0px 6px 28px 5px ${transparent3}`,
+    `0px 8px 10px -5px ${transparent1},0px 16px 24px 2px ${transparent2},0px 6px 30px 5px ${transparent3}`,
+    `0px 8px 11px -5px ${transparent1},0px 17px 26px 2px ${transparent2},0px 6px 32px 5px ${transparent3}`,
+    `0px 9px 11px -5px ${transparent1},0px 18px 28px 2px ${transparent2},0px 7px 34px 6px ${transparent3}`,
+    `0px 9px 12px -6px ${transparent1},0px 19px 29px 2px ${transparent2},0px 7px 36px 6px ${transparent3}`,
+    `0px 10px 13px -6px ${transparent1},0px 20px 31px 3px ${transparent2},0px 8px 38px 7px ${transparent3}`,
+    `0px 10px 13px -6px ${transparent1},0px 21px 33px 3px ${transparent2},0px 8px 40px 7px ${transparent3}`,
+    `0px 10px 14px -6px ${transparent1},0px 22px 35px 3px ${transparent2},0px 8px 42px 7px ${transparent3}`,
+    `0px 11px 14px -7px ${transparent1},0px 23px 36px 3px ${transparent2},0px 9px 44px 8px ${transparent3}`,
+    `0px 11px 15px -7px ${transparent1},0px 24px 38px 3px ${transparent2},0px 9px 46px 8px ${transparent3}`
+  ];
+}
+
+export default shadows();