@ikas/code-components-mcp 0.116.0 → 0.118.0

package/data/migration-examples/complex-header-migration/after-config-snippet.json

@@ -1,55 +0,0 @@
-{
-  "components": [
-    {
-      "id": "my-theme-header",
-      "name": "HeaderSection",
-      "type": "section",
-      "isHeader": true,
-      "entry": "./src/components/HeaderSection/index.tsx",
-      "styles": "./src/components/HeaderSection/styles.css",
-      "props": [
-        { "name": "logo", "displayName": "Logo", "type": "IMAGE", "required": true },
-        { "name": "logoWidth", "displayName": "Logo Width (px)", "type": "NUMBER", "required": false, "defaultValue": 120 },
-        { "name": "mobileLogoWidth", "displayName": "Mobile Logo Width (px)", "type": "NUMBER", "required": false, "defaultValue": 80 },
-        { "name": "menuLinks", "displayName": "Menu Links", "type": "COMPONENT_LIST", "required": false, "filteredComponentIds": ["my-theme-menu-link"] },
-        { "name": "rightIcons", "displayName": "Right Icons", "type": "COMPONENT_LIST", "required": false, "filteredComponentIds": ["my-theme-icon-link"] },
-        { "name": "announcement", "displayName": "Announcement", "type": "TEXT", "required": false },
-        { "name": "announcementLink", "displayName": "Announcement Link", "type": "LINK", "required": false },
-        { "name": "announcementBg", "displayName": "Announcement Background", "type": "COLOR", "required": false },
-        { "name": "searchPlaceholder", "displayName": "Search Placeholder", "type": "TEXT", "required": false, "defaultValue": "Search..." },
-        { "name": "navBackground", "displayName": "Nav Background", "type": "COLOR", "required": false },
-        { "name": "stickyNav", "displayName": "Sticky Navigation", "type": "BOOLEAN", "required": false, "defaultValue": true },
-        { "name": "searchProducts", "displayName": "Search Popular Products", "type": "PRODUCT_LIST", "required": false }
-      ],
-      "propGroups": [
-        { "id": "appearance", "name": "Appearance" },
-        { "id": "search", "name": "Search" }
-      ]
-    },
-    {
-      "id": "my-theme-menu-link",
-      "name": "MenuLink",
-      "type": "component",
-      "entry": "./src/components/MenuLink/index.tsx",
-      "styles": "./src/components/MenuLink/styles.css",
-      "props": [
-        { "name": "link", "displayName": "Link", "type": "LINK", "required": true },
-        { "name": "icon", "displayName": "Icon", "type": "IMAGE", "required": false },
-        { "name": "color", "displayName": "Text Color", "type": "COLOR", "required": false },
-        { "name": "subLinks", "displayName": "Sub Links", "type": "LIST_OF_LINK", "required": false }
-      ]
-    },
-    {
-      "id": "my-theme-icon-link",
-      "name": "IconLink",
-      "type": "component",
-      "entry": "./src/components/IconLink/index.tsx",
-      "styles": "./src/components/IconLink/styles.css",
-      "props": [
-        { "name": "image", "displayName": "Icon Image", "type": "IMAGE", "required": true },
-        { "name": "link", "displayName": "Link", "type": "LINK", "required": true },
-        { "name": "aspectRatio", "displayName": "Aspect Ratio", "type": "TEXT", "required": false, "defaultValue": "1/1" }
-      ]
-    }
-  ]
-}

package/data/migration-examples/complex-header-migration/after-section.tsx

