@addev-be/ui 2.5.20 → 2.6.0

package/src/components/forms/Select.tsx

@@ -1,34 +1,34 @@
-import { SelectHTMLAttributes } from 'react';
-import { inputStyle } from './styles';
-import styled from 'styled-components';
-
-type PropGetter<T> = (item: T) => string;
-
-export type SelectProps<T> = {
-  items: T[];
-  itemKey: PropGetter<T>;
-  itemLabel: PropGetter<T>;
-};
-
-const StyledSelect = styled.select`
-  ${inputStyle}
-`;
-
-export const Select = <T,>({
-  items,
-  itemKey,
-  itemLabel,
-  ...props
-}: SelectProps<T> & SelectHTMLAttributes<HTMLSelectElement>) => (
-  <StyledSelect {...props}>
-    {items.map((item) => {
-      const key = itemKey(item);
-      const label = itemLabel(item);
-      return (
-        <option key={key} value={key}>
-          {label}
-        </option>
-      );
-    })}
-  </StyledSelect>
-);
+import { SelectHTMLAttributes } from 'react';
+import { inputStyle } from './styles';
+import styled from 'styled-components';
+
+type PropGetter<T> = (item: T) => string;
+
+export type SelectProps<T> = {
+  items: T[];
+  itemKey: PropGetter<T>;
+  itemLabel: PropGetter<T>;
+};
+
+const StyledSelect = styled.select`
+  ${inputStyle}
+`;
+
+export const Select = <T,>({
+  items,
+  itemKey,
+  itemLabel,
+  ...props
+}: SelectProps<T> & SelectHTMLAttributes<HTMLSelectElement>) => (
+  <StyledSelect {...props}>
+    {items.map((item) => {
+      const key = itemKey(item);
+      const label = itemLabel(item);
+      return (
+        <option key={key} value={key}>
+          {label}
+        </option>
+      );
+    })}
+  </StyledSelect>
+);

package/src/components/forms/VerticalLabel.tsx

@@ -1,20 +1,20 @@
-import { FC, HTMLAttributes } from 'react';
-
-import { StackedLabelContainer } from './styles';
-
-type StackedLabelProps = HTMLAttributes<HTMLDivElement> & {
-  label: string;
-};
-
-export const StackedLabel: FC<StackedLabelProps> = ({
-  label,
-  children,
-  ...props
-}) => {
-  return (
-    <StackedLabelContainer {...props}>
-      <label>{label}</label>
-      {children}
-    </StackedLabelContainer>
-  );
-};
+import { FC, HTMLAttributes } from 'react';
+
+import { StackedLabelContainer } from './styles';
+
+type StackedLabelProps = HTMLAttributes<HTMLDivElement> & {
+  label: string;
+};
+
+export const StackedLabel: FC<StackedLabelProps> = ({
+  label,
+  children,
+  ...props
+}) => {
+  return (
+    <StackedLabelContainer {...props}>
+      <label>{label}</label>
+      {children}
+    </StackedLabelContainer>
+  );
+};

package/src/components/forms/styles.ts

@@ -1,42 +1,42 @@
-import styled, { css } from 'styled-components';
-
-import { NumericFormat } from 'react-number-format';
-
-export const inputStyle = css`
-  font-family: var(--font-sans);
-  font-size: inherit;
-  color: var(--color-text-800);
-  background-color: var(--color-base-0);
-  border: 1px solid var(--color-base-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}
-`;
-
-export const StyledNumericFormat = styled(NumericFormat)`
-  ${inputStyle}
-  text-align: right;
-`;
-
-export const StyledTextArea = styled.textarea`
-  ${inputStyle}
-  display: block;
-`;
-
-export const StackedLabelContainer = styled.div.attrs({
-  className: 'StackedLabelContainer',
-})`
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  color: var(--color-gray-900);
-`;
+import styled, { css } from 'styled-components';
+
+import { NumericFormat } from 'react-number-format';
+
+export const inputStyle = css`
+  font-family: var(--font-input);
+  font-size: inherit;
+  color: var(--color-text-800);
+  background-color: var(--color-base-0);
+  border: 1px solid var(--color-base-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}
+`;
+
+export const StyledNumericFormat = styled(NumericFormat)`
+  ${inputStyle}
+  text-align: right;
+`;
+
+export const StyledTextArea = styled.textarea`
+  ${inputStyle}
+  display: block;
+`;
+
+export const StackedLabelContainer = styled.div.attrs({
+  className: 'StackedLabelContainer',
+})`
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  color: var(--color-gray-900);
+`;

