BSMNT Commerce Toolkit

The @bsmnt/sdk-gen CLI generates a type-safe GraphQL SDK using Genql.

1. Configuration

Create a config.js file in your target directory (default is ./sdk-gen/). The configuration object must include an endpoint and optional headers.

/**
 * @type {import("@bsmnt/sdk-gen").Config}
 */
module.exports = {
  endpoint: '',
  headers: {}
}

2. Running the Generator

Run the generator using pnpm sdk-gen. By default, it looks for config.js and all .{graphql,gql} files within the ./sdk-gen/ directory.

To use a custom directory, use the --dir flag:

pnpm sdk-gen --dir ./my-custom/directory

3. Using the Generated SDK

After generation, you will see a generated/ folder and an sdk.ts file. You can use the exported bsmntSdk to make type-safe GraphQL calls without needing the graphql package as a production dependency.

// ./sdk-gen/config.js

/**
 * @type {import("@bsmnt/sdk-gen").Config}
 */
module.exports = {
  endpoint: '',
  headers: {}
}

// To run: pnpm sdk-gen

// To run with custom directory: pnpm sdk-gen --dir ./my-custom/directory

// Usage in your code: import config from './config' import { createSdk } from './generated'

export const bsmntSdk = createSdk(config)

The @bsmnt/drop package provides a countdown system powered by a Zustand store.

Core API

• CountdownProvider: A Context Provider that manages the CountdownStore state.
• useCountdownStore: A hook to consume the CountdownStore context. Since it uses Zustand, you can pass a selector function to slice the state.
• zeroPad: A utility function to pad numbers with zeroes.

Implementation Steps

1. Wrap your application (or a specific subtree) with CountdownProvider.
2. Provide configuration props such as endDate, startDate, countdownChildren, and an optional exitDelay.
3. Consume the state in your components using useCountdownStore() with a selector to access properties like humanTimeRemaining.

// 1. Setup the Provider (e.g., in Next.js _app.tsx)
import { CountdownProvider } from '@bsmnt/drop'

export default function App({ Component, pageProps }) {
  return (
    <CountdownProvider
      endDate={Date.now() + 1000 * 5}
      countdownChildren={<Countdown />}
      exitDelay={1000}
      startDate={Date.now()}
    >
      <Component {...pageProps} />
    </CountdownProvider>
  )
}

// 2. Consume the store in a component
import { useCountdownStore } from '@bsmnt/drop'

export const Countdown = () => {
  const humanTimeRemaining = useCountdownStore(
    (state) => state.humanTimeRemaining
  )

  return (
    <ul>
      <li>Days: {humanTimeRemaining.days}</li>
      <li>Seconds: {humanTimeRemaining.seconds}</li>
    </ul>
  )
}

Commerce mutations in the toolkit return discriminated union types for success and error states. These types are generic and depend on the Cart type provided.

MutationError

An error object containing the type of the failed operation and the error object itself.

MutationSuccess

A success object containing the type of the successful operation and the resulting data (the updated Cart).

Supported operation types include:

• fetchCart
• createCart
• createCartWithLines
• addLineItem
• updateLineItem
• removeLineItem

export type MutationError<Cart extends BarebonesCart> = {
  type: keyof Pick<
    STOREFRONT_EVENT_MAP<Cart>,
    | 'addLineItemError'
    | 'fetchCartError'
    | 'createCartError'
    | 'removeLineItemError'
    | 'updateLineItemError'
  >
  error: Error
}

export type MutationSuccess<Cart extends BarebonesCart> = {
  type: keyof Pick<
    STOREFRONT_EVENT_MAP<Cart>,
    | 'addLineItemSuccess'
    | 'fetchCartSuccess'
    | 'createCartSuccess'
    | 'createCartWithLinesSuccess'
    | 'removeLineItemSuccess'
    | 'updateLineItemSuccess'
  >
  data: Cart | null | undefined
}

Because the countdown values (like humanTimeRemaining.seconds) change every second, rendering them directly in a Server-Side Rendered (SSR) environment like Next.js will likely cause a hydration mismatch between the server's static HTML and the client's dynamic state.

Option 1: Suppress Hydration Warning

If you want to render the values immediately, you can use the suppressHydrationWarning attribute on the specific elements containing the time values.

Option 2: Wait for Hydration (Recommended)

To avoid mismatch risks entirely, use a useEffect hook to ensure the component has mounted on the client before rendering the real-time values. You can provide a fallback value (e.g., '59') for the initial server render.

import { useEffect, useState } from 'react'
import { useCountdownStore } from '@bsmnt/drop'

const Countdown = () => {
  const humanTimeRemaining = useCountdownStore((state) => state.humanTimeRemaining)
  const [hasRenderedOnce, setHasRenderedOnce] = useState(false)

  useEffect(() => {
    setHasRenderedOnce(true)
  }, [])

  return (
    <ul>
      <li>Minutes: {hasRenderedOnce ? humanTimeRemaining.minutes : '59'}</li>
      <li>Seconds: {hasRenderedOnce ? humanTimeRemaining.seconds : '59'}</li>
    </ul>
  )
}