@gfed-medusa/sf-lib-common 2.0.0 → 2.1.0

package/dist/components/search-modal/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/search-modal/index.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\n\nimport Image from 'next/image';\nimport { usePathname } from 'next/navigation';\n\nimport DOMPurify from 'isomorphic-dompurify';\n\nimport { PlaceholderImage } from '@gfed-medusa/sf-lib-ui/icons/placeholder-image';\nimport { cn } from '@gfed-medusa/sf-lib-ui/lib/utils';\nimport { Button } from '@medusajs/ui';\n\nimport { useSearch } from '@/lib/hooks/use-search';\nimport { ProductHit } from '@/types/graphql';\n\nimport { Modal } from '../modal';\n\ntype SearchModalProps = {\n  buttonClassName?: string;\n};\n\nfunction SearchModal({ buttonClassName }: SearchModalProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const pathname = usePathname();\n\n  const { query, setQuery, results, loading, error, isTyping } = useSearch();\n\n  useEffect(() => {\n    setIsOpen(false);\n  }, [pathname]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      setQuery('');\n    }\n  }, [isOpen, setQuery]);\n\n  return (\n    <>\n      <div\n        className={cn(\n          'small:flex hidden h-full items-center gap-x-6',\n          buttonClassName\n        )}\n      >\n        <Button\n          onClick={() => setIsOpen(true)}\n          variant=\"transparent\"\n          className=\"text-small-regular hover:text-ui-fg-base px-0 hover:bg-transparent focus:!bg-transparent\"\n          data-testid=\"search-button\"\n        >\n          Search\n        </Button>\n      </div>\n      <Modal\n        isOpen={isOpen}\n        close={() => setIsOpen(false)}\n        aria-label=\"Search modal\"\n      >\n        <div className=\"flex h-full max-h-[75vh] min-h-0 flex-col\">\n          <div className=\"shrink-0\">\n            <SearchBox query={query} setQuery={setQuery} loading={loading} />\n          </div>\n          <div className=\"mt-4 min-h-0 flex-1 overflow-y-auto\">\n            <SearchResults\n              results={results}\n              loading={loading}\n              error={error}\n              query={query}\n              isTyping={isTyping}\n            />\n          </div>\n        </div>\n      </Modal>\n    </>\n  );\n}\n\nconst SearchBox = ({\n  query,\n  setQuery,\n  loading,\n}: {\n  query: string;\n  setQuery: (query: string) => void;\n  loading: boolean;\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (inputRef.current && document.activeElement !== inputRef.current) {\n      inputRef.current.focus();\n    }\n  }, [loading]);\n\n  return (\n    <div className=\"relative w-full\">\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={query}\n        onChange={(e) => setQuery(e.target.value)}\n        placeholder=\"Search products...\"\n        className=\"w-full rounded-md border border-gray-300 px-4 py-2 focus:outline-none focus-visible:outline-2 focus-visible:outline-blue-500\"\n        disabled={loading}\n        autoFocus\n        data-testid=\"search-input\"\n      />\n    </div>\n  );\n};\n\nconst SearchResults = ({\n  results,\n  loading,\n  error,\n  query,\n  isTyping,\n}: {\n  results: { items: ProductHit[] } | null;\n  loading: boolean;\n  error: string | null;\n  query: string;\n  isTyping: boolean;\n}) => {\n  if (loading) {\n    return (\n      <div className=\"flex min-h-full items-center justify-center\">\n        <div className=\"text-center\">\n          <div className=\"mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-blue-500\"></div>\n          <p className=\"mt-2 text-sm text-gray-500\">Searching...</p>\n        </div>\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div className=\"flex min-h-full items-center justify-center text-rose-600\">\n        <p>Error: {error}</p>\n      </div>\n    );\n  }\n\n  if (\n    query.trim() &&\n    !isTyping &&\n    !loading &&\n    (!results || !results.items || results.items.length === 0)\n  ) {\n    return (\n      <div className=\"flex min-h-full items-center justify-center text-gray-500\">\n        <p>No products found</p>\n      </div>\n    );\n  }\n\n  if (!query.trim()) {\n    return null;\n  }\n\n  return (\n    <div>\n      {results?.items?.map((hit: ProductHit) => (\n        <Hit key={hit.id} hit={hit} />\n      ))}\n    </div>\n  );\n};\n\nconst Hit = ({ hit }: { hit: ProductHit }) => {\n  return (\n    <div\n      className=\"relative mt-4 flex flex-row gap-x-2\"\n      data-testid=\"search-hit\"\n    >\n      <div className=\"relative h-[100px] w-[100px] shrink-0 overflow-hidden border border-gray-200\">\n        {hit.thumbnail ? (\n          <Image\n            src={hit.thumbnail}\n            alt={hit.title ?? 'Product Image'}\n            width={100}\n            height={100}\n            className=\"aspect-square object-cover\"\n          />\n        ) : (\n          <div className=\"border-grey-400 flex h-[125px] w-[100px] items-center justify-center self-start border\">\n            <PlaceholderImage size={40} />\n          </div>\n        )}\n      </div>\n      <div className=\"flex flex-col gap-y-1\">\n        <h3>{hit.title}</h3>\n        <p\n          className=\"text-sm text-gray-500\"\n          dangerouslySetInnerHTML={{\n            __html: DOMPurify.sanitize(hit.description ?? ''),\n          }}\n        />\n      </div>\n      <a\n        href={`/products/${hit.handle}`}\n        className=\"absolute top-0 right-0 h-full w-full\"\n        aria-label={`View Product: ${hit.title}`}\n      />\n    </div>\n  );\n};\n\nexport { SearchModal };\n"],"mappings":";;;;;;;;;;;;;;AAsBA,SAAS,YAAY,EAAE,mBAAqC;CAC1D,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,WAAW,aAAa;CAE9B,MAAM,EAAE,OAAO,UAAU,SAAS,SAAS,OAAO,aAAa,WAAW;AAE1E,iBAAgB;AACd,YAAU,MAAM;IACf,CAAC,SAAS,CAAC;AAEd,iBAAgB;AACd,MAAI,CAAC,OACH,UAAS,GAAG;IAEb,CAAC,QAAQ,SAAS,CAAC;AAEtB,QACE,8CACE,oBAAC;EACC,WAAW,GACT,iDACA,gBACD;YAED,oBAAC;GACC,eAAe,UAAU,KAAK;GAC9B,SAAQ;GACR,WAAU;GACV,eAAY;aACb;IAEQ;GACL,EACN,oBAAC;EACS;EACR,aAAa,UAAU,MAAM;EAC7B,cAAW;YAEX,qBAAC;GAAI,WAAU;cACb,oBAAC;IAAI,WAAU;cACb,oBAAC;KAAiB;KAAiB;KAAmB;MAAW;KAC7D,EACN,oBAAC;IAAI,WAAU;cACb,oBAAC;KACU;KACA;KACF;KACA;KACG;MACV;KACE;IACF;GACA,IACP;;AAIP,MAAM,aAAa,EACjB,OACA,UACA,cAKI;CACJ,MAAM,WAAW,OAAyB,KAAK;AAE/C,iBAAgB;AACd,MAAI,SAAS,WAAW,SAAS,kBAAkB,SAAS,QAC1D,UAAS,QAAQ,OAAO;IAEzB,CAAC,QAAQ,CAAC;AAEb,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GACC,KAAK;GACL,MAAK;GACL,OAAO;GACP,WAAW,MAAM,SAAS,EAAE,OAAO,MAAM;GACzC,aAAY;GACZ,WAAU;GACV,UAAU;GACV;GACA,eAAY;IACZ;GACE;;AAIV,MAAM,iBAAiB,EACrB,SACA,SACA,OACA,OACA,eAOI;AACJ,KAAI,QACF,QACE,oBAAC;EAAI,WAAU;YACb,qBAAC;GAAI,WAAU;cACb,oBAAC,SAAI,WAAU,yEAA6E,EAC5F,oBAAC;IAAE,WAAU;cAA6B;KAAgB;IACtD;GACF;AAIV,KAAI,MACF,QACE,oBAAC;EAAI,WAAU;YACb,qBAAC,kBAAE,WAAQ,SAAU;GACjB;AAIV,KACE,MAAM,MAAM,IACZ,CAAC,YACD,CAAC,YACA,CAAC,WAAW,CAAC,QAAQ,SAAS,QAAQ,MAAM,WAAW,GAExD,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC,iBAAE,sBAAqB;GACpB;AAIV,KAAI,CAAC,MAAM,MAAM,CACf,QAAO;AAGT,QACE,oBAAC,mBACE,SAAS,OAAO,KAAK,QACpB,oBAAC,OAAsB,OAAb,IAAI,GAAgB,CAC9B,GACE;;AAIV,MAAM,OAAO,EAAE,UAA+B;AAC5C,QACE,qBAAC;EACC,WAAU;EACV,eAAY;;GAEZ,oBAAC;IAAI,WAAU;cACZ,IAAI,YACH,oBAAC;KACC,KAAK,IAAI;KACT,KAAK,IAAI,SAAS;KAClB,OAAO;KACP,QAAQ;KACR,WAAU;MACV,GAEF,oBAAC;KAAI,WAAU;eACb,oBAAC,oBAAiB,MAAM,KAAM;MAC1B;KAEJ;GACN,qBAAC;IAAI,WAAU;eACb,oBAAC,kBAAI,IAAI,QAAW,EACpB,oBAAC;KACC,WAAU;KACV,yBAAyB,EACvB,QAAQ,UAAU,SAAS,IAAI,eAAe,GAAG,EAClD;MACD;KACE;GACN,oBAAC;IACC,MAAM,aAAa,IAAI;IACvB,WAAU;IACV,cAAY,iBAAiB,IAAI;KACjC;;GACE"}

