@ikas/component-cli 0.133.0 → 1.2.0

package/templates/create-full/src/components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceSelect/styles.css

@@ -1,34 +0,0 @@
-/* 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/templates/create-full/src/components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceSwatch/index.tsx

@@ -1,121 +0,0 @@
-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/templates/create-full/src/components/ProductDetailOptionSet/components/OptionChoice/components/ChoiceSwatch/styles.css

@@ -1,87 +0,0 @@
-/* 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/templates/create-full/src/components/ProductDetailOptionSet/components/OptionChoice/index.tsx

@@ -1,57 +0,0 @@
-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/templates/create-full/src/components/ProductDetailOptionSet/components/OptionColorPicker/index.tsx

@@ -1,54 +0,0 @@
-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/templates/create-full/src/components/ProductDetailOptionSet/components/OptionDatePicker/index.tsx

@@ -1,124 +0,0 @@
-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/templates/create-full/src/components/ProductDetailOptionSet/components/OptionDatePicker/styles.css

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

package/templates/create-full/src/components/ProductDetailOptionSet/components/OptionFile/index.tsx

@@ -1,217 +0,0 @@
-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;