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

package/dist/index.d.ts

@@ -76,6 +76,8 @@ export { default as SearchTop, SearchTopTerm } from './molecules/SearchTop';
 export type { SearchTopProps, SearchTopTermProps } from './molecules/SearchTop';
 export { default as SelectField } from './molecules/SelectField';
 export type { SelectFieldProps } from './molecules/SelectField';
+export { default as SkuSelector } from './molecules/SkuSelector';
+export type { SkuSelectorProps, SkuOption } from './molecules/SkuSelector';
 export { Table, TableBody, TableCell, TableFooter, TableHead, TableRow, } from './molecules/Table';
 export type { TableProps, TableBodyProps, TableCellProps, TableFooterProps, TableHeadProps, TableRowProps, } from './molecules/Table';
 export { default as Tag } from './molecules/Tag';

package/dist/index.js

@@ -43,6 +43,7 @@ export { default as SearchHistory, SearchHistoryTerm, } from './molecules/Search
 export { default as SearchProducts, SearchProductItem, SearchProductItemImage, SearchProductItemContent, } from './molecules/SearchProducts';
 export { default as SearchTop, SearchTopTerm } from './molecules/SearchTop';
 export { default as SelectField } from './molecules/SelectField';
+export { default as SkuSelector } from './molecules/SkuSelector';
 export { Table, TableBody, TableCell, TableFooter, TableHead, TableRow, } from './molecules/Table';
 export { default as Tag } from './molecules/Tag';
 export { default as Toast } from './molecules/Toast';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,QAAQ;AACR,cAAc,SAAS,CAAA;AAEvB,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,EACb,eAAe,EACf,cAAc,GACf,MAAM,uBAAuB,CAAA;AAO9B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEpD,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAKnE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,aAAa,EACb,eAAe,GAChB,MAAM,sBAAsB,CAAA;AAM7B,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,sBAAsB,CAAA;AAO7B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAM1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAE5E,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,yBAAyB,CAAA;AAMhC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAElE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAE3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EACL,OAAO,IAAI,kBAAkB,EAC7B,sBAAsB,GACvB,MAAM,gCAAgC,CAAA;AAKvC,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,iBAAiB,GAClB,MAAM,2BAA2B,CAAA;AAKlC,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,iBAAiB,EACjB,sBAAsB,EACtB,wBAAwB,GACzB,MAAM,4BAA4B,CAAA;AAOnC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAE3E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,mBAAmB,CAAA;AAS1B,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAG1E,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAOzE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAGtE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAG9D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/molecules/SkuSelector/SkuSelector.d.ts

@@ -0,0 +1,78 @@
+import type { FunctionComponent, HTMLAttributes } from 'react';
+import React from 'react';
+import { LinkProps, LinkElementType } from '../..';
+import { Variant } from './useDefineVariant';
+export interface SkuOption {
+    /**
+     * Alternative text description of the image.
+     */
+    alt?: string;
+    /**
+     * Image URL.
+     */
+    src?: string;
+    /**
+     * Label to describe the option when selected. This is mandatory if you want to use the `image` variant.'
+     */
+    label: string;
+    /**
+     * Current value for this option.
+     */
+    value: string;
+    /**
+     * Specifies that this option should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Hex color code for this option. This is mandatory if you want to use the `Color` variant.
+     */
+    hexColor?: string;
+}
+export interface SkuSelectorProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * ID of the current instance of the component.
+     */
+    id?: string;
+    /**
+     * SKU options that should be rendered.
+     */
+    availableVariations: Record<string, SkuOption[]>;
+    /**
+     * Name of the SKU property that this selector is relative to.
+     */
+    skuPropertyName: string;
+    /**
+     * Currently active variation's value.
+     */
+    activeVariations: Record<string, string>;
+    /**
+     * Optional variant type, when is not passed the type is inferred based on options properties
+     */
+    variant?: Variant;
+    /**
+     * Extends all Link Props.
+     */
+    linkProps?: Partial<LinkProps<LinkElementType>>;
+    /**
+     * Optional function to determines the href string.
+     */
+    getItemHref?: (option: SkuOption) => string;
+    /**
+     * Maps property value combinations to their respective SKU's slug
+     */
+    slugsMap: Record<string, string>;
+    /**
+     * Function that returns a React component that will be used to render images.
+     */
+    ImageComponent?: FunctionComponent<{
+        src: string;
+        alt: string;
+    }>;
+}
+declare const SkuSelector: React.ForwardRefExoticComponent<SkuSelectorProps & React.RefAttributes<HTMLDivElement>>;
+export default SkuSelector;

