feat(website): improve color scheme controls

website/src/components/controls/ControlsGroup.tsx

@@ -26,9 +26,10 @@ import {
 } from './specialized'
 import {
     BlendModeControl,
+    BulletColorsControl,
+    ColorInterpolatorsControl,
     ContinuousColorsControl,
     ColorPickerControl,
-    ColorsControl,
     OrdinalColorsControl,
     OpacityControl,
     InheritedColorControl,
@@ -217,20 +218,6 @@ const ControlSwitcher = memo(
                     />
                 )
 
-            case 'colors':
-                return (
-                    <ColorsControl
-                        id={id}
-                        property={property}
-                        flavors={flavors}
-                        currentFlavor={currentFlavor}
-                        config={controlConfig}
-                        value={value}
-                        context={context}
-                        onChange={handleChange}
-                    />
-                )
-
             case 'inheritedColor':
                 return (
                     <InheritedColorControl
@@ -441,6 +428,34 @@ const ControlSwitcher = memo(
                     />
                 )
 
+            case 'color_interpolators':
+                return (
+                    <ColorInterpolatorsControl
+                        id={id}
+                        property={property}
+                        flavors={flavors}
+                        currentFlavor={currentFlavor}
+                        config={controlConfig}
+                        value={value}
+                        context={context}
+                        onChange={handleChange}
+                    />
+                )
+
+            case 'bullet_colors':
+                return (
+                    <BulletColorsControl
+                        id={id}
+                        property={property}
+                        flavors={flavors}
+                        currentFlavor={currentFlavor}
+                        config={controlConfig}
+                        value={value}
+                        context={context}
+                        onChange={handleChange}
+                    />
+                )
+
             default:
                 throw new Error(
                     `invalid control type: ${controlConfig!.type} for property: ${property.name}`

website/src/components/controls/colors/BulletColorsControl.tsx

@@ -0,0 +1,59 @@
+import React, { useCallback } from 'react'
+import { ChartProperty, Flavor } from '../../../types'
+import { ControlContext, BulletColorsControlConfig } from '../types'
+import { Control, PropertyHeader, Help, Select } from '../ui'
+import {
+    ColorSchemeSelectOption,
+    ColorSchemeSelectValue,
+    useBulletColors,
+} from './colorSchemeSelect'
+
+interface QuantizeColorsControlProps {
+    id: string
+    property: ChartProperty
+    flavors: Flavor[]
+    currentFlavor: Flavor
+    config: BulletColorsControlConfig
+    onChange: (value: string) => void
+    value: string
+    context?: ControlContext
+}
+
+export const BulletColorsControl = ({
+    id,
+    property,
+    flavors,
+    currentFlavor,
+    value: _value,
+    onChange,
+    context,
+}: QuantizeColorsControlProps) => {
+    const options = useBulletColors()
+
+    const handleChange = useCallback(value => onChange(value.value), [onChange])
+    const value = options.find(({ value: v }) => v === _value)
+
+    return (
+        <Control
+            id={id}
+            description={property.description}
+            flavors={flavors}
+            currentFlavor={currentFlavor}
+            supportedFlavors={property.flavors}
+        >
+            <PropertyHeader {...property} context={context} />
+            <Select
+                options={options}
+                onChange={handleChange}
+                value={value}
+                isSearchable
+                clearable={false}
+                components={{
+                    SingleValue: ColorSchemeSelectValue,
+                    Option: ColorSchemeSelectOption,
+                }}
+            />
+            <Help>{property.help}</Help>
+        </Control>
+    )
+}

website/src/components/controls/colors/ColorInterpolatorsControl.tsx

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react'
+// @ts-ignore
+import { components } from 'react-select'
+import { ColorInterpolatorId } from '@nivo/colors'
+import { ChartProperty, Flavor } from '../../../types'
+import { ControlContext, ColorInterpolatorsControlConfig } from '../types'
+import { Control, PropertyHeader, Help, Select } from '../ui'
+import {
+    ColorSchemeSelectOption,
+    ColorSchemeSelectValue,
+    useColorInterpolators,
+} from './colorSchemeSelect'
+
+interface OrdinalColorsControlProps {
+    id: string
+    property: ChartProperty
+    flavors: Flavor[]
+    currentFlavor: Flavor
+    config: ColorInterpolatorsControlConfig
+    value: ColorInterpolatorId
+    onChange: (value: ColorInterpolatorId) => void
+    context?: ControlContext
+}
+
+export const ColorInterpolatorsControl = ({
+    id,
+    property,
+    flavors,
+    currentFlavor,
+    value: _value,
+    onChange,
+    context,
+}: OrdinalColorsControlProps) => {
+    const options = useColorInterpolators()
+
+    const handleChange = useCallback(value => onChange(value.value), [onChange])
+    const value = options.find(({ value: v }) => v === _value)
+
+    return (
+        <Control
+            id={id}
+            description={property.description}
+            flavors={flavors}
+            currentFlavor={currentFlavor}
+            supportedFlavors={property.flavors}
+        >
+            <PropertyHeader {...property} context={context} />
+            <Select
+                options={options}
+                onChange={handleChange}
+                value={value}
+                isSearchable
+                clearable={false}
+                components={{
+                    SingleValue: ColorSchemeSelectValue,
+                    Option: ColorSchemeSelectOption,
+                }}
+            />
+            <Help>{property.help}</Help>
+        </Control>
+    )
+}

website/src/components/controls/colors/ColorsControlItem.tsx

@@ -4,8 +4,8 @@ import styled from 'styled-components'
 export const ColorsControlItem = ({ id, colors }: { id: string; colors: string[] }) => (
     <Container>
         <Name>{id}</Name>
-        {colors.map(color => (
-            <Sample key={color} style={{ background: color }} />
+        {colors.map((color, index) => (
+            <Swatch key={`${color}.${index}`} style={{ background: color }} />
         ))}
     </Container>
 )
@@ -19,11 +19,12 @@ const Name = styled.span`
     font-weight: 500;
     font-size: 0.8rem;
     margin-right: 14px;
-    width: 160px;
+    width: 260px;
+    white-space: nowrap;
 `
 
-const Sample = styled.div`
+const Swatch = styled.div`
     display: block;
-    width: 12px;
-    height: 12px;
+    width: 10px;
+    height: 10px;
 `

website/src/components/controls/colors/ContinuousColorsControl.tsx

@@ -2,16 +2,12 @@ import React, { useCallback, useState, useMemo } from 'react'
 import { upperFirst } from 'lodash'
 import {
     ContinuousColorScaleConfig,
-    sequentialColorSchemeIds,
-    ColorInterpolatorId,
-    divergingColorSchemeIds,
     divergingColorScaleDefaults,
     quantizeColorScaleDefaults,
 } from '@nivo/colors'
 import { ChartProperty, Flavor } from '../../../types'
 import { ContinuousColorsControlConfig, ControlContext, ObjectControlConfig } from '../types'
 import { ObjectControl } from '../generics'
-import { humanizeColorSchemeId } from './humanizeColorSchemeId'
 
 interface ContinuousColorsControlProps {
     id: string
@@ -30,37 +26,20 @@ const scaleTypeChoices = scaleTypes.map(type => ({
     value: type,
 }))
 
-const schemeChoices: {
-    label: string
-    value: ColorInterpolatorId
-}[] = []
-sequentialColorSchemeIds.forEach(schemeId => {
-    schemeChoices.push({
-        label: `Sequential: ${humanizeColorSchemeId(schemeId)}`,
-        value: schemeId,
-    })
-})
-divergingColorSchemeIds.forEach(schemeId => {
-    schemeChoices.push({
-        label: `Diverging: ${humanizeColorSchemeId(schemeId)}`,
-        value: schemeId,
-    })
-})
-
 const helpByType: Record<ContinuousColorScaleConfig['type'], string> = {
     sequential: `
-    The sequential color scale maps colors linearly from min to max value.
+    The \`sequential\` color scale maps colors linearly from min to max value.
     It is intended to be used with a sequential color scheme, 
     but also supports others.
     `,
     diverging: `
-    The diverging color scale maps colors from min to max value,
+    The \`diverging\` color scale maps colors from min to max value,
     with a diverging point which can be configured via \`divergeAt\`.
     It is intended to be used with a diverging color scheme, 
     but also supports others.
     `,
     quantize: `
-    The quantize color scale maps colors from min to max value
+    The \`quantize\` color scale maps colors from min to max value
     to a discrete color range, dividing the domain into uniform segments.
     You can either use a predefined color scheme or pass a
     custom array of colors.
@@ -98,16 +77,16 @@ export const ContinuousColorsControl = ({
                         required: true,
                         help: helpByType[value.type],
                         control: {
-                            type: 'choices',
+                            type: 'radio',
+                            columns: 3,
                             choices: scaleTypeChoices,
                         },
                     },
                     {
                         key: 'scheme',
                         type: 'string',
                         control: {
-                            type: 'choices',
-                            choices: schemeChoices,
+                            type: 'color_interpolators',
                         },
                     },
                     {