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.

Installation

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

Quick Start

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

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

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

export default function App() {
  return (
    <FeatureRequest
      appId="your-app-id"
      activeShop={shop}
      firebaseApp={firebaseApp}
      isDev={false}
    />
  );
}

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | appId | string | Yes | — | Identifier used by backend / Firestore collections | | activeShop | Partial<Shop> | Yes | — | Shop context (at minimum shopId and email) | | firebaseApp | FirebaseApp | Yes | — | Firebase app instance (created via initializeApp) | | isDev | boolean | Yes | — | true = staging API, false = production API | | translations | DeepPartial<FeatureRequestTranslations> | No | English | Override UI text for i18n (see below) | | fnAfterSubmit | () => void | No | — | Callback fired after a feature request is submitted | | fnAfterLike | () => void | No | — | Callback fired after a vote/like action |

activeShop fields

| Field | Type | Notes | |-------|------|-------| | shopId | string | Required | | email | string | Required - used for admin detection | | shopOwner | string | Displayed as author name | | domain | string | Shown in user tooltip | | name | string | Shop display name |

isDev - API Environment

Controls which backend the library calls:

// Staging / development
<FeatureRequest isDev={true} ... />
// -> https://domain-staging

// Production
<FeatureRequest isDev={false} ... />
// -> https://domain-production

Translations (i18n)

The library supports full UI text customization. All text defaults to English. Pass a translations object to override any text you need.

Basic usage

<FeatureRequest
  appId="your-app-id"
  activeShop={shop}
  firebaseApp={firebaseApp}
  isDev={false}
  translations={{
    home: {
      pageTitle: "Feature request",
      pageSubtitle: "Every feature request is heard — the AVADA team will work to bring your ideas to life as soon as possible.",
      submitButton: "Submit",
    },
  }}
/>

Only override the fields you need - everything else falls back to the English default.

Full translations

Import FeatureRequestTranslations to get full type-checking and IDE autocompletion for all fields.

import { FeatureRequestTranslations } from "avada-feature-request";

// IDE will guide you through all required fields
const vi: FeatureRequestTranslations = { ... };

Translation sections

| Section | Description | |---------|-------------| | tabs | Tab filter labels (All, New feature, Improvement, Bug report, Submitted) | | featureTypes | Feature type select options in create form | | sort | Sort dropdown labels | | home | Home page title, subtitle, submit button, end message | | emptyState | Empty state heading and description | | create | Create form labels, placeholders, validation messages | | details | Detail page navigation, comment input, buttons | | card | Feature request card (delete modal, anonymous label, tooltips) | | comments | Comment section (reply, block modal, more replies) | | actions | Like/reply count labels |

Extending defaults

import { defaultTranslations } from "avada-feature-request";

// Start from defaults and override specific fields
const custom = {
  ...defaultTranslations,
  home: {
    ...defaultTranslations.home,
    pageTitle: "My Custom Title",
  },
};

Composable Building Blocks

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

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

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

  return (
    <FeatureRequestProvider
      appId="your-app-id"
      activeShop={shop}
      firebaseApp={firebaseApp}
      isDev={false}
    >
      {/*...*/}
    </FeatureRequestProvider>
  );
}

Exports

Components: FeatureRequest (default), FeatureReqHome, FeatureReqTrending, FeatureReqDetails, CreateFeatureReq, UserComment, ActionFeatureReq, NoFeatureRequest

Context / Store: FeatureRequestProvider, hydrateFeatureRequestStore, useFeatureRequestStore

Types: FeatureRequestProviderProps, FeatureRequestProps, FeatureRequestTranslations, FeatureRequestStage, FeatureRequestComment, FeatureRequestQuery, ShopSupport, ActionFeatureReqType

Utilities: defaultTranslations

Event Analytics (Backend)

The package also exports a standalone event-logging module for backend use. It writes events to BigQuery and tracks feature stats in Firestore.

# Install required peer dependencies (backend only)
npm install @google-cloud/bigquery @google-cloud/firestore

import { createEventLogService } from "avada-feature-request/event-analytics";

const service = createEventLogService({
  appId: "your-app-id",
  maxRetries: 3,
  retryDelay: 1000,
});

// Log a single event
await service.logEvent({
  type: "app_installed",
  eventName: "app_installed",
  shopifyDomain: "example.myshopify.com",
  shopName: "Example Store",
  description: "New app installation",
});

// Log multiple events
await service.logEvents([
  { type: "page_view", shopifyDomain: "example.myshopify.com" },
  { type: "action", eventName: "voted", shopifyDomain: "example.myshopify.com" },
]);

Exports

• EventLogService / createEventLogService — BigQuery event logger with retry logic
• FeatureStatsService / saveFeatureStats — Firestore feature stats tracker
• createBigQueryClient / createFirestoreClient — Google Cloud client factories

Environment

Set GOOGLE_CLOUD_CREDENTIALS_APP_REVIEWS with your service account JSON.

Testing

node scripts/test-event-log.js

Data + Backend

• Firestore: The library requires a Firebase app instance passed via firebaseApp. It uses Firestore for real-time subscriptions (feature requests, comments, votes, trending).
• API: Non-Firestore operations (create, comment, block) go through a proxy endpoint. The base URL is controlled by the isDev prop.

Development

yarn dev      # Vite dev server for the demo playground
yarn build    # Bundle library + emit type declarations
yarn test     # Run Jest tests
yarn lint     # Lint the source

Publishing

yarn build && npm publish

License

MIT