@carto/ps-react-ui 4.4.1 → 4.4.3

package/src/widgets/category/components/category-row-other.tsx

@@ -7,6 +7,9 @@ export interface CategoryRowOtherProps {
   otherCountLabel?: string
 }
 
+/**
+ * Renders an "Other" summary row indicating how many additional categories are hidden beyond `maxItems`.
+ */
 export function CategoryRowOther({
   hiddenCount,
   otherLabel = 'Other',

package/src/widgets/category/components/category-row-single.tsx

@@ -9,16 +9,21 @@ export interface CategoryRowSingleProps {
   maxValue: number
   color: string
   formatter: NonNullable<CategoryWidgetConfig['formatter']>
+  labelFormatter?: CategoryWidgetConfig['labelFormatter']
   onClick?: CategoryWidgetConfig['onRowClick']
   selected?: boolean
 }
 
+/**
+ * Renders a single-series category row with a label, formatted value, and proportional bar.
+ */
 export function CategoryRowSingle({
   name,
   value,
   maxValue,
   color,
   formatter,
+  labelFormatter,
   onClick,
   selected = true,
 }: CategoryRowSingleProps) {
@@ -33,7 +38,9 @@ export function CategoryRowSingle({
   return (
     <Box sx={rowStyle} onClick={handleClick}>
       <Box sx={styles.rowHeader}>
-        <Typography sx={styles.rowLabel}>{name}</Typography>
+        <Typography sx={styles.rowLabel}>
+          {labelFormatter ? labelFormatter(name) : name}
+        </Typography>
         <Typography sx={styles.rowValue}>{formatter(value)}</Typography>
       </Box>
       <CategoryBar

package/src/widgets/category/config.ts

@@ -10,6 +10,12 @@ interface CategoryDownloadConfigProps extends ConfigProps {
   series?: CategorySeriesConfig[]
 }
 
+/**
+ * Creates download configuration for category widgets, supporting PNG (screenshot) and CSV (data) exports. CSV output groups values by category across multiple series.
+ *
+ * @param props - Configuration with `refUI` reference and optional `series` for CSV column headers.
+ * @returns Array of download items for use with the Download action.
+ */
 export function categoryDownloadConfig({
   refUI,
   series,
@@ -66,6 +72,11 @@ export function categoryDownloadConfig({
   ]
 }
 
+/**
+ * Returns the default configuration for category list widgets, including empty series and a default `maxItems` of 10.
+ *
+ * @returns Default category widget config.
+ */
 export function categoryConfig(): CategoryWidgetConfig {
   return {
     series: [],

package/src/widgets/category/types.ts

@@ -29,6 +29,7 @@ export type CategoryWidgetState = BaseWidgetState<
 
 export interface CategoryWidgetConfig {
   formatter?: (value: number) => string
+  labelFormatter?: (value: string | number) => string | number
   series?: CategorySeriesConfig[]
   maxItems?: number
   labels?: CategoryLabels

package/src/widgets/echart/echart-ui.tsx

@@ -3,6 +3,13 @@ import * as echarts from 'echarts'
 import type { EchartUIProps } from './types'
 import { useWidgetRef } from '../../hooks'
 
+/**
+ * Presentational component that initializes and manages an Apache ECharts instance.
+ *
+ * @remarks
+ * Handles chart lifecycle (init, dispose), option updates, resize observation, and event listener management.
+ * Uses SVG renderer with a default height of 304px.
+ */
 export function EchartUI(props: EchartUIProps) {
   const { id, ref, init, option, className, style, onEvents } = props
 

package/src/widgets/echart/echart.tsx

@@ -9,6 +9,12 @@ import { useWidgetStore } from '../stores/widget-store'
 import { useShallow } from 'zustand/shallow'
 import { useMemo } from 'react'
 
+/**
+ * Stateful EChart widget component that reads data and options from the widget store and renders an ECharts chart.
+ *
+ * @remarks
+ * Transforms widget data into ECharts dataset format and delegates rendering to {@link EchartUI}.
+ */
 export function Echart(props: EchartProps) {
   const id = useWidgetStore(
     useShallow((state) => state.getWidget<EchartWidgetState>(props.id)?.id),

package/src/widgets/echart/options.ts

@@ -1,5 +1,12 @@
 import type { EchartOptionsProps, EchartWidgetOptionProps } from './types'
 
+/**
+ * Returns the shared base ECharts options used across all EChart-based widgets (bar, pie, histogram, etc.).
+ *
+ * @remarks
+ * Configures grid spacing, tooltip styling, legend, axis pointer, and the default color palette
+ * derived from the MUI theme.
+ */
 export function getCommonOptions({
   theme,
 }: EchartWidgetOptionProps<unknown>): EchartOptionsProps {

package/src/widgets/echart/types.ts

@@ -33,10 +33,13 @@ export interface EchartWidgetOptionProps<D> {
   data?: D
   theme: typeof CartoTheme
   formatter?: (value: number) => string
+  labelFormatter?: (value: string | number) => string | number
 }
 
 export interface EchartWidgetProps {
   type: string
   option: EchartUIProps['option']
   onEvents?: EchartUIProps['onEvents']
+  formatter?: (value: number) => string
+  labelFormatter?: (value: string | number) => string | number
 }

package/src/widgets/echart/utils.ts

@@ -3,6 +3,27 @@ import type { EchartOptionsProps } from './types'
 import type { Theme } from '@mui/material'
 import { DEFAULT_STACK_GROUP } from './const'
 
+/**
+ * Deep-merges two ECharts option objects with smart handling for `color`, `axisLabel`, and `series` keys.
+ *
+ * @param optionA - Base ECharts options.
+ * @param optionB - Override ECharts options to merge on top.
+ * @param customMergeFn - Optional function returning a custom merge strategy per key.
+ * @returns The merged ECharts options object.
+ *
+ * @remarks
+ * - `color` arrays are replaced entirely (not concatenated).
+ * - `axisLabel` formatters are composed so the base formatter can suppress values by returning `''`.
+ * - `series` arrays are merged element-by-element rather than concatenated.
+ *
+ * @example
+ * ```tsx
+ * const option = mergeEchartWidgetConfig(props.option, {
+ *   series: [{ barWidth: '60%', itemStyle: { borderRadius: [4, 4, 0, 0] } }],
+ *   tooltip: { trigger: 'axis' },
+ * })
+ * ```
+ */
 export function mergeEchartWidgetConfig<T extends EchartOptionsProps>(
   optionA: T | undefined,
   optionB: T | undefined,
@@ -53,6 +74,14 @@ export function mergeEchartWidgetConfig<T extends EchartOptionsProps>(
   }) as T
 }
 
+/**
+ * Generates ECharts `dataZoom` configuration for interactive zoom and pan on chart axes.
+ *
+ * @param range - Initial visible range as `{ start, end }` percentages (0-100). Defaults to full range.
+ * @param options - Zoom behavior options including axis sliders, inside zoom, and formatter.
+ * @param theme - Optional MUI theme for styled slider handles and backgrounds.
+ * @returns An object containing the `dataZoom` array configuration.
+ */
 export function getEChartZoomConfig(
   { start, end }: { start: number; end: number } = { start: 0, end: 100 },
   {
@@ -179,6 +208,12 @@ function getEChartZoomSliderStyles(theme: Theme) {
   } as const
 }
 
+/**
+ * Generates ECharts `brush` configuration for interactive data selection on charts.
+ *
+ * @param options - Brush options including type, mode, and target axis index.
+ * @returns An object containing the `brush` configuration.
+ */
 export function getEChartBrushConfig(
   { brushType = 'lineX', brushMode = 'single', xAxisIndex = 0 } = {} as {
     brushType?: string
@@ -198,6 +233,12 @@ export function getEChartBrushConfig(
   }
 }
 
+/**
+ * Returns an ECharts `stack` configuration to group series into a stacked layout.
+ *
+ * @param stackGroup - The stack group identifier. Defaults to the library's default group.
+ * @returns An object with the `stack` property set to the group name.
+ */
 export function getEChartStackConfig(stackGroup: string = DEFAULT_STACK_GROUP) {
   return { stack: stackGroup }
 }

package/src/widgets/error/error.tsx

@@ -3,6 +3,16 @@ import { useWidgetStore } from '../stores/widget-store'
 import { useShallow } from 'zustand/shallow'
 import type { WidgetErrorProps } from './types'
 
+/**
+ * Displays an error alert when a widget encounters an error during data loading. Reads error state from the widget store and hides errors during loading/fetching to prevent flashing.
+ *
+ * @example
+ * ```tsx
+ * <WidgetError id="my-widget">
+ *   <WidgetContent />
+ * </WidgetError>
+ * ```
+ */
 export function WidgetError({
   id,
   children,

package/src/widgets/formula/components/item.tsx

@@ -2,6 +2,9 @@ import { Typography } from '@mui/material'
 import type { ItemProps } from '../types'
 import { styles } from '../style'
 
+/**
+ * Base typography wrapper used by formula sub-components (Value, Prefix, Suffix) to render styled text.
+ */
 export function Item(props: ItemProps) {
   return (
     <Typography

package/src/widgets/formula/components/prefix.tsx

@@ -3,6 +3,9 @@ import { useWidgetStore } from '../../stores/widget-store'
 import { Item } from './item'
 import { useShallow } from 'zustand/shallow'
 
+/**
+ * Renders the prefix content (e.g., currency symbol) before a formula value, if defined in the data item.
+ */
 export function Prefix({ id, index = 0, ...props }: ValueProps) {
   const prefix = useWidgetStore(
     useShallow(

package/src/widgets/formula/components/row.tsx

@@ -4,6 +4,9 @@ import type { FormulaWidgetState, RowProps } from '../types'
 import { useWidgetStore } from '../../stores/widget-store'
 import { useShallow } from 'zustand/shallow'
 
+/**
+ * Iterates over the widget's data items and renders a row for each one using render props.
+ */
 export function Row(props: RowProps) {
   const data = useWidgetStore(
     useShallow((state) => state.getWidget<FormulaWidgetState>(props.id)?.data),

package/src/widgets/formula/components/series.tsx

@@ -3,6 +3,9 @@ import type { FormulaWidgetState, ValueProps } from '../types'
 import { useWidgetStore } from '../../stores/widget-store'
 import { useShallow } from 'zustand/shallow'
 
+/**
+ * Renders a colored avatar badge showing the first letter of the series name for multi-value formula widgets.
+ */
 export function Series({ id, index = 0 }: Pick<ValueProps, 'id' | 'index'>) {
   const serie = useWidgetStore(
     useShallow(

package/src/widgets/formula/components/suffix.tsx

@@ -4,6 +4,9 @@ import { Item } from './item'
 import type { Theme } from '@mui/material'
 import { useShallow } from 'zustand/shallow'
 
+/**
+ * Renders the suffix content (e.g., unit label) after a formula value, if defined in the data item.
+ */
 export function Suffix({ id, index = 0, ...props }: ValueProps) {
   const suffix = useWidgetStore(
     useShallow(

package/src/widgets/formula/components/value.tsx

@@ -2,9 +2,11 @@ import { type FormulaWidgetState, type ValueProps } from '../types'
 import { useWidgetStore } from '../../stores/widget-store'
 import { Item } from './item'
 import { useShallow } from 'zustand/shallow'
+import { defaultFormatter } from '../../utils/formatter'
 
-const defaultFormatter = (value: number) => value.toString()
-
+/**
+ * Displays the formatted numeric value for a formula widget data item, applying the widget's formatter and color.
+ */
 export function Value({ id, index = 0, ...props }: ValueProps) {
   const value = useWidgetStore(
     useShallow(

package/src/widgets/formula/config.ts

@@ -2,6 +2,12 @@ import { downloadToCSV, downloadToPNG } from '../actions'
 import type { ConfigProps } from '../loader/types'
 import type { FormulaDownloadConfig, FormulaWidgetConfig } from './types'
 
+/**
+ * Creates download configuration for formula widgets, supporting PNG (screenshot) and CSV (data) exports.
+ *
+ * @param props - Configuration with `refUI` reference for PNG export.
+ * @returns Array of download items for use with the Download action.
+ */
 export function formulaDownloadConfig({
   refUI,
 }: ConfigProps): FormulaDownloadConfig {
@@ -20,6 +26,11 @@ export function formulaDownloadConfig({
   ]
 }
 
+/**
+ * Returns the default configuration for formula (single or multiple numeric value) widgets.
+ *
+ * @returns Default formula widget config with empty series.
+ */
 export function formulaConfig(): FormulaWidgetConfig {
   return {
     series: [],

package/src/widgets/formula/formula-ui.tsx

@@ -7,6 +7,9 @@ import { Series } from './components/series'
 import { useWidgetRef } from '../../hooks'
 import { Box } from '@mui/material'
 
+/**
+ * Renders a formula widget displaying one or more KPI values with optional prefixes, suffixes, and series indicators.
+ */
 export function FormulaUI(props: FormulaUIProps) {
   const { ref } = useWidgetRef(props.id)
 

package/src/widgets/histogram/config.ts

@@ -3,25 +3,55 @@ import {
   mergeEchartWidgetConfig,
   type EchartOptionsProps,
 } from '../echart'
-import type {
-  HistogramConfig,
-  HistogramWidgetConfig,
-  HistogramWidgetData,
-} from './types'
+import type { HistogramConfig, HistogramWidgetConfig } from './types'
 import {
-  flattenObjectArrayToCSV,
   buildLegendConfig,
   buildGridConfig,
   createTooltipPositioner,
   createTooltipFormatter,
   niceNum,
-} from '../_shared/chart-config'
+} from '../utils/chart-config'
 import { downloadToCSV, downloadToPNG, type DownloadItem } from '../actions'
 import type { ConfigProps } from '../loader/types'
 
+export interface HistogramDownloadConfigProps extends ConfigProps {
+  ticks: number[]
+  labelFormatter?: (value: string | number) => string | number
+}
+
+export function histogramDataToCSV(
+  data: number[][],
+  ticks: number[],
+  labelFormatter?: (value: string | number) => string | number,
+): string[][] {
+  if (!data?.length || data[0]?.length === 0) return []
+
+  const dataLength = data[0]?.length ?? 0
+  const labels = createAxisLabels(dataLength, ticks, labelFormatter)
+  const seriesCount = data.length
+  const isMulti = seriesCount > 1
+
+  const headers = isMulti
+    ? [
+        'Bin',
+        ...Array.from({ length: seriesCount }, (_, i) => `Series ${i + 1}`),
+      ]
+    : ['Bin', 'Value']
+
+  return [
+    headers,
+    ...labels.map((label, i) => [
+      label,
+      ...data.map((series) => String(series[i] ?? 0)),
+    ]),
+  ]
+}
+
 export function histogramDownloadConfig({
   refUI,
-}: ConfigProps): DownloadItem<HistogramWidgetData>[] {
+  ticks,
+  labelFormatter,
+}: HistogramDownloadConfigProps): DownloadItem<number[][]>[] {
   return [
     {
       ...downloadToPNG,
@@ -29,34 +59,78 @@ export function histogramDownloadConfig({
     },
     {
       ...downloadToCSV,
-      modifier: async (data) => {
-        const rows = flattenObjectArrayToCSV(data)
-        return downloadToCSV.modifier(rows)
-      },
+      modifier: async (data) =>
+        downloadToCSV.modifier(histogramDataToCSV(data, ticks, labelFormatter)),
     },
   ]
 }
+
+/**
+ * Creates formatted axis labels from tick boundaries.
+ *
+ * @param dataLength - Number of data points (determines number of labels).
+ * @param ticks - Bin boundaries. If `ticks.length === dataLength + 1`, all
+ *   bins are ranges. If `ticks.length === dataLength`, the last bin is
+ *   open-ended (`+`). A last tick of `Infinity` also produces `+`.
+ * @param labelFormatter - Optional formatter applied to each individual tick
+ *   value when building the bin range label.
+ */
+function createAxisLabels(
+  dataLength: number,
+  ticks: number[],
+  labelFormatter?: (value: string | number) => string | number,
+): string[] {
+  const fmt = (v: number) =>
+    labelFormatter ? String(labelFormatter(v)) : String(v)
+
+  return Array.from({ length: dataLength }, (_, i) => {
+    const low = ticks[i] ?? i
+    const high = ticks[i + 1]
+    return high !== undefined && isFinite(high)
+      ? `${fmt(low)}-${fmt(high)}`
+      : `${fmt(low)}+`
+  })
+}
+
+/**
+ * Generates ECharts configuration for distribution histogram widgets with
+ * adjacent bars (minimal gap) and axis formatting styled with the CARTO theme.
+ *
+ * Accepts raw `number[][]` data and `ticks` boundaries. The ticks and
+ * `labelFormatter` are used to create the x-axis category labels; the raw
+ * numeric data is embedded directly in each series.
+ *
+ * @param props - Histogram configuration including raw data, ticks, and theme.
+ * @returns Widget config with ECharts option object.
+ */
 export function histogramConfig(props: HistogramConfig): HistogramWidgetConfig {
   return {
     type: 'histogram',
     option: mergeEchartWidgetConfig(getCommonOptions(props), getOption(props)),
+    formatter: props.formatter,
   }
 }
+
 function getOption({
   data = [],
+  ticks,
   theme,
   formatter,
+  labelFormatter,
 }: HistogramConfig): EchartOptionsProps {
   const hasLegend = (data?.length ?? 0) > 1
+  const dataLength = data[0]?.length ?? 0
+  const axisLabels = createAxisLabels(dataLength, ticks, labelFormatter)
 
   let niceMin = 0
   let niceMax = 1
 
   return {
-    legend: buildLegendConfig(hasLegend),
+    legend: buildLegendConfig({ hasLegend }),
     grid: buildGridConfig(hasLegend, theme),
     xAxis: {
       type: 'category',
+      data: axisLabels,
       axisLine: {
         show: false,
       },
@@ -126,14 +200,12 @@ function getOption({
     tooltip: {
       position: createTooltipPositioner(theme),
       formatter: createTooltipFormatter((item) => {
-        const value = item.value as Record<string, string | number>
-        const index = item.dimensionNames?.[item.encode?.y?.at(0) ?? 1]
-        const _value = value[index ?? '']
+        const _value = item.value as number
 
         const formattedValue =
           typeof _value === 'number' && formatter
             ? formatter(_value)
-            : (_value ?? '')
+            : String(_value ?? '')
 
         const marker = typeof item.marker === 'string' ? item.marker : ''
         const seriesName = item.seriesName ? `${item.seriesName}: ` : ''
@@ -142,11 +214,11 @@ function getOption({
         return { name, seriesName, marker, value: formattedValue }
       }),
     },
-    series: data.map((_: unknown, index: number) => ({
-      datasetIndex: index,
+    series: data.map((seriesData: number[]) => ({
       type: 'bar',
-      barGap: '1%', // No gap between bars in histogram
-      barCategoryGap: '1%', // No gap between categories in histogram
+      data: seriesData,
+      barGap: '1%',
+      barCategoryGap: '1%',
       emphasis: {
         focus: 'series',
       },

package/src/widgets/histogram/index.ts

@@ -4,5 +4,10 @@ export type {
   HistogramWidgetData,
   HistogramWidgetState,
 } from './types'
-export { histogramConfig, histogramDownloadConfig } from './config'
+export type { HistogramDownloadConfigProps } from './config'
+export {
+  histogramConfig,
+  histogramDataToCSV,
+  histogramDownloadConfig,
+} from './config'
 export { HistogramSkeleton } from './skeleton'

package/src/widgets/histogram/style.ts

@@ -1,5 +1,5 @@
 import type { SxProps, Theme } from '@mui/material'
-import { baseSkeletonStyles } from '../_shared/skeleton'
+import { baseSkeletonStyles } from '../utils/skeleton'
 
 export const styles = {
   skeleton: {

package/src/widgets/histogram/types.ts

@@ -1,11 +1,11 @@
-import type { EchartWidgetData, EchartWidgetState } from '../echart'
+import type { EchartWidgetState } from '../echart'
 import type {
   EchartWidgetOptionProps,
   EchartWidgetProps,
 } from '../echart/types'
 import type { ConfigProps } from '../loader'
 
-export type HistogramWidgetData = EchartWidgetData
+export type HistogramWidgetData = number[][]
 
 export type HistogramWidgetState = EchartWidgetState
 
@@ -14,4 +14,10 @@ export type HistogramWidgetConfig = EchartWidgetProps & {
 }
 
 export type HistogramConfig = ConfigProps &
-  EchartWidgetOptionProps<HistogramWidgetData>
+  Pick<
+    EchartWidgetOptionProps<unknown>,
+    'theme' | 'formatter' | 'labelFormatter'
+  > & {
+    data?: number[][]
+    ticks: number[]
+  }

package/src/widgets/loader/loader.tsx

@@ -3,6 +3,28 @@ import type { WidgetLoaderProps } from './types'
 import { useWidgetStore } from '../stores/widget-store'
 import type { WrapperState } from '../wrapper'
 
+/**
+ * Foundation component for all widgets that manages state initialization, synchronization with the widget store, and data transformation pipeline execution.
+ *
+ * @remarks
+ * The WidgetLoader is stateless -- it manages data flow but does not render any UI. Always wrap it with WidgetWrapper for consistent widget appearance.
+ *
+ * @example
+ * ```tsx
+ * <WidgetLoader
+ *   id="sales-chart"
+ *   type="bar"
+ *   data={data}
+ *   isLoading={false}
+ *   isFetching={false}
+ *   config={barConfig({ data })}
+ * >
+ *   <WidgetWrapper id="sales-chart" title="Sales">
+ *     <Echart id="sales-chart" />
+ *   </WidgetWrapper>
+ * </WidgetLoader>
+ * ```
+ */
 export function WidgetLoader<T extends object = Record<string, unknown>>(
   props: WidgetLoaderProps<T>,
 ) {

package/src/widgets/loader/utils.ts

@@ -9,9 +9,21 @@ export type ConfigOrFn<TConfig, TData = unknown> =
   | ((baseConfig: TConfig, data: TData) => Partial<TConfig>)
 
 /**
- * Resolves a config that may be either an object or a function.
- * If it's a function, calls it with baseConfig and data.
- * If it's an object (or undefined), returns it as-is.
+ * Resolves a widget config that may be either a partial object or a function receiving the computed base config and data. If it is a function, calls it with `baseConfig` and `data`; otherwise returns the value as-is.
+ *
+ * @param config - The config object or function to resolve.
+ * @param baseConfig - The computed base configuration.
+ * @param data - The widget data.
+ * @returns Resolved partial config, or undefined.
+ *
+ * @example
+ * ```tsx
+ * const resolved = resolveConfig(
+ *   (base, data) => ({ maxItems: base.maxItems + 5 }),
+ *   baseConfig,
+ *   widgetData,
+ * )
+ * ```
  */
 export function resolveConfig<TConfig, TData>(
   config: ConfigOrFn<TConfig, TData> | undefined,
@@ -24,6 +36,17 @@ export function resolveConfig<TConfig, TData>(
   return config
 }
 
+/**
+ * Deep-merges two partial widget config objects using `deepmerge`, with arrays replaced rather than concatenated.
+ *
+ * @param options - A tuple of two partial configs to merge (base and override).
+ * @returns The merged config object.
+ *
+ * @example
+ * ```tsx
+ * const finalConfig = mergeWidgetConfig(baseConfig, resolvedConfig)
+ * ```
+ */
 export function mergeWidgetConfig<T>(
   ...options: [Partial<T> | undefined, Partial<T> | undefined]
 ): T {

package/src/widgets/markdown/config.ts

@@ -1,6 +1,11 @@
 import { downloadToCSV, type DownloadItem } from '../actions'
 import type { MarkdownWidgetConfig, MarkdownWidgetData } from './types'
 
+/**
+ * Creates download configuration for markdown widgets, supporting CSV export of text content. Does not require `refUI` since it only exports text.
+ *
+ * @returns Array of download items for use with the Download action.
+ */
 export function markdownDownloadConfig(): DownloadItem<MarkdownWidgetData>[] {
   return [
     {
@@ -13,6 +18,11 @@ export function markdownDownloadConfig(): DownloadItem<MarkdownWidgetData>[] {
   ]
 }
 
+/**
+ * Returns the default configuration for markdown content display widgets.
+ *
+ * @returns Default markdown widget config (empty object).
+ */
 export function markdownConfig(): MarkdownWidgetConfig {
   return {}
 }

package/src/widgets/markdown/markdown-ui.tsx

@@ -38,6 +38,13 @@ const COMPONENTS: Components = {
   li: ({ children }) => <ListItem sx={styles.li}>{children}</ListItem>,
 }
 
+/**
+ * Presentational component that renders a Markdown string as MUI-styled HTML using react-markdown.
+ *
+ * @remarks
+ * Maps Markdown elements (headings, paragraphs, links, lists) to MUI Typography and Link components.
+ * Custom component overrides can be passed via the `overrides` prop.
+ */
 export function MarkdownUI({ children, overrides }: MarkdownComponentProps) {
   return (
     <ReactMarkdown