Move components to storybook

src/search-editor/SearchEditor.tsx → .storybook/stories/components/SearchEditor.tsx

@@ -6,15 +6,15 @@ import {
 } from 'remirror';
 import { makeStyles } from 'tss-react/mui';
 
-import useActiveMenu from './hooks/useActiveMenu';
-import SearchEditorInput from './SearchEditorInput';
+import useActiveMenu from '../../../src/search-editor/hooks/useActiveMenu';
+import { SearchEditorComponent } from './SearchEditorComponent';
 import {
 	SearchEditorProvider,
 	SearchEditorProviderProps,
 } from './SearchEditorProvider';
-import { SuggesterComponent } from './SuggesterComponent';
-import { GetSuggestions } from './types';
-import { remirrorToSearch } from './utils/remirror-to-search';
+import { SuggesterComponent } from '../../../src/search-editor/SuggesterComponent';
+import { GetSuggestions } from '../../../src/search-editor/types';
+import { remirrorToSearch } from '../../../src/search-editor/utils/remirror-to-search';
 
 const useStyles = makeStyles()(theme => ({
 	root: {
@@ -36,6 +36,25 @@ const useStyles = makeStyles()(theme => ({
 	activeContainer: {
 		boxShadow: theme.palette.background.default,
 	},
+	editorInputRoot: {
+		display: 'flex',
+		flexDirection: 'row',
+		alignItems: 'center',
+		gap: theme.spacing(0.5),
+		alignSelf: 'stretch',
+		paddingRight: theme.spacing(0.625),
+		maxHeight: theme.spacing(3),
+	},
+	editorWrapper: {
+		display: 'flex',
+		alignItems: 'flex-start',
+		alignContent: 'center',
+		gap: theme.spacing(0.75),
+		flex: '1 0 0',
+		flexWrap: 'wrap',
+		width: '100%',
+		overflow: 'hidden',
+	},
 	searchBox: {
 		padding: theme.spacing(1),
 	},
@@ -158,17 +177,17 @@ export function SearchEditor({
 			<div ref={rootRef} className={cx(classes.root, classesProps?.root)}>
 				<div className={containerClassName}>
 					<div className={cx(classes.searchBox, classesProps?.searchBox)}>
-						<SearchEditorInput
-							disabledSearch={disabledSearch}
-							isActive={isActive}
-							closeMenu={closeMenu}
-						/>
+						<div className={classes.editorInputRoot}>
+							<SearchEditorComponent className={classes.editorWrapper} />
+						</div>
 					</div>
 					<SuggesterComponent
 						fields={fields}
 						isActive={isActive}
 						closeMenu={closeMenu}
 						getSuggestions={getSuggestions}
+						optionLabel="search"
+						selectLabel="select"
 					/>
 					{showMenuFooter && <div className={classes.footer}>{menuFooter}</div>}
 					{fixedFooter && <div className={classes.footer}>{fixedFooter}</div>}

src/search-editor/SearchEditorProvider.tsx → .storybook/stories/components/SearchEditorProvider.tsx

@@ -11,13 +11,13 @@ import { makeStyles } from 'tss-react/mui';
 
 import { useSearchExtension } from '../hooks/useSearchExtensions';
 
-import { useInitializeDoc } from './hooks/useInitializeDoc';
+import { useInitializeDoc } from '../../../src/search-editor/hooks/useInitializeDoc';
 import {
 	SearchImperativeRef,
 	SearchImperativeHandle,
-} from './SearchImperativeHandle';
-import { Fields } from './types';
-import { searchToRemirror } from './utils/search-to-remirror';
+} from '../../../src/search-editor/SearchImperativeHandle';
+import { Fields } from '../../../src/search-editor/types';
+import { searchToRemirror } from '../../../src/search-editor/utils/search-to-remirror';
 
 const useStyles = makeStyles()(theme => {
 	return {

src/hooks/useSearchExtensions.ts → .storybook/stories/hooks/useSearchExtensions.ts

@@ -3,12 +3,11 @@ import { useMemo } from 'react';
 import { SchemaAttributes, Static } from 'remirror';
 import { ParagraphExtension, PlaceholderExtension } from 'remirror/extensions';
 
-import { CustomKeymapExtension } from '../extensions/custom-keymap-extension';
 import {
 	MentionExtension,
 	MentionExtensionMatcher,
-} from '../extensions/mention-extension';
-import { Fields } from '../search-editor/types';
+} from '../../../src/extensions/mention-extension';
+import { Fields } from '../../../src/search-editor/types';
 
 import { useDeepCompareMemoize } from './useDeepCompare';
 
@@ -61,7 +60,6 @@ export function createSearchExtensions(params: UseSearchExtensionProps) {
 	const extraAttributes = getExtraAttributesFromFields(params.fields);
 
 	const extensions = [
-		new CustomKeymapExtension(),
 		new ParagraphExtension(),
 		new PlaceholderExtension({
 			emptyNodeClass: params.emptyNodeClass,

.storybook/stories/search-editor.stories.tsx

@@ -4,16 +4,15 @@ import { useRef } from 'react';
 import { PiCalendarBlank, PiTag } from 'react-icons/pi';
 import { NamedMentionAtomNodeAttributes } from 'remirror/extensions';
 
-import { Fields, SearchImperativeRef } from '../../src';
+import { Fields, GetSuggestions, SearchImperativeRef } from '../../src';
 import { MentionSuggester } from '../../src/search-editor/MentionSuggester';
 import {
 	SearchEditor,
 	SearchEditorProps,
-} from '../../src/search-editor/SearchEditor';
+} from './components/SearchEditor';
 
-import { Story } from './utils/doc';
-import { TAGS, USERS, useEditorMention } from './utils/hooks/useEditorMention';
-import { GetSuggestions } from '../../src/types';
+import { TAGS, USERS, useEditorMention } from './hooks/useEditorMention';
+import { StoryFn } from '@storybook/react/*';
 
 export default {
 	title: 'Editors / Search Editor',
@@ -27,7 +26,7 @@ type SearchEditorStoryArgs = Pick<
 	'initialSearchQuery' | 'disabledSearch' | 'menuFooter' | 'fixedFooter'
 >;
 
-const Template: Story<SearchEditorStoryArgs> = (
+const Template: StoryFn<SearchEditorStoryArgs> = (
 	props: SearchEditorStoryArgs,
 ) => {
 	const {
@@ -117,26 +116,26 @@ const Template: Story<SearchEditorStoryArgs> = (
 	);
 };
 
-export const Basic: Story<SearchEditorStoryArgs> = Template.bind({});
+export const Basic: StoryFn<SearchEditorStoryArgs> = Template.bind({});
 Basic.args = {};
 
-export const Filled: Story<SearchEditorStoryArgs> = Template.bind({});
+export const Filled: StoryFn<SearchEditorStoryArgs> = Template.bind({});
 Filled.args = {
 	initialSearchQuery: SEARCH_QUERY,
 };
 
-export const Disabled: Story<SearchEditorStoryArgs> = Template.bind({});
+export const Disabled: StoryFn<SearchEditorStoryArgs> = Template.bind({});
 Disabled.args = {
 	initialSearchQuery: SEARCH_QUERY,
 	disabledSearch: true,
 };
 
-export const FixedFooter: Story<SearchEditorStoryArgs> = Template.bind({});
+export const FixedFooter: StoryFn<SearchEditorStoryArgs> = Template.bind({});
 FixedFooter.args = {
 	fixedFooter: <div style={{ textAlign: 'center' }}>Fixed Footer</div>,
 };
 
-export const MenuFooter: Story<SearchEditorStoryArgs> = Template.bind({});
+export const MenuFooter: StoryFn<SearchEditorStoryArgs> = Template.bind({});
 MenuFooter.args = {
 	menuFooter: <div style={{ textAlign: 'center' }}>Menu Footer</div>,
 };
@@ -146,13 +145,14 @@ export const Loading = () => {
 		<MentionSuggester
 			isLoadingSuggestions
 			options={[]}
-			fields={{}}
 			renderOption={() => null}
 			renderSelectOption={() => null}
 			getItemProps={() => ({} as any)}
 			indexIsHovered={() => false}
 			indexIsSelected={() => false}
 			getMenuProps={() => ({} as any)}
+			optionLabel=''
+			selectLabel=''
 		/>
 	);
 };

.storybook/stories/static-search-editor.stories.tsx

@@ -2,13 +2,13 @@ import { JSX } from 'react/jsx-runtime';
 
 import { Fields, StaticSearchEditor, StaticSearchEditorProps } from '../../src';
 
-import { Story } from './utils/doc';
 import {
 	SOURCES,
 	TAGS,
 	USERS,
 	useEditorMention,
-} from './utils/hooks/useEditorMention';
+} from './hooks/useEditorMention';
+import { StoryFn } from '@storybook/react/*';
 
 export default {
 	title: 'Editors / Static Search Editor',
@@ -17,7 +17,7 @@ export default {
 
 const SEARCH_QUERY = `list:item1,item2,item3 user:${USERS[0].id} tag:${TAGS[0].id} source:${SOURCES[0].id} ger`;
 
-const Template: Story<Omit<StaticSearchEditorProps, 'fields'>> = (
+const Template: StoryFn<Omit<StaticSearchEditorProps, 'fields'>> = (
 	props: JSX.IntrinsicAttributes & Omit<StaticSearchEditorProps, 'fields'>,
 ) => {
 	const { renderSource, renderUser, renderTag, renderDate } =

README.md

@@ -1,13 +1,13 @@
-# remirror-search-editor
+# remirror-suggest-search
 
 Search editor with suggestions build with Remirror
 
-[Live demo](https://collaborne.github.io/remirror-search-editor/)
+[Live demo](https://collaborne.github.io/remirror-suggest-search/)
 
 ## Install
 
 ```bash
-npm install --save @collaborne/remirror-search-editor
+npm install --save @collaborne/remirror-suggest-search
 ```
 
 ## Development