package/src/components/layout/Columns.ts

@@ -1,28 +1,28 @@
-import { SpaceProps, space } from '../../helpers/styled/space';
-
-import styled from 'styled-components';
-
-export type ColumnsProps = {
-  columns?: number | string[];
-  $maxColumnWidth?: string;
-} & SpaceProps;
-
-export const Columns = styled.div<ColumnsProps>`
-  display: grid;
-  grid-gap: var(--space-6);
-  width: 100%;
-  box-sizing: border-box;
-
-  grid-template-columns: ${({ columns = 1, $maxColumnWidth = '1fr' }) =>
-    typeof columns === 'number'
-      ? `repeat(${columns}, minmax(0, ${$maxColumnWidth}))`
-      : columns?.join(' ') ?? 'none'};
-
-  ${space};
-`;
-
-export const Column = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-6);
-`;
+import { SpaceProps, space } from '../../helpers/styled/space';
+
+import styled from 'styled-components';
+
+export type ColumnsProps = {
+  columns?: number | string[];
+  $maxColumnWidth?: string;
+} & SpaceProps;
+
+export const Columns = styled.div<ColumnsProps>`
+  display: grid;
+  grid-gap: var(--space-6);
+  width: 100%;
+  box-sizing: border-box;
+
+  grid-template-columns: ${({ columns = 1, $maxColumnWidth = '1fr' }) =>
+    typeof columns === 'number'
+      ? `repeat(${columns}, minmax(0, ${$maxColumnWidth}))`
+      : columns?.join(' ') ?? 'none'};
+
+  ${space};
+`;
+
+export const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+`;

package/src/components/layout/Dropdown/index.tsx

