@addev-be/ui 1.0.0 → 1.0.2

package/src/components/ui/ContextMenu/index.tsx

@@ -1,79 +1,79 @@
-import { Divider, MenuContainer, MenuItemContainer, SubMenu } from './styles';
-import {
-  FC,
-  HTMLAttributes,
-  PropsWithChildren,
-  useCallback,
-  useRef,
-  useState,
-} from 'react';
-
-type ContextMenuFC = FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & {
-  Item: typeof MenuItemContainer;
-  ParentItem: typeof ParentMenuItem;
-  Divider: typeof Divider;
-  SubMenu: typeof SubMenu;
-};
-
-export const ContextMenu: ContextMenuFC = ({ children }) => {
-  return (
-    <MenuContainer onClick={(e) => e.stopPropagation()}>
-      {children}
-    </MenuContainer>
-  );
-};
-
-export const ParentMenuItem: FC<HTMLAttributes<HTMLDivElement>> = ({
-  children,
-  ...props
-}) => {
-  const [isOpened, setIsOpened] = useState(false);
-  const [isSubMenuLeft, setIsSubMenuLeft] = useState(false);
-  const [currentTimeout, setCurrentTimeout] = useState<number | null>(null);
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  const stopTimeout = useCallback(() => {
-    if (currentTimeout) {
-      clearTimeout(currentTimeout);
-    }
-    setCurrentTimeout(null);
-  }, [currentTimeout]);
-
-  const startTimeout = useCallback(
-    (open: boolean) => {
-      stopTimeout();
-      setCurrentTimeout(
-        window.setTimeout(
-          () => {
-            const rect = containerRef.current?.getBoundingClientRect();
-            setIsSubMenuLeft(!!rect && rect.right + 280 > window.innerWidth);
-            setIsOpened(open);
-          },
-          open ? 100 : 300
-        )
-      );
-    },
-    [stopTimeout]
-  );
-
-  const open = useCallback(() => startTimeout(true), [startTimeout]);
-  const close = useCallback(() => startTimeout(false), [startTimeout]);
-
-  return (
-    <MenuItemContainer
-      ref={containerRef}
-      {...props}
-      className={`${isOpened ? 'opened' : ''} ${isSubMenuLeft ? 'left' : ''}`}
-      onMouseEnter={open}
-      onMouseLeave={close}
-      $withArrow
-    >
-      {children}
-    </MenuItemContainer>
-  );
-};
-
-ContextMenu.Item = MenuItemContainer;
-ContextMenu.ParentItem = ParentMenuItem;
-ContextMenu.Divider = Divider;
-ContextMenu.SubMenu = SubMenu;
+import { Divider, MenuContainer, MenuItemContainer, SubMenu } from './styles';
+import {
+  FC,
+  HTMLAttributes,
+  PropsWithChildren,
+  useCallback,
+  useRef,
+  useState,
+} from 'react';
+
+type ContextMenuFC = FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & {
+  Item: typeof MenuItemContainer;
+  ParentItem: typeof ParentMenuItem;
+  Divider: typeof Divider;
+  SubMenu: typeof SubMenu;
+};
+
+export const ContextMenu: ContextMenuFC = ({ children }) => {
+  return (
+    <MenuContainer onClick={(e) => e.stopPropagation()}>
+      {children}
+    </MenuContainer>
+  );
+};
+
+export const ParentMenuItem: FC<HTMLAttributes<HTMLDivElement>> = ({
+  children,
+  ...props
+}) => {
+  const [isOpened, setIsOpened] = useState(false);
+  const [isSubMenuLeft, setIsSubMenuLeft] = useState(false);
+  const [currentTimeout, setCurrentTimeout] = useState<number | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const stopTimeout = useCallback(() => {
+    if (currentTimeout) {
+      clearTimeout(currentTimeout);
+    }
+    setCurrentTimeout(null);
+  }, [currentTimeout]);
+
+  const startTimeout = useCallback(
+    (open: boolean) => {
+      stopTimeout();
+      setCurrentTimeout(
+        window.setTimeout(
+          () => {
+            const rect = containerRef.current?.getBoundingClientRect();
+            setIsSubMenuLeft(!!rect && rect.right + 280 > window.innerWidth);
+            setIsOpened(open);
+          },
+          open ? 100 : 300
+        )
+      );
+    },
+    [stopTimeout]
+  );
+
+  const open = useCallback(() => startTimeout(true), [startTimeout]);
+  const close = useCallback(() => startTimeout(false), [startTimeout]);
+
+  return (
+    <MenuItemContainer
+      ref={containerRef}
+      {...props}
+      className={`${isOpened ? 'opened' : ''} ${isSubMenuLeft ? 'left' : ''}`}
+      onMouseEnter={open}
+      onMouseLeave={close}
+      $withArrow
+    >
+      {children}
+    </MenuItemContainer>
+  );
+};
+
+ContextMenu.Item = MenuItemContainer;
+ContextMenu.ParentItem = ParentMenuItem;
+ContextMenu.Divider = Divider;
+ContextMenu.SubMenu = SubMenu;

