@addev-be/ui 1.0.0 → 1.0.2

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';
-
-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';
+
+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,45 +1,45 @@
-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;
-};
-
-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'};
-        `}
-`;
+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;
+};
+
+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'};
+        `}
+`;

package/src/components/layout/Flexbox.ts

@@ -1,21 +1,21 @@
-import { SpaceProps, space } from '../../helpers';
-
-import { CSSProperties } from 'react';
-import { ThemeSpace } from '../../providers';
-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';
+
+import { CSSProperties } from 'react';
+import { ThemeSpace } from '../../providers';
+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;

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

@@ -1,34 +1,34 @@
-import styled from 'styled-components';
-
-type GridProps = {
-  columns?: number;
-};
-
-export const GridContainer = styled.div<GridProps>`
-  display: grid;
-  grid-template-columns: repeat(
-    ${({ columns = 12 }) => columns},
-    minmax(0, 1fr)
-  );
-  grid-template-rows: masonry;
-`;
-
-type GridItemProps = {
-  row?: number;
-  col?: number;
-  rowSpan?: number;
-  colSpan?: number;
-};
-
-export const GridItemContainer = styled.div.attrs<GridItemProps>(
-  ({ col, colSpan, row, rowSpan }) => ({
-    style: {
-      gridColumn: [col, !!colSpan && `span ${colSpan}`]
-        .filter(Boolean)
-        .join(' / '),
-      gridRow: [row, !!rowSpan && `span ${rowSpan}`]
-        .filter(Boolean)
-        .join(' / '),
-    },
-  })
-)``;
+import styled from 'styled-components';
+
+type GridProps = {
+  columns?: number;
+};
+
+export const GridContainer = styled.div<GridProps>`
+  display: grid;
+  grid-template-columns: repeat(
+    ${({ columns = 12 }) => columns},
+    minmax(0, 1fr)
+  );
+  grid-template-rows: masonry;
+`;
+
+type GridItemProps = {
+  row?: number;
+  col?: number;
+  rowSpan?: number;
+  colSpan?: number;
+};
+
+export const GridItemContainer = styled.div.attrs<GridItemProps>(
+  ({ col, colSpan, row, rowSpan }) => ({
+    style: {
+      gridColumn: [col, !!colSpan && `span ${colSpan}`]
+        .filter(Boolean)
+        .join(' / '),
+      gridRow: [row, !!rowSpan && `span ${rowSpan}`]
+        .filter(Boolean)
+        .join(' / '),
+    },
+  })
+)``;

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

@@ -1,29 +1,29 @@
-import * as styles from './styles';
-
-import { FC, PropsWithChildren, useMemo } from 'react';
-
-import { LoadingIcon } from '../../../Icons';
-import { usePortals } from '../../../providers';
-
-type LoadingProps = PropsWithChildren<{
-  visible?: boolean;
-}>;
-
-export const Loading: FC<LoadingProps> = ({ visible, children }) => {
-  const { createPortal } = usePortals();
-  const loadingPortal = useMemo(
-    () =>
-      visible
-        ? createPortal(
-            <styles.LoadingBackdrop>
-              <LoadingIcon />
-              <styles.LoadingContainer>
-                {children || 'Loading ...'}
-              </styles.LoadingContainer>
-            </styles.LoadingBackdrop>
-          )
-        : null,
-    [children, createPortal, visible]
-  );
-  return <>{loadingPortal}</>;
-};
+import * as styles from './styles';
+
+import { FC, PropsWithChildren, useMemo } from 'react';
+
+import { LoadingIcon } from '../../../Icons';
+import { usePortals } from '../../../providers';
+
+type LoadingProps = PropsWithChildren<{
+  visible?: boolean;
+}>;
+
+export const Loading: FC<LoadingProps> = ({ visible, children }) => {
+  const { createPortal } = usePortals();
+  const loadingPortal = useMemo(
+    () =>
+      visible
+        ? createPortal(
+            <styles.LoadingBackdrop>
+              <LoadingIcon />
+              <styles.LoadingContainer>
+                {children || 'Loading ...'}
+              </styles.LoadingContainer>
+            </styles.LoadingBackdrop>
+          )
+        : null,
+    [children, createPortal, visible]
+  );
+  return <>{loadingPortal}</>;
+};

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

