📘 Apiwiz Catalog Library

A React component to render API documentation
Supports rendering OAS (OpenAPI) or Guide documentation dynamically based on the provided configuration.

✨ Features

• Switch between Catalog (OAS) and Guide view.
• Supports different module types (Core UI, Dev Portal, etc.).
• Fully themeable with Light and Dark modes.
• Simple integration with customizable layout.

🚀 Installation

npm install apiwiz-catalog-library

🛠️ Local Development

To run the package locally with a test server and routes:

npm run serve

🔧 Build & Test Locally

If you're developing locally and want to test this package in another (consuming) app:

1. Build the package:

npm run build

2. Create a tarball using npm pack:

npm pack

This will generate a folder like:

apiwiz-catalog-library-1.0.0.tgz

3. Install it in the consuming app using a relative or absolute path:

npm install path_to_package/apiwiz-catalog-library-1.0.0.tgz

This is helpful for testing before publishing to a registry.

📦 Usage

Import Styles

import "@apiwiz/apiwiz-catalog-library/styles.css";

Use the Component

import { ApiwizCatalog, MODULE_TYPE, COMPONENT_TYPE, APP_THEME_OPTION } from "@apiwiz/apiwiz-catalog-library";

<ApiwizCatalog
  appTheme={theme === 'theme--light' ? APP_THEME_OPTION.LIGHT : APP_THEME_OPTION.DARK}
  moduleType={MODULE_TYPE.EXTERNAL}
  swaggerData={swagger}
  selectedMethod={selectedOperation.apiMethod}
  selectedPath={selectedOperation.endpoint}
  componentType={COMPONENT_TYPE.CATALOG}
  layoutStyles={{
    width: "100%",
    height: "100vh",
    minHeight: "100vh",
  }}
/>

For NextJS

import { APP_THEME_OPTION, COMPONENT_TYPE, MODULE_TYPE } from "@apiwiz/apiwiz-catalog-library";
import dynamic from "next/dynamic";
const ApiwizCatalog = dynamic(
  () => import("@apiwiz/apiwiz-catalog-library").then(mod => mod.ApiwizCatalog),
  { ssr: false }
);
<ApiwizCatalog
  appTheme={theme === 'theme--light' ? APP_THEME_OPTION.LIGHT : APP_THEME_OPTION.DARK}
  moduleType={MODULE_TYPE.EXTERNAL}
  swaggerData={swagger}
  selectedMethod={selectedOperation.apiMethod}
  selectedPath={selectedOperation.endpoint}
  componentType={COMPONENT_TYPE.CATALOG}
  layoutStyles={{
    width: "100%",
    height: "100vh",
    minHeight: "100vh",
  }}
/>

🧩 Props

type ComponentType = 'CATALOG' | 'GUIDE';
type ModuleType = 'CORE_UI' | 'DEV_PORTAL' | 'OPEN_API' | 'EXTERNAL';
type ThemeType = 'LIGHT' | 'DARK';

interface ApiwizCatalogProps {
  componentType: ComponentType;
  moduleType: ModuleType;
  appTheme: ThemeType;
  layoutStyles?: React.CSSProperties;
  swaggerData?: object;
  selectedMethod?: string;
  selectedPath?: string;
}

Required Props

| Prop | Type | Description | |-----------------|---------------------------------------|--------------------------------------------------| | componentType | 'CATALOG' | 'GUIDE' | Type of component to render | | moduleType | 'CORE_UI' | 'DEV_PORTAL' | 'OPEN_API' | 'EXTERNAL' | The source module type | | appTheme | 'LIGHT' | 'DARK' | Theme of the component |

Optional Props

| Prop | Type | Description | |------------------|-----------------------|--------------------------------------| | layoutStyles | React.CSSProperties | Custom inline styles for the layout | | swaggerData | object | OAS JSON object (for Catalog) | | selectedMethod | string | Selected HTTP method (e.g., "GET") | | selectedPath | string | Selected API endpoint path |

🧱 Constants

MODULE_TYPE

export const MODULE_TYPE = {
  CORE_UI: 'CORE_UI',
  DEV_PORTAL: 'DEV_PORTAL',
  OPEN_API: 'OPEN_API',
  EXTERNAL: 'EXTERNAL',
};

COMPONENT_TYPE

export const COMPONENT_TYPE = {
  CATALOG: 'CATALOG',
  GUIDE: 'GUIDE',
};

SCREENSHOTS

📄 License

MIT © Apiwiz