@woovi/ui 4.0.942

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@woovi/ui",
+  "version": "4.0.942",
+  "dependencies": {
+    "@mui/icons-material": "5.11.16",
+    "@mui/lab": "5.0.0-alpha.133",
+    "@mui/material": "^5.11.10",
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
+    "@mui/styled-engine-sc": "5.12.0",
+    "@mui/styles": "^5.11.9",
+    "@mui/x-data-grid-pro": "^5.15.2",
+    "@mui/x-license-pro": "^6.0.3",
+    "@sentry/react": "^7.61.1",
+    "@tanstack/react-virtual": "^3.0.0-beta.17",
+    "@woovi/dates": "^4.0.942",
+    "@woovi/form": "^4.0.942",
+    "@woovi/hooks": "^4.0.942",
+    "@woovi/roles": "^4.0.942",
+    "@woovi/router": "^4.0.942",
+    "@woovi/shared": "^4.0.942",
+    "@woovi/test": "^4.0.942",
+    "@woovi/utils": "^4.0.942",
+    "brazilian-values": "^0.13.0",
+    "chroma-js": "2.4.2",
+    "date-fns": "2.30.0",
+    "dot-object": "^2.1.4",
+    "formik": "3.0.0-next.6",
+    "libphonenumber-js": "^1.10.39",
+    "mime-types": "^2.1.35",
+    "moment": "^2.29.4",
+    "polished": "^4.0.3",
+    "qrcode.react": "3.1.0",
+    "query-string": "^7.1.1",
+    "react-dropzone": "14.2.3",
+    "react-error-boundary": "3.1.4",
+    "react-i18next": "^13.0.3",
+    "react-ink": "6.5.4",
+    "react-relay": "15.0.0",
+    "react-rnd": "^10.4.1",
+    "react-virtualized": "^9.22.3",
+    "rebass": "^4.0.7",
+    "serialize-query-params": "^2.0.1",
+    "styled-components": "^5.3.6",
+    "styled-system": "^5.1.5",
+    "use-debounce": "8.0.4",
+    "use-local-storage-state": "^18.3.2",
+    "use-window-size-hook": "1.1.22"
+  },
+  "devDependencies": {
+    "@mui/x-data-grid-generator": "^5.17.10",
+    "@testing-library/react": "^13.4.0",
+    "@types/chroma-js": "^2.4.0",
+    "@types/d3": "^7.4.0",
+    "@types/dot-object": "^2.1.2",
+    "@types/qrcode.react": "1.0.2",
+    "@types/react": "^18.2.18",
+    "@types/react-relay": "^14.1.3",
+    "@types/react-router-dom": "5.3.3",
+    "@types/react-virtualized": "^9.21.21",
+    "@types/rebass": "^4.0.10",
+    "@types/relay-test-utils": "^14.1.0",
+    "@types/styled-components": "^5.1.26",
+    "@types/styled-system": "^5.1.16",
+    "@woovi/babel": "^4.0.942",
+    "@woovi/main": "^4.0.942",
+    "dom-to-image": "^2.6.0",
+    "html-to-image": "1.11.11",
+    "jest-image-snapshot": "^6.2.0",
+    "jest-runner-eslint": "^2.0.0",
+    "node-html-to-image": "^3.3.0",
+    "relay-test-utils": "15.0.0",
+    "@rollup/plugin-babel": "^6.0.0",
+    "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-replace": "^5.0.0",
+    "@rollup/plugin-typescript": "^11.1.2",
+    "rollup-plugin-import-css": "3.3.4"
+  },
+  "resolutions": {
+    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "lib/index.cjs.js",
+  "module": "src/index.tsx",
+  "peerDependencies": {
+    "d3": "3.5.17",
+    "react": "18.0.0",
+    "react-router-dom": "5.1.0",
+    "react-router-dom-v5-compat": "6.3.0",
+    "styled-components": "5.3.6"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "yarn build:types && yarn build:rollup",
+    "build:types": "yarn export:types",
+    "build:rollup": "yarn rollup -c",
+    "check-types": "yarn tsc --noEmit",
+    "export:types": "yarn tsc -p tsconfig.build.json",
+    "prepare": "yarn build:rollup",
+    "prepare-all": "yarn build"
+  },
+  "types": "lib/index.d.ts",
+  "unpkg": "lib/index.umd.js"
+}

package/rollup.config.js