@@ -1,29 +1,29 @@
-import styled from 'styled-components';
-
-export const LoadingContainer = styled.div.attrs({
-  className: 'LoadingContent',
-})`
-  padding: var(--space-4);
-`;
-
-export const LoadingBackdrop = styled.div.attrs({
-  className: 'LoadingBackdrop',
-})`
-  position: fixed;
-  z-index: 1100;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: var(--color-gray-50);
-  fill: var(--color-gray-50);
-  & > svg {
-    width: var(--space-8);
-    height: var(--space-8);
-  }
-`;
+import styled from 'styled-components';
+
+export const LoadingContainer = styled.div.attrs({
+  className: 'LoadingContent',
+})`
+  padding: var(--space-4);
+`;
+
+export const LoadingBackdrop = styled.div.attrs({
+  className: 'LoadingBackdrop',
+})`
+  position: fixed;
+  z-index: 1100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: var(--color-gray-50);
+  fill: var(--color-gray-50);
+  & > svg {
+    width: var(--space-8);
+    height: var(--space-8);
+  }
+`;

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

@@ -1,29 +1,29 @@
-import { FC, PropsWithChildren, ReactNode, useMemo } from 'react';
-import {
-  MasonryColumnContainer,
-  MasonryContainer,
-  MasonryContainerProps,
-} from './styles';
-
-export const Masonry: FC<PropsWithChildren<MasonryContainerProps>> = ({
-  children,
-  columns = 3,
-}) => {
-  const childrenByColumn = useMemo(() => {
-    const arr = Array.from({ length: columns }, (): ReactNode[] => []);
-    if (Array.isArray(children)) {
-      children.forEach((child, index) => {
-        arr[index % columns].push(child);
-      });
-    }
-    return arr;
-  }, [children, columns]);
-
-  return (
-    <MasonryContainer columns={columns}>
-      {childrenByColumn.map((column, index) => (
-        <MasonryColumnContainer key={index}>{column}</MasonryColumnContainer>
-      ))}
-    </MasonryContainer>
-  );
-};
+import { FC, PropsWithChildren, ReactNode, useMemo } from 'react';
+import {
+  MasonryColumnContainer,
+  MasonryContainer,
+  MasonryContainerProps,
+} from './styles';
+
+export const Masonry: FC<PropsWithChildren<MasonryContainerProps>> = ({
+  children,
+  columns = 3,
+}) => {
+  const childrenByColumn = useMemo(() => {
+    const arr = Array.from({ length: columns }, (): ReactNode[] => []);
+    if (Array.isArray(children)) {
+      children.forEach((child, index) => {
+        arr[index % columns].push(child);
+      });
+    }
+    return arr;
+  }, [children, columns]);
+
+  return (
+    <MasonryContainer columns={columns}>
+      {childrenByColumn.map((column, index) => (
+        <MasonryColumnContainer key={index}>{column}</MasonryColumnContainer>
+      ))}
+    </MasonryContainer>
+  );
+};

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

@@ -1,20 +1,20 @@
-import styled from 'styled-components';
-
-export type MasonryContainerProps = {
-  columns?: number;
-};
-
-export const MasonryContainer = styled.div<MasonryContainerProps>`
-  display: grid;
-  grid-gap: var(--space-2);
-  grid-template-columns: repeat(
-    ${({ columns = 4 }) => columns},
-    minmax(0, 1fr)
-  );
-`;
-
-export const MasonryColumnContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-`;
+import styled from 'styled-components';
+
+export type MasonryContainerProps = {
+  columns?: number;
+};
+
+export const MasonryContainer = styled.div<MasonryContainerProps>`
+  display: grid;
+  grid-gap: var(--space-2);
+  grid-template-columns: repeat(
+    ${({ columns = 4 }) => columns},
+    minmax(0, 1fr)
+  );
+`;
+
+export const MasonryColumnContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+`;