package/src/components/ui/ContextMenu/styles.ts

@@ -1,119 +1,119 @@
-import styled, { css } from 'styled-components';
-
-import { ThemeColor } from '../../../providers/ThemeProvider/types';
-
-const menuContainerCss = css`
-  position: absolute;
-  color: var(--color-text-800);
-  border-radius: var(--rounded-md);
-  padding: var(--space-1) 0;
-  box-shadow: var(--shadow-lg);
-  background-color: var(--color-base-100);
-  min-width: 20em;
-  outline: 1px solid var(--color-base-200);
-  display: flex;
-  flex-direction: column;
-`;
-
-export const MenuContainer = styled.div.attrs({
-  className: 'MenuContainer',
-})`
-  ${menuContainerCss}
-  inset: 0;
-`;
-MenuContainer.displayName = 'MenuContainer';
-
-export const SubMenu = styled.div.attrs({
-  className: 'SubMenu',
-})`
-  ${menuContainerCss}
-  top: 0;
-  left: 100%;
-  margin-top: -var(--space-1);
-`;
-SubMenu.displayName = 'SubMenu';
-
-export const MenuItemContainer = styled.div.attrs({
-  className: 'MenuItemContainer',
-})<{
-  $color?: ThemeColor;
-  disabled?: boolean;
-  $withArrow?: boolean;
-  $opened?: boolean;
-}>`
-  position: relative;
-  display: flex;
-  align-items: center;
-  font-family: var(--font-sans);
-  font-weight: normal;
-  text-align: left;
-  padding: var(--space-1) var(--space-2);
-  font-size: var(--text-base);
-  line-height: var(--leading-6);
-  border: none;
-  cursor: pointer;
-
-  ${({ $withArrow }) =>
-    $withArrow &&
-    css`
-      &::after {
-        content: '';
-        position: absolute;
-        right: var(--space-2);
-        top: 50%;
-        transform: translateY(-50%);
-        border: 4px solid transparent;
-        border-left-color: var(--color-text-600);
-      }
-    `}
-
-  ${({ $color, disabled }) =>
-    disabled
-      ? css`
-          color: var(--color-text-300);
-          background-color: var(--color-base-100);
-          cursor: default;
-        `
-      : $color
-      ? css`
-          color: var(--color-${$color}-600);
-          background-color: var(--color-base-100);
-          &:hover {
-            background-color: var(--color-${$color}-200);
-          }
-        `
-      : css`
-          color: var(--color-text-800);
-          background-color: var(--color-base-100);
-          &:hover {
-            background-color: var(--color-base-200);
-          }
-        `}
-
-  svg {
-    fill: currentColor;
-    width: var(--space-4);
-    height: var(--space-4);
-    margin-right: var(--space-2);
-  }
-
-  & > ${SubMenu} {
-    display: none;
-    margin-top: calc(0px - var(--space-1));
-  }
-  &.opened > ${SubMenu} {
-    display: block;
-  }
-  &.opened.left > ${SubMenu} {
-    left: auto;
-    right: 100%;
-  }
-`;
-MenuItemContainer.displayName = 'MenuItemContainer';
-
-export const Divider = styled.div.attrs({
-  className: 'Divider',
-})`
-  border-top: 1px solid var(--color-base-200);
-  margin: var(--space-1) 0;
-`;
+import styled, { css } from 'styled-components';
+
+import { ThemeColor } from '../../../providers/ThemeProvider/types';
+
+const menuContainerCss = css`
+  position: absolute;
+  color: var(--color-text-800);
+  border-radius: var(--rounded-md);
+  padding: var(--space-1) 0;
+  box-shadow: var(--shadow-lg);
+  background-color: var(--color-base-100);
+  min-width: 20em;
+  outline: 1px solid var(--color-base-200);
+  display: flex;
+  flex-direction: column;
+`;
+
+export const MenuContainer = styled.div.attrs({
+  className: 'MenuContainer',
+})`
+  ${menuContainerCss}
+  inset: 0;
+`;
+MenuContainer.displayName = 'MenuContainer';
+
+export const SubMenu = styled.div.attrs({
+  className: 'SubMenu',
+})`
+  ${menuContainerCss}
+  top: 0;
+  left: 100%;
+  margin-top: -var(--space-1);
+`;
+SubMenu.displayName = 'SubMenu';
+
+export const MenuItemContainer = styled.div.attrs({
+  className: 'MenuItemContainer',
+})<{
+  $color?: ThemeColor;
+  disabled?: boolean;
+  $withArrow?: boolean;
+  $opened?: boolean;
+}>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-family: var(--font-sans);
+  font-weight: normal;
+  text-align: left;
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-base);
+  line-height: var(--leading-6);
+  border: none;
+  cursor: pointer;
+
+  ${({ $withArrow }) =>
+    $withArrow &&
+    css`
+      &::after {
+        content: '';
+        position: absolute;
+        right: var(--space-2);
+        top: 50%;
+        transform: translateY(-50%);
+        border: 4px solid transparent;
+        border-left-color: var(--color-text-600);
+      }
+    `}
+
+  ${({ $color, disabled }) =>
+    disabled
+      ? css`
+          color: var(--color-text-300);
+          background-color: var(--color-base-100);
+          cursor: default;
+        `
+      : $color
+      ? css`
+          color: var(--color-${$color}-600);
+          background-color: var(--color-base-100);
+          &:hover {
+            background-color: var(--color-${$color}-200);
+          }
+        `
+      : css`
+          color: var(--color-text-800);
+          background-color: var(--color-base-100);
+          &:hover {
+            background-color: var(--color-base-200);
+          }
+        `}
+
+  svg {
+    fill: currentColor;
+    width: var(--space-4);
+    height: var(--space-4);
+    margin-right: var(--space-2);
+  }
+
+  & > ${SubMenu} {
+    display: none;
+    margin-top: calc(0px - var(--space-1));
+  }
+  &.opened > ${SubMenu} {
+    display: block;
+  }
+  &.opened.left > ${SubMenu} {
+    left: auto;
+    right: 100%;
+  }
+`;
+MenuItemContainer.displayName = 'MenuItemContainer';
+
+export const Divider = styled.div.attrs({
+  className: 'Divider',
+})`
+  border-top: 1px solid var(--color-base-200);
+  margin: var(--space-1) 0;
+`;

package/src/components/ui/Ellipsis.tsx

@@ -1,34 +1,34 @@
-import styled from 'styled-components';
-
-type EllipsisProps = React.HTMLAttributes<HTMLElement> & {
-  as?: keyof JSX.IntrinsicElements;
-  $width?: string;
-  $maxWidth?: string;
-  $multiline?: boolean;
-  $lineClamp?: number;
-};
-
-/**
- * Ellipsis component that truncates text with an ellipsis when it overflows
- * Can be rendered as any HTML element (div, span, p, etc.) using the "as" prop
- */
-export const Ellipsis = styled.div<EllipsisProps>`
-  overflow: hidden;
-  width: ${({ $width }) => $width || 'auto'};
-  max-width: ${({ $maxWidth }) => $maxWidth || '100%'};
-
-  ${({ $multiline, $lineClamp = 1 }) =>
-    $multiline
-      ? `
-        display: -webkit-box;
-        -webkit-line-clamp: ${$lineClamp};
-        -webkit-box-orient: vertical;
-        white-space: normal;
-        line-height: 1.25;
-        max-height: calc(${1.25 * $lineClamp}em);
-      `
-      : `
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      `}
-`;
+import styled from 'styled-components';
+
+type EllipsisProps = React.HTMLAttributes<HTMLElement> & {
+  as?: keyof JSX.IntrinsicElements;
+  $width?: string;
+  $maxWidth?: string;
+  $multiline?: boolean;
+  $lineClamp?: number;
+};
+
+/**
+ * Ellipsis component that truncates text with an ellipsis when it overflows
+ * Can be rendered as any HTML element (div, span, p, etc.) using the "as" prop
+ */
+export const Ellipsis = styled.div<EllipsisProps>`
+  overflow: hidden;
+  width: ${({ $width }) => $width || 'auto'};
+  max-width: ${({ $maxWidth }) => $maxWidth || '100%'};
+
+  ${({ $multiline, $lineClamp = 1 }) =>
+    $multiline
+      ? `
+        display: -webkit-box;
+        -webkit-line-clamp: ${$lineClamp};
+        -webkit-box-orient: vertical;
+        white-space: normal;
+        line-height: 1.25;
+        max-height: calc(${1.25 * $lineClamp}em);
+      `
+      : `
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      `}
+`;

package/src/components/ui/Label.tsx

@@ -1,99 +1,99 @@
-import { ComponentProps, ForwardedRef } from 'react';
-import styled, { css } from 'styled-components';
-
-import { ThemeColor } from '../../providers/ThemeProvider/types';
-import { forwardRefWithName } from '../../helpers/components';
-
-export const StyledLabel = styled.span.withConfig({
-  shouldForwardProp: () => true,
-})<LabelProps>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--font-sans);
-  font-weight: 500;
-
-  ${({ color }) =>
-    color
-      ? css`
-          background-color: var(--color-${color}-100);
-          color: var(--color-${color}-700);
-          svg {
-            fill: var(--color-${color}-700);
-          }
-        `
-      : css`
-          background-color: var(--color-base-100);
-          color: var(--color-text-700);
-          svg {
-            fill: var(--color-base-700);
-          }
-        `}
-
-  ${({ bordered, color }) =>
-    bordered
-      ? css`
-          border: 1px solid
-            ${color ? `var(--color-${color}-200)` : 'var(--color-base-200)'};
-        `
-      : 'border: none;'}
-
-  ${({ rounded }) => rounded && 'border-radius: var(--rounded-full);'}
-
-  &.small {
-    padding: var(--space-0_5) var(--space-1_5);
-    font-size: var(--text-xs);
-    border-radius: var(--rounded-sm);
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-3);
-      height: var(--space-3);
-    }
-  }
-
-  &.medium {
-    padding: var(--space-1) var(--space-2);
-    font-size: var(--text-sm);
-    border-radius: var(--rounded-md);
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-3_5);
-      height: var(--space-3_5);
-    }
-  }
-
-  &.large {
-    padding: var(--space-1_5) var(--space-2_5);
-    font-size: var(--text-base);
-    border-radius: var(--rounded-lg);
-    svg {
-      margin-right: var(--space-1_5);
-      width: var(--space-4);
-      height: var(--space-4);
-    }
-  }
-`;
-
-export type LabelProps = {
-  color?: ThemeColor;
-  size?: 'small' | 'medium' | 'large';
-  rounded?: boolean;
-  bordered?: boolean;
-};
-
-export const Label = forwardRefWithName(
-  (
-    {
-      children,
-      size = 'medium',
-      className = '',
-      ...props
-    }: ComponentProps<typeof StyledLabel> & LabelProps,
-    ref: ForwardedRef<HTMLSpanElement>
-  ) => (
-    <StyledLabel ref={ref} className={`${size} ${className}`} {...props}>
-      {children}
-    </StyledLabel>
-  ),
-  'Label'
-);
+import { ComponentProps, ForwardedRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { ThemeColor } from '../../providers/ThemeProvider/types';
+import { forwardRefWithName } from '../../helpers/components';
+
+export const StyledLabel = styled.span.withConfig({
+  shouldForwardProp: () => true,
+})<LabelProps>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-sans);
+  font-weight: 500;
+
+  ${({ color }) =>
+    color
+      ? css`
+          background-color: var(--color-${color}-100);
+          color: var(--color-${color}-700);
+          svg {
+            fill: var(--color-${color}-700);
+          }
+        `
+      : css`
+          background-color: var(--color-base-100);
+          color: var(--color-text-700);
+          svg {
+            fill: var(--color-base-700);
+          }
+        `}
+
+  ${({ bordered, color }) =>
+    bordered
+      ? css`
+          border: 1px solid
+            ${color ? `var(--color-${color}-200)` : 'var(--color-base-200)'};
+        `
+      : 'border: none;'}
+
+  ${({ rounded }) => rounded && 'border-radius: var(--rounded-full);'}
+
+  &.small {
+    padding: var(--space-0_5) var(--space-1_5);
+    font-size: var(--text-xs);
+    border-radius: var(--rounded-sm);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-3);
+      height: var(--space-3);
+    }
+  }
+
+  &.medium {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-sm);
+    border-radius: var(--rounded-md);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-3_5);
+      height: var(--space-3_5);
+    }
+  }
+
+  &.large {
+    padding: var(--space-1_5) var(--space-2_5);
+    font-size: var(--text-base);
+    border-radius: var(--rounded-lg);
+    svg {
+      margin-right: var(--space-1_5);
+      width: var(--space-4);
+      height: var(--space-4);
+    }
+  }
+`;
+
+export type LabelProps = {
+  color?: ThemeColor;
+  size?: 'small' | 'medium' | 'large';
+  rounded?: boolean;
+  bordered?: boolean;
+};
+
+export const Label = forwardRefWithName(
+  (
+    {
+      children,
+      size = 'medium',
+      className = '',
+      ...props
+    }: ComponentProps<typeof StyledLabel> & LabelProps,
+    ref: ForwardedRef<HTMLSpanElement>
+  ) => (
+    <StyledLabel ref={ref} className={`${size} ${className}`} {...props}>
+      {children}
+    </StyledLabel>
+  ),
+  'Label'
+);