@woovi/ui 4.0.942

package/src/file/FileDrop.tsx

@@ -0,0 +1,73 @@
+import type { DropEvent } from 'react-dropzone';
+import { useDropzone } from 'react-dropzone';
+import { Flex } from 'rebass';
+import styled from 'styled-components';
+
+import Loading from '../Loading';
+import IconButton from './IconButton';
+import MaterialIcon from './MaterialIcon';
+
+const Area = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  border: 2px dashed #dddfe2;
+  border-radius: 2px;
+  box-sizing: border-box;
+  min-height: 100px;
+  outline: none;
+`;
+
+type Props = {
+  onDrop?(acceptedFiles: File[], rejectedFiles: File[], event: DropEvent): void;
+  onFileDialogCancel?(): void;
+  onRemoveFile: () => void | null;
+  isLoading: boolean;
+  url: string;
+  children: (open: () => void) => React.ReactNode;
+};
+const FileDrop = ({
+  onDrop,
+  onFileDialogCancel,
+  isLoading,
+  children,
+  url,
+  onRemoveFile,
+}: Props) => {
+  const { getRootProps, getInputProps, open } = useDropzone({
+    onDrop,
+    multiple: false,
+    noClick: true,
+    onFileDialogCancel,
+  });
+
+  const showRemove = !!onRemoveFile && !!url && !isLoading;
+
+  return (
+    <Flex flexDirection='column'>
+      <Area>
+        <div
+          role='button'
+          aria-pressed='false'
+          {...getRootProps()}
+          onClick={open}
+        >
+          <input {...getInputProps()} />
+          {isLoading && <Loading />}
+          {children({ isLoading, open })}
+        </div>
+        {showRemove && (
+          <Flex>
+            <IconButton background='#fff' onClick={onRemoveFile} size='large'>
+              <MaterialIcon color='#515c6a'>delete</MaterialIcon>
+            </IconButton>
+          </Flex>
+        )}
+      </Area>
+    </Flex>
+  );
+};
+
+export default FileDrop;

package/src/file/IconButton.tsx

@@ -0,0 +1,57 @@
+import chroma from 'chroma-js';
+import Ink from 'react-ink';
+import styled from 'styled-components';
+
+const getTextColor = (props: Props): string => {
+  if (props.color) {
+    return props.color;
+  }
+
+  if (chroma(props.background).luminance() <= 0.5) {
+    return '#FFF';
+  }
+
+  return '#000';
+};
+
+const StyledButton = styled.button`
+  transition: all 500ms cubic-bezier(0.2, 1, 0.22, 1);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  font-weight: 300;
+  color: ${(props) => getTextColor(props)};
+  fill: ${(props) => getTextColor(props)};
+  background: ${(props) => props.background};
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    background: ${(props) => chroma(props.background).brighten(0.2)};
+  }
+`;
+
+type Props = {
+  children: ReactNode;
+  background?: string;
+  color?: string;
+};
+
+function IconButton(props: Props) {
+  const { children, ...rest } = props;
+
+  return (
+    <StyledButton {...rest}>
+      {children}
+      <Ink />
+    </StyledButton>
+  );
+}
+
+IconButton.defaultProps = {
+  background: '#F9F9F9',
+};
+
+export default IconButton;

package/src/file/MaterialIcon.tsx

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+const Icon = styled.i`
+  text-align: center;
+  color: ${(props) => props.color};
+  font-size: ${(props) => props.fontSize};
+  padding: ${(props) => props.padding};
+  font-weight: 800;
+`;
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function MaterialIcon(props: Props) {
+  const { children } = props;
+  const className = props.className
+    ? `material-icons ${props.className}`
+    : 'material-icons';
+
+  return (
+    <Icon {...props} className={className}>
+      {children}
+    </Icon>
+  );
+}
+
+MaterialIcon.defaultProps = {
+  color: '#ffffff',
+  fontSize: 14,
+  padding: '5px',
+};
+
+export default MaterialIcon;

package/src/filter/Filter.tsx

@@ -0,0 +1,108 @@
+import CloseIcon from '@mui/icons-material/Close';
+import _Drawer from '@mui/material/Drawer';
+import type { DrawerProps } from '@mui/material/Drawer';
+import IconButton from '@mui/material/IconButton';
+import { useTranslation } from 'react-i18next';
+import { Flex } from 'rebass';
+import styled from 'styled-components';
+
+import ActionButton from '../buttons/ActionButton';
+import HorizontalStack from '../helpers/HorizontalStack';
+import BoxFlex from '../mui/BoxFlex';
+export { getFiltersFromLocation } from '@woovi/router';
+
+const Title = styled.div`
+  font-size: 16px;
+  font-weight: 600;
+`;
+
+const Drawer = styled(_Drawer)`
+  & .MuiDrawer-paper {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: strech;
+    width: 85%;
+    max-width: 550px;
+  }
+`;
+
+const Header = styled(Flex)`
+  border-bottom: 1px solid rgba(80, 80, 80, 0.12);
+`;
+
+const Footer = styled(Flex)`
+  border-top: 1px solid rgba(80, 80, 80, 0.12);
+`;
+
+type Props = {
+  children: React.ReactNode;
+  isOpen: boolean;
+  onRequestClose: () => void;
+  onClear: () => void;
+  onApply: () => void;
+  filtersTitle?: string | null;
+  showFooterButtons?: boolean;
+  sx: DrawerProps['sx'];
+};
+
+const Filter = ({
+  children,
+  isOpen,
+  onRequestClose,
+  onClear,
+  onApply,
+  filtersTitle,
+  showFooterButtons = true,
+  sx = {},
+}: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <Drawer
+      data-testid='filter-drawer'
+      anchor='right'
+      open={isOpen}
+      onClose={onRequestClose}
+      sx={sx}
+    >
+      <Header
+        flexDirection='row'
+        alignItems='center'
+        justifyContent='space-between'
+        pr='15px'
+        pl='15px'
+      >
+        <Title>{filtersTitle || t('Filter')}</Title>
+        <IconButton onClick={onRequestClose} size='large'>
+          <CloseIcon />
+        </IconButton>
+      </Header>
+      <BoxFlex
+        sx={{
+          flexDirection: 'column',
+          overflow: 'auto',
+          pr: '15px',
+          pl: '15px',
+          flexGrow: 2,
+        }}
+      >
+        {children}
+      </BoxFlex>
+      {showFooterButtons && (
+        <Footer flexDirection='row' justifyContent='center' p='8px'>
+          <HorizontalStack>
+            <ActionButton variant='text' onClick={onClear} color='secondary'>
+              {t('Clear Filters')}
+            </ActionButton>
+            <ActionButton variant='text' onClick={onApply}>
+              {t('Apply')}
+            </ActionButton>
+          </HorizontalStack>
+        </Footer>
+      )}
+    </Drawer>
+  );
+};
+
+export default Filter;

package/src/filter/FilterRelayFormik.tsx

@@ -0,0 +1,53 @@
+import { FormikProvider } from 'formik';
+
+import Filter from './Filter';
+import useFilterFormik from './useFilterFormik';
+
+type P = {
+  [field: string]: any;
+};
+
+type FilterItem = {
+  field: string | string[];
+  type: string;
+  component: React.ReactNode;
+  props: () => P | P;
+};
+
+type Props = {
+  filters: FilterItem[];
+  isOpen: boolean;
+  onCloseFilter: () => void;
+  useQueryString: boolean;
+  updateFilter: (filters: {}) => void;
+  stateFilters: {};
+  getFragmentVariables: (resetFilter?: boolean) => object;
+  filterProp?: string;
+  useDecodeEncode?: boolean;
+  filtersTitle?: string | null;
+  shouldUpdateFilter: string | null;
+  setShouldUpdateFilter: () => null;
+};
+const FilterRelayFormik = (props: Props) => {
+  const { onCloseFilter, filters, isOpen, filtersTitle } = props;
+
+  const { formikbag, resetFilters, renderFilterInput } = useFilterFormik(props);
+
+  const { handleSubmit } = formikbag;
+
+  return (
+    <FormikProvider value={formikbag}>
+      <Filter
+        isOpen={isOpen}
+        onRequestClose={onCloseFilter}
+        onApply={handleSubmit}
+        onClear={resetFilters}
+        filtersTitle={filtersTitle}
+      >
+        {filters.map((filter, index) => renderFilterInput(filter, index))}
+      </Filter>
+    </FormikProvider>
+  );
+};
+
+export default FilterRelayFormik;

package/src/filter/FormikFilter.tsx

@@ -0,0 +1,39 @@
+import { FormikProvider } from 'formik';
+
+import Filter from './Filter';
+
+type Props = {
+  isOpen: boolean;
+  resetFilters: () => void;
+  filters: Record<string, unknown>[];
+  onCloseFilter: () => void;
+  renderFilterInput: (filter: Record<string, unknown>, index: number) => void;
+};
+
+const FormikFilter = (props: Props) => {
+  const {
+    formikbag,
+    isOpen,
+    resetFilters,
+    filters,
+    renderFilterInput,
+    onCloseFilter,
+  } = props;
+
+  const { handleSubmit } = formikbag;
+
+  return (
+    <FormikProvider value={formikbag}>
+      <Filter
+        isOpen={isOpen}
+        onRequestClose={onCloseFilter}
+        onApply={handleSubmit}
+        onClear={resetFilters}
+      >
+        {filters.map((filter, index) => renderFilterInput(filter, index))}
+      </Filter>
+    </FormikProvider>
+  );
+};
+
+export default FormikFilter;

package/src/filter/__tests__/FieldDecoding.spec.tsx

@@ -0,0 +1,68 @@
+import {
+  decodeQueryParams,
+  encodeNumber,
+  decodeNumber,
+} from 'serialize-query-params';
+
+import { queryString } from '@woovi/shared';
+
+import { fieldsToParamConfigMap } from '../fieldToParamConfigMap';
+import type { FieldParam } from '../useFilterFormik';
+
+const { parse } = queryString;
+
+it('decode field without encode/decode parameter', async () => {
+  const fields: FieldParam<Any> = [
+    {
+      key: 'area',
+      field: 'area',
+      component: () => <span>Area</span>,
+      props: {
+        name: 'area',
+      },
+    },
+  ];
+
+  const paramConfigMap = fieldsToParamConfigMap(fields);
+
+  const areaId = 'Q29zdFJldmVudWVDZW50ZXI6NWViZDQyYzdlZmJkZmRiZDM3NzgyYTBj';
+
+  const location = {
+    search: `?area=${areaId}`,
+  };
+
+  const result = decodeQueryParams(paramConfigMap, parse(location.search));
+
+  expect(result).toEqual({
+    area: areaId,
+  });
+});
+
+it('decode field with number encoding', async () => {
+  const fields: FieldParam<Any> = [
+    {
+      key: 'min',
+      field: 'min',
+      component: () => <span>Area</span>,
+      props: {
+        name: 'min',
+      },
+      encode: encodeNumber,
+      decode: decodeNumber,
+    },
+  ];
+
+  const paramConfigMap = fieldsToParamConfigMap(fields);
+
+  const min = 7;
+
+  const location = {
+    search: `?min=${min}`,
+  };
+
+  const result = decodeQueryParams(paramConfigMap, parse(location.search));
+
+  expect(result).toEqual({
+    min,
+  });
+});

package/src/filter/__tests__/FieldEncoding.spec.tsx

@@ -0,0 +1,68 @@
+import {
+  encodeNumber,
+  decodeNumber,
+  encodeQueryParams,
+} from 'serialize-query-params';
+
+import { queryString } from '@woovi/shared';
+
+import { fieldsToParamConfigMap } from '../fieldToParamConfigMap';
+import type { FieldParam } from '../useFilterFormik';
+
+const { stringify } = queryString;
+
+it('encode field without encode/decode parameter', async () => {
+  const fields: FieldParam<Any> = [
+    {
+      key: 'area',
+      field: 'area',
+      component: () => <span>Area</span>,
+      props: {
+        name: 'area',
+      },
+    },
+  ];
+
+  const paramConfigMap = fieldsToParamConfigMap(fields);
+
+  const areaId = 'Q29zdFJldmVudWVDZW50ZXI6NWViZDQyYzdlZmJkZmRiZDM3NzgyYTBj';
+
+  const location = {
+    search: `area=${areaId}`,
+  };
+
+  const result = encodeQueryParams(paramConfigMap, {
+    area: areaId,
+  });
+
+  expect(stringify(result)).toBe(location.search);
+});
+
+it('encode field with number encoding', async () => {
+  const fields: FieldParam<Any> = [
+    {
+      key: 'min',
+      field: 'min',
+      component: () => <span>Area</span>,
+      props: {
+        name: 'min',
+      },
+      encode: encodeNumber,
+      decode: decodeNumber,
+    },
+  ];
+
+  const paramConfigMap = fieldsToParamConfigMap(fields);
+
+  const min = 7;
+
+  const location = {
+    search: `min=${min}`,
+  };
+
+  const result = encodeQueryParams(paramConfigMap, {
+    min,
+  });
+
+  expect(stringify(result)).toEqual(location.search);
+});

package/src/filter/__tests__/Filter.spec.tsx

@@ -0,0 +1,35 @@
+import { formatFilters } from '../formatFilters';
+
+beforeEach(() => {
+  globalThis.location = {};
+});
+
+it('should format filters', async () => {
+  const values = {
+    costRevenueCenter: 1,
+    isBoolean: false,
+    isNull: null,
+    jobExam: {
+      id: 1,
+      question: 2,
+    },
+    something: undefined,
+  };
+
+  expect(formatFilters(values)).toEqual({
+    costRevenueCenter: 1,
+    isBoolean: false,
+    isNull: null,
+    jobExam: { id: 1, question: 2 },
+  });
+});
+
+it('should format array filter correctly', async () => {
+  const values = {
+    excludeGoalGroups: ['goalGroupId'],
+  };
+
+  expect(formatFilters(values)).toEqual({
+    excludeGoalGroups: ['goalGroupId'],
+  });
+});

package/src/filter/__tests__/FilterRelayFormik.spec.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+
+import { withProviders } from '../../../test/testUtils';
+import FilterRelayFormik from '../FilterRelayFormik';
+
+it('should render filter relay formik', async () => {
+  const filters = [
+    {
+      field: 'gender',
+      props: {
+        name: 'gender',
+        label: 'Genêro',
+        items: [
+          {
+            value: 'FEMALE',
+            label: 'Feminino',
+            name: 'gender',
+          },
+          {
+            value: 'MALE',
+            label: 'Masculino',
+            name: 'gender',
+          },
+          {
+            value: 'OTHER',
+            label: 'Outro',
+            name: 'gender',
+          },
+        ],
+        fullWidth: true,
+      },
+      component: () => <span>field</span>,
+    },
+  ];
+
+  const Root = withProviders({
+    Component: FilterRelayFormik,
+  });
+
+  render(<Root filters={filters} isOpen={true} />);
+
+  expect(screen.getByText('Apply')).toBeTruthy();
+});

package/src/filter/decodeQueryParamsFromLocation.tsx

@@ -0,0 +1,19 @@
+import { decodeQueryParams } from 'serialize-query-params';
+
+import { parseQuery } from '@woovi/router';
+
+import { fieldsToParamConfigMap } from './fieldToParamConfigMap';
+import type { FieldParam } from './useFilterFormik';
+
+export const decodeQueryParamsFromLocation = (
+  location,
+  fields: FieldParam<any>,
+) => {
+  const encodedQuery = parseQuery(location);
+
+  const paramConfigMap = fieldsToParamConfigMap(fields);
+
+  const result = decodeQueryParams(paramConfigMap, encodedQuery);
+
+  return result;
+};

package/src/filter/fieldToParamConfigMap.tsx

@@ -0,0 +1,31 @@
+import {
+  encodeString,
+  decodeString,
+  encodeNumber,
+  decodeNumber,
+} from 'serialize-query-params';
+
+import type { FieldParam } from './useFilterFormik';
+
+export const fieldsToParamConfigMap = (fields: FieldParam<any>) => {
+  const defaultParamConfig = {
+    quantity: {
+      encode: encodeNumber,
+      decode: decodeNumber,
+    },
+    search: {
+      encode: encodeString,
+      decode: decodeString,
+    },
+  };
+
+  return fields.reduce((acc, field) => {
+    return {
+      ...acc,
+      [field?.key || field?.field]: {
+        encode: field?.encode || encodeString,
+        decode: field?.decode || decodeString,
+      },
+    };
+  }, defaultParamConfig);
+};

package/src/filter/formatFilterValue.tsx

@@ -0,0 +1,36 @@
+import moment from 'moment';
+
+import { isValidDatetime } from './isValidDatetime';
+
+// TODO - prefer an encode/decode strategy per field/filter/param
+export const formatFilterValue = (value: string | Record<string, any>) => {
+  if (!value) {
+    return value;
+  }
+
+  if (value instanceof moment || isValidDatetime(value)) {
+    const formatted = moment(value);
+
+    return formatted._isValid ? formatted.toISOString() : value;
+  }
+
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  if (typeof value === 'object') {
+    // autocompletefield
+    if (value?.label && (value.value || typeof value.value === 'boolean')) {
+      return value.value;
+    }
+
+    return Object.keys(value).reduce((acc, key) => {
+      return {
+        ...acc,
+        [key]: formatFilterValue(value[key]),
+      };
+    }, {});
+  }
+
+  return value;
+};

package/src/filter/formatFilters.tsx

@@ -0,0 +1,27 @@
+import { formatFilterValue } from './formatFilterValue';
+
+export const formatFilters = (values: Record<string, any>) =>
+  Object.entries(values)
+    .filter(([key, value]) => {
+      if (value === null) {
+        return true;
+      }
+
+      if (key === 'tags' && typeof value === 'string') {
+        return value.split(',');
+      }
+
+      if (Array.isArray(value) || typeof value === 'string') {
+        return !!value.length;
+      }
+
+      if (typeof value === 'boolean') {
+        return true;
+      }
+
+      return !!value;
+    })
+    .reduce(
+      (acc, [key, value]) => ({ ...acc, [key]: formatFilterValue(value) }),
+      {},
+    );