@ikas/code-components-mcp 0.104.0 → 0.106.0

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

@@ -0,0 +1,10 @@
+import type { IkasProduct, MarginTopStyleType, MarginBottomStyleType } from "@ikas/bp-storefront";
+
+export interface Props {
+  product?: IkasProduct | null;
+  mobileMarginTop?: MarginTopStyleType;
+  mobileMarginBottom?: MarginBottomStyleType;
+  desktopMarginTop?: MarginTopStyleType;
+  desktopMarginBottom?: MarginBottomStyleType;
+  hideFavoriteButton?: boolean;
+}

package/data/section-templates/favorites/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/features-section/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Features Section",
+  "description": "Feature highlights grid using IkasComponentRenderer to render FeatureItem children with icon and text props."
+}

package/data/section-templates/features-section/children/FeatureItem/ikas-config-snippet.json

@@ -0,0 +1,21 @@
+{
+  "id": "{{PROJECT_ID}}-feature-item",
+  "name": "FeatureItem",
+  "type": "component",
+  "entry": "./src/components/FeatureItem/index.tsx",
+  "styles": "./src/components/FeatureItem/styles.css",
+  "props": [
+    {
+      "name": "image",
+      "displayName": "Görsel",
+      "type": "IMAGE",
+      "required": false
+    },
+    {
+      "name": "text",
+      "displayName": "Metin",
+      "type": "RICH_TEXT",
+      "required": false
+    }
+  ]
+}

package/data/section-templates/features-section/children/FeatureItem/index.tsx

@@ -0,0 +1,27 @@
+import { getDefaultSrc } from "@ikas/bp-storefront";
+
+import { Props } from "./types";
+
+export function FeatureItem({ image, text }: Props) {
+  const src = image ? getDefaultSrc(image) : undefined;
+
+  return (
+    <div className="kombos-feature-item">
+      {src && (
+        <img
+          className="kombos-feature-item__icon"
+          src={src}
+          alt={image?.altText || ""}
+        />
+      )}
+      {text && (
+        <div
+          className="kombos-feature-item__text text-sm-medium"
+          dangerouslySetInnerHTML={{ __html: text }}
+        />
+      )}
+    </div>
+  );
+}
+
+export default FeatureItem;

package/data/section-templates/features-section/children/FeatureItem/styles.css

