@addev-be/ui 0.7.2 → 0.7.4

package/src/components/data/VirtualScroller/hooks.ts

@@ -1,71 +1,71 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import { useElementSize } from '../../../hooks';
-
-export const VIRTUAL_SCROLL_TOLERANCE = 20;
-
-type VirtualScrollingProps<R> = {
-  scrollableElement: HTMLElement | null;
-  rowHeightInPx: number;
-  items: R[];
-  itemsPerRow?: number;
-  tolerance?: number;
-};
-
-export const useVirtualScrolling = <R>({
-  scrollableElement,
-  rowHeightInPx,
-  items,
-  itemsPerRow = 1,
-  tolerance = VIRTUAL_SCROLL_TOLERANCE,
-}: VirtualScrollingProps<R>) => {
-  const { height } = useElementSize(scrollableElement);
-
-  const [scrollTop, setScrollTop] = useState(0);
-  const [rowIndex, rowLength] = [
-    Math.floor(scrollTop / rowHeightInPx),
-    Math.ceil(height / rowHeightInPx),
-  ];
-  const [index, length] = [rowIndex * itemsPerRow, rowLength * itemsPerRow];
-  const rowTolerance = Math.ceil(tolerance / itemsPerRow);
-
-  const totalRows = Math.ceil((items?.length ?? 0) / itemsPerRow);
-  const totalHeight = totalRows * rowHeightInPx;
-  const topPadding = Math.max(0, rowIndex - rowTolerance) * rowHeightInPx;
-
-  const onScroll = useCallback(() => {
-    if (scrollableElement) {
-      setScrollTop(scrollableElement.scrollTop);
-    }
-  }, [scrollableElement]);
-
-  useEffect(() => {
-    const scrollable = scrollableElement;
-    if (scrollable) {
-      scrollable.addEventListener('scroll', onScroll);
-      return () => {
-        scrollable.removeEventListener('scroll', onScroll);
-      };
-    }
-  }, [onScroll, scrollableElement]);
-
-  const rowIndexWithTolerance = Math.max(0, rowIndex - rowTolerance);
-  const rowLengthWithTolerance = rowLength + 2 * rowTolerance;
-  const indexWithTolerance = rowIndexWithTolerance * itemsPerRow;
-  const lengthWithTolerance = rowLengthWithTolerance * itemsPerRow;
-
-  const visibleItems = items.slice(
-    indexWithTolerance,
-    indexWithTolerance + lengthWithTolerance
-  );
-
-  return {
-    index,
-    length,
-    indexWithTolerance,
-    lengthWithTolerance,
-    visibleItems,
-    totalHeight,
-    topPadding,
-  };
-};
+import { useCallback, useEffect, useState } from 'react';
+
+import { useElementSize } from '../../../hooks';
+
+export const VIRTUAL_SCROLL_TOLERANCE = 20;
+
+type VirtualScrollingProps<R> = {
+  scrollableElement: HTMLElement | null;
+  rowHeightInPx: number;
+  items: R[];
+  itemsPerRow?: number;
+  tolerance?: number;
+};
+
+export const useVirtualScrolling = <R>({
+  scrollableElement,
+  rowHeightInPx,
+  items,
+  itemsPerRow = 1,
+  tolerance = VIRTUAL_SCROLL_TOLERANCE,
+}: VirtualScrollingProps<R>) => {
+  const { height } = useElementSize(scrollableElement);
+
+  const [scrollTop, setScrollTop] = useState(0);
+  const [rowIndex, rowLength] = [
+    Math.floor(scrollTop / rowHeightInPx),
+    Math.ceil(height / rowHeightInPx),
+  ];
+  const [index, length] = [rowIndex * itemsPerRow, rowLength * itemsPerRow];
+  const rowTolerance = Math.ceil(tolerance / itemsPerRow);
+
+  const totalRows = Math.ceil((items?.length ?? 0) / itemsPerRow);
+  const totalHeight = totalRows * rowHeightInPx;
+  const topPadding = Math.max(0, rowIndex - rowTolerance) * rowHeightInPx;
+
+  const onScroll = useCallback(() => {
+    if (scrollableElement) {
+      setScrollTop(scrollableElement.scrollTop);
+    }
+  }, [scrollableElement]);
+
+  useEffect(() => {
+    const scrollable = scrollableElement;
+    if (scrollable) {
+      scrollable.addEventListener('scroll', onScroll);
+      return () => {
+        scrollable.removeEventListener('scroll', onScroll);
+      };
+    }
+  }, [onScroll, scrollableElement]);
+
+  const rowIndexWithTolerance = Math.max(0, rowIndex - rowTolerance);
+  const rowLengthWithTolerance = rowLength + 2 * rowTolerance;
+  const indexWithTolerance = rowIndexWithTolerance * itemsPerRow;
+  const lengthWithTolerance = rowLengthWithTolerance * itemsPerRow;
+
+  const visibleItems = items.slice(
+    indexWithTolerance,
+    indexWithTolerance + lengthWithTolerance
+  );
+
+  return {
+    index,
+    length,
+    indexWithTolerance,
+    lengthWithTolerance,
+    visibleItems,
+    totalHeight,
+    topPadding,
+  };
+};

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

