@faststore/components 2.0.87-alpha.0 → 2.0.89-alpha.0

package/dist/organisms/OutOfStock/OutOfStock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OutOfStock.js","sourceRoot":"","sources":["../../../src/organisms/OutOfStock/OutOfStock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AA0ChD,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EACE,MAAM,GAAG,iBAAiB,EAC1B,KAAK,EACL,WAAW,GAAG,WAAW,EACzB,YAAY,GAAG,SAAS,EACxB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,4DAEE,GAAG,EAAE,GAAG,iBACK,MAAM,EACnB,QAAQ,EAAE,QAAQ,KACd,UAAU;QAEd,kEAAgC,KAAK,CAAM;QAC1C,QAAQ,IAAI,CACX;YACE,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAC,WAAW,IAAC,IAAI,EAAE,EAAE,GAAI,GAAI;YAC7C,QAAQ,CACP,CACL;QACD,oBAAC,UAAU,IACT,EAAE,EAAC,oBAAoB,EACvB,IAAI,EAAC,oBAAoB,EACzB,KAAK,EAAE,UAAU,gBACL,UAAU,EACtB,KAAK,EAAE,YAAY,EACnB,QAAQ,SACR;QACF,oBAAC,MAAM,yCAEL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,EACjB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,oBAAC,WAAW,OAAG,EACrB,YAAY,EAAC,MAAM,IAElB,WAAW,CACL,CACJ,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/organisms/OutOfStock/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './OutOfStock';
+export type { OutOfStockProps } from './OutOfStock';

package/dist/organisms/OutOfStock/index.js

@@ -0,0 +1,2 @@
+export { default } from './OutOfStock';
+//# sourceMappingURL=index.js.map

package/dist/organisms/OutOfStock/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/OutOfStock/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}

package/dist/organisms/SearchInput/SearchInput.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+import { SearchProviderContextValue } from '../../molecules/SearchProvider';
+export type SearchInputProps = {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * The current status of the Search Dropdown.
+     */
+    visibleDropdown: boolean;
+} & HTMLAttributes<HTMLDivElement> & SearchProviderContextValue;
+declare const SearchInput: React.ForwardRefExoticComponent<{
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string | undefined;
+    /**
+     * The current status of the Search Dropdown.
+     */
+    visibleDropdown: boolean;
+} & React.HTMLAttributes<HTMLDivElement> & SearchProviderContextValue & React.RefAttributes<HTMLDivElement>>;
+export default SearchInput;

package/dist/organisms/SearchInput/SearchInput.js

@@ -0,0 +1,8 @@
+import React, { forwardRef } from 'react';
+import SearchProvider from '../../molecules/SearchProvider';
+const SearchInput = forwardRef(function SearchInput({ children, visibleDropdown = false, testId = 'fs-search-input', isLoading, products, term, terms, onSearchSelection, ...otherProps }, ref) {
+    return (React.createElement("div", { ref: ref, "data-fs-search-input": true, "data-fs-search-input-dropdown-visible": visibleDropdown, "data-testid": testId, ...otherProps },
+        React.createElement(SearchProvider, { onSearchSelection: onSearchSelection, isLoading: isLoading, term: term, products: products, terms: terms }, children)));
+});
+export default SearchInput;
+//# sourceMappingURL=SearchInput.js.map

package/dist/organisms/SearchInput/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/organisms/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,cAA8C,MAAM,gCAAgC,CAAA;AAe3F,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,QAAQ,EACR,eAAe,GAAG,KAAK,EACvB,MAAM,GAAG,iBAAiB,EAC1B,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,iBAAiB,EACjB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,yEAE+B,eAAe,iBACzC,MAAM,KACf,UAAU;QAEd,oBAAC,cAAc,IACb,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,IAEX,QAAQ,CACM,CACb,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/organisms/SearchInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SearchInput';
+export type { SearchInputProps } from './SearchInput';

package/dist/organisms/SearchInput/index.js

@@ -0,0 +1,2 @@
+export { default } from './SearchInput';
+//# sourceMappingURL=index.js.map

package/dist/organisms/SearchInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/SearchInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.87-alpha.0",
+  "version": "2.0.89-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "b3bf59d620318b0bd4511eb4731eb716006c0fb4"
+  "gitHead": "110810c0f5ff267980370f556fe7e9ad34e4d68a"
 }

