@faststore/core 0.3.16 → 2.0.65-alpha.0

package/src/components/search/Filter/Facets.tsx

@@ -3,14 +3,19 @@ import {
   Label as UILabel,
   List as UIList,
   Badge as UIBadge,
+  Accordion as UIAccordion,
+  AccordionItem as UIAccordionItem,
+  AccordionButton as UIAccordionButton,
+  AccordionPanel as UIAccordionPanel,
+  PriceRange as UIPriceRange,
 } from '@faststore/ui'
 
+import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
+
 import type {
   Filter_FacetsFragment,
   IStoreSelectedFacet,
 } from '@generated/graphql'
-import Accordion, { AccordionItem } from 'src/components/ui/Accordion'
-import PriceRange from 'src/components/ui/PriceRange'
 
 import styles from './facets.module.scss'
 
@@ -58,80 +63,83 @@ function Facets({
       <h2 className="text__title-mini-alt" data-fs-facets-title>
         Filters
       </h2>
-      <Accordion
-        expandedIndices={indicesExpanded}
+      <UIAccordion
+        indices={indicesExpanded}
         onChange={onAccordionChange}
         data-fs-facets-accordion
       >
         {facets.map((facet, index) => {
           const isExpanded = indicesExpanded.has(index)
           const { __typename: type, label } = facet
-
           return (
-            <AccordionItem
+            <UIAccordionItem
               key={`${label}-${index}`}
               prefixId={testId}
               testId={`${testId}-accordion`}
-              isExpanded={isExpanded}
-              buttonLabel={label}
               data-type={type}
               data-fs-facets-accordion-item
             >
-              {type === 'StoreFacetBoolean' && isExpanded && (
-                <UIList data-fs-facets-list>
-                  {facet.values.map((item) => {
-                    const id = `${testId}-${facet.label}-${item.label}`
-
-                    return (
-                      <li key={id} data-fs-facets-list-item>
-                        <UICheckbox
-                          id={id}
-                          checked={item.selected}
-                          onChange={() =>
-                            onFacetChange(
-                              { key: facet.key, value: item.value },
-                              'BOOLEAN'
-                            )
-                          }
-                          data-fs-facets-list-item-checkbox
-                          data-testid={`${testId}-accordion-panel-checkbox`}
-                          data-value={item.value}
-                          data-quantity={item.quantity}
-                        />
-                        <UILabel
-                          htmlFor={id}
-                          className="text__title-mini-alt"
-                          data-fs-facets-list-item-label
-                        >
-                          {item.label}{' '}
-                          <UIBadge data-fs-facets-list-item-badge>
-                            {item.quantity}
-                          </UIBadge>
-                        </UILabel>
-                      </li>
-                    )
-                  })}
-                </UIList>
-              )}
-              {type === 'StoreFacetRange' && isExpanded && (
-                <PriceRange
-                  min={facet.min}
-                  max={facet.max}
-                  onEnd={(v) =>
-                    onFacetChange(
-                      {
-                        key: facet.key,
-                        value: formatRange(v.min, v.max),
-                      },
-                      'RANGE'
-                    )
-                  }
-                />
-              )}
-            </AccordionItem>
+              <UIAccordionButton testId={`${testId}-accordion-button`}>
+                {label}
+              </UIAccordionButton>
+              <UIAccordionPanel>
+                {type === 'StoreFacetBoolean' && isExpanded && (
+                  <UIList data-fs-facets-list>
+                    {facet.values.map((item) => {
+                      const id = `${testId}-${facet.label}-${item.label}`
+                      return (
+                        <li key={id} data-fs-facets-list-item>
+                          <UICheckbox
+                            id={id}
+                            checked={item.selected}
+                            onChange={() =>
+                              onFacetChange(
+                                { key: facet.key, value: item.value },
+                                'BOOLEAN'
+                              )
+                            }
+                            data-fs-facets-list-item-checkbox
+                            data-testid={`${testId}-accordion-panel-checkbox`}
+                            data-value={item.value}
+                            data-quantity={item.quantity}
+                          />
+                          <UILabel
+                            htmlFor={id}
+                            className="text__title-mini-alt"
+                            data-fs-facets-list-item-label
+                          >
+                            {item.label}{' '}
+                            <UIBadge data-fs-facets-list-item-badge>
+                              {item.quantity}
+                            </UIBadge>
+                          </UILabel>
+                        </li>
+                      )
+                    })}
+                  </UIList>
+                )}
+                {type === 'StoreFacetRange' && isExpanded && (
+                  <UIPriceRange
+                    min={facet.min}
+                    max={facet.max}
+                    formatter={useFormattedPrice}
+                    step={1}
+                    onEnd={(v) =>
+                      onFacetChange(
+                        {
+                          key: facet.key,
+                          value: formatRange(v.min, v.max),
+                        },
+                        'RANGE'
+                      )
+                    }
+                  />
+                )}
+              </UIAccordionPanel>
+            </UIAccordionItem>
           )
         })}
-      </Accordion>
+      </UIAccordion>
     </div>
   )
 }

