@woovi/ui 4.0.942

package/src/timeline/__stories__/TimelineAppEvent.stories.tsx

@@ -0,0 +1,43 @@
+import { Message, ReceiptLong } from '@mui/icons-material';
+import type { Meta } from '@storybook/react/types-6-0';
+import React from 'react';
+
+import { Timeline } from '../Timeline';
+import { TimelineAppEventItem } from '../TimelineAppEventItem';
+
+export default {
+  title: 'UI/Timeline/AppEvent',
+  component: Timeline,
+} as Meta;
+
+export const SolidWithAppEvent = () => {
+  return (
+    <Timeline>
+      <TimelineAppEventItem
+        title='Charge Completed'
+        time={new Date('2022-11-25')}
+        icon={<ReceiptLong fontSize='small' />}
+        isFirstItem
+      />
+      <TimelineAppEventItem
+        title='Charge Viewed'
+        time={new Date('2022-11-24')}
+        icon={<ReceiptLong fontSize='small' />}
+        color='info'
+      />
+      <TimelineAppEventItem
+        title='SMS Sent'
+        color='success'
+        time={new Date('2022-11-23')}
+        icon={<Message fontSize='small' />}
+        onClick={() => ''}
+      />
+      <TimelineAppEventItem
+        title='Charge Created'
+        time={new Date('2022-11-23')}
+        icon={<ReceiptLong fontSize='small' />}
+        isLastItem
+      />
+    </Timeline>
+  );
+};

package/src/unSupportedBrowser/UnsupportedBrowserWarning.tsx

@@ -0,0 +1,78 @@
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+
+import Card from '../card/Card';
+
+const BlankPageWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const CenteredCard = styled(Card)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: auto;
+  padding: 20px 60px;
+`;
+
+const CardHeader = styled.h1`
+  font-weight: normal;
+  text-align: center;
+`;
+
+const BrowserIcons = styled.ul`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 500px;
+  margin: 20px 0;
+  padding: 0;
+`;
+
+const BrowserIconsListItem = styled.li`
+  display: inline-flex;
+  list-style-type: none;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Anchor = styled.a`
+  text-decoration: none;
+  color: inherit;
+`;
+
+const UnsupportedBrowserWarning = () => {
+  const { t } = useTranslation();
+
+  return (
+    <BlankPageWrapper>
+      <CenteredCard>
+        <CardHeader>{t('Browser not supported.')}</CardHeader>
+        <BrowserIcons>
+          <BrowserIconsListItem>
+            <Anchor href='https://www.mozilla.org/en-US/firefox/new/'>
+              Firefox
+            </Anchor>
+          </BrowserIconsListItem>
+          <BrowserIconsListItem>
+            <Anchor href='https://www.google.com/chrome/'>Chrome</Anchor>
+          </BrowserIconsListItem>
+          <BrowserIconsListItem>
+            <Anchor href='https://www.microsoft.com/en-us/windows/microsoft-edge'>
+              Edge
+            </Anchor>
+          </BrowserIconsListItem>
+        </BrowserIcons>
+      </CenteredCard>
+    </BlankPageWrapper>
+  );
+};
+
+export default UnsupportedBrowserWarning;

package/src/unSupportedBrowser/index.tsx

@@ -0,0 +1,2 @@
+export { isUnSupportedBrowser } from './isUnSupportedBrowser';
+export { default as UnsupportedBrowserWarning } from './UnsupportedBrowserWarning';

package/src/unSupportedBrowser/isUnSupportedBrowser.tsx

@@ -0,0 +1,15 @@
+// https://stackoverflow.com/a/9851769
+export const browserDetectors = {
+  isIE: () => false || !!document.documentMode,
+};
+
+export const isUnSupportedBrowser = (): boolean => {
+  // enable any browser in staging
+  if (process.env.APP_ENV === 'staging') {
+    return false;
+  }
+
+  const unsupportedBrowsers = [browserDetectors.isIE];
+
+  return !!unsupportedBrowsers.find((checker) => checker());
+};

package/src/user/chip/UserChip.tsx

@@ -0,0 +1,25 @@
+import Chip from '@mui/material/Chip';
+import { formatToCPF } from 'brazilian-values';
+
+import { isSafeCPF } from '@woovi/utils';
+
+import Avatar from '../../avatar/Avatar';
+
+export type UserChipProps = {
+  label: string;
+  name: string;
+};
+
+const UserChip = ({ label, name }: UserChipProps) => {
+  return (
+    <Chip
+      size='medium'
+      variant='outlined'
+      avatar={<Avatar name={name} size={20} />}
+      label={isSafeCPF(label) ? formatToCPF(label) : label}
+      sx={{ fontSize: '14px', backgroundColor: 'transparent' }}
+    />
+  );
+};
+
+export default UserChip;