@@ -0,0 +1,96 @@
+import { babel } from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import path from 'path';
+import dts from 'rollup-plugin-dts';
+import css from 'rollup-plugin-import-css';
+import { terser } from 'rollup-plugin-terser';
+
+import babelConfig from './babel.rollup.config';
+import pkg from './package.json';
+
+const input = './src/index.tsx';
+
+const external = (id) => {
+  if (id.startsWith('@woovi')) {
+    return false;
+  }
+
+  return id.startsWith('.') === false && path.isAbsolute(id) === false;
+};
+
+const extensions = ['.tsx', '.ts', '.js', '.jsx', '.es6', '.es', '.mjs'];
+
+const babelOptions = {
+  babelHelpers: 'runtime',
+  extensions,
+  include: [
+    'src/**/*',
+    '../**/src/**/*',
+  ],
+  ...babelConfig,
+};
+
+export default [
+  {
+    input,
+    external,
+    plugins: [
+      // Allows node_modules resolution
+      resolve({ extensions }),
+
+      // Allow bundling cjs modules. Rollup doesn't understand cjs
+      commonjs(),
+
+      babel(babelOptions),
+      json(),
+      replace({
+        preventAssignment: true,
+      }),
+
+      css(),
+
+      terser(),
+    ],
+    output: [
+      {
+        file: pkg.main,
+        format: 'cjs',
+      },
+    ],
+  },
+  // {
+  //   input,
+  //   plugins: [
+  //     // Allows node_modules resolution
+  //     resolve({ extensions }),
+  //
+  //     // Allow bundling cjs modules. Rollup doesn't understand cjs
+  //     commonjs(),
+  //
+  //     babel(babelOptions),
+  //     json(),
+  //     replace({
+  //       preventAssignment: true,
+  //     }),
+  //
+  //     css(),
+  //
+  //     terser(),
+  //   ],
+  //   output: [
+  //     {
+  //       file: pkg.unpkg,
+  //       format: 'umd',
+  //       name: 'WooviUi',
+  //     },
+  //   ],
+  // },
+  // {
+  //   input: 'types/index.d.ts',
+  //   output: [{ file: pkg.types, format: 'esm' }],
+  //   plugins: [dts()],
+  // },
+];

package/src/BackButton.tsx

@@ -0,0 +1,25 @@
+import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
+
+const BackWrapper = styled.div`
+  display: flex;
+  cursor: pointer;
+  margin-right: 8px;
+  margin-left: -30px;
+`;
+
+type Props = {
+  onClick?: () => void;
+};
+
+const BackButton = ({ onClick }: Props) => {
+  const history = useHistory();
+
+  return (
+    <BackWrapper onClick={!!onClick ? onClick : () => history.goBack()}>
+      {'←'}
+    </BackWrapper>
+  );
+};
+
+export default BackButton;

package/src/Badge.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+export default styled.div`
+  display: flex;
+  align-items: center;
+  color: ${(props) => props.theme.primaryDarkerColor};
+  font-size: ${(props) => (props.fontSize ? props.fontSize : '12px')};
+  padding: 1px;
+
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 10px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: ${(props) => props.theme.primaryDarkerColor};
+  max-width: 75px;
+`;

package/src/Banner.stories.tsx

@@ -0,0 +1,108 @@
+import { WarningOutlined } from '@mui/icons-material';
+import { Stack, Typography } from '@mui/material';
+import type { Meta } from '@storybook/react/types-6-0';
+
+import { Banner } from './Banner';
+import ActionButton from './buttons/ActionButton';
+import BoxFlex from './mui/BoxFlex';
+
+export default {
+  title: 'UI/Banner',
+  component: Banner,
+} as Meta;
+
+export const Solid = () => {
+  return (
+    <Stack gap={2}>
+      <Banner>
+        Primary
+        <ActionButton color='secondary'>Action</ActionButton>
+      </Banner>
+      <Banner color='secondary'>
+        Secondary
+        <ActionButton>Action</ActionButton>
+      </Banner>
+      <Banner color='tertiary'>
+        Tertiary
+        <ActionButton>Action</ActionButton>
+      </Banner>
+      <Banner color='info'>
+        Info
+        <ActionButton>Action</ActionButton>
+      </Banner>
+      <Banner color='warning'>
+        Warning
+        <ActionButton>Action</ActionButton>
+      </Banner>
+      <Banner color='error'>
+        Error
+        <ActionButton>Action</ActionButton>
+      </Banner>
+    </Stack>
+  );
+};
+
+export const Outline = () => {
+  return (
+    <Stack gap={2}>
+      <Banner variant='outline'>
+        Primary
+        <ActionButton>Action</ActionButton>
+      </Banner>
+      <Banner variant='outline' color='secondary'>
+        Secondary
+        <ActionButton>Action</ActionButton>
+      </Banner>
+      <Banner variant='outline' color='tertiary'>
+        Tertiary
+        <ActionButton>Action</ActionButton>
+      </Banner>
+      <Banner variant='outline' color='info'>
+        Info
+        <ActionButton>Action</ActionButton>
+      </Banner>
+      <Banner variant='outline' color='warning'>
+        Warning
+        <ActionButton>Action</ActionButton>
+      </Banner>
+      <Banner variant='outline' color='error'>
+        Error
+        <ActionButton>Action</ActionButton>
+      </Banner>
+    </Stack>
+  );
+};
+
+export const ComplexSolid = () => {
+  return (
+    <Banner color='warning'>
+      <Stack>
+        <BoxFlex sx={{ align: 'center' }}>
+          <WarningOutlined fontSize='small' sx={{ mr: '4px' }} />
+          Complex Example
+        </BoxFlex>
+        <Typography>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </Typography>
+      </Stack>
+      <ActionButton color='secondary'>Action</ActionButton>
+    </Banner>
+  );
+};
+
+export const ComplexOutline = () => {
+  return (
+    <Banner variant='outline' color='error'>
+      <Stack>
+        <BoxFlex sx={{ align: 'center' }}>
+          <WarningOutlined fontSize='small' sx={{ mr: '4px', color: 'red' }} />
+          Complex Example
+        </BoxFlex>
+        <Typography fontSize={12}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </Typography>
+      </Stack>
+      <ActionButton sx={{ ml: 'auto' }}>Action</ActionButton>
+    </Banner>
+  );
+};

