@hero-design/rn 8.99.4 → 8.100.0-alpha.0

package/src/components/Chart/shared/YAxis.tsx

@@ -0,0 +1,104 @@
+import React, { useMemo } from 'react';
+import { Platform } from 'react-native';
+import { ForeignObject, G } from 'react-native-svg';
+import { useTheme } from '../../../theme';
+import Box from '../../Box';
+import { AxisCoordinates, YAxisConfig } from '../types';
+import AxisLabel from './AxisLabel';
+import useGenerateTicks from './hooks/useGenerateTicks';
+import useScaleLinearY from './hooks/useScaleLinearY';
+
+export type YAxisProps = {
+  yAxisConfig: YAxisConfig & { minValue?: number };
+  coordinates: AxisCoordinates;
+};
+
+const YAxis = ({ yAxisConfig, coordinates }: YAxisProps) => {
+  const theme = useTheme();
+  const { maxValue, minValue, step, labels } = yAxisConfig;
+  const { yStart, yEnd, xEnd, xStart } = coordinates;
+  const { yAxisDefaultTextWidth } = theme.__hd__.chart.sizes;
+
+  // Whether to use custom labels instead of generated ticks
+  const shouldUseCustomLabels = labels && labels.length > 0;
+
+  const maxValueOrZero = maxValue || 0;
+  const minValueOrZero = minValue || 0;
+
+  // Adjust scaleY to fit within the chart area, leaving space for the bottom space for the X axis
+  const scaleY = useScaleLinearY({
+    maxValue: maxValueOrZero,
+    minValue: minValueOrZero,
+    yStart,
+    yEnd,
+  });
+
+  // Generate ticks, including maxValue if needed
+  const ticks = useGenerateTicks({
+    maxValue: maxValueOrZero,
+    minValue: minValueOrZero,
+    step,
+  });
+
+  const data = useMemo(
+    () =>
+      ticks.map((tick, index) => {
+        if (shouldUseCustomLabels) {
+          return { tick, label: labels[index] };
+        }
+        return {
+          tick,
+          label: Number.isInteger(tick)
+            ? tick.toString()
+            : Number(tick).toFixed(2),
+        };
+      }),
+    [ticks, shouldUseCustomLabels, labels]
+  );
+
+  return (
+    <G>
+      {data.map(({ label, tick }) => (
+        <G key={label}>
+          {/*
+            Cross-platform Y-axis label rendering:
+            - On web: Use ForeignObject to allow HTML/CSS styling and ellipsis with Typography.Label.
+              The x position is set to xStart - yAxisDefaultTextWidth to right-align the label box.
+            - On native: Use Box with absolute positioning and Typography.Label for compatibility.
+              The transform centers the label vertically.
+          */}
+          {Platform.OS === 'web' ? (
+            <ForeignObject
+              x={xStart - yAxisDefaultTextWidth}
+              y={scaleY(tick) - theme.__hd__.typography.lineHeights.label / 2}
+              width={yAxisDefaultTextWidth}
+              height={theme.__hd__.typography.lineHeights.label}
+            >
+              <AxisLabel label={label} />
+            </ForeignObject>
+          ) : (
+            <Box
+              testID={`y-axis-label-${tick}-container`}
+              style={{
+                position: 'absolute',
+                maxWidth: yAxisDefaultTextWidth,
+                top: scaleY(tick),
+                transform: [
+                  {
+                    translateY:
+                      0 - theme.__hd__.typography.lineHeights.label / 2, // center label vertically
+                  },
+                ],
+                right: xEnd - yAxisDefaultTextWidth,
+              }}
+            >
+              <AxisLabel label={label} />
+            </Box>
+          )}
+        </G>
+      ))}
+    </G>
+  );
+};
+
+export default YAxis;

