@digigov/ui 2.0.0-2445d5cb → 2.0.0-36b707c1

package/src/patterns/FilteredResults/hooks.ts

@@ -1,131 +0,0 @@
-import { useState, useEffect, useMemo } from 'react';
-import { FieldSpec } from '@digigov/form/types';
-import { ScalarType } from '@digigov/ui/patterns/FilteredResults';
-
-export function isBooleanString(str: string): boolean {
-  return /^(true|false)$/i.test(str);
-}
-
-export function normalizeText(text: string): string {
-  return text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-}
-
-export const getOptionLabelForSelectValue = (field, value) => {
-  if (field.extra?.options) {
-    const matchedOption = field.extra.options.find(
-      (option) => option.value.toString() === value?.toString()
-    );
-    if (matchedOption) {
-      return matchedOption.label.primary;
-    }
-  }
-  return value;
-};
-
-export const useURLParamsSearch = (searchFunc, { navigate, fields }) => {
-  const urlParams = new URLSearchParams(window.location.search);
-  const currentParams = Object.fromEntries(urlParams.entries());
-  const values = fields.reduce((newValues, field) => {
-    if (currentParams[field.key]) {
-      newValues[field.key] = currentParams[field.key];
-    }
-    return newValues;
-  }, {});
-
-  const search = (params) => {
-    navigate(
-      '?' +
-        new URLSearchParams(
-          // @ts-ignore
-          Object.entries({ ...currentParams, ...params }).filter(
-            ([_, value]) => !!value
-          )
-        ).toString()
-    );
-    return searchFunc(params);
-  };
-  return { search, values };
-};
-
-interface UseStaticSearchProps<
-  DT extends Record<string, ScalarType>,
-  FT extends Record<string, ScalarType>,
-> {
-  fields: FieldSpec[];
-  data: DT[];
-  initialFilters: FT;
-}
-
-export function useStaticSearch<
-  DT extends Record<string, ScalarType>,
-  FT extends Record<string, ScalarType>,
->({ fields, data, initialFilters }: UseStaticSearchProps<DT, FT>) {
-  const [results, setResults] = useState<DT[]>(data);
-
-  useEffect(() => {
-    search(initialFilters);
-  }, [initialFilters]);
-
-  const search = (filters: FT) => {
-    if (!filters || Object.keys(filters).every((key) => filters[key] === '')) {
-      setResults(data);
-      return;
-    }
-
-    const newResults = data.filter((row) => {
-      const filterKeys = Object.keys(filters);
-      const enabledFilters = filterKeys.filter(
-        (filterKey) =>
-          filters[filterKey]?.toString() && row[filterKey]?.toString()
-      );
-      const freeTextFilters = filterKeys.filter(
-        (filterKey) =>
-          filters[filterKey]?.toString() && !row[filterKey]?.toString()
-      );
-      let filtersMatchingValue = false;
-
-      // Filter the fields that exists as columns in table
-      if (enabledFilters.length > 0) {
-        filtersMatchingValue = enabledFilters.every((filterKey) => {
-          if (filters[filterKey]?.toString() !== row[filterKey]?.toString()) {
-            const field = fields.find((f) => f.key === filterKey);
-            const optionsObj = field?.extra?.options.find(
-              (option) => option?.label?.primary === row[filterKey]
-            );
-            return (
-              optionsObj?.value.toString() === filters[filterKey]?.toString()
-            );
-          }
-          filtersMatchingValue = true;
-          return filtersMatchingValue;
-        });
-        if (!filtersMatchingValue) {
-          return false;
-        }
-      }
-      // Filter the free text fields (doesn't exist as columns)
-      if (freeTextFilters.length > 0) {
-        return freeTextFilters.every((filterKey) => {
-          return Object.values(row).some((value) => {
-            if (typeof value !== 'string') {
-              return false;
-            }
-            const normalizedItemValue = normalizeText(
-              value.toString().toLowerCase()
-            );
-
-            const normalizedFilterValue = normalizeText(
-              filters[filterKey]?.toString().toLowerCase().trim() || ''
-            );
-            return normalizedItemValue.includes(normalizedFilterValue);
-          });
-        });
-      }
-      return filtersMatchingValue;
-    });
-
-    setResults(newResults);
-  };
-
-  return useMemo(() => ({ search, results }), [search, results]);
-}

package/src/patterns/FilteredResults/index.test.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { test, expect } from '@playwright/experimental-ct-react';
-import { Default } from '@digigov/ui/patterns/FilteredResults/__stories__/Default';
-import TestVariant from '@digigov/ui/utils/TestVariant';
-
-test('renders the All FilteredResults variants', async ({ mount, page }) => {
-  await mount(
-    <div>
-      <TestVariant title="Default">
-        <Default />
-      </TestVariant>
-    </div>
-  );
-  await page.evaluate(() => document.fonts.ready);
-
-  const screenshot = await page.screenshot({
-    fullPage: true,
-    animations: 'disabled',
-  });
-  expect(screenshot).toMatchSnapshot();
-});

package/src/patterns/FilteredResults/index.tsx

