@snowcone-app/ui 0.1.43 → 0.2.0

package/src/composed/search/SearchProvider.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { InstantSearch, Configure, useSearchBox } from "react-instantsearch";
+import { searchClient } from "./meilisearchAdapter";
+import { useEffect } from "react";
+
+/**
+ * Component that triggers an initial search on mount
+ */
+function InitialSearchTrigger() {
+  const { refine } = useSearchBox();
+
+  useEffect(() => {
+    // Trigger search with empty query to load all products
+    refine("");
+  }, [refine]);
+
+  return null;
+}
+
+export interface SearchProviderProps {
+  /**
+   * The index name in Meilisearch (defaults to "snowcone")
+   */
+  indexName?: string;
+
+  /**
+   * Number of results per page
+   */
+  hitsPerPage?: number;
+
+  /**
+   * Filters to apply to the search
+   */
+  filters?: string;
+
+  /**
+   * Facets to retrieve
+   */
+  facets?: string[];
+
+  /**
+   * Attributes to retrieve from search results
+   */
+  attributesToRetrieve?: string[];
+
+  /**
+   * Children components that need access to InstantSearch context
+   */
+  children: React.ReactNode;
+}
+
+/**
+ * SearchProvider - Wraps InstantSearch context for composable search UI
+ *
+ * This component provides the search context that other search components need.
+ * Use this as a wrapper when you want to compose your own search UI layout.
+ *
+ * Must be used within a Shop context. ProductGrid will get artwork automatically.
+ *
+ * @example
+ * ```tsx
+ * <Shop>
+ *   <ArtSelector artworks={artworks} />
+ *   <SearchProvider>
+ *     <div className="flex gap-2">
+ *       <SearchBox />
+ *       <Filters />
+ *     </div>
+ *     <CurrentRefinements />
+ *     <ProductGrid />
+ *   </SearchProvider>
+ * </Shop>
+ * ```
+ */
+export function SearchProvider({
+  indexName = "snowcone",
+  hitsPerPage = 100,
+  filters = "mockups IS NOT EMPTY",
+  facets = ["*"],
+  attributesToRetrieve = [
+    "id",
+    "objectID",
+    "name",
+    "tags",
+    "price",
+    "mockups",
+    "placements",
+    "options",
+    "variants",
+    "sizes",
+  ],
+  children,
+}: SearchProviderProps) {
+  return (
+    <InstantSearch
+      // @ts-expect-error - InstantMeiliSearchInstance type incompatibility with react-instantsearch
+      searchClient={searchClient}
+      indexName={indexName}
+      future={{
+        preserveSharedStateOnUnmount: true,
+      }}
+      routing={{
+        stateMapping: {
+          // Map URL state to InstantSearch state
+          stateToRoute(uiState) {
+            const indexUiState = uiState[indexName] || {};
+            return {
+              q: indexUiState.query,
+            } as any;
+          },
+          // Map route to InstantSearch state - default to empty query to show all products
+          routeToState(routeState) {
+            return {
+              [indexName]: {
+                query: (routeState as any).q || "",
+              },
+            } as any;
+          },
+        },
+      }}
+    >
+      <Configure
+        hitsPerPage={hitsPerPage}
+        filters={filters}
+        facets={facets}
+        attributesToRetrieve={attributesToRetrieve}
+      />
+      <InitialSearchTrigger />
+      {/* Two @types/react versions in the tree (18.3.28 alongside whatever
+       *  react-instantsearch resolves). Cross-version ReactNode mismatch is
+       *  cosmetic — same runtime shape, different declaration site. */}
+      {children as any}
+    </InstantSearch>
+  );
+}

package/src/composed/search/facetConfig.ts

@@ -0,0 +1,16 @@
+import type { FacetSection } from "./types";
+
+export const FACET_SECTIONS: FacetSection[] = [
+  {
+    id: "tags",
+    title: "Tags",
+    attribute: "tags",
+    facetType: "customTags",
+  },
+  {
+    id: "price",
+    title: "Price",
+    attribute: "price",
+    facetType: "range",
+  },
+];

package/src/composed/search/index.ts

@@ -0,0 +1,22 @@
+// Composable search components for InstantSearch + Meilisearch
+export { SearchProvider } from "./SearchProvider";
+export { SearchBox } from "./SearchBox";
+export { ProductGrid } from "./ProductGrid";
+export { Filters } from "./Filters";
+export { FiltersButton } from "./FiltersButton";
+export { FiltersDrawer } from "./FiltersDrawer";
+export { CurrentRefinements } from "./CurrentRefinements";
+
+// ProductHit component (Next.js specific)
+export { ProductHitComponent } from "./ProductHit";
+
+// Utilities
+export { searchClient } from "./meilisearchAdapter";
+export { FACET_SECTIONS } from "./facetConfig";
+
+// Types
+export type { FacetSection, ProductHit, FacetType } from "./types";
+export type { SearchProviderProps } from "./SearchProvider";
+export type { ProductGridProps } from "./ProductGrid";
+export type { FiltersProps } from "./Filters";
+export type { FiltersButtonProps } from "./FiltersButton";

package/src/composed/search/meilisearchAdapter.ts

@@ -0,0 +1,20 @@
+import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";
+import { readEnv } from "../../lib/env";
+
+const MEILISEARCH_HOST =
+  readEnv("NEXT_PUBLIC_MEILISEARCH_HOST") ||
+  "https://ms-e5d999b2eaca-15654.sfo.meilisearch.io";
+const MEILISEARCH_API_KEY =
+  readEnv("NEXT_PUBLIC_MEILISEARCH_API_KEY") ||
+  "eee819b849798ad9091228c486ec05d0931e5292";
+
+const { searchClient } = instantMeiliSearch(
+  MEILISEARCH_HOST,
+  MEILISEARCH_API_KEY,
+  {
+    primaryKey: "id",
+    finitePagination: true,
+  }
+);
+
+export { searchClient };

package/src/composed/search/types.ts

@@ -0,0 +1,22 @@
+import type { CatalogProduct } from "@snowcone-app/sdk";
+
+export type FacetType =
+  | "refinementList"
+  | "range"
+  | "hierarchical"
+  | "customTags"
+  | "customSizes";
+
+export interface FacetSection {
+  id: string;
+  title: string;
+  attribute: string;
+  facetType: FacetType;
+  attributes?: string[];
+  showCheckbox?: boolean;
+  transformLabel?: (label: string) => string;
+}
+
+export interface ProductHit extends CatalogProduct {
+  objectID: string;
+}