@uniformdev/csk-components 6.0.123-alpha.1 → 6.1.63-alpha.1

package/dist/content/components/canvas/SimpleFooter/simple-footer.tsx

@@ -0,0 +1,85 @@
+import { FC } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { UniformRichText, ComponentParameter, UniformText } from '@uniformdev/next-app-router/component';
+import BaseFooter from '@/components/ui/Footer';
+import { ReplaceFieldsWithAssets } from '@/types/cskTypes';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { SimpleFooterParameters, SimpleFooterProps } from '.';
+
+const GitHubIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="30" viewBox="0 0 35 34" width="30">
+    <path
+      clipRule="evenodd"
+      d="M17.5145 0C7.82942 0 0 7.79163 0 17.4309C0 25.1362 5.01658 31.6585 11.9759 33.9669C12.846 34.1405 13.1647 33.5919 13.1647 33.1304C13.1647 32.7263 13.136 31.3411 13.136 29.8979C8.26393 30.937 7.24936 27.82 7.24936 27.82C6.46638 25.7999 5.30626 25.2807 5.30626 25.2807C3.71162 24.2129 5.42241 24.2129 5.42241 24.2129C7.19128 24.3283 8.11946 26.0021 8.11946 26.0021C9.68505 28.6569 12.2079 27.9068 13.2228 27.445C13.3676 26.3194 13.8319 25.5403 14.3248 25.1075C10.439 24.7034 6.35059 23.2028 6.35059 16.5073C6.35059 14.6026 7.04609 13.0443 8.14814 11.8323C7.97426 11.3995 7.36516 9.60992 8.32237 7.2147C8.32237 7.2147 9.80121 6.75287 13.1357 9.00394C14.5633 8.62239 16.0356 8.42829 17.5145 8.42665C18.9933 8.42665 20.5008 8.62888 21.8929 9.00394C25.2277 6.75287 26.7066 7.2147 26.7066 7.2147C27.6638 9.60992 27.0543 11.3995 26.8805 11.8323C28.0116 13.0443 28.6784 14.6026 28.6784 16.5073C28.6784 23.2028 24.59 24.6743 20.6751 25.1075C21.3132 25.6557 21.8639 26.6945 21.8639 28.3396C21.8639 30.6771 21.8352 32.5531 21.8352 33.13C21.8352 33.5919 22.1543 34.1405 23.024 33.9673C29.9833 31.6581 34.9999 25.1362 34.9999 17.4309C35.0286 7.79163 27.1705 0 17.5145 0Z"
+      fill="#1E1E1E"
+      fillRule="evenodd"
+    />
+  </svg>
+);
+
+const StorybookIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="30" viewBox="0 0 29 29" width="30">
+    <path d="M29 0H0V29H29V0Z" fill="url(#pattern0_9543_564)" />
+    <defs>
+      <pattern height="1" id="pattern0_9543_564" patternContentUnits="objectBoundingBox" width="1">
+        <use href="#image0_9543_564" transform="scale(0.005)" />
+      </pattern>
+      <image
+        height="200"
+        href="data:image/png;base64,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"
+        id="image0_9543_564"
+        width="200"
+      />
+    </defs>
+  </svg>
+);
+
+export const Footer: FC<SimpleFooterProps & ReplaceFieldsWithAssets<SimpleFooterParameters, 'logo'>> = ({
+  logo,
+  links,
+  parameters,
+  component,
+}) => (
+  <BaseFooter
+    logo={logo?.[0]?.url && <Image src={logo?.[0]?.url} alt="Logo" width={180} height={47} />}
+    copyright={<UniformRichText parameter={parameters.copyright as ComponentParameter<string>} component={component} />}
+    content={
+      <div className="flex lg:gap-32 md:gap-16 gap-16">
+        <div className="flex flex-col gap-2">
+          <UniformText
+            className="text-text-tertiary lg:text-base font-bold uppercase"
+            parameter={parameters.footerLinkSectionTitle as ComponentParameter<string>}
+            component={component}
+          />
+          {links?.map(link => (
+            <Link
+              className="text-text-primary font-bold transition-all duration-150 whitespace-nowrap"
+              href={link.link?.path || ''}
+              key={link.title}
+            >
+              {link.title}
+            </Link>
+          ))}
+        </div>
+        <div className="flex gap-4">
+          <Link href="https://unfrm.to/csk-sb">
+            <StorybookIcon />
+          </Link>
+          <Link href="https://unfrm.to/csk-repo">
+            <GitHubIcon />
+          </Link>
+        </div>
+      </div>
+    }
+    backgroundColor="general-color-1"
+    spacing={{
+      paddingTop: 'container-small',
+      paddingBottom: 'container-small',
+    }}
+    border="border-footer"
+    fluidContent={false}
+  />
+);
+
+export default withFlattenParameters(Footer);