package/src/Banner.tsx

@@ -0,0 +1,44 @@
+import styled, { css } from 'styled-components';
+
+type VariantTypes = 'solid' | 'outline';
+type ColorTypes =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'error'
+  | 'warning'
+  | 'info';
+
+export type BannerProps = {
+  variant?: VariantTypes;
+  color?: ColorTypes;
+  children?: React.ReactNode;
+};
+
+const variantStyles = (variant = 'solid', color: ColorTypes = 'primary') =>
+  ({
+    solid: css`
+      color: ${(props) =>
+        color === 'warning' ? props.theme.palette.tertiary.main : 'white'};
+      background-color: ${(props) =>
+        color === 'warning'
+          ? props.theme.palette.warning.light
+          : props.theme.palette[color].main};
+    `,
+    outline: css`
+      border: 1px solid ${(props) => props.theme.palette[color].main};
+      border-radius: 8px;
+    `,
+  }[variant]);
+
+export const Banner = styled.div<BannerProps>`
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  flex-grow: 1;
+  justify-content: space-between;
+  font-size: 14px;
+  font-weight: 600;
+  ${(props) => variantStyles(props.variant, props.color)}
+`;

package/src/CashbackTagStatus.tsx

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+import { CASHBACK_STATUS } from '@woovi/shared';
+
+import _Tag from './tag/Tag';
+
+const getColor = (status: string, theme: string) => {
+  const CASHBACK_TAG_STATUS_COLOR = {
+    [CASHBACK_STATUS.PENDING]: theme.palette.warning.light,
+    [CASHBACK_STATUS.PENDING_EXCLUSIVE]: theme.palette.warning.light,
+    [CASHBACK_STATUS.PROCESSING]: theme.palette.warning.light,
+    [CASHBACK_STATUS.ERROR_PROCESSING]: theme.palette.error.light,
+    [CASHBACK_STATUS.CREATED]: theme.palette.success.light,
+    [CASHBACK_STATUS.ERROR_CREATING]: theme.palette.error.light,
+    [CASHBACK_STATUS.CONFIRMED]: theme.palette.success.light,
+    [CASHBACK_STATUS.EXPIRED]: theme.palette.error.light,
+    [CASHBACK_STATUS.NOT_APPLY]: theme.palette.error.light,
+    [CASHBACK_STATUS.REFUNDED]: theme.palette.error.light,
+  };
+
+  return CASHBACK_TAG_STATUS_COLOR[status];
+};
+
+type Props = {
+  status: string;
+};
+export const CashbackTagStatus = styled(_Tag)<Props>`
+  background-color: ${(props) =>
+    getColor(props.status, props.theme)} !important;
+  color: white !important;
+`;

package/src/Circle.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const Circle = styled.div<{ size: number | null; color: string | null }>`
+  width: ${(props) => props.size || 21}px;
+  height: ${(props) => props.size || 21}px;
+  background-color: ${(props) => props.color || '#808080'};
+  border-radius: 50%;
+`;
+
+export default Circle;

