@addev-be/ui 0.2.13 → 0.2.15

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

@@ -1,347 +0,0 @@
-import {
-  ConditionDTO,
-  OrderByDTO,
-  SqlRequestFooterFunction,
-  SqlRequestRow,
-  useSqlRequestHandler,
-} from '../../../services/sqlRequests';
-import {
-  DataGridFilters,
-  DataGridFooterFunction,
-  DataGridSort,
-} from '../DataGrid/types';
-import _, { debounce } from 'lodash';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import { DataGrid } from '../DataGrid';
-import { SqlRequestDataGridProps } from './types';
-import { convertSqlFiltersToConditions } from './helpers';
-import { isColumnVisible } from '../DataGrid/helpers';
-
-export const SqlRequestDataGrid = <R,>({
-  onSelectionChange: onSelectionChangeFromProps,
-  ...props
-}: SqlRequestDataGridProps<R>) => {
-  const currentRows = useRef<R[]>([]);
-  const [rows, setRows] = useState<R[]>([]);
-  const [start, setStart] = useState(0);
-  const [length, setLength] = useState(50);
-  const [count, setCount] = useState(-1);
-  const [sqlRequest, sqlIdRequest, sqlPartialRequest] = useSqlRequestHandler<R>(
-    props.type
-  );
-
-  const [conditions, setConditions] = useState<Record<string, ConditionDTO>>(
-    {}
-  );
-  const [orderBy, setOrderBy] = useState<OrderByDTO[]>(
-    Object.entries(props.initialSorts ?? {}).map(
-      ([columnKey, direction]): OrderByDTO => ({
-        field: props.columns[columnKey].field?.fieldAlias ?? columnKey,
-        type: props.columns[columnKey].type ?? 'text',
-        direction: direction.toUpperCase() as 'ASC' | 'DESC',
-      })
-    )
-  );
-
-  const [columnsKeys, visibleColumnsKeys] = useMemo(
-    () => [
-      [...Object.keys(props.columns), ...(props.hiddenColumns ?? [])],
-      [
-        ...Object.keys(props.columns).filter((key) =>
-          isColumnVisible(props.columns[key])
-        ),
-        ...(props.hiddenColumns ?? []),
-      ],
-    ],
-    [props.columns, props.hiddenColumns]
-  );
-  const columnTypes = useMemo(
-    () =>
-      visibleColumnsKeys.map((key) =>
-        String(props.columns[key]?.type ?? 'text')
-      ),
-    [visibleColumnsKeys, props.columns]
-  );
-
-  const refresh = useCallback(() => {
-    setRows([]);
-    setStart(0);
-    setLength(50);
-    setCount(-1);
-  }, []);
-
-  const onFiltersChanged = useCallback((filters: DataGridFilters) => {
-    const newConditions = convertSqlFiltersToConditions(filters);
-    setCount(-1);
-    setConditions(newConditions);
-  }, []);
-
-  const onSortsChanged = useCallback(
-    (sorts: Record<string, DataGridSort>) => {
-      refresh();
-      const newOrderBy = Object.entries(sorts).map(
-        ([columnKey, direction]) =>
-          ({
-            field: columnKey,
-            direction: direction.toUpperCase(),
-          } as OrderByDTO)
-      );
-      setOrderBy(newOrderBy);
-    },
-    [refresh]
-  );
-
-  const loadRows = useRef(
-    debounce(
-      (
-        columns: string[],
-        returnColumns: string[],
-        conditions: ConditionDTO[] = [],
-        orderBy: OrderByDTO[] = [],
-        start = 0,
-        length = 100,
-        getCount = false
-      ) => {
-        sqlRequest({
-          columns: columns.includes('Id') ? columns : [...columns, 'Id'],
-          returnColumns: returnColumns.includes('Id')
-            ? returnColumns
-            : [...returnColumns, 'Id'],
-          columnTypes: columnTypes.includes('Id')
-            ? columnTypes
-            : [...columnTypes, 'Id'],
-          conditions,
-          orderBy,
-          start,
-          length,
-          getCount,
-        }).then((response) => {
-          if (getCount) {
-            currentRows.current = Array(response.count).fill(null);
-            if (getCount) setCount(response.count ?? 0);
-          }
-          const parsedRows = props.parser
-            ? response.data.map(props.parser)
-            : (response.data as R[]);
-          currentRows.current.splice(start, length, ...parsedRows);
-          setRows([...currentRows.current]);
-        });
-      },
-      100,
-      {
-        leading: true,
-        trailing: true,
-      }
-    )
-  );
-
-  const loadFilterValues = useCallback(
-    (columnKey: string) => {
-      return sqlRequest({
-        columns: columnsKeys,
-        returnColumns: [columnKey],
-        columnTypes: [props.columns[columnKey].type ?? 'text'],
-        conditions: [
-          ...(props.conditions ?? []),
-          ...Object.values(_.pickBy(conditions, (_, key) => key !== columnKey)),
-        ].filter((condition) => condition.field !== columnKey),
-        orderBy: [
-          {
-            field:
-              props.columns[columnKey].filterField ??
-              props.columns[columnKey].field?.fieldAlias ??
-              props.columns[columnKey].field?.fieldName ??
-              columnKey,
-            type: props.columns[columnKey].type ?? 'text',
-            direction: 'ASC',
-          },
-        ],
-        getCount: false,
-        unique: true,
-      }).then((response) =>
-        response.data.map(
-          (row) => props.columns[columnKey].filter?.getter?.(row) ?? null
-        )
-      );
-    },
-    [columnsKeys, conditions, props.columns, props.conditions, sqlRequest]
-  );
-
-  useEffect(
-    () =>
-      loadRows.current(
-        columnsKeys,
-        visibleColumnsKeys,
-        [...(props.conditions ?? []), ...(Object.values(conditions) ?? [])],
-        orderBy,
-        start,
-        length,
-        count < 0
-      ),
-    [
-      props.columns,
-      conditions,
-      orderBy,
-      start,
-      length,
-      count,
-      props.conditions,
-      columnsKeys,
-      visibleColumnsKeys,
-    ]
-  );
-
-  const loadCopyRows = useCallback(
-    () =>
-      sqlRequest({
-        columns: columnsKeys,
-        returnColumns: visibleColumnsKeys,
-        columnTypes,
-        conditions: [
-          ...(props.conditions ?? []),
-          ...(Object.values(conditions) ?? []),
-        ],
-        orderBy,
-        start: 0,
-        length: count,
-      }).then((response) =>
-        props.parser ? response.data.map(props.parser) : (response.data as R[])
-      ),
-    [
-      sqlRequest,
-      columnsKeys,
-      visibleColumnsKeys,
-      columnTypes,
-      props.conditions,
-      props.parser,
-      conditions,
-      orderBy,
-      count,
-    ]
-  );
-
-  const loadAllIds = useCallback(
-    () =>
-      sqlIdRequest({
-        columns: columnsKeys.includes('Id')
-          ? columnsKeys
-          : [...columnsKeys, 'Id'],
-        returnColumns: ['Id'],
-        columnTypes: ['text'],
-        conditions: [
-          ...(props.conditions ?? []),
-          ...(Object.values(conditions) ?? []),
-        ],
-        orderBy,
-        start: 0,
-        length: count,
-      }).then((response) => response.data.map((row) => row['Id'])),
-    [columnsKeys, conditions, orderBy, props.conditions, sqlIdRequest, count]
-  );
-
-  const onVisibleRowsChanged = useCallback(
-    (newStart: number, newLength: number) => {
-      if (newStart !== start || newLength !== length) {
-        setStart(newStart);
-        setLength(newLength);
-      }
-    },
-    [length, start]
-  );
-
-  const onSelectionChange = useCallback(
-    (selectedKeys: string[]) => {
-      onSelectionChangeFromProps?.(selectedKeys);
-    },
-    [onSelectionChangeFromProps]
-  );
-
-  /** FOOTERS */
-  const [footers, setFooters] = useState<Record<string, string>>(
-    props.initialFooters ?? {}
-  );
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [footerData, setFooterData] = useState<SqlRequestRow<any>>({});
-
-  const loadFooters = useCallback(() => {
-    if (Object.keys(footers).length === 0) {
-      setFooterData({});
-    } else {
-      sqlPartialRequest({
-        columns: columnsKeys.includes('Id')
-          ? columnsKeys
-          : [...columnsKeys, 'Id'],
-        returnColumns: [],
-        columnTypes: [],
-        totalColumns: footers as Record<string, SqlRequestFooterFunction>,
-        conditions: [
-          ...(props.conditions ?? []),
-          ...(Object.values(conditions) ?? []),
-        ],
-        orderBy,
-      }).then((response) => setFooterData(response.totals ?? {}));
-    }
-  }, [
-    columnsKeys,
-    conditions,
-    footers,
-    orderBy,
-    props.conditions,
-    sqlPartialRequest,
-  ]);
-
-  useEffect(() => {
-    loadFooters();
-  }, [loadFooters]);
-
-  const footerFunctions = useMemo(
-    () =>
-      !footerData
-        ? {}
-        : Object.entries(footers).reduce((acc, [columnKey, footerKey]) => {
-            const column = props.columns[columnKey];
-            const footerFunc =
-              typeof column?.footer === 'function'
-                ? column.footer
-                : column?.footer?.[footerKey];
-            const render = footerFunc
-              ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                (data: any) => footerFunc([data], [], [])
-              : column?.render ?? _.identity;
-            if (!column) {
-              return acc;
-            }
-            acc[columnKey] = () => render(footerData, column);
-            return acc;
-          }, {} as Record<string, DataGridFooterFunction<R>>),
-    [footerData, footers, props.columns]
-  );
-
-  const contextOverride = useMemo(
-    () => ({
-      footers,
-      setFooters,
-      footerFunctions,
-    }),
-    [footers, setFooters, footerFunctions]
-  );
-
-  return (
-    <DataGrid
-      onVisibleRowsChange={onVisibleRowsChanged}
-      filter={false}
-      sort={false}
-      onFiltersChanged={onFiltersChanged}
-      onSortsChanged={onSortsChanged}
-      filterValuesLoader={loadFilterValues}
-      rows={rows}
-      loadCopyRows={loadCopyRows}
-      refresh={refresh}
-      onSelectionChange={onSelectionChange}
-      getAllIds={loadAllIds}
-      contextOverride={contextOverride}
-      {...props}
-    />
-  );
-};

