@axinom/mosaic-ui 0.65.0-rc.3 → 0.65.0-rc.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.65.0-rc.3",
+  "version": "0.65.0-rc.4",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -112,5 +112,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2019ebbf0967ef498f4a3c7daeeea120c7d0e36b"
+  "gitHead": "dd33a828c6c8e435b04c880b71dca0a9297170a5"
 }

package/src/components/List/List.stories.tsx

@@ -12,12 +12,13 @@ import { List, ListProps } from './List';
 import { Column, ColumnMap, ListSelectMode, SortData } from './List.model';
 import { sortStoryData, useLocalSort } from './List.stories.helper';
 import { ListRowProps } from './ListRow/ListRow';
-import { createStateRenderer } from './ListRow/Renderers';
+import { TagsRenderer, createStateRenderer } from './ListRow/Renderers';
 
 interface ListStoryData {
   id: number;
   desc: string;
   title: string;
+  tags: string[];
 }
 
 // Extracted the type into a new file, as Typescript has issues with the syntax
@@ -31,6 +32,7 @@ interface StateStoryData {
   state: string;
   title: string;
   desc: string;
+  tags: string[];
 }
 
 type StateStoryType = ListProps<StateStoryData>;
@@ -49,8 +51,16 @@ const defaultColumns: Column<ListStoryData>[] = [
     propertyName: 'desc',
     label: 'Description',
   },
+  {
+    propertyName: 'tags',
+    label: 'Tags',
+    sortable: false,
+    render: TagsRenderer,
+  },
 ];
 
+const defaultTags = faker.lorem.words(10).split(' ');
+
 const generateData = (amount: number): ListStoryData[] =>
   generateItemArray(amount, (index) => ({
     id: index + 1,
@@ -60,6 +70,10 @@ const generateData = (amount: number): ListStoryData[] =>
     title: `Item ${index + 1}: ${faker.random.words(
       faker.datatype.number({ min: 1, max: 3 }),
     )}`,
+    tags: faker.helpers.arrayElements(
+      defaultTags,
+      faker.datatype.number({ min: 1, max: 10 }),
+    ),
   }));
 
 const selectionOptions = enumToObj(ListSelectMode);
@@ -511,6 +525,10 @@ export const PagedData: StoryObj<StoryListType> = {
             title: `Item ${index + dataIndexes}: ${faker.random.words(
               faker.datatype.number({ min: 1, max: 3 }),
             )}`,
+            tags: faker.helpers.arrayElements(
+              ['Tag1', 'Tag2', 'Tag3', 'Tag4', 'Tag5'],
+              faker.datatype.number({ min: 1, max: 3 }),
+            ),
           }));
           setMockIsLoading(false);
           setData(sortStoryData(sort, [...data, ...newData]));

package/src/components/List/ListRow/Renderers/TagsRenderer/TagsRenderer.scss

@@ -0,0 +1,25 @@
+@import '../../../../../styles/common.scss';
+
+.container {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: min-content;
+  gap: 5px;
+  align-items: center;
+
+  .tag {
+    background-color: var(
+      --list-tag-background-color,
+      $list-tag-background-color
+    );
+    padding: 5px;
+  }
+
+  .overflowIndicator {
+    color: var(
+      --list-tag-overflow-background-color,
+      $list-tag-overflow-background-color
+    );
+    padding: 5px;
+  }
+}

package/src/components/List/ListRow/Renderers/TagsRenderer/TagsRenderer.spec.tsx

