@digigov/react-modules 1.2.0-rc.30 → 1.2.0-rc.31

package/src/Faq/index.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/react-modules/Faq/__stories__/Default';
+
+test('renders the All Faq variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/Faq/index.tsx

@@ -0,0 +1,286 @@
+import React, { useEffect, useContext } from 'react';
+import { Field } from '@digigov/form/Field';
+import FormBuilder from '@digigov/form/FormBuilder';
+import { FormContext } from '@digigov/form/FormContext';
+import Results from '@digigov/react-modules/Faq/Results';
+import { createId } from '@digigov/react-modules/Faq/utils';
+import PageTitleContainer, {
+  PageTitleHeading,
+} from '@digigov/ui/app/PageTitleContainer';
+import {
+  Accordion,
+  AccordionSection,
+  AccordionSectionContent,
+  AccordionSectionSummary,
+  AccordionSectionSummaryHeading,
+} from '@digigov/ui/content/Accordion';
+import { useAccordion } from '@digigov/ui/content/Accordion/hooks';
+import Markdown from '@digigov/ui/content/Markdown';
+import { SearchButton } from '@digigov/ui/form/SearchContainer';
+import { Stack } from '@digigov/ui/layouts';
+import { Aside } from '@digigov/ui/layouts/Basic/Aside';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import Grid from '@digigov/ui/layouts/Grid';
+import SectionBreak from '@digigov/ui/layouts/SectionBreak';
+import { BackToTop } from '@digigov/ui/navigation/BackToTopLink';
+import NavList, { NavListItemAction } from '@digigov/ui/navigation/NavList';
+import { Heading } from '@digigov/ui/typography/Heading';
+import Hint from '@digigov/ui/typography/Hint';
+
+export interface sectionsConfigType {
+  sections: SectionType[];
+}
+
+export interface QaType {
+  id?: string;
+  question: string;
+  answer: string;
+}
+
+export interface SectionType {
+  id: string;
+  title: string;
+  qa: QaType[];
+}
+
+export interface TocType {
+  title: string;
+  placement: 'top' | 'left' | 'right' | 'none';
+}
+
+export interface SearchFilterType {
+  title?: string;
+}
+
+export interface ContentsType {
+  title: string;
+  toc: TocType;
+  search?: SearchFilterType;
+}
+
+export interface NavigationListProps {
+  title?: string;
+  sections: SectionType[];
+}
+
+export interface FaqProps {
+  contents: ContentsType;
+  sections: SectionType[];
+  initialSections: sectionsConfigType;
+  search: (values: Record<string, string>) => void;
+  submitValues: { text: string };
+  activeQa: string;
+  onActiveQa: (v: string) => void;
+}
+
+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();
+    }
+  }, [autoSubmit, form, previousValues, values]);
+  return <></>;
+};
+
+const NavigationList = React.forwardRef<HTMLUListElement, NavigationListProps>(
+  function NavigationList({ title, sections }, ref) {
+    return (
+      <NavList ref={ref} layout="vertical" marginBottom={10}>
+        {title && (
+          <Heading size="md" id="contents" marginBottom={4}>
+            {title}
+          </Heading>
+        )}
+        {sections &&
+          sections.length > 0 &&
+          sections.map(({ id, title }, index) => (
+            <NavListItemAction key={index} href={`#${createId(id, title)}`}>
+              {title}
+            </NavListItemAction>
+          ))}
+      </NavList>
+    );
+  }
+);
+
+export const Faq = React.forwardRef<HTMLDivElement, FaqProps>(function FAQ(
+  {
+    contents,
+    sections,
+    initialSections,
+    submitValues,
+    activeQa,
+    onActiveQa,
+    search,
+  },
+  ref
+) {
+  const { section, currentOpen, onOpen, close } = useAccordion({
+    singleOpen: true,
+    defaultOpen: 0,
+  });
+  const placement = contents.toc?.placement || 'none';
+  const filteredSections = sections.reduce(
+    (acc, section) => acc + (section.qa.length || 0),
+    0
+  );
+  const primarySections = initialSections.sections.reduce(
+    (acc, section) => acc + (section.qa.length || 0),
+    0
+  );
+  const hash = window.location.hash.slice(1);
+  const currentId = activeQa ? activeQa : hash;
+
+  useEffect(() => {
+    if (onActiveQa) {
+      if (currentOpen && activeQa !== currentOpen) {
+        onActiveQa(currentOpen as string);
+      }
+    }
+  }, [activeQa, currentOpen, onActiveQa]);
+
+  useEffect(() => {
+    if (activeQa && activeQa !== currentOpen) {
+      onOpen(activeQa);
+    }
+  }, [activeQa, currentOpen, onOpen]);
+
+  useEffect(() => {
+    // Scroll to the target element if it exists
+    if (currentId) {
+      const element = document.getElementById(currentId);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    }
+  }, [activeQa, currentId, hash]);
+
+  const Onclose = (activeQa) => {
+    const urlParams = new URLSearchParams(window.location.search);
+    urlParams.delete('text');
+    urlParams.delete('activeQa');
+    window.history.pushState({}, '', '?' + urlParams.toString());
+    onActiveQa('');
+    close(activeQa);
+  };
+  const handleSubmit = (data) => {
+    search(data);
+    onActiveQa('');
+    close(activeQa);
+    const urlParams = new URLSearchParams(window.location.search);
+    urlParams.delete('activeQa');
+    window.history.replaceState({}, '', '?' + urlParams.toString());
+  };
+
+  return (
+    <Container ref={ref}>
+      {placement !== 'none' && placement === 'left' && (
+        <Aside sticky={false}>
+          <NavigationList title={contents.toc?.title} sections={sections} />
+        </Aside>
+      )}
+      <Main>
+        <PageTitleContainer>
+          <PageTitleHeading size="xl" id="faq">
+            {contents?.title}
+          </PageTitleHeading>
+        </PageTitleContainer>
+        {placement !== 'none' && placement === 'top' && (
+          <NavigationList title={contents?.toc?.title} sections={sections} />
+        )}
+
+        {contents.search && (
+          <FormBuilder onSubmit={handleSubmit} initial={{ text: '' }}>
+            {submitValues && (
+              <FormBuilderSyncValues values={submitValues} autoSubmit={true} />
+            )}
+            <Stack
+              direction="row"
+              flexWrap="nowrap"
+              alignItems="flex-end"
+              spacing={4}
+            >
+              <Grid container style={{ width: '100%' }}>
+                <Field
+                  type="string"
+                  key="text"
+                  name="text"
+                  placeholder="Αναζητήστε σχετικά με την ερώτησή σας"
+                  label={{ primary: contents.search.title }}
+                />
+              </Grid>
+              <SearchButton
+                type="submit"
+                mb={{ md: 10 }}
+                style={{ minHeight: '2.75rem' }}
+              />
+            </Stack>
+            {filteredSections !== primarySections && (
+              <Results
+                filteredSections={filteredSections}
+                primarySections={primarySections}
+                Onclose={Onclose}
+                activeQa={activeQa}
+              />
+            )}
+          </FormBuilder>
+        )}
+        <Grid>
+          {sections && sections.length > 0 ? (
+            sections.map(({ id: sectionId, title, qa }, index) => (
+              <React.Fragment key={index}>
+                <Heading id={createId(sectionId, title)} size="lg">
+                  {title}
+                </Heading>
+                <Accordion marginBottom={qa && qa.length > 0 ? 12 : 0}>
+                  {qa?.map(({ id, question, answer }, indx) => (
+                    <AccordionSection
+                      key={indx}
+                      {...section(createId(id, question))}
+                    >
+                      <AccordionSectionSummary>
+                        <AccordionSectionSummaryHeading
+                          aria-controls={createId(id, question)}
+                        >
+                          {question}
+                        </AccordionSectionSummaryHeading>
+                      </AccordionSectionSummary>
+                      <AccordionSectionContent id={createId(id, question)}>
+                        <Markdown content={answer} />
+                      </AccordionSectionContent>
+                    </AccordionSection>
+                  ))}
+                </Accordion>
+                <SectionBreak visible={false} />
+              </React.Fragment>
+            ))
+          ) : (
+            <Hint marginBottom={10}>Δεν βρέθηκαν αποτελέσματα.</Hint>
+          )}
+        </Grid>
+        <BackToTop topLimitId="contents" id="back-to-top">
+          Επιστροφή στα Περιεχόμενα
+        </BackToTop>
+      </Main>
+      {placement !== 'none' && placement === 'right' && (
+        <Aside sticky={false}>
+          <NavigationList title={contents?.toc?.title} sections={sections} />
+        </Aside>
+      )}
+    </Container>
+  );
+});
+export default Faq;

