Avada Feature Request

React component library that drops a fully featured feature-request board into any React app. It ships with real-time Firestore updates, voting and commenting flows, and a Shopify Polaris-inspired UI so you can launch a feedback hub in minutes instead of building one from scratch.

Why use it

• Drop-in widget with create, vote, comment, and trending views.
• Real-time updates via Firestore subscriptions.
• Headless store + hooks for teams that want to compose their own UI.
• Typed API (TypeScript), CJS/ESM outputs, and bundled styles.
• Polaris styling baked in, so it feels native to Shopify apps out of the box.

Installation

Install the package and its peer dependencies:

npm install avada-feature-request
# or
yarn add avada-feature-request

Quick start

Render the ready-to-use board with your app ID and shop context.

import "@shopify/polaris/build/esm/styles.css"; // once in your app
import { initializeApp } from "firebase/app";
import FeatureRequest from "avada-feature-request";

const shop = {
  shopId: "your-shop-id",
  email: "[email protected]",
  shopOwner: "Shop Owner",
  domain: "yourshop.myshopify.com",
};

const firebaseApp = initializeApp(
  {
    apiKey: "YOUR_FIREBASE_KEY",
    authDomain: "YOUR_FIREBASE_DOMAIN",
    projectId: "YOUR_FIREBASE_PROJECT_ID",
    appId: "YOUR_FIREBASE_APP_ID",
  },
  "avada-feature-request"
);

export default function FeatureRequestBoard() {
  return (
    <FeatureRequest
      appId="YOUR_APP_ID"
      activeShop={shop}
      firebaseApp={firebaseApp}
      firebaseAppName="avada-feature-request"
    />
  );
}

Styles: Polaris CSS is not bundled to keep the package lean—import it once in your app (see the snippet above). Library-specific styles ship with the bundle automatically.

Using a separate Firebase app

The widget spins up (or reuses) its own named Firebase app so it does not clash with your host project's Firebase instance. Pass your app/config and name if you want to control the project explicitly:

import { initializeApp } from "firebase/app";
import FeatureRequest from "avada-feature-request";

const firebaseApp = initializeApp({
  apiKey: "XXX",
  authDomain: "XXX",
  projectId: "XXX",
  appId: "XXX",
}, "avada-feature-request");

export default function FeatureRequestBoard() {
  return (
    <FeatureRequest
      appId="YOUR_APP_ID"
      activeShop={shop}
      firebaseApp={firebaseApp}
      firebaseAppName="avada-feature-request"
    />
  );
}

Required props

• appId: string – Identifier used by the backend/Firestore collections.
• activeShop: Partial<Shop> – At minimum include shopId and email; shopOwner and domain improve context.

The default export already includes library styles and Polaris CSS, so no extra CSS imports are needed.

Composable building blocks

You can assemble your own layout using the provider, components, and store helpers:

import {
  FeatureRequestProvider,
  FeatureReqHome,
  FeatureReqDetails,
  CreateFeatureReq,
  useFeatureRequestStore,
} from "avada-feature-request";

const shop = { shopId: "your-shop-id", email: "[email protected]" };

export function FeatureRequestShell() {
  const { stage, setStage, detailId } = useFeatureRequestStore();

  return (
    <FeatureRequestProvider appId="YOUR_APP_ID" activeShop={shop}>
      {stage === "home" && <FeatureReqHome />}
      {stage === "create" && <CreateFeatureReq isFullPage />}
      {stage === "details" && <FeatureReqDetails featureRequestId={detailId} />}
      {/* Drive navigation */}
      <button onClick={() => setStage("create")}>Request a feature</button>
    </FeatureRequestProvider>
  );
}

Exports at a glance

• Components: FeatureRequest (default), FeatureReqHome, FeatureReqTrending, FeatureReqDetails, CreateFeatureReq, UserComment, ActionFeatureReq, NoFeatureRequest.
• Context/store: FeatureRequestProvider, hydrateFeatureRequestStore, useFeatureRequestStore, FeatureRequestStage.
• Types: FeatureRequestProps, FeatureRequestComment, FeatureRequestQuery, ShopSupport, ActionFeatureReqType, FeatureRequestStage.

Data + backend expectations

• Firestore: The library boots a named Firebase app (avada-feature-request by default) so it stays isolated from your host app's Firebase project. You must pass firebaseApp or firebaseConfig (and optionally firebaseAppName) to point it to your Firebase project; it no longer falls back to a bundled config.
• API calls: Non-Firestore operations call BASE_DOMAIN from src/helpers/fetchApi.ts (defaults to http://localhost:25002/proxy). Point this to your backend when deploying.

Development

• yarn dev – Vite dev server for the demo playground.
• yarn build – Bundle library and emit type declarations.
• yarn test – Run Jest tests.
• yarn lint – Lint the source.

Publishing

Build before publishing to ensure the dist/ artifacts and declaration files are up to date:

yarn build && npm publish

License

MIT © Avada