@addev-be/ui 0.2.13 → 0.2.15

package/src/components/data/DataGrid/hooks/useDataGridCopy.ts

@@ -1,175 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { DataGridColumn, DataGridContextProps } from '../types';
-
-import { useCallback } from 'react';
-
-export const useDataGridCopy = <R>({
-  rows,
-  visibleColumns = [],
-  loadCopyRows,
-  footerFunctions,
-}: Pick<
-  DataGridContextProps<R>,
-  'rows' | 'visibleColumns' | 'loadCopyRows' | 'footerFunctions'
->) => {
-  const generateHeadersHtml = useCallback(() => {
-    return `<tr>
-            ${visibleColumns
-              .map(
-                ([, col]) =>
-                  `<th style="
-                        text-align: left;
-                        font-weight: bold;
-                        white-space: nowrap;
-                    ">
-                        ${col.name}
-                    </th>`
-              )
-              .join('\n')}
-        </tr>`;
-  }, [visibleColumns]);
-
-  const generateFootersHtml = useCallback(
-    (rowsToCopy: R[]) => {
-      console.log('generate footers html');
-      return `<tr>
-            ${visibleColumns
-              .map(
-                ([colKey]) =>
-                  `<td style="
-                      font-weight: bold;
-                      white-space: nowrap;
-                    ">
-                        ${
-                          footerFunctions?.[colKey]?.(
-                            rowsToCopy,
-                            rowsToCopy,
-                            []
-                          ) ?? ''
-                        }
-                    </td>`
-              )
-              .join('\n')}
-        </tr>`;
-    },
-    [footerFunctions, visibleColumns]
-  );
-
-  const generateCellText = useCallback((col: DataGridColumn<R>, value: any) => {
-    return col.excelValue ? col.excelValue(value) : value?.toString() ?? '';
-  }, []);
-
-  const generateCellHtml = useCallback(
-    (col: DataGridColumn<R>, value: any) => `<td style="
-        ${
-          col.excelFormatter
-            ? "mso-number-format: '" + col.excelFormatter(col) + "';"
-            : ''
-        }
-        ${
-          col.excelBackgroundColor
-            ? "background-color: '" + col.excelBackgroundColor(value) + "';"
-            : ''
-        }
-        white-space: nowrap;
-      ">
-        ${generateCellText(col, value)}
-      </td>`,
-    [generateCellText]
-  );
-
-  const generateCopyHtml = useCallback(
-    (rowsToCopy: R[], includeHeaders: boolean, includeFooters: boolean) => {
-      return `
-            <table>
-                ${includeHeaders ? generateHeadersHtml() : ''}
-                ${(rowsToCopy || [])
-                  .map(
-                    (row) =>
-                      `<tr>
-                        ${visibleColumns
-                          .map(([, col]) => {
-                            const value: any =
-                              col.getter && row ? col.getter(row) : '';
-                            return generateCellHtml(col, value);
-                          })
-                          .join('\n')}
-                    </tr>`
-                  )
-                  .join('\n')}
-                  ${includeFooters ? generateFootersHtml(rowsToCopy) : ''}
-            </table>
-        `;
-    },
-    [visibleColumns, generateCellHtml, generateFootersHtml, generateHeadersHtml]
-  );
-
-  const generateHeadersText = useCallback(() => {
-    return visibleColumns.map(([, col]) => col.name).join('\t');
-  }, [visibleColumns]);
-
-  const generateFootersText = useCallback(
-    (rowsToCopy: R[]) => {
-      return visibleColumns
-        .map(
-          ([colKey]) => footerFunctions?.[colKey]?.(rowsToCopy, [], []) ?? ''
-        )
-        .join('\t');
-    },
-    [footerFunctions, visibleColumns]
-  );
-
-  const generateCopyText = useCallback(
-    (rowsToCopy: R[], includeHeaders: boolean, includeFooters: boolean) => {
-      return [
-        includeHeaders ? generateHeadersText() : '',
-        ...(rowsToCopy || []).map((row) =>
-          visibleColumns
-            .map(([, col]) => {
-              const value: any = col.getter && row ? col.getter(row) : '';
-              return col.excelValue
-                ? col.excelValue(value)
-                : value != null && value !== undefined
-                ? value.toString()
-                : '';
-            })
-            .join('\t')
-        ),
-        includeFooters ? generateFootersText(rowsToCopy) : '',
-      ]
-        .filter((s) => s != null)
-        .join('\n');
-    },
-    [visibleColumns, generateFootersText, generateHeadersText]
-  );
-
-  const copyTable = useCallback(
-    async (includeHeaders = true, includeFooters = true) => {
-      const rowsToCopy = await (loadCopyRows ?? (async () => rows))();
-
-      const copyHtml = generateCopyHtml(
-        rowsToCopy,
-        includeHeaders,
-        includeFooters
-      );
-      const copyText = generateCopyText(
-        rowsToCopy,
-        includeHeaders,
-        includeFooters
-      );
-
-      await navigator['clipboard'].write([
-        new ClipboardItem({
-          'text/plain': new Blob([copyText], { type: 'text/plain' }),
-          'text/html': new Blob([copyHtml], { type: 'text/html' }),
-        }),
-      ]);
-    },
-    [generateCopyHtml, generateCopyText, loadCopyRows, rows]
-  );
-
-  return {
-    copyTable,
-  };
-};

