@ikas/code-components-mcp 0.104.0 → 0.106.0

package/data/section-templates/product-reviews-section/sub-components/ReviewCard/styles.css

@@ -0,0 +1,95 @@
+.kombos-review-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1.25rem 0;
+  border-bottom: 1px solid var(--kombos-gray-100);
+}
+
+.kombos-review-card:last-child {
+  border-bottom: none;
+}
+
+.kombos-review-card__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.kombos-review-card__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.kombos-review-card__author {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-review-card__date {
+  color: var(--kombos-gray-400);
+}
+
+.kombos-review-card__title {
+  color: var(--kombos-gray-900);
+  margin: 0;
+}
+
+.kombos-review-card__comment {
+  color: var(--kombos-gray-700);
+  margin: 0;
+}
+
+.kombos-review-card__images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+
+.kombos-review-card__image-btn {
+  all: unset;
+  cursor: pointer;
+  border-radius: 6px;
+  overflow: hidden;
+  line-height: 0;
+}
+
+.kombos-review-card__image {
+  width: 4rem;
+  height: 4rem;
+  object-fit: cover;
+  border-radius: 6px;
+  transition: opacity 0.15s ease;
+}
+
+.kombos-review-card__image-btn:hover .kombos-review-card__image {
+  opacity: 0.8;
+}
+
+.kombos-review-card__reply {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  margin-top: 0.5rem;
+  padding: 0.75rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 8px;
+}
+
+.kombos-review-card__reply-header {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.875rem;
+  color: var(--kombos-gray-500);
+}
+
+.kombos-review-card__reply-label {
+  color: var(--kombos-gray-700);
+}
+
+.kombos-review-card__reply-text {
+  color: var(--kombos-gray-700);
+  margin: 0;
+}

package/data/section-templates/product-reviews-section/sub-components/ReviewForm/index.tsx

@@ -0,0 +1,115 @@
+import { observer } from "@ikas/component-utils";
+import type { IkasProduct } from "@ikas/bp-storefront";
+import {
+  getIkasProductCustomerReviewForm,
+  submitCustomerReviewForm,
+  setCustomerReviewFormStar,
+  setCustomerReviewFormTitle,
+  setCustomerReviewFormComment,
+} from "@ikas/bp-storefront";
+import { showToast } from "../../utils/toast";
+import FormItem from "../FormItem";
+import Input from "../Input";
+import Textarea from "../Textarea";
+import StarRating from "../StarRating";
+
+interface Props {
+  product: IkasProduct;
+  onSuccess: () => void;
+  titlePlaceholder: string;
+  commentPlaceholder: string;
+  starRequiredError: string;
+  errorMessage: string;
+}
+
+const ReviewForm = observer(function ReviewForm({
+  product,
+  onSuccess,
+  titlePlaceholder,
+  commentPlaceholder,
+  starRequiredError,
+  errorMessage,
+}: Props) {
+  const form = getIkasProductCustomerReviewForm(product);
+
+  const handleStarChange = (value: number) => {
+    setCustomerReviewFormStar(form, String(value));
+  };
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+
+    const success = await submitCustomerReviewForm(form);
+
+    if (success) {
+      onSuccess();
+    } else {
+      showToast(form.responseMessage || errorMessage, "error");
+    }
+  };
+
+  const starValue = Number(form.star.value) || 0;
+
+  return (
+    <form
+      id="review-form"
+      className="kombos-review-form"
+      onSubmit={handleSubmit}
+    >
+      <div className="kombos-review-form__field">
+        <FormItem
+          status={form.star.hasError ? "error" : "default"}
+          helper={
+            form.star.hasError
+              ? form.star.message || starRequiredError
+              : undefined
+          }
+        >
+          <StarRating
+            value={starValue}
+            interactive
+            onChange={handleStarChange}
+            size="md"
+          />
+        </FormItem>
+      </div>
+
+      <FormItem
+        label={form.title.label || undefined}
+        status={form.title.hasError ? "error" : "default"}
+        helper={form.title.hasError ? form.title.message : undefined}
+      >
+        <Input
+          placeholder={titlePlaceholder}
+          value={form.title.value}
+          onInput={(e) => {
+            setCustomerReviewFormTitle(
+              form,
+              (e.target as HTMLInputElement).value,
+            );
+          }}
+        />
+      </FormItem>
+
+      <FormItem
+        label={form.comment.label || undefined}
+        status={form.comment.hasError ? "error" : "default"}
+        helper={form.comment.hasError ? form.comment.message : undefined}
+      >
+        <Textarea
+          placeholder={commentPlaceholder}
+          value={form.comment.value}
+          onInput={(e) => {
+            setCustomerReviewFormComment(
+              form,
+              (e.target as HTMLTextAreaElement).value,
+            );
+          }}
+          rows={4}
+        />
+      </FormItem>
+    </form>
+  );
+});
+
+export default ReviewForm;

