@hero-design/rn 8.99.4 → 8.100.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.99.4",
+  "version": "8.100.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,8 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.46.0",
+    "@hero-design/colors": "8.46.1",
+    "d3": "^7.8.5",
     "date-fns": "^2.30.0",
     "hero-editor": "^1.15.5",
     "nanoid": "^5.0.9"
@@ -76,6 +77,7 @@
     "@testing-library/jest-native": "^5.4.2",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^9.1.0",
+    "@types/d3": "^7.4.3",
     "@types/events": "^3.0.3",
     "@types/jest": "^29.5.3",
     "@types/react": "^18.2.0",

package/src/components/Avatar/AvatarStack/utils.ts

@@ -1,6 +1,11 @@
 import { useMemo } from 'react';
 import { mobileVisualisationPalette } from '@hero-design/colors';
 
+// Only use maasstrichtBlue colors for avatar stack
+const DEFAULT_COLORS = Object.entries(mobileVisualisationPalette)
+  .filter(([key]) => key.startsWith('maasstrichtBlue'))
+  .map(([, value]) => value);
+
 const shuffleArray = <T>(array: Array<T>): Array<T> =>
   array
     .map((value) => ({ value, sort: Math.random() }))
@@ -11,9 +16,6 @@ const shuffleArray = <T>(array: Array<T>): Array<T> =>
  * Hook that returns a memoized and shuffled array of visualisation colors for Avatar.
  */
 export const useAvatarColors = () => {
-  const shuffledColors = useMemo(
-    () => shuffleArray(Object.values(mobileVisualisationPalette)),
-    []
-  );
+  const shuffledColors = useMemo(() => shuffleArray(DEFAULT_COLORS), []);
   return shuffledColors;
 };

package/src/components/Badge/Status.tsx

@@ -13,7 +13,6 @@ export interface StatusProps extends ViewProps {
    * Whether the Status Badge is visible.
    */
   visible?: boolean;
-  /**
   /**
    * Visual intent color to apply to Status Badge.
    */
@@ -71,6 +70,7 @@ const Status = ({
           ],
         }}
         themeIntent={intent}
+        testID="status-dot"
       />
     </View>
   );

package/src/components/Badge/__tests__/Status.spec.tsx

@@ -24,4 +24,24 @@ describe('Status Badge', () => {
     expect(toJSON()).toMatchSnapshot();
     expect(getByText('Activity')).toBeDefined();
   });
+
+  it.each`
+    visible  | expectedOpacity
+    ${true}  | ${1}
+    ${false} | ${0}
+  `(
+    'status-dot opacity when visible is $visible',
+    ({ visible, expectedOpacity }) => {
+      const { getByTestId } = renderWithTheme(
+        <Badge.Status visible={visible}>
+          <Typography.Body variant="small">Dot Visibility</Typography.Body>
+        </Badge.Status>
+      );
+      const dot = getByTestId('status-dot');
+      const style = Array.isArray(dot.props.style)
+        ? Object.assign({}, ...dot.props.style)
+        : dot.props.style;
+      expect(style.opacity).toBe(expectedOpacity);
+    }
+  );
 });

package/src/components/Badge/__tests__/__snapshots__/Status.spec.tsx.snap

@@ -43,6 +43,7 @@ exports[`Status Badge renders correctly 1`] = `
           "width": 8,
         }
       }
+      testID="status-dot"
       themeIntent="danger"
     />
   </View>
@@ -117,6 +118,7 @@ exports[`Status Badge renders correctly with intent 1`] = `
           "width": 8,
         }
       }
+      testID="status-dot"
       themeIntent="success"
     />
   </View>

package/src/components/Chart/ChartSelect/StyledChartSelect.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/native';
+import { View } from 'react-native';
+
+const StyledHeaderContainer = styled(View)({
+  flexDirection: 'row',
+  alignItems: 'center',
+});
+
+export { StyledHeaderContainer };

