ish-ui 1.0.19 → 1.0.21

package/dist/themes/appTheme.js

@@ -0,0 +1,322 @@
+import { grey, yellow } from '@mui/material/colors';
+import { alpha, darken } from '@mui/material/styles';
+export const theme = {
+    default: {
+        heading: {
+            color: '#4b6390'
+        },
+        blog: {
+            root: {
+                backgroundColor: yellow[100]
+            }
+        },
+        share: {
+            exportContainer: {
+                backgroundColor: '#302A22'
+            },
+            closeButton: {
+                color: '#f7941d'
+            },
+            shareButton: {
+                color: '#302A22',
+                backgroundColor: '#fff',
+                backgroundColorHover: alpha('#fff', 0.9)
+            },
+            color: {
+                headerText: '#fff',
+                itemText: 'rgba(255,255,255,0.6)',
+                selectedItemText: 'rgba(255,255,255,1)',
+                customLabel: 'rgba(255,255,255,.5)'
+            }
+        },
+        statistics: {
+            coloredHeaderText: {
+                color: '#f7941d'
+            },
+            enrolmentText: {
+                color: '#73cba7',
+                strokeColor: '#73cba7'
+            },
+            revenueText: {
+                color: '#ffd876',
+                strokeColor: '#ffd876'
+            },
+            rightColumn: {
+                color: alpha('rgba(0, 0, 0, 0.87)', 0.4)
+            }
+        },
+        appBar: {
+            header: {
+                background: '#fbf9f0',
+                color: '#222',
+            },
+            headerAlternate: {
+                background: '#fff',
+                color: '#222',
+            },
+        },
+        appBarButton: {
+            close: {
+                color: '#f7941d',
+            },
+            helpMenu: {
+                color: '#f7941d',
+            }
+        },
+        tabList: {
+            listContainer: {
+                backgroundColor: '#4b6390'
+            },
+            listItemRoot: {
+                color: '#fff'
+            },
+        },
+        table: {
+            contrastRow: {
+                main: '#f8f8f8',
+                light: '#f4f3ec'
+            }
+        },
+        addButtonColor: {
+            color: '#f7941d'
+        }
+    },
+    dark: {
+        heading: {
+            color: '#9bbeff'
+        },
+        blog: {
+            root: {
+                backgroundColor: '#303030'
+            }
+        },
+        share: {
+            exportContainer: {
+                backgroundColor: '#302A22'
+            },
+            closeButton: {
+                color: '#f7941d'
+            },
+            shareButton: {
+                color: '#302A22',
+                backgroundColor: '#fff',
+                backgroundColorHover: alpha('#fff', 0.9)
+            },
+            color: {
+                headerText: '#fff',
+                itemText: 'rgba(255,255,255,0.6)',
+                selectedItemText: 'rgba(255,255,255,1)',
+                customLabel: 'rgba(255,255,255,.5)'
+            }
+        },
+        statistics: {
+            coloredHeaderText: {
+                color: '#f7941d'
+            },
+            enrolmentText: {
+                color: '#73cba7',
+                strokeColor: '#73cba7'
+            },
+            revenueText: {
+                color: '#ffd876',
+                strokeColor: '#ffd876'
+            },
+            rightColumn: {
+                color: alpha('rgba(255, 255, 255, 0.87)', 0.4)
+            }
+        },
+        appBar: {
+            header: {
+                background: '#1b1b1b',
+                color: '#fff',
+            },
+            headerAlternate: {
+                background: '#f7941d',
+                color: '#fff',
+            },
+        },
+        appBarButton: {
+            close: {
+                color: 'white'
+            },
+            helpMenu: {
+                color: '#fff'
+            }
+        },
+        tabList: {
+            listContainer: {
+                backgroundColor: '#302A22'
+            },
+            listItemRoot: {
+                color: '#fff'
+            },
+        },
+        table: {
+            contrastRow: {
+                main: '#696969',
+                light: '#696969bf'
+            }
+        },
+        addButtonColor: {
+            color: darken(grey[400], 0.1)
+        }
+    },
+    monochrome: {
+        heading: {
+            color: '#000'
+        },
+        blog: {
+            root: {
+                backgroundColor: '#eee'
+            }
+        },
+        share: {
+            exportContainer: {
+                backgroundColor: '#222222'
+            },
+            closeButton: {
+                color: '#eaeaea'
+            },
+            shareButton: {
+                color: '#fff',
+                backgroundColor: '#3e8ef7',
+                backgroundColorHover: alpha('#3e8ef7', 0.9)
+            },
+            color: {
+                headerText: '#fff',
+                itemText: 'rgba(255,255,255,0.6)',
+                selectedItemText: 'rgba(255,255,255,1)',
+                customLabel: 'rgba(255,255,255,.5)'
+            }
+        },
+        statistics: {
+            coloredHeaderText: {
+                color: '#222222'
+            },
+            enrolmentText: {
+                color: '#73cba7',
+                strokeColor: '#73cba7'
+            },
+            revenueText: {
+                color: '#ffd876',
+                strokeColor: '#ffd876'
+            },
+            rightColumn: {
+                color: alpha('#222222', 0.4)
+            }
+        },
+        appBar: {
+            header: {
+                background: '#fff',
+                color: '#000',
+            },
+            headerAlternate: {
+                background: '#f4f4f4',
+                color: '#000',
+            },
+        },
+        appBarButton: {
+            close: {
+                color: '#222222'
+            },
+            helpMenu: {
+                color: '#222222'
+            }
+        },
+        tabList: {
+            listContainer: {
+                backgroundColor: '#e3e3e3'
+            },
+            listItemRoot: {
+                color: '#000',
+            },
+        },
+        table: {
+            contrastRow: {
+                main: '#f8f8f8',
+                light: '#f4f3ec'
+            }
+        },
+        addButtonColor: {
+            color: '#000'
+        }
+    },
+    highcontrast: {
+        heading: {
+            color: '#424242'
+        },
+        blog: {
+            root: {
+                backgroundColor: '#fff'
+            }
+        },
+        share: {
+            exportContainer: {
+                backgroundColor: '#eee'
+            },
+            closeButton: {
+                color: '#111111'
+            },
+            shareButton: {
+                color: '#fff',
+                backgroundColor: '#111111',
+                backgroundColorHover: alpha('#fff', 0.9)
+            },
+            color: {
+                headerText: '#000',
+                itemText: 'rgba(17,17,17,0.6)',
+                selectedItemText: 'rgba(17,17,17,1)',
+                customLabel: 'rgba(17,17,17,.5)'
+            }
+        },
+        statistics: {
+            coloredHeaderText: {
+                color: '#111111'
+            },
+            enrolmentText: {
+                color: '#111111'
+            },
+            revenueText: {
+                color: '#111111'
+            },
+            rightColumn: {
+                color: '#111111'
+            }
+        },
+        appBar: {
+            header: {
+                background: '#f2f2f2',
+                color: '#222',
+            },
+            headerAlternate: {
+                background: '#111',
+                color: '#fff',
+            },
+        },
+        appBarButton: {
+            close: {
+                color: '#222'
+            },
+            helpMenu: {
+                color: '#222'
+            }
+        },
+        tabList: {
+            listContainer: {
+                backgroundColor: '#292929'
+            },
+            listItemRoot: {
+                color: '#fff'
+            },
+        },
+        table: {
+            contrastRow: {
+                main: '#f8f8f8',
+                light: '#f4f3ec'
+            }
+        },
+        addButtonColor: {
+            color: '#111111'
+        }
+    }
+};

