From 6d3413d132904ba48e99143ba3f0382f10b31b00 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Fri, 24 May 2024 17:45:50 +0200 Subject: [PATCH] docs(storybook): skip code snippet generation for components that have render functions --- .../basic_table/in_memory_table.stories.tsx | 6 ++++++ .../src/components/datagrid/data_grid.stories.tsx | 6 ++++++ .../drag_and_drop/drag_drop_context.stories.tsx | 4 ++++ .../components/drag_and_drop/draggable.stories.tsx | 4 ++++ .../components/drag_and_drop/droppable.stories.tsx | 6 ++++++ .../mutation_observer/mutation_observer.stories.tsx | 6 ++++++ .../resize_observer/resize_observer.stories.tsx | 6 ++++++ .../resizable_container.stories.tsx | 6 ++++++ .../resizable_container/resizable_panel.stories.tsx | 6 ++++++ .../src/components/selectable/selectable.stories.tsx | 12 +++++++++++- .../src/components/text_diff/text_diff.stories.tsx | 10 ++++++++++ packages/eui/src/components/tour/tour.stories.tsx | 4 ++++ 12 files changed, 75 insertions(+), 1 deletion(-) diff --git a/packages/eui/src/components/basic_table/in_memory_table.stories.tsx b/packages/eui/src/components/basic_table/in_memory_table.stories.tsx index 53cd18898399..ddd3d3c5e33c 100644 --- a/packages/eui/src/components/basic_table/in_memory_table.stories.tsx +++ b/packages/eui/src/components/basic_table/in_memory_table.stories.tsx @@ -24,6 +24,12 @@ const meta: Meta = { 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', diff --git a/packages/eui/src/components/datagrid/data_grid.stories.tsx b/packages/eui/src/components/datagrid/data_grid.stories.tsx index bbecb42ce545..9870aa106f78 100644 --- a/packages/eui/src/components/datagrid/data_grid.stories.tsx +++ b/packages/eui/src/components/datagrid/data_grid.stories.tsx @@ -205,6 +205,12 @@ const RenderCellValue = ({ const meta: Meta = { title: 'Tabular Content/EuiDataGrid', component: EuiDataGrid, + parameters: { + codeSnippet: { + // TODO: enable once render functions are supported + skip: true, + }, + }, argTypes: { width: { control: 'text' }, height: { control: 'text' }, diff --git a/packages/eui/src/components/drag_and_drop/drag_drop_context.stories.tsx b/packages/eui/src/components/drag_and_drop/drag_drop_context.stories.tsx index 88e46a5470bd..f9e0f09918ff 100644 --- a/packages/eui/src/components/drag_and_drop/drag_drop_context.stories.tsx +++ b/packages/eui/src/components/drag_and_drop/drag_drop_context.stories.tsx @@ -26,6 +26,10 @@ const meta: Meta = { // visual parts with the Drag and Drop components separately skip: true, }, + codeSnippet: { + // TODO: enable once render functions are supported + skip: true, + }, }, }; enableFunctionToggleControls(meta, [ diff --git a/packages/eui/src/components/drag_and_drop/draggable.stories.tsx b/packages/eui/src/components/drag_and_drop/draggable.stories.tsx index 64f811627677..b8a08fca957a 100644 --- a/packages/eui/src/components/drag_and_drop/draggable.stories.tsx +++ b/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', diff --git a/packages/eui/src/components/drag_and_drop/droppable.stories.tsx b/packages/eui/src/components/drag_and_drop/droppable.stories.tsx index 3391599fabd1..72151a5af421 100644 --- a/packages/eui/src/components/drag_and_drop/droppable.stories.tsx +++ b/packages/eui/src/components/drag_and_drop/droppable.stories.tsx @@ -27,6 +27,12 @@ const makeId = htmlIdGenerator(); const meta: Meta = { title: 'Display/EuiDroppable', component: EuiDroppable, + parameters: { + codeSnippet: { + // TODO: enable once render functions are supported + skip: true, + }, + }, argTypes: { droppableId: { type: { diff --git a/packages/eui/src/components/observer/mutation_observer/mutation_observer.stories.tsx b/packages/eui/src/components/observer/mutation_observer/mutation_observer.stories.tsx index 51f7394b8756..7ed7692db661 100644 --- a/packages/eui/src/components/observer/mutation_observer/mutation_observer.stories.tsx +++ b/packages/eui/src/components/observer/mutation_observer/mutation_observer.stories.tsx @@ -22,6 +22,12 @@ import { const meta: Meta = { title: 'Utilities/EuiMutationObserver', component: EuiMutationObserver, + parameters: { + codeSnippet: { + // TODO: enable once render functions are supported + skip: true, + }, + }, }; export default meta; diff --git a/packages/eui/src/components/observer/resize_observer/resize_observer.stories.tsx b/packages/eui/src/components/observer/resize_observer/resize_observer.stories.tsx index f2baa73e127f..85019d099e75 100644 --- a/packages/eui/src/components/observer/resize_observer/resize_observer.stories.tsx +++ b/packages/eui/src/components/observer/resize_observer/resize_observer.stories.tsx @@ -20,6 +20,12 @@ import { EuiResizeObserver, EuiResizeObserverProps } from './resize_observer'; const meta: Meta = { title: 'Utilities/EuiResizeObserver', component: EuiResizeObserver, + parameters: { + codeSnippet: { + // TODO: enable once render functions are supported + skip: true, + }, + }, }; export default meta; diff --git a/packages/eui/src/components/resizable_container/resizable_container.stories.tsx b/packages/eui/src/components/resizable_container/resizable_container.stories.tsx index 9162db19b464..491fd88c187e 100644 --- a/packages/eui/src/components/resizable_container/resizable_container.stories.tsx +++ b/packages/eui/src/components/resizable_container/resizable_container.stories.tsx @@ -155,6 +155,12 @@ const MultiCollapsible: EuiResizableContainerProps['children'] = ( const meta: Meta = { title: 'Layout/EuiResizableContainer/EuiResizableContainer', component: EuiResizableContainer, + parameters: { + codeSnippet: { + // TODO: enable once render functions are supported + skip: true, + }, + }, args: { direction: 'horizontal', }, diff --git a/packages/eui/src/components/resizable_container/resizable_panel.stories.tsx b/packages/eui/src/components/resizable_container/resizable_panel.stories.tsx index 9b7cd67e8500..c13f5bf230d2 100644 --- a/packages/eui/src/components/resizable_container/resizable_panel.stories.tsx +++ b/packages/eui/src/components/resizable_container/resizable_panel.stories.tsx @@ -23,6 +23,12 @@ faker.seed(42); const meta: Meta = { title: 'Layout/EuiResizableContainer/Subcomponents/EuiResizablePanel', component: EuiResizablePanel, + parameters: { + codeSnippet: { + // TODO: enable once render functions are supported + skip: true, + }, + }, argTypes: { mode: { control: 'radio', diff --git a/packages/eui/src/components/selectable/selectable.stories.tsx b/packages/eui/src/components/selectable/selectable.stories.tsx index 467189b76bbf..ae549dfacff0 100644 --- a/packages/eui/src/components/selectable/selectable.stories.tsx +++ b/packages/eui/src/components/selectable/selectable.stories.tsx @@ -68,6 +68,12 @@ const options: EuiSelectableOption[] = [ const meta: Meta = { 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) => , diff --git a/packages/eui/src/components/text_diff/text_diff.stories.tsx b/packages/eui/src/components/text_diff/text_diff.stories.tsx index 474583bd9374..11b016b27dfc 100644 --- a/packages/eui/src/components/text_diff/text_diff.stories.tsx +++ b/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 = { 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' }, diff --git a/packages/eui/src/components/tour/tour.stories.tsx b/packages/eui/src/components/tour/tour.stories.tsx index 47c1bdd8e5f7..e100b9f95c53 100644 --- a/packages/eui/src/components/tour/tour.stories.tsx +++ b/packages/eui/src/components/tour/tour.stories.tsx @@ -20,6 +20,10 @@ const meta: Meta = { component: EuiTour, parameters: { layout: 'fullscreen', + codeSnippet: { + // TODO: enable once render functions are supported + skip: true, + }, }, decorators: [ (Story, { args }) => (