@ikas/code-components-mcp 2.1.0 → 2.2.0

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

@@ -0,0 +1,53 @@
+{
+  "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

@@ -0,0 +1,4 @@
+{
+  "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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,25 @@
+{
+  "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

@@ -0,0 +1,99 @@
+.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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,4 @@
+{
+  "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."
+}

package/data/migration-examples/object-custom-to-inline-props/after-component.tsx

@@ -0,0 +1,34 @@
+import { getDefaultSrc } from "@ikas/bp-storefront";
+import { Props } from "./types";
+
+export default function TextBannerSection({
+  heading,
+  content,
+  image,
+  buttonLabel,
+  buttonLink,
+  buttonBgColor,
+}: Props) {
+  return (
+    <section className="text-banner">
+      {image && (
+        <div className="text-banner-image-wrapper">
+          <img src={getDefaultSrc(image)} alt={heading || ""} className="text-banner-image" />
+        </div>
+      )}
+      <h2 className="text-banner-heading">{heading}</h2>
+      {content && (
+        <div className="text-banner-content" dangerouslySetInnerHTML={{ __html: content }} />
+      )}
+      {buttonLabel && (
+        <a
+          href={buttonLink?.href || "#"}
+          className="text-banner-button"
+          style={{ backgroundColor: buttonBgColor || "#000" }}
+        >
+          {buttonLabel}
+        </a>
+      )}
+    </section>
+  );
+}

package/data/migration-examples/object-custom-to-inline-props/after-config-snippet.json

@@ -0,0 +1,23 @@
+{
+  "components": [
+    {
+      "id": "my-theme-text-banner",
+      "name": "TextBannerSection",
+      "type": "section",
+      "entry": "./src/components/TextBannerSection/index.tsx",
+      "styles": "./src/components/TextBannerSection/styles.css",
+      "props": [
+        { "name": "heading", "displayName": "Heading", "type": "TEXT", "required": true },
+        { "name": "content", "displayName": "Content", "type": "RICH_TEXT", "required": false },
+        { "name": "image", "displayName": "Image", "type": "IMAGE", "required": false },
+        { "name": "buttonLabel", "displayName": "Button Label", "type": "TEXT", "required": false },
+        { "name": "buttonLink", "displayName": "Button Link", "type": "LINK", "required": false },
+        { "name": "buttonBgColor", "displayName": "Button Background", "type": "COLOR", "required": false, "defaultValue": "#000000" }
+      ],
+      "propGroups": [
+        { "id": "button", "name": "Button" }
+      ]
+    }
+  ],
+  "note": "The old CUSTOM OBJECT with 3 fields (label, link, bgColor) is flattened into 3 direct props. A propGroup keeps them organized in the editor."
+}

package/data/migration-examples/object-custom-to-inline-props/after-styles.css

@@ -0,0 +1,38 @@
+.text-banner {
+  max-width: 1700px;
+  margin: 2.5rem auto 0;
+  padding: 0 20px;
+  text-align: center;
+}
+
+.text-banner-image-wrapper {
+  max-width: 600px;
+  margin: 0 auto 1.5rem;
+  aspect-ratio: 16/9;
+  overflow: hidden;
+}
+
+.text-banner-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.text-banner-heading {
+  font-size: 1.875rem;
+  font-weight: 700;
+}
+
+.text-banner-content {
+  max-width: 65ch;
+  margin: 1rem auto 0;
+}
+
+.text-banner-button {
+  display: inline-block;
+  margin-top: 1.5rem;
+  padding: 0.75rem 2rem;
+  border-radius: 0.25rem;
+  color: white;
+  text-decoration: none;
+}

package/data/migration-examples/object-custom-to-inline-props/before-component.tsx

@@ -0,0 +1,30 @@
+import { Image } from '@ikas/storefront';
+import { observer } from 'mobx-react-lite';
+import { TextBannerProps } from '../__generated__/types';
+
+const TextBanner = ({ heading, content, image, buttonConfig }: TextBannerProps) => {
+  return (
+    <div className="wrapper mt-10 text-center">
+      {image && (
+        <div className="relative mx-auto mb-6 aspect-video max-w-[600px]">
+          <Image image={image} layout="fill" objectFit="cover" />
+        </div>
+      )}
+      <h2 className="text-3xl font-bold">{heading}</h2>
+      {content && (
+        <div className="prose mx-auto mt-4" dangerouslySetInnerHTML={{ __html: content }} />
+      )}
+      {buttonConfig?.label && (
+        <a
+          href={buttonConfig.link?.href || '#'}
+          style={{ backgroundColor: buttonConfig.bgColor || '#000' }}
+          className="mt-6 inline-block rounded px-8 py-3 text-white"
+        >
+          {buttonConfig.label}
+        </a>
+      )}
+    </div>
+  );
+};
+
+export default observer(TextBanner);

package/data/migration-examples/object-custom-to-inline-props/before-theme-snippet.json

@@ -0,0 +1,26 @@
+{
+  "component": {
+    "dir": "TextBanner",
+    "displayName": "Text Banner",
+    "props": [
+      { "name": "heading", "type": "TEXT", "isRequired": true },
+      { "name": "content", "type": "RICH_TEXT", "isRequired": false },
+      { "name": "image", "type": "IMAGE", "isRequired": false },
+      {
+        "name": "buttonConfig",
+        "type": "CUSTOM",
+        "customDataId": "button-config-id"
+      }
+    ]
+  },
+  "customData": {
+    "id": "button-config-id",
+    "name": "Button Config",
+    "type": "OBJECT",
+    "nestedData": [
+      { "key": "label", "type": "TEXT", "name": "Button Label" },
+      { "key": "link", "type": "LINK", "name": "Button Link" },
+      { "key": "bgColor", "type": "COLOR", "name": "Button Background" }
+    ]
+  }
+}

package/data/migration-examples/slider-library-replacement/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Swiper Library → CSS Scroll-Snap + SLIDER → NUMBER",
+  "description": "Converts a logo slider component that uses Swiper library and SLIDER props into a vanilla CSS scroll-snap carousel with NUMBER props."
+}

package/data/migration-examples/slider-library-replacement/after-child.tsx

@@ -0,0 +1,13 @@
+import { getDefaultSrc } from "@ikas/bp-storefront";
+import { Props } from "./types";
+
+export default function LogoItem({ logo, width, mobileWidth, aspectRatio }: Props) {
+  return (
+    <div
+      className="logo-item"
+      style={{ "--w": width || "120px", "--mw": mobileWidth || "80px", aspectRatio: aspectRatio || "3/2" }}
+    >
+      {logo && <img src={getDefaultSrc(logo)} alt="" className="logo-image" />}
+    </div>
+  );
+}

package/data/migration-examples/slider-library-replacement/after-config-snippet.json

@@ -0,0 +1,29 @@
+{
+  "components": [
+    {
+      "id": "my-theme-logo-slider",
+      "name": "LogoSliderSection",
+      "type": "section",
+      "entry": "./src/components/LogoSliderSection/index.tsx",
+      "styles": "./src/components/LogoSliderSection/styles.css",
+      "props": [
+        { "name": "logos", "displayName": "Logos", "type": "COMPONENT_LIST", "required": false, "filteredComponentIds": ["my-theme-logo-item"] },
+        { "name": "marginTop", "displayName": "Margin Top", "type": "NUMBER", "required": false, "defaultValue": 0 },
+        { "name": "mobileMarginTop", "displayName": "Mobile Margin Top", "type": "NUMBER", "required": false, "defaultValue": 0 }
+      ]
+    },
+    {
+      "id": "my-theme-logo-item",
+      "name": "LogoItem",
+      "type": "component",
+      "entry": "./src/components/LogoItem/index.tsx",
+      "styles": "./src/components/LogoItem/styles.css",
+      "props": [
+        { "name": "logo", "displayName": "Logo", "type": "IMAGE", "required": true },
+        { "name": "width", "displayName": "Width", "type": "TEXT", "required": false, "defaultValue": "120px" },
+        { "name": "mobileWidth", "displayName": "Mobile Width", "type": "TEXT", "required": false, "defaultValue": "80px" },
+        { "name": "aspectRatio", "displayName": "Aspect Ratio", "type": "TEXT", "required": false, "defaultValue": "3/2" }
+      ]
+    }
+  ]
+}

package/data/migration-examples/slider-library-replacement/after-section.tsx

@@ -0,0 +1,38 @@
+import { useRef, useEffect } from "preact/hooks";
+import { IkasComponentRenderer } from "@ikas/bp-storefront";
+import { Props } from "./types";
+
+export default function LogoSliderSection({ logos, marginTop, mobileMarginTop, ...props }: Props) {
+  const trackRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+
+    let animationId: number;
+    let scrollPos = 0;
+    const speed = 0.5;
+
+    const animate = () => {
+      scrollPos += speed;
+      if (scrollPos >= track.scrollWidth / 2) scrollPos = 0;
+      track.scrollLeft = scrollPos;
+      animationId = requestAnimationFrame(animate);
+    };
+
+    animationId = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(animationId);
+  }, []);
+
+  return (
+    <section
+      className="logo-slider"
+      style={{ "--mt": `${marginTop || 0}px`, "--mt-mobile": `${mobileMarginTop || 0}px` }}
+    >
+      <div ref={trackRef} className="logo-track">
+        <IkasComponentRenderer id="logos" components={logos as any[]} parentProps={props} />
+        <IkasComponentRenderer id="logos-dup" components={logos as any[]} parentProps={props} />
+      </div>
+    </section>
+  );
+}

