infini-ui

v0.1.11

Published

5 days ago

Eshop storefront UI components and hooks

0High
0Medium
0Low

@eshop/ui

Eshop storefront UI components and hooks. Drop-in React component library for any Next.js or React storefront powered by the Eshop platform.

Installation

npm install @eshop/ui

Peer dependencies

Make sure these are installed in your app:

npm install react react-dom @eshop/storefront-sdk @tanstack/react-query

The package also assumes your app has Tailwind CSS configured.

Setup

Wrap your app with the providers in app/layout.tsx (or equivalent):

import { StoreProvider, CartProvider, CartDrawer, Navbar } from "@eshop/ui";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <StoreProvider apiUrl={process.env.NEXT_PUBLIC_API_URL!} publicApiKey={process.env.NEXT_PUBLIC_API_KEY!}>
          <CartProvider>
            <Navbar />
            {children}
            <CartDrawer />
          </CartProvider>
        </StoreProvider>
      </body>
    </html>
  );
}

Environment variables

| Variable | Description | |---|---| | NEXT_PUBLIC_API_URL | Storefront API base URL | | NEXT_PUBLIC_API_KEY | Public API key for the store |

Components

| Component | Description | |---|---| | <StoreProvider> | Initialises SDK + React Query. Wrap your entire app. | | <CartProvider> | Cart state with localStorage persistence. Nest inside StoreProvider. | | <Navbar> | Sticky header with store name, nav links, cart button. | | <CartDrawer> | Slide-over cart with items, discount input, and checkout link. | | <ProductGrid> | Responsive product grid with loading/empty states. | | <ProductCard> | Single product card with image, price, discount badge. | | <ProductCardSkeleton> | Loading skeleton matching ProductCard layout. | | <VariantSelector> | Variant picker + quantity stepper + add-to-cart button. | | <CheckoutForm> | Multi-step checkout (address → delivery → review). | | <OrderCard> | Order summary card with status badge. |

Hooks

| Hook | Description | |---|---| | useStore() | Access SDK instance and store bootstrap data. | | useCart() | Cart state and CRUD methods. | | useProducts(filters?) | Fetch product list. | | useProduct(id) | Fetch single product. | | useVariants(productId) | Fetch product variants. | | useOrders(filters?) | Fetch order list. | | useOrder(id) | Fetch single order. | | useDeliveryFee(pincode, cartTotal) | Calculate delivery fee. | | useDeliveryOptions() | Fetch delivery options. | | useCustomer() | Fetch customer profile. |

Utilities

| Export | Description | |---|---| | formatPrice(amount, currency?) | Format number as currency string. | | formatDate(dateString) | Format ISO date string. | | ORDER_STATUS_LABELS | Human-readable order status map. | | ORDER_STATUS_VARIANTS | Badge variant map for order statuses. |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme