wca-designsystem 0.0.56 → 0.0.58

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.56",
+  "version": "0.0.58",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/atomos/BarraDeProgresso/BarraDeProgresso.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import BarraDeProgresso from '.';
+
+const meta: Meta<typeof BarraDeProgresso> = {
+  component: BarraDeProgresso,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BarraDeProgresso>;
+
+export const Primary: Story = {
+  args: {
+    animated: true,
+    duracao: 200,
+    value: 50,
+  },
+};

package/src/components/atomos/BarraDeProgresso/BarraDeProgresso.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import BarraDeProgresso from './index';
+import { render } from '../../../test/render';
+
+describe('Barra de Progresso', () => {
+  it('Renderiza corretamente', () => {
+    const { getByText } = render(<BarraDeProgresso value={10} duracao={200} />);
+
+    const BarraDeProgressoDefault = getByText('Sincronização em 70%');
+    expect(BarraDeProgressoDefault).toBeDefined();
+  });
+});

package/src/components/atomos/BarraDeProgresso/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import * as S from './styles';
+import { Progress, ProgressSectionProps } from '@mantine/core';
+
+export interface BarraDeProgressoProps extends ProgressSectionProps {
+  duracao: number;
+  animated?: boolean;
+}
+
+const BarraDeProgresso = ({
+  duracao,
+  animated = false,
+  ...props
+}: BarraDeProgressoProps) => {
+  return (
+    <S.BarraDeProgressoContainer transitionDuration={duracao} size="xl">
+      <Progress.Section
+        // {...props}
+        {...props}
+        data-testid="progress-section"
+        animated={animated}
+      >
+        <Progress.Label>Sincronização em {props.value}% </Progress.Label>
+      </Progress.Section>
+    </S.BarraDeProgressoContainer>
+  );
+};
+
+export default BarraDeProgresso;

package/src/components/atomos/BarraDeProgresso/styles.ts

@@ -0,0 +1,27 @@
+import { Progress } from '@mantine/core';
+import styled, { css } from 'styled-components';
+
+export const BarraDeProgressoContainer = styled(Progress.Root)`
+  ${({ theme }) => css`
+    border-radius: 4px;
+    height: 60px;
+    width: 100%;
+    padding: 0;
+    background-color: ${theme.colors.gray['500']};
+
+    .mantine-Progress-label {
+      font-size: ${theme.sizes.meddium};
+      font-weight: 600;
+      color: ${theme.colors.white};
+      text-align: center;
+      font-family: 'Open Sans', sans-serif;
+    }
+
+    .mantine-Progress-section {
+      background: ${theme.colors.blueNew};
+      box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.15);
+      border-radius: 4px;
+      height: 100%;
+    }
+  `}
+`;

package/src/components/organismos/Tabela/index.tsx

@@ -110,26 +110,28 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
 
   const topScrollRef = useRef<HTMLDivElement>(null);
   const bottomScrollRef = useRef<HTMLDivElement>(null);
+  const tabelaRef = useRef<HTMLTableElement>(null);
 
   // Sincroniza o scroll horizontal entre os dois scrollbars
   useEffect(() => {
     const topScroll = topScrollRef.current;
     const bottomScroll = bottomScrollRef.current;
+    const tabela = bottomScrollRef.current;
 
     if (topScroll && bottomScroll) {
-      const syncScroll = (source: HTMLDivElement, target: HTMLDivElement) => {
-        target.scrollLeft = source.scrollLeft;
+      const onTopScroll = () => {
+        bottomScroll.scrollLeft = topScroll.scrollLeft;
       };
 
-      setTamScroll(bottomScroll.scrollWidth);
-      const onTopScroll = () =>
-        topScroll && bottomScroll && syncScroll(topScroll, bottomScroll);
-      const onBottomScroll = () =>
-        topScroll && bottomScroll && syncScroll(bottomScroll, topScroll);
-
+      const onBottomScroll = () => {
+        topScroll.scrollLeft = bottomScroll.scrollLeft;
+      };
       topScroll.addEventListener('scroll', onTopScroll);
       bottomScroll.addEventListener('scroll', onBottomScroll);
 
+      // Atualiza o tamanho do scroll
+      if (tabela) setTamScroll(tabela.scrollWidth);
+
       return () => {
         topScroll.removeEventListener('scroll', onTopScroll);
         bottomScroll.removeEventListener('scroll', onBottomScroll);
@@ -161,7 +163,7 @@ const Tabela = <T extends { id: string | number; children: Array<T> }>({
         <S.FakeTable columnswidth={tamScroll} />
       </S.ScrollWrapper>
       <S.TableContainer ref={bottomScrollRef}>
-        <S.StyledTable>
+        <S.StyledTable ref={tabelaRef}>
           {data?.length == 0 ? (
             <></>
           ) : (