@smartbooks-ai/layout 0.0.3 → 0.0.5

package/dist/theme/index.js

@@ -0,0 +1,197 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef } from 'react';
+import { ThemeProvider as EmotionThemeProvider, css } from '@emotion/react';
+import ExpandedMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
+import { listItemTextClasses } from '@mui/material';
+import { buttonClasses } from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider as MUIThemeProvider, StyledEngineProvider, createTheme, } from '@mui/material/styles';
+import { rem } from 'polished';
+import { Link as RouterLink } from 'react-router';
+import { colorPrimitives } from './colorPrimitives';
+import { colors } from './colors';
+import { font } from './font';
+import GlobalStyles from './globalStyles';
+import { radius } from './radius';
+import { spacing } from './spacing';
+import typography from './typography';
+const LinkBehavior = forwardRef(({ href, ...other }, ref) => _jsx(RouterLink, { ref: ref, to: href, ...other }));
+const muiTextField = {
+    defaultProps: {
+        variant: 'outlined',
+        margin: 'normal',
+        size: 'small',
+        InputLabelProps: { shrink: true },
+        SelectProps: { displayEmpty: true },
+    },
+};
+const muiOutlinedInput = {
+    styleOverrides: {
+        notchedOutline: css `
+      border-color: ${colorPrimitives.darkNavy[100]};
+    `,
+    },
+};
+const muiTheme = {
+    shape: { borderRadius: 6 },
+    typography,
+    components: {
+        MuiCssBaseline: {
+            styleOverrides: {
+                a: css `
+          color: '#000000';
+
+          text-decoration: none;
+        `,
+            },
+        },
+        MuiAccordionDetails: {
+            styleOverrides: {
+                root: css `
+          display: flex;
+
+          flex-direction: column;
+
+          row-gap: ${spacing.xxs};
+        `,
+            },
+        },
+        MuiDialogContent: {
+            styleOverrides: {
+                root: css `
+          display: flex;
+
+          flex-direction: column;
+
+          row-gap: ${spacing.sm};
+
+          min-width: 30rem;
+        `,
+            },
+        },
+        MuiCheckbox: {
+            defaultProps: {
+                size: 'small',
+            },
+        },
+        MuiFormControlLabel: {
+            styleOverrides: {
+                label: css `
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          font: ${font.body2};
+
+          white-space: nowrap;
+        `,
+            },
+        },
+        MuiInputBase: {
+            defaultProps: {
+                disableInjectingGlobalStyles: true,
+            },
+        },
+        MuiTextField: muiTextField,
+        MuiPickersTextField: muiTextField,
+        MuiAccordion: {
+            defaultProps: {
+                elevation: 3,
+                slotProps: { transition: { unmountOnExit: true } },
+            },
+        },
+        MuiAccordionSummary: {
+            defaultProps: {
+                expandIcon: _jsx(ExpandedMoreRoundedIcon, {}),
+            },
+        },
+        MuiLink: {
+            defaultProps: {
+                component: LinkBehavior,
+            },
+            styleOverrides: {
+                root: ({ theme }) => css `
+          color: ${theme.palette.primary.main};
+
+          text-decoration-color: inherit;
+          text-underline-offset: 0.25rem;
+
+          &:hover {
+            color: ${theme.palette.primary.dark};
+          }
+        `,
+            },
+        },
+        MuiOutlinedInput: muiOutlinedInput,
+        MuiPickersOutlinedInput: muiOutlinedInput,
+        MuiButtonGroup: {
+            defaultProps: {
+                disableRipple: true,
+            },
+        },
+        MuiMenuItem: {
+            styleOverrides: {
+                root: css `
+          font: ${font.body3};
+        `,
+            },
+        },
+        MuiButtonBase: {
+            styleOverrides: {
+                root: css `
+          &.${buttonClasses.outlined} {
+            border: 0.0625rem solid ${colorPrimitives.darkNavy[100]};
+
+            &:hover {
+              /* For button groups - we should bring the border of hovered button in front of the other ones */
+              z-index: 1;
+
+              background: none;
+              border: 0.0625rem solid ${colorPrimitives.darkNavy[800]};
+            }
+          }
+        `,
+            },
+            defaultProps: {
+                disableRipple: true,
+                LinkComponent: LinkBehavior,
+                type: 'button',
+            },
+        },
+        MuiTooltip: {
+            styleOverrides: {
+                tooltip: css `
+          font: ${font.body3};
+
+          line-height: 1.5;
+
+          letter-spacing: 0.05rem;
+
+          background-color: ${colorPrimitives.darkNavy[900]};
+        `,
+            },
+        },
+        MuiSelect: {
+            styleOverrides: {
+                select: css `
+          .${listItemTextClasses.root} {
+            margin-top: ${rem(2)};
+            margin-bottom: ${rem(2)};
+          }
+        `,
+            },
+        },
+    },
+};
+const themeValue = {
+    ...muiTheme,
+    my: {
+        font,
+        radius,
+        spacing,
+        colors,
+    },
+};
+const theme = createTheme(themeValue);
+export function ThemeProvider(props) {
+    return (_jsx(StyledEngineProvider, { injectFirst: true, children: _jsx(MUIThemeProvider, { theme: theme, children: _jsxs(EmotionThemeProvider, { theme: theme, children: [_jsx(CssBaseline, {}), _jsx(GlobalStyles, {}), props.children] }) }) }));
+}

