From 8e82959bbe43c3de38770b069d33d7033b4a0945 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Fri, 2 Oct 2026 10:40:30 -0400 Subject: [PATCH] refactor(mosaic): organize styles, test helpers, and file naming --- .changeset/organize-mosaic-internals.md | 2 + .claude/skills/mosaic/references/stylex.md | 4 +- .claude/skills/mosaic/references/testing.md | 2 +- .../test-utils.ts => __tests__/async.ts} | 0 .../mosaic/src/__tests__/feature/render.tsx | 2 +- .../src/__tests__/localization.test.tsx | 2 +- ....test.tsx => mosaic-provider.ssr.test.tsx} | 2 +- ...ider.test.tsx => mosaic-provider.test.tsx} | 2 +- .../confirmation.controller.test.ts | 2 +- .../confirmation/confirmation.controller.ts | 2 +- .../blocks/confirmation/confirmation.test.tsx | 2 +- .../destructive.controller.test.ts | 2 +- .../blocks/destructive/destructive.test.tsx | 2 +- .../src/components/action-bar/action-bar.tsx | 4 +- .../action-menu/action-menu.test.tsx | 2 +- .../mosaic/src/components/avatar/avatar.tsx | 4 +- .../mosaic/src/components/badge/badge.tsx | 2 +- .../mosaic/src/components/banner/banner.tsx | 2 +- .../src/components/branding/branding.tsx | 4 +- .../mosaic/src/components/button/button.tsx | 4 +- .../mosaic/src/components/button/index.ts | 2 +- .../src/components/button/submit-button.tsx | 6 +- packages/mosaic/src/components/card/card.tsx | 2 +- .../src/components/checkbox/checkbox.tsx | 4 +- .../src/components/combobox/combobox.tsx | 2 +- .../components/data-list/data-list.test.tsx | 2 +- .../src/components/data-list/data-list.tsx | 4 +- .../mosaic/src/components/dialog/dialog.tsx | 6 +- .../src/components/drawer/drawer.test.tsx | 2 +- .../mosaic/src/components/drawer/drawer.tsx | 2 +- .../components/empty-state/empty-state.tsx | 2 +- .../mosaic/src/components/field/field.tsx | 8 +-- packages/mosaic/src/components/flow/flow.tsx | 2 +- .../form/use-form.edit-password.test.ts | 15 +++-- .../src/components/form/use-form.test.ts | 60 ++++++++----------- .../mosaic/src/components/form/use-form.ts | 2 +- .../mosaic/src/components/heading/heading.tsx | 6 +- .../mosaic/src/components/icon/icon-frame.tsx | 2 +- .../mosaic/src/components/icon/icon.test.tsx | 2 +- packages/mosaic/src/components/icon/icon.tsx | 2 +- .../components/input-group/input-group.tsx | 4 +- .../mosaic/src/components/input/input.tsx | 4 +- packages/mosaic/src/components/item/item.tsx | 6 +- packages/mosaic/src/components/menu/menu.tsx | 6 +- packages/mosaic/src/components/otp/otp.tsx | 4 +- .../components/pagination/pagination.test.tsx | 2 +- .../src/components/pagination/pagination.tsx | 4 +- .../src/components/panel/panel.test.tsx | 2 +- .../mosaic/src/components/panel/panel.tsx | 4 +- .../components/phone-input/phone-input.tsx | 2 +- .../mosaic/src/components/popover/popover.tsx | 4 +- .../src/components/profile/profile.test.tsx | 2 +- .../mosaic/src/components/profile/profile.tsx | 4 +- .../scroll-area/scroll-area.styles.ts | 2 +- .../mosaic/src/components/section/section.tsx | 6 +- .../mosaic/src/components/select/select.tsx | 6 +- .../mosaic/src/components/table/table.tsx | 2 +- packages/mosaic/src/components/tabs/tabs.tsx | 4 +- .../src/components/tag-input/tag-input.tsx | 6 +- .../mosaic/src/components/text/text.test.tsx | 2 +- packages/mosaic/src/components/text/text.tsx | 6 +- .../src/components/toast/toast.test.tsx | 2 +- .../mosaic/src/components/toast/toast.tsx | 4 +- .../mosaic/src/components/tooltip/tooltip.tsx | 4 +- .../visually-hidden/visually-hidden.tsx | 4 +- .../invitations-table-tab.view.test.tsx | 4 +- .../__tests__/members-table-tab.view.test.tsx | 4 +- ...ation-profile-api-keys-panel.view.test.tsx | 4 +- ...zation-profile-general-panel.view.test.tsx | 2 +- ...ion-profile-invite-members.dialog.test.tsx | 2 +- .../organization-profile.view.test.tsx | 2 +- .../requests-table-tab.view.test.tsx | 4 +- .../invitations-table-tab.view.tsx | 2 +- .../members-table-tab.view.tsx | 2 +- ...ganization-profile-api-keys-panel.view.tsx | 4 +- ...nization-profile-create-api-key.dialog.tsx | 2 +- ...zation-profile-danger-action.controller.ts | 2 +- ...anization-profile-edit-field.controller.ts | 2 +- .../organization-profile-slug-row.view.tsx | 2 +- .../requests-table-tab.view.tsx | 2 +- .../__tests__/reverification.feature.test.tsx | 2 +- .../use-reverification-with-state.test.tsx | 2 +- .../reverification.controller.ts | 2 +- .../reverification/reverification.model.tsx | 4 +- .../steps/reverification-method-picker.tsx | 2 +- .../__tests__/user-button.pages.test.tsx | 2 +- .../use-organization-list-in-view.ts} | 2 +- .../user-button/user-button-avatar.view.tsx | 2 +- .../user-button/user-button-header.view.tsx | 4 +- .../user-button/user-button-item.view.tsx | 6 +- .../user-button/user-button.controller.tsx | 4 +- .../user-button/user-button.model.tsx | 6 +- .../user-button/user-button.pages.tsx | 2 +- .../features/user-button/user-button.view.tsx | 6 +- .../user-profile/__tests__/mfa-test-utils.tsx | 2 +- .../user-profile-add-email.dialog.test.tsx | 2 +- ...ser-profile-add-email.integration.test.tsx | 2 +- .../user-profile-add-phone.dialog.test.tsx | 2 +- ...ser-profile-add-phone.integration.test.tsx | 2 +- .../user-profile-api-keys-panel.view.test.tsx | 2 +- ...-profile-authenticator-setup.view.test.tsx | 2 +- .../user-profile-billing-panel.view.test.tsx | 2 +- ...rofile-connected-accounts-actions.test.tsx | 2 +- ...ser-profile-contact-removal-focus.test.tsx | 2 +- ...rofile-delete-section.integration.test.tsx | 2 +- .../user-profile-device-actions.test.tsx | 2 +- .../user-profile-edit-name.controller.test.ts | 2 +- .../user-profile-edit-name.dialog.test.tsx | 2 +- ...r-profile-edit-username.controller.test.ts | 2 +- ...user-profile-edit-username.dialog.test.tsx | 2 +- .../user-profile-email-actions.test.tsx | 2 +- .../user-profile-mfa-cards.view.test.tsx | 2 +- .../user-profile-mfa-section.view.test.tsx | 4 +- ...ser-profile-passkeys-section.view.test.tsx | 2 +- .../user-profile-phone-actions.test.tsx | 2 +- .../user-profile-picture-row.view.test.tsx | 2 +- .../user-profile-profile-panel.view.test.tsx | 2 +- .../user-profile-security-panel.view.test.tsx | 2 +- ...-profile-verify-email-link.dialog.test.tsx | 2 +- ...r-profile-verify-email-sso.dialog.test.tsx | 2 +- .../user-profile-web3-actions.test.tsx | 2 +- .../__tests__/user-profile.view.test.tsx | 2 +- .../user-profile-add-email.controller.ts | 2 +- .../user-profile-add-phone.controller.ts | 2 +- .../user-profile-edit-name.controller.ts | 2 +- .../user-profile-edit-username.controller.ts | 2 +- .../user-profile-email-row.view.tsx | 2 +- .../user-profile-phone-row.view.tsx | 2 +- ...er-profile-active-devices-section.view.tsx | 2 +- .../user-profile-api-keys-panel.view.tsx | 4 +- .../user-profile-backup-codes.view.tsx | 2 +- ...r-profile-billing-history-section.view.tsx | 2 +- ...rofile-connected-accounts-section.view.tsx | 2 +- .../user-profile-create-api-key.dialog.tsx | 2 +- .../user-profile-mfa-section.view.tsx | 2 +- .../user-profile-passkeys-section.view.tsx | 2 +- ...r-profile-edit-password.controller.test.ts | 11 +--- .../user-profile-password-section.model.ts | 2 +- .../user-profile-rename-passkey.controller.ts | 2 +- ...user-profile-web3-wallets-section.view.tsx | 4 +- ...est.ts => use-accessible-warnings.test.ts} | 4 +- ...st.ts => use-mosaic-support-email.test.ts} | 4 +- ...inDelay.test.ts => use-spin-delay.test.ts} | 2 +- ... => use-accessible-description-warning.ts} | 0 ...ning.ts => use-accessible-name-warning.ts} | 0 .../hooks/{useInView.ts => use-in-view.ts} | 0 ...ovalFocus.ts => use-list-removal-focus.ts} | 0 ...vironment.ts => use-mosaic-environment.ts} | 0 ...seMosaicRouter.ts => use-mosaic-router.ts} | 0 ...rtEmail.ts => use-mosaic-support-email.ts} | 2 +- .../{useSpinDelay.ts => use-spin-delay.ts} | 0 packages/mosaic/src/index.ts | 2 +- packages/mosaic/src/machine/ADOPTION.md | 2 +- packages/mosaic/src/machine/README.md | 6 +- .../__tests__/delete-organization-machine.ts | 2 +- .../src/machine/__tests__/machine.test.ts | 19 +----- .../src/machine/__tests__/patterns.test.ts | 15 +---- ...eMachine.test.tsx => use-machine.test.tsx} | 16 ++--- .../__tests__/wizard-migration.test.tsx | 8 +-- .../{createActor.ts => create-actor.ts} | 0 .../{createMachine.ts => create-machine.ts} | 0 packages/mosaic/src/machine/setup.ts | 2 +- packages/mosaic/src/machine/types.test-d.ts | 4 +- .../machine/{useMachine.ts => use-machine.ts} | 2 +- ...e.test.ts => first-factor-machine.test.ts} | 6 +- ...achine.test.ts => sign-in-machine.test.ts} | 6 +- ...ctorMachine.ts => first-factor-machine.ts} | 0 .../{signInMachine.ts => sign-in-machine.ts} | 0 ...MosaicProvider.tsx => mosaic-provider.tsx} | 0 .../src/{utils => styles}/feedback.styles.ts | 0 .../{utils => styles}/focus-outline.styles.ts | 0 .../{utils => styles}/focus-outline.test.ts | 0 .../src/{utils => styles}/input.styles.ts | 0 .../src/{utils => styles}/reset.styles.ts | 0 .../src/{utils => styles}/reset.test.tsx | 0 .../src/{utils => styles}/rtl.styles.ts | 0 .../mosaic/src/{utils => styles}/rtl.test.tsx | 0 .../tooltip-surface.styles.ts | 0 .../{utils => styles}/typography.styles.ts | 0 .../src/{utils => styles}/typography.test.ts | 0 .../visually-hidden.styles.ts | 0 .../visually-hidden.test.tsx | 0 packages/mosaic/src/utils/feedback.tsx | 2 +- .../mosaic/src/utils/truncatable-label.tsx | 4 +- ...e.ts => truncate-text-with-end-visible.ts} | 0 .../src/app/(clerk)/live-user-button.tsx | 2 +- .../src/app/(clerk)/live/api-keys/page.tsx | 2 +- .../app/(clerk)/live/delete-account/page.tsx | 2 +- .../src/app/(clerk)/live/password/page.tsx | 2 +- .../app/(clerk)/live/reverification/page.tsx | 2 +- .../swingset/src/components/ChaosProvider.tsx | 2 +- .../user-profile-mfa-example.test.tsx | 2 +- .../stories/fixtures/user-profile-mfa.test.ts | 2 +- .../swingset/src/stories/icon.stories.tsx | 2 +- .../swingset/src/stories/localization.mdx | 2 +- .../src/stories/localization.stories.tsx | 2 +- references/mosaic-architecture.md | 55 ++++++++--------- 197 files changed, 305 insertions(+), 350 deletions(-) create mode 100644 .changeset/organize-mosaic-internals.md rename packages/mosaic/src/{machines/__tests__/test-utils.ts => __tests__/async.ts} (100%) rename packages/mosaic/src/__tests__/{MosaicProvider.ssr.test.tsx => mosaic-provider.ssr.test.tsx} (92%) rename packages/mosaic/src/__tests__/{MosaicProvider.test.tsx => mosaic-provider.test.tsx} (97%) rename packages/mosaic/src/{hooks/useOrganizationListInView.ts => features/user-button/use-organization-list-in-view.ts} (95%) rename packages/mosaic/src/hooks/__tests__/{useAccessibleWarnings.test.ts => use-accessible-warnings.test.ts} (90%) rename packages/mosaic/src/hooks/__tests__/{useMosaicSupportEmail.test.ts => use-mosaic-support-email.test.ts} (95%) rename packages/mosaic/src/hooks/__tests__/{useSpinDelay.test.ts => use-spin-delay.test.ts} (98%) rename packages/mosaic/src/hooks/{useAccessibleDescriptionWarning.ts => use-accessible-description-warning.ts} (100%) rename packages/mosaic/src/hooks/{useAccessibleNameWarning.ts => use-accessible-name-warning.ts} (100%) rename packages/mosaic/src/hooks/{useInView.ts => use-in-view.ts} (100%) rename packages/mosaic/src/hooks/{useListRemovalFocus.ts => use-list-removal-focus.ts} (100%) rename packages/mosaic/src/hooks/{useMosaicEnvironment.ts => use-mosaic-environment.ts} (100%) rename packages/mosaic/src/hooks/{useMosaicRouter.ts => use-mosaic-router.ts} (100%) rename packages/mosaic/src/hooks/{useMosaicSupportEmail.ts => use-mosaic-support-email.ts} (95%) rename packages/mosaic/src/hooks/{useSpinDelay.ts => use-spin-delay.ts} (100%) rename packages/mosaic/src/machine/__tests__/{useMachine.test.tsx => use-machine.test.tsx} (96%) rename packages/mosaic/src/machine/{createActor.ts => create-actor.ts} (100%) rename packages/mosaic/src/machine/{createMachine.ts => create-machine.ts} (100%) rename packages/mosaic/src/machine/{useMachine.ts => use-machine.ts} (99%) rename packages/mosaic/src/machines/__tests__/{firstFactorMachine.test.ts => first-factor-machine.test.ts} (97%) rename packages/mosaic/src/machines/__tests__/{signInMachine.test.ts => sign-in-machine.test.ts} (98%) rename packages/mosaic/src/machines/{firstFactorMachine.ts => first-factor-machine.ts} (100%) rename packages/mosaic/src/machines/{signInMachine.ts => sign-in-machine.ts} (100%) rename packages/mosaic/src/{MosaicProvider.tsx => mosaic-provider.tsx} (100%) rename packages/mosaic/src/{utils => styles}/feedback.styles.ts (100%) rename packages/mosaic/src/{utils => styles}/focus-outline.styles.ts (100%) rename packages/mosaic/src/{utils => styles}/focus-outline.test.ts (100%) rename packages/mosaic/src/{utils => styles}/input.styles.ts (100%) rename packages/mosaic/src/{utils => styles}/reset.styles.ts (100%) rename packages/mosaic/src/{utils => styles}/reset.test.tsx (100%) rename packages/mosaic/src/{utils => styles}/rtl.styles.ts (100%) rename packages/mosaic/src/{utils => styles}/rtl.test.tsx (100%) rename packages/mosaic/src/{utils => styles}/tooltip-surface.styles.ts (100%) rename packages/mosaic/src/{utils => styles}/typography.styles.ts (100%) rename packages/mosaic/src/{utils => styles}/typography.test.ts (100%) rename packages/mosaic/src/{utils => styles}/visually-hidden.styles.ts (100%) rename packages/mosaic/src/{utils => styles}/visually-hidden.test.tsx (100%) rename packages/mosaic/src/utils/{truncateTextWithEndVisible.ts => truncate-text-with-end-visible.ts} (100%) diff --git a/.changeset/organize-mosaic-internals.md b/.changeset/organize-mosaic-internals.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/organize-mosaic-internals.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/.claude/skills/mosaic/references/stylex.md b/.claude/skills/mosaic/references/stylex.md index c87913550fe..ee881cc69ae 100644 --- a/.claude/skills/mosaic/references/stylex.md +++ b/.claude/skills/mosaic/references/stylex.md @@ -54,7 +54,7 @@ rule reserves the `.stylex.ts` extension for StyleX define-primitives: **a `inputStatusBorder` / `inputStatusFocusWithin` set instead of redefining the border/focus treatment five times. Four exist today: `reset.styles.ts`, `typography.styles.ts`, `focus-outline.styles.ts` and `rtl.styles.ts`. -- **DO** compose `rtl.mirror` from `utils/rtl.styles.ts` onto a direction-aware +- **DO** compose `rtl.mirror` from `styles/rtl.styles.ts` onto a direction-aware icon — a chevron that means "forward"/"back", a pagination arrow, the log-out arrow leaving its frame — via its `xstyle`. It flips the glyph with `scaleX(-1)` only under an ancestor carrying @@ -341,7 +341,7 @@ device, while touch devices look correct. Worked example: `packages/mosaic/src/components/button/button.styles.ts`. - **DON'T** write a focus ring by hand. Compose `focusOutline` from - `utils/focus-outline.styles.ts` into the element's `stylex.props(...)`: + `styles/focus-outline.styles.ts` into the element's `stylex.props(...)`: `focusOutline.visible` for the element's own keyboard focus, `focusOutline.within` for a **container** that should ring when a child is focused. The ring is one decision for the whole system — width, style, colour and offset all come from diff --git a/.claude/skills/mosaic/references/testing.md b/.claude/skills/mosaic/references/testing.md index af221d5e4d7..9431c18a6ac 100644 --- a/.claude/skills/mosaic/references/testing.md +++ b/.claude/skills/mosaic/references/testing.md @@ -182,5 +182,5 @@ Write unit tests for: - Timing that is slow to drive through the UI, such as a resend countdown. Use fake timers. -`packages/mosaic/src/machines/__tests__/test-utils.ts` has `deferred()`, +`packages/mosaic/src/__tests__/async.ts` has `deferred()`, `tick()`, and `noop`. diff --git a/packages/mosaic/src/machines/__tests__/test-utils.ts b/packages/mosaic/src/__tests__/async.ts similarity index 100% rename from packages/mosaic/src/machines/__tests__/test-utils.ts rename to packages/mosaic/src/__tests__/async.ts diff --git a/packages/mosaic/src/__tests__/feature/render.tsx b/packages/mosaic/src/__tests__/feature/render.tsx index 3558a2df6f5..bdf8c89a047 100644 --- a/packages/mosaic/src/__tests__/feature/render.tsx +++ b/packages/mosaic/src/__tests__/feature/render.tsx @@ -4,7 +4,7 @@ import { act, render } from '@testing-library/react'; import type { ReactElement } from 'react'; import { vi } from 'vitest'; -import { MosaicProvider } from '../../MosaicProvider'; +import { MosaicProvider } from '../../mosaic-provider'; import { PUBLISHABLE_KEY } from './fake-fapi'; export async function renderWithClerk(ui: ReactElement) { diff --git a/packages/mosaic/src/__tests__/localization.test.tsx b/packages/mosaic/src/__tests__/localization.test.tsx index 366af8bc304..296cfd07547 100644 --- a/packages/mosaic/src/__tests__/localization.test.tsx +++ b/packages/mosaic/src/__tests__/localization.test.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { describe, expect, it } from 'vitest'; import { mosaicMessages, resolveLocalization, useLocale, useMessages } from '../localization'; -import { MosaicProvider } from '../MosaicProvider'; +import { MosaicProvider } from '../mosaic-provider'; describe('resolveLocalization', () => { it('returns the base messages untouched when nothing is overridden', () => { diff --git a/packages/mosaic/src/__tests__/MosaicProvider.ssr.test.tsx b/packages/mosaic/src/__tests__/mosaic-provider.ssr.test.tsx similarity index 92% rename from packages/mosaic/src/__tests__/MosaicProvider.ssr.test.tsx rename to packages/mosaic/src/__tests__/mosaic-provider.ssr.test.tsx index 3efccb21b07..362f8db1bf6 100644 --- a/packages/mosaic/src/__tests__/MosaicProvider.ssr.test.tsx +++ b/packages/mosaic/src/__tests__/mosaic-provider.ssr.test.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { renderToString } from 'react-dom/server'; import { describe, expect, it } from 'vitest'; -import { MosaicProvider } from '../MosaicProvider'; +import { MosaicProvider } from '../mosaic-provider'; describe('MosaicProvider SSR', () => { it('renders on the server without throwing', () => { diff --git a/packages/mosaic/src/__tests__/MosaicProvider.test.tsx b/packages/mosaic/src/__tests__/mosaic-provider.test.tsx similarity index 97% rename from packages/mosaic/src/__tests__/MosaicProvider.test.tsx rename to packages/mosaic/src/__tests__/mosaic-provider.test.tsx index 782c36e2ee9..a6b1b81c2d1 100644 --- a/packages/mosaic/src/__tests__/MosaicProvider.test.tsx +++ b/packages/mosaic/src/__tests__/mosaic-provider.test.tsx @@ -5,7 +5,7 @@ import { describe, expect, it } from 'vitest'; import type { MosaicIconOverrides } from '../icons/overrides'; import { useMosaicIcons } from '../icons/overrides'; import { useLocale, useMessages } from '../localization'; -import { MosaicProvider } from '../MosaicProvider'; +import { MosaicProvider } from '../mosaic-provider'; describe('MosaicProvider icons', () => { it('exposes the icon overrides via useMosaicIcons', () => { diff --git a/packages/mosaic/src/blocks/confirmation/confirmation.controller.test.ts b/packages/mosaic/src/blocks/confirmation/confirmation.controller.test.ts index 32886f03f25..9480a74c191 100644 --- a/packages/mosaic/src/blocks/confirmation/confirmation.controller.test.ts +++ b/packages/mosaic/src/blocks/confirmation/confirmation.controller.test.ts @@ -1,7 +1,7 @@ import { act, renderHook, waitFor } from '@testing-library/react'; import { describe, expect, it, vi } from 'vitest'; -import { createActor } from '../../machine/createActor'; +import { createActor } from '../../machine/create-actor'; import { confirmationMachine, useConfirmationController } from './confirmation.controller'; function start() { diff --git a/packages/mosaic/src/blocks/confirmation/confirmation.controller.ts b/packages/mosaic/src/blocks/confirmation/confirmation.controller.ts index 7108ed5d433..be5c6200f4c 100644 --- a/packages/mosaic/src/blocks/confirmation/confirmation.controller.ts +++ b/packages/mosaic/src/blocks/confirmation/confirmation.controller.ts @@ -1,5 +1,5 @@ import { setup } from '../../machine/setup'; -import { useMachine } from '../../machine/useMachine'; +import { useMachine } from '../../machine/use-machine'; export interface ConfirmationContext { run: () => Promise; diff --git a/packages/mosaic/src/blocks/confirmation/confirmation.test.tsx b/packages/mosaic/src/blocks/confirmation/confirmation.test.tsx index e46f6b571af..cd341740ffa 100644 --- a/packages/mosaic/src/blocks/confirmation/confirmation.test.tsx +++ b/packages/mosaic/src/blocks/confirmation/confirmation.test.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; import { Button } from '../../components/button'; -import { MosaicProvider } from '../../MosaicProvider'; +import { MosaicProvider } from '../../mosaic-provider'; import type { ConfirmationControlledProps, ConfirmationHandleProps } from './confirmation'; import { Confirmation } from './confirmation'; diff --git a/packages/mosaic/src/blocks/destructive/destructive.controller.test.ts b/packages/mosaic/src/blocks/destructive/destructive.controller.test.ts index ab512135048..2fef851e955 100644 --- a/packages/mosaic/src/blocks/destructive/destructive.controller.test.ts +++ b/packages/mosaic/src/blocks/destructive/destructive.controller.test.ts @@ -2,8 +2,8 @@ import { ClerkRuntimeError } from '@clerk/shared/error'; import { act, renderHook, waitFor } from '@testing-library/react'; import { describe, expect, it, vi } from 'vitest'; +import { deferred } from '../../__tests__/async'; import type { ReverificationController } from '../../features/reverification'; -import { deferred } from '../../machines/__tests__/test-utils'; import { useDestructiveController } from './destructive.controller'; const idleReverification = { status: 'idle', visible: false, reset: vi.fn() } as ReverificationController; diff --git a/packages/mosaic/src/blocks/destructive/destructive.test.tsx b/packages/mosaic/src/blocks/destructive/destructive.test.tsx index 04688252a8a..e8725625f74 100644 --- a/packages/mosaic/src/blocks/destructive/destructive.test.tsx +++ b/packages/mosaic/src/blocks/destructive/destructive.test.tsx @@ -6,7 +6,7 @@ import { describe, expect, it, vi } from 'vitest'; import { Button } from '../../components/button'; import { Menu } from '../../components/menu'; import type { ReverificationController } from '../../features/reverification'; -import { MosaicProvider } from '../../MosaicProvider'; +import { MosaicProvider } from '../../mosaic-provider'; import type { DestructiveControlledProps, DestructiveHandleProps } from './destructive'; import { Destructive } from './destructive'; diff --git a/packages/mosaic/src/components/action-bar/action-bar.tsx b/packages/mosaic/src/components/action-bar/action-bar.tsx index d4a85a45516..ca07e65b54f 100644 --- a/packages/mosaic/src/components/action-bar/action-bar.tsx +++ b/packages/mosaic/src/components/action-bar/action-bar.tsx @@ -21,8 +21,8 @@ import { mergeProps, useRender } from '../../primitives/utils'; import { getComputedStyle } from '../../primitives/utils/dom'; import type { MosaicComponentProps, XStyle } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; -import { tabularNumbersStyle } from '../../utils/typography.styles'; +import { reset } from '../../styles/reset.styles'; +import { tabularNumbersStyle } from '../../styles/typography.styles'; import type { ButtonProps } from '../button'; import { Button } from '../button'; import { Icon } from '../icon'; diff --git a/packages/mosaic/src/components/action-menu/action-menu.test.tsx b/packages/mosaic/src/components/action-menu/action-menu.test.tsx index 56bf6f568f9..f30098d6b3a 100644 --- a/packages/mosaic/src/components/action-menu/action-menu.test.tsx +++ b/packages/mosaic/src/components/action-menu/action-menu.test.tsx @@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../MosaicProvider'; +import { MosaicProvider } from '../../mosaic-provider'; import { ActionMenu } from './action-menu'; function renderMenu(actions: Parameters[0]['actions']) { diff --git a/packages/mosaic/src/components/avatar/avatar.tsx b/packages/mosaic/src/components/avatar/avatar.tsx index 7c093c03236..ad8d8531e51 100644 --- a/packages/mosaic/src/components/avatar/avatar.tsx +++ b/packages/mosaic/src/components/avatar/avatar.tsx @@ -5,8 +5,8 @@ import React from 'react'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps, MosaicElementProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { focusOutline } from '../../utils/focus-outline.styles'; -import { reset } from '../../utils/reset.styles'; +import { focusOutline } from '../../styles/focus-outline.styles'; +import { reset } from '../../styles/reset.styles'; import { shapes, sizes, styles } from './avatar.styles'; type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'; diff --git a/packages/mosaic/src/components/badge/badge.tsx b/packages/mosaic/src/components/badge/badge.tsx index bde10f3477a..3c4cc684fc5 100644 --- a/packages/mosaic/src/components/badge/badge.tsx +++ b/packages/mosaic/src/components/badge/badge.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; +import { reset } from '../../styles/reset.styles'; import { withTruncatableLabel } from '../../utils/truncatable-label'; import { BadgeContext } from './badge.context'; import { colors, styles } from './badge.styles'; diff --git a/packages/mosaic/src/components/banner/banner.tsx b/packages/mosaic/src/components/banner/banner.tsx index 95e2306a88a..38b068afe4d 100644 --- a/packages/mosaic/src/components/banner/banner.tsx +++ b/packages/mosaic/src/components/banner/banner.tsx @@ -5,7 +5,7 @@ import type { IconName } from '../../icons/registry'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; +import { reset } from '../../styles/reset.styles'; import { Icon } from '../icon'; import { descriptionColors, rootColors, styles } from './banner.styles'; diff --git a/packages/mosaic/src/components/branding/branding.tsx b/packages/mosaic/src/components/branding/branding.tsx index c4547312071..70633a161f6 100644 --- a/packages/mosaic/src/components/branding/branding.tsx +++ b/packages/mosaic/src/components/branding/branding.tsx @@ -4,8 +4,8 @@ import React from 'react'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { focusOutline } from '../../utils/focus-outline.styles'; -import { reset } from '../../utils/reset.styles'; +import { focusOutline } from '../../styles/focus-outline.styles'; +import { reset } from '../../styles/reset.styles'; import { ClerkLogo } from '../clerk-logo'; import { styles } from './branding.styles'; diff --git a/packages/mosaic/src/components/button/button.tsx b/packages/mosaic/src/components/button/button.tsx index 5de86174ee9..9d107a20986 100644 --- a/packages/mosaic/src/components/button/button.tsx +++ b/packages/mosaic/src/components/button/button.tsx @@ -4,8 +4,8 @@ import React from 'react'; import { Button as HeadlessButton } from '../../primitives/button'; import type { MosaicElementProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { focusOutline } from '../../utils/focus-outline.styles'; -import { reset } from '../../utils/reset.styles'; +import { focusOutline } from '../../styles/focus-outline.styles'; +import { reset } from '../../styles/reset.styles'; import { withTruncatableLabel } from '../../utils/truncatable-label'; import { ButtonContext } from './button.context'; import { buttonScope } from './button.markers.stylex'; diff --git a/packages/mosaic/src/components/button/index.ts b/packages/mosaic/src/components/button/index.ts index 7279cfde856..e78f0e1ff28 100644 --- a/packages/mosaic/src/components/button/index.ts +++ b/packages/mosaic/src/components/button/index.ts @@ -4,4 +4,4 @@ export { SubmitButton } from './submit-button'; export type { SubmitButtonProps } from './submit-button'; // Named here rather than only inside `SubmitButtonProps`, so a consumer can type the object they // pass to `spinDelay`. -export type { SpinDelayOptions } from '../../hooks/useSpinDelay'; +export type { SpinDelayOptions } from '../../hooks/use-spin-delay'; diff --git a/packages/mosaic/src/components/button/submit-button.tsx b/packages/mosaic/src/components/button/submit-button.tsx index 692e5b3c71d..13c4452c36f 100644 --- a/packages/mosaic/src/components/button/submit-button.tsx +++ b/packages/mosaic/src/components/button/submit-button.tsx @@ -1,10 +1,10 @@ import * as stylex from '@stylexjs/stylex'; import React from 'react'; -import type { SpinDelayOptions } from '../../hooks/useSpinDelay'; -import { useSpinDelay } from '../../hooks/useSpinDelay'; +import type { SpinDelayOptions } from '../../hooks/use-spin-delay'; +import { useSpinDelay } from '../../hooks/use-spin-delay'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; +import { reset } from '../../styles/reset.styles'; import { withTruncatableLabel } from '../../utils/truncatable-label'; import { Spinner } from '../spinner'; import type { ButtonProps } from './button'; diff --git a/packages/mosaic/src/components/card/card.tsx b/packages/mosaic/src/components/card/card.tsx index c1993fb6931..11a9419b308 100644 --- a/packages/mosaic/src/components/card/card.tsx +++ b/packages/mosaic/src/components/card/card.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; +import { reset } from '../../styles/reset.styles'; import { Branding } from '../branding'; import { Button } from '../button'; import { Dialog, DialogContext, isInDialog } from '../dialog'; diff --git a/packages/mosaic/src/components/checkbox/checkbox.tsx b/packages/mosaic/src/components/checkbox/checkbox.tsx index 58e7cce643b..d3027bb22f3 100644 --- a/packages/mosaic/src/components/checkbox/checkbox.tsx +++ b/packages/mosaic/src/components/checkbox/checkbox.tsx @@ -3,8 +3,8 @@ import React from 'react'; import type { MosaicStyleProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { focusOutline } from '../../utils/focus-outline.styles'; -import { reset } from '../../utils/reset.styles'; +import { focusOutline } from '../../styles/focus-outline.styles'; +import { reset } from '../../styles/reset.styles'; import { useOptionalFieldContext, useOptionalFieldControlProps } from '../field/field.context'; import { Icon } from '../icon'; import { checkboxInputMarker } from './checkbox.markers.stylex'; diff --git a/packages/mosaic/src/components/combobox/combobox.tsx b/packages/mosaic/src/components/combobox/combobox.tsx index 4ff7003f419..3fcf0bcab1f 100644 --- a/packages/mosaic/src/components/combobox/combobox.tsx +++ b/packages/mosaic/src/components/combobox/combobox.tsx @@ -8,7 +8,7 @@ import { Combobox as HeadlessCombobox } from '../../primitives/combobox'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; +import { reset } from '../../styles/reset.styles'; import { Icon } from '../icon'; import { Input, type InputVariant } from '../input'; import { useOptionalInputGroupContext } from '../input-group/input-group.context'; diff --git a/packages/mosaic/src/components/data-list/data-list.test.tsx b/packages/mosaic/src/components/data-list/data-list.test.tsx index 39d51ba980c..859b0bfb742 100644 --- a/packages/mosaic/src/components/data-list/data-list.test.tsx +++ b/packages/mosaic/src/components/data-list/data-list.test.tsx @@ -1,7 +1,7 @@ import { render, screen } from '@testing-library/react'; import { describe, expect, it } from 'vitest'; -import { MosaicProvider } from '../../MosaicProvider'; +import { MosaicProvider } from '../../mosaic-provider'; import { DataList } from './data-list'; function renderList(props?: { divided?: boolean }) { diff --git a/packages/mosaic/src/components/data-list/data-list.tsx b/packages/mosaic/src/components/data-list/data-list.tsx index 082e8037652..b70e2728cf6 100644 --- a/packages/mosaic/src/components/data-list/data-list.tsx +++ b/packages/mosaic/src/components/data-list/data-list.tsx @@ -4,8 +4,8 @@ import React from 'react'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; -import { truncationStyles } from '../../utils/typography.styles'; +import { reset } from '../../styles/reset.styles'; +import { truncationStyles } from '../../styles/typography.styles'; import * as slots from './data-list.styles'; export type DataListProps = MosaicComponentProps<'dl'> & { diff --git a/packages/mosaic/src/components/dialog/dialog.tsx b/packages/mosaic/src/components/dialog/dialog.tsx index ecf4cb17206..75d6f808d88 100644 --- a/packages/mosaic/src/components/dialog/dialog.tsx +++ b/packages/mosaic/src/components/dialog/dialog.tsx @@ -1,8 +1,8 @@ import * as stylex from '@stylexjs/stylex'; import React from 'react'; -import { useAccessibleDescriptionWarning } from '../../hooks/useAccessibleDescriptionWarning'; -import { useAccessibleNameWarning } from '../../hooks/useAccessibleNameWarning'; +import { useAccessibleDescriptionWarning } from '../../hooks/use-accessible-description-warning'; +import { useAccessibleNameWarning } from '../../hooks/use-accessible-name-warning'; import type { DialogFocusTarget, DialogHandle, @@ -12,7 +12,7 @@ import type { import { Dialog as Primitive, useDialogContext as useHeadlessDialogContext } from '../../primitives/dialog'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; +import { reset } from '../../styles/reset.styles'; import { Button } from '../button'; import { Icon } from '../icon'; import { ToastProvider } from '../toast/toast'; diff --git a/packages/mosaic/src/components/drawer/drawer.test.tsx b/packages/mosaic/src/components/drawer/drawer.test.tsx index a2f8c991c1d..344a81f29b0 100644 --- a/packages/mosaic/src/components/drawer/drawer.test.tsx +++ b/packages/mosaic/src/components/drawer/drawer.test.tsx @@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { describe, expect, it } from 'vitest'; -import { MosaicProvider } from '../../MosaicProvider'; +import { MosaicProvider } from '../../mosaic-provider'; import { Dialog } from '../dialog'; import { Drawer } from './drawer'; diff --git a/packages/mosaic/src/components/drawer/drawer.tsx b/packages/mosaic/src/components/drawer/drawer.tsx index e80bab18a95..eae62f210d3 100644 --- a/packages/mosaic/src/components/drawer/drawer.tsx +++ b/packages/mosaic/src/components/drawer/drawer.tsx @@ -5,7 +5,7 @@ import type { DrawerFocusTarget, DrawerProps as HeadlessDrawerProps } from '../. import { Drawer as Primitive, registerDrawerCssVars } from '../../primitives/drawer'; import type { MosaicComponentProps, MosaicStyleProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; +import { reset } from '../../styles/reset.styles'; import { DialogContext, isInDialog } from '../dialog'; import { styles } from './drawer.styles'; diff --git a/packages/mosaic/src/components/empty-state/empty-state.tsx b/packages/mosaic/src/components/empty-state/empty-state.tsx index a2c332ff212..64c50ae0536 100644 --- a/packages/mosaic/src/components/empty-state/empty-state.tsx +++ b/packages/mosaic/src/components/empty-state/empty-state.tsx @@ -5,7 +5,7 @@ import type { IconName } from '../../icons/registry'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps, MosaicElementProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; +import { reset } from '../../styles/reset.styles'; import { Icon, IconFrame } from '../icon'; import { styles } from './empty-state.styles'; diff --git a/packages/mosaic/src/components/field/field.tsx b/packages/mosaic/src/components/field/field.tsx index ad790ab6f51..c3dfac068e4 100644 --- a/packages/mosaic/src/components/field/field.tsx +++ b/packages/mosaic/src/components/field/field.tsx @@ -6,11 +6,11 @@ import { useTransition } from '../../primitives/hooks'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; +import { feedbackHeight, feedbackStyles } from '../../styles/feedback.styles'; +import { reset } from '../../styles/reset.styles'; +import { sizes as typographySizes, styles as typographyStyles } from '../../styles/typography.styles'; +import { visuallyHidden } from '../../styles/visually-hidden.styles'; import { FeedbackBody, hasMessage, useHeldMessage, useMessageHeight } from '../../utils/feedback'; -import { feedbackHeight, feedbackStyles } from '../../utils/feedback.styles'; -import { reset } from '../../utils/reset.styles'; -import { sizes as typographySizes, styles as typographyStyles } from '../../utils/typography.styles'; -import { visuallyHidden } from '../../utils/visually-hidden.styles'; import type { FieldFeedback as FormFieldFeedback } from '../form'; import type { FieldOrientation } from './field.context'; import { diff --git a/packages/mosaic/src/components/flow/flow.tsx b/packages/mosaic/src/components/flow/flow.tsx index 54180456efc..486c0346b03 100644 --- a/packages/mosaic/src/components/flow/flow.tsx +++ b/packages/mosaic/src/components/flow/flow.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { Flow as HeadlessFlow, type FlowDirection } from '../../primitives/flow'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; +import { reset } from '../../styles/reset.styles'; import { styles } from './flow.styles'; export interface FlowRootProps extends Omit, 'children'> { diff --git a/packages/mosaic/src/components/form/use-form.edit-password.test.ts b/packages/mosaic/src/components/form/use-form.edit-password.test.ts index a5ec2bedf5f..cc5f4b177c3 100644 --- a/packages/mosaic/src/components/form/use-form.edit-password.test.ts +++ b/packages/mosaic/src/components/form/use-form.edit-password.test.ts @@ -1,12 +1,11 @@ import { act, renderHook } from '@testing-library/react'; import { describe, expect, it, vi } from 'vitest'; +import { tick } from '../../__tests__/async'; import type { FieldFeedback } from './form-submit-error'; import { FormSubmitError } from './form-submit-error'; import { useForm } from './use-form'; -const flush = () => new Promise(resolve => setTimeout(resolve, 0)); - interface EditPasswordValues { currentPassword: string; newPassword: string; @@ -59,7 +58,7 @@ describe('useForm: edit password', () => { }); await act(async () => { finish(); - await flush(); + await tick(); }); expect(form.isSubmitting).toBe(false); }); @@ -69,7 +68,7 @@ describe('useForm: edit password', () => { act(() => result.current.setValue('currentPassword', 'old-secret')); act(() => result.current.setValue('newPassword', 'short')); - await act(flush); + await act(tick); expect(result.current.fields.newPassword.feedback).toBeUndefined(); expect(result.current.canSubmit).toBe(false); @@ -81,14 +80,14 @@ describe('useForm: edit password', () => { act(() => result.current.setValue('newPassword', 'longenough')); expect(result.current.fields.newPassword.isValidating).toBe(true); - await act(flush); + await act(tick); expect(result.current.fields.newPassword.feedback).toEqual({ type: 'warning', message: 'Your password works, but could be stronger.', }); act(() => result.current.setValue('newPassword', 'longenough1')); - await act(flush); + await act(tick); expect(result.current.fields.newPassword.feedback).toEqual({ type: 'success', message: 'Your password meets all the necessary requirements.', @@ -134,11 +133,11 @@ describe('useForm: edit password', () => { const { result } = renderHook(() => useEditPasswordForm(onSubmit)); act(() => result.current.setValue('currentPassword', 'wrong')); act(() => result.current.setValue('newPassword', 'longenough1')); - await act(flush); + await act(tick); act(() => result.current.setValue('confirmPassword', 'longenough1')); await act(async () => { result.current.submit(); - await flush(); + await tick(); }); expect(result.current.error).toBe('Password could not be changed.'); expect(result.current.fields.currentPassword.feedback).toEqual({ type: 'error', message: 'Incorrect password.' }); diff --git a/packages/mosaic/src/components/form/use-form.test.ts b/packages/mosaic/src/components/form/use-form.test.ts index b985ee5539c..aa0b43f412d 100644 --- a/packages/mosaic/src/components/form/use-form.test.ts +++ b/packages/mosaic/src/components/form/use-form.test.ts @@ -1,21 +1,13 @@ import { act, renderHook } from '@testing-library/react'; import { describe, expect, expectTypeOf, it, vi } from 'vitest'; +import { deferred, tick } from '../../__tests__/async'; import type { FieldFeedback } from './form-submit-error'; import { FormSubmitError } from './form-submit-error'; import { useForm } from './use-form'; -const flush = () => new Promise(resolve => setTimeout(resolve, 0)); const resolved = () => Promise.resolve(); -function deferred() { - let resolve: (value: T) => void = () => undefined; - const promise = new Promise(res => { - resolve = res; - }); - return { promise, resolve }; -} - describe('useForm', () => { it('starts from initialValues and updates one value at a time', () => { const { result } = renderHook(() => useForm({ initialValues: { username: 'alex', bio: '' }, onSubmit: resolved })); @@ -66,7 +58,7 @@ describe('useForm', () => { expect(onSubmit).toHaveBeenCalledWith({ username: 'alexc' }); await act(async () => { request.resolve(); - await flush(); + await tick(); }); expect(result.current.isSubmitting).toBe(false); expect(result.current.error).toBeUndefined(); @@ -92,7 +84,7 @@ describe('useForm', () => { ); await act(async () => { result.current.submit(); - await flush(); + await tick(); }); expect(result.current.error).toBe('Could not save'); expect(result.current.fields.username.feedback).toEqual({ type: 'error', message: 'Taken' }); @@ -109,7 +101,7 @@ describe('useForm', () => { ); await act(async () => { result.current.submit(); - await flush(); + await tick(); }); expect(result.current.error).toBeUndefined(); expect(result.current.fields.username.feedback).toEqual({ type: 'error', message: 'Taken' }); @@ -122,7 +114,7 @@ describe('useForm', () => { ); await act(async () => { plain.result.current.submit(); - await flush(); + await tick(); }); expect(plain.result.current.error).toBe('Nope'); @@ -138,7 +130,7 @@ describe('useForm', () => { ); await act(async () => { unknown.result.current.submit(); - await flush(); + await tick(); }); expect(unknown.result.current.error).toBe('Something went wrong. Please try again.'); }); @@ -149,7 +141,7 @@ describe('useForm', () => { ); await act(async () => { empty.result.current.submit(); - await flush(); + await tick(); }); expect(empty.result.current.error).toBe('Something went wrong. Please try again.'); @@ -158,7 +150,7 @@ describe('useForm', () => { ); await act(async () => { blank.result.current.submit(); - await flush(); + await tick(); }); expect(blank.result.current.error).toBe('Something went wrong. Please try again.'); @@ -170,7 +162,7 @@ describe('useForm', () => { ); await act(async () => { undisplayable.result.current.submit(); - await flush(); + await tick(); }); expect(undisplayable.result.current.error).toBe('Something went wrong. Please try again.'); expect(undisplayable.result.current.fields.username.feedback).toBeUndefined(); @@ -187,7 +179,7 @@ describe('useForm', () => { ); await act(async () => { result.current.submit(); - await flush(); + await tick(); }); expect(result.current.isSubmitting).toBe(false); expect(result.current.error).toBe('Nope'); @@ -214,7 +206,7 @@ describe('useForm', () => { ); await act(async () => { result.current.submit(); - await flush(); + await tick(); }); expect(result.current.error).toBe('Nope'); fail = false; @@ -317,14 +309,14 @@ describe('useForm', () => { expect(result.current.fields.password.isValidating).toBe(true); await act(async () => { checks.get('ab')?.resolve({ type: 'success', message: 'Strong' }); - await flush(); + await tick(); }); expect(result.current.fields.password.feedback).toEqual({ type: 'success', message: 'Strong' }); expect(result.current.fields.password.isValidating).toBe(false); expect(result.current.canSubmit).toBe(true); await act(async () => { checks.get('a')?.resolve({ type: 'error', message: 'Weak' }); - await flush(); + await tick(); }); expect(result.current.fields.password.feedback).toEqual({ type: 'success', message: 'Strong' }); }); @@ -350,14 +342,14 @@ describe('useForm', () => { act(() => result.current.setValue('username', 'ab')); await act(async () => { checks.get('ab')?.resolve({ type: 'success', message: 'Available' }); - await flush(); + await tick(); }); act(() => result.current.setValue('username', 'abc')); expect(result.current.fields.username.isValidating).toBe(true); expect(result.current.fields.username.feedback).toEqual({ type: 'success', message: 'Available' }); await act(async () => { checks.get('abc')?.resolve({ type: 'error', message: 'Taken' }); - await flush(); + await tick(); }); act(() => result.current.touch('username')); expect(result.current.fields.username.feedback).toEqual({ type: 'error', message: 'Taken' }); @@ -368,7 +360,7 @@ describe('useForm', () => { expect(result.current.isSubmitting).toBe(true); await act(async () => { checks.get('abcd')?.resolve(undefined); - await flush(); + await tick(); }); expect(onSubmit).toHaveBeenCalledWith({ username: 'abcd' }); expect(result.current.fields.username.feedback).toBeUndefined(); @@ -392,7 +384,7 @@ describe('useForm', () => { expect(result.current.canSubmit).toBe(false); await act(async () => { check.resolve(undefined); - await flush(); + await tick(); }); expect(onSubmit).toHaveBeenCalledTimes(1); expect(onSubmit).toHaveBeenCalledWith({ password: 'ab' }); @@ -416,7 +408,7 @@ describe('useForm', () => { expect(result.current.isSubmitting).toBe(true); await act(async () => { check.resolve({ type: 'error', message: 'Taken' }); - await flush(); + await tick(); }); expect(onSubmit).not.toHaveBeenCalled(); expect(result.current.isSubmitting).toBe(false); @@ -444,7 +436,7 @@ describe('useForm', () => { act(() => result.current.submit()); await act(async () => { checks.get('ab')?.resolve({ type: 'error', message: 'Weak' }); - await flush(); + await tick(); }); expect(onSubmit).not.toHaveBeenCalled(); expect(result.current.isSubmitting).toBe(false); @@ -457,7 +449,7 @@ describe('useForm', () => { useForm({ initialValues: { password: '' }, fields: { password: { validateAsync } }, onSubmit: resolved }), ); act(() => result.current.setValue('password', 'ab')); - await act(flush); + await act(tick); expect(result.current.fields.password.isValidating).toBe(false); expect(result.current.fields.password.feedback).toBeUndefined(); expect(result.current.canSubmit).toBe(true); @@ -479,7 +471,7 @@ describe('useForm', () => { ); await act(async () => { result.current.setValue('password', 'a'); - await flush(); + await tick(); }); expect(result.current.fields.password.isValidating).toBe(false); expect(result.current.fields.password.feedback).toBeUndefined(); @@ -493,7 +485,7 @@ describe('useForm', () => { act(() => result.current.setValue('username', 'alexc')); expect(validateAsync).toHaveBeenCalledTimes(1); act(() => result.current.setValue('username', 'alex')); - await act(flush); + await act(tick); expect(validateAsync).toHaveBeenCalledTimes(1); expect(result.current.fields.username.isValidating).toBe(false); }); @@ -513,10 +505,10 @@ describe('useForm', () => { }), ); act(() => result.current.setValue('password', 'ab')); - await act(flush); + await act(tick); expect(result.current.fields.password.feedback).toEqual({ type: 'info', message: 'Keep going' }); act(() => result.current.setValue('password', 'abc')); - await act(flush); + await act(tick); expect(result.current.fields.password.feedback).toEqual({ type: 'success', message: 'Strong' }); }); @@ -533,7 +525,7 @@ describe('useForm', () => { act(() => result.current.setValue('username', 'draft')); await act(async () => { result.current.submit(); - await flush(); + await tick(); }); expect(result.current.fields.username.touched).toBe(true); expect(result.current.fields.username.feedback).toEqual({ type: 'error', message: 'Bad' }); @@ -564,7 +556,7 @@ describe('useForm', () => { expect(result.current.isSubmitting).toBe(true); await act(async () => { request.resolve(); - await flush(); + await tick(); }); expect(result.current.isSubmitting).toBe(false); }); diff --git a/packages/mosaic/src/components/form/use-form.ts b/packages/mosaic/src/components/form/use-form.ts index 4bb89209265..0aeb59366f0 100644 --- a/packages/mosaic/src/components/form/use-form.ts +++ b/packages/mosaic/src/components/form/use-form.ts @@ -2,7 +2,7 @@ import { useCallback, useId, useRef } from 'react'; import { useMessages } from '../../localization'; import type { StateMachine } from '../../machine/types'; -import { useMachine } from '../../machine/useMachine'; +import { useMachine } from '../../machine/use-machine'; import { keysOf, mapKeys } from '../../utils/object'; import type { FieldsConfig, FormContext, FormEvent } from './form.machine'; import { createFormMachine, fieldFeedback, firstInvalid, initialOf, isValid } from './form.machine'; diff --git a/packages/mosaic/src/components/heading/heading.tsx b/packages/mosaic/src/components/heading/heading.tsx index 5af9f3071f0..eefe1a43d5a 100644 --- a/packages/mosaic/src/components/heading/heading.tsx +++ b/packages/mosaic/src/components/heading/heading.tsx @@ -4,10 +4,10 @@ import React from 'react'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; +import { reset } from '../../styles/reset.styles'; +import type { TypographyColor, TypographySize } from '../../styles/typography.styles'; +import { colors, sizes, styles as typographyStyles } from '../../styles/typography.styles'; import { useContextProps } from '../../utils/context'; -import { reset } from '../../utils/reset.styles'; -import type { TypographyColor, TypographySize } from '../../utils/typography.styles'; -import { colors, sizes, styles as typographyStyles } from '../../utils/typography.styles'; import { styles as headingStyles } from './heading.styles'; import type { HeadingLevel } from './heading-level'; diff --git a/packages/mosaic/src/components/icon/icon-frame.tsx b/packages/mosaic/src/components/icon/icon-frame.tsx index f0500ea69ad..c4824662e06 100644 --- a/packages/mosaic/src/components/icon/icon-frame.tsx +++ b/packages/mosaic/src/components/icon/icon-frame.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; +import { reset } from '../../styles/reset.styles'; import { sizes, styles } from './icon-frame.styles'; export interface IconFrameProps extends MosaicComponentProps<'span'> { diff --git a/packages/mosaic/src/components/icon/icon.test.tsx b/packages/mosaic/src/components/icon/icon.test.tsx index 2e1f91dbe16..0c538f2222c 100644 --- a/packages/mosaic/src/components/icon/icon.test.tsx +++ b/packages/mosaic/src/components/icon/icon.test.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { describe, expect, it } from 'vitest'; import type { MosaicIconOverrides } from '../../icons/overrides'; -import { MosaicProvider } from '../../MosaicProvider'; +import { MosaicProvider } from '../../mosaic-provider'; import { space } from '../../tokens.stylex'; import { Banner } from '../banner'; import { Icon } from './icon'; diff --git a/packages/mosaic/src/components/icon/icon.tsx b/packages/mosaic/src/components/icon/icon.tsx index eb6739fd277..69dad0edd23 100644 --- a/packages/mosaic/src/components/icon/icon.tsx +++ b/packages/mosaic/src/components/icon/icon.tsx @@ -6,7 +6,7 @@ import type { IconName } from '../../icons/registry'; import { iconRegistry } from '../../icons/registry'; import type { MosaicElementProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; +import { reset } from '../../styles/reset.styles'; import { iconScope } from './icon.markers.stylex'; import { sizes, styles } from './icon.styles'; diff --git a/packages/mosaic/src/components/input-group/input-group.tsx b/packages/mosaic/src/components/input-group/input-group.tsx index c6ad8150ab0..8e33294bc6a 100644 --- a/packages/mosaic/src/components/input-group/input-group.tsx +++ b/packages/mosaic/src/components/input-group/input-group.tsx @@ -6,8 +6,8 @@ import React from 'react'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { inputStyles } from '../../utils/input.styles'; -import { reset } from '../../utils/reset.styles'; +import { inputStyles } from '../../styles/input.styles'; +import { reset } from '../../styles/reset.styles'; import { ButtonContext } from '../button/button.context'; import { useOptionalFieldContext } from '../field/field.context'; import { Input } from '../input'; diff --git a/packages/mosaic/src/components/input/input.tsx b/packages/mosaic/src/components/input/input.tsx index ace2da08c1a..c0249052a19 100644 --- a/packages/mosaic/src/components/input/input.tsx +++ b/packages/mosaic/src/components/input/input.tsx @@ -4,8 +4,8 @@ import React from 'react'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { inputStyles } from '../../utils/input.styles'; -import { reset } from '../../utils/reset.styles'; +import { inputStyles } from '../../styles/input.styles'; +import { reset } from '../../styles/reset.styles'; import { useOptionalFieldControlProps } from '../field/field.context'; import { useOptionalInputGroupContext } from '../input-group/input-group.context'; import { sizes, styles } from './input.styles'; diff --git a/packages/mosaic/src/components/item/item.tsx b/packages/mosaic/src/components/item/item.tsx index cdf98e6b5f3..2229d2889e0 100644 --- a/packages/mosaic/src/components/item/item.tsx +++ b/packages/mosaic/src/components/item/item.tsx @@ -4,9 +4,9 @@ import React from 'react'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { focusOutline } from '../../utils/focus-outline.styles'; -import { reset } from '../../utils/reset.styles'; -import { truncationStyles } from '../../utils/typography.styles'; +import { focusOutline } from '../../styles/focus-outline.styles'; +import { reset } from '../../styles/reset.styles'; +import { truncationStyles } from '../../styles/typography.styles'; import * as slots from './item.styles'; /** The row's height and gap, and the width of the media column inside it. */ diff --git a/packages/mosaic/src/components/menu/menu.tsx b/packages/mosaic/src/components/menu/menu.tsx index 2332b06668b..0035fe6640c 100644 --- a/packages/mosaic/src/components/menu/menu.tsx +++ b/packages/mosaic/src/components/menu/menu.tsx @@ -12,9 +12,9 @@ import { Menu as Primitive } from '../../primitives/menu'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps, MosaicStyleProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { focusOutline } from '../../utils/focus-outline.styles'; -import { reset } from '../../utils/reset.styles'; -import { truncationStyles } from '../../utils/typography.styles'; +import { focusOutline } from '../../styles/focus-outline.styles'; +import { reset } from '../../styles/reset.styles'; +import { truncationStyles } from '../../styles/typography.styles'; import { Button } from '../button'; import { Icon } from '../icon'; import { scrollAreaRoot, scrollAreaViewport } from '../scroll-area'; diff --git a/packages/mosaic/src/components/otp/otp.tsx b/packages/mosaic/src/components/otp/otp.tsx index d2ca11f14aa..23fb1721315 100644 --- a/packages/mosaic/src/components/otp/otp.tsx +++ b/packages/mosaic/src/components/otp/otp.tsx @@ -5,8 +5,8 @@ import type { OtpProps as PrimitiveOtpProps } from '../../primitives/otp'; import { Otp as Primitive } from '../../primitives/otp'; import type { MosaicStyleProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { inputStyles } from '../../utils/input.styles'; -import { reset } from '../../utils/reset.styles'; +import { inputStyles } from '../../styles/input.styles'; +import { reset } from '../../styles/reset.styles'; import { useOptionalFieldControlProps } from '../field/field.context'; import { styles } from './otp.styles'; diff --git a/packages/mosaic/src/components/pagination/pagination.test.tsx b/packages/mosaic/src/components/pagination/pagination.test.tsx index ea80844e1f2..331c6d1d962 100644 --- a/packages/mosaic/src/components/pagination/pagination.test.tsx +++ b/packages/mosaic/src/components/pagination/pagination.test.tsx @@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event'; import React from 'react'; import { describe, expect, it, vi } from 'vitest'; -import { rtl } from '../../utils/rtl.styles'; +import { rtl } from '../../styles/rtl.styles'; import { Pagination } from './pagination'; import { styles } from './pagination.styles'; diff --git a/packages/mosaic/src/components/pagination/pagination.tsx b/packages/mosaic/src/components/pagination/pagination.tsx index 5a358ecea41..f3262524669 100644 --- a/packages/mosaic/src/components/pagination/pagination.tsx +++ b/packages/mosaic/src/components/pagination/pagination.tsx @@ -4,8 +4,8 @@ import React from 'react'; import { fill } from '../../localization/messages'; import type { MosaicElementProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; -import { rtl } from '../../utils/rtl.styles'; +import { reset } from '../../styles/reset.styles'; +import { rtl } from '../../styles/rtl.styles'; import { Button } from '../button'; import { Icon } from '../icon'; import { Select } from '../select'; diff --git a/packages/mosaic/src/components/panel/panel.test.tsx b/packages/mosaic/src/components/panel/panel.test.tsx index b1cb0260563..073a9ccd24f 100644 --- a/packages/mosaic/src/components/panel/panel.test.tsx +++ b/packages/mosaic/src/components/panel/panel.test.tsx @@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; import { describe, expect, it } from 'vitest'; -import { MosaicProvider } from '../../MosaicProvider'; +import { MosaicProvider } from '../../mosaic-provider'; import { HeadingLevelProvider } from '../heading'; import { Section } from '../section'; import { Panel } from './panel'; diff --git a/packages/mosaic/src/components/panel/panel.tsx b/packages/mosaic/src/components/panel/panel.tsx index 2cb11c725ce..7d75a4785ac 100644 --- a/packages/mosaic/src/components/panel/panel.tsx +++ b/packages/mosaic/src/components/panel/panel.tsx @@ -4,8 +4,8 @@ import React from 'react'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { focusOutline } from '../../utils/focus-outline.styles'; -import { reset } from '../../utils/reset.styles'; +import { focusOutline } from '../../styles/focus-outline.styles'; +import { reset } from '../../styles/reset.styles'; import { Heading, HeadingLevelProvider, useHeadingLevel } from '../heading'; import { Icon } from '../icon'; import { ContentPanelContext, ProfileContext } from '../profile/profile.context'; diff --git a/packages/mosaic/src/components/phone-input/phone-input.tsx b/packages/mosaic/src/components/phone-input/phone-input.tsx index 0a2f3f13f3f..2b7134b8033 100644 --- a/packages/mosaic/src/components/phone-input/phone-input.tsx +++ b/packages/mosaic/src/components/phone-input/phone-input.tsx @@ -14,7 +14,7 @@ import React from 'react'; import type { MosaicElementProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; +import { reset } from '../../styles/reset.styles'; import { Button } from '../button'; import { Combobox } from '../combobox'; import { Field } from '../field'; diff --git a/packages/mosaic/src/components/popover/popover.tsx b/packages/mosaic/src/components/popover/popover.tsx index 6edaa3c27c7..d5e40139119 100644 --- a/packages/mosaic/src/components/popover/popover.tsx +++ b/packages/mosaic/src/components/popover/popover.tsx @@ -1,12 +1,12 @@ import * as stylex from '@stylexjs/stylex'; import React from 'react'; -import { useAccessibleNameWarning } from '../../hooks/useAccessibleNameWarning'; +import { useAccessibleNameWarning } from '../../hooks/use-accessible-name-warning'; import type { PopoverProps as HeadlessPopoverProps } from '../../primitives/popover'; import { Popover as Primitive } from '../../primitives/popover'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; +import { reset } from '../../styles/reset.styles'; import { sizes, styles } from './popover.styles'; export type PopoverSize = 'sm' | 'md' | 'lg' | 'anchor'; diff --git a/packages/mosaic/src/components/profile/profile.test.tsx b/packages/mosaic/src/components/profile/profile.test.tsx index 93c559ca09c..c80b3531d76 100644 --- a/packages/mosaic/src/components/profile/profile.test.tsx +++ b/packages/mosaic/src/components/profile/profile.test.tsx @@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event'; import React from 'react'; import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../MosaicProvider'; +import { MosaicProvider } from '../../mosaic-provider'; import { Badge } from '../badge'; import { Card } from '../card'; import { Dialog } from '../dialog'; diff --git a/packages/mosaic/src/components/profile/profile.tsx b/packages/mosaic/src/components/profile/profile.tsx index 2a036515f10..b282c8a07c7 100644 --- a/packages/mosaic/src/components/profile/profile.tsx +++ b/packages/mosaic/src/components/profile/profile.tsx @@ -8,8 +8,8 @@ import { useRender } from '../../primitives/utils'; import { autoUpdate, getDimensions } from '../../primitives/utils/dom'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { focusOutline } from '../../utils/focus-outline.styles'; -import { reset } from '../../utils/reset.styles'; +import { focusOutline } from '../../styles/focus-outline.styles'; +import { reset } from '../../styles/reset.styles'; import { BadgeContext } from '../badge/badge.context'; import { Branding } from '../branding'; import { Dialog, DialogContext, isInDialog } from '../dialog'; diff --git a/packages/mosaic/src/components/scroll-area/scroll-area.styles.ts b/packages/mosaic/src/components/scroll-area/scroll-area.styles.ts index 1b854e240da..cd0937315b3 100644 --- a/packages/mosaic/src/components/scroll-area/scroll-area.styles.ts +++ b/packages/mosaic/src/components/scroll-area/scroll-area.styles.ts @@ -1,7 +1,7 @@ import * as stylex from '@stylexjs/stylex'; +import { focusOutline } from '../../styles/focus-outline.styles'; import { durationVars, radiusVars, scrollbarVars, scrollFadeVars } from '../../tokens.stylex'; -import { focusOutline } from '../../utils/focus-outline.styles'; import { scrollAreaVars, scrollbarThumbVars } from './scroll-area.vars.stylex'; // Same-file locals so the `var()` references read as names rather than as a wall of diff --git a/packages/mosaic/src/components/section/section.tsx b/packages/mosaic/src/components/section/section.tsx index 4baeeca3ee7..df277055a11 100644 --- a/packages/mosaic/src/components/section/section.tsx +++ b/packages/mosaic/src/components/section/section.tsx @@ -6,10 +6,10 @@ import { useTransition } from '../../primitives/hooks/use-transition'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; +import { feedbackHeight, feedbackStyles } from '../../styles/feedback.styles'; +import { reset } from '../../styles/reset.styles'; +import { sizes as typographySizes, styles as typographyStyles } from '../../styles/typography.styles'; import { FeedbackBody, hasMessage, useHeldMessage, useMessageHeight } from '../../utils/feedback'; -import { feedbackHeight, feedbackStyles } from '../../utils/feedback.styles'; -import { reset } from '../../utils/reset.styles'; -import { sizes as typographySizes, styles as typographyStyles } from '../../utils/typography.styles'; import type { HeadingProps } from '../heading'; import { Heading, useHeadingLevel } from '../heading'; import { sectionHeaderDescriptionMarker, sectionHeaderMarker, sectionNestedItemMarker } from './section.markers.stylex'; diff --git a/packages/mosaic/src/components/select/select.tsx b/packages/mosaic/src/components/select/select.tsx index 47cdd4feceb..593cb9a319c 100644 --- a/packages/mosaic/src/components/select/select.tsx +++ b/packages/mosaic/src/components/select/select.tsx @@ -10,9 +10,9 @@ import type { import { Select as Primitive } from '../../primitives/select'; import type { MosaicComponentProps, MosaicStyleProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { focusOutline } from '../../utils/focus-outline.styles'; -import { reset } from '../../utils/reset.styles'; -import { truncationStyles } from '../../utils/typography.styles'; +import { focusOutline } from '../../styles/focus-outline.styles'; +import { reset } from '../../styles/reset.styles'; +import { truncationStyles } from '../../styles/typography.styles'; import { Button } from '../button'; import { mergeIds, useOptionalFieldControlProps } from '../field/field.context'; import { Icon } from '../icon'; diff --git a/packages/mosaic/src/components/table/table.tsx b/packages/mosaic/src/components/table/table.tsx index eb645f30056..f13a8e56ac6 100644 --- a/packages/mosaic/src/components/table/table.tsx +++ b/packages/mosaic/src/components/table/table.tsx @@ -5,7 +5,7 @@ import React from 'react'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps, MosaicElementProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; +import { reset } from '../../styles/reset.styles'; import { Button } from '../button'; import type { CheckboxProps } from '../checkbox'; import { Checkbox } from '../checkbox'; diff --git a/packages/mosaic/src/components/tabs/tabs.tsx b/packages/mosaic/src/components/tabs/tabs.tsx index f4ed9c8b8bf..ead3c3dabfc 100644 --- a/packages/mosaic/src/components/tabs/tabs.tsx +++ b/packages/mosaic/src/components/tabs/tabs.tsx @@ -13,8 +13,8 @@ import { Tabs as Primitive } from '../../primitives/tabs'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps, MosaicStyleProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { focusOutline } from '../../utils/focus-outline.styles'; -import { reset } from '../../utils/reset.styles'; +import { focusOutline } from '../../styles/focus-outline.styles'; +import { reset } from '../../styles/reset.styles'; import { styles } from './tabs.styles'; type StyledProps = Omit & MosaicStyleProps; diff --git a/packages/mosaic/src/components/tag-input/tag-input.tsx b/packages/mosaic/src/components/tag-input/tag-input.tsx index e9389be501b..b911c66fecd 100644 --- a/packages/mosaic/src/components/tag-input/tag-input.tsx +++ b/packages/mosaic/src/components/tag-input/tag-input.tsx @@ -11,9 +11,9 @@ import type { import { TagInput as Primitive } from '../../primitives/tag-input'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { focusOutline } from '../../utils/focus-outline.styles'; -import { inputStyles } from '../../utils/input.styles'; -import { reset } from '../../utils/reset.styles'; +import { focusOutline } from '../../styles/focus-outline.styles'; +import { inputStyles } from '../../styles/input.styles'; +import { reset } from '../../styles/reset.styles'; import { useOptionalFieldControlProps } from '../field/field.context'; import { Icon } from '../icon'; import { styles } from './tag-input.styles'; diff --git a/packages/mosaic/src/components/text/text.test.tsx b/packages/mosaic/src/components/text/text.test.tsx index 9a450d8e2e9..23f087d0eb9 100644 --- a/packages/mosaic/src/components/text/text.test.tsx +++ b/packages/mosaic/src/components/text/text.test.tsx @@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; import { describe, expect, it } from 'vitest'; -import { colors } from '../../utils/typography.styles'; +import { colors } from '../../styles/typography.styles'; import { Text, TextContext } from './text'; const atoms = stylex.create({ diff --git a/packages/mosaic/src/components/text/text.tsx b/packages/mosaic/src/components/text/text.tsx index d8df5d43838..a37da8fe679 100644 --- a/packages/mosaic/src/components/text/text.tsx +++ b/packages/mosaic/src/components/text/text.tsx @@ -4,10 +4,10 @@ import React from 'react'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; +import { reset } from '../../styles/reset.styles'; +import type { TypographyColor, TypographySize } from '../../styles/typography.styles'; +import { colors, sizes, styles } from '../../styles/typography.styles'; import { useContextProps } from '../../utils/context'; -import { reset } from '../../utils/reset.styles'; -import type { TypographyColor, TypographySize } from '../../utils/typography.styles'; -import { colors, sizes, styles } from '../../utils/typography.styles'; export interface TextProps extends MosaicComponentProps<'p'> { size?: TypographySize; diff --git a/packages/mosaic/src/components/toast/toast.test.tsx b/packages/mosaic/src/components/toast/toast.test.tsx index 6d798f06568..fb52885e265 100644 --- a/packages/mosaic/src/components/toast/toast.test.tsx +++ b/packages/mosaic/src/components/toast/toast.test.tsx @@ -2,7 +2,7 @@ import { act, cleanup, render, screen } from '@testing-library/react'; import React from 'react'; import { afterEach, describe, expect, it } from 'vitest'; -import { MosaicProvider } from '../../MosaicProvider'; +import { MosaicProvider } from '../../mosaic-provider'; import { Dialog } from '../dialog'; import { type ToastManager, type ToastPromiseOptions, useToastManager } from './use-toast-manager'; diff --git a/packages/mosaic/src/components/toast/toast.tsx b/packages/mosaic/src/components/toast/toast.tsx index a32695c396e..d5e0f3728eb 100644 --- a/packages/mosaic/src/components/toast/toast.tsx +++ b/packages/mosaic/src/components/toast/toast.tsx @@ -5,8 +5,8 @@ import type { IconName } from '../../icons/registry'; import type { ToastObject } from '../../primitives/toast'; import { Toast as Primitive } from '../../primitives/toast'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; -import { tooltipSurface } from '../../utils/tooltip-surface.styles'; +import { reset } from '../../styles/reset.styles'; +import { tooltipSurface } from '../../styles/tooltip-surface.styles'; import { Icon } from '../icon'; import { Spinner } from '../spinner'; import { iconColors, styles } from './toast.styles'; diff --git a/packages/mosaic/src/components/tooltip/tooltip.tsx b/packages/mosaic/src/components/tooltip/tooltip.tsx index 5c6e3ace061..cdc41232a48 100644 --- a/packages/mosaic/src/components/tooltip/tooltip.tsx +++ b/packages/mosaic/src/components/tooltip/tooltip.tsx @@ -5,8 +5,8 @@ import type { TooltipProps as HeadlessTooltipProps } from '../../primitives/tool import { Tooltip as Primitive } from '../../primitives/tooltip'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; -import { tooltipSurface } from '../../utils/tooltip-surface.styles'; +import { reset } from '../../styles/reset.styles'; +import { tooltipSurface } from '../../styles/tooltip-surface.styles'; import { styles } from './tooltip.styles'; export type TooltipRootProps = HeadlessTooltipProps; diff --git a/packages/mosaic/src/components/visually-hidden/visually-hidden.tsx b/packages/mosaic/src/components/visually-hidden/visually-hidden.tsx index 64137166b4c..8387ad01205 100644 --- a/packages/mosaic/src/components/visually-hidden/visually-hidden.tsx +++ b/packages/mosaic/src/components/visually-hidden/visually-hidden.tsx @@ -4,8 +4,8 @@ import React from 'react'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; -import { visuallyHidden } from '../../utils/visually-hidden.styles'; +import { reset } from '../../styles/reset.styles'; +import { visuallyHidden } from '../../styles/visually-hidden.styles'; export type VisuallyHiddenProps = MosaicComponentProps<'span'>; diff --git a/packages/mosaic/src/features/organization-profile/__tests__/invitations-table-tab.view.test.tsx b/packages/mosaic/src/features/organization-profile/__tests__/invitations-table-tab.view.test.tsx index 78ef050ab81..ac328f9328d 100644 --- a/packages/mosaic/src/features/organization-profile/__tests__/invitations-table-tab.view.test.tsx +++ b/packages/mosaic/src/features/organization-profile/__tests__/invitations-table-tab.view.test.tsx @@ -3,8 +3,8 @@ import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { describe, expect, it, vi } from 'vitest'; -import { deferred } from '../../../machines/__tests__/test-utils'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { deferred } from '../../../__tests__/async'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { InvitationsTableTabViewProps } from '../invitations-table-tab.types'; import { InvitationsTableTabView } from '../invitations-table-tab.view'; diff --git a/packages/mosaic/src/features/organization-profile/__tests__/members-table-tab.view.test.tsx b/packages/mosaic/src/features/organization-profile/__tests__/members-table-tab.view.test.tsx index acc81eb7340..c1e433bd036 100644 --- a/packages/mosaic/src/features/organization-profile/__tests__/members-table-tab.view.test.tsx +++ b/packages/mosaic/src/features/organization-profile/__tests__/members-table-tab.view.test.tsx @@ -3,8 +3,8 @@ import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { describe, expect, it, vi } from 'vitest'; -import { deferred } from '../../../machines/__tests__/test-utils'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { deferred } from '../../../__tests__/async'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { MembersTableTabViewProps } from '../members-table-tab.types'; import { MembersTableTabView } from '../members-table-tab.view'; diff --git a/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-api-keys-panel.view.test.tsx b/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-api-keys-panel.view.test.tsx index 9cac588073e..fb5d7b23c00 100644 --- a/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-api-keys-panel.view.test.tsx +++ b/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-api-keys-panel.view.test.tsx @@ -3,8 +3,8 @@ import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { describe, expect, it, vi } from 'vitest'; -import { deferred } from '../../../machines/__tests__/test-utils'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { deferred } from '../../../__tests__/async'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { OrganizationProfileAPIKey, OrganizationProfileApiKeysPanelViewProps, diff --git a/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-general-panel.view.test.tsx b/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-general-panel.view.test.tsx index ef181e913b5..a92381cc67b 100644 --- a/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-general-panel.view.test.tsx +++ b/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-general-panel.view.test.tsx @@ -2,7 +2,7 @@ import { render, screen, waitFor, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import { OrganizationProfileSaveError } from '../organization-profile.types'; import type { OrganizationProfileGeneralPanelViewProps } from '../organization-profile-general-panel.view'; import { OrganizationProfileGeneralPanelView } from '../organization-profile-general-panel.view'; diff --git a/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-invite-members.dialog.test.tsx b/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-invite-members.dialog.test.tsx index 86b35797cc1..d82c2b9dceb 100644 --- a/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-invite-members.dialog.test.tsx +++ b/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-invite-members.dialog.test.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { OrganizationProfileInviteMembersDialogProps } from '../organization-profile-invite-members.dialog'; import { OrganizationProfileInviteMembersDialog } from '../organization-profile-invite-members.dialog'; diff --git a/packages/mosaic/src/features/organization-profile/__tests__/organization-profile.view.test.tsx b/packages/mosaic/src/features/organization-profile/__tests__/organization-profile.view.test.tsx index 4035c47b6e4..f4cdf798a2f 100644 --- a/packages/mosaic/src/features/organization-profile/__tests__/organization-profile.view.test.tsx +++ b/packages/mosaic/src/features/organization-profile/__tests__/organization-profile.view.test.tsx @@ -1,7 +1,7 @@ import { render, screen } from '@testing-library/react'; import { expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import { OrganizationProfileView } from '../organization-profile.view'; it('keeps the Members placeholder until a table is configured', () => { diff --git a/packages/mosaic/src/features/organization-profile/__tests__/requests-table-tab.view.test.tsx b/packages/mosaic/src/features/organization-profile/__tests__/requests-table-tab.view.test.tsx index 56a836131c1..08ddbf4d088 100644 --- a/packages/mosaic/src/features/organization-profile/__tests__/requests-table-tab.view.test.tsx +++ b/packages/mosaic/src/features/organization-profile/__tests__/requests-table-tab.view.test.tsx @@ -3,8 +3,8 @@ import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { describe, expect, it, vi } from 'vitest'; -import { deferred } from '../../../machines/__tests__/test-utils'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { deferred } from '../../../__tests__/async'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { RequestsTableTabViewProps } from '../requests-table-tab.types'; import { RequestsTableTabView } from '../requests-table-tab.view'; diff --git a/packages/mosaic/src/features/organization-profile/invitations-table-tab.view.tsx b/packages/mosaic/src/features/organization-profile/invitations-table-tab.view.tsx index c881539b82e..d867ce31c27 100644 --- a/packages/mosaic/src/features/organization-profile/invitations-table-tab.view.tsx +++ b/packages/mosaic/src/features/organization-profile/invitations-table-tab.view.tsx @@ -12,7 +12,7 @@ import { Pagination } from '../../components/pagination'; import { Spinner } from '../../components/spinner'; import { Table, type TableHeaderCellProps } from '../../components/table'; import { VisuallyHidden } from '../../components/visually-hidden'; -import { useListRemovalFocus } from '../../hooks/useListRemovalFocus'; +import { useListRemovalFocus } from '../../hooks/use-list-removal-focus'; import { fill, useMessages } from '../../localization'; import { useDataTable } from '../../primitives/hooks'; import { mergeStyleProps, themeProps } from '../../props'; diff --git a/packages/mosaic/src/features/organization-profile/members-table-tab.view.tsx b/packages/mosaic/src/features/organization-profile/members-table-tab.view.tsx index 499b491a20d..a918b2431a9 100644 --- a/packages/mosaic/src/features/organization-profile/members-table-tab.view.tsx +++ b/packages/mosaic/src/features/organization-profile/members-table-tab.view.tsx @@ -14,7 +14,7 @@ import { Select } from '../../components/select'; import { Spinner } from '../../components/spinner'; import { Table, type TableHeaderCellProps } from '../../components/table'; import { VisuallyHidden } from '../../components/visually-hidden'; -import { useListRemovalFocus } from '../../hooks/useListRemovalFocus'; +import { useListRemovalFocus } from '../../hooks/use-list-removal-focus'; import { fill, useMessages } from '../../localization'; import { useDataTable } from '../../primitives/hooks'; import { mergeStyleProps, themeProps } from '../../props'; diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-api-keys-panel.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-api-keys-panel.view.tsx index 87df857f222..014a5b77c5c 100644 --- a/packages/mosaic/src/features/organization-profile/organization-profile-api-keys-panel.view.tsx +++ b/packages/mosaic/src/features/organization-profile/organization-profile-api-keys-panel.view.tsx @@ -12,11 +12,11 @@ import type { TableHeaderCellProps } from '../../components/table'; import { Table } from '../../components/table'; import { Text } from '../../components/text'; import { VisuallyHidden } from '../../components/visually-hidden'; -import { useListRemovalFocus } from '../../hooks/useListRemovalFocus'; +import { useListRemovalFocus } from '../../hooks/use-list-removal-focus'; import { fill, useMessages } from '../../localization'; import { useDataTable } from '../../primitives/hooks'; import { themeProps } from '../../props'; -import { truncateWithEndVisible } from '../../utils/truncateTextWithEndVisible'; +import { truncateWithEndVisible } from '../../utils/truncate-text-with-end-visible'; import { styles } from './organization-profile-api-keys-panel.styles'; import type { OrganizationProfileAPIKey, diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-create-api-key.dialog.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-create-api-key.dialog.tsx index 366b4a9a122..939d1cc44c8 100644 --- a/packages/mosaic/src/features/organization-profile/organization-profile-create-api-key.dialog.tsx +++ b/packages/mosaic/src/features/organization-profile/organization-profile-create-api-key.dialog.tsx @@ -13,7 +13,7 @@ import { InputGroup } from '../../components/input-group'; import { Select } from '../../components/select'; import { Text } from '../../components/text'; import { fill, useMessages } from '../../localization'; -import { truncationStyles } from '../../utils/typography.styles'; +import { truncationStyles } from '../../styles/typography.styles'; const expirationValues = ['never', '1d', '7d', '30d', '60d', '90d', '180d', '1y'] as const; diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-action.controller.ts b/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-action.controller.ts index 2c5c4c5fc00..df009ad7389 100644 --- a/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-action.controller.ts +++ b/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-action.controller.ts @@ -1,5 +1,5 @@ import { setup } from '../../../machine/setup'; -import { useMachine } from '../../../machine/useMachine'; +import { useMachine } from '../../../machine/use-machine'; export interface OrganizationProfileDangerActionContext { run: () => Promise; diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.controller.ts b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.controller.ts index 0d269a4b384..dca1ceb55b2 100644 --- a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.controller.ts +++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.controller.ts @@ -1,5 +1,5 @@ import { setup } from '../../../machine/setup'; -import { useMachine } from '../../../machine/useMachine'; +import { useMachine } from '../../../machine/use-machine'; import type { OrganizationProfileFormError } from '../organization-profile.types'; import { OrganizationProfileSaveError } from '../organization-profile.types'; diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-slug-row.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-slug-row.view.tsx index e11ed2c6b84..ea5472e8c58 100644 --- a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-slug-row.view.tsx +++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-slug-row.view.tsx @@ -4,7 +4,7 @@ import { Button } from '../../../components/button'; import { CopyButton } from '../../../components/copy-button'; import { Section } from '../../../components/section'; import { useMessages } from '../../../localization'; -import { truncationStyles } from '../../../utils/typography.styles'; +import { truncationStyles } from '../../../styles/typography.styles'; import { useOrganizationProfileEditFieldController } from './organization-profile-edit-field.controller'; import { OrganizationProfileEditFieldDialog } from './organization-profile-edit-field.dialog'; import { styles } from './organization-profile-workspace-section.styles'; diff --git a/packages/mosaic/src/features/organization-profile/requests-table-tab.view.tsx b/packages/mosaic/src/features/organization-profile/requests-table-tab.view.tsx index 780c7b8eb49..5ce6a411c9a 100644 --- a/packages/mosaic/src/features/organization-profile/requests-table-tab.view.tsx +++ b/packages/mosaic/src/features/organization-profile/requests-table-tab.view.tsx @@ -11,7 +11,7 @@ import { Spinner } from '../../components/spinner'; import { Table, type TableHeaderCellProps } from '../../components/table'; import { Text } from '../../components/text'; import { VisuallyHidden } from '../../components/visually-hidden'; -import { useListRemovalFocus } from '../../hooks/useListRemovalFocus'; +import { useListRemovalFocus } from '../../hooks/use-list-removal-focus'; import { fill, useMessages } from '../../localization'; import { useDataTable } from '../../primitives/hooks'; import { mergeStyleProps, themeProps } from '../../props'; diff --git a/packages/mosaic/src/features/reverification/__tests__/reverification.feature.test.tsx b/packages/mosaic/src/features/reverification/__tests__/reverification.feature.test.tsx index 4a45cdac1b2..0c650845a6e 100644 --- a/packages/mosaic/src/features/reverification/__tests__/reverification.feature.test.tsx +++ b/packages/mosaic/src/features/reverification/__tests__/reverification.feature.test.tsx @@ -18,7 +18,7 @@ import { fapiClient, fapiEmailAddress, fapiEnvironment, fapiSession, fapiUser } import { renderWithClerk } from '../../../__tests__/feature/render'; import { Card } from '../../../components/card'; import type { MosaicLocalization } from '../../../localization'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import { Reverification, useReverificationFlow } from '../reverification'; const alice = fapiUser({ diff --git a/packages/mosaic/src/features/reverification/__tests__/use-reverification-with-state.test.tsx b/packages/mosaic/src/features/reverification/__tests__/use-reverification-with-state.test.tsx index 82aea7c7b46..7a0760ee2eb 100644 --- a/packages/mosaic/src/features/reverification/__tests__/use-reverification-with-state.test.tsx +++ b/packages/mosaic/src/features/reverification/__tests__/use-reverification-with-state.test.tsx @@ -4,7 +4,7 @@ import type { SessionVerificationLevel } from '@clerk/shared/types'; import { act, renderHook, waitFor } from '@testing-library/react'; import { beforeEach, describe, expect, it, vi } from 'vitest'; -import { deferred, tick } from '../../../machines/__tests__/test-utils'; +import { deferred, tick } from '../../../__tests__/async'; import type { ReverificationState } from '../reverification.types'; import { useReverificationWithState } from '../use-reverification-with-state'; diff --git a/packages/mosaic/src/features/reverification/reverification.controller.ts b/packages/mosaic/src/features/reverification/reverification.controller.ts index 030e7388561..43ea26a788a 100644 --- a/packages/mosaic/src/features/reverification/reverification.controller.ts +++ b/packages/mosaic/src/features/reverification/reverification.controller.ts @@ -4,7 +4,7 @@ import type { FlowDirection } from '../../components/flow'; import { useMessages } from '../../localization'; import { setup } from '../../machine/setup'; import type { DoneInvokeEvent, StateConfig } from '../../machine/types'; -import { useMachine } from '../../machine/useMachine'; +import { useMachine } from '../../machine/use-machine'; import type { ReverificationActiveModel, ReverificationModel } from './reverification.model'; import type { ReverificationErrorReason, diff --git a/packages/mosaic/src/features/reverification/reverification.model.tsx b/packages/mosaic/src/features/reverification/reverification.model.tsx index 30d929aa297..8f572df4dea 100644 --- a/packages/mosaic/src/features/reverification/reverification.model.tsx +++ b/packages/mosaic/src/features/reverification/reverification.model.tsx @@ -7,8 +7,8 @@ import type { } from '@clerk/shared/types'; import { isWebAuthnSupported } from '@clerk/shared/webauthn'; -import { useMosaicEnvironment } from '../../hooks/useMosaicEnvironment'; -import { useMosaicSupportEmail } from '../../hooks/useMosaicSupportEmail'; +import { useMosaicEnvironment } from '../../hooks/use-mosaic-environment'; +import { useMosaicSupportEmail } from '../../hooks/use-mosaic-support-email'; import type { ReverificationMethod, ReverificationPreparableMethod, diff --git a/packages/mosaic/src/features/reverification/steps/reverification-method-picker.tsx b/packages/mosaic/src/features/reverification/steps/reverification-method-picker.tsx index 67b78173a51..5d8f25f7519 100644 --- a/packages/mosaic/src/features/reverification/steps/reverification-method-picker.tsx +++ b/packages/mosaic/src/features/reverification/steps/reverification-method-picker.tsx @@ -8,7 +8,7 @@ import { Icon, IconFrame } from '../../../components/icon'; import { Item } from '../../../components/item'; import { Spinner } from '../../../components/spinner'; import { Text } from '../../../components/text'; -import { rtl } from '../../../utils/rtl.styles'; +import { rtl } from '../../../styles/rtl.styles'; const styles = stylex.create({ helpText: { diff --git a/packages/mosaic/src/features/user-button/__tests__/user-button.pages.test.tsx b/packages/mosaic/src/features/user-button/__tests__/user-button.pages.test.tsx index 51fa24ed3c0..e5f48ad5174 100644 --- a/packages/mosaic/src/features/user-button/__tests__/user-button.pages.test.tsx +++ b/packages/mosaic/src/features/user-button/__tests__/user-button.pages.test.tsx @@ -22,7 +22,7 @@ vi.mock('@clerk/shared/react', async importOriginal => { }; }); -vi.mock('../../../hooks/useMosaicEnvironment', () => ({ +vi.mock('../../../hooks/use-mosaic-environment', () => ({ useMosaicEnvironment: () => environment, })); diff --git a/packages/mosaic/src/hooks/useOrganizationListInView.ts b/packages/mosaic/src/features/user-button/use-organization-list-in-view.ts similarity index 95% rename from packages/mosaic/src/hooks/useOrganizationListInView.ts rename to packages/mosaic/src/features/user-button/use-organization-list-in-view.ts index 3ae5cb2a826..173277e46a5 100644 --- a/packages/mosaic/src/hooks/useOrganizationListInView.ts +++ b/packages/mosaic/src/features/user-button/use-organization-list-in-view.ts @@ -1,6 +1,6 @@ import { useOrganizationList } from '@clerk/shared/react'; -import { useInView } from './useInView'; +import { useInView } from '../../hooks/use-in-view'; const organizationListParams = { userMemberships: { diff --git a/packages/mosaic/src/features/user-button/user-button-avatar.view.tsx b/packages/mosaic/src/features/user-button/user-button-avatar.view.tsx index 0a9624ad8cd..de49aa027c0 100644 --- a/packages/mosaic/src/features/user-button/user-button-avatar.view.tsx +++ b/packages/mosaic/src/features/user-button/user-button-avatar.view.tsx @@ -4,7 +4,7 @@ import type { ReactElement } from 'react'; import type { AvatarProps } from '../../components/avatar'; import { Avatar } from '../../components/avatar'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; +import { reset } from '../../styles/reset.styles'; import { badgeSizes, leadSizes, ringSizes, sizes, styles } from './user-button-avatar.styles'; function initials(name: string): string { diff --git a/packages/mosaic/src/features/user-button/user-button-header.view.tsx b/packages/mosaic/src/features/user-button/user-button-header.view.tsx index 81ca8a25cae..cc412fda15c 100644 --- a/packages/mosaic/src/features/user-button/user-button-header.view.tsx +++ b/packages/mosaic/src/features/user-button/user-button-header.view.tsx @@ -2,8 +2,8 @@ import * as stylex from '@stylexjs/stylex'; import type { ReactElement, ReactNode } from 'react'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; -import { truncationStyles } from '../../utils/typography.styles'; +import { reset } from '../../styles/reset.styles'; +import { truncationStyles } from '../../styles/typography.styles'; import type { UserButtonHeaderLayout } from './user-button.types'; import { styles } from './user-button-header.styles'; diff --git a/packages/mosaic/src/features/user-button/user-button-item.view.tsx b/packages/mosaic/src/features/user-button/user-button-item.view.tsx index 572788c6264..c8c615c2adf 100644 --- a/packages/mosaic/src/features/user-button/user-button-item.view.tsx +++ b/packages/mosaic/src/features/user-button/user-button-item.view.tsx @@ -4,9 +4,9 @@ import React from 'react'; import { useRender } from '../../primitives/utils'; import type { MosaicComponentProps, MosaicElementProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { focusOutline } from '../../utils/focus-outline.styles'; -import { reset } from '../../utils/reset.styles'; -import { truncationStyles } from '../../utils/typography.styles'; +import { focusOutline } from '../../styles/focus-outline.styles'; +import { reset } from '../../styles/reset.styles'; +import { truncationStyles } from '../../styles/typography.styles'; import { styles } from './user-button-item.styles'; export const UserButtonItem = React.forwardRef>(function UserButtonItem( diff --git a/packages/mosaic/src/features/user-button/user-button.controller.tsx b/packages/mosaic/src/features/user-button/user-button.controller.tsx index 9af27e07bc0..3b5034f219b 100644 --- a/packages/mosaic/src/features/user-button/user-button.controller.tsx +++ b/packages/mosaic/src/features/user-button/user-button.controller.tsx @@ -1,6 +1,6 @@ -import { useSpinDelay } from '../../hooks/useSpinDelay'; +import { useSpinDelay } from '../../hooks/use-spin-delay'; import { setup } from '../../machine/setup'; -import { useMachine } from '../../machine/useMachine'; +import { useMachine } from '../../machine/use-machine'; import type { UserButtonModel } from './user-button.model'; import type { UserButtonMenuProps, UserButtonModeProps } from './user-button.types'; import type { UserButtonProps as UserButtonViewProps, UserButtonTriggerProps } from './user-button.view'; diff --git a/packages/mosaic/src/features/user-button/user-button.model.tsx b/packages/mosaic/src/features/user-button/user-button.model.tsx index 0fdb7559cc2..b987d404d33 100644 --- a/packages/mosaic/src/features/user-button/user-button.model.tsx +++ b/packages/mosaic/src/features/user-button/user-button.model.tsx @@ -11,9 +11,9 @@ import type { } from '@clerk/shared/types'; import { populateParamFromObject } from '@clerk/shared/url'; -import { useMosaicEnvironment } from '../../hooks/useMosaicEnvironment'; -import { useMosaicRouter } from '../../hooks/useMosaicRouter'; -import { useOrganizationListInView } from '../../hooks/useOrganizationListInView'; +import { useMosaicEnvironment } from '../../hooks/use-mosaic-environment'; +import { useMosaicRouter } from '../../hooks/use-mosaic-router'; +import { useOrganizationListInView } from './use-organization-list-in-view'; import type { UserButtonBrandingProps, UserButtonCallbacks, diff --git a/packages/mosaic/src/features/user-button/user-button.pages.tsx b/packages/mosaic/src/features/user-button/user-button.pages.tsx index 1c3c90055aa..53644d7ae25 100644 --- a/packages/mosaic/src/features/user-button/user-button.pages.tsx +++ b/packages/mosaic/src/features/user-button/user-button.pages.tsx @@ -11,7 +11,7 @@ import type { ReactNode } from 'react'; import { useCallback, useState } from 'react'; import { createPortal } from 'react-dom'; -import { useMosaicEnvironment } from '../../hooks/useMosaicEnvironment'; +import { useMosaicEnvironment } from '../../hooks/use-mosaic-environment'; import { applyOrder } from '../../utils/apply-order'; import { USER_PROFILE_PAGE_IDS } from '../user-profile/user-profile.layout'; import type { CustomProfileItem, CustomProfileLink, UserProfilePageId } from '../user-profile/user-profile.types'; diff --git a/packages/mosaic/src/features/user-button/user-button.view.tsx b/packages/mosaic/src/features/user-button/user-button.view.tsx index 7eeca04448f..4a50181c26c 100644 --- a/packages/mosaic/src/features/user-button/user-button.view.tsx +++ b/packages/mosaic/src/features/user-button/user-button.view.tsx @@ -18,10 +18,10 @@ import { fill, plural, useLocale, useMessages } from '../../localization'; import { Button as HeadlessButton } from '../../primitives/button'; import type { PopoverProps } from '../../primitives/popover'; import { themeProps } from '../../props'; +import { focusOutline } from '../../styles/focus-outline.styles'; +import { rtl } from '../../styles/rtl.styles'; +import { truncationStyles } from '../../styles/typography.styles'; import { applyOrder } from '../../utils/apply-order'; -import { focusOutline } from '../../utils/focus-outline.styles'; -import { rtl } from '../../utils/rtl.styles'; -import { truncationStyles } from '../../utils/typography.styles'; import type { UserButtonAction, UserButtonLayout, UserButtonSlot } from './user-button.layout'; import { resolveUserButtonLayout } from './user-button.layout'; import { styles } from './user-button.styles'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/mfa-test-utils.tsx b/packages/mosaic/src/features/user-profile/__tests__/mfa-test-utils.tsx index 62746b5b451..ce405461e31 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/mfa-test-utils.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/mfa-test-utils.tsx @@ -1,6 +1,6 @@ import { vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import { UserProfileAddMfaDialog } from '../user-profile-add-mfa.dialog'; import type { UserProfileMfaSetupViewProps } from '../user-profile-mfa-setup.view'; import { UserProfileMfaSetupView } from '../user-profile-mfa-setup.view'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-email.dialog.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-email.dialog.test.tsx index 86eaa964d24..32dd71396be 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-email.dialog.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-email.dialog.test.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { UserProfileAddEmailDialogProps } from '../user-profile-account-section/user-profile-add-email.dialog'; import { UserProfileAddEmailDialog } from '../user-profile-account-section/user-profile-add-email.dialog'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-email.integration.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-email.integration.test.tsx index 6b82e9d908f..9afeffdac3b 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-email.integration.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-email.integration.test.tsx @@ -2,7 +2,7 @@ import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import { UserProfileProfilePanelView } from '../user-profile-profile-panel.view'; describe('profile add email', () => { diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-phone.dialog.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-phone.dialog.test.tsx index 579e56d6e3f..efdbc3ca19c 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-phone.dialog.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-phone.dialog.test.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { UserProfileAddPhoneDialogProps } from '../user-profile-account-section/user-profile-add-phone.dialog'; import { UserProfileAddPhoneDialog } from '../user-profile-account-section/user-profile-add-phone.dialog'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-phone.integration.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-phone.integration.test.tsx index 38918699fe8..66c4b097ebf 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-phone.integration.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-add-phone.integration.test.tsx @@ -2,7 +2,7 @@ import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import { UserProfileProfilePanelView } from '../user-profile-profile-panel.view'; describe('profile add phone', () => { diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-api-keys-panel.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-api-keys-panel.view.test.tsx index 1ed4f4a9855..36ba8e9817f 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-api-keys-panel.view.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-api-keys-panel.view.test.tsx @@ -2,7 +2,7 @@ import { render, screen, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { UserProfileAPIKey, UserProfileApiKeysPanelViewProps } from '../user-profile-api-keys-panel.types'; import { UserProfileApiKeysPanelView } from '../user-profile-api-keys-panel.view'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-authenticator-setup.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-authenticator-setup.view.test.tsx index 4439cc4bf4c..964d311396e 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-authenticator-setup.view.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-authenticator-setup.view.test.tsx @@ -4,7 +4,7 @@ import { describe, expect, it } from 'vitest'; import { Card } from '../../../components/card'; import { Dialog } from '../../../components/dialog'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import { UserProfileAuthenticatorSetupView } from '../user-profile-authenticator-setup.view'; const setup = { diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-billing-panel.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-billing-panel.view.test.tsx index fa3df75c6cb..4ce53ac29f4 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-billing-panel.view.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-billing-panel.view.test.tsx @@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import { UserProfileBillingPanelView } from '../user-profile-billing-panel.view'; const subscription = { diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-connected-accounts-actions.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-connected-accounts-actions.test.tsx index 2e5afffffdc..bdff60b1263 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-connected-accounts-actions.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-connected-accounts-actions.test.tsx @@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import { UserProfileConnectedAccountsSectionView } from '../user-profile-connected-accounts-section.view'; const account = { id: 'github', provider: 'GitHub', identifier: 'test' }; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-contact-removal-focus.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-contact-removal-focus.test.tsx index 40335a5ee1e..0abbfdf3b10 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-contact-removal-focus.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-contact-removal-focus.test.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { describe, expect, it } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import { UserProfileEmailRowView } from '../user-profile-account-section/user-profile-email-row.view'; import { UserProfilePhoneRowView } from '../user-profile-account-section/user-profile-phone-row.view'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-delete-section.integration.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-delete-section.integration.test.tsx index b55fda0f5cc..849ba97022b 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-delete-section.integration.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-delete-section.integration.test.tsx @@ -4,7 +4,7 @@ import { render, screen, waitFor, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { beforeEach, describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import { UserProfileDeleteSection } from '../user-profile-delete-section/user-profile-delete-section'; let isLoaded: boolean; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-device-actions.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-device-actions.test.tsx index 6693e314a69..8e854fffc00 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-device-actions.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-device-actions.test.tsx @@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { UserProfileDevice } from '../user-profile-active-devices.types'; import { UserProfileActiveDevicesSectionView } from '../user-profile-active-devices-section.view'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-name.controller.test.ts b/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-name.controller.test.ts index 8a9d757eb13..2b3cf273fed 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-name.controller.test.ts +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-name.controller.test.ts @@ -1,7 +1,7 @@ import { act, renderHook, waitFor } from '@testing-library/react'; import { describe, expect, it, vi } from 'vitest'; -import { createActor } from '../../../machine/createActor'; +import { createActor } from '../../../machine/create-actor'; import { UserProfileSaveError } from '../user-profile-account-section/user-profile-account-section.types'; import { userProfileEditNameMachine, diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-name.dialog.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-name.dialog.test.tsx index 07a83dcbba9..048683d157e 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-name.dialog.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-name.dialog.test.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; import { Button } from '../../../components/button'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { UserProfileEditNameDialogProps } from '../user-profile-account-section/user-profile-edit-name.dialog'; import { UserProfileEditNameDialog } from '../user-profile-account-section/user-profile-edit-name.dialog'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-username.controller.test.ts b/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-username.controller.test.ts index c1c99cd6808..155b473bfbe 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-username.controller.test.ts +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-username.controller.test.ts @@ -1,7 +1,7 @@ import { act, renderHook, waitFor } from '@testing-library/react'; import { describe, expect, it, vi } from 'vitest'; -import { createActor } from '../../../machine/createActor'; +import { createActor } from '../../../machine/create-actor'; import { UserProfileSaveError } from '../user-profile-account-section/user-profile-account-section.types'; import { userProfileEditUsernameMachine, diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-username.dialog.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-username.dialog.test.tsx index ad079f44a49..fb21ffcdf35 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-username.dialog.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-edit-username.dialog.test.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; import { Button } from '../../../components/button'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { UserProfileEditUsernameDialogProps } from '../user-profile-account-section/user-profile-edit-username.dialog'; import { UserProfileEditUsernameDialog } from '../user-profile-account-section/user-profile-edit-username.dialog'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-email-actions.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-email-actions.test.tsx index 0666505cbce..1a230eece43 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-email-actions.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-email-actions.test.tsx @@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { UserProfileAccountSectionViewProps } from '../user-profile-account-section/user-profile-account-section.view'; import { UserProfileAccountSectionView } from '../user-profile-account-section/user-profile-account-section.view'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-mfa-cards.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-mfa-cards.view.test.tsx index 67eadf58c39..14b2f9e61a4 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-mfa-cards.view.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-mfa-cards.view.test.tsx @@ -5,7 +5,7 @@ import { describe, expect, it, vi } from 'vitest'; import { Card } from '../../../components/card'; import { Flow } from '../../../components/flow'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import { UserProfileAddSmsView } from '../user-profile-add-sms.view'; describe('MFA cards', () => { diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-mfa-section.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-mfa-section.view.test.tsx index d5042353c3a..19ccbaba533 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-mfa-section.view.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-mfa-section.view.test.tsx @@ -3,8 +3,8 @@ import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { describe, expect, it, vi } from 'vitest'; -import { deferred } from '../../../machines/__tests__/test-utils'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { deferred } from '../../../__tests__/async'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { UserProfileMfaMethod, UserProfileMfaSectionViewProps } from '../user-profile-mfa-section.view'; import { UserProfileMfaSectionView } from '../user-profile-mfa-section.view'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx index 4de4c2d4f02..d610e9dc132 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-section.view.test.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { UserProfilePasskey, UserProfilePasskeysSectionViewProps } from '../user-profile-passkeys-section.view'; import { UserProfilePasskeysSectionView } from '../user-profile-passkeys-section.view'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-phone-actions.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-phone-actions.test.tsx index 84745a2cd9c..51e22b1ebc9 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-phone-actions.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-phone-actions.test.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { UserProfileAccountSectionViewProps } from '../user-profile-account-section/user-profile-account-section.view'; import { UserProfileAccountSectionView } from '../user-profile-account-section/user-profile-account-section.view'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-picture-row.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-picture-row.view.test.tsx index 9b6e43d131c..3bd3055c685 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-picture-row.view.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-picture-row.view.test.tsx @@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { UserProfilePictureRowViewProps } from '../user-profile-account-section/user-profile-picture-row.view'; import { UserProfilePictureRowView } from '../user-profile-account-section/user-profile-picture-row.view'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-profile-panel.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-profile-panel.view.test.tsx index ef4ca5532de..c3e72dd7254 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-profile-panel.view.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-profile-panel.view.test.tsx @@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; import { useDestructiveController } from '../../../blocks/destructive/destructive.controller'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import { UserProfileDeleteSectionView } from '../user-profile-delete-section/user-profile-delete-section.view'; import type { UserProfileProfilePanelViewProps } from '../user-profile-profile-panel.view'; import { UserProfileProfilePanelView } from '../user-profile-profile-panel.view'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx index 39e78180fcb..cf514d03431 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-security-panel.view.test.tsx @@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; import { useDestructiveController } from '../../../blocks/destructive/destructive.controller'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import { UserProfileDeleteSectionView } from '../user-profile-delete-section/user-profile-delete-section.view'; import type { UserProfileSecurityPanelViewProps } from '../user-profile-security-panel.view'; import { UserProfileSecurityPanelView } from '../user-profile-security-panel.view'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-verify-email-link.dialog.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-verify-email-link.dialog.test.tsx index 9b2de023a40..818a2a7e236 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-verify-email-link.dialog.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-verify-email-link.dialog.test.tsx @@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { UserProfileVerifyEmailLinkDialogProps } from '../user-profile-account-section/user-profile-verify-email-link.dialog'; import { UserProfileVerifyEmailLinkDialog } from '../user-profile-account-section/user-profile-verify-email-link.dialog'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-verify-email-sso.dialog.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-verify-email-sso.dialog.test.tsx index 747ce6190e4..e652eefadba 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-verify-email-sso.dialog.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-verify-email-sso.dialog.test.tsx @@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { UserProfileVerifyEmailSsoDialogProps } from '../user-profile-account-section/user-profile-verify-email-sso.dialog'; import { UserProfileVerifyEmailSsoDialog } from '../user-profile-account-section/user-profile-verify-email-sso.dialog'; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile-web3-actions.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile-web3-actions.test.tsx index a30a938216c..e1b68f4007b 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile-web3-actions.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile-web3-actions.test.tsx @@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event'; import { useState } from 'react'; import { describe, expect, it, vi } from 'vitest'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import { UserProfileWeb3WalletsSectionView } from '../user-profile-web3-wallets-section.view'; const wallet = { id: 'wallet_1', provider: 'MetaMask', address: 'test', isVerified: true }; diff --git a/packages/mosaic/src/features/user-profile/__tests__/user-profile.view.test.tsx b/packages/mosaic/src/features/user-profile/__tests__/user-profile.view.test.tsx index 6a0ca5e1f85..290393d3223 100644 --- a/packages/mosaic/src/features/user-profile/__tests__/user-profile.view.test.tsx +++ b/packages/mosaic/src/features/user-profile/__tests__/user-profile.view.test.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; import { Dialog } from '../../../components/dialog'; -import { MosaicProvider } from '../../../MosaicProvider'; +import { MosaicProvider } from '../../../mosaic-provider'; import type { UserProfileViewProps } from '../user-profile.view'; import { UserProfileView } from '../user-profile.view'; diff --git a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-email.controller.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-email.controller.ts index 91230c5c20c..511dab48de7 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-email.controller.ts +++ b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-email.controller.ts @@ -2,7 +2,7 @@ import { useEffect } from 'react'; import { useMessages } from '../../../localization'; import { setup } from '../../../machine/setup'; -import { useMachine } from '../../../machine/useMachine'; +import { useMachine } from '../../../machine/use-machine'; import type { UserProfileAddEmailDialogProps } from './user-profile-add-email.dialog'; export interface UserProfileAddEmailControllerOptions { diff --git a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-phone.controller.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-phone.controller.ts index b5546cba3a7..425c7a90d97 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-phone.controller.ts +++ b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-add-phone.controller.ts @@ -2,7 +2,7 @@ import { useEffect } from 'react'; import { useMessages } from '../../../localization'; import { setup } from '../../../machine/setup'; -import { useMachine } from '../../../machine/useMachine'; +import { useMachine } from '../../../machine/use-machine'; import type { UserProfileAddPhoneDialogProps } from './user-profile-add-phone.dialog'; export interface UserProfileAddPhoneControllerOptions { diff --git a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-edit-name.controller.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-edit-name.controller.ts index 3c4c7f6adbd..97fe9ce813d 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-edit-name.controller.ts +++ b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-edit-name.controller.ts @@ -1,5 +1,5 @@ import { setup } from '../../../machine/setup'; -import { useMachine } from '../../../machine/useMachine'; +import { useMachine } from '../../../machine/use-machine'; import type { UserProfileFormError } from './user-profile-account-section.types'; import { UserProfileSaveError } from './user-profile-account-section.types'; import type { UserProfileEditNameField, UserProfileEditNameValue } from './user-profile-edit-name.dialog'; diff --git a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-edit-username.controller.ts b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-edit-username.controller.ts index 367bc9db0d7..ebb412f2203 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-edit-username.controller.ts +++ b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-edit-username.controller.ts @@ -1,5 +1,5 @@ import { setup } from '../../../machine/setup'; -import { useMachine } from '../../../machine/useMachine'; +import { useMachine } from '../../../machine/use-machine'; import type { UserProfileFormError } from './user-profile-account-section.types'; import { UserProfileSaveError } from './user-profile-account-section.types'; import type { UserProfileEditUsernameField } from './user-profile-edit-username.dialog'; diff --git a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-email-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-email-row.view.tsx index 11a4674b6b8..ca4bb1e6894 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-email-row.view.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-email-row.view.tsx @@ -4,7 +4,7 @@ import { Confirmation } from '../../../blocks/confirmation'; import { Button } from '../../../components/button'; import { Icon } from '../../../components/icon'; import { Text } from '../../../components/text'; -import { useListRemovalFocus } from '../../../hooks/useListRemovalFocus'; +import { useListRemovalFocus } from '../../../hooks/use-list-removal-focus'; import { fill, useMessages } from '../../../localization'; import type { UserProfileEmail } from './user-profile-account-section.types'; import type { UserProfileAddEmailControllerOptions } from './user-profile-add-email.controller'; diff --git a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-phone-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-phone-row.view.tsx index 18ab79432b6..4c9845ee4c2 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-phone-row.view.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-phone-row.view.tsx @@ -5,7 +5,7 @@ import { Confirmation } from '../../../blocks/confirmation'; import { Button } from '../../../components/button'; import { Icon } from '../../../components/icon'; import { Text } from '../../../components/text'; -import { useListRemovalFocus } from '../../../hooks/useListRemovalFocus'; +import { useListRemovalFocus } from '../../../hooks/use-list-removal-focus'; import { fill, useMessages } from '../../../localization'; import type { UserProfilePhone } from './user-profile-account-section.types'; import type { UserProfileAddPhoneControllerOptions } from './user-profile-add-phone.controller'; diff --git a/packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx index f2f3325ca58..e9b1373ce80 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx @@ -9,7 +9,7 @@ import { Badge } from '../../components/badge'; import { Button } from '../../components/button'; import { Dialog } from '../../components/dialog'; import { Section } from '../../components/section'; -import { useListRemovalFocus } from '../../hooks/useListRemovalFocus'; +import { useListRemovalFocus } from '../../hooks/use-list-removal-focus'; import type { MosaicMessages } from '../../localization'; import { fill, plural, useLocale, useMessages } from '../../localization'; import type { UserProfileDevice } from './user-profile-active-devices.types'; diff --git a/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.view.tsx index 2dd4c0b20de..6bfe57c8259 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.view.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.view.tsx @@ -12,11 +12,11 @@ import type { TableHeaderCellProps } from '../../components/table'; import { Table } from '../../components/table'; import { Text } from '../../components/text'; import { VisuallyHidden } from '../../components/visually-hidden'; -import { useListRemovalFocus } from '../../hooks/useListRemovalFocus'; +import { useListRemovalFocus } from '../../hooks/use-list-removal-focus'; import { fill, useMessages } from '../../localization'; import { useDataTable } from '../../primitives/hooks'; import { themeProps } from '../../props'; -import { truncateWithEndVisible } from '../../utils/truncateTextWithEndVisible'; +import { truncateWithEndVisible } from '../../utils/truncate-text-with-end-visible'; import { styles } from './user-profile-api-keys-panel.styles'; import type { UserProfileAPIKey, diff --git a/packages/mosaic/src/features/user-profile/user-profile-backup-codes.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-backup-codes.view.tsx index e425aa8b340..8f9a45c7a50 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-backup-codes.view.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-backup-codes.view.tsx @@ -8,7 +8,7 @@ import { Icon } from '../../components/icon'; import { Text } from '../../components/text'; import { useMessages } from '../../localization'; import { mergeStyleProps, themeProps } from '../../props'; -import { reset } from '../../utils/reset.styles'; +import { reset } from '../../styles/reset.styles'; import { styles } from './user-profile-backup-codes.styles'; export interface UserProfileBackupCodesViewProps { diff --git a/packages/mosaic/src/features/user-profile/user-profile-billing-history-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-billing-history-section.view.tsx index b9f70aed68b..2911d404460 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-billing-history-section.view.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-billing-history-section.view.tsx @@ -5,7 +5,7 @@ import { Badge } from '../../components/badge'; import { Button } from '../../components/button'; import { Icon } from '../../components/icon'; import { Section } from '../../components/section'; -import { rtl } from '../../utils/rtl.styles'; +import { rtl } from '../../styles/rtl.styles'; import { styles } from './user-profile-billing-history-section.styles'; export interface UserProfileBillingHistoryItem { diff --git a/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section.view.tsx index 273fb46c62d..aaed3a43dde 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section.view.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section.view.tsx @@ -2,7 +2,7 @@ import { useMemo, useRef } from 'react'; import { Confirmation } from '../../blocks/confirmation'; import { Section } from '../../components/section'; -import { useListRemovalFocus } from '../../hooks/useListRemovalFocus'; +import { useListRemovalFocus } from '../../hooks/use-list-removal-focus'; import { fill, useMessages } from '../../localization'; import { UserProfileConnectedAccountRowView } from './user-profile-connected-account-row.view'; diff --git a/packages/mosaic/src/features/user-profile/user-profile-create-api-key.dialog.tsx b/packages/mosaic/src/features/user-profile/user-profile-create-api-key.dialog.tsx index f8927507902..e51ebdcd625 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-create-api-key.dialog.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-create-api-key.dialog.tsx @@ -15,7 +15,7 @@ import { InputGroup } from '../../components/input-group'; import { Select } from '../../components/select'; import { Text } from '../../components/text'; import { fill, useMessages } from '../../localization'; -import { truncationStyles } from '../../utils/typography.styles'; +import { truncationStyles } from '../../styles/typography.styles'; const expirationValues = ['never', '1d', '7d', '30d', '60d', '90d', '180d', '1y'] as const; diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-section.view.tsx index e1cf0982664..d6fd19591fd 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section.view.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section.view.tsx @@ -2,7 +2,7 @@ import { type ReactNode, type Ref, useMemo, useRef, useState } from 'react'; import { Confirmation } from '../../blocks/confirmation'; import { Text } from '../../components/text'; -import { useListRemovalFocus } from '../../hooks/useListRemovalFocus'; +import { useListRemovalFocus } from '../../hooks/use-list-removal-focus'; import { fill, type MosaicMessages, useMessages } from '../../localization'; import { UserProfileAddMfaDialog } from './user-profile-add-mfa.dialog'; import { UserProfileAddMfaView } from './user-profile-add-mfa.view'; diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx index 2f7eb153fbb..38de095b398 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-passkeys-section.view.tsx @@ -5,7 +5,7 @@ import { Button } from '../../components/button'; import { Field } from '../../components/field'; import { Icon } from '../../components/icon'; import { Section } from '../../components/section'; -import { useListRemovalFocus } from '../../hooks/useListRemovalFocus'; +import { useListRemovalFocus } from '../../hooks/use-list-removal-focus'; import { fill } from '../../localization/messages'; import { UserProfilePasskeyRowView } from './user-profile-passkey-row.view'; import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages'; diff --git a/packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-edit-password.controller.test.ts b/packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-edit-password.controller.test.ts index a05b6232abd..2ab0426e474 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-edit-password.controller.test.ts +++ b/packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-edit-password.controller.test.ts @@ -1,17 +1,10 @@ import { act, renderHook, waitFor } from '@testing-library/react'; import { describe, expect, it, vi } from 'vitest'; +import { deferred } from '../../../__tests__/async'; import type { FieldFeedback } from '../../../components/form/form-submit-error'; import { useUserProfileEditPasswordController } from './user-profile-edit-password.controller'; -function deferred() { - let resolve: (result: T) => void = () => {}; - const promise = new Promise(r => { - resolve = r; - }); - return { promise, resolve }; -} - describe('useUserProfileEditPasswordController timing', () => { it('shows a validation failure instead of silently dropping it', async () => { vi.useFakeTimers(); @@ -105,7 +98,7 @@ describe('useUserProfileEditPasswordController timing', () => { }); it('ignores dismissal and duplicate saves in the same event as submission', async () => { - const save = deferred(); + const save = deferred(); const onSubmit = vi.fn(() => save.promise); const { result } = renderHook(() => useUserProfileEditPasswordController({ requiresCurrentPassword: true, onSubmit }), diff --git a/packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-section.model.ts b/packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-section.model.ts index 93be9526e9f..94fb2ccf737 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-section.model.ts +++ b/packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-password-section.model.ts @@ -7,7 +7,7 @@ import { useMemo } from 'react'; import type { FieldFeedback } from '../../../components/form'; import { FormSubmitError } from '../../../components/form'; -import { useMosaicEnvironment } from '../../../hooks/useMosaicEnvironment'; +import { useMosaicEnvironment } from '../../../hooks/use-mosaic-environment'; import { useErrorText, useLocale, useMessages } from '../../../localization'; import { passwordFormError } from './user-profile-password-errors'; import { passwordFieldFeedback } from './user-profile-password-feedback'; diff --git a/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.controller.ts b/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.controller.ts index 6afbdb9aeb6..5aa10686cc9 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.controller.ts +++ b/packages/mosaic/src/features/user-profile/user-profile-rename-passkey.controller.ts @@ -1,5 +1,5 @@ import { setup } from '../../machine/setup'; -import { useMachine } from '../../machine/useMachine'; +import { useMachine } from '../../machine/use-machine'; import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages'; interface UserProfileRenamePasskeyContext { diff --git a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx index 427f30c8e65..ee68bbff1d3 100644 --- a/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx +++ b/packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section.view.tsx @@ -2,9 +2,9 @@ import { useMemo, useRef } from 'react'; import { Confirmation } from '../../blocks/confirmation'; import { Section } from '../../components/section'; -import { useListRemovalFocus } from '../../hooks/useListRemovalFocus'; +import { useListRemovalFocus } from '../../hooks/use-list-removal-focus'; import { fill, useMessages } from '../../localization'; -import { truncateWithEndVisible } from '../../utils/truncateTextWithEndVisible'; +import { truncateWithEndVisible } from '../../utils/truncate-text-with-end-visible'; import { UserProfileWeb3WalletRowView } from './user-profile-web3-wallet-row.view'; export interface UserProfileWeb3Provider { diff --git a/packages/mosaic/src/hooks/__tests__/useAccessibleWarnings.test.ts b/packages/mosaic/src/hooks/__tests__/use-accessible-warnings.test.ts similarity index 90% rename from packages/mosaic/src/hooks/__tests__/useAccessibleWarnings.test.ts rename to packages/mosaic/src/hooks/__tests__/use-accessible-warnings.test.ts index ccfce1b006a..ca018b425f5 100644 --- a/packages/mosaic/src/hooks/__tests__/useAccessibleWarnings.test.ts +++ b/packages/mosaic/src/hooks/__tests__/use-accessible-warnings.test.ts @@ -1,8 +1,8 @@ import { act, cleanup, renderHook } from '@testing-library/react'; import { afterEach, describe, expect, it, vi } from 'vitest'; -import { useAccessibleDescriptionWarning } from '../useAccessibleDescriptionWarning'; -import { useAccessibleNameWarning } from '../useAccessibleNameWarning'; +import { useAccessibleDescriptionWarning } from '../use-accessible-description-warning'; +import { useAccessibleNameWarning } from '../use-accessible-name-warning'; afterEach(() => { cleanup(); diff --git a/packages/mosaic/src/hooks/__tests__/useMosaicSupportEmail.test.ts b/packages/mosaic/src/hooks/__tests__/use-mosaic-support-email.test.ts similarity index 95% rename from packages/mosaic/src/hooks/__tests__/useMosaicSupportEmail.test.ts rename to packages/mosaic/src/hooks/__tests__/use-mosaic-support-email.test.ts index af9054bc6d7..2e812d6a3ba 100644 --- a/packages/mosaic/src/hooks/__tests__/useMosaicSupportEmail.test.ts +++ b/packages/mosaic/src/hooks/__tests__/use-mosaic-support-email.test.ts @@ -2,7 +2,7 @@ import type * as SharedReact from '@clerk/shared/react'; import { renderHook } from '@testing-library/react'; import { beforeEach, describe, expect, it, vi } from 'vitest'; -import { useMosaicSupportEmail } from '../useMosaicSupportEmail'; +import { useMosaicSupportEmail } from '../use-mosaic-support-email'; let supportEmailFromOptions: string | undefined; let frontendApi: string; @@ -24,7 +24,7 @@ vi.mock('@clerk/shared/react', async importOriginal => { }; }); -vi.mock('../useMosaicEnvironment', () => ({ +vi.mock('../use-mosaic-environment', () => ({ useMosaicEnvironment: () => environment(), })); diff --git a/packages/mosaic/src/hooks/__tests__/useSpinDelay.test.ts b/packages/mosaic/src/hooks/__tests__/use-spin-delay.test.ts similarity index 98% rename from packages/mosaic/src/hooks/__tests__/useSpinDelay.test.ts rename to packages/mosaic/src/hooks/__tests__/use-spin-delay.test.ts index 7019010e836..9b9ee7b39ff 100644 --- a/packages/mosaic/src/hooks/__tests__/useSpinDelay.test.ts +++ b/packages/mosaic/src/hooks/__tests__/use-spin-delay.test.ts @@ -1,7 +1,7 @@ import { act, renderHook } from '@testing-library/react'; import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; -import { useSpinDelay } from '../useSpinDelay'; +import { useSpinDelay } from '../use-spin-delay'; describe('useSpinDelay', () => { beforeEach(() => { diff --git a/packages/mosaic/src/hooks/useAccessibleDescriptionWarning.ts b/packages/mosaic/src/hooks/use-accessible-description-warning.ts similarity index 100% rename from packages/mosaic/src/hooks/useAccessibleDescriptionWarning.ts rename to packages/mosaic/src/hooks/use-accessible-description-warning.ts diff --git a/packages/mosaic/src/hooks/useAccessibleNameWarning.ts b/packages/mosaic/src/hooks/use-accessible-name-warning.ts similarity index 100% rename from packages/mosaic/src/hooks/useAccessibleNameWarning.ts rename to packages/mosaic/src/hooks/use-accessible-name-warning.ts diff --git a/packages/mosaic/src/hooks/useInView.ts b/packages/mosaic/src/hooks/use-in-view.ts similarity index 100% rename from packages/mosaic/src/hooks/useInView.ts rename to packages/mosaic/src/hooks/use-in-view.ts diff --git a/packages/mosaic/src/hooks/useListRemovalFocus.ts b/packages/mosaic/src/hooks/use-list-removal-focus.ts similarity index 100% rename from packages/mosaic/src/hooks/useListRemovalFocus.ts rename to packages/mosaic/src/hooks/use-list-removal-focus.ts diff --git a/packages/mosaic/src/hooks/useMosaicEnvironment.ts b/packages/mosaic/src/hooks/use-mosaic-environment.ts similarity index 100% rename from packages/mosaic/src/hooks/useMosaicEnvironment.ts rename to packages/mosaic/src/hooks/use-mosaic-environment.ts diff --git a/packages/mosaic/src/hooks/useMosaicRouter.ts b/packages/mosaic/src/hooks/use-mosaic-router.ts similarity index 100% rename from packages/mosaic/src/hooks/useMosaicRouter.ts rename to packages/mosaic/src/hooks/use-mosaic-router.ts diff --git a/packages/mosaic/src/hooks/useMosaicSupportEmail.ts b/packages/mosaic/src/hooks/use-mosaic-support-email.ts similarity index 95% rename from packages/mosaic/src/hooks/useMosaicSupportEmail.ts rename to packages/mosaic/src/hooks/use-mosaic-support-email.ts index 7c1b32567f0..ceb743c382c 100644 --- a/packages/mosaic/src/hooks/useMosaicSupportEmail.ts +++ b/packages/mosaic/src/hooks/use-mosaic-support-email.ts @@ -1,7 +1,7 @@ import { buildEmailAddress } from '@clerk/shared/internal/clerk-js/email'; import { useClerk } from '@clerk/shared/react'; -import { useMosaicEnvironment } from './useMosaicEnvironment'; +import { useMosaicEnvironment } from './use-mosaic-environment'; /** * Resolves the support email Mosaic flows show in "contact us" copy. diff --git a/packages/mosaic/src/hooks/useSpinDelay.ts b/packages/mosaic/src/hooks/use-spin-delay.ts similarity index 100% rename from packages/mosaic/src/hooks/useSpinDelay.ts rename to packages/mosaic/src/hooks/use-spin-delay.ts diff --git a/packages/mosaic/src/index.ts b/packages/mosaic/src/index.ts index ff3783da6f5..27b57bdfeeb 100644 --- a/packages/mosaic/src/index.ts +++ b/packages/mosaic/src/index.ts @@ -2,4 +2,4 @@ export type { UserButtonProps } from './features/user-button/user-button'; export { UserButton } from './features/user-button/user-button'; -export { MosaicProvider } from './MosaicProvider'; +export { MosaicProvider } from './mosaic-provider'; diff --git a/packages/mosaic/src/machine/ADOPTION.md b/packages/mosaic/src/machine/ADOPTION.md index 714670ba144..833566bbbb5 100644 --- a/packages/mosaic/src/machine/ADOPTION.md +++ b/packages/mosaic/src/machine/ADOPTION.md @@ -115,7 +115,7 @@ Problems: ### After ```ts -import { createMachine } from '@/mosaic/machine/createMachine'; +import { createMachine } from '@/mosaic/machine/create-machine'; import { assign } from '@/mosaic/machine/assign'; type Context = { error: string | null }; diff --git a/packages/mosaic/src/machine/README.md b/packages/mosaic/src/machine/README.md index f3c2093f02d..344e145dc2a 100644 --- a/packages/mosaic/src/machine/README.md +++ b/packages/mosaic/src/machine/README.md @@ -62,7 +62,7 @@ run it. ## Your first machine ```ts -import { createMachine } from '@/mosaic/machine/createMachine'; +import { createMachine } from '@/mosaic/machine/create-machine'; import { assign } from '@/mosaic/machine/assign'; const loader = createMachine({ @@ -164,7 +164,7 @@ A machine on its own does nothing — it's just a description. To run it you wra it in an **actor** (the running instance): ```ts -import { createActor } from '@/mosaic/machine/createActor'; +import { createActor } from '@/mosaic/machine/create-actor'; const actor = createActor(loader); @@ -185,7 +185,7 @@ time. `value` is the state name; `context` is the riding data. `useMachine` does the create + start + subscribe for you: ```tsx -import { useMachine } from '@/mosaic/machine/useMachine'; +import { useMachine } from '@/mosaic/machine/use-machine'; function Loader() { const [snapshot, send] = useMachine(loader); diff --git a/packages/mosaic/src/machine/__tests__/delete-organization-machine.ts b/packages/mosaic/src/machine/__tests__/delete-organization-machine.ts index 8aa1d338e43..c875d6e15ae 100644 --- a/packages/mosaic/src/machine/__tests__/delete-organization-machine.ts +++ b/packages/mosaic/src/machine/__tests__/delete-organization-machine.ts @@ -1,5 +1,5 @@ import { assign } from '../assign'; -import { createMachine } from '../createMachine'; +import { createMachine } from '../create-machine'; import type { DoneInvokeEvent, ErrorInvokeEvent, StateMachine } from '../types'; /** diff --git a/packages/mosaic/src/machine/__tests__/machine.test.ts b/packages/mosaic/src/machine/__tests__/machine.test.ts index 659d1154722..2e04bc9c76a 100644 --- a/packages/mosaic/src/machine/__tests__/machine.test.ts +++ b/packages/mosaic/src/machine/__tests__/machine.test.ts @@ -1,8 +1,9 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; +import { deferred, tick } from '../../__tests__/async'; import { assign, isAssignAction } from '../assign'; -import { createActor, mockActor } from '../createActor'; -import { createMachine } from '../createMachine'; +import { createActor, mockActor } from '../create-actor'; +import { createMachine } from '../create-machine'; import type { DoneInvokeEvent } from '../types'; import { createDeleteOrgMachine, @@ -11,20 +12,6 @@ import { type DeleteOrgEvent, } from './delete-organization-machine'; -/** Flush microtasks (and the macrotask queue) so invoked promises settle. */ -const tick = () => new Promise(resolve => setTimeout(resolve, 0)); - -/** A promise whose resolution is controlled by the test (for in-flight assertions). */ -function deferred() { - let resolve!: (value: T) => void; - let reject!: (reason?: unknown) => void; - const promise = new Promise((res, rej) => { - resolve = res; - reject = rej; - }); - return { promise, resolve, reject }; -} - describe('createMachine — introspection (the swingset seam)', () => { it('exposes states, initial, context and id without running anything', () => { const machine = createDeleteOrgMachine(() => Promise.resolve()); diff --git a/packages/mosaic/src/machine/__tests__/patterns.test.ts b/packages/mosaic/src/machine/__tests__/patterns.test.ts index 5fcc1936efd..60688e9636f 100644 --- a/packages/mosaic/src/machine/__tests__/patterns.test.ts +++ b/packages/mosaic/src/machine/__tests__/patterns.test.ts @@ -7,21 +7,10 @@ */ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; -import { createActor } from '../createActor'; +import { deferred, tick } from '../../__tests__/async'; +import { createActor } from '../create-actor'; import { setup } from '../setup'; -const tick = () => new Promise(r => setTimeout(r, 0)); - -function deferred() { - let resolve!: (value: T) => void; - let reject!: (reason?: unknown) => void; - const promise = new Promise((res, rej) => { - resolve = res; - reject = rej; - }); - return { promise, resolve, reject }; -} - // ─── Pattern 1: Multiple competing entry points (replaces useLoadingStatus + useCardState) ── /** diff --git a/packages/mosaic/src/machine/__tests__/useMachine.test.tsx b/packages/mosaic/src/machine/__tests__/use-machine.test.tsx similarity index 96% rename from packages/mosaic/src/machine/__tests__/useMachine.test.tsx rename to packages/mosaic/src/machine/__tests__/use-machine.test.tsx index a994710ad4a..6052f991b99 100644 --- a/packages/mosaic/src/machine/__tests__/useMachine.test.tsx +++ b/packages/mosaic/src/machine/__tests__/use-machine.test.tsx @@ -2,21 +2,13 @@ import { act, fireEvent, render, screen } from '@testing-library/react'; import React from 'react'; import { afterEach, describe, expect, it, vi } from 'vitest'; +import { deferred } from '../../__tests__/async'; import { assign } from '../assign'; -import { createActor, mockActor } from '../createActor'; -import { createMachine } from '../createMachine'; -import { useActor, useMachine, useSelector } from '../useMachine'; +import { createActor, mockActor } from '../create-actor'; +import { createMachine } from '../create-machine'; +import { useActor, useMachine, useSelector } from '../use-machine'; import { createDeleteOrgMachine } from './delete-organization-machine'; -/** A promise whose resolution the test controls. */ -function deferred() { - let resolve!: (value: T) => void; - const promise = new Promise(res => { - resolve = res; - }); - return { promise, resolve }; -} - describe('useMachine — drives a flow from a component', () => { it('re-renders as send advances the machine through its states', async () => { const gate = deferred(); diff --git a/packages/mosaic/src/machine/__tests__/wizard-migration.test.tsx b/packages/mosaic/src/machine/__tests__/wizard-migration.test.tsx index 36da8009719..0e354b54479 100644 --- a/packages/mosaic/src/machine/__tests__/wizard-migration.test.tsx +++ b/packages/mosaic/src/machine/__tests__/wizard-migration.test.tsx @@ -3,10 +3,10 @@ import React from 'react'; import { describe, expect, it, vi } from 'vitest'; import { assign } from '../assign'; -import { createActor, mockActor } from '../createActor'; -import { createMachine } from '../createMachine'; +import { createActor, mockActor } from '../create-actor'; +import { createMachine } from '../create-machine'; import type { StateConfig, StateMachine } from '../types'; -import { useActor, useMachine, useSelector } from '../useMachine'; +import { useActor, useMachine, useSelector } from '../use-machine'; /** * Wizard migration: before → after. @@ -437,7 +437,7 @@ describe('Wizard AFTER — scope-boundary signal (the seam parent-link would hoo }); }); -// ── Driven through the React hooks (mirrors useMachine.test.tsx patterns) ────── +// ── Driven through the React hooks (mirrors use-machine.test.tsx patterns) ────── const STEP_LABEL: Record = { intro: 'Welcome', details: 'Your details', review: 'Review & submit' }; diff --git a/packages/mosaic/src/machine/createActor.ts b/packages/mosaic/src/machine/create-actor.ts similarity index 100% rename from packages/mosaic/src/machine/createActor.ts rename to packages/mosaic/src/machine/create-actor.ts diff --git a/packages/mosaic/src/machine/createMachine.ts b/packages/mosaic/src/machine/create-machine.ts similarity index 100% rename from packages/mosaic/src/machine/createMachine.ts rename to packages/mosaic/src/machine/create-machine.ts diff --git a/packages/mosaic/src/machine/setup.ts b/packages/mosaic/src/machine/setup.ts index a0109d4280d..201f2a67b72 100644 --- a/packages/mosaic/src/machine/setup.ts +++ b/packages/mosaic/src/machine/setup.ts @@ -1,5 +1,5 @@ import { assign as _assign } from './assign'; -import { createMachine as _createMachine } from './createMachine'; +import { createMachine as _createMachine } from './create-machine'; import type { AssignAction, DoneInvokeEvent, diff --git a/packages/mosaic/src/machine/types.test-d.ts b/packages/mosaic/src/machine/types.test-d.ts index 891418ea149..1afea48036f 100644 --- a/packages/mosaic/src/machine/types.test-d.ts +++ b/packages/mosaic/src/machine/types.test-d.ts @@ -1,8 +1,8 @@ import { describe, expectTypeOf, test } from 'vitest'; import { assign } from './assign'; -import { createActor } from './createActor'; -import { createMachine } from './createMachine'; +import { createActor } from './create-actor'; +import { createMachine } from './create-machine'; import { setup } from './setup'; import type { Snapshot, StateMachine } from './types'; diff --git a/packages/mosaic/src/machine/useMachine.ts b/packages/mosaic/src/machine/use-machine.ts similarity index 99% rename from packages/mosaic/src/machine/useMachine.ts rename to packages/mosaic/src/machine/use-machine.ts index df2b11e7fb9..2a52ad61a3a 100644 --- a/packages/mosaic/src/machine/useMachine.ts +++ b/packages/mosaic/src/machine/use-machine.ts @@ -1,6 +1,6 @@ import { useCallback, useEffect, useLayoutEffect, useRef, useSyncExternalStore } from 'react'; -import { createActor } from './createActor'; +import { createActor } from './create-actor'; import type { Actor, CreateActorOptions, EventObject, Snapshot, StateMachine } from './types'; export interface UseMachineOptions extends CreateActorOptions { diff --git a/packages/mosaic/src/machines/__tests__/firstFactorMachine.test.ts b/packages/mosaic/src/machines/__tests__/first-factor-machine.test.ts similarity index 97% rename from packages/mosaic/src/machines/__tests__/firstFactorMachine.test.ts rename to packages/mosaic/src/machines/__tests__/first-factor-machine.test.ts index 9ced9a901be..2aca9fbf283 100644 --- a/packages/mosaic/src/machines/__tests__/firstFactorMachine.test.ts +++ b/packages/mosaic/src/machines/__tests__/first-factor-machine.test.ts @@ -1,9 +1,9 @@ import type { SignInFirstFactor, SignInResource } from '@clerk/shared/types'; import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; -import { createActor } from '../../machine/createActor'; -import { createFirstFactorMachine } from '../firstFactorMachine'; -import { deferred, noop, tick } from './test-utils'; +import { deferred, noop, tick } from '../../__tests__/async'; +import { createActor } from '../../machine/create-actor'; +import { createFirstFactorMachine } from '../first-factor-machine'; const passwordFactor = { strategy: 'password' } as SignInFirstFactor; const emailCodeFactor = { diff --git a/packages/mosaic/src/machines/__tests__/signInMachine.test.ts b/packages/mosaic/src/machines/__tests__/sign-in-machine.test.ts similarity index 98% rename from packages/mosaic/src/machines/__tests__/signInMachine.test.ts rename to packages/mosaic/src/machines/__tests__/sign-in-machine.test.ts index 39f00706d82..2cf425bbd77 100644 --- a/packages/mosaic/src/machines/__tests__/signInMachine.test.ts +++ b/packages/mosaic/src/machines/__tests__/sign-in-machine.test.ts @@ -1,9 +1,9 @@ import type { SignInResource } from '@clerk/shared/types'; import { describe, expect, it, vi } from 'vitest'; -import { createActor } from '../../machine/createActor'; -import { createSignInMachine } from '../signInMachine'; -import { deferred, noop, tick } from './test-utils'; +import { deferred, noop, tick } from '../../__tests__/async'; +import { createActor } from '../../machine/create-actor'; +import { createSignInMachine } from '../sign-in-machine'; const makeAttempt = (status: string) => vi.fn().mockResolvedValue({ status } as SignInResource); diff --git a/packages/mosaic/src/machines/firstFactorMachine.ts b/packages/mosaic/src/machines/first-factor-machine.ts similarity index 100% rename from packages/mosaic/src/machines/firstFactorMachine.ts rename to packages/mosaic/src/machines/first-factor-machine.ts diff --git a/packages/mosaic/src/machines/signInMachine.ts b/packages/mosaic/src/machines/sign-in-machine.ts similarity index 100% rename from packages/mosaic/src/machines/signInMachine.ts rename to packages/mosaic/src/machines/sign-in-machine.ts diff --git a/packages/mosaic/src/MosaicProvider.tsx b/packages/mosaic/src/mosaic-provider.tsx similarity index 100% rename from packages/mosaic/src/MosaicProvider.tsx rename to packages/mosaic/src/mosaic-provider.tsx diff --git a/packages/mosaic/src/utils/feedback.styles.ts b/packages/mosaic/src/styles/feedback.styles.ts similarity index 100% rename from packages/mosaic/src/utils/feedback.styles.ts rename to packages/mosaic/src/styles/feedback.styles.ts diff --git a/packages/mosaic/src/utils/focus-outline.styles.ts b/packages/mosaic/src/styles/focus-outline.styles.ts similarity index 100% rename from packages/mosaic/src/utils/focus-outline.styles.ts rename to packages/mosaic/src/styles/focus-outline.styles.ts diff --git a/packages/mosaic/src/utils/focus-outline.test.ts b/packages/mosaic/src/styles/focus-outline.test.ts similarity index 100% rename from packages/mosaic/src/utils/focus-outline.test.ts rename to packages/mosaic/src/styles/focus-outline.test.ts diff --git a/packages/mosaic/src/utils/input.styles.ts b/packages/mosaic/src/styles/input.styles.ts similarity index 100% rename from packages/mosaic/src/utils/input.styles.ts rename to packages/mosaic/src/styles/input.styles.ts diff --git a/packages/mosaic/src/utils/reset.styles.ts b/packages/mosaic/src/styles/reset.styles.ts similarity index 100% rename from packages/mosaic/src/utils/reset.styles.ts rename to packages/mosaic/src/styles/reset.styles.ts diff --git a/packages/mosaic/src/utils/reset.test.tsx b/packages/mosaic/src/styles/reset.test.tsx similarity index 100% rename from packages/mosaic/src/utils/reset.test.tsx rename to packages/mosaic/src/styles/reset.test.tsx diff --git a/packages/mosaic/src/utils/rtl.styles.ts b/packages/mosaic/src/styles/rtl.styles.ts similarity index 100% rename from packages/mosaic/src/utils/rtl.styles.ts rename to packages/mosaic/src/styles/rtl.styles.ts diff --git a/packages/mosaic/src/utils/rtl.test.tsx b/packages/mosaic/src/styles/rtl.test.tsx similarity index 100% rename from packages/mosaic/src/utils/rtl.test.tsx rename to packages/mosaic/src/styles/rtl.test.tsx diff --git a/packages/mosaic/src/utils/tooltip-surface.styles.ts b/packages/mosaic/src/styles/tooltip-surface.styles.ts similarity index 100% rename from packages/mosaic/src/utils/tooltip-surface.styles.ts rename to packages/mosaic/src/styles/tooltip-surface.styles.ts diff --git a/packages/mosaic/src/utils/typography.styles.ts b/packages/mosaic/src/styles/typography.styles.ts similarity index 100% rename from packages/mosaic/src/utils/typography.styles.ts rename to packages/mosaic/src/styles/typography.styles.ts diff --git a/packages/mosaic/src/utils/typography.test.ts b/packages/mosaic/src/styles/typography.test.ts similarity index 100% rename from packages/mosaic/src/utils/typography.test.ts rename to packages/mosaic/src/styles/typography.test.ts diff --git a/packages/mosaic/src/utils/visually-hidden.styles.ts b/packages/mosaic/src/styles/visually-hidden.styles.ts similarity index 100% rename from packages/mosaic/src/utils/visually-hidden.styles.ts rename to packages/mosaic/src/styles/visually-hidden.styles.ts diff --git a/packages/mosaic/src/utils/visually-hidden.test.tsx b/packages/mosaic/src/styles/visually-hidden.test.tsx similarity index 100% rename from packages/mosaic/src/utils/visually-hidden.test.tsx rename to packages/mosaic/src/styles/visually-hidden.test.tsx diff --git a/packages/mosaic/src/utils/feedback.tsx b/packages/mosaic/src/utils/feedback.tsx index 3a0d5d67bd1..854429358a8 100644 --- a/packages/mosaic/src/utils/feedback.tsx +++ b/packages/mosaic/src/utils/feedback.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { Icon } from '../components/icon'; import type { IconName } from '../icons/registry'; import { autoUpdate, getDimensions } from '../primitives/utils/dom'; -import { feedbackStyles } from './feedback.styles'; +import { feedbackStyles } from '../styles/feedback.styles'; export function hasMessage(children: React.ReactNode) { return React.Children.toArray(children).some(child => child !== ''); diff --git a/packages/mosaic/src/utils/truncatable-label.tsx b/packages/mosaic/src/utils/truncatable-label.tsx index bf388c34166..86f222e6673 100644 --- a/packages/mosaic/src/utils/truncatable-label.tsx +++ b/packages/mosaic/src/utils/truncatable-label.tsx @@ -1,8 +1,8 @@ import * as stylex from '@stylexjs/stylex'; import React from 'react'; -import { reset } from './reset.styles'; -import { truncationStyles } from './typography.styles'; +import { reset } from '../styles/reset.styles'; +import { truncationStyles } from '../styles/typography.styles'; // The ellipsis comes from `truncationStyles.singleLine`; this releases the flex-item min-width // floor, without which the box never shrinks enough to clip. diff --git a/packages/mosaic/src/utils/truncateTextWithEndVisible.ts b/packages/mosaic/src/utils/truncate-text-with-end-visible.ts similarity index 100% rename from packages/mosaic/src/utils/truncateTextWithEndVisible.ts rename to packages/mosaic/src/utils/truncate-text-with-end-visible.ts diff --git a/packages/swingset/src/app/(clerk)/live-user-button.tsx b/packages/swingset/src/app/(clerk)/live-user-button.tsx index 3ab5d39e44e..62d5612990b 100644 --- a/packages/swingset/src/app/(clerk)/live-user-button.tsx +++ b/packages/swingset/src/app/(clerk)/live-user-button.tsx @@ -1,7 +1,7 @@ 'use client'; import { UserButton } from '@clerk/mosaic/features/user-button/user-button'; -import { MosaicProvider } from '@clerk/mosaic/MosaicProvider'; +import { MosaicProvider } from '@clerk/mosaic/mosaic-provider'; export function LiveUserButton() { return ( diff --git a/packages/swingset/src/app/(clerk)/live/api-keys/page.tsx b/packages/swingset/src/app/(clerk)/live/api-keys/page.tsx index bd1dc26e886..81db3e73cff 100644 --- a/packages/swingset/src/app/(clerk)/live/api-keys/page.tsx +++ b/packages/swingset/src/app/(clerk)/live/api-keys/page.tsx @@ -1,7 +1,7 @@ 'use client'; import { UserProfileApiKeysPanel } from '@clerk/mosaic/features/user-profile/user-profile-api-keys-panel'; -import { MosaicProvider } from '@clerk/mosaic/MosaicProvider'; +import { MosaicProvider } from '@clerk/mosaic/mosaic-provider'; import { useUser } from '@clerk/nextjs'; import Link from 'next/link'; diff --git a/packages/swingset/src/app/(clerk)/live/delete-account/page.tsx b/packages/swingset/src/app/(clerk)/live/delete-account/page.tsx index 11fb20a9017..20abd8e5c9a 100644 --- a/packages/swingset/src/app/(clerk)/live/delete-account/page.tsx +++ b/packages/swingset/src/app/(clerk)/live/delete-account/page.tsx @@ -1,7 +1,7 @@ 'use client'; import { UserProfileDeleteSection } from '@clerk/mosaic/features/user-profile/user-profile-delete-section/user-profile-delete-section'; -import { MosaicProvider } from '@clerk/mosaic/MosaicProvider'; +import { MosaicProvider } from '@clerk/mosaic/mosaic-provider'; import { useUser } from '@clerk/nextjs'; import Link from 'next/link'; diff --git a/packages/swingset/src/app/(clerk)/live/password/page.tsx b/packages/swingset/src/app/(clerk)/live/password/page.tsx index 7cb0e53e3b6..661fb4146df 100644 --- a/packages/swingset/src/app/(clerk)/live/password/page.tsx +++ b/packages/swingset/src/app/(clerk)/live/password/page.tsx @@ -1,7 +1,7 @@ 'use client'; import { UserProfilePasswordSection } from '@clerk/mosaic/features/user-profile/user-profile-password-section/user-profile-password-section'; -import { MosaicProvider } from '@clerk/mosaic/MosaicProvider'; +import { MosaicProvider } from '@clerk/mosaic/mosaic-provider'; import { useUser } from '@clerk/nextjs'; import Link from 'next/link'; diff --git a/packages/swingset/src/app/(clerk)/live/reverification/page.tsx b/packages/swingset/src/app/(clerk)/live/reverification/page.tsx index e2118ff35e6..a896b4bff6b 100644 --- a/packages/swingset/src/app/(clerk)/live/reverification/page.tsx +++ b/packages/swingset/src/app/(clerk)/live/reverification/page.tsx @@ -7,7 +7,7 @@ import { Card } from '@clerk/mosaic/components/card'; import { Dialog } from '@clerk/mosaic/components/dialog'; import { Flow, type FlowDirection } from '@clerk/mosaic/components/flow'; import { Reverification, useReverificationFlow } from '@clerk/mosaic/features/reverification'; -import { MosaicProvider } from '@clerk/mosaic/MosaicProvider'; +import { MosaicProvider } from '@clerk/mosaic/mosaic-provider'; import { useUser } from '@clerk/nextjs'; import { isClerkRuntimeError, isReverificationCancelledError } from '@clerk/shared/error'; import Link from 'next/link'; diff --git a/packages/swingset/src/components/ChaosProvider.tsx b/packages/swingset/src/components/ChaosProvider.tsx index 310a65c825a..21c7aa2aa7e 100644 --- a/packages/swingset/src/components/ChaosProvider.tsx +++ b/packages/swingset/src/components/ChaosProvider.tsx @@ -1,6 +1,6 @@ 'use client'; -import { MosaicProvider } from '@clerk/mosaic/MosaicProvider'; +import { MosaicProvider } from '@clerk/mosaic/mosaic-provider'; import * as React from 'react'; import { chaosLocalization } from '@/lib/chaos'; diff --git a/packages/swingset/src/stories/fixtures/user-profile-mfa-example.test.tsx b/packages/swingset/src/stories/fixtures/user-profile-mfa-example.test.tsx index 0602868f464..43d4b1a753e 100644 --- a/packages/swingset/src/stories/fixtures/user-profile-mfa-example.test.tsx +++ b/packages/swingset/src/stories/fixtures/user-profile-mfa-example.test.tsx @@ -2,7 +2,7 @@ import '@testing-library/jest-dom/vitest'; import { Dialog } from '@clerk/mosaic/components/dialog'; import { UserProfileView } from '@clerk/mosaic/features/user-profile/user-profile.view'; -import { MosaicProvider } from '@clerk/mosaic/MosaicProvider'; +import { MosaicProvider } from '@clerk/mosaic/mosaic-provider'; import { render, screen, waitFor, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import type { ComponentProps } from 'react'; diff --git a/packages/swingset/src/stories/fixtures/user-profile-mfa.test.ts b/packages/swingset/src/stories/fixtures/user-profile-mfa.test.ts index 6a93da10b08..5094f0bd667 100644 --- a/packages/swingset/src/stories/fixtures/user-profile-mfa.test.ts +++ b/packages/swingset/src/stories/fixtures/user-profile-mfa.test.ts @@ -1,7 +1,7 @@ import { act, renderHook } from '@testing-library/react'; import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; -import { deferred } from '../../../../mosaic/src/machines/__tests__/test-utils'; +import { deferred } from '../../../../mosaic/src/__tests__/async'; import { useUserProfileMfaFixture } from './user-profile-mfa'; const enrollmentCodes = ['enrollment-code-1', 'enrollment-code-2']; diff --git a/packages/swingset/src/stories/icon.stories.tsx b/packages/swingset/src/stories/icon.stories.tsx index 23f6b7516a1..2ec763d1316 100644 --- a/packages/swingset/src/stories/icon.stories.tsx +++ b/packages/swingset/src/stories/icon.stories.tsx @@ -1,7 +1,7 @@ import type { IconProps } from '@clerk/mosaic/components/icon'; import { Icon } from '@clerk/mosaic/components/icon'; import { iconRegistry } from '@clerk/mosaic/icons/registry'; -import { MosaicProvider } from '@clerk/mosaic/MosaicProvider'; +import { MosaicProvider } from '@clerk/mosaic/mosaic-provider'; import type { StoryMeta } from '@/lib/types'; diff --git a/packages/swingset/src/stories/localization.mdx b/packages/swingset/src/stories/localization.mdx index f27d877579d..5ed13d582e7 100644 --- a/packages/swingset/src/stories/localization.mdx +++ b/packages/swingset/src/stories/localization.mdx @@ -27,7 +27,7 @@ counts, the footer rows and the accessible names all come from the catalog. Change a few English strings: ```tsx -import { MosaicProvider } from '@clerk/mosaic/MosaicProvider'; +import { MosaicProvider } from '@clerk/mosaic/mosaic-provider'; diff --git a/packages/swingset/src/stories/localization.stories.tsx b/packages/swingset/src/stories/localization.stories.tsx index 6e1e8924cf7..04002a63db5 100644 --- a/packages/swingset/src/stories/localization.stories.tsx +++ b/packages/swingset/src/stories/localization.stories.tsx @@ -1,7 +1,7 @@ import { UserButtonView } from '@clerk/mosaic/features/user-button/user-button.view'; import type { MosaicCatalog } from '@clerk/mosaic/localization'; import { fill, plural, rich, useLocale, useMessages } from '@clerk/mosaic/localization'; -import { MosaicProvider } from '@clerk/mosaic/MosaicProvider'; +import { MosaicProvider } from '@clerk/mosaic/mosaic-provider'; import type { ReactNode } from 'react'; import { useState } from 'react'; diff --git a/references/mosaic-architecture.md b/references/mosaic-architecture.md index a422f078f5d..33f03367434 100644 --- a/references/mosaic-architecture.md +++ b/references/mosaic-architecture.md @@ -77,7 +77,7 @@ State styling uses real class + attribute-selector specificity — no `&&` boost Mosaic components need no provider to render or to be styled — the stylesheet and the `--cl-*` tokens do that work. `MosaicProvider` exists for two things: per-name icon glyph overrides and localization. ```tsx -import { MosaicProvider } from './MosaicProvider'; +import { MosaicProvider } from './mosaic-provider'; }}>{children}; ``` @@ -125,7 +125,7 @@ export const Button = React.forwardRef(function A theme's CSS wins over the Mosaic sheet without any prop: the sheet is imported into a cascade layer (`@import '@clerk/mosaic/styles.css' layer(components)`) and an unlayered rule beats any layered one. -`utils/reset.styles.ts` holds the per-element resets so a component does not re-declare UA-normalization; `utils/typography.styles.ts`, `utils/focus-outline.styles.ts` and `utils/rtl.styles.ts` do the same for the treatments several components share. `rtl.mirror` flips a direction-aware icon (a forward/back chevron, a pagination arrow) under a `dir="rtl"` ancestor; there are no mirrored twins in the icon registry. +`styles/reset.styles.ts` holds the per-element resets so a component does not re-declare UA-normalization; `styles/typography.styles.ts`, `styles/focus-outline.styles.ts` and `styles/rtl.styles.ts` do the same for the treatments several components share. `rtl.mirror` flips a direction-aware icon (a forward/back chevron, a pagination arrow) under a `dir="rtl"` ancestor; there are no mirrored twins in the icon registry. For the full StyleX authoring rules (token usage, the local `s(n)` spacing helper, the CSS build), see the `mosaic` Claude Code skill's `references/stylex.md`. @@ -485,31 +485,32 @@ The steps above cover the **styling** migration. For **flow** components — whe ## Files -| File | Purpose | -| --------------------------------------- | ---------------------------------------------------------------------------------- | -| `src/tokens.stylex.ts` | `--cl-*` token groups declared with `stylex.defineVars` | -| `src/props.ts` | `themeProps`, `mergeStyleProps`, `MosaicComponentProps`, `MosaicStyleProps` | -| `src/MosaicProvider.tsx` | Provider for the `icons` and `localization` props | -| `src/icons/overrides.ts` | `MosaicIconOverrides` type + `useMosaicIcons()` context | -| `src/icons/registry.tsx` | Built-in glyphs and the `IconName` union | -| `src/localization/` | Message registry, `MosaicCatalog` types, context hooks, and `fill`/`plural`/`rich` | -| `src/components/` | One subdirectory per component, and nothing else | -| `src/blocks/` | View fragments that own one piece of state of their own (`destructive`) | -| `src/utils/*.styles.ts` | Atoms shared across components: `reset`, `typography`, `focus-outline` | -| `src/hooks/` | Mosaic-only hooks (`useMosaicEnvironment`, `useMosaicRouter`, …) | -| `src/styles/index.ts` | StyleX-only barrel — the entry the CSS build walks | -| `src/machine/` | State-machine runtime (`createMachine`, `createActor`, `useMachine`) | -| `src/machines/` | Standalone machines and the shared `__tests__/test-utils.ts` | -| `src//*.model.tsx` | Clerk adapter — the only file in a feature that may import Clerk | -| `src//*.controller.tsx` | Local state and action wrapping; holds the feature's machine | -| `src//*.view.tsx` | Clerk-free rendering from plain props | -| `src//*.types.ts` | The data contract the model and the view both agree on | -| `src//*.messages.ts` | Every string the surface renders; its keys are the `localization` paths | -| `src/utils/reset.test.tsx` | Reset specs | -| `src/__tests__/MosaicProvider.test.tsx` | Icon-override and localization context specs | -| `src/components/button/button.test.tsx` | Component-level slot/state/variant specs | -| `src/__tests__/feature/` | FAPI builders, the fake FAPI, and `renderWithClerk` for feature tests | -| `src/features/user-button/__tests__/` | `user-button.feature.test.tsx` is the feature test to copy from | +| File | Purpose | +| ---------------------------------------- | ---------------------------------------------------------------------------------- | +| `src/tokens.stylex.ts` | `--cl-*` token groups declared with `stylex.defineVars` | +| `src/props.ts` | `themeProps`, `mergeStyleProps`, `MosaicComponentProps`, `MosaicStyleProps` | +| `src/mosaic-provider.tsx` | Provider for the `icons` and `localization` props | +| `src/icons/overrides.ts` | `MosaicIconOverrides` type + `useMosaicIcons()` context | +| `src/icons/registry.tsx` | Built-in glyphs and the `IconName` union | +| `src/localization/` | Message registry, `MosaicCatalog` types, context hooks, and `fill`/`plural`/`rich` | +| `src/components/` | One subdirectory per component, and nothing else | +| `src/blocks/` | View fragments that own one piece of state of their own (`destructive`) | +| `src/styles/*.styles.ts` | Atoms shared across components: `reset`, `typography`, `focus-outline` | +| `src/hooks/` | Mosaic-only hooks (`useMosaicEnvironment`, `useMosaicRouter`, …) | +| `src/styles/index.ts` | StyleX-only barrel — the entry the CSS build walks | +| `src/machine/` | State-machine runtime (`createMachine`, `createActor`, `useMachine`) | +| `src/machines/` | Standalone machines written with the runtime | +| `src//*.model.tsx` | Clerk adapter — the only file in a feature that may import Clerk | +| `src//*.controller.tsx` | Local state and action wrapping; holds the feature's machine | +| `src//*.view.tsx` | Clerk-free rendering from plain props | +| `src//*.types.ts` | The data contract the model and the view both agree on | +| `src//*.messages.ts` | Every string the surface renders; its keys are the `localization` paths | +| `src/styles/reset.test.tsx` | Reset specs | +| `src/__tests__/mosaic-provider.test.tsx` | Icon-override and localization context specs | +| `src/components/button/button.test.tsx` | Component-level slot/state/variant specs | +| `src/__tests__/feature/` | FAPI builders, the fake FAPI, and `renderWithClerk` for feature tests | +| `src/__tests__/async.ts` | `deferred`, `tick`, and `noop` for driving async flows in tests | +| `src/features/user-button/__tests__/` | `user-button.feature.test.tsx` is the feature test to copy from | `machine/` is the runtime; `machines/` is machines written with it. The one-letter difference is easy to misread — a feature's own machine belongs in its