package/dist/components/side-menu/index.d.ts

@@ -1,12 +0,0 @@
-import { Region } from "../../types/graphql.js";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
-
-//#region src/components/side-menu/index.d.ts
-declare const SideMenu: ({
-  regions
-}: {
-  regions: Region[] | null;
-}) => react_jsx_runtime12.JSX.Element;
-//#endregion
-export { SideMenu };
-//# sourceMappingURL=index.d.ts.map

package/dist/components/side-menu/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/side-menu/index.tsx"],"sourcesContent":[],"mappings":";;;;cAoBM;;;WAAoC;MAAiB,mBAAA,CAAA,GAAA,CAAA"}

package/dist/components/side-menu/index.js

@@ -1,99 +0,0 @@
-'use client';
-
-import { LocalizedClientLink } from "../localized-client-link/index.js";
-import { LayoutCountrySelect } from "../layout-country-select/index.js";
-import { Fragment } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Popover, PopoverPanel, Transition } from "@headlessui/react";
-import { Text, clx, useToggleState } from "@medusajs/ui";
-import { ArrowRightMini, XMark } from "@medusajs/icons";
-
-//#region src/components/side-menu/index.tsx
-const SideMenuItems = {
-	Home: "/",
-	Store: "/store",
-	Account: "/account",
-	Cart: "/cart"
-};
-const SideMenu = ({ regions }) => {
-	const toggleState = useToggleState();
-	return /* @__PURE__ */ jsx("div", {
-		className: "h-full",
-		children: /* @__PURE__ */ jsx("div", {
-			className: "flex h-full items-center",
-			children: /* @__PURE__ */ jsx(Popover, {
-				className: "flex h-full",
-				children: ({ open, close }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-					className: "relative flex h-full",
-					children: /* @__PURE__ */ jsx(Popover.Button, {
-						"data-testid": "nav-menu-button",
-						className: "hover:text-ui-fg-base relative flex h-full items-center transition-all duration-200 ease-out focus:outline-none",
-						children: "Menu"
-					})
-				}), /* @__PURE__ */ jsx(Transition, {
-					show: open,
-					as: Fragment,
-					enter: "transition ease-out duration-150",
-					enterFrom: "opacity-0",
-					enterTo: "opacity-100 backdrop-blur-2xl",
-					leave: "transition ease-in duration-150",
-					leaveFrom: "opacity-100 backdrop-blur-2xl",
-					leaveTo: "opacity-0",
-					children: /* @__PURE__ */ jsx(PopoverPanel, {
-						className: "text-ui-fg-on-color absolute inset-x-0 z-30 m-2 flex h-[calc(100vh-1rem)] w-full flex-col pr-4 text-sm backdrop-blur-2xl sm:w-1/3 sm:min-w-min sm:pr-0 2xl:w-1/4",
-						children: /* @__PURE__ */ jsxs("div", {
-							"data-testid": "nav-menu-popup",
-							className: "rounded-rounded flex h-full flex-col justify-between bg-[rgba(3,7,18,0.5)] p-6",
-							children: [
-								/* @__PURE__ */ jsx("div", {
-									className: "flex justify-end",
-									id: "xmark",
-									children: /* @__PURE__ */ jsx("button", {
-										"data-testid": "close-menu-button",
-										onClick: close,
-										children: /* @__PURE__ */ jsx(XMark, {})
-									})
-								}),
-								/* @__PURE__ */ jsx("ul", {
-									className: "flex flex-col items-start justify-start gap-6",
-									children: Object.entries(SideMenuItems).map(([name, href]) => {
-										return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(LocalizedClientLink, {
-											href,
-											className: "hover:text-ui-fg-disabled text-3xl leading-10",
-											onClick: close,
-											"data-testid": `${name.toLowerCase()}-link`,
-											children: name
-										}) }, name);
-									})
-								}),
-								/* @__PURE__ */ jsxs("div", {
-									className: "flex flex-col gap-y-6",
-									children: [/* @__PURE__ */ jsxs("div", {
-										className: "flex justify-between",
-										onMouseEnter: toggleState.open,
-										onMouseLeave: toggleState.close,
-										children: [regions && /* @__PURE__ */ jsx(LayoutCountrySelect, {
-											toggleState,
-											regions
-										}), /* @__PURE__ */ jsx(ArrowRightMini, { className: clx("transition-transform duration-150", toggleState.state ? "-rotate-90" : "") })]
-									}), /* @__PURE__ */ jsxs(Text, {
-										className: "txt-compact-small flex justify-between",
-										children: [
-											"© ",
-											(/* @__PURE__ */ new Date()).getFullYear(),
-											" Medusa Store. All rights reserved."
-										]
-									})]
-								})
-							]
-						})
-					})
-				})] })
-			})
-		})
-	});
-};
-
-//#endregion
-export { SideMenu };
-//# sourceMappingURL=index.js.map

