From 262bf3babfd8ae266da71e06c053efff1ec00060 Mon Sep 17 00:00:00 2001 From: Robson Oliveira Date: Wed, 27 Apr 2022 13:26:55 -0300 Subject: [PATCH 1/7] feat(searchcontext): create the SearchContext --- src/utils/contexts/searchContext.tsx | 33 ++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 src/utils/contexts/searchContext.tsx diff --git a/src/utils/contexts/searchContext.tsx b/src/utils/contexts/searchContext.tsx new file mode 100644 index 000000000..2af5eec36 --- /dev/null +++ b/src/utils/contexts/searchContext.tsx @@ -0,0 +1,33 @@ +import { createContext, useState } from 'react' + +type ContextType = { + filterSelectedSection: string + toggleFilterSelectedSection: (filterSelected: string) => void +} + +export const SearchContext = createContext({ + filterSelectedSection: '', + toggleFilterSelectedSection: () => undefined, +}) + +const SearchContextProvider: React.FC = ({ children }) => { + const [filterSelectedSection, changefilterSelectedSection] = useState('') + + const toggleFilterSelectedSection = (filterSelected: string) => { + console.log(filterSelected) + changefilterSelectedSection(filterSelected) + } + + return ( + + {children} + + ) +} + +export default SearchContextProvider From 5ead14bce6e7492cb4ac02fd79eaaf6db4fb0984 Mon Sep 17 00:00:00 2001 From: Robson Oliveira Date: Wed, 27 Apr 2022 13:50:20 -0300 Subject: [PATCH 2/7] refactor(search-results): create the SearchResults component --- src/components/search-results/index.tsx | 127 ++++++++++++++++++++++++ src/components/search-results/styles.ts | 23 +++++ src/pages/search/index.tsx | 74 ++------------ src/styles/search-page.ts | 19 ---- 4 files changed, 161 insertions(+), 82 deletions(-) create mode 100644 src/components/search-results/index.tsx create mode 100644 src/components/search-results/styles.ts diff --git a/src/components/search-results/index.tsx b/src/components/search-results/index.tsx new file mode 100644 index 000000000..ee68513ac --- /dev/null +++ b/src/components/search-results/index.tsx @@ -0,0 +1,127 @@ +import { IconComponent } from 'utils/typings/types' +import APIGuidesIcon from 'components/icons/api-guides-icon' +import APIReferenceIcon from 'components/icons/api-reference-icon' +import VTEXIOIcon from 'components/icons/vtex-io-icon' +import FastStoreIcon from 'components/icons/fast-store-icon' +import WebOpsIcon from 'components/icons/webops-icon' +import ReleaseNotesIcon from 'components/icons/release-notes-icon' +import DocumentationUpdatesIcon from 'components/icons/documentation-updates-icon' +import SearchCard from 'components/search-card' +import { + DocumentationTitle, + UpdatesTitle, + MethodType, +} from 'utils/typings/unionTypes' +import { ActionType } from 'components/last-updates-card/functions' +import { useRouter } from 'next/router' +import { Box, Text } from '@vtex/brand-ui' +import styles from './styles' + +export interface SearchDataItemProps { + doc: string + title: string + description: string + filters?: string[] + http?: MethodType + actionType?: ActionType +} + +export interface DocDataElement { + Icon: IconComponent + title: DocumentationTitle +} + +export interface UpdatesDataElement { + Icon: IconComponent + title: UpdatesTitle +} + +export const docsIcons: DocDataElement[] = [ + { + Icon: APIGuidesIcon, + title: 'API Guides', + }, + { + Icon: APIReferenceIcon, + title: 'API Reference', + }, + { + Icon: VTEXIOIcon, + title: 'VTEX IO', + }, + { + Icon: FastStoreIcon, + title: 'FastStore', + }, + { + Icon: WebOpsIcon, + title: 'WebOps', + }, +] + +export const notesIcons: UpdatesDataElement[] = [ + { + Icon: ReleaseNotesIcon, + title: 'Release Notes', + }, + { + Icon: DocumentationUpdatesIcon, + title: 'Documentation Updates', + }, +] + +const getIcon = (doc: string) => { + return ( + docsIcons.find((icon) => icon.title === doc)?.Icon || + notesIcons.find((icon) => icon.title === doc)?.Icon + ) +} + +const SearchResults = () => { + const router = useRouter() + + const searchData: SearchDataItemProps[] = [ + { + doc: 'API Guides', + title: 'SKU Selector', + description: + 'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.', + filters: ['label', 'label', 'label'], + }, + { + doc: 'API Reference', + title: 'GET SKU seller', + http: 'POST', + description: + 'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.', + filters: ['label', 'label', 'label'], + }, + { + doc: 'Release Notes', + title: 'SKU Selector', + description: + 'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.', + actionType: 'removed', + }, + ] + return ( + + + Showing {searchData.length} results for "{router.query.keyword}" in all + results + +
+ + {searchData.map((result, index) => ( + + ))} + + + ) +} + +export default SearchResults diff --git a/src/components/search-results/styles.ts b/src/components/search-results/styles.ts new file mode 100644 index 000000000..287db36ad --- /dev/null +++ b/src/components/search-results/styles.ts @@ -0,0 +1,23 @@ +import { SxStyleProp } from '@vtex/brand-ui' + +const resultContainer: SxStyleProp = { + width: '720px', + paddingTop: '64px', + hr: { + marginTop: '16px', + marginBottom: '32px', + borderTop: 'none', + borderColor: '#DDDDDD', + }, +} + +const resultText: SxStyleProp = { + mb: '16px', + fontSize: '16px', + lineHeight: '22px', +} + +export default { + resultContainer, + resultText, +} diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx index 23986f9f9..da802f841 100644 --- a/src/pages/search/index.tsx +++ b/src/pages/search/index.tsx @@ -1,71 +1,19 @@ -import { useRouter } from 'next/router' -import { Flex, Box, Text } from '@vtex/brand-ui' +import { Flex } from '@vtex/brand-ui' import styles from 'styles/search-page' - -import { getIcon } from 'utils/constants' -import { MethodType } from 'utils/typings/unionTypes' -import { ActionType } from 'components/last-updates-card/functions' - -import SideBar from 'components/sidebar' -import SearchCard from 'components/search-card' import SearchSections from 'components/search-sections' - -export interface SearchDataItemProps { - doc: string - title: string - description: string - filters?: string[] - http?: MethodType - actionType?: ActionType -} +import Sidebar from 'components/sidebar' +import SearchContextProvider from 'utils/contexts/searchContext' +import SearchResults from 'components/search-results' const SearchPage = () => { - const router = useRouter() - const searchData: SearchDataItemProps[] = [ - { - doc: 'API Guides', - title: 'SKU Selector', - description: - 'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.', - filters: ['label', 'label', 'label'], - }, - { - doc: 'API Reference', - title: 'GET SKU seller', - http: 'POST', - description: - 'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.', - filters: ['label', 'label', 'label'], - }, - { - doc: 'Release Notes', - title: 'SKU Selector', - description: - 'The SKU Selector is a product details page block responsible for displaying every SKU available for a given product.', - actionType: 'removed', - }, - ] return ( - - - - - - Showing {searchData.length} results for "{router.query.keyword}" in - all results - -
- - {searchData.map((result, index) => ( - - ))} - - - + + + + + + + ) } diff --git a/src/styles/search-page.ts b/src/styles/search-page.ts index 6846c2648..aeba2ed81 100644 --- a/src/styles/search-page.ts +++ b/src/styles/search-page.ts @@ -5,25 +5,6 @@ const body: SxStyleProp = { background: '#FFFFFF', } -const resultContainer: SxStyleProp = { - width: '720px', - paddingTop: '64px', - hr: { - marginTop: '16px', - marginBottom: '32px', - borderTop: 'none', - borderColor: '#DDDDDD', - }, -} - -const resultText: SxStyleProp = { - mb: '16px', - fontSize: '16px', - lineHeight: '22px', -} - export default { body, - resultContainer, - resultText, } From 7300bfc45df9c6102b5822e664364f1699d84b36 Mon Sep 17 00:00:00 2001 From: Robson Oliveira Date: Thu, 28 Apr 2022 10:32:39 -0300 Subject: [PATCH 3/7] fix(search-components): update paths after rebase --- src/components/search-card/index.tsx | 2 +- src/components/search-results/index.tsx | 73 +++---------------------- 2 files changed, 8 insertions(+), 67 deletions(-) diff --git a/src/components/search-card/index.tsx b/src/components/search-card/index.tsx index e2a040729..ca821bdd1 100644 --- a/src/components/search-card/index.tsx +++ b/src/components/search-card/index.tsx @@ -1,6 +1,6 @@ import { Box, Flex, Text, IconCaret } from '@vtex/brand-ui' import { IconComponent } from 'utils/typings/types' -import type { SearchDataItemProps } from 'pages/search' +import type { SearchDataItemProps } from 'components/search-results' import { methodStyle } from './functions' import styles from './styles' diff --git a/src/components/search-results/index.tsx b/src/components/search-results/index.tsx index ee68513ac..2388e9fa8 100644 --- a/src/components/search-results/index.tsx +++ b/src/components/search-results/index.tsx @@ -1,20 +1,12 @@ -import { IconComponent } from 'utils/typings/types' -import APIGuidesIcon from 'components/icons/api-guides-icon' -import APIReferenceIcon from 'components/icons/api-reference-icon' -import VTEXIOIcon from 'components/icons/vtex-io-icon' -import FastStoreIcon from 'components/icons/fast-store-icon' -import WebOpsIcon from 'components/icons/webops-icon' -import ReleaseNotesIcon from 'components/icons/release-notes-icon' -import DocumentationUpdatesIcon from 'components/icons/documentation-updates-icon' -import SearchCard from 'components/search-card' -import { - DocumentationTitle, - UpdatesTitle, - MethodType, -} from 'utils/typings/unionTypes' -import { ActionType } from 'components/last-updates-card/functions' import { useRouter } from 'next/router' import { Box, Text } from '@vtex/brand-ui' + +import { MethodType } from 'utils/typings/unionTypes' + +import { getIcon } from 'utils/constants' +import SearchCard from 'components/search-card' + +import { ActionType } from 'components/last-updates-card/functions' import styles from './styles' export interface SearchDataItemProps { @@ -26,57 +18,6 @@ export interface SearchDataItemProps { actionType?: ActionType } -export interface DocDataElement { - Icon: IconComponent - title: DocumentationTitle -} - -export interface UpdatesDataElement { - Icon: IconComponent - title: UpdatesTitle -} - -export const docsIcons: DocDataElement[] = [ - { - Icon: APIGuidesIcon, - title: 'API Guides', - }, - { - Icon: APIReferenceIcon, - title: 'API Reference', - }, - { - Icon: VTEXIOIcon, - title: 'VTEX IO', - }, - { - Icon: FastStoreIcon, - title: 'FastStore', - }, - { - Icon: WebOpsIcon, - title: 'WebOps', - }, -] - -export const notesIcons: UpdatesDataElement[] = [ - { - Icon: ReleaseNotesIcon, - title: 'Release Notes', - }, - { - Icon: DocumentationUpdatesIcon, - title: 'Documentation Updates', - }, -] - -const getIcon = (doc: string) => { - return ( - docsIcons.find((icon) => icon.title === doc)?.Icon || - notesIcons.find((icon) => icon.title === doc)?.Icon - ) -} - const SearchResults = () => { const router = useRouter() From 658f2ba4e7717311dc613f323f41660ab3cfc569 Mon Sep 17 00:00:00 2001 From: Robson Oliveira Date: Thu, 28 Apr 2022 11:34:01 -0300 Subject: [PATCH 4/7] refactor(searchcontext): update the filter type in searchContext --- src/utils/contexts/searchContext.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/utils/contexts/searchContext.tsx b/src/utils/contexts/searchContext.tsx index 2af5eec36..0c3d08d9a 100644 --- a/src/utils/contexts/searchContext.tsx +++ b/src/utils/contexts/searchContext.tsx @@ -1,8 +1,11 @@ import { createContext, useState } from 'react' +import type { DocumentationTitle, UpdatesTitle } from 'utils/typings/unionTypes' + +type FilterType = DocumentationTitle | UpdatesTitle | '' type ContextType = { - filterSelectedSection: string - toggleFilterSelectedSection: (filterSelected: string) => void + filterSelectedSection: FilterType + toggleFilterSelectedSection: (filterSelected: FilterType) => void } export const SearchContext = createContext({ @@ -11,10 +14,10 @@ export const SearchContext = createContext({ }) const SearchContextProvider: React.FC = ({ children }) => { - const [filterSelectedSection, changefilterSelectedSection] = useState('') + const [filterSelectedSection, changefilterSelectedSection] = + useState('') - const toggleFilterSelectedSection = (filterSelected: string) => { - console.log(filterSelected) + const toggleFilterSelectedSection = (filterSelected: FilterType) => { changefilterSelectedSection(filterSelected) } From e8c881c9c3499e53680751f06f44f5527d1dfc84 Mon Sep 17 00:00:00 2001 From: Robson Oliveira Date: Thu, 28 Apr 2022 12:33:59 -0300 Subject: [PATCH 5/7] refactor(allresults section): code refactoring to make all-results section as SearchSection componen --- src/components/search-section/index.tsx | 15 ++++++++-- src/components/search-section/styles.ts | 8 +++++ src/components/search-sections/index.tsx | 11 ++----- src/components/search-sections/styles.ts | 37 ------------------------ 4 files changed, 22 insertions(+), 49 deletions(-) diff --git a/src/components/search-section/index.tsx b/src/components/search-section/index.tsx index fffaa6a17..184fd27e1 100644 --- a/src/components/search-section/index.tsx +++ b/src/components/search-section/index.tsx @@ -4,12 +4,21 @@ import type { DocDataElement, UpdatesDataElement } from 'utils/typings/types' import styles from './styles' interface SearchSectionProps { - dataElement: DocDataElement | UpdatesDataElement - index: number + dataElement: DocDataElement | UpdatesDataElement | null + index?: number } const SearchSection = ({ dataElement, index }: SearchSectionProps) => { - return ( + return !dataElement ? ( + + + All results + + + 25 + + + ) : ( { return ( - - - All results - - - 25 - - + {documentationData.map((docsIcon, index) => ( ))} diff --git a/src/components/search-sections/styles.ts b/src/components/search-sections/styles.ts index 9d19dc50a..34a6d1f47 100644 --- a/src/components/search-sections/styles.ts +++ b/src/components/search-sections/styles.ts @@ -19,45 +19,8 @@ const docsSection: SxStyleProp = { borderBottom: '1px solid #E7E9EE', } -const allResultsContainer: SxStyleProp = { - justifyContent: 'space-between', - padding: '8px', - mb: '8px', - cursor: 'pointer', - ':active, :hover': { - backgroundColor: '#F8F7FC', - '.search-section-title': { - color: '#000711', - }, - '.search-section-count': { - background: '#E7E9EE', - }, - }, -} - -const allResultsText: SxStyleProp = { - fontSize: '12px', - lineHeight: '16px', - ml: '24px', - fontWeight: 'bold', - color: '#0C1522', -} - -const sectionCount: SxStyleProp = { - background: '#F8F7FC', - borderRadius: '24px', - width: 'auto', - textAlign: 'center', - px: '8px', - fontSize: '12px', - lineHeight: '16px', -} - export default { container, notesSection, docsSection, - allResultsText, - allResultsContainer, - sectionCount, } From b82b43e52a1d32acf73d61494e0029406a99b4a7 Mon Sep 17 00:00:00 2001 From: Robson Oliveira Date: Fri, 29 Apr 2022 17:04:54 -0300 Subject: [PATCH 6/7] refactor(searchcontext): remove unnecessary function --- src/utils/contexts/searchContext.tsx | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/src/utils/contexts/searchContext.tsx b/src/utils/contexts/searchContext.tsx index 0c3d08d9a..fa3814be4 100644 --- a/src/utils/contexts/searchContext.tsx +++ b/src/utils/contexts/searchContext.tsx @@ -1,31 +1,27 @@ -import { createContext, useState } from 'react' +import { createContext, Dispatch, SetStateAction, useState } from 'react' import type { DocumentationTitle, UpdatesTitle } from 'utils/typings/unionTypes' type FilterType = DocumentationTitle | UpdatesTitle | '' -type ContextType = { +type SearchContextType = { filterSelectedSection: FilterType - toggleFilterSelectedSection: (filterSelected: FilterType) => void + changeFilterSelectedSection: Dispatch> } -export const SearchContext = createContext({ +export const SearchContext = createContext({ filterSelectedSection: '', - toggleFilterSelectedSection: () => undefined, + changeFilterSelectedSection: () => undefined, }) const SearchContextProvider: React.FC = ({ children }) => { - const [filterSelectedSection, changefilterSelectedSection] = + const [filterSelectedSection, changeFilterSelectedSection] = useState('') - const toggleFilterSelectedSection = (filterSelected: FilterType) => { - changefilterSelectedSection(filterSelected) - } - return ( {children} From 81dd1408479a51e5429eadf4d85d552343e659ab Mon Sep 17 00:00:00 2001 From: Robson Oliveira Date: Mon, 2 May 2022 15:38:32 -0300 Subject: [PATCH 7/7] chore: update rebase --- yarn.lock | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 34406607f..f44281a14 100644 --- a/yarn.lock +++ b/yarn.lock @@ -414,9 +414,14 @@ dependencies: "glob" "7.1.7" -"@next/swc-win32-x64-msvc@12.1.0": - "integrity" "sha512-aBvcbMwuanDH4EMrL2TthNJy+4nP59Bimn8egqv6GHMVj0a44cU6Au4PjOhLNqEh9l+IpRGBqMTzec94UdC5xg==" - "resolved" "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.0.tgz" +"@next/swc-linux-x64-gnu@12.1.0": + "integrity" "sha512-OKO4R/digvrVuweSw/uBM4nSdyzsBV5EwkUeeG4KVpkIZEe64ZwRpnFB65bC6hGwxIBnTv5NMSnJ+0K/WmG78A==" + "resolved" "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.0.tgz" + "version" "12.1.0" + +"@next/swc-linux-x64-musl@12.1.0": + "integrity" "sha512-JohhgAHZvOD3rQY7tlp7NlmvtvYHBYgY0x5ZCecUT6eCCcl9lv6iV3nfu82ErkxNk1H893fqH0FUpznZ/H3pSw==" + "resolved" "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.0.tgz" "version" "12.1.0" "@nodelib/fs.scandir@2.1.5":