package/src/components/data/DataGrid/hooks/useDataGridSettings.ts

@@ -1,48 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import { DataGridSettings } from '../types';
-import { useSettings } from '../../../../providers';
-
-export const useDataGridSettings = (name?: string) => {
-  // TODO: Implement settings context
-  const { settings, updateSettings } = useSettings();
-  const [dataGridSettings, setDataGridSettings] = useState<DataGridSettings>(
-    {}
-  );
-
-  useEffect(() => {
-    if (name) {
-      const settingName = `user.datagrid.settings.${name}`;
-      const gridSettingsJson = settings?.[settingName] || '{}';
-      let gridSettings: DataGridSettings = {};
-      try {
-        gridSettings = JSON.parse(gridSettingsJson);
-      } catch (error) {
-        console.error('[GRID] cannot decode datagrid settings for', {
-          name,
-          gridSettingsJson,
-          error,
-        });
-      }
-      setDataGridSettings(gridSettings);
-    }
-  }, [name, settings]);
-
-  const saveSettings = useCallback(
-    (newValue?: DataGridSettings) => {
-      if (name) {
-        const settingName = `user.datagrid.settings.${name}`;
-        const newSettings = newValue ?? dataGridSettings;
-        const newSettingsJson = JSON.stringify(newSettings);
-        updateSettings({ [settingName]: newSettingsJson });
-      }
-    },
-    [dataGridSettings, name, updateSettings]
-  );
-
-  return {
-    settings: dataGridSettings,
-    setSettings: setDataGridSettings,
-    saveSettings,
-  };
-};

package/src/components/data/DataGrid/index.tsx

