feat(website): add the ability to define some chart property attribut…

…es dynamically depending on the current flavor

website/src/components/controls/generics/PropertyDocumentation.tsx

@@ -26,7 +26,7 @@ export const PropertyDocumentation = ({
             currentFlavor={currentFlavor}
             supportedFlavors={property.flavors}
         >
-            <PropertyHeader {...property} context={context} />
+            <PropertyHeader {...property} currentFlavor={currentFlavor} context={context} />
             <Help>{property.help}</Help>
         </Control>
     )

website/src/components/controls/ui/Control.tsx

@@ -2,22 +2,22 @@ import React, { useState, useCallback, PropsWithChildren } from 'react'
 import intersection from 'lodash/intersection'
 import styled from 'styled-components'
 import { MdKeyboardArrowRight, MdKeyboardArrowDown } from 'react-icons/md'
-import { Flavor } from '../../../types'
+import { Flavor, FlavorAwareChartPropertyAttribute } from '../../../types'
 import { PropertyDescription } from './PropertyDescription'
 import { PropertyFlavors } from './PropertyFlavors'
 import { Cell } from './styled'
 
 interface ControlProps {
     id: string
-    description?: string
+    description?: FlavorAwareChartPropertyAttribute<string>
     flavors: Flavor[]
     currentFlavor: Flavor
     supportedFlavors?: Flavor[]
 }
 
 export const Control = ({
     id,
-    description,
+    description: _description,
     flavors,
     currentFlavor,
     supportedFlavors,
@@ -37,6 +37,14 @@ export const Control = ({
         }
     }
 
+    let description: string | undefined = undefined
+    if (typeof _description === 'string') {
+        description = _description
+    } else if (typeof _description === 'object') {
+        // If an object is provided, it means it depends on the current flavor.
+        description = _description[currentFlavor]
+    }
+
     return (
         <Container id={id} isPropertySupported={isPropertySupported}>
             {description !== undefined && (

website/src/components/controls/ui/PropertyHeader.tsx

@@ -6,7 +6,7 @@ import isNumber from 'lodash/isNumber'
 import isBoolean from 'lodash/isBoolean'
 import isFunction from 'lodash/isFunction'
 import styled from 'styled-components'
-import { ChartProperty } from '../../../types'
+import { ChartProperty, Flavor } from '../../../types'
 import { ControlContext } from '../types'
 
 const getDefaultValue = (value: any) => {
@@ -39,6 +39,7 @@ type PropertyHeaderProps = ChartProperty & {
     id?: string
     name?: string
     context?: ControlContext
+    currentFlavor?: Flavor
 }
 
 export const PropertyHeader = ({
@@ -48,6 +49,7 @@ export const PropertyHeader = ({
     required,
     defaultValue,
     context,
+    currentFlavor,
 }: PropertyHeaderProps) => {
     let label: ReactNode = name
     if (context) {
@@ -59,10 +61,20 @@ export const PropertyHeader = ({
         )
     }
 
+    let propertyType: string | undefined = undefined
+    if (type !== undefined) {
+        if (typeof type === 'string') {
+            propertyType = type
+        } else if (typeof type === 'object' && currentFlavor) {
+            // If an object is provided, it means it depends on the current flavor.
+            propertyType = type[currentFlavor]
+        }
+    }
+
     return (
         <Container>
             <Label htmlFor={id}>{label}</Label>
-            {type !== undefined && <Type>{type}</Type>}
+            {propertyType && <Type>{propertyType}</Type>}
             {required && <Required>required</Required>}
             {!required && <Optional>optional</Optional>}
             {defaultValue !== undefined && (

website/src/types.ts

@@ -11,16 +11,18 @@ export interface ChartMeta {
     }[]
 }
 
+export type FlavorAwareChartPropertyAttribute<T> = T | Partial<Record<Flavor, T>>
+
 export interface ChartProperty<Settings = any> {
     key: string
     name?: string
     group: string
     // type of the property, preferably expressed with TypeScript notation
-    type: string
+    type: FlavorAwareChartPropertyAttribute<string>
     // will be parsed in Markdown and supports links
     help?: string
     // will be parsed in Markdown and supports links
-    description?: string
+    description?: FlavorAwareChartPropertyAttribute<string>
     // assumed to be optional by default
     required?: boolean
     // default property value as defined for the component,