@@ -0,0 +1,19 @@
+.kombos-feature-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.kombos-feature-item__icon {
+  width: 2rem;
+  height: 2rem;
+  overflow: hidden;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.kombos-feature-item__text {
+  color: var(--kombos-gray-900);
+  text-align: center;
+}

package/data/section-templates/features-section/children/FeatureItem/types.ts

@@ -0,0 +1,6 @@
+import type { IkasImage } from "@ikas/bp-storefront";
+
+export interface Props {
+  image?: IkasImage | null;
+  text?: string;
+}

package/data/section-templates/features-section/ikas-config-snippet.json

@@ -0,0 +1,25 @@
+{
+  "id": "{{PROJECT_ID}}-features",
+  "name": "Features",
+  "type": "section",
+  "entry": "./src/components/Features/index.tsx",
+  "styles": "./src/components/Features/styles.css",
+  "props": [
+    {
+      "name": "backgroundColor",
+      "displayName": "Arkaplan Rengi",
+      "type": "COLOR",
+      "required": false,
+      "defaultValue": "#fafafa"
+    },
+    {
+      "name": "components",
+      "displayName": "Özellikler",
+      "type": "COMPONENT_LIST",
+      "required": false,
+      "filteredComponentIds": [
+        "{{PROJECT_ID}}-feature-item"
+      ]
+    }
+  ]
+}

package/data/section-templates/features-section/index.tsx

@@ -0,0 +1,25 @@
+// import { IkasComponentRenderer } from "@ikas/bp-storefront";
+
+import { IkasComponentRenderer } from "@ikas/bp-storefront";
+import { Props } from "./types";
+
+export function Features(props: Props) {
+  const { backgroundColor, components } = props;
+
+  return (
+    <section
+      className="kombos-features"
+      style={backgroundColor ? { backgroundColor } : undefined}
+    >
+      <div className="kombos-container kombos-features__container">
+        <IkasComponentRenderer
+          id="features"
+          components={components}
+          parentProps={props}
+        />
+      </div>
+    </section>
+  );
+}
+
+export default Features;

package/data/section-templates/features-section/styles.css

@@ -0,0 +1,39 @@
+.kombos-features {
+  width: 100%;
+}
+
+.kombos-features__container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1.5rem;
+  padding: 2rem 1rem;
+}
+
+.kombos-features__container > * > * > * {
+  width: calc(50% - 0.75rem);
+  flex-shrink: 0;
+}
+
+@media (min-width: 640px) {
+  .kombos-features__container > * > * > * {
+    width: calc(33.33% - 1rem);
+  }
+}
+
+@media (min-width: 768px) {
+  .kombos-features__container {
+    padding: 3rem 2rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .kombos-features__container {
+    padding: 3rem 4.5rem;
+  }
+
+  .kombos-features__container > * > * > * {
+    width: auto;
+    flex: 1 0 calc(16.66% - 1.25rem);
+  }
+}

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

@@ -0,0 +1,4 @@
+export interface Props {
+  backgroundColor?: string;
+  components?: any;
+}

package/data/section-templates/footer-section/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Footer Section",
+  "description": "Complete footer with multiple link columns, social media icons via IkasComponentRenderer, newsletter signup, and copyright text. Configurable colors and layout."
+}

package/data/section-templates/footer-section/children/SocialMediaIcon/ikas-config-snippet.json

@@ -0,0 +1,21 @@
+{
+  "id": "{{PROJECT_ID}}-social-media-icon",
+  "name": "SocialMediaIcon",
+  "type": "component",
+  "entry": "./src/components/SocialMediaIcon/index.tsx",
+  "styles": "./src/components/SocialMediaIcon/styles.css",
+  "props": [
+    {
+      "name": "icon",
+      "displayName": "İkon",
+      "type": "IMAGE",
+      "required": false
+    },
+    {
+      "name": "link",
+      "displayName": "Link",
+      "type": "LINK",
+      "required": false
+    }
+  ]
+}

package/data/section-templates/footer-section/children/SocialMediaIcon/index.tsx

@@ -0,0 +1,26 @@
+import { getDefaultSrc, createMediaSrcset } from "@ikas/bp-storefront";
+import { Props } from "./types";
+
+export function SocialMediaIcon({ icon, link }: Props) {
+  if (!icon) return null;
+
+  return (
+    <a
+      href={link?.href}
+      target={link?.openInNewTab ? "_blank" : undefined}
+      rel={link?.openInNewTab ? "noopener noreferrer" : undefined}
+      aria-label={link?.label || undefined}
+      className="kombos-social-media-icon"
+    >
+      <img
+        src={getDefaultSrc(icon)}
+        srcSet={createMediaSrcset(icon)}
+        sizes="20px"
+        alt={link?.label || ""}
+        className="kombos-social-media-icon__img"
+      />
+    </a>
+  );
+}
+
+export default SocialMediaIcon;

package/data/section-templates/footer-section/children/SocialMediaIcon/styles.css

@@ -0,0 +1,17 @@
+.kombos-social-media-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  transition: opacity 0.15s ease;
+}
+
+.kombos-social-media-icon:hover {
+  opacity: 0.7;
+}
+
+.kombos-social-media-icon__img {
+  width: 1.25rem;
+  height: 1.25rem;
+  object-fit: contain;
+}

package/data/section-templates/footer-section/children/SocialMediaIcon/types.ts