package/dist/theme/radius.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@emotion/react';
+export declare const radius: Theme['my']['radius'];
+//# sourceMappingURL=radius.d.ts.map

package/dist/theme/radius.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radius.d.ts","sourceRoot":"","sources":["../../src/theme/radius.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,QAAQ,CASxC,CAAC"}

package/dist/theme/radius.js

@@ -0,0 +1,10 @@
+export const radius = {
+    sq: '0',
+    xs: '0.125rem',
+    sm: '0.25rem',
+    md: '0.5rem',
+    lg: '0.75rem',
+    xl: '1rem',
+    xxl: '1.5rem',
+    xxxl: '2rem',
+};

package/dist/theme/spacing.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@emotion/react';
+export declare const spacing: Theme['my']['spacing'];
+//# sourceMappingURL=spacing.d.ts.map

package/dist/theme/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/theme/spacing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,SAAS,CAS1C,CAAC"}

package/dist/theme/spacing.js

@@ -0,0 +1,10 @@
+export const spacing = {
+    xxxs: '0.25rem',
+    xxs: '0.5rem',
+    xs: '0.75rem',
+    sm: '1rem',
+    md: '1.5rem',
+    lg: '2rem',
+    xl: '2.5rem',
+    xxl: '3rem',
+};

package/dist/theme/typography.d.ts

@@ -0,0 +1,4 @@
+import { TypographyVariantsOptions } from '@mui/material';
+declare const typography: TypographyVariantsOptions;
+export default typography;
+//# sourceMappingURL=typography.d.ts.map

package/dist/theme/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/theme/typography.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,yBAAyB,EAAE,MAAM,eAAe,CAAC;AAgB3E,QAAA,MAAM,UAAU,EAAE,yBAqBjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/theme/typography.js

@@ -0,0 +1,32 @@
+import { FONT_FAMILY, font } from './font';
+const stylesForFont = (fontName) => ({
+    font: font[fontName],
+    // This is needed to prevent overrides
+    fontFamily: undefined,
+    fontWeight: undefined,
+    fontSize: undefined,
+    lineHeight: undefined,
+});
+const typography = {
+    fontFamily: FONT_FAMILY,
+    fontWeightRegular: 400,
+    fontWeightMedium: 600,
+    fontWeightBold: 700,
+    h1: stylesForFont('h1'),
+    h2: stylesForFont('h2'),
+    h3: stylesForFont('h3'),
+    h4: stylesForFont('h4'),
+    h5: stylesForFont('h5'),
+    h6: stylesForFont('h6'),
+    subtitle1: stylesForFont('subtitle1'),
+    subtitle2: stylesForFont('subtitle2'),
+    body1: stylesForFont('body1'),
+    body2: stylesForFont('body2'),
+    caption: stylesForFont('caption'),
+    overline: stylesForFont('overline'),
+    button: {
+        ...stylesForFont('button1'),
+        textTransform: 'inherit',
+    },
+};
+export default typography;

package/dist/utils/assertNever.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @example
+ * const a: 'one' | 'two' = 'one';
+ *
+ * switch(a) {
+ *   case 'one':
+ *     return 1;
+ *   case 'two':
+ *     return 2;
+ *   default:
+ *     return assertNever(a); // Works fine, but if we change the type of `a` to `'one' | 'two' | 'three'` then we get an error here
+ * }
+ */
+export declare const assertNever: (input: never) => never;
+//# sourceMappingURL=assertNever.d.ts.map

package/dist/utils/assertNever.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assertNever.d.ts","sourceRoot":"","sources":["../../src/utils/assertNever.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,KAAG,KAAc,CAAC"}

package/dist/utils/assertNever.js