package/src/components/Chart/ChartSelect/__tests__/StyledChartSelect.spec.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { StyledHeaderContainer } from '../StyledChartSelect';
+
+describe('StyledHeaderContainer', () => {
+  it('applies correct styles', () => {
+    const { toJSON } = render(
+      <StyledHeaderContainer testID="styled-header">
+        <Text>Child</Text>
+      </StyledHeaderContainer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Chart/ChartSelect/__tests__/__snapshots__/StyledChartSelect.spec.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledHeaderContainer applies correct styles 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+  testID="styled-header"
+>
+  <Text>
+    Child
+  </Text>
+</View>
+`;

package/src/components/Chart/ChartSelect/__tests__/index.spec.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { fireEvent, waitFor, within } from '@testing-library/react-native';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import ChartSelect from '../index';
+
+const options = [
+  { text: 'Option 1', value: '1' },
+  { text: 'Option 2', value: '2' },
+  { text: 'Option 3', value: '3', disabled: true },
+];
+
+describe('ChartSelect', () => {
+  it('renders with a selected value', () => {
+    const { getByText } = renderWithTheme(
+      <ChartSelect value="1" options={options} onConfirm={jest.fn()} />
+    );
+    expect(getByText('Option 1')).toBeVisible();
+  });
+
+  it('renders with no value selected', () => {
+    const { getByText } = renderWithTheme(
+      <ChartSelect value={null} options={options} onConfirm={jest.fn()} />
+    );
+    // Should render empty string or placeholder
+    expect(getByText('')).toBeTruthy();
+  });
+
+  it('opens bottom sheet and selects an option', async () => {
+    const onConfirm = jest.fn();
+    const { getByText } = renderWithTheme(
+      <ChartSelect
+        value="1"
+        options={options}
+        onConfirm={onConfirm}
+        bottomSheetConfig={{ header: 'Select Option' }}
+      />
+    );
+    fireEvent.press(getByText('Option 1'));
+    await waitFor(() => expect(getByText('Option 2')).toBeVisible());
+    expect(getByText('Option 2')).toBeTruthy();
+    // verify botomsheet header
+    expect(getByText('Select Option')).toBeVisible();
+
+    fireEvent.press(getByText('Option 2'));
+    expect(onConfirm).toHaveBeenCalledWith('2');
+    await waitFor(() => expect(getByText('Select Option')).toBeVisible());
+  });
+
+  it('calls onDismiss when bottom sheet is closed', () => {
+    const onDismiss = jest.fn();
+    const { getByText, getByTestId } = renderWithTheme(
+      <ChartSelect
+        value="1"
+        options={options}
+        onConfirm={jest.fn()}
+        onDismiss={onDismiss}
+      />
+    );
+    fireEvent.press(getByText('Option 1'));
+    // Simulate closing the bottom sheet
+    fireEvent(getByTestId('bottomSheet'), 'onRequestClose');
+    expect(onDismiss).toHaveBeenCalled();
+  });
+
+  it('does not open when disabled', () => {
+    const { getByText, queryByText } = renderWithTheme(
+      <ChartSelect value="1" options={options} onConfirm={jest.fn()} disabled />
+    );
+    fireEvent.press(getByText('Option 1'));
+    expect(queryByText('Option 2')).toBeNull();
+  });
+
+  it('renders all options', () => {
+    const { getByText, getByTestId } = renderWithTheme(
+      <ChartSelect value="1" options={options} onConfirm={jest.fn()} />
+    );
+    fireEvent.press(getByText('Option 1'));
+
+    const bottomSheet = getByTestId('bottomSheet');
+    const bottomSheetQueries = within(bottomSheet);
+
+    expect(bottomSheetQueries.getByText('Option 1')).toBeVisible();
+    expect(bottomSheetQueries.getByText('Option 2')).toBeVisible();
+    expect(bottomSheetQueries.getByText('Option 3')).toBeVisible();
+  });
+
+  it('renders custom header from bottomSheetConfig', () => {
+    const { getByText } = renderWithTheme(
+      <ChartSelect
+        value="1"
+        options={options}
+        onConfirm={jest.fn()}
+        bottomSheetConfig={{ header: 'Custom Header' }}
+      />
+    );
+    fireEvent.press(getByText('Option 1'));
+    expect(getByText('Custom Header')).toBeTruthy();
+  });
+
+  it('applies testID to the correct element', () => {
+    const { getByTestId } = renderWithTheme(
+      <ChartSelect
+        value="1"
+        options={options}
+        onConfirm={jest.fn()}
+        testID="chart-select"
+      />
+    );
+    expect(getByTestId('chart-select')).toBeTruthy();
+  });
+});

package/src/components/Chart/ChartSelect/index.tsx

@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { FlatList, TouchableOpacity, View } from 'react-native';
+import BottomSheet, { BottomSheetProps } from '../../BottomSheet';
+import Typography from '../../Typography';
+import Icon from '../../Icon';
+import List from '../../List';
+import { deepCompareValue, useKeyboard } from '../../../utils/helpers';
+import { StyledHeaderContainer } from './StyledChartSelect';
+
+/**
+ * Represents a selectable option for ChartSelect.
+ * @template V The type of the option value.
+ * @property value The value of the option. Used for selection and comparison.
+ * @property text The display text for the option.
+ * @property key (Optional) A unique key for the option. If provided, used as the FlatList key for better performance and stability.
+ */
+type OptionType<V> = {
+  value: V;
+  text: string;
+  key?: string;
+};
+
+export interface SingleSelectProps<V> {
+  /**
+   * The currently selected value. Should match one of the values in the options array.
+   */
+  value: V | null;
+  /**
+   * Callback fired when an option is selected.
+   * @param value The value of the selected option.
+   */
+  onConfirm: (value: V) => void;
+  /**
+   * Array of supported orientations for the Select modal (iOS only).
+   * Defaults to ['portrait'].
+   */
+  supportedOrientations?: ('portrait' | 'landscape')[];
+  /**
+   * The list of selectable options. Each option should have a value and display text.
+   */
+  options: OptionType<V>[];
+  /**
+   * Callback fired when the selection modal is dismissed without selecting an option.
+   */
+  onDismiss?: () => void;
+  /**
+   * Configuration for the bottom sheet modal.
+   * - variant: The visual variant of the bottom sheet.
+   * - header: Optional header text to display at the top of the bottom sheet.
+   */
+  bottomSheetConfig?: {
+    variant?: BottomSheetProps['variant'];
+    header?: BottomSheetProps['header'];
+  };
+  /**
+   * If true, the select is disabled and cannot be interacted with.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Additional style to apply to the select container.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Optional test ID for testing purposes. Applied to the main touchable area.
+   */
+  testID?: string;
+}
+
+const SingleSelect = <V,>({
+  onConfirm,
+  onDismiss,
+  options = [],
+  disabled = false,
+  style,
+  testID,
+  value,
+  supportedOrientations = ['portrait'],
+  bottomSheetConfig = {},
+}: SingleSelectProps<V>) => {
+  const { isKeyboardVisible, keyboardHeight } = useKeyboard();
+  const [open, setOpen] = useState(false);
+
+  const displayedValue =
+    options.find((opt) => deepCompareValue(opt.value, value))?.text || '';
+
+  const { variant: bottomSheetVariant, header: bottomSheetHeader = '' } =
+    bottomSheetConfig;
+
+  return (
+    <>
+      <View pointerEvents={disabled ? 'none' : 'auto'} style={style}>
+        <TouchableOpacity onPress={() => setOpen(true)}>
+          <StyledHeaderContainer pointerEvents="none" testID={testID}>
+            <Typography.Body variant="small-bold">
+              {displayedValue}
+            </Typography.Body>
+            <Icon icon="arrow-down" intent="primary" size="small" />
+          </StyledHeaderContainer>
+        </TouchableOpacity>
+      </View>
+
+      <BottomSheet
+        variant={bottomSheetVariant || 'fixed'}
+        open={open}
+        onRequestClose={() => {
+          onDismiss?.();
+          setOpen(false);
+        }}
+        header={bottomSheetHeader}
+        style={{
+          paddingBottom: isKeyboardVisible ? keyboardHeight : 0,
+        }}
+        supportedOrientations={supportedOrientations}
+        testID="bottomSheet"
+      >
+        <FlatList
+          data={options}
+          keyExtractor={(item) => item.key ?? String(item.value)}
+          renderItem={({ item }) => (
+            <List.BasicItem
+              selected={deepCompareValue(item.value, value)}
+              title={item.text}
+              onPress={() => {
+                setOpen(false);
+                onConfirm?.(item.value);
+              }}
+            />
+          )}
+        />
+      </BottomSheet>
+    </>
+  );
+};
+
+export default SingleSelect;

package/src/components/Chart/ColumnChart/ColumnChartContent.tsx

@@ -0,0 +1,84 @@
+// ColumnChartContent.tsx
+// This component renders the grouped/stacked columns for a column chart, using StackedSegment for each x-axis category.
+// It handles the layout and mapping of data series to visual columns.
+
+import React, { memo, useMemo } from 'react';
+import { G } from 'react-native-svg';
+import { DataValue, Series, XAxisConfig, YAxisConfig } from '../types';
+import useScaleBandX from '../shared/hooks/useScaleBandX';
+import StackedSegment from './StackedSegment';
+import { deepCompareValue } from '../../../utils/helpers';
+
+interface ColumnChartContentProps {
+  coordinates: { yStart: number; yEnd: number; xStart: number; xEnd: number };
+  data: Array<Series<Array<DataValue>>>;
+  yAxisConfig: Omit<YAxisConfig, 'minValue'>;
+  xAxisConfig: XAxisConfig;
+  /**
+   * Called when a bar (column segment) is pressed.
+   */
+  onBarPress?: (info: {
+    value: number | undefined;
+    xLabel: string;
+    seriesLabel: string;
+    seriesIndex: number;
+    xIndex: number;
+  }) => void;
+}
+
+/**
+ * Renders the grouped/stacked columns for a column chart.
+ * For each x-axis category, renders a StackedSegment with the values from all series.
+ * Handles layout and mapping of data to visual columns.
+ */
+const ColumnChartContent = ({
+  coordinates,
+  data,
+  yAxisConfig,
+  xAxisConfig,
+  onBarPress,
+}: ColumnChartContentProps) => {
+  const { yStart, yEnd, xStart, xEnd } = coordinates;
+
+  const xLabels = xAxisConfig.labels ?? [];
+
+  // Render columns (fixed width, center of group/column aligns to grid)
+  const scaleX = useScaleBandX({
+    labels: xAxisConfig.labels ?? [],
+    xStart,
+    xEnd,
+  });
+  const columns = useMemo(() => {
+    if (data.length === 0) {
+      return null;
+    }
+    return xLabels.flatMap((_, xIdx) => {
+      const stackedData = data.map((series) => {
+        return series.data[xIdx] ?? undefined;
+      });
+
+      const x = scaleX(xLabels[xIdx]);
+      if (!x) {
+        return null; // Handle case where x is undefined
+      }
+      const seriesLabels = data.map((series) => series.label);
+      const xLabel = xLabels[xIdx];
+      return (
+        <StackedSegment
+          key={`${xLabel}-series`}
+          stackedData={stackedData}
+          xLabel={xLabel}
+          yAxisConfig={yAxisConfig}
+          coordinates={coordinates}
+          xCenter={x + scaleX.bandwidth() / 2}
+          seriesLabels={seriesLabels}
+          xIndex={xIdx}
+          onBarPress={onBarPress}
+        />
+      );
+    });
+  }, [xLabels, data, xStart, yStart, xEnd, yEnd, onBarPress, yAxisConfig]);
+
+  return <G testID="column-chart-content">{columns}</G>;
+};
+export default memo(ColumnChartContent, deepCompareValue);

package/src/components/Chart/ColumnChart/Segment.tsx

@@ -0,0 +1,66 @@
+// Segment.tsx
+// This component renders a single column segment (bar) for a column chart, with support for accessibility and testID.
+
+import React from 'react';
+import { Rect } from 'react-native-svg';
+import { useTheme } from '../../../theme';
+
+interface SegmentProps {
+  xCenter: number;
+  y: number;
+  height: number;
+  color?: string;
+  value?: number;
+  xLabel: string;
+  seriesLabel: string;
+  testID: string;
+  onPress?: () => void;
+}
+
+/**
+ * Renders a single column segment (bar) for a column chart.
+ * Applies theming, segment gap, and accessibility label.
+ * Used by StackedSegment and other chart content components.
+ */
+const Segment = ({
+  xCenter,
+  y,
+  height,
+  color,
+  value,
+  xLabel,
+  seriesLabel,
+  testID,
+  onPress,
+}: SegmentProps) => {
+  const theme = useTheme();
+  const { segmentGap } = theme.__hd__.columnChart.space;
+  const width = theme.__hd__.columnChart.sizes.columnWidth;
+
+  // Apply segment gap logic
+  const minBarHeight = 10;
+  let adjustedHeight = height - segmentGap;
+  if (height > 0 && adjustedHeight < minBarHeight) {
+    adjustedHeight = minBarHeight;
+  } else if (height <= 0) {
+    adjustedHeight = 0;
+  }
+  const adjustedY = y + segmentGap / 2;
+  const x = xCenter - width / 2;
+
+  return (
+    <Rect
+      x={x}
+      y={adjustedY}
+      width={width}
+      height={adjustedHeight}
+      rx={width / 2}
+      fill={color}
+      accessibilityLabel={`Column segment: value ${value}, x-label ${xLabel}, series ${seriesLabel}`}
+      testID={testID}
+      onPress={onPress}
+    />
+  );
+};
+
+export default React.memo(Segment);

package/src/components/Chart/ColumnChart/StackedSegment.tsx

@@ -0,0 +1,99 @@
+// StackedSegment.tsx
+// This component renders a stack of column segments for a single x-axis category in a grouped/stacked column chart.
+// Each segment represents a value from a different series, stacked vertically. Uses the Segment component for rendering each bar.
+
+import React, { memo } from 'react';
+import Segment from './Segment';
+import { DataValue, YAxisConfig } from '../types';
+import useScaleLinearY from '../shared/hooks/useScaleLinearY';
+import useColorScale from '../shared/hooks/useColorScale';
+import { deepCompareValue } from '../../../utils/helpers';
+
+interface StackedSegmentProps {
+  stackedData: Array<DataValue>;
+  seriesLabels: Array<string>;
+  xLabel: string;
+  yAxisConfig: YAxisConfig;
+  coordinates: { yStart: number; yEnd: number; xStart: number; xEnd: number };
+  xCenter: number;
+  xIndex: number;
+  /**
+   * Called when a bar (column segment) is pressed.
+   */
+  onBarPress?: (info: {
+    value: number | undefined;
+    xLabel: string;
+    seriesLabel: string;
+    seriesIndex: number;
+    xIndex: number;
+  }) => void;
+}
+
+/**
+ * Renders a stack of column segments for a single x-axis category.
+ * Each segment corresponds to a value in stackedData and is colored by series.
+ * Skips undefined values. Used for grouped/stacked column charts.
+ */
+const StackedSegment: React.FC<StackedSegmentProps> = ({
+  stackedData,
+  seriesLabels,
+  xLabel,
+  yAxisConfig,
+  coordinates,
+  xCenter,
+  xIndex,
+  onBarPress,
+}) => {
+  const { yStart, yEnd } = coordinates;
+  const stackedMaxY = yAxisConfig.maxValue ?? 0;
+  const scaleY = useScaleLinearY({
+    maxValue: stackedMaxY,
+    minValue: 0,
+    yStart,
+    yEnd,
+  });
+
+  let yStack = 0; // running sum for stacking
+  const colorScale = useColorScale(seriesLabels);
+  return stackedData.map((value, index) => {
+    // If value is undefined, skip this segment
+    if (value === undefined) {
+      return null;
+    }
+    const prevYStack = yStack;
+    yStack += value ?? 0;
+
+    // y0 is the bottom of the stack, y1 is the top
+    const y0 = scaleY(prevYStack);
+    const y1 = scaleY(yStack);
+    const colHeight = y0 - y1; // since y increases downward in SVG
+    const seriesLabel = seriesLabels[index];
+    return (
+      <Segment
+        key={`${xLabel}-series-${seriesLabel}`}
+        xCenter={xCenter}
+        y={y1}
+        height={colHeight}
+        color={colorScale(seriesLabel)}
+        value={value}
+        xLabel={xLabel}
+        seriesLabel={seriesLabel}
+        testID={`column-segment-${xLabel}-${seriesLabel}`}
+        onPress={
+          onBarPress
+            ? () =>
+                onBarPress({
+                  value,
+                  xLabel,
+                  seriesLabel,
+                  seriesIndex: index,
+                  xIndex,
+                })
+            : undefined
+        }
+      />
+    );
+  });
+};
+
+export default memo(StackedSegment, deepCompareValue);

package/src/components/Chart/ColumnChart/StyledColumnChart.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/native';
+import { View } from 'react-native';
+
+const StyledColumnChartWrapper = styled(View)`
+  width: 100%;
+  height: 100%;
+`;
+
+export { StyledColumnChartWrapper };