sbwb-ds 3.1.11 → 3.1.13

package/dist/src/presentation/components/atoms/FloatingButton/Components/FloatingMenu/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface FloatingMenuProps {
+    refButton: React.RefObject<HTMLDivElement>;
+    floatingMenuPosition?: 'top' | 'bottom' | 'left' | 'right';
+    listItems?: React.ReactNode[];
+}
+declare const FloatingMenu: ({ floatingMenuPosition, listItems, }: FloatingMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default FloatingMenu;

package/dist/src/presentation/components/atoms/FloatingButton/Components/FloatingMenu/styles.d.ts

@@ -0,0 +1,9 @@
+interface FloatingMenuProps {
+    floatingMenuPostion?: 'top' | 'bottom' | 'left' | 'right';
+}
+export declare const FloatingMenuContainer: import("styled-components").StyledComponent<"div", any, FloatingMenuProps, never>;
+interface ItemWrapperProps {
+    index?: number;
+}
+export declare const ItemWrapper: import("styled-components").StyledComponent<"div", any, ItemWrapperProps, never>;
+export {};

package/dist/src/presentation/components/atoms/FloatingButton/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface FloatingButtonProps {
+    readonly children?: React.ReactNode;
+    readonly refButton: React.RefObject<HTMLDivElement>;
+    readonly floatingMenuPosition?: 'top' | 'bottom' | 'left' | 'right';
+    listItems?: React.ReactNode[];
+}
+export default function FloatingButton({ refButton, children, floatingMenuPosition, listItems, }: FloatingButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/presentation/components/atoms/FloatingButton/styles.d.ts

@@ -0,0 +1,5 @@
+interface CircleButtonProps {
+    isActive: boolean;
+}
+export declare const CircleButton: import("styled-components").StyledComponent<"div", any, CircleButtonProps, never>;
+export {};

package/dist/src/presentation/components/atoms/Tooltip/index.d.ts

@@ -20,6 +20,8 @@ export interface TooltipProps {
     tooltipMargin?: string;
     wrapperStyles?: React.CSSProperties;
     zIndex?: number;
+    hideOnScroll?: boolean;
+    interactive?: boolean;
 }
-declare const Tooltip: ({ id, children, label, position, size, customStyle, errorTooltip, successTooltip, isActive, isAlwaysVisible, width, height, maxWidth, arrow, color, wrapperWidth, wrapperHeight, tooltipMargin, wrapperStyles, zIndex, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: ({ id, children, label, position, size, customStyle, errorTooltip, successTooltip, isActive, isAlwaysVisible, width, height, maxWidth, arrow, color, wrapperWidth, wrapperHeight, tooltipMargin, wrapperStyles, zIndex, hideOnScroll, interactive, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/dist/src/presentation/components/molecules/PopConfirm/index.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export interface PopConfirmProps {
+    id?: string;
+    children?: React.ReactNode;
+    type: 'danger' | 'success' | 'warning';
+    title: string;
+    text?: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    isActive?: boolean;
+    popConfirmMargin?: string;
+    wrapperWidth?: string;
+    wrapperHeight?: string;
+    wrapperStyles?: React.CSSProperties;
+    onClickConfirm?: () => void;
+    onClickCancel?: () => void;
+}
+declare const PopConfirm: ({ id, children, type, title, text, position, isActive, popConfirmMargin, wrapperWidth, wrapperHeight, wrapperStyles, onClickConfirm, onClickCancel, }: PopConfirmProps) => import("react/jsx-runtime").JSX.Element;
+export default PopConfirm;

package/dist/src/presentation/components/molecules/PopConfirm/styles.d.ts

@@ -0,0 +1,22 @@
+interface PopConfirmWrapperProps {
+    wrapperWidth?: string;
+    wrapperHeight?: string;
+    wrapperStyles?: any;
+}
+export declare const PopConfirmWrapper: import("styled-components").StyledComponent<"div", any, PopConfirmWrapperProps, never>;
+interface PopConfirmContainerProps {
+    height?: string;
+    width?: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+}
+export declare const PopconfirmContainer: import("styled-components").StyledComponent<"div", any, PopConfirmContainerProps, never>;
+export declare const Header: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Footer: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface SpacingProps {
+    height?: string;
+    width?: string;
+}
+export declare const Spacing: import("styled-components").StyledComponent<"div", any, SpacingProps, never>;
+export {};

package/dist/src/presentation/components/molecules/SegmentedButton/index.d.ts

@@ -0,0 +1,11 @@
+import { IconProps } from '../../atoms/Icon';
+export interface SegmentedButtonProps {
+    buttons: {
+        label: string;
+        iconName?: IconProps['iconName'];
+        onClick?: () => void;
+        disabled?: boolean;
+    }[];
+}
+declare const SegmentedButton: ({ buttons }: SegmentedButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default SegmentedButton;

package/dist/src/presentation/components/molecules/SegmentedButton/styles.d.ts

@@ -0,0 +1,13 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface BaseButtonContainerProps {
+    active?: boolean;
+    disabled?: boolean;
+}
+export declare const BaseButtonContainer: import("styled-components").StyledComponent<"div", any, BaseButtonContainerProps, never>;
+export declare const BaseButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+interface SpaceProps {
+    width: string;
+    height?: string;
+}
+export declare const Space: import("styled-components").StyledComponent<"div", any, SpaceProps, never>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sbwb-ds",
-  "version": "3.1.11",
+  "version": "3.1.13",
   "type": "module",
   "description": "Sistema de design para padronização dos processos visuais do portal SUBWEB",
   "main": "dist/sbwb-ds.js",
@@ -32,6 +32,7 @@
     "color": "^4.2.3",
     "dotenv": "^16.0.3",
     "echarts": "^5.5.0",
+    "framer-motion": "^12.6.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-transform-stub": "^2.0.0",

package/src/presentation/components/atoms/ActionButton/styles.ts

@@ -86,7 +86,7 @@ const defaultStateStyles = css<ActionButtonStyleProps>`
     !isSelected &&
     css`
       background-color: ${buttonType === 'primary'
-        ? 'rgba(226, 230, 237, 0.16)'
+        ? sg.colors.backgroundColors.colorBackgroundGrass
         : 'transparent'};
       border: ${buttonType === 'primary'
         ? `${sg.borders.borderWidth.borderWidthThinner} solid ${sg.colors.neutralColors.colorNeutralClean}`

package/src/presentation/components/atoms/Button/Button.stories.tsx

@@ -96,7 +96,6 @@ const Template = (args) => (
         onClick={() => console.log('clicked')}
         iconProps={{
           iconName: 'AccountCircleFILL1Ant',
-          color: 'white',
         }}
       />
     </div>

package/src/presentation/components/atoms/Button/styles.ts

@@ -54,10 +54,7 @@ export const Button = styled.button<ButtonProps>`
       `;
     } else if (variant === 'secondary') {
       return css`
-        background-color: rgba(
-          ${convertHexToRGB(sg.colors.neutralColors.colorNeutralSoft)},
-          ${sg.opacityLevels.light}
-        );
+        background-color: ${sg.colors.backgroundColors.colorBackgroundGrass};
         color: ${sg.colors.neutralColors.colorNeutralDark};
         border: 1px solid ${sg.colors.neutralColors.colorNeutralClean};
         transition: filter 0.2s;

package/src/presentation/components/atoms/FloatingButton/Components/FloatingMenu/index.tsx

@@ -0,0 +1,29 @@
+import { useRef } from 'react';
+import * as C from './styles';
+import { sg } from '../../../../../styles';
+
+export interface FloatingMenuProps {
+  refButton: React.RefObject<HTMLDivElement>;
+  floatingMenuPosition?: 'top' | 'bottom' | 'left' | 'right';
+  listItems?: React.ReactNode[];
+}
+const FloatingMenu = ({
+  floatingMenuPosition,
+  listItems,
+}: FloatingMenuProps) => {
+  const menuRef = useRef<HTMLDivElement>(null);
+  return (
+    <C.FloatingMenuContainer
+      ref={menuRef}
+      floatingMenuPostion={floatingMenuPosition}
+    >
+      {listItems?.map((item, index) => (
+        <C.ItemWrapper key={index} index={index}>
+          {item}
+        </C.ItemWrapper>
+      ))}
+    </C.FloatingMenuContainer>
+  );
+};
+
+export default FloatingMenu;

package/src/presentation/components/atoms/FloatingButton/Components/FloatingMenu/styles.ts

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+import { sg } from '../../../../../styles';
+
+interface FloatingMenuProps {
+  floatingMenuPostion?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const props = (floatingMenuPostion) => {
+  switch (floatingMenuPostion) {
+    case 'top':
+      return {
+        bottom: '100%',
+        marginBottom: sg.spacings.spacingInset.spacingInsetSm,
+      };
+    case 'left':
+      return {
+        right: '100%',
+        marginRight: sg.spacings.spacingInset.spacingInsetSm,
+        bottom: '0',
+      };
+    case 'right':
+      return {
+        left: '100%',
+        marginLeft: sg.spacings.spacingInset.spacingInsetSm,
+        bottom: '0',
+      };
+    default:
+    case 'bottom':
+      return {
+        top: '100%',
+        marginTop: sg.spacings.spacingInset.spacingInsetSm,
+      };
+  }
+};
+export const FloatingMenuContainer = styled.div<FloatingMenuProps>`
+  position: absolute;
+  display: flex;
+  height: fit-content;
+  padding: ${sg.spacings.spacingInset.spacingInsetSm};
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  z-index: 1000;
+  transition: all 0.3s ease-in-out;
+  transform: translateY(0);
+  opacity: 1;
+  pointer-events: auto;
+  border-radius: ${sg.borders.borderRadius.borderRadiusPill};
+  background-color: ${sg.colors.neutralColors.colorNeutralSnow};
+  ${({ floatingMenuPostion }) => props(floatingMenuPostion)}
+`;
+
+interface ItemWrapperProps {
+  index?: number;
+}
+export const ItemWrapper = styled.div`
+  margin-top: ${({ index }: ItemWrapperProps) =>
+    index !== 0 ? sg.spacings.spacingInline.spacingInlineAnt : 0};
+`;

package/src/presentation/components/atoms/FloatingButton/FloatingButton.stories.tsx

@@ -0,0 +1,64 @@
+import React, { useRef } from 'react';
+import FloatingButton from '.';
+import ActionButton from '../ActionButton';
+import { sg } from '../../../styles';
+
+export default {
+  title: 'Buttons/FloatingButton',
+  component: FloatingButton,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+const expandButton = (
+  <ActionButton
+    iconName="ExpandContentMd"
+    iconColor={sg.colors.neutralColors.colorNeutralDark}
+    onClick={() => alert('Expand')}
+    buttonType="secondary"
+    size="Large"
+  />
+);
+
+const importButton = (
+  <ActionButton
+    iconName="OpenInNewMd"
+    iconColor={sg.colors.neutralColors.colorNeutralDark}
+    onClick={() => alert('Import')}
+    buttonType="secondary"
+    size="Large"
+  />
+);
+const listItems = [expandButton, importButton];
+
+const Template = (args) => {
+  const buttonRef = useRef<HTMLDivElement>(null);
+  return (
+    <div
+      ref={buttonRef}
+      style={{
+        height: '500px',
+        width: '500px',
+        backgroundColor: '#f0f0f0',
+        margin: '20px',
+        boxSizing: 'border-box',
+      }}
+    >
+      <div>Área do FloatingButton</div>
+      <div
+        style={{
+          position: 'relative',
+          top: '50%',
+          left: '50%',
+        }}
+      >
+        <FloatingButton refButton={buttonRef} {...args} listItems={listItems} />
+      </div>
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  floatingMenuPosition: 'top',
+};

package/src/presentation/components/atoms/FloatingButton/index.tsx

@@ -0,0 +1,78 @@
+import * as C from './styles';
+import { motion } from 'framer-motion';
+import Icon from '../Icon';
+import { useState } from 'react';
+import { sg } from '../../../styles';
+import FloatingMenu from './Components/FloatingMenu';
+
+export interface FloatingButtonProps {
+  readonly children?: React.ReactNode;
+  readonly refButton: React.RefObject<HTMLDivElement>;
+  readonly floatingMenuPosition?: 'top' | 'bottom' | 'left' | 'right';
+  listItems?: React.ReactNode[];
+}
+
+export default function FloatingButton({
+  refButton,
+  children,
+  floatingMenuPosition = 'top',
+  listItems,
+}: FloatingButtonProps) {
+  const [isActive, setIsActive] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const toggleButton = () => {
+    setIsActive((prev) => !prev);
+  };
+
+  if (children) {
+    return (
+      <motion.div
+        drag
+        dragConstraints={refButton}
+        dragMomentum={false}
+        style={{ height: 'fit-content', width: 'fit-content' }}
+      >
+        {children}
+      </motion.div>
+    );
+  }
+
+  return (
+    <motion.div
+      drag
+      dragConstraints={refButton}
+      dragMomentum={false}
+      style={{ height: 'fit-content', width: 'fit-content' }}
+      onDragStart={() => setIsDragging(true)}
+      onDragEnd={() => setTimeout(() => setIsDragging(false), 100)}
+    >
+      <motion.div>
+        <C.CircleButton
+          as={motion.div}
+          animate={{ rotate: isActive ? 90 : 0 }}
+          transition={{ duration: 0.3 }}
+          style={{ padding: sg.spacings.spacingInset.spacingInsetXs }}
+          isActive={isActive}
+          onClick={() => {
+            if (!isDragging) {
+              toggleButton();
+            }
+          }}
+        >
+          <Icon
+            iconName={isActive ? 'CloseLg' : 'MenuLg'}
+            color={sg.colors.neutralColors.colorNeutralDarkest}
+          />
+        </C.CircleButton>
+        {isActive && (
+          <FloatingMenu
+            refButton={refButton}
+            floatingMenuPosition={floatingMenuPosition}
+            listItems={listItems}
+          />
+        )}
+      </motion.div>
+    </motion.div>
+  );
+}

package/src/presentation/components/atoms/FloatingButton/styles.ts

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import { sg } from '../../../styles';
+import { pxToRem } from '../../../../main/helpers/functions/measurementConverters';
+
+interface CircleButtonProps {
+  isActive: boolean;
+}
+export const CircleButton = styled.div`
+  width: ${pxToRem('56px')};
+  height: ${pxToRem('56px')};
+  box-shadow: ${sg.shadows.shadowLevelElevation};
+  background-color: ${sg.colors.auxiliariesColors.colorAuxTwoLight};
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  box-sizing: border-box;
+  &:hover {
+    background-color: ${({ isActive }: CircleButtonProps) =>
+      isActive ? sg.colors.auxiliariesColors.colorAuxTwoLight : '#E6B843'};   
+`;

package/src/presentation/components/atoms/Tooltip/index.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from 'react';
-import ReactDOM from 'react-dom'; // Importação adicionada
+import ReactDOM from 'react-dom';
 import * as C from './styles';
 import { Icons } from '../../../../main/helpers/functions/icons';
 
@@ -38,6 +38,8 @@ export interface TooltipProps {
   tooltipMargin?: string;
   wrapperStyles?: React.CSSProperties;
   zIndex?: number;
+  hideOnScroll?: boolean;
+  interactive?: boolean;
 }
 
 const Tooltip = ({
@@ -61,6 +63,8 @@ const Tooltip = ({
   tooltipMargin = '8px',
   wrapperStyles,
   zIndex = 99999999,
+  hideOnScroll = true,
+  interactive = true,
 }: TooltipProps) => {
   const targetRef = useRef<HTMLDivElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
@@ -175,10 +179,12 @@ const Tooltip = ({
   };
 
   const handleMouseEnterTooltip = () => {
-    isHovering.current = true;
-    if (tooltipRef.current) {
-      tooltipRef.current.style.opacity = '1';
-      tooltipRef.current.style.visibility = 'visible';
+    if (interactive) {
+      isHovering.current = true;
+      if (tooltipRef.current) {
+        tooltipRef.current.style.opacity = '1';
+        tooltipRef.current.style.visibility = 'visible';
+      }
     }
   };
 
@@ -189,6 +195,14 @@ const Tooltip = ({
       tooltipRef.current.style.visibility = 'hidden';
     }
   };
+
+  const handleScrollEvent = () => {
+    if (hideOnScroll && tooltipRef.current && !isAlwaysVisible) {
+      tooltipRef.current.style.opacity = '0';
+      tooltipRef.current.style.visibility = 'hidden';
+    }
+  };
+
   useEffect(() => {
     const handleMouseEnter = () => {
       if (tooltipRef.current) {
@@ -199,28 +213,39 @@ const Tooltip = ({
     };
 
     const handleMouseLeave = () => {
-      if (tooltipRef.current && !isAlwaysVisible) {
+      // Só esconde o tooltip se não estiver sendo hover no próprio tooltip
+      // ou se o tooltip não for interativo
+      if (
+        tooltipRef.current &&
+        !isAlwaysVisible &&
+        (!isHovering.current || !interactive)
+      ) {
         tooltipRef.current.style.opacity = '0';
         tooltipRef.current.style.visibility = 'hidden';
       }
     };
 
-    if (isActive) {
-      updateTooltipPosition();
-      window.addEventListener('resize', updateTooltipPosition);
+    if (!isActive) {
+      return;
+    }
 
-      if (targetRef.current) {
-        targetRef.current.addEventListener('mouseenter', handleMouseEnter);
-        targetRef.current.addEventListener('mouseleave', handleMouseLeave);
-      }
+    // Atualiza a posição inicial e adiciona listener para redimensionamento
+    updateTooltipPosition();
+    window.addEventListener('resize', updateTooltipPosition);
+
+    // Adiciona listener de scroll se necessário
+    if (hideOnScroll) {
+      window.addEventListener('scroll', handleScrollEvent, true);
     }
 
+    // Adiciona listeners para o elemento alvo
     if (targetRef.current) {
       targetRef.current.addEventListener('mouseenter', handleMouseEnter);
       targetRef.current.addEventListener('mouseleave', handleMouseLeave);
     }
 
-    if (tooltipRef.current) {
+    // Adiciona listeners para o próprio tooltip apenas se for interativo
+    if (tooltipRef.current && interactive) {
       tooltipRef.current.addEventListener(
         'mouseenter',
         handleMouseEnterTooltip
@@ -232,10 +257,18 @@ const Tooltip = ({
     }
 
     return () => {
+      // Remove todos os listeners da janela
       window.removeEventListener('resize', updateTooltipPosition);
+      window.removeEventListener('scroll', handleScrollEvent, true);
+
+      // Remove listeners do elemento alvo, se existir
       if (targetRef.current) {
         targetRef.current.removeEventListener('mouseenter', handleMouseEnter);
         targetRef.current.removeEventListener('mouseleave', handleMouseLeave);
+      }
+
+      // Remove listeners do tooltip, se existir
+      if (tooltipRef.current && interactive) {
         tooltipRef.current.removeEventListener(
           'mouseenter',
           handleMouseEnterTooltip
@@ -246,7 +279,14 @@ const Tooltip = ({
         );
       }
     };
-  }, [isActive, position, tooltipMargin]);
+  }, [
+    isActive,
+    position,
+    tooltipMargin,
+    hideOnScroll,
+    isAlwaysVisible,
+    interactive,
+  ]);
 
   if (!isActive || !label) {
     return <>{children}</>;
@@ -275,39 +315,6 @@ const Tooltip = ({
     </C.TooltipContent>
   );
 
-  // const tooltipChartDataContent = tooltipChartData?.map((data, index) => {
-  //   return (
-  //     <div key="divkey" style={index === 0 ? { marginTop: '12px' } : {}}>
-  //       <C.tooltipChartItem key={'Tooltip item ' + index}>
-  //         <C.tooltipChartItemLabel>{`${data.label}:`}</C.tooltipChartItemLabel>
-  //         <div style={{ width: '4px' }} />
-  //         <C.tooltipChartItemValue>{data.value}</C.tooltipChartItemValue>
-  //       </C.tooltipChartItem>
-  //     </div>
-  //   );
-  // });
-  // const tooltipChartContent = (
-  //   <C.TooltipChart
-  //     ref={tooltipRef}
-  //     className={`tooltip tooltip-${position}`}
-  //     height={height}
-  //     width={width}
-  //     color={color}
-  //     position={position}
-  //     isVisible={isAlwaysVisible}
-  //     hasArrow={hasArrowOnTooltipChart}
-  //   >
-  //     {label && (
-  //       <C.tooltipChartHeader color={color}>
-  //         <C.tooltipChartHeaderTitle>{label}</C.tooltipChartHeaderTitle>
-  //       </C.tooltipChartHeader>
-  //     )}
-  //     <div style={{ padding: '12px 0' }}>
-  //       <C.tooltipChartBody>{tooltipChartDataContent}</C.tooltipChartBody>
-  //     </div>
-  //   </C.TooltipChart>
-  // );
-
   return (
     <C.TooltipWrapper
       id={id}
@@ -315,8 +322,8 @@ const Tooltip = ({
       wrapperWidth={wrapperWidth}
       wrapperHeight={wrapperHeight}
       wrapperStyles={wrapperStyles}
-      onMouseEnter={handleMouseEnterTooltip}
-      onMouseLeave={handleMouseLeaveTooltip}
+      onMouseEnter={interactive ? handleMouseEnterTooltip : undefined}
+      onMouseLeave={interactive ? handleMouseLeaveTooltip : undefined}
     >
       {children}
       {ReactDOM.createPortal(tooltipContent, document.body)}