@@ -1,64 +0,0 @@
-import { useState } from "preact/hooks";
-import { getDefaultSrc, IkasComponentRenderer } from "@ikas/bp-storefront";
-import { Props } from "./types";
-
-export default function HeaderSection({
-  logo,
-  logoWidth,
-  mobileLogoWidth,
-  menuLinks,
-  rightIcons,
-  announcement,
-  announcementLink,
-  announcementBg,
-  searchPlaceholder,
-  navBackground,
-  stickyNav,
-  ...props
-}: Props) {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-
-  return (
-    <header className={`header ${stickyNav ? "header--sticky" : ""}`}>
-      {announcement && (
-        <div className="announcement-bar" style={{ backgroundColor: announcementBg || "#000" }}>
-          {announcementLink ? (
-            <a href={announcementLink.href} className="announcement-link">{announcement}</a>
-          ) : (
-            <span>{announcement}</span>
-          )}
-        </div>
-      )}
-
-      <nav className="nav-bar" style={{ backgroundColor: navBackground || "#fff" }}>
-        <div className="nav-inner">
-          <button className="mobile-menu-btn" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
-            <span className="hamburger-icon" />
-          </button>
-
-          {logo && (
-            <a href="/" className="logo-link" style={{ "--logo-w": `${logoWidth || 120}px`, "--logo-mw": `${mobileLogoWidth || 80}px` }}>
-              <img src={getDefaultSrc(logo)} alt="Logo" className="logo-image" />
-            </a>
-          )}
-
-          <div className="menu-links">
-            <IkasComponentRenderer id="menu-links" components={menuLinks as any[]} parentProps={props} />
-          </div>
-
-          <div className="right-icons">
-            <IkasComponentRenderer id="right-icons" components={rightIcons as any[]} parentProps={props} />
-          </div>
-        </div>
-      </nav>
-
-      {mobileMenuOpen && (
-        <div className="mobile-menu-overlay" onClick={() => setMobileMenuOpen(false)}>
-          <div className="mobile-menu" onClick={(e) => e.stopPropagation()}>
-            <IkasComponentRenderer id="mobile-menu-links" components={menuLinks as any[]} parentProps={props} />
-          </div>
-        </div>
-      )}
-    </header>
-  );
-}

package/data/migration-examples/complex-header-migration/before-props-summary.json

@@ -1,42 +0,0 @@
-{
-  "component": "Navbar",
-  "displayName": "Navbar",
-  "isHeader": true,
-  "props": [
-    { "name": "logo", "type": "IMAGE" },
-    { "name": "logoWidth", "type": "SLIDER", "sliderData": { "min": 80, "max": 300 } },
-    { "name": "mobLogoWidth", "type": "SLIDER", "sliderData": { "min": 0, "max": 200 } },
-    { "name": "menuLinks", "type": "CUSTOM", "customDataRef": "MenLink (DYNAMIC_LIST)" },
-    { "name": "extraRightLinks", "type": "CUSTOM", "customDataRef": "GrselveLinkObj (DYNAMIC_LIST)" },
-    { "name": "announcement", "type": "TEXT" },
-    { "name": "announcementLink", "type": "LINK" },
-    { "name": "announcementBg", "type": "COLOR" },
-    { "name": "searchPlaceholder", "type": "TEXT" },
-    { "name": "showGold", "type": "BOOLEAN" },
-    { "name": "navBg", "type": "COLOR" },
-    { "name": "mobileMenuBg", "type": "COLOR" },
-    { "name": "searchPopularProducts", "type": "PRODUCT_LIST", "groupId": "search-group" },
-    { "name": "closeInMobile", "type": "BOOLEAN" },
-    { "name": "stickyNav", "type": "BOOLEAN" }
-  ],
-  "customDataSummary": {
-    "MenLink": {
-      "type": "DYNAMIC_LIST/OBJECT",
-      "fields": [
-        { "key": "mainlink", "type": "LINK" },
-        { "key": "icon", "type": "IMAGE" },
-        { "key": "color", "type": "COLOR" },
-        { "key": "images", "type": "DYNAMIC_LIST", "nestedType": "GrselObjesi (image + link + viewType)" },
-        { "key": "sublinks", "type": "DYNAMIC_LIST", "nestedType": "AltLink (links + cols)" }
-      ]
-    },
-    "GrselveLinkObj": {
-      "type": "DYNAMIC_LIST/OBJECT",
-      "fields": [
-        { "key": "image", "type": "IMAGE" },
-        { "key": "aspect", "type": "TEXT" },
-        { "key": "link", "type": "LINK" }
-      ]
-    }
-  }
-}

package/data/migration-examples/custom-dynamic-list-to-component-list/_meta.json