package/src/components/search/Filter/Filter.stories.mdx

@@ -1,7 +1,7 @@
 import { SearchProvider } from '@faststore/sdk'
 import { useSearch } from '@faststore/sdk'
 
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { UIProvider, useUI } from '@faststore/ui'
 import { validateSession } from 'src/sdk/session'
 import { useFilter } from './useFilter'
 

package/src/components/search/Filter/Filter.tsx

@@ -2,7 +2,7 @@ import { gql } from '@faststore/graphql-utils'
 import { setFacet, toggleFacet, useSearch } from '@faststore/sdk'
 
 import type { Filter_FacetsFragment } from '@generated/graphql'
-import { useUI } from 'src/sdk/ui/Provider'
+import { useUI } from '@faststore/ui'
 
 import Facets from './Facets'
 import FilterSlider from './FilterSlider'

package/src/components/search/Filter/FilterSlider.stories.mdx

@@ -1,7 +1,7 @@
 import { SearchProvider } from '@faststore/sdk'
 import { useSearch } from '@faststore/sdk'
 
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { UIProvider, useUI } from '@faststore/ui'
 import { validateSession } from 'src/sdk/session'
 import { useFilter } from './useFilter'
 

package/src/components/search/Filter/FilterSlider.tsx

@@ -4,8 +4,8 @@ import { Button as UIButton, IconButton as UIIconButton } from '@faststore/ui'
 import type { Filter_FacetsFragment } from '@generated/graphql'
 import Icon from 'src/components/ui/Icon'
 import SlideOver from 'src/components/ui/SlideOver'
-import { useUI } from 'src/sdk/ui/Provider'
-import { useFadeEffect } from 'src/sdk/ui/useFadeEffect'
+import { useUI } from '@faststore/ui'
+import { useFadeEffect } from '@faststore/ui'
 
 import Facets from './Facets'
 import styles from './filter-slider.module.scss'

package/src/components/search/Filter/facets.module.scss

@@ -15,14 +15,14 @@
   --fs-facets-accordion-border-radius-notebook             : var(--fs-border-radius);
 
   // Accordion Item Button
-  --fs-facets-accordion-item-button-text-size              : var(--fs-text-size-lead);
-  --fs-facets-accordion-item-button-text-weight            : var(--fs-text-weight-regular);
-  --fs-facets-accordion-item-button-line-height            : 1.5;
-  --fs-facets-accordion-item-button-padding-right-notebook : var(--fs-spacing-4);
-  --fs-facets-accordion-item-button-padding-left-notebook  : var(--fs-facets-accordion-item-button-padding-right-notebook);
+  --fs-facets-accordion-button-text-size              : var(--fs-text-size-lead);
+  --fs-facets-accordion-button-text-weight            : var(--fs-text-weight-regular);
+  --fs-facets-accordion-button-line-height            : 1.5;
+  --fs-facets-accordion-button-padding-right-notebook : var(--fs-spacing-4);
+  --fs-facets-accordion-button-padding-left-notebook  : var(--fs-facets-accordion-button-padding-right-notebook);
 
