@ikas/code-components-mcp 0.105.0 → 0.106.0

package/data/section-templates/register-section/types.ts

@@ -0,0 +1,26 @@
+import type { IkasNavigationLink } from "@ikas/bp-storefront";
+
+export interface Props {
+  title?: string;
+  subtitle?: string;
+  firstNameLabel?: string;
+  firstNamePlaceholder?: string;
+  lastNameLabel?: string;
+  lastNamePlaceholder?: string;
+  emailLabel?: string;
+  emailPlaceholder?: string;
+  passwordLabel?: string;
+  passwordPlaceholder?: string;
+  submitButtonText?: string;
+  submittingButtonText?: string;
+  loginLinkText?: string;
+  marketingConsentText?: string;
+  marketingConsentLink?: IkasNavigationLink | null;
+  agreementConsentText?: string;
+  agreementConsentLink?: IkasNavigationLink | null;
+  showGoogleLogin?: boolean;
+  googleButtonText?: string;
+  showFacebookLogin?: boolean;
+  facebookButtonText?: string;
+  dividerText?: string;
+}

package/data/section-templates/register-section/utils/cx.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function cx(...classes: any[]): string {
+  return classes.filter(Boolean).join(" ");
+}

package/data/section-templates/rich-text-section/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Rich Text Section",
+  "description": "Simple section that renders rich text HTML content from a prop. Useful for custom content blocks, legal pages, and static content."
+}

package/data/section-templates/rich-text-section/ikas-config-snippet.json

@@ -0,0 +1,22 @@
+{
+  "id": "{{PROJECT_ID}}-rich-text",
+  "name": "RichText",
+  "type": "section",
+  "entry": "./src/components/RichText/index.tsx",
+  "styles": "./src/components/RichText/styles.css",
+  "props": [
+    {
+      "name": "title",
+      "displayName": "Başlık",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "Başlık"
+    },
+    {
+      "name": "content",
+      "displayName": "İçerik",
+      "type": "RICH_TEXT",
+      "required": false
+    }
+  ]
+}

package/data/section-templates/rich-text-section/index.tsx

@@ -0,0 +1,25 @@
+import { Props } from "./types";
+
+export function RichText({ title, content }: Props) {
+  if (!title && !content) return null;
+
+  return (
+    <section className="kombos-rich-text">
+      <div className="kombos-container">
+        {title && (
+          <h2 className="kombos-rich-text__title display-xs-semibold">
+            {title}
+          </h2>
+        )}
+        {content && (
+          <div
+            className="kombos-rich-text__content text-md-regular kombos-richtext"
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
+        )}
+      </div>
+    </section>
+  );
+}
+
+export default RichText;

package/data/section-templates/rich-text-section/styles.css