package/src/user/chip/stories/UserChip.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, Story } from '@storybook/react/types-6-0';
+
+import type { UserChipProps } from '../UserChip';
+import UserChip from '../UserChip';
+
+export default {
+  title: 'Ui/UserChip',
+  component: UserChip,
+  name: {
+    control: 'text',
+  },
+  label: {
+    control: 'text',
+  },
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta;
+
+const Template: Story<UserChipProps> = (args) => <UserChip {...args} />;
+
+export const Example = Template.bind({});
+Example.args = { label: 'user@woovi.com', name: 'User Name' };
+
+export const WithCPF = Template.bind({});
+WithCPF.args = { label: '26602647407', name: 'User Name' };

package/src/utils/BrowserOnly.tsx

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+
+type BrowserOnlyProps = {
+  loading?: React.ReactNode;
+  children?: React.ReactNode;
+};
+
+export const BrowserOnly = ({ children, loading = null }: BrowserOnlyProps) => {
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === typeof undefined) {
+      return;
+    }
+
+    setShow(true);
+  }, []);
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{show ? children : loading}</>;
+};

package/src/utils/DesktopOnly.tsx

@@ -0,0 +1,27 @@
+import type { SxProps } from '@mui/material';
+import { forwardRef } from 'react';
+
+import BoxFlex from '../mui/BoxFlex';
+
+type DesktopOnlyProps = {
+  children?: React.ReactNode;
+  sx?: SxProps;
+};
+
+export const DesktopOnly = forwardRef<HTMLDivElement, DesktopOnlyProps>(
+  ({ children, sx }, ref) => {
+    return (
+      <BoxFlex
+        ref={ref}
+        sx={{
+          '@media (max-width: 600px)': {
+            display: 'none',
+          },
+          ...sx,
+        }}
+      >
+        {children}
+      </BoxFlex>
+    );
+  },
+);

package/src/utils/MobileOnly.tsx

@@ -0,0 +1,27 @@
+import type { SxProps } from '@mui/material';
+import { forwardRef } from 'react';
+
+import BoxFlex from '../mui/BoxFlex';
+
+type MobileOnlyProps = {
+  children?: React.ReactNode;
+  sx?: SxProps;
+};
+
+export const MobileOnly = forwardRef<HTMLDivElement, MobileOnlyProps>(
+  ({ children, sx }, ref) => {
+    return (
+      <BoxFlex
+        ref={ref}
+        sx={{
+          '@media (min-width: 600px)': {
+            display: 'none',
+          },
+          ...sx,
+        }}
+      >
+        {children}
+      </BoxFlex>
+    );
+  },
+);

package/src/windowPopper/WindowPopper.stories.tsx

@@ -0,0 +1,52 @@
+import TextField from '@mui/material/TextField';
+import type { Meta } from '@storybook/react/types-6-0';
+import { useState } from 'react';
+
+import { WindowPopper } from './WindowPopper';
+import ActionButton from '../buttons/ActionButton';
+import BoxFlex from '../mui/BoxFlex';
+
+export default {
+  title: 'WindowPopper',
+  component: WindowPopper,
+} as Meta;
+
+export const Default = () => {
+  const [open, setOpen] = useState(false);
+
+  const handleOpen = () => setOpen(!open);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <BoxFlex>
+      <ActionButton onClick={handleOpen}>Open WindowPopper</ActionButton>
+      <WindowPopper
+        y={40}
+        minWidth={200}
+        height={400}
+        open={open}
+        onClose={handleClose}
+        title='Window Popper'
+        cancelDragOnContent
+      >
+        <BoxFlex
+          sx={{
+            boxSizing: 'border-box',
+            flexDirection: 'column',
+            height: '100%',
+            width: '100%',
+            p: 2,
+            gap: 1,
+            overflow: 'auto',
+          }}
+        >
+          <TextField name='textfield1' label='TextField1' fullWidth />
+          <TextField name='textfield2' label='TextField2' fullWidth />
+          <TextField name='textfield3' label='TextField3' fullWidth />
+          <TextField name='textfield4' label='TextField4' fullWidth />
+          <ActionButton fullWidth>Submit</ActionButton>
+        </BoxFlex>
+      </WindowPopper>
+    </BoxFlex>
+  );
+};

package/src/windowPopper/WindowPopper.tsx