package/src/components/Chart/shared/YAxisGrid.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { G, Line } from 'react-native-svg';
+import { useTheme } from '../../../theme';
+import { AxisCoordinates, YAxisConfig } from '../types';
+import { DASH_ARRAY } from './constants';
+import useGenerateTicks from './hooks/useGenerateTicks';
+import useScaleLinearY from './hooks/useScaleLinearY';
+
+export type YAxisGridProps = {
+  yAxisConfig: Omit<YAxisConfig, 'labels'> & { minValue?: number };
+  coordinates: AxisCoordinates;
+};
+
+const YAxisGrid = ({ yAxisConfig, coordinates }: YAxisGridProps) => {
+  const theme = useTheme();
+  const { maxValue, minValue, step, tick } = yAxisConfig;
+  const { xStart, xEnd, yStart, yEnd } = coordinates;
+  const {
+    colors: { gridStroke },
+  } = theme.__hd__.chart;
+
+  const maxValueOrZero = maxValue || 0;
+  const minValueOrZero = minValue || 0;
+
+  const scaleY = useScaleLinearY({
+    maxValue: maxValueOrZero,
+    minValue: minValueOrZero,
+    yStart,
+    yEnd,
+  });
+
+  const tickInterval = tick?.interval || step;
+
+  const ticks = useGenerateTicks({
+    maxValue: maxValueOrZero,
+    minValue: minValueOrZero,
+    step: tickInterval,
+  });
+
+  return (
+    <G testID="y-axis-grid">
+      {ticks.map((value) => (
+        <Line
+          testID={`y-axis-grid-${value}`}
+          key={value}
+          x1={xStart}
+          y1={scaleY(value)}
+          x2={xEnd}
+          y2={scaleY(value)}
+          stroke={gridStroke}
+          strokeDasharray={DASH_ARRAY}
+        />
+      ))}
+    </G>
+  );
+};
+
+export default YAxisGrid;

package/src/components/Chart/shared/__tests__/ChartFrame.spec.tsx

