refactor(mosaic): centralize shared constants

Author: alexcarpenter

.changeset/mosaic-shared-constants.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/AGENTS.md

@@ -54,6 +54,9 @@ Most problems a feature hits already have a shared answer. Find the row for your
 | An inline message row; height is undefined until measured                | `useHeldMessage`, `useMessageHeight`, `FeedbackBody` (`src/utils/feedback.tsx`) + `src/styles/feedback.styles.ts` |
 | Data read from a Clerk resource that should be cached across mounts      | A query hook in `src/queries/`, called from the model (`src/queries/use-user-sessions-query.ts`)                  |
 | An item changed in place in an infinite list, kept until the next reload | `replaceInPages` (`src/utils/infinite-pages.ts`), passed to the list's `setData`                                  |
+| An organization permission checked with `checkAuthorization`             | `ORGANIZATION_PERMISSIONS` (`src/utils/permissions.ts`)                                                           |
+| A verification code's length or resend cooldown                          | `CODE_LENGTH`, `CODE_RESEND_SECONDS` (`src/utils/verification.ts`)                                                |
+| An avatar or logo file picker and its rejection errors                   | `AVATAR_UPLOAD`, `AVATAR_REJECTION_ERRORS` (`src/utils/avatar-upload.ts`)                                         |
 | Siblings that slide when an item is added or removed                     | `useLayoutAnimation` (`src/primitives/hooks/`)                                                                    |
 | An input that reformats as the user types without moving the caret       | `useFormattedInput` (`src/primitives/hooks/`)                                                                     |
 | An interaction with an async lifecycle or two values that move together  | A machine in the controller file, via `setup()` (`src/machine/`)                                                  |

packages/mosaic/src/components/otp/otp.tsx

