front end initial arch tests

[jasonmorais]

Summary by Sourcery

Introduce frontend architectural tests and align UI ShareThrift codebase with new naming and structural conventions.

Enhancements:

• Normalize component, hook, and utility imports to match new kebab-/lower-case file naming conventions across the UI ShareThrift app.
• Adjust internal paths for view-listing containers and shared utilities to reflect the updated directory structure.

Tests:

• Add a Vitest-based frontend architecture test suite in a new arch-unit-tests package to enforce folder structure, naming conventions, layout requirements, and component patterns for the UI ShareThrift app.

Chores:

• Update Storybook stories and routing files to reference the renamed components and shared test utilities.

[sourcery-ai]

Reviewer's Guide

Introduces a frontend architecture test suite for the ui-sharethrift app and normalizes various frontend file paths, naming conventions, and imports to align with the new architectural rules (kebab-case directories, lowercase file names, and consistent hook/mock utilities).

Flow diagram for normalized import and naming conventions in ui-sharethrift

flowchart LR
  subgraph NamingConventions["Naming and path conventions"]
    KebabCaseDirs["Directories use kebab-case<br/>(e.g. use-user-is-admin, mock-auth)"]
    LowercaseFiles["React files use lowercase filenames<br/>(e.g. app.tsx, conversation.tsx, settings.tsx)"]
    NormalizedHooks["Hooks and utilities renamed<br/>(useUserIsAdmin -> use-user-is-admin.tsx)"]
    NormalizedMocks["Test mocks renamed<br/>(mockAuth.ts -> mock-auth.ts)"]
  end

  subgraph ImportLayers["Import layers"]
    EntryLayer["Entry layer<br/>(main.tsx, App.tsx)"]
    LayoutLayer["Layout layer<br/>(components/layouts)"]
    FeatureLayer["Feature pages and containers<br/>(view-listing, messages, account)"]
    SharedLayer["Shared components and hooks<br/>(components/shared)"]
    GqlLayer["GraphQL generated client<br/>(generated.tsx)"]
    TestLayer["Stories and tests<br/>(*.stories.tsx, arch-unit tests)"]
    TestUtilsLayer["Test utilities<br/>(test-utils, storybook-decorators, mock-auth)"]
  end

  EntryLayer --> LayoutLayer
  LayoutLayer --> FeatureLayer
  FeatureLayer --> SharedLayer
  FeatureLayer --> GqlLayer
  SharedLayer --> GqlLayer

  TestLayer --> FeatureLayer
  TestLayer --> SharedLayer
  TestLayer --> TestUtilsLayer
  TestUtilsLayer --> GqlLayer

  KebabCaseDirs --> ImportLayers
  LowercaseFiles --> ImportLayers
  NormalizedHooks --> SharedLayer
  NormalizedMocks --> TestUtilsLayer

Loading

File-Level Changes

Change	Details	Files
Add Vitest-based frontend architecture tests enforcing folder structure, naming conventions, layout requirements, component patterns, and best practices for the ui-sharethrift app.	Introduce helper utilities to traverse the filesystem, collect files/directories, and validate naming patterns (kebab-case and PascalCase). Add tests that enforce required top-level directories (assets, components, config) and the presence/shape of layouts and shared directories. Add naming convention tests that require all directories to be kebab-case, component files to be PascalCase, and container files to follow the *.container.tsx kebab-case pattern. Add layout requirements ensuring each layout has root/, section-layout.tsx, index.tsx, and components/ when pages/ exists. Add component pattern tests for container/display pairs, optional Storybook stories for components, and GraphQL container pairings. Add best-practice tests around barrel index.tsx files in layouts, config files living under config/, and asset directories organized by type and kebab-case.	packages/arch-unit-tests/src/frontend-architecture.test.ts
Normalize component, hook, and utility imports to match new lowercase/kebab-case filenames and updated directory structure in ui-sharethrift.	Update imports from PascalCase/uppercased filenames to lowercase/kebab-case equivalents for components such as Profile, Settings, Conversation, App, and various view-listing containers/components. Adjust relative import depths for generated GraphQL artifacts and Storybook decorators after moving or flattening view-listing subdirectories (e.g., components/listing-information -> listing-information). Rename hook and test utility imports to kebab-case file names (e.g., useUserIsAdmin -> use-user-is-admin, mockAuth -> mock-auth) and update all references. Ensure layout-level entry points and shared auth components reference the correct, renamed files to remain consistent with the new architecture tests.	apps/ui-sharethrift/src/components/layouts/home/account/index.tsx apps/ui-sharethrift/src/components/layouts/home/account/settings/pages/Settings.stories.tsx apps/ui-sharethrift/src/components/layouts/home/messages/Index.tsx apps/ui-sharethrift/src/components/layouts/home/messages/pages/Conversation.stories.tsx apps/ui-sharethrift/src/components/layouts/home/pages/view-listing/listing-image-gallery/listing-image-gallery.container.tsx apps/ui-sharethrift/src/components/layouts/home/pages/view-listing/listing-information/listing-information.container.stories.tsx apps/ui-sharethrift/src/components/layouts/home/pages/view-listing/listing-information/listing-information.stories.tsx apps/ui-sharethrift/src/components/layouts/home/pages/view-listing/listing-information/listing-information.tsx apps/ui-sharethrift/src/components/layouts/home/pages/view-listing/sharer-information/sharer-information.container.stories.tsx apps/ui-sharethrift/src/components/layouts/home/pages/view-listing/sharer-information/sharer-information.stories.tsx apps/ui-sharethrift/src/components/layouts/home/pages/view-listing/sharer-information/sharer-information.container.tsx apps/ui-sharethrift/src/components/layouts/home/pages/view-listing/sharer-information/sharer-information.tsx apps/ui-sharethrift/src/components/layouts/home/section-layout.tsx apps/ui-sharethrift/src/components/shared/auth-redirect-admin.stories.tsx apps/ui-sharethrift/src/components/shared/hooks/use-create-listing-navigation.stories.tsx apps/ui-sharethrift/src/components/shared/require-auth-admin.stories.tsx apps/ui-sharethrift/src/components/shared/require-auth-admin.tsx apps/ui-sharethrift/src/components/shared/require-auth.stories.tsx apps/ui-sharethrift/src/App.stories.tsx apps/ui-sharethrift/src/App.container.stories.tsx apps/ui-sharethrift/src/App.container.tsx apps/ui-sharethrift/src/App.tsx apps/ui-sharethrift/src/components/layouts/home/account/profile/components/profile-view.tsx apps/ui-sharethrift/src/components/layouts/home/index.tsx apps/ui-sharethrift/src/components/layouts/home/pages/create-listing/create-listing.tsx apps/ui-sharethrift/src/components/layouts/home/pages/view-listing/listing-information/listing-information.container.tsx apps/ui-sharethrift/src/components/layouts/home/pages/view-listing/view-listing.tsx apps/ui-sharethrift/src/main.tsx apps/ui-sharethrift/src/test-utils/storybook-decorators.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.