@addev-be/ui 0.14.5 → 0.15.1

package/src/components/forms/styles.ts

@@ -1,31 +1,31 @@
-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.attrs({
-  className: 'Input',
-})`
-  ${inputStyle}
-`;
-
-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';
+
+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.attrs({
+  className: 'Input',
+})`
+  ${inputStyle}
+`;
+
+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/index.ts

@@ -1,6 +1,6 @@
-export * from './auth';
-export * from './data';
-export * from './forms';
-export * from './layout';
-export * from './search';
-export * from './ui';
+export * from './auth';
+export * from './data';
+export * from './forms';
+export * from './layout';
+export * from './search';
+export * from './ui';

package/src/components/layout/Columns.ts

@@ -1,20 +1,20 @@
-import styled from 'styled-components';
-
-export type ColumnsProps = {
-  columns?: number | string[];
-};
-
-export const Columns = styled.div<ColumnsProps>`
-  display: grid;
-  grid-gap: var(--space-2);
-  grid-template-columns: ${({ columns }) =>
-    typeof columns === 'number'
-      ? `repeat(${columns}, 1fr)`
-      : columns?.join(' ') || 'none'};
-`;
-
-export const Column = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-`;
+import styled from 'styled-components';
+
+export type ColumnsProps = {
+  columns?: number | string[];
+};
+
+export const Columns = styled.div<ColumnsProps>`
+  display: grid;
+  grid-gap: var(--space-2);
+  grid-template-columns: ${({ columns }) =>
+    typeof columns === 'number'
+      ? `repeat(${columns}, 1fr)`
+      : columns?.join(' ') || 'none'};
+`;
+
+export const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+`;

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

@@ -1,112 +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;
-    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,
-  ...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(
-    () =>
-      createPortal(
-        <styles.DropdownContainer ref={containerRef} {...props} style={style}>
-          {children}
-        </styles.DropdownContainer>
-      ),
-    [children, createPortal, props, style]
-  );
-
-  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-neutral-0);
-  border-radius: var(--rounded-md);
-  box-shadow: var(--shadow-lg);
-  outline: 1px solid var(--color-neutral-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-neutral-0);
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-lg);
+  outline: 1px solid var(--color-neutral-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/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);
+  }
+`;