@ikas/component-cli 0.92.0 → 0.94.0

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

@@ -0,0 +1,211 @@
+/* ===== Product Detail Offer ===== */
+
+.kombos-pd-offer {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--mobile-mt);
+  margin-bottom: var(--mobile-mb);
+}
+
+/* Inline mode (compactView) */
+.kombos-pd-offer--inline {
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  padding: 1rem;
+  gap: 1rem;
+}
+
+/* Header */
+.kombos-pd-offer__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding-block: 0.75rem;
+  border-radius: 6px;
+}
+
+.kombos-pd-offer__title {
+  color: inherit;
+}
+
+.kombos-pd-offer__desc {
+  color: inherit;
+  opacity: 0.8;
+}
+
+/* Grid layout (standalone mode): cards + summary side by side */
+.kombos-pd-offer__grid {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Cards area: 2-col grid with main product + offer cards */
+.kombos-pd-offer__cards {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.75rem;
+}
+
+.kombos-pd-offer--inline .kombos-pd-offer__header {
+  padding: 0;
+}
+
+.kombos-pd-offer--inline .kombos-pd-offer__summary {
+  width: 100%;
+  max-width: none;
+}
+
+/* Offer list (inline mode) */
+.kombos-pd-offer__list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Main product card (standalone mode) — same style as OfferCard */
+.kombos-pd-offer__main-product {
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.kombos-pd-offer__main-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+}
+
+.kombos-pd-offer__main-image {
+  width: 4rem;
+  flex-shrink: 0;
+  border-radius: 4px;
+  object-fit: cover;
+  aspect-ratio: 1 / 1;
+  background: var(--kombos-gray-100);
+}
+
+.kombos-pd-offer__main-image--placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--kombos-gray-300);
+  font-size: 1.5rem;
+}
+
+.kombos-pd-offer__main-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.kombos-pd-offer__main-name {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-pd-offer__main-price {
+  color: var(--kombos-gray-900);
+}
+
+/* Summary panel */
+.kombos-pd-offer__summary {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  background: var(--kombos-gray-50);
+}
+
+.kombos-pd-offer__summary-info {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  color: var(--kombos-gray-600);
+}
+
+.kombos-pd-offer__summary-info-icon {
+  flex-shrink: 0;
+  font-size: 1rem;
+  margin-top: 0.0625rem;
+}
+
+.kombos-pd-offer__total-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.kombos-pd-offer__total-label {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-pd-offer__total-price {
+  color: var(--kombos-gray-900);
+}
+
+.kombos-pd-offer__total-price--strike {
+  color: var(--kombos-gray-500);
+  text-decoration: line-through;
+}
+
+.kombos-pd-offer__discount-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.kombos-pd-offer__discount-values {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.kombos-pd-offer__btn {
+  width: 100%;
+  margin-top: auto;
+}
+
+@media (min-width: 768px) {
+  .kombos-pd-offer__header {
+    padding-block: 1rem;
+  }
+
+  .kombos-pd-offer__cards {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .kombos-pd-offer__main-content {
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  .kombos-pd-offer__main-image {
+    width: 5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .kombos-pd-offer {
+    margin-top: var(--desktop-mt);
+    margin-bottom: var(--desktop-mb);
+  }
+
+  .kombos-pd-offer__grid {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 1rem;
+    align-items: start;
+  }
+
+  .kombos-pd-offer__summary {
+    min-width: 16rem;
+    max-width: 20rem;
+    justify-content: space-between;
+    align-self: stretch;
+  }
+}

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

@@ -0,0 +1,24 @@
+// This file is auto-generated — do not edit manually.
+import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
+import type { AspectRatio, ObjectFit } from "../../global-types";
+
+export interface Props {
+  product?: IkasProduct | null;
+  preselectOffers?: boolean;
+  addToCartTogetherText?: string;
+  addingToCartText?: string;
+  offerInfoText?: string;
+  totalText?: string;
+  advantageousTotalText?: string;
+  outOfStockText?: string;
+  imageAspectRatio?: AspectRatio;
+  imageObjectFit?: ObjectFit;
+  addedToCartBannerText?: string;
+  compactView?: boolean;
+  mobileMarginTop?: MarginTopStyleType;
+  mobileMarginBottom?: MarginBottomStyleType;
+  desktopMarginTop?: MarginTopStyleType;
+  desktopMarginBottom?: MarginBottomStyleType;
+  errorMessage?: string;
+  optionSetErrorMessage?: string;
+}

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

@@ -0,0 +1,52 @@
+import {
+  IkasProductOption,
+  isChecked as isOptionChecked,
+  setCheckboxValue,
+  hasError as hasOptionError,
+  getProductOptionFormattedLabel,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import Checkbox from "../../../../sub-components/Checkbox";
+import FormItem from "../../../../sub-components/FormItem";
+
+interface Props {
+  option: IkasProductOption;
+  showError: boolean;
+  requiredErrorText: string;
+}
+
+const OptionCheckbox = observer(function OptionCheckbox({
+  option,
+  showError,
+  requiredErrorText,
+}: Props) {
+  const checked = isOptionChecked(option);
+  const errored = showError && hasOptionError(option);
+  const label = getProductOptionFormattedLabel(option);
+
+  return (
+    <FormItem
+      status={errored ? "error" : "default"}
+      helper={errored ? requiredErrorText : undefined}
+    >
+      <div className="kombos-option-checkbox__row">
+        <Checkbox
+          checked={checked}
+          onChange={(val) => setCheckboxValue(option, val)}
+        />
+        <div className="kombos-option-checkbox__text">
+          <span className="kombos-option-checkbox__label text-sm-medium">
+            {label}
+          </span>
+          {option.optionalText && (
+            <span className="kombos-option-checkbox__desc text-xs-regular">
+              {option.optionalText}
+            </span>
+          )}
+        </div>
+      </div>
+    </FormItem>
+  );
+});
+
+export default OptionCheckbox;

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

@@ -0,0 +1,19 @@
+.kombos-option-checkbox__row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.kombos-option-checkbox__text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.kombos-option-checkbox__label {
+  color: var(--kombos-gray-700);
+}
+
+.kombos-option-checkbox__desc {
+  color: var(--kombos-gray-500);
+}

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

@@ -0,0 +1,60 @@
+import {
+  IkasProductOption,
+  selectValue,
+  isProductOptionSelectValueSelected,
+  getProductOptionFormattedLabel,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { cx } from "../../../../../../utils/cx";
+import FormItem from "../../../../../../sub-components/FormItem";
+import { getSelectValuePrice } from "../../../../../../utils/optionPrice";
+
+interface Props {
+  option: IkasProductOption;
+  errored: boolean;
+  requiredErrorText: string;
+  constraintText?: string;
+}
+
+const ChoiceBox = observer(function ChoiceBox({
+  option,
+  errored,
+  requiredErrorText,
+  constraintText,
+}: Props) {
+  const settings = option.selectSettings!;
+
+  return (
+    <FormItem
+      label={getProductOptionFormattedLabel(option)}
+      status={errored ? "error" : "default"}
+      description={option.optionalText}
+      helper={errored ? requiredErrorText : constraintText}
+    >
+      <div className="kombos-option-choice__grid">
+        {settings.values.map((val) => {
+          const isSelected = isProductOptionSelectValueSelected(option, val);
+          const price = getSelectValuePrice(option, val);
+
+          return (
+            <button
+              key={val.id}
+              type="button"
+              className={cx("kombos-option-choice__box", "text-sm-medium", isSelected && "kombos-option-choice__box--selected")}
+              onClick={() => selectValue(option, val)}
+            >
+              <span>{val.value}</span>
+              {price && (
+                <span className="kombos-option-choice__box-price text-xs-regular">
+                  {price}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </FormItem>
+  );
+});
+
+export default ChoiceBox;

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

@@ -0,0 +1,38 @@
+/* Box grid */
+.kombos-option-choice__grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.kombos-option-choice__box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  background: var(--kombos-white);
+  color: var(--kombos-gray-700);
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+
+.kombos-option-choice__box:hover {
+  border-color: var(--kombos-gray-400);
+}
+
+.kombos-option-choice__box--selected {
+  border-color: var(--kombos-gray-900);
+  background: var(--kombos-gray-900);
+  color: var(--kombos-white);
+}
+
+.kombos-option-choice__box-price {
+  color: var(--kombos-gray-500);
+}
+
+.kombos-option-choice__box--selected .kombos-option-choice__box-price {
+  color: var(--kombos-white);
+}

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

@@ -0,0 +1,102 @@
+import {
+  IkasProductOption,
+  selectValue,
+  clearValues,
+  isProductOptionSelectValueSelected,
+  getProductOptionFormattedLabel,
+} from "@ikas/bp-storefront";
+import { observer } from "@ikas/component-utils";
+import { cx } from "../../../../../../utils/cx";
+import Select from "../../../../../../sub-components/Select";
+import FormItem from "../../../../../../sub-components/FormItem";
+import Checkbox from "../../../../../../sub-components/Checkbox";
+import { getSelectValuePrice } from "../../../../../../utils/optionPrice";
+
+interface Props {
+  option: IkasProductOption;
+  errored: boolean;
+  requiredErrorText: string;
+  placeholderText: string;
+  constraintText?: string;
+}
+
+const ChoiceSelect = observer(function ChoiceSelect({
+  option,
+  errored,
+  requiredErrorText,
+  placeholderText,
+  constraintText,
+}: Props) {
+  const settings = option.selectSettings!;
+  const selectedId = option.values?.[0] ?? "";
+  const selectOptions = settings.values.map((v) => ({
+    label: `${v.value} (${getSelectValuePrice(option, v)})`,
+    value: v.id,
+  }));
+
+  const isMulti = (settings.maxSelect ?? 0) > 1;
+  const selectId = !isMulti ? `option-choice-${option.id}` : undefined;
+
+  return (
+    <FormItem
+      label={getProductOptionFormattedLabel(option)}
+      htmlFor={selectId}
+      status={errored ? "error" : "default"}
+      description={option.optionalText}
+      helper={errored ? requiredErrorText : constraintText}
+    >
+      {isMulti ? (
+        <div
+          className={cx(
+            "kombos-option-choice__checklist",
+            errored && "kombos-option-choice__checklist--error",
+          )}
+        >
+          {settings.values.map((val) => {
+            const isSelected = isProductOptionSelectValueSelected(option, val);
+            const price = getSelectValuePrice(option, val);
+
+            return (
+              <div
+                key={val.id}
+                className="kombos-option-choice__checklist-row"
+                onClick={() => selectValue(option, val)}
+              >
+                <Checkbox
+                  checked={isSelected}
+                  onChange={() => selectValue(option, val)}
+                />
+                <span className="text-sm-medium">{val.value}</span>
+                {price && (
+                  <span className="kombos-option-choice__checklist-price text-xs-regular">
+                    {price}
+                  </span>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <Select
+          id={selectId}
+          allowClear
+          options={[{ label: placeholderText, value: "" }, ...selectOptions]}
+          value={selectedId}
+          onChange={(e: Event) => {
+            const id = (e.target as HTMLSelectElement).value;
+            if (!id) {
+              clearValues(option, true);
+              return;
+            }
+            const val = settings.values.find((v) => v.id === id);
+            if (val) selectValue(option, val);
+          }}
+          onClear={() => clearValues(option, true)}
+          size="xs"
+        />
+      )}
+    </FormItem>
+  );
+});
+
+export default ChoiceSelect;

package/templates/create-full/src/components/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/templates/create-full/src/components/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;