package/dist/content/components/canvas/SimpleHeader/index.tsx

@@ -0,0 +1,22 @@
+import { AssetParamValue, LinkParamValue } from '@uniformdev/canvas';
+import { ComponentProps } from '@/types/cskTypes';
+
+export type SimpleHeaderParameters = {
+  logo?: AssetParamValue;
+  color?: string;
+  links?: {
+    title: string;
+    link: LinkParamValue;
+  }[];
+  backgroundColor?: string;
+  textColor?: string;
+  hoverTextColor?: string;
+};
+
+export enum SimpleHeaderVariants {
+  Sticky = 'sticky',
+}
+
+export type SimpleHeaderProps = ComponentProps<SimpleHeaderParameters>;
+
+export { default } from './simple-header';

package/dist/content/components/canvas/SimpleHeader/simple-header.tsx

@@ -0,0 +1,63 @@
+import { FC } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import BaseHeader from '@/components/ui/Header';
+import BaseIconLabel from '@/components/ui/IconLabel';
+import { ReplaceFieldsWithAssets } from '@/types/cskTypes';
+import { cn, resolveViewPort } from '@/utils/styling';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { SimpleHeaderParameters, SimpleHeaderProps, SimpleHeaderVariants } from '.';
+
+const SimpleHeader: FC<SimpleHeaderProps & ReplaceFieldsWithAssets<SimpleHeaderParameters, 'logo'>> = ({
+  variant,
+  logo,
+  links,
+  backgroundColor,
+  textColor,
+  hoverTextColor,
+}) => {
+  return (
+    <BaseHeader
+      sticky={variant === SimpleHeaderVariants.Sticky}
+      leftSection={
+        logo?.[0]?.url && (
+          <Link href="/">
+            <Image src={logo?.[0]?.url} alt="Logo" width={50} height={40} />
+          </Link>
+        )
+      }
+      backgroundColor={backgroundColor}
+      color="general-color-1"
+      spacing={{
+        paddingTop: 'container-small',
+        paddingBottom: 'container-small',
+      }}
+      border="none"
+    >
+      {links?.map(link => (
+        <Link href={link.link?.path || ''} key={link.title}>
+          <BaseIconLabel
+            className="group"
+            size="base"
+            tag="span"
+            color={textColor}
+            weight="normal"
+            font="sans"
+            letterSpacing="normal"
+            alignment="left"
+          >
+            <span
+              className={cn({
+                [resolveViewPort(hoverTextColor, 'group-hover:text-{value}')]: !!hoverTextColor,
+              })}
+            >
+              {link.title}
+            </span>
+          </BaseIconLabel>
+        </Link>
+      ))}
+    </BaseHeader>
+  );
+};
+
+export default withFlattenParameters(SimpleHeader);