@@ -1,140 +0,0 @@
-import * as styles from './styles';
-
-import { DataGridContextProps, DataGridProps } from './types';
-
-import { DataGridCell } from './DataGridCell';
-import { DataGridFooter } from './DataGridFooter';
-import { DataGridHeader } from './DataGridHeader';
-import { VirtualScroller } from './VirtualScroller';
-import { useCallback } from 'react';
-import { useDataGrid } from './hooks';
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
-export const DataGrid = <R,>({
-  contextOverride,
-  ...props
-}: DataGridProps<R> & {
-  contextOverride?: Partial<DataGridContextProps<R>>;
-}) => {
-  const {
-    className,
-    // onRowDoubleClick,
-    onVisibleRowsChange,
-  } = props;
-  const [contextProps, DataGridContext] = useDataGrid(props, contextOverride);
-  const {
-    selectedKeys,
-    setSelectedKeys,
-    columns,
-    visibleColumns,
-    rowHeight = 32,
-    headerRowHeight = 40,
-    scrollableRef,
-    onScroll,
-    rowKeyGetter,
-  } = contextProps;
-
-  const hasFooter = Object.values(columns).some((col) => col.footer);
-
-  const toggleSelection = useCallback(
-    (key: string) => {
-      if (selectedKeys.includes(key)) {
-        setSelectedKeys(selectedKeys.filter((p) => p !== key));
-      } else {
-        setSelectedKeys([...selectedKeys, key]);
-      }
-    },
-    [selectedKeys, setSelectedKeys]
-  );
-
-  const rowTemplate = useCallback(
-    (row: R, rowIndex: number) => {
-      if (!row) {
-        return (
-          <styles.DataGridRow key={`loading-row-${rowIndex}`}>
-            {!!props.selectable && (
-              <styles.LoadingCell className="animate-pulse">
-                <div />
-              </styles.LoadingCell>
-            )}
-            {visibleColumns.map((_, index) => (
-              <styles.LoadingCell
-                className="animate-pulse"
-                key={`loading-${rowIndex}-${index}`}
-              >
-                <div />
-              </styles.LoadingCell>
-            ))}
-          </styles.DataGridRow>
-        );
-      }
-      const key = rowKeyGetter(row);
-      const { className, style } = props.rowClassNameGetter?.(row) ?? {
-        className: '',
-        style: undefined,
-      };
-      return (
-        <styles.DataGridRow key={key}>
-          {!!props.selectable && (
-            <styles.SelectionCell
-              key="__select_checkbox__"
-              onClick={() => toggleSelection(key)}
-            >
-              <input
-                type="checkbox"
-                value={key as string}
-                checked={selectedKeys.includes(key)}
-                readOnly
-              />
-            </styles.SelectionCell>
-          )}
-          {visibleColumns.map(([key, col], index) => (
-            <DataGridCell
-              key={`loading-${rowIndex}-${index}`}
-              {...(index === 0 ? { className, style } : {})}
-              row={row}
-              rowIndex={rowIndex}
-              column={col}
-              columnIndex={index}
-              context={DataGridContext}
-              columnKey={key}
-            />
-          ))}
-        </styles.DataGridRow>
-      );
-    },
-    [
-      DataGridContext,
-      props,
-      rowKeyGetter,
-      selectedKeys,
-      toggleSelection,
-      visibleColumns,
-    ]
-  );
-
-  return (
-    <DataGridContext.Provider value={contextProps}>
-      <styles.DataGridContainer
-        ref={scrollableRef}
-        onScroll={onScroll}
-        $headerRowHeight={headerRowHeight}
-        $rowHeight={rowHeight}
-        $rowsCount={contextProps.sortedRows.length}
-        $withFooter={hasFooter}
-        className={className}
-      >
-        <DataGridHeader context={DataGridContext} />
-        <VirtualScroller
-          onRangeChange={onVisibleRowsChange}
-          hasFooter={hasFooter}
-          rowTemplate={rowTemplate}
-          context={DataGridContext}
-        />
-        {hasFooter && <DataGridFooter context={DataGridContext} />}
-      </styles.DataGridContainer>
-    </DataGridContext.Provider>
-  );
-};

package/src/components/data/DataGrid/styles.ts

