@sonic-equipment/ui 0.0.51 → 0.0.53

package/dist/src/shared/providers/favorite-provider.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    onFavoriteAdded: () => void;
+    onFavoriteListAdded: () => void;
+    onFavoriteRemoved: () => void;
+    signInUrl: string;
+}
+export declare function FavoriteProvider(props: Props): null;
+export declare function useFavorite(): {
+    signInUrl: string;
+};
+export declare function useFavoriteProduct(productId: string): {
+    isFavorite: boolean;
+    isFetching: boolean;
+};
+export {};

package/dist/styles.css

@@ -213,6 +213,7 @@
   --carousel-layer: 10;
   --sidebar-layer: 100;
   --search-layer: 200;
+  --modal-layer: 300;
   --header-layer: 15;
 }
 
@@ -356,7 +357,7 @@
     color: var(--color-brand-white);
   }
 
-.button-module-tmyk8:where(.button-module-vq9GI, .button-module-AjvlY):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module-tmyk8:where(.button-module-vq9GI, .button-module-AjvlY):where([data-pressed]) {
+.button-module-tmyk8:where(.button-module-vq9GI, .button-module-AjvlY):where([data-focused], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module-tmyk8:where(.button-module-vq9GI, .button-module-AjvlY):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module-tmyk8:where(.button-module-vq9GI, .button-module-AjvlY):where([data-pressed]) {
       background-color: var(--color-brand-dark-red);
     }
 
@@ -364,7 +365,7 @@
     color: var(--color-brand-black);
   }
 
-.button-module-tmyk8:where(.button-module-f4UVe):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module-tmyk8:where(.button-module-f4UVe):where([data-pressed]) {
+.button-module-tmyk8:where(.button-module-f4UVe):where([data-focused], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module-tmyk8:where(.button-module-f4UVe):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module-tmyk8:where(.button-module-f4UVe):where([data-pressed]) {
       color: var(--color-brand-red);
     }
 
@@ -388,7 +389,7 @@
     color: var(--color-brand-black);
   }
 
-.button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY):where([data-pressed]) {
+.button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY):where([data-focused], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY):where([data-pressed]) {
       background-color: var(--color-brand-light-gray);
     }
 
@@ -396,7 +397,7 @@
     color: var(--color-brand-black);
   }
 
-.button-module--1bCH:where(.button-module-f4UVe):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-f4UVe):where([data-pressed]) {
+.button-module--1bCH:where(.button-module-f4UVe):where([data-focused], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-f4UVe):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-f4UVe):where([data-pressed]) {
       color: var(--color-brand-red);
     }
 
@@ -404,7 +405,7 @@
     border: 1px solid var(--color-brand-medium-gray);
   }
 
-.button-module--1bCH:where(.button-module-vq9GI):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-vq9GI):where([data-pressed]) {
+.button-module--1bCH:where(.button-module-vq9GI):where([data-focused], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-vq9GI):where([data-hovered], .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-vq9GI):where([data-pressed]) {
       border-color: var(--color-brand-light-gray);
     }
 
@@ -517,7 +518,6 @@
   color: var(--color-brand-red);
   cursor: pointer;
   font: inherit;
-  font-size: var(--font-size-14);
   gap: var(--space-4);
 }
 
@@ -1518,6 +1518,7 @@
 
   .show-all-module-BDp21 .show-all-module-58e7Q {
     margin-top: var(--space-8);
+    font-size: var(--font-size-14);
   }
 
   .show-all-module-BDp21 .show-all-module-58e7Q .show-all-module-fqncI {
@@ -1687,6 +1688,10 @@
     --height: var(--space-44);
   }
 
+  .select-module-ui-Wc.select-module-IRd4F button {
+    background-color: var(--color-brand-light-gray);
+  }
+
 .select-module-aMQIQ {
   all: unset;
   position: relative;
@@ -1739,6 +1744,10 @@
   padding-block: var(--space-8);
 }
 
