@smartbooks-ai/layout 0.0.3

package/src/emotion.d.ts

@@ -0,0 +1,76 @@
+import '@emotion/react';
+import { ThemeOptions as MuiThemeOptions } from '@mui/material/styles';
+
+type PaletteShade = 'main' | 'light' | 'dark' | 'contrast';
+
+type CommonColorShade = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950';
+type SignalColorShade = '100' | '300' | '600' | '900' | '950';
+
+type ColorPrimitives = {
+  darkNavy: Record<CommonColorShade, string>;
+  coolMint: Record<CommonColorShade, string>;
+  coral: Record<CommonColorShade, string>;
+  navy: Record<CommonColorShade, string>;
+  skyBlue: Record<CommonColorShade, string>;
+  grey: Record<CommonColorShade, string>;
+  common: Record<'black' | 'white', string>;
+  warning: Record<SignalColorShade, string>;
+  error: Record<SignalColorShade, string>;
+  success: Record<SignalColorShade, string>;
+};
+
+type ColorPalette = {
+  primitives: ColorPrimitives;
+  text: Record<'main' | 'light' | 'lighter' | 'disabled' | 'placeholder' | 'white', string>;
+  primary: Record<PaletteShade, string>;
+  secondary: Record<PaletteShade, string>;
+  tertiary: Record<PaletteShade, string>;
+  quaternary: Record<PaletteShade, string>;
+  quinary: Record<PaletteShade, string>;
+  neutral: Record<PaletteShade, string>;
+  warning: Record<PaletteShade, string>;
+  error: Record<PaletteShade, string>;
+  success: Record<PaletteShade, string>;
+  background: Record<
+    'white' | 'lightGrey' | 'transparent' | 'light' | 'hover' | 'hoverDark' | 'hoverDarkNonTransparent',
+    string
+  >;
+};
+
+type FontStyleName =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'subtitle1'
+  | 'subtitle2'
+  | 'body1'
+  | 'body2'
+  | 'body3'
+  | 'highlight1'
+  | 'highlight2'
+  | 'highlight3'
+  | 'button1'
+  | 'button2'
+  | 'caption'
+  | 'overline'
+  | 'label'
+  | 'nav1'
+  | 'nav2';
+
+type ThemeOptions = {
+  my: {
+    colors: ColorPalette;
+    spacing: Record<'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', string>;
+    radius: Record<'sq' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl', string>;
+    font: Record<FontStyleName, string>;
+  };
+} & MuiThemeOptions;
+
+declare module '@emotion/react' {
+  // This declaration is necessary to merge the custom theme with the default theme
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/consistent-type-definitions
+  export interface Theme extends ThemeOptions {}
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useIsAuthorized } from './useIsAuthorized';
+export { useToggle } from './useToggle';

package/src/hooks/useIsAuthorized.ts

@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+
+import { CompanyRole, GlobalRole, ResourceType, TenantRole } from '@smartbooks-ai/api-client';
+
+import { useProfile } from '../security/ProfileContext';
+
+type AuthorizationParams = {
+  companyRole?: CompanyRole;
+  tenantCode?: string;
+  companyCode?: string;
+  tenantRole?: TenantRole;
+  globalRole?: GlobalRole;
+  resourceType?: ResourceType;
+};
+
+type Output = (params: AuthorizationParams) => boolean | null;
+
+export const useIsAuthorized = (): Output => {
+  const { profile } = useProfile();
+
+  return useCallback(
+    ({ companyCode, companyRole, globalRole, tenantCode, tenantRole, resourceType }) =>
+      profile &&
+      (globalRole === undefined || profile.globalRoles.includes(globalRole)) &&
+      (tenantRole === undefined ||
+        !!profile.allowedTenants.find(({ code }) => code === tenantCode)?.roles.includes(tenantRole)) &&
+      (companyRole === undefined ||
+        !!profile.allowedCompanies.find(({ code }) => code === companyCode)?.roles.includes(companyRole)) &&
+      (resourceType === undefined ||
+        !profile.allowedCompanies
+          .find(({ code }) => code === companyCode)
+          ?.resources?.find(({ resource }) => resource === resourceType)?.isRestricted),
+    [profile],
+  );
+};

