From 47a647011288e19b9a64ba4f9781e5c77ea1c192 Mon Sep 17 00:00:00 2001
From: Pascal Corpet <pascal@co2ai.com>
Date: Mon, 25 Dec 2023 00:12:20 +0100
Subject: [PATCH] fix(marimekko): use readonly arrays for props as the library
 does not modify them

---
 packages/marimekko/src/Bars.tsx |  2 +-
 packages/marimekko/src/hooks.ts |  6 ++++--
 packages/marimekko/src/types.ts | 18 +++++++++---------
 packages/scales/src/types.ts    |  4 ++--
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/marimekko/src/Bars.tsx b/packages/marimekko/src/Bars.tsx
index 5321155e0..317f0375c 100644
--- a/packages/marimekko/src/Bars.tsx
+++ b/packages/marimekko/src/Bars.tsx
@@ -5,7 +5,7 @@ import { Bar } from './Bar'
 
 interface BarsProps<RawDatum> extends MouseEventHandlers<RawDatum, SVGRectElement> {
     isInteractive: boolean
-    bars: BarDatum<RawDatum>[]
+    bars: readonly BarDatum<RawDatum>[]
     tooltip: CommonProps<RawDatum>['tooltip']
 }
 
diff --git a/packages/marimekko/src/hooks.ts b/packages/marimekko/src/hooks.ts
index d63a03ce3..94fc8af0f 100644
--- a/packages/marimekko/src/hooks.ts
+++ b/packages/marimekko/src/hooks.ts
@@ -38,7 +38,7 @@ export const useDataDimensions = <RawDatum>(rawDimensions: DataProps<RawDatum>['
     }, [rawDimensions])
 
 export const useStack = <RawDatum>(
-    dimensionIds: string[],
+    dimensionIds: readonly string[],
     dimensions: Record<string, (datum: RawDatum) => number>,
     offset: OffsetId
 ) =>
@@ -186,6 +186,7 @@ export const useComputedData = <RawDatum>({
                 height: layout === 'vertical' ? 0 : thickness,
                 dimensions: [],
             }
+            const dimensions: DimensionDatum<RawDatum>[] = []
 
             const allPositions: number[] = []
             let totalSize = 0
@@ -231,7 +232,7 @@ export const useComputedData = <RawDatum>({
 
                     dimensionDatum.color = getColor(dimensionDatum)
 
-                    computedDatum.dimensions.push(dimensionDatum)
+                    dimensions.push(dimensionDatum)
                 }
 
                 if (layout === 'vertical') {
@@ -242,6 +243,7 @@ export const useComputedData = <RawDatum>({
                     computedDatum.width = totalSize
                 }
             })
+            computedDatum.dimensions = dimensions
 
             computedData.push(computedDatum)
         })
diff --git a/packages/marimekko/src/types.ts b/packages/marimekko/src/types.ts
index 80da75b25..57a4b93f1 100644
--- a/packages/marimekko/src/types.ts
+++ b/packages/marimekko/src/types.ts
@@ -19,10 +19,10 @@ export type DatumFormattedValue = string | number
 export type DatumPropertyAccessor<RawDatum, T> = (datum: RawDatum) => T
 
 export interface DataProps<RawDatum> {
-    data: RawDatum[]
+    data: readonly RawDatum[]
     id: string | number | DatumPropertyAccessor<RawDatum, DatumId>
     value: string | number | DatumPropertyAccessor<RawDatum, DatumValue>
-    dimensions: {
+    dimensions: readonly {
         id: string
         value: string | number | DatumPropertyAccessor<RawDatum, DatumValue>
     }[]
@@ -53,7 +53,7 @@ export interface ComputedDatum<RawDatum> extends NormalizedDatum<RawDatum> {
     y: number
     width: number
     height: number
-    dimensions: DimensionDatum<RawDatum>[]
+    dimensions: readonly DimensionDatum<RawDatum>[]
 }
 
 export interface BarDatum<RawDatum> extends DimensionDatum<RawDatum> {
@@ -68,8 +68,8 @@ export type LabelAccessorFunction<RawDatum> = (datum: ComputedDatum<RawDatum>) =
 export type LayerId = 'grid' | 'axes' | 'bars' | 'legends'
 
 export interface CustomLayerProps<RawDatum> {
-    data: ComputedDatum<RawDatum>[]
-    bars: BarDatum<RawDatum>[]
+    data: readonly ComputedDatum<RawDatum>[]
+    bars: readonly BarDatum<RawDatum>[]
     thicknessScale: ScaleLinear<number>
     dimensionsScale: ScaleLinear<number>
 }
@@ -119,9 +119,9 @@ export type CommonProps<RawDatum> = {
     axisBottom?: AxisProps | null
     axisLeft?: AxisProps | null
     enableGridX: boolean
-    gridXValues?: number[]
+    gridXValues?: readonly number[]
     enableGridY: boolean
-    gridYValues?: number[]
+    gridYValues?: readonly number[]
 
     // colors, theme and border
     colors: OrdinalColorScaleConfig<Omit<DimensionDatum<RawDatum>, 'color' | 'fill'>>
@@ -140,7 +140,7 @@ export type CommonProps<RawDatum> = {
     isInteractive: boolean
     tooltip: BarTooltipType<RawDatum>
 
-    legends: LegendProps[]
+    legends: readonly LegendProps[]
 
     role: string
 }
@@ -163,5 +163,5 @@ export type SvgProps<RawDatum> = DataProps<RawDatum> &
     MotionProps &
     SvgDefsAndFill<BarDatum<RawDatum>> &
     MouseEventHandlers<RawDatum, SVGRectElement> & {
-        layers?: Layer<RawDatum>[]
+        layers?: readonly Layer<RawDatum>[]
     }
diff --git a/packages/scales/src/types.ts b/packages/scales/src/types.ts
index 85331cb42..1ca664179 100644
--- a/packages/scales/src/types.ts
+++ b/packages/scales/src/types.ts
@@ -142,7 +142,7 @@ export type SerieAxis<Axis extends ScaleAxis, Value extends ScaleValue> = {
 }[]
 
 export type ComputedSerieAxis<Value extends ScaleValue> = {
-    all: Value[]
+    all: readonly Value[]
     min: Value
     minStacked?: Value
     max: Value
@@ -159,4 +159,4 @@ export type TicksSpec<Value extends ScaleValue> =
     // for example: every 2 weeks
     | string
     // override scale ticks with custom explicit values
-    | Value[]
+    | readonly Value[]