@ikas/component-cli 0.133.0 → 1.1.0

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

@@ -1,87 +0,0 @@
-.kombos-option-file__drop {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 1.5rem;
-  border: 1px dashed var(--kombos-gray-300);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: border-color 0.15s, background-color 0.15s;
-  background: var(--kombos-white);
-}
-
-.kombos-option-file__drop:hover {
-  border-color: var(--kombos-gray-400);
-  background: var(--kombos-gray-50);
-}
-
-.kombos-option-file__drop--active {
-  border-color: var(--kombos-gray-500);
-  background: var(--kombos-gray-50);
-}
-
-.kombos-option-file__drop--error {
-  border-color: var(--kombos-error) !important;
-}
-
-.kombos-option-file__drop--disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.kombos-option-file__drop-icon {
-  font-size: 1.5rem;
-  color: var(--kombos-gray-400);
-}
-
-.kombos-option-file__drop-text {
-  color: var(--kombos-gray-500);
-}
-
-.kombos-option-file__native {
-  display: none;
-}
-
-.kombos-option-file__list {
-  list-style: none;
-  padding: 0;
-  margin: 0.5rem 0 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.kombos-option-file__item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.375rem 0.5rem;
-  border: 1px solid var(--kombos-gray-100);
-  border-radius: 4px;
-  background: var(--kombos-gray-50);
-}
-
-.kombos-option-file__item-name {
-  color: var(--kombos-gray-700);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 80%;
-}
-
-.kombos-option-file__item-remove {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 0.875rem;
-  color: var(--kombos-gray-400);
-  padding: 0;
-  display: flex;
-  align-items: center;
-}
-
-.kombos-option-file__item-remove:hover {
-  color: var(--kombos-error);
-}

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

