@reviewlico/cli 0.1.0

package/dist/registry/registry/plain/ReviewForm.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { ReviewFormProps } from '../../shared/types';
+import { useSubmitReview } from '../../shared/hooks/useSubmitReview';
+import { StarRating } from './StarRating';
+
+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 rootClass = ['rc-root', 'rc-form', className].filter(Boolean).join(' ');
+
+  if (state.status === 'success') {
+    return (
+      <div className={rootClass}>
+        <div className="rc-form__success">
+          <span className="rc-form__success-icon">✓</span>
+          <p className="rc-form__success-heading">Thank you!</p>
+          <p className="rc-form__success-message">Your review has been submitted.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <form className={rootClass} onSubmit={handleSubmit} noValidate>
+      <h3 className="rc-form__title">{title}</h3>
+
+      <div className="rc-field">
+        <span className="rc-label">Rating</span>
+        <StarRating value={rating} onChange={setRating} />
+        {errors.rating ? <span className="rc-field__error">{errors.rating}</span> : null}
+      </div>
+
+      <div className="rc-field">
+        <label className="rc-label" htmlFor="rc-text">Review</label>
+        <textarea
+          id="rc-text"
+          className="rc-textarea"
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="Share your experience…"
+          rows={4}
+        />
+        {errors.text ? <span className="rc-field__error">{errors.text}</span> : null}
+      </div>
+
+      <div className="rc-field">
+        <label className="rc-label" htmlFor="rc-name">Your name</label>
+        <input
+          id="rc-name"
+          className="rc-input"
+          type="text"
+          value={reviewerName}
+          onChange={(e) => setReviewerName(e.target.value)}
+          placeholder="Jane Smith"
+        />
+        {errors.reviewerName ? <span className="rc-field__error">{errors.reviewerName}</span> : null}
+      </div>
+
+      <div className="rc-field">
+        <label className="rc-label" htmlFor="rc-email">Email address</label>
+        <input
+          id="rc-email"
+          className="rc-input"
+          type="email"
+          value={reviewerEmail}
+          onChange={(e) => setReviewerEmail(e.target.value)}
+          placeholder="jane@example.com"
+        />
+        {errors.reviewerEmail ? <span className="rc-field__error">{errors.reviewerEmail}</span> : null}
+      </div>
+
+      {state.status === 'error' ? (
+        <p key={state.message} className="rc-error-message">{state.message}</p>
+      ) : null}
+
+      <button
+        type="submit"
+        className={['rc-button', state.status === 'submitting' ? 'rc-button--loading' : ''].filter(Boolean).join(' ')}
+        disabled={state.status === 'submitting'}
+      >
+        {state.status === 'submitting' ? 'Submitting…' : submitLabel}
+      </button>
+    </form>
+  );
+}

package/dist/registry/registry/plain/ReviewList.tsx

@@ -0,0 +1,105 @@
+'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 rootClass = ['rc-root', 'rc-list', className].filter(Boolean).join(' ');
+
+  const pagination = state.status === 'success' ? state.data.pagination : null;
+
+  function handleFormSuccess() {
+    setFormVisible(false);
+    if (page === 1) {
+      reload();
+    } else {
+      setPage(1);
+    }
+  }
+
+  return (
+    <div className={rootClass}>
+      <div className="rc-list__header">
+        <h3 className="rc-list__title">{title}</h3>
+        {showForm && !formVisible ? (
+          <button
+            type="button"
+            className="rc-list__toggle-form"
+            onClick={() => setFormVisible(true)}
+          >
+            Write a review
+          </button>
+        ) : null}
+      </div>
+
+      {formVisible ? (
+        <ReviewForm config={config} onSuccess={handleFormSuccess} />
+      ) : null}
+
+      {state.status === 'loading' ? (
+        <div className="rc-cards">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <div key={i} className="rc-skeleton rc-skeleton--card" />
+          ))}
+        </div>
+      ) : state.status === 'error' ? (
+        <p className="rc-list__error">{state.message}</p>
+      ) : state.status === 'success' && state.data.reviews.length === 0 ? (
+        <p className="rc-list__empty">No reviews yet. Be the first!</p>
+      ) : state.status === 'success' ? (
+        <div className="rc-cards">
+          {state.data.reviews.map((review) => (
+            <ReviewCard key={review._id} review={review} />
+          ))}
+        </div>
+      ) : null}
+
+      {pagination && pagination.totalPages > 1 ? (
+        <div className="rc-pagination">
+          <button
+            type="button"
+            className="rc-pagination__btn"
+            onClick={() => setPage((p) => p - 1)}
+            disabled={page <= 1 || state.status === 'loading'}
+          >
+            ← Previous
+          </button>
+          <span className="rc-pagination__info">
+            Page {page} of {pagination.totalPages} · {pagination.total} reviews
+          </span>
+          <button
+            type="button"
+            className="rc-pagination__btn"
+            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/plain/StarRating.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useState } from 'react';
+
+interface StarRatingProps {
+  value: number;
+  onChange?: (value: number) => void;
+  size?: 'sm' | 'md';
+}
+
+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 starsClass = ['rc-stars rc-root', size === 'sm' ? 'rc-stars--sm' : ''].filter(Boolean).join(' ');
+
+  function handleClick(star: number) {
+    onChange!(star);
+    setJustSelected(star);
+    setTimeout(() => setJustSelected(0), 400);
+  }
+
+  return (
+    <span className={starsClass}>
+      {[1, 2, 3, 4, 5].map((star) => {
+        const filled = star <= display;
+        const starClass = [
+          'rc-star',
+          filled ? 'rc-star--filled' : '',
+          interactive ? 'rc-star--interactive' : '',
+          interactive && justSelected === star ? 'rc-star--just-selected' : '',
+        ]
+          .filter(Boolean)
+          .join(' ');
+
+        if (interactive) {
+          return (
+            <button
+              key={star}
+              type="button"
+              className={starClass}
+              aria-label={`Rate ${star} star${star !== 1 ? 's' : ''}`}
+              onClick={() => handleClick(star)}
+              onMouseEnter={() => setHovered(star)}
+              onMouseLeave={() => setHovered(0)}
+            >
+              ★
+            </button>
+          );
+        }
+
+        return (
+          <span key={star} className={starClass}>
+            {filled ? '★' : '☆'}
+          </span>
+        );
+      })}
+    </span>
+  );
+}