feat(colors): add typings for color schemes and interpolators

packages/colors/package.json

@@ -20,16 +20,20 @@
     "dist/"
   ],
   "dependencies": {
-    "d3-color": "^1.2.3",
+    "d3-color": "^2.0.0",
     "d3-scale": "^3.0.0",
-    "d3-scale-chromatic": "^1.3.3",
+    "d3-scale-chromatic": "^2.0.0",
     "lodash.get": "^4.4.2",
     "lodash.isplainobject": "^4.0.6",
     "react-motion": "^0.5.2"
   },
+  "devDependencies": {
+    "@types/d3-color": "^2.0.0",
+    "@types/d3-scale-chromatic": "^2.0.0"
+  },
   "peerDependencies": {
     "prop-types": ">= 15.5.10 < 16.0.0",
-    "react": ">= 16.8.4 < 17.0.0"
+    "react": ">= 16.8.4 <= 17.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/colors/src/schemes/all.ts

@@ -0,0 +1,35 @@
+import {
+    categoricalColorSchemes,
+    categoricalColorSchemeIds,
+    CategoricalColorSchemeId,
+} from './categorical'
+import { divergingColorSchemes, divergingColorSchemeIds, DivergingColorSchemeId } from './diverging'
+import {
+    sequentialColorSchemes,
+    sequentialColorSchemeIds,
+    SequentialColorSchemeId,
+} from './sequential'
+
+export const colorSchemes = {
+    ...categoricalColorSchemes,
+    ...divergingColorSchemes,
+    ...sequentialColorSchemes,
+}
+
+export type ColorSchemeId =
+    | CategoricalColorSchemeId
+    | DivergingColorSchemeId
+    | SequentialColorSchemeId
+
+export const colorSchemeIds = Object.keys(colorSchemes) as ColorSchemeId[]
+
+export const isCategoricalColorScheme = (
+    scheme: ColorSchemeId
+): scheme is CategoricalColorSchemeId =>
+    categoricalColorSchemeIds.includes(scheme as CategoricalColorSchemeId)
+
+export const isDivergingColorScheme = (scheme: ColorSchemeId): scheme is DivergingColorSchemeId =>
+    divergingColorSchemeIds.includes(scheme as DivergingColorSchemeId)
+
+export const isSequentialColorScheme = (scheme: ColorSchemeId): scheme is SequentialColorSchemeId =>
+    sequentialColorSchemeIds.includes(scheme as SequentialColorSchemeId)

packages/colors/src/schemes/categorical.ts

@@ -0,0 +1,30 @@
+import {
+    schemeCategory10,
+    schemeAccent,
+    schemeDark2,
+    schemePaired,
+    schemePastel1,
+    schemePastel2,
+    schemeSet1,
+    schemeSet2,
+    schemeSet3,
+} from 'd3-scale-chromatic'
+
+export const categoricalColorSchemes = {
+    nivo: ['#e8c1a0', '#f47560', '#f1e15b', '#e8a838', '#61cdbb', '#97e3d5'],
+    category10: schemeCategory10,
+    accent: schemeAccent,
+    dark2: schemeDark2,
+    paired: schemePaired,
+    pastel1: schemePastel1,
+    pastel2: schemePastel2,
+    set1: schemeSet1,
+    set2: schemeSet2,
+    set3: schemeSet3,
+}
+
+export type CategoricalColorSchemeId = keyof typeof categoricalColorSchemes
+
+export const categoricalColorSchemeIds = Object.keys(
+    categoricalColorSchemes
+) as CategoricalColorSchemeId[]

packages/colors/src/schemes/cyclical.ts

@@ -0,0 +1,8 @@
+import { interpolateRainbow, interpolateSinebow } from 'd3-scale-chromatic'
+
+export const cyclicalColorInterpolators = {
+    rainbow: interpolateRainbow,
+    sinebow: interpolateSinebow,
+}
+
+export type CyclicalColorInterpolatorId = keyof typeof cyclicalColorInterpolators

packages/colors/src/schemes/diverging.ts

@@ -0,0 +1,53 @@
+import {
+    schemeBrBG,
+    interpolateBrBG,
+    schemePRGn,
+    interpolatePRGn,
+    schemePiYG,
+    interpolatePiYG,
+    schemePuOr,
+    interpolatePuOr,
+    schemeRdBu,
+    interpolateRdBu,
+    schemeRdGy,
+    interpolateRdGy,
+    schemeRdYlBu,
+    interpolateRdYlBu,
+    schemeRdYlGn,
+    interpolateRdYlGn,
+    schemeSpectral,
+    interpolateSpectral,
+} from 'd3-scale-chromatic'
+
+// Diverging color schemes support a size k ranging from 3 to 11
+export const divergingColorSchemes = {
+    brown_blueGreen: schemeBrBG,
+    purpleRed_green: schemePRGn,
+    pink_yellowGreen: schemePiYG,
+    purple_orange: schemePuOr,
+    red_blue: schemeRdBu,
+    red_grey: schemeRdGy,
+    red_yellow_blue: schemeRdYlBu,
+    red_yellow_green: schemeRdYlGn,
+    spectral: schemeSpectral,
+}
+
+export type DivergingColorSchemeId = keyof typeof divergingColorSchemes
+
+export const divergingColorSchemeIds = Object.keys(
+    divergingColorSchemes
+) as DivergingColorSchemeId[]
+
+export const divergingColorInterpolators = {
+    brown_blueGreen: interpolateBrBG,
+    purpleRed_green: interpolatePRGn,
+    pink_yellowGreen: interpolatePiYG,
+    purple_orange: interpolatePuOr,
+    red_blue: interpolateRdBu,
+    red_grey: interpolateRdGy,
+    red_yellow_blue: interpolateRdYlBu,
+    red_yellow_green: interpolateRdYlGn,
+    spectral: interpolateSpectral,
+}
+
+export type DivergingColorInterpolatorId = keyof typeof divergingColorInterpolators

packages/colors/src/schemes/index.ts

@@ -0,0 +1,6 @@
+export * from './all'
+export * from './categorical'
+export * from './cyclical'
+export * from './diverging'
+export * from './interpolators'
+export * from './sequential'

packages/colors/src/schemes/interpolators.ts

@@ -0,0 +1,16 @@
+import { divergingColorInterpolators, DivergingColorInterpolatorId } from './diverging'
+import { sequentialColorInterpolators, SequentialColorInterpolatorId } from './sequential'
+import { cyclicalColorInterpolators, CyclicalColorInterpolatorId } from './cyclical'
+
+export const colorInterpolators = {
+    ...divergingColorInterpolators,
+    ...sequentialColorInterpolators,
+    ...cyclicalColorInterpolators,
+}
+
+export type ColorInterpolatorId =
+    | DivergingColorInterpolatorId
+    | SequentialColorInterpolatorId
+    | CyclicalColorInterpolatorId
+
+export const colorInterpolatorIds = Object.keys(colorInterpolators) as ColorInterpolatorId[]