feat(website): improve and reorganize controls

plouc · Jan 12, 2022 · 3b43320 · 3b43320
1 parent 806da06
commit 3b43320
Show file tree

Hide file tree

Showing 46 changed files with 521 additions and 258 deletions.
diff --git a/website/src/components/ThemeSelector.tsx b/website/src/components/ThemeSelector.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react'
 import styled, { useTheme } from 'styled-components'
 import { useSetTheme } from '../theming/SwitchableThemeProvider'
-import { Switch } from './controls/Switch'
+import { Switch } from './controls/ui'
 
 const ThemeSelector = () => {
     const theme = useTheme()

diff --git a/website/src/components/controls/ControlsGroup.tsx b/website/src/components/controls/ControlsGroup.tsx
@@ -1,31 +1,39 @@
 import React, { memo, useCallback } from 'react'
 import get from 'lodash/get'
 import snakeCase from 'lodash/snakeCase'
-import { ArrayControl } from './ArrayControl'
-import { ObjectControl } from './ObjectControl'
-import { SwitchControl } from './SwitchControl'
-import { SwitchableRangeControl } from './SwitchableRangeControl'
-import { ColorsControl } from './ColorsControl'
-import { QuantizeColorsControl } from './QuantizeColorsControl'
-import { ColorPickerControl } from './ColorPickerControl'
-import { TextControl } from './TextControl'
-import { RadioControl } from './RadioControl'
-import { RangeControl } from './RangeControl'
-import { ChoicesControl } from './ChoicesControl'
-import { BoxAnchorControl } from './BoxAnchorControl'
-import { MarginControl } from './MarginControl'
-import { OpacityControl } from './OpacityControl'
-import { LineWidthControl } from './LineWidthControl'
-import { MotionConfigControl } from './MotionConfigControl'
-import { NumberArrayControl } from './NumberArrayControl'
-import { AngleControl } from './AngleControl'
-import { OrdinalColorsControl } from './OrdinalColorsControl'
-import { InheritedColorControl } from './InheritedColorControl'
-import { BlendModeControl } from './BlendModeControl'
-import PropertyDocumentation from './PropertyDocumentation'
-import { ValueFormatControl } from './ValueFormatControl'
-import { AnnotationsControl } from './AnnotationsControl'
 import { ChartProperty, Flavor } from '../../types'
+import { ControlContext } from './types'
+import {
+    ArrayControl,
+    ObjectControl,
+    SwitchControl,
+    SwitchableRangeControl,
+    TextControl,
+    RadioControl,
+    RangeControl,
+    ChoicesControl,
+    NumberArrayControl,
+    PropertyDocumentation,
+} from './generics'
+import {
+    BoxAnchorControl,
+    MarginControl,
+    LineWidthControl,
+    MotionConfigControl,
+    AngleControl,
+    ValueFormatControl,
+    AnnotationsControl,
+} from './specialized'
+import {
+    BlendModeControl,
+    ContinuousColorsControl,
+    ColorPickerControl,
+    ColorsControl,
+    OrdinalColorsControl,
+    OpacityControl,
+    InheritedColorControl,
+    QuantizeColorsControl,
+} from './colors'
 
 export const shouldRenderProperty = (property: ChartProperty, currentSettings: any) => {
     if (typeof property.when !== 'function') return true
@@ -39,7 +47,7 @@ interface ControlSwitcherProps {
     currentFlavor: Flavor
     settings: any
     onChange: any
-    context: any
+    context?: ControlContext
 }
 
 const ControlSwitcher = memo(
@@ -88,6 +96,7 @@ const ControlSwitcher = memo(
                     property={property}
                     flavors={flavors}
                     currentFlavor={currentFlavor}
+                    context={context}
                 />
             )
         }
@@ -175,6 +184,7 @@ const ControlSwitcher = memo(
                         flavors={flavors}
                         currentFlavor={currentFlavor}
                         value={value}
+                        context={context}
                         onChange={handleChange}
                     />
                 )
@@ -417,6 +427,20 @@ const ControlSwitcher = memo(
                     />
                 )
 
+            case 'continuous_colors':
+                return (
+                    <ContinuousColorsControl
+                        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}`
@@ -432,7 +456,7 @@ interface ControlsGroupProps {
     controls: ChartProperty[]
     settings: any
     onChange: any
-    context?: any
+    context?: ControlContext
 }
 
 export const ControlsGroup = ({
@@ -445,9 +469,9 @@ export const ControlsGroup = ({
     context,
 }: ControlsGroupProps) => (
     <>
-        {controls.map(control => (
+        {controls.map((control, index) => (
             <ControlSwitcher
-                key={control.name}
+                key={`${control.name}.${index}`}
                 groupName={name}
                 flavors={flavors}
                 currentFlavor={currentFlavor}

diff --git a/.../components/controls/BlendModeControl.tsx → ...ents/controls/colors/BlendModeControl.tsx b/.../components/controls/BlendModeControl.tsx → ...ents/controls/colors/BlendModeControl.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 // @ts-ignore
-import { blendModes } from '@nivo/core'
-import { ChoicesControl } from './ChoicesControl'
-import { BlendModeControlConfig } from './types'
-import { ChartProperty, Flavor } from '../../types'
+import { blendModes, CssMixBlendMode } from '@nivo/core'
+import { ChartProperty, Flavor } from '../../../types'
+import { BlendModeControlConfig, ControlContext } from '../types'
+import { ChoicesControl } from '../generics'
 
 const choices = blendModes.map((mode: string) => ({
     label: mode,
@@ -16,9 +16,9 @@ interface BlendModeControlProps {
     flavors: Flavor[]
     currentFlavor: Flavor
     config: BlendModeControlConfig
-    value: string
-    onChange: (value: string) => void
-    context?: any
+    value: CssMixBlendMode
+    onChange: (blendMode: CssMixBlendMode) => void
+    context?: ControlContext
 }
 
 export const BlendModeControl = ({ config, ...props }: BlendModeControlProps) => (

diff --git a/...omponents/controls/ColorPickerControl.tsx → ...ts/controls/colors/ColorPickerControl.tsx b/...omponents/controls/ColorPickerControl.tsx → ...ts/controls/colors/ColorPickerControl.tsx
@@ -1,9 +1,7 @@
 import React, { useCallback } from 'react'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { Help } from './Help'
-import { Flavor } from '../../types'
-import { ColorPickerControlConfig } from './types'
+import { Flavor } from '../../../types'
+import { ColorPickerControlConfig, ControlContext } from '../types'
+import { Control, PropertyHeader, Help } from '../ui'
 
 interface ColorPickerControlProps {
     id: string
@@ -13,7 +11,7 @@ interface ColorPickerControlProps {
     config: ColorPickerControlConfig
     value: string
     onChange: (value: string) => void
-    context: any
+    context?: ControlContext
 }
 
 export const ColorPickerControl = ({

diff --git a/...src/components/controls/ColorsControl.tsx → ...ponents/controls/colors/ColorsControl.tsx b/...src/components/controls/ColorsControl.tsx → ...ponents/controls/colors/ColorsControl.tsx
@@ -8,13 +8,10 @@ import {
 } from '@nivo/colors'
 // @ts-ignore
 import { components } from 'react-select'
+import { ChartProperty, Flavor } from '../../../types'
+import { ColorsControlConfig, ControlContext } from '../types'
+import { Control, PropertyHeader, Help, Select } from '../ui'
 import { ColorsControlItem } from './ColorsControlItem'
-import { Control } from './Control'
-import { PropertyHeader } from './PropertyHeader'
-import { Help } from './Help'
-import Select from './Select'
-import { ChartProperty, Flavor } from '../../types'
-import { ColorsControlConfig } from './types'
 
 const colors = colorSchemeIds.map(id => ({
     id,
@@ -46,7 +43,7 @@ interface ColorsControlProps {
     onChange: any
     value: string
     config: ColorsControlConfig
-    context?: any
+    context?: ControlContext
 }
 
 export const ColorsControl = ({

diff --git a/...components/controls/ColorsControlItem.tsx → ...nts/controls/colors/ColorsControlItem.tsx b/...components/controls/ColorsControlItem.tsx → ...nts/controls/colors/ColorsControlItem.tsx
@@ -19,7 +19,7 @@ const Name = styled.span`
     font-weight: 500;
     font-size: 0.8rem;
     margin-right: 14px;
-    width: 130px;
+    width: 160px;
 `
 
 const Sample = styled.div`