@@ -0,0 +1,154 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { TagsRenderer } from './TagsRenderer';
+
+// Mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
+interface RendererWrapperProps {
+  /** Column data */
+  value: unknown;
+}
+
+const RendererWrapper: React.FC<RendererWrapperProps> = ({ value }) => {
+  return <>{TagsRenderer(value)}</>;
+};
+
+const defaultProps: RendererWrapperProps = {
+  value: [],
+};
+
+describe('TagsRenderer', () => {
+  beforeEach(() => {
+    // Reset mocks
+    jest.clearAllMocks();
+  });
+
+  it('renders the component without crashing', () => {
+    const { container } = render(<RendererWrapper value={['test']} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('returns empty content when value is not an array', () => {
+    const { container } = render(
+      <RendererWrapper {...defaultProps} value="not-an-array" />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('returns empty content when value is null', () => {
+    const { container } = render(
+      <RendererWrapper {...defaultProps} value={null} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('returns empty content when value is undefined', () => {
+    const { container } = render(
+      <RendererWrapper {...defaultProps} value={undefined} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders tags when array is provided', () => {
+    const mockTags = ['tag1', 'tag2', 'tag3'];
+
+    // Mock container width measurement
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      value: 300, // Assume container width of 300px
+    });
+
+    render(<RendererWrapper {...defaultProps} value={mockTags} />);
+
+    // Since we're mocking ResizeObserver, simulate the callback
+    const resizeObserverCallback = (global.ResizeObserver as jest.Mock).mock
+      .calls[0]?.[0];
+
+    if (resizeObserverCallback) {
+      resizeObserverCallback([]);
+    }
+
+    // Check that container exists
+    const container = screen.getByTestId('tags-container');
+    expect(container).toBeInTheDocument();
+  });
+
+  it('displays overflow indicator when configured', () => {
+    const mockTags = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'];
+
+    // Mock container and tag measurements to force overflow
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      value: 100, // Small container width to force overflow
+    });
+
+    // Mock document.createElement to control tag width measurements
+    const originalCreateElement = document.createElement;
+    document.createElement = jest.fn().mockImplementation((tagName) => {
+      const element = originalCreateElement.call(document, tagName);
+      if (tagName === 'div') {
+        Object.defineProperty(element, 'offsetWidth', {
+          value: 50, // Each tag is 50px wide
+        });
+      }
+      return element;
+    });
+
+    render(<RendererWrapper {...defaultProps} value={mockTags} />);
+
+    // Simulate ResizeObserver callback
+    const resizeObserverCallback = (global.ResizeObserver as jest.Mock).mock
+      .calls[0]?.[0];
+
+    if (resizeObserverCallback) {
+      resizeObserverCallback([]);
+    }
+
+    // Test passes if no errors occur - the overflow logic depends on real DOM measurements
+    expect(screen.getByTestId('tags-container')).toBeInTheDocument();
+
+    // Restore
+    document.createElement = originalCreateElement;
+  });
+
+  it('handles overflow behavior', () => {
+    const mockTags = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'];
+
+    render(<RendererWrapper {...defaultProps} value={mockTags} />);
+
+    // Test that the component renders without errors
+    const container = screen.getByTestId('tags-container');
+    expect(container).toBeInTheDocument();
+  });
+
+  it('handles empty array', () => {
+    render(<RendererWrapper {...defaultProps} value={[]} />);
+
+    // Should render container but with no tags
+    const container = screen.getByTestId('tags-container');
+    expect(container).toBeInTheDocument();
+  });
+
+  it('cleans up ResizeObserver on unmount', () => {
+    const mockDisconnect = jest.fn();
+    (global.ResizeObserver as jest.Mock).mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: mockDisconnect,
+    }));
+
+    const { unmount } = render(
+      <RendererWrapper {...defaultProps} value={['tag1', 'tag2']} />,
+    );
+
+    unmount();
+
+    expect(mockDisconnect).toHaveBeenCalled();
+  });
+});

package/src/components/List/ListRow/Renderers/TagsRenderer/TagsRenderer.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect, useRef, useState } from 'react';
+import classes from './TagsRenderer.scss';
+
+export const TagsRenderer = (val: unknown): JSX.Element => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const tagRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const [visibleItems, setVisibleItems] = useState<string[]>([]);
+  const [hiddenItems, setHiddenItems] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (!Array.isArray(val) || !containerRef.current) {
+      return;
+    }
+
+    if (val.length === 0) {
+      setVisibleItems([]);
+      setHiddenItems([]);
+      return;
+    }
+
+    const calculateVisibleItems = (): void => {
+      const container = containerRef.current;
+      if (!container || tagRefs.current.length === 0) {
+        return;
+      }
+
+      const containerWidth = container.offsetWidth;
+      const gap = 5; // Gap between items from SCSS
+      const overflowIndicatorWidth = 60; // Approximate width for "... +X"
+
+      // Measure actual tag widths using refs
+      const tagWidths: number[] = [];
+      tagRefs.current.forEach((tagRef) => {
+        if (tagRef) {
+          tagWidths.push(tagRef.offsetWidth);
+        }
+      });
+
+      // Calculate how many items can fit
+      let totalWidth = 0;
+      let visibleCount = 0;
+
+      for (let i = 0; i < val.length; i++) {
+        const itemWidth = tagWidths[i] + (i > 0 ? gap : 0);
+        const wouldNeedOverflow = i < val.length - 1;
+        const requiredWidth =
+          totalWidth +
+          itemWidth +
+          (wouldNeedOverflow ? overflowIndicatorWidth + gap : 0);
+
+        if (requiredWidth <= containerWidth) {
+          totalWidth += itemWidth;
+          visibleCount++;
+        } else {
+          break;
+        }
+      }
+
+      // If we can't fit all items, reserve space for overflow indicator
+      if (visibleCount < val.length && visibleCount > 0) {
+        // Re-calculate with overflow indicator space reserved
+        totalWidth = 0;
+        visibleCount = 0;
+
+        for (let i = 0; i < val.length; i++) {
+          const itemWidth = tagWidths[i] + (i > 0 ? gap : 0);
+          const requiredWidth =
+            totalWidth + itemWidth + overflowIndicatorWidth + gap;
+
+          if (requiredWidth <= containerWidth && i < val.length - 1) {
+            totalWidth += itemWidth;
+            visibleCount++;
+          } else {
+            break;
+          }
+        }
+      }
+
+      setVisibleItems(val.slice(0, visibleCount));
+      setHiddenItems(val.slice(visibleCount));
+    };
+
+    // Initial calculation after render
+    const timer = setTimeout(() => {
+      calculateVisibleItems();
+    }, 0);
+
+    const resizeObserver = new ResizeObserver(calculateVisibleItems);
+    resizeObserver.observe(containerRef.current);
+
+    return () => {
+      clearTimeout(timer);
+      resizeObserver.disconnect();
+    };
+  }, [val]);
+
+  if (!Array.isArray(val)) {
+    return <></>;
+  }
+
+  const stringArray = val as string[];
+
+  // Create tooltip text for hidden items
+  const tooltipText = hiddenItems.length > 0 ? hiddenItems.join(', ') : '';
+
+  return (
+    <div
+      ref={containerRef}
+      className={classes.container}
+      data-testid="tags-container"
+      title={stringArray.join(', ')}
+    >
+      {stringArray.map((item, index) => {
+        const isVisible = visibleItems.includes(item);
+
+        return (
+          <div
+            key={`${item}-${index}`}
+            ref={(el) => {
+              tagRefs.current[index] = el;
+            }}
+            className={classes.tag}
+            style={{
+              visibility: isVisible ? 'visible' : 'hidden',
+              position: isVisible ? 'static' : 'absolute',
+            }}
+          >
+            {item}
+          </div>
+        );
+      })}
+      {hiddenItems.length > 0 && (
+        <div className={classes.overflowIndicator} title={tooltipText}>
+          {`+${hiddenItems.length}`}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/List/ListRow/Renderers/index.ts

@@ -2,4 +2,5 @@ export { BooleanDotRenderer } from './BooleanDotRenderer/BooleanDotRenderer';
 export { DateRenderer } from './DateRenderer/DateRenderer';
 export { createExternalLinkRenderer } from './ExternalLinkRenderer/ExternalLinkRenderer';
 export { createStateRenderer } from './StateRenderer/StateRenderer';
+export { TagsRenderer } from './TagsRenderer/TagsRenderer';
 export { TimestampRenderer } from './TimestampRenderer/TimestampRenderer';

package/src/components/Utils/Postgraphile/CreateConnectionRenderer.spec.ts

@@ -0,0 +1,259 @@
+import { TagsRenderer } from '../../List';
+import { createConnectionRenderer } from './CreateConnectionRenderer';
+
+jest.mock('../../List', () => ({
+  TagsRenderer: jest.fn(),
+}));
+
+const mockTagsRenderer = TagsRenderer as jest.MockedFunction<
+  typeof TagsRenderer
+>;
+
+interface TestConnection {
+  nodes: { id: string; name: string }[];
+}
+
+interface StringConnection {
+  nodes: string[];
+}
+
+describe('createConnectionRenderer', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('with renderAsTags = true (default)', () => {
+    it('should call TagsRenderer with mapped values when renderAsTags is true', () => {
+      const mockReturnValue = 'Mocked Tags JSX Element';
+      mockTagsRenderer.mockReturnValue(mockReturnValue as any);
+
+      const connection: TestConnection = {
+        nodes: [
+          { id: '1', name: 'Item 1' },
+          { id: '2', name: 'Item 2' },
+        ],
+      };
+
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const result = renderer(connection);
+
+      expect(mockTagsRenderer).toHaveBeenCalledWith(['Item 1', 'Item 2']);
+      expect(result).toBe(mockReturnValue);
+    });
+
+    it('should throw error when nodes is undefined', () => {
+      const connection = { nodes: undefined } as unknown as TestConnection;
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(selector);
+
+      expect(() => renderer(connection)).toThrow();
+      expect(mockTagsRenderer).not.toHaveBeenCalled();
+    });
+
+    it('should throw error when value is null', () => {
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(selector);
+
+      expect(() => renderer(null)).toThrow();
+      expect(mockTagsRenderer).not.toHaveBeenCalled();
+    });
+
+    it('should throw error when value is undefined', () => {
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(selector);
+
+      expect(() => renderer(undefined)).toThrow();
+      expect(mockTagsRenderer).not.toHaveBeenCalled();
+    });
+
+    it('should call TagsRenderer with empty array when nodes is empty', () => {
+      const mockReturnValue = 'Empty Tags JSX Element';
+      mockTagsRenderer.mockReturnValue(mockReturnValue as any);
+
+      const connection: TestConnection = { nodes: [] };
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const result = renderer(connection);
+
+      expect(mockTagsRenderer).toHaveBeenCalledWith([]);
+      expect(result).toBe(mockReturnValue);
+    });
+  });
+
+  describe('with renderAsTags = false', () => {
+    it('should return comma-separated string using selector', () => {
+      const connection: TestConnection = {
+        nodes: [
+          { id: '1', name: 'Item 1' },
+          { id: '2', name: 'Item 2' },
+          { id: '3', name: 'Item 3' },
+        ],
+      };
+
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(mockTagsRenderer).not.toHaveBeenCalled();
+      expect(result).toBe('Item 1, Item 2, Item 3');
+    });
+
+    it('should work with simple string arrays', () => {
+      const connection: StringConnection = {
+        nodes: ['apple', 'banana', 'cherry'],
+      };
+
+      const selector = (item: string) => item;
+      const renderer = createConnectionRenderer<StringConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(result).toBe('apple, banana, cherry');
+    });
+
+    it('should work with complex selector functions', () => {
+      const connection: TestConnection = {
+        nodes: [
+          { id: '1', name: 'Item 1' },
+          { id: '2', name: 'Item 2' },
+        ],
+      };
+
+      const selector = (item: { id: string; name: string }, index: number) =>
+        `${index + 1}. ${item.name} (${item.id})`;
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(result).toBe('1. Item 1 (1), 2. Item 2 (2)');
+    });
+
+    it('should return empty string when nodes array is empty', () => {
+      const connection: TestConnection = { nodes: [] };
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(result).toBe('');
+    });
+
+    it('should handle selector returning different types', () => {
+      interface NumberConnection {
+        nodes: { id: number; value: number }[];
+      }
+      const connection: NumberConnection = {
+        nodes: [
+          { id: 1, value: 100 },
+          { id: 2, value: 200 },
+        ],
+      };
+
+      const selector = (item: { id: number; value: number }) => item.value;
+      const renderer = createConnectionRenderer<NumberConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(result).toBe('100, 200');
+    });
+
+    it('should throw error when connection.nodes is undefined and renderAsTags is false', () => {
+      const connection = { nodes: undefined } as unknown as TestConnection;
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
+
+      expect(() => renderer(connection)).toThrow();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle nodes with special characters in comma-separated output', () => {
+      const connection: StringConnection = {
+        nodes: ['item, with comma', 'item with "quotes"', 'normal item'],
+      };
+
+      const selector = (item: string) => item;
+      const renderer = createConnectionRenderer<StringConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(result).toBe('item, with comma, item with "quotes", normal item');
+    });
+
+    it('should handle selector returning empty strings', () => {
+      const connection: TestConnection = {
+        nodes: [
+          { id: '1', name: '' },
+          { id: '2', name: 'Item 2' },
+          { id: '3', name: '' },
+        ],
+      };
+
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(result).toBe(', Item 2, ');
+    });
+
+    it('should handle single node connection', () => {
+      const connection: TestConnection = {
+        nodes: [{ id: '1', name: 'Single Item' }],
+      };
+
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(result).toBe('Single Item');
+    });
+  });
+
+  describe('type safety', () => {
+    it('should work with different connection node types', () => {
+      interface CustomConnection {
+        nodes: { customField: number; label: string }[];
+      }
+
+      const connection: CustomConnection = {
+        nodes: [
+          { customField: 42, label: 'Custom 1' },
+          { customField: 84, label: 'Custom 2' },
+        ],
+      };
+
+      const selector = (item: { customField: number; label: string }) =>
+        `${item.label}: ${item.customField}`;
+      const renderer = createConnectionRenderer<CustomConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(result).toBe('Custom 1: 42, Custom 2: 84');
+    });
+  });
+});

package/src/components/Utils/Postgraphile/{CreateConnectionRenderer.ts → CreateConnectionRenderer.tsx}

@@ -1,8 +1,15 @@
+import { ReactNode } from 'react';
+import { TagsRenderer } from '../../List';
+
 interface Connection {
   nodes: unknown[];
 }
 
-type SelectorFunction<T> = (value: T, index: number, array: T[]) => unknown;
+export type SelectorFunction<T> = (
+  value: T,
+  index: number,
+  array: T[],
+) => unknown;
 
 /**
  * Creates a renderer that will loop through each `node` on the value,
@@ -12,10 +19,18 @@ type SelectorFunction<T> = (value: T, index: number, array: T[]) => unknown;
  */
 export function createConnectionRenderer<T extends Connection>(
   selector: SelectorFunction<T['nodes'][number]>,
-): (val: unknown) => string {
-  return (val: unknown): string => {
+  renderAsTags = true,
+): (val: unknown) => string | ReactNode {
+  const ConnectionRenderer = (val: unknown): string | ReactNode => {
     const value = val as T;
 
+    if (renderAsTags) {
+      return TagsRenderer(value.nodes.map(selector));
+    }
+
     return value.nodes.map(selector).join(', ');
   };
+
+  ConnectionRenderer.displayName = 'ConnectionRenderer';
+  return ConnectionRenderer;
 }