@rebuy/rebuy-hydrogen 3.0.0-beta.1 → 3.0.0-beta.10

package/package.json

@@ -1,35 +1,44 @@
 {
     "name": "@rebuy/rebuy-hydrogen",
+    "version": "3.0.0-beta.10",
     "description": "This is the default library for Rebuy + Shopify Hydrogen",
-    "version": "3.0.0-beta.1",
+    "homepage": "https://bitbucket.org/rebuyengine/npm-rebuy-hydrogen#readme",
+    "bugs": {
+        "url": "https://bitbucket.org/rebuyengine/npm-rebuy-hydrogen/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+ssh://git@bitbucket.org/rebuyengine/npm-rebuy-hydrogen.git"
+    },
     "license": "MIT",
     "author": "Rebuy, Inc.",
+    "type": "module",
     "main": "./dist/index.js",
     "module": "./dist/index.mjs",
     "types": "./dist/index.d.ts",
-    "type": "module",
-    "publishConfig": {
-        "access": "public"
-    },
     "files": [
         "dist",
-        "README.md",
-        "**/*.d.ts",
-        "**/*.ts",
-        "**/*.tsx"
+        "README.md"
     ],
     "scripts": {
-        "clean": "rm -rf dist",
-        "build:types": "tsc --emitDeclarationOnly --outDir dist",
-        "build:code": "node esbuild.config.mjs",
         "build": "npm run clean && npm run build:types && npm run build:code",
+        "build:code": "node esbuild.config.mjs",
+        "build:types": "tsc --emitDeclarationOnly --outDir dist",
         "build:watch": "npm run clean && npm run build:types && node esbuild.config.mjs --watch",
-        "format": "npm run lint -- --fix",
-        "lint": "eslint . --ext .js,.jsx,.json",
+        "check-types": "tsc --noEmit",
+        "clean": "rm -rf dist",
+        "deploy": "npm run build && npx semantic-release --debug --no-ci",
+        "deploy:dryrun": "npm run deploy -- --dry-run",
+        "dev": "npm run clean && concurrently \"npm run types:watch\" \"npm run build:watch\"",
+        "format": "npm run lint -- --fix && npm run lint:css -- --fix",
+        "lint": "eslint --ext .js,.jsx,.json,.mjs,.ts,.tsx ./src",
+        "lint:css": "stylelint './src/**/*.{css,scss}'",
+        "lint:css-skip-warn": "npm run lint:css -- --quiet",
+        "lint:skip-warn": "npm run lint -- --quiet",
         "prepare": "husky install",
+        "sort-package": "sort-package-json",
         "test": "echo \"Error: no test specified\" && exit 1",
-        "types:watch": "tsc --emitDeclarationOnly --outDir dist --watch",
-        "dev": "npm run clean && concurrently \"npm run types:watch\" \"npm run build:watch\""
+        "types:watch": "tsc --emitDeclarationOnly --outDir dist --watch"
     },
     "config": {
         "commitizen": {
@@ -39,25 +48,25 @@
             "config": ".cz-config.cjs"
         }
     },
-    "repository": {
-        "type": "git",
-        "url": "git+ssh://git@bitbucket.org/rebuyengine/npm-rebuy-hydrogen.git"
-    },
-    "bugs": {
-        "url": "https://bitbucket.org/rebuyengine/npm-rebuy-hydrogen/issues"
+    "dependencies": {
+        "@rebuy/rebuy": "^1.5.1",
+        "classnames": "^2.5.1",
+        "dompurify": "^3.2.5",
+        "lodash-es": "^4.17.21",
+        "zustand": "^5.0.4"
     },
-    "homepage": "https://bitbucket.org/rebuyengine/npm-rebuy-hydrogen#readme",
     "devDependencies": {
         "@commitlint/cli": "^19.8.0",
         "@commitlint/config-conventional": "^19.8.0",
         "@semantic-release/changelog": "^6.0.3",
         "@semantic-release/commit-analyzer": "^13.0.1",
         "@semantic-release/git": "^10.0.1",
-        "@semantic-release/npm": "^12.0.1",
         "@semantic-release/release-notes-generator": "^14.0.3",
         "@shopify/hydrogen": ">=2025.0.1",
         "@shopify/hydrogen-react": ">=2025.0.1",
-        "@types/react": "^18.0.0",
+        "@types/dompurify": "^3.0.5",
+        "@types/lodash-es": "^4.17.12",
+        "@types/react": "^18.3.3",
         "@types/three": "^0.175.0",
         "@typescript-eslint/eslint-plugin": "^8.26.1",
         "@typescript-eslint/parser": "^8.26.1",
@@ -68,33 +77,36 @@
         "esbuild": "0.25.2",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^10.1.1",
+        "eslint-import-resolver-typescript": "^4.3.4",
         "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-jsdoc": "^50.2.4",
         "eslint-plugin-json": "^4.0.1",
         "eslint-plugin-prettier": "^5.2.3",
         "eslint-plugin-react": "^7.37.4",
-        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-react-hooks": "^4.6.2",
         "eslint-plugin-sort-destructure-keys": "^2.0.0",
         "eslint-plugin-sort-keys": "^2.3.5",
         "eslint-plugin-typescript-sort-keys": "^3.3.0",
+        "eslint-plugin-unused-imports": "^4.1.4",
         "husky": "^9.1.7",
         "lint-staged": "^15.5.0",
         "prettier": "^3.5.2",
-        "react": "^18.0.0",
+        "react": "^18.3.1",
         "semantic-release": "^24.2.3",
+        "sort-package-json": "^2.10.0",
+        "stylelint": "^16.19.1",
+        "stylelint-config-css-modules": "^4.4.0",
+        "stylelint-config-standard": "^36.0.1",
         "typescript": "^5.8.2"
     },
-    "dependencies": {
-        "@rebuy/rebuy": "^1.5.1"
-    },
     "peerDependencies": {
         "@remix-run/react": ">=2.10.0",
         "@shopify/hydrogen": ">=2025.0.1",
-        "@shopify/hydrogen-react": ">=2025.0.1"
+        "@shopify/hydrogen-react": ">=2025.0.1",
+        "react": ">=18.2.0",
+        "react-dom": ">=18.2.0"
     },
-    "lint-staged": {
-        "**/*.{js,jsx,json}": [
-            "npm run format",
-            "prettier --write"
-        ]
+    "publishConfig": {
+        "access": "public"
     }
 }

package/src/components/AddToCartBtn/AddToCartBtn.tsx

@@ -1,45 +0,0 @@
-import { HydrogenAddToCartBtn } from './HydrogenAddToCartBtn';
-import { HydrogenReactAddToCartBtn } from './HydrogenReactAddToCartBtn';
-
-import type { AddToCartBtnProps } from '~/components/AddToCartBtn/types';
-
-export const AddToCartBtn = ({
-    addToCartBtnText,
-    addToCartCallback,
-    disabled,
-    isHydrogenReact,
-    moneyData,
-    selectedVariants,
-}: AddToCartBtnProps) => {
-    const linesToAdd = selectedVariants.map((variant) => ({
-        attributes: [
-            { key: '_source', value: 'Rebuy' },
-            { key: '_attribution', value: 'Rebuy Product Recommendations' },
-        ],
-        merchandiseId: variant.id,
-        quantity: 1,
-        selectedVariant: variant,
-    }));
-
-    if (isHydrogenReact) {
-        return (
-            <HydrogenReactAddToCartBtn
-                addToCartBtnText={addToCartBtnText}
-                addToCartCallback={addToCartCallback}
-                disabled={disabled}
-                linesToAdd={linesToAdd}
-                moneyData={moneyData}
-            />
-        );
-    }
-
-    return (
-        <HydrogenAddToCartBtn
-            addToCartBtnText={addToCartBtnText}
-            addToCartCallback={addToCartCallback}
-            disabled={disabled}
-            linesToAdd={linesToAdd}
-            moneyData={moneyData}
-        />
-    );
-};

package/src/components/AddToCartBtn/HydrogenAddToCartBtn.tsx

@@ -1,43 +0,0 @@
-import { type FetcherWithComponents } from '@remix-run/react';
-import { CartForm, Money } from '@shopify/hydrogen';
-
-import styles from './AddToCartBtn.module.css';
-
-import type { btnProps } from '~/components/AddToCartBtn/types';
-
-export const HydrogenAddToCartBtn = ({
-    addToCartBtnText,
-    addToCartCallback,
-    disabled,
-    linesToAdd,
-    moneyData,
-}: btnProps) => {
-    return (
-        <CartForm
-            action={CartForm.ACTIONS.LinesAdd}
-            inputs={{
-                lines: linesToAdd,
-            }}
-            route="/cart"
-        >
-            {(fetcher: FetcherWithComponents<unknown>) => (
-                <>
-                    <button
-                        className={styles.button}
-                        disabled={disabled || fetcher.state !== 'idle'}
-                        onClick={addToCartCallback}
-                        type="submit"
-                    >
-                        {addToCartBtnText}
-                        {moneyData && (
-                            <>
-                                <span> | </span>
-                                <Money data={moneyData} withoutTrailingZeros />
-                            </>
-                        )}
-                    </button>
-                </>
-            )}
-        </CartForm>
-    );
-};

package/src/components/AddToCartBtn/HydrogenReactAddToCartBtn.tsx

@@ -1,35 +0,0 @@
-import { Money, useCart } from '@shopify/hydrogen-react';
-
-import styles from './AddToCartBtn.module.css';
-
-import type { btnProps } from '~/components/AddToCartBtn/types';
-
-export const HydrogenReactAddToCartBtn = ({
-    addToCartBtnText,
-    addToCartCallback,
-    disabled,
-    linesToAdd,
-    moneyData,
-}: btnProps) => {
-    const { linesAdd } = useCart();
-    const handleAddToCart = () => {
-        linesAdd(linesToAdd);
-        addToCartCallback?.();
-    };
-    return (
-        <button
-            className={styles.button}
-            disabled={disabled}
-            onClick={handleAddToCart}
-            type="button"
-        >
-            {addToCartBtnText}
-            {moneyData && (
-                <>
-                    <span> | </span>
-                    <Money data={moneyData} withoutTrailingZeros />
-                </>
-            )}
-        </button>
-    );
-};

package/src/components/AddToCartBtn/index.ts

@@ -1 +0,0 @@
-export * from './AddToCartBtn';

package/src/components/ProductCard/ProductCard.tsx

@@ -1,70 +0,0 @@
-import { Link } from '@remix-run/react';
-import { Image } from '@shopify/hydrogen';
-import { useState } from 'react';
-
-import styles from './ProductCard.module.css';
-
-import type { ProductCardProps } from '~/components/ProductCard/types';
-import type { RebuyProduct } from '~/types/rebuyCustom';
-
-import { AddToCartBtn } from '~/components/AddToCartBtn';
-import { RebuyProductPrice } from '~/components/ProductPrice/ProductPrice';
-import { Title } from '~/components/Title';
-import { VariantSelect } from '~/components/VariantSelect';
-
-export const ProductCard = ({
-    addToCartBtnText,
-    addToCartCallback,
-    isHydrogenReact,
-    product,
-    productCardTitleLevel,
-}: ProductCardProps) => {
-    const [selectedVariant, setSelectedVariant] = useState(
-        product.variants.nodes[0]
-    );
-
-    const { image } = selectedVariant;
-    const handleSelectedVariant = (
-        product: RebuyProduct,
-        variant_id: string
-    ) => {
-        const updatedVariant = product.variants.nodes.find(
-            (variant) => variant.id === variant_id
-        );
-        if (updatedVariant) {
-            setSelectedVariant(updatedVariant);
-        }
-    };
-    return (
-        <div className={styles.container}>
-            <div>
-                <Link to={`/products/${product.handle}`}>
-                    <Image
-                        alt={image?.altText ?? `Picture of ${product.title}`}
-                        data={image}
-                        sizes="(max-width: 320px) 280px, (max-width: 768px) 720px, 1440px"
-                    />
-                </Link>
-                <div className={styles.productInfo}>
-                    <Link to={`/products/${product.handle}`}>
-                        <Title
-                            level={productCardTitleLevel}
-                            text={product.title}
-                        />
-                    </Link>
-                    <RebuyProductPrice selectedVariant={selectedVariant} />
-                    <VariantSelect
-                        handleSelectedVariant={handleSelectedVariant}
-                        product={product}
-                    />
-                </div>
-            </div>
-            <AddToCartBtn
-                addToCartBtnText={addToCartBtnText}
-                addToCartCallback={addToCartCallback}
-                isHydrogenReact={isHydrogenReact}
-                selectedVariants={[selectedVariant]}
-            />
-        </div>
-    );
-};

package/src/components/ProductCard/index.ts

@@ -1 +0,0 @@
-export * from './ProductCard';

package/src/components/ProductPrice/ProductPrice.tsx

@@ -1,49 +0,0 @@
-import { Money } from '@shopify/hydrogen';
-
-import styles from './ProductPrice.module.css';
-
-import type { MoneyV2 } from '@shopify/hydrogen-react/storefront-api-types';
-import type { RebuyProductVariant } from '~/types/rebuyCustom';
-
-export const RebuyProductPrice = ({
-    selectedVariant,
-}: {
-    selectedVariant: RebuyProductVariant;
-}) => {
-    if (!selectedVariant) return null;
-    const { compareAtPriceV2: compareAtPrice, priceV2: price } =
-        selectedVariant;
-
-    const isDiscounted = (
-        price: MoneyV2 | null,
-        compareAtPrice: MoneyV2 | null
-    ) => Number(compareAtPrice?.amount) > Number(price?.amount);
-
-    const CompareAtPrice = ({
-        data: compareAtPrice,
-    }: {
-        data: MoneyV2 | null;
-    }) => {
-        return (
-            compareAtPrice && (
-                <Money
-                    as="span"
-                    className={styles.compareAtPrice}
-                    data={compareAtPrice}
-                    withoutTrailingZeros
-                />
-            )
-        );
-    };
-
-    return (
-        price && (
-            <div className={styles.priceContainer}>
-                <Money data={price} withoutTrailingZeros />
-                {compareAtPrice && isDiscounted(price, compareAtPrice) && (
-                    <CompareAtPrice data={compareAtPrice} />
-                )}
-            </div>
-        )
-    );
-};

package/src/components/ProductPrice/index.ts

@@ -1 +0,0 @@
-export * from './ProductPrice';

package/src/components/Title/Title.tsx

@@ -1,20 +0,0 @@
-import type { TitleProps } from '~/components/Title/types';
-
-export const Title = ({ level, style, text }: TitleProps) => {
-    switch (level) {
-        case 'h1':
-            return <h1 style={style}>{text}</h1>;
-        case 'h2':
-            return <h2 style={style}>{text}</h2>;
-        case 'h3':
-            return <h3 style={style}>{text}</h3>;
-        case 'h4':
-            return <h4 style={style}>{text}</h4>;
-        case 'h5':
-            return <h5 style={style}>{text}</h5>;
-        case 'h6':
-            return <h6 style={style}>{text}</h6>;
-        default:
-            return <h2 style={style}>{text}</h2>;
-    }
-};

package/src/components/Title/index.ts

@@ -1 +0,0 @@
-export * from './Title';

package/src/components/VariantSelect/VariantSelect.tsx

@@ -1,45 +0,0 @@
-import styles from './VariantSelect.module.css';
-
-import type { VariantSelectProps } from '~/components/VariantSelect/types';
-import type { RebuyProduct } from '~/types/rebuyCustom';
-
-export const VariantSelect = ({
-    handleSelectedVariant,
-    product,
-}: VariantSelectProps) => {
-    const getOptionsLabel = (product: RebuyProduct) => {
-        const options = product.variants.nodes[0].selectedOptions;
-        const optionsFromKeys = options ? Object.keys(options[0]) : [];
-        const optionsFromValues = options
-            ? options.map((option) => option.name)
-            : [];
-        const useValues = optionsFromKeys.every((key) =>
-            ['name', 'value'].includes(key)
-        );
-
-        // Return delimited label for available option(s) e.g. Color / Size, Scent, etc
-        return (useValues ? optionsFromValues : optionsFromKeys).join(' / ');
-    };
-
-    return (
-        product?.variants.nodes.length > 1 && (
-            <div>
-                <select
-                    aria-label="select variant"
-                    className={styles.select}
-                    onChange={(e) =>
-                        handleSelectedVariant(product, e.target.value)
-                    }
-                >
-                    <optgroup label={getOptionsLabel(product)}>
-                        {product.variants.nodes.map(({ id, title }) => (
-                            <option key={id + '-variant'} value={id}>
-                                {title}
-                            </option>
-                        ))}
-                    </optgroup>
-                </select>
-            </div>
-        )
-    );
-};

package/src/components/VariantSelect/index.ts

@@ -1 +0,0 @@
-export * from './VariantSelect';

package/src/hooks/titleLevel.tsx

@@ -1,42 +0,0 @@
-import { ProductCardTitleLevel } from '~/types/common';
-
-// Convert the string header level to enum
-export const getTitleLevel = (
-    level: string,
-    decreaseLevel: boolean = false
-): ProductCardTitleLevel => {
-    switch (level) {
-        case 'h1':
-            if (decreaseLevel) {
-                return ProductCardTitleLevel.H2;
-            }
-            return ProductCardTitleLevel.H1;
-        case 'h2':
-            if (decreaseLevel) {
-                return ProductCardTitleLevel.H3;
-            }
-            return ProductCardTitleLevel.H2;
-        case 'h3':
-            if (decreaseLevel) {
-                return ProductCardTitleLevel.H4;
-            }
-            return ProductCardTitleLevel.H3;
-        case 'h4':
-            if (decreaseLevel) {
-                return ProductCardTitleLevel.H5;
-            }
-            return ProductCardTitleLevel.H4;
-        case 'h5':
-            if (decreaseLevel) {
-                return ProductCardTitleLevel.H6;
-            }
-            return ProductCardTitleLevel.H5;
-        case 'h6':
-            if (decreaseLevel) {
-                return ProductCardTitleLevel.H6;
-            }
-            return ProductCardTitleLevel.H6;
-        default:
-            return ProductCardTitleLevel.H2;
-    }
-};

package/src/providers/RebuyHydrogenContextProvider.tsx

@@ -1,112 +0,0 @@
-import * as Utilities from '@rebuy/rebuy/utilities';
-import { Await, useLocation } from '@remix-run/react';
-import { useEffect, useMemo, useState } from 'react';
-
-import type { CartReturn } from '@shopify/hydrogen';
-import type {
-    RebuyHydrogenContextProviderProps,
-    RebuyHydrogenProps,
-} from '~/providers/types';
-
-import { RebuyContext } from '~/context/RebuyContext';
-import { RebuyConfig } from '~/types/rebuyCustom';
-import { createContextParameters } from '~/utils/createContextParameters';
-import { getRebuyConfig } from '~/utils/getRebuyConfig';
-
-const RebuyHydrogenContext = ({
-    cartAttributes,
-    cartCost,
-    cartId,
-    cartLines,
-    cartNote,
-    cartQuantity,
-    children,
-}: RebuyHydrogenProps) => {
-    const primaryDomain = import.meta.env.PRIMARY_DOMAIN;
-    const rebuyKey = import.meta.env.PUBLIC_REBUY_API_KEY;
-    const storeDomain = import.meta.env.PUBLIC_STORE_DOMAIN;
-
-    const [rebuyConfig, setRebuyConfig] = useState<RebuyConfig | null>(null);
-    const location = useLocation();
-    const queryObject = Utilities.queryStringToObject(location.search);
-    const windowUrl = `${primaryDomain}${location.pathname}${location.search}`;
-
-    // Initialization
-    useEffect(() => {
-        const initConfig = async () => {
-            const config = await getRebuyConfig(rebuyKey, storeDomain);
-            setRebuyConfig(config);
-        };
-
-        if (!rebuyConfig?.shop) {
-            initConfig();
-        }
-    }, [rebuyConfig, rebuyKey, storeDomain]);
-
-    const contextParameters = useMemo(
-        () =>
-            createContextParameters({
-                cacheKey: rebuyConfig?.shop?.cache_key,
-                cartAttributes,
-                cartId,
-                cartLines,
-                cartLinesLength: cartLines?.length,
-                cartNote: cartNote as string,
-                cartSubtotal: cartCost,
-                cartTotalQuantity: cartQuantity,
-                isHydrogenReact: false,
-                queryObject,
-                windowUrl,
-            }),
-        [
-            rebuyConfig,
-            windowUrl,
-            queryObject,
-            cartAttributes,
-            cartCost,
-            cartId,
-            cartLines,
-            cartQuantity,
-            cartNote,
-        ]
-    );
-
-    // Static reference (JSON) + memoization
-    // ^ prevent re-rendering children when context params are unchanged
-    const contextParametersJSON = JSON.stringify(contextParameters);
-    const contextValue = useMemo(
-        () => ({ contextParameters: JSON.parse(contextParametersJSON) }),
-        [contextParametersJSON]
-    );
-
-    return (
-        <RebuyContext.Provider value={contextValue}>
-            {children}
-        </RebuyContext.Provider>
-    );
-};
-
-export const RebuyHydrogenContextProvider = ({
-    cart,
-    children,
-}: RebuyHydrogenContextProviderProps) => {
-    return (
-        <Await resolve={cart}>
-            {(resolvedCart) => {
-                const cart = resolvedCart as CartReturn;
-                return (
-                    <RebuyHydrogenContext
-                        cartAttributes={cart?.attributes}
-                        cartCost={cart?.cost?.subtotalAmount?.amount}
-                        cartId={cart?.id}
-                        cartLines={cart?.lines?.nodes}
-                        cartNote={cart?.note}
-                        cartQuantity={cart?.totalQuantity}
-                    >
-                        {children}
-                    </RebuyHydrogenContext>
-                );
-            }}
-        </Await>
-    );
-};