@woovi/ui 4.0.942

package/src/snackbar/Snackbar.tsx

@@ -0,0 +1,117 @@
+import CloseIcon from '@mui/icons-material/Close';
+import IconButton from '@mui/material/IconButton';
+import _Snackbar from '@mui/material/Snackbar';
+import _SnackbarContent from '@mui/material/SnackbarContent';
+import type { ReactNode } from 'react';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import SnackbarContext from './SnackbarContext';
+
+const SnackbarContent = styled(_SnackbarContent)`
+  background-color: #fff;
+  color: #000;
+  margin-bottom: 45px;
+`;
+
+const Action = ({
+  handleClose,
+}: {
+  handleClose: (evt: React.MouseEvent<HTMLElement>) => void;
+}) => {
+  return (
+    <IconButton
+      key='close'
+      aria-label='Close'
+      color='primary'
+      onClick={handleClose}
+      size='large'
+    >
+      <CloseIcon />
+    </IconButton>
+  );
+};
+
+const Content = React.forwardRef(
+  (
+    {
+      handleClose,
+      message,
+      action,
+    }: {
+      handleClose: (evt: React.MouseEvent<HTMLElement>) => void;
+      message: string;
+      action?: React.ReactElement<any>;
+    },
+    ref,
+  ) => {
+    return (
+      <SnackbarContent
+        message={message}
+        ref={ref}
+        action={action || <Action handleClose={handleClose} />}
+      />
+    );
+  },
+);
+
+type SnackbarProps = {
+  children: ReactNode;
+};
+const Snackbar = ({ children }: SnackbarProps) => {
+  const handleSnackbarConfirm = (event, reason) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setMessage('');
+  };
+
+  const [message, setMessage] = useState('');
+  const [action, setAction] = useState(
+    <Action handleClose={handleSnackbarConfirm} />,
+  );
+
+  const [duration, setDuration] = useState(8000);
+  const [onClick, setOnClick] = useState<(() => void) | null>(null);
+
+  const handleSnackbar = ({
+    message,
+    action = <Action handleClose={handleSnackbarConfirm} />,
+    duration = 4000,
+    onActionClick = null,
+  }: {
+    message: string;
+    action?: React.ReactNode;
+    duration: number;
+    onActionClick?: (() => void) | null;
+  }) => {
+    setMessage(message);
+    setAction(action);
+    setDuration(duration);
+    setOnClick(onActionClick);
+  };
+
+  return (
+    <SnackbarContext.Provider
+      value={{
+        showSnackbar: handleSnackbar,
+      }}
+    >
+      <_Snackbar
+        open={!!message}
+        autoHideDuration={duration}
+        onClose={handleSnackbarConfirm}
+      >
+        <Content
+          handleClose={onClick || handleSnackbarConfirm}
+          message={message}
+          action={action}
+        />
+      </_Snackbar>
+      {children}
+    </SnackbarContext.Provider>
+  );
+};
+
+export default Snackbar;

package/src/snackbar/SnackbarContext.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import { createContext } from 'react';
+
+export type ShowSnackbarArgs = {
+  onActionClick?: Function | null;
+  message: string;
+  action?: ReactNode[];
+  duration?: number;
+};
+
+export type showSnackbarFn = (args: ShowSnackbarArgs) => void;
+
+export type SnackbarContextProps = {
+  showSnackbar: showSnackbarFn;
+};
+
+const SnackbarContext = createContext({
+  // eslint-disable-next-line
+  showSnackbar: (args: ShowSnackbarArgs) => {},
+});
+
+export default SnackbarContext;

package/src/snackbar/__tests__/Snackbar.spec.tsx

@@ -0,0 +1,19 @@
+import { fireEvent, render, waitFor, screen } from '@testing-library/react';
+
+import ShowSnackbar from '../fixtures/ShowSnackbar';
+
+it('should show a snackbar', async () => {
+  render(<ShowSnackbar />);
+
+  const inputMessage = screen.getByLabelText('Input Message');
+
+  fireEvent.change(inputMessage, { target: { value: 'snackbar message!' } });
+  fireEvent.blur(inputMessage);
+
+  await waitFor(() => {
+    expect(screen.getByText('Show Snackbar')).toBeTruthy();
+  });
+  fireEvent.click(screen.getByText('Show Snackbar'));
+
+  expect(screen.getByText('snackbar message!')).toBeTruthy();
+});

package/src/snackbar/fixtures/ShowSnackbar.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+import Snackbar from '../Snackbar';
+import useSnackbar from '../useSnackbar';
+
+// TODO - remove this after missing from showSnackbar
+const ShowSnackbar = () => {
+  const [message, setMessage] = useState('');
+  const { showSnackbar } = useSnackbar();
+
+  return (
+    <>
+      <label htmlFor='inputMessage'>Input Message</label>
+      <input
+        type='text'
+        onChange={({ target }) => setMessage(target.value)}
+        id='inputMessage'
+      />
+      <button
+        onClick={() => {
+          showSnackbar({ message });
+        }}
+      >
+        Show Snackbar
+      </button>
+    </>
+  );
+};
+
+const ShowSnackbarWrapper = () => {
+  return (
+    <Snackbar>
+      <ShowSnackbar />
+    </Snackbar>
+  );
+};
+
+export default ShowSnackbarWrapper;

