@ikas/code-components-mcp 0.104.0 → 0.106.0

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

@@ -0,0 +1,87 @@
+.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/data/section-templates/product-detail-section/children/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/data/section-templates/product-detail-section/children/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/data/section-templates/product-detail-section/children/ProductDetailOptionSet/components/OptionText/styles.css

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

package/data/section-templates/product-detail-section/children/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/data/section-templates/product-detail-section/children/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/data/section-templates/product-detail-section/children/ProductDetailOptionSet/ikas-config-snippet.json

@@ -0,0 +1,159 @@
+{
+  "id": "{{PROJECT_ID}}-product-detail-option-set",
+  "name": "ProductDetailOptionSet",
+  "type": "component",
+  "entry": "./src/components/ProductDetailOptionSet/index.tsx",
+  "styles": "./src/components/ProductDetailOptionSet/styles.css",
+  "props": [
+    {
+      "name": "product",
+      "displayName": "Ürün",
+      "type": "PRODUCT",
+      "required": false
+    },
+    {
+      "name": "selectPlaceholderText",
+      "displayName": "Seçim Yer Tutucu",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Seçiniz",
+      "groupId": "texts"
+    },
+    {
+      "name": "fileDropText",
+      "displayName": "Dosya Bırakma Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Dosya seçin veya sürükleyin",
+      "groupId": "texts"
+    },
+    {
+      "name": "uploadingText",
+      "displayName": "Yükleniyor Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Yükleniyor...",
+      "groupId": "texts"
+    },
+    {
+      "name": "uploadFailedText",
+      "displayName": "Yükleme Başarısız Metni",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Yükleme başarısız",
+      "groupId": "texts"
+    },
+    {
+      "name": "fileSizeErrorText",
+      "displayName": "Dosya Boyutu Hatası",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "{fileName}: max {maxSize}MB",
+      "groupId": "texts"
+    },
+    {
+      "name": "fileTypeErrorText",
+      "displayName": "Dosya Türü Hatası",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "{fileName}: {ext} uzantısına izin verilmiyor",
+      "groupId": "texts"
+    },
+    {
+      "name": "maxFilesErrorText",
+      "displayName": "Maksimum Dosya Hatası",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "En fazla {max} dosya yüklenebilir",
+      "groupId": "texts"
+    },
+    {
+      "name": "requiredFieldErrorText",
+      "displayName": "Zorunlu Alan Hatası",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Bu alan zorunludur",
+      "groupId": "texts"
+    },
+    {
+      "name": "mobileMarginTop",
+      "displayName": "Üst Boşluk",
+      "type": "TYPE",
+      "required": false,
+      "groupId": "mobile",
+      "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
+    },
+    {
+      "name": "mobileMarginBottom",
+      "displayName": "Alt Boşluk",
+      "type": "TYPE",
+      "required": false,
+      "groupId": "mobile",
+      "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
+    },
+    {
+      "name": "desktopMarginTop",
+      "displayName": "Üst Boşluk",
+      "type": "TYPE",
+      "required": false,
+      "groupId": "desktop",
+      "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
+    },
+    {
+      "name": "desktopMarginBottom",
+      "displayName": "Alt Boşluk",
+      "type": "TYPE",
+      "required": false,
+      "groupId": "desktop",
+      "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
+    },
+    {
+      "name": "minLabelText",
+      "displayName": "Min Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Min: ",
+      "groupId": "texts"
+    },
+    {
+      "name": "maxLabelText",
+      "displayName": "Maks Etiketi",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Max: ",
+      "groupId": "texts"
+    },
+    {
+      "name": "fileFallbackNameText",
+      "displayName": "Varsayılan Dosya Adı",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "File",
+      "groupId": "texts"
+    }
+  ],
+  "propGroups": [
+    {
+      "id": "texts",
+      "name": "Metinler",
+      "description": "Bileşende görüntülenen metin ayarları"
+    },
+    {
+      "id": "appearance",
+      "name": "Görünüm Ayarları",
+      "children": [
+        {
+          "id": "mobile",
+          "name": "Mobil Görünüm",
+          "description": "Mobil cihazlarda uygulanacak margin ayarları"
+        },
+        {
+          "id": "desktop",
+          "name": "Masaüstü Görünüm",
+          "description": "Masaüstü cihazlarda uygulanacak margin ayarları"
+        }
+      ],
+      "description": "Bileşenin mobil ve masaüstü görünüm ayarları"
+    }
+  ]
+}

package/data/section-templates/product-detail-section/children/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/data/section-templates/product-detail-section/children/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/data/section-templates/product-detail-section/children/ProductDetailOptionSet/types.ts

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