package/src/hooks/useToggle.ts

@@ -0,0 +1,27 @@
+import { useCallback, useState } from 'react';
+
+type Output = {
+  value: boolean;
+  switchOn: () => void;
+  switchOff: () => void;
+  toggle: () => void;
+  set: (value: boolean) => void;
+};
+
+export const useToggle = (defaultValue = false): Output => {
+  const [value, setValue] = useState(defaultValue);
+
+  return {
+    value,
+    switchOn: useCallback(() => {
+      setValue(true);
+    }, []),
+    switchOff: useCallback(() => {
+      setValue(false);
+    }, []),
+    toggle: useCallback(() => {
+      setValue((previous) => !previous);
+    }, []),
+    set: setValue,
+  };
+};

package/src/index.ts

@@ -0,0 +1,7 @@
+import './emotion.d.ts';
+
+export * from './components';
+export * from './hooks';
+export * from './security';
+export * from './theme';
+export * from './utils';

package/src/package-isolation.test.ts

@@ -0,0 +1,60 @@
+import { glob } from 'glob';
+import fs from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+describe('package isolation', () => {
+  it('should not reference files outside of src folder', async () => {
+    expect.assertions(1);
+
+    // Find all TypeScript files in src directory
+    const srcFiles = await glob('src/**/*.{ts,tsx}', {
+      cwd: path.resolve(__dirname, '..'),
+    });
+
+    const violations: string[] = [];
+
+    for (const file of srcFiles) {
+      const filePath = path.resolve(__dirname, '..', file);
+      const content = fs.readFileSync(filePath, 'utf8');
+
+      // Extract import statements using regex
+      const importRegex = /^import\s+.*?from\s+['"]([^'"]+)['"]/gm;
+      let match;
+
+      while ((match = importRegex.exec(content)) !== null) {
+        const importPath = match[1];
+
+        // Check for relative imports that go outside the src folder
+        if (importPath.startsWith('../')) {
+          const resolvedPath = path.resolve(path.dirname(filePath), importPath);
+          const srcRoot = path.resolve(__dirname, '..', 'src');
+
+          // Only flag as violation if the resolved path is outside the src folder
+          if (!resolvedPath.startsWith(srcRoot + path.sep) && resolvedPath !== srcRoot) {
+            violations.push(`${file}: ${importPath}`);
+          }
+        }
+      }
+
+      // Also check for dynamic imports that go outside the src folder
+      const dynamicImportRegex = /import\s*\(\s*['"]([^'"]+)['"]\s*\)/g;
+      while ((match = dynamicImportRegex.exec(content)) !== null) {
+        const importPath = match[1];
+
+        if (importPath.startsWith('../')) {
+          const resolvedPath = path.resolve(path.dirname(filePath), importPath);
+          const srcRoot = path.resolve(__dirname, '..', 'src');
+
+          if (!resolvedPath.startsWith(srcRoot + path.sep) && resolvedPath !== srcRoot) {
+            violations.push(`${file}: ${importPath} (dynamic import)`);
+          }
+        }
+      }
+    }
+
+    console.log(violations);
+
+    expect(violations).toHaveLength(0);
+  });
+});

package/src/security/AuthorizedContent/index.tsx

