@digigov/ui 2.0.0-2445d5cb → 2.0.0-298cfc51

package/src/patterns/FilteredResults/__stories__/Default.tsx

@@ -1,243 +0,0 @@
-import React from 'react';
-import { FieldSpec } from '@digigov/form/types';
-import { CheckIcon, UncheckIcon } from '@digigov/ui/icons';
-import Link from '@digigov/ui/navigation/Link';
-import FilteredResults, {
-  DataConfigType,
-} from '@digigov/ui/patterns/FilteredResults';
-import { DataTable } from '@digigov/ui/patterns/FilteredResults/DataTable';
-import {
-  useURLParamsSearch,
-  useStaticSearch,
-} from '@digigov/ui/patterns/FilteredResults/hooks';
-
-const fields: FieldSpec[] = [
-  {
-    type: 'string',
-    key: 'text',
-    label: {
-      primary: 'Αναζήτηση λέξης',
-    },
-  },
-  {
-    type: 'choice:single',
-    key: 'name',
-    label: {
-      primary: 'Όνομα',
-    },
-    extra: {
-      component: 'Select',
-      options: [
-        {
-          label: {
-            primary: '',
-          },
-          value: '',
-        },
-        {
-          label: {
-            primary: 'Καλλιόπη Παπαδοπούλου',
-          },
-          value: 'Kalliopi Papadopoulou',
-        },
-        {
-          label: {
-            primary: 'Μάριος Μενεξές',
-          },
-          value: 'Marios Menekses',
-        },
-        {
-          label: {
-            primary: 'Μαρία Φλούπη',
-          },
-          value: 'Maria Floupi',
-        },
-        {
-          label: {
-            primary: 'Ηλέκτρα Αποστόλου',
-          },
-          value: 'Ilektra Apostolou',
-        },
-      ],
-    },
-  },
-  {
-    type: 'choice:single',
-    key: 'role',
-    label: {
-      primary: 'Ρόλος',
-    },
-    extra: {
-      component: 'Select',
-      options: [
-        {
-          label: {
-            primary: '',
-          },
-          value: '',
-        },
-        {
-          label: {
-            primary: 'Διαχειριστής',
-          },
-          value: 'admin',
-        },
-        {
-          label: {
-            primary: 'Χειριστής',
-          },
-          value: 'user',
-        },
-      ],
-    },
-  },
-  {
-    type: 'choice:single',
-    key: 'rights',
-    label: {
-      primary: 'Δικαιώματα',
-    },
-    extra: {
-      component: 'Select',
-      options: [
-        {
-          label: {
-            primary: '',
-          },
-          value: '',
-        },
-        {
-          label: {
-            primary: 'Ναι',
-          },
-          value: true,
-        },
-        {
-          label: {
-            primary: 'Όχι',
-          },
-          value: false,
-        },
-      ],
-    },
-  },
-];
-
-const displayLink = (value) => {
-  return <Link href={`#/${value}`}>{value}</Link>;
-};
-const displayRights = (value) => {
-  return <>{value ? <CheckIcon /> : <UncheckIcon />}</>;
-};
-
-type DataType = {
-  name: string;
-  case_id: number;
-  role: string;
-  email: string;
-  rights: boolean;
-};
-
-const data: DataType[] = [
-  {
-    name: 'Μάριος Μενεξές',
-    case_id: 123,
-    role: 'Χειριστής',
-    email: 'marios@mail.com',
-    rights: false,
-  },
-  {
-    name: 'Καλλιόπη Παπαδοπούλου',
-    case_id: 124,
-    role: 'Χειριστής',
-    email: 'kalliopi@mail.com',
-    rights: false,
-  },
-  {
-    name: 'Μαρία Φλούπη',
-    case_id: 125,
-    role: 'Διαχειριστής',
-    email: 'maria@mail.com',
-    rights: true,
-  },
-  {
-    name: 'Ηλέκτρα Αποστόλου',
-    case_id: 126,
-    role: 'Διαχειριστής',
-    email: 'ilektra@mail.com',
-    rights: true,
-  },
-];
-
-const dataConfig: DataConfigType[] = [
-  {
-    key: 'name',
-    title: 'Όνομα',
-  },
-  {
-    key: 'case_id',
-    title: 'Αρ. Υπόθεσης',
-    displayComponent: displayLink,
-  },
-  {
-    key: 'role',
-    title: 'Ρόλος',
-  },
-  {
-    key: 'email',
-    title: 'Email',
-  },
-  {
-    key: 'rights',
-    title: 'Δικαιώματα',
-    displayComponent: displayRights,
-  },
-];
-
-type InitialFiltersType = {
-  [K in (typeof dataConfig)[number]['key']]: string;
-};
-
-const initialFilters: InitialFiltersType = {
-  name: '',
-  case_id: '',
-  role: '',
-  text: '',
-  rights: '',
-};
-
-export const Default = () => {
-  const { search, results } = useStaticSearch<DataType, InitialFiltersType>({
-    fields,
-    data,
-    initialFilters,
-  });
-  const navigate = (url) => {
-    if (window.history.pushState) {
-      const newUrl =
-        window.location.protocol +
-        '//' +
-        window.location.host +
-        window.location.pathname +
-        url;
-      window.history.pushState({ path: newUrl }, '', newUrl);
-    }
-  };
-  const { search: urlSearch, values } = useURLParamsSearch(search, {
-    navigate,
-    fields,
-  });
-
-  return (
-    <FilteredResults
-      data={results}
-      variant="block"
-      currentFilters={values}
-      defaultFilters={initialFilters}
-      fields={fields}
-      onSearch={urlSearch}
-    >
-      <DataTable dataConfig={dataConfig} data={results} />
-    </FilteredResults>
-  );
-};

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';