package/src/assets/BellRinging.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { IconProps } from './IconProps'
+
+// Icon from Phosphor Icons
+const BellRinging = ({ size = 24 }: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 256 256"
+    strokeWidth="16"
+    width={size}
+    height={size}
+  >
+    <path d="M224,71.1a8,8,0,0,1-10.78-3.42,94.13,94.13,0,0,0-33.46-36.91,8,8,0,1,1,8.54-13.54,111.46,111.46,0,0,1,39.12,43.09A8,8,0,0,1,224,71.1ZM35.71,72a8,8,0,0,0,7.1-4.32A94.13,94.13,0,0,1,76.27,30.77a8,8,0,1,0-8.54-13.54A111.46,111.46,0,0,0,28.61,60.32,8,8,0,0,0,35.71,72Zm186.1,103.94A16,16,0,0,1,208,200H167.2a40,40,0,0,1-78.4,0H48a16,16,0,0,1-13.79-24.06C43.22,160.39,48,138.28,48,112a80,80,0,0,1,160,0C208,138.27,212.78,160.38,221.81,175.94ZM150.62,200H105.38a24,24,0,0,0,45.24,0ZM208,184c-10.64-18.27-16-42.49-16-72a64,64,0,0,0-128,0c0,29.52-5.38,53.74-16,72Z"></path>
+  </svg>
+)
+
+export default BellRinging

package/src/assets/MagnifyingGlass.tsx

@@ -1,38 +1,21 @@
 import React from 'react'
-import type { FC } from 'react'
+import { IconProps } from './IconProps'
 
 // Icon from Phosphor Icons
