add stories to storybook for reusable search components

Signed-off-by: Emma Indal <emma.indahl@gmail.com>

plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx

@@ -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/SearchBar/SearchBar.stories.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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 { 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}>
+            <SearchBar />
+          </Grid>
+        </Grid>
+      </SearchContext.Provider>
+    </MemoryRouter>
+  );
+};

plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx

@@ -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

@@ -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>
+  );
+};