@@ -0,0 +1,77 @@
+import { JSX, useEffect } from 'react';
+
+import { CompanyRole, GlobalRole, TenantRole } from '@smartbooks-ai/api-client';
+
+import { State } from './state';
+import { useAuthorizationState } from './useAuthorizationState';
+
+import { ProfileState, useProfile } from '../../security/ProfileContext';
+import { assertNever } from '../../utils/assertNever';
+
+type Props = {
+  requireCompanyRole?: CompanyRole;
+  requireTenantRole?: TenantRole;
+  requireGlobalRole?: GlobalRole;
+  companyCode?: string;
+  tenantCode?: string;
+  children?: React.ReactNode;
+  errorElement?: JSX.Element;
+  loadingElement?: JSX.Element;
+  notLoggedInElement?: JSX.Element;
+  unauthorizedElement?: React.ReactNode;
+  shouldInitiateLogin?: boolean;
+};
+
+const AuthorizedContent: React.FC<Props> = ({
+  children,
+  companyCode,
+  errorElement,
+  shouldInitiateLogin,
+  loadingElement,
+  notLoggedInElement,
+  requireCompanyRole,
+  requireGlobalRole,
+  requireTenantRole,
+  tenantCode,
+  unauthorizedElement,
+}) => {
+  const { state, initiateLogin } = useProfile();
+
+  const authorizationState = useAuthorizationState({
+    companyCode,
+    companyRole: requireCompanyRole,
+    globalRole: requireGlobalRole,
+    tenantCode,
+    tenantRole: requireTenantRole,
+  });
+
+  useEffect(() => {
+    if (state === ProfileState.notLoggedIn && shouldInitiateLogin) {
+      initiateLogin();
+    }
+  }, [initiateLogin, shouldInitiateLogin, state]);
+
+  useEffect(() => {
+    if (authorizationState === State.needsProfileLinking) {
+      window.location.href = '/link-identities'; // Cannot use navigate outside of a RouterContext
+    }
+  }, [authorizationState]);
+
+  switch (authorizationState) {
+    case State.loading:
+    case State.needsProfileLinking:
+      return loadingElement;
+    case State.authorized:
+      return children;
+    case State.notLoggedIn:
+      return notLoggedInElement;
+    case State.unauthorized:
+      return unauthorizedElement;
+    case State.error:
+      return errorElement;
+    default:
+      return assertNever(authorizationState);
+  }
+};
+
+export { AuthorizedContent };

package/src/security/AuthorizedContent/state.ts

@@ -0,0 +1,8 @@
+export enum State {
+  loading,
+  authorized,
+  unauthorized,
+  error,
+  notLoggedIn,
+  needsProfileLinking,
+}

package/src/security/AuthorizedContent/useAuthorizationState.ts

@@ -0,0 +1,42 @@
+import { CompanyRole, GlobalRole, TenantRole } from '@smartbooks-ai/api-client';
+
+import { State } from './state';
+
+import { useIsAuthorized } from '../../hooks/useIsAuthorized';
+import { ProfileState, useProfile } from '../../security/ProfileContext';
+
+type Input = {
+  companyRole?: CompanyRole;
+  tenantCode?: string;
+  companyCode?: string;
+  tenantRole?: TenantRole;
+  globalRole?: GlobalRole;
+};
+
+export const useAuthorizationState = ({
+  companyCode,
+  companyRole,
+  globalRole,
+  tenantCode,
+  tenantRole,
+}: Input): State => {
+  const { profile, state } = useProfile();
+
+  const getIsAuthorized = useIsAuthorized();
+
+  if (profile) {
+    return getIsAuthorized({ companyCode, companyRole, globalRole, tenantCode, tenantRole })
+      ? State.authorized
+      : State.unauthorized;
+  }
+  switch (state) {
+    case ProfileState.notLoggedIn:
+      return State.notLoggedIn;
+    case ProfileState.loading:
+      return State.loading;
+    case ProfileState.needsLinking:
+      return State.needsProfileLinking;
+    default:
+      return State.error;
+  }
+};

package/src/security/ProfileContext/ProfileContext.tsx