-const MagnifyingGlass: FC = () => (
+const MagnifyingGlass = ({ size = 24 }: IconProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-    viewBox="0 0 256 256"
-    strokeWidth="16"
-    width={24}
-    height={24}
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
   >
-    <rect width="256" height="256" fill="none"></rect>
-    <circle
-      cx="116"
-      cy="116"
-      r="84"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="16"
-    ></circle>
-    <line
-      x1="175.4"
-      y1="175.4"
-      x2="224"
-      y2="224"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="16"
-    ></line>
+    <circle cx="11" cy="11" r="8" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
   </svg>
 )
 

package/src/assets/index.ts

@@ -3,6 +3,7 @@ export * from './PaymentFlags'
 
 export { default as ArrowElbowDownRight } from './ArrowElbowDownRight'
 export { default as ArrowRight } from './ArrowRight'
+export { default as BellRinging } from './BellRinging'
 export { default as CaretDown } from './CaretDown'
 export { default as Checked } from './Checked'
 export { default as ClockClockwise } from './ClockClockwise'

package/src/atoms/Loader/Loader.tsx

@@ -16,7 +16,7 @@ const Loader = forwardRef<HTMLDivElement, LoaderProps>(function Loader(
   ref
 ) {
   return (
-    <div
+    <span
       ref={ref}
       data-fs-loader
       data-fs-loader-variant={variant}
@@ -26,7 +26,7 @@ const Loader = forwardRef<HTMLDivElement, LoaderProps>(function Loader(
       <span data-fs-loader-item></span>
       <span data-fs-loader-item></span>
       <span data-fs-loader-item></span>
-    </div>
+    </span>
   )
 })
 

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export { default as UIProvider, Toast as ToastProps, useUI } from './UIProvider'
 export { useFadeEffect } from './useFadeEffect'
 export { useTrapFocus } from './useTrapFocus'
+export { useSearch } from './useSearch'

package/src/hooks/useSearch.ts

@@ -0,0 +1,12 @@
+import { SearchContext } from "../molecules/SearchProvider/SearchProvider"
+import { useContext } from "react"
+
+export const useSearch = () => {
+    const context = useContext(SearchContext)
+
+    if (!context) {
+        return { inContext: false as const }
+    }
+
+    return { inContext: true as const, values: context }
+}

package/src/index.ts

@@ -116,6 +116,17 @@ export { default as RadioGroup, RadioOption } from './molecules/RadioGroup'
 export type { RadioGroupProps, RadioOptionProps } from './molecules/RadioGroup'
 export { default as Rating } from './molecules/Rating'
 export type { RatingProps } from './molecules/Rating'
+
+export { default as SearchProvider } from './molecules/SearchProvider'
+export type {
+  SearchProviderContextValue,
+} from './molecules/SearchProvider'
+
+export { default as SearchInputField } from './molecules/SearchInputField'
+export type {
+  SearchInputFieldProps,
+  SearchInputFieldRef,
+} from './molecules/SearchInputField'
 export {
   default as SearchAutoComplete,
   SearchAutoCompleteTerm,
@@ -124,6 +135,10 @@ export type {
   SearchAutoCompleteProps,
   SearchAutoCompleteTermProps,
 } from './molecules/SearchAutoComplete'
+export {
+  default as SearchDropdown,
+  SearchDropdownProps,
+} from './molecules/SearchDropdown'
 export {
   default as SearchHistory,
   SearchHistoryTerm,
@@ -184,12 +199,18 @@ export type {
   HeroHeaderProps,
 } from './organisms/Hero'
 
+export { default as OutOfStock } from './organisms/OutOfStock'
+export type { OutOfStockProps } from './organisms/OutOfStock'
+
 export { default as PaymentMethods } from './organisms/PaymentMethods'
 export type { PaymentMethodsProps } from './organisms/PaymentMethods'
 
 export { default as PriceRange } from './organisms/PriceRange'
 export type { PriceRangeProps } from './organisms/PriceRange'
 
+export { default as SearchInput } from './organisms/SearchInput'
+export type { SearchInputProps } from './organisms/SearchInput'
+
 export { default as SlideOver, SlideOverHeader } from './organisms/SlideOver'
 export type {
   SlideOverProps,

package/src/molecules/SearchAutoComplete/SearchAutoComplete.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react'
-import { List } from '../..'
+import { List, useSearch } from '../..'
 
 export interface SearchAutoCompleteProps
   extends HTMLAttributes<HTMLDivElement> {
@@ -14,6 +14,13 @@ const SearchAutoComplete = ({
   children,
   ...otherProps
 }: SearchAutoCompleteProps) => {
+
+  const { inContext, values } = useSearch()
+
+  if (inContext && (values.terms.length <= 0 || values.term.length <= 0)) {
+    return null
+  }
+
   return (
     <section data-testid={testId} data-fs-search-auto-complete {...otherProps}>
       <List as="ol">{children}</List>

package/src/molecules/SearchDropdown/SearchDropdown.tsx

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactNode, PropsWithChildren } from 'react'
+import React, { forwardRef } from 'react'
+import { useSearch } from '../../hooks'
+
+export interface SearchDropdownProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  children?: ReactNode
+}
+
+const SearchLoading = () => {
+  const { inContext, values } = useSearch()
+
+  return (
+    <>
+      { (inContext && values.isLoading) && <p data-fs-search-dropdown-loading-text>Loading...</p> }
+    </>
+  )
+}
+
+const SearchDropdown = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<SearchDropdownProps>
+>(function SearchDropdown(
+  {
+    testId = 'fs-search-dropdown',
+    children,
+    ...otherProps
+  },
+  ref
+) {
+  return (
+    <div ref={ref} data-fs-search-dropdown data-testid={testId} {...otherProps}>
+      <section>
+        <SearchLoading/>
+        {children}
+      </section>
+    </div>
+  )
+})
+
+export default SearchDropdown

package/src/molecules/SearchDropdown/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SearchDropdown'
+export type { SearchDropdownProps } from './SearchDropdown'

package/src/molecules/SearchHistory/SearchHistory.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react'
-import { List, Button } from '../..'
+import { List, Button, useSearch } from '../..'
 
 export interface SearchHistoryProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -28,6 +28,13 @@ const SearchHistory = ({
   children,
   ...otherProps
 }: SearchHistoryProps) => {
+
+  const { inContext, values } = useSearch()
+
+  if (inContext && (values.term.length !== 0 || values.isLoading)) {
+    return null
+  }
+
   return (
     <section data-testid={testId} data-fs-search-history {...otherProps}>
       <header data-fs-search-history-header>

package/src/molecules/SearchInputField/SearchInputField.tsx

@@ -0,0 +1,100 @@
+import type {
+  AriaAttributes,
+  FormEvent,
+  InputHTMLAttributes,
+  ReactNode,
+} from 'react'
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
+
+import { IconButton, Input, MagnifyingGlass } from '../..'
+
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onSubmit'>
+
+type ButtonProps = {
+  onClick?: () => void
+  testId?: string
+}
+export interface SearchInputFieldProps extends InputProps {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Props for the submit button inside the input.
+   */
+  buttonProps?: ButtonProps
+  /**
+   * A React component that will be rendered as an icon (submit button).
+   * @default <MagnifyingGlass />
+   */
+  buttonIcon?: ReactNode
+  /**
+   * Custom aria-label for input and button.
+   */
+  'aria-label'?: AriaAttributes['aria-label']
+  /**
+   * Callback function when submitted.
+   */
+  onSubmit: (value: string) => void
+}
+
+export interface SearchInputFieldRef {
+  inputRef?: HTMLInputElement | null
+  formRef?: HTMLFormElement | null
+}
+
+const SearchInputField = forwardRef<
+  SearchInputFieldRef | null,
+  SearchInputFieldProps
+>(function SearchInputField(
+  {
+    onSubmit,
+    buttonIcon,
+    'aria-label': ariaLabel = 'search',
+    testId = 'fs-search-input',
+    buttonProps,
+    ...otherProps
+  },
+  ref
+) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const formRef = useRef<HTMLFormElement>(null)
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault()
+
+    if (inputRef.current?.value !== '') {
+      onSubmit(inputRef.current!.value)
+    }
+  }
+
+  useImperativeHandle(ref, () => ({
+    inputRef: inputRef.current,
+    formRef: formRef.current,
+  }))
+
+  return (
+    <form
+      ref={formRef}
+      data-fs-search-input-field
+      data-testid={testId}
+      onSubmit={handleSubmit}
+      role="search"
+    >
+      <Input
+        ref={inputRef}
+        aria-label={ariaLabel}
+        data-fs-search-input-field-input
+        {...otherProps}
+      />
+      <IconButton
+        type="submit"
+        aria-label="Submit Search"
+        icon={buttonIcon ?? <MagnifyingGlass />}
+        {...buttonProps}
+      />
+    </form>
+  )
+})
+
+export default SearchInputField

package/src/molecules/SearchInputField/index.ts

@@ -0,0 +1,5 @@
+export { default } from './SearchInputField'
+export type {
+  SearchInputFieldProps,
+  SearchInputFieldRef,
+} from './SearchInputField'

package/src/molecules/SearchProducts/SearchProductItemContent.tsx

@@ -8,7 +8,7 @@ interface Price {
   formatter: PriceFormatter
 }
 
-export type SearchProductItemContentProps = {
+export interface SearchProductItemContentProps {
   /**
    * Specifies the product's title.
    */

package/src/molecules/SearchProducts/SearchProducts.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react'
-import { List } from '../..'
+import { List, useSearch } from '../..'
 
 export interface SearchProductsProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -18,6 +18,11 @@ const SearchProductsProps = ({
   children,
   ...otherProps
 }: SearchProductsProps) => {
+  const { inContext, values } = useSearch()
+
+  if (inContext && (values.products.length <= 0)) {
+    return null
+  }
   return (
     <section data-testid={testId} data-fs-search-products {...otherProps}>
       <header data-fs-search-products-header>

package/src/molecules/SearchProvider/SearchProvider.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+import { createContext } from 'react'
+
+export interface SearchProviderContextValue {
+  /**
+   * Term to be researched.
+   */
+  term: string
+  /**
+   * Enables a loading state.
+   */
+  isLoading: boolean
+  /**
+   * List of Suggestion terms.
+   */
+  terms: Array<{ value: string }>
+  /**
+   * List of Suggested products.
+   */
+  products: {}[]
+  /**
+   * Callback function when a search term is selected.
+   */
+  onSearchSelection?: (term: string, path: string) => void
+}
+
+export const SearchContext = createContext<SearchProviderContextValue | null>(
+  null
+)
+
+function SearchProvider({
+  onSearchSelection,
+  children,
+  term,
+  terms,
+  products,
+  isLoading,
+}: PropsWithChildren<SearchProviderContextValue>) {
+  return (
+    <SearchContext.Provider
+      value={{ onSearchSelection, term, terms, products, isLoading }}
+    >
+      {children}
+    </SearchContext.Provider>
+  )
+}
+
+export default SearchProvider

package/src/molecules/SearchProvider/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SearchProvider'
+export type { SearchProviderContextValue } from './SearchProvider'

package/src/molecules/SearchTop/SearchTop.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { forwardRef } from 'react'
 import type { HTMLAttributes } from 'react'
 
-import { List } from '../../'
+import { List, useSearch } from '../../'
 
 export interface SearchTopProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -13,39 +13,30 @@ export interface SearchTopProps extends HTMLAttributes<HTMLDivElement> {
    * Title attribute for the <section> tag rendered by this component.
    */
   title: string
-  /**
-   * Defines the the message displayed while loading.
-   */
-  loadingMessage?: string
-  /**
-   * Enables a loading state.
-   */
-  isLoading?: boolean
 }
 
 const SearchTop = forwardRef<HTMLDivElement, SearchTopProps>(function SearchTop(
   {
     testId = 'fs-top-search',
     title = 'Top Search',
-    loadingMessage = 'Loading...',
-    isLoading,
     children,
     ...otherProps
   },
   ref
 ) {
+
+  const { inContext, values } = useSearch()
+
+  if (inContext && (values.term.length !== 0 || values.isLoading)) {
+    return null
+  }
+
   return (
     <section ref={ref} data-testid={testId} data-fs-search-top {...otherProps}>
-      {isLoading ? (
-        <p data-fs-search-top-input-loading-text>{loadingMessage}</p>
-      ) : (
-        <>
-          <header data-fs-search-top-header>
-            <p data-fs-search-top-title>{title}</p>
-          </header>
-          <List as="ol">{children}</List>
-        </>
-      )}
+        <header data-fs-search-top-header>
+          <p data-fs-search-top-title>{title}</p>
+        </header>
+        <List as="ol">{children}</List>
     </section>
   )
 })