Show Cosmo/DMC conversion in table

Author: cheshire137

src/ColorsContext.tsx

@@ -3,6 +3,7 @@ import {useRequireAnchor} from './RequireAnchorContext'
 import {useRequireJpCoats} from './RequireJpCoatsContext'
 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'
 import {colorCompareFunction, normalizeDmcCode} from './utils'
 import type {EmbroideryFlossColor} from './types'
 import {useSort} from './SortContext'
@@ -13,7 +14,7 @@ interface Colors {
 
 const ColorsContext = createContext<Colors | undefined>(undefined)
 
-export const ColorsProvider = ({children}: PropsWithChildren) => {
+export function ColorsProvider({children}: PropsWithChildren) {
   const {requireAnchor} = useRequireAnchor()
   const {requireJpCoats} = useRequireJpCoats()
   const {sortOption} = useSort()
@@ -28,8 +29,14 @@ export const ColorsProvider = ({children}: PropsWithChildren) => {
         result[key] = {...result[key], ...data}
       }
     })
+    dmcCosmoColors.forEach(data => {
+      const key = normalizeDmcCode(data.dmcCode)
+      if (result[key]) {
+        result[key] = {...result[key], ...data}
+      }
+    })
     return result
-  }, [dmcNamedColorCodes, dmcNewJpCoatsColors])
+  }, [])
   const colors = useMemo<EmbroideryFlossColor[]>(
     () => Object.values(dataByDmcCode),
     [dataByDmcCode]
@@ -59,7 +66,7 @@ export const ColorsProvider = ({children}: PropsWithChildren) => {
   )
 }
 
-export const useColors = () => {
+export function useColors() {
   const context = useContext(ColorsContext)
   if (context === undefined) {
     throw new Error('useColors must be used within a ColorsProvider')

src/SortContext.tsx

@@ -9,13 +9,15 @@ import type {SortOption} from './types'
 
 export const sortOptions: SortOption[] = [
   'anchor',
+  'cosmo',
   'dmcCode',
   'dmcName',
   'jpcNew',
   'jpcOld',
 ]
 
 export const sortLabels: Record<SortOption, string> = {
+  cosmo: 'Cosmo code',
   dmcCode: 'DMC code',
   dmcName: 'DMC name',
   jpcOld: 'J&P Coats code (old)',
@@ -30,7 +32,7 @@ interface Sort {
 
 const SortContext = createContext<Sort | undefined>(undefined)
 
-export const SortProvider = ({children}: PropsWithChildren) => {
+export function SortProvider({children}: PropsWithChildren) {
   const [sortOption, setSortOption] = useState<SortOption>('dmcCode')
   const contextProps = useMemo(
     () => ({sortOption, setSortOption}),
@@ -41,7 +43,7 @@ export const SortProvider = ({children}: PropsWithChildren) => {
   )
 }
 
-export const useSort = () => {
+export function useSort() {
   const context = useContext(SortContext)
   if (context === undefined)
     throw new Error('useSort must be used within a SortProvider')

src/Table.tsx

@@ -49,6 +49,7 @@ export const Table = ({colors}: TableProps) => {
             J&P Coats
           </Box>
           <th rowSpan={2}>Anchor</th>
+          <th rowSpan={2}>Cosmo</th>
         </tr>
         <tr>
           <Box as="th" sx={{textAlign: 'left'}}>

src/TableRow.tsx

@@ -27,6 +27,7 @@ const emptyCellContent = (
 )
 
 export const TableRow = ({
+  cosmoCode,
   dmcCode,
   dmcName,
   isOdd,
@@ -78,6 +79,7 @@ export const TableRow = ({
         {jpCoatsNew ? jpCoatsNew : emptyCellContent}
       </Box>
       <Box as="td" sx={codeCellStyles}>{anchorCode ? anchorCode : emptyCellContent}</Box>
+      <Box as="td" sx={codeCellStyles}>{cosmoCode ? cosmoCode : emptyCellContent}</Box>
     </Box>
   )
 }

src/types.ts

@@ -5,6 +5,7 @@ export interface EmbroideryFlossColor {
   jpCoatsOld?: string
   jpCoatsNew?: string
   anchorCode?: string
+  cosmoCode?: string
 }
 
-export type SortOption = 'dmcCode' | 'dmcName' | 'jpcOld' | 'anchor' | 'jpcNew'
+export type SortOption = 'dmcCode' | 'dmcName' | 'jpcOld' | 'anchor' | 'jpcNew' | 'cosmo'

src/utils.ts

@@ -42,6 +42,13 @@ const numericishStringCompare = (
   return a.localeCompare(b)
 }
 
+function cosmoCodeCompare(
+  {cosmoCode: cosmoCode1}: EmbroideryFlossColor,
+  {cosmoCode: cosmoCode2}: EmbroideryFlossColor
+) {
+  return numericishStringCompare(cosmoCode1, cosmoCode2)
+}
+
 const dmcCodeCompare = (
   {dmcCode: dmcCode1}: EmbroideryFlossColor,
   {dmcCode: dmcCode2}: EmbroideryFlossColor
@@ -84,5 +91,6 @@ export const colorCompareFunction = (sortOption: SortOption) => {
   if (sortOption === 'jpcOld') return jpCoatsOldCompare
   if (sortOption === 'anchor') return anchorCodeCompare
   if (sortOption === 'jpcNew') return jpCoatsNewCompare
+  if (sortOption === 'cosmo') return cosmoCodeCompare
   return dmcCodeCompare
 }