package/src/components/data/SqlRequestDataGrid/types.ts

@@ -1,47 +0,0 @@
-import {
-  ConditionDTO,
-  FieldDTO,
-  OrderByDTO,
-  SqlRequestRow,
-} from '../../../services/sqlRequests';
-import {
-  DataGridColumn,
-  DataGridFilter,
-  DataGridFilterType,
-  DataGridProps,
-} from '../DataGrid/types';
-
-export type SqlRequestDataGridFilter<
-  T extends DataGridFilterType = DataGridFilterType
-> = DataGridFilter<T> & {
-  field?: FieldDTO;
-};
-
-export type SqlRequestDataGridFilters = Record<
-  string,
-  SqlRequestDataGridFilter
->;
-
-export type SqlRequestDataGridColumn<R> = DataGridColumn<R> & {
-  filter?: SqlRequestDataGridFilter;
-  field?: FieldDTO;
-  filterField?: string;
-  sortField?: string;
-};
-
-export type SqlRequestDataGridColumns<R> = Record<
-  string,
-  SqlRequestDataGridColumn<R>
->;
-
-export type SqlRequestDataGridProps<R> = Omit<
-  DataGridProps<R>,
-  'rows' | 'columns'
-> & {
-  columns: SqlRequestDataGridColumns<R>;
-  hiddenColumns?: string[];
-  type: string;
-  orderBy?: OrderByDTO[];
-  conditions?: ConditionDTO[];
-  parser?: (row: SqlRequestRow<R>) => R;
-};

