feat(LoginForm): create LoginForm component with basic logic, test coverage and storybook placeholder

eslint.config.js

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
@@ -5,19 +8,16 @@ import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
 import { defineConfig, globalIgnores } from 'eslint/config'
 
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
+export default defineConfig([globalIgnores(['dist']), {
+  files: ['**/*.{ts,tsx}'],
+  extends: [
+    js.configs.recommended,
+    tseslint.configs.recommended,
+    reactHooks.configs.flat.recommended,
+    reactRefresh.configs.vite,
+  ],
+  languageOptions: {
+    ecmaVersion: 2020,
+    globals: globals.browser,
   },
-])
+}, ...storybook.configs["flat/recommended"]])

package.json

@@ -10,7 +10,9 @@
     "preview": "vite preview",
     "test:unit": "vitest",
     "test:run": "vitest run",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "ky": "^1.14.3",
@@ -19,8 +21,13 @@
     "zustand": "^5.0.12"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.2",
     "@eslint/js": "^9.39.1",
     "@module-federation/vite": "^1.12.3",
+    "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-vitest": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -29,14 +36,18 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
+    "@vitest/browser-playwright": "4.1.0",
     "@vitest/coverage-v8": "^4.1.0",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-storybook": "^10.3.3",
     "globals": "^16.5.0",
     "jsdom": "^29.0.0",
     "msw": "^2.12.11",
+    "playwright": "^1.58.2",
+    "storybook": "^10.3.3",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.0",
     "vite": "^7.3.1",

src/features/auth/api/calls/index.ts

@@ -1,4 +1,4 @@
 export * from "./login";
 export * from "./register";
 export * from "./logout";
-export * from "../../../../shared/api/calls/refresh";
+export * from "./mocks";

src/features/auth/model/index.ts

@@ -3,4 +3,7 @@ export * from "./types/service";
 export * from "./types/store";
 
 // Stores
-export * from "./stores/authStore/authStore";
+export * from "./stores";
+
+// Selectors
+export * from "./selectors";

src/features/auth/model/stores/authStore/authStore.spec.ts

@@ -11,7 +11,6 @@ const server = setupServer(
   apiCalls.loginMock,
   apiCalls.registerMock,
   apiCalls.logoutMock,
-  apiCalls.refreshMock,
 );
 
 const loginSpy = vi.spyOn(apiCalls, "login");

src/features/auth/model/stores/index.ts

@@ -0,0 +1 @@
+export { useAuthStore } from "./authStore/authStore";

src/features/auth/ui/LoginForm/LoginForm.spec.tsx

@@ -0,0 +1,58 @@
+import { selectAuthData, useAuthStore } from "../../model";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { LoginForm } from "./LoginForm";
+import { MOCK_EMAIL, MOCK_PASSWORD } from "../../api";
+
+describe("LoginForm", () => {
+  afterEach(() => {
+    useAuthStore.getState().reset();
+    vi.restoreAllMocks();
+  });
+
+  it("should render", () => {
+    render(<LoginForm />);
+
+    expect(screen.getByRole("form")).toBeInTheDocument();
+  });
+
+  it("disables submit button when form is invalid", () => {
+    render(<LoginForm />);
+    expect(screen.getByRole("button", { name: /login/i })).toBeDisabled();
+  });
+
+  it("enables submit button when form is valid", () => {
+    useAuthStore.getState().setEmail(MOCK_EMAIL);
+    useAuthStore.getState().setPassword(MOCK_PASSWORD);
+    render(<LoginForm />);
+    expect(screen.getByRole("button", { name: /login/i })).toBeEnabled();
+  });
+
+  it("updates email when user types", async () => {
+    render(<LoginForm />);
+    const emailInput = screen.getByRole("textbox", { name: /email/i });
+    await userEvent.type(emailInput, MOCK_EMAIL);
+    expect(selectAuthData(useAuthStore.getState()).email).toBe(MOCK_EMAIL);
+  });
+
+  it("updates password when user types", async () => {
+    render(<LoginForm />);
+    const passwordInput = screen.getByLabelText(/password/i);
+    await userEvent.type(passwordInput, MOCK_PASSWORD);
+    expect(selectAuthData(useAuthStore.getState()).password).toBe(
+      MOCK_PASSWORD,
+    );
+  });
+
+  it("calls login when submit form is valid and user clicks submit", async () => {
+    const loginSpy = vi.spyOn(useAuthStore.getState(), "login");
+
+    useAuthStore.getState().setEmail(MOCK_EMAIL);
+    useAuthStore.getState().setPassword(MOCK_PASSWORD);
+
+    render(<LoginForm />);
+    const submitButton = screen.getByRole("button", { name: /login/i });
+    await userEvent.click(submitButton);
+    expect(loginSpy).toHaveBeenCalled();
+  });
+});

