@ikas/component-cli 0.133.0 → 1.1.0

package/templates/create-full/src/sub-components/ReviewForm/index.tsx

@@ -1,115 +0,0 @@
-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/templates/create-full/src/sub-components/ReviewForm/styles.css

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

package/templates/create-full/src/sub-components/ReviewSummary/index.tsx

@@ -1,65 +0,0 @@
-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/templates/create-full/src/sub-components/ReviewSummary/styles.css

@@ -1,86 +0,0 @@
-.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/templates/create-full/src/sub-components/Select/index.tsx

@@ -1,86 +0,0 @@
-import { CSSProperties } from "preact";
-import { cx } from "../../utils/cx";
-import { CaretDownSVG, XCircleSVG } from "../icons";
-
-type Size = "xs" | "s" | "m";
-
-interface Option {
-  label: string;
-  value: string;
-}
-
-interface Props {
-  options: Option[];
-  size?: Size;
-  status?: "default" | "error" | "success";
-  value?: string;
-  onChange?: (e: Event) => void;
-  onClear?: () => void;
-  allowClear?: boolean;
-  className?: string;
-  style?: CSSProperties;
-  disabled?: boolean;
-  id?: string;
-  "aria-label"?: string;
-}
-
-const typographyClass: Record<Size, string> = {
-  xs: "text-sm-semibold",
-  s: "text-md-semibold",
-  m: "text-lg-semibold",
-};
-
-export default function Select({
-  options,
-  size = "s",
-  status = "default",
-  value,
-  onChange,
-  onClear,
-  allowClear,
-  className,
-  disabled,
-  id,
-  style,
-  "aria-label": ariaLabel,
-}: Props) {
-  const showClear = allowClear && !!value && !disabled;
-
-  const cls = cx(
-    "kombos-select",
-    `kombos-select--${size}`,
-    showClear && "kombos-select--clearable",
-    typographyClass[size],
-    className,
-  );
-
-  return (
-    <div className="kombos-select-wrap" style={style} data-state={status !== "default" ? status : undefined}>
-      <select
-        id={id}
-        className={cls}
-        value={value}
-        onChange={onChange}
-        disabled={disabled}
-        aria-label={ariaLabel}
-      >
-        {options.map((opt) => (
-          <option key={opt.value} value={opt.value}>
-            {opt.label}
-          </option>
-        ))}
-      </select>
-      <CaretDownSVG className="kombos-select__icon" />
-      {showClear && (
-        <button
-          type="button"
-          className="kombos-select__clear"
-          onClick={onClear}
-          aria-label="Clear selection"
-        >
-          <XCircleSVG />
-        </button>
-      )}
-    </div>
-  );
-}

package/templates/create-full/src/sub-components/Select/styles.css

