@ikas/code-components-mcp 0.104.0 → 0.106.0

package/data/section-templates/product-detail-section/children/ProductDetailOptionSet/components/OptionChoice/components/ChoiceSelect/styles.css

@@ -0,0 +1,34 @@
+/* Checklist (multi-select) */
+.kombos-option-choice__checklist {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  padding: 0.5rem;
+  max-height: 15rem;
+  overflow-y: auto;
+}
+
+.kombos-option-choice__checklist--error {
+  border-color: var(--kombos-error);
+}
+
+.kombos-option-choice__checklist-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.kombos-option-choice__checklist-row:hover {
+  background-color: var(--kombos-gray-50);
+}
+
+.kombos-option-choice__checklist-price {
+  color: var(--kombos-gray-500);
+  margin-left: auto;
+}

package/data/section-templates/product-detail-section/children/ProductDetailOptionSet/components/OptionChoice/components/ChoiceSwatch/index.tsx

@@ -0,0 +1,121 @@
+import { useState } from "preact/hooks";
+import {
+  IkasProductOption,
+  selectValue,
+  isProductOptionSelectValueSelected,
+  getProductOptionFormattedLabel,
+  getSrc,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { cx } from "../../../../../../utils/cx";
+import FormItem from "../../../../../../sub-components/FormItem";
+import Checkbox from "../../../../../../sub-components/Checkbox";
+import ImagePreviewModal from "../../../../../../sub-components/ImagePreviewModal";
+import { EyeSVG } from "../../../../../../sub-components/icons";
+import { getSelectValuePrice } from "../../../../../../utils/optionPrice";
+
+interface Props {
+  option: IkasProductOption;
+  errored: boolean;
+  requiredErrorText: string;
+  constraintText?: string;
+}
+
+const ChoiceSwatch = observer(function ChoiceSwatch({
+  option,
+  errored,
+  requiredErrorText,
+  constraintText,
+}: Props) {
+  const settings = option.selectSettings;
+  const [preview, setPreview] = useState<{
+    src: string;
+    alt: string;
+  } | null>(null);
+
+  return (
+    <FormItem
+      label={getProductOptionFormattedLabel(option)}
+      status={errored ? "error" : "default"}
+      description={option.optionalText}
+      helper={errored ? requiredErrorText : constraintText}
+    >
+      <div className="kombos-option-choice__swatch-grid">
+        {settings?.values?.map((val) => {
+          const isSelected = isProductOptionSelectValueSelected(option, val);
+          const thumbSrc = val.thumbnailImage
+            ? getSrc(val.thumbnailImage, 180)
+            : null;
+          const price = getSelectValuePrice(option, val);
+
+          return (
+            <div key={val.id} className="kombos-option-choice__swatch-item">
+              <button
+                type="button"
+                className={cx("kombos-option-choice__swatch-btn", isSelected && "kombos-option-choice__swatch-btn--selected")}
+                onClick={() => {
+                  if (thumbSrc) {
+                    const largeSrc = getSrc(val.thumbnailImage!, 800);
+                    setPreview({ src: largeSrc, alt: val.value });
+                  } else {
+                    selectValue(option, val);
+                  }
+                }}
+                title={val.value}
+              >
+                {thumbSrc ? (
+                  <>
+                    <img
+                      src={thumbSrc}
+                      alt={val.value}
+                      className="kombos-option-choice__swatch-img"
+                    />
+                    <div className="kombos-option-choice__swatch-eye">
+                      <EyeSVG />
+                    </div>
+                  </>
+                ) : (
+                  <span
+                    className="kombos-option-choice__swatch-color"
+                    style={{
+                      backgroundColor: val.colorCode ?? "transparent",
+                    }}
+                  />
+                )}
+              </button>
+              {thumbSrc ? (
+                <div className="kombos-option-choice__swatch-footer">
+                  <Checkbox
+                    checked={isSelected}
+                    onChange={() => selectValue(option, val)}
+                  />
+                  {price && (
+                    <span className="kombos-option-choice__swatch-price text-xs-regular">
+                      {price}
+                    </span>
+                  )}
+                </div>
+              ) : (
+                price && (
+                  <span className="kombos-option-choice__swatch-price text-xs-regular">
+                    {price}
+                  </span>
+                )
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {preview && (
+        <ImagePreviewModal
+          src={preview.src}
+          alt={preview.alt}
+          onClose={() => setPreview(null)}
+        />
+      )}
+    </FormItem>
+  );
+});
+
+export default ChoiceSwatch;

package/data/section-templates/product-detail-section/children/ProductDetailOptionSet/components/OptionChoice/components/ChoiceSwatch/styles.css

@@ -0,0 +1,87 @@
+/* Swatch grid */
+.kombos-option-choice__swatch-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.625rem;
+}
+
+/* Individual swatch item (button + price) */
+.kombos-option-choice__swatch-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+/* Swatch button — square like Badge */
+.kombos-option-choice__swatch-btn {
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  padding: 0.125rem;
+  cursor: pointer;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--kombos-white);
+  position: relative;
+  transition: border-color 0.15s;
+}
+
+.kombos-option-choice__swatch-btn:hover:not(.kombos-option-choice__swatch-btn--selected) {
+  border-color: var(--kombos-gray-400);
+}
+
+.kombos-option-choice__swatch-btn--selected {
+  border-color: var(--kombos-gray-900);
+}
+
+/* Color fill */
+.kombos-option-choice__swatch-color {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+}
+
+/* Image inside swatch */
+.kombos-option-choice__swatch-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+/* Eye icon overlay on image swatches */
+.kombos-option-choice__swatch-eye {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.35);
+  border-radius: 4px;
+  opacity: 0;
+  transition: opacity 0.15s;
+  cursor: pointer;
+  font-size: 1rem;
+  color: var(--kombos-white);
+}
+
+.kombos-option-choice__swatch-btn:hover .kombos-option-choice__swatch-eye {
+  opacity: 1;
+}
+
+/* Footer row: checkbox + price for image swatches */
+.kombos-option-choice__swatch-footer {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+/* Price below swatch */
+.kombos-option-choice__swatch-price {
+  color: var(--kombos-gray-500);
+  text-align: center;
+}

package/data/section-templates/product-detail-section/children/ProductDetailOptionSet/components/OptionChoice/index.tsx

@@ -0,0 +1,57 @@
+import {
+  IkasProductOption,
+  isChoiceOptionSelectType,
+  isChoiceOptionSwatchType,
+  hasError as hasOptionError,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import ChoiceSelect from "./components/ChoiceSelect";
+import ChoiceSwatch from "./components/ChoiceSwatch";
+import ChoiceBox from "./components/ChoiceBox";
+
+interface Props {
+  option: IkasProductOption;
+  showError: boolean;
+  requiredErrorText: string;
+  placeholderText: string;
+  minLabelText: string;
+  maxLabelText: string;
+}
+
+const OptionChoice = observer(function OptionChoice({
+  option,
+  showError,
+  requiredErrorText,
+  placeholderText,
+  minLabelText,
+  maxLabelText,
+}: Props) {
+  const errored = showError && hasOptionError(option);
+  const settings = option.selectSettings;
+  if (!settings) return null;
+
+  const isSelect = isChoiceOptionSelectType(option);
+  const isSwatch = isChoiceOptionSwatchType(option);
+
+  const constraintParts: string[] = [];
+  if (settings.minSelect != null)
+    constraintParts.push(`${minLabelText}${settings.minSelect}`);
+  if (settings.maxSelect != null)
+    constraintParts.push(`${maxLabelText}${settings.maxSelect}`);
+  const constraintText =
+    constraintParts.length > 0 ? constraintParts.join(" / ") : undefined;
+
+  const common = { option, errored, requiredErrorText, constraintText };
+
+  if (isSelect) {
+    return <ChoiceSelect {...common} placeholderText={placeholderText} />;
+  }
+
+  if (isSwatch) {
+    return <ChoiceSwatch {...common} />;
+  }
+
+  return <ChoiceBox {...common} />;
+});
+
+export default OptionChoice;

package/data/section-templates/product-detail-section/children/ProductDetailOptionSet/components/OptionColorPicker/index.tsx

@@ -0,0 +1,54 @@
+import {
+  IkasProductOption,
+  hasError as hasOptionError,
+  getProductOptionFormattedLabel,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import FormItem from "../../../../sub-components/FormItem";
+import ColorInput from "../../../../sub-components/ColorInput";
+
+interface Props {
+  option: IkasProductOption;
+  showError: boolean;
+  requiredErrorText: string;
+}
+
+const OptionColorPicker = observer(function OptionColorPicker({
+  option,
+  showError,
+  requiredErrorText,
+}: Props) {
+  const errored = showError && hasOptionError(option);
+  const hasValue = option.values && option.values.length > 0;
+  const currentColor = option.values?.[0] ?? "#FFFFFF";
+
+  const handleChange = (e: Event) => {
+    const hex = (e.target as HTMLInputElement).value;
+    option.values = [hex];
+  };
+
+  const handleClear = () => {
+    option.values = [];
+  };
+
+  const inputId = `option-color-${option.id}`;
+
+  return (
+    <FormItem
+      label={getProductOptionFormattedLabel(option)}
+      htmlFor={inputId}
+      status={errored ? "error" : "default"}
+      description={option.optionalText}
+      helper={errored ? requiredErrorText : undefined}
+    >
+      <ColorInput
+        id={inputId}
+        value={currentColor}
+        onInput={handleChange}
+        onClear={hasValue ? handleClear : undefined}
+      />
+    </FormItem>
+  );
+});
+
+export default OptionColorPicker;

package/data/section-templates/product-detail-section/children/ProductDetailOptionSet/components/OptionDatePicker/index.tsx

@@ -0,0 +1,124 @@
+import {
+  IkasProductOption,
+  hasError as hasOptionError,
+  getProductOptionFormattedLabel,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import FormItem from "../../../../sub-components/FormItem";
+import Input from "../../../../sub-components/Input";
+
+interface Props {
+  option: IkasProductOption;
+  showError: boolean;
+  requiredErrorText: string;
+  minLabelText: string;
+  maxLabelText: string;
+}
+
+function formatDateForInput(date: Date): string {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+
+function formatDateForDisplay(dateStr: string): string {
+  const [y, m, d] = dateStr.split("-");
+  return `${d}.${m}.${y}`;
+}
+
+function computeMinMaxDates(option: IkasProductOption) {
+  const settings = option.dateSettings;
+  let minDate: string | undefined;
+  let maxDate: string | undefined;
+
+  if (settings) {
+    if (settings.min) {
+      minDate = formatDateForInput(new Date(settings.min));
+    } else if (settings.minRelativeNextDate != null) {
+      const d = new Date();
+      d.setDate(d.getDate() + settings.minRelativeNextDate);
+      minDate = formatDateForInput(d);
+    }
+
+    if (settings.max) {
+      maxDate = formatDateForInput(new Date(settings.max));
+    } else if (settings.maxRelativeNextDate != null) {
+      const d = new Date();
+      d.setDate(d.getDate() + settings.maxRelativeNextDate);
+      maxDate = formatDateForInput(d);
+    }
+  }
+
+  return { minDate, maxDate };
+}
+
+const OptionDatePicker = observer(function OptionDatePicker({
+  option,
+  showError,
+  requiredErrorText,
+  minLabelText,
+  maxLabelText,
+}: Props) {
+  const errored = showError && hasOptionError(option);
+  const storedValue = option.values?.[0] ?? "";
+  const currentValue = storedValue
+    ? formatDateForInput(new Date(storedValue))
+    : "";
+  const { minDate, maxDate } = computeMinMaxDates(option);
+
+  const applyDateValue = (val: string) => {
+    if (!val) {
+      option.values = [];
+      return;
+    }
+    const date = new Date(val);
+    if (isNaN(date.getTime()) || date.getFullYear() < 1900) return;
+    date.setHours(23, 59, 0, 0);
+    option.values = [date.toString()];
+  };
+
+  const handleChange = (e: Event) => {
+    applyDateValue((e.target as HTMLInputElement).value);
+  };
+
+  const handleBlur = (e: Event) => {
+    applyDateValue((e.target as HTMLInputElement).value);
+  };
+
+  const inputId = `option-date-${option.id}`;
+
+  return (
+    <FormItem
+      label={getProductOptionFormattedLabel(option)}
+      htmlFor={inputId}
+      status={errored ? "error" : "default"}
+      description={option.optionalText}
+      helper={
+        errored
+          ? requiredErrorText
+          : minDate || maxDate
+            ? [
+                minDate && `${minLabelText}${formatDateForDisplay(minDate)}`,
+                maxDate && `${maxLabelText}${formatDateForDisplay(maxDate)}`,
+              ]
+                .filter(Boolean)
+                .join(" — ")
+            : undefined
+      }
+    >
+      <Input
+        id={inputId}
+        type="date"
+        value={currentValue}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        min={minDate}
+        max={maxDate}
+        size="xs"
+      />
+    </FormItem>
+  );
+});
+
+export default OptionDatePicker;

package/data/section-templates/product-detail-section/children/ProductDetailOptionSet/components/OptionDatePicker/styles.css

@@ -0,0 +1 @@
+/* Styles handled by Input sub-component */

package/data/section-templates/product-detail-section/children/ProductDetailOptionSet/components/OptionFile/index.tsx

@@ -0,0 +1,217 @@
+import {
+  IkasProductOption,
+  productOptionFileUpload,
+  hasError as hasOptionError,
+  getProductOptionFormattedLabel,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { useState, useRef } from "preact/hooks";
+import FormItem from "../../../../sub-components/FormItem";
+import { UploadSVG, TrashSVG } from "../../../../sub-components/icons";
+
+interface Props {
+  option: IkasProductOption;
+  showError: boolean;
+  requiredErrorText: string;
+  minLabelText: string;
+  maxLabelText: string;
+  fileFallbackNameText: string;
+  fileDropText: string;
+  uploadingText: string;
+  uploadFailedText: string;
+  fileSizeErrorText: string;
+  fileTypeErrorText: string;
+  maxFilesErrorText: string;
+}
+
+const MAX_FILE_SIZE_MB = 4;
+
+const OptionFile = observer(function OptionFile({
+  option,
+  showError,
+  requiredErrorText,
+  minLabelText,
+  maxLabelText,
+  fileFallbackNameText,
+  fileDropText,
+  uploadingText,
+  uploadFailedText,
+  fileSizeErrorText,
+  fileTypeErrorText,
+  maxFilesErrorText,
+}: Props) {
+  const [isUploading, setIsUploading] = useState(false);
+  const [fileError, setFileError] = useState<string | null>(null);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const errored = showError && hasOptionError(option);
+  const settings = option.fileSettings;
+  const uploadedFiles = option.values ?? [];
+
+  const validateFiles = (files: File[]): string | null => {
+    for (const file of files) {
+      if (file.size > MAX_FILE_SIZE_MB * 1024 * 1024) {
+        return fileSizeErrorText
+          .replace("{fileName}", file.name)
+          .replace("{maxSize}", String(MAX_FILE_SIZE_MB));
+      }
+
+      if (settings?.allowedExtensions?.length) {
+        const ext = file.name.split(".").pop()?.toLowerCase() ?? "";
+        const allowed = settings.allowedExtensions.map((e) =>
+          e.toLowerCase().replace(/^\./, ""),
+        );
+        if (!allowed.includes(ext)) {
+          return fileTypeErrorText
+            .replace("{fileName}", file.name)
+            .replace("{ext}", `.${ext}`);
+        }
+      }
+    }
+
+    const totalCount = uploadedFiles.length + files.length;
+    if (settings?.maxQuantity != null && totalCount > settings.maxQuantity) {
+      return maxFilesErrorText.replace("{max}", String(settings.maxQuantity));
+    }
+
+    return null;
+  };
+
+  const handleUpload = async (fileList: FileList | null) => {
+    if (!fileList?.length || isUploading) return;
+    const files = Array.from(fileList);
+
+    const error = validateFiles(files);
+    if (error) {
+      setFileError(error);
+      return;
+    }
+
+    setFileError(null);
+    setIsUploading(true);
+    try {
+      await productOptionFileUpload(option, files);
+    } catch {
+      setFileError(uploadFailedText);
+    } finally {
+      setIsUploading(false);
+      if (inputRef.current) inputRef.current.value = "";
+    }
+  };
+
+  const handleRemoveFile = (index: number) => {
+    const newValues = [...uploadedFiles];
+    newValues.splice(index, 1);
+    option.values = newValues;
+  };
+
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+    if (!isUploading) setIsDragOver(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragOver(false);
+  };
+
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    if (isUploading) return;
+    handleUpload(e.dataTransfer?.files ?? null);
+  };
+
+  const handleDropZoneClick = () => {
+    if (isUploading) return;
+    inputRef.current?.click();
+  };
+
+  const acceptExt = settings?.allowedExtensions?.length
+    ? settings.allowedExtensions
+        .map((e) => (e.startsWith(".") ? e : `.${e}`))
+        .join(",")
+    : undefined;
+
+  const constraintParts: string[] = [];
+  if (settings?.minQuantity != null)
+    constraintParts.push(`${minLabelText}${settings.minQuantity}`);
+  if (settings?.maxQuantity != null)
+    constraintParts.push(`${maxLabelText}${settings.maxQuantity}`);
+  if (settings?.allowedExtensions?.length) {
+    constraintParts.push(settings.allowedExtensions.join(", "));
+  }
+  const constraintText =
+    constraintParts.length > 0 ? constraintParts.join(" / ") : undefined;
+
+  const dropCls = [
+    "kombos-option-file__drop",
+    isDragOver && "kombos-option-file__drop--active",
+    errored && "kombos-option-file__drop--error",
+    isUploading && "kombos-option-file__drop--disabled",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <FormItem
+      label={getProductOptionFormattedLabel(option)}
+      status={fileError || errored ? "error" : "default"}
+      description={option.optionalText}
+      helper={
+        fileError || errored
+          ? (fileError ?? requiredErrorText)
+          : constraintText
+      }
+    >
+      <div
+        className={dropCls}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={handleDropZoneClick}
+      >
+        <span className="kombos-option-file__drop-icon">
+          <UploadSVG />
+        </span>
+        <span className="kombos-option-file__drop-text text-sm-regular">
+          {isUploading ? uploadingText : fileDropText}
+        </span>
+        <input
+          ref={inputRef}
+          type="file"
+          className="kombos-option-file__native"
+          accept={acceptExt}
+          multiple={settings?.maxQuantity !== 1}
+          onChange={(e: Event) =>
+            handleUpload((e.target as HTMLInputElement).files)
+          }
+        />
+      </div>
+
+      {uploadedFiles.length > 0 && (
+        <ul className="kombos-option-file__list">
+          {uploadedFiles.map((url, i) => {
+            const name = url.split("/").pop() ?? `${fileFallbackNameText} ${i + 1}`;
+            return (
+              <li key={url} className="kombos-option-file__item">
+                <span className="kombos-option-file__item-name text-xs-regular">
+                  {name}
+                </span>
+                <button
+                  type="button"
+                  className="kombos-option-file__item-remove"
+                  onClick={() => handleRemoveFile(i)}
+                >
+                  <TrashSVG />
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </FormItem>
+  );
+});
+
+export default OptionFile;