package/dist/themes/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ishTheme';
+export * from './appTheme';

package/dist/themes/index.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright ish group pty ltd 2023.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+export * from './ishTheme';
+export * from './appTheme';

package/dist/themes/ishTheme.d.ts

@@ -0,0 +1,8 @@
+import { AppTheme, ThemeValues } from '../model';
+export declare const defaultTheme: AppTheme;
+export declare const darkTheme: AppTheme;
+export declare const monochromeTheme: AppTheme;
+export declare const highcontrastTheme: AppTheme;
+export declare const currentTheme: (themeName: ThemeValues) => AppTheme;
+export declare const getTheme: () => AppTheme;
+export declare const useAppTheme: () => AppTheme;

package/dist/themes/ishTheme.js

@@ -0,0 +1,351 @@
+/*
+ * Copyright ish group pty ltd 2022.
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
+ *
+ *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ */
+import { createTheme } from '@mui/material/styles';
+import { theme } from './appTheme';
+import { DarkThemeKey, DefaultThemeKey, HighcontrastThemeKey, MonochromeThemeKey } from '../model';
+const createOverrides = (palette) => ({
+    components: {
+        MuiButtonBase: {
+            styleOverrides: {
+                root: {
+                    userSelect: 'auto',
+                }
+            }
+        },
+        MuiCollapse: {
+            styleOverrides: {
+                entered: {
+                    height: 'auto',
+                    overflow: 'visible'
+                }
+            }
+        },
+        MuiFormControl: {
+            styleOverrides: {
+                root: {
+                    maxWidth: '100%',
+                }
+            }
+        },
+        MuiFormControlLabel: {
+            styleOverrides: {
+                label: {
+                    fontSize: '14px',
+                    '&$disabled': {
+                        color: 'unset'
+                    }
+                },
+                disabled: {}
+            }
+        },
+        MuiInput: {
+            styleOverrides: {
+                underline: {
+                    '&:before': {
+                        borderBottom: '1px solid transparent',
+                    },
+                    '&:hover:not(.Mui-disabled):not(.primaryContarstUnderline):before': {
+                        borderBottom: `1px solid ${palette.primary.main}`
+                    },
+                    '&.primaryContarstUnderline:hover:not(.Mui-disabled):before': {
+                        borderBottom: `1px solid ${palette.primary.contrastText}`
+                    }
+                }
+            }
+        },
+        MuiInputLabel: {
+            styleOverrides: {
+                shrink: {
+                    '& .inputAdornmentIcon': {
+                        transform: 'scale(1.25)'
+                    }
+                }
+            }
+        },
+        MuiSelect: {
+            styleOverrides: {
+                select: {
+                    '&:focus': {
+                        backgroundColor: 'none',
+                    },
+                },
+            }
+        },
+        MuiFormLabel: {
+            styleOverrides: {
+                root: {
+                    lineHeight: 1.2,
+                    whiteSpace: 'nowrap'
+                },
+            }
+        },
+        MuiInputBase: {
+            styleOverrides: {
+                root: {
+                    maxWidth: '100%',
+                    width: '100%',
+                    MuiInput: {
+                        root: {
+                            '&:before': {
+                                borderBottom: '1px solid transparent',
+                            },
+                            '&:hover:not(.Mui-disabled):not(.primaryContarstUnderline):before': {
+                                borderBottom: `1px solid ${palette.primary.main}`
+                            },
+                            '&.primaryContarstUnderline:hover:not(.Mui-disabled):before': {
+                                borderBottom: `1px solid ${palette.primary.contrastText}`
+                            }
+                        },
+                    },
+                },
+                input: {
+                    '&.Mui-disabled': {
+                        fontWeight: 300,
+                        WebkitTextFillColor: 'inherit'
+                    },
+                    '&::placeholder': {
+                        opacity: 0.15
+                    },
+                    textOverflow: 'ellipsis',
+                    color: palette.text.primaryEditable,
+                    fontWeight: 400,
+                    '&:hover:not(.Mui-disabled):not(&:focus):not(.primaryContarstHover)': {
+                        color: palette.primary.main,
+                        MuiSelect: {
+                            icon: {
+                                color: palette.primary.main,
+                            },
+                        },
+                    },
+                },
+                inputMultiline: {
+                    lineHeight: '1.5em'
+                }
+            }
+        },
+        MuiCssBaseline: {
+            styleOverrides: {
+                body: {
+                    fontFeatureSettings: '"dlig" 0, "numr" 0, "dnom" 0, "tnum" 0, "case" 0, "zero" 0, "frac" 0, '
+                        + '"sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01" 0, "ss02" 0, "ss03" 0, '
+                        + '"cv01", "cv02", "cv03", "cv04", "cv05", "cv06", "cv07", "cv08", "cv09", '
+                        + '"cv10", "cv11", "calt", "liga", "kern"',
+                    fontSize: '0.875rem'
+                }
+            }
+        },
+        MuiMenuItem: {
+            styleOverrides: {
+                root: {
+                    fontWeight: 400,
+                    '@media (min-width: 600px)': {
+                        minHeight: '36px'
+                    }
+                }
+            }
+        },
+        MuiTableSortLabel: {
+            styleOverrides: {
+                root: {
+                    '&:hover': {
+                        color: palette.text.primary
+                    },
+                    '&$active': {
+                        color: palette.text.primary
+                    }
+                },
+                active: {},
+                icon: {
+                    fontSize: '18px'
+                }
+            }
+        },
+        MuiAutocomplete: {
+            styleOverrides: {
+                inputRoot: {
+                    flexWrap: 'inherit',
+                }
+            }
+        },
+        MuiFormHelperText: {
+            styleOverrides: {
+                root: {
+                    marginLeft: 0
+                }
+            }
+        }
+    }
+});
+const commonTypography = {
+    typography: {
+        fontFamily: 'Inter, sans-serif',
+        fontSize: 14,
+        fontWeightLight: 300,
+        fontWeightRegular: 400,
+        fontWeightMedium: 600,
+        body2: {
+            fontWeight: 300
+        },
+        body1: {
+            fontWeight: 300
+        },
+        caption: {
+            fontWeight: 300
+        }
+    }
+};
+// Default Theme
+const defaultThemePalette = {
+    primary: {
+        main: '#f7941d',
+        contrastText: '#fff'
+    },
+    background: {
+        default: '#fbf9f0'
+    },
+    secondary: {
+        main: '#4b6390'
+    },
+    text: {
+        secondary: 'rgba(0, 0, 0, 0.54)',
+        primary: 'rgba(0, 0, 0, 0.87)',
+        primaryEditable: 'rgba(0, 0, 0, 0.95)',
+        disabled: 'rgba(34, 34, 34, 0.38)',
+        hint: 'rgba(34, 34, 34, 0.38)',
+        grey: '#434343',
+    }
+};
+export const defaultTheme = createTheme(Object.assign(Object.assign(Object.assign({ palette: defaultThemePalette }, commonTypography), theme.default), createOverrides(defaultThemePalette)));
+// Dark Theme
+const darkThemePalette = {
+    mode: 'dark',
+    common: { black: '#000', white: '#fff' },
+    primary: {
+        main: '#f7941d',
+        dark: 'rgba(255, 143, 0, 1)',
+        contrastText: 'rgba(255, 255, 255, 1)'
+    },
+    background: {
+        default: '#1b1b1b',
+        paper: '#313131'
+    },
+    secondary: {
+        light: 'rgba(75, 99, 144, 1)',
+        main: '#9bbeff',
+        dark: 'rgba(75, 99, 144, 1)',
+        contrastText: '#fff'
+    },
+    error: {
+        light: '#e57373', main: '#f44336', dark: '#d32f2f', contrastText: '#fff'
+    },
+    text: {
+        primary: 'rgba(255, 255, 255, 0.87)',
+        primaryEditable: 'rgba(255, 255, 255, 0.95)',
+        secondary: 'rgba(255, 255, 255, 0.65)',
+        disabled: 'rgba(255, 255, 255, 0.38)',
+        hint: 'rgba(255, 255, 255, 0.38)',
+        grey: 'rgba(255, 255, 255, 0.65)',
+    }
+};
+export const darkTheme = createTheme(Object.assign(Object.assign(Object.assign({ palette: darkThemePalette }, commonTypography), theme.dark), createOverrides(darkThemePalette)));
+// Monochrome Theme
+const monochromeThemePalette = {
+    mode: 'light',
+    common: { black: '#000', white: '#fff' },
+    primary: {
+        main: '#111111',
+        dark: '#76838f',
+        contrastText: '#fff'
+    },
+    secondary: {
+        light: '#9bbeff',
+        main: '#111111',
+        dark: '#111111',
+        contrastText: '#fff'
+    },
+    error: {
+        light: '#e57373', main: '#f44336', dark: '#d32f2f', contrastText: '#fff'
+    },
+    text: {
+        primary: '#222222',
+        primaryEditable: '#181818',
+        secondary: 'rgba(34, 34, 34, 0.54)',
+        disabled: 'rgba(34, 34, 34, 0.38)',
+        hint: 'rgba(34, 34, 34, 0.38)',
+        grey: '#434343',
+    }
+};
+export const monochromeTheme = createTheme(Object.assign(Object.assign(Object.assign({ palette: monochromeThemePalette }, commonTypography), theme.monochrome), createOverrides(monochromeThemePalette)));
+// High Contrast Theme
+const highcontrastThemePalette = {
+    common: { black: '#111111', white: '#fff' },
+    primary: {
+        main: '#111111',
+        dark: '#76838f',
+        contrastText: '#fff'
+    },
+    secondary: {
+        light: '#9bbeff',
+        main: '#111111',
+        dark: '#111111',
+        contrastText: '#fff'
+    },
+    background: {
+        default: '#f2f2f2'
+    },
+    error: {
+        light: '#e57373', main: '#f44336', dark: '#d32f2f', contrastText: '#fff'
+    },
+    text: {
+        primary: '#111111',
+        primaryEditable: '#070707',
+        secondary: '#111111',
+        disabled: 'rgba(34, 34, 34, 0.38)',
+        hint: 'rgba(34, 34, 34, 0.38)',
+        grey: '#434343',
+    },
+    action: {
+        selected: 'rgba(0, 0, 0, 0.3)'
+    },
+    divider: 'rgba(0, 0, 0, 0.40)'
+};
+export const highcontrastTheme = createTheme(Object.assign(Object.assign(Object.assign({ palette: highcontrastThemePalette }, commonTypography), theme.highcontrast), createOverrides(highcontrastThemePalette)));
+export const currentTheme = (themeName) => {
+    switch (themeName) {
+        case DarkThemeKey: {
+            return darkTheme;
+        }
+        case DefaultThemeKey: {
+            return defaultTheme;
+        }
+        case MonochromeThemeKey: {
+            return monochromeTheme;
+        }
+        case HighcontrastThemeKey: {
+            return highcontrastTheme;
+        }
+        default: {
+            return defaultTheme;
+        }
+    }
+};
+export const getTheme = () => {
+    let actualTheme = defaultTheme;
+    try {
+        const storageThemeName = localStorage.getItem('theme');
+        if (storageThemeName) {
+            actualTheme = currentTheme(storageThemeName);
+        }
+    }
+    catch (e) {
+        console.error(e);
+        return actualTheme;
+    }
+    return actualTheme;
+};
+export const useAppTheme = () => (Object.assign({}, getTheme()));

package/dist/timetable/datePeriodFilter/DayPeriodIcons.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface IconProps {
+    className?: string;
+}
+export declare const MorningIcon: React.FunctionComponent<IconProps>;
+export declare const AfternoonIcon: React.FunctionComponent<IconProps>;
+export declare const EveningIcon: React.FunctionComponent<IconProps>;
+export {};