@@ -1,113 +1,113 @@
-import * as styles from './styles';
-
-import {
-  CSSProperties,
-  FC,
-  PropsWithChildren,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
-
-import { usePortals } from '../../../providers/hooks';
-
-type DropdownProps = PropsWithChildren<
-  styles.DropdownContainerProps & {
-    $sourceRect: DOMRect;
-    $autoPositionX?: boolean;
-    $autoPositionY?: boolean;
-    onClose?: () => void;
-    usePortal?: boolean;
-    style?: CSSProperties;
-  }
->;
-
-const getDropdownStyle = (dropdown: DropdownProps): CSSProperties => {
-  const minHeight = Array.isArray(dropdown.$height)
-    ? dropdown.$height[0]
-    : dropdown.$height;
-  const maxHeight = Array.isArray(dropdown.$height)
-    ? dropdown.$height[1]
-    : dropdown.$height;
-  const bottomSpace = document.body.scrollHeight - dropdown.$sourceRect.bottom;
-  const topSpace = dropdown.$sourceRect.top;
-  const isDropdownBelow =
-    !dropdown.$autoPositionY ||
-    bottomSpace > topSpace ||
-    bottomSpace >= minHeight;
-  const height = Math.max(
-    Math.min(maxHeight, isDropdownBelow ? bottomSpace : topSpace),
-    minHeight
-  );
-
-  const rightSpace = document.body.scrollWidth - dropdown.$sourceRect.right;
-  const leftSpace = dropdown.$sourceRect.left;
-  const isDropdownRight =
-    !dropdown.$autoPositionX ||
-    rightSpace > leftSpace ||
-    rightSpace >= dropdown.$width;
-
-  const dropdownStyle: CSSProperties = {
-    ...(isDropdownBelow
-      ? { top: topSpace + dropdown.$sourceRect.height }
-      : { bottom: bottomSpace + dropdown.$sourceRect.height }),
-    ...(isDropdownRight ? { left: leftSpace } : { right: rightSpace }),
-    width: dropdown.$width,
-    height,
-    minHeight,
-    maxHeight,
-    boxSizing: 'border-box',
-    ...dropdown.style,
-  };
-  return dropdownStyle;
-};
-
-export const Dropdown: FC<DropdownProps> = ({
-  children,
-  onClose,
-  usePortal = true,
-  ...props
-}) => {
-  const { createPortal } = usePortals();
-
-  const firstClick = useRef(true);
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const style = useMemo(() => getDropdownStyle(props), [props]);
-
-  const onDocumentClick = useCallback(
-    (ev: MouseEvent) => {
-      if (firstClick.current) {
-        firstClick.current = false;
-        return;
-      }
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(ev.target as Node)
-      ) {
-        return onClose?.();
-      }
-    },
-    [onClose]
-  );
-
-  useEffect(() => {
-    if (containerRef.current) {
-      document.addEventListener('click', onDocumentClick);
-      return () => {
-        document.removeEventListener('click', onDocumentClick);
-      };
-    }
-  }, [onDocumentClick]);
-
-  const modalPortal = useMemo(() => {
-    const content = (
-      <styles.DropdownContainer ref={containerRef} {...props} style={style}>
-        {children}
-      </styles.DropdownContainer>
-    );
-    return usePortal ? createPortal(content) : content;
-  }, [children, createPortal, props, style, usePortal]);
-
-  return <>{modalPortal}</>;
-};
+import * as styles from './styles';
+
+import {
+  CSSProperties,
+  FC,
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+
+import { usePortals } from '../../../providers/hooks';
+
+type DropdownProps = PropsWithChildren<
+  styles.DropdownContainerProps & {
+    $sourceRect: DOMRect;
+    $autoPositionX?: boolean;
+    $autoPositionY?: boolean;
+    onClose?: () => void;
+    usePortal?: boolean;
+    style?: CSSProperties;
+  }
+>;
+
+const getDropdownStyle = (dropdown: DropdownProps): CSSProperties => {
+  const minHeight = Array.isArray(dropdown.$height)
+    ? dropdown.$height[0]
+    : dropdown.$height;
+  const maxHeight = Array.isArray(dropdown.$height)
+    ? dropdown.$height[1]
+    : dropdown.$height;
+  const bottomSpace = document.body.scrollHeight - dropdown.$sourceRect.bottom;
+  const topSpace = dropdown.$sourceRect.top;
+  const isDropdownBelow =
+    !dropdown.$autoPositionY ||
+    bottomSpace > topSpace ||
+    bottomSpace >= minHeight;
+  const height = Math.max(
+    Math.min(maxHeight, isDropdownBelow ? bottomSpace : topSpace),
+    minHeight
+  );
+
+  const rightSpace = document.body.scrollWidth - dropdown.$sourceRect.right;
+  const leftSpace = dropdown.$sourceRect.left;
+  const isDropdownRight =
+    !dropdown.$autoPositionX ||
+    rightSpace > leftSpace ||
+    rightSpace >= dropdown.$width;
+
+  const dropdownStyle: CSSProperties = {
+    ...(isDropdownBelow
+      ? { top: topSpace + dropdown.$sourceRect.height }
+      : { bottom: bottomSpace + dropdown.$sourceRect.height }),
+    ...(isDropdownRight ? { left: leftSpace } : { right: rightSpace }),
+    width: dropdown.$width,
+    height,
+    minHeight,
+    maxHeight,
+    boxSizing: 'border-box',
+    ...dropdown.style,
+  };
+  return dropdownStyle;
+};
+
+export const Dropdown: FC<DropdownProps> = ({
+  children,
+  onClose,
+  usePortal = true,
+  ...props
+}) => {
+  const { createPortal } = usePortals();
+
+  const firstClick = useRef(true);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const style = useMemo(() => getDropdownStyle(props), [props]);
+
+  const onDocumentClick = useCallback(
+    (ev: MouseEvent) => {
+      if (firstClick.current) {
+        firstClick.current = false;
+        return;
+      }
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(ev.target as Node)
+      ) {
+        return onClose?.();
+      }
+    },
+    [onClose]
+  );
+
+  useEffect(() => {
+    if (containerRef.current) {
+      document.addEventListener('click', onDocumentClick);
+      return () => {
+        document.removeEventListener('click', onDocumentClick);
+      };
+    }
+  }, [onDocumentClick]);
+
+  const modalPortal = useMemo(() => {
+    const content = (
+      <styles.DropdownContainer ref={containerRef} {...props} style={style}>
+        {children}
+      </styles.DropdownContainer>
+    );
+    return usePortal ? createPortal(content) : content;
+  }, [children, createPortal, props, style, usePortal]);
+
+  return <>{modalPortal}</>;
+};

package/src/components/layout/Dropdown/styles.ts