package/src/components/data/index.ts

@@ -1,8 +0,0 @@
-export * from './DataGrid';
-export * from './DataGrid/helpers';
-export * from './DataGrid/styles';
-export * from './AdvancedRequestDataGrid';
-export * from './SqlRequestDataGrid';
-export * from './SqlRequestDataGrid/helpers';
-export * from './SqlRequestDataGrid/types';
-export * from './AdvancedRequestDataGrid/helpers';

package/src/components/forms/Button.tsx

@@ -1,99 +0,0 @@
-import { ComponentProps, forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-
-import { IconFC } from '../../Icons';
-import { ThemeColor } from '../../providers/ThemeProvider/types';
-
-export const StyledButton = styled.button.withConfig({
-  shouldForwardProp: () => true,
-})<ButtonProps>`
-  display: inline-flex;
-  vertical-align: middle;
-  align-items: center;
-  justify-content: center;
-  box-shadow: var(--shadow-sm);
-  /* font-weight: bold; */
-  border-radius: var(--rounded-md);
-  font-family: var(--font-sans);
-  cursor: pointer;
-
-  ${({ color }) =>
-    color
-      ? css`
-          background-color: var(--color-${color}-400);
-          border: 1px solid var(--color-${color}-500);
-          &:hover {
-            background-color: var(--color-${color}-300);
-            border: 1px solid var(--color-${color}-400);
-          }
-          color: var(--color-${color}-950);
-          svg {
-            fill: var(--color-${color}-950);
-          }
-        `
-      : css`
-          background-color: var(--color-neutral-100);
-          border: 1px solid var(--color-neutral-300);
-          &:hover {
-            background-color: var(--color-neutral-200);
-            border: 1px solid var(--color-neutral-400);
-          }
-          color: var(--color-neutral-900);
-          svg {
-            fill: var(--color-neutral-900);
-          }
-        `}
-
-  ${({ rounded }) => rounded && 'border-radius: var(--rounded-full);'}
-
-  &.small {
-    padding: var(--space-1) var(--space-1_5);
-    font-size: var(--text-sm);
-    height: var(--space-6);
-    box-shadow: var(--shadow-sm);
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-3);
-      height: var(--space-3);
-    }
-  }
-  &.medium {
-    padding: var(--space-2) var(--space-3);
-    font-size: var(--text-base);
-    height: var(--space-8);
-    box-shadow: var(--shadow-sm);
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-4);
-      height: var(--space-4);
-    }
-  }
-  &.large {
-    padding: var(--space-3) var(--space-4);
-    font-size: var(--text-lg);
-    height: var(--space-10);
-    box-shadow: var(--shadow-sm);
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-5);
-      height: var(--space-5);
-    }
-  }
-`;
-
-export type ButtonProps = {
-  color?: ThemeColor;
-  size?: 'small' | 'medium' | 'large';
-  icon?: IconFC;
-  rounded?: boolean;
-};
-
-export const Button = forwardRef<
-  HTMLButtonElement,
-  ComponentProps<typeof StyledButton> & ButtonProps
->(({ children, size = 'medium', icon: Icon, className, ...props }, ref) => (
-  <StyledButton ref={ref} className={`${size} ${className}`} {...props}>
-    {Icon && <Icon />}
-    {children}
-  </StyledButton>
-));

package/src/components/forms/IconButton.tsx

@@ -1,56 +0,0 @@
-import { Button, ButtonProps } from './Button';
-import { ButtonHTMLAttributes, forwardRef } from 'react';
-
-import { IconFC } from '../../Icons';
-import styled from 'styled-components';
-
-type IconButtonProps = ButtonProps & {
-  icon: IconFC;
-  $iconSize?: string;
-};
-
-const styles = {
-  IconButton: styled(Button).attrs({
-    className: 'IconButton',
-  })<Omit<IconButtonProps, 'icon'>>`
-    &.small {
-      padding: var(--space-1);
-      height: var(--space-6);
-      width: var(--space-6);
-      svg {
-        margin-right: 0;
-        width: ${({ $iconSize = 'var(--space-4)' }) => $iconSize};
-        height: ${({ $iconSize = 'var(--space-4)' }) => $iconSize};
-      }
-    }
-    &.medium {
-      padding: var(--space-2);
-      height: var(--space-8);
-      width: var(--space-8);
-      svg {
-        margin-right: 0;
-        width: ${({ $iconSize = 'var(--space-5)' }) => $iconSize};
-        height: ${({ $iconSize = 'var(--space-5)' }) => $iconSize};
-      }
-    }
-    &.large {
-      padding: var(--space-3);
-      height: var(--space-10);
-      width: var(--space-10);
-      svg {
-        margin-right: 0;
-        width: ${({ $iconSize = 'var(--space-6)' }) => $iconSize};
-        height: ${({ $iconSize = 'var(--space-6)' }) => $iconSize};
-      }
-    }
-  `,
-};
-
-export const IconButton = forwardRef<
-  HTMLButtonElement,
-  IconButtonProps & ButtonHTMLAttributes<HTMLButtonElement>
->(({ icon: Icon, ...props }, ref) => (
-  <styles.IconButton ref={ref} {...props}>
-    <Icon className="iconbutton-icon" />
-  </styles.IconButton>
-));

package/src/components/forms/IndeterminateCheckbox.tsx

@@ -1,46 +0,0 @@
-import {
-  ChangeEvent,
-  FC,
-  InputHTMLAttributes,
-  useLayoutEffect,
-  useRef,
-} from 'react';
-
-import { join } from 'lodash';
-
-type IndeterminateCheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
-  className?: string;
-  checked: boolean | undefined;
-  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-};
-
-export const IndeterminateCheckbox: FC<IndeterminateCheckboxProps> = ({
-  className,
-  checked,
-  onChange,
-  ...props
-}) => {
-  const checkbox = useRef<HTMLInputElement>(null);
-
-  useLayoutEffect(() => {
-    if (checkbox.current)
-      checkbox.current.indeterminate = checked === undefined;
-  }, [checked]);
-
-  return (
-    <input
-      type="checkbox"
-      className={join(
-        [
-          'h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600',
-          className,
-        ],
-        ' '
-      )}
-      ref={checkbox}
-      checked={!!checked}
-      onChange={onChange}
-      {...props}
-    />
-  );
-};