@@ -0,0 +1,125 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import { Button, Typography } from '../../../..';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import ChartFrame, { ChartFrameProps } from '../ChartFrame';
+
+const onButtonPress = jest.fn();
+
+const chartFrameProps: ChartFrameProps = {
+  xAxisConfig: {
+    labels: ['May 2025', 'Jun 2025', 'Jul 2025', 'Aug 2025'],
+  },
+  yAxisConfig: {
+    labels: ['$0', '$20', '$40', '$60', '$80'],
+    maxValue: 80,
+    step: 20,
+  },
+  width: 100,
+  height: 100,
+  headerConfig: {
+    title: 'Chart title',
+    actionsExtra: <Button text="Button" onPress={onButtonPress} />,
+  },
+  renderContent: () => <Typography.Body>Chart content</Typography.Body>,
+};
+
+describe('ChartFrame', () => {
+  it('should render correctly', () => {
+    const { toJSON, getByText, getByTestId } = renderWithTheme(
+      <ChartFrame {...chartFrameProps} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+
+    // Chart header
+    expect(getByText('Chart title')).toBeVisible();
+    expect(getByText('Button')).toBeVisible();
+    fireEvent.press(getByText('Button'));
+    expect(onButtonPress).toHaveBeenCalled();
+
+    // Y Axis labels
+    expect(getByText('$0')).toBeVisible();
+    expect(getByText('$20')).toBeVisible();
+    expect(getByText('$40')).toBeVisible();
+    expect(getByText('$60')).toBeVisible();
+    expect(getByText('$80')).toBeVisible();
+
+    // Y Axis grid
+    expect(getByTestId('y-axis-grid')).toBeVisible();
+
+    // X Axis labels
+    expect(getByText('May 2025')).toBeVisible();
+    expect(getByText('Jun 2025')).toBeVisible();
+    expect(getByText('Jul 2025')).toBeVisible();
+    expect(getByText('Aug 2025')).toBeVisible();
+
+    // X Axis grid
+    expect(getByTestId('x-axis-grid')).toBeVisible();
+
+    // Chart content
+    expect(getByText('Chart content')).toBeVisible();
+  });
+
+  it('should render empty state when data is empty', () => {
+    const { toJSON, getByText, queryByText } = renderWithTheme(
+      <ChartFrame {...chartFrameProps} isEmpty emptyText="NO RECENT DATA" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+
+    // Empty state
+    expect(getByText('NO RECENT DATA')).toBeVisible();
+    expect(queryByText('Chart content')).toBeNull();
+
+    // Y Axis labels
+    expect(getByText('$0')).toBeVisible();
+    expect(getByText('$20')).toBeVisible();
+    expect(getByText('$40')).toBeVisible();
+    expect(getByText('$60')).toBeVisible();
+    expect(getByText('$80')).toBeVisible();
+
+    // X Axis labels
+    expect(getByText('May 2025')).toBeVisible();
+    expect(getByText('Jun 2025')).toBeVisible();
+    expect(getByText('Jul 2025')).toBeVisible();
+    expect(getByText('Aug 2025')).toBeVisible();
+  });
+
+  it('should not render empty state when emptyText is provided', () => {
+    const { toJSON, getByText, queryByText } = renderWithTheme(
+      <ChartFrame {...chartFrameProps} isEmpty />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(queryByText('Chart content')).toBeNull();
+
+    // Y Axis labels
+    expect(getByText('$0')).toBeVisible();
+    expect(getByText('$20')).toBeVisible();
+    expect(getByText('$40')).toBeVisible();
+    expect(getByText('$60')).toBeVisible();
+    expect(getByText('$80')).toBeVisible();
+
+    // X Axis labels
+    expect(getByText('May 2025')).toBeVisible();
+    expect(getByText('Jun 2025')).toBeVisible();
+    expect(getByText('Jul 2025')).toBeVisible();
+    expect(getByText('Aug 2025')).toBeVisible();
+  });
+
+  it('should not render X Axis grid when hideXAxisGrid is true', () => {
+    const { queryByTestId } = renderWithTheme(
+      <ChartFrame {...chartFrameProps} hideXAxisGrid />
+    );
+    expect(queryByTestId('x-axis-grid')).toBeNull();
+  });
+
+  it('should not render Y Axis grid when hideYAxisGrid is true', () => {
+    const { queryByTestId } = renderWithTheme(
+      <ChartFrame {...chartFrameProps} hideYAxisGrid />
+    );
+    expect(queryByTestId('y-axis-grid')).toBeNull();
+  });
+});

package/src/components/Chart/shared/__tests__/ChartHeader.spec.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import { Button } from '../../../..';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import ChartHeader from '../ChartHeader';
+
+describe('ChartHeader', () => {
+  it('should render correctly', () => {
+    const onPress = jest.fn();
+    const { toJSON, getByText } = renderWithTheme(
+      <ChartHeader
+        title="Chart title"
+        actionsExtra={<Button onPress={onPress} text="Button" />}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+
+    fireEvent.press(getByText('Button'));
+    expect(onPress).toHaveBeenCalled();
+  });
+});

package/src/components/Chart/shared/__tests__/EmptyState.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import EmptyState from '../EmptyState';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+
+describe('EmptyState', () => {
+  it('should render', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <EmptyState
+        coordinates={{ xStart: 50, xEnd: 300, yStart: 50, yEnd: 300 }}
+        content="No data"
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('No data')).toBeVisible();
+  });
+
+  it('renders correctly on web', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <EmptyState
+        coordinates={{ xStart: 50, xEnd: 300, yStart: 50, yEnd: 300 }}
+        content="No data"
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('No data')).toBeVisible();
+  });
+});

package/src/components/Chart/shared/__tests__/XAXisGrid.spec.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import XAxisGrid, { XAxisGridProps } from '../XAxisGrid';
+
+const xAxisGridProps: XAxisGridProps = {
+  xAxisConfig: {
+    labels: ['1', '2', '3', '4', '5'],
+  },
+  coordinates: {
+    xStart: 0,
+    xEnd: 100,
+    yStart: 0,
+    yEnd: 100,
+  },
+};
+
+describe('XAxisGrid', () => {
+  it('should render correctly', () => {
+    const { toJSON, getByTestId } = renderWithTheme(
+      <XAxisGrid {...xAxisGridProps} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getByTestId('x-axis-grid-1')).toBeVisible();
+    expect(getByTestId('x-axis-grid-2')).toBeVisible();
+    expect(getByTestId('x-axis-grid-3')).toBeVisible();
+    expect(getByTestId('x-axis-grid-4')).toBeVisible();
+    expect(getByTestId('x-axis-grid-5')).toBeVisible();
+  });
+});

