@ikas/code-components-mcp 1.4.0-beta.0 → 1.4.0-beta.2

package/data/migration-examples/complex-header-migration/_meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Complex Header Migration (Navbar → HeaderSection)",
+  "description": "Converts a complex Navbar component with CUSTOM props (menu links, cookie, contact), SLIDER props, Swiper usage, and Headless UI into a HeaderSection with COMPONENT_LIST children."
+}

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

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

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

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

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

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

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

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

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

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

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

@@ -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."
+}