package/dist/content/components/canvas/Spacer/index.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type SpacerParameters = {
   size?: string;
@@ -9,4 +9,4 @@ export enum SpacerVariants {
 
 export type SpacerProps = ComponentProps<SpacerParameters>;
 
-export { Spacer as default } from './spacer';
+export { default } from './spacer';

package/dist/content/components/canvas/Spacer/spacer.tsx

@@ -1,8 +1,9 @@
 import { FC } from 'react';
 import { cn } from '@/utils/styling';
-import { SpacerProps, SpacerVariants } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { SpacerParameters, SpacerProps, SpacerVariants } from '.';
 
-export const Spacer: FC<SpacerProps> = ({ size, component: { variant } }) => {
+export const Spacer: FC<SpacerProps & SpacerParameters> = ({ size, variant }) => {
   const isHorizontal = variant === SpacerVariants.Horizontal;
 
   return (
@@ -14,3 +15,5 @@ export const Spacer: FC<SpacerProps> = ({ size, component: { variant } }) => {
     />
   );
 };
+
+export default withFlattenParameters(Spacer);

package/dist/content/components/canvas/Tab/index.tsx

@@ -1,5 +1,4 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
-import { Tab } from './tab';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type TabParameters = { title?: string };
 
@@ -9,4 +8,4 @@ export enum TabSlots {
 
 export type TabProps = ComponentProps<TabParameters, TabSlots>;
 
-export default Tab;
+export { default } from './tab';

package/dist/content/components/canvas/Tab/tab.tsx

@@ -1,7 +1,8 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
-import { TabProps } from '.';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { TabParameters, TabProps } from '.';
 
-export const Tab: FC<TabProps> = ({ slots, component, context }) => (
-  <UniformSlot data={component} context={context} slot={slots.tabContent} />
-);
+const Tab: FC<TabProps & TabParameters> = ({ slots }) => <UniformSlot slot={slots.tabContent} />;
+
+export default withFlattenParameters(Tab);

package/dist/content/components/canvas/Table/index.tsx

@@ -1,5 +1,5 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { ContainerParameters } from '@/components/canvas/Container/parameters';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type TableParameters = ContainerParameters & {
   size?: string;
@@ -13,5 +13,5 @@ export enum TableSlots {
 
 export type TableProps = ComponentProps<TableParameters, TableSlots>;
 
-export { Table as default } from './table';
+export { default } from './table';
 export { TableEmptyPlaceholder } from './empty-placeholder';

package/dist/content/components/canvas/Table/table.tsx

@@ -1,15 +1,14 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import Container from '@/components/ui/Container';
-import { TableProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { TableParameters, TableProps } from '.';
 import { getTableClasses } from './style-utils';
 
-export const Table: FC<TableProps> = ({
+const Table: FC<TableProps & TableParameters> = ({
   size,
   textColor,
   slots,
-  component,
-  context,
   backgroundColor,
   spacing,
   border,
@@ -20,12 +19,14 @@ export const Table: FC<TableProps> = ({
     <div className="overflow-x-auto">
       <table className={getTableClasses({ size, textColor })}>
         <thead>
-          <UniformSlot slot={slots.tableHead} context={context} data={component} />
+          <UniformSlot slot={slots.tableHead} />
         </thead>
         <tbody>
-          <UniformSlot slot={slots.tableBody} context={context} data={component} />
+          <UniformSlot slot={slots.tableBody} />
         </tbody>
       </table>
     </div>
   </Container>
 );
+
+export default withFlattenParameters(Table);

package/dist/content/components/canvas/TableCustomCell/index.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentProps } from '@/types/cskTypes';
 
 export const AlignmentMap = {
   left: 'ml-0',
@@ -16,4 +16,4 @@ export enum TableCustomCellSlots {
 
 export type TableCustomCellProps = ComponentProps<TableCustomCellParameters, TableCustomCellSlots>;
 
-export { TableCustomCell as default } from './table-custom-cell';
+export { default } from './table-custom-cell';

package/dist/content/components/canvas/TableCustomCell/table-custom-cell.tsx

@@ -1,12 +1,15 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
 import { cn } from '@/utils/styling';
-import { AlignmentMap, TableCustomCellProps } from '.';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { AlignmentMap, TableCustomCellParameters, TableCustomCellProps } from '.';
 
-export const TableCustomCell: FC<TableCustomCellProps> = ({ component, context, slots, alignment }) => (
+const TableCustomCell: FC<TableCustomCellProps & TableCustomCellParameters> = ({ slots, alignment }) => (
   <td>
     <div className={cn('w-fit', AlignmentMap[alignment || 'left'])}>
-      <UniformSlot slot={slots.tableCustomCellContent} context={context} data={component} />
+      <UniformSlot slot={slots.tableCustomCellContent} />
     </div>
   </td>
 );
+
+export default withFlattenParameters(TableCustomCell);

package/dist/content/components/canvas/TableDataCell/index.tsx

@@ -1,7 +1,7 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type TableDataCellParameters = { value?: string };
 
 export type TableDataCellProps = ComponentProps<TableDataCellParameters>;
 
-export { TableDataCell as default } from './table-data-cell';
+export { default } from './table-data-cell';

package/dist/content/components/canvas/TableDataCell/table-data-cell.tsx

@@ -1,9 +1,12 @@
 import { FC } from 'react';
-import { UniformText } from '@uniformdev/canvas-next-rsc/component';
-import { TableDataCellProps } from '.';
+import { ComponentParameter, UniformText } from '@uniformdev/next-app-router/component';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { TableDataCellParameters, TableDataCellProps } from '.';
 
-export const TableDataCell: FC<TableDataCellProps> = ({ component, context }) => (
+const TableDataCell: FC<TableDataCellProps & TableDataCellParameters> = ({ parameters, component }) => (
   <td>
-    <UniformText component={component} context={context} parameterId="value" placeholder="Value" />
+    <UniformText component={component} parameter={parameters.value as ComponentParameter<string>} placeholder="Value" />
   </td>
 );
+
+export default withFlattenParameters(TableDataCell);

package/dist/content/components/canvas/TableHeaderCell/index.tsx

@@ -1,7 +1,7 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentProps } from '@/types/cskTypes';
 
 export type TableHeaderCellParameters = { value?: string };
 
 export type TableHeaderCellProps = ComponentProps<TableHeaderCellParameters>;
 
-export { TableHeaderCell as default } from './table-header-cell';
+export { default } from './table-header-cell';

package/dist/content/components/canvas/TableHeaderCell/table-header-cell.tsx

@@ -1,9 +1,12 @@
 import { FC } from 'react';
-import { UniformText } from '@uniformdev/canvas-next-rsc/component';
-import { TableHeaderCellProps } from '.';
+import { ComponentParameter, UniformText } from '@uniformdev/next-app-router/component';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { TableHeaderCellParameters, TableHeaderCellProps } from '.';
 
-export const TableHeaderCell: FC<TableHeaderCellProps> = ({ component, context }) => (
+const TableHeaderCell: FC<TableHeaderCellProps & TableHeaderCellParameters> = ({ parameters, component }) => (
   <th>
-    <UniformText component={component} context={context} parameterId="value" placeholder="Value" />
+    <UniformText component={component} parameter={parameters.value as ComponentParameter<string>} placeholder="Value" />
   </th>
 );
+
+export default withFlattenParameters(TableHeaderCell);

package/dist/content/components/canvas/TableRow/index.tsx

@@ -1,5 +1,7 @@
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
+import { ComponentProps } from '@/types/cskTypes';
 
-export type TableRowProps = ComponentProps;
+export type TableRowParameters = unknown;
 
-export { TableRow as default } from './table-row';
+export type TableRowProps = ComponentProps<TableRowParameters>;
+
+export { default } from './table-row';

package/dist/content/components/canvas/TableRow/table-row.tsx

@@ -1,9 +1,12 @@
 import { FC } from 'react';
-import { UniformSlot } from '@uniformdev/canvas-next-rsc/component';
+import { UniformSlot } from '@uniformdev/next-app-router/component';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
 import { TableRowProps } from '.';
 
-export const TableRow: FC<TableRowProps> = ({ slots, component, context }) => (
+const TableRow: FC<TableRowProps> = ({ slots }) => (
   <tr>
-    <UniformSlot data={component} context={context} slot={slots.tableRowCells} />
+    <UniformSlot slot={slots.tableRowCells} />
   </tr>
 );
+
+export default withFlattenParameters(TableRow);

package/dist/content/components/canvas/Tabs/index.tsx

@@ -1,21 +1,21 @@
 import dynamic from 'next/dynamic';
-import { ComponentProps } from '@uniformdev/canvas-next-rsc/component';
 import { ContainerParameters } from '@/components/canvas/Container/parameters';
+import { ComponentProps } from '@/types/cskTypes';
+import { withFlattenParameters } from '@/utils/withFlattenParameters';
+import { withSlotsDataValue } from '@/utils/withSlotsDataValue';
 
 export type TabsParameters = ContainerParameters & {
   color?: string;
 };
 
-export enum TabsVariants {
-  Default = 'default',
-  Bordered = 'bordered',
-}
-
 export enum TabsSlots {
   TabItems = 'tabItems',
 }
 
 export type TabsProps = ComponentProps<TabsParameters, TabsSlots>;
 
-export default dynamic(() => import('./tabs').then(mod => mod.Tabs));
+export { TabsVariants } from './style-utils';
+export default dynamic(() =>
+  import('./tabs').then(mod => withSlotsDataValue(withFlattenParameters(mod.Tabs), [TabsSlots.TabItems]))
+);
 export { TabsEmptyPlaceholder } from './empty-placeholder';

package/dist/content/components/canvas/Tabs/style-utils.ts

@@ -1,9 +1,13 @@
 import { cn } from '@/utils/styling';
-import { TabsParameters, TabsVariants } from '.';
+import { TabsParameters } from '.';
+
+export enum TabsVariants {
+  Bordered = 'bordered',
+}
 
 type ButtonContainerClassesProps = {
   color: TabsParameters['color'];
-  variant: TabsVariants;
+  variant?: string;
 };
 export const getButtonContainerClasses = ({ color, variant }: ButtonContainerClassesProps) =>
   cn('flex flex-row overflow-x-auto ', {
@@ -12,17 +16,14 @@ export const getButtonContainerClasses = ({ color, variant }: ButtonContainerCla
 
 type ButtonClassesProps = {
   color: TabsParameters['color'];
-  variant: TabsVariants;
-  tabItem: {
-    id: string;
-  };
-  activeTabId: string;
+  variant?: string;
+  isActiveTab?: boolean;
 };
-export const getButtonClasses = ({ color, variant, tabItem, activeTabId }: ButtonClassesProps) =>
+export const getButtonClasses = ({ color, variant, isActiveTab = false }: ButtonClassesProps) =>
   cn('text-lg shrink-0 font-medium px-5 py-3', {
     [`text-${color}`]: color,
-    [`border-${color}`]: tabItem.id === activeTabId && variant === TabsVariants.Bordered,
+    [`border-${color}`]: isActiveTab && variant === TabsVariants.Bordered,
     'border-b-2': variant === TabsVariants.Bordered,
-    'opacity-60 hover:opacity-100': tabItem.id !== activeTabId,
-    'border-transparent': tabItem.id !== activeTabId && variant === TabsVariants.Bordered,
+    'opacity-60 hover:opacity-100': !isActiveTab,
+    'border-transparent': !isActiveTab && variant === TabsVariants.Bordered,
   });

package/dist/content/components/canvas/Tabs/tabs.tsx

@@ -1,43 +1,43 @@
 'use client';
 
-import { FC, Fragment, useCallback, useEffect, useMemo, useState } from 'react';
-import { flattenValues } from '@uniformdev/canvas';
-import { UniformSlot, UniformText } from '@uniformdev/canvas-next-rsc/component';
+import { FC, Fragment, useCallback, useState, MouseEvent, FocusEvent } from 'react';
+import { ComponentInstance, flattenValues } from '@uniformdev/canvas';
+import { UniformSlot, UniformText, ComponentParameter } from '@uniformdev/next-app-router/component';
 import Container from '@/components/ui/Container';
-import { TabsProps, TabsVariants } from '.';
+import { TabsParameters, TabsProps } from '.';
 import { getButtonClasses, getButtonContainerClasses } from './style-utils';
 
-export const Tabs: FC<TabsProps> = ({
+const TAB_ITEM_TEXT_PARAMETER_ID = 'text';
+const TAB_ITEM_TEXT_PARAMETER_TYPE = 'text';
+
+export const Tabs: FC<TabsProps & TabsParameters & { slotData?: Record<string, ComponentInstance[]> }> = ({
   slots,
   color,
-  component,
-  context,
   backgroundColor,
   spacing,
   border,
   fluidContent,
   height,
+  variant,
+  slotData,
+  context,
 }) => {
-  const variant = (component.variant || TabsVariants.Default) as TabsVariants;
-  const [activeTabId, setActiveTabId] = useState(component?.slots?.tabItems?.[0]?._id as string);
+  const tabItems = slotData?.tabItems?.map(tabComponent => ({
+    ...(flattenValues(tabComponent) as { text?: string }),
+    id: (tabComponent?._id as string) || '',
+  }));
 
-  const tabItems = useMemo(() => {
-    if (!component?.slots?.tabItems) return [];
-    return component.slots.tabItems.map(tabComponent => ({
-      ...(flattenValues(tabComponent) as { title?: string }),
-      id: tabComponent._id as string,
-    }));
-  }, [component?.slots?.tabItems]);
+  const [activeTabId, setActiveTabId] = useState(tabItems?.[0]?.id || '');
 
-  useEffect(() => {
-    if (!tabItems.length) return;
-    if (!activeTabId) setActiveTabId(tabItems[0]?.id || '');
-  }, [tabItems, activeTabId]);
+  const handleTabClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
+    const tabId = (event.target as HTMLButtonElement).id;
+    setActiveTabId(tabId);
+  }, []);
 
   const handleContextualEditingTabClick = useCallback(
-    (tabId: string) => {
+    (event: FocusEvent<HTMLButtonElement>) => {
+      const tabId = event.target.id;
       if (!context.isContextualEditing) return;
-
       setActiveTabId(tabId);
     },
     [context.isContextualEditing]
@@ -46,31 +46,33 @@ export const Tabs: FC<TabsProps> = ({
   return (
     <Container className="flex flex-col gap-5" {...{ backgroundColor, spacing, border, fluidContent, height }}>
       <div className={getButtonContainerClasses({ color, variant })}>
-        {tabItems.map((tabItem, index) => (
+        {tabItems?.map(({ id: currentTabId, [TAB_ITEM_TEXT_PARAMETER_ID]: currentTabText }) => (
           <button
-            key={tabItem.id}
-            onClick={() => setActiveTabId(tabItem.id)}
-            className={getButtonClasses({ color, variant, tabItem, activeTabId })}
+            id={currentTabId}
+            key={currentTabId}
+            onClick={handleTabClick}
+            className={getButtonClasses({ color, variant, isActiveTab: currentTabId === activeTabId })}
           >
-            {component?.slots?.tabItems?.[index] && (
-              <UniformText
-                onFocus={() => handleContextualEditingTabClick(tabItem.id)}
-                context={context}
-                parameterId="text"
-                component={component?.slots?.tabItems[index]}
-                placeholder="Tab title"
-              />
-            )}
+            <UniformText
+              id={currentTabId}
+              placeholder="Text goes here"
+              onFocus={handleContextualEditingTabClick}
+              parameter={
+                {
+                  parameterId: TAB_ITEM_TEXT_PARAMETER_ID,
+                  type: TAB_ITEM_TEXT_PARAMETER_TYPE,
+                  value: currentTabText,
+                  _contextualEditing: { isEditable: true },
+                } as ComponentParameter<string>
+              }
+              component={{ _id: currentTabId }}
+            />
           </button>
         ))}
       </div>
-      <UniformSlot data={component} context={context} slot={slots.tabItems}>
-        {({ child, component: { _id: currentComponentId } }) =>
-          currentComponentId === activeTabId ? (
-            <Fragment key={currentComponentId}>{child}</Fragment>
-          ) : (
-            <Fragment key={currentComponentId} />
-          )
+      <UniformSlot slot={slots.tabItems}>
+        {({ child, _id: currentComponentId, key }) =>
+          currentComponentId === activeTabId ? <Fragment key={key}>{child}</Fragment> : <Fragment key={key} />
         }
       </UniformSlot>
     </Container>

package/dist/content/components/canvas/Testimonial/default-variant.tsx

@@ -1,15 +1,15 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import Container from '@/components/ui/Container';
-import { TestimonialProps } from '.';
+import { TestimonialParameters } from '.';
 
 type WithLargeAvatarVariantProps = Pick<
-  TestimonialProps,
+  TestimonialParameters,
   'backgroundColor' | 'spacing' | 'border' | 'fluidContent' | 'height'
 > & {
-  testimonialPrimaryImage: React.ReactNode;
-  testimonialContent: React.ReactNode;
-  testimonialAuthor: React.ReactNode;
-  testimonialSecondaryImage: React.ReactNode;
+  testimonialPrimaryImage: ReactNode;
+  testimonialContent: ReactNode;
+  testimonialAuthor: ReactNode;
+  testimonialSecondaryImage: ReactNode;
 };
 
 export const DefaultVariant: FC<WithLargeAvatarVariantProps> = ({