Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .github/workflows/pgk-pr-new.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ jobs:
run: pnpm install --frozen-lockfile

- name: Build elements 🛠
run: pnpm --filter @commercelayer/core --filter @commercelayer/hooks --filter @commercelayer/react-components build
run: pnpm --filter @commercelayer/core-components --filter @commercelayer/react-hooks-components --filter @commercelayer/react-components build

- name: Publish 🚀 pkg.pr.new
run: |
npx pkg-pr-new publish './packages/react-components' './packages/core' './packages/hooks' --no-template
npx pkg-pr-new publish './packages/react-components' './packages/core-components' './packages/react-hooks-components' --no-template
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
},
"scripts": {
"preinstall": "npx only-allow pnpm",
"build": "pnpm --filter @commercelayer/core --filter @commercelayer/hooks --filter @commercelayer/react-components build",
"build:watch": "pnpm --filter @commercelayer/core --filter @commercelayer/hooks --filter @commercelayer/react-components --parallel build:watch",
"build": "pnpm --filter @commercelayer/core-components --filter @commercelayer/react-hooks-components --filter @commercelayer/react-components build",
"build:watch": "pnpm --filter @commercelayer/core-components --filter @commercelayer/react-hooks-components --filter @commercelayer/react-components --parallel build:watch",
"prepare": "husky",
"test": "pnpm -r --workspace-concurrency=1 --no-bail test",
"docs:dev": "pnpm --filter docs storybook",
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "@commercelayer/core",
"name": "@commercelayer/core-components",
"version": "1.0.0",
"description": "Commerce Layer Core",
"type": "module",
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ function AvailabilityDocsPage(): JSX.Element {
The Availability components let you display real-time stock quantity and delivery lead times
for any SKU. They are powered by the Commerce Layer inventory model and work by fetching
availability data through the <code>useAvailability</code> hook from{" "}
<code>@commercelayer/hooks</code>. All Availability components must be nested inside the{" "}
<code>@commercelayer/react-hooks-components</code>. All Availability components must be nested inside the{" "}
<code>{"<CommerceLayer>"}</code> context.
</p>
<hr />
Expand Down
16 changes: 8 additions & 8 deletions packages/document/src/stories/getting-started/006.core.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import { Meta, Source } from '@storybook/addon-docs/blocks';

# Core package

The `@commercelayer/core` package is a collection of **low-level async functions** that wrap the [Commerce Layer SDK](https://github.com/commercelayer/commercelayer-sdk).
The `@commercelayer/core-components` package is a collection of **low-level async functions** that wrap the [Commerce Layer SDK](https://github.com/commercelayer/commercelayer-sdk).

It is the foundation layer used internally by the `@commercelayer/hooks` package and by the React components. You can use it directly if you need to fetch or mutate Commerce Layer resources outside of a React component.
It is the foundation layer used internally by the `@commercelayer/react-hooks-components` package and by the React components. You can use it directly if you need to fetch or mutate Commerce Layer resources outside of a React component.

<span type="info">
This package has no React dependency — it can be used in any JavaScript/TypeScript environment (Node.js, edge functions, plain scripts, etc.).
Expand All @@ -20,9 +20,9 @@ The package is published to npm as part of this monorepo and listed as a workspa
language="bash"
dark
code={`
npm install @commercelayer/core
npm install @commercelayer/core-components
# or
pnpm add @commercelayer/core
pnpm add @commercelayer/core-components
`}
/>

Expand All @@ -49,7 +49,7 @@ Every function follows the same pattern:
language="typescript"
dark
code={`
import { getSkus } from '@commercelayer/core'
import { getSkus } from '@commercelayer/core-components'

const skus = await getSkus({
accessToken: 'your-access-token',
Expand Down Expand Up @@ -77,7 +77,7 @@ The first argument is always an object with:
language="typescript"
dark
code={`
import { getAccessToken } from '@commercelayer/core'
import { getAccessToken } from '@commercelayer/core-components'

const token = await getAccessToken({
grantType: 'client_credentials',
Expand All @@ -98,7 +98,7 @@ console.log(token.accessToken)
language="typescript"
dark
code={`
import { getSkus } from '@commercelayer/core'
import { getSkus } from '@commercelayer/core-components'

const result = await getSkus({
accessToken,
Expand All @@ -120,7 +120,7 @@ for (const sku of result) {
language="typescript"
dark
code={`
import { retrieveSkuList } from '@commercelayer/core'
import { retrieveSkuList } from '@commercelayer/core-components'

const skuList = await retrieveSkuList({
accessToken,
Expand Down
14 changes: 7 additions & 7 deletions packages/document/src/stories/getting-started/007.hooks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Meta, Source } from '@storybook/addon-docs/blocks';

# Hooks package

The `@commercelayer/hooks` package provides **SWR-based React hooks** built on top of the `@commercelayer/core` package.
The `@commercelayer/react-hooks-components` package provides **SWR-based React hooks** built on top of the `@commercelayer/core-components` package.

These hooks handle caching, deduplication, loading states, and error handling automatically. They are used internally by the React components in this library and are available for direct use if you want to build custom UI on top of Commerce Layer data.

Expand All @@ -18,9 +18,9 @@ This package requires React 18+ and depends on `swr` for data fetching and cachi
language="bash"
dark
code={`
npm install @commercelayer/hooks
npm install @commercelayer/react-hooks-components
# or
pnpm add @commercelayer/hooks
pnpm add @commercelayer/react-hooks-components
`}
/>

Expand Down Expand Up @@ -65,7 +65,7 @@ All hooks use [SWR](https://swr.vercel.app/) with `revalidateOnFocus: false` and
language="tsx"
dark
code={`
import { useSkus } from '@commercelayer/hooks'
import { useSkus } from '@commercelayer/react-hooks-components'

function SkuList({ accessToken }: { accessToken: string }) {
const { skus, isLoading, fetchSkus } = useSkus(accessToken)
Expand Down Expand Up @@ -96,7 +96,7 @@ function SkuList({ accessToken }: { accessToken: string }) {
language="tsx"
dark
code={`
import { useSkuLists } from '@commercelayer/hooks'
import { useSkuLists } from '@commercelayer/react-hooks-components'

function SkuListItems({ accessToken }: { accessToken: string }) {
const { retrieveSkuList } = useSkuLists(accessToken)
Expand Down Expand Up @@ -126,7 +126,7 @@ function SkuListItems({ accessToken }: { accessToken: string }) {
language="tsx"
dark
code={`
import { usePrices } from '@commercelayer/hooks'
import { usePrices } from '@commercelayer/react-hooks-components'

function PriceList({ accessToken }: { accessToken: string }) {
const { prices, isLoading, fetchPrices } = usePrices(accessToken)
Expand Down Expand Up @@ -154,7 +154,7 @@ function PriceList({ accessToken }: { accessToken: string }) {
language="tsx"
dark
code={`
import { useAvailability } from '@commercelayer/hooks'
import { useAvailability } from '@commercelayer/react-hooks-components'

function StockBadge({ accessToken, skuCode }: { accessToken: string; skuCode: string }) {
const { quantity, isLoading, fetchAvailability } = useAvailability(accessToken)
Expand Down
4 changes: 2 additions & 2 deletions packages/react-components/_vitest.config.mts
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import { defineConfig } from "vitest/config"
export default defineConfig({
resolve: {
alias: {
"@commercelayer/hooks": path.resolve("../hooks/src/index.ts"),
"@commercelayer/core": path.resolve("../core/src/index.ts"),
"@commercelayer/react-hooks-components": path.resolve("../react-hooks-components/src/index.ts"),
"@commercelayer/core-components": path.resolve("../core-components/src/index.ts"),
"#components": path.resolve(__dirname, "src/components"),
"#components/auth": path.resolve(__dirname, "src/components/auth"),
"#components/auth/*": path.resolve(__dirname, "src/components/auth/*"),
Expand Down
4 changes: 2 additions & 2 deletions packages/react-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,8 @@
"homepage": "https://github.com/commercelayer/commercelayer-react-components#readme",
"dependencies": {
"@adyen/adyen-web": "^6.41.0",
"@commercelayer/core": "workspace:*",
"@commercelayer/hooks": "workspace:*",
"@commercelayer/core-components": "workspace:*",
"@commercelayer/react-hooks-components": "workspace:*",
"@commercelayer/organization-config": "^2.8.4",
"@commercelayer/sdk": "7.12.1",
"@stripe/react-stripe-js": "^6.8.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/specs/addresses/Address.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import CustomerContext from "#context/CustomerContext"
import OrderContext, { defaultOrderContext } from "#context/OrderContext"
import ShippingAddressContext from "#context/ShippingAddressContext"

vi.mock("@commercelayer/core", () => ({}))
vi.mock("@commercelayer/core-components", () => ({}))

const mockAddress: AddressType = {
id: "addr-1",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import BillingAddressFormContext from "#context/BillingAddressFormContext"
import CustomerAddressFormContext from "#context/CustomerAddressFormContext"
import ShippingAddressFormContext from "#context/ShippingAddressFormContext"

vi.mock("@commercelayer/core", () => ({}))
vi.mock("@commercelayer/core-components", () => ({}))

const mockBillingCtx: Partial<DefaultContextAddress> = {
setValue: vi.fn(),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import AddressField from "#components/addresses/AddressField"
import AddressChildrenContext from "#context/AddressChildrenContext"
import CustomerContext from "#context/CustomerContext"

vi.mock("@commercelayer/core", () => ({}))
vi.mock("@commercelayer/core-components", () => ({}))

const mockAddress = {
id: "addr-1",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import BillingAddressFormContext from "#context/BillingAddressFormContext"
import CustomerAddressFormContext from "#context/CustomerAddressFormContext"
import ShippingAddressFormContext from "#context/ShippingAddressFormContext"

vi.mock("@commercelayer/core", () => ({}))
vi.mock("@commercelayer/core-components", () => ({}))

const makeBillingCtx = (overrides: Partial<DefaultContextAddress> = {}): DefaultContextAddress =>
({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { DefaultContextAddress } from "#context/BillingAddressFormContext"
import BillingAddressFormContext from "#context/BillingAddressFormContext"
import ShippingAddressFormContext from "#context/ShippingAddressFormContext"

vi.mock("@commercelayer/core", () => ({}))
vi.mock("@commercelayer/core-components", () => ({}))

const OPTIONS = [
{ label: "Option A", value: "a" },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import AddressContext from "#context/AddressContext"
import CommerceLayerContext from "#context/CommerceLayerContext"
import OrderContext, { defaultOrderContext } from "#context/OrderContext"

vi.mock("@commercelayer/core", () => ({}))
vi.mock("@commercelayer/core-components", () => ({}))
vi.mock("#utils/localStorage", () => ({
setCustomerOrderParam: vi.fn(),
getLocalOrder: vi.fn(),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react"
import AddressesEmpty from "#components/addresses/AddressesEmpty"
import CustomerContext from "#context/CustomerContext"

vi.mock("@commercelayer/core", () => ({}))
vi.mock("@commercelayer/core-components", () => ({}))

function renderEmpty(
addresses: Address[] | null | undefined,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const core = vi.hoisted(() => ({
updateAddressReference: vi.fn(),
}))

vi.mock("@commercelayer/core", () => ({
vi.mock("@commercelayer/core-components", () => ({
updateAddressReference: core.updateAddressReference,
}))

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import BillingAddressContext from "#context/BillingAddressContext"
import CommerceLayerContext from "#context/CommerceLayerContext"
import OrderContext, { defaultOrderContext } from "#context/OrderContext"

vi.mock("@commercelayer/core", () => ({ updateAddressReference: vi.fn() }))
vi.mock("@commercelayer/core-components", () => ({ updateAddressReference: vi.fn() }))

let latestSetBillingAddress: unknown

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const core = vi.hoisted(() => ({
updateAddressReference: vi.fn(),
}))

vi.mock("@commercelayer/core", () => ({
vi.mock("@commercelayer/core-components", () => ({
updateAddressReference: core.updateAddressReference,
}))

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import CommerceLayerContext from "#context/CommerceLayerContext"
import OrderContext, { defaultOrderContext } from "#context/OrderContext"
import ShippingAddressContext from "#context/ShippingAddressContext"

vi.mock("@commercelayer/core", () => ({ updateAddressReference: vi.fn() }))
vi.mock("@commercelayer/core-components", () => ({ updateAddressReference: vi.fn() }))

let latestSetShippingAddress: unknown

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const core = vi.hoisted(() => ({
setResourceTrigger: vi.fn(),
}))

vi.mock("@commercelayer/core", () => ({
vi.mock("@commercelayer/core-components", () => ({
getCustomerInfo: core.getCustomerInfo,
getCustomerAddresses: core.getCustomerAddresses,
getCustomerPayments: core.getCustomerPayments,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const core = vi.hoisted(() => ({
setResourceTrigger: vi.fn(),
}))

vi.mock("@commercelayer/core", () => ({
vi.mock("@commercelayer/core-components", () => ({
getCustomerInfo: core.getCustomerInfo,
getCustomerAddresses: core.getCustomerAddresses,
getCustomerPayments: core.getCustomerPayments,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const core = vi.hoisted(() => ({
getSdk: vi.fn(),
}))

vi.mock("@commercelayer/core", () => ({
vi.mock("@commercelayer/core-components", () => ({
createGiftCard: core.createGiftCard,
getSdk: core.getSdk,
}))
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const core = vi.hoisted(() => ({
getSdk: vi.fn(),
}))

vi.mock("@commercelayer/core", () => ({
vi.mock("@commercelayer/core-components", () => ({
createGiftCard: core.createGiftCard,
getSdk: core.getSdk,
}))
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import InStockSubscriptionContext from "#context/InStockSubscriptionContext"
const mockHookSetInStockSubscription = vi.fn().mockResolvedValue(undefined)
const mockUseInStockSubscriptions = vi.fn()

vi.mock("@commercelayer/hooks", async (importOriginal) => {
const actual = await importOriginal<typeof import("@commercelayer/hooks")>()
vi.mock("@commercelayer/react-hooks-components", async (importOriginal) => {
const actual = await importOriginal<typeof import("@commercelayer/react-hooks-components")>()
return {
...actual,
useInStockSubscriptions: (...args: unknown[]) => mockUseInStockSubscriptions(...args),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import InStockSubscriptionContext from "#context/InStockSubscriptionContext"

const mockUseInStockSubscriptions = vi.fn()

vi.mock("@commercelayer/hooks", async (importOriginal) => {
const actual = await importOriginal<typeof import("@commercelayer/hooks")>()
vi.mock("@commercelayer/react-hooks-components", async (importOriginal) => {
const actual = await importOriginal<typeof import("@commercelayer/react-hooks-components")>()
return {
...actual,
useInStockSubscriptions: (...args: unknown[]) => mockUseInStockSubscriptions(...args),
Expand Down
4 changes: 2 additions & 2 deletions packages/react-components/specs/line_items/LineItems.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ const mockMutate = vi.fn()

const mockUseLineItems = vi.fn()

vi.mock("@commercelayer/hooks", async (importOriginal) => {
const actual = await importOriginal<typeof import("@commercelayer/hooks")>()
vi.mock("@commercelayer/react-hooks-components", async (importOriginal) => {
const actual = await importOriginal<typeof import("@commercelayer/react-hooks-components")>()
return {
...actual,
useLineItems: (...args: unknown[]) => mockUseLineItems(...args),
Expand Down
12 changes: 6 additions & 6 deletions packages/react-components/specs/orders/place-order.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import PaymentMethodContext, { defaultPaymentMethodContext } from "#context/Paym
import PlaceOrderContext, { defaultPlaceOrderContext } from "#context/PlaceOrderContext"
import { PLACE_ORDER_RECHECK_EVENT, usePlaceOrder } from "#hooks/usePlaceOrder"

vi.mock("@commercelayer/core", async (importOriginal) => {
const actual = await importOriginal<typeof import("@commercelayer/core")>()
vi.mock("@commercelayer/core-components", async (importOriginal) => {
const actual = await importOriginal<typeof import("@commercelayer/core-components")>()
return {
...actual,
getSdk: vi.fn().mockReturnValue({
Expand Down Expand Up @@ -859,7 +859,7 @@ describe("PlaceOrderButton handleClick", () => {
vi.mocked(getCardDetailsModule.default).mockReturnValue({ brand: "visa" } as any)
// Always restore getSdk to return a functional mock so sdk-null test
// doesn't corrupt subsequent tests
const { getSdk } = await import("@commercelayer/core")
const { getSdk } = await import("@commercelayer/core-components")
vi.mocked(getSdk).mockReturnValue({
orders: {
retrieve: vi
Expand Down Expand Up @@ -908,7 +908,7 @@ describe("PlaceOrderButton handleClick", () => {

it("returns early if sdk is null", async () => {
const setPlaceOrder = vi.fn()
const { getSdk } = await import("@commercelayer/core")
const { getSdk } = await import("@commercelayer/core-components")
vi.mocked(getSdk).mockReturnValueOnce(null as any)

render(
Expand Down Expand Up @@ -937,7 +937,7 @@ describe("PlaceOrderButton handleClick", () => {

it("sets isValid=false when payment_status is partially_authorized (covers line 535)", async () => {
// Must use non-stripe payment type so sdk.orders.retrieve is called
const { getSdk } = await import("@commercelayer/core")
const { getSdk } = await import("@commercelayer/core-components")
const sdk = vi.mocked(getSdk)() as any
vi.mocked(sdk.orders.retrieve).mockResolvedValueOnce({
id: "order-1",
Expand Down Expand Up @@ -1277,7 +1277,7 @@ describe("usePlaceOrder hook direct", () => {
beforeEach(async () => {
localStorage.clear()
vi.clearAllMocks()
const { getSdk } = await import("@commercelayer/core")
const { getSdk } = await import("@commercelayer/core-components")
vi.mocked(getSdk).mockReturnValue({
orders: {
retrieve: vi
Expand Down
Loading
Loading