@@ -0,0 +1,37 @@
+import { createContext } from 'react';
+
+import { ProfileState } from './types';
+
+import { UserProfile } from '../UserProfile';
+
+export type InitiateLoginArgs = {
+  forceSignUp?: boolean;
+  forceSignIn?: boolean;
+  returnTo?: string;
+  loginHint?: string;
+  connection?: string;
+};
+
+export type PrimaryProfileInformation = {
+  connection: string;
+  canUseLoginHint: boolean;
+};
+
+export type ProfileContextValue = {
+  profile: UserProfile | null;
+  state: ProfileState;
+  primaryProfileInformation?: PrimaryProfileInformation;
+  initiateLogin: (args?: InitiateLoginArgs) => void;
+  reload: () => void;
+};
+
+const unsetFn = () => {
+  throw new Error('Unable interact before initializing the profile provider');
+};
+
+export const ProfileContext = createContext<ProfileContextValue>({
+  profile: null,
+  state: ProfileState.loading,
+  initiateLogin: unsetFn,
+  reload: unsetFn,
+});

package/src/security/ProfileContext/index.ts

@@ -0,0 +1,4 @@
+export { UserProfile } from '../UserProfile';
+export { useProfile } from './useProfile';
+export { ProfileState } from './types';
+export * from './ProfileContext';

package/src/security/ProfileContext/types.ts

@@ -0,0 +1,7 @@
+export enum ProfileState {
+  loading,
+  loaded,
+  notLoggedIn,
+  error,
+  needsLinking,
+}

package/src/security/ProfileContext/useProfile.tsx

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+
+import { ProfileContext } from './ProfileContext';
+
+export function useProfile() {
+  return useContext(ProfileContext);
+}

package/src/security/UserProfile.ts

@@ -0,0 +1,48 @@
+import { AvailableCompany, AvailableTenant, GlobalRole, Profile } from '@smartbooks-ai/api-client';
+
+export class UserProfile {
+  displayName: string;
+  email: string;
+  allowedTenants: AvailableTenant[];
+  allowedCompanies: AvailableCompany[];
+  globalRoles: GlobalRole[];
+  userId: string;
+
+  constructor(
+    userId: string,
+    displayName: string,
+    email: string,
+    allowedTenants: AvailableTenant[],
+    globalRoles: GlobalRole[],
+  ) {
+    this.userId = userId;
+    this.displayName = displayName;
+    this.email = email;
+    this.allowedTenants = allowedTenants;
+    this.globalRoles = globalRoles;
+    this.allowedCompanies = allowedTenants
+      .flatMap((t) => t.companies)
+      .sort((a, b) => a.description.localeCompare(b.description));
+  }
+
+  public static create(
+    given_name: string | undefined,
+    family_name: string | undefined,
+    email_address: string | undefined,
+    profileResponse: Profile,
+  ) {
+    const firstName = given_name;
+    const lastName = family_name;
+    const email = email_address || 'Email Unknown';
+
+    const displayName = firstName || lastName ? `${firstName} ${lastName}`.trim() : email;
+
+    return new UserProfile(
+      profileResponse.userId,
+      displayName,
+      email,
+      profileResponse.tenants,
+      profileResponse.globalRoles,
+    );
+  }
+}

package/src/security/index.ts

@@ -0,0 +1,2 @@
+export * from './ProfileContext';
+export * from './AuthorizedContent';

package/src/theme/colorPrimitives.ts