package/src/snackbar/index.tsx

@@ -0,0 +1,6 @@
+import SnackbarProvider from './Snackbar';
+import type { showSnackbarFn, SnackbarContextProps } from './SnackbarContext';
+import useSnackbar from './useSnackbar';
+
+export { SnackbarProvider, useSnackbar };
+export type { SnackbarContextProps, showSnackbarFn };

package/src/snackbar/useSnackbar.tsx

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+
+import type { SnackbarContextProps as ContextProps } from './SnackbarContext';
+import SnackbarContext from './SnackbarContext';
+
+export type SnackbarContextProps = ContextProps;
+
+const useSnackbar = () => {
+  const snackBarContext = useContext(SnackbarContext);
+
+  return {
+    showSnackbar: snackBarContext.showSnackbar,
+  };
+};
+
+export default useSnackbar;

package/src/statement/TransactionTypeText.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const TransactionTypeText = styled.span`
+  color: ${(props) => props.color};
+`;
+
+export default TransactionTypeText;

package/src/statement/statementColors.ts

@@ -0,0 +1,6 @@
+import { STATEMENT_TYPES } from '@woovi/shared';
+
+export const statementColors = {
+  [STATEMENT_TYPES.IN]: '#4CAF50',
+  [STATEMENT_TYPES.OUT]: '#EF5350',
+};

package/src/stepper/Stepper.stories.tsx

@@ -0,0 +1,25 @@
+import type { Story } from '@storybook/addon-docs/blocks';
+import type { Meta } from '@storybook/react/types-6-0';
+
+import type { StepperProps } from './Stepper';
+import Stepper from './Stepper';
+
+export default {
+  title: 'UI/Stepper',
+  component: Stepper,
+} as Meta;
+
+const Template: Story<StepperProps> = ({ ...args }) => {
+  return <Stepper {...args} />;
+};
+
+const steps = [
+  { number: 1, value: 2999, date: '01 de Outubro de 2021' },
+  { number: 2, value: 2999, date: '01 de Novembro de 2021' },
+  { number: 3, value: 2999, date: '01 de Dezembro de 2021' },
+];
+
+export const StepperWithSteps = Template.bind({});
+StepperWithSteps.args = {
+  steps,
+};

package/src/stepper/Stepper.tsx

@@ -0,0 +1,74 @@
+import { Stepper as  _Stepper, Step, StepLabel, StepConnector } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useState } from 'react';
+
+const ColorlibConnector = styled(StepConnector)(() => ({
+  marginLeft: 19,
+  padding: 0,
+}));
+
+const ColorlibStepIconRoot = styled('div')(({ ownerState }) => ({
+  backgroundColor: '#d4f8ee',
+  fontSize: '18px',
+  zIndex: 1,
+  color: '#03D69D',
+  width: 40,
+  height: 40,
+  display: 'flex',
+  borderRadius: '50%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  ...(ownerState.active && {
+    backgroundColor: '#03d69d',
+    color: '#fff',
+  }),
+  ...(ownerState.completed && {
+    backgroundColor: '#03d69d',
+    color: '#fff',
+  }),
+}));
+
+const ColorlibStepIcon = (props) => {
+  const { active, completed, className, icon } = props;
+
+  return (
+    <ColorlibStepIconRoot
+      ownerState={{ completed, active }}
+      className={className}
+    >
+      {icon}º
+    </ColorlibStepIconRoot>
+  );
+};
+
+type StepProps = {
+  label: string;
+};
+
+export type StepperProps = {
+  steps: StepProps[];
+  orientation?: string;
+};
+
+const Stepper = ({ steps, orientation = 'vertical' }: StepperProps) => {
+  // eslint-disable-next-line
+  const [activeStep, setActiveStep] = useState(0);
+
+  return (
+    <_Stepper
+      activeStep={activeStep}
+      orientation={orientation}
+      connector={<ColorlibConnector />}
+    >
+      {steps.map((step, index) => (
+        <Step key={index}>
+          <StepLabel StepIconComponent={ColorlibStepIcon}>
+            {step.label}
+          </StepLabel>
+        </Step>
+      ))}
+    </_Stepper>
+  );
+};
+
+export default Stepper;

package/src/swipeableModal/SwipeableModal.stories.tsx