@@ -1,133 +0,0 @@
-import {
-  getDisplayedChildOptions,
-  isTextOption,
-  isTextAreaOption,
-  isCheckboxOption,
-  isChoiceOption,
-  isColorPickerOption,
-  isDatePickerOption,
-  isFileOption,
-  IkasProductOption,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-
-import OptionText from "../OptionText";
-import OptionTextarea from "../OptionTextarea";
-import OptionCheckbox from "../OptionCheckbox";
-import OptionChoice from "../OptionChoice";
-import OptionColorPicker from "../OptionColorPicker";
-import OptionDatePicker from "../OptionDatePicker";
-import OptionFile from "../OptionFile";
-
-export interface TextProps {
-  requiredErrorText: string;
-  selectPlaceholderText: string;
-  fileDropText: string;
-  uploadingText: string;
-  uploadFailedText: string;
-  fileSizeErrorText: string;
-  fileTypeErrorText: string;
-  maxFilesErrorText: string;
-  minLabelText: string;
-  maxLabelText: string;
-  fileFallbackNameText: string;
-}
-
-interface Props {
-  option: IkasProductOption;
-  showError: boolean;
-  texts: TextProps;
-}
-
-function renderOption(
-  option: IkasProductOption,
-  showError: boolean,
-  texts: TextProps,
-) {
-  const commonProps = {
-    option,
-    showError,
-    requiredErrorText: texts.requiredErrorText,
-  };
-
-  const minMaxProps = {
-    minLabelText: texts.minLabelText,
-    maxLabelText: texts.maxLabelText,
-  };
-
-  if (isTextOption(option)) {
-    return <OptionText {...commonProps} {...minMaxProps} />;
-  }
-
-  if (isTextAreaOption(option)) {
-    return <OptionTextarea {...commonProps} {...minMaxProps} />;
-  }
-
-  if (isCheckboxOption(option)) {
-    return <OptionCheckbox {...commonProps} />;
-  }
-
-  if (isChoiceOption(option)) {
-    return (
-      <OptionChoice
-        {...commonProps}
-        {...minMaxProps}
-        placeholderText={texts.selectPlaceholderText}
-      />
-    );
-  }
-
-  if (isColorPickerOption(option)) {
-    return <OptionColorPicker {...commonProps} />;
-  }
-
-  if (isDatePickerOption(option)) {
-    return <OptionDatePicker {...commonProps} {...minMaxProps} />;
-  }
-
-  if (isFileOption(option)) {
-    return (
-      <OptionFile
-        {...commonProps}
-        {...minMaxProps}
-        fileFallbackNameText={texts.fileFallbackNameText}
-        fileDropText={texts.fileDropText}
-        uploadingText={texts.uploadingText}
-        uploadFailedText={texts.uploadFailedText}
-        fileSizeErrorText={texts.fileSizeErrorText}
-        fileTypeErrorText={texts.fileTypeErrorText}
-        maxFilesErrorText={texts.maxFilesErrorText}
-      />
-    );
-  }
-
-  return null;
-}
-
-const OptionRenderer = observer(function OptionRenderer({
-  option,
-  showError,
-  texts,
-}: Props) {
-  const childOptions = getDisplayedChildOptions(option) as IkasProductOption[];
-
-  return (
-    <div key={option.id} className="kombos-pd-optset__option">
-      {renderOption(option, showError, texts)}
-      {childOptions.length > 0 && (
-        <div className="kombos-pd-optset__children">
-          {childOptions.map((child) => (
-            <OptionRenderer
-              key={child.id}
-              option={child}
-              showError={showError}
-              texts={texts}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-});
-
-export default OptionRenderer;

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

@@ -1,60 +0,0 @@
-import {
-  IkasProductOption,
-  getTextValue,
-  setTextValue,
-  hasError as hasOptionError,
-  getProductOptionFormattedLabel,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import Input from "../../../../sub-components/Input";
-import FormItem from "../../../../sub-components/FormItem";
-
-interface Props {
-  option: IkasProductOption;
-  showError: boolean;
-  requiredErrorText: string;
-  minLabelText: string;
-  maxLabelText: string;
-}
-
-const OptionText = observer(function OptionText({
-  option,
-  showError,
-  requiredErrorText,
-  minLabelText,
-  maxLabelText,
-}: Props) {
-  const value = getTextValue(option);
-  const errored = showError && hasOptionError(option);
-  const settings = option.textSettings;
-
-  const helperParts: string[] = [];
-  if (settings?.min != null) helperParts.push(`${minLabelText}${settings.min}`);
-  if (settings?.max != null) helperParts.push(`${maxLabelText}${settings.max}`);
-  const helperText =
-    helperParts.length > 0 ? helperParts.join(" / ") : undefined;
-
-  const inputId = `option-text-${option.id}`;
-
-  return (
-    <FormItem
-      label={getProductOptionFormattedLabel(option)}
-      htmlFor={inputId}
-      status={errored ? "error" : "default"}
-      description={option.optionalText}
-      helper={errored ? requiredErrorText : helperText}
-    >
-      <Input
-        id={inputId}
-        value={value}
-        onInput={(e: Event) =>
-          setTextValue(option, (e.target as HTMLInputElement).value)
-        }
-        maxLength={settings?.max ?? undefined}
-        size="xs"
-      />
-    </FormItem>
-  );
-});
-
-export default OptionText;

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

@@ -1 +0,0 @@
-/* FormItem handles all layout and styling */

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

@@ -1,74 +0,0 @@
-import {
-  IkasProductOption,
-  getTextValue,
-  setTextValue,
-  hasError as hasOptionError,
-  getProductOptionFormattedLabel,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import Textarea from "../../../../sub-components/Textarea";
-import FormItem from "../../../../sub-components/FormItem";
-
-interface Props {
-  option: IkasProductOption;
-  showError: boolean;
-  requiredErrorText: string;
-  minLabelText: string;
-  maxLabelText: string;
-}
-
-const OptionTextarea = observer(function OptionTextarea({
-  option,
-  showError,
-  requiredErrorText,
-  minLabelText,
-  maxLabelText,
-}: Props) {
-  const value = getTextValue(option);
-  const errored = showError && hasOptionError(option);
-  const settings = option.textSettings;
-
-  const helperParts: string[] = [];
-  if (settings?.min != null) helperParts.push(`${minLabelText}${settings.min}`);
-  if (settings?.max != null) helperParts.push(`${maxLabelText}${settings.max}`);
-  const helperText =
-    helperParts.length > 0 ? helperParts.join(" / ") : undefined;
-
-  const textareaId = `option-textarea-${option.id}`;
-
-  return (
-    <FormItem
-      label={getProductOptionFormattedLabel(option)}
-      htmlFor={textareaId}
-      status={errored ? "error" : "default"}
-      helper={
-        errored ? (
-          requiredErrorText
-        ) : (
-          <div className="kombos-option-textarea__footer">
-            {helperText ? helperText : <span />}
-            {settings?.max != null && (
-              <span className="kombos-option-textarea__counter">
-                {(value ?? "").length} / {settings.max}
-              </span>
-            )}
-          </div>
-        )
-      }
-      description={option.optionalText}
-    >
-      <Textarea
-        id={textareaId}
-        value={value}
-        onInput={(e: Event) =>
-          setTextValue(option, (e.target as HTMLTextAreaElement).value)
-        }
-        maxLength={settings?.max ?? undefined}
-        rows={4}
-        size="xs"
-      />
-    </FormItem>
-  );
-});
-
-export default OptionTextarea;

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

@@ -1,10 +0,0 @@
-.kombos-option-textarea__footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-}
-
-.kombos-option-textarea__counter {
-  color: var(--kombos-gray-400);
-  margin-left: auto;
-}

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

@@ -1,99 +0,0 @@
-import {
-  getProductOptionSet,
-  getDisplayedOptions,
-  getFormattedMarginTopSize,
-  getFormattedMarginBottomSize,
-  IkasProductOption,
-} from "@ikas/bp-storefront";
-import { useEffect, useState } from "preact/hooks";
-import { Props } from "./types";
-
-import OptionRenderer from "./components/OptionRenderer";
-import type { TextProps } from "./components/OptionRenderer";
-
-export function ProductDetailOptionSet({
-  product,
-  requiredFieldErrorText = "This field is required",
-  selectPlaceholderText = "Select",
-  fileDropText = "Choose a file or drag it here",
-  uploadingText = "Uploading...",
-  uploadFailedText = "Upload failed",
-  fileSizeErrorText = "{fileName}: max {maxSize}MB",
-  fileTypeErrorText = "{fileName}: {ext} file type not allowed",
-  maxFilesErrorText = "Maximum {max} files can be uploaded",
-  minLabelText = "Min: ",
-  maxLabelText = "Max: ",
-  fileFallbackNameText = "File",
-  mobileMarginTop,
-  mobileMarginBottom,
-  desktopMarginTop,
-  desktopMarginBottom,
-}: Props) {
-  const [loaded, setLoaded] = useState(false);
-  const [showError, setShowError] = useState(false);
-
-  useEffect(() => {
-    if (!product) return;
-    getProductOptionSet(product).then(() => setLoaded(true));
-  }, [product]);
-
-  useEffect(() => {
-    const showHandler = () => setShowError(true);
-    const resetHandler = () => setShowError(false);
-    window.addEventListener("ikas:show-option-errors", showHandler);
-    window.addEventListener("ikas:reset-option-state", resetHandler);
-    return () => {
-      window.removeEventListener("ikas:show-option-errors", showHandler);
-      window.removeEventListener("ikas:reset-option-state", resetHandler);
-    };
-  }, []);
-
-  if (!product || !loaded) return null;
-
-  const optionSet = product.productOptionSet;
-  if (!optionSet) return null;
-
-  const displayedOptions = getDisplayedOptions(
-    optionSet,
-  ) as IkasProductOption[];
-  if (!displayedOptions.length) return null;
-
-  const texts: TextProps = {
-    requiredErrorText: requiredFieldErrorText,
-    selectPlaceholderText,
-    fileDropText,
-    uploadingText,
-    uploadFailedText,
-    fileSizeErrorText,
-    fileTypeErrorText,
-    maxFilesErrorText,
-    minLabelText,
-    maxLabelText,
-    fileFallbackNameText,
-  };
-
-  return (
-    <div
-      className="kombos-pd-optset"
-      style={{
-        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
-        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
-        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
-        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
-      }}
-    >
-      <div className="kombos-pd-optset__list">
-        {displayedOptions.map((option) => (
-          <OptionRenderer
-            key={option.id}
-            option={option as unknown as IkasProductOption}
-            showError={showError}
-            texts={texts}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default ProductDetailOptionSet;

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

@@ -1,30 +0,0 @@
-.kombos-pd-optset {
-  margin-top: var(--mobile-mt);
-  margin-bottom: var(--mobile-mb);
-}
-
-@media (min-width: 1024px) {
-  .kombos-pd-optset {
-    margin-top: var(--desktop-mt, var(--mobile-mt));
-    margin-bottom: var(--desktop-mb, var(--mobile-mb));
-  }
-}
-
-.kombos-pd-optset__list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.kombos-pd-optset__option {
-  display: flex;
-  flex-direction: column;
-}
-
-.kombos-pd-optset__children {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-top: 0.5rem;
-  padding-left: 0.5rem;
-}

package/templates/create-full/src/components/ProductDetailOptionSet/types.ts

@@ -1,21 +0,0 @@
-// This file is auto-generated — do not edit manually.
-import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
-
-export interface Props {
-  product?: IkasProduct | null;
-  selectPlaceholderText?: string;
-  fileDropText?: string;
-  uploadingText?: string;
-  uploadFailedText?: string;
-  fileSizeErrorText?: string;
-  fileTypeErrorText?: string;
-  maxFilesErrorText?: string;
-  requiredFieldErrorText?: string;
-  mobileMarginTop?: MarginTopStyleType;
-  mobileMarginBottom?: MarginBottomStyleType;
-  desktopMarginTop?: MarginTopStyleType;
-  desktopMarginBottom?: MarginBottomStyleType;
-  minLabelText?: string;
-  maxLabelText?: string;
-  fileFallbackNameText?: string;
-}

package/templates/create-full/src/components/ProductDetailPrices/index.tsx

@@ -1,62 +0,0 @@
-import {
-  getFormattedMarginTopSize,
-  getFormattedMarginBottomSize,
-  getProductVariantDiscountPercentage,
-  getProductVariantFormattedFinalPrice,
-  getProductVariantFormattedSellPrice,
-  getSelectedProductVariant,
-  hasProductVariantDiscount,
-} from "@ikas/bp-storefront";
-import { Props } from "./types";
-import Tag from "../../sub-components/Tag";
-
-export function ProductDetailPrices({
-  product,
-  mobileMarginTop,
-  mobileMarginBottom,
-  desktopMarginTop,
-  desktopMarginBottom,
-}: Props) {
-  if (!product) return null;
-
-  const selectedVariant = getSelectedProductVariant(product);
-
-  const hasDiscount = hasProductVariantDiscount(selectedVariant);
-  const finalPrice = getProductVariantFormattedFinalPrice(selectedVariant);
-  const originalPrice = hasDiscount
-    ? getProductVariantFormattedSellPrice(selectedVariant)
-    : null;
-  const discountPercentage = hasDiscount
-    ? getProductVariantDiscountPercentage(selectedVariant)
-    : null;
-
-  return (
-    <div
-      className="kombos-pd-prices"
-      style={{
-        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
-        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
-        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
-        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
-      }}
-    >
-      <div className="kombos-pd-prices__prices">
-        <span className="kombos-pd-prices__final text-xl-medium md:display-xs-medium">
-          {finalPrice}
-        </span>
-        {originalPrice && (
-          <span className="kombos-pd-prices__original text-lg-medium-strike md:text-xl-medium-strike">
-            {originalPrice}
-          </span>
-        )}
-      </div>
-      {discountPercentage != null && Number(discountPercentage) > 0 && (
-        <Tag type="discounted" size="m">
-          %{Math.round(Number(discountPercentage))}
-        </Tag>
-      )}
-    </div>
-  );
-}
-
-export default ProductDetailPrices;

package/templates/create-full/src/components/ProductDetailPrices/styles.css

@@ -1,32 +0,0 @@
-/* ===== ProductDetailPrices ===== */
-
-.kombos-pd-prices {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-  margin-top: var(--mobile-mt);
-  margin-bottom: var(--mobile-mb);
-}
-
-.kombos-pd-prices__prices {
-  display: flex;
-  align-items: baseline;
-  gap: 0.5rem;
-}
-
-.kombos-pd-prices__final {
-  color: var(--kombos-gray-900);
-}
-
-.kombos-pd-prices__original {
-  color: var(--kombos-gray-500);
-}
-
-/* ===== Desktop (>=1024px) ===== */
-@media (min-width: 1024px) {
-  .kombos-pd-prices {
-    margin-top: var(--desktop-mt, var(--mobile-mt));
-    margin-bottom: var(--desktop-mb, var(--mobile-mb));
-  }
-}

package/templates/create-full/src/components/ProductDetailPrices/types.ts

@@ -1,10 +0,0 @@
-// This file is auto-generated — do not edit manually.
-import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
-
-export interface Props {
-  product?: IkasProduct | null;
-  mobileMarginTop?: MarginTopStyleType;
-  mobileMarginBottom?: MarginBottomStyleType;
-  desktopMarginTop?: MarginTopStyleType;
-  desktopMarginBottom?: MarginBottomStyleType;
-}

package/templates/create-full/src/components/ProductDetailProductGroup/index.tsx

@@ -1,74 +0,0 @@
-import {
-  getDisplayedProductGroups,
-  getFormattedMarginTopSize,
-  getFormattedMarginBottomSize,
-} from "@ikas/bp-storefront";
-import { Props } from "./types";
-import { BadgeImage, BadgeText } from "../../sub-components/Badge";
-
-export function ProductDetailProductGroup({
-  product,
-  mobileMarginTop,
-  mobileMarginBottom,
-  desktopMarginTop,
-  desktopMarginBottom,
-}: Props) {
-  if (!product) return null;
-
-  const groups = getDisplayedProductGroups(product);
-  if (!groups.length) return null;
-
-  return (
-    <div
-      className="kombos-pd-product-group"
-      style={{
-        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
-        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
-        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
-        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
-      }}
-    >
-      {groups.map((group) => {
-        const selected = group.items.find((i) => i.isSelected);
-
-        return (
-          <div key={group.name} className="kombos-pd-product-group__group">
-            <span className="kombos-pd-product-group__label text-sm-medium">
-              {group.name}
-              {selected && <span> - {selected.value}</span>}
-            </span>
-            <div className="kombos-pd-product-group__row">
-              {group.items.map((item) =>
-                item.image ? (
-                  <BadgeImage
-                    key={item.value}
-                    image={item.image}
-                    alt={item.value}
-                    sizes="64px"
-                    variantImg
-                    size="l"
-                    selected={item.isSelected}
-                    href={item.href}
-                    title={item.value}
-                  />
-                ) : (
-                  <BadgeText
-                    key={item.value}
-                    size="l"
-                    selected={item.isSelected}
-                    href={item.href}
-                    title={item.value}
-                  >
-                    {item.value}
-                  </BadgeText>
-                ),
-              )}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-export default ProductDetailProductGroup;