@reviewlico/cli 0.1.0

package/dist/registry/registry/tailwind/ReviewForm.tsx

@@ -0,0 +1,199 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { ReviewFormProps } from '../../shared/types';
+import { useSubmitReview } from '../../shared/hooks/useSubmitReview';
+import { StarRating } from './StarRating';
+
+const KEYFRAMES = `
+@keyframes rcErrorIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
+@keyframes rcShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-6px)}30%{transform:translateX(5px)}45%{transform:translateX(-4px)}60%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
+@keyframes rcSuccessIn{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}
+@keyframes rcCheckBounce{0%{transform:scale(0);opacity:0}60%{transform:scale(1.3);opacity:1}100%{transform:scale(1);opacity:1}}
+@keyframes rcSpin{to{transform:rotate(360deg)}}
+@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
+`;
+
+export function ReviewForm({
+  config,
+  onSuccess,
+  onError,
+  title = 'Write a Review',
+  submitLabel = 'Submit Review',
+  className,
+}: ReviewFormProps) {
+  const { state, submit } = useSubmitReview(config);
+
+  const [rating, setRating] = useState(0);
+  const [text, setText] = useState('');
+  const [reviewerName, setReviewerName] = useState('');
+  const [reviewerEmail, setReviewerEmail] = useState('');
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    if (state.status === 'success') {
+      const t = setTimeout(() => onSuccess?.(state.review), 2000);
+      return () => clearTimeout(t);
+    }
+    if (state.status === 'error') onError?.(state.message);
+  }, [state, onSuccess, onError]);
+
+  function validate() {
+    const next: Record<string, string> = {};
+    if (rating === 0) next.rating = 'Please select a star rating.';
+    if (!text.trim()) next.text = 'Review text is required.';
+    if (text.trim().length > 5000) next.text = 'Review must be 5000 characters or less.';
+    if (!reviewerName.trim()) next.reviewerName = 'Your name is required.';
+    if (!reviewerEmail.trim()) next.reviewerEmail = 'Your email is required.';
+    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(reviewerEmail.trim())) {
+      next.reviewerEmail = 'Enter a valid email address.';
+    }
+    setErrors(next);
+    return Object.keys(next).length === 0;
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!validate()) return;
+    void submit({
+      rating,
+      text: text.trim(),
+      reviewerName: reviewerName.trim(),
+      reviewerEmail: reviewerEmail.trim(),
+    });
+  }
+
+  const inputClass =
+    'h-10 w-full rounded-lg border border-[#1e2530] bg-[#0f1318] px-3 text-sm text-[#e8edf5] placeholder:text-[#8a98ab] focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500 transition-colors';
+  const labelClass = 'text-sm font-medium text-[#e8edf5]';
+  const errorClass = 'text-xs text-red-300';
+
+  const rootClass = [
+    'rounded-2xl border border-[#1e2530] p-5 flex flex-col gap-5 w-full max-w-[72rem] mx-auto',
+    'bg-[linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0)),#0f1318]',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  if (state.status === 'success') {
+    return (
+      <div className={rootClass}>
+        <style>{KEYFRAMES}</style>
+        <div
+          className="flex flex-col items-center gap-3 py-8 text-center"
+          style={{ animation: 'rcSuccessIn 0.4s ease-out both' }}
+        >
+          <span
+            className="text-3xl leading-none text-green-400"
+            style={{ animation: 'rcCheckBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.15s both', display: 'inline-block' }}
+          >
+            ✓
+          </span>
+          <p className="text-lg font-semibold tracking-tight text-green-300">Thank you!</p>
+          <p className="text-sm text-[#8a98ab]">Your review has been submitted.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <form className={rootClass} onSubmit={handleSubmit} noValidate>
+      <style>{KEYFRAMES}</style>
+      <h3 className="text-lg font-semibold tracking-tight text-[#e8edf5]">{title}</h3>
+
+      <div className="flex flex-col gap-1.5">
+        <span className={labelClass}>Rating</span>
+        <StarRating value={rating} onChange={setRating} />
+        {errors.rating ? (
+          <span key={errors.rating} className={errorClass} style={{ animation: 'rcErrorIn 0.25s ease-out both' }}>
+            {errors.rating}
+          </span>
+        ) : null}
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <label className={labelClass} htmlFor="rc-text">Review</label>
+        <textarea
+          id="rc-text"
+          className={`${inputClass} !h-auto min-h-[7rem] resize-y py-2`}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="Share your experience…"
+          rows={4}
+        />
+        {errors.text ? (
+          <span key={errors.text} className={errorClass} style={{ animation: 'rcErrorIn 0.25s ease-out both' }}>
+            {errors.text}
+          </span>
+        ) : null}
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <label className={labelClass} htmlFor="rc-name">Your name</label>
+        <input
+          id="rc-name"
+          className={inputClass}
+          type="text"
+          value={reviewerName}
+          onChange={(e) => setReviewerName(e.target.value)}
+          placeholder="Jane Smith"
+        />
+        {errors.reviewerName ? (
+          <span key={errors.reviewerName} className={errorClass} style={{ animation: 'rcErrorIn 0.25s ease-out both' }}>
+            {errors.reviewerName}
+          </span>
+        ) : null}
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <label className={labelClass} htmlFor="rc-email">Email address</label>
+        <input
+          id="rc-email"
+          className={inputClass}
+          type="email"
+          value={reviewerEmail}
+          onChange={(e) => setReviewerEmail(e.target.value)}
+          placeholder="jane@example.com"
+        />
+        {errors.reviewerEmail ? (
+          <span key={errors.reviewerEmail} className={errorClass} style={{ animation: 'rcErrorIn 0.25s ease-out both' }}>
+            {errors.reviewerEmail}
+          </span>
+        ) : null}
+      </div>
+
+      {state.status === 'error' ? (
+        <p
+          key={state.message}
+          className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-300"
+          style={{ animation: 'rcShake 0.5s ease-in-out' }}
+        >
+          {state.message}
+        </p>
+      ) : null}
+
+      <button
+        type="submit"
+        className="self-start inline-flex h-9 items-center gap-2 rounded-lg border border-blue-500 bg-blue-500 px-3 text-sm font-medium text-white transition-colors hover:border-blue-600 hover:bg-blue-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500 disabled:pointer-events-none disabled:opacity-50"
+        disabled={state.status === 'submitting'}
+      >
+        {state.status === 'submitting' ? (
+          <>
+            <svg
+              className="h-3.5 w-3.5 shrink-0"
+              viewBox="0 0 14 14"
+              fill="none"
+              style={{ animation: 'rcSpin 0.8s linear infinite' }}
+              aria-hidden="true"
+            >
+              <circle cx="7" cy="7" r="5.5" stroke="rgba(255,255,255,0.3)" strokeWidth="2" />
+              <path d="M7 1.5A5.5 5.5 0 0 1 12.5 7" stroke="#fff" strokeWidth="2" strokeLinecap="round" />
+            </svg>
+            Submitting…
+          </>
+        ) : submitLabel}
+      </button>
+    </form>
+  );
+}

package/dist/registry/registry/tailwind/ReviewList.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { useState } from 'react';
+import type { ReviewListProps } from '../../shared/types';
+import { useReviews } from '../../shared/hooks/useReviews';
+import { ReviewCard } from './ReviewCard';
+import { ReviewForm } from './ReviewForm';
+
+function ReviewListInner({
+  config,
+  limit = 10,
+  title = 'Customer Reviews',
+  showForm = false,
+  className,
+}: ReviewListProps) {
+  const [page, setPage] = useState(1);
+  const [formVisible, setFormVisible] = useState(false);
+  const { state, reload } = useReviews(config, page, limit);
+
+  const pagination = state.status === 'success' ? state.data.pagination : null;
+
+  function handleFormSuccess() {
+    setFormVisible(false);
+    if (page === 1) {
+      reload();
+    } else {
+      setPage(1);
+    }
+  }
+
+  const rootClass = ['flex flex-col gap-5 p-4 sm:p-6 mx-auto max-w-6xl', className].filter(Boolean).join(' ');
+
+  return (
+    <div className={rootClass}>
+      <div className="flex items-center justify-between gap-4">
+        <h3 className="text-xl font-semibold tracking-tight text-[#e8edf5]">{title}</h3>
+        {showForm && !formVisible ? (
+          <button
+            type="button"
+            className="inline-flex h-9 items-center rounded-lg border border-[#1e2530] bg-transparent px-3 text-sm text-[#8a98ab] transition-colors hover:bg-white/5 hover:text-[#e8edf5]"
+            onClick={() => setFormVisible(true)}
+          >
+            Write a review
+          </button>
+        ) : null}
+      </div>
+
+      {formVisible ? (
+        <ReviewForm config={config} onSuccess={handleFormSuccess} />
+      ) : null}
+
+      {state.status === 'loading' ? (
+        <div className="flex flex-col gap-3">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <div
+              key={i}
+              className="h-24 animate-pulse rounded-xl border border-white/10 bg-white/5"
+            />
+          ))}
+        </div>
+      ) : state.status === 'error' ? (
+        <p className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-center text-sm text-red-300">{state.message}</p>
+      ) : state.status === 'success' && state.data.reviews.length === 0 ? (
+        <p className="py-8 text-center text-sm text-[#8a98ab]">No reviews yet. Be the first!</p>
+      ) : state.status === 'success' ? (
+        <div className="flex flex-col gap-3">
+          {state.data.reviews.map((review) => (
+            <ReviewCard key={review._id} review={review} />
+          ))}
+        </div>
+      ) : null}
+
+      {pagination && pagination.totalPages > 1 ? (
+        <div className="flex items-center justify-between gap-4 pt-2">
+          <button
+            type="button"
+            className="inline-flex h-9 items-center rounded-lg border border-[#1e2530] bg-transparent px-3 text-sm text-[#8a98ab] transition-colors hover:bg-white/5 hover:text-[#e8edf5] disabled:pointer-events-none disabled:opacity-40"
+            onClick={() => setPage((p) => p - 1)}
+            disabled={page <= 1 || state.status === 'loading'}
+          >
+            ← Previous
+          </button>
+          <span className="text-xs text-[#8a98ab]">
+            Page {page} of {pagination.totalPages} · {pagination.total} reviews
+          </span>
+          <button
+            type="button"
+            className="inline-flex h-9 items-center rounded-lg border border-[#1e2530] bg-transparent px-3 text-sm text-[#8a98ab] transition-colors hover:bg-white/5 hover:text-[#e8edf5] disabled:pointer-events-none disabled:opacity-40"
+            onClick={() => setPage((p) => p + 1)}
+            disabled={page >= pagination.totalPages || state.status === 'loading'}
+          >
+            Next →
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function ReviewList(props: ReviewListProps) {
+  const { config } = props;
+  const key = [
+    config.apiUrl ?? '',
+    config.apiKey ?? '',
+    config.externalProductId ?? '',
+  ].join('|');
+  return <ReviewListInner key={key} {...props} />;
+}

package/dist/registry/registry/tailwind/StarRating.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { useState } from 'react';
+
+interface StarRatingProps {
+  value: number;
+  onChange?: (value: number) => void;
+  size?: 'sm' | 'md';
+}
+
+const STAR_POP_KEYFRAME = `@keyframes rcStarPop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}`;
+
+export function StarRating({ value, onChange, size = 'md' }: StarRatingProps) {
+  const [hovered, setHovered] = useState(0);
+  const [justSelected, setJustSelected] = useState(0);
+  const interactive = typeof onChange !== 'undefined';
+  const display = hovered > 0 ? hovered : value;
+
+  const starSize = size === 'sm' ? 'text-base' : 'text-xl';
+
+  function handleClick(star: number) {
+    onChange!(star);
+    setJustSelected(star);
+    setTimeout(() => setJustSelected(0), 400);
+  }
+
+  return (
+    <>
+      {interactive ? <style>{STAR_POP_KEYFRAME}</style> : null}
+      <span className="inline-flex items-center gap-0.5">
+        {[1, 2, 3, 4, 5].map((star) => {
+          const filled = star <= display;
+          const colorClass = filled ? 'text-yellow-400' : 'text-gray-600';
+
+          if (interactive) {
+            return (
+              <button
+                key={star}
+                type="button"
+                className={`${starSize} ${colorClass} cursor-pointer border-none bg-transparent p-0.5 leading-none transition-[color,filter,transform] duration-150 hover:scale-110 hover:drop-shadow-[0_0_5px_rgba(250,204,21,0.55)]`}
+                style={justSelected === star ? { animation: 'rcStarPop 0.4s cubic-bezier(0.34,1.56,0.64,1)' } : undefined}
+                aria-label={`Rate ${star} star${star !== 1 ? 's' : ''}`}
+                onClick={() => handleClick(star)}
+                onMouseEnter={() => setHovered(star)}
+                onMouseLeave={() => setHovered(0)}
+              >
+                ★
+              </button>
+            );
+          }
+
+          return (
+            <span key={star} className={`${starSize} ${colorClass} leading-none`}>
+              {filled ? '★' : '☆'}
+            </span>
+          );
+        })}
+      </span>
+    </>
+  );
+}

package/dist/registry/shared/api.ts

@@ -0,0 +1,130 @@
+import type { PublicReview, ReviewComponentConfig, ReviewPagination } from './types';
+
+/**
+ * Resolves apiUrl and apiKey from props or env vars.
+ * Fallback chain: config prop → VITE_REVIEWLICO_* (Vite) → NEXT_PUBLIC_REVIEWLICO_* (Next.js) → REVIEWLICO_* (generic)
+ * Throws immediately if either value cannot be resolved — never attempts a fetch with missing config.
+ */
+function resolveConfig(config: ReviewComponentConfig): { apiUrl: string; apiKey: string } {
+  // import.meta.env is Vite-only, inlined at build time.
+  // The typeof guard prevents crashes in non-Vite builds (Next.js, Node).
+  // Cast through unknown — ImportMeta is a closed type in strict TS so direct casts fail.
+  const meta = import.meta as unknown as Record<string, unknown>;
+  const viteEnv =
+    typeof meta.env === 'object' && meta.env !== null
+      ? (meta.env as Record<string, string | undefined>)
+      : ({} as Record<string, string | undefined>);
+
+  // Read NEXT_PUBLIC_* directly so Next.js can inline values at build time.
+  // Keep a typeof guard so this stays safe in non-Node runtimes.
+  const nextPublicApiUrl =
+    typeof process !== 'undefined' ? process.env.NEXT_PUBLIC_REVIEWLICO_API_URL : undefined;
+  const nextPublicApiKey =
+    typeof process !== 'undefined' ? process.env.NEXT_PUBLIC_REVIEWLICO_API_KEY : undefined;
+  const genericApiUrl =
+    typeof process !== 'undefined' ? process.env.REVIEWLICO_API_URL : undefined;
+  const genericApiKey =
+    typeof process !== 'undefined' ? process.env.REVIEWLICO_API_KEY : undefined;
+
+  const apiUrl =
+    config.apiUrl ??
+    viteEnv.VITE_REVIEWLICO_API_URL ??
+    nextPublicApiUrl ??
+    genericApiUrl;
+
+  const apiKey =
+    config.apiKey ??
+    viteEnv.VITE_REVIEWLICO_API_KEY ??
+    nextPublicApiKey ??
+    genericApiKey;
+
+  if (!apiUrl)
+    throw new Error(
+      '[reviewlico] apiUrl is required. Pass it as a prop or set one of: ' +
+        'VITE_REVIEWLICO_API_URL, NEXT_PUBLIC_REVIEWLICO_API_URL, REVIEWLICO_API_URL',
+    );
+  if (!apiKey)
+    throw new Error(
+      '[reviewlico] apiKey is required. Pass it as a prop or set one of: ' +
+        'VITE_REVIEWLICO_API_KEY, NEXT_PUBLIC_REVIEWLICO_API_KEY, REVIEWLICO_API_KEY',
+    );
+
+  return { apiUrl, apiKey };
+}
+
+async function apiFetch<T>(
+  config: ReviewComponentConfig,
+  path: string,
+  init?: RequestInit,
+): Promise<T> {
+  const { apiUrl, apiKey } = resolveConfig(config);
+  const url = `${apiUrl.replace(/\/$/, '')}${path}`;
+  const response = await fetch(url, {
+    ...init,
+    headers: {
+      'Content-Type': 'application/json',
+      'X-API-Key': apiKey,
+      ...init?.headers,
+    },
+  });
+
+  if (!response.ok) {
+    let message = `Request failed with status ${response.status}`;
+    try {
+      const body = (await response.json()) as { message?: string };
+      if (body.message) message = body.message;
+    } catch {
+      // ignore JSON parse errors on error bodies
+    }
+    throw new Error(message);
+  }
+
+  return response.json() as Promise<T>;
+}
+
+export interface FetchReviewsParams {
+  externalProductId?: string;
+  page?: number;
+  limit?: number;
+}
+
+export interface FetchReviewsResult {
+  reviews: PublicReview[];
+  pagination: ReviewPagination;
+}
+
+export async function fetchReviews(
+  config: ReviewComponentConfig,
+  params: FetchReviewsParams,
+): Promise<FetchReviewsResult> {
+  const qs = new URLSearchParams();
+  if (params.externalProductId) {
+    qs.set('scope', 'product');
+    qs.set('externalProductId', params.externalProductId);
+  } else {
+    qs.set('scope', 'org');
+  }
+  if (params.page) qs.set('page', String(params.page));
+  if (params.limit) qs.set('limit', String(params.limit));
+
+  return apiFetch<FetchReviewsResult>(config, `/public/reviews?${qs.toString()}`);
+}
+
+export interface CreateReviewPayload {
+  rating: number;
+  text: string;
+  reviewerName: string;
+  reviewerEmail: string;
+  externalProductId?: string;
+}
+
+export async function createReview(
+  config: ReviewComponentConfig,
+  payload: CreateReviewPayload,
+): Promise<PublicReview> {
+  const result = await apiFetch<{ review: PublicReview }>(config, '/public/reviews', {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+  return result.review;
+}

package/dist/registry/shared/hooks/useReviews.ts

@@ -0,0 +1,65 @@
+import { useCallback, useEffect, useReducer } from 'react';
+import { fetchReviews, type FetchReviewsResult } from '../api';
+import type { ReviewComponentConfig } from '../types';
+
+type State =
+  | { status: 'idle' }
+  | { status: 'loading' }
+  | { status: 'success'; data: FetchReviewsResult }
+  | { status: 'error'; message: string };
+
+type Action =
+  | { type: 'FETCH_START' }
+  | { type: 'FETCH_SUCCESS'; payload: FetchReviewsResult }
+  | { type: 'FETCH_ERROR'; message: string };
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'FETCH_START':
+      return { status: 'loading' };
+    case 'FETCH_SUCCESS':
+      return { status: 'success', data: action.payload };
+    case 'FETCH_ERROR':
+      return { status: 'error', message: action.message };
+    default:
+      return state;
+  }
+}
+
+export function useReviews(config: ReviewComponentConfig, page: number, limit: number) {
+  const [state, dispatch] = useReducer(reducer, { status: 'idle' });
+  const { apiUrl, apiKey, externalProductId } = config;
+
+  const load = useCallback(() => {
+    let cancelled = false;
+
+    dispatch({ type: 'FETCH_START' });
+
+    fetchReviews({ apiUrl, apiKey, externalProductId }, {
+      externalProductId,
+      page,
+      limit,
+    })
+      .then((data) => {
+        if (!cancelled) dispatch({ type: 'FETCH_SUCCESS', payload: data });
+      })
+      .catch((err: unknown) => {
+        if (!cancelled) {
+          dispatch({
+            type: 'FETCH_ERROR',
+            message: err instanceof Error ? err.message : 'Failed to load reviews',
+          });
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [apiUrl, apiKey, externalProductId, page, limit]);
+
+  useEffect(() => {
+    return load();
+  }, [load]);
+
+  return { state, reload: load };
+}

package/dist/registry/shared/hooks/useSubmitReview.ts

@@ -0,0 +1,36 @@
+import { useCallback, useState } from 'react';
+import { createReview, type CreateReviewPayload } from '../api';
+import type { PublicReview, ReviewComponentConfig } from '../types';
+
+type SubmitState =
+  | { status: 'idle' }
+  | { status: 'submitting' }
+  | { status: 'success'; review: PublicReview }
+  | { status: 'error'; message: string };
+
+export function useSubmitReview(config: ReviewComponentConfig) {
+  const [state, setState] = useState<SubmitState>({ status: 'idle' });
+
+  const submit = useCallback(
+    async (payload: Omit<CreateReviewPayload, 'externalProductId'>) => {
+      setState({ status: 'submitting' });
+      try {
+        const review = await createReview(config, {
+          ...payload,
+          externalProductId: config.externalProductId,
+        });
+        setState({ status: 'success', review });
+      } catch (err) {
+        setState({
+          status: 'error',
+          message: err instanceof Error ? err.message : 'Submission failed',
+        });
+      }
+    },
+    [config],
+  );
+
+  const reset = useCallback(() => setState({ status: 'idle' }), []);
+
+  return { state, submit, reset };
+}

package/dist/registry/shared/types.ts

@@ -0,0 +1,56 @@
+export interface PublicReview {
+  _id: string;
+  externalProductId?: string;
+  rating: number;
+  text: string;
+  reviewerName: string;
+  createdAt?: string;
+}
+
+export interface ReviewPagination {
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}
+
+export interface ReviewComponentConfig {
+  /**
+   * Base URL of the reviewlico API, e.g. "https://api.example.com".
+   * If omitted, resolved from env vars in order:
+   *   VITE_REVIEWLICO_API_URL → NEXT_PUBLIC_REVIEWLICO_API_URL → REVIEWLICO_API_URL
+   * Note: only Vite and Next.js are supported. CRA is not supported.
+   */
+  apiUrl?: string;
+  /**
+   * Raw API key (rk_...) sent as the X-API-Key header.
+   * This key is client-side and will be visible in the browser bundle — treat it as a public key.
+   * If omitted, resolved from env vars in order:
+   *   VITE_REVIEWLICO_API_KEY → NEXT_PUBLIC_REVIEWLICO_API_KEY → REVIEWLICO_API_KEY
+   */
+  apiKey?: string;
+  /** Scope reviews to a specific product */
+  externalProductId?: string;
+}
+
+export interface ReviewFormProps {
+  config: ReviewComponentConfig;
+  onSuccess?: (review: PublicReview) => void;
+  onError?: (message: string) => void;
+  /** Form heading. Default: "Write a Review" */
+  title?: string;
+  /** Submit button label. Default: "Submit Review" */
+  submitLabel?: string;
+  className?: string;
+}
+
+export interface ReviewListProps {
+  config: ReviewComponentConfig;
+  /** Reviews per page. Default: 10. Max: 100. */
+  limit?: number;
+  /** Section heading. Default: "Customer Reviews" */
+  title?: string;
+  /** Render an inline ReviewForm. Default: false */
+  showForm?: boolean;
+  className?: string;
+}