Merge pull request #47 from bartstc/chore/refactor-feature-slice-architecture

chore: refactor feature slice architecture

Author: bartstc

.claude/docs/architecture.md

@@ -40,10 +40,10 @@
 
 Each feature follows feature slice architecture patterns with three layers:
 
-- **presentation/** - UI components, UI-wise hooks
-- **application/** - Business logic, state management, logic-wise hooks
-- **infrastructure/** - Data fetching, external APIs, contracts, DTOs
-- **types/** - Type definitions
+- **components/** - UI components, presentational and decoupled from data sources, business logic, and router state
+- **application/** - Business logic, state management, custom hooks, stores, and functions
+- **providers/** - Data fetching, external APIs, platform/SDK interactions, commands/mutations
+- **models/** - Type definitions
 
 ## Key Patterns
 

.claude/docs/code-style.md

@@ -7,6 +7,21 @@
 - Follow functional programming principles - prefer immutability and pure functions
 - Treat data as immutable - return new objects/arrays instead of mutating
 
+## Naming Conventions
+
+### File naming
+
+| Category           | Convention | Example                                           |
+| ------------------ | ---------- | ------------------------------------------------- |
+| React components   | PascalCase | `ProductCard.tsx`, `SignInForm.tsx`               |
+| Storybook stories  | PascalCase | `ProductCard.stories.tsx`                         |
+| Page Objects (E2E) | PascalCase | `ProductListPage.ts`, `HeaderComponent.ts`        |
+| Everything else    | kebab-case | `auth-store.ts`, `use-counter.ts`, `build-url.ts` |
+
+"Everything else" includes: hooks, stores, utils, types, models, HOCs, handlers, fixtures, providers, machines, and tests.
+
+Test files mirror their source: `use-counter.ts` → `use-counter.test.ts`, `all-or-nothing.ts` → `all-or-nothing.test.ts`.
+
 ## TypeScript
 
 - Avoid `any` type - use `unknown` if necessary

.github/instructions/architecture.instructions.md

@@ -47,10 +47,10 @@ React SPA built with Vite using feature slice architecture with clean architectu
 
 Each feature follows feature slice architecture patterns with three layers:
 
-- **presentation/** - UI components, UI-wise hooks
-- **application/** - Business logic, state management, logic-wise hooks
-- **infrastructure/** - Data fetching, external APIs, contracts, DTOs
-- **types/** - Type definitions
+- **components/** - UI components, presentational and decoupled from data sources, business logic, and router state
+- **application/** - Business logic, state management, custom hooks, stores, and functions
+- **providers/** - Data fetching, external APIs, platform/SDK interactions, commands/mutations
+- **models/** - Type definitions
 
 ### Key Patterns
 

.github/instructions/development.instructions.md

@@ -31,6 +31,19 @@ Add specially formatted comments throughout the codebase, where appropriate, for
 - Follow functional programming principles where possible, especially prefer immutability and pure functions.
 - Treat data as immutable - return new objects/arrays instead of mutating existing ones.
 
+#### Naming Conventions
+
+| Category           | Convention | Example                                           |
+| ------------------ | ---------- | ------------------------------------------------- |
+| React components   | PascalCase | `ProductCard.tsx`, `SignInForm.tsx`               |
+| Storybook stories  | PascalCase | `ProductCard.stories.tsx`                         |
+| Page Objects (E2E) | PascalCase | `ProductListPage.ts`, `HeaderComponent.ts`        |
+| Everything else    | kebab-case | `auth-store.ts`, `use-counter.ts`, `build-url.ts` |
+
+"Everything else" includes: hooks, stores, utils, types, models, HOCs, handlers, fixtures, providers, machines, and tests.
+
+Test files mirror their source: `use-counter.ts` → `use-counter.test.ts`, `all-or-nothing.ts` → `all-or-nothing.test.ts`.
+
 #### Typescript
 
 - Avoid using `any` type. If necessary, use `unknown` instead.

.storybook/preview.ts

@@ -2,10 +2,10 @@ import { ChakraProvider, theme } from "@chakra-ui/react";
 import { initialize, mswLoader } from "msw-storybook-addon";
 import { createElement } from "react";
 
-import { getUserHandler } from "@/test-lib/handlers/getUserHandler";
-import { withAuth } from "@/test-lib/storybook/withAuth";
-import { withI18Next } from "@/test-lib/storybook/withI18Next";
-import { withReactQuery } from "@/test-lib/storybook/withReactQuery";
+import { getUserHandler } from "@/test-lib/handlers/get-user-handler";
+import { withAuth } from "@/test-lib/storybook/with-auth";
+import { withI18Next } from "@/test-lib/storybook/with-i18next";
+import { withReactQuery } from "@/test-lib/storybook/with-react-query";
 
 export const parameters = {
   controls: {

README.md

@@ -36,6 +36,7 @@ An opinionated, production-ready starter for **Single Page Application** develop
 - Feature slice architecture with clean architecture principles
 - Centralized API layer with endpoint-based organization and type consolidation
 - Formatting utilities for numbers, monetary values, and dates
+- File naming: PascalCase for React components/stories/page objects, kebab-case for everything else
 - A demo app with authentication showcasing the project structure and tooling in action (powered by [Fake Store API](https://fakestoreapi.com/docs))
 
 ## Getting started

e2e/fixtures/credentials-fixture.ts

@@ -1,9 +1,9 @@
-import type { IUser } from "@/features/auth/types/IUser";
-import { UserFixture } from "@/test-lib/fixtures/UserFixture";
+import type { User } from "@/features/auth/models/user";
+import { UserFixture } from "@/test-lib/fixtures/user-fixture";
 
 // AIDEV-NOTE: Reuses UserFixture from @/test-lib for domain data, adds E2E-specific password field
 export interface TestCredentials {
-  user: IUser;
+  user: User;
   password: string;
 }
 

e2e/pages/cart/CartPage.ts

@@ -1,6 +1,6 @@
 import type { Page, Locator } from "@playwright/test";
 
-import type { PaymentMethod } from "@/features/carts/types/PaymentMethod";
+import type { PaymentMethod } from "@/features/carts/models/payment-method";
 import { BasePage } from "@e2e/pages/base/BasePage";
 
 export class CartPage extends BasePage {

eslint.config.mjs

@@ -1,4 +1,5 @@
-import { config, configs as tsConfigs } from "typescript-eslint";
+import { defineConfig } from "eslint/config";
+import tseslint from "typescript-eslint";
 import js from "@eslint/js";
 import { configs } from "eslint-plugin-react-hooks";
 import reactPlugin from "eslint-plugin-react";
@@ -18,7 +19,7 @@ const featureToFeatureZones = featureSlices.map((feature) => ({
   message: "Avoid importing from other features.",
 }));
 
-export default config(
+export default defineConfig(
   {
     ignores: [
       "**/dist",
@@ -29,8 +30,8 @@ export default config(
     ],
   },
   js.configs.recommended,
-  tsConfigs.recommendedTypeChecked,
-  tsConfigs.stylisticTypeChecked,
+  tseslint.configs.recommendedTypeChecked,
+  tseslint.configs.stylisticTypeChecked,
   configs["recommended-latest"],
   reactPlugin.configs.flat.recommended,
   reactPlugin.configs.flat["jsx-runtime"],

src/app/App.tsx

@@ -6,7 +6,7 @@ import "@fontsource/inter/400.css";
 import "@fontsource/inter/700.css";
 import "@fontsource/inter/900.css";
 
-import { useAuthStore } from "@/features/auth/application/authStore";
+import { useAuthStore } from "@/features/auth/application/auth-store";
 import { router } from "@/pages/router";
 
 function App() {