@addev-be/ui 0.6.0 → 0.6.2

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> = {
-  gridTemplateColumns: string;
-  items: R[];
-  itemTemplate: VirtualScrollerTemplateFC<R>;
-  rowHeightInPx?: number;
-  gap?: string;
-  itemsPerRow?: number;
-  tolerance?: number;
-  itemProps?: object;
-  onRangeChanged?: (index: number, length: number) => void;
-};
-
-export const VirtualScroller = <R,>({
-  gridTemplateColumns,
-  items,
-  rowHeightInPx = styles.DEFAULT_ROW_HEIGHT,
-  itemTemplate: ItemTemplate,
-  itemProps = {},
-  onRangeChanged,
-  gap,
-  itemsPerRow,
-  tolerance,
-}: VirtualScrollerProps<R>) => {
-  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,8 +1,12 @@
-import { FC } from 'react';
-
-export type VirtualScrollerTemplateProps<R> = {
-  item: R | null;
-  index: number;
-};
-
-export type VirtualScrollerTemplateFC<R> = FC<VirtualScrollerTemplateProps<R>>;
+/* 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,10 +1,12 @@
-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 './SqlRequestGrid';
-export * from './SqlRequestGrid/types';
-export * from './AdvancedRequestDataGrid/helpers';
+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 './SqlRequestGrid';
+export * from './SqlRequestGrid/types';
+export * from './VirtualScroller';
+export * from './VirtualScroller/types';
+export * from './AdvancedRequestDataGrid/helpers';

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>
+));

package/src/components/forms/IconButton.tsx

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