-  --fs-facets-accordion-item-button-text-weight-notebook   : var(--fs-text-size-2);
-  --fs-facets-accordion-item-button-line-height-notebook   : 1.25;
+  --fs-facets-accordion-button-text-weight-notebook   : var(--fs-text-size-2);
+  --fs-facets-accordion-button-line-height-notebook   : 1.25;
 
   // Accordion Item Panel
   --fs-facets-accordion-item-panel-padding-right-notebook  : var(--fs-spacing-4);
@@ -64,20 +64,20 @@
   }
 
   [data-fs-facets-accordion-item] {
-    [data-fs-accordion-item-button] {
-      font-size: var(--fs-facets-accordion-item-button-text-size);
-      font-weight: var(--fs-facets-accordion-item-button-text-weight);
-      line-height: var(--fs-facets-accordion-item-button-line-height);
+    [data-fs-accordion-button] {
+      font-size: var(--fs-facets-accordion-button-text-size);
+      font-weight: var(--fs-facets-accordion-button-text-weight);
+      line-height: var(--fs-facets-accordion-button-line-height);
 
       @include media(">=notebook") {
-        padding-right: var(--fs-facets-accordion-item-button-padding-right-notebook);
-        padding-left: var(--fs-facets-accordion-item-button-padding-left-notebook);
-        font-size: var(--fs-facets-accordion-item-button-text-weight-notebook);
-        line-height: var(--fs-facets-accordion-item-button-line-height-notebook);
+        padding-right: var(--fs-facets-accordion-button-padding-right-notebook);
+        padding-left: var(--fs-facets-accordion-button-padding-left-notebook);
+        font-size: var(--fs-facets-accordion-button-text-weight-notebook);
+        line-height: var(--fs-facets-accordion-button-line-height-notebook);
       }
     }
 
-    [data-fs-accordion-item-panel] {
+    [data-fs-accordion-panel] {
       @include media(">=notebook") {
         padding-right: var(--fs-facets-accordion-item-panel-padding-right-notebook);
         padding-left: var(--fs-facets-accordion-item-panel-padding-left-notebook);

package/src/components/search/Search.stories.mdx

@@ -7,7 +7,6 @@ import {
   TokenDivider,
 } from 'src/../.storybook/components'
 import { SearchInputProvider } from 'src/sdk/search/useSearchInput'
-import { rest } from 'msw'
 import SearchDropdown from './SearchDropdown'
 import SearchInput from './SearchInput'
 import SearchProductCard from './SearchProductCard'
@@ -98,35 +97,39 @@ import SearchInput from 'src/components/search/SearchInput'
       actionPath="../?path=/docs/features-search-searchsuggestions--default-story"
       description={
         <>
-          Displays a set of navigation links that self-adapts on mobile{' '}
-          or desktop screens.
+          Displays a set of navigation links that self-adapts on mobile or
+          desktop screens.
         </>
       }
-      containerStyle={{ overflowY: "scroll", alignItems: "flex-start" }}
+      containerStyle={{ overflowY: 'scroll', alignItems: 'flex-start' }}
     >
-      <SearchSuggestions term="Ste" products={products.slice(0, 3)} terms={searchTerms} style={{ width: "100%" }} />
+      <SearchSuggestions
+        term="Ste"
+        products={products.slice(0, 3)}
+        terms={searchTerms}
+        style={{ width: '100%' }}
+      />
     </SectionItem>
     <SectionItem
       title="SearchProductCard"
       actionPath="../?path=/docs/features-search-searchproductcard--search-product-card"
       description={
         <>
-          Card to show details of the product and suggestions in <code>SearchDropdown</code>.
+          Card to show details of the product and suggestions in{' '}
+          <code>SearchDropdown</code>.
         </>
       }
     >
-      <SearchProductCard product={product} style={{ width: "100%" }} />
+      <SearchProductCard product={product} style={{ width: '100%' }} />
     </SectionItem>
     <SectionItem
       title="SearchTop"
       actionPath="../?path=/docs/features-search-searchtop--default-story"
       description={
-        <>
-          This section displays the most searched terms by customers.
-        </>
+        <>This section displays the most searched terms by customers.</>
       }
     >
-      <SearchTop style={{ width: "100%" }} />
+      <SearchTop style={{ width: '100%' }} />
     </SectionItem>
   </SectionList>
   <SectionList grid="grid">
@@ -134,36 +137,37 @@ import SearchInput from 'src/components/search/SearchInput'
       title="SearchHistory"
       actionPath="../?path=/docs/features-search-searchhistory--default-story"
       description={
-        <>
-          Responsible for showing the latest terms searched by the user.
-        </>
+        <>Responsible for showing the latest terms searched by the user.</>
       }
     >
-      <SearchHistory style={{ width: "100%" }} />
+      <SearchHistory style={{ width: '100%' }} />
     </SectionItem>
     <SectionItem
       title="SearchDropdown"
       actionPath="../?path=/docs/features-search-searchdropdown--default-story"
       description={
         <>
-          Combine <code>SearchHistory</code>, <code>SearchTop</code>, and <code>SearchSuggestions</code> to show all options in <code>SearchInput</code>.
+          Combine <code>SearchHistory</code>, <code>SearchTop</code>, and{' '}
+          <code>SearchSuggestions</code> to show all options in{' '}
+          <code>SearchInput</code>.
         </>
       }
-      containerStyle={{ display: "flex", flexDirection: "column", overflowY: "scroll", justifyContent: "start" }}
+      containerStyle={{
+        display: 'flex',
+        flexDirection: 'column',
+        overflowY: 'scroll',
+        justifyContent: 'start',
+      }}
     >
       <SearchDropdown />
     </SectionItem>
     <SectionItem
       title="SearchInput"
       actionPath="../?path=/docs/features-search-searchinput--default-story"
-      description={
-        <>
-          Responsible to receive, search and display suggestions.
-        </>
-      }
-      containerStyle={{ overflowY: "scroll" }}
+      description={<>Responsible to receive, search and display suggestions.</>}
+      containerStyle={{ overflowY: 'scroll' }}
     >
-      <SearchInput containerStyle={{ width: "100%" }} />
+      <SearchInput containerStyle={{ width: '100%' }} />
     </SectionItem>
   </SectionList>
 </SearchInputProvider>

package/src/components/search/SearchDropdown/SearchDropdown.stories.mdx

@@ -1,5 +1,4 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-import { rest } from 'msw'
 
 import {
   TokenTable,

package/src/components/search/SearchInput/SearchInput.stories.mdx

@@ -1,5 +1,4 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-import { rest } from 'msw'
 
 import {
   TokenTable,

package/src/components/search/SearchTop/SearchTop.stories.mdx

@@ -1,5 +1,4 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-import { rest } from 'msw'
 
 import { SearchInputProvider } from 'src/sdk/search/useSearchInput'
 import { searchTerms } from 'src/../.storybook/mocks'

package/src/components/sections/Newsletter/Newsletter.stories.mdx

@@ -1,7 +1,7 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
 import { TokenTable, TokenRow } from 'src/../.storybook/components'
 
-import UIProvider from 'src/sdk/ui/Provider'
+import { UIProvider } from '@faststore/ui'
 
 import Newsletter from '.'
 

package/src/components/sections/Newsletter/Newsletter.tsx

@@ -6,7 +6,7 @@ import {
   InputField as UIInputField,
 } from '@faststore/ui'
 
-import { useUI } from 'src/sdk/ui/Provider'
+import { useUI } from '@faststore/ui'
 import Icon from 'src/components/ui/Icon'
 import Link from 'src/components/ui/Link'
 import { useNewsletter } from 'src/sdk/newsletter/useNewsletter'