(null);
+
+ if (context.globals.theme === 'side-by-side') {
+ return (
+ {
+ setContainer(element);
+ }}
+ style={{
+ width: '100%',
+ height: '100%',
+ minHeight: '600px',
+ transform: 'translateZ(0)',
+ }}
+ >
+ {Story({ args: { ...context.args, container } })}
+
+ );
+ }
+
+ return Story();
+ },
+ ],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const InitialState: Story = {
+ args: {
+ fileSearchQuery: '',
+ fileSearchQueryDeferred: '',
+ isLoading: false,
+ error: null,
+ searchResults: null,
+ },
+};
+
+export const Loading: Story = {
+ args: {
+ fileSearchQuery: 'src',
+ fileSearchQueryDeferred: 'src',
+ isLoading: true,
+ error: null,
+ searchResults: null,
+ },
+};
+
+export const LoadingWithPreviousResults: Story = {
+ args: {
+ fileSearchQuery: 'src',
+ fileSearchQueryDeferred: 'src',
+ isLoading: true,
+ error: null,
+ searchResults: WithResults.args.searchResults,
+ },
+};
+
+export const Empty: Story = {
+ args: {
+ fileSearchQuery: 'src',
+ fileSearchQueryDeferred: 'src',
+ isLoading: false,
+ error: null,
+ searchResults: [],
+ },
+};
+
+export const WithSearchResults: Story = {
+ args: {
+ fileSearchQuery: 'src',
+ fileSearchQueryDeferred: 'src',
+ isLoading: false,
+ error: null,
+ searchResults: WithResults.args.searchResults,
+ },
+ play: async ({ canvasElement, args }) => {
+ const parent = canvasElement.parentNode as HTMLElement;
+
+ const moduleSingleExport = await findByText(parent, 'module-single-export.js');
+ await fireEvent.click(moduleSingleExport);
+
+ expect(args.onCreateNewStory).toHaveBeenCalledWith({
+ componentExportCount: 1,
+ componentExportName: 'default',
+ componentFilePath: 'src/module-single-export.js',
+ componentIsDefaultExport: true,
+ selectedItemId: 'src/module-single-export.js',
+ });
+ },
+};
+
+export const WithSearchResultsAndError: Story = {
+ args: {
+ fileSearchQuery: 'src',
+ fileSearchQueryDeferred: 'src',
+ isLoading: false,
+ error: { error: 'Some error occured', selectedItemId: 'src/module-multiple-exports.js' },
+ searchResults: WithResults.args.searchResults,
+ },
+};
+
+export const WithSearchResultsAndMultiLineError: Story = {
+ args: {
+ fileSearchQuery: 'src',
+ fileSearchQueryDeferred: 'src',
+ isLoading: false,
+ error: {
+ error: 'A very long error occured. A very long error occured. A very long error occured.',
+ selectedItemId: 'src/module-multiple-exports.js',
+ },
+ searchResults: WithResults.args.searchResults,
+ },
+};
diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx
new file mode 100644
index 000000000000..4fb0717c4c6b
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx
@@ -0,0 +1,213 @@
+import React, { useEffect, useState, useTransition } from 'react';
+import { Modal, Form } from '@storybook/components';
+import { styled } from '@storybook/theming';
+import { CloseAltIcon, SearchIcon, SyncIcon } from '@storybook/icons';
+
+import type { NewStoryPayload, SearchResult } from './FileSearchList';
+import { FileSearchList } from './FileSearchList';
+import { useMeasure } from '../../hooks/useMeasure';
+
+const MODAL_HEIGHT = 418;
+
+const ModalStyled = styled(Modal)(() => ({
+ boxShadow: 'none',
+ background: 'transparent',
+}));
+
+const ModalChild = styled.div<{ height?: number }>(({ theme, height }) => ({
+ backgroundColor: theme.background.bar,
+ borderRadius: 6,
+ boxShadow: `rgba(255, 255, 255, 0.05) 0 0 0 1px inset, rgba(14, 18, 22, 0.35) 0px 10px 18px -10px`,
+ padding: '16px',
+ transition: 'height 0.3s',
+ height: height ? `${height + 32}px` : 'auto',
+ overflow: 'hidden',
+}));
+
+const ModalContent = styled(Modal.Content)({
+ margin: 0,
+});
+
+const ModalInput = styled(Form.Input)(({ theme }) => ({
+ paddingLeft: 40,
+ paddingRight: 28,
+ fontSize: 14,
+ height: 40,
+
+ ...(theme.base === 'light' && {
+ color: theme.color.darkest,
+ }),
+
+ '::placeholder': {
+ color: theme.color.mediumdark,
+ },
+ '&:invalid:not(:placeholder-shown)': {
+ boxShadow: `${theme.color.negative} 0 0 0 1px inset`,
+ },
+ '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration':
+ {
+ display: 'none',
+ },
+}));
+
+const SearchField = styled.div({
+ display: 'flex',
+ flexDirection: 'column',
+ flexGrow: 1,
+ position: 'relative',
+});
+
+const SearchIconWrapper = styled.div(({ theme }) => ({
+ position: 'absolute',
+ top: 0,
+ left: 16,
+ zIndex: 1,
+ pointerEvents: 'none',
+ color: theme.darkest,
+ display: 'flex',
+ alignItems: 'center',
+ height: '100%',
+}));
+
+const LoadingIcon = styled.div(({ theme }) => ({
+ position: 'absolute',
+ top: 0,
+ right: 16,
+ zIndex: 1,
+ color: theme.darkest,
+ display: 'flex',
+ alignItems: 'center',
+ height: '100%',
+ '@keyframes spin': {
+ from: { transform: 'rotate(0deg)' },
+ to: { transform: 'rotate(360deg)' },
+ },
+ animation: 'spin 1s linear infinite',
+}));
+
+const ModalError = styled(Modal.Error)({
+ position: 'absolute',
+ padding: '8px 40px 8px 16px',
+ bottom: 0,
+ maxHeight: 'initial',
+ width: '100%',
+
+ div: {
+ wordBreak: 'break-word',
+ },
+
+ '> div': {
+ padding: 0,
+ },
+});
+
+const ModalErrorCloseIcon = styled(CloseAltIcon)({
+ position: 'absolute',
+ top: 4,
+ right: -24,
+ cursor: 'pointer',
+});
+
+type Error = { selectedItemId?: number | string; error: string } | null;
+
+interface FileSearchModalProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ fileSearchQuery: string;
+ fileSearchQueryDeferred: string;
+ setFileSearchQuery: (query: string) => void;
+ isLoading: boolean;
+ error: Error;
+ searchResults: SearchResult[] | null;
+ onCreateNewStory: (payload: NewStoryPayload) => void;
+ setError: (error: Error) => void;
+ container?: HTMLElement;
+}
+
+export const FileSearchModal = ({
+ open,
+ onOpenChange,
+ fileSearchQuery,
+ setFileSearchQuery,
+ isLoading,
+ error,
+ searchResults,
+ onCreateNewStory,
+ setError,
+ container,
+}: FileSearchModalProps) => {
+ const [modalContentRef, modalContentDimensions] = useMeasure();
+ const [modalMaxHeight, setModalMaxHeight] = useState(modalContentDimensions.height);
+ const [, startTransition] = useTransition();
+
+ useEffect(() => {
+ if (modalMaxHeight < modalContentDimensions.height) {
+ setModalMaxHeight(modalContentDimensions.height);
+ }
+ }, [modalContentDimensions.height, modalMaxHeight]);
+
+ return (
+ {
+ onOpenChange(false);
+ }}
+ onInteractOutside={() => {
+ onOpenChange(false);
+ }}
+ container={container}
+ >
+
+
+
+ Add a new story
+ We will create a new story for your component
+
+
+
+
+
+ {
+ startTransition(() => {
+ setFileSearchQuery((e.target as HTMLInputElement).value);
+ });
+ }}
+ />
+ {isLoading && (
+
+
+
+ )}
+
+ {
+
+ }
+
+
+ {error && fileSearchQuery !== '' && (
+
+ {error.error}
+ {
+ setError(null);
+ }}
+ />
+
+ )}
+
+ );
+};
diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx
new file mode 100644
index 000000000000..aa7481952ba7
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx
@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest';
+import { extractSeededRequiredArgs } from './FileSearchModal.utils';
+import type { ArgTypes } from '@storybook/csf';
+
+describe('FileSearchModal.utils', () => {
+ describe('extractSeededRequiredArgs', () => {
+ it('should extract seeded required args', () => {
+ const argTypes = {
+ stringRequired: {
+ type: { name: 'string', required: true },
+ },
+ string: {
+ type: { name: 'string', required: false },
+ },
+ numberRequired: {
+ type: { name: 'number', required: true },
+ },
+ number: {
+ type: { name: 'number', required: false },
+ },
+ booleanRequired: {
+ type: { name: 'boolean', required: true },
+ },
+ boolean: {
+ type: { name: 'boolean', required: false },
+ },
+ functionRequired: {
+ type: { name: 'function', required: true },
+ },
+ function: {
+ type: { name: 'function', required: false },
+ },
+ unionRequired: {
+ type: {
+ name: 'union',
+ required: true,
+ value: [],
+ },
+ options: ['a', 'b', 'c'],
+ },
+ union: {
+ type: { name: 'union', required: false, value: [] },
+ },
+ enumRequired: {
+ type: {
+ name: 'enum',
+ required: true,
+ value: [],
+ },
+ options: ['a', 'b', 'c'],
+ },
+ enum: {
+ type: { name: 'union', required: false, value: [] },
+ },
+ } as ArgTypes;
+
+ expect(extractSeededRequiredArgs(argTypes)).toEqual({
+ stringRequired: 'stringRequired',
+ numberRequired: 0,
+ booleanRequired: true,
+ functionRequired: expect.any(Function),
+ unionRequired: 'a',
+ enumRequired: 'a',
+ });
+ });
+ });
+});
diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx
new file mode 100644
index 000000000000..5dd02ba67806
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx
@@ -0,0 +1,57 @@
+import type { ArgTypes } from '@storybook/csf';
+
+export function extractSeededRequiredArgs(argTypes: ArgTypes) {
+ const extractedArgTypes = Object.keys(argTypes).reduce(
+ (acc, key: keyof typeof argTypes) => {
+ const argType = argTypes[key];
+ if (typeof argType.type !== 'string' && argType.type.required) {
+ switch (argType.type.name) {
+ case 'boolean':
+ acc[key] = true;
+ break;
+ case 'number':
+ acc[key] = 0;
+ break;
+ case 'string':
+ acc[key] = key;
+ break;
+ case 'union':
+ case 'enum':
+ acc[key] = argType.options?.[0];
+ break;
+ case 'array':
+ acc[key] = [];
+ break;
+ case 'object':
+ acc[key] = {};
+ break;
+ case 'function':
+ acc[key] = () => {};
+ break;
+ default:
+ break;
+ }
+ }
+ return acc;
+ },
+ {} as Record
+ );
+ return extractedArgTypes;
+}
+
+export async function trySelectNewStory(
+ selectStory: (id: string) => Promise | void,
+ storyId: string,
+ attempt = 1
+): Promise {
+ if (attempt > 10) {
+ throw new Error('We could not select the new story. Please try again.');
+ }
+
+ try {
+ await selectStory(storyId);
+ } catch (e) {
+ await new Promise((resolve) => setTimeout(resolve, 500));
+ return trySelectNewStory(selectStory, storyId, attempt + 1);
+ }
+}
diff --git a/code/ui/manager/src/components/sidebar/IconSymbols.stories.tsx b/code/ui/manager/src/components/sidebar/IconSymbols.stories.tsx
new file mode 100644
index 000000000000..76136230d3d8
--- /dev/null
+++ b/code/ui/manager/src/components/sidebar/IconSymbols.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { IconSymbols } from './IconSymbols';
+
+const meta = {
+ component: IconSymbols,
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx
index 07ce43e71794..6cfa55ec415e 100644
--- a/code/ui/manager/src/components/sidebar/Search.tsx
+++ b/code/ui/manager/src/components/sidebar/Search.tsx
@@ -22,6 +22,7 @@ import { isSearchResult, isExpandType } from './types';
import { scrollIntoView, searchItem } from '../../utils/tree';
import { getGroupStatus, getHighestStatus } from '../../utils/status';
import { useLayout } from '../layout/LayoutProvider';
+import { CreateNewStoryFileModal } from './CreateNewStoryFileModal';
const { document } = global;
@@ -186,6 +187,7 @@ export const Search = React.memo<{
const [inputPlaceholder, setPlaceholder] = useState('Find components');
const [allComponents, showAllComponents] = useState(false);
const searchShortcut = api ? shortcutToHumanString(api.getShortcutKeys().search) : '/';
+ const [isFileSearchModalOpen, setIsFileSearchModalOpen] = useState(false);
const makeFuse = useCallback(() => {
const list = dataset.entries.reduce((acc, [refId, { index, status }]) => {
@@ -409,15 +411,26 @@ export const Search = React.memo<{
)}
{showCreateStoryButton && (
- }
- >
-
-
-
-
+ <>
+ }
+ >
+ {
+ setIsFileSearchModalOpen(true);
+ }}
+ variant="outline"
+ >
+
+
+
+
+
)}