@@ -0,0 +1,14 @@
+/**
+ * @example
+ * const a: 'one' | 'two' = 'one';
+ *
+ * switch(a) {
+ *   case 'one':
+ *     return 1;
+ *   case 'two':
+ *     return 2;
+ *   default:
+ *     return assertNever(a); // Works fine, but if we change the type of `a` to `'one' | 'two' | 'three'` then we get an error here
+ * }
+ */
+export const assertNever = (input) => input;

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { assertNever } from './assertNever';
+export { shouldNotForwardPropsWithKeys } from './shouldNotForwardPropsWithKeys';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+export { assertNever } from './assertNever';
+export { shouldNotForwardPropsWithKeys } from './shouldNotForwardPropsWithKeys';

package/dist/utils/shouldNotForwardPropsWithKeys.d.ts

@@ -0,0 +1,3 @@
+import { StyledOptions } from '@emotion/styled';
+export declare const shouldNotForwardPropsWithKeys: <TCustomProps extends object>(keys: (keyof TCustomProps)[]) => StyledOptions<TCustomProps>;
+//# sourceMappingURL=shouldNotForwardPropsWithKeys.d.ts.map

package/dist/utils/shouldNotForwardPropsWithKeys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shouldNotForwardPropsWithKeys.d.ts","sourceRoot":"","sources":["../../src/utils/shouldNotForwardPropsWithKeys.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,eAAO,MAAM,6BAA6B,GAAI,YAAY,SAAS,MAAM,EACvE,MAAM,CAAC,MAAM,YAAY,CAAC,EAAE,KAC3B,aAAa,CAAC,YAAY,CAE3B,CAAC"}

package/dist/utils/shouldNotForwardPropsWithKeys.js

@@ -0,0 +1,3 @@
+export const shouldNotForwardPropsWithKeys = (keys) => ({
+    shouldForwardProp: (propName) => !keys.map((key) => key.toString()).includes(propName.toString()),
+});

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@smartbooks-ai/layout",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "private": false,
   "type": "module",
-  "main": "./dist/index.ts",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "author": "smartbooks",
   "exports": {
     ".": {
-      "import": "./dist/index.ts",
+      "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     }
   },
@@ -42,7 +43,10 @@
     "vitest": "^4.0.16"
   },
   "dependencies": {
-    "@smartbooks-ai/api-client": "0.0.1",
+    "@smartbooks-ai/api-client": "0.0.5",
     "use-resize-observer": "^9.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/components/PageWithMenuLayout/PageWithMenuLayout.tsx

@@ -10,36 +10,33 @@ import LogoHeaderText from './LogoHeaderText';
 import { AppSelect, MenuItemWithChildren, UserProfileSelect } from './index';
 import * as Styled from './styles';
 import { MenuStructure } from './types';
+import { useMenuToggle } from './useMenuToggle';
 
 import { UserProfile } from '../../security/UserProfile';
 
 export type PageWithMenuLayoutProps = {
-  isExpanded: boolean;
-  toggleIsExpanded: () => void;
   resolvedCompanyCode?: string;
   topMenu?: MenuStructure;
   bottomMenu: MenuStructure;
   profile: UserProfile | null;
   tenantCode?: string;
   switchToCompany: (company: AvailableCompany) => Promise<void>;
-  openMenu: () => void;
   logout: () => void;
   additionalOutletContent?: React.ReactNode;
 };
 
 export const PageWithMenuLayout: React.FC<PageWithMenuLayoutProps> = ({
-  isExpanded,
-  toggleIsExpanded,
   resolvedCompanyCode,
   topMenu,
   bottomMenu,
   profile,
   tenantCode,
   switchToCompany,
-  openMenu,
   logout,
   additionalOutletContent,
 }) => {
+  const { isExpanded, openMenu, toggleIsExpanded } = useMenuToggle();
+
   return (
     <>
       <Styled.LockMenuButton onClick={toggleIsExpanded} isExpanded={isExpanded}>

package/src/components/PageWithMenuLayout/useMenuToggle.ts

@@ -0,0 +1,19 @@
+import { useEffect, useMemo } from 'react';
+
+import { useProfile, useToggle } from '@smartbooks-ai/layout';
+
+export const useMenuToggle = () => {
+  const { value: isExpanded, toggle: toggleIsExpanded, switchOn: openMenu, switchOff: closeMenu } = useToggle(true);
+
+  const { profile } = useProfile();
+
+  const tenants = profile?.allowedTenants;
+
+  const tenantsWithCompanies = useMemo(() => tenants?.filter(({ companies }) => companies.length > 0) ?? [], [tenants]);
+
+  useEffect(() => {
+    if (tenants && !tenantsWithCompanies.length) closeMenu();
+  }, [closeMenu, tenants, tenantsWithCompanies.length]);
+
+  return { isExpanded, toggleIsExpanded, openMenu };
+};