@akinon/ai-modal-table 1.0.0

package/dist/cjs/ai-table/components/__tests__/row-actions.test.tsx

@@ -0,0 +1,507 @@
+import '@testing-library/jest-dom/vitest';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { IS_EDITING_INITIAL_VALUE } from '../../constants';
+import { ActionButtons } from '../row-actions';
+
+vi.mock('@akinon/ui-button', () => ({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Button: ({ children, icon, onClick, className, disabled, ...props }: any) => (
+    <button
+      onClick={onClick}
+      className={className}
+      disabled={disabled}
+      data-testid={`button-${icon}`}
+      data-icon={icon}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}));
+
+vi.mock('@akinon/ui-layout', () => ({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Flex: ({ children, ...props }: any) => (
+    <div data-testid="flex" {...props}>
+      {children}
+    </div>
+  )
+}));
+
+vi.mock('@akinon/ui-theme', () => ({
+  useToken: () => ({
+    token: { colorBorder: '#ccc' },
+    hashId: 'hash-id'
+  }),
+  getPrefixCls: vi.fn(cls => `ant-${cls}`)
+}));
+
+vi.mock('@ant-design/cssinjs', () => ({
+  useStyleRegister: vi.fn((_config, cb) => {
+    cb();
+    return (node: React.ReactNode) => node;
+  })
+}));
+
+describe('ActionButtons', () => {
+  const defaultProps = {
+    hasEdit: false,
+    isEditing: false,
+    isSelected: false,
+    rowId: 1,
+    setIsEditingPk: vi.fn(),
+    onToggleSelection: vi.fn(),
+    customActionButtons: undefined
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const renderComponent = (props = {}) => {
+    return render(<ActionButtons {...defaultProps} {...props} />);
+  };
+
+  describe('Rendering', () => {
+    it('should render flex container', () => {
+      renderComponent();
+      expect(screen.getByTestId('flex')).toBeInTheDocument();
+    });
+
+    it('should always render selection button', () => {
+      renderComponent();
+      expect(screen.getByTestId('button-katalogkontrol')).toBeInTheDocument();
+    });
+
+    it('should render edit button when hasEdit is true', () => {
+      renderComponent({ hasEdit: true });
+      expect(screen.getByTestId('button-edit')).toBeInTheDocument();
+    });
+
+    it('should not render edit button when hasEdit is false', () => {
+      renderComponent({ hasEdit: false });
+      expect(screen.queryByTestId('button-edit')).not.toBeInTheDocument();
+    });
+
+    it('should render custom action buttons when provided', () => {
+      const customActionButtons = vi.fn(() => (
+        <div data-testid="custom-button">Custom Action</div>
+      ));
+      renderComponent({ customActionButtons });
+
+      expect(screen.getByTestId('custom-button')).toBeInTheDocument();
+      expect(customActionButtons).toHaveBeenCalledWith(1);
+    });
+
+    it('should not render custom action buttons when not provided', () => {
+      renderComponent({ customActionButtons: undefined });
+      expect(screen.queryByTestId('custom-button')).not.toBeInTheDocument();
+    });
+
+    it('should render multiple buttons in correct order', () => {
+      renderComponent({ hasEdit: true });
+
+      const buttons = screen.getAllByRole('button');
+      // Should have edit button and selection button
+      expect(buttons.length).toBeGreaterThanOrEqual(2);
+    });
+  });
+
+  describe('Selection Button', () => {
+    it('should call onToggleSelection when selection button is clicked', () => {
+      const onToggleSelection = vi.fn();
+      renderComponent({ onToggleSelection, rowId: 1 });
+
+      fireEvent.click(screen.getByTestId('button-katalogkontrol'));
+
+      expect(onToggleSelection).toHaveBeenCalledWith(1);
+      expect(onToggleSelection).toHaveBeenCalledTimes(1);
+    });
+
+    it('should pass correct rowId to onToggleSelection', () => {
+      const onToggleSelection = vi.fn();
+      renderComponent({ onToggleSelection, rowId: 'custom-id' });
+
+      fireEvent.click(screen.getByTestId('button-katalogkontrol'));
+
+      expect(onToggleSelection).toHaveBeenCalledWith('custom-id');
+    });
+
+    it('should apply selected styles when isSelected is true', () => {
+      renderComponent({ isSelected: true });
+
+      const button = screen.getByTestId('button-katalogkontrol');
+      expect(button).toHaveClass('bg-green-600');
+      expect(button).toHaveClass('border-green-600');
+    });
+
+    it('should not apply selected styles when isSelected is false', () => {
+      renderComponent({ isSelected: false });
+
+      const button = screen.getByTestId('button-katalogkontrol');
+      expect(button).not.toHaveClass('bg-green-600');
+      expect(button).not.toHaveClass('border-green-600');
+    });
+
+    it('should have proper default styles for selection button', () => {
+      renderComponent({ isSelected: false });
+
+      const button = screen.getByTestId('button-katalogkontrol');
+      expect(button).toHaveClass('border');
+      expect(button).toHaveClass('border-ebonyClay-200');
+      expect(button).toHaveClass('bg-ebonyClay-400');
+      expect(button).toHaveClass('h-7');
+    });
+  });
+
+  describe('Edit Button', () => {
+    it('should call setIsEditingPk with rowId when edit button is clicked and not editing', () => {
+      const setIsEditingPk = vi.fn();
+      renderComponent({
+        hasEdit: true,
+        isEditing: false,
+        rowId: 1,
+        setIsEditingPk
+      });
+
+      fireEvent.click(screen.getByTestId('button-edit'));
+
+      expect(setIsEditingPk).toHaveBeenCalledWith(1);
+    });
+
+    it('should call setIsEditingPk with IS_EDITING_INITIAL_VALUE when edit button is clicked and already editing', () => {
+      const setIsEditingPk = vi.fn();
+      renderComponent({
+        hasEdit: true,
+        isEditing: true,
+        rowId: 1,
+        setIsEditingPk
+      });
+
+      fireEvent.click(screen.getByTestId('button-edit'));
+
+      expect(setIsEditingPk).toHaveBeenCalledWith(IS_EDITING_INITIAL_VALUE);
+    });
+
+    it('should pass correct rowId to setIsEditingPk', () => {
+      const setIsEditingPk = vi.fn();
+      renderComponent({
+        hasEdit: true,
+        isEditing: false,
+        rowId: 'custom-id',
+        setIsEditingPk
+      });
+
+      fireEvent.click(screen.getByTestId('button-edit'));
+
+      expect(setIsEditingPk).toHaveBeenCalledWith('custom-id');
+    });
+
+    it('should have proper styles for edit button', () => {
+      renderComponent({ hasEdit: true });
+
+      const button = screen.getByTestId('button-edit');
+      expect(button).toHaveClass('border');
+      expect(button).toHaveClass('border-ebonyClay-200');
+      expect(button).toHaveClass('bg-ebonyClay-400');
+      expect(button).toHaveClass('h-7');
+    });
+
+    it('should have correct icon for edit button', () => {
+      renderComponent({ hasEdit: true });
+
+      const button = screen.getByTestId('button-edit');
+      expect(button).toHaveAttribute('data-icon', 'edit');
+    });
+
+    it('should have correct icon for selection button', () => {
+      renderComponent();
+
+      const button = screen.getByTestId('button-katalogkontrol');
+      expect(button).toHaveAttribute('data-icon', 'katalogkontrol');
+    });
+  });
+
+  describe('Event Handling', () => {
+    it('should stop event propagation on selection button click', () => {
+      const onToggleSelection = vi.fn();
+
+      renderComponent({ onToggleSelection });
+
+      const button = screen.getByTestId('button-katalogkontrol');
+      fireEvent.click(button);
+
+      // Event propagation should be stopped (via fireEvent behavior)
+      expect(onToggleSelection).toHaveBeenCalled();
+    });
+
+    it('should only call onToggleSelection, not setIsEditingPk on selection button click', () => {
+      const onToggleSelection = vi.fn();
+      const setIsEditingPk = vi.fn();
+      renderComponent({ onToggleSelection, setIsEditingPk, hasEdit: true });
+
+      fireEvent.click(screen.getByTestId('button-katalogkontrol'));
+
+      expect(onToggleSelection).toHaveBeenCalledTimes(1);
+      expect(setIsEditingPk).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Multiple Row IDs', () => {
+    it('should handle numeric rowId', () => {
+      const onToggleSelection = vi.fn();
+      renderComponent({ rowId: 42, onToggleSelection });
+
+      fireEvent.click(screen.getByTestId('button-katalogkontrol'));
+
+      expect(onToggleSelection).toHaveBeenCalledWith(42);
+    });
+
+    it('should handle string rowId', () => {
+      const onToggleSelection = vi.fn();
+      renderComponent({ rowId: 'row-uuid-123', onToggleSelection });
+
+      fireEvent.click(screen.getByTestId('button-katalogkontrol'));
+
+      expect(onToggleSelection).toHaveBeenCalledWith('row-uuid-123');
+    });
+
+    it('should handle rowId in edit button click', () => {
+      const setIsEditingPk = vi.fn();
+      renderComponent({
+        rowId: 'uuid-edit',
+        hasEdit: true,
+        isEditing: false,
+        setIsEditingPk
+      });
+
+      fireEvent.click(screen.getByTestId('button-edit'));
+
+      expect(setIsEditingPk).toHaveBeenCalledWith('uuid-edit');
+    });
+  });
+
+  describe('Custom Action Buttons', () => {
+    it('should call customActionButtons with correct rowId', () => {
+      const customActionButtons = vi.fn(() => (
+        <div data-testid="custom">Custom</div>
+      ));
+      renderComponent({ customActionButtons, rowId: 'test-row' });
+
+      expect(customActionButtons).toHaveBeenCalledWith('test-row');
+    });
+
+    it('should render custom buttons before edit button when both exist', () => {
+      const customActionButtons = vi.fn(() => (
+        <button data-testid="custom-btn">Custom</button>
+      ));
+      renderComponent({ customActionButtons, hasEdit: true });
+
+      const customBtn = screen.getByTestId('custom-btn');
+      const editBtn = screen.getByTestId('button-edit');
+
+      expect(customBtn).toBeInTheDocument();
+      expect(editBtn).toBeInTheDocument();
+
+      // Custom button should come before edit button in DOM
+      expect(customBtn.compareDocumentPosition(editBtn)).toBe(
+        Node.DOCUMENT_POSITION_FOLLOWING
+      );
+    });
+
+    it('should not break when customActionButtons returns null', () => {
+      const customActionButtons = vi.fn(() => null);
+      renderComponent({ customActionButtons });
+
+      expect(screen.getByTestId('button-katalogkontrol')).toBeInTheDocument();
+    });
+  });
+
+  describe('Editing State', () => {
+    it('should toggle editing state on edit button click', () => {
+      const setIsEditingPk = vi.fn();
+      const { rerender } = renderComponent({
+        hasEdit: true,
+        isEditing: false,
+        rowId: 1,
+        setIsEditingPk
+      });
+
+      fireEvent.click(screen.getByTestId('button-edit'));
+      expect(setIsEditingPk).toHaveBeenCalledWith(1);
+
+      // Simulate editing state change
+      rerender(
+        <ActionButtons
+          {...defaultProps}
+          hasEdit={true}
+          isEditing={true}
+          rowId={1}
+          setIsEditingPk={setIsEditingPk}
+        />
+      );
+
+      // Click again to exit editing
+      setIsEditingPk.mockClear();
+      fireEvent.click(screen.getByTestId('button-edit'));
+      expect(setIsEditingPk).toHaveBeenCalledWith(IS_EDITING_INITIAL_VALUE);
+    });
+  });
+
+  describe('Integration Tests', () => {
+    it('should handle all button interactions together', () => {
+      const setIsEditingPk = vi.fn();
+      const onToggleSelection = vi.fn();
+      const customActionButtons = vi.fn(() => (
+        <button data-testid="custom">Custom</button>
+      ));
+
+      renderComponent({
+        hasEdit: true,
+        isEditing: false,
+        isSelected: false,
+        rowId: 'integration-test',
+        setIsEditingPk,
+        onToggleSelection,
+        customActionButtons
+      });
+
+      // Click custom button
+      fireEvent.click(screen.getByTestId('custom'));
+
+      // Click edit button
+      fireEvent.click(screen.getByTestId('button-edit'));
+      expect(setIsEditingPk).toHaveBeenCalledWith('integration-test');
+
+      // Click selection button
+      fireEvent.click(screen.getByTestId('button-katalogkontrol'));
+      expect(onToggleSelection).toHaveBeenCalledWith('integration-test');
+
+      // Verify all callbacks were called correctly
+      expect(setIsEditingPk).toHaveBeenCalledTimes(1);
+      expect(onToggleSelection).toHaveBeenCalledTimes(1);
+    });
+
+    it('should render correctly with all features enabled', () => {
+      const customActionButtons = vi.fn(() => (
+        <button data-testid="custom">Action</button>
+      ));
+
+      renderComponent({
+        hasEdit: true,
+        isEditing: false,
+        isSelected: true,
+        customActionButtons
+      });
+
+      expect(screen.getByTestId('custom')).toBeInTheDocument();
+      expect(screen.getByTestId('button-edit')).toBeInTheDocument();
+      expect(screen.getByTestId('button-katalogkontrol')).toBeInTheDocument();
+      expect(screen.getByTestId('button-katalogkontrol')).toHaveClass(
+        'bg-green-600'
+      );
+    });
+
+    it('should render correctly with minimal features', () => {
+      renderComponent({
+        hasEdit: false,
+        customActionButtons: undefined
+      });
+
+      expect(screen.queryByTestId('button-edit')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('custom')).not.toBeInTheDocument();
+      expect(screen.getByTestId('button-katalogkontrol')).toBeInTheDocument();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply correct button size class', () => {
+      renderComponent({ hasEdit: true });
+
+      const editBtn = screen.getByTestId('button-edit');
+      const selectionBtn = screen.getByTestId('button-katalogkontrol');
+
+      expect(editBtn).toHaveClass('h-7');
+      expect(selectionBtn).toHaveClass('h-7');
+    });
+
+    it('should apply correct border classes', () => {
+      renderComponent({ hasEdit: true });
+
+      const editBtn = screen.getByTestId('button-edit');
+      const selectionBtn = screen.getByTestId('button-katalogkontrol');
+
+      expect(editBtn).toHaveClass('border', 'border-ebonyClay-200');
+      expect(selectionBtn).toHaveClass('border', 'border-ebonyClay-200');
+    });
+
+    it('should apply background color correctly', () => {
+      renderComponent({ hasEdit: true, isSelected: false });
+
+      const editBtn = screen.getByTestId('button-edit');
+      const selectionBtn = screen.getByTestId('button-katalogkontrol');
+
+      expect(editBtn).toHaveClass('bg-ebonyClay-400');
+      expect(selectionBtn).toHaveClass('bg-ebonyClay-400');
+    });
+
+    it('should override background when selected', () => {
+      renderComponent({ isSelected: true });
+
+      const selectionBtn = screen.getByTestId('button-katalogkontrol');
+      expect(selectionBtn).toHaveClass('bg-green-600');
+      expect(selectionBtn).toHaveClass('border-green-600');
+    });
+  });
+
+  describe('Props Combinations', () => {
+    it('should handle edit=true, select=true combination', () => {
+      renderComponent({ hasEdit: true, isSelected: true });
+
+      expect(screen.getByTestId('button-edit')).toHaveClass('bg-ebonyClay-400');
+      expect(screen.getByTestId('button-katalogkontrol')).toHaveClass(
+        'bg-green-600'
+      );
+    });
+
+    it('should handle edit=true, editing=true combination', () => {
+      const setIsEditingPk = vi.fn();
+      renderComponent({
+        hasEdit: true,
+        isEditing: true,
+        setIsEditingPk
+      });
+
+      fireEvent.click(screen.getByTestId('button-edit'));
+      expect(setIsEditingPk).toHaveBeenCalledWith(IS_EDITING_INITIAL_VALUE);
+    });
+
+    it('should handle custom, edit, and select all together', () => {
+      const onToggleSelection = vi.fn();
+      const setIsEditingPk = vi.fn();
+      const customActionButtons = vi.fn(() => (
+        <button data-testid="custom">Custom</button>
+      ));
+
+      renderComponent({
+        hasEdit: true,
+        isEditing: false,
+        isSelected: false,
+        onToggleSelection,
+        setIsEditingPk,
+        customActionButtons
+      });
+
+      fireEvent.click(screen.getByTestId('custom'));
+      fireEvent.click(screen.getByTestId('button-edit'));
+      fireEvent.click(screen.getByTestId('button-katalogkontrol'));
+
+      expect(setIsEditingPk).toHaveBeenCalledWith(expect.anything());
+      expect(onToggleSelection).toHaveBeenCalledWith(expect.anything());
+    });
+  });
+});

package/dist/cjs/ai-table/components/content.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { TableBaseProps } from '../../types';
+interface TableContentProps extends Omit<TableBaseProps, 'onChangeSelectedRows' | 'filters' | 'rowKey'> {
+    onToggleSelection: (rowId: number | string) => void;
+    expandedRows: Array<number | string>;
+    onToggleExpand: (rowId: number | string) => void;
+    rowKey: string;
+}
+export declare const TableContent: ({ columns, customActionButtons, data, editDataIndexes, expandedRows, onEdit, onToggleExpand, onToggleSelection, rowKey, selectedRows, mapperConfig }: TableContentProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=content.d.ts.map

package/dist/cjs/ai-table/components/content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../src/ai-table/components/content.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAA8B,cAAc,EAAE,MAAM,aAAa,CAAC;AAQ9E,UAAU,iBACR,SAAQ,IAAI,CAAC,cAAc,EAAE,sBAAsB,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC3E,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACpD,YAAY,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACrC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,YAAY,GAAI,sJAY1B,iBAAiB,sBAihBnB,CAAC"}