@@ -1,75 +1,75 @@
-/* eslint-disable @typescript-eslint/no-empty-object-type */
-
-import * as styles from './styles';
-
-import { useEffect, useState } from 'react';
-
-import { VirtualScrollerTemplateFC } from './types';
-import { useVirtualScrolling } from './hooks';
-
-type VirtualScrollerProps<R, P extends object> = {
-  gridTemplateColumns: string;
-  items: R[];
-  itemTemplate: VirtualScrollerTemplateFC<R, P>;
-  rowHeightInPx?: number;
-  gap?: string;
-  itemsPerRow?: number;
-  tolerance?: number;
-  itemProps: P;
-  onRangeChanged?: (index: number, length: number) => void;
-};
-
-export const VirtualScroller = <R, P extends object>({
-  gridTemplateColumns,
-  items,
-  rowHeightInPx = styles.DEFAULT_ROW_HEIGHT,
-  itemTemplate: ItemTemplate,
-  itemProps,
-  onRangeChanged,
-  gap,
-  itemsPerRow,
-  tolerance,
-}: VirtualScrollerProps<R, P>) => {
-  const [scrollableElement, setScrollableElement] =
-    useState<HTMLElement | null>(null);
-  const {
-    indexWithTolerance,
-    lengthWithTolerance,
-    visibleItems,
-    topPadding,
-    totalHeight,
-  } = useVirtualScrolling<R>({
-    scrollableElement,
-    rowHeightInPx,
-    items,
-    itemsPerRow,
-    tolerance,
-  });
-
-  useEffect(() => {
-    onRangeChanged?.(indexWithTolerance, lengthWithTolerance);
-  }, [indexWithTolerance, lengthWithTolerance, onRangeChanged]);
-
-  return (
-    <styles.VirtualScrollerContainer
-      $height={totalHeight}
-      ref={(element) => setScrollableElement(element?.parentElement ?? null)}
-    >
-      <styles.VirtualScrollerItemsContainer
-        $gridTemplateColumns={gridTemplateColumns}
-        $topPadding={topPadding}
-        $itemHeight={rowHeightInPx}
-        $gap={gap}
-      >
-        {visibleItems.map((item, currentIndex) => (
-          <ItemTemplate
-            key={indexWithTolerance + currentIndex}
-            item={item}
-            index={currentIndex}
-            {...itemProps}
-          />
-        ))}
-      </styles.VirtualScrollerItemsContainer>
-    </styles.VirtualScrollerContainer>
-  );
-};
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+
+import * as styles from './styles';
+
+import { useEffect, useState } from 'react';
+
+import { VirtualScrollerTemplateFC } from './types';
+import { useVirtualScrolling } from './hooks';
+
+type VirtualScrollerProps<R, P extends object> = {
+  gridTemplateColumns: string;
+  items: R[];
+  itemTemplate: VirtualScrollerTemplateFC<R, P>;
+  rowHeightInPx?: number;
+  gap?: string;
+  itemsPerRow?: number;
+  tolerance?: number;
+  itemProps: P;
+  onRangeChanged?: (index: number, length: number) => void;
+};
+
+export const VirtualScroller = <R, P extends object>({
+  gridTemplateColumns,
+  items,
+  rowHeightInPx = styles.DEFAULT_ROW_HEIGHT,
+  itemTemplate: ItemTemplate,
+  itemProps,
+  onRangeChanged,
+  gap,
+  itemsPerRow,
+  tolerance,
+}: VirtualScrollerProps<R, P>) => {
+  const [scrollableElement, setScrollableElement] =
+    useState<HTMLElement | null>(null);
+  const {
+    indexWithTolerance,
+    lengthWithTolerance,
+    visibleItems,
+    topPadding,
+    totalHeight,
+  } = useVirtualScrolling<R>({
+    scrollableElement,
+    rowHeightInPx,
+    items,
+    itemsPerRow,
+    tolerance,
+  });
+
+  useEffect(() => {
+    onRangeChanged?.(indexWithTolerance, lengthWithTolerance);
+  }, [indexWithTolerance, lengthWithTolerance, onRangeChanged]);
+
+  return (
+    <styles.VirtualScrollerContainer
+      $height={totalHeight}
+      ref={(element) => setScrollableElement(element?.parentElement ?? null)}
+    >
+      <styles.VirtualScrollerItemsContainer
+        $gridTemplateColumns={gridTemplateColumns}
+        $topPadding={topPadding}
+        $itemHeight={rowHeightInPx}
+        $gap={gap}
+      >
+        {visibleItems.map((item, currentIndex) => (
+          <ItemTemplate
+            key={indexWithTolerance + currentIndex}
+            item={item}
+            index={currentIndex}
+            {...itemProps}
+          />
+        ))}
+      </styles.VirtualScrollerItemsContainer>
+    </styles.VirtualScrollerContainer>
+  );
+};

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

