[Storybook] Add explicit sidebar structure (#7559)

.storybook/preview.tsx

@@ -18,6 +18,7 @@ import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
  */
 import { typeToPathMap } from '../src/components/icon/icon_map';
 import { appendIconComponentCache } from '../src/components/icon/icon';
+
 const iconCache: Record<string, React.FC> = {};
 
 Object.entries(typeToPathMap).forEach(async ([iconType, iconFileName]) => {
@@ -96,7 +97,27 @@ const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     backgrounds: { disable: true }, // Use colorMode instead
-    options: { showPanel: true }, // default to showing the controls panel
+    options: {
+      showPanel: true, // default to showing the controls panel
+      storySort: {
+        method: 'alphabetical',
+        order: [
+          // order option as well as story titles require static content (dynamic values or references don't work)
+          // https://storybook.js.org/docs/api/parameters#optionsstorysort
+          // https://storybook.js.org/docs/writing-stories#default-export
+          'Theming',
+          'Templates',
+          'Layout',
+          'Navigation',
+          'Display',
+          'Forms',
+          'Tabular Content',
+          'Editors & Syntax',
+          'Utilities',
+          '*',
+        ],
+      },
+    },
     controls: {
       expanded: true,
       sort: 'requiredFirst',

src/components/accessibility/screen_reader_live/screen_reader_live.stories.tsx

@@ -14,7 +14,7 @@ import {
 } from './screen_reader_live';
 
 const meta: Meta<EuiScreenReaderLiveProps> = {
-  title: 'EuiScreenReaderLive',
+  title: 'Utilities/EuiScreenReaderLive',
   component: EuiScreenReaderLive,
   args: {
     // Component defaults

src/components/accessibility/screen_reader_only/screen-reader_only.stories.tsx

@@ -15,7 +15,7 @@ import {
 } from './screen_reader_only';
 
 const meta: Meta<EuiScreenReaderOnlyProps> = {
-  title: 'EuiScreenReaderOnly',
+  title: 'Utilities/EuiScreenReaderOnly',
   component: EuiScreenReaderOnly,
   args: {
     // Component defaults

src/components/accessibility/skip_link/skip_link.stories.tsx

@@ -12,7 +12,7 @@ import { hideStorybookControls } from '../../../../.storybook/utils';
 import { EuiSkipLink, EuiSkipLinkProps } from './skip_link';
 
 const meta: Meta<EuiSkipLinkProps> = {
-  title: 'EuiSkipLink',
+  title: 'Utilities/EuiSkipLink',
   component: EuiSkipLink,
   args: {
     // Component defaults

src/components/accordion/accordion.stories.tsx

@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiAccordion, EuiAccordionProps } from './accordion';
 
 const meta: Meta<EuiAccordionProps> = {
-  title: 'EuiAccordion',
+  title: 'Layout/EuiAccordion',
   component: EuiAccordion,
   argTypes: {
     forceState: {

src/components/aspect_ratio/aspect_ratio.stories.tsx

@@ -13,7 +13,7 @@ import { disableStorybookControls } from '../../../.storybook/utils';
 import { EuiAspectRatio, EuiAspectRatioProps } from './aspect_ratio';
 
 const meta: Meta<EuiAspectRatioProps> = {
-  title: 'EuiAspectRatio',
+  title: 'Display/EuiAspectRatio',
   component: EuiAspectRatio,
 };
 

src/components/auto_sizer/auto_sizer.stories.tsx

@@ -15,7 +15,7 @@ import { EuiPanel } from '../panel';
 import { EuiAutoSizer, EuiAutoSizerProps, EuiAutoSize } from './auto_sizer';
 
 const meta: Meta<EuiAutoSizerProps> = {
-  title: 'EuiAutoSizer',
+  title: 'Utilities/EuiAutoSizer',
   component: EuiAutoSizer,
   args: {
     // Component defaults

src/components/avatar/avatar.stories.tsx

@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiAvatar, EuiAvatarProps } from './avatar';
 
 const meta: Meta<EuiAvatarProps> = {
-  title: 'EuiAvatar',
+  title: 'Display/EuiAvatar',
   component: EuiAvatar,
   argTypes: {
     initialsLength: {

src/components/badge/badge.stories.tsx

@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiBadge, EuiBadgeProps } from './badge';
 
 const meta: Meta<EuiBadgeProps> = {
-  title: 'EuiBadge',
+  title: 'Display/EuiBadge/EuiBadge',
   component: EuiBadge,
   argTypes: {
     iconType: { control: 'text' },

src/components/badge/badge_group/badge_group.stories.tsx

@@ -13,7 +13,7 @@ import { EuiBadge } from '../badge';
 import { EuiBadgeGroup, EuiBadgeGroupProps } from './badge_group';
 
 const meta: Meta<EuiBadgeGroupProps> = {
-  title: 'EuiBadgeGroup',
+  title: 'Display/EuiBadge/EuiBadgeGroup',
   component: EuiBadgeGroup,
   args: {
     // Component defaults

src/components/badge/beta_badge/beta_badge.stories.tsx

@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiBetaBadge, EuiBetaBadgeProps } from './beta_badge';
 
 const meta: Meta<EuiBetaBadgeProps> = {
-  title: 'EuiBetaBadge',
+  title: 'Display/EuiBetaBadge',
   component: EuiBetaBadge,
   argTypes: {
     iconType: { control: 'text' },

src/components/badge/notification_badge/badge_notification.stories.tsx

@@ -14,7 +14,7 @@ import {
 } from './badge_notification';
 
 const meta: Meta<EuiNotificationBadgeProps> = {
-  title: 'EuiNotificationBadge',
+  title: 'Display/EuiNotificationBadge',
   component: EuiNotificationBadge,
   args: {
     // Component defaults

src/components/beacon/beacon.stories.tsx

@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiBeacon, EuiBeaconProps } from './beacon';
 
 const meta: Meta<EuiBeaconProps> = {
-  title: 'EuiBeacon',
+  title: 'Utilities/EuiBeacon',
   component: EuiBeacon,
   args: {
     // Component defaults

src/components/bottom_bar/bottom_bar.stories.tsx

@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiBottomBar, EuiBottomBarProps } from './bottom_bar';
 
 const meta: Meta<EuiBottomBarProps> = {
-  title: 'EuiBottomBar',
+  title: 'Layout/EuiBottomBar',
   component: EuiBottomBar,
   argTypes: {
     top: { control: 'number' },

src/components/breadcrumbs/breadcrumbs.stories.tsx

@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiBreadcrumbs, EuiBreadcrumbsProps } from './breadcrumbs';
 
 const meta: Meta<EuiBreadcrumbsProps> = {
-  title: 'EuiBreadcrumbs',
+  title: 'Navigation/EuiBreadcrumbs',
   component: EuiBreadcrumbs,
   args: {
     // Component defaults

src/components/button/button.stories.tsx

@@ -12,7 +12,7 @@ import { disableStorybookControls } from '../../../.storybook/utils';
 import { EuiButton, Props as EuiButtonProps } from './button';
 
 const meta: Meta<EuiButtonProps> = {
-  title: 'EuiButton',
+  title: 'Navigation/EuiButton',
   component: EuiButton,
   argTypes: {
     iconType: { control: 'text' },

src/components/button/button_empty/button_empty.stories.tsx

@@ -12,7 +12,7 @@ import { disableStorybookControls } from '../../../../.storybook/utils';
 import { EuiButtonEmpty, EuiButtonEmptyProps } from './button_empty';
 
 const meta: Meta<EuiButtonEmptyProps> = {
-  title: 'EuiButtonEmpty',
+  title: 'Navigation/EuiButtonEmpty',
   component: EuiButtonEmpty,
   argTypes: {
     flush: {

src/components/button/button_group/button_group.stories.tsx

@@ -17,7 +17,7 @@ import {
 } from './button_group';
 
 const meta: Meta<EuiButtonGroupProps> = {
-  title: 'EuiButtonGroup',
+  title: 'Navigation/EuiButtonGroup',
   // @ts-ignore This still works for Storybook controls, even though Typescript complains
   component: EuiButtonGroup,
   argTypes: {

src/components/button/button_icon/button_icon.stories.tsx

@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiButtonIcon, EuiButtonIconProps } from './button_icon';
 
 const meta: Meta<EuiButtonIconProps> = {
-  title: 'EuiButtonIcon',
+  title: 'Navigation/EuiButtonIcon',
   component: EuiButtonIcon,
   args: {
     // Component defaults

src/components/call_out/call_out.stories.tsx

@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiCallOut, EuiCallOutProps } from './call_out';
 
 const meta: Meta<EuiCallOutProps> = {
-  title: 'EuiCallOut',
+  title: 'Display/EuiCallOut',
   component: EuiCallOut,
   argTypes: {
     iconType: { control: 'text' },

src/components/card/card.stories.tsx

@@ -16,7 +16,7 @@ import { EuiIcon } from '../icon';
 import { EuiCard, EuiCardProps } from './card';
 
 const meta: Meta<EuiCardProps> = {
-  title: 'EuiCard',
+  title: 'Display/EuiCard',
   component: EuiCard,
   argTypes: {
     display: { options: [undefined, ...BACKGROUND_COLORS] },

src/components/card/checkable_card/checkable_card.stories.tsx

@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiCheckableCard, EuiCheckableCardProps } from './checkable_card';
 
 const meta: Meta<EuiCheckableCardProps> = {
-  title: 'EuiCheckableCard',
+  title: 'Display/EuiCheckableCard',
   component: EuiCheckableCard,
   // NOTE: Storybook isn't correctly inheriting certain props due to the exclusive union,
   // so we have to do some manual polyfilling

src/components/code/code.stories.tsx

@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiCode, EuiCodeProps } from './code';
 
 const meta: Meta<EuiCodeProps> = {
-  title: 'EuiCode',
+  title: 'Editors & Syntax/EuiCode',
   component: EuiCode,
   args: {
     // Component defaults

src/components/code/code_block.stories.tsx

@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiCodeBlock, EuiCodeBlockProps } from './code_block';
 
 const meta: Meta<EuiCodeBlockProps> = {
-  title: 'EuiCodeBlock',
+  title: 'Editors & Syntax/EuiCodeBlock',
   component: EuiCodeBlock,
   argTypes: {
     lineNumbers: { control: 'boolean' },

src/components/collapsible_nav/collapsible_nav.stories.tsx

@@ -15,7 +15,7 @@ import { EuiButton } from '../button';
 import { EuiCollapsibleNav, EuiCollapsibleNavProps } from './collapsible_nav';
 
 const meta: Meta<EuiCollapsibleNavProps> = {
-  title: 'EuiCollapsibleNav',
+  title: 'Navigation/EuiCollapsibleNav/EuiCollapsibleNav',
   component: EuiCollapsibleNav,
   argTypes: {
     ...disableStorybookControls(['button']),

src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx

@@ -14,7 +14,7 @@ import {
 } from './collapsible_nav_group';
 
 const meta: Meta<EuiCollapsibleNavGroupProps> = {
-  title: 'EuiCollapsibleNavGroup',
+  title: 'Navigation/EuiCollapsibleNav/EuiCollapsibleNavGroup',
   // @ts-ignore This still works for Storybook controls, even though Typescript complains
   component: EuiCollapsibleNavGroup,
   argTypes: {

src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx

@@ -27,7 +27,7 @@ import {
 } from './';
 
 const meta: Meta<EuiCollapsibleNavBetaProps> = {
-  title: 'EuiCollapsibleNavBeta',
+  title: 'Navigation/EuiCollapsibleNav/EuiCollapsibleNavBeta',
   component: EuiCollapsibleNavBeta,
   parameters: {
     layout: 'fullscreen',

src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx

@@ -19,7 +19,7 @@ import {
 } from './collapsible_nav_group';
 
 const meta: Meta<EuiCollapsibleNavGroupProps> = {
-  title: 'EuiCollapsibleNavBeta.Group',
+  title: 'Navigation/EuiCollapsibleNav/EuiCollapsibleNavBeta.Group',
   component: EuiCollapsibleNavGroup,
   parameters: {
     layout: 'fullscreen',

src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.stories.tsx

@@ -12,7 +12,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiCollapsedNavItem } from './collapsed_nav_item';
 
 const meta: Meta<typeof EuiCollapsedNavItem> = {
-  title: 'EuiCollapsedNavItem',
+  title: 'Navigation/EuiCollapsibleNav/EuiCollapsedNavItem',
   component: EuiCollapsedNavItem,
   argTypes: {
     icon: { control: 'text' },

src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.stories.tsx

@@ -18,7 +18,7 @@ import {
 } from './collapsible_nav_item';
 
 const meta: Meta<EuiCollapsibleNavItemProps> = {
-  title: 'EuiCollapsibleNavItem',
+  title: 'Navigation/EuiCollapsibleNav/EuiCollapsibleNavItem',
   component: EuiCollapsibleNavItem,
 };
 export default meta;

src/components/color_picker/color_palette_display/color_palette_display.stories.tsx

@@ -16,7 +16,7 @@ import {
 } from './color_palette_display';
 
 const meta: Meta<EuiColorPaletteDisplayProps> = {
-  title: 'EuiColorPaletteDisplay',
+  title: 'Forms/EuiColorPalettePicker/EuiColorPaletteDisplay',
   component: EuiColorPaletteDisplay,
   args: {
     // Component defaults

src/components/color_picker/color_palette_picker/color_palette_picker.stories.tsx

@@ -16,7 +16,7 @@ import {
 } from './color_palette_picker';
 
 const meta: Meta<EuiColorPalettePickerProps<string>> = {
-  title: 'EuiColorPalettePicker',
+  title: 'Forms/EuiColorPalettePicker/EuiColorPalettePicker',
   component: EuiColorPalettePicker,
   argTypes: {
     placeholder: { control: 'text' },

src/components/color_picker/color_picker.stories.tsx

@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { EuiColorPicker, EuiColorPickerProps } from './color_picker';
 
 const meta: Meta<EuiColorPickerProps> = {
-  title: 'EuiColorPicker',
+  title: 'Forms/EuiColorPicker/EuiColorPicker',
   component: EuiColorPicker,
   argTypes: {
     color: { control: 'color' },

src/components/color_picker/color_picker_swatch.stories.tsx

@@ -14,7 +14,7 @@ import {
 } from './color_picker_swatch';
 
 const meta: Meta<EuiColorPickerSwatchProps> = {
-  title: 'EuiColorPickerSwatch',
+  title: 'Forms/EuiColorPicker/EuiColorPickerSwatch',
   component: EuiColorPickerSwatch,
 };
 

src/components/combo_box/combo_box.stories.tsx

@@ -21,7 +21,7 @@ const options = [
 ];
 
 const meta: Meta<EuiComboBoxProps<{}>> = {
-  title: 'EuiComboBox',
+  title: 'Forms/EuiComboBox',
   // @ts-ignore typescript shenanigans
   component: EuiComboBox,
   argTypes: {

src/components/comment_list/comment.stories.tsx

@@ -53,7 +53,7 @@ export const _actionsExampleArgType = {
  */
 
 const meta: Meta<EuiCommentProps> = {
-  title: 'EuiComment',
+  title: 'Display/EuiComment/EuiComment',
   component: EuiComment,
   argTypes: {
     eventColor: _eventColorArgType,

src/components/comment_list/comment_event.stories.tsx

@@ -12,7 +12,7 @@ import { _eventColorArgType, _actionsExampleArgType } from './comment.stories';
 import { EuiCommentEvent, EuiCommentEventProps } from './comment_event';
 
 const meta: Meta<EuiCommentEventProps> = {
-  title: 'EuiCommentEvent',
+  title: 'Display/EuiComment/EuiCommentEvent',
   component: EuiCommentEvent,
   args: {
     username: 'janed',

src/components/comment_list/comment_list.stories.tsx

@@ -17,7 +17,7 @@ import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiCommentList, EuiCommentListProps } from './comment_list';
 
 const meta: Meta<EuiCommentListProps> = {
-  title: 'EuiCommentList',
+  title: 'Display/EuiComment/EuiCommentList',
   component: EuiCommentList,
   args: {
     // Component defaults

src/components/context/context.stories.tsx

@@ -14,7 +14,7 @@ import { useEuiI18n, EuiI18n, EuiI18nNumber } from '../i18n';
 import { EuiContext, EuiContextProps, EuiI18nConsumer } from './context';
 
 const meta: Meta<EuiContextProps> = {
-  title: 'EuiContext',
+  title: 'Utilities/EuiContext',
   component: EuiContext,
 };
 

src/components/context_menu/context_menu.stories.tsx

@@ -17,7 +17,7 @@ import { EuiTitle } from '../title';
 import { EuiContextMenu, EuiContextMenuProps } from './context_menu';
 
 const meta: Meta<EuiContextMenuProps> = {
-  title: 'EuiContextMenu',
+  title: 'Navigation/EuiContextMenu/EuiContextMenu',
   component: EuiContextMenu,
   args: {
     // Component defaults

src/components/context_menu/context_menu_item.stories.tsx

@@ -15,7 +15,7 @@ import {
 } from './context_menu_item';
 
 const meta: Meta<EuiContextMenuItemProps> = {
-  title: 'EuiContextMenuItem',
+  title: 'Navigation/EuiContextMenu/EuiContextMenuItem',
   component: EuiContextMenuItem,
   argTypes: {
     ...disableStorybookControls(['buttonRef']),