@ikas/component-cli 0.92.0 → 0.94.0

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+.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

@@ -0,0 +1,99 @@
+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 = "Bu alan zorunludur",
+  selectPlaceholderText = "Seçiniz",
+  fileDropText = "Dosya seçin veya sürükleyin",
+  uploadingText = "Yükleniyor...",
+  uploadFailedText = "Yükleme başarısız",
+  fileSizeErrorText = "{fileName}: max {maxSize}MB",
+  fileTypeErrorText = "{fileName}: {ext} uzantısına izin verilmiyor",
+  maxFilesErrorText = "En fazla {max} dosya yüklenebilir",
+  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

@@ -0,0 +1,30 @@
+.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

@@ -0,0 +1,21 @@
+// 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

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

@@ -0,0 +1,32 @@
+/* ===== 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

@@ -0,0 +1,10 @@
+// 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

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

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

@@ -0,0 +1,33 @@
+/* ===== ProductDetailProductGroup ===== */
+
+.kombos-pd-product-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin-top: var(--mobile-mt);
+  margin-bottom: var(--mobile-mb);
+}
+
+.kombos-pd-product-group__group {
+  display: flex;
+  flex-direction: column;
+}
+
+.kombos-pd-product-group__label {
+  color: var(--kombos-gray-900);
+  margin-bottom: 0.375rem;
+}
+
+.kombos-pd-product-group__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+/* ===== Desktop (>=1024px) ===== */
+@media (min-width: 1024px) {
+  .kombos-pd-product-group {
+    margin-top: var(--desktop-mt, var(--mobile-mt));
+    margin-bottom: var(--desktop-mb, var(--mobile-mb));
+  }
+}

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

@@ -0,0 +1,10 @@
+// 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;
+}