@@ -0,0 +1,109 @@
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import { GridCloseIcon } from '@mui/x-data-grid-pro';
+import { Rnd } from 'react-rnd';
+
+import { WindowPopperTransition } from './WindowPopperTransition';
+import BoxFlex from '../mui/BoxFlex';
+
+type WindowPopperProps = {
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  children?: React.ReactNode;
+  width?: number;
+  height?: number;
+  minWidth?: number;
+  minHeight?: number;
+  x?: number;
+  y?: number;
+  cancelDragOnContent?: boolean;
+};
+
+export const WindowPopper = ({
+  open,
+  onClose,
+  title,
+  children,
+  cancelDragOnContent = false,
+  x = 0,
+  y = 0,
+  width = 500,
+  height = 500,
+  minWidth = 200,
+  minHeight = 200,
+}: WindowPopperProps) => {
+  const theme = useTheme();
+
+  if (!open) {
+    return null;
+  }
+
+  const getCancelDrag = () => {
+    if (!cancelDragOnContent) {
+      return {};
+    }
+
+    return { cancel: '.no-drag' };
+  };
+
+  return (
+    <Rnd
+      default={{
+        x,
+        y,
+        width,
+        height,
+      }}
+      style={{ zIndex: theme.zIndex.appBar + 1 }}
+      minWidth={minWidth}
+      minHeight={minHeight}
+      bounds='window'
+      {...getCancelDrag()}
+    >
+      <WindowPopperTransition in={open}>
+        <Box
+          sx={{
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            backgroundColor: theme.palette.background.paper,
+            boxShadow: theme.shadows[3],
+            borderRadius: '4px',
+            flexDirection: 'column',
+          }}
+        >
+          <BoxFlex
+            sx={{
+              py: 1,
+              pl: 2,
+              pr: 1,
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}
+          >
+            <Typography variant='subtitle1' fontWeight={600} color='black'>
+              {title}
+            </Typography>
+            <IconButton onClick={onClose}>
+              <GridCloseIcon />
+            </IconButton>
+          </BoxFlex>
+          <Divider />
+          <Box
+            className='no-drag'
+            sx={{
+              width: '100%',
+              overflow: 'hidden',
+            }}
+          >
+            {children}
+          </Box>
+        </Box>
+      </WindowPopperTransition>
+    </Rnd>
+  );
+};

package/src/windowPopper/WindowPopperTransition.tsx

@@ -0,0 +1,22 @@
+import { Fade } from '@mui/material';
+import { forwardRef } from 'react';
+
+import BoxFlex from '../mui/BoxFlex';
+
+type WindowPopperTransitionProps = {
+  in: boolean;
+  children: JSX.Element;
+};
+
+export const WindowPopperTransition = forwardRef<
+  HTMLDivElement,
+  WindowPopperTransitionProps
+>(({ children, ...props }, ref) => {
+  return (
+    <BoxFlex tabIndex={-1} ref={ref} sx={{ height: '100%', width: '100%' }}>
+      <Fade mountOnEnter unmountOnExit {...props}>
+        {children}
+      </Fade>
+    </BoxFlex>
+  );
+});

package/test/ImageReporter.js

@@ -0,0 +1,41 @@
+const S3 = require('aws-sdk/clients/s3');
+const AWS = require('aws-sdk/global');
+const chalk = require('chalk');
+const fs = require('fs');
+
+const UPLOAD_BUCKET = 'YOUR_S3_BUCKET_NAME';
+
+const s3 = new AWS.S3({ apiVersion: '2006-03-01' });
+
+class ImageReporter {
+  constructor(globalConfig, options) {
+    this._globalConfig = globalConfig;
+    this._options = options;
+  }
+
+  onTestResult(test, testResult, aggregateResults) {
+    if (testResult.numFailingTests && testResult.failureMessage.match(/different from snapshot/)) {
+      const files = fs.readdirSync('./__tests__/__image_snapshots__/__diff_output__/');
+
+      files.forEach((value) => {
+        const path = `diff_output/${value}`;
+        const params = {
+          Body: fs.readFileSync(`./__tests__/__image_snapshots__/__diff_output__/${value}`),
+          Bucket: UPLOAD_BUCKET,
+          Key: path,
+          ContentType: 'image/png',
+        };
+
+        s3.putObject(params, (err) => {
+          if (err) {
+            console.log(err, err.stack);
+          } else {
+            console.log(chalk.red.bold(`Uploaded image diff file to https://${UPLOAD_BUCKET}.s3.amazonaws.com/${path}`));
+          }
+        });
+      });
+    }
+  }
+}
+
+module.exports = ImageReporter;

package/test/babel-transformer.js

@@ -0,0 +1,7 @@
+const transformer = require('babel-jest');
+
+const { configWeb } = require('@woovi/babel');
+
+module.exports = transformer.default.createTransformer({
+  ...configWeb,
+});

package/test/convertHtmlToImage.tsx

@@ -0,0 +1,25 @@
+import { toCanvas } from 'html-to-image';
+
+export const convertHtmlToImage = async (
+  html: string,
+  width = 100,
+  height = 100,
+) => {
+  const canvas = document.createElement('canvas');
+
+  canvas.width = width;
+  canvas.height = height;
+  document.body.appendChild(canvas);
+
+  await toCanvas(
+    canvas,
+    { backgroundColor: 'white', quality: 1, pixelRatio: 1, width, height },
+    document.body,
+  );
+
+  const dataUrl = canvas.toDataURL('image/png');
+
+  document.body.removeChild(canvas);
+
+  return dataUrl;
+};

package/test/jest.setup.js

@@ -0,0 +1,31 @@
+import '@testing-library/jest-dom/extend-expect';
+import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
+import { jestPreviewConfigure } from 'jest-preview';
+
+expect.extend({
+  toMatchImageSnapshot: configureToMatchImageSnapshot({
+    customDiffDir: '__diff_output__',
+    dumpDiffToConsole: true,
+    comparisonMethod: 'ssim',
+    // failureThreshold: 0.01,
+    failureThreshold: 0.05, // intel and arm produce different screenshots
+    failureThresholdType: 'percent',
+  }),
+});
+
+jestPreviewConfigure({
+  autoPreview: true,
+});
+
+window.matchMedia = jest.fn().mockImplementation((query) => {
+  return {
+    matches: true,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  };
+});

package/test/testUtils.tsx

@@ -0,0 +1,37 @@
+import { StyledEngineProvider } from '@mui/material';
+import { ThemeProvider as MuiThemeProvider, StylesProvider } from '@mui/styles';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { ThemeProvider } from 'styled-components';
+
+import { ThemeMuiTheme } from '../src/theme/Themes';
+
+type WithProviders = {
+  initialState?: Record<string, unknown>;
+  initialEntries?: string[];
+  path?: string;
+  Component: React.ComponentType;
+};
+
+export const withProviders =
+  ({ initialEntries = ['/'], path = '/', Component }: WithProviders) =>
+  (props: any) => {
+    return (
+      <StylesProvider injectFirst>
+        <ThemeProvider theme={ThemeMuiTheme}>
+          <StyledEngineProvider injectFirst>
+            <MuiThemeProvider theme={ThemeMuiTheme}>
+              <MemoryRouter initialEntries={initialEntries}>
+                <Route
+                  path={path}
+                  exact
+                  render={(routeProps) => {
+                    return <Component {...routeProps} {...props} />;
+                  }}
+                />
+              </MemoryRouter>
+            </MuiThemeProvider>
+          </StyledEngineProvider>
+        </ThemeProvider>
+      </StylesProvider>
+    );
+  };

package/tsconfig.build.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "noImplicitAny": true,
+    "outDir": "./lib",
+    "preserveConstEnums": true,
+    "target": "esnext",
+    "declaration": true,
+    "declarationDir": "./types",
+    "sourceMap": true,
+    "emitDeclarationOnly": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "lib": ["esnext", "dom", "dom.iterable", "es2020.intl"],
+    "typeRoots": ["./typing/image"]
+  },
+  "exclude": ["node_modules", "**/*.spec.tsx", "./src/emails", "types"]
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "exclude": ["node_modules", "**/*.spec.tsx", "types"]
+}

