@haus-storefront/core

core

This library was generated with Nx.

Usage

To use the core package in your app, wrap your application with the DataProvider from @haus-storefront/core. This provider handles platform, API, and feature configuration for your storefront.

Example: Web App (React)

import { StrictMode } from 'react'
import * as ReactDOM from 'react-dom/client'
import App from './app/app'
import { DataProvider } from '@haus-storefront/core'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)

root.render(
  <StrictMode>
    <DataProvider
      provider="vendure"
      platform="web"
      options={{
        apiUrl: 'https://your-api-url',
        vendureToken: 'YOUR_TOKEN',
        enabledFeatures: {
          customPriceCurrency: 'CURRENCY',
        },
        persistOptions: {
          enabled: false,
        },
      }}
    >
      <App />
    </DataProvider>
  </StrictMode>,
)

Example: Mobile App (React Native)

import { Stack } from 'expo-router'
import { DataProvider } from '@haus-storefront/core'

export default function RootLayout() {
  return (
    <DataProvider
      provider="vendure"
      platform="native"
      options={{
        apiUrl: 'https://your-api-url',
        vendureToken: 'YOUR_TOKEN',
        enabledFeatures: {
          customPriceCurrency: 'CURRENCY',
        },
        persistOptions: {
          enabled: false,
        },
      }}
    >
      <Stack />
    </DataProvider>
  )
}

Replace the apiUrl, vendureToken, and customPriceCurrency with your own values.

DataProvider options explained

Option	Type	Description
provider	string	Which backend/provider to use. E.g. "vendure".
platform	string	Which platform the app is running on. E.g. "web" for web, "native" for React Native.
options.apiUrl	string	URL to your backend API (e.g. Vendure GraphQL endpoint).
options.vendureToken	string	Token or channel name to identify the correct channel in Vendure.
options.enabledFeatures	object	Enables extra features. E.g. customPriceCurrency to set a currency.
options.enabledFeatures.customPriceCurrency	string	If you want to display prices in a specific currency, e.g. "SEK".
options.persistOptions.enabled	boolean	Whether state/data should be persisted locally (e.g. in localStorage or AsyncStorage).

Note: persistOptions controls whether the entire TanStack Query cache and related state is persisted (e.g. in localStorage on web or AsyncStorage on mobile). If set to true, all query data, mutations, and cache will survive page reloads and app restarts. If set to false, all state is in-memory only and will be lost on reload or restart.

Example:

• provider: "vendure" – specifies that you are using Vendure as your e-commerce backend.
• platform: "web" or "native" – determines if the component optimizes for browser or mobile.
• apiUrl: The address to your shop API, e.g. "https://ehandel.hemglass.se.staging.haus.se/shop-api".
• vendureToken: An identifier for your channel in Vendure, e.g. "VAS".
• enabledFeatures.customPriceCurrency: If you want to display prices in a specific currency, e.g. "SEK".
• persistOptions.enabled: Set to true if you want the user's session/order to be persisted between reloads (e.g. on mobile), otherwise false.

Building your own components

You can build your own components using the hooks and compound pattern provided by the packages. Below are two ways to build a login form:

1. Using the provided compound component (recommended)

The compound pattern exposes a set of components that work together via context, making it easy to compose forms with full accessibility and state management:

import { Login } from '@haus-storefront/authentication'
;<Login.Root>
  <Login.Form>
    <Login.EmailInput />
    <Login.PasswordInput />
    <Login.SubmitButton>Login</Login.SubmitButton>
  </Login.Form>
</Login.Root>

You can also use the render prop pattern for full control:

<Login.Root>
  {({ isLoading, loginError, loginSuccess, login }) => (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        const form = e.target as HTMLFormElement
        const formData = new FormData(form)
        const username = formData.get('email') as string
        const password = formData.get('password') as string
        login(username, password)
      }}
    >
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Logging in...' : 'Login'}
      </button>
      {loginError && <div>Error: {loginError.message}</div>}
      {loginSuccess && <div>Login successful!</div>}
    </form>
  )}
</Login.Root>

2. By using the hook directly

If you want to build your own UI from scratch, you can use the hook directly:

import { useLoginProps } from '@haus-storefront/authentication'

export function CustomLogin() {
  const {
    isLoading,
    loginError,
    loginSuccess,
    login,
    getFormProps,
    getEmailInputProps,
    getPasswordInputProps,
    getSubmitButtonProps,
  } = useLoginProps({})

  return (
    <form {...getFormProps()}>
      <input {...getEmailInputProps()} />
      <input {...getPasswordInputProps()} />
      <button {...getSubmitButtonProps()}>{isLoading ? 'Logging in...' : 'Login'}</button>
      {loginError && <div>Error: {loginError.message}</div>}
      {loginSuccess && <div>Login successful!</div>}
    </form>
  )
}

Both approaches give you full control over state, error handling, and accessibility.

Running unit tests

Run nx test core