package/src/typography/NormalText/index.mdx

@@ -1,44 +0,0 @@
----
-id: normal-text
-title: NormalText
----
-
-## How to use
-
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="Default.tsx"
-/>
-
-### Variants
-
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="Variants.tsx"
-/>
-
-## Font override classes
-
-### Font size
-
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="FontSizes.tsx"
-/>
-
-### Font weight
-
-<Story
-  packageName="@digigov/ui"
-  component="typography/NormalText"
-  story="FontWeight.tsx"
-/>
-
-## API
-
-See below for a complete reference to all of the props  available to the components mentioned here.
-
-<ComponentProps componentName={["NormalText"]} /> 

package/src/typography/Paragraph/index.mdx

@@ -1,32 +0,0 @@
----
-id: paragraph
-title: Paragraph
----
-
-## How to use
-
-<Story packageName="@digigov/ui" component="typography/Paragraph" story="Default.tsx" />
-
-### Lead paragraph
-
-<Story packageName="@digigov/ui" component="typography/Paragraph" story="LeadVariant.tsx" />
-
-### Small paragraph
-
-<Story packageName="@digigov/ui" component="typography/Paragraph" story="SmallVariant.tsx" />
-
-## Font override classes
-
-### Font size
-
-<Story packageName="@digigov/ui" component="typography/Paragraph" story="FontSizes.tsx" />
-
-### Font weight
-
-<Story packageName="@digigov/ui" component="typography/Paragraph" story="FontWeight.tsx" />
-
-## API
-
-See below for a complete reference to all of the props  available to the components mentioned here.
-
-<ComponentProps componentName={["Paragraph"]} /> 

package/src/typography/Typography/index.mdx

@@ -1,12 +0,0 @@
----
-id: typography
-title: Typography
----
-
-Typography compoment is a HOC (Higher-Order Component) for typography components such as `NormalText` compoment.
-
-## API
-
-See below for a complete reference to all of the props  available to the components mentioned here.
-
-<ComponentProps componentName={["Typography"]} /> 

package/src/utils/SvgIcon/index.tsx

@@ -1,5 +0,0 @@
-export * from '@digigov/react-core/SvgIcon';
-export * from '@digigov/react-icons';
-
-import SvgIcon from '@digigov/react-core/SvgIcon';
-export default SvgIcon;

package/utils/SvgIcon/index.d.ts

@@ -1,4 +0,0 @@
-export * from '@digigov/react-core/SvgIcon';
-export * from '@digigov/react-icons';
-import SvgIcon from '@digigov/react-core/SvgIcon';
-export default SvgIcon;

package/utils/SvgIcon/index.js

@@ -1,8 +0,0 @@
-export * from "@digigov/react-core/SvgIcon";
-export * from "@digigov/react-icons";
-import SvgIcon from "@digigov/react-core/SvgIcon";
-var SvgIcon_default = SvgIcon;
-export {
-  SvgIcon_default as default
-};
-//# sourceMappingURL=index.js.map

package/utils/SvgIcon/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/SvgIcon/index.tsx"],
-  "sourcesContent": ["export * from '@digigov/react-core/SvgIcon';\nexport * from '@digigov/react-icons';\n\nimport SvgIcon from '@digigov/react-core/SvgIcon';\nexport default SvgIcon;\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AAEd,OAAO,aAAa;AACpB,IAAO,kBAAQ;",
-  "names": []
-}