@axinom/mosaic-ui 0.66.0-rc.9 → 0.66.0

package/src/components/List/ListRow/ListRowCell/ListRowCell.spec.tsx

@@ -0,0 +1,491 @@
+import { mount, shallow } from 'enzyme';
+import React from 'react';
+import { Column } from '../..';
+import { Data } from '../../../..';
+import { ListRowCell } from './ListRowCell';
+
+interface TestData extends Data {
+  id: string;
+  name: string;
+  age: number;
+  date: Date;
+}
+
+const mockData: TestData = {
+  id: '123',
+  name: 'Test User',
+  age: 30,
+  date: new Date('2023-01-15T10:30:00'),
+};
+
+const dateFormatter = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
+});
+
+const numberFormatter = new Intl.NumberFormat('en-US');
+
+describe('ListRowCell', () => {
+  it('renders the component without crashing', () => {
+    const column: Column<TestData> = {
+      propertyName: 'name',
+      label: 'Name',
+    };
+
+    const wrapper = shallow(
+      <ListRowCell
+        column={column}
+        data={mockData}
+        dateFormatter={dateFormatter}
+        numberFormatter={numberFormatter}
+      />,
+    );
+
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('renders a string value correctly', () => {
+    const column: Column<TestData> = {
+      propertyName: 'name',
+      label: 'Name',
+    };
+
+    const wrapper = mount(
+      <ListRowCell
+        column={column}
+        data={mockData}
+        dateFormatter={dateFormatter}
+        numberFormatter={numberFormatter}
+      />,
+    );
+
+    expect(wrapper.text()).toBe('Test User');
+  });
+
+  it('renders a number value with number formatter', () => {
+    const column: Column<TestData> = {
+      propertyName: 'age',
+      label: 'Age',
+    };
+
+    const wrapper = mount(
+      <ListRowCell
+        column={column}
+        data={mockData}
+        dateFormatter={dateFormatter}
+        numberFormatter={numberFormatter}
+      />,
+    );
+
+    expect(wrapper.text()).toBe(numberFormatter.format(30));
+  });
+
+  it('renders a date value with date formatter', () => {
+    const column: Column<TestData> = {
+      propertyName: 'date',
+      label: 'Date',
+    };
+
+    const wrapper = mount(
+      <ListRowCell
+        column={column}
+        data={mockData}
+        dateFormatter={dateFormatter}
+        numberFormatter={numberFormatter}
+      />,
+    );
+
+    expect(wrapper.text()).toBe(dateFormatter.format(mockData.date));
+  });
+
+  it('uses custom renderer when provided', () => {
+    const column: Column<TestData> = {
+      propertyName: 'name',
+      label: 'Name',
+      render: (value) => `Custom: ${value}`,
+    };
+
+    const wrapper = mount(
+      <ListRowCell
+        column={column}
+        data={mockData}
+        dateFormatter={dateFormatter}
+        numberFormatter={numberFormatter}
+      />,
+    );
+
+    expect(wrapper.text()).toBe('Custom: Test User');
+  });
+
+  it('handles null values', () => {
+    const nullData = { ...mockData, name: null as unknown as string };
+    const column: Column<TestData> = {
+      propertyName: 'name',
+      label: 'Name',
+    };
+
+    const wrapper = mount(
+      <ListRowCell
+        column={column}
+        data={nullData}
+        dateFormatter={dateFormatter}
+        numberFormatter={numberFormatter}
+      />,
+    );
+
+    expect(wrapper.text()).toBe('');
+  });
+
+  it('handles undefined values', () => {
+    const undefinedData = { ...mockData, name: undefined as unknown as string };
+    const column: Column<TestData> = {
+      propertyName: 'name',
+      label: 'Name',
+    };
+
+    const wrapper = mount(
+      <ListRowCell
+        column={column}
+        data={undefinedData}
+        dateFormatter={dateFormatter}
+        numberFormatter={numberFormatter}
+      />,
+    );
+
+    expect(wrapper.text()).toBe('');
+  });
+
+  it('renders tooltip with column text by default', () => {
+    const column: Column<TestData> = {
+      propertyName: 'name',
+      label: 'Name',
+    };
+
+    const wrapper = mount(
+      <ListRowCell
+        column={column}
+        data={mockData}
+        dateFormatter={dateFormatter}
+        numberFormatter={numberFormatter}
+      />,
+    );
+
+    const cell = wrapper.find('.cell');
+    expect(cell.prop('title')).toBe('Test User');
+  });
+
+  it('does not render tooltip when column.tooltip is false', () => {
+    const column: Column<TestData> = {
+      propertyName: 'name',
+      label: 'Name',
+      tooltip: false,
+    };
+
+    const wrapper = mount(
+      <ListRowCell
+        column={column}
+        data={mockData}
+        dateFormatter={dateFormatter}
+        numberFormatter={numberFormatter}
+      />,
+    );
+
+    const cell = wrapper.find('.cell');
+    expect(cell.prop('title')).toBeUndefined();
+  });
+
+  describe('text alignment', () => {
+    it('applies default horizontal text alignment (left)', () => {
+      const column: Column<TestData> = {
+        propertyName: 'name',
+        label: 'Name',
+      };
+
+      const wrapper = mount(
+        <ListRowCell
+          column={column}
+          data={mockData}
+          dateFormatter={dateFormatter}
+          numberFormatter={numberFormatter}
+        />,
+      );
+
+      const cell = wrapper.find('.cell');
+      expect(cell.prop('style')).toHaveProperty('textAlign', 'left');
+    });
+
+    it('applies custom horizontal text alignment', () => {
+      const column: Column<TestData> = {
+        propertyName: 'name',
+        label: 'Name',
+      };
+
+      const wrapper = mount(
+        <ListRowCell
+          column={column}
+          data={mockData}
+          horizontalTextAlign="right"
+          dateFormatter={dateFormatter}
+          numberFormatter={numberFormatter}
+        />,
+      );
+
+      const cell = wrapper.find('.cell');
+      expect(cell.prop('style')).toHaveProperty('textAlign', 'right');
+    });
+
+    it('applies default vertical text alignment (center)', () => {
+      const column: Column<TestData> = {
+        propertyName: 'name',
+        label: 'Name',
+      };
+
+      const wrapper = mount(
+        <ListRowCell
+          column={column}
+          data={mockData}
+          dateFormatter={dateFormatter}
+          numberFormatter={numberFormatter}
+        />,
+      );
+
+      const cell = wrapper.find('.cell');
+      expect(cell.prop('style')).toHaveProperty('alignSelf', 'center');
+    });
+
+    it('applies custom vertical text alignment', () => {
+      const column: Column<TestData> = {
+        propertyName: 'name',
+        label: 'Name',
+      };
+
+      const wrapper = mount(
+        <ListRowCell
+          column={column}
+          data={mockData}
+          verticalTextAlign="start"
+          dateFormatter={dateFormatter}
+          numberFormatter={numberFormatter}
+        />,
+      );
+
+      const cell = wrapper.find('.cell');
+      expect(cell.prop('style')).toHaveProperty('alignSelf', 'start');
+    });
+
+    it('applies horizontal column alignment from column config', () => {
+      const column: Column<TestData> = {
+        propertyName: 'name',
+        label: 'Name',
+        horizontalColumnAlign: 'right',
+      };
+
+      const wrapper = mount(
+        <ListRowCell
+          column={column}
+          data={mockData}
+          dateFormatter={dateFormatter}
+          numberFormatter={numberFormatter}
+        />,
+      );
+
+      const cell = wrapper.find('.cell');
+      expect(cell.prop('style')).toHaveProperty('justifySelf', 'right');
+    });
+  });
+
+  describe('text wrapping', () => {
+    it('applies nowrap class by default (textWrap = false)', () => {
+      const column: Column<TestData> = {
+        propertyName: 'name',
+        label: 'Name',
+      };
+
+      const wrapper = mount(
+        <ListRowCell
+          column={column}
+          data={mockData}
+          dateFormatter={dateFormatter}
+          numberFormatter={numberFormatter}
+        />,
+      );
+
+      const cell = wrapper.find('.cell');
+      expect(cell.hasClass('nowrap')).toBe(true);
+    });
+
+    it('does not apply nowrap class when textWrap is true', () => {
+      const column: Column<TestData> = {
+        propertyName: 'name',
+        label: 'Name',
+      };
+
+      const wrapper = mount(
+        <ListRowCell
+          column={column}
+          data={mockData}
+          textWrap={true}
+          dateFormatter={dateFormatter}
+          numberFormatter={numberFormatter}
+        />,
+      );
+
+      const cell = wrapper.find('.cell');
+      expect(cell.hasClass('nowrap')).toBe(false);
+    });
+  });
+
+  describe('data-test-id', () => {
+    it('sets data-test-id based on propertyName when render returns a string', () => {
+      const column: Column<TestData> = {
+        propertyName: 'name',
+        label: 'Name',
+        render: (value) => `Custom: ${value}`,
+      };
+
+      const wrapper = mount(
+        <ListRowCell
+          column={column}
+          data={mockData}
+          dateFormatter={dateFormatter}
+          numberFormatter={numberFormatter}
+        />,
+      );
+
+      const cell = wrapper.find('.cell');
+      expect(cell.prop('data-test-id')).toBeNull();
+    });
+
+    it('sets data-test-id on inner span for standard values', () => {
+      const column: Column<TestData> = {
+        propertyName: 'name',
+        label: 'Name',
+      };
+
+      const wrapper = mount(
+        <ListRowCell
+          column={column}
+          data={mockData}
+          dateFormatter={dateFormatter}
+          numberFormatter={numberFormatter}
+        />,
+      );
+
+      // For standard values, data-test-id is on the inner span, not the cell div
+      const cell = wrapper.find('.cell');
+      expect(cell.prop('data-test-id')).toBeNull();
+
+      // Check that the span inside has the data-test-id
+      const span = wrapper.find(
+        'span[data-test-id="list-entry-property:name"]',
+      );
+      expect(span).toHaveLength(1);
+    });
+
+    it('sets data-test-id on cell when custom renderer returns JSX', () => {
+      const column: Column<TestData> = {
+        propertyName: 'name',
+        label: 'Name',
+        render: (value) => <div className="custom-render">{value}</div>,
+      };
+
+      const wrapper = mount(
+        <ListRowCell
+          column={column}
+          data={mockData}
+          dateFormatter={dateFormatter}
+          numberFormatter={numberFormatter}
+        />,
+      );
+
+      // For custom JSX renderers, data-test-id is on the cell div
+      const cell = wrapper.find('.cell');
+      expect(cell.prop('data-test-id')).toBe('list-entry-property:name');
+    });
+  });
+
+  describe('column key handling', () => {
+    it('uses propertyName as key when key is not provided', () => {
+      const column: Column<TestData> = {
+        propertyName: 'name',
+        label: 'Name',
+      };
+
+      const wrapper = shallow(
+        <ListRowCell
+          column={column}
+          data={mockData}
+          dateFormatter={dateFormatter}
+          numberFormatter={numberFormatter}
+        />,
+      );
+
+      const cellWrapper = wrapper.find('.cellWrapper');
+      expect(cellWrapper.key()).toBe('name');
+    });
+
+    it('uses custom key when provided', () => {
+      const column: Column<TestData> = {
+        propertyName: 'name',
+        label: 'Name',
+        key: 'custom-key',
+      };
+
+      const wrapper = shallow(
+        <ListRowCell
+          column={column}
+          data={mockData}
+          dateFormatter={dateFormatter}
+          numberFormatter={numberFormatter}
+        />,
+      );
+
+      const cellWrapper = wrapper.find('.cellWrapper');
+      expect(cellWrapper.key()).toBe('custom-key');
+    });
+  });
+
+  describe('unbound columns (no propertyName)', () => {
+    it('renders custom renderer for unbound column', () => {
+      const column: Column<TestData> = {
+        key: 'actions',
+        label: 'Actions',
+        render: (_value, data) => <button>Edit {data.name}</button>,
+      };
+
+      const wrapper = mount(
+        <ListRowCell
+          column={column}
+          data={mockData}
+          dateFormatter={dateFormatter}
+          numberFormatter={numberFormatter}
+        />,
+      );
+
+      expect(wrapper.find('button').text()).toBe('Edit Test User');
+    });
+
+    it('handles unbound column with string render result', () => {
+      const column: Column<TestData> = {
+        key: 'status',
+        label: 'Status',
+        render: () => 'Active',
+      };
+
+      const wrapper = mount(
+        <ListRowCell
+          column={column}
+          data={mockData}
+          dateFormatter={dateFormatter}
+          numberFormatter={numberFormatter}
+        />,
+      );
+
+      expect(wrapper.text()).toBe('Active');
+    });
+  });
+});

package/src/components/List/ListRow/ListRowCell/ListRowCell.tsx

@@ -0,0 +1,57 @@
+import clsx from 'clsx';
+import React from 'react';
+import type { Data } from '../../../../types/data';
+import type { Column } from '../../List.model';
+import classes from './ListRowCell.scss';
+import { renderData } from './renderData';
+
+interface ListRowCellProps<T extends Data> {
+  column: Column<T>;
+  data: T;
+  horizontalTextAlign?: 'left' | 'right' | 'center';
+  verticalTextAlign?: 'start' | 'center' | 'end';
+  textWrap?: boolean;
+  dateFormatter: Intl.DateTimeFormat;
+  numberFormatter: Intl.NumberFormat;
+}
+
+export const ListRowCell = <T extends Data>({
+  column,
+  data,
+  horizontalTextAlign = 'left',
+  verticalTextAlign = 'center',
+  textWrap = false,
+  dateFormatter,
+  numberFormatter,
+}: ListRowCellProps<T>): JSX.Element => {
+  const { columnData, tooltip, isDataTestIdSet } = renderData<T>(
+    column,
+    data,
+    dateFormatter,
+    numberFormatter,
+  );
+
+  return (
+    <div
+      key={column.key ?? (column.propertyName as string)}
+      className={classes.cellWrapper}
+    >
+      <div
+        className={clsx(classes.cell, { [classes.nowrap]: !textWrap })}
+        title={tooltip}
+        style={{
+          justifySelf: column.horizontalColumnAlign, // Horizontal alignment based on column config
+          alignSelf: verticalTextAlign, // Vertical alignment based on props
+          textAlign: horizontalTextAlign, // Additional text alignment inside the cell
+        }}
+        data-test-id={
+          isDataTestIdSet
+            ? null
+            : `list-entry-property:${column.propertyName as string}`
+        }
+      >
+        {columnData}
+      </div>
+    </div>
+  );
+};

package/src/components/List/ListRow/ListRowCell/renderData.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { Data } from '../../../../types';
+import { getTooltipText } from '../../../../utils/ToolTipHelpers';
+import { Column } from '../../List.model';
+
+export const renderData = <T extends Data>(
+  column: Column<T>,
+  rowData: T,
+  dateFormatter: Intl.DateTimeFormat,
+  numberFormatter: Intl.NumberFormat,
+): {
+  columnData: React.ReactNode;
+  tooltip: string | undefined;
+  isDataTestIdSet: boolean;
+} => {
+  const getTooltip = (value: unknown): string | undefined =>
+    column.tooltip !== false ? getTooltipText(value) : undefined;
+
+  if (!column.propertyName) {
+    const columnData = column.render?.(undefined, rowData);
+
+    if (typeof columnData === 'string') {
+      return {
+        columnData: (
+          <span
+            data-test-id={`list-entry-property:${
+              column.propertyName as string
+            }`}
+          >
+            {columnData}
+          </span>
+        ),
+        isDataTestIdSet: true,
+        tooltip: getTooltip(columnData),
+      };
+    }
+
+    return {
+      columnData,
+      tooltip: getTooltip(columnData),
+      isDataTestIdSet: false,
+    };
+  }
+  const value: unknown = rowData[column.propertyName];
+  if (column.render) {
+    const columnData = column.render(value, rowData);
+
+    if (typeof columnData === 'string') {
+      return {
+        columnData: (
+          <span
+            data-test-id={`list-entry-property:${
+              column.propertyName as string
+            }`}
+          >
+            {columnData}
+          </span>
+        ),
+        isDataTestIdSet: true,
+        tooltip: getTooltip(columnData),
+      };
+    }
+
+    return {
+      columnData,
+      tooltip: getTooltip(columnData),
+      isDataTestIdSet: false,
+    };
+  }
+
+  if (value === null || value === undefined) {
+    return {
+      columnData: (
+        <span
+          data-test-id={`list-entry-property:${column.propertyName as string}`}
+        />
+      ),
+      tooltip: undefined,
+      isDataTestIdSet: true,
+    };
+  }
+
+  if (typeof value === 'number') {
+    const columnData = numberFormatter.format(value);
+    return {
+      columnData: (
+        <span
+          data-test-id={`list-entry-property:${column.propertyName as string}`}
+        >
+          {columnData}
+        </span>
+      ),
+      tooltip: getTooltip(columnData),
+      isDataTestIdSet: true,
+    };
+  }
+
+  if (value instanceof Date) {
+    const columnData = dateFormatter.format(value);
+    return {
+      columnData: (
+        <span
+          data-test-id={`list-entry-property:${column.propertyName as string}`}
+        >
+          {columnData}
+        </span>
+      ),
+      tooltip: getTooltip(columnData),
+      isDataTestIdSet: true,
+    };
+  }
+
+  return {
+    columnData: (
+      <span
+        data-test-id={`list-entry-property:${column.propertyName as string}`}
+      >
+        {String(value)}
+      </span>
+    ),
+    tooltip: getTooltip(String(value)),
+    isDataTestIdSet: true,
+  };
+};