@ikas/component-cli 0.133.0 → 1.2.0

package/templates/create-full/src/sub-components/VariantBadge/index.tsx

@@ -1,153 +0,0 @@
-import {
-  IkasProduct,
-  IkasVariantValue,
-  getIkasVariantValueThumbnailImage,
-  isIkasVariantTypeColorSelection,
-  selectVariantValue,
-  getDisplayedProductVariantTypes,
-  getProductVariantMainImage,
-} from "@ikas/bp-storefront";
-import { observer } from "@ikas/component-utils";
-import { BadgeImage, BadgeColor, BadgeText } from "../Badge";
-import { cx } from "../../utils/cx";
-
-interface Props {
-  product: IkasProduct;
-  size?: "xs" | "s" | "m" | "l";
-  disableRoute?: boolean;
-  scrollable?: boolean;
-  showLabels?: boolean;
-  useVariantImages?: boolean;
-  onSelect?: () => void;
-}
-
-const VariantBadge = observer(function VariantBadge({
-  product,
-  size = "s",
-  disableRoute,
-  scrollable,
-  showLabels,
-  useVariantImages,
-  onSelect,
-}: Props) {
-  const displayedVariantTypes = getDisplayedProductVariantTypes(product);
-  if (displayedVariantTypes.length === 0) return null;
-
-  function handleSelect(variantValue: IkasVariantValue) {
-    selectVariantValue(product, variantValue, disableRoute);
-    onSelect?.();
-  }
-
-  return (
-    <div
-      className={cx(
-        "kombos-variant-badge__groups",
-        size === "l" && "kombos-variant-badge__groups--l",
-      )}
-    >
-      {displayedVariantTypes.map((dvt) => {
-        const isColor = isIkasVariantTypeColorSelection(dvt.variantType);
-
-        return (
-          <div key={dvt.variantType.id} className="kombos-variant-badge__group">
-            {showLabels && (
-              <span className={cx("kombos-variant-badge__label", size === "xs" ? "text-xs-medium" : "text-sm-medium")}>
-                {dvt.variantType.name}
-              </span>
-            )}
-            <div
-              className={cx(
-                "kombos-variant-badge__row",
-                scrollable && "kombos-variant-badge__row--scrollable",
-                size === "l" && "kombos-variant-badge__row--l",
-              )}
-            >
-              {dvt.displayedVariantValues.map((dvv) => {
-                const isSelected = dvv.isSelected;
-                const outOfStock = dvv.hasStock === false;
-                const variantValue = dvv.variantValue;
-
-                if (isColor) {
-                  // Variant product image
-                  if (useVariantImages) {
-                    const variantImage = getProductVariantMainImage(
-                      dvv.variant,
-                    )?.image;
-
-                    if (variantImage) {
-                      return (
-                        <BadgeImage
-                          key={variantValue.id}
-                          image={variantImage}
-                          alt={variantValue.name}
-                          sizes="64px"
-                          variantImg
-                          size={size}
-                          selected={isSelected}
-                          outOfStock={outOfStock}
-                          onClick={() => handleSelect(variantValue)}
-                          aria-label={variantValue.name}
-                        />
-                      );
-                    }
-                  }
-
-                  // Thumbnail image
-                  const thumbImage =
-                    getIkasVariantValueThumbnailImage(variantValue);
-
-                  if (thumbImage) {
-                    return (
-                      <BadgeImage
-                        key={variantValue.id}
-                        image={thumbImage}
-                        alt={variantValue.name}
-                        sizes="(max-width: 1024px) 100vw, 100px"
-                        size={size}
-                        selected={isSelected}
-                        outOfStock={outOfStock}
-                        onClick={() => handleSelect(variantValue)}
-                        aria-label={variantValue.name}
-                      />
-                    );
-                  }
-
-                  // Color swatch
-                  const colorCode = variantValue.colorCode;
-                  if (colorCode) {
-                    return (
-                      <BadgeColor
-                        key={variantValue.id}
-                        colorCode={colorCode}
-                        size={size}
-                        selected={isSelected}
-                        outOfStock={outOfStock}
-                        onClick={() => handleSelect(variantValue)}
-                        aria-label={variantValue.name}
-                      />
-                    );
-                  }
-                }
-
-                // Text badge (fallback)
-                return (
-                  <BadgeText
-                    key={variantValue.id}
-                    size={size}
-                    selected={isSelected}
-                    outOfStock={outOfStock}
-                    onClick={() => handleSelect(variantValue)}
-                  >
-                    {variantValue.name}
-                  </BadgeText>
-                );
-              })}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-});
-
-export default VariantBadge;

package/templates/create-full/src/sub-components/VariantBadge/styles.css

@@ -1,47 +0,0 @@
-/* ===== Variant Badge Layout ===== */
-
-/* ---- Layout ---- */
-.kombos-variant-badge__groups {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.kombos-variant-badge__groups--l {
-  gap: 1.5rem;
-}
-
-.kombos-variant-badge__group {
-  display: flex;
-  flex-direction: column;
-}
-
-.kombos-variant-badge__label {
-  color: var(--kombos-gray-900);
-  margin-bottom: 0.375rem;
-}
-
-.kombos-variant-badge__row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-}
-
-.kombos-variant-badge__row--l {
-  gap: 0.5rem;
-}
-
-.kombos-variant-badge__row--scrollable {
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-}
-
-.kombos-variant-badge__row--scrollable::-webkit-scrollbar {
-  display: none;
-}
-
-.kombos-variant-badge__row--scrollable .kombos-badge {
-  flex-shrink: 0;
-}