src/features/auth/ui/LoginForm/LoginForm.stories.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { LoginForm } from "./LoginForm";
+
+const meta: Meta<typeof LoginForm> = {
+  component: LoginForm,
+  title: "features/auth/LoginForm",
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/features/auth/ui/LoginForm/LoginForm.tsx

@@ -1,5 +1,44 @@
+import { selectFormValid, useAuthStore } from "../../model";
+import type { SubmitEvent, ChangeEvent } from "react";
+
+/**
+ * Login form component
+ */
 export function LoginForm() {
+  const { formData, setEmail, setPassword, login } = useAuthStore();
+
+  const formValid = useAuthStore(selectFormValid);
+
+  const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+  };
+
+  const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setPassword(e.target.value);
+  };
+
+  const handleSubmit = (e: SubmitEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    login();
+  };
+
   return (
-    <form>Login Form</form>
+    <form aria-label="Login form" onSubmit={handleSubmit}>
+      <input
+        type="email"
+        aria-label="Email"
+        value={formData?.email?.value ?? ""}
+        onChange={handleEmailChange}
+      />
+      <input
+        type="password"
+        aria-label="Password"
+        value={formData?.password?.value ?? ""}
+        onChange={handlePasswordChange}
+      />
+      <button type="submit" disabled={!formValid}>
+        Login
+      </button>
+    </form>
   );
 }

vitest.config.ts

@@ -1,32 +1,59 @@
 import { defineConfig } from "vitest/config";
 import react from "@vitejs/plugin-react";
 import path from "path";
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { playwright } from '@vitest/browser-playwright';
+const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
 
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
-  plugins: [
-    react({
-      babel: {
-        plugins: [["babel-plugin-react-compiler", {}]],
-      },
-    }),
-  ],
+  plugins: [react({
+    babel: {
+      plugins: [["babel-plugin-react-compiler", {}]]
+    }
+  })],
   resolve: {
     alias: {
       shared: path.resolve(__dirname, "src/shared"),
       entities: path.resolve(__dirname, "src/entities"),
       features: path.resolve(__dirname, "src/features"),
       widgets: path.resolve(__dirname, "src/widgets"),
-      app: path.resolve(__dirname, "src/app"),
-    },
+      app: path.resolve(__dirname, "src/app")
+    }
   },
   test: {
-    globals: true,
-    environment: "jsdom",
-    setupFiles: ["./src/shared/config/test/setup.ts"],
     coverage: {
       provider: "v8",
       reporter: ["text", "json", "html"],
-      exclude: ["node_modules/", "src/test/"],
+      exclude: ["node_modules/", "src/test/"]
     },
-  },
+    projects: [{
+      extends: true,
+      test: {
+        globals: true,
+        environment: "jsdom",
+        setupFiles: ["./src/shared/config/test/setup.ts"]
+      }
+    }, {
+      extends: true,
+      plugins: [
+      // The plugin will run tests for the stories defined in your Storybook config
+      // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      storybookTest({
+        configDir: path.join(dirname, '.storybook')
+      })],
+      test: {
+        name: 'storybook',
+        browser: {
+          enabled: true,
+          headless: true,
+          provider: playwright({}),
+          instances: [{
+            browser: 'chromium'
+          }]
+        }
+      }
+    }]
+  }
 });

vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />