@mohasinac/appkit 2.7.49 → 2.7.52

package/dist/ui/components/__tests__/ListingToolbar.test.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { ListingToolbar } from "../ListingToolbar";
+describe("ListingToolbar", () => {
+    it("renders the toolbar container", () => {
+        render(_jsx(ListingToolbar, {}));
+        expect(screen.getByTestId("listing-toolbar")).toBeTruthy();
+    });
+    it("renders search input when onSearchChange is provided", () => {
+        render(_jsx(ListingToolbar, { onSearchChange: vi.fn(), searchValue: "", searchPlaceholder: "Find\u2026" }));
+        expect(screen.getByPlaceholderText("Find…")).toBeTruthy();
+    });
+    it("does not render search input when onSearchChange is absent", () => {
+        render(_jsx(ListingToolbar, {}));
+        expect(screen.queryByRole("textbox")).toBeNull();
+    });
+    it("calls onSearchChange when typing in the search input", () => {
+        const onChange = vi.fn();
+        render(_jsx(ListingToolbar, { onSearchChange: onChange, searchValue: "" }));
+        fireEvent.change(screen.getByRole("textbox"), { target: { value: "pokemon" } });
+        expect(onChange).toHaveBeenCalledWith("pokemon");
+    });
+    it("calls onSearchCommit when Enter is pressed in the search input", () => {
+        const onCommit = vi.fn();
+        render(_jsx(ListingToolbar, { onSearchChange: vi.fn(), onSearchCommit: onCommit, searchValue: "" }));
+        fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter" });
+        expect(onCommit).toHaveBeenCalledOnce();
+    });
+    it("calls onSearchCommit when the search button is clicked", () => {
+        const onCommit = vi.fn();
+        render(_jsx(ListingToolbar, { onSearchChange: vi.fn(), onSearchCommit: onCommit, searchValue: "" }));
+        fireEvent.click(screen.getByRole("button", { name: /search/i }));
+        expect(onCommit).toHaveBeenCalledOnce();
+    });
+    it("renders filters button when onFiltersClick is provided", () => {
+        const onClick = vi.fn();
+        render(_jsx(ListingToolbar, { onFiltersClick: onClick }));
+        const btn = screen.getByRole("button", { name: /filters/i });
+        expect(btn).toBeTruthy();
+        fireEvent.click(btn);
+        expect(onClick).toHaveBeenCalledOnce();
+    });
+    it("does not render filters button when onFiltersClick is absent", () => {
+        render(_jsx(ListingToolbar, {}));
+        expect(screen.queryByRole("button", { name: /filters/i })).toBeNull();
+    });
+    it("shows filter count badge when filterCount > 0", () => {
+        render(_jsx(ListingToolbar, { onFiltersClick: vi.fn(), filterCount: 3 }));
+        expect(screen.getByText("3")).toBeTruthy();
+    });
+    it("renders grid and list view buttons when onViewChange is provided", () => {
+        render(_jsx(ListingToolbar, { onViewChange: vi.fn(), view: "grid" }));
+        expect(screen.getByRole("button", { name: /grid view/i })).toBeTruthy();
+        expect(screen.getByRole("button", { name: /list view/i })).toBeTruthy();
+    });
+    it("does not render view buttons when hideViewToggle is true", () => {
+        render(_jsx(ListingToolbar, { onViewChange: vi.fn(), hideViewToggle: true, view: "grid" }));
+        expect(screen.queryByRole("button", { name: /grid view/i })).toBeNull();
+    });
+    it("calls onViewChange with 'list' when list button is clicked", () => {
+        const onViewChange = vi.fn();
+        render(_jsx(ListingToolbar, { onViewChange: onViewChange, view: "grid" }));
+        fireEvent.click(screen.getByRole("button", { name: /list view/i }));
+        expect(onViewChange).toHaveBeenCalledWith("list");
+    });
+    it("renders table view button only when showTableView is true", () => {
+        const { rerender } = render(_jsx(ListingToolbar, { onViewChange: vi.fn(), view: "grid" }));
+        expect(screen.queryByRole("button", { name: /table view/i })).toBeNull();
+        rerender(_jsx(ListingToolbar, { onViewChange: vi.fn(), view: "grid", showTableView: true }));
+        expect(screen.getByRole("button", { name: /table view/i })).toBeTruthy();
+    });
+    it("shows reset-all button only when onResetAll + hasActiveState are both truthy", () => {
+        const onReset = vi.fn();
+        const { rerender } = render(_jsx(ListingToolbar, { onResetAll: onReset, hasActiveState: false }));
+        expect(screen.queryByRole("button", { name: /reset all/i })).toBeNull();
+        rerender(_jsx(ListingToolbar, { onResetAll: onReset, hasActiveState: true }));
+        expect(screen.getByRole("button", { name: /reset all/i })).toBeTruthy();
+        fireEvent.click(screen.getByRole("button", { name: /reset all/i }));
+        expect(onReset).toHaveBeenCalledOnce();
+    });
+    it("renders bulk-mode controls when bulkMode is true", () => {
+        render(_jsx(ListingToolbar, { bulkMode: true, bulkSelectedCount: 2, bulkTotalCount: 10, onBulkSelectAll: vi.fn(), onBulkClear: vi.fn() }));
+        expect(screen.getByText(/select all/i)).toBeTruthy();
+        expect(screen.getByText(/2 selected/i)).toBeTruthy();
+        expect(screen.getByText(/clear/i)).toBeTruthy();
+    });
+    it("calls onBulkSelectAll when Select All is clicked", () => {
+        const onSelectAll = vi.fn();
+        render(_jsx(ListingToolbar, { bulkMode: true, bulkSelectedCount: 0, bulkTotalCount: 5, onBulkSelectAll: onSelectAll }));
+        fireEvent.click(screen.getByText(/select all/i));
+        expect(onSelectAll).toHaveBeenCalledOnce();
+    });
+    it("calls onBulkClear when Clear button is clicked", () => {
+        const onClear = vi.fn();
+        render(_jsx(ListingToolbar, { bulkMode: true, bulkSelectedCount: 2, bulkTotalCount: 5, onBulkClear: onClear }));
+        fireEvent.click(screen.getByText(/clear/i));
+        expect(onClear).toHaveBeenCalledOnce();
+    });
+    it("shows 'Deselect All' label when all items are selected", () => {
+        render(_jsx(ListingToolbar, { bulkMode: true, bulkSelectedCount: 5, bulkTotalCount: 5, onBulkSelectAll: vi.fn() }));
+        expect(screen.getByText(/deselect all/i)).toBeTruthy();
+    });
+    it("renders pill toggle buttons from the toggles prop", () => {
+        const onToggle = vi.fn();
+        const toggles = [
+            { label: "In Stock", active: false, onChange: onToggle },
+            { label: "Featured", active: true, onChange: vi.fn() },
+        ];
+        render(_jsx(ListingToolbar, { toggles: toggles }));
+        expect(screen.getByRole("switch", { name: "In Stock" })).toBeTruthy();
+        expect(screen.getByRole("switch", { name: "Featured" })).toBeTruthy();
+    });
+    it("calls toggle onChange with flipped value when a pill toggle is clicked", () => {
+        const onChange = vi.fn();
+        const toggles = [{ label: "In Stock", active: false, onChange }];
+        render(_jsx(ListingToolbar, { toggles: toggles }));
+        fireEvent.click(screen.getByRole("switch", { name: "In Stock" }));
+        expect(onChange).toHaveBeenCalledWith(true);
+    });
+    it("uses custom labels from the labels prop", () => {
+        render(_jsx(ListingToolbar, { onFiltersClick: vi.fn(), labels: { filters: "Refine" } }));
+        expect(screen.getByRole("button", { name: /refine/i })).toBeTruthy();
+    });
+});