@@ -1,4 +0,0 @@
-{
-  "title": "CUSTOM (DYNAMIC_LIST) → COMPONENT_LIST + Child Component",
-  "description": "Converts an old component with a CUSTOM prop referencing a DYNAMIC_LIST customData into a section with COMPONENT_LIST prop and a separate child component. This is the most common migration pattern."
-}

package/data/migration-examples/custom-dynamic-list-to-component-list/after-child-styles.css

@@ -1,38 +0,0 @@
-.store-card {
-  display: block;
-  overflow: hidden;
-  border-radius: 0.5rem;
-  border: 1px solid #e5e5e5;
-  text-decoration: none;
-  color: inherit;
-}
-
-.store-image-wrapper {
-  aspect-ratio: 16/9;
-  overflow: hidden;
-}
-
-.store-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.store-content {
-  padding: 1rem;
-}
-
-.store-title {
-  font-size: 1.125rem;
-  font-weight: 500;
-}
-
-.store-location {
-  font-size: 0.875rem;
-  color: #6b7280;
-}
-
-.store-phone {
-  margin-top: 0.25rem;
-  font-size: 0.875rem;
-}

package/data/migration-examples/custom-dynamic-list-to-component-list/after-child.tsx

@@ -1,22 +0,0 @@
-import { getDefaultSrc } from "@ikas/bp-storefront";
-import { Props } from "./types";
-
-export default function StoreCard({ title, location, district, phone, image, link }: Props) {
-  const Tag = link ? "a" : "div";
-  const linkProps = link ? { href: link.href } : {};
-
-  return (
-    <Tag {...linkProps} className="store-card">
-      {image && (
-        <div className="store-image-wrapper">
-          <img src={getDefaultSrc(image)} alt={title || ""} className="store-image" />
-        </div>
-      )}
-      <div className="store-content">
-        <h3 className="store-title">{title}</h3>
-        <p className="store-location">{location}{district ? `, ${district}` : ""}</p>
-        {phone && <p className="store-phone">{phone}</p>}
-      </div>
-    </Tag>
-  );
-}

package/data/migration-examples/custom-dynamic-list-to-component-list/after-config-snippet.json

@@ -1,31 +0,0 @@
-{
-  "components": [
-    {
-      "id": "my-theme-stores-section",
-      "name": "StoresSection",
-      "type": "section",
-      "entry": "./src/components/StoresSection/index.tsx",
-      "styles": "./src/components/StoresSection/styles.css",
-      "props": [
-        { "name": "heading", "displayName": "Heading", "type": "TEXT", "required": false },
-        { "name": "columns", "displayName": "Columns", "type": "NUMBER", "required": false, "defaultValue": 3 },
-        { "name": "stores", "displayName": "Stores", "type": "COMPONENT_LIST", "required": false, "filteredComponentIds": ["my-theme-store-card"] }
-      ]
-    },
-    {
-      "id": "my-theme-store-card",
-      "name": "StoreCard",
-      "type": "component",
-      "entry": "./src/components/StoreCard/index.tsx",
-      "styles": "./src/components/StoreCard/styles.css",
-      "props": [
-        { "name": "title", "displayName": "Title", "type": "TEXT", "required": false },
-        { "name": "location", "displayName": "Location", "type": "TEXT", "required": false },
-        { "name": "district", "displayName": "District", "type": "TEXT", "required": false },
-        { "name": "phone", "displayName": "Phone", "type": "TEXT", "required": false },
-        { "name": "image", "displayName": "Image", "type": "IMAGE", "required": false },
-        { "name": "link", "displayName": "Link", "type": "LINK", "required": false }
-      ]
-    }
-  ]
-}

package/data/migration-examples/custom-dynamic-list-to-component-list/after-section-styles.css

@@ -1,25 +0,0 @@
-.stores-section {
-  max-width: 1700px;
-  margin: 2.5rem auto 0;
-  padding: 0 20px;
-}
-
-@media (min-width: 1024px) {
-  .stores-section {
-    margin-top: 5rem;
-    padding: 0 60px;
-  }
-}
-
-.stores-heading {
-  margin-bottom: 1.5rem;
-  text-align: center;
-  font-size: 1.5rem;
-  font-weight: 600;
-}
-
-.stores-grid {
-  display: grid;
-  grid-template-columns: repeat(var(--cols, 3), 1fr);
-  gap: 1.5rem;
-}