package/types/form/test/i18n.d.ts

@@ -0,0 +1 @@
+export declare const getI18n: () => import("i18next").i18n;

package/types/ui/src/BackButton.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    onClick?: () => void;
+};
+declare const BackButton: ({ onClick }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BackButton;

package/types/ui/src/Badge.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default _default;

package/types/ui/src/Banner.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+type VariantTypes = 'solid' | 'outline';
+type ColorTypes = 'primary' | 'secondary' | 'tertiary' | 'error' | 'warning' | 'info';
+export type BannerProps = {
+    variant?: VariantTypes;
+    color?: ColorTypes;
+    children?: React.ReactNode;
+};
+export declare const Banner: import("styled-components").StyledComponent<"div", any, BannerProps, never>;
+export {};

package/types/ui/src/Banner.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: Meta;
+export default _default;
+export declare const Solid: () => import("react/jsx-runtime").JSX.Element;
+export declare const Outline: () => import("react/jsx-runtime").JSX.Element;
+export declare const ComplexSolid: () => import("react/jsx-runtime").JSX.Element;
+export declare const ComplexOutline: () => import("react/jsx-runtime").JSX.Element;

package/types/ui/src/CashbackTagStatus.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    status: string;
+};
+export declare const CashbackTagStatus: import("styled-components").StyledComponent<(props: import("./tag/Tag").TagProps) => import("react/jsx-runtime").JSX.Element, any, Props, never>;
+export {};