@@ -0,0 +1,6 @@
+import type { IkasImage, IkasNavigationLink } from "@ikas/bp-storefront";
+
+export interface Props {
+  icon?: IkasImage | null;
+  link?: IkasNavigationLink | null;
+}

package/data/section-templates/footer-section/ikas-config-snippet.json

@@ -0,0 +1,108 @@
+{
+  "id": "{{PROJECT_ID}}-footer",
+  "name": "Footer",
+  "type": "section",
+  "entry": "./src/components/Footer/index.tsx",
+  "styles": "./src/components/Footer/styles.css",
+  "props": [
+    {
+      "name": "logo",
+      "displayName": "Logo",
+      "type": "IMAGE",
+      "required": false,
+      "groupId": "content"
+    },
+    {
+      "name": "description",
+      "displayName": "Açıklama",
+      "type": "RICH_TEXT",
+      "required": false,
+      "groupId": "content"
+    },
+    {
+      "name": "copyrightText",
+      "displayName": "Telif Hakkı Metni",
+      "type": "RICH_TEXT",
+      "required": false,
+      "defaultValue": "<p>© 2026 ikas Mağazası. Tüm Hakları Saklıdır.</p>",
+      "groupId": "content"
+    },
+    {
+      "name": "footerLinks",
+      "displayName": "Footer Linkleri",
+      "type": "LIST_OF_LINK",
+      "required": false,
+      "groupId": "links"
+    },
+    {
+      "name": "linkColor",
+      "displayName": "Link Rengi",
+      "type": "COLOR",
+      "required": false,
+      "groupId": "appearance"
+    },
+    {
+      "name": "linkHoverColor",
+      "displayName": "Link Hover Rengi",
+      "type": "COLOR",
+      "required": false,
+      "groupId": "appearance"
+    },
+    {
+      "name": "contactTitle",
+      "displayName": "Başlık",
+      "type": "TEXT",
+      "required": false,
+      "defaultValue": "İletişim Bilgileri",
+      "groupId": "contact"
+    },
+    {
+      "name": "contactEmail",
+      "displayName": "E-posta",
+      "type": "TEXT",
+      "required": false,
+      "groupId": "contact"
+    },
+    {
+      "name": "contactPhone",
+      "displayName": "Telefon",
+      "type": "TEXT",
+      "required": false,
+      "groupId": "contact"
+    },
+    {
+      "name": "socialMediaIcons",
+      "displayName": "Sosyal Medya İkonları",
+      "type": "COMPONENT_LIST",
+      "required": false,
+      "filteredComponentIds": [
+        "{{PROJECT_ID}}-social-media-icon"
+      ]
+    }
+  ],
+  "isFooter": true,
+  "propGroups": [
+    {
+      "id": "links",
+      "name": "Navigasyon",
+      "description": "Site bağlantıları ve iletişim bilgileri",
+      "children": [
+        {
+          "id": "contact",
+          "name": "İletişim",
+          "description": "İletişim başlığı, e-posta ve telefon bilgileri"
+        }
+      ]
+    },
+    {
+      "id": "appearance",
+      "name": "Görünüm",
+      "description": "Link renkleri"
+    },
+    {
+      "id": "content",
+      "name": "İçerik",
+      "description": "Logo, açıklama ve telif hakkı metni"
+    }
+  ]
+}

package/data/section-templates/footer-section/index.tsx

