feat(website): add theme property documentation to all components

website/src/data/components/area-bump/props.js

@@ -8,6 +8,7 @@
  */
 import { AreaBumpDefaultProps as defaults } from '@nivo/bump'
 import {
+    themeProperty,
     axesProperties,
     defsProperties,
     groupProperties,
@@ -137,6 +138,7 @@ const props = [
             step: 0.05,
         },
     },
+    themeProperty,
     {
         key: 'colors',
         group: 'Style',

website/src/data/components/bar/props.js

@@ -8,6 +8,7 @@
  */
 import { BarDefaultProps as defaults } from '@nivo/bar'
 import {
+    themeProperty,
     axesProperties,
     motionProperties,
     defsProperties,
@@ -214,6 +215,7 @@ const props = [
         controlType: 'margin',
         group: 'Base',
     },
+    themeProperty,
     {
         key: 'colors',
         help: 'Defines color range.',

website/src/data/components/bubble/props.js

@@ -7,7 +7,12 @@
  * file that was distributed with this source code.
  */
 import { BubbleDefaultProps as defaults } from '@nivo/circle-packing'
-import { motionProperties, defsProperties, groupProperties } from '../../../lib/componentProperties'
+import {
+    themeProperty,
+    motionProperties,
+    defsProperties,
+    groupProperties,
+} from '../../../lib/componentProperties'
 
 const props = [
     {
@@ -133,6 +138,7 @@ const props = [
             max: 32,
         },
     },
+    themeProperty,
     {
         key: 'colors',
         help: 'Defines how to compute node color.',

website/src/data/components/bullet/props.js

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import { BulletDefaultProps as defaults } from '@nivo/bullet'
-import { motionProperties, groupProperties } from '../../../lib/componentProperties'
+import { themeProperty, motionProperties, groupProperties } from '../../../lib/componentProperties'
 
 const props = [
     {
@@ -146,6 +146,7 @@ const props = [
             step: 0.05,
         },
     },
+    themeProperty,
     {
         key: 'rangeComponent',
         flavors: ['svg'],

website/src/data/components/bump/props.js

@@ -7,7 +7,12 @@
  * file that was distributed with this source code.
  */
 import { BumpDefaultProps as defaults } from '@nivo/bump'
-import { motionProperties, axesProperties, groupProperties } from '../../../lib/componentProperties'
+import {
+    themeProperty,
+    motionProperties,
+    axesProperties,
+    groupProperties,
+} from '../../../lib/componentProperties'
 
 const props = [
     {
@@ -134,6 +139,7 @@ const props = [
             step: 0.05,
         },
     },
+    themeProperty,
     {
         key: 'colors',
         help: 'Defines color range.',

website/src/data/components/calendar/props.js

@@ -8,7 +8,7 @@
  */
 import { boxAlignments } from '@nivo/core'
 import { CalendarDefaultProps as defaults } from '@nivo/calendar'
-import { groupProperties } from '../../../lib/componentProperties'
+import { themeProperty, groupProperties } from '../../../lib/componentProperties'
 
 const props = [
     {
@@ -161,10 +161,10 @@ const props = [
             max: 600,
         },
     },
+    themeProperty,
     {
         key: 'colors',
-        help: 'Chart colors.',
-        group: 'Base',
+        group: 'Style',
         help: 'Cell colors.',
         description: `
             An array of colors to be used in conjunction with
@@ -183,7 +183,7 @@ const props = [
         required: false,
         defaultValue: defaults.emptyColor,
         controlType: 'colorPicker',
-        group: 'Base',
+        group: 'Style',
     },
     {
         key: 'pixelRatio',

website/src/data/components/chord/props.js

@@ -8,6 +8,7 @@
  */
 import { ChordDefaultProps as defaults } from '@nivo/chord'
 import {
+    themeProperty,
     motionProperties,
     groupProperties,
     getLegendsProps,
@@ -166,6 +167,7 @@ const props = [
             step: 0.01,
         },
     },
+    themeProperty,
     {
         key: 'colors',
         help: 'Defines how to compute arc/ribbon color.',
@@ -284,7 +286,6 @@ const props = [
     },
     {
         key: 'labelTextColor',
-        help: 'Labels color.',
         description: `
             How to compute label text color,
             [see dedicated documentation](self:/guides/colors).

website/src/data/components/choropleth/props.js

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import { GeoMapDefaultProps, ChoroplethDefaultProps } from '@nivo/geo'
-import { getLegendsProps, groupProperties } from '../../../lib/componentProperties'
+import { themeProperty, getLegendsProps, groupProperties } from '../../../lib/componentProperties'
 import { props as geoProps } from '../geo/props'
 
 const props = [

website/src/data/components/funnel/props.js

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import { FunnelDefaultProps as defaults } from '@nivo/funnel'
-import { groupProperties, motionProperties } from '../../../lib/componentProperties'
+import { themeProperty, groupProperties, motionProperties } from '../../../lib/componentProperties'
 
 const props = [
     {
@@ -103,6 +103,7 @@ const props = [
         controlType: 'valueFormat',
         group: 'Base',
     },
+    themeProperty,
     {
         key: 'colors',
         help: 'Defines how to compute parts color.',

website/src/data/components/geo/props.js

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import { GeoMapDefaultProps } from '@nivo/geo'
-import { defsProperties } from '../../../lib/componentProperties'
+import { themeProperty, defsProperties } from '../../../lib/componentProperties'
 
 export const props = [
     {
@@ -145,6 +145,7 @@ export const props = [
             ],
         },
     },
+    themeProperty,
     {
         key: 'borderWidth',
         help: 'Control border width.',

website/src/data/components/heatmap/props.js

@@ -7,7 +7,12 @@
  * file that was distributed with this source code.
  */
 import { HeatMapDefaultProps as defaults } from '@nivo/heatmap'
-import { axesProperties, motionProperties, groupProperties } from '../../../lib/componentProperties'
+import {
+    themeProperty,
+    axesProperties,
+    motionProperties,
+    groupProperties,
+} from '../../../lib/componentProperties'
 
 const props = [
     {
@@ -181,6 +186,7 @@ const props = [
         controlType: 'margin',
         group: 'Base',
     },
+    themeProperty,
     {
         key: 'cellShape',
         help: `Cell shape/component.`,

website/src/data/components/line/props.js

@@ -9,6 +9,7 @@
 import { lineCurvePropKeys, DotsItemDefaultProps as dotDefaults } from '@nivo/core'
 import { LineDefaultProps as defaults } from '@nivo/line'
 import {
+    themeProperty,
     axesProperties,
     motionProperties,
     getLegendsProps,
@@ -209,6 +210,7 @@ const props = [
             })),
         },
     },
+    themeProperty,
     {
         key: 'colors',
         help: 'Defines color range.',
@@ -362,7 +364,6 @@ const props = [
         required: false,
         defaultValue: defaults.enablePointLabel,
         controlType: 'switch',
-        group: 'Points',
     },
     {
         key: 'pointLabel',

website/src/data/components/parallel-coordinates/props.js

@@ -8,7 +8,7 @@
  */
 import { lineCurvePropKeys } from '@nivo/core'
 import { commonDefaultProps as defaults } from '@nivo/parallel-coordinates'
-import { motionProperties, groupProperties } from '../../../lib/componentProperties'
+import { themeProperty, motionProperties, groupProperties } from '../../../lib/componentProperties'
 
 const props = [
     {
@@ -218,6 +218,7 @@ const props = [
         controlType: 'margin',
         group: 'Base',
     },
+    themeProperty,
     {
         key: 'colors',
         help: 'Defines color range.',

website/src/data/components/pie/props.js

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import { PieDefaultProps as defaults } from '@nivo/pie'
-import { defsProperties, groupProperties } from '../../../lib/componentProperties'
+import { themeProperty, defsProperties, groupProperties } from '../../../lib/componentProperties'
 
 const props = [
     {
@@ -178,6 +178,7 @@ const props = [
         controlType: 'margin',
         group: 'Base',
     },
+    themeProperty,
     {
         key: 'colors',
         help: 'Defines color range.',

website/src/data/components/radar/props.js

@@ -8,7 +8,7 @@
  */
 import { closedCurvePropKeys, DotsItemDefaultProps as dotDefaults } from '@nivo/core'
 import { RadarDefaultProps as defaults, RadarDots } from '@nivo/radar'
-import { motionProperties, groupProperties } from '../../../lib/componentProperties'
+import { themeProperty, motionProperties, groupProperties } from '../../../lib/componentProperties'
 
 const dotsDefaults = RadarDots.defaultProps
 
@@ -149,6 +149,7 @@ const props = [
         controlType: 'margin',
         group: 'Base',
     },
+    themeProperty,
     {
         key: 'colors',
         help: 'Defines how to compute slice color.',

website/src/data/components/sankey/props.js

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import { SankeyDefaultProps as defaults, sankeyAlignmentPropKeys } from '@nivo/sankey'
-import { motionProperties, groupProperties } from '../../../lib/componentProperties'
+import { themeProperty, motionProperties, groupProperties } from '../../../lib/componentProperties'
 
 const props = [
     {
@@ -97,15 +97,6 @@ const props = [
             })),
         },
     },
-    {
-        key: 'colors',
-        help: 'Defines how to compute nodes color.',
-        type: 'string | Function | string[]',
-        required: false,
-        defaultValue: defaults.colors,
-        controlType: 'ordinalColors',
-        group: 'Base',
-    },
     {
         key: 'width',
         enableControlForFlavors: ['api'],
@@ -152,6 +143,16 @@ const props = [
         controlType: 'margin',
         group: 'Base',
     },
+    themeProperty,
+    {
+        key: 'colors',
+        help: 'Defines how to compute nodes color.',
+        type: 'string | Function | string[]',
+        required: false,
+        defaultValue: defaults.colors,
+        controlType: 'ordinalColors',
+        group: 'Style',
+    },
     {
         key: 'nodeThickness',
         help: 'Node thickness.',

website/src/data/components/scatterplot/props.js

@@ -8,6 +8,7 @@
  */
 import { ScatterPlotDefaultProps as defaults } from '@nivo/scatterplot'
 import {
+    themeProperty,
     axesProperties,
     motionProperties,
     getLegendsProps,
@@ -268,6 +269,7 @@ const props = [
         controlType: 'margin',
         group: 'Base',
     },
+    themeProperty,
     {
         key: 'colors',
         group: 'Style',

website/src/data/components/stream/props.js

@@ -9,6 +9,7 @@
 import { areaCurvePropKeys, stackOrderPropKeys, stackOffsetPropKeys } from '@nivo/core'
 import { StreamDefaultProps as defaults } from '@nivo/stream'
 import {
+    themeProperty,
     axesProperties,
     motionProperties,
     defsProperties,
@@ -109,6 +110,7 @@ const props = [
         controlType: 'margin',
         group: 'Base',
     },
+    themeProperty,
     {
         key: 'colors',
         help: 'Defines how to compute line color.',

website/src/data/components/swarmplot/props.js

@@ -7,7 +7,12 @@
  * file that was distributed with this source code.
  */
 import { SwarmPlotDefaultProps } from '@nivo/swarmplot'
-import { motionProperties, axesProperties, groupProperties } from '../../../lib/componentProperties'
+import {
+    themeProperty,
+    motionProperties,
+    axesProperties,
+    groupProperties,
+} from '../../../lib/componentProperties'
 
 const defaults = SwarmPlotDefaultProps
 
@@ -245,6 +250,7 @@ const props = [
             max: 100,
         },
     },
+    themeProperty,
     {
         key: 'colors',
         help: 'Defines how to compute node color.',
@@ -302,7 +308,6 @@ const props = [
         required: false,
         defaultValue: defaults.colorBy,
         controlType: 'choices',
-        group: 'Style',
         controlOptions: {
             choices: ['group', 'id'].map(key => ({
                 label: key,