package/dist/molecules/SkuSelector/SkuSelector.js

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react';
+import { Label, SROnly, Link } from '../..';
+import { useDefineVariant } from './useDefineVariant';
+import { useSkuSlug } from './useSkuSlug';
+// TODO: Change by ImageComponent when it be right
+const ImageComponentFallback = ({ src, alt, ...otherProps }) => React.createElement("img", { src: src, alt: alt, ...otherProps });
+const SkuSelector = forwardRef(function SkuSelector({ availableVariations, skuPropertyName, testId, activeVariations, linkProps, slugsMap, getItemHref: getItemHrefProp, ImageComponent = ImageComponentFallback, variant: variantProp, ...otherProps }, ref) {
+    const activeSelectorValue = activeVariations[skuPropertyName];
+    const options = availableVariations[skuPropertyName];
+    const variant = useDefineVariant(options, variantProp);
+    const { getItemHref } = useSkuSlug(activeVariations, slugsMap, skuPropertyName, getItemHrefProp);
+    return (React.createElement("div", { ref: ref, "data-fs-sku-selector": true, "data-testid": testId, "data-fs-sku-selector-variant": variant, ...otherProps },
+        skuPropertyName && (React.createElement(Label, { "data-fs-sku-selector-title": true },
+            skuPropertyName,
+            ": ",
+            React.createElement("strong", null, activeSelectorValue))),
+        React.createElement("ul", { "data-fs-sku-selector-list": true }, options.map((option, index) => {
+            return (React.createElement("li", { key: String(index), title: option.label, "data-fs-sku-selector-option": true, "data-fs-sku-selector-disabled": option.disabled, "data-fs-sku-selector-checked": option.value === activeVariations[skuPropertyName] },
+                React.createElement(Link, { "data-fs-sku-selector-option-link": true, href: getItemHref(option), ...linkProps },
+                    React.createElement(SROnly, { text: option.label })),
+                variant === 'label' && React.createElement("span", null, option.value),
+                variant === 'image' && ImageComponent && (React.createElement("span", null,
+                    React.createElement(ImageComponent, { src: option.src ?? '', alt: option.alt ?? '', "data-fs-sku-selector-option-image": true }))),
+                variant === 'color' && (React.createElement("span", null,
+                    React.createElement("div", { "data-fs-sku-selector-option-color": true, title: option.value, style: {
+                            '--data-fs-sku-selector-option-color-bkg-color': option.hexColor,
+                        } })))));
+        }))));
+});
+export default SkuSelector;
+//# sourceMappingURL=SkuSelector.js.map

