@smartbooks-ai/layout 0.0.6 → 0.0.8

package/src/components/PageWithMenuLayout/styles.ts

@@ -1,110 +0,0 @@
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import MuiDrawer, { drawerClasses } from '@mui/material/Drawer';
-import MuiIconButton from '@mui/material/IconButton';
-import MenuList from '@mui/material/MenuList';
-
-import { shouldNotForwardPropsWithKeys } from '../../utils/shouldNotForwardPropsWithKeys';
-
-const drawerOpenWidthRem = 15.625;
-const drawerClosedWidthRem = 3.75;
-
-export const Drawer = styled(MuiDrawer)`
-  flex-shrink: 0;
-
-  overflow-x: hidden;
-  .${drawerClasses.paper} {
-    width: ${({ open }) => (open ? drawerOpenWidthRem : drawerClosedWidthRem)}rem;
-
-    padding: ${({ theme }) => theme.my.spacing.xs};
-
-    overflow: hidden;
-
-    background-color: ${({ theme }) => theme.my.colors.primary.main};
-    border: unset;
-
-    transition: width 0.3s;
-  }
-`;
-
-export const Header = styled.div`
-  display: flex;
-
-  column-gap: ${({ theme }) => theme.my.spacing.xxs};
-  align-items: center;
-
-  width: max-content;
-  min-width: 100%;
-
-  padding-bottom: ${({ theme }) => theme.my.spacing.xs};
-
-  overflow: hidden;
-`;
-
-export const LogoContainer = styled.div`
-  display: flex;
-
-  align-items: center;
-  justify-content: center;
-
-  width: 2.25rem;
-  height: 2.25rem;
-`;
-
-type LockMenuButtonProps = {
-  isExpanded: boolean;
-};
-export const LockMenuButton = styled(
-  MuiIconButton,
-  shouldNotForwardPropsWithKeys<LockMenuButtonProps>(['isExpanded']),
-)<LockMenuButtonProps>(
-  ({ theme, isExpanded }) => css`
-    position: absolute;
-    top: ${theme.my.spacing.sm};
-    left: ${isExpanded ? drawerOpenWidthRem : drawerClosedWidthRem}rem;
-    z-index: ${(theme.zIndex?.drawer ?? 0) + 1};
-
-    padding: ${theme.my.spacing.xxxs};
-
-    font-size: 1rem;
-
-    color: ${theme.my.colors.text.white};
-
-    background-color: ${theme.my.colors.primitives.darkNavy[700]};
-    border-radius: ${theme.my.radius.xxl};
-
-    transform: translateX(-50%) rotate(${isExpanded ? 0 : 180}deg);
-
-    transition: 0.3s;
-
-    &:hover {
-      background-color: ${theme.my.colors.primitives.darkNavy[600]};
-    }
-  `,
-);
-
-export const TopMenuList = styled(MenuList)`
-  display: flex;
-
-  flex: 1;
-  flex-direction: column;
-
-  gap: ${({ theme }) => theme.my.spacing.xxxs};
-
-  overflow: hidden auto;
-`;
-
-type MainProps = {
-  isLocked: boolean;
-};
-export const Main = styled('div', shouldNotForwardPropsWithKeys<MainProps>(['isLocked']))<MainProps>`
-  position: relative;
-
-  flex-grow: 1;
-
-  margin-left: ${({ isLocked }) => (isLocked ? drawerOpenWidthRem : drawerClosedWidthRem)}rem;
-
-  overflow: auto;
-
-  transition: margin 0.3s;
-`;

package/src/components/PageWithMenuLayout/types.ts

@@ -1,7 +0,0 @@
-export type MenuItem = {
-  title: string;
-  icon?: React.ReactNode;
-  skipHeader?: boolean;
-} & ({ children: MenuItem[] } | { href: string } | { onClick: () => void });
-
-export type MenuStructure = MenuItem[];

package/src/components/PageWithMenuLayout/useMenuToggle.ts

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

package/src/components/index.ts

@@ -1,3 +0,0 @@
-export * from './PageWithMenuLayout';
-export * from './PageHeader';
-export * from './PageWithMenuLayout/types';

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';