@@ -0,0 +1,51 @@
+.kombos-rich-text {
+  width: 100%;
+}
+
+.kombos-rich-text .kombos-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  max-width: 50rem;
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+.kombos-rich-text__title {
+  color: var(--kombos-gray-900);
+  margin: 0;
+  text-align: center;
+}
+
+.kombos-rich-text__content {
+  color: var(--kombos-gray-700);
+}
+
+.kombos-rich-text__content a {
+  color: var(--kombos-gray-900);
+  text-decoration: underline;
+}
+
+.kombos-rich-text__content a:hover {
+  color: var(--kombos-gray-700);
+}
+
+.kombos-rich-text__content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+}
+
+@media (min-width: 768px) {
+  .kombos-rich-text .kombos-container {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .kombos-rich-text .kombos-container {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+}

package/data/section-templates/rich-text-section/types.ts

@@ -0,0 +1,4 @@
+export interface Props {
+  title?: string;
+  content?: string;
+}

package/data/section-templates/variant-selection/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Variant Selection Pattern",
+  "description": "Product variant selection UI with color swatches, size dropdowns, and variant type detection. Shows selectVariantValue, getSelectedProductVariant, variant option types (COLOR, DROPDOWN, BUTTON), and variant availability checking."
+}

package/data/section-templates/variant-selection/ikas-config-snippet.json

@@ -0,0 +1,73 @@
+{
+  "id": "{{PROJECT_ID}}-product-detail-variant",
+  "name": "ProductDetailVariant",
+  "type": "component",
+  "entry": "./src/components/ProductDetailVariant/index.tsx",
+  "styles": "./src/components/ProductDetailVariant/styles.css",
+  "props": [
+    {
+      "name": "product",
+      "displayName": "Ürün",
+      "type": "PRODUCT",
+      "required": false
+    },
+    {
+      "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": "useVariantImages",
+      "displayName": "Görselli Varyant",
+      "type": "BOOLEAN",
+      "required": false,
+      "description": "Renk varyantı için ürün görsellerini kullan."
+    }
+  ],
+  "propGroups": [
+    {
+      "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/variant-selection/index.tsx

@@ -0,0 +1,38 @@
+import {
+  getFormattedMarginTopSize,
+  getFormattedMarginBottomSize,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+import VariantBadge from "../../sub-components/VariantBadge";
+
+export function ProductDetailVariant({
+  product,
+  mobileMarginTop,
+  mobileMarginBottom,
+  desktopMarginTop,
+  desktopMarginBottom,
+  useVariantImages,
+}: Props) {
+  if (!product) return null;
+
+  return (
+    <div
+      className="kombos-pd-variant"
+      style={{
+        "--mobile-mt": getFormattedMarginTopSize(mobileMarginTop),
+        "--mobile-mb": getFormattedMarginBottomSize(mobileMarginBottom),
+        "--desktop-mt": getFormattedMarginTopSize(desktopMarginTop),
+        "--desktop-mb": getFormattedMarginBottomSize(desktopMarginBottom),
+      }}
+    >
+      <VariantBadge
+        product={product}
+        size="l"
+        showLabels
+        useVariantImages={useVariantImages}
+      />
+    </div>
+  );
+}
+
+export default ProductDetailVariant;

package/data/section-templates/variant-selection/styles.css

@@ -0,0 +1,14 @@
+/* ===== ProductDetailVariant ===== */
+
+.kombos-pd-variant {
+  margin-top: var(--mobile-mt);
+  margin-bottom: var(--mobile-mb);
+}
+
+/* ===== Desktop (>=1024px) ===== */
+@media (min-width: 1024px) {
+  .kombos-pd-variant {
+    margin-top: var(--desktop-mt, var(--mobile-mt));
+    margin-bottom: var(--desktop-mb, var(--mobile-mb));
+  }
+}

package/data/section-templates/variant-selection/sub-components/Badge/index.tsx

@@ -0,0 +1,208 @@
+import { ComponentChildren } from "preact";
+import {
+  IkasImage,
+  getDefaultSrc,
+  createMediaSrcset,
+} from "@ikas/bp-storefront";
+import { cx } from "../../utils/cx";
+
+const TYPO_MAP = {
+  xs: "text-xs-medium",
+  s: "text-sm-medium",
+  m: "text-md-medium",
+  l: "text-md-medium",
+} as const;
+
+type Size = "xs" | "s" | "m" | "l";
+
+interface BaseProps {
+  size?: Size;
+  selected?: boolean;
+  outOfStock?: boolean;
+  href?: string;
+  onClick?: () => void;
+  title?: string;
+  "aria-label"?: string;
+}
+
+function StrikeLine() {
+  return <span className="kombos-badge__strike" />;
+}
+
+/* ------------------------------------------------------------------ */
+/*  BadgeImage                                                         */
+/* ------------------------------------------------------------------ */
+
+interface BadgeImageProps extends BaseProps {
+  image: IkasImage;
+  alt: string;
+  sizes?: string;
+  variantImg?: boolean;
+}
+
+export function BadgeImage({
+  image,
+  alt,
+  sizes = "64px",
+  variantImg,
+  size = "s",
+  selected,
+  outOfStock,
+  href,
+  onClick,
+  title,
+  "aria-label": ariaLabel,
+}: BadgeImageProps) {
+  const className = cx(
+    "kombos-badge",
+    "kombos-badge--image",
+    variantImg && "kombos-badge--variant-img",
+    `kombos-badge--${size}`,
+    selected && "kombos-badge--selected",
+    outOfStock && "kombos-badge--nonstock",
+  );
+
+  const content = (
+    <>
+      <img
+        src={getDefaultSrc(image)}
+        srcSet={createMediaSrcset(image)}
+        sizes={sizes}
+        alt={alt}
+        className="kombos-badge__img"
+      />
+      {outOfStock && <StrikeLine />}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a href={href} className={className} title={title} aria-label={ariaLabel}>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={className}
+      onClick={onClick}
+      title={title}
+      aria-label={ariaLabel}
+    >
+      {content}
+    </button>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  BadgeColor                                                         */
+/* ------------------------------------------------------------------ */
+
+interface BadgeColorProps extends BaseProps {
+  colorCode: string;
+}
+
+export function BadgeColor({
+  colorCode,
+  size = "s",
+  selected,
+  outOfStock,
+  href,
+  onClick,
+  title,
+  "aria-label": ariaLabel,
+}: BadgeColorProps) {
+  const className = cx(
+    "kombos-badge",
+    "kombos-badge--color",
+    `kombos-badge--${size}`,
+    selected && "kombos-badge--selected",
+    outOfStock && "kombos-badge--nonstock",
+  );
+
+  const content = outOfStock ? <StrikeLine /> : null;
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        className={className}
+        style={{ backgroundColor: colorCode }}
+        title={title}
+        aria-label={ariaLabel}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={className}
+      style={{ backgroundColor: colorCode }}
+      onClick={onClick}
+      title={title}
+      aria-label={ariaLabel}
+    >
+      {content}
+    </button>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  BadgeText                                                          */
+/* ------------------------------------------------------------------ */
+
+interface BadgeTextProps extends BaseProps {
+  children: ComponentChildren;
+}
+
+export function BadgeText({
+  children,
+  size = "s",
+  selected,
+  outOfStock,
+  href,
+  onClick,
+  title,
+  "aria-label": ariaLabel,
+}: BadgeTextProps) {
+  const className = cx(
+    "kombos-badge",
+    "kombos-badge--text",
+    `kombos-badge--${size}`,
+    TYPO_MAP[size],
+    selected && "kombos-badge--selected",
+    outOfStock && "kombos-badge--nonstock",
+  );
+
+  const content = (
+    <>
+      {children}
+      {outOfStock && <StrikeLine />}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a href={href} className={className} title={title} aria-label={ariaLabel}>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={className}
+      onClick={onClick}
+      title={title}
+      aria-label={ariaLabel}
+    >
+      {content}
+    </button>
+  );
+}

package/data/section-templates/variant-selection/sub-components/Badge/styles.css

@@ -0,0 +1,129 @@
+/* ===== Badge Primitives ===== */
+
+/* ---- Base badge ---- */
+.kombos-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.25rem;
+  min-width: 2.25rem;
+  cursor: pointer;
+  border: 1px solid var(--kombos-gray-200);
+  border-radius: 6px;
+  background: var(--kombos-white);
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  /* Reset for <button> */
+  padding: 0;
+  font: inherit;
+  /* Reset for <a> */
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.15s ease;
+}
+
+/* ---- Size: xs ---- */
+.kombos-badge--xs {
+  height: 1.75rem;
+  min-width: 1.75rem;
+}
+
+.kombos-badge--xs.kombos-badge--color,
+.kombos-badge--xs.kombos-badge--image {
+  width: 1.75rem;
+}
+
+.kombos-badge--image.kombos-badge--variant-img.kombos-badge--xs {
+  width: 3rem;
+  height: 3rem;
+}
+
+/* ---- Type: text ---- */
+.kombos-badge--text {
+  color: var(--kombos-gray-700);
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+
+.kombos-badge--xs.kombos-badge--text {
+  padding: 0 0.375rem;
+}
+
+.kombos-badge--s.kombos-badge--text {
+  padding: 0 0.5rem;
+}
+
+.kombos-badge--m.kombos-badge--text,
+.kombos-badge--l.kombos-badge--text {
+  padding: 0 0.75rem;
+}
+
+/* ---- Type: color ---- */
+.kombos-badge--color {
+  width: 2.25rem;
+  padding: 0;
+}
+
+/* ---- Type: image ---- */
+.kombos-badge--image {
+  width: 2.25rem;
+  padding: 0;
+}
+
+.kombos-badge__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  border-radius: 5px;
+}
+
+/* Variant product image (larger) */
+.kombos-badge--image.kombos-badge--variant-img {
+  width: 4rem;
+  height: 4rem;
+}
+
+/* ---- States ---- */
+
+/* Hover (skip disabled buttons and out-of-stock) */
+.kombos-badge:hover:not(:disabled):not(.kombos-badge--nonstock) {
+  border-color: var(--kombos-gray-900);
+}
+
+.kombos-badge--text:hover:not(:disabled):not(.kombos-badge--nonstock) {
+  color: var(--kombos-gray-900);
+}
+
+/* Selected */
+.kombos-badge--selected {
+  border-color: var(--kombos-gray-900);
+}
+
+.kombos-badge--selected.kombos-badge--text {
+  background: var(--kombos-gray-50);
+  color: var(--kombos-gray-900);
+}
+
+/* Out of stock */
+.kombos-badge--nonstock {
+  cursor: not-allowed;
+}
+
+.kombos-badge--nonstock.kombos-badge--text {
+  color: var(--kombos-gray-400);
+}
+
+/* Diagonal strike line */
+.kombos-badge__strike {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    to top left,
+    transparent calc(50% - 0.5px),
+    var(--kombos-gray-500) calc(50% - 0.5px),
+    var(--kombos-gray-500) calc(50% + 0.5px),
+    transparent calc(50% + 0.5px)
+  );
+}