@@ -1,323 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import { ThemeColor } from '../../../providers/ThemeProvider/types';
-
-export const VIRTUAL_SCROLL_TOLERANCE = 20;
-export const TOOLBAR_HEIGHT = 40;
-export const DEFAULT_HEADER_ROW_HEIGHT = 40;
-export const DEFAULT_FOOTER_ROW_HEIGHT = 40;
-export const DEFAULT_ROW_HEIGHT = 32;
-
-export const TopPaddingRow = styled.div``;
-export const BottomPaddingRow = styled.div``;
-
-export const VirtualScrollerContainer = styled.div<{
-  $height: number;
-}>`
-  position: relative;
-  overflow: visible;
-  height: ${({ $height }) => `${$height}px`};
-`;
-export const VirtualScrollerRowsContainer = styled.div.attrs<{
-  $gridTemplateColumns: string;
-  $topPadding: number;
-  $rowHeight?: number;
-}>(({ $gridTemplateColumns, $topPadding, $rowHeight = DEFAULT_ROW_HEIGHT }) => {
-  const rowHeightValue = `${$rowHeight}px`;
-  return {
-    style: {
-      top: `${$topPadding}px`,
-      gridTemplateColumns: $gridTemplateColumns,
-      gridAutoRows: rowHeightValue,
-    },
-  };
-})`
-  display: grid;
-  position: absolute;
-
-  ${TopPaddingRow} {
-    grid-column-start: 1;
-    grid-column-end: -1;
-    grid-row: 1;
-  }
-  ${BottomPaddingRow} {
-    grid-column-start: 1;
-    grid-column-end: -1;
-    grid-row: -1;
-  }
-`;
-
-export const DataGridResizeGrip = styled.div<{ $headerColor?: ThemeColor }>`
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: var(--space-1);
-  height: 100%;
-
-  ${({ $headerColor }) =>
-    $headerColor
-      ? css`
-          background-color: var(--color-${$headerColor}-400);
-          &:hover,
-          &.active {
-            background-color: var(--color-${$headerColor}-500);
-          }
-        `
-      : css`
-          background-color: var(--color-neutral-400);
-          &:hover,
-          &.active {
-            background-color: var(--color-neutral-500);
-          }
-        `}
-
-  cursor: col-resize;
-  display: none;
-`;
-
-type DataGridHeaderCellContainerProps = {
-  $isResizing?: boolean;
-  $headerColor?: ThemeColor;
-};
-
-export const DataGridHeaderCellContainer = styled.div<DataGridHeaderCellContainerProps>`
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: var(--space-1);
-  padding: 0 0.75rem;
-  height: 100%;
-  font-weight: var(--font-bold);
-  line-height: 1.5rem;
-  z-index: ${({ $isResizing }) => ($isResizing ? 1 : 0)};
-
-  ${({ $headerColor }) =>
-    $headerColor
-      ? css`
-          background-color: var(--color-${$headerColor}-200);
-          color: var(--color-${$headerColor}-950);
-          &:hover {
-            background-color: var(--color-${$headerColor}-300);
-          }
-
-          & > button {
-            background-color: var(--color-${$headerColor}-400);
-            border-color: var(--color-${$headerColor}-500);
-            &:hover {
-              background-color: var(--color-${$headerColor}-500);
-              border-color: var(--color-${$headerColor}-600);
-            }
-          }
-          & > button.danger {
-            background-color: var(--color-red-400);
-            border-color: var(--color-red-500);
-            &:hover {
-              background-color: var(--color-red-500);
-              border-color: var(--color-red-600);
-            }
-          }
-        `
-      : css`
-          background-color: var(--color-neutral-200);
-          color: var(--color-neutral-950);
-          &:hover {
-            background-color: var(--color-neutral-300);
-          }
-        `}
-
-  &:hover {
-    ${DataGridResizeGrip} {
-      display: block;
-    }
-  }
-
-  & > span {
-    display: inline-block;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    flex: 1;
-    font-weight: bold;
-  }
-`;
-DataGridHeaderCellContainer.displayName = 'DataGridHeaderCellContainer';
-
-export const DataGridCell = styled.div`
-  position: relative;
-  padding: 0 var(--space-3);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  border-right: 1px solid var(--color-neutral-200);
-  border-bottom: 1px solid var(--color-neutral-200);
-`;
-DataGridCell.displayName = 'DataGridCell';
-
-export const DataGridToolsRow = styled.div`
-  grid-column-start: 1;
-  grid-column-end: -1;
-  grid-row: 1;
-  display: flex;
-  gap: var(--space-1);
-  padding: 0 var(--space-1);
-  align-items: center;
-  background-color: var(--color-neutral-200);
-  position: sticky;
-  top: 0;
-  left: 0;
-  z-index: 10;
-`;
-DataGridToolsRow.displayName = 'DataGridToolsRow';
-
-export const DataGridContainer = styled.div<{
-  $headerRowHeight?: number;
-  $rowHeight?: number;
-  $rowsCount: number;
-  $showToolsHeader?: boolean;
-  $withFooter?: boolean;
-}>`
-  display: grid;
-  width: 100%;
-  height: 100%;
-  background-color: var(--color-neutral-50);
-  font-size: var(--text-base);
-  overflow: scroll;
-  grid-template-rows: ${({
-    $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT,
-    $withFooter = false,
-  }) =>
-    `${TOOLBAR_HEIGHT}px ${$headerRowHeight}px auto ${
-      $withFooter ? DEFAULT_FOOTER_ROW_HEIGHT + 'px' : ''
-    }`};
-
-  ${DataGridToolsRow} {
-    height: ${TOOLBAR_HEIGHT}px;
-  }
-  ${DataGridHeaderCellContainer} {
-    position: sticky;
-    top: ${({ $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT }) =>
-      `${$headerRowHeight}px`};
-    height: ${({ $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT }) =>
-      `${$headerRowHeight}px`};
-  }
-  ${DataGridCell} {
-    height: ${({ $rowHeight = DEFAULT_ROW_HEIGHT }) => `${$rowHeight}px`};
-    line-height: ${({ $rowHeight = DEFAULT_ROW_HEIGHT }) => `${$rowHeight}px`};
-  }
-
-  ${VirtualScrollerContainer} {
-    grid-column-start: 1;
-    grid-column-end: -1;
-    grid-row: 3;
-  }
-`;
-DataGridContainer.displayName = 'DataGridContainer';
-
-type DataGridHeaderOrFooterRowProps = {
-  $headerRowHeight?: number;
-  $headerColor?: ThemeColor;
-  $gridTemplateColumns: string;
-};
-
-const dataGridHeaderOrFooterRowCss = css<DataGridHeaderOrFooterRowProps>`
-  display: grid;
-  grid-template-rows: ${({ $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT }) =>
-    `${$headerRowHeight}px`};
-  z-index: 10;
-  position: sticky;
-  align-items: center;
-
-  ${({ $headerColor }) =>
-    $headerColor
-      ? css`
-          background-color: var(--color-${$headerColor}-100);
-          color: var(--color-${$headerColor}-900);
-        `
-      : css`
-          background-color: var(--color-neutral-200);
-          color: var(--color-neutral-900);
-        `}
-`;
-
-export const DataGridHeaderRow = styled.div.attrs<DataGridHeaderOrFooterRowProps>(
-  ({ $gridTemplateColumns }) => ({
-    style: {
-      gridTemplateColumns: $gridTemplateColumns,
-    },
-  })
-)`
-  ${dataGridHeaderOrFooterRowCss}
-  top: ${TOOLBAR_HEIGHT}px;
-`;
-DataGridHeaderRow.displayName = 'DataGridHeaderRow';
-
-export const DataGridFooterRow = styled.div.attrs<DataGridHeaderOrFooterRowProps>(
-  ({ $gridTemplateColumns }) => ({
-    style: {
-      gridTemplateColumns: $gridTemplateColumns,
-    },
-  })
-)`
-  ${dataGridHeaderOrFooterRowCss}
-  bottom: 0;
-`;
-DataGridFooterRow.displayName = 'DataGridFooterRow';
-
-export const DataGridRow = styled.div`
-  display: contents;
-`;
-DataGridRow.displayName = 'DataGridRow';
-
-export const LoadingCell = styled(DataGridCell)`
-  padding: var(--space-2);
-  box-sizing: border-box;
-
-  &.animate-pulse > div {
-    background-color: var(--color-neutral-200);
-    border-radius: var(--rounded-full);
-    width: 100%;
-    height: 100%;
-  }
-`;
-LoadingCell.displayName = 'LoadingCell';
-
-const selectionCellStyle = css`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--space-8);
-  padding: 0 var(--space-1);
-  cursor: pointer;
-
-  & > input[type='checkbox'] {
-    height: var(--space-4);
-    width: var(--space-4);
-    border-radius: var(--rounded-sm);
-    border: 1px solid var(--color-neutral-300);
-    color: var(--color-primary-600);
-  }
-`;
-
-export const SelectionCell = styled(DataGridCell)`
-  ${selectionCellStyle}
-`;
-SelectionCell.displayName = 'SelectionCell';
-
-export const HeaderSelectionCell = styled(DataGridHeaderCellContainer)`
-  ${selectionCellStyle}
-`;
-HeaderSelectionCell.displayName = 'HeaderSelectionCell';
-
-export const ResizeBackdrop = styled.div.attrs({
-  className: 'ResizeBackdrop',
-})`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0);
-  cursor: col-resize;
-`;
-ResizeBackdrop.displayName = 'ResizeBackdrop';