package/src/CircleButton.tsx

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 250px;
+  cursor: pointer;
+`;
+
+const Button = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 100px;
+  background-color: ${(props) => props.theme.palette.primary.main};
+`;
+
+const InsideText = styled.p`
+  font-size: 30px;
+  font-weight: 600;
+  color: ${(props) => props.theme.button.textColor};
+`;
+
+const AuxText = styled.p`
+  margin-top: 14px;
+  font-weight: 600;
+`;
+
+interface Props {
+  symbol?: string;
+  onClick?: Function;
+  children?: React.ReactNode;
+}
+
+const CircleButton = ({ children, symbol, ...props }: Props) => (
+  <Wrapper {...props}>
+    <Button className='CircleButton__Button'>
+      <InsideText className='CircleButton__InsideText'>
+        {symbol || '+'}
+      </InsideText>
+    </Button>
+    {children && (
+      <AuxText className='CircleButton__AuxText'>{children}</AuxText>
+    )}
+  </Wrapper>
+);
+
+export default CircleButton;

package/src/ClockIcon.tsx

@@ -0,0 +1,41 @@
+import { useTheme } from '@mui/styles';
+import React from 'react';
+
+type ClockIconProps = {
+  color: string;
+};
+
+const ClockIcon = (props: ClockIconProps) => {
+  const theme = useTheme();
+
+  const color = props?.color || theme.palette.warning.light;
+
+  return (
+    <svg
+      width='101'
+      height='101'
+      viewBox='0 0 101 101'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <rect
+        x='0.5'
+        y='0.599976'
+        width='100'
+        height='100'
+        rx='50'
+        fill={color}
+      />
+      <path
+        d='M50.975 26C37.175 26 26 37.2 26 51C26 64.8 37.175 76 50.975 76C64.8 76 76 64.8 76 51C76 37.2 64.8 26 50.975 26ZM51 71C39.95 71 31 62.05 31 51C31 39.95 39.95 31 51 31C62.05 31 71 39.95 71 51C71 62.05 62.05 71 51 71Z'
+        fill='white'
+      />
+      <path
+        d='M52.25 38.5H48.5V53.5L61.625 61.375L63.5 58.3L52.25 51.625V38.5Z'
+        fill='white'
+      />
+    </svg>
+  );
+};
+
+export default ClockIcon;

package/src/Column.tsx

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export default styled.div`
+  display: flex;
+  flex-direction: column;
+`;

package/src/CopyInput.tsx

@@ -0,0 +1,40 @@
+import { CheckCircle } from '@mui/icons-material';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { TextField, IconButton } from '@mui/material';
+import { useState } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+
+import { copyToClipboard } from '@woovi/hooks';
+
+type CopyInputProps = {
+  value: string;
+};
+
+export const CopyInput = ({ value }: CopyInputProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const clearCopied = useDebouncedCallback(() => {
+    setIsCopied(false);
+  }, 600);
+
+  const handleCopy = async () => {
+    setIsCopied(true);
+    await copyToClipboard(value);
+    clearCopied();
+  };
+
+  return (
+    <TextField
+      disabled
+      value={value}
+      InputProps={{
+        endAdornment: (
+          <IconButton onClick={handleCopy} edge='end'>
+            {isCopied ? <CheckCircle /> : <ContentCopyIcon />}
+          </IconButton>
+        ),
+      }}
+      sx={{ width: '100%', m: 0 }}
+    />
+  );
+};

package/src/EmptyMessage.stories.tsx

@@ -0,0 +1,19 @@
+import type { Story } from '@storybook/addon-docs/blocks';
+import type { Meta } from '@storybook/react/types-6-0';
+
+import type { EmptyMessageProps } from './EmptyMessage';
+import EmptyMessage from './EmptyMessage';
+
+export default {
+  title: 'UI/EmptyMessage',
+  component: EmptyMessage,
+} as Meta;
+
+const Template: Story<EmptyMessageProps> = ({ children }) => {
+  return <EmptyMessage>{children}</EmptyMessage>;
+};
+
+export const Example = Template.bind({});
+Example.args = {
+  children: 'Empty',
+};

package/src/EmptyMessage.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  color: #7c8289;
+  font-weight: 600;
+  font-size: 18px;
+  height: 200px;
+`;
+
+export type EmptyMessageProps = {
+  children: ReactNode;
+};
+const EmptyMessage = ({ children }: EmptyMessageProps) => (
+  <Wrapper>{children}</Wrapper>
+);
+
+export default EmptyMessage;

package/src/EncryptedText.tsx

@@ -0,0 +1,23 @@
+import { Lock } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+import { Flex, Text } from 'rebass';
+
+import { useTheme } from '@woovi/hooks';
+
+const EncryptedText = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  const color = theme.palette.text.secondary;
+
+  return (
+    <Flex>
+      <Lock style={{ fontSize: 12, color }} />
+      <Text ml='5px' fontSize={'12px'} color={color} textAlign='center'>
+        {t('Your data is encrypted')}
+      </Text>
+    </Flex>
+  );
+};
+
+export default EncryptedText;