@@ -1,110 +0,0 @@
-/* ===== Select ===== */
-.kombos-select-wrap {
-  width: 100%;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-
-.kombos-select {
-  appearance: none;
-  width: 100%;
-  background: var(--kombos-white);
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 6px;
-  color: var(--kombos-gray-900);
-  cursor: pointer;
-  transition: border-color 0.15s ease;
-}
-
-.kombos-select:hover {
-  border-color: var(--kombos-gray-300);
-}
-
-/* Sizes — match Button padding + extra right space for icon */
-.kombos-select--xs {
-  padding: 0.4375rem 2rem 0.4375rem 0.9375rem;
-  min-height: 2.25rem;
-}
-
-.kombos-select--s {
-  padding: 0.5625rem 2.25rem 0.5625rem 1.1875rem;
-  min-height: 2.75rem;
-}
-
-.kombos-select--m {
-  padding: 0.6875rem 2.5rem 0.6875rem 1.4375rem;
-  min-height: 3.375rem;
-}
-
-/* Caret icon */
-.kombos-select__icon {
-  position: absolute;
-  right: 0.75rem;
-  pointer-events: none;
-  color: var(--kombos-gray-900);
-  font-size: 1rem;
-  transition: opacity 0.15s ease;
-}
-
-/* Clear button */
-.kombos-select__clear {
-  position: absolute;
-  right: 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0;
-  border: none;
-  border-radius: 50%;
-  color: var(--kombos-gray-700);
-  background-color: var(--kombos-white);
-  font-size: 1rem;
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-
-/* On hover: show clear button, hide caret */
-.kombos-select-wrap:hover .kombos-select__clear {
-  opacity: 1;
-}
-
-.kombos-select-wrap:hover .kombos-select--clearable ~ .kombos-select__icon {
-  opacity: 0;
-}
-
-/* --- Status (standalone + inherited from FormItem) --- */
-[data-state="error"] .kombos-select {
-  border-color: var(--kombos-error);
-}
-
-[data-state="error"] .kombos-select:hover {
-  border-color: var(--kombos-error);
-}
-
-[data-state="success"] .kombos-select {
-  border-color: var(--kombos-success);
-}
-
-[data-state="success"] .kombos-select:hover {
-  border-color: var(--kombos-success);
-}
-
-/* --- Disabled state --- */
-.kombos-select:disabled {
-  background: var(--kombos-gray-50);
-  border-color: var(--kombos-gray-200);
-  color: var(--kombos-gray-300);
-  cursor: not-allowed;
-}
-
-.kombos-select:disabled:hover {
-  border-color: var(--kombos-gray-200);
-}
-
-.kombos-select:disabled ~ .kombos-select__icon {
-  color: var(--kombos-gray-300);
-}

package/templates/create-full/src/sub-components/SkeletonField/index.tsx

@@ -1,12 +0,0 @@
-interface Props {
-  labelWidth?: string;
-}
-
-export default function SkeletonField({ labelWidth = "40%" }: Props) {
-  return (
-    <div className="kombos-skeleton-field">
-      <div className="kombos-skeleton-field__label" style={{ width: labelWidth }} />
-      <div className="kombos-skeleton-field__input" />
-    </div>
-  );
-}

package/templates/create-full/src/sub-components/SkeletonField/styles.css

@@ -1,29 +0,0 @@
-/* ── Skeleton Field ── */
-.kombos-skeleton-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.kombos-skeleton-field__label {
-  height: 1.125rem;
-  border-radius: 4px;
-}
-
-.kombos-skeleton-field__input {
-  width: 100%;
-  height: 2.75rem;
-  border-radius: 6px;
-}
-
-.kombos-skeleton-field__label,
-.kombos-skeleton-field__input {
-  background: linear-gradient(
-    90deg,
-    var(--kombos-gray-100) 25%,
-    var(--kombos-gray-50) 50%,
-    var(--kombos-gray-100) 75%
-  );
-  background-size: 200% 100%;
-  animation: kombos-shimmer 1.5s ease-in-out infinite;
-}

package/templates/create-full/src/sub-components/SliderArrow/index.tsx

@@ -1,26 +0,0 @@
-import type { JSX } from "preact";
-import { CaretLeftSVG, CaretRightSVG } from "../icons";
-import { cx } from "../../utils/cx";
-
-interface Props extends Omit<JSX.HTMLAttributes<HTMLButtonElement>, "direction"> {
-  direction: "left" | "right";
-  disabled?: boolean;
-}
-
-export default function SliderArrow({
-  direction,
-  className,
-  ...rest
-}: Props) {
-  const Icon = direction === "left" ? CaretLeftSVG : CaretRightSVG;
-
-  return (
-    <button
-      className={cx("kombos-slider-arrow", className)}
-      aria-label={direction === "left" ? "Previous" : "Next"}
-      {...rest}
-    >
-      <Icon />
-    </button>
-  );
-}

package/templates/create-full/src/sub-components/SliderArrow/styles.css

@@ -1,24 +0,0 @@
-/* ===== Slider Arrow ===== */
-.kombos-slider-arrow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.75rem;
-  border-radius: 50%;
-  border: 1px solid var(--kombos-gray-200);
-  background: rgba(255, 255, 255, 0.5);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-  cursor: pointer;
-  font-size: 1.25rem;
-  color: var(--kombos-gray-900);
-  transition: background 0.2s;
-}
-
-.kombos-slider-arrow:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.8);
-}
-
-.kombos-slider-arrow:disabled {
-  cursor: default;
-  color: var(--kombos-gray-400);
-}

package/templates/create-full/src/sub-components/SocialLoginButton/index.tsx

@@ -1,24 +0,0 @@
-import { ComponentChildren } from "preact";
-
-interface Props {
-  icon: ComponentChildren;
-  children: ComponentChildren;
-  onClick: () => void;
-}
-
-export default function SocialLoginButton({
-  icon,
-  children,
-  onClick,
-}: Props) {
-  return (
-    <button
-      type="button"
-      className="kombos-social-login-btn text-sm-medium"
-      onClick={onClick}
-    >
-      {icon}
-      <span>{children}</span>
-    </button>
-  );
-}

package/templates/create-full/src/sub-components/SocialLoginButton/styles.css

@@ -1,19 +0,0 @@
-.kombos-social-login-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.625rem;
-  width: 100%;
-  padding: 0.625rem 1.25rem;
-  border: 1px solid var(--kombos-gray-200);
-  border-radius: 6px;
-  background: var(--kombos-white);
-  color: var(--kombos-gray-900);
-  cursor: pointer;
-  transition: border-color 0.15s ease;
-  font-size: 1.125rem;
-}
-
-.kombos-social-login-btn:hover {
-  border-color: var(--kombos-gray-300);
-}

package/templates/create-full/src/sub-components/SpinnerIcon/index.tsx

@@ -1,10 +0,0 @@
-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/templates/create-full/src/sub-components/SpinnerIcon/styles.css

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