From eb146738b91ab084cc87ae8e0edf06b3e93e9bec Mon Sep 17 00:00:00 2001 From: Alessandro Casazza Date: Tue, 28 Jan 2025 11:07:11 +0100 Subject: [PATCH 1/4] Add new exports, add biomejs, and update deps --- .eslintrc.json | 7 - biome.json | 142 ++ package.json | 93 +- packages/docs/.eslintignore | 1 - packages/docs/.eslintrc.cjs | 19 - packages/docs/.storybook/preview.tsx | 2 +- packages/docs/package.json | 136 +- .../docs/stories/_internals/OrderStorage.tsx | 152 +- .../docs/stories/_internals/useGetToken.ts | 2 +- .../stories/cart/AddToCartButton.stories.tsx | 304 ++-- .../getting-started/005.containers.mdx | 2 +- packages/react-components/package.json | 428 +++--- .../specs/hooks/useCommerceLayer.spec.tsx | 124 +- .../specs/hooks/useOrderContainer.spec.tsx | 106 +- .../src/components/ExternalFunction.tsx | 2 +- .../src/components/MetadataInput.tsx | 4 +- .../src/components/SubmitButton.tsx | 4 +- .../src/components/addresses/Address.tsx | 10 +- .../addresses/AddressCountrySelector.tsx | 2 +- .../src/components/addresses/AddressField.tsx | 6 +- .../src/components/addresses/AddressInput.tsx | 2 +- .../addresses/AddressInputSelect.tsx | 2 +- .../addresses/AddressStateSelector.tsx | 6 +- .../addresses/AddressesContainer.tsx | 4 +- .../components/addresses/AddressesEmpty.tsx | 2 +- .../addresses/BillingAddressForm.tsx | 8 +- .../addresses/SaveAddressesButton.tsx | 8 +- .../addresses/ShippingAddressForm.tsx | 8 +- .../customers/CustomerAddressForm.tsx | 14 +- .../customers/CustomerContainer.tsx | 8 +- .../components/customers/CustomerField.tsx | 2 +- .../components/customers/CustomerInput.tsx | 6 +- .../customers/CustomerPaymentSource.tsx | 4 +- .../customers/CustomerPaymentSourceEmpty.tsx | 2 +- .../components/customers/MyAccountLink.tsx | 4 +- .../components/customers/MyIdentityLink.tsx | 4 +- .../customers/SaveCustomerButton.tsx | 4 +- .../src/components/errors/Errors.tsx | 2 +- .../src/components/gift_cards/GiftCard.tsx | 4 +- .../gift_cards/GiftCardCurrencySelector.tsx | 2 +- .../components/gift_cards/GiftCardInput.tsx | 2 +- .../gift_cards/GiftCardOrCouponCode.tsx | 2 +- .../gift_cards/GiftCardOrCouponForm.tsx | 2 +- .../gift_cards/GiftCardOrCouponInput.tsx | 4 +- .../GiftCardOrCouponRemoveButton.tsx | 6 +- .../gift_cards/GiftCardOrCouponSubmit.tsx | 4 +- .../InStockSubscriptionButton.tsx | 4 +- .../InStockSubscriptionsContainer.tsx | 2 +- .../components/line_items/LineItemAmount.tsx | 2 +- .../components/line_items/LineItemCode.tsx | 4 +- .../components/line_items/LineItemField.tsx | 2 +- .../components/line_items/LineItemImage.tsx | 4 +- .../components/line_items/LineItemName.tsx | 2 +- .../components/line_items/LineItemOption.tsx | 4 +- .../line_items/LineItemQuantity.tsx | 6 +- .../line_items/LineItemRemoveLink.tsx | 6 +- .../components/line_items/LineItemsCount.tsx | 2 +- .../components/line_items/LineItemsEmpty.tsx | 2 +- .../src/components/orders/AddToCartButton.tsx | 12 +- .../components/orders/AdjustmentAmount.tsx | 2 +- .../src/components/orders/CartLink.tsx | 4 +- .../src/components/orders/CheckoutLink.tsx | 4 +- .../src/components/orders/DiscountAmount.tsx | 2 +- .../src/components/orders/GiftCardAmount.tsx | 2 +- .../src/components/orders/HostedCart.tsx | 9 +- .../src/components/orders/OrderContainer.tsx | 12 +- .../src/components/orders/OrderList.tsx | 10 +- .../src/components/orders/OrderListEmpty.tsx | 2 +- .../orders/OrderListPaginationButtons.tsx | 2 +- .../orders/OrderListPaginationInfo.tsx | 2 +- .../src/components/orders/OrderStorage.tsx | 2 +- .../components/orders/PaymentMethodAmount.tsx | 2 +- .../components/orders/PlaceOrderButton.tsx | 22 +- .../src/components/orders/ShippingAmount.tsx | 2 +- .../src/components/orders/SubTotalAmount.tsx | 2 +- .../src/components/orders/TaxesAmount.tsx | 2 +- .../src/components/orders/TotalAmount.tsx | 2 +- .../src/components/parcels/ParcelField.tsx | 2 +- .../parcels/ParcelLineItemField.tsx | 2 +- .../parcels/ParcelLineItemsCount.tsx | 2 +- .../src/components/parcels/ParcelsCount.tsx | 2 +- .../payment_gateways/AdyenGateway.tsx | 6 +- .../payment_gateways/BraintreeGateway.tsx | 6 +- .../payment_gateways/CheckoutComGateway.tsx | 4 +- .../payment_gateways/ExternalGateway.tsx | 4 +- .../payment_gateways/KlarnaGateway.tsx | 2 +- .../payment_gateways/PaymentGateway.tsx | 12 +- .../payment_gateways/PaypalGateway.tsx | 4 +- .../payment_gateways/StripeGateway.tsx | 4 +- .../payment_gateways/WireTransferGateway.tsx | 2 +- .../payment_methods/PaymentMethod.tsx | 6 +- .../payment_methods/PaymentMethodName.tsx | 2 +- .../payment_methods/PaymentMethodPrice.tsx | 2 +- .../PaymentMethodRadioButton.tsx | 6 +- .../PaymentMethodsContainer.tsx | 4 +- .../payment_source/AdyenPayment.tsx | 1024 +++++++------- .../payment_source/BraintreePayment.tsx | 10 +- .../payment_source/CheckoutComPayment.tsx | 8 +- .../payment_source/ExternalPayment.tsx | 4 +- .../payment_source/KlarnaPayment.tsx | 6 +- .../payment_source/PaymentSource.tsx | 6 +- .../payment_source/PaymentSourceBrandIcon.tsx | 2 +- .../payment_source/PaymentSourceBrandName.tsx | 2 +- .../PaymentSourceEditButton.tsx | 2 +- .../payment_source/StripeExpressPayment.tsx | 4 +- .../payment_source/StripePayment.tsx | 20 +- .../src/components/prices/Price.tsx | 4 +- .../src/components/prices/PricesContainer.tsx | 4 +- .../src/components/shipments/Shipment.tsx | 2 +- .../components/shipments/ShipmentField.tsx | 2 +- .../shipments/ShipmentsContainer.tsx | 4 +- .../components/shipments/ShipmentsCount.tsx | 2 +- .../shipping_methods/ShippingMethodName.tsx | 2 +- .../shipping_methods/ShippingMethodPrice.tsx | 2 +- .../ShippingMethodRadioButton.tsx | 2 +- .../components/skus/AvailabilityContainer.tsx | 2 +- .../components/skus/AvailabilityTemplate.tsx | 4 +- .../src/components/skus/SkuField.tsx | 2 +- .../src/components/skus/SkuListsContainer.tsx | 2 +- .../src/components/skus/SkusContainer.tsx | 2 +- .../stock_transfers/StockTransfer.tsx | 6 +- .../stock_transfers/StockTransferField.tsx | 2 +- .../components/utils/AddressCardsTemplate.tsx | 2 +- .../src/components/utils/BaseInput.tsx | 2 +- .../src/components/utils/BaseOrderPrice.tsx | 4 +- .../src/components/utils/BaseSelect.tsx | 2 +- .../utils/GenericFieldComponent.tsx | 12 +- .../src/components/utils/Parent.tsx | 2 +- .../components/utils/PaymentCardsTemplate.tsx | 6 +- .../src/components/utils/PriceTemplate.tsx | 2 +- .../src/components/utils/getAllErrors.tsx | 6 +- .../src/context/AddressChildrenContext.ts | 2 +- .../src/context/AddressContext.ts | 2 +- .../src/context/BillingAddressContext.ts | 2 +- .../context/CouponAndGiftCardFormContext.ts | 6 +- .../src/context/CustomerAddressFormContext.ts | 8 +- .../src/context/CustomerContext.ts | 22 +- .../context/CustomerPaymentSourceContext.ts | 2 +- .../src/context/GiftCardContext.ts | 2 +- .../src/context/InStockSubscriptionContext.ts | 6 +- .../src/context/LineItemChildrenContext.ts | 2 +- .../src/context/LineItemContext.ts | 4 +- .../src/context/OrderContext.ts | 4 +- .../src/context/OrderListChildrenContext.ts | 4 +- .../context/PaymentMethodChildrenContext.ts | 2 +- .../src/context/ShippingAddressContext.ts | 2 +- .../src/context/ShippingAddressFormContext.ts | 2 +- .../context/ShippingMethodChildrenContext.ts | 2 +- .../src/context/SkuChildrenContext.ts | 2 +- .../src/context/SkuContext.ts | 2 +- .../context/StockTransferChildrenContext.ts | 2 +- .../src/hooks/useCommerceLayer.ts | 2 +- .../src/hooks/useCustomerContainer.ts | 6 +- .../src/hooks/useOrderContainer.ts | 8 +- packages/react-components/src/index.ts | 2 +- .../src/reducers/AddressReducer.ts | 18 +- .../src/reducers/AvailabilityReducer.ts | 10 +- .../src/reducers/BillingAddressReducer.ts | 8 +- .../src/reducers/CustomerReducer.ts | 8 +- .../src/reducers/GiftCardReducer.ts | 28 +- .../reducers/InStockSubscriptionReducer.ts | 8 +- .../src/reducers/LineItemReducer.ts | 12 +- .../src/reducers/OrderReducer.ts | 12 +- .../src/reducers/PaymentMethodReducer.ts | 44 +- .../src/reducers/PlaceOrderReducer.ts | 6 +- .../src/reducers/PriceReducer.ts | 10 +- .../src/reducers/ShipmentReducer.ts | 18 +- .../src/reducers/ShippingAddressReducer.ts | 8 +- .../src/reducers/SkuListsReducer.ts | 4 +- .../src/reducers/SkuReducer.ts | 8 +- .../react-components/src/typings/errors.ts | 2 +- .../react-components/src/typings/index.ts | 4 +- .../src/utils/addressesManager.ts | 18 +- .../react-components/src/utils/baseReducer.ts | 2 +- .../src/utils/canPlaceOrder.ts | 2 +- .../src/utils/checkIncludeResource.ts | 2 +- .../src/utils/customMessages.ts | 2 +- .../src/utils/expressPaymentHelper.ts | 18 +- .../src/utils/filterChildren.ts | 2 +- .../react-components/src/utils/formCleaner.ts | 2 +- .../src/utils/getCardDetails.ts | 10 +- .../react-components/src/utils/getErrors.ts | 4 +- .../src/utils/getLoaderComponent.tsx | 2 +- .../src/utils/getPaymentAttributes.ts | 6 +- .../react-components/src/utils/getPrices.tsx | 2 +- packages/react-components/src/utils/getSdk.ts | 2 +- .../react-components/src/utils/getSkus.ts | 2 +- .../src/utils/hasSubscriptions.ts | 2 +- .../src/utils/organization.ts | 16 +- .../payment-methods/sortPaymentMethods.ts | 4 +- .../react-components/src/utils/shipments.ts | 2 +- .../src/utils/triggerAttributeHelper.ts | 4 +- ...eOrderSubscriptionCustomerPaymentSource.ts | 10 +- .../src/utils/validateFormFields.ts | 10 +- pnpm-lock.yaml | 1258 +++++++++++------ 195 files changed, 2560 insertions(+), 2169 deletions(-) delete mode 100644 .eslintrc.json create mode 100644 biome.json delete mode 100644 packages/docs/.eslintignore delete mode 100644 packages/docs/.eslintrc.cjs diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index e106ae13..00000000 --- a/.eslintrc.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": ["@commercelayer/eslint-config-ts-react"], - "rules": { - "@typescript-eslint/prefer-nullish-coalescing": "off", - "@typescript-eslint/strict-boolean-expressions": "off" - } -} diff --git a/biome.json b/biome.json new file mode 100644 index 00000000..7268d8de --- /dev/null +++ b/biome.json @@ -0,0 +1,142 @@ +{ + "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", + "vcs": { "enabled": false, "clientKind": "git", "useIgnoreFile": false }, + "files": { "ignoreUnknown": false, "ignore": [] }, + "formatter": { "enabled": true, "indentStyle": "tab" }, + "organizeImports": { "enabled": true }, + "linter": { + "enabled": true, + "rules": { + "recommended": false, + "a11y": { "noBlankTarget": "error" }, + "complexity": { + "noBannedTypes": "error", + "noExtraBooleanCast": "error", + "noMultipleSpacesInRegularExpressionLiterals": "error", + "noStaticOnlyClass": "error", + "noUselessCatch": "error", + "noUselessConstructor": "error", + "noUselessLoneBlockStatements": "error", + "noUselessRename": "error", + "noUselessTernary": "error", + "noUselessThisAlias": "error", + "noUselessTypeConstraint": "error", + "noUselessUndefinedInitialization": "error", + "noVoid": "error", + "noWith": "error", + "useLiteralKeys": "error", + "useOptionalChain": "error", + "useRegexLiterals": "error" + }, + "correctness": { + "noChildrenProp": "error", + "noConstAssign": "error", + "noConstantCondition": "error", + "noEmptyCharacterClassInRegex": "error", + "noEmptyPattern": "error", + "noGlobalObjectCalls": "error", + "noInvalidConstructorSuper": "error", + "noInvalidUseBeforeDeclaration": "error", + "noNewSymbol": "error", + "noPrecisionLoss": "error", + "noSelfAssign": "error", + "noSwitchDeclarations": "error", + "noUndeclaredVariables": "off", + "noUnreachable": "error", + "noUnreachableSuper": "error", + "noUnsafeFinally": "error", + "noUnusedVariables": "error", + "useArrayLiterals": "off", + "useIsNan": "error", + "useJsxKeyInIterable": "error" + }, + "security": { + "noDangerouslySetInnerHtmlWithChildren": "error", + "noGlobalEval": "error" + }, + "style": { + "noCommaOperator": "error", + "noImplicitBoolean": "error", + "noNamespace": "error", + "noNonNullAssertion": "error", + "noVar": "warn", + "noYodaExpression": "error", + "useBlockStatements": "off", + "useConsistentArrayType": { + "level": "error", + "options": { "syntax": "shorthand" } + }, + "useConsistentBuiltinInstantiation": "error", + "useConst": "error", + "useExportType": "error", + "useFragmentSyntax": "error", + "useImportType": "error", + "useNamingConvention": { + "level": "off", + "options": { + "strictCase": false, + "conventions": [ + { + "selector": { "kind": "variable" }, + "match": "_?([^_]*)_?", + "formats": ["camelCase", "PascalCase", "CONSTANT_CASE"] + }, + { + "selector": { "kind": "function" }, + "match": "_?([^_]*)_?", + "formats": ["camelCase", "PascalCase", "CONSTANT_CASE"] + }, + { + "selector": { "kind": "functionParameter" }, + "match": "_?([^_]*)_?", + "formats": ["camelCase", "PascalCase", "CONSTANT_CASE"] + } + ] + } + }, + "useShorthandFunctionType": "error", + "useSingleVarDeclarator": "error", + "useThrowOnlyError": "off" + }, + "suspicious": { + "noAssignInExpressions": "error", + "noAsyncPromiseExecutor": "error", + "noCatchAssign": "error", + "noClassAssign": "error", + "noCommentText": "error", + "noCompareNegZero": "error", + "noConfusingLabels": "error", + "noConfusingVoidType": "error", + "noControlCharactersInRegex": "error", + "noDebugger": "error", + "noDoubleEquals": "error", + "noDuplicateCase": "error", + "noDuplicateClassMembers": "error", + "noDuplicateJsxProps": "error", + "noDuplicateObjectKeys": "error", + "noDuplicateParameters": "error", + "noEmptyBlockStatements": "error", + "noEmptyInterface": "error", + "noExtraNonNullAssertion": "error", + "noFallthroughSwitchClause": "error", + "noFunctionAssign": "error", + "noGlobalAssign": "error", + "noImportAssign": "error", + "noMisleadingCharacterClass": "error", + "noMisleadingInstantiator": "error", + "noPrototypeBuiltins": "error", + "noRedeclare": "error", + "noSelfCompare": "error", + "noShadowRestrictedNames": "error", + "noSparseArray": "error", + "noUnsafeNegation": "error", + "useDefaultSwitchClauseLast": "error", + "useValidTypeof": "error" + } + } + }, + "javascript": { + "formatter": { "quoteStyle": "double" }, + "globals": ["document", "navigator", "window"] + } +} diff --git a/package.json b/package.json index 7a4fbb46..88af50e4 100644 --- a/package.json +++ b/package.json @@ -1,48 +1,47 @@ { - "name": "root", - "private": true, - "author": { - "name": "Alessandro Casazza", - "email": "alessandro@commercelayer.io" - }, - "scripts": { - "preinstall": "npx only-allow pnpm", - "build": "pnpm -r build", - "prepare": "husky", - "test": "pnpm -r test", - "docs:dev": "pnpm --filter docs storybook", - "docs:build": "pnpm --filter docs build-storybook", - "components:build:dev": "pnpm --filter react-components build:dev", - "components:build": "pnpm --filter react-components build", - "make:version": "lerna version --no-private", - "make:version:force": "lerna version --no-private --force-publish", - "dep:major": "pnpm dlx npm-check-updates --packageFile '**/package.json' -u -i", - "dep:minor": "pnpm dep:major -t minor -i" - }, - "devDependencies": { - "@commercelayer/eslint-config-ts-react": "^1.4.5", - "husky": "^9.1.7", - "lerna": "^8.1.9", - "typescript": "^5.7.2" - }, - "pnpm": { - "overrides": { - "postcss@<8.4.31": ">=8.4.31", - "graphql@>=16.3.0 <16.8.1": ">=16.8.1", - "vite@>=4.4.0 <4.4.12": ">=4.4.12", - "@babel/traverse@<7.23.2": ">=7.23.2", - "vite@>=4.0.0 <=4.5.1": ">=4.5.2", - "follow-redirects@<1.15.4": ">=1.15.4", - "express@<4.19.2": ">=4.19.2", - "vite@>=5.1.0 <=5.1.6": ">=5.1.7", - "tar@<6.2.1": ">=6.2.1", - "ejs@<3.1.10": ">=3.1.10", - "braces@<3.0.3": ">=3.0.3", - "ws@>=8.0.0 <8.17.1": ">=8.17.1", - "micromatch@<4.0.8": ">=4.0.8", - "rollup@>=4.0.0 <4.22.4": ">=4.22.4", - "cross-spawn@>=7.0.0 <7.0.5": ">=7.0.5", - "@eslint/plugin-kit@<0.2.3": ">=0.2.3" - } - } -} \ No newline at end of file + "name": "root", + "private": true, + "author": { + "name": "Alessandro Casazza", + "email": "alessandro@commercelayer.io" + }, + "scripts": { + "preinstall": "npx only-allow pnpm", + "build": "pnpm -r build", + "prepare": "husky", + "test": "pnpm -r test", + "docs:dev": "pnpm --filter docs storybook", + "docs:build": "pnpm --filter docs build-storybook", + "components:build:dev": "pnpm --filter react-components build:dev", + "components:build": "pnpm --filter react-components build", + "make:version": "lerna version --no-private", + "make:version:force": "lerna version --no-private --force-publish", + "dep:major": "pnpm dlx npm-check-updates --packageFile '**/package.json' -u -i", + "dep:minor": "pnpm dep:major -t minor -i" + }, + "devDependencies": { + "@biomejs/biome": "1.9.4", + "husky": "^9.1.7", + "lerna": "^8.1.9", + "typescript": "^5.7.2" + }, + "pnpm": { + "overrides": { + "postcss@<8.4.31": ">=8.4.31", + "graphql@>=16.3.0 <16.8.1": ">=16.8.1", + "vite@>=4.4.0 <4.4.12": ">=4.4.12", + "@babel/traverse@<7.23.2": ">=7.23.2", + "vite@>=4.0.0 <=4.5.1": ">=4.5.2", + "follow-redirects@<1.15.4": ">=1.15.4", + "express@<4.19.2": ">=4.19.2", + "vite@>=5.1.0 <=5.1.6": ">=5.1.7", + "tar@<6.2.1": ">=6.2.1", + "ejs@<3.1.10": ">=3.1.10", + "braces@<3.0.3": ">=3.0.3", + "ws@>=8.0.0 <8.17.1": ">=8.17.1", + "micromatch@<4.0.8": ">=4.0.8", + "rollup@>=4.0.0 <4.22.4": ">=4.22.4", + "cross-spawn@>=7.0.0 <7.0.5": ">=7.0.5" + } + } +} diff --git a/packages/docs/.eslintignore b/packages/docs/.eslintignore deleted file mode 100644 index 608841ff..00000000 --- a/packages/docs/.eslintignore +++ /dev/null @@ -1 +0,0 @@ -!.storybook diff --git a/packages/docs/.eslintrc.cjs b/packages/docs/.eslintrc.cjs deleted file mode 100644 index fce6708a..00000000 --- a/packages/docs/.eslintrc.cjs +++ /dev/null @@ -1,19 +0,0 @@ -// eslint-disable-next-line @typescript-eslint/no-var-requires -const path = require('path') - -/** @type {import('eslint').Linter.Config} */ -module.exports = { - extends: [ - '@commercelayer/eslint-config-ts-react', - 'plugin:storybook/recommended' - ], - parser: '@typescript-eslint/parser', - parserOptions: { - project: path.resolve(__dirname, 'tsconfig.json'), - ecmaFeatures: { - jsx: true - }, - ecmaVersion: 12, - sourceType: 'module' - } -} diff --git a/packages/docs/.storybook/preview.tsx b/packages/docs/.storybook/preview.tsx index 807ce4eb..a1fc5851 100644 --- a/packages/docs/.storybook/preview.tsx +++ b/packages/docs/.storybook/preview.tsx @@ -76,7 +76,7 @@ if (typeof global.process === 'undefined') { // Start the mocking when each story is loaded. // Repetitive calls to the `.start()` method do not register a new worker, // but check whether there's an existing once, reusing it, if so. - void worker.start({ + worker.start({ serviceWorker: { url: `${import.meta.env.BASE_URL}mockServiceWorker.js` }, diff --git a/packages/docs/package.json b/packages/docs/package.json index d0b3892c..011fd6c5 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,70 +1,68 @@ { - "private": true, - "name": "docs", - "version": "1.0.0", - "devDependencies": { - "@babel/core": "^7.26.0", - "@babel/preset-env": "^7.26.0", - "@commercelayer/eslint-config-ts-react": "^1.3.0", - "@commercelayer/js-auth": "^6.3.1", - "@commercelayer/sdk": "^6.9.0", - "@mdx-js/react": "^3.0.1", - "@storybook/addon-actions": "^7.6.17", - "@storybook/addon-backgrounds": "^7.6.17", - "@storybook/addon-docs": "^7.6.17", - "@storybook/addon-essentials": "^7.6.17", - "@storybook/addon-interactions": "^7.6.17", - "@storybook/addon-links": "^7.6.17", - "@storybook/addon-mdx-gfm": "^7.6.17", - "@storybook/addon-measure": "^7.6.17", - "@storybook/addon-outline": "^7.6.17", - "@storybook/addons": "^7.6.17", - "@storybook/api": "^7.6.17", - "@storybook/blocks": "^7.6.17", - "@storybook/client-api": "^7.6.17", - "@storybook/client-logger": "^7.6.17", - "@storybook/manager-api": "^7.6.17", - "@storybook/node-logger": "^8.4.2", - "@storybook/react": "^7.6.17", - "@storybook/react-vite": "^7.6.17", - "@storybook/testing-library": "^0.2.2", - "@storybook/theming": "^7.6.17", - "@types/js-cookie": "^3.0.6", - "@types/react": "^18.3.3", - "@vitejs/plugin-react": "^4.2.1", - "babel-loader": "^9.1.2", - "eslint": "^8.57.1", - "eslint-plugin-storybook": "^0.8.0", - "js-cookie": "^3.0.5", - "jwt-decode": "^4.0.0", - "msw": "^2.6.4", - "prop-types": "^15.8.1", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "storybook": "^7.6.17", - "type-fest": "^4.10.3", - "typescript": "^5.3.3", - "vite": "^5.4.11", - "vite-tsconfig-paths": "^4.3.1" - }, - "scripts": { - "lint": "eslint src --ext .ts,.tsx", - "lint:fix": "eslint src --ext .ts,.tsx --fix", - "storybook": "storybook dev -s ./public -p 6006", - "build-storybook": "storybook build -s public -o dist" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/commercelayer/commercelayer-react-components.git" - }, - "keywords": [], - "author": "Alessandro Casazza", - "license": "ISC", - "bugs": { - "url": "https://github.com/commercelayer/commercelayer-react-components/issues" - }, - "homepage": "https://github.com/commercelayer/commercelayer-react-components#readme", - "msw": { - "workerDirectory": "public" - } -} \ No newline at end of file + "private": true, + "name": "docs", + "version": "1.0.0", + "devDependencies": { + "@babel/core": "^7.26.0", + "@babel/preset-env": "^7.26.0", + "@commercelayer/eslint-config-ts-react": "^1.3.0", + "@commercelayer/js-auth": "^6.3.1", + "@commercelayer/sdk": "^6.9.0", + "@mdx-js/react": "^3.0.1", + "@storybook/addon-actions": "^7.6.17", + "@storybook/addon-backgrounds": "^7.6.17", + "@storybook/addon-docs": "^7.6.17", + "@storybook/addon-essentials": "^7.6.17", + "@storybook/addon-interactions": "^7.6.17", + "@storybook/addon-links": "^7.6.17", + "@storybook/addon-mdx-gfm": "^7.6.17", + "@storybook/addon-measure": "^7.6.17", + "@storybook/addon-outline": "^7.6.17", + "@storybook/addons": "^7.6.17", + "@storybook/api": "^7.6.17", + "@storybook/blocks": "^7.6.17", + "@storybook/client-api": "^7.6.17", + "@storybook/client-logger": "^7.6.17", + "@storybook/manager-api": "^7.6.17", + "@storybook/node-logger": "^8.4.2", + "@storybook/react": "^7.6.17", + "@storybook/react-vite": "^7.6.17", + "@storybook/testing-library": "^0.2.2", + "@storybook/theming": "^7.6.17", + "@types/js-cookie": "^3.0.6", + "@types/react": "^18.3.3", + "@vitejs/plugin-react": "^4.2.1", + "babel-loader": "^9.1.2", + "js-cookie": "^3.0.5", + "jwt-decode": "^4.0.0", + "msw": "^2.6.4", + "prop-types": "^15.8.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "storybook": "^7.6.17", + "type-fest": "^4.10.3", + "typescript": "^5.3.3", + "vite": "^5.4.11", + "vite-tsconfig-paths": "^4.3.1" + }, + "scripts": { + "lint": "eslint src --ext .ts,.tsx", + "lint:fix": "eslint src --ext .ts,.tsx --fix", + "storybook": "storybook dev -s ./public -p 6006", + "build-storybook": "storybook build -s public -o dist" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/commercelayer/commercelayer-react-components.git" + }, + "keywords": [], + "author": "Alessandro Casazza", + "license": "ISC", + "bugs": { + "url": "https://github.com/commercelayer/commercelayer-react-components/issues" + }, + "homepage": "https://github.com/commercelayer/commercelayer-react-components#readme", + "msw": { + "workerDirectory": "public" + } +} diff --git a/packages/docs/stories/_internals/OrderStorage.tsx b/packages/docs/stories/_internals/OrderStorage.tsx index 6478ffe6..41df3c7b 100644 --- a/packages/docs/stories/_internals/OrderStorage.tsx +++ b/packages/docs/stories/_internals/OrderStorage.tsx @@ -1,96 +1,96 @@ /* eslint-disable @typescript-eslint/no-misused-promises */ -import OrderStorageComponent from '#components/orders/OrderStorage' -import useCommerceLayer from '#hooks/useCommerceLayer' -import { useState, useEffect } from 'react' -import useOrderContainer from '#hooks/useOrderContainer' -import { type CommerceLayerClient } from '@commercelayer/sdk' +import OrderStorageComponent from "#components/orders/OrderStorage"; +import useCommerceLayer from "#hooks/useCommerceLayer"; +import { useState, useEffect } from "react"; +import useOrderContainer from "#hooks/useOrderContainer"; +import type { CommerceLayerClient } from "@commercelayer/sdk"; export const OrderStorage = ({ - persistKey, - children + persistKey, + children, }: { - persistKey: string - children: React.ReactNode + persistKey: string; + children: React.ReactNode; }): JSX.Element => { - const [orderId, setOrderId] = useState(localStorage.getItem(persistKey)) - const { sdkClient, accessToken } = useCommerceLayer() - const cl = - accessToken != null && accessToken !== '' && sdkClient != null - ? sdkClient() - : undefined + const [orderId, setOrderId] = useState(localStorage.getItem(persistKey)); + const { sdkClient, accessToken } = useCommerceLayer(); + const cl = + accessToken != null && accessToken !== "" && sdkClient != null + ? sdkClient() + : undefined; - useEffect(() => { - if (cl != null && orderId == null) { - void createOrderWithItems(cl).then((orderId) => { - setOrderId(orderId) - localStorage.setItem(persistKey, orderId) - }) - } - }, [cl, persistKey]) + useEffect(() => { + if (cl != null && orderId == null) { + createOrderWithItems(cl).then((orderId) => { + setOrderId(orderId); + localStorage.setItem(persistKey, orderId); + }); + } + }, [cl, persistKey]); - if (cl == null || orderId == null) { - return
- } + if (cl == null || orderId == null) { + return
; + } - return ( - - {children} - - ) -} + return ( + + {children} + + ); +}; export const AddSampleItems = (): JSX.Element => { - const { sdkClient, accessToken } = useCommerceLayer() - const { order, addToCart } = useOrderContainer() - const cl = accessToken != null && accessToken !== '' && sdkClient() + const { sdkClient, accessToken } = useCommerceLayer(); + const { order, addToCart } = useOrderContainer(); + const cl = accessToken != null && accessToken !== "" && sdkClient(); - if (cl == null || cl === false || order == null) return
loading...
+ if (cl == null || cl === false || order == null) return
loading...
; - return ( -
-

Cart is empty

- -
- ) -} + return ( +
+

Cart is empty

+ +
+ ); +}; async function createOrderWithItems(cl: CommerceLayerClient): Promise { - const order = await cl.orders.create({ - language_code: 'en' - }) - await fillOrder(order.id, cl) - return order.id + const order = await cl.orders.create({ + language_code: "en", + }); + await fillOrder(order.id, cl); + return order.id; } async function fillOrder( - orderId: string, - cl: CommerceLayerClient + orderId: string, + cl: CommerceLayerClient, ): Promise { - await cl.line_items.create({ - item_type: 'skus', - sku_code: '5PANECAP9D9CA1FFFFFFXXXX', - quantity: 2, - order: cl.orders.relationship(orderId) - }) + await cl.line_items.create({ + item_type: "skus", + sku_code: "5PANECAP9D9CA1FFFFFFXXXX", + quantity: 2, + order: cl.orders.relationship(orderId), + }); - await cl.line_items.create({ - item_type: 'skus', - sku_code: 'BACKPACK000000FFFFFFXXXX', - quantity: 3, - order: cl.orders.relationship(orderId) - }) + await cl.line_items.create({ + item_type: "skus", + sku_code: "BACKPACK000000FFFFFFXXXX", + quantity: 3, + order: cl.orders.relationship(orderId), + }); } diff --git a/packages/docs/stories/_internals/useGetToken.ts b/packages/docs/stories/_internals/useGetToken.ts index 1134d4c7..966dd14f 100644 --- a/packages/docs/stories/_internals/useGetToken.ts +++ b/packages/docs/stories/_internals/useGetToken.ts @@ -75,7 +75,7 @@ export function useGetToken( accessToken === '' || isTokenExpired({ accessToken, compareTo: new Date() }) ) { - void initToken() + initToken() } }, [accessToken]) diff --git a/packages/docs/stories/cart/AddToCartButton.stories.tsx b/packages/docs/stories/cart/AddToCartButton.stories.tsx index 45564343..876bfae7 100644 --- a/packages/docs/stories/cart/AddToCartButton.stories.tsx +++ b/packages/docs/stories/cart/AddToCartButton.stories.tsx @@ -1,93 +1,93 @@ -import { type Meta, type StoryFn, type StoryObj } from '@storybook/react' -import CommerceLayer from '../_internals/CommerceLayer' -import OrderContainerComponent from '#components/orders/OrderContainer' -import { AddToCartButton } from '#components/orders/AddToCartButton' -import OrderStorage from '#components/orders/OrderStorage' -import LineItemsContainer from '#components/line_items/LineItemsContainer' -import Errors from '#components/errors/Errors' -import LineItemName from '#components/line_items/LineItemName' -import LineItem from '#components/line_items/LineItem' -import LineItemQuantity from '#components/line_items/LineItemQuantity' -import LineItemRemoveLink from '#components/line_items/LineItemRemoveLink' -import LineItemsEmpty from '#components/line_items/LineItemsEmpty' -import AvailabilityContainer from '#components/skus/AvailabilityContainer' -import AvailabilityTemplate from '#components/skus/AvailabilityTemplate' -import { SkusContainer } from '#components/skus/SkusContainer' -import Skus from '#components/skus/Skus' +import type { Meta, StoryFn, StoryObj } from "@storybook/react"; +import CommerceLayer from "../_internals/CommerceLayer"; +import OrderContainerComponent from "#components/orders/OrderContainer"; +import { AddToCartButton } from "#components/orders/AddToCartButton"; +import OrderStorage from "#components/orders/OrderStorage"; +import LineItemsContainer from "#components/line_items/LineItemsContainer"; +import Errors from "#components/errors/Errors"; +import LineItemName from "#components/line_items/LineItemName"; +import LineItem from "#components/line_items/LineItem"; +import LineItemQuantity from "#components/line_items/LineItemQuantity"; +import LineItemRemoveLink from "#components/line_items/LineItemRemoveLink"; +import LineItemsEmpty from "#components/line_items/LineItemsEmpty"; +import AvailabilityContainer from "#components/skus/AvailabilityContainer"; +import AvailabilityTemplate from "#components/skus/AvailabilityTemplate"; +import { SkusContainer } from "#components/skus/SkusContainer"; +import Skus from "#components/skus/Skus"; const setup: Meta = { - title: 'Components/Cart/AddToCartButton', - component: AddToCartButton -} + title: "Components/Cart/AddToCartButton", + component: AddToCartButton, +}; -export default setup +export default setup; const Template: StoryFn = (args) => { - return ( - - - - - - - - ) -} + return ( + + + + + + + + ); +}; -export const AddSku = Template.bind({}) +export const AddSku = Template.bind({}); AddSku.args = { - skuCode: 'SWEATWCX000000FFFFFFXSXX', - label: 'Add SKU to cart', - quantity: '2', - className: 'px-3 py-2 bg-black text-white rounded disabled:opacity-50' -} + skuCode: "SWEATWCX000000FFFFFFXSXX", + label: "Add SKU to cart", + quantity: "2", + className: "px-3 py-2 bg-black text-white rounded disabled:opacity-50", +}; -export const AddBundle = Template.bind({}) +export const AddBundle = Template.bind({}); AddBundle.args = { - bundleCode: 'BUNDLE001', - label: 'Add bundle to cart', - quantity: '2', - className: 'px-3 py-2 bg-black text-white rounded disabled:opacity-50' -} + bundleCode: "BUNDLE001", + label: "Add bundle to cart", + quantity: "2", + className: "px-3 py-2 bg-black text-white rounded disabled:opacity-50", +}; /** * You can combine components and contexts to render an `` within a `` context * and get available quantity from the `` to control the button disable state. */ export const DisabledWhenOutOfStock: StoryObj = () => { - return ( - - - - - - - - {(childrenProps) => { - return ( -
- Quantity available: {childrenProps.quantity} - -
- ) - }} -
-
-
-
-
-
-
- ) -} + return ( + + + + + + + + {(childrenProps) => { + return ( +
+ Quantity available: {childrenProps.quantity} + +
+ ); + }} +
+
+
+
+
+
+
+ ); +}; -DisabledWhenOutOfStock.args = {} +DisabledWhenOutOfStock.args = {}; /** * The add to cart button will automatically create a new `line_item` (or update an existing one), but it is also possible to @@ -100,25 +100,25 @@ DisabledWhenOutOfStock.args = {} * */ export const UseCustomAttributesOrExternalPrice: StoryObj = () => { - return ( - - - - - - - - ) -} -UseCustomAttributesOrExternalPrice.args = {} + return ( + + + + + + + + ); +}; +UseCustomAttributesOrExternalPrice.args = {}; /** * You can access the component children props to customize the button or use a different tag. @@ -127,68 +127,68 @@ UseCustomAttributesOrExternalPrice.args = {} * and show an alert with the `orderId` when the operation is successful. */ export const ChildrenProps: StoryObj = () => { - return ( - - {(childrenProps) => { - return ( -
{ - void childrenProps.handleClick().then(({ orderId, success }) => { - if (success) { - alert(`item added to cart with orderId ${orderId}`) - } - }) - }} - > - Add to cart -
- ) - }} -
- ) -} + return ( + + {(childrenProps) => { + return ( +
{ + childrenProps.handleClick().then(({ orderId, success }) => { + if (success) { + alert(`item added to cart with orderId ${orderId}`); + } + }); + }} + > + Add to cart +
+ ); + }} +
+ ); +}; ChildrenProps.decorators = [ - (Story) => { - return ( - - - - - - - - ) - } -] + (Story) => { + return ( + + + + + + + + ); + }, +]; // Fake OrderContainer to show a cart recap block but keep it hidden in the documentation source code const OrderContainer: React.FC<{ children: React.ReactNode }> = ({ - children + children, }) => { - return ( - - <>{children} + return ( + + <>{children} -
- - -
- {(['skus', 'bundles'] as const).map((type) => ( - -
-
- - - -
- - ))} -
- - -
- - ) -} +
+ + +
+ {(["skus", "bundles"] as const).map((type) => ( + +
+
+ + + +
+ + ))} +
+ + +
+ + ); +}; diff --git a/packages/docs/stories/getting-started/005.containers.mdx b/packages/docs/stories/getting-started/005.containers.mdx index 1d2ec454..b3d44fee 100644 --- a/packages/docs/stories/getting-started/005.containers.mdx +++ b/packages/docs/stories/getting-started/005.containers.mdx @@ -14,7 +14,7 @@ As example the `` component needs to be wrapped inside the `` will not render any HTML since it just holds the data for the `` component. -To avoid multiple requests to the API, the library uses a cache system that stores the data in React contexts that we refer as containers.
+To amultiple requests to the API, the library uses a cache system that stores the data in React contexts that we refer as containers.
Less re-rendering of those containers means better performance and less requests to the API.
diff --git a/packages/react-components/package.json b/packages/react-components/package.json index fd080ae6..ff51c7a1 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -1,227 +1,205 @@ { - "name": "@commercelayer/react-components", - "version": "4.18.0", - "description": "The Official Commerce Layer React Components", - "main": "lib/cjs/index.js", - "module": "lib/esm/index.js", - "types": "lib/esm/index.d.ts", - "files": [ - "lib", - "package.json", - "README.md" - ], - "exports": { - ".": { - "require": "./lib/cjs/index.js", - "import": "./lib/esm/index.js" - }, - "./addresses/*": { - "require": "./lib/cjs/components/addresses/*.js", - "import": "./lib/esm/components/addresses/*.js" - }, - "./auth/*": { - "require": "./lib/cjs/components/auth/*.js", - "import": "./lib/esm/components/auth/*.js" - }, - "./customers/*": { - "require": "./lib/cjs/components/customers/*.js", - "import": "./lib/esm/components/customers/*.js" - }, - "./errors/*": { - "require": "./lib/cjs/components/errors/*.js", - "import": "./lib/esm/components/errors/*.js" - }, - "./gift_cards/*": { - "require": "./lib/cjs/components/gift_cards/*.js", - "import": "./lib/esm/components/gift_cards/*.js" - }, - "./in_stock_subscriptions/*": { - "require": "./lib/cjs/components/in_stock_subscriptions/*.js", - "import": "./lib/esm/components/in_stock_subscriptions/*.js" - }, - "./hooks/*": { - "require": "./lib/cjs/hooks/*.js", - "import": "./lib/esm/hooks/*.js" - }, - "./line_items/*": { - "require": "./lib/cjs/components/line_items/*.js", - "import": "./lib/esm/components/line_items/*.js" - }, - "./orders/*": { - "require": "./lib/cjs/components/orders/*.js", - "import": "./lib/esm/components/orders/*.js" - }, - "./parcels/*": { - "require": "./lib/cjs/components/parcels/*.js", - "import": "./lib/esm/components/parcels/*.js" - }, - "./payment_methods/*": { - "require": "./lib/cjs/components/payment_methods/*.js", - "import": "./lib/esm/components/payment_methods/*.js" - }, - "./payment_source/*": { - "require": "./lib/cjs/components/payment_source/*.js", - "import": "./lib/esm/components/payment_source/*.js" - }, - "./prices/*": { - "require": "./lib/cjs/components/prices/*.js", - "import": "./lib/esm/components/prices/*.js" - }, - "./shipments/*": { - "require": "./lib/cjs/components/shipments/*.js", - "import": "./lib/esm/components/shipments/*.js" - }, - "./shipping_methods/*": { - "require": "./lib/cjs/components/shipping_methods/*.js", - "import": "./lib/esm/components/shipping_methods/*.js" - }, - "./skus/*": { - "require": "./lib/cjs/components/skus/*.js", - "import": "./lib/esm/components/skus/*.js" - }, - "./stock_transfers/*": { - "require": "./lib/cjs/components/stock_transfers/*.js", - "import": "./lib/esm/components/stock_transfers/*.js" - } - }, - "typesVersions": { - "*": { - "addresses/*": [ - "lib/esm/components/addresses/*.d.ts" - ], - "auth/*": [ - "lib/esm/components/auth/*.d.ts" - ], - "customers/*": [ - "lib/esm/components/customers/*.d.ts" - ], - "errors/*": [ - "lib/esm/components/errors/*.d.ts" - ], - "gift_cards/*": [ - "lib/esm/components/gift_cards/*.d.ts" - ], - "in_stock_subscriptions/*": [ - "lib/esm/components/in_stock_subscriptions/*.d.ts" - ], - "hooks/*": [ - "lib/esm/hooks/*.d.ts" - ], - "line_items/*": [ - "lib/esm/components/line_items/*.d.ts" - ], - "orders/*": [ - "lib/esm/components/orders/*.d.ts" - ], - "parcels/*": [ - "lib/esm/components/parcels/*.d.ts" - ], - "payment_methods/*": [ - "lib/esm/components/payment_methods/*.d.ts" - ], - "payment_source/*": [ - "lib/esm/components/payment_source/*.d.ts" - ], - "prices/*": [ - "lib/esm/components/prices/*.d.ts" - ], - "shipments/*": [ - "lib/esm/components/shipments/*.d.ts" - ], - "shipping_methods/*": [ - "lib/esm/components/shipping_methods/*.d.ts" - ], - "skus/*": [ - "lib/esm/components/skus/*.d.ts" - ], - "stock_transfers/*": [ - "lib/esm/components/stock_transfers/*.d.ts" - ] - } - }, - "publishConfig": { - "access": "public" - }, - "scripts": { - "lint": "eslint src --ext .ts,.tsx", - "lint:fix": "eslint src --ext .ts,.tsx --fix", - "test": "pnpm audit --audit-level high && (pnpm audit || exit 0) && pnpm lint && vitest run --silent", - "coverage": "vitest run --coverage", - "test:e2e": "NODE_ENV=test playwright test", - "test:e2e:coverage": "nyc pnpm test:e2e && pnpm coverage:report", - "coverage:report": "nyc report --reporter=html", - "build": "tsc -b tsconfig.prod.json tsconfig.prod.esm.json --verbose && pnpm postbuild", - "build:dev": "tsc -b tsconfig.prod.json tsconfig.prod.esm.json --verbose && tsc-alias -p tsconfig.prod.json && tsc-alias -p tsconfig.prod.esm.json", - "postbuild": "tsc-alias -p tsconfig.prod.json && tsc-alias -p tsconfig.prod.esm.json && minimize-js lib -w -s -b '\"use client\";'", - "dev": "NODE_OPTIONS='--inspect' next dev" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/commercelayer/commercelayer-react-components.git" - }, - "keywords": [ - "reactjs", - "jamstack", - "headless", - "ecommerce", - "api", - "react-components", - "commercelayer" - ], - "author": { - "name": "Alessandro Casazza", - "email": "alessandro@commercelayer.io" - }, - "license": "MIT", - "bugs": { - "url": "https://github.com/commercelayer/commercelayer-react-components/issues" - }, - "homepage": "https://github.com/commercelayer/commercelayer-react-components#readme", - "dependencies": { - "@adyen/adyen-web": "^6.6.0", - "@commercelayer/organization-config": "^1.4.12", - "@commercelayer/sdk": "^6.27.0", - "@stripe/react-stripe-js": "^3.1.1", - "@stripe/stripe-js": "^5.3.0", - "@tanstack/react-table": "^8.20.6", - "@types/iframe-resizer": "^3.5.13", - "braintree-web": "^3.113.0", - "frames-react": "^1.2.2", - "iframe-resizer": "^4.3.6", - "jwt-decode": "^4.0.0", - "lodash": "^4.17.21", - "rapid-form": "2.1.0" - }, - "devDependencies": { - "@commercelayer/js-auth": "^6.7.0", - "@faker-js/faker": "^9.3.0", - "@playwright/test": "^1.49.1", - "@testing-library/dom": "^10.4.0", - "@testing-library/react": "^16.1.0", - "@types/braintree-web": "^3.96.16", - "@types/lodash": "^4.17.13", - "@types/node": "^22.10.2", - "@types/prop-types": "^15.7.14", - "@types/react": "^18.3.1", - "@types/react-test-renderer": "^18.3.1", - "@types/react-window": "^1.8.8", - "@vitejs/plugin-react": "^4.3.4", - "@vitest/coverage-v8": "^2.1.8", - "eslint": "^8.57.0", - "jsdom": "^25.0.1", - "minimize-js": "^1.4.0", - "msw": "^2.7.0", - "react": "^18.3.1", - "react-dom": "^18.3.1", - "react-test-renderer": "^18.3.1", - "tsc-alias": "^1.8.10", - "tslib": "^2.8.1", - "typescript": "^5.7.2", - "vite": "^6.0.3", - "vite-tsconfig-paths": "^5.1.4", - "vitest": "^2.1.8" - }, - "peerDependencies": { - "react": ">=18.0.0" - } + "name": "@commercelayer/react-components", + "version": "4.18.0", + "description": "The Official Commerce Layer React Components", + "main": "lib/cjs/index.js", + "module": "lib/esm/index.js", + "types": "lib/esm/index.d.ts", + "files": ["lib", "package.json", "README.md"], + "exports": { + ".": { + "require": "./lib/cjs/index.js", + "import": "./lib/esm/index.js" + }, + "./addresses/*": { + "require": "./lib/cjs/components/addresses/*.js", + "import": "./lib/esm/components/addresses/*.js" + }, + "./auth/*": { + "require": "./lib/cjs/components/auth/*.js", + "import": "./lib/esm/components/auth/*.js" + }, + "./customers/*": { + "require": "./lib/cjs/components/customers/*.js", + "import": "./lib/esm/components/customers/*.js" + }, + "./errors/*": { + "require": "./lib/cjs/components/errors/*.js", + "import": "./lib/esm/components/errors/*.js" + }, + "./gift_cards/*": { + "require": "./lib/cjs/components/gift_cards/*.js", + "import": "./lib/esm/components/gift_cards/*.js" + }, + "./in_stock_subscriptions/*": { + "require": "./lib/cjs/components/in_stock_subscriptions/*.js", + "import": "./lib/esm/components/in_stock_subscriptions/*.js" + }, + "./hooks/*": { + "require": "./lib/cjs/hooks/*.js", + "import": "./lib/esm/hooks/*.js" + }, + "./line_items/*": { + "require": "./lib/cjs/components/line_items/*.js", + "import": "./lib/esm/components/line_items/*.js" + }, + "./orders/*": { + "require": "./lib/cjs/components/orders/*.js", + "import": "./lib/esm/components/orders/*.js" + }, + "./parcels/*": { + "require": "./lib/cjs/components/parcels/*.js", + "import": "./lib/esm/components/parcels/*.js" + }, + "./payment_methods/*": { + "require": "./lib/cjs/components/payment_methods/*.js", + "import": "./lib/esm/components/payment_methods/*.js" + }, + "./payment_source/*": { + "require": "./lib/cjs/components/payment_source/*.js", + "import": "./lib/esm/components/payment_source/*.js" + }, + "./prices/*": { + "require": "./lib/cjs/components/prices/*.js", + "import": "./lib/esm/components/prices/*.js" + }, + "./shipments/*": { + "require": "./lib/cjs/components/shipments/*.js", + "import": "./lib/esm/components/shipments/*.js" + }, + "./shipping_methods/*": { + "require": "./lib/cjs/components/shipping_methods/*.js", + "import": "./lib/esm/components/shipping_methods/*.js" + }, + "./skus/*": { + "require": "./lib/cjs/components/skus/*.js", + "import": "./lib/esm/components/skus/*.js" + }, + "./stock_transfers/*": { + "require": "./lib/cjs/components/stock_transfers/*.js", + "import": "./lib/esm/components/stock_transfers/*.js" + }, + "./context/*": { + "require": "./lib/cjs/context/*.js", + "import": "./lib/esm/context/*.js" + }, + "./utils/*": { + "require": "./lib/cjs/utils/*.js", + "import": "./lib/esm/utils/*.js" + }, + "./component_utils/*": { + "require": "./lib/cjs/components/utils/*.js", + "import": "./lib/esm/components/utils/*.js" + } + }, + "typesVersions": { + "*": { + "addresses/*": ["lib/esm/components/addresses/*.d.ts"], + "auth/*": ["lib/esm/components/auth/*.d.ts"], + "customers/*": ["lib/esm/components/customers/*.d.ts"], + "errors/*": ["lib/esm/components/errors/*.d.ts"], + "gift_cards/*": ["lib/esm/components/gift_cards/*.d.ts"], + "in_stock_subscriptions/*": [ + "lib/esm/components/in_stock_subscriptions/*.d.ts" + ], + "hooks/*": ["lib/esm/hooks/*.d.ts"], + "line_items/*": ["lib/esm/components/line_items/*.d.ts"], + "orders/*": ["lib/esm/components/orders/*.d.ts"], + "parcels/*": ["lib/esm/components/parcels/*.d.ts"], + "payment_methods/*": ["lib/esm/components/payment_methods/*.d.ts"], + "payment_source/*": ["lib/esm/components/payment_source/*.d.ts"], + "prices/*": ["lib/esm/components/prices/*.d.ts"], + "shipments/*": ["lib/esm/components/shipments/*.d.ts"], + "shipping_methods/*": ["lib/esm/components/shipping_methods/*.d.ts"], + "skus/*": ["lib/esm/components/skus/*.d.ts"], + "stock_transfers/*": ["lib/esm/components/stock_transfers/*.d.ts"], + "context/*": ["lib/esm/context/*.d.ts"], + "utils/*": ["lib/esm/utils/*.d.ts"], + "component_utils/*": ["lib/esm/components/utils/*.d.ts"] + } + }, + "publishConfig": { + "access": "public" + }, + "scripts": { + "lint": "eslint src --ext .ts,.tsx", + "lint:fix": "eslint src --ext .ts,.tsx --fix", + "test": "pnpm audit --audit-level high && (pnpm audit || exit 0) && pnpm lint && vitest run --silent", + "coverage": "vitest run --coverage", + "test:e2e": "NODE_ENV=test playwright test", + "test:e2e:coverage": "nyc pnpm test:e2e && pnpm coverage:report", + "coverage:report": "nyc report --reporter=html", + "build": "tsc -b tsconfig.prod.json tsconfig.prod.esm.json --verbose && pnpm postbuild", + "build:dev": "tsc -b tsconfig.prod.json tsconfig.prod.esm.json --verbose && tsc-alias -p tsconfig.prod.json && tsc-alias -p tsconfig.prod.esm.json", + "postbuild": "tsc-alias -p tsconfig.prod.json && tsc-alias -p tsconfig.prod.esm.json && minimize-js lib -w -s -b '\"use client\";'", + "dev": "NODE_OPTIONS='--inspect' next dev" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/commercelayer/commercelayer-react-components.git" + }, + "keywords": [ + "reactjs", + "jamstack", + "headless", + "ecommerce", + "api", + "react-components", + "commercelayer" + ], + "author": { + "name": "Alessandro Casazza", + "email": "alessandro@commercelayer.io" + }, + "license": "MIT", + "bugs": { + "url": "https://github.com/commercelayer/commercelayer-react-components/issues" + }, + "homepage": "https://github.com/commercelayer/commercelayer-react-components#readme", + "dependencies": { + "@adyen/adyen-web": "^6.6.0", + "@commercelayer/organization-config": "^1.4.12", + "@commercelayer/sdk": "^6.27.0", + "@stripe/react-stripe-js": "^3.1.1", + "@stripe/stripe-js": "^5.3.0", + "@tanstack/react-table": "^8.20.6", + "@types/iframe-resizer": "^3.5.13", + "braintree-web": "^3.113.0", + "frames-react": "^1.2.2", + "iframe-resizer": "^4.3.6", + "jwt-decode": "^4.0.0", + "lodash": "^4.17.21", + "rapid-form": "2.1.0" + }, + "devDependencies": { + "@commercelayer/js-auth": "^6.7.0", + "@faker-js/faker": "^9.3.0", + "@playwright/test": "^1.49.1", + "@testing-library/dom": "^10.4.0", + "@testing-library/react": "^16.1.0", + "@types/braintree-web": "^3.96.16", + "@types/lodash": "^4.17.13", + "@types/node": "^22.10.2", + "@types/prop-types": "^15.7.14", + "@types/react": "^18.3.1", + "@types/react-test-renderer": "^18.3.1", + "@types/react-window": "^1.8.8", + "@vitejs/plugin-react": "^4.3.4", + "@vitest/coverage-v8": "^2.1.8", + "jsdom": "^25.0.1", + "minimize-js": "^1.4.0", + "msw": "^2.7.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-test-renderer": "^18.3.1", + "tsc-alias": "^1.8.10", + "tslib": "^2.8.1", + "typescript": "^5.7.2", + "vite": "^6.0.3", + "vite-tsconfig-paths": "^5.1.4", + "vitest": "^2.1.8" + }, + "peerDependencies": { + "react": ">=18.0.0" + } } diff --git a/packages/react-components/specs/hooks/useCommerceLayer.spec.tsx b/packages/react-components/specs/hooks/useCommerceLayer.spec.tsx index 9a49377f..24611619 100644 --- a/packages/react-components/specs/hooks/useCommerceLayer.spec.tsx +++ b/packages/react-components/specs/hooks/useCommerceLayer.spec.tsx @@ -1,66 +1,66 @@ -import CommerceLayer from '#components/auth/CommerceLayer' -import { render, renderHook, waitFor, screen } from '@testing-library/react' -import { useEffect, useState } from 'react' -import useCommerceLayer from 'src/hooks/useCommerceLayer' -import getToken from '../utils/getToken' -import { type SkusContext } from 'specs/utils/context' +import CommerceLayer from "#components/auth/CommerceLayer"; +import { render, renderHook, waitFor, screen } from "@testing-library/react"; +import { useEffect, useState } from "react"; +import useCommerceLayer from "src/hooks/useCommerceLayer"; +import getToken from "../utils/getToken"; +import type { SkusContext } from "specs/utils/context"; function HookComponent(): JSX.Element { - const ctx = useCommerceLayer() - const [sku, setSku] = useState() - useEffect(() => { - if (ctx.sdkClient != null && sku == null) { - void ctx - .sdkClient() - ?.skus.list({ filters: { code_eq: 'BABYONBU000000E63E7412MX' } }) - .then((res) => { - if (res.first() != null) { - setSku(res.first()?.code) - } - }) - } - return () => { - setSku(undefined) - } - }, [ctx.accessToken]) - if (sku != null) { - return <>{sku} - } - return <>Hook component + const ctx = useCommerceLayer(); + const [sku, setSku] = useState(); + useEffect(() => { + if (ctx.sdkClient != null && sku == null) { + ctx + .sdkClient() + ?.skus.list({ filters: { code_eq: "BABYONBU000000E63E7412MX" } }) + .then((res) => { + if (res.first() != null) { + setSku(res.first()?.code); + } + }); + } + return () => { + setSku(undefined); + }; + }, [ctx.accessToken]); + if (sku != null) { + return <>{sku}; + } + return <>Hook component; } -describe('useCommerceLayer hook', () => { - let token: string | undefined - let domain: string | undefined - beforeAll(async () => { - const { accessToken, endpoint } = await getToken() - if (accessToken !== undefined) { - token = accessToken - domain = endpoint - } - }) - beforeEach(async (ctx) => { - if (token != null && domain != null) { - ctx.accessToken = token - ctx.endpoint = domain - ctx.sku = 'BABYONBU000000E63E7412MX' - } - }) - it.skip('useCommerceLayer outside of CommerceLayer', () => { - expect(() => renderHook(() => useCommerceLayer())).toThrow( - 'Cannot use `useCommerceLayer` outside of ' - ) - }) - it('get sku by sdk client', async (ctx) => { - render( - - - - ) - await waitFor(async () => await screen.findByText(ctx.sku), { - timeout: 5000 - }) - const sku = screen.getByText(ctx.sku) - expect(sku.textContent).toEqual(ctx.sku) - }) -}) +describe("useCommerceLayer hook", () => { + let token: string | undefined; + let domain: string | undefined; + beforeAll(async () => { + const { accessToken, endpoint } = await getToken(); + if (accessToken !== undefined) { + token = accessToken; + domain = endpoint; + } + }); + beforeEach(async (ctx) => { + if (token != null && domain != null) { + ctx.accessToken = token; + ctx.endpoint = domain; + ctx.sku = "BABYONBU000000E63E7412MX"; + } + }); + it.skip("useCommerceLayer outside of CommerceLayer", () => { + expect(() => renderHook(() => useCommerceLayer())).toThrow( + "Cannot use `useCommerceLayer` outside of ", + ); + }); + it("get sku by sdk client", async (ctx) => { + render( + + + , + ); + await waitFor(async () => await screen.findByText(ctx.sku), { + timeout: 5000, + }); + const sku = screen.getByText(ctx.sku); + expect(sku.textContent).toEqual(ctx.sku); + }); +}); diff --git a/packages/react-components/specs/hooks/useOrderContainer.spec.tsx b/packages/react-components/specs/hooks/useOrderContainer.spec.tsx index f7dd284d..fda0cb22 100644 --- a/packages/react-components/specs/hooks/useOrderContainer.spec.tsx +++ b/packages/react-components/specs/hooks/useOrderContainer.spec.tsx @@ -1,57 +1,57 @@ -import CommerceLayer from '#components/auth/CommerceLayer' -import OrderContainer from '#components/orders/OrderContainer' -import { render, renderHook, waitFor, screen } from '@testing-library/react' -import { useEffect } from 'react' -import { type OrderContext } from 'specs/utils/context' -import useOrderContainer from 'src/hooks/useOrderContainer' -import getToken from '../utils/getToken' +import CommerceLayer from "#components/auth/CommerceLayer"; +import OrderContainer from "#components/orders/OrderContainer"; +import { render, renderHook, waitFor, screen } from "@testing-library/react"; +import { useEffect } from "react"; +import type { OrderContext } from "specs/utils/context"; +import useOrderContainer from "src/hooks/useOrderContainer"; +import getToken from "../utils/getToken"; function HookComponent(): JSX.Element { - const orderCtx = useOrderContainer() - useEffect(() => { - void orderCtx.reloadOrder() - }, [orderCtx.order]) - if (orderCtx.order) { - return <>{orderCtx.order?.id} - } - return <>Hook component + const orderCtx = useOrderContainer(); + useEffect(() => { + orderCtx.reloadOrder(); + }, [orderCtx.order]); + if (orderCtx.order) { + return <>{orderCtx.order?.id}; + } + return <>Hook component; } -describe('useOrderContainer hook', () => { - let token: string | undefined - let domain: string | undefined - beforeAll(async () => { - const { accessToken, endpoint } = await getToken() - if (accessToken !== undefined) { - token = accessToken - domain = endpoint - } - }) - beforeEach(async (ctx) => { - if (token != null && domain != null) { - ctx.accessToken = token - ctx.endpoint = domain - // TODO: create a new one? - ctx.orderId = 'qQgYhvlDVM' - } - }) - it('useOrderContainer outside of OrderContainer', () => { - expect(() => renderHook(() => useOrderContainer())).toThrow( - 'Cannot use `useOrderContainer` outside of ' - ) - }) - it('reload order by hook', async (ctx) => { - render( - - - - - - ) - await waitFor(async () => await screen.findByText(ctx.orderId), { - timeout: 5000 - }) - const orderId = screen.getByText(ctx.orderId) - expect(orderId.textContent).toEqual(ctx.orderId) - }) -}) +describe("useOrderContainer hook", () => { + let token: string | undefined; + let domain: string | undefined; + beforeAll(async () => { + const { accessToken, endpoint } = await getToken(); + if (accessToken !== undefined) { + token = accessToken; + domain = endpoint; + } + }); + beforeEach(async (ctx) => { + if (token != null && domain != null) { + ctx.accessToken = token; + ctx.endpoint = domain; + // TODO: create a new one? + ctx.orderId = "qQgYhvlDVM"; + } + }); + it("useOrderContainer outside of OrderContainer", () => { + expect(() => renderHook(() => useOrderContainer())).toThrow( + "Cannot use `useOrderContainer` outside of ", + ); + }); + it("reload order by hook", async (ctx) => { + render( + + + + + , + ); + await waitFor(async () => await screen.findByText(ctx.orderId), { + timeout: 5000, + }); + const orderId = screen.getByText(ctx.orderId); + expect(orderId.textContent).toEqual(ctx.orderId); + }); +}); diff --git a/packages/react-components/src/components/ExternalFunction.tsx b/packages/react-components/src/components/ExternalFunction.tsx index 134e6c4d..4b60100a 100644 --- a/packages/react-components/src/components/ExternalFunction.tsx +++ b/packages/react-components/src/components/ExternalFunction.tsx @@ -1,7 +1,7 @@ import ExternalFunctionContext, { callExternalFunction } from '#context/ExternalFunctionContext' -import { type ReactNode, type JSX } from 'react'; +import type { ReactNode, JSX } from 'react'; interface Props { children: ReactNode diff --git a/packages/react-components/src/components/MetadataInput.tsx b/packages/react-components/src/components/MetadataInput.tsx index b808a663..e5d3a078 100644 --- a/packages/react-components/src/components/MetadataInput.tsx +++ b/packages/react-components/src/components/MetadataInput.tsx @@ -1,5 +1,5 @@ import BaseInput from '#components/utils/BaseInput' -import { type BaseInputComponentProps } from '#typings' +import type { BaseInputComponentProps } from '#typings' import type { JSX } from "react"; @@ -8,7 +8,7 @@ type Props = BaseInputComponentProps & JSX.IntrinsicElements['textarea'] export function MetadataInput(props: Props): JSX.Element { - return + return } export default MetadataInput diff --git a/packages/react-components/src/components/SubmitButton.tsx b/packages/react-components/src/components/SubmitButton.tsx index b145f4bb..f5092cd2 100644 --- a/packages/react-components/src/components/SubmitButton.tsx +++ b/packages/react-components/src/components/SubmitButton.tsx @@ -1,6 +1,6 @@ -import { type ReactNode, type JSX } from 'react'; +import type { ReactNode, JSX } from 'react'; import Parent from '#components/utils/Parent' -import { type ChildrenFunction } from '#typings/index' +import type { ChildrenFunction } from '#typings/index' import isFunction from 'lodash/isFunction' interface ChildrenProps extends Omit {} diff --git a/packages/react-components/src/components/addresses/Address.tsx b/packages/react-components/src/components/addresses/Address.tsx index dd42a9da..62ae2be1 100644 --- a/packages/react-components/src/components/addresses/Address.tsx +++ b/packages/react-components/src/components/addresses/Address.tsx @@ -3,7 +3,7 @@ import AddressChildrenContext from '#context/AddressChildrenContext' import CustomerContext from '#context/CustomerContext' import BillingAddressContext from '#context/BillingAddressContext' import ShippingAddressContext from '#context/ShippingAddressContext' -import { type Address as AddressType } from '@commercelayer/sdk' +import type { Address as AddressType } from '@commercelayer/sdk' import isEmpty from 'lodash/isEmpty' import AddressContext from '#context/AddressContext' import OrderContext from '#context/OrderContext' @@ -81,7 +81,7 @@ export function Address(props: Props): JSX.Element { setBillingAddress && address.reference != null ) { - void setBillingAddress(address.id, { + setBillingAddress(address.id, { customerAddressId: address.reference }) } @@ -95,7 +95,7 @@ export function Address(props: Props): JSX.Element { setShippingAddress && address.reference != null ) { - void setShippingAddress(address.id, { + setShippingAddress(address.id, { customerAddressId: address.reference }) } @@ -106,7 +106,7 @@ export function Address(props: Props): JSX.Element { setBillingAddress && (await setBillingAddress('')) setShippingAddress && (await setShippingAddress('')) } - void disabledSaveButton() + disabledSaveButton() } }, [ deselect, @@ -166,7 +166,7 @@ export function Address(props: Props): JSX.Element {
{ - void handleSelect( + handleSelect( k, address.id, customerAddressId, diff --git a/packages/react-components/src/components/addresses/AddressCountrySelector.tsx b/packages/react-components/src/components/addresses/AddressCountrySelector.tsx index 174a0a2f..699c42db 100644 --- a/packages/react-components/src/components/addresses/AddressCountrySelector.tsx +++ b/packages/react-components/src/components/addresses/AddressCountrySelector.tsx @@ -1,6 +1,6 @@ import { useContext, useEffect, useMemo, type JSX } from 'react'; import BaseSelect from '../utils/BaseSelect' -import { type BaseSelectComponentProps } from '#typings' +import type { BaseSelectComponentProps } from '#typings' import BillingAddressFormContext, { type AddressValuesKeys } from '#context/BillingAddressFormContext' diff --git a/packages/react-components/src/components/addresses/AddressField.tsx b/packages/react-components/src/components/addresses/AddressField.tsx index 937d5526..7bd30ede 100644 --- a/packages/react-components/src/components/addresses/AddressField.tsx +++ b/packages/react-components/src/components/addresses/AddressField.tsx @@ -1,10 +1,10 @@ import { useContext, type ReactNode, type JSX } from 'react'; import AddressChildrenContext from '#context/AddressChildrenContext' import Parent from '#components/utils/Parent' -import { type AddressFieldView } from '#reducers/AddressReducer' +import type { AddressFieldView } from '#reducers/AddressReducer' import type { Address } from '@commercelayer/sdk' import CustomerContext from '#context/CustomerContext' -import { type ChildrenFunction } from '#typings/index' +import type { ChildrenFunction } from '#typings/index' interface ChildrenProps extends Omit { address: Address @@ -77,7 +77,7 @@ export function AddressField(props: Props): JSX.Element { e.stopPropagation() e.preventDefault() if (type === 'delete' && deleteCustomerAddress && address?.reference) { - void deleteCustomerAddress({ customerAddressId: address?.reference }) + deleteCustomerAddress({ customerAddressId: address?.reference }) } address && onClick && onClick(address) } diff --git a/packages/react-components/src/components/addresses/AddressInput.tsx b/packages/react-components/src/components/addresses/AddressInput.tsx index 21938358..f444d803 100644 --- a/packages/react-components/src/components/addresses/AddressInput.tsx +++ b/packages/react-components/src/components/addresses/AddressInput.tsx @@ -1,6 +1,6 @@ import { useContext, useEffect, useMemo, type JSX } from 'react'; import BaseInput from '#components/utils/BaseInput' -import { type BaseInputComponentProps, type AddressInputName } from '#typings' +import type { BaseInputComponentProps, AddressInputName } from '#typings' import BillingAddressFormContext, { type AddressValuesKeys } from '#context/BillingAddressFormContext' diff --git a/packages/react-components/src/components/addresses/AddressInputSelect.tsx b/packages/react-components/src/components/addresses/AddressInputSelect.tsx index 713efac5..c2db7549 100644 --- a/packages/react-components/src/components/addresses/AddressInputSelect.tsx +++ b/packages/react-components/src/components/addresses/AddressInputSelect.tsx @@ -1,6 +1,6 @@ import { useContext, useEffect, useMemo, type JSX } from 'react'; import BaseSelect from '../utils/BaseSelect' -import { type BaseSelectComponentProps } from '#typings' +import type { BaseSelectComponentProps } from '#typings' import BillingAddressFormContext, { type AddressValuesKeys } from '#context/BillingAddressFormContext' diff --git a/packages/react-components/src/components/addresses/AddressStateSelector.tsx b/packages/react-components/src/components/addresses/AddressStateSelector.tsx index 7d5725ec..57b60fc1 100644 --- a/packages/react-components/src/components/addresses/AddressStateSelector.tsx +++ b/packages/react-components/src/components/addresses/AddressStateSelector.tsx @@ -1,8 +1,8 @@ import { useContext, useEffect, useMemo, useState, type JSX } from 'react'; import BaseSelect from '#components/utils/BaseSelect' -import { - type AddressStateSelectName, - type BaseSelectComponentProps +import type { + AddressStateSelectName, + BaseSelectComponentProps } from '#typings' import BillingAddressFormContext from '#context/BillingAddressFormContext' import ShippingAddressFormContext from '#context/ShippingAddressFormContext' diff --git a/packages/react-components/src/components/addresses/AddressesContainer.tsx b/packages/react-components/src/components/addresses/AddressesContainer.tsx index 5b222f3d..471a93d7 100644 --- a/packages/react-components/src/components/addresses/AddressesContainer.tsx +++ b/packages/react-components/src/components/addresses/AddressesContainer.tsx @@ -11,11 +11,11 @@ import addressReducer, { saveAddresses, type ICustomerAddress } from '#reducers/AddressReducer' -import { type BaseError } from '#typings/errors' +import type { BaseError } from '#typings/errors' import OrderContext from '#context/OrderContext' import CommerceLayerContext from '#context/CommerceLayerContext' import { setCustomerOrderParam } from '#utils/localStorage' -import { type TCustomerAddress } from '#reducers/CustomerReducer' +import type { TCustomerAddress } from '#reducers/CustomerReducer' interface Props { children: ReactNode diff --git a/packages/react-components/src/components/addresses/AddressesEmpty.tsx b/packages/react-components/src/components/addresses/AddressesEmpty.tsx index 549daaf3..fad3b46c 100644 --- a/packages/react-components/src/components/addresses/AddressesEmpty.tsx +++ b/packages/react-components/src/components/addresses/AddressesEmpty.tsx @@ -1,6 +1,6 @@ import Parent from '#components/utils/Parent' import CustomerContext from '#context/CustomerContext' -import { type ChildrenFunction } from '#typings/index' +import type { ChildrenFunction } from '#typings/index' import { useContext, type JSX } from 'react'; interface Props extends Omit { diff --git a/packages/react-components/src/components/addresses/BillingAddressForm.tsx b/packages/react-components/src/components/addresses/BillingAddressForm.tsx index 111e3010..43071529 100644 --- a/packages/react-components/src/components/addresses/BillingAddressForm.tsx +++ b/packages/react-components/src/components/addresses/BillingAddressForm.tsx @@ -5,10 +5,10 @@ import BillingAddressFormContext, { type AddressValuesKeys, type DefaultContextAddress } from '#context/BillingAddressFormContext' -import { type BaseError, type CodeErrorType } from '#typings/errors' +import type { BaseError, CodeErrorType } from '#typings/errors' import OrderContext from '#context/OrderContext' import { getSaveBillingAddressToAddressBook } from '#utils/localStorage' -import { type CustomFieldMessageError } from '#reducers/AddressReducer' +import type { CustomFieldMessageError } from '#reducers/AddressReducer' type Props = { children: ReactNode @@ -167,11 +167,11 @@ export function BillingAddressForm(props: Props): JSX.Element { (field?.required === false && field?.type !== 'checkbox') ) { values[name.replace('billing_address_', '')] = field.value - // eslint-disable-next-line @typescript-eslint/no-dynamic-delete + delete values[name] } if (field?.type === 'checkbox') { - // eslint-disable-next-line @typescript-eslint/no-dynamic-delete + delete values[name] saveAddressToCustomerAddressBook({ type: 'billing_address', diff --git a/packages/react-components/src/components/addresses/SaveAddressesButton.tsx b/packages/react-components/src/components/addresses/SaveAddressesButton.tsx index 4f3ae7d9..8bc672ec 100644 --- a/packages/react-components/src/components/addresses/SaveAddressesButton.tsx +++ b/packages/react-components/src/components/addresses/SaveAddressesButton.tsx @@ -1,6 +1,6 @@ import { type ReactNode, useContext, useState, type JSX } from 'react'; import Parent from '#components/utils/Parent' -import { type ChildrenFunction } from '#typings/index' +import type { ChildrenFunction } from '#typings/index' import AddressContext from '#context/AddressContext' import { countryLockController, @@ -9,7 +9,7 @@ import { import OrderContext from '#context/OrderContext' import CustomerContext from '#context/CustomerContext' import isFunction from 'lodash/isFunction' -import { type TCustomerAddress } from '#reducers/CustomerReducer' +import type { TCustomerAddress } from '#reducers/CustomerReducer' import type { Order } from '@commercelayer/sdk' import { validateValue } from '#utils/validateFormFields' import { formCleaner } from '#utils/formCleaner' @@ -150,7 +150,7 @@ export function SaveAddressesButton(props: Props): JSX.Element { ? { ...formCleaner(shippingAddress) } : { ...formCleaner(billingAddress) } if (addressId) address.id = addressId - void createCustomerAddress(address as TCustomerAddress) + createCustomerAddress(address as TCustomerAddress) response = { success: true } @@ -176,7 +176,7 @@ export function SaveAddressesButton(props: Props): JSX.Element { type='button' disabled={disable || forceDisable} onClick={() => { - void handleClick() + handleClick() }} {...p} > diff --git a/packages/react-components/src/components/addresses/ShippingAddressForm.tsx b/packages/react-components/src/components/addresses/ShippingAddressForm.tsx index 5d5125df..e71a8e88 100644 --- a/packages/react-components/src/components/addresses/ShippingAddressForm.tsx +++ b/packages/react-components/src/components/addresses/ShippingAddressForm.tsx @@ -2,11 +2,11 @@ import AddressesContext from '#context/AddressContext' import { useRapidForm } from 'rapid-form' import { type ReactNode, useContext, useEffect, useRef, type JSX } from 'react'; import ShippingAddressFormContext from '#context/ShippingAddressFormContext' -import { type BaseError, type CodeErrorType } from '#typings/errors' +import type { BaseError, CodeErrorType } from '#typings/errors' import OrderContext from '#context/OrderContext' import { getSaveShippingAddressToAddressBook } from '#utils/localStorage' -import { type AddressValuesKeys } from '#context/BillingAddressFormContext' -import { type CustomFieldMessageError } from '#reducers/AddressReducer' +import type { AddressValuesKeys } from '#context/BillingAddressFormContext' +import type { CustomFieldMessageError } from '#reducers/AddressReducer' interface Props extends Omit { children: ReactNode @@ -172,11 +172,9 @@ export function ShippingAddressForm(props: Props): JSX.Element { (field?.required === false && field?.type !== 'checkbox') ) { values[name.replace('shipping_address_', '')] = field.value - // eslint-disable-next-line @typescript-eslint/no-dynamic-delete delete values[name] } if (field?.type === 'checkbox') { - // eslint-disable-next-line @typescript-eslint/no-dynamic-delete delete values[name] saveAddressToCustomerAddressBook({ type: 'shipping_address', diff --git a/packages/react-components/src/components/customers/CustomerAddressForm.tsx b/packages/react-components/src/components/customers/CustomerAddressForm.tsx index bb6a977e..d6aa2030 100644 --- a/packages/react-components/src/components/customers/CustomerAddressForm.tsx +++ b/packages/react-components/src/components/customers/CustomerAddressForm.tsx @@ -2,12 +2,12 @@ import AddressesContext from '#context/AddressContext' import { useRapidForm } from 'rapid-form' import { type ReactNode, useContext, useEffect, useRef, type JSX } from 'react'; import CustomerAddressFormContext from '#context/CustomerAddressFormContext' -import { type BaseError, type CodeErrorType } from '#typings/errors' -import { type AddressField } from '#reducers/AddressReducer' -import { type AddressCountrySelectName, type AddressInputName } from '#typings' +import type { BaseError, CodeErrorType } from '#typings/errors' +import type { AddressField } from '#reducers/AddressReducer' +import type { AddressCountrySelectName, AddressInputName } from '#typings' import OrderContext from '#context/OrderContext' import { isEmptyStates } from '#utils/countryStateCity' -import { type TCustomerAddress } from '#reducers/CustomerReducer' +import type { TCustomerAddress } from '#reducers/CustomerReducer' interface Props extends Omit { children: ReactNode @@ -41,7 +41,7 @@ export function CustomerAddressForm(props: Props): JSX.Element { const message = errors[fieldName]?.message || '' if (fieldName === 'billing_address_state_code') { if (values['state_code']) { - // eslint-disable-next-line @typescript-eslint/no-dynamic-delete + delete errors[fieldName] } else { formErrors.push({ @@ -67,7 +67,7 @@ export function CustomerAddressForm(props: Props): JSX.Element { const field = values[name] if (field?.value) { values[name.replace('billing_address_', '')] = field.value - // eslint-disable-next-line @typescript-eslint/no-dynamic-delete + delete values[name] } if (['billing_address_state_code'].includes(name)) { @@ -80,7 +80,7 @@ export function CustomerAddressForm(props: Props): JSX.Element { }) && !field.value ) { - // eslint-disable-next-line @typescript-eslint/no-dynamic-delete + delete values['billing_address_state_code'] } } diff --git a/packages/react-components/src/components/customers/CustomerContainer.tsx b/packages/react-components/src/components/customers/CustomerContainer.tsx index 237df5f1..5dd742ae 100644 --- a/packages/react-components/src/components/customers/CustomerContainer.tsx +++ b/packages/react-components/src/components/customers/CustomerContainer.tsx @@ -22,7 +22,7 @@ import CustomerContext from '#context/CustomerContext' import type { BaseError } from '#typings/errors' import type { DefaultChildrenType } from '#typings/globals' import { isGuestToken } from '#utils/isGuestToken' -import { type QueryPageSize } from '@commercelayer/sdk' +import type { QueryPageSize } from '@commercelayer/sdk' interface Props { children: DefaultChildrenType @@ -111,10 +111,10 @@ export function CustomerContainer(props: Props): JSX.Element { return } if (state.customers == null) { - void getCustomerInfo({ config, dispatch }) + getCustomerInfo({ config, dispatch }) } if (state.addresses == null) { - void getCustomerAddresses({ + getCustomerAddresses({ config, dispatch, isOrderAvailable: withoutIncludes != null, @@ -136,7 +136,7 @@ export function CustomerContainer(props: Props): JSX.Element { await getCustomerSubscriptions({ config, dispatch }) await getCustomerPayments({ config, dispatch }) } - void getCustomerData() + getCustomerData() } } }, [config.accessToken, order?.payment_source != null, isGuest]) diff --git a/packages/react-components/src/components/customers/CustomerField.tsx b/packages/react-components/src/components/customers/CustomerField.tsx index 61d6957a..3ba64d6b 100644 --- a/packages/react-components/src/components/customers/CustomerField.tsx +++ b/packages/react-components/src/components/customers/CustomerField.tsx @@ -1,4 +1,4 @@ -import { type ConditionalElement } from '#typings' +import type { ConditionalElement } from '#typings' import GenericFieldComponent, { type TGenericChildrenProps, type TResourceKey, diff --git a/packages/react-components/src/components/customers/CustomerInput.tsx b/packages/react-components/src/components/customers/CustomerInput.tsx index d2c35da0..77c2eabd 100644 --- a/packages/react-components/src/components/customers/CustomerInput.tsx +++ b/packages/react-components/src/components/customers/CustomerInput.tsx @@ -1,10 +1,10 @@ /* eslint-disable @typescript-eslint/no-unsafe-argument */ import { useContext, useEffect, useState, type JSX } from 'react'; import BaseInput from '#components-utils/BaseInput' -import { type BaseInputComponentProps } from '#typings' +import type { BaseInputComponentProps } from '#typings' import { useRapidForm } from 'rapid-form' import CustomerContext from '#context/CustomerContext' -import { type BaseError, type CodeErrorType } from '#typings/errors' +import type { BaseError, CodeErrorType } from '#typings/errors' import { validateValue } from '#utils/validateFormFields' import OrderContext from '#context/OrderContext' @@ -101,7 +101,7 @@ export function CustomerInput(props: Props): JSX.Element { placeholder={placeholder} defaultValue={value} onBlur={(e) => { - void handleOnBlur(e) + handleOnBlur(e) }} className={classNameComputed} {...p} diff --git a/packages/react-components/src/components/customers/CustomerPaymentSource.tsx b/packages/react-components/src/components/customers/CustomerPaymentSource.tsx index 9c32c0a9..2a740a15 100644 --- a/packages/react-components/src/components/customers/CustomerPaymentSource.tsx +++ b/packages/react-components/src/components/customers/CustomerPaymentSource.tsx @@ -1,7 +1,7 @@ import CustomerContext from '#context/CustomerContext' import CustomerPaymentSourceContext from '#context/CustomerPaymentSourceContext' -import { type PaymentResource } from '#reducers/PaymentMethodReducer' -import { type DefaultChildrenType } from '#typings/globals' +import type { PaymentResource } from '#reducers/PaymentMethodReducer' +import type { DefaultChildrenType } from '#typings/globals' import getCardDetails from '#utils/getCardDetails' import useCustomContext from '#utils/hooks/useCustomContext' import { useEffect, useState, type JSX } from 'react'; diff --git a/packages/react-components/src/components/customers/CustomerPaymentSourceEmpty.tsx b/packages/react-components/src/components/customers/CustomerPaymentSourceEmpty.tsx index b4041ce7..02cd5b1b 100644 --- a/packages/react-components/src/components/customers/CustomerPaymentSourceEmpty.tsx +++ b/packages/react-components/src/components/customers/CustomerPaymentSourceEmpty.tsx @@ -1,6 +1,6 @@ import Parent from '#components/utils/Parent' import CustomerContext from '#context/CustomerContext' -import { type ChildrenFunction } from '#typings/index' +import type { ChildrenFunction } from '#typings/index' import useCustomContext from '#utils/hooks/useCustomContext' import type { JSX } from "react"; diff --git a/packages/react-components/src/components/customers/MyAccountLink.tsx b/packages/react-components/src/components/customers/MyAccountLink.tsx index b110acf6..c919a1a6 100644 --- a/packages/react-components/src/components/customers/MyAccountLink.tsx +++ b/packages/react-components/src/components/customers/MyAccountLink.tsx @@ -1,6 +1,6 @@ import { useContext, type JSX } from 'react'; import Parent from '../utils/Parent' -import { type ChildrenFunction } from '#typings/index' +import type { ChildrenFunction } from '#typings/index' import CommerceLayerContext from '#context/CommerceLayerContext' import { getApplicationLink } from '#utils/getApplicationLink' import { getDomain } from '#utils/getDomain' @@ -67,7 +67,7 @@ export function MyAccountLink(props: Props): JSX.Element { e: React.MouseEvent ): void { if (!disabled && accessToken && endpoint) { - void getOrganizationConfig({ + getOrganizationConfig({ accessToken, endpoint, params: { diff --git a/packages/react-components/src/components/customers/MyIdentityLink.tsx b/packages/react-components/src/components/customers/MyIdentityLink.tsx index 691a2429..3b4e0312 100644 --- a/packages/react-components/src/components/customers/MyIdentityLink.tsx +++ b/packages/react-components/src/components/customers/MyIdentityLink.tsx @@ -1,6 +1,6 @@ import { useContext, useEffect, useState, type JSX } from 'react'; import Parent from '../utils/Parent' -import { type ChildrenFunction } from '#typings/index' +import type { ChildrenFunction } from '#typings/index' import CommerceLayerContext from '#context/CommerceLayerContext' import { getApplicationLink } from '#utils/getApplicationLink' import { getDomain } from '#utils/getDomain' @@ -82,7 +82,7 @@ export function MyIdentityLink(props: Props): JSX.Element { const { domain, slug } = getDomain(endpoint) useEffect(() => { if (accessToken && endpoint) { - void getOrganizationConfig({ + getOrganizationConfig({ accessToken, endpoint, params: { diff --git a/packages/react-components/src/components/customers/SaveCustomerButton.tsx b/packages/react-components/src/components/customers/SaveCustomerButton.tsx index b553d6ee..a47d68a8 100644 --- a/packages/react-components/src/components/customers/SaveCustomerButton.tsx +++ b/packages/react-components/src/components/customers/SaveCustomerButton.tsx @@ -1,6 +1,6 @@ import { type ReactNode, useContext, type JSX } from 'react'; import Parent from '#components/utils/Parent' -import { type ChildrenFunction } from '#typings/index' +import type { ChildrenFunction } from '#typings/index' import isEmpty from 'lodash/isEmpty' import CustomerContext from '#context/CustomerContext' @@ -39,7 +39,7 @@ export function SaveCustomerButton(props: Props): JSX.Element { type='button' disabled={disable} onClick={() => { - void handleClick() + handleClick() }} {...p} > diff --git a/packages/react-components/src/components/errors/Errors.tsx b/packages/react-components/src/components/errors/Errors.tsx index f9491c3a..aa609924 100644 --- a/packages/react-components/src/components/errors/Errors.tsx +++ b/packages/react-components/src/components/errors/Errors.tsx @@ -11,7 +11,7 @@ import CustomerContext from '#context/CustomerContext' import PaymentMethodContext from '#context/PaymentMethodContext' import PaymentMethodChildrenContext from '#context/PaymentMethodChildrenContext' import ShipmentContext from '#context/ShipmentContext' -import { type ChildrenFunction } from '#typings/index' +import type { ChildrenFunction } from '#typings/index' import InStockSubscriptionContext from '#context/InStockSubscriptionContext' export type TResourceError = diff --git a/packages/react-components/src/components/gift_cards/GiftCard.tsx b/packages/react-components/src/components/gift_cards/GiftCard.tsx index 17de7661..1d1cbe1b 100644 --- a/packages/react-components/src/components/gift_cards/GiftCard.tsx +++ b/packages/react-components/src/components/gift_cards/GiftCard.tsx @@ -2,8 +2,8 @@ import { useRef, useContext, type RefObject, type JSX } from 'react'; import validateFormFields from '#utils/validateFormFields' import isEmpty from 'lodash/isEmpty' import GiftCardContext from '#context/GiftCardContext' -import { type GiftCardI } from '#reducers/GiftCardReducer' -import { type BaseState } from '#typings/index' +import type { GiftCardI } from '#reducers/GiftCardReducer' +import type { BaseState } from '#typings/index' import type { DefaultChildrenType } from '#typings/globals' type RequiredFields = 'currencyCode' | 'balanceCents' diff --git a/packages/react-components/src/components/gift_cards/GiftCardCurrencySelector.tsx b/packages/react-components/src/components/gift_cards/GiftCardCurrencySelector.tsx index da536417..52567f39 100644 --- a/packages/react-components/src/components/gift_cards/GiftCardCurrencySelector.tsx +++ b/packages/react-components/src/components/gift_cards/GiftCardCurrencySelector.tsx @@ -1,6 +1,6 @@ import BaseSelect from '#components/utils/BaseSelect' import currencyOptions from '#config/currency' -import { type BaseSelectComponentProps } from '#typings' +import type { BaseSelectComponentProps } from '#typings' import type { JSX } from "react"; diff --git a/packages/react-components/src/components/gift_cards/GiftCardInput.tsx b/packages/react-components/src/components/gift_cards/GiftCardInput.tsx index 87979540..38c77e5d 100644 --- a/packages/react-components/src/components/gift_cards/GiftCardInput.tsx +++ b/packages/react-components/src/components/gift_cards/GiftCardInput.tsx @@ -1,5 +1,5 @@ import BaseInput from '#components/utils/BaseInput' -import { type BaseInputComponentProps, type GiftCardInputName } from '#typings' +import type { BaseInputComponentProps, GiftCardInputName } from '#typings' import type { JSX } from "react"; diff --git a/packages/react-components/src/components/gift_cards/GiftCardOrCouponCode.tsx b/packages/react-components/src/components/gift_cards/GiftCardOrCouponCode.tsx index 84c791c4..49fc8b58 100644 --- a/packages/react-components/src/components/gift_cards/GiftCardOrCouponCode.tsx +++ b/packages/react-components/src/components/gift_cards/GiftCardOrCouponCode.tsx @@ -1,5 +1,5 @@ import { useContext, type JSX } from 'react'; -import { type ChildrenFunction } from '#typings' +import type { ChildrenFunction } from '#typings' import Parent from '#components/utils/Parent' import OrderContext from '#context/OrderContext' import type { CodeType } from '#reducers/OrderReducer' diff --git a/packages/react-components/src/components/gift_cards/GiftCardOrCouponForm.tsx b/packages/react-components/src/components/gift_cards/GiftCardOrCouponForm.tsx index 27aae550..9ff0ea0e 100644 --- a/packages/react-components/src/components/gift_cards/GiftCardOrCouponForm.tsx +++ b/packages/react-components/src/components/gift_cards/GiftCardOrCouponForm.tsx @@ -100,7 +100,7 @@ export function GiftCardOrCouponForm(props: Props): JSX.Element | null { ref={ref} autoComplete={autoComplete} onSubmit={(e) => { - void handleSubmit(e) + handleSubmit(e) }} {...p} > diff --git a/packages/react-components/src/components/gift_cards/GiftCardOrCouponInput.tsx b/packages/react-components/src/components/gift_cards/GiftCardOrCouponInput.tsx index a9fe9087..d303ef18 100644 --- a/packages/react-components/src/components/gift_cards/GiftCardOrCouponInput.tsx +++ b/packages/react-components/src/components/gift_cards/GiftCardOrCouponInput.tsx @@ -1,8 +1,8 @@ import { useContext, type JSX } from 'react'; import BaseInput from '#components/utils/BaseInput' import CouponAndGiftCardFormContext from '#context/CouponAndGiftCardFormContext' -import { type BaseInputComponentProps } from '#typings' -import { type OrderCodeType } from '#reducers/OrderReducer' +import type { BaseInputComponentProps } from '#typings' +import type { OrderCodeType } from '#reducers/OrderReducer' type FieldName = 'gift_card_code' | 'coupon_code' diff --git a/packages/react-components/src/components/gift_cards/GiftCardOrCouponRemoveButton.tsx b/packages/react-components/src/components/gift_cards/GiftCardOrCouponRemoveButton.tsx index f812ba39..b430e3ad 100644 --- a/packages/react-components/src/components/gift_cards/GiftCardOrCouponRemoveButton.tsx +++ b/packages/react-components/src/components/gift_cards/GiftCardOrCouponRemoveButton.tsx @@ -1,8 +1,8 @@ import { type ReactNode, useContext, type JSX } from 'react'; import Parent from '#components/utils/Parent' -import { type ChildrenFunction } from '#typings/index' +import type { ChildrenFunction } from '#typings/index' import OrderContext from '#context/OrderContext' -import { type CodeType, type OrderCodeType } from '#reducers/OrderReducer' +import type { CodeType, OrderCodeType } from '#reducers/OrderReducer' import type { Order } from '@commercelayer/sdk' interface ChildrenProps extends Omit { @@ -45,7 +45,7 @@ export function GiftCardOrCouponRemoveButton(props: Props): JSX.Element | null {