package/dist/molecules/SkuSelector/SkuSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkuSelector.js","sourceRoot":"","sources":["../../../src/molecules/SkuSelector/SkuSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAA8B,MAAM,OAAO,CAAA;AACvE,OAAO,EAAE,gBAAgB,EAAW,MAAM,oBAAoB,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAGzC,kDAAkD;AAClD,MAAM,sBAAsB,GAAuC,CAAC,EAClE,GAAG,EACH,GAAG,EACH,GAAG,UAAU,EACd,EAAE,EAAE,CAAC,6BAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAM,UAAU,GAAI,CAAA;AA4EjD,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,mBAAmB,EACnB,eAAe,EACf,MAAM,EACN,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,cAAc,GAAG,sBAAsB,EACvC,OAAO,EAAE,WAAW,EACpB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAA;IAC7D,MAAM,OAAO,GAAG,mBAAmB,CAAC,eAAe,CAAC,CAAA;IAEpD,MAAM,OAAO,GAAG,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAA;IAEtD,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,gBAAgB,EAAE,QAAQ,EAAE,eAAe,EAAE,eAAe,CAAC,CAAA;IAEhG,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,+CAEK,MAAM,kCACW,OAAO,KACjC,UAAU;QAEb,eAAe,IAAI,CAClB,oBAAC,KAAK;YACH,eAAe;;YAAG,oCAAS,mBAAmB,CAAU,CACnD,CACT;QACD,iEACG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC7B,OAAO,CACL,4BACE,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,EAClB,KAAK,EAAE,MAAM,CAAC,KAAK,wEAEY,MAAM,CAAC,QAAQ,kCAE5C,MAAM,CAAC,KAAK,KAAK,gBAAgB,CAAC,eAAe,CAAC;gBAGpD,oBAAC,IAAI,8CAEH,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,KACrB,SAAS;oBAEb,oBAAC,MAAM,IAAC,IAAI,EAAE,MAAM,CAAC,KAAK,GAAI,CACzB;gBAEN,OAAO,KAAK,OAAO,IAAI,kCAAO,MAAM,CAAC,KAAK,CAAQ;gBAElD,OAAO,KAAK,OAAO,IAAI,cAAc,IAAI,CACxC;oBACE,oBAAC,cAAc,IACb,GAAG,EAAE,MAAM,CAAC,GAAG,IAAI,EAAE,EACrB,GAAG,EAAE,MAAM,CAAC,GAAG,IAAI,EAAE,8CAErB,CACG,CACR;gBAEA,OAAO,KAAK,OAAO,IAAI,CACtB;oBACE,wEAEE,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EACH;4BACE,+CAA+C,EAC7C,MAAM,CAAC,QAAQ;yBACK,GAErB,CACF,CACR,CACE,CACN,CAAA;QACH,CAAC,CAAC,CACC,CACD,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/molecules/SkuSelector/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SkuSelector';
+export type { SkuSelectorProps, SkuOption } from './SkuSelector';

package/dist/molecules/SkuSelector/index.js

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

package/dist/molecules/SkuSelector/index.js.map

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

package/dist/molecules/SkuSelector/useDefineVariant.d.ts

@@ -0,0 +1,3 @@
+import { SkuOption } from './SkuSelector';
+export type Variant = 'image' | 'color' | 'label';
+export declare const useDefineVariant: (options: SkuOption[], variant?: Variant) => Variant;

package/dist/molecules/SkuSelector/useDefineVariant.js

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+const getImageName = (src) => {
+    const sourcePath = new URL(src).pathname;
+    const imageName = sourcePath.split('/').at(-1);
+    return imageName;
+};
+export const useDefineVariant = (options, variant) => useMemo(() => {
+    if (variant)
+        return variant;
+    const allOptionsHaveHexColor = options.every((option) => option.hexColor);
+    if (allOptionsHaveHexColor) {
+        return 'color';
+    }
+    const firstImageName = options[0]?.src && getImageName(options[0].src);
+    const areSourcesEqualsOrNull = options.every((option) => {
+        if (!option.src) {
+            return true;
+        }
+        const optionImageName = getImageName(option.src);
+        return optionImageName === firstImageName;
+    });
+    if (!areSourcesEqualsOrNull) {
+        return 'image';
+    }
+    return 'label';
+}, [options, variant]);
+//# sourceMappingURL=useDefineVariant.js.map

package/dist/molecules/SkuSelector/useDefineVariant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDefineVariant.js","sourceRoot":"","sources":["../../../src/molecules/SkuSelector/useDefineVariant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAK/B,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;IACnC,MAAM,UAAU,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAA;IACxC,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;IAC9C,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAAoB,EAAE,OAAiB,EAAW,EAAE,CACnF,OAAO,CAAC,GAAG,EAAE;IACX,IAAG,OAAO;QAAE,OAAO,OAAO,CAAA;IAE1B,MAAM,sBAAsB,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;IACzE,IAAI,sBAAsB,EAAE;QAC1B,OAAO,OAAO,CAAA;KACf;IAED,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;IAEtE,MAAM,sBAAsB,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE;QACtD,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;YACf,OAAO,IAAI,CAAA;SACZ;QACD,MAAM,eAAe,GAAG,YAAY,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;QAChD,OAAO,eAAe,KAAK,cAAc,CAAA;IAC3C,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,sBAAsB,EAAE;QAC3B,OAAO,OAAO,CAAA;KACf;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAA"}