@@ -1,53 +1,53 @@
-import styled, { css } from 'styled-components';
-
-export const DropdownBackdrop = styled.div.attrs<{ $alpha?: number }>({
-  className: 'DropdownBackdrop',
-})`
-  position: absolute;
-  z-index: 1000;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, ${({ $alpha = 0.5 }) => $alpha});
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export type DropdownContainerProps = {
-  $width: number;
-  $height: number | number[];
-  $zIndex?: number;
-  $backdropAlpha?: number;
-  $withBackground?: boolean;
-};
-
-export const DropdownContainer = styled.div.attrs({
-  className: 'DropdownContainer',
-})<DropdownContainerProps>`
-  background: var(--color-base-0);
-  border-radius: var(--rounded-md);
-  box-shadow: var(--shadow-lg);
-  outline: 1px solid var(--color-base-200);
-
-  position: absolute;
-  z-index: 1001;
-  ${({ $width }) => ($width ? `${$width}px` : 'auto')};
-  ${({ $height }) =>
-    Array.isArray($height)
-      ? css`
-          min-height: ${$height[0]}px;
-          max-height: ${$height[1]}px;
-        `
-      : css`
-          height: ${$height ? `${$height}px` : 'auto'};
-        `}
-  ${({ $withBackground }) =>
-    $withBackground &&
-    css`
-      background: none;
-      box-shadow: none;
-      outline: none;
-    `}
-`;
+import styled, { css } from 'styled-components';
+
+export const DropdownBackdrop = styled.div.attrs<{ $alpha?: number }>({
+  className: 'DropdownBackdrop',
+})`
+  position: absolute;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, ${({ $alpha = 0.5 }) => $alpha});
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export type DropdownContainerProps = {
+  $width: number;
+  $height: number | number[];
+  $zIndex?: number;
+  $backdropAlpha?: number;
+  $withBackground?: boolean;
+};
+
+export const DropdownContainer = styled.div.attrs({
+  className: 'DropdownContainer',
+})<DropdownContainerProps>`
+  background: var(--color-base-0);
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-lg);
+  outline: 1px solid var(--color-base-200);
+
+  position: absolute;
+  z-index: 1001;
+  ${({ $width }) => ($width ? `${$width}px` : 'auto')};
+  ${({ $height }) =>
+    Array.isArray($height)
+      ? css`
+          min-height: ${$height[0]}px;
+          max-height: ${$height[1]}px;
+        `
+      : css`
+          height: ${$height ? `${$height}px` : 'auto'};
+        `}
+  ${({ $withBackground }) =>
+    $withBackground &&
+    css`
+      background: none;
+      box-shadow: none;
+      outline: none;
+    `}
+`;

package/src/components/layout/Flexbox.ts

@@ -1,21 +1,21 @@
-import { SpaceProps, space } from '../../helpers/styled/space';
-
-import { CSSProperties } from 'react';
-import { ThemeSpace } from '../../providers/ThemeProvider/types';
-import styled from 'styled-components';
-
-type FlexboxProps = {
-  direction?: CSSProperties['flexDirection'];
-  justifyContent?: CSSProperties['justifyContent'];
-  alignItems?: CSSProperties['alignItems'];
-  gap?: ThemeSpace;
-} & SpaceProps;
-
-export const Flexbox = styled.div<FlexboxProps>`
-  display: flex;
-  flex-direction: ${({ direction }) => direction};
-  justify-content: ${({ justifyContent }) => justifyContent};
-  align-items: ${({ alignItems }) => alignItems};
-  gap: ${({ gap }) => (gap ? `var(--s-${gap})` : undefined)};
-  ${space}
-`;
+import { SpaceProps, space } from '../../helpers/styled/space';
+
+import { CSSProperties } from 'react';
+import { ThemeSpace } from '../../providers/ThemeProvider/types';
+import styled from 'styled-components';
+
+type FlexboxProps = {
+  direction?: CSSProperties['flexDirection'];
+  justifyContent?: CSSProperties['justifyContent'];
+  alignItems?: CSSProperties['alignItems'];
+  gap?: ThemeSpace;
+} & SpaceProps;
+
+export const Flexbox = styled.div<FlexboxProps>`
+  display: flex;
+  flex-direction: ${({ direction }) => direction};
+  justify-content: ${({ justifyContent }) => justifyContent};
+  align-items: ${({ alignItems }) => alignItems};
+  gap: ${({ gap }) => (gap ? `var(--s-${gap})` : undefined)};
+  ${space}
+`;

package/src/components/layout/Grid/index.tsx

@@ -1,8 +1,8 @@
-import { GridContainer, GridItemContainer } from './styles';
-
-type GridFC = typeof GridContainer & {
-  Item: typeof GridItemContainer;
-};
-
-export const Grid = GridContainer as GridFC;
-Grid.Item = GridItemContainer;
+import { GridContainer, GridItemContainer } from './styles';
+
+type GridFC = typeof GridContainer & {
+  Item: typeof GridItemContainer;
+};
+
+export const Grid = GridContainer as GridFC;
+Grid.Item = GridItemContainer;