@ikas/code-components-mcp 1.4.0-beta.1 → 1.4.0-beta.10

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;
+};