paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 48 Packages Projects Releases Wiki Activity

Merge pull request #6420 from backstage/emmaindal/storybook-search-components

Browse Source 
[Search] Add search components to storybook
This commit is contained in:
Ben Lambert
2021-08-02 17:59:49 +02:00
committed by GitHub
parent 12761d9334 b0e8a24217
commit 64429fc4c6
9 changed files with 269 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/search/api-report.md
+1 -1
View File
@@ -167,7 +167,7 @@ export const useSearch: () => SearchContextValue;
// Warnings were encountered during analysis:
//
// src/components/SearchContext/SearchContext.d.ts:18:5 - (ae-forgotten-export) The symbol "SettableSearchContext" needs to be exported by the entry point index.d.ts
// src/components/SearchContext/SearchContext.d.ts:19:5 - (ae-forgotten-export) The symbol "SettableSearchContext" needs to be exported by the entry point index.d.ts
// src/components/SearchFilter/SearchFilter.d.ts:13:5 - (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
// src/components/SearchFilter/SearchFilter.d.ts:14:5 - (ae-forgotten-export) The symbol "Component" needs to be exported by the entry point index.d.ts
plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx
+43
View File
@@ -0,0 +1,43 @@
/*
* Copyright 2021 Spotify AB
*
* 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 React from 'react';
import { Grid } from '@material-ui/core';
import { DefaultResultListItem } from '../index';
import { MemoryRouter } from 'react-router';
export default {
title: 'Plugins/Search/DefaultResultListItem',
component: DefaultResultListItem,
};
export const Default = () => {
return (
<MemoryRouter>
<Grid container direction="row">
<Grid item xs={12}>
<DefaultResultListItem
result={{
location: 'search/search-result',
title: 'Search Result 1',
text: 'some text from the search result',
}}
/>
</Grid>
</Grid>
</MemoryRouter>
);
};
plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ export const DefaultResultListItem = ({ result }: Props) => {
secondary={result.text}
/>
</ListItem>
<Divider component="li" />
<Divider />
</Link>
);
};
plugins/search/src/components/SearchBar/SearchBar.stories.tsx
+47
View File
@@ -0,0 +1,47 @@
/*
* Copyright 2021 Spotify AB
*
* 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 React from 'react';
import { Paper, Grid } from '@material-ui/core';
import { SearchBar, SearchContext } from '../index';
import { MemoryRouter } from 'react-router';
export default {
title: 'Plugins/Search/SearchBar',
component: SearchBar,
};
const defaultValue = {
term: '',
setTerm: () => {},
};
export const Default = () => {
return (
<MemoryRouter>
{/* @ts-ignore (defaultValue requires more than what is used here) */}
<SearchContext.Provider value={defaultValue}>
<Grid container direction="row">
<Grid item xs={12}>
<Paper style={{ padding: '8px 0' }}>
<SearchBar />
</Paper>
</Grid>
</Grid>
</SearchContext.Provider>
</MemoryRouter>
);
};
plugins/search/src/components/SearchContext/SearchContext.tsx
+3 -1
View File
@@ -45,7 +45,9 @@ type SettableSearchContext = Omit<
'result' | 'setTerm' | 'setTypes' | 'setFilters' | 'setPageCursor'
>;
const SearchContext = createContext<SearchContextValue | undefined>(undefined);
export const SearchContext = createContext<SearchContextValue | undefined>(
undefined,
);
export const SearchContextProvider = ({
initialState = {
plugins/search/src/components/SearchContext/index.tsx
+5 -1
View File
@@ -14,4 +14,8 @@
* limitations under the License.
*/
export { SearchContextProvider, useSearch } from './SearchContext';
export {
SearchContextProvider,
SearchContext,
useSearch,
} from './SearchContext';
plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx
+69
View File
@@ -0,0 +1,69 @@
/*
* Copyright 2021 Spotify AB
*
* 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 React from 'react';
import { Grid, Paper } from '@material-ui/core';
import { SearchFilter, SearchContext } from '../index';
import { MemoryRouter } from 'react-router';
export default {
title: 'Plugins/Search/SearchFilter',
component: SearchFilter,
};
const defaultValue = {
filters: {},
};
export const CheckBoxFilter = () => {
return (
<MemoryRouter>
{/* @ts-ignore (defaultValue requires more than what is used here) */}
<SearchContext.Provider value={defaultValue}>
<Grid container direction="row">
<Grid item xs={4}>
<Paper style={{ padding: 10 }}>
<SearchFilter.Checkbox
name="Search Checkbox Filter"
values={['value1', 'value2']}
/>
</Paper>
</Grid>
</Grid>
</SearchContext.Provider>
</MemoryRouter>
);
};
export const SelectFilter = () => {
return (
<MemoryRouter>
{/* @ts-ignore (defaultValue requires more than what is used here) */}
<SearchContext.Provider value={defaultValue}>
<Grid container direction="row">
<Grid item xs={4}>
<Paper style={{ padding: 10 }}>
<SearchFilter.Select
name="Search Select Filter"
values={['value1', 'value2']}
/>
</Paper>
</Grid>
</Grid>
</SearchContext.Provider>
</MemoryRouter>
);
};
plugins/search/src/components/SearchResult/SearchResult.stories.tsx
+95
View File
@@ -0,0 +1,95 @@
/*
* Copyright 2021 Spotify AB
*
* 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 React from 'react';
import { List, Link, ListItem } from '@material-ui/core';
import { SearchResult, SearchContext, DefaultResultListItem } from '../index';
import { MemoryRouter } from 'react-router';
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',
},
},
],
},
},
};
export const Default = () => {
return (
<MemoryRouter>
{/* @ts-ignore (defaultValue requires more than what is used here) */}
<SearchContext.Provider value={defaultValue}>
<SearchResult>
{({ results }) => (
<List>
{results.map(({ type, document }) => {
switch (type) {
case 'custom-result-item':
return (
<DefaultResultListItem
key={document.location}
result={document}
/>
);
default:
return (
<ListItem>
<Link href={document.location}>
{document.title} - {document.text}
</Link>
</ListItem>
);
}
})}
</List>
)}
</SearchResult>
</SearchContext.Provider>
</MemoryRouter>
);
};