package/src/components/forms/Select.tsx

@@ -1,40 +0,0 @@
-import { SelectHTMLAttributes } from 'react';
-import { inputStyle } from './styles';
-import styled from 'styled-components';
-
-type SelectProps<T> = {
-  items: T[];
-  itemKey: keyof T | ((item: T) => string);
-  itemLabel: keyof T | ((item: T) => string);
-};
-
-const StyledSelect = styled.select`
-  ${inputStyle}
-`;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const Select = <T extends { [k: string]: any }>({
-  items,
-  itemKey,
-  itemLabel,
-  ...props
-}: SelectProps<T> & SelectHTMLAttributes<HTMLSelectElement>) => {
-  const keyGetter =
-    typeof itemKey === 'function' ? itemKey : (item: T) => item[itemKey];
-  const labelGetter =
-    typeof itemLabel === 'function' ? itemLabel : (item: T) => item[itemLabel];
-
-  return (
-    <StyledSelect {...props}>
-      {items.map((item) => {
-        const key = keyGetter(item);
-        const label = labelGetter(item);
-        return (
-          <option key={key} value={key}>
-            {label}
-          </option>
-        );
-      })}
-    </StyledSelect>
-  );
-};

package/src/components/forms/index.ts

@@ -1,5 +0,0 @@
-export * from './Button';
-export * from './Select';
-export * from './IconButton';
-export * from './IndeterminateCheckbox';
-export { Input } from './styles';

package/src/components/forms/styles.ts

@@ -1,20 +0,0 @@
-import styled, { css } from 'styled-components';
-
-export const inputStyle = css`
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-  border: 1px solid var(--color-gray-300);
-  border-radius: var(--rounded-md);
-  padding: var(--space-1);
-  width: 100%;
-  box-sizing: border-box;
-
-  &:focus {
-    outline: 2px solid var(--color-primary-500);
-  }
-`;
-
-export const Input = styled.input`
-  ${inputStyle}
-`;

package/src/components/index.ts

@@ -1,3 +0,0 @@
-export * from './data';
-export * from './forms';
-export * from './layout';