package/dist/components/side-menu/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/side-menu/index.tsx"],"sourcesContent":["'use client';\n\nimport { Fragment } from 'react';\n\nimport { Popover, PopoverPanel, Transition } from '@headlessui/react';\nimport { ArrowRightMini, XMark } from '@medusajs/icons';\nimport { Text, clx, useToggleState } from '@medusajs/ui';\n\nimport { Region } from '@/types/graphql';\n\nimport { LayoutCountrySelect } from '../layout-country-select';\nimport { LocalizedClientLink } from '../localized-client-link';\n\nconst SideMenuItems = {\n  Home: '/',\n  Store: '/store',\n  Account: '/account',\n  Cart: '/cart',\n};\n\nconst SideMenu = ({ regions }: { regions: Region[] | null }) => {\n  const toggleState = useToggleState();\n\n  return (\n    <div className=\"h-full\">\n      <div className=\"flex h-full items-center\">\n        <Popover className=\"flex h-full\">\n          {({ open, close }) => (\n            <>\n              <div className=\"relative flex h-full\">\n                <Popover.Button\n                  data-testid=\"nav-menu-button\"\n                  className=\"hover:text-ui-fg-base relative flex h-full items-center transition-all duration-200 ease-out focus:outline-none\"\n                >\n                  Menu\n                </Popover.Button>\n              </div>\n\n              <Transition\n                show={open}\n                as={Fragment}\n                enter=\"transition ease-out duration-150\"\n                enterFrom=\"opacity-0\"\n                enterTo=\"opacity-100 backdrop-blur-2xl\"\n                leave=\"transition ease-in duration-150\"\n                leaveFrom=\"opacity-100 backdrop-blur-2xl\"\n                leaveTo=\"opacity-0\"\n              >\n                <PopoverPanel className=\"text-ui-fg-on-color absolute inset-x-0 z-30 m-2 flex h-[calc(100vh-1rem)] w-full flex-col pr-4 text-sm backdrop-blur-2xl sm:w-1/3 sm:min-w-min sm:pr-0 2xl:w-1/4\">\n                  <div\n                    data-testid=\"nav-menu-popup\"\n                    className=\"rounded-rounded flex h-full flex-col justify-between bg-[rgba(3,7,18,0.5)] p-6\"\n                  >\n                    <div className=\"flex justify-end\" id=\"xmark\">\n                      <button data-testid=\"close-menu-button\" onClick={close}>\n                        <XMark />\n                      </button>\n                    </div>\n                    <ul className=\"flex flex-col items-start justify-start gap-6\">\n                      {Object.entries(SideMenuItems).map(([name, href]) => {\n                        return (\n                          <li key={name}>\n                            <LocalizedClientLink\n                              href={href}\n                              className=\"hover:text-ui-fg-disabled text-3xl leading-10\"\n                              onClick={close}\n                              data-testid={`${name.toLowerCase()}-link`}\n                            >\n                              {name}\n                            </LocalizedClientLink>\n                          </li>\n                        );\n                      })}\n                    </ul>\n                    <div className=\"flex flex-col gap-y-6\">\n                      <div\n                        className=\"flex justify-between\"\n                        onMouseEnter={toggleState.open}\n                        onMouseLeave={toggleState.close}\n                      >\n                        {regions && (\n                          <LayoutCountrySelect\n                            toggleState={toggleState}\n                            regions={regions}\n                          />\n                        )}\n                        <ArrowRightMini\n                          className={clx(\n                            'transition-transform duration-150',\n                            toggleState.state ? '-rotate-90' : ''\n                          )}\n                        />\n                      </div>\n                      <Text className=\"txt-compact-small flex justify-between\">\n                        © {new Date().getFullYear()} Medusa Store. All rights\n                        reserved.\n                      </Text>\n                    </div>\n                  </div>\n                </PopoverPanel>\n              </Transition>\n            </>\n          )}\n        </Popover>\n      </div>\n    </div>\n  );\n};\n\nexport { SideMenu };\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,gBAAgB;CACpB,MAAM;CACN,OAAO;CACP,SAAS;CACT,MAAM;CACP;AAED,MAAM,YAAY,EAAE,cAA4C;CAC9D,MAAM,cAAc,gBAAgB;AAEpC,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAQ,WAAU;eACf,EAAE,MAAM,YACR,8CACE,oBAAC;KAAI,WAAU;eACb,oBAAC,QAAQ;MACP,eAAY;MACZ,WAAU;gBACX;OAEgB;MACb,EAEN,oBAAC;KACC,MAAM;KACN,IAAI;KACJ,OAAM;KACN,WAAU;KACV,SAAQ;KACR,OAAM;KACN,WAAU;KACV,SAAQ;eAER,oBAAC;MAAa,WAAU;gBACtB,qBAAC;OACC,eAAY;OACZ,WAAU;;QAEV,oBAAC;SAAI,WAAU;SAAmB,IAAG;mBACnC,oBAAC;UAAO,eAAY;UAAoB,SAAS;oBAC/C,oBAAC,UAAQ;WACF;UACL;QACN,oBAAC;SAAG,WAAU;mBACX,OAAO,QAAQ,cAAc,CAAC,KAAK,CAAC,MAAM,UAAU;AACnD,iBACE,oBAAC,kBACC,oBAAC;WACO;WACN,WAAU;WACV,SAAS;WACT,eAAa,GAAG,KAAK,aAAa,CAAC;qBAElC;YACmB,IARf,KASJ;WAEP;UACC;QACL,qBAAC;SAAI,WAAU;oBACb,qBAAC;UACC,WAAU;UACV,cAAc,YAAY;UAC1B,cAAc,YAAY;qBAEzB,WACC,oBAAC;WACc;WACJ;YACT,EAEJ,oBAAC,kBACC,WAAW,IACT,qCACA,YAAY,QAAQ,eAAe,GACpC,GACD;WACE,EACN,qBAAC;UAAK,WAAU;;WAAyC;4BACpD,IAAI,MAAM,EAAC,aAAa;WAAC;;WAEvB;UACH;;QACF;OACO;MACJ,IACZ;KAEG;IACN;GACF"}