Catalog reference

import {
  PLUGIN_CATEGORIES,
  INSTALLABLE_PLUGIN_IDS,
  listAllPlugins,
  listInstallablePlugins,
  getPluginById,
  getPluginBySlug,
  getPluginCategory,
  pluginSlug,
  pluginLogoUrl,
  catalogCopyAsParagraphs,
} from "@storeos/plugins";

listAllPlugins().length;          // 23
listInstallablePlugins().length;  // 20

type PluginCatalogItem = {
  id: PluginId;
  slug?: string;              // URL segment; defaults to id
  name: string;
  description: string;
  tagline?: string;
  installationGuide?: string | string[];
  faq?: string | string[];    // alternating question, answer
  authorName?: string;
  authorUrl?: string;
  logo: string;               // public path, leading slash
  comingSoon?: boolean;       // preview only; Install disabled
  provider?: PluginProvider;  // backend key when connectable today
};

{
  live?:    { /* credentials */ },
  sandbox?: { /* credentials */ },
  activeMode?: "live" | "sandbox",
}

<meta name="google-site-verification" content="AbC123_token-value" />

import { PLUGIN_CATEGORIES, pluginSlug, pluginLogoUrl } from "@storeos/plugins";

export function Marketplace({ cdn }: { cdn?: string }) {
  return PLUGIN_CATEGORIES.map((category) => (
    <section key={category.id}>
      <h2>{category.title}</h2>
      <p>{category.description}</p>

      {category.items.map((item) => (
        <a key={item.id} href={`/plugins/${pluginSlug(item)}`}>
          <img src={pluginLogoUrl(item, cdn)} alt="" />
          <h3>{item.name}</h3>
          <p>{item.tagline ?? item.description}</p>
          {item.comingSoon ? <span>Coming soon</span> : null}
        </a>
      ))}
    </section>
  ));
}

import { catalogCopyAsParagraphs, getPluginById } from "@storeos/plugins";

const plugin = getPluginById("popupsmart");
const faq = catalogCopyAsParagraphs(plugin?.faq);

const pairs = faq.reduce<Array<[string, string]>>((acc, line, i) => {
  if (i % 2 === 0) acc.push([line, faq[i + 1] ?? ""]);
  return acc;
}, []);