+.select-module-z8cWq.select-module-IRd4F {
+    background-color: var(--color-brand-light-gray);
+  }
+
 .select-module-S21ba {
   outline: none;
 }
@@ -1834,7 +1843,7 @@
   all: unset;
   display: inline-flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: normal;
   gap: var(--space-4);
 }
 
@@ -2063,6 +2072,10 @@
     justify-content: space-between;
   }
 
+  .filter-section-module-q1Ob8 .filter-section-module-zi2ZE button {
+      font-size: var(--font-size-14);
+    }
+
   .filter-section-module-q1Ob8 .filter-section-module-hWVv- {
     font-size: var(--font-size-16);
     font-weight: var(--font-weight-bold);
@@ -2169,6 +2182,122 @@
     height: 12px;
   }
 
+.modal-module-rVFJc {
+  position: fixed;
+  z-index: calc(var(--modal-layer) - 1);
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100vw;
+  height: var(--visual-viewport-height);
+  align-items: center;
+  justify-content: center;
+  -webkit-backdrop-filter: blur(4px);
+          backdrop-filter: blur(4px);
+  background-color: rgb(0 0 0 / 52%);
+}
+
+  .modal-module-rVFJc[data-entering] {
+    animation: modal-module-63Uyl 200ms;
+  }
+
+  .modal-module-rVFJc[data-exiting] {
+    animation: modal-module-63Uyl 150ms reverse ease-in;
+  }
+
+.modal-module-6vlFt {
+  position: relative;
+  z-index: calc(var(--modal-layer) - 1);
+  min-width: 300px;
+  max-width: 90%;
+  border: 1px solid var(--gray-400);
+  border-radius: 6px;
+  background: var(--color-white);
+  box-shadow: 0 8px 20px rgba(0 0 0 / 10%);
+  color: var(--text-color);
+  outline: none;
+}
+
+.modal-module-6vlFt section:focus-visible,
+  .modal-module-6vlFt section:focus {
+    outline: none;
+  }
+
+.modal-module-6vlFt[data-entering] {
+    animation: modal-module-aPJ7X 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+@keyframes modal-module-63Uyl {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-module-aPJ7X {
+  from {
+    transform: scale(0.8);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+.dialog-module-ZnsAe {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #e0e0e0;
+  gap: 8px;
+}
+
+  .dialog-module-ZnsAe .dialog-module-SwpuZ {
+    padding: 1rem;
+  }
+
+  .dialog-module-ZnsAe .dialog-module-Y7Tqg {
+    align-self: flex-start;
+  }
+
+.dialog-module-Koqia {
+  padding: 1rem;
+}
+
+.dialog-module-y7Axm {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  padding: 1rem;
+  border-top: 1px solid #e0e0e0;
+  gap: 8px;
+}
+
+.add-to-favorite-dialog-module-WJYMb {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.add-to-favorite-dialog-module--0-Ln {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+
+.add-to-favorite-dialog-module-ZAuzE {
+  display: flex;
+  min-height: 66px;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  gap: 1rem;
+}
+
 .category-card-module-4NUjH {
   all: unset;
   display: grid;
@@ -2637,6 +2766,9 @@
 }
 
 .search-section-module-qaTiw {
+  --padding-inline: var(--space-16);
+  --padding-block: var(--space-20);
+
   display: grid;
   padding-block: var(--padding-block);
   padding-inline: var(--padding-inline);
@@ -2667,7 +2799,6 @@
   --padding-block: var(--space-20);
 
   display: grid;
-  gap: var(--space-24);
   grid-template-columns: 1fr;
 }
 
@@ -2770,6 +2901,42 @@
         font-weight: var(--font-weight-bold);
       }
 
+.no-search-module-87NKV {
+  position: relative;
+  left: -16px;
+  display: inline-block;
+  overflow: hidden;
+  width: calc(100% + var(--space-32));
+}
+
+  .no-search-module-87NKV .no-search-module-beCXI {
+    padding-inline: var(--space-16);
+  }
+
+  .no-search-module-87NKV .no-search-module-dtT5J {
+    display: block;
+    width: 153px;
+    height: 272px;
+    cursor: pointer;
+  }
+
+@media (width >= 768px) {
+  .no-search-module-87NKV {
+    position: static;
+    left: unset;
+    width: 100%;
+  }
+
+    .no-search-module-87NKV .no-search-module-beCXI {
+      padding-inline: 0;
+    }
+
+    .no-search-module-87NKV .no-search-module-dtT5J {
+      width: 192px;
+      height: 343px;
+    }
+}
+
 .product-carousel-module-XVTB1 {
   --slide-width: 154px;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -46,8 +46,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-instantsearch": "^7",
-    "react-instantsearch-core": "^7",
-    "search-insights": "^2"
+    "react-instantsearch-core": "^7"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
@@ -126,6 +125,7 @@
     "algoliasearch": "^4.24.0",
     "clsx": "^2.1.1",
     "instantsearch.js": "^4.73.1",
+    "query-string": "^9.1.0",
     "react-aria-components": "^1.2.1",
     "react-instantsearch": "^7.12.1",
     "react-transition-group": "^4.4.5",

package/dist/buttons/favorite/favorite-button.d.ts

@@ -1,5 +0,0 @@
-export interface FavoriteButtonProps {
-    isFavorite: boolean;
-    onPress: () => void;
-}
-export declare function FavoriteButton({ isFavorite, onPress }: FavoriteButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/intl/translation-id.d.ts

@@ -1 +0,0 @@
-export type TranslationId = 'Chosen filters' | 'Clear' | 'Clear filters' | 'Excl. VAT' | 'Explore by categories' | 'Hide filters' | 'Incl. VAT' | 'Popular searches' | 'Products' | 'Recent searches' | 'Show' | 'Show all' | 'Show filters' | 'Show less' | 'Sort by' | 'Sorry, we could not find matches for' | 'Submit' | 'Suggestions' | 'articles' | 'article' | 'of' | 'sort.relevance' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'tag.new' | 'facet.categories' | 'facet.weight' | 'facet.height' | 'You could try' | 'Searching again using more general terms' | 'Double check your spelling' | 'Use fewer keywords' | 'Exploring our products by category';

package/dist/shared/api/shop/hooks/cart/use-delete-cart-line-by-id.d.ts

@@ -1,5 +0,0 @@
-import { ResponseError } from 'shared/fetch/ResponseError';
-export declare class DeleteCartLineByIdError extends ResponseError {
-    constructor(response: Response, message: string);
-}
-export declare function useDeleteCartLineById(): import("@tanstack/react-query").UseMutationResult<void, Error, string, unknown>;

package/dist/shared/api/shop/hooks/cart/use-fetch-current-cart-lines.d.ts

@@ -1,6 +0,0 @@
-import { ResponseError } from 'shared/fetch/ResponseError';
-import { CartLineModel } from 'shared/model/cart';
-export declare class FetchCurrentCartLinesError extends ResponseError {
-    constructor(response: Response, message?: string);
-}
-export declare function useFetchCurrentCartLines(): import("@tanstack/react-query").UseQueryResult<CartLineModel[] | null, Error>;

package/dist/shared/fetch/ResponseError.d.ts

@@ -1,9 +0,0 @@
-export declare class ResponseError extends Error {
-    response: Response;
-    status: number;
-    statusText: string;
-    type: ResponseType;
-    url: string;
-    constructor(response: Response, message?: string);
-}
-export declare function isResponseError(error: unknown): error is ResponseError;

package/dist/shared/providers/favorite-provider.d.ts

@@ -1,10 +0,0 @@
-interface Props {
-    isFavorite: (productId: string) => boolean;
-    toggleFavorite: (productId: string) => void;
-}
-export declare function FavoriteProvider(props: Props): null;
-export declare function useFavorite(productId: string): {
-    isFavorite: boolean;
-    toggle: () => void;
-};
-export {};