package/data/migration-examples/custom-dynamic-list-to-component-list/after-section.tsx

@@ -1,17 +0,0 @@
-import { IkasComponentRenderer } from "@ikas/bp-storefront";
-import { Props } from "./types";
-
-export default function StoresSection({ heading, columns, stores, ...props }: Props) {
-  return (
-    <section className="stores-section" style={{ "--cols": columns || 3 }}>
-      {heading && <h2 className="stores-heading">{heading}</h2>}
-      <div className="stores-grid">
-        <IkasComponentRenderer
-          id="stores"
-          components={stores as any[]}
-          parentProps={props}
-        />
-      </div>
-    </section>
-  );
-}

package/data/migration-examples/custom-dynamic-list-to-component-list/before-component.tsx

@@ -1,32 +0,0 @@
-import { Image } from '@ikas/storefront';
-import { observer } from 'mobx-react-lite';
-import { StoresPageProps } from '../__generated__/types';
-
-const StoresPage = ({ heading, stores, columns }: StoresPageProps) => {
-  return (
-    <div
-      style={{ '--cols': columns?.value || 3 } as React.CSSProperties}
-      className="wrapper mt-10 lg:mt-20"
-    >
-      {heading && <h2 className="mb-6 text-center text-2xl font-semibold">{heading}</h2>}
-      <div className="grid gap-6" style={{ gridTemplateColumns: `repeat(var(--cols), 1fr)` }}>
-        {stores.map((store, i) => (
-          <a key={i} href={store.link?.href} className="group overflow-hidden rounded-lg border">
-            {store.image && (
-              <div className="relative aspect-video">
-                <Image image={store.image} layout="fill" objectFit="cover" />
-              </div>
-            )}
-            <div className="p-4">
-              <h3 className="text-lg font-medium">{store.title}</h3>
-              <p className="text-sm text-gray-500">{store.location}, {store.district}</p>
-              <p className="mt-1 text-sm">{store.phone}</p>
-            </div>
-          </a>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default observer(StoresPage);

package/data/migration-examples/custom-dynamic-list-to-component-list/before-theme-snippet.json

@@ -1,53 +0,0 @@
-{
-  "components": [
-    {
-      "id": "stores-page",
-      "name": "StoresPage",
-      "displayName": "Stores Page",
-      "props": [
-        {
-          "key": "heading",
-          "type": "TEXT",
-          "displayName": "Heading"
-        },
-        {
-          "key": "stores",
-          "type": "CUSTOM",
-          "displayName": "Stores",
-          "customDataId": "cd_stores_list"
-        },
-        {
-          "key": "columns",
-          "type": "SLIDER",
-          "displayName": "Columns",
-          "sliderData": {
-            "min": 1,
-            "max": 4,
-            "defaultValue": 3
-          }
-        }
-      ]
-    }
-  ],
-  "customData": [
-    {
-      "id": "cd_stores_list",
-      "name": "Mağazalarımız",
-      "type": "DYNAMIC_LIST",
-      "objectTypeId": "cd_store_object"
-    },
-    {
-      "id": "cd_store_object",
-      "name": "Maaza",
-      "type": "OBJECT",
-      "fields": [
-        { "key": "title", "type": "TEXT", "displayName": "Title" },
-        { "key": "location", "type": "TEXT", "displayName": "Location" },
-        { "key": "district", "type": "TEXT", "displayName": "District" },
-        { "key": "phone", "type": "TEXT", "displayName": "Phone" },
-        { "key": "image", "type": "IMAGE", "displayName": "Image" },
-        { "key": "link", "type": "LINK", "displayName": "Link" }
-      ]
-    }
-  ]
-}

package/data/migration-examples/full-component-with-tailwind/_meta.json

@@ -1,4 +0,0 @@
-{
-  "title": "Tailwind CSS → Plain Scoped CSS",
-  "description": "Converts a component using Tailwind utility classes, prose, and classnames into a component with plain scoped CSS."
-}

package/data/migration-examples/full-component-with-tailwind/after-component.tsx

@@ -1,43 +0,0 @@
-import { getDefaultSrc } from "@ikas/bp-storefront";
-import { Props } from "./types";
-
-export default function CTASection({
-  image,
-  aspectRatio,
-  title,
-  content,
-  marginTop,
-  mobileMarginTop,
-  reverseLayout,
-  backgroundColor,
-  miniImage,
-  miniImageAspect,
-  imageMaxWidth,
-  textMaxWidth,
-}: Props) {
-  return (
-    <div className="cta-wrapper" style={{ backgroundColor: backgroundColor || "transparent" }}>
-      <div
-        className={`cta-grid ${reverseLayout ? "cta-grid--reversed" : ""}`}
-        style={{
-          "--mt": `${marginTop || 0}px`,
-          "--mt-mobile": `${mobileMarginTop || 0}px`,
-        }}
-      >
-        <div className="cta-image-col" style={{ aspectRatio: aspectRatio || "1/1", maxWidth: imageMaxWidth || "316px" }}>
-          {image && <img src={getDefaultSrc(image)} alt="" className="cta-image" />}
-        </div>
-
-        <div className="cta-text-col" style={{ maxWidth: textMaxWidth || "600px" }}>
-          {miniImage && (
-            <div className="cta-mini-image" style={{ aspectRatio: miniImageAspect }}>
-              <img src={getDefaultSrc(miniImage)} alt="" className="cta-mini-img" />
-            </div>
-          )}
-          {title && <div className="cta-title" dangerouslySetInnerHTML={{ __html: title }} />}
-          {content && <div className="cta-content" dangerouslySetInnerHTML={{ __html: content }} />}
-        </div>
-      </div>
-    </div>
-  );
-}

package/data/migration-examples/full-component-with-tailwind/after-config-snippet.json

@@ -1,25 +0,0 @@
-{
-  "components": [
-    {
-      "id": "my-theme-cta-section",
-      "name": "CTASection",
-      "type": "section",
-      "entry": "./src/components/CTASection/index.tsx",
-      "styles": "./src/components/CTASection/styles.css",
-      "props": [
-        { "name": "image", "displayName": "Image", "type": "IMAGE", "required": true },
-        { "name": "aspectRatio", "displayName": "Image Aspect Ratio", "type": "TEXT", "required": false, "defaultValue": "1/1" },
-        { "name": "title", "displayName": "Title (HTML)", "type": "RICH_TEXT", "required": false },
-        { "name": "content", "displayName": "Content (HTML)", "type": "RICH_TEXT", "required": true },
-        { "name": "marginTop", "displayName": "Margin Top (px)", "type": "NUMBER", "required": false, "defaultValue": 0 },
-        { "name": "mobileMarginTop", "displayName": "Mobile Margin Top (px)", "type": "NUMBER", "required": false, "defaultValue": 0 },
-        { "name": "reverseLayout", "displayName": "Reverse Image/Text", "type": "BOOLEAN", "required": false, "defaultValue": false },
-        { "name": "backgroundColor", "displayName": "Background Color", "type": "COLOR", "required": false },
-        { "name": "miniImage", "displayName": "Mini Image", "type": "IMAGE", "required": false },
-        { "name": "miniImageAspect", "displayName": "Mini Image Aspect", "type": "TEXT", "required": false },
-        { "name": "imageMaxWidth", "displayName": "Image Max Width", "type": "TEXT", "required": false, "defaultValue": "316px" },
-        { "name": "textMaxWidth", "displayName": "Text Max Width", "type": "TEXT", "required": false, "defaultValue": "600px" }
-      ]
-    }
-  ]
-}

package/data/migration-examples/full-component-with-tailwind/after-styles.css

@@ -1,99 +0,0 @@
-.cta-wrapper {
-  width: 100%;
-}
-
-.cta-grid {
-  max-width: 1700px;
-  margin: var(--mt-mobile, 0) auto 0;
-  padding: 60px 20px 0;
-  display: grid;
-  grid-template-columns: 1fr;
-  align-items: center;
-}
-
-@media (min-width: 1024px) {
-  .cta-grid {
-    margin-top: var(--mt, 0);
-    padding: 0 60px;
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.cta-grid--reversed .cta-image-col {
-  order: 2;
-}
-
-.cta-image-col {
-  position: relative;
-  width: 100%;
-  margin: 0 auto;
-  overflow: hidden;
-}
-
-@media (min-width: 1024px) {
-  .cta-image-col {
-    margin-top: 60px;
-  }
-}
-
-.cta-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.cta-text-col {
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 0 1.5rem 1.5rem;
-}
-
-@media (min-width: 1280px) {
-  .cta-text-col {
-    padding: 2.5rem;
-  }
-}
-
-.cta-mini-image {
-  width: 188px;
-  margin-bottom: 30px;
-}
-
-@media (min-width: 1024px) {
-  .cta-mini-image {
-    margin-bottom: 40px;
-  }
-}
-
-.cta-mini-img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.cta-title {
-  margin-bottom: 1rem;
-  text-align: center;
-  font-size: 20px;
-  font-weight: 300;
-  line-height: 1.2;
-  color: white;
-}
-
-@media (min-width: 1024px) {
-  .cta-title {
-    font-size: 30px;
-  }
-}
-
-.cta-content {
-  text-align: center;
-  font-size: 0.875rem;
-  font-weight: 300;
-  line-height: 1.2;
-  color: white;
-}

package/data/migration-examples/full-component-with-tailwind/before-component.tsx

@@ -1,60 +0,0 @@
-import { Image } from '@ikas/storefront';
-import { observer } from 'mobx-react-lite';
-import { CTAProps } from '../__generated__/types';
-
-const CTA = ({
-  image,
-  aspect,
-  title,
-  content,
-  marginTop,
-  mobileMarginTop,
-  reverse,
-  bg,
-  miniImage,
-  miniImageAspect,
-  imageMaxWidth,
-  textMaxWidth,
-}: CTAProps) => {
-  return (
-    <div style={{ backgroundColor: bg || 'transparent' }}>
-      <div
-        style={{
-          '--mth': `${marginTop?.value || 0}px`,
-          '--mthm': `${mobileMarginTop?.value || 0}px`,
-        } as React.CSSProperties}
-        className={`wrapper mt-[var(--mthm)] grid grid-cols-1 items-center max-lg:pt-[60px] lg:mt-[var(--mth)] lg:grid-cols-2`}
-      >
-        <div
-          style={{ aspectRatio: aspect, maxWidth: imageMaxWidth || '316px' }}
-          className={`relative m-auto w-full overflow-hidden lg:mt-[60px] ${reverse ? 'order-last' : ''}`}
-        >
-          <Image image={image} layout="fill" objectFit="cover" />
-        </div>
-
-        <div
-          style={{ maxWidth: textMaxWidth || '600px' }}
-          className="m-auto flex h-full flex-col items-center justify-center p-6 pt-0 xl:p-10"
-        >
-          {miniImage && (
-            <div style={{ aspectRatio: miniImageAspect }} className="relative mb-[30px] w-[188px] lg:mb-10">
-              <Image image={miniImage} layout="fill" objectFit="contain" sizes="200px" />
-            </div>
-          )}
-          {title && (
-            <div
-              className="prose mb-4 max-w-none text-center text-[20px] font-light !leading-tight text-white lg:text-[30px]"
-              dangerouslySetInnerHTML={{ __html: title }}
-            />
-          )}
-          <div
-            className="prose prose-sm max-w-none text-center font-light !leading-tight text-white"
-            dangerouslySetInnerHTML={{ __html: content }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default observer(CTA);

package/data/migration-examples/object-custom-to-inline-props/_meta.json

@@ -1,4 +0,0 @@
-{
-  "title": "Simple CUSTOM (OBJECT) → Inline Props",
-  "description": "When a CUSTOM prop references an OBJECT with 3 or fewer simple fields, flatten them into direct props on the parent component instead of creating a child component."
-}