docs(storybook): skip code snippet generation for components that hav…

…e render functions

packages/eui/src/components/basic_table/in_memory_table.stories.tsx

@@ -24,6 +24,12 @@ const meta: Meta<EuiInMemoryTableProps> = {
   title: 'Tabular Content/EuiInMemoryTable',
   // @ts-ignore complex
   component: EuiInMemoryTable,
+  parameters: {
+    codeSnippet: {
+      // TODO: enable once render functions are supported
+      skip: true,
+    },
+  },
   args: {
     allowNeutralSort: true,
     searchFormat: 'eql',

packages/eui/src/components/datagrid/data_grid.stories.tsx

@@ -205,6 +205,12 @@ const RenderCellValue = ({
 const meta: Meta<EuiDataGridProps> = {
   title: 'Tabular Content/EuiDataGrid',
   component: EuiDataGrid,
+  parameters: {
+    codeSnippet: {
+      // TODO: enable once render functions are supported
+      skip: true,
+    },
+  },
   argTypes: {
     width: { control: 'text' },
     height: { control: 'text' },

packages/eui/src/components/drag_and_drop/drag_drop_context.stories.tsx

@@ -26,6 +26,10 @@ const meta: Meta<DragDropContextProps> = {
       // visual parts with the Drag and Drop components separately
       skip: true,
     },
+    codeSnippet: {
+      // TODO: enable once render functions are supported
+      skip: true,
+    },
   },
 };
 enableFunctionToggleControls(meta, [

packages/eui/src/components/drag_and_drop/draggable.stories.tsx

@@ -77,6 +77,10 @@ export const Interactive: Story = {
         'customDragHandle',
       ],
     },
+    codeSnippet: {
+      // TODO: enable once render functions are supported
+      skip: true,
+    },
   },
   args: {
     draggableId: 'draggable-item',

packages/eui/src/components/drag_and_drop/droppable.stories.tsx

@@ -27,6 +27,12 @@ const makeId = htmlIdGenerator();
 const meta: Meta<EuiDroppableProps> = {
   title: 'Display/EuiDroppable',
   component: EuiDroppable,
+  parameters: {
+    codeSnippet: {
+      // TODO: enable once render functions are supported
+      skip: true,
+    },
+  },
   argTypes: {
     droppableId: {
       type: {

packages/eui/src/components/observer/mutation_observer/mutation_observer.stories.tsx

@@ -22,6 +22,12 @@ import {
 const meta: Meta<EuiMutationObserverProps> = {
   title: 'Utilities/EuiMutationObserver',
   component: EuiMutationObserver,
+  parameters: {
+    codeSnippet: {
+      // TODO: enable once render functions are supported
+      skip: true,
+    },
+  },
 };
 
 export default meta;

packages/eui/src/components/observer/resize_observer/resize_observer.stories.tsx

@@ -20,6 +20,12 @@ import { EuiResizeObserver, EuiResizeObserverProps } from './resize_observer';
 const meta: Meta<EuiResizeObserverProps> = {
   title: 'Utilities/EuiResizeObserver',
   component: EuiResizeObserver,
+  parameters: {
+    codeSnippet: {
+      // TODO: enable once render functions are supported
+      skip: true,
+    },
+  },
 };
 
 export default meta;

packages/eui/src/components/resizable_container/resizable_container.stories.tsx

@@ -155,6 +155,12 @@ const MultiCollapsible: EuiResizableContainerProps['children'] = (
 const meta: Meta<EuiResizableContainerProps> = {
   title: 'Layout/EuiResizableContainer/EuiResizableContainer',
   component: EuiResizableContainer,
+  parameters: {
+    codeSnippet: {
+      // TODO: enable once render functions are supported
+      skip: true,
+    },
+  },
   args: {
     direction: 'horizontal',
   },

packages/eui/src/components/resizable_container/resizable_panel.stories.tsx

@@ -23,6 +23,12 @@ faker.seed(42);
 const meta: Meta<EuiResizablePanelProps> = {
   title: 'Layout/EuiResizableContainer/Subcomponents/EuiResizablePanel',
   component: EuiResizablePanel,
+  parameters: {
+    codeSnippet: {
+      // TODO: enable once render functions are supported
+      skip: true,
+    },
+  },
   argTypes: {
     mode: {
       control: 'radio',

packages/eui/src/components/selectable/selectable.stories.tsx

@@ -68,6 +68,12 @@ const options: EuiSelectableOption[] = [
 const meta: Meta<EuiSelectableProps> = {
   title: 'Forms/EuiSelectable',
   component: EuiSelectable,
+  parameters: {
+    codeSnippet: {
+      // TODO: enable once render functions are supported
+      skip: true,
+    },
+  },
   argTypes: {
     singleSelection: { control: 'radio', options: [true, false, 'always'] },
     emptyMessage: { control: 'text' },
@@ -111,7 +117,11 @@ export const WithTooltip: Story = {
     },
   },
   args: {
-    options: options.map((option) => ({ ...option, ...toolTipProps })),
+    options: options.map((option, idx) => ({
+      ...option,
+      ...toolTipProps,
+      value: idx,
+    })),
     searchable: false,
   },
   render: ({ ...args }: EuiSelectableProps) => <StatefulSelectable {...args} />,

packages/eui/src/components/text_diff/text_diff.stories.tsx

@@ -10,12 +10,22 @@ import React, { ReactElement } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { hideStorybookControls } from '../../../.storybook/utils';
+import { STORY_ARGS_MARKER } from '../../../.storybook/addons/code-snippet/constants';
 import { useEuiTextDiff, EuiTextDiffProps } from './text_diff';
 
 const meta: Meta<EuiTextDiffProps> = {
   title: 'Utilities/useEuiTextDiff',
   // casting here to match story output while preserving component docgen information
   component: useEuiTextDiff as unknown as () => ReactElement,
+  parameters: {
+    codeSnippet: {
+      // the story returns a component but the actual code is a hook pattern
+      // we can provide a manual snippet instead
+      snippet: `
+      const [rendered, textDiffObject] = useTextDiff(${STORY_ARGS_MARKER})
+      `,
+    },
+  },
   argTypes: {
     insertComponent: { control: 'text' },
     deleteComponent: { control: 'text' },

packages/eui/src/components/tour/tour.stories.tsx

@@ -20,6 +20,10 @@ const meta: Meta<EuiTourProps> = {
   component: EuiTour,
   parameters: {
     layout: 'fullscreen',
+    codeSnippet: {
+      // TODO: enable once render functions are supported
+      skip: true,
+    },
   },
   decorators: [
     (Story, { args }) => (