package/src/components/Chart/shared/__tests__/XAxis.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import XAxis, { XAxisProps } from '../XAxis';
+
+const mockXAxisProps: XAxisProps = {
+  xAxisConfig: {
+    labels: ['Label 1', 'Label 2', 'Label 3'],
+  },
+  coordinates: {
+    xStart: 0,
+    xEnd: 100,
+    yStart: 0,
+    yEnd: 100,
+  },
+};
+
+describe('XAxis', () => {
+  it('should render correctly', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <XAxis {...mockXAxisProps} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Label 1')).toBeVisible();
+    expect(getByText('Label 2')).toBeVisible();
+    expect(getByText('Label 3')).toBeVisible();
+  });
+
+  it('renders correctly on web', () => {
+    Platform.OS = 'web';
+
+    const { getByText, toJSON } = renderWithTheme(
+      <XAxis {...mockXAxisProps} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Label 1')).toBeVisible();
+    expect(getByText('Label 2')).toBeVisible();
+    expect(getByText('Label 3')).toBeVisible();
+  });
+});

package/src/components/Chart/shared/__tests__/YAxis.spec.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import YAxis, { YAxisProps } from '../YAxis';
+
+const mockYAxisProps: YAxisProps = {
+  yAxisConfig: {
+    maxValue: 100,
+    step: 20,
+  },
+  coordinates: {
+    xStart: 0,
+    xEnd: 100,
+    yStart: 0,
+    yEnd: 100,
+  },
+};
+
+const mockYAxisConfigWithLabels: YAxisProps = {
+  yAxisConfig: {
+    maxValue: 100,
+    step: 20,
+    labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
+  },
+  coordinates: {
+    xStart: 0,
+    xEnd: 100,
+    yStart: 0,
+    yEnd: 100,
+  },
+};
+
+describe('YAxis', () => {
+  it('should render correctly', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <YAxis {...mockYAxisProps} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('20')).toBeVisible();
+    expect(getByText('40')).toBeVisible();
+    expect(getByText('60')).toBeVisible();
+    expect(getByText('80')).toBeVisible();
+    expect(getByText('100')).toBeVisible();
+  });
+
+  it('should render correctly with labels', () => {
+    const { getByText, toJSON } = renderWithTheme(
+      <YAxis {...mockYAxisConfigWithLabels} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Label 1')).toBeVisible();
+    expect(getByText('Label 2')).toBeVisible();
+    expect(getByText('Label 3')).toBeVisible();
+    expect(getByText('Label 4')).toBeVisible();
+    expect(getByText('Label 5')).toBeVisible();
+  });
+
+  it('renders correctly on web', () => {
+    Platform.OS = 'web';
+
+    const { getByText, toJSON } = renderWithTheme(
+      <YAxis {...mockYAxisProps} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('20')).toBeVisible();
+    expect(getByText('40')).toBeVisible();
+    expect(getByText('60')).toBeVisible();
+    expect(getByText('80')).toBeVisible();
+    expect(getByText('100')).toBeVisible();
+  });
+});

package/src/components/Chart/shared/__tests__/YAxisGrid.spec.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import YAxisGrid, { YAxisGridProps } from '../YAxisGrid';
+
+const yAxisGridProps: YAxisGridProps = {
+  yAxisConfig: {
+    maxValue: 10000,
+    step: 5000,
+    tick: {
+      interval: 2000,
+    },
+  },
+  coordinates: {
+    xStart: 0,
+    xEnd: 100,
+    yStart: 0,
+    yEnd: 100,
+  },
+};
+
+describe('YAxisGrid', () => {
+  it('should render correctly', () => {
+    const { toJSON, getByTestId } = renderWithTheme(
+      <YAxisGrid {...yAxisGridProps} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getByTestId('y-axis-grid-0')).toBeVisible();
+    expect(getByTestId('y-axis-grid-2000')).toBeVisible();
+    expect(getByTestId('y-axis-grid-4000')).toBeVisible();
+    expect(getByTestId('y-axis-grid-6000')).toBeVisible();
+    expect(getByTestId('y-axis-grid-8000')).toBeVisible();
+    expect(getByTestId('y-axis-grid-10000')).toBeVisible();
+  });
+});