package/data/section-templates/product-reviews-section/sub-components/ReviewForm/styles.css

@@ -0,0 +1,11 @@
+.kombos-review-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.kombos-review-form__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}

package/data/section-templates/product-reviews-section/sub-components/ReviewSummary/index.tsx

@@ -0,0 +1,65 @@
+import type { ComponentChildren } from "preact";
+import type { IkasProductStar } from "@ikas/bp-storefront";
+import { cx } from "../../utils/cx";
+import StarRating from "../StarRating";
+
+interface Props {
+  averageStar: number;
+  totalReview: number;
+  stars: IkasProductStar[];
+  reviewCountText: string;
+  action?: ComponentChildren;
+  className?: string;
+}
+
+export default function ReviewSummary({
+  averageStar,
+  totalReview,
+  stars,
+  reviewCountText,
+  action,
+  className,
+}: Props) {
+  return (
+    <div className={cx("kombos-review-summary", className)}>
+      <div className="kombos-review-summary__overview">
+        <span className="kombos-review-summary__average display-xs-semibold">
+          {averageStar.toFixed(1)}
+        </span>
+        <StarRating value={averageStar} size="md" />
+        <span className="kombos-review-summary__count text-sm-regular">
+          {reviewCountText.replace("{count}", String(totalReview))}
+        </span>
+      </div>
+
+      <div className="kombos-review-summary__bars">
+        {[5, 4, 3, 2, 1].map((starLevel) => {
+          const entry = stars.find((s) => s.star === starLevel);
+          const count = entry?.count ?? 0;
+          const percentage = totalReview > 0 ? (count / totalReview) * 100 : 0;
+
+          return (
+            <div key={starLevel} className="kombos-review-summary__bar-row">
+              <span className="kombos-review-summary__bar-label text-sm-medium">
+                {starLevel}
+              </span>
+              <div className="kombos-review-summary__bar-track">
+                <div
+                  className="kombos-review-summary__bar-fill"
+                  style={{ width: `${percentage}%` }}
+                />
+              </div>
+              <span className="kombos-review-summary__bar-count text-xs-regular">
+                {count}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      {action && (
+        <div className="kombos-review-summary__action">{action}</div>
+      )}
+    </div>
+  );
+}

package/data/section-templates/product-reviews-section/sub-components/ReviewSummary/styles.css

@@ -0,0 +1,86 @@
+.kombos-review-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.5rem 0;
+  border-bottom: 1px solid var(--kombos-gray-200);
+}
+
+@media (min-width: 768px) {
+  .kombos-review-summary {
+    flex-direction: row;
+    align-items: center;
+    gap: 3rem;
+  }
+}
+
+.kombos-review-summary__overview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 8rem;
+}
+
+.kombos-review-summary__average {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-review-summary__count {
+  color: var(--kombos-gray-500);
+  white-space: nowrap;
+}
+
+.kombos-review-summary__bars {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+  width: 100%;
+}
+
+.kombos-review-summary__bar-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.kombos-review-summary__bar-label {
+  color: var(--kombos-gray-700);
+  min-width: 0.75rem;
+  text-align: center;
+}
+
+.kombos-review-summary__bar-track {
+  flex: 1;
+  height: 0.5rem;
+  background: var(--kombos-gray-100);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.kombos-review-summary__bar-fill {
+  height: 100%;
+  background: var(--kombos-gray-900);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.kombos-review-summary__bar-count {
+  color: var(--kombos-gray-500);
+  min-width: 1.5rem;
+  text-align: right;
+}
+
+.kombos-review-summary__action {
+  display: flex;
+  align-items: flex-start;
+  margin-left: auto;
+}
+
+@media (max-width: 767px) {
+  .kombos-review-summary__action {
+    width: 100%;
+    justify-content: center;
+  }
+}

package/data/section-templates/product-reviews-section/sub-components/SpinnerIcon/index.tsx

@@ -0,0 +1,10 @@
+import { cx } from "../../utils/cx";
+import { SpinnerSVG } from "../icons";
+
+interface Props {
+  className?: string;
+}
+
+export default function SpinnerIcon({ className }: Props) {
+  return <SpinnerSVG className={cx("kombos-spinner", className)} />;
+}

package/data/section-templates/product-reviews-section/sub-components/SpinnerIcon/styles.css

@@ -0,0 +1,8 @@
+.kombos-spinner {
+  animation: kombos-spin 1s linear infinite;
+}
+
+@keyframes kombos-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}

package/data/section-templates/product-reviews-section/sub-components/StarRating/index.tsx

@@ -0,0 +1,76 @@
+import { useState } from "preact/hooks";
+import { cx } from "../../utils/cx";
+import { Star1SVG, StarFilledSVG } from "../icons";
+
+interface Props {
+  value: number;
+  max?: number;
+  interactive?: boolean;
+  onChange?: (value: number) => void;
+  size?: "sm" | "md";
+  className?: string;
+}
+
+export default function StarRating({
+  value,
+  max = 5,
+  interactive = false,
+  onChange,
+  size = "md",
+  className,
+}: Props) {
+  const [hovered, setHovered] = useState(0);
+
+  const displayValue = interactive && hovered > 0 ? hovered : value;
+
+  return (
+    <div
+      className={cx(
+        "kombos-star-rating",
+        `kombos-star-rating--${size}`,
+        interactive && "kombos-star-rating--interactive",
+        className
+      )}
+      onMouseLeave={interactive ? () => setHovered(0) : undefined}
+      role={!interactive ? "img" : undefined}
+      aria-label={!interactive ? `${value} out of ${max} stars` : undefined}
+    >
+      {Array.from({ length: max }, (_, i) => {
+        const starIndex = i + 1;
+        const isFilled = starIndex <= Math.round(displayValue);
+        const Icon = isFilled ? StarFilledSVG : Star1SVG;
+
+        if (!interactive) {
+          return (
+            <span
+              key={i}
+              className={cx(
+                "kombos-star-rating__star",
+                isFilled && "kombos-star-rating__star--filled"
+              )}
+              aria-hidden="true"
+            >
+              <Icon />
+            </span>
+          );
+        }
+
+        return (
+          <button
+            key={i}
+            type="button"
+            className={cx(
+              "kombos-star-rating__star",
+              isFilled && "kombos-star-rating__star--filled"
+            )}
+            onClick={() => onChange?.(starIndex)}
+            onMouseEnter={() => setHovered(starIndex)}
+            aria-label={`${starIndex} star`}
+          >
+            <Icon />
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/data/section-templates/product-reviews-section/sub-components/StarRating/styles.css

@@ -0,0 +1,40 @@
+.kombos-star-rating {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
+.kombos-star-rating--sm {
+  font-size: 1rem;
+}
+
+.kombos-star-rating--md {
+  font-size: 1.25rem;
+}
+
+.kombos-star-rating__star {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--kombos-gray-300);
+  line-height: 0;
+}
+
+.kombos-star-rating__star--filled {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-star-rating--interactive .kombos-star-rating__star {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--kombos-gray-900);
+  line-height: 0;
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+
+.kombos-star-rating--interactive .kombos-star-rating__star:hover {
+  color: var(--kombos-gray-900);
+}

package/data/section-templates/product-reviews-section/sub-components/Textarea/index.tsx

@@ -0,0 +1,45 @@
+import type { JSX, Ref } from "preact";
+import { cx } from "../../utils/cx";
+
+const TYPOGRAPHY: Record<string, string> = {
+  s: "text-md-regular",
+  xs: "text-sm-regular",
+};
+
+interface Props
+  extends Omit<JSX.IntrinsicElements["textarea"], "size" | "ref"> {
+  size?: "xs" | "s";
+  status?: "default" | "error" | "success";
+  disabled?: boolean;
+  textareaRef?: Ref<HTMLTextAreaElement>;
+}
+
+export default function Textarea({
+  size = "s",
+  status = "default",
+  disabled,
+  textareaRef,
+  className,
+  value,
+  ...rest
+}: Props) {
+  const cls = cx(
+    "kombos-textarea",
+    `kombos-textarea--${size}`,
+    disabled && "kombos-textarea--disabled",
+    className,
+  );
+
+  return (
+    <div className={cls} data-state={status !== "default" ? status : undefined}>
+      <textarea
+        ref={textareaRef}
+        className={`kombos-textarea__native ${TYPOGRAPHY[size]}`}
+        disabled={disabled}
+        spellcheck={false}
+        value={value ?? ""}
+        {...rest}
+      />
+    </div>
+  );
+}

package/data/section-templates/product-reviews-section/sub-components/Textarea/styles.css

@@ -0,0 +1,82 @@
+/* ===== Textarea Sub-Component ===== */
+
+/* --- Base --- */
+.kombos-textarea {
+  display: flex;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  background: var(--kombos-white);
+  transition: border-color 0.15s ease;
+  width: 100%;
+}
+
+.kombos-textarea:hover {
+  border-color: var(--kombos-gray-300);
+}
+
+.kombos-textarea:focus-within {
+  border-color: var(--kombos-gray-900);
+}
+
+/* --- Sizes --- */
+.kombos-textarea--s {
+  padding: 0.5625rem 0.8125rem;
+}
+
+.kombos-textarea--xs {
+  padding: 0.4375rem 0.75rem;
+}
+
+/* --- Native textarea --- */
+.kombos-textarea__native {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--kombos-gray-900);
+  padding: 0;
+  resize: vertical;
+  min-height: 5rem;
+}
+
+.kombos-textarea__native::placeholder {
+  color: var(--kombos-gray-400);
+}
+
+/* --- Status (standalone + inherited from FormItem) --- */
+.kombos-textarea[data-state="error"],
+[data-state="error"] .kombos-textarea {
+  border-color: var(--kombos-error);
+}
+
+.kombos-textarea[data-state="error"]:hover,
+.kombos-textarea[data-state="error"]:focus-within,
+[data-state="error"] .kombos-textarea:hover,
+[data-state="error"] .kombos-textarea:focus-within {
+  border-color: var(--kombos-error);
+}
+
+.kombos-textarea[data-state="success"],
+[data-state="success"] .kombos-textarea {
+  border-color: var(--kombos-success);
+}
+
+.kombos-textarea[data-state="success"]:hover,
+.kombos-textarea[data-state="success"]:focus-within,
+[data-state="success"] .kombos-textarea:hover,
+[data-state="success"] .kombos-textarea:focus-within {
+  border-color: var(--kombos-success);
+}
+
+/* --- Disabled state --- */
+.kombos-textarea--disabled {
+  background: var(--kombos-gray-50);
+  border-color: var(--kombos-gray-200);
+  pointer-events: none;
+}
+
+.kombos-textarea--disabled .kombos-textarea__native,
+.kombos-textarea--disabled .kombos-textarea__native::placeholder {
+  color: var(--kombos-gray-300);
+}