diff --git a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx index 0445a35943..fe2f6c2327 100644 --- a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx +++ b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx @@ -25,6 +25,17 @@ import { MemoryRouter } from 'react-router'; export default { title: 'Plugins/Search/DefaultResultListItem', component: DefaultResultListItem, + decorators: [ + (Story: () => JSX.Element) => ( + + + + + + + + ), + ], }; const mockSearchResult = { @@ -35,54 +46,34 @@ const mockSearchResult = { }; export const Default = () => { - return ( - - - - - - - - ); + return ; }; export const WithIcon = () => { return ( - - - - } - /> - - - + } + /> ); }; export const WithSecondaryAction = () => { return ( - - - - } - style={{ textTransform: 'lowercase' }} - > - {mockSearchResult.owner} - - } - /> - - - + } + style={{ textTransform: 'lowercase' }} + > + {mockSearchResult.owner} + + } + /> ); }; diff --git a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx index d00f391bc7..96c86aa16f 100644 --- a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx +++ b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx @@ -14,88 +14,58 @@ * limitations under the License. */ -import React from 'react'; +import React, { ComponentType } from 'react'; import { Paper, Grid, makeStyles } from '@material-ui/core'; -import { SearchBar, SearchContext } from '../index'; -import { MemoryRouter } from 'react-router'; +import { SearchBar } from '../index'; +import { SearchContextProvider } from '../SearchContext/SearchContextForStorybook.stories'; export default { title: 'Plugins/Search/SearchBar', component: SearchBar, -}; - -const defaultValue = { - term: '', - setTerm: () => {}, + decorators: [ + (Story: ComponentType<{}>) => ( + + + + + + + + ), + ], }; export const Default = () => { return ( - - {/* @ts-ignore (defaultValue requires more than what is used here) */} - - - - - - - - - - + + + ); }; export const CustomPlaceholder = () => { return ( - - {/* @ts-ignore (defaultValue requires more than what is used here) */} - - - - - - - - - - + + + ); }; export const Focused = () => { return ( - - {/* @ts-ignore (defaultValue requires more than what is used here) */} - - - - - {/* decision up to adopter, read https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md#no-autofocus */} - {/* eslint-disable-next-line jsx-a11y/no-autofocus */} - - - - - - + + {/* decision up to adopter, read https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md#no-autofocus */} + {/* eslint-disable-next-line jsx-a11y/no-autofocus */} + + ); }; export const WithoutClearButton = () => { return ( - - {/* @ts-ignore (defaultValue requires more than what is used here) */} - - - - - - - - - - + + + ); }; @@ -112,17 +82,8 @@ const useStyles = makeStyles({ export const CustomStyles = () => { const classes = useStyles(); return ( - - {/* @ts-ignore (defaultValue requires more than what is used here) */} - - - - - - - - - - + + + ); }; diff --git a/plugins/search/src/components/SearchContext/SearchContextForStorybook.stories.tsx b/plugins/search/src/components/SearchContext/SearchContextForStorybook.stories.tsx new file mode 100644 index 0000000000..4528a6e46d --- /dev/null +++ b/plugins/search/src/components/SearchContext/SearchContextForStorybook.stories.tsx @@ -0,0 +1,42 @@ +/* + * Copyright 2021 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { ApiProvider } from '@backstage/core-app-api'; +import { SearchResultSet } from '@backstage/search-common'; +import { TestApiRegistry } from '@backstage/test-utils'; +import React, { ComponentProps } from 'react'; +import { searchApiRef } from '../../apis'; +import { SearchContextProvider as RealSearchContextProvider } from './SearchContext'; + +type QueryResultProps = { + mockedResults?: SearchResultSet; +}; + +/** + * Utility context provider only for use in Storybook stories. + */ +export const SearchContextProvider = ( + props: ComponentProps & QueryResultProps, +) => { + const { mockedResults, ...contextProps } = props; + const query: any = () => Promise.resolve(mockedResults || {}); + const apiRegistry = TestApiRegistry.from([searchApiRef, { query }]); + + return ( + + + + ); +}; diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx index 190856fca8..806ee46e60 100644 --- a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx +++ b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx @@ -14,56 +14,45 @@ * limitations under the License. */ -import React from 'react'; +import React, { ComponentType } from 'react'; import { Grid, Paper } from '@material-ui/core'; -import { SearchFilter, SearchContext } from '../index'; -import { MemoryRouter } from 'react-router'; +import { SearchFilter } from '../index'; +import { SearchContextProvider } from '../SearchContext/SearchContextForStorybook.stories'; export default { title: 'Plugins/Search/SearchFilter', component: SearchFilter, -}; - -const defaultValue = { - filters: {}, + decorators: [ + (Story: ComponentType<{}>) => ( + + + + + + + + ), + ], }; export const CheckBoxFilter = () => { return ( - - {/* @ts-ignore (defaultValue requires more than what is used here) */} - - - - - - - - - - + + + ); }; export const SelectFilter = () => { return ( - - {/* @ts-ignore (defaultValue requires more than what is used here) */} - - - - - - - - - - + + + ); }; diff --git a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx index 6fa93c6588..d46e44c580 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx @@ -16,60 +16,50 @@ import React, { ComponentType } from 'react'; import { Button } from '@material-ui/core'; -import { ApiProvider, ApiRegistry } from '@backstage/core-app-api'; import { wrapInTestApp } from '@backstage/test-utils'; import { SearchModal } from '../index'; -import { useSearch, SearchContextProvider } from '../SearchContext'; -import { searchApiRef } from '../../apis'; +import { useSearch } from '../SearchContext'; import { rootRouteRef } from '../../plugin'; +import { SearchContextProvider } from '../SearchContext/SearchContextForStorybook.stories'; -const mockSearchApi = { - query: () => - Promise.resolve({ - results: [ - { - type: 'custom-result-item', - document: { - location: 'search/search-result-1', - title: 'Search Result 1', - text: 'some text from the search result', - }, - }, - { - type: 'no-custom-result-item', - document: { - location: 'search/search-result-2', - title: 'Search Result 2', - text: 'some text from the search result', - }, - }, - { - type: 'no-custom-result-item', - document: { - location: 'search/search-result-3', - title: 'Search Result 3', - text: 'some text from the search result', - }, - }, - ], - }), +const mockResults = { + results: [ + { + type: 'custom-result-item', + document: { + location: 'search/search-result-1', + title: 'Search Result 1', + text: 'some text from the search result', + }, + }, + { + type: 'no-custom-result-item', + document: { + location: 'search/search-result-2', + title: 'Search Result 2', + text: 'some text from the search result', + }, + }, + { + type: 'no-custom-result-item', + document: { + location: 'search/search-result-3', + title: 'Search Result 3', + text: 'some text from the search result', + }, + }, + ], }; -const apiRegistry = () => ApiRegistry.from([[searchApiRef, mockSearchApi]]); - export default { title: 'Plugins/Search/SearchModal', component: SearchModal, decorators: [ (Story: ComponentType<{}>) => wrapInTestApp( - <> - - - - - - , + + + , { mountedRoutes: { '/search': rootRouteRef } }, ), ], diff --git a/plugins/search/src/components/SearchResult/SearchResult.stories.tsx b/plugins/search/src/components/SearchResult/SearchResult.stories.tsx index aebaecb8b4..bdd04ad90f 100644 --- a/plugins/search/src/components/SearchResult/SearchResult.stories.tsx +++ b/plugins/search/src/components/SearchResult/SearchResult.stories.tsx @@ -14,83 +14,82 @@ * limitations under the License. */ -import React from 'react'; +import React, { ComponentType } from 'react'; import { List, ListItem } from '@material-ui/core'; -import { SearchResult, SearchContext, DefaultResultListItem } from '../index'; +import { SearchResult, DefaultResultListItem } from '../index'; import { MemoryRouter } from 'react-router'; import { Link } from '@backstage/core-components'; +import { SearchContextProvider } from '../SearchContext/SearchContextForStorybook.stories'; + +const mockResults = { + results: [ + { + type: 'custom-result-item', + document: { + location: 'search/search-result-1', + title: 'Search Result 1', + text: 'some text from the search result', + }, + }, + { + type: 'no-custom-result-item', + document: { + location: 'search/search-result-2', + title: 'Search Result 2', + text: 'some text from the search result', + }, + }, + { + type: 'no-custom-result-item', + document: { + location: 'search/search-result-3', + title: 'Search Result 3', + text: 'some text from the search result', + }, + }, + ], +}; export default { title: 'Plugins/Search/SearchResult', component: SearchResult, -}; - -const defaultValue = { - result: { - loading: false, - error: '', - value: { - results: [ - { - type: 'custom-result-item', - document: { - location: 'search/search-result-1', - title: 'Search Result 1', - text: 'some text from the search result', - }, - }, - { - type: 'no-custom-result-item', - document: { - location: 'search/search-result-2', - title: 'Search Result 2', - text: 'some text from the search result', - }, - }, - { - type: 'no-custom-result-item', - document: { - location: 'search/search-result-3', - title: 'Search Result 3', - text: 'some text from the search result', - }, - }, - ], - }, - }, + decorators: [ + (Story: ComponentType<{}>) => ( + + + + + + ), + ], }; export const Default = () => { return ( - - {/* @ts-ignore (defaultValue requires more than what is used here) */} - - - {({ results }) => ( - - {results.map(({ type, document }) => { - switch (type) { - case 'custom-result-item': - return ( - - ); - default: - return ( - - - {document.title} - {document.text} - - - ); - } - })} - - )} - - - + + {({ results }) => ( + + {results.map(({ type, document }) => { + switch (type) { + case 'custom-result-item': + return ( + + ); + default: + return ( + + + {document.title} - {document.text} + + + ); + } + })} + + )} + ); }; diff --git a/plugins/search/src/components/SearchType/SearchType.stories.tsx b/plugins/search/src/components/SearchType/SearchType.stories.tsx index d458c59aad..b8282d6423 100644 --- a/plugins/search/src/components/SearchType/SearchType.stories.tsx +++ b/plugins/search/src/components/SearchType/SearchType.stories.tsx @@ -13,46 +13,51 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useState } from 'react'; +import React, { ComponentType } from 'react'; +import { Grid, Paper } from '@material-ui/core'; import CatalogIcon from '@material-ui/icons/MenuBook'; import DocsIcon from '@material-ui/icons/Description'; import UsersGroupsIcon from '@material-ui/icons/Person'; import { SearchType } from '../index'; -import { SearchContext } from '../SearchContext'; +import { SearchContextProvider } from '../SearchContext/SearchContextForStorybook.stories'; export default { title: 'Plugins/Search/SearchType', component: SearchType, + decorators: [ + (Story: ComponentType<{}>) => ( + + + + + + + + ), + ], }; const values = ['value-1', 'value-2', 'value-3']; export const Default = () => { - const [types, setTypes] = useState([]); - return ( - + - + ); }; export const Accordion = () => { - const [types, setTypes] = useState([]); - const setPageCursor = () => {}; - return ( - - }, - { value: 'value-2', name: 'Value Two', icon: }, - { value: 'value-3', name: 'Value Three', icon: }, - ]} - /> - + }, + { value: 'value-2', name: 'Value Two', icon: }, + { value: 'value-3', name: 'Value Three', icon: }, + ]} + /> ); };