package/dist/ui/index.d.ts

@@ -50,6 +50,10 @@ export type { StatusBadgeProps, StatusBadgeStatus, BadgeOrderStatus, BadgePaymen
 export { StatusBadge } from "./components/StatusBadge";
 export type { ModalProps } from "./components/Modal";
 export { Modal, ModalFooter } from "./components/Modal";
+export type { QuickCreateModalProps } from "./components/QuickCreateModal";
+export { QuickCreateModal } from "./components/QuickCreateModal";
+export type { VacationBannerProps } from "./components/VacationBanner";
+export { VacationBanner } from "./components/VacationBanner";
 export type { UnsavedChangesModalProps, UnsavedChangesLabels, } from "./components/UnsavedChangesModal";
 export { UnsavedChangesModal } from "./components/UnsavedChangesModal";
 export type { LoginRequiredModalProps } from "./components/LoginRequiredModal";
@@ -154,7 +158,7 @@ export type { ActiveFilter, ActiveFilterChipsProps, } from "./components/ActiveF
 export { ActiveFilterChips } from "./components/ActiveFilterChips";
 export type { SortOption, SortDropdownProps } from "./components/SortDropdown";
 export { SortDropdown } from "./components/SortDropdown";
-export type { ListingToolbarProps, ListingToolbarSortOption, ListingToolbarLabels } from "./components/ListingToolbar";
+export type { ListingToolbarProps, ListingToolbarSortOption, ListingToolbarLabels, ListingToolbarToggle } from "./components/ListingToolbar";
 export { ListingToolbar } from "./components/ListingToolbar";
 export type { TablePaginationProps, TablePaginationLabels, } from "./components/TablePagination";
 export { TablePagination } from "./components/TablePagination";
@@ -187,6 +191,10 @@ export type { BulkActionBarProps, BulkActionBarLabels, BulkActionItem, } from ".
 export { BulkActionBar } from "./components/BulkActionBar";
 export type { BulkActionsBarProps, BulkAction } from "./components/BulkActionsBar";
 export { BulkActionsBar } from "./components/BulkActionsBar";
+export type { StickyBottomBarProps } from "./components/StickyBottomBar";
+export { StickyBottomBar } from "./components/StickyBottomBar";
+export type { ClaimCouponButtonProps } from "./components/ClaimCouponButton";
+export { ClaimCouponButton } from "./components/ClaimCouponButton";
 export type { FlowStep, FlowDiagramProps } from "./components/FlowDiagram";
 export { FlowDiagram } from "./components/FlowDiagram";
 export type { BaseListingCardRootProps, BaseListingCardHeroProps, BaseListingCardInfoProps, BaseListingCardCheckboxProps, } from "./components/BaseListingCard";

package/dist/ui/index.js

@@ -29,6 +29,8 @@ export { Progress, IndeterminateProgress } from "./components/Progress";
 export { Pagination } from "./components/Pagination";
 export { StatusBadge } from "./components/StatusBadge";
 export { Modal, ModalFooter } from "./components/Modal";
+export { QuickCreateModal } from "./components/QuickCreateModal";
+export { VacationBanner } from "./components/VacationBanner";
 export { UnsavedChangesModal } from "./components/UnsavedChangesModal";
 export { LoginRequiredModal } from "./components/LoginRequiredModal";
 export { Drawer } from "./components/Drawer";
@@ -99,6 +101,8 @@ export { DetailViewShell } from "./components/DetailViewShell";
 export { StackedViewShell } from "./components/StackedViewShell";
 export { BulkActionBar } from "./components/BulkActionBar";
 export { BulkActionsBar } from "./components/BulkActionsBar";
+export { StickyBottomBar } from "./components/StickyBottomBar";
+export { ClaimCouponButton } from "./components/ClaimCouponButton";
 export { FlowDiagram } from "./components/FlowDiagram";
 export { BaseListingCard } from "./components/BaseListingCard";
 export { default as ImageGallery } from "./components/ImageGallery";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "2.7.49",
+  "version": "2.7.52",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -149,6 +149,8 @@
     "audit": "node scripts/audit-violations.mjs",
     "check:types": "tsc --noEmit",
     "check:audits": "node scripts/audit-violations.mjs && node scripts/verify-entries.mjs && node scripts/verify-css-build.mjs && node scripts/audit-use-client.mjs && node scripts/audit-double-navigation.mjs && node scripts/audit-repository-fields.mjs && node scripts/audit-query-provider.mjs && node scripts/audit-export-paths.mjs",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
     "check": "npm run check:types && npm run check:audits"
   },
   "dependencies": {
@@ -190,6 +192,8 @@
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@upstash/ratelimit": "^2.0.8",
     "@upstash/redis": "^1.37.0",
     "concurrently": "^9.2.1",
@@ -197,6 +201,7 @@
     "firebase": "^12.8.0",
     "firebase-admin": "^10.3.0",
     "firebase-functions": "^6.6.0",
+    "jsdom": "^29.1.1",
     "lucide-react": "^1.7.0",
     "next": "^15.0.0",
     "next-intl": "^4.9.1",
@@ -206,6 +211,7 @@
     "resend": "^6.10.0",
     "server-only": "^0.0.1",
     "tailwindcss": "^3.4.19",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.7"
   }
 }