@graphcommerce/magento-search 3.0.1

package/CHANGELOG.md

@@ -0,0 +1,135 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.0.0...@graphcommerce/magento-search@3.0.1) (2021-09-27)
+
+**Note:** Version bump only for package @graphcommerce/magento-search
+
+
+
+
+
+# 3.0.0 (2021-09-27)
+
+
+### Bug Fixes
+
+* **404-page:** prevent auto focus search form ([9e89ed3](https://github.com/ho-nl/m2-pwa/commit/9e89ed31ea192312641f46f01b69dc5f319331e8))
+* add dependencies for searchbutton ([c8f9608](https://github.com/ho-nl/m2-pwa/commit/c8f960828daa77675c4f359e971690b227563445))
+* **app-shell:** pages after app shell changes ([fb74510](https://github.com/ho-nl/m2-pwa/commit/fb74510121f6124009db72ad2ddebf6459c52a85))
+* caption styles bugs ([f223918](https://github.com/ho-nl/m2-pwa/commit/f223918cc557a996b5f321fbf6910b4981646dcb))
+* empty grid rows still have a gap ([7ba50c7](https://github.com/ho-nl/m2-pwa/commit/7ba50c740aa7ac5133b933b3e6a22fab853b55a6))
+* ignore md files from triggering version updates ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
+* **image:** make sure unoptimized images are preloaded correctly and remove preloads from lots of images ([fb2b4fc](https://github.com/ho-nl/m2-pwa/commit/fb2b4fcb5336ff880a9b32775847d7b6738ba1ea))
+* implement next-ui barrel imports ([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
+* make fab-menu more configurable ([f73d7ec](https://github.com/ho-nl/m2-pwa/commit/f73d7ecccfba7d5cd9eecdcdd65abb5393a9e7a9))
+* no search results message ([2ecd6e3](https://github.com/ho-nl/m2-pwa/commit/2ecd6e36481e546dc78acfb46dfff08dcfdd8e6a))
+* pagination & janky search form ([b4fb982](https://github.com/ho-nl/m2-pwa/commit/b4fb982980c92f3819bb563582979dd66893a733))
+* readonly search field ([5524847](https://github.com/ho-nl/m2-pwa/commit/552484706520c14b7b3d1708daf8cc64b91f3fe7))
+* rename NextButton to Button, change imports ([976adb0](https://github.com/ho-nl/m2-pwa/commit/976adb0bf906310d1efce888dcc9be1e28ce0f1b))
+* search button on click type ([33a6a08](https://github.com/ho-nl/m2-pwa/commit/33a6a0826acf795750503b39bd0d224baa795a47))
+* search not submitting after empying the field ([a15b5cf](https://github.com/ho-nl/m2-pwa/commit/a15b5cf94f4619e0087c8871a98617ab160f671a))
+* search page routes ([4161179](https://github.com/ho-nl/m2-pwa/commit/4161179aaf2ecbc0fde0efbba891a7b85524e283))
+* search results text ([33a496c](https://github.com/ho-nl/m2-pwa/commit/33a496c07fe6b5b0b05f3287dc86f6a32ca34b3b))
+* **search-page:** hide menu and cart fabs when opened virtual keyboard mobile ([e728768](https://github.com/ho-nl/m2-pwa/commit/e7287680545f33079d0af47df1c6ea519b208978))
+* since all links are of next/link we need to add passHref for custom components ([16fb931](https://github.com/ho-nl/m2-pwa/commit/16fb93100d367203ea79bb4f93357221253f2ecd))
+* yarn workspace packages hot reload ([d03fc9f](https://github.com/ho-nl/m2-pwa/commit/d03fc9fdda3486476761786f2b56a934cc92befc))
+
+
+### Features
+
+* Add customer service icon and define MuiIconButton size ([eefcc52](https://github.com/ho-nl/m2-pwa/commit/eefcc52eeffa03b364464709e1860135127cc4b5))
+* **app-shell:** now consistent ([fb5b506](https://github.com/ho-nl/m2-pwa/commit/fb5b5062729002b508e888a4962f1b2578e5199b))
+* created stacked-pages package ([d86008e](https://github.com/ho-nl/m2-pwa/commit/d86008ee659ccb25b194a41d624b394a1ddbd088))
+* full page ui desktop variant ([a70f301](https://github.com/ho-nl/m2-pwa/commit/a70f3013da36fa131f82fb44457b107fb7705df6))
+* **graphql:** introduced new graphql package that holds all generated files ([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
+* **image:** introduced completely rewritten Image component ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
+* minimal page shell ([1693674](https://github.com/ho-nl/m2-pwa/commit/1693674631fc8438c60d9b74b73e607e08971a2d))
+* next.js 11 ([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
+* **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+* renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
+* search page ([c89291b](https://github.com/ho-nl/m2-pwa/commit/c89291b7a65c93cbdb5f131f061f7232fdce3b99))
+* svgimage component ([f369605](https://github.com/ho-nl/m2-pwa/commit/f3696051e381a24c543fd24e199da5b17f9e124f))
+* upgrade to node 14 ([d079a75](https://github.com/ho-nl/m2-pwa/commit/d079a751e9bfd8dc7f5009d2c9f31c336a0c96ab))
+* upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+
+
+
+## 2.0.8 (2020-10-28)
+
+
+### Bug Fixes
+
+* make sure themes extensions are found ([5aa18db](https://github.com/ho-nl/m2-pwa/commit/5aa18db514fd2e2f50681367e39523f8e742ece0))
+
+
+### Features
+
+* split into packages ([2ee7fd6](https://github.com/ho-nl/m2-pwa/commit/2ee7fd6c0056f467d114f04d92c6c0ddf622d151))
+
+
+### BREAKING CHANGES
+
+* huge folder structure refactor, please read README to reinstall
+
+
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [2.104.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@2.103.8...@graphcommerce/magento-search@2.104.0) (2021-08-27)
+
+### Bug Fixes
+
+- **app-shell:** pages after app shell changes
+  ([fb74510](https://github.com/ho-nl/m2-pwa/commit/fb74510121f6124009db72ad2ddebf6459c52a85))
+
+### Features
+
+- **app-shell:** now consistent
+  ([fb5b506](https://github.com/ho-nl/m2-pwa/commit/fb5b5062729002b508e888a4962f1b2578e5199b))
+
+## [2.103.6](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@2.103.5...@graphcommerce/magento-search@2.103.6) (2021-08-17)
+
+### Bug Fixes
+
+- **404-page:** prevent auto focus search form
+  ([9e89ed3](https://github.com/ho-nl/m2-pwa/commit/9e89ed31ea192312641f46f01b69dc5f319331e8))
+- **search-page:** hide menu and cart fabs when opened virtual keyboard mobile
+  ([e728768](https://github.com/ho-nl/m2-pwa/commit/e7287680545f33079d0af47df1c6ea519b208978))
+
+# [2.103.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@2.102.9...@graphcommerce/magento-search@2.103.0) (2021-08-12)
+
+### Features
+
+- upgraded to nextjs 11
+  ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+
+# [2.102.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@2.101.7...@graphcommerce/magento-search@2.102.0) (2021-07-26)
+
+### Features
+
+- **playwright:** added new playwright package to enable browser testing
+  ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+
+# [2.101.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@2.100.10...@graphcommerce/magento-search@2.101.0) (2021-07-20)
+
+### Bug Fixes
+
+- ignore md files from triggering version updates
+  ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
+- search button on click type
+  ([33a6a08](https://github.com/ho-nl/m2-pwa/commit/33a6a0826acf795750503b39bd0d224baa795a47))
+
+### Features
+
+- full page ui desktop variant
+  ([a70f301](https://github.com/ho-nl/m2-pwa/commit/a70f3013da36fa131f82fb44457b107fb7705df6))
+- minimal page shell
+  ([1693674](https://github.com/ho-nl/m2-pwa/commit/1693674631fc8438c60d9b74b73e607e08971a2d))

package/CategorySearchResult/CategorySearchResult.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CategorySearchResultFragment = { uid: string, url_path?: Types.Maybe<string>, name?: Types.Maybe<string>, breadcrumbs?: Types.Maybe<Array<Types.Maybe<{ category_uid: string, category_name?: Types.Maybe<string>, category_url_path?: Types.Maybe<string> }>>> };

package/CategorySearchResult/CategorySearchResult.graphql

@@ -0,0 +1,6 @@
+fragment CategorySearchResult on CategoryTree {
+  uid
+  url_path
+  name
+  ...CategoryBreadcrumb
+}

package/CategorySearchResult/chevron_right.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>desktop_chevron_Right</title>
+    <g id="desktop_chevron_Right" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="chevron-right" transform="translate(16.500000, 16.000000) scale(-1, 1) translate(-16.500000, -16.000000) translate(13.000000, 9.000000)" stroke="#000000" stroke-width="1.6">
+            <polyline id="Path-2-Copy" points="7 0 0 7 7 14"></polyline>
+        </g>
+    </g>
+</svg>

package/CategorySearchResult/index.tsx

@@ -0,0 +1,70 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { Button, Highlight, iconChevronRight, SvgImage, UseStyles } from '@graphcommerce/next-ui'
+import PageLink from 'next/link'
+import React from 'react'
+import { CategorySearchResultFragment } from './CategorySearchResult.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    categoryButton: {
+      padding: `${theme.spacings.xs} 18px ${theme.spacings.xs} 14px`,
+      display: 'flex',
+      justifyContent: 'space-between',
+      minWidth: '100%',
+      maxWidth: 'unset',
+      borderRadius: '0',
+      '&:not(&:last-child)': {
+        borderBottom: `1px solid ${theme.palette.divider}`,
+      },
+      '&:focus': {
+        boxShadow: 'none',
+      },
+      '&:hover': {
+        background: theme.palette.background.highlight,
+      },
+    },
+    totalProducts: {
+      minWidth: 'max-content',
+      paddingRight: 7,
+    },
+  }),
+  {
+    name: 'CategorySearchResult',
+  },
+)
+
+export type CategorySearchResultProps = Omit<CategorySearchResultFragment, 'uid'> &
+  UseStyles<typeof useStyles> & { search?: string }
+
+export default function CategorySearchResult(props: CategorySearchResultProps) {
+  const { search = '', ...catProps } = props
+  const classes = useStyles(props)
+
+  return (
+    <PageLink href={`/${catProps?.url_path ?? ''}`}>
+      <Button
+        fullWidth
+        variant='contained'
+        className={classes.categoryButton}
+        disableElevation
+        endIcon={
+          <SvgImage src={iconChevronRight} alt='chevron right' size='small' loading='eager' />
+        }
+      >
+        <div>
+          {catProps?.breadcrumbs?.map((breadcrumb) => (
+            <React.Fragment key={breadcrumb?.category_url_path}>
+              <Highlight
+                key={breadcrumb?.category_url_path}
+                text={breadcrumb?.category_name ?? ''}
+                highlight={search}
+              />
+              {' / '}
+            </React.Fragment>
+          ))}
+          <Highlight text={catProps?.name ?? ''} highlight={search} />
+        </div>
+      </Button>
+    </PageLink>
+  )
+}

package/NoSearchResults/index.tsx

@@ -0,0 +1,32 @@
+import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { UseStyles } from '@graphcommerce/next-ui'
+import React from 'react'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    container: {
+      marginTop: theme.spacings.md,
+      marginBottom: theme.spacings.sm,
+      textAlign: 'center',
+    },
+  }),
+  {
+    name: 'NoSearchResults',
+  },
+)
+
+export type NoSearchResultsProps = { search: string } & UseStyles<typeof useStyles>
+
+export default function NoSearchResults(props: NoSearchResultsProps) {
+  const { search } = props
+  const classes = useStyles(props)
+
+  return (
+    <div className={classes.container}>
+      <Typography variant='h5' align='center'>
+        We couldn&apos;t find any results for {`'${search}'`}
+      </Typography>
+      <p>Try a different search</p>
+    </div>
+  )
+}

package/Search.gql.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const SearchDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Search"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pageSize"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}},"defaultValue":{"kind":"IntValue","value":"23"}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"currentPage"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}},"defaultValue":{"kind":"IntValue","value":"1"}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ProductAttributeFilterInput"}},"defaultValue":{"kind":"ObjectValue","fields":[]}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"sort"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ProductAttributeSortInput"}},"defaultValue":{"kind":"ObjectValue","fields":[]}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"search"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}},"defaultValue":{"kind":"StringValue","value":"","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"categories"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"name"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"match"},"value":{"kind":"Variable","name":{"kind":"Name","value":"search"}}}]}}]}},{"kind":"Argument","name":{"kind":"Name","value":"pageSize"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pageSize"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"url_path"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CategoryInterface"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"breadcrumbs"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"category_uid"}},{"kind":"Field","name":{"kind":"Name","value":"category_name"}},{"kind":"Field","name":{"kind":"Name","value":"category_url_path"}}]}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"products"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pageSize"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pageSize"}}},{"kind":"Argument","name":{"kind":"Name","value":"currentPage"},"value":{"kind":"Variable","name":{"kind":"Name","value":"currentPage"}}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}},{"kind":"Argument","name":{"kind":"Name","value":"sort"},"value":{"kind":"Variable","name":{"kind":"Name","value":"sort"}}},{"kind":"Argument","name":{"kind":"Name","value":"search"},"value":{"kind":"Variable","name":{"kind":"Name","value":"search"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total_count"}},{"kind":"Field","name":{"kind":"Name","value":"page_info"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"current_page"}},{"kind":"Field","name":{"kind":"Name","value":"total_pages"}}]}},{"kind":"Field","name":{"kind":"Name","value":"sort_fields"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"default"}},{"kind":"Field","name":{"kind":"Name","value":"options"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"url_key"}},{"kind":"Field","name":{"kind":"Name","value":"sku"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"small_image"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"price_range"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"maximum_price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"regular_price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"discount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount_off"}},{"kind":"Field","name":{"kind":"Name","value":"percent_off"}}]}},{"kind":"Field","name":{"kind":"Name","value":"final_price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"minimum_price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"regular_price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"Field","name":{"kind":"Name","value":"discount"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"amount_off"}},{"kind":"Field","name":{"kind":"Name","value":"percent_off"}}]}},{"kind":"Field","name":{"kind":"Name","value":"final_price"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"currency"}},{"kind":"Field","name":{"kind":"Name","value":"value"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"rating_summary"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ConfigurableProduct"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"configurable_options"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attribute_code"}},{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"values"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"store_label"}},{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"swatch_data"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"TextSwatchData"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ColorSwatchData"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"value"}}]}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ImageSwatchData"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"value"}},{"kind":"Field","name":{"kind":"Name","value":"thumbnail"}}]}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"variants"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"attributes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"code"}}]}},{"kind":"Field","name":{"kind":"Name","value":"product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"sku"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"small_image"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]}}]}}]}}]}},{"kind":"Field","alias":{"kind":"Name","value":"filters"},"name":{"kind":"Name","value":"products"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"search"},"value":{"kind":"Variable","name":{"kind":"Name","value":"search"}}},{"kind":"Argument","name":{"kind":"Name","value":"pageSize"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pageSize"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"aggregations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"count"}},{"kind":"Field","name":{"kind":"Name","value":"attribute_code"}},{"kind":"Field","name":{"kind":"Name","value":"options"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"label"}},{"kind":"Field","name":{"kind":"Name","value":"value"}},{"kind":"Field","name":{"kind":"Name","value":"count"}}]}}]}}]}}]}}]} as unknown as DocumentNode<SearchQuery, SearchQueryVariables>;
+export type SearchQueryVariables = Types.Exact<{
+  pageSize?: Types.Maybe<Types.Scalars['Int']>;
+  currentPage?: Types.Maybe<Types.Scalars['Int']>;
+  filters?: Types.Maybe<Types.ProductAttributeFilterInput>;
+  sort?: Types.Maybe<Types.ProductAttributeSortInput>;
+  search?: Types.Maybe<Types.Scalars['String']>;
+}>;
+
+
+export type SearchQuery = { categories?: Types.Maybe<{ items?: Types.Maybe<Array<Types.Maybe<{ uid: string, url_path?: Types.Maybe<string>, name?: Types.Maybe<string>, breadcrumbs?: Types.Maybe<Array<Types.Maybe<{ category_uid: string, category_name?: Types.Maybe<string>, category_url_path?: Types.Maybe<string> }>>> }>>> }>, products?: Types.Maybe<{ total_count?: Types.Maybe<number>, page_info?: Types.Maybe<{ current_page?: Types.Maybe<number>, total_pages?: Types.Maybe<number> }>, sort_fields?: Types.Maybe<{ default?: Types.Maybe<string>, options?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, value?: Types.Maybe<string> }>>> }>, items?: Types.Maybe<Array<Types.Maybe<{ __typename: 'BundleProduct', uid: string, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'ConfigurableProduct', uid: string, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, rating_summary: number, configurable_options?: Types.Maybe<Array<Types.Maybe<{ attribute_code?: Types.Maybe<string>, uid: string, label?: Types.Maybe<string>, values?: Types.Maybe<Array<Types.Maybe<{ store_label?: Types.Maybe<string>, uid?: Types.Maybe<string>, swatch_data?: Types.Maybe<{ __typename: 'ColorSwatchData', value?: Types.Maybe<string> } | { __typename: 'ImageSwatchData', value?: Types.Maybe<string>, thumbnail?: Types.Maybe<string> } | { __typename: 'TextSwatchData', value?: Types.Maybe<string> }> }>>> }>>>, variants?: Types.Maybe<Array<Types.Maybe<{ attributes?: Types.Maybe<Array<Types.Maybe<{ uid: string, code?: Types.Maybe<string> }>>>, product?: Types.Maybe<{ uid: string, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, small_image?: Types.Maybe<{ label?: Types.Maybe<string>, url?: Types.Maybe<string> }> }> }>>>, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'DownloadableProduct', uid: string, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'GroupedProduct', uid: string, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'SimpleProduct', uid: string, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } } | { __typename: 'VirtualProduct', uid: string, url_key?: Types.Maybe<string>, sku?: Types.Maybe<string>, name?: Types.Maybe<string>, rating_summary: number, small_image?: Types.Maybe<{ url?: Types.Maybe<string>, label?: Types.Maybe<string> }>, price_range: { maximum_price?: Types.Maybe<{ regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } }>, minimum_price: { regular_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> }, discount?: Types.Maybe<{ amount_off?: Types.Maybe<number>, percent_off?: Types.Maybe<number> }>, final_price: { currency?: Types.Maybe<Types.CurrencyEnum>, value?: Types.Maybe<number> } } } }>>> }>, filters?: Types.Maybe<{ aggregations?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, count?: Types.Maybe<number>, attribute_code: string, options?: Types.Maybe<Array<Types.Maybe<{ label?: Types.Maybe<string>, value: string, count?: Types.Maybe<number> }>>> }>>> }> };

package/Search.graphql

@@ -0,0 +1,17 @@
+query Search(
+  $pageSize: Int = 23
+  $currentPage: Int = 1
+  $filters: ProductAttributeFilterInput = {}
+  $sort: ProductAttributeSortInput = {}
+  $search: String = ""
+) {
+  categories(filters: { name: { match: $search } }, pageSize: $pageSize) {
+    items {
+      ...CategorySearchResult
+    }
+  }
+  ...ProductListQueryFragment
+  filters: products(search: $search, pageSize: $pageSize) {
+    ...ProductListFilters
+  }
+}

package/SearchButton/index.tsx

@@ -0,0 +1,40 @@
+import { makeStyles, TextField, Theme } from '@material-ui/core'
+import { UseStyles, SvgImage, iconSearch } from '@graphcommerce/next-ui'
+import React from 'react'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      width: '100%',
+      '& fieldset': {
+        border: `2px solid rgba(0,0,0,0.1)`,
+      },
+    },
+    inputRoot: {
+      ...theme.typography.body2,
+    },
+  }),
+  { name: 'SearchButton' },
+)
+
+export type SearchButtonProps = UseStyles<typeof useStyles> & { onClick: () => void }
+
+export default function SearchButton(props: SearchButtonProps) {
+  const { onClick } = props
+  const classes = useStyles(props)
+
+  return (
+    <TextField
+      variant='outlined'
+      size='small'
+      classes={{ root: classes.root }}
+      InputProps={{
+        readOnly: true,
+        endAdornment: <SvgImage src={iconSearch} alt='Search' size='small' />,
+        classes: { root: classes.inputRoot },
+      }}
+      placeholder=''
+      onClick={onClick}
+    />
+  )
+}

package/SearchDivider/index.tsx

@@ -0,0 +1,14 @@
+import { styled } from '@material-ui/core'
+
+const SearchDivider = styled('div')(
+  ({ theme }) => ({
+    boxShadow: '0 5px 4px 0 rgb(3 3 3 / 3%)',
+    width: '100%',
+    height: 16,
+    marginTop: theme.spacings.md,
+    marginBottom: theme.spacings.md,
+  }),
+  { name: 'FormDivider' },
+)
+
+export default SearchDivider

package/SearchForm/index.tsx

@@ -0,0 +1,93 @@
+import { IconButton, makeStyles, TextField, Theme } from '@material-ui/core'
+import { FormRow, UseStyles, SvgImage, iconClose, iconSearch } from '@graphcommerce/next-ui'
+import { useForm, useFormAutoSubmit, useFormMuiRegister } from '@graphcommerce/react-hook-form'
+import { useRouter } from 'next/router'
+import React from 'react'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    totalProducts: {
+      minWidth: 'max-content',
+      color: theme.palette.grey[500],
+      paddingRight: 7,
+    },
+  }),
+  {
+    name: 'SearchIndexPage',
+  },
+)
+
+export type SearchFormProps = {
+  totalResults?: number
+  search?: string
+  urlHandle?: string
+  autoFocus?: boolean
+} & UseStyles<typeof useStyles>
+
+export default function SearchForm(props: SearchFormProps) {
+  const { totalResults = 0, search = '', urlHandle = 'search', autoFocus = true } = props
+  const classes = useStyles(props)
+  const router = useRouter()
+
+  const form = useForm({ mode: 'onChange', defaultValues: { search } })
+  const { handleSubmit, formState, reset, watch, getValues } = form
+
+  const muiRegister = useFormMuiRegister(form)
+
+  const submit = handleSubmit((formData) => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    router.replace(`/${urlHandle}/${formData.search}`)
+    reset(getValues())
+  })
+  useFormAutoSubmit({ form, submit })
+
+  const handleReset = () => {
+    reset({ search: '' })
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    router.replace(`/${urlHandle}`)
+  }
+
+  const endAdornment = !watch('search') ? (
+    <IconButton size='small'>
+      <SvgImage src={iconSearch} alt='search' size='small' />
+    </IconButton>
+  ) : (
+    <>
+      {totalResults > 0 && (
+        <div className={classes.totalProducts}>
+          {totalResults} {totalResults > 1 ? 'results' : 'result'}
+        </div>
+      )}
+      <IconButton onClick={handleReset} size='small'>
+        <SvgImage src={iconClose} alt='close' size='small' />
+      </IconButton>
+    </>
+  )
+
+  return (
+    <form
+      noValidate
+      onSubmit={submit}
+      onChange={() => {
+        if (watch('search') === '') {
+          // eslint-disable-next-line @typescript-eslint/no-floating-promises
+          router.replace(`/search`)
+        }
+      }}
+    >
+      <FormRow>
+        <TextField
+          variant='outlined'
+          type='text'
+          autoFocus={autoFocus}
+          placeholder='Search'
+          defaultValue={search}
+          error={formState.isSubmitted && !!formState.errors.search}
+          helperText={formState.isSubmitted && formState.errors.search?.message}
+          {...muiRegister('search', { required: true, minLength: 2 })}
+          InputProps={{ endAdornment }}
+        />
+      </FormRow>
+    </form>
+  )
+}

package/index.ts

@@ -0,0 +1,16 @@
+export { default as SearchDivider } from './SearchDivider'
+export * from './SearchDivider'
+
+export { default as NoSearchResults } from './NoSearchResults'
+export * from './NoSearchResults'
+
+export { default as CategorySearchResult } from './CategorySearchResult'
+export * from './CategorySearchResult'
+
+export { default as SearchForm } from './SearchForm'
+export * from './SearchForm'
+
+export { default as SearchButton } from './SearchButton'
+export * from './SearchButton'
+
+export * from './Search.gql'

package/next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+/// <reference types="@graphcommerce/next-ui/types" />

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@graphcommerce/magento-search",
+  "version": "3.0.1",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "browserslist": [
+    "extends @graphcommerce/browserslist-config-pwa"
+  ],
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/browserslist-config-pwa": "^3.0.1",
+    "@graphcommerce/eslint-config-pwa": "^3.0.1",
+    "@graphcommerce/prettier-config-pwa": "^3.0.1",
+    "@graphcommerce/typescript-config-pwa": "^3.0.1",
+    "@playwright/test": "^1.14.1"
+  },
+  "dependencies": {
+    "@graphcommerce/graphql": "^2.103.1",
+    "@graphcommerce/image": "^2.104.1",
+    "@graphcommerce/next-ui": "^3.0.1",
+    "@graphcommerce/react-hook-form": "^2.102.1",
+    "@graphql-typed-document-node/core": "^3.1.0",
+    "@material-ui/core": "^4.12.3",
+    "next": "^11.1.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["**/node_modules", "**/.*/"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+}