@@ -0,0 +1,154 @@
+import {
+  IkasNavigationLink,
+  IkasComponentRenderer,
+  createMediaSrcset,
+  getDefaultSrc,
+} from "@ikas/bp-storefront";
+import { Props } from "./types";
+import { IkasLogoSVG } from "../../sub-components/icons";
+
+export function Footer(props: Props) {
+  const {
+    logo,
+    description,
+    copyrightText = "© 2026 ikas Mağazası. Tüm Hakları Saklıdır",
+    linkColor,
+    linkHoverColor,
+    contactTitle = "İletişim Bilgileri",
+    contactEmail,
+    contactPhone,
+    footerLinks,
+    socialMediaIcons,
+  } = props;
+
+  const columns = footerLinks?.links ?? [];
+  const hasContact = !!(contactEmail || contactPhone);
+  const hasSocials = socialMediaIcons?.length > 0;
+
+  return (
+    <footer
+      className="kombos-footer"
+      style={{
+...(linkColor ? { "--footer-link-color": linkColor } : {}),
+        ...(linkHoverColor
+          ? { "--footer-link-hover-color": linkHoverColor }
+          : {}),
+      }}
+    >
+      <div className="kombos-footer__wrapper kombos-container">
+        <div className="kombos-footer__top">
+          {/* Brand column */}
+          <div className="kombos-footer__brand">
+            {logo && (
+              <div className="kombos-footer__logo-wrap">
+                <img
+                  src={getDefaultSrc(logo)}
+                  srcSet={createMediaSrcset(logo)}
+                  sizes="96px"
+                  alt={logo?.altText || "Logo"}
+                  className="kombos-footer__logo-img"
+                  loading="lazy"
+                  decoding="async"
+                />
+              </div>
+            )}
+
+            {description && (
+              <div
+                className="kombos-footer__desc text-sm-regular"
+                dangerouslySetInnerHTML={{ __html: description }}
+              />
+            )}
+
+            {hasSocials && (
+              <div className="kombos-footer__socials">
+                <IkasComponentRenderer
+                  id="footer-socials"
+                  components={socialMediaIcons}
+                  parentProps={props}
+                />
+              </div>
+            )}
+          </div>
+
+          {/* Link columns */}
+          {(columns.length > 0 || hasContact) && (
+            <div className="kombos-footer__columns">
+              {columns.map((column: IkasNavigationLink, i: number) => (
+                <div key={i} className="kombos-footer__col">
+                  <p className="kombos-footer__col-title text-sm-medium">
+                    {column.label}
+                  </p>
+                  {column.subLinks?.length > 0 && (
+                    <nav className="kombos-footer__col-links">
+                      {column.subLinks.map(
+                        (link: IkasNavigationLink, j: number) => (
+                          <a
+                            key={j}
+                            href={link.href}
+                            className="kombos-footer__col-link text-sm-regular"
+                            target={link.openInNewTab ? "_blank" : undefined}
+                            rel={
+                              link.openInNewTab
+                                ? "noopener noreferrer"
+                                : undefined
+                            }
+                          >
+                            {link.label}
+                          </a>
+                        ),
+                      )}
+                    </nav>
+                  )}
+                </div>
+              ))}
+
+              {/* Contact column */}
+              {hasContact && (
+                <div className="kombos-footer__col">
+                  <p className="kombos-footer__col-title text-sm-medium">
+                    {contactTitle}
+                  </p>
+                  <div className="kombos-footer__col-links">
+                    {contactEmail && (
+                      <a
+                        href={`mailto:${contactEmail}`}
+                        className="kombos-footer__col-link text-sm-regular"
+                      >
+                        {contactEmail}
+                      </a>
+                    )}
+                    {contactPhone && (
+                      <a
+                        href={`tel:${contactPhone.replace(/\s/g, "")}`}
+                        className="kombos-footer__col-link text-sm-regular"
+                      >
+                        {contactPhone}
+                      </a>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Bottom bar */}
+        <div className="kombos-footer__bottom">
+          <div
+            className="kombos-footer__copyright text-xs-regular"
+            dangerouslySetInnerHTML={{ __html: copyrightText }}
+          />
+          <div className="kombos-footer__badge">
+            <IkasLogoSVG className="kombos-footer__badge-logo" />
+            <span className="kombos-footer__badge-text text-xs-medium">
+              E-Ticaret Altyapısı ile Hazırlanmıştır.
+            </span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;