Add search field

Closes #3

Author: cheshire137

src/App.css

@@ -36,3 +36,14 @@
     display: none !important;
   }
 }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: rect(0 0 0 0);
+  overflow-wrap: normal;
+  border: 0;
+}

src/App.tsx

@@ -12,6 +12,7 @@ import {Header} from './Header'
 import {FiltersAndTable} from './FiltersAndTable'
 import themeOverrides from './theme-overrides'
 import {SortProvider} from './SortContext'
+import {SearchContextProvider} from './contexts/SearchContextProvider'
 
 const App = () => (
   <ProviderStack>
@@ -37,7 +38,9 @@ const ProviderStack = ({children}: PropsWithChildren) => (
         <RequireAnchorProvider>
           <RequireCosmoProvider>
             <SortProvider>
-              <ColorsProvider>{children}</ColorsProvider>
+              <SearchContextProvider>
+                <ColorsProvider>{children}</ColorsProvider>
+              </SearchContextProvider>
             </SortProvider>
           </RequireCosmoProvider>
         </RequireAnchorProvider>

src/ColorsContext.tsx

@@ -2,6 +2,7 @@ import {createContext, type PropsWithChildren, useContext, useMemo} from 'react'
 import {useRequireAnchor} from './RequireAnchorContext'
 import {useRequireJpCoats} from './RequireJpCoatsContext'
 import {useRequireCosmo} from './contexts/cosmo-context'
+import {useSearchContext} from './contexts/search-context'
 import dmcNamedColorCodes from './assets/dmc-color-codes-names.json'
 import dmcNewJpCoatsColors from './assets/dmc-old-new-jp-coats-colors.json'
 import dmcCosmoColors from './assets/dmc-cosmo-colors.json'
@@ -20,6 +21,7 @@ export function ColorsProvider({children}: PropsWithChildren) {
   const {requireJpCoats} = useRequireJpCoats()
   const {requireCosmo} = useRequireCosmo()
   const {sortOption} = useSort()
+  const {query, field} = useSearchContext()
   const dataByDmcCode = useMemo<Record<string, EmbroideryFlossColor>>(() => {
     const result: Record<string, EmbroideryFlossColor> = {}
     dmcNamedColorCodes.forEach(data => {
@@ -50,19 +52,42 @@ export function ColorsProvider({children}: PropsWithChildren) {
   const contextProps = useMemo(
     () => ({
       colors: colors
-        .filter(({anchorCode, cosmoCodes, jpCoatsOld, jpCoatsNew}) => {
+        .filter(({anchorCode, cosmoCodes, jpCoatsOld, jpCoatsNew, dmcCode, dmcName}) => {
           if (requireAnchor && anchorCode === undefined) return false
           if (requireJpCoats && jpCoatsOld === undefined && jpCoatsNew === undefined) {
             return false
           }
           if (requireCosmo && (cosmoCodes === undefined || cosmoCodes.length < 1)) {
             return false
           }
+          if (query.trim() !== '') {
+            switch (field) {
+              case 'dmcCode':
+                if (!dmcCode.startsWith(query)) return false
+                break
+              case 'dmcName':
+                if (!dmcName.startsWith(query)) return false
+                break
+              case 'anchor':
+                if (anchorCode === undefined || !anchorCode.startsWith(query)) return false
+                break
+              case 'cosmo':
+                if (cosmoCodes === undefined || cosmoCodes.length < 1) return false
+                if (!cosmoCodes.some(c => c.startsWith(query))) return false
+                break
+              case 'jpcNew':
+                if (jpCoatsNew === undefined || !jpCoatsNew.startsWith(query)) return false
+                break
+              case 'jpcOld':
+                if (jpCoatsOld === undefined || !jpCoatsOld.startsWith(query)) return false
+                break
+            }
+          }
           return true
         })
         .sort(colorCompareFunction(sortOption)),
     }),
-    [colors, requireAnchor, requireCosmo, requireJpCoats, sortOption]
+    [colors, field, query, requireAnchor, requireCosmo, requireJpCoats, sortOption]
   )
   return <ColorsContext.Provider value={contextProps}>{children}</ColorsContext.Provider>
 }

src/Filters.css

@@ -2,4 +2,12 @@
   display: flex;
   gap: 4px;
   align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.filterCheckboxes {
+  display: flex;
+  gap: 16px;
+  align-items: center;
 }

src/Filters.tsx

@@ -3,6 +3,7 @@ import {Fieldset} from './Fieldset'
 import {useRequireJpCoats} from './RequireJpCoatsContext'
 import {useRequireAnchor} from './RequireAnchorContext'
 import {useRequireCosmo} from './contexts/cosmo-context'
+import {Search} from './Search'
 import './Filters.css'
 
 export const Filters = () => {
@@ -12,18 +13,21 @@ export const Filters = () => {
 
   return (
     <Fieldset legend="Filters" className="filtersFieldset">
-      <FormControl>
-        <Checkbox checked={requireAnchor} onChange={() => setRequireAnchor(!requireAnchor)} />
-        <FormControl.Label>Anchor</FormControl.Label>
-      </FormControl>
-      <FormControl>
-        <Checkbox checked={requireCosmo} onChange={() => setRequireCosmo(!requireCosmo)} />
-        <FormControl.Label>Cosmo</FormControl.Label>
-      </FormControl>
-      <FormControl>
-        <Checkbox checked={requireJpCoats} onChange={() => setRequireJpCoats(!requireJpCoats)} />
-        <FormControl.Label>J&amp;P Coats</FormControl.Label>
-      </FormControl>
+      <div className="filterCheckboxes">
+        <FormControl>
+          <Checkbox checked={requireAnchor} onChange={() => setRequireAnchor(!requireAnchor)} />
+          <FormControl.Label>Anchor</FormControl.Label>
+        </FormControl>
+        <FormControl>
+          <Checkbox checked={requireCosmo} onChange={() => setRequireCosmo(!requireCosmo)} />
+          <FormControl.Label>Cosmo</FormControl.Label>
+        </FormControl>
+        <FormControl>
+          <Checkbox checked={requireJpCoats} onChange={() => setRequireJpCoats(!requireJpCoats)} />
+          <FormControl.Label>J&amp;P&nbsp;Coats</FormControl.Label>
+        </FormControl>
+      </div>
+      <Search />
     </Fieldset>
   )
 }

src/RequireAnchorContext.tsx

@@ -9,7 +9,7 @@ const RequireAnchorContext = createContext<RequireAnchor | undefined>(undefined)
 
 export function RequireAnchorProvider({children}: PropsWithChildren) {
   const [requireAnchor, setRequireAnchor] = useState(false)
-  const contextProps = useMemo(() => ({requireAnchor, setRequireAnchor}), [requireAnchor, setRequireAnchor])
+  const contextProps = useMemo(() => ({requireAnchor, setRequireAnchor}), [requireAnchor])
   return <RequireAnchorContext.Provider value={contextProps}>{children}</RequireAnchorContext.Provider>
 }
 

src/RequireJpCoatsContext.tsx

@@ -9,7 +9,7 @@ const RequireJpCoatsContext = createContext<RequireJpCoats | undefined>(undefine
 
 export const RequireJpCoatsProvider = ({children}: PropsWithChildren) => {
   const [requireJpCoats, setRequireJpCoats] = useState(false)
-  const contextProps = useMemo(() => ({requireJpCoats, setRequireJpCoats}), [requireJpCoats, setRequireJpCoats])
+  const contextProps = useMemo(() => ({requireJpCoats, setRequireJpCoats}), [requireJpCoats])
   return <RequireJpCoatsContext.Provider value={contextProps}>{children}</RequireJpCoatsContext.Provider>
 }
 

src/Search.css

@@ -0,0 +1,6 @@
+.searchControls {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 4px;
+}

src/Search.tsx

@@ -0,0 +1,33 @@
+import {ActionList, ActionMenu, FormControl, TextInput} from '@primer/react'
+import {sortLabels, sortOptions} from './SortContext'
+import {useSearchContext} from './contexts/search-context'
+import './Search.css'
+
+export function Search() {
+  const {field, setField, query, setQuery} = useSearchContext()
+  return (
+    <div className="searchControls">
+      <ActionMenu>
+        <ActionMenu.Button><span className="sr-only">Search by</span> {sortLabels[field]}</ActionMenu.Button>
+        <ActionMenu.Overlay width="small">
+          <ActionList selectionVariant="single">
+            {sortOptions.map(searchOption => (
+              <ActionList.Item
+                key={searchOption}
+                selected={searchOption === field}
+                onSelect={() => setField(searchOption)}
+              >
+                <span className="sr-only">Search by</span>
+                {sortLabels[searchOption]}
+              </ActionList.Item>
+            ))}
+          </ActionList>
+        </ActionMenu.Overlay>
+      </ActionMenu>
+      <FormControl>
+        <FormControl.Label visuallyHidden>Search {sortLabels[field]}</FormControl.Label>
+        <TextInput placeholder="Search" value={query} onChange={e => setQuery(e.currentTarget.value)} />
+      </FormControl>
+    </div>
+  )
+}

src/SortContext.tsx

@@ -21,7 +21,7 @@ const SortContext = createContext<Sort | undefined>(undefined)
 
 export function SortProvider({children}: PropsWithChildren) {
   const [sortOption, setSortOption] = useState<SortOption>('dmcCode')
-  const contextProps = useMemo(() => ({sortOption, setSortOption}), [sortOption, setSortOption])
+  const contextProps = useMemo(() => ({sortOption, setSortOption}), [sortOption])
   return <SortContext.Provider value={contextProps}>{children}</SortContext.Provider>
 }