package/dist/molecules/SkuSelector/useSkuSlug.d.ts

@@ -0,0 +1,6 @@
+import { SkuOption } from './SkuSelector';
+export declare const useSkuSlug: (activeVariations: Record<string, string>, slugsMap: Record<string, string>, skuPropertyName: string, getItemHrefProp?: ((option: SkuOption) => string) | undefined) => {
+    getItemHref: (option: SkuOption) => string | {
+        getItemHrefProp: (option: SkuOption) => string;
+    };
+};

package/dist/molecules/SkuSelector/useSkuSlug.js

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+function getSkuSlug(slugsMap, selectedVariations, dominantVariation) {
+    const slugsMapKey = Object.entries(selectedVariations).flat().join('-');
+    if (slugsMapKey in slugsMap) {
+        return slugsMap[slugsMapKey];
+    }
+    const possibleVariants = Object.keys(slugsMap);
+    const firstVariationForDominantValue = possibleVariants.find((slug) => slug.includes(`${dominantVariation}-${selectedVariations[dominantVariation]}`));
+    return slugsMap[firstVariationForDominantValue ?? possibleVariants[0]];
+}
+export const useSkuSlug = (activeVariations, slugsMap, skuPropertyName, getItemHrefProp) => {
+    const getItemHref = useCallback((option) => {
+        if (getItemHrefProp)
+            return { getItemHrefProp };
+        const currentItemHref = `/${getSkuSlug(slugsMap, {
+            ...activeVariations,
+            [skuPropertyName]: option.value,
+        }, skuPropertyName)}/p`;
+        return currentItemHref;
+    }, [activeVariations, getItemHrefProp, slugsMap, skuPropertyName]);
+    return { getItemHref };
+};
+//# sourceMappingURL=useSkuSlug.js.map

package/dist/molecules/SkuSelector/useSkuSlug.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSkuSlug.js","sourceRoot":"","sources":["../../../src/molecules/SkuSelector/useSkuSlug.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAGnC,SAAS,UAAU,CACjB,QAAgC,EAChC,kBAA0C,EAC1C,iBAAyB;IAEzB,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAEvE,IAAI,WAAW,IAAI,QAAQ,EAAE;QAC3B,OAAO,QAAQ,CAAC,WAAW,CAAC,CAAA;KAC7B;IAED,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAE9C,MAAM,8BAA8B,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CACpE,IAAI,CAAC,QAAQ,CACX,GAAG,iBAAiB,IAAI,kBAAkB,CAAC,iBAAiB,CAAC,EAAE,CAChE,CACF,CAAA;IAED,OAAO,QAAQ,CAAC,8BAA8B,IAAI,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAA;AACxE,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CACxB,gBAAwC,EACxC,QAAgC,EAChC,eAAuB,EACvB,eAA+C,EAC/C,EAAE;IACF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,MAAiB,EAAE,EAAE;QACpB,IAAG,eAAe;YAAE,OAAO,EAAE,eAAe,EAAE,CAAA;QAE9C,MAAM,eAAe,GAAG,IAAI,UAAU,CACpC,QAAQ,EACR;YACE,GAAG,gBAAgB;YACnB,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC,KAAK;SAChC,EACD,eAAe,CAChB,IAAI,CAAA;QACL,OAAO,eAAe,CAAA;IACxB,CAAC,EACD,CAAC,gBAAgB,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,CAAC,CAC/D,CAAA;IACD,OAAO,EAAE,WAAW,EAAE,CAAA;AACxB,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.85-alpha.0",
+  "version": "2.0.87-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": "24590eae428eae6be0b7c43cbec9fe236270794e"
+  "gitHead": "b3bf59d620318b0bd4511eb4731eb716006c0fb4"
 }

package/src/index.ts