package/src/Faq/slug.ts

@@ -0,0 +1,140 @@
+export function slug(text: string, maxWidth = 50): string {
+  // Greek to Latin character mapping
+  const greekToLatinMap: Record<string, string> = {
+    α: 'a',
+    β: 'b',
+    γ: 'g',
+    δ: 'd',
+    ε: 'e',
+    ζ: 'z',
+    η: 'i',
+    θ: 'th',
+    ι: 'i',
+    κ: 'k',
+    λ: 'l',
+    μ: 'm',
+    ν: 'n',
+    ξ: 'x',
+    ο: 'o',
+    π: 'p',
+    ρ: 'r',
+    σ: 's',
+    τ: 't',
+    υ: 'y',
+    φ: 'f',
+    χ: 'ch',
+    ψ: 'ps',
+    ω: 'o',
+    ά: 'a',
+    έ: 'e',
+    ί: 'i',
+    ό: 'o',
+    ύ: 'y',
+    ή: 'i',
+    ώ: 'o',
+    ς: 's',
+    ϊ: 'i',
+    ΰ: 'y',
+    ϋ: 'y',
+    ΐ: 'i',
+    Α: 'A',
+    Β: 'B',
+    Γ: 'G',
+    Δ: 'D',
+    Ε: 'E',
+    Ζ: 'Z',
+    Η: 'I',
+    Θ: 'TH',
+    Ι: 'I',
+    Κ: 'K',
+    Λ: 'L',
+    Μ: 'M',
+    Ν: 'N',
+    Ξ: 'X',
+    Ο: 'O',
+    Π: 'P',
+    Ρ: 'R',
+    Σ: 'S',
+    Τ: 'T',
+    Υ: 'Y',
+    Φ: 'F',
+    Χ: 'CH',
+    Ψ: 'PS',
+    Ω: 'O',
+    Ά: 'A',
+    Έ: 'E',
+    Ί: 'I',
+    Ό: 'O',
+    Ύ: 'Y',
+    Ή: 'I',
+    Ώ: 'O',
+    Ϊ: 'I',
+    Ϋ: 'Y',
+  };
+
+  // Convert Greek characters to Latin
+  const latinText = text
+    .split('')
+    .map((char) => greekToLatinMap[char] || char)
+    .join('');
+
+  // Convert to lowercase, replace spaces with hyphens, remove special characters
+  const processedText = latinText
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w-]+/g, '')
+    .replace(/--+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '');
+
+  // Calculate the available width for the slug (subtracting 1 for the hyphen and at least 8 for the ID)
+  // const availableWidth = Math.max(0, maxWidth - 9);
+
+  // Split the processed text into slug and remaining text for ID
+  let slug = processedText.substring(0, maxWidth);
+  const remainingText = processedText.substring(maxWidth);
+
+  // Remove trailing hyphens from the slug
+  slug = slug.replace(/-+$/, '');
+
+  // Generate ID from the remaining text
+  const id = generateIDFromText(remainingText);
+
+  // Combine the slug and ID
+  return `${slug}${id && '-'}${id}`;
+}
+function generateIDFromText(text: string): string {
+  // If text is empty or maxLength is 0 or less, return a default ID
+  if (!text) return '';
+
+  // Remove hyphens and take only alphanumeric characters
+  let processedText = text.replace(/-/g, '').replace(/[^a-z0-9]/g, '');
+
+  // If processed text is empty, use a default base
+  if (!processedText) processedText = 'default';
+
+  // Calculate a simple hash of the processed text
+  let hash = 0;
+  for (let i = 0; i < processedText.length; i++) {
+    const char = processedText.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+
+  // Convert hash to a positive number and then to base 36 (0-9 and a-z)
+  const id = Math.abs(hash).toString(36);
+
+  // Ensure the ID is at least 8 characters long, padding with '0' if necessary
+  return id;
+  // return id.padEnd(8, '0').substring(0, maxLength);
+}
+
+// Test the function
+// console.log(createSlugWithID('Καλημέρα κόσμε! Hello world!', 10));
+// console.log(createSlugWithID('Ελληνικά και English mixed', 80));
+// console.log(
+//   createSlugWithID(
+//     'Αυτό είναι ένα πολύ μεγάλο κείμενο για να δοκιμάσουμε το όριο πλάτους',
+//     90
+//   )
+// );

package/src/Faq/splitted.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Default } from '@digigov/react-modules/Faq/__stories__/Default';
+
+test('renders the Default', async ({ mount, page }) => {
+  await mount(
+    <Default />
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/Faq/utils.ts

@@ -0,0 +1,5 @@
+import { slug } from '@digigov/react-modules/Faq/slug';
+
+export const createId = (id: string | undefined, text: string) => {
+  return id ? id : slug(text); // Fallback to slug(text) when id is undefined
+};

package/src/FilteredResults/__stories__/Default.tsx

@@ -204,7 +204,7 @@ const initialFilters: InitialFiltersType = {
   rights: '',
 };
 
-export const Default = () => {
+export const Default = (_: any) => {
   const { search, results } = useStaticSearch<
     Record<string, any>,
     InitialFiltersType

package/src/FilteredResults/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All FilteredResults variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/FilteredResults/splitted.test.tsx

@@ -9,6 +9,10 @@ test('renders the Default', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/index.ts

@@ -1 +1,2 @@
 export * from '@digigov/react-modules/FilteredResults';
+export * from '@digigov/react-modules/Faq';

package/src/lazy.js

@@ -4,6 +4,7 @@ export default {
   'DrawerFilteredResults': lazy(() => import('@digigov/react-modules/FilteredResults').then((module) => ({ default: module['DrawerFilteredResults'] }))),
   'BlockFilteredResults': lazy(() => import('@digigov/react-modules/FilteredResults').then((module) => ({ default: module['BlockFilteredResults'] }))),
   'FilteredResults': lazy(() => import('@digigov/react-modules/FilteredResults').then((module) => ({ default: module['FilteredResults'] }))),
+  'Faq': lazy(() => import('@digigov/react-modules/Faq').then((module) => ({ default: module['Faq'] }))),
   'DataTable': lazy(() => import('@digigov/react-modules/FilteredResults/DataTable').then((module) => ({ default: module['DataTable'] }))),
   'FilterChips': lazy(() => import('@digigov/react-modules/FilteredResults/FilterChips').then((module) => ({ default: module['FilterChips'] }))),
   'FilterFields': lazy(() => import('@digigov/react-modules/FilteredResults/FilterFields').then((module) => ({ default: module['FilterFields'] })))

package/src/registry.js

@@ -1,5 +1,10 @@
 
 import * as _digigov_react_modules from "@digigov/react-modules";
+import * as _digigov_react_modules_Faq_Results from "@digigov/react-modules/Faq/Results";
+import * as _digigov_react_modules_Faq_hooks from "@digigov/react-modules/Faq/hooks";
+import * as _digigov_react_modules_Faq from "@digigov/react-modules/Faq";
+import * as _digigov_react_modules_Faq_slug from "@digigov/react-modules/Faq/slug";
+import * as _digigov_react_modules_Faq_utils from "@digigov/react-modules/Faq/utils";
 import * as _digigov_react_modules_FilteredResults_DataTable from "@digigov/react-modules/FilteredResults/DataTable";
 import * as _digigov_react_modules_FilteredResults_FilterChips from "@digigov/react-modules/FilteredResults/FilterChips";
 import * as _digigov_react_modules_FilteredResults_FilterFields from "@digigov/react-modules/FilteredResults/FilterFields";
@@ -25,6 +30,11 @@ function lazyImport(pkgImport) {
 }
 export default {
   '@digigov/react-modules': lazyImport(_digigov_react_modules),
+  '@digigov/react-modules/Faq/Results': lazyImport(_digigov_react_modules_Faq_Results),
+  '@digigov/react-modules/Faq/hooks': lazyImport(_digigov_react_modules_Faq_hooks),
+  '@digigov/react-modules/Faq': lazyImport(_digigov_react_modules_Faq),
+  '@digigov/react-modules/Faq/slug': lazyImport(_digigov_react_modules_Faq_slug),
+  '@digigov/react-modules/Faq/utils': lazyImport(_digigov_react_modules_Faq_utils),
   '@digigov/react-modules/FilteredResults/DataTable': lazyImport(_digigov_react_modules_FilteredResults_DataTable),
   '@digigov/react-modules/FilteredResults/FilterChips': lazyImport(_digigov_react_modules_FilteredResults_FilterChips),
   '@digigov/react-modules/FilteredResults/FilterFields': lazyImport(_digigov_react_modules_FilteredResults_FilterFields),