@@ -7,6 +7,7 @@ import type { MosaicStyleProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { inputStyles } from '../../styles/input.styles';
 import { reset } from '../../styles/reset.styles';
+import { CODE_LENGTH } from '../../utils/verification';
 import { useOptionalFieldControlProps } from '../field/field.context';
 import { styles } from './otp.styles';
 
@@ -52,7 +53,7 @@ function OtpSlots({ status, firstSlotRef }: { status: OtpStatus; firstSlotRef: R
  */
 export const Otp = React.forwardRef<HTMLInputElement, OtpProps>(function MosaicOtp(
   {
-    length = 6,
+    length = CODE_LENGTH,
     status: statusProp,
     disabled: disabledProp,
     required: requiredProp,

packages/mosaic/src/features/api-keys/api-keys-table.model.ts

@@ -6,20 +6,19 @@ import { useEffect, useRef } from 'react';
 
 import { useMosaicEnvironment } from '../../hooks/use-mosaic-environment';
 import { save } from '../../utils/errors';
+import { ORGANIZATION_PERMISSIONS } from '../../utils/permissions';
 import type { APIKeyRecord } from './api-keys-table.types';
 import type { CreateAPIKeyInput } from './create-api-key.controller';
 
 export const PAGE_SIZE = 10;
-const READ_PERMISSION = 'org:sys_api_keys:read';
-const MANAGE_PERMISSION = 'org:sys_api_keys:manage';
 
 export function useAPIKeysAccess(subject: string | undefined) {
   const { isLoaded, session } = useSession();
   const settings = useMosaicEnvironment()?.apiKeysSettings;
   const isOrganization = subject !== undefined && isOrganizationId(subject);
   const can = (permission: string) => !isOrganization || (session?.checkAuthorization({ permission }) ?? false);
-  const canRead = can(READ_PERMISSION);
-  const canManage = can(MANAGE_PERMISSION);
+  const canRead = can(ORGANIZATION_PERMISSIONS.apiKeysRead);
+  const canManage = can(ORGANIZATION_PERMISSIONS.apiKeysManage);
   const isAvailable =
     subject !== undefined &&
     (isOrganization

packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.model.ts

@@ -2,6 +2,7 @@ import { useOrganization, useOrganizationList, useSession, useUser } from '@cler
 
 import { useMosaicEnvironment } from '../../../hooks/use-mosaic-environment';
 import { useMosaicRouter } from '../../../hooks/use-mosaic-router';
+import { ORGANIZATION_PERMISSIONS } from '../../../utils/permissions';
 import { useOrganizationProfileOptions } from '../organization-profile.provider';
 
 const organizationListParams = {
@@ -50,7 +51,7 @@ export function useOrganizationProfileDangerSectionModel(): OrganizationProfileD
   const canDelete =
     Boolean(membership) &&
     organization.adminDeleteEnabled &&
-    (session?.checkAuthorization({ permission: 'org:sys_profile:delete' }) ?? false);
+    (session?.checkAuthorization({ permission: ORGANIZATION_PERMISSIONS.profileDelete }) ?? false);
 
   return {
     status: 'ready',

packages/mosaic/src/features/organization-profile/organization-profile-members-panel/invitations-table-tab.model.ts

@@ -3,10 +3,10 @@ import { useClerk, useOrganization, useSession } from '@clerk/shared/react';
 import type { ClerkAPIError, OrganizationInvitationResource } from '@clerk/shared/types';
 
 import { save } from '../../../utils/errors';
+import { ORGANIZATION_PERMISSIONS } from '../../../utils/permissions';
 import type { MembersRoles } from './members-table-tab.types';
 
 const PAGE_SIZE = 10;
-const MANAGE_PERMISSION = 'org:sys_memberships:manage';
 
 export interface InviteMembersInput {
   emailAddresses: string[];
@@ -18,7 +18,7 @@ export interface InviteMembersInput {
 export function useInvitationsTableModel() {
   const clerk = useClerk();
   const { session } = useSession();
-  const canManage = session?.checkAuthorization({ permission: MANAGE_PERMISSION }) ?? false;
+  const canManage = session?.checkAuthorization({ permission: ORGANIZATION_PERMISSIONS.membershipsManage }) ?? false;
   const { organization, invitations } = useOrganization({
     invitations: canManage ? { pageSize: PAGE_SIZE, keepPreviousData: true } : undefined,
   });

packages/mosaic/src/features/organization-profile/organization-profile-members-panel/members-table-tab.model.ts

@@ -3,16 +3,15 @@ import { useOrganization, useSession } from '@clerk/shared/react';
 import type { OrganizationMembershipResource } from '@clerk/shared/types';
 import { useEffect, useRef } from 'react';
 
+import { ORGANIZATION_PERMISSIONS } from '../../../utils/permissions';
 import type { MembersRoles, OrganizationProfileMember } from './members-table-tab.types';
 
 const PAGE_SIZE = 10;
-const READ_PERMISSION = 'org:sys_memberships:read';
-const MANAGE_PERMISSION = 'org:sys_memberships:manage';
 
 export function useMembersTableModel(query: string) {
   const { session } = useSession();
-  const canRead = session?.checkAuthorization({ permission: READ_PERMISSION }) ?? false;
-  const canManage = session?.checkAuthorization({ permission: MANAGE_PERMISSION }) ?? false;
+  const canRead = session?.checkAuthorization({ permission: ORGANIZATION_PERMISSIONS.membershipsRead }) ?? false;
+  const canManage = session?.checkAuthorization({ permission: ORGANIZATION_PERMISSIONS.membershipsManage }) ?? false;
   const { organization, memberships } = useOrganization({
     memberships: canRead ? { pageSize: PAGE_SIZE, keepPreviousData: true, query: query || undefined } : undefined,
   });

packages/mosaic/src/features/organization-profile/organization-profile-members-panel/organization-profile-members-panel.model.ts

@@ -2,20 +2,19 @@ import { useOrganization, useSession } from '@clerk/shared/react';
 
 import { useMosaicEnvironment } from '../../../hooks/use-mosaic-environment';
 import { useOrganizationRolesQuery } from '../../../queries/use-organization-roles-query';
+import { ORGANIZATION_PERMISSIONS } from '../../../utils/permissions';
 import type { MembersPanelRoles } from './members-table-tab.types';
 
-const READ_PERMISSION = 'org:sys_memberships:read';
-const MANAGE_PERMISSION = 'org:sys_memberships:manage';
-
 export function useMembersPanelAccessModel() {
   const { isLoaded, organization } = useOrganization();
   const { isLoaded: isSessionLoaded, session } = useSession();
   const environment = useMosaicEnvironment();
   if (!isLoaded || !isSessionLoaded || !environment) {
     return { status: 'loading' as const };
   }
-  const canReadMembers = session?.checkAuthorization({ permission: READ_PERMISSION }) ?? false;
-  const canManageInvitations = session?.checkAuthorization({ permission: MANAGE_PERMISSION }) ?? false;
+  const canReadMembers = session?.checkAuthorization({ permission: ORGANIZATION_PERMISSIONS.membershipsRead }) ?? false;
+  const canManageInvitations =
+    session?.checkAuthorization({ permission: ORGANIZATION_PERMISSIONS.membershipsManage }) ?? false;
   const canManageRequests = canManageInvitations && environment.organizationSettings.domains.enabled;
   if (!organization || !session || (!canReadMembers && !canManageInvitations)) {
     return { status: 'hidden' as const };

packages/mosaic/src/features/organization-profile/organization-profile-profile-section/organization-profile-logo-row.view.tsx

@@ -9,19 +9,11 @@ import { Pen } from '../../../icons/glyphs/pen';
 import { X } from '../../../icons/glyphs/x';
 import type { LocalizableError } from '../../../localization';
 import { useErrorText, useMessages } from '../../../localization';
-import type { FileRejection, FileRejectionReason } from '../../../primitives/file-upload';
+import type { FileRejection } from '../../../primitives/file-upload';
 import { FileUpload } from '../../../primitives/file-upload';
+import { AVATAR_REJECTION_ERRORS, AVATAR_UPLOAD } from '../../../utils/avatar-upload';
 import { useOrganizationProfileLogoController } from './organization-profile-logo.controller';
 
-const LOGO_MIME_TYPES = 'image/png,image/jpeg,image/gif,image/webp';
-const LOGO_MAX_BYTES = 10 * 1000 * 1000;
-
-const REJECTION_ERRORS: Record<FileRejectionReason, LocalizableError> = {
-  accept: { code: 'avatar_file_type_invalid' },
-  size: { code: 'avatar_file_size_exceeded' },
-  overflow: { code: 'avatar_file_count_exceeded' },
-};
-
 interface OrganizationProfileLogoRowViewProps {
   name: string;
   imageUrl?: string;
@@ -62,12 +54,11 @@ export function OrganizationProfileLogoRowView({
     <FileUpload.Root
       disabled={logo.isPending}
       aria-busy={logo.isPending || undefined}
-      accept={LOGO_MIME_TYPES}
-      maxSize={LOGO_MAX_BYTES}
+      {...AVATAR_UPLOAD}
       render={<Section.Row />}
       onReject={rejections => {
         const rejected = rejections[0];
-        setRejection(rejected ? REJECTION_ERRORS[rejected.reason] : undefined);
+        setRejection(rejected ? AVATAR_REJECTION_ERRORS[rejected.reason] : undefined);
         onReject?.(rejections);
       }}
       onValueChange={files => {

packages/mosaic/src/features/organization-profile/organization-profile-profile-section/organization-profile-profile-section.model.ts

@@ -3,6 +3,7 @@ import type { OrganizationResource } from '@clerk/shared/types';
 
 import { useMosaicEnvironment } from '../../../hooks/use-mosaic-environment';
 import { save, SaveError, UNEXPECTED_ERROR } from '../../../utils/errors';
+import { ORGANIZATION_PERMISSIONS } from '../../../utils/permissions';
 import type { OrganizationProfileProfileSectionViewProps } from './organization-profile-profile-section.view';
 
 type OrganizationProfileProfileSectionModel =
@@ -25,7 +26,8 @@ export function useOrganizationProfileProfileSectionModel(): OrganizationProfile
 
   const organizationId = organization.id;
   const canManage =
-    Boolean(membership) && (session?.checkAuthorization({ permission: 'org:sys_profile:manage' }) ?? false);
+    Boolean(membership) &&
+    (session?.checkAuthorization({ permission: ORGANIZATION_PERMISSIONS.profileManage }) ?? false);
   const currentOrganization = (): OrganizationResource => {
     const current = clerk.organization;
     if (!current || current.id !== organizationId) {