@@ -1,180 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import FormBuilder from '@digigov/form/FormBuilder';
-import { FormContext } from '@digigov/form/FormContext';
-import { FieldSpec } from '@digigov/form/types';
-import CloseButton from '@digigov/ui/app/CloseButton';
-import FilterContainer, {
-  FilterContent,
-  FilterHeadingContainer,
-} from '@digigov/ui/app/FilterContainer';
-import { Button } from '@digigov/ui/form/Button';
-import { Grid } from '@digigov/ui/layouts/Grid';
-import { Hidden } from '@digigov/ui/layouts/Hidden';
-import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
-import { Drawer, DrawerHeading } from '@digigov/ui/navigation/Drawer';
-import { useDrawer } from '@digigov/ui/navigation/Drawer/hooks';
-import { FilterChips } from '@digigov/ui/patterns/FilteredResults/FilterChips';
-import { FilterFields } from '@digigov/ui/patterns/FilteredResults/FilterFields';
-import { Heading } from '@digigov/ui/typography/Heading';
-
-export type ScalarType = string | number | boolean | null | undefined;
-
-export interface DataConfigType {
-  key: string;
-  title: string;
-  displayComponent?: (value: string | number | boolean) => React.ReactNode;
-}
-export interface FilteredResultsProps<
-  DT extends Record<string, ScalarType>,
-  FT extends Record<string, ScalarType>,
-> {
-  fields: FieldSpec[];
-  data: DT[];
-  variant?: 'drawer-left' | 'drawer-right' | 'block';
-  defaultFilters?: FT;
-  currentFilters?: FT;
-  onSearch: (filters: unknown) => void;
-  children?: React.ReactNode;
-}
-
-export const FormBuilderSyncValues = ({ values, autoSubmit }) => {
-  const form = useContext(FormContext);
-  const previousValues = form.getValues();
-  useEffect(() => {
-    const mergedObject = { ...values, ...previousValues };
-    let shouldSubmit = false;
-    for (const key in mergedObject) {
-      // catching the filters that have been parsed from url & avoid continuous submitting
-      if (values[key] !== undefined && previousValues[key] !== values[key]) {
-        shouldSubmit = true;
-        previousValues[key] = values[key];
-        form.setValue(key, values[key]);
-      }
-    }
-    if (autoSubmit && shouldSubmit) {
-      form.submit();
-    }
-  }, [values]);
-  return <></>;
-};
-
-export const DrawerFilteredResults = React.forwardRef<HTMLDivElement, unknown>(
-  function DrawerFilteredResults(
-    { fields, direction = 'left', ...props },
-    ref
-  ) {
-    const { registerDrawer, registerAction, currentOpen } = useDrawer();
-
-    return (
-      <>
-        {currentOpen && (
-          <Grid item xs={12} md={12} lg={4} ref={ref}>
-            <Drawer
-              {...registerDrawer('filters-drawer', {
-                upRelative: 'lg',
-                direction,
-              })}
-            >
-              <DrawerHeading {...registerAction('filters-drawer', 'close')}>
-                <Heading size="md">Φίλτρα</Heading>
-              </DrawerHeading>
-              <FilterContent>
-                <FilterFields fields={fields} horizontal={false} />
-              </FilterContent>
-            </Drawer>
-          </Grid>
-        )}
-        <Grid item xs={12} md={12} lg={currentOpen ? 8 : 12}>
-          <Button
-            mb={4}
-            {...registerAction(
-              'filters-drawer',
-              currentOpen === 'filters-drawer' ? 'close' : 'open'
-            )}
-            color="secondary"
-          >
-            Φίλτρα
-          </Button>
-          <FilterChips />
-          {props.children}
-        </Grid>
-      </>
-    );
-  }
-);
-
-export const BlockFilteredResults = React.forwardRef<HTMLDivElement, unknown>(
-  function BlockFilteredResults({ fields, ...props }, ref) {
-    const [open, setOpen] = React.useState(true);
-    return (
-      <Grid item xs={12} ref={ref}>
-        <FilterContainer open={open}>
-          <FilterHeadingContainer>
-            <Hidden mdUp>
-              <CloseButton onClick={() => setOpen(false)}>Κλείσιμο</CloseButton>
-            </Hidden>
-            <Heading size="md">Φίλτρα</Heading>
-          </FilterHeadingContainer>
-          <FilterContent>
-            <FilterChips />
-            <FilterFields fields={fields} horizontal={true} />
-          </FilterContent>
-        </FilterContainer>
-        <Button
-          color="secondary"
-          mdUpHidden
-          mb={4}
-          onClick={() => setOpen(true)}
-        >
-          Φίλτρα
-        </Button>
-        <SectionBreak size="md" visible={false} />
-        {props.children}
-      </Grid>
-    );
-  }
-);
-
-export const FilteredResults = React.forwardRef<
-  HTMLFormElement,
-  FilteredResultsProps<Record<string, ScalarType>, Record<string, ScalarType>>
->(function FilteredResults(
-  {
-    fields,
-    onSearch,
-    variant = 'block',
-    defaultFilters,
-    currentFilters,
-    children,
-  },
-  ref
-) {
-  const isDrawer = variant.startsWith('drawer-');
-  return (
-    <FormBuilder
-      onSubmit={onSearch}
-      initial={defaultFilters}
-      fields={fields}
-      grid
-      ref={ref}
-    >
-      {currentFilters && (
-        <FormBuilderSyncValues values={currentFilters} autoSubmit={true} />
-      )}
-      {isDrawer ? (
-        // @ts-ignore
-        <DrawerFilteredResults
-          fields={fields}
-          direction={variant.split('-')[1]}
-        >
-          {children}
-        </DrawerFilteredResults>
-      ) : (
-        // @ts-ignore
-        <BlockFilteredResults fields={fields}>{children}</BlockFilteredResults>
-      )}
-    </FormBuilder>
-  );
-});
-
-export default FilteredResults;

package/src/patterns/index.tsx

@@ -1 +0,0 @@
-export * from '@digigov/ui/patterns/FilteredResults';