@@ -1,51 +1,51 @@
-import styled from 'styled-components';
-
-export const DEFAULT_ROW_HEIGHT = 32;
-
-export const TopPaddingItem = styled.div``;
-export const BottomPaddingItem = styled.div``;
-
-export const VirtualScrollerContainer = styled.div.attrs<{
-  $height: number;
-}>(({ $height }) => ({
-  className: 'VirtualScrollerFiller',
-  style: {
-    height: `${$height}px`,
-  },
-}))`
-  position: relative;
-  overflow: visible;
-`;
-
-export const VirtualScrollerItemsContainer = styled.div.attrs<{
-  $gridTemplateColumns: string;
-  $gap?: string;
-  $topPadding: number;
-  $itemHeight: number;
-}>(({ $gridTemplateColumns, $topPadding, $itemHeight }) => {
-  const itemHeightValue = `${$itemHeight}px`;
-  return {
-    className: 'VirtualScrollerItemsContainer',
-    style: {
-      top: `${$topPadding}px`,
-      gridTemplateColumns: $gridTemplateColumns,
-      gridAutoItems: itemHeightValue,
-    },
-  };
-})`
-  display: grid;
-  position: absolute;
-  min-width: 100%;
-  grid-gap: ${({ $gap }) => $gap};
-
-  ${TopPaddingItem} {
-    grid-column-start: 1;
-    grid-column-end: -1;
-    grid-row: 1;
-  }
-  ${BottomPaddingItem} {
-    grid-column-start: 1;
-    grid-column-end: -1;
-    grid-row: -1;
-  }
-`;
+import styled from 'styled-components';
+
+export const DEFAULT_ROW_HEIGHT = 32;
+
+export const TopPaddingItem = styled.div``;
+export const BottomPaddingItem = styled.div``;
+
+export const VirtualScrollerContainer = styled.div.attrs<{
+  $height: number;
+}>(({ $height }) => ({
+  className: 'VirtualScrollerFiller',
+  style: {
+    height: `${$height}px`,
+  },
+}))`
+  position: relative;
+  overflow: visible;
+`;
+
+export const VirtualScrollerItemsContainer = styled.div.attrs<{
+  $gridTemplateColumns: string;
+  $gap?: string;
+  $topPadding: number;
+  $itemHeight: number;
+}>(({ $gridTemplateColumns, $topPadding, $itemHeight }) => {
+  const itemHeightValue = `${$itemHeight}px`;
+  return {
+    className: 'VirtualScrollerItemsContainer',
+    style: {
+      top: `${$topPadding}px`,
+      gridTemplateColumns: $gridTemplateColumns,
+      gridAutoItems: itemHeightValue,
+    },
+  };
+})`
+  display: grid;
+  position: absolute;
+  min-width: 100%;
+  grid-gap: ${({ $gap }) => $gap};
+
+  ${TopPaddingItem} {
+    grid-column-start: 1;
+    grid-column-end: -1;
+    grid-row: 1;
+  }
+  ${BottomPaddingItem} {
+    grid-column-start: 1;
+    grid-column-end: -1;
+    grid-row: -1;
+  }
+`;

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

@@ -1,12 +1,12 @@
-/* eslint-disable @typescript-eslint/no-empty-object-type */
-
-import { FC } from 'react';
-
-export type VirtualScrollerTemplateProps<R, P extends object = {}> = P & {
-  item: R | null;
-  index: number;
-};
-
-export type VirtualScrollerTemplateFC<R, P extends object = {}> = FC<
-  VirtualScrollerTemplateProps<R, P>
->;
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+
+import { FC } from 'react';
+
+export type VirtualScrollerTemplateProps<R, P extends object = {}> = P & {
+  item: R | null;
+  index: number;
+};
+
+export type VirtualScrollerTemplateFC<R, P extends object = {}> = FC<
+  VirtualScrollerTemplateProps<R, P>
+>;

package/src/components/data/index.ts

@@ -1,17 +1,17 @@
-export * from './DataGrid';
-export * from './DataGrid/helpers';
-export * from './DataGrid/styles';
-export * from './DataGrid/types';
-
-export * from './AdvancedRequestDataGrid';
-export * from './AdvancedRequestDataGrid/helpers';
-
-export * from './SqlRequestDataGrid';
-export * from './SqlRequestDataGrid/helpers';
-export * from './SqlRequestDataGrid/types';
-
-export * from './SqlRequestGrid';
-export * from './SqlRequestGrid/types';
-
-export * from './VirtualScroller';
-export * from './VirtualScroller/types';
+export * from './DataGrid';
+export * from './DataGrid/helpers';
+export * from './DataGrid/styles';
+export * from './DataGrid/types';
+
+export * from './AdvancedRequestDataGrid';
+export * from './AdvancedRequestDataGrid/helpers';
+
+export * from './SqlRequestDataGrid';
+export * from './SqlRequestDataGrid/helpers';
+export * from './SqlRequestDataGrid/types';
+
+export * from './SqlRequestGrid';
+export * from './SqlRequestGrid/types';
+
+export * from './VirtualScroller';
+export * from './VirtualScroller/types';

package/src/components/forms/Button.tsx

@@ -1,99 +1,99 @@
-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>
-));
+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>
+));