@@ -148,6 +148,8 @@ export { default as SearchTop, SearchTopTerm } from './molecules/SearchTop'
 export type { SearchTopProps, SearchTopTermProps } from './molecules/SearchTop'
 export { default as SelectField } from './molecules/SelectField'
 export type { SelectFieldProps } from './molecules/SelectField'
+export { default as SkuSelector } from './molecules/SkuSelector'
+export type { SkuSelectorProps, SkuOption } from './molecules/SkuSelector'
 export {
   Table,
   TableBody,

package/src/molecules/SkuSelector/SkuSelector.tsx

@@ -0,0 +1,181 @@
+/* eslint-disable @next/next/no-img-element */
+import type { FunctionComponent, HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+import { Label, SROnly, Link, LinkProps, LinkElementType } from '../..'
+import { useDefineVariant, Variant } from './useDefineVariant'
+import { useSkuSlug } from './useSkuSlug'
+
+
+// TODO: Change by ImageComponent when it be right
+const ImageComponentFallback: SkuSelectorProps['ImageComponent'] = ({
+  src,
+  alt,
+  ...otherProps
+}) => <img src={src} alt={alt} {...otherProps} />
+
+export interface SkuOption {
+  /**
+   * Alternative text description of the image.
+   */
+  alt?: string
+  /**
+   * Image URL.
+   */
+  src?: string
+  /**
+   * Label to describe the option when selected. This is mandatory if you want to use the `image` variant.'
+   */
+  label: string
+  /**
+   * Current value for this option.
+   */
+  value: string
+  /**
+   * Specifies that this option should be disabled.
+   */
+  disabled?: boolean
+  /**
+   * Hex color code for this option. This is mandatory if you want to use the `Color` variant.
+   */
+  hexColor?: string
+}
+
+export interface SkuSelectorProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * ID of the current instance of the component.
+   */
+  id?: string
+  /**
+   * SKU options that should be rendered.
+   */
+  availableVariations: Record<string, SkuOption[]>
+  /**
+   * Name of the SKU property that this selector is relative to.
+   */
+  skuPropertyName: string
+  /**
+   * Currently active variation's value.
+   */
+  activeVariations: Record<string, string>
+  /**
+   * Optional variant type, when is not passed the type is inferred based on options properties
+   */
+  variant?: Variant
+  /**
+   * Extends all Link Props.
+   */
+  linkProps?: Partial<LinkProps<LinkElementType>>
+  /**
+   * Optional function to determines the href string.
+   */
+  getItemHref?: (option: SkuOption) => string
+  /**
+   * Maps property value combinations to their respective SKU's slug
+   */
+  slugsMap: Record<string, string>
+  /**
+   * Function that returns a React component that will be used to render images.
+   */
+  ImageComponent?: FunctionComponent<{
+    src: string
+    alt: string
+  }>
+}
+
+const SkuSelector = forwardRef<HTMLDivElement, SkuSelectorProps>(
+  function SkuSelector(
+    {
+      availableVariations,
+      skuPropertyName,
+      testId,
+      activeVariations,
+      linkProps,
+      slugsMap,
+      getItemHref: getItemHrefProp,
+      ImageComponent = ImageComponentFallback,
+      variant: variantProp,
+      ...otherProps
+    },
+    ref
+  ) {
+    const activeSelectorValue = activeVariations[skuPropertyName]
+    const options = availableVariations[skuPropertyName]
+
+    const variant = useDefineVariant(options, variantProp)
+
+    const { getItemHref } = useSkuSlug(activeVariations, slugsMap, skuPropertyName, getItemHrefProp)
+
+    return (
+      <div
+        ref={ref}
+        data-fs-sku-selector
+        data-testid={testId}
+        data-fs-sku-selector-variant={variant}
+        {...otherProps}
+      >
+        {skuPropertyName && (
+          <Label data-fs-sku-selector-title>
+            {skuPropertyName}: <strong>{activeSelectorValue}</strong>
+          </Label>
+        )}
+        <ul data-fs-sku-selector-list>
+          {options.map((option, index) => {
+            return (
+              <li
+                key={String(index)}
+                title={option.label}
+                data-fs-sku-selector-option
+                data-fs-sku-selector-disabled={option.disabled}
+                data-fs-sku-selector-checked={
+                  option.value === activeVariations[skuPropertyName]
+                }
+              >
+                <Link
+                  data-fs-sku-selector-option-link
+                  href={getItemHref(option)}
+                  {...linkProps}
+                >
+                  <SROnly text={option.label} />
+                </Link>
+
+                {variant === 'label' && <span>{option.value}</span>}
+
+                {variant === 'image' && ImageComponent && (
+                  <span>
+                    <ImageComponent
+                      src={option.src ?? ''}
+                      alt={option.alt ?? ''}
+                      data-fs-sku-selector-option-image
+                    />
+                  </span>
+                )}
+
+                {variant === 'color' && (
+                  <span>
+                    <div
+                      data-fs-sku-selector-option-color
+                      title={option.value}
+                      style={
+                        {
+                          '--data-fs-sku-selector-option-color-bkg-color':
+                            option.hexColor,
+                        } as React.CSSProperties
+                      }
+                    ></div>
+                  </span>
+                )}
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    )
+  }
+)
+
+export default SkuSelector

package/src/molecules/SkuSelector/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './SkuSelector'
+export type { SkuSelectorProps, SkuOption } from './SkuSelector'

package/src/molecules/SkuSelector/useDefineVariant.ts

@@ -0,0 +1,36 @@
+import { useMemo } from 'react'
+import { SkuOption } from './SkuSelector'
+
+export type Variant = 'image' | 'color' | 'label'
+
+const getImageName = (src: string) => {
+  const sourcePath = new URL(src).pathname
+  const imageName = sourcePath.split('/').at(-1)
+  return imageName
+}
+
+export const useDefineVariant = (options: SkuOption[], variant?: Variant): Variant =>
+  useMemo(() => {
+    if(variant) return variant
+
+    const allOptionsHaveHexColor = options.every((option) => option.hexColor)
+    if (allOptionsHaveHexColor) {
+      return 'color'
+    }
+
+    const firstImageName = options[0]?.src && getImageName(options[0].src)
+
+    const areSourcesEqualsOrNull = options.every((option) => {
+      if (!option.src) {
+        return true
+      }
+      const optionImageName = getImageName(option.src)
+      return optionImageName === firstImageName
+    })
+
+    if (!areSourcesEqualsOrNull) {
+      return 'image'
+    }
+
+    return 'label'
+  }, [options, variant])

package/src/molecules/SkuSelector/useSkuSlug.ts

@@ -0,0 +1,49 @@
+import { useCallback } from 'react'
+import { SkuOption } from './SkuSelector'
+
+function getSkuSlug(
+  slugsMap: Record<string, string>,
+  selectedVariations: Record<string, string>,
+  dominantVariation: string
+) {
+  const slugsMapKey = Object.entries(selectedVariations).flat().join('-')
+
+  if (slugsMapKey in slugsMap) {
+    return slugsMap[slugsMapKey]
+  }
+
+  const possibleVariants = Object.keys(slugsMap)
+
+  const firstVariationForDominantValue = possibleVariants.find((slug) =>
+    slug.includes(
+      `${dominantVariation}-${selectedVariations[dominantVariation]}`
+    )
+  )
+
+  return slugsMap[firstVariationForDominantValue ?? possibleVariants[0]]
+}
+
+export const useSkuSlug = (
+  activeVariations: Record<string, string>,
+  slugsMap: Record<string, string>,
+  skuPropertyName: string,
+  getItemHrefProp?: (option: SkuOption) => string
+) => {
+  const getItemHref = useCallback(
+    (option: SkuOption) => {
+      if(getItemHrefProp) return { getItemHrefProp }
+
+      const currentItemHref = `/${getSkuSlug(
+        slugsMap,
+        {
+          ...activeVariations,
+          [skuPropertyName]: option.value,
+        },
+        skuPropertyName
+      )}/p`
+      return currentItemHref
+    },
+    [activeVariations, getItemHrefProp, slugsMap, skuPropertyName]
+  )
+  return { getItemHref }
+}