@addev-be/ui 3.2.9 → 3.3.0

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 '@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 '@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 '@theme';
-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 '@theme';
+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/LeftMenu/LeftMenu.tsx

@@ -0,0 +1,89 @@
+import { IconFC } from '../../../icons';
+import { cn } from '@helpers/cn';
+
+export interface LeftMenuItem {
+  id: string;
+  label: string;
+  icon?: IconFC;
+  onClick?: () => void;
+}
+
+export interface LeftMenuGroup {
+  title?: string;
+  items: LeftMenuItem[];
+}
+
+export interface LeftMenuProps {
+  header?: {
+    title: string;
+    subtitle?: string;
+  };
+  groups: LeftMenuGroup[];
+  activeItemId?: string;
+  onItemClick?: (itemId: string) => void;
+  className?: string;
+}
+
+export function LeftMenu({
+  header,
+  groups,
+  activeItemId,
+  onItemClick,
+  className,
+}: LeftMenuProps) {
+  const handleItemClick = (item: LeftMenuItem) => {
+    if (item.onClick) {
+      item.onClick();
+    }
+    if (onItemClick) {
+      onItemClick(item.id);
+    }
+  };
+
+  return (
+    <aside className={cn('h-full w-full bg-card flex flex-col', className)}>
+      {header && (
+        <div className="p-6 border-b border-border">
+          <h1 className="text-xl font-bold text-foreground">{header.title}</h1>
+          {header.subtitle && (
+            <p className="text-sm text-muted-foreground mt-1">
+              {header.subtitle}
+            </p>
+          )}
+        </div>
+      )}
+
+      <nav className="flex-1 overflow-y-auto p-4">
+        {groups.map((group, groupIndex) => (
+          <div key={groupIndex} className={cn(groupIndex > 0 && 'mt-6')}>
+            {group.title && (
+              <h3 className="px-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
+                {group.title}
+              </h3>
+            )}
+            <div className="space-y-1">
+              {group.items.map((item) => {
+                const Icon = item.icon;
+                return (
+                  <button
+                    key={item.id}
+                    onClick={() => handleItemClick(item)}
+                    className={cn(
+                      'w-full flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors',
+                      activeItemId === item.id
+                        ? 'bg-primary text-primary-foreground'
+                        : 'text-foreground hover:bg-accent hover:text-accent-foreground'
+                    )}
+                  >
+                    {Icon && <Icon className="w-4 h-4" />}
+                    {item.label}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+      </nav>
+    </aside>
+  );
+}

package/src/components/layout/LeftMenu/index.ts

@@ -0,0 +1,2 @@
+export { LeftMenu } from './LeftMenu';
+export type { LeftMenuProps, LeftMenuItem, LeftMenuGroup } from './LeftMenu';

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 '@hooks';
-
-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 '@hooks';
+
+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);
+  }
+`;