@@ -0,0 +1,47 @@
+import TextField from '@mui/material/TextField';
+import type { Meta } from '@storybook/react/types-6-0';
+import { useState } from 'react';
+
+import ActionButton from '../buttons/ActionButton';
+import BoxFlex from '../mui/BoxFlex';
+import { SwipeableModal } from './SwipeableModal';
+
+export default {
+  title: 'SwipeableModal',
+  component: SwipeableModal,
+} as Meta;
+
+export const Default = () => {
+  const [open, setOpen] = useState(false);
+
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <>
+      <ActionButton onClick={handleOpen}>Open Modal</ActionButton>
+      <SwipeableModal
+        open={open}
+        onClose={handleClose}
+        title={'Storybook'}
+        actions={
+          <>
+            <ActionButton color='secondary' onClick={handleClose}>
+              Cancel
+            </ActionButton>
+            <ActionButton onClick={handleClose}>Save</ActionButton>
+          </>
+        }
+      >
+        <BoxFlex sx={{ flexDirection: 'column', gap: 1 }}>
+          <TextField name='textfield1' label='TextField1' />
+          <TextField name='textfield2' label='TextField2' />
+          <TextField name='textfield3' label='TextField3' />
+          <TextField name='textfield4' label='TextField4' />
+          <TextField name='textfield5' label='TextField5' />
+          <TextField name='textfield6' label='TextField6' />
+        </BoxFlex>
+      </SwipeableModal>
+    </>
+  );
+};

package/src/swipeableModal/SwipeableModal.tsx

@@ -0,0 +1,68 @@
+import Box from '@mui/material/Box';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Modal from '@mui/material/Modal';
+
+import { SwipeableModalTransition } from './SwipeableModalTransition';
+import BoxFlex from '../mui/BoxFlex';
+
+type SwipeableModalProps = {
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  children?: React.ReactNode;
+  actions?: React.ReactNode;
+  maxHeight?: string;
+  width?: string;
+};
+
+export const SwipeableModal = ({
+  open,
+  title,
+  onClose,
+  children,
+  actions,
+  width,
+  maxHeight = '400px',
+}: SwipeableModalProps) => {
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      closeAfterTransition
+      sx={{
+        '@media (max-width: 600px)': { zIndex: 1000000 },
+      }}
+    >
+      <SwipeableModalTransition in={open}>
+        <Box
+          sx={{
+            position: 'absolute',
+            left: 0,
+            bottom: 0,
+            right: 0,
+            bgcolor: 'white',
+            boxShadow:
+              'rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px',
+            borderRadius: '4px',
+            height: 'fit-content',
+            '@media (min-width: 600px)': {
+              width,
+              maxWidth: 700,
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+            },
+          }}
+        >
+          <DialogTitle id='dialog-title'>{title}</DialogTitle>
+          <BoxFlex sx={{ maxHeight, overflowY: 'auto' }}>
+            <DialogContent dividers>{children}</DialogContent>
+          </BoxFlex>
+          {actions && <DialogActions>{actions}</DialogActions>}
+        </Box>
+      </SwipeableModalTransition>
+    </Modal>
+  );
+};

package/src/swipeableModal/SwipeableModalTransition.tsx

@@ -0,0 +1,33 @@
+import Fade from '@mui/material/Fade';
+import Slide from '@mui/material/Slide';
+import { forwardRef } from 'react';
+
+import { useWindowHelpers } from '@woovi/hooks';
+
+import BoxFlex from '../mui/BoxFlex';
+
+type SwipeableModalTransitionProps = {
+  in: boolean;
+  children: JSX.Element;
+};
+
+export const SwipeableModalTransition = forwardRef<
+  HTMLDivElement,
+  SwipeableModalTransitionProps
+>(({ children, ...props }, ref) => {
+  const { isMobile } = useWindowHelpers();
+
+  return isMobile ? (
+    <BoxFlex tabIndex={-1} ref={ref}>
+      <Slide direction='up' mountOnEnter unmountOnExit {...props}>
+        {children}
+      </Slide>
+    </BoxFlex>
+  ) : (
+    <BoxFlex tabIndex={-1} ref={ref}>
+      <Fade mountOnEnter unmountOnExit {...props}>
+        {children}
+      </Fade>
+    </BoxFlex>
+  );
+});

package/src/table/CardColumn.tsx

@@ -0,0 +1,34 @@
+import { getColumnValue } from './CardListVirtualized';
+import CardField from '../cardGrid/CardField';
+import CardGrid from '../cardGrid/CardGrid';
+
+type CardColumnProps = {
+  columns: any[];
+  row: any;
+  onCardClick?: (card: any, event: React.MouseEvent<HTMLDivElement>) => void;
+  handleCardClick?: (
+    card: any,
+    event: React.MouseEvent<HTMLDivElement>,
+  ) => void;
+};
+export const CardColumn = (props: CardColumnProps) => {
+  const { columns, row, onCardClick, handleCardClick } = props;
+
+  return (
+    <CardGrid
+      cardProps={{
+        sx: { cursor: onCardClick ? 'pointer' : 'default' },
+        onClick: (e) => handleCardClick(row, e),
+      }}
+    >
+      {columns.map((column, index) => (
+        <CardField
+          key={index}
+          label={column.headerName}
+          value={getColumnValue(row, column) ?? '-'}
+          alignField={column.alignField}
+        />
+      ))}
+    </CardGrid>
+  );
+};