@smartbooks-ai/layout 0.0.6 → 0.0.7

package/src/emotion.d.ts

@@ -1,76 +0,0 @@
-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

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

package/src/hooks/useIsAuthorized.ts

@@ -1,35 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

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

package/src/security/AuthorizedContent/useAuthorizationState.ts

@@ -1,42 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

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

package/src/security/ProfileContext/types.ts

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

package/src/security/ProfileContext/useProfile.tsx

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

package/src/security/UserProfile.ts

@@ -1,48 +0,0 @@
-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

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

package/src/theme/colorPrimitives.ts

@@ -1,107 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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}`,
-};