package/data/migration-examples/slider-library-replacement/after-styles.css

@@ -0,0 +1,43 @@
+.logo-slider {
+  margin-top: var(--mt-mobile, 0);
+  width: 100%;
+  overflow: hidden;
+  border-top: 1px solid #E3E3E3;
+  border-bottom: 1px solid #E3E3E3;
+}
+
+@media (min-width: 1024px) {
+  .logo-slider {
+    margin-top: var(--mt, 0);
+  }
+}
+
+.logo-track {
+  display: flex;
+  gap: 30px;
+  overflow: hidden;
+}
+
+@media (min-width: 1024px) {
+  .logo-track {
+    gap: 134px;
+  }
+}
+
+.logo-item {
+  flex: 0 0 auto;
+  width: var(--mw, 80px);
+  user-select: none;
+}
+
+@media (min-width: 1024px) {
+  .logo-item {
+    width: var(--w, 120px);
+  }
+}
+
+.logo-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}

package/data/migration-examples/slider-library-replacement/before-component.tsx

@@ -0,0 +1,39 @@
+import { Image } from '@ikas/storefront';
+import { observer } from 'mobx-react-lite';
+import { Autoplay } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { LogoSliderProps } from '../__generated__/types';
+
+const LogoSlider = ({ content, marginTop, mobileMarginTop }: LogoSliderProps) => {
+  return (
+    <div
+      style={{
+        '--mth': `${marginTop?.value || 0}px`,
+        '--mthm': `${mobileMarginTop?.value || 0}px`,
+      } as React.CSSProperties}
+      className="mt-[var(--mthm)] w-full overflow-hidden border-y border-[#E3E3E3] lg:mt-[var(--mth)]"
+    >
+      <Swiper
+        modules={[Autoplay]}
+        centerInsufficientSlides
+        loop={true}
+        slidesPerView="auto"
+        spaceBetween={30}
+        autoplay={{ delay: 3000, disableOnInteraction: false }}
+        breakpoints={{ 1024: { spaceBetween: 134 } }}
+      >
+        {content.map((item) => (
+          <SwiperSlide
+            style={{ aspectRatio: item.aspect, '--w': item.width, '--mw': item.mobWidth || item.width } as React.CSSProperties}
+            className="relative my-auto !w-[--mw] select-none lg:!w-[--w]"
+            key={item.logo.id}
+          >
+            <Image image={item.logo} layout="fill" objectFit="contain" sizes={item.width} />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+};
+
+export default observer(LogoSlider);

package/data/migration-examples/slider-library-replacement/before-types-snippet.ts

@@ -0,0 +1,14 @@
+import { IkasSlider, IkasImage } from '@ikas/storefront';
+
+export type LogoSlider = {
+  logo: IkasImage;
+  width: string;
+  mobWidth: string;
+  aspect: string;
+};
+
+export type LogoSliderProps = {
+  content: LogoSlider[];
+  marginTop: IkasSlider;
+  mobileMarginTop: IkasSlider;
+};