@trustshop/shopify-inapp-components

React TypeScript components for Shopify in-app dashboard content management.

Installation

npm install @trustshop/shopify-inapp-components

Quick Start

import {
  DashboardProvider,
  TopBanner,
  useTopBanner,
} from "@trustshop/shopify-inapp-components";

function App() {
  return (
    <DashboardProvider
      config={{
        apiUrl: "https://your-api.com/dashboard",
        cacheTime: 300000, // 5 minutes
      }}
    >
      <YourDashboard />
    </DashboardProvider>
  );
}

function YourDashboard() {
  const topBanner = useTopBanner();

  return (
    <TopBanner
      renderBanner={(banner, handlers) => (
        <Banner onDismiss={handlers.onClose}>
          <h2>{banner.title}</h2>
          <p>{banner.description}</p>
          <button onClick={handlers.onAction}>{banner.linkText}</button>
        </Banner>
      )}
    />
  );
}

Features

• 🎯 Singleton Pattern: Efficient data management with single instance
• 🔄 Smart Caching: Automatic cache management with TTL
• 🎨 Flexible UI: Render prop pattern for custom component styling
• 🔒 Type Safe: Full TypeScript support
• ⚛️ React 18+: Support for StrictMode and SSR
• 🚀 Performance: Optimized for production use

Components

DashboardProvider

Main provider component that manages dashboard state.

Banner Components

• TopBanner - Top notification banner
• PopupBanner - Modal/popup banner
• FooterBanner - Footer sticky banner

Content Components

• AppList - Display apps by category
• ArticleList - Display articles/blog posts
• WhatsNewList - Product updates

Hooks

• useDashboard() - Access full dashboard context
• useTopBanner() - Get top banner data
• usePopupBanner() - Get popup banner data
• useFooterBanner() - Get footer banner data
• useApps() - Access apps data
• useArticles() - Access articles data
• useWhatsNew() - Access product updates

Configuration

interface DashboardConfig {
  apiUrl: string;
  cacheTime?: number; // Cache TTL in ms (default: 5 minutes)
  retryAttempts?: number; // Retry attempts on failure (default: 3)
  retryDelay?: number; // Delay between retries in ms (default: 1000)
  headers?: Record<string, string>;
}

API Response Adapter

The SDK automatically adapts various API response formats to a consistent internal structure, supporting flexible field names and nested data.

Development

Local Testing

For UI testing and development, use the sdk-test-app folder:

cd sdk-test-app
npm install
npm run dev

This will start a development server at http://localhost:3002 with:

• Real API integration (proxied to avoid CORS)
• Production-ready WhatsNew component
• Clean UI identical to deployment environment

Project Structure

shopify-inapp-components/
├── src/              # Component source code
├── dist/             # Built package
├── sdk-test-app/     # Development testing environment
└── examples/         # Usage examples

License

MIT

Author

Your Name

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.