@@ -0,0 +1,107 @@
+import { ColorPrimitives } from '../emotion';
+
+export const colorPrimitives: ColorPrimitives = {
+  darkNavy: {
+    '50': '#E6E8EC',
+    '100': '#CBCCD9',
+    '200': '#B2B5C6',
+    '300': '#989BB2',
+    '400': '#7E82A0',
+    '500': '#65698B',
+    '600': '#4E5376',
+    '700': '#373B60',
+    '800': '#20244A',
+    '900': '#120A32',
+    '950': '#0E0828',
+  },
+  coolMint: {
+    '50': '#ECF7F7',
+    '100': '#DAEEEF',
+    '200': '#C7E6E7',
+    '300': '#B5DEDF',
+    '400': '#A2D6D7',
+    '500': '#8FCDCF',
+    '600': '#7DC5C7',
+    '700': '#6ABDBF',
+    '800': '#58B4B7',
+    '900': '#45ACAF',
+    '950': '#3E9B9E',
+  },
+  coral: {
+    '50': '#FFF2ED',
+    '100': '#FEE5DB',
+    '200': '#FED8C9',
+    '300': '#FDCBB7',
+    '400': '#FDBEA6',
+    '500': '#FCB194',
+    '600': '#FCA482',
+    '700': '#FB9770',
+    '800': '#FB8A5E',
+    '900': '#FA7D4C',
+    '950': '#E17144',
+  },
+  navy: {
+    '50': '#E8EDF9',
+    '100': '#D0DCF3',
+    '200': '#B9CAEC',
+    '300': '#A1B9E6',
+    '400': '#8AA7E0',
+    '500': '#7395DA',
+    '600': '#5B84D4',
+    '700': '#4472CD',
+    '800': '#2C61C7',
+    '900': '#154FC1',
+    '950': '#1347AE',
+  },
+  skyBlue: {
+    '50': '#ECF9FB',
+    '100': '#D9F2F8',
+    '200': '#C6ECF4',
+    '300': '#B3E5F1',
+    '400': '#A0DFED',
+    '500': '#8CD9E9',
+    '600': '#79D2E6',
+    '700': '#66CCE2',
+    '800': '#53C5DF',
+    '900': '#40BFDB',
+    '950': '#3AACC5',
+  },
+  grey: {
+    '50': '#FAFAFA',
+    '100': '#FAF9F9',
+    '200': '#F0EFEF',
+    '300': '#E1E0E0',
+    '400': '#C8C7C7',
+    '500': '#AFAEAE',
+    '600': '#969595',
+    '700': '#7D7D7D',
+    '800': '#4E4E4E',
+    '900': '#383838',
+    '950': '#222222',
+  },
+  common: {
+    black: '#000000',
+    white: '#ffffff',
+  },
+  warning: {
+    '100': '#FEF7F0',
+    '300': '#FCE6CF',
+    '600': '#F7B46E',
+    '900': '#DF770C',
+    '950': '#B25F0A',
+  },
+  error: {
+    '100': '#FDF2F1',
+    '300': '#F9D2D2',
+    '600': '#EE7877',
+    '900': '#D11C1A',
+    '950': '#A71615',
+  },
+  success: {
+    '100': '#F1F8F6',
+    '300': '#D9F2E8',
+    '600': '#88DDBC',
+    '900': '#26A675',
+    '950': '#1E855E',
+  },
+};

package/src/theme/colors.ts

@@ -0,0 +1,78 @@
+import { Theme } from '@emotion/react';
+
+import { colorPrimitives } from './colorPrimitives';
+
+export const colors: Theme['my']['colors'] = {
+  primitives: colorPrimitives,
+  text: {
+    main: colorPrimitives.darkNavy[800],
+    light: colorPrimitives.darkNavy[600],
+    lighter: colorPrimitives.darkNavy[400],
+    disabled: colorPrimitives.grey[600],
+    placeholder: colorPrimitives.grey[400],
+    white: colorPrimitives.common.white,
+  },
+  primary: {
+    main: colorPrimitives.darkNavy[900],
+    light: colorPrimitives.darkNavy[600],
+    dark: colorPrimitives.darkNavy[950],
+    contrast: colorPrimitives.common.white,
+  },
+  secondary: {
+    main: colorPrimitives.coolMint[900],
+    light: colorPrimitives.coolMint[600],
+    dark: colorPrimitives.coolMint[950],
+    contrast: colorPrimitives.common.white,
+  },
+  tertiary: {
+    main: colorPrimitives.coral[900],
+    light: colorPrimitives.coral[600],
+    dark: colorPrimitives.coral[950],
+    contrast: colorPrimitives.common.white,
+  },
+  quaternary: {
+    main: colorPrimitives.navy[900],
+    light: colorPrimitives.navy[600],
+    dark: colorPrimitives.navy[950],
+    contrast: colorPrimitives.common.white,
+  },
+  quinary: {
+    main: colorPrimitives.skyBlue[900],
+    light: colorPrimitives.skyBlue[600],
+    dark: colorPrimitives.skyBlue[950],
+    contrast: colorPrimitives.common.white,
+  },
+  neutral: {
+    main: colorPrimitives.grey[900],
+    light: colorPrimitives.grey[500],
+    dark: colorPrimitives.grey[950],
+    contrast: colorPrimitives.common.white,
+  },
+  warning: {
+    main: colorPrimitives.warning[900],
+    light: colorPrimitives.warning[600],
+    dark: colorPrimitives.warning[950],
+    contrast: colorPrimitives.common.white,
+  },
+  error: {
+    main: colorPrimitives.error[900],
+    light: colorPrimitives.error[600],
+    dark: colorPrimitives.error[950],
+    contrast: colorPrimitives.common.white,
+  },
+  success: {
+    main: colorPrimitives.success[900],
+    light: colorPrimitives.success[600],
+    dark: colorPrimitives.success[950],
+    contrast: colorPrimitives.common.white,
+  },
+  background: {
+    white: colorPrimitives.common.white,
+    lightGrey: colorPrimitives.grey[50],
+    transparent: 'transparent',
+    light: colorPrimitives.darkNavy[50],
+    hover: 'rgb(255 255 255 / 8%)',
+    hoverDark: 'rgb(0 0 0 / 8%)',
+    hoverDarkNonTransparent: '#ebebeb',
+  },
+};

package/src/theme/font.ts

@@ -0,0 +1,27 @@
+import { Theme } from '@emotion/react';
+
+export const FONT_FAMILY = 'Arial, sans-serif';
+
+export const font: Theme['my']['font'] = {
+  h1: `        600 1.5rem/2       ${FONT_FAMILY}`,
+  h2: `        700 1.25rem/1.75   ${FONT_FAMILY}`,
+  h3: `        700 1.125rem/1.5   ${FONT_FAMILY}`,
+  h4: `        700 1rem/1.25      ${FONT_FAMILY}`,
+  h5: `        700 0.875rem/1.25  ${FONT_FAMILY}`,
+  h6: `        700 0.8125rem/1    ${FONT_FAMILY}`,
+  subtitle1: ` 500 1.25rem/1.75   ${FONT_FAMILY}`,
+  subtitle2: ` 500 1rem/1.5       ${FONT_FAMILY}`,
+  body1: `     400 1rem/1.5       ${FONT_FAMILY}`,
+  body2: `     400 0.875rem/1.25  ${FONT_FAMILY}`,
+  body3: `     400 0.8125rem/1    ${FONT_FAMILY}`,
+  highlight1: `700 1rem/1.5       ${FONT_FAMILY}`,
+  highlight2: `700 0.875rem/1.25  ${FONT_FAMILY}`,
+  highlight3: `500 0.8125rem/1    ${FONT_FAMILY}`,
+  button1: `   500 0.875rem/1.5   ${FONT_FAMILY}`,
+  button2: `   500 0.875rem/1.25  ${FONT_FAMILY}`,
+  caption: `   400 1rem/1.5       ${FONT_FAMILY}`,
+  overline: `  500 1rem/1.5       ${FONT_FAMILY}`,
+  label: `     500 0.875rem/1.25  ${FONT_FAMILY}`,
+  nav1: `      400 0.8125rem/1.25 ${FONT_FAMILY}`,
+  nav2: `      700 0.8125rem/1.25 ${FONT_FAMILY}`,
+};