@lidofinance/ui-faq 0.38.0

package/README.md

@@ -0,0 +1,122 @@
+# @lidofinance/ui-faq
+
+FAQ UI components and parse utils.
+
+## Installation
+
+* React 17 || 18
+
+```bash
+yarn add @lidofinance/faq
+
+# and additional
+yarn add next@^12.3.0 styled-components@^5.3.5 @lidofinance/lido-ui@^3.6.1 axios@^1.5.0 cache-manager@^5.2.3
+
+# and warehouse packages
+yarn add @lidofinance/analytics-matomo@^0.37.0 @lidofinance/next-ui-primitives@^0.37.0
+```
+
+## Using
+
+There is SSR example (using `getStaticProps`), but also you can use `getFAQ` on client side inside any client component
+
+```tsx
+import { FC } from 'react';
+import { GetStaticProps } from 'next';
+import Head from 'next/head';
+import { FaqAccordion, getFAQ, FAQItem, PageFAQ } from '@lidofinance/ui-faq';
+import { serverAxios } from 'utilsApi';
+
+
+interface ExampleProps {
+  faqList: FAQItem[];
+}
+
+const IndexPage: FC<ExampleProps> = ({ faqList }) => (
+  <FaqAccordion faqList={faqList} />
+);
+
+export default IndexPage;
+
+export const getStaticProps: GetStaticProps<ExampleProps> = async () => {
+  let foundPage: PageFAQ | undefined;
+  const pageIdentification = 'index_page';
+
+  try {
+    const pages = await getFAQ(serverRuntimeConfig.faqContentUrl, {
+      // default axios instance without logger, metrics, timeout
+      axiosInstance: serverAxios, // or clientAxios
+      // cache default is true
+      cache: true,
+      // memoryCacheConfig default is undefined
+      memoryCacheConfig: { max: 100, ttl: 6 * 100 * 1000 },
+    });
+
+    // or custom axios and without cache
+    // const pages = await getFAQ(serverRuntimeConfig.faqContentUrl, {
+    //   axiosInstance: clientAxios,
+    //   cache: false,
+    // });
+
+    // or use internal FAQ pkg axios and use cache
+    // const pages = await getFAQ(serverRuntimeConfig.faqContentUrl);
+    
+    // bacause `getFAQ` returns data for all pages
+    foundPage = pages.find(
+      (page: PageFAQ) => page['identification'] === pageIdentification,
+    );
+  } catch {
+    // noop
+  }
+
+  return {
+    props: {
+      faqList: foundPage?.['faq'] ?? [],
+    },
+  };
+};
+```
+
+### Matomo analytics
+
+Client side example. Let's make with [matomo analytics](https://www.npmjs.com/package/@lidofinance/analytics-matomo)!
+
+```tsx
+// See: @lidofinance/analytics-matomo
+import { MATOMO_CLICK_EVENTS } from './matomoClickEvents';
+
+export const matomoEventMap = new Map();
+
+// Exact match required - 'https://lido.fi' or 'https://lido.fi/?ref=<ref>' not be working!
+matomoEventMap.set('https://lido.fi/', MATOMO_CLICK_EVENTS.faqLidoLandingLink);
+// Exact match required - 'example' or 'example/?ref=<ref>' not be working!
+matomoEventMap.set('/example', MATOMO_CLICK_EVENTS.faqExamplePageLocalLink);
+// Important: you should match `href` with `faqContentUrl` at source, not with `<FaqAccordion ... />` HTML output!
+
+const ExamplePage2: FC = () => {
+  const [foundPage, setFoundPage] = useState<PageFAQ | undefined>(undefined);
+
+  useEffect(() => {
+    void (async () => {
+      try {
+        const pageIdentification = 'example_page_2';
+        const pages = await getFAQ(dynamics.faqContentUrl);
+
+        setFoundPage(
+          pages.find(
+            (page: PageFAQ) => page['identification'] === pageIdentification,
+          ),
+        );
+      } catch {
+        // noop
+      }
+    })();
+  }, []);
+  
+  return (
+    <FaqAccordion faqList={faqList} matomoEventMap={matomoEventMap} />
+  )
+};
+
+export default ExamplePage2;
+```

package/README.mdx

@@ -0,0 +1,4 @@
+import { Markdown } from '@storybook/addon-docs';
+import ReadMe from './README.md?raw';
+
+<Markdown>{ReadMe}</Markdown>

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+import { FC } from "react";
+import { Axios } from "axios";
+import { MemoryConfig } from "cache-manager";
+import { PluggableList } from "unified";
+export type FAQItem = {
+    answer: string;
+    question: string;
+    questionId: string;
+};
+export type FAQAccordionOnActionProps = {
+    questionId: string;
+    question: string;
+    answer: string;
+    accordionIndex: number;
+};
+export type FAQAccordionOnLinkClickProps = FAQAccordionOnActionProps & {
+    linkContent: string;
+    linkHref?: string | undefined;
+};
+export type FAQAccordionProps = {
+    faqList?: FAQItem[] | undefined;
+    onLinkClick?: (props: FAQAccordionOnLinkClickProps) => void | undefined;
+    onQuestionOpenOrClose?: (props: FAQAccordionOnActionProps) => void | undefined;
+};
+export const isFAQItem: (obj: FAQItem) => obj is FAQItem;
+export const isFAQAccordionProps: (obj: any) => obj is FAQAccordionProps;
+export * from 'styled-components';
+export const FaqItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export const FaqAccordion: FC<FAQAccordionProps>;
+export const parseYamlFileWithMdContent: (md: string, remarkPlugins?: PluggableList) => Promise<{
+    content: string;
+    data: Record<string, any>;
+}>;
+export type PageFAQ = {
+    identification: string;
+    faq: FAQItem[];
+};
+export const isPageFAQ: (obj: PageFAQ) => obj is PageFAQ;
+export type GetFaqOptionsProps = {
+    axiosInstance: Axios;
+    cache?: boolean;
+    memoryCacheConfig?: MemoryConfig | undefined;
+};
+export const getFAQ: (faqUrl: string, { axiosInstance, cache, memoryCacheConfig }?: GetFaqOptionsProps) => Promise<PageFAQ[]>;
+
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;;;AAAA,sBAAsB;IACpB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wCAAwC;IACtC,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,cAAc,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,2CAA2C,yBAAyB,GAAG;IACrE,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC9B,CAAA;AAED,gCAAgC;IAC9B,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,SAAS,CAAA;IAC/B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,4BAA4B,KAAK,IAAI,GAAG,SAAS,CAAA;IACvE,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,IAAI,GAAG,SAAS,CAAA;CAC/E,CAAA;AAED,OAAO,MAAM,iBAAkB,OAAO,mBAErC,CAAA;AAED,OAAO,MAAM,2BAA4B,GAAG,6BAE3C,CAAA;AClBD,cAAc,mBAAmB,CAAA;ACVjC,OAAO,MAAM,gHAuBZ,CAAA;ACfD,OAAO,MAAM,cAAc,GAAG,iBAAiB,CAiD9C,CAAA;AMtCD,OAAO,MAAM,iCACP,MAAM,kBACM,aAAa,KAC5B,QAAQ;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,OAAO,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,CAQxD,CAAA;AAED,sBAAsB;IAAE,cAAc,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,OAAO,EAAE,CAAA;CAAE,CAAA;AAEhE,OAAO,MAAM,iBAAkB,OAAO,mBAErC,CAAA;AAED,iCAAiC;IAC/B,aAAa,EAAE,KAAK,CAAA;IACpB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,iBAAiB,CAAC,EAAE,YAAY,GAAG,SAAS,CAAA;CAC7C,CAAA;AAID,OAAO,MAAM,iBACH,MAAM,uEAEb,QAAQ,OAAO,EAAE,CA8BnB,CAAA","sources":["packages/ui/faq/src/src/components/faqAccordion/types.ts","packages/ui/faq/src/styledComponentsWrapper.ts","packages/ui/faq/src/src/components/faqAccordion/styles.tsx","packages/ui/faq/src/src/components/faqAccordion/faqAccordion.tsx","packages/ui/faq/src/src/components/faqAccordion/index.tsx","packages/ui/faq/src/src/components/index.ts","packages/ui/faq/src/src/utils/remarkPlugins/type.ts","packages/ui/faq/src/src/utils/remarkPlugins/getFrontmatter.ts","packages/ui/faq/src/src/utils/remarkPlugins/index.ts","packages/ui/faq/src/src/utils/index.ts","packages/ui/faq/src/src/index.ts","packages/ui/faq/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,"export * from './components'\nexport * from './utils'\n"],"names":[],"version":3,"file":"index.d.ts.map"}

package/dist/index.js

@@ -0,0 +1,236 @@
+import {jsx as $loPuo$jsx, Fragment as $loPuo$Fragment} from "react/jsx-runtime";
+import "react";
+import $loPuo$reactmarkdown from "react-markdown";
+import $loPuo$reacttotext from "react-to-text";
+import {LidoLink as $loPuo$LidoLink} from "@lidofinance/next-ui-primitives";
+import * as $loPuo$lidofinancelidoui from "@lidofinance/lido-ui";
+import $loPuo$styledcomponents from "styled-components";
+import $loPuo$axios from "axios";
+import {caching as $loPuo$caching} from "cache-manager";
+import {unified as $loPuo$unified} from "unified";
+import $loPuo$remarkparse from "remark-parse";
+import $loPuo$remarkstringify from "remark-stringify";
+import $loPuo$remarkfrontmatter from "remark-frontmatter";
+import $loPuo$remarkdirective from "remark-directive";
+import $loPuo$jsyaml from "js-yaml";
+
+function $parcel$exportWildcard(dest, source) {
+  Object.keys(source).forEach(function(key) {
+    if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
+      return;
+    }
+
+    Object.defineProperty(dest, key, {
+      enumerable: true,
+      get: function get() {
+        return source[key];
+      }
+    });
+  });
+
+  return dest;
+}
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+var $4e053a1b8b64ce9e$exports = {};
+var $49bd0fe341d564cb$exports = {};
+var $17df517d232bb386$exports = {};
+
+$parcel$export($17df517d232bb386$exports, "FaqAccordion", function () { return $17df517d232bb386$export$821fcbaf011feac1; });
+
+
+
+
+
+
+var $b871f2fb17bf3607$exports = {};
+
+$parcel$export($b871f2fb17bf3607$exports, "FaqItem", function () { return $b871f2fb17bf3607$export$eb463a824a473e05; });
+// Styled Components v5 has issues with ESM modules:
+// https://github.com/styled-components/styled-components/issues/115
+// https://github.com/rollup/rollup/issues/4438
+// It can be solved by using Styled Components v6, which is in beta ATM
+// But it will be better to stop using styled-components at all.
+// This is a temporary workaround, which seems to work well.
+
+// @ts-expect-error Property 'default' does not exist on type 'StyledInterface'.
+const $f7fa192b95611bbe$var$styled = (0, $loPuo$styledcomponents).default || (0, $loPuo$styledcomponents);
+var $f7fa192b95611bbe$export$2e2bcd8739ae039 = $f7fa192b95611bbe$var$styled;
+
+
+const $b871f2fb17bf3607$export$eb463a824a473e05 = (0, $f7fa192b95611bbe$export$2e2bcd8739ae039).div`
+  p {
+    margin: 0 0 1.6em;
+  }
+
+  :is(p, ul) + p,
+  p + :is(ul, ol) {
+    margin-top: -1.6em;
+  }
+
+  :is(ul, ol) > li {
+    margin-top: 0;
+    margin-bottom: 0;
+
+    & > p {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    text-decoration: none;
+  }
+`;
+
+
+const { Accordion: $17df517d232bb386$var$Accordion } = $loPuo$lidofinancelidoui;
+const $17df517d232bb386$export$821fcbaf011feac1 = ({ faqList: faqList, onLinkClick: onLinkClick, onQuestionOpenOrClose: onQuestionOpenOrClose })=>/*#__PURE__*/ (0, $loPuo$jsx)((0, $loPuo$Fragment), {
+        children: faqList?.map(({ questionId: questionId, question: question, answer: answer }, index)=>/*#__PURE__*/ (0, $loPuo$jsx)($17df517d232bb386$var$Accordion, {
+                defaultExpanded: index === 0,
+                summary: String(question),
+                onClick: ()=>{
+                    onQuestionOpenOrClose?.({
+                        questionId: questionId,
+                        question: question,
+                        answer: answer,
+                        accordionIndex: index
+                    });
+                },
+                children: /*#__PURE__*/ (0, $loPuo$jsx)((0, $b871f2fb17bf3607$export$eb463a824a473e05), {
+                    children: /*#__PURE__*/ (0, $loPuo$jsx)((0, $loPuo$reactmarkdown), {
+                        components: {
+                            a: ({ children: children, href: href, ...rest })=>{
+                                const linkContent = (0, $loPuo$reacttotext)(children);
+                                return /*#__PURE__*/ (0, $loPuo$jsx)((0, $loPuo$LidoLink), {
+                                    ...rest,
+                                    href: href ?? "#",
+                                    onClick: ()=>{
+                                        onLinkClick?.({
+                                            questionId: questionId,
+                                            question: question,
+                                            answer: answer,
+                                            accordionIndex: index,
+                                            linkContent: linkContent,
+                                            linkHref: href
+                                        });
+                                    },
+                                    children: linkContent
+                                });
+                            }
+                        },
+                        children: answer
+                    })
+                })
+            }, question))
+    });
+
+
+
+var $30e3952008c9e88b$exports = {};
+
+$parcel$export($30e3952008c9e88b$exports, "isFAQItem", function () { return $30e3952008c9e88b$export$cfc7e514f00a6e18; });
+$parcel$export($30e3952008c9e88b$exports, "isFAQAccordionProps", function () { return $30e3952008c9e88b$export$e9472c8e1e3c866b; });
+const $30e3952008c9e88b$export$cfc7e514f00a6e18 = (obj)=>{
+    return "answer" in obj && "question" in obj;
+};
+const $30e3952008c9e88b$export$e9472c8e1e3c866b = (obj)=>{
+    return Array.isArray(obj.faqList);
+};
+
+
+$parcel$exportWildcard($49bd0fe341d564cb$exports, $17df517d232bb386$exports);
+$parcel$exportWildcard($49bd0fe341d564cb$exports, $b871f2fb17bf3607$exports);
+$parcel$exportWildcard($49bd0fe341d564cb$exports, $30e3952008c9e88b$exports);
+
+
+$parcel$exportWildcard($4e053a1b8b64ce9e$exports, $49bd0fe341d564cb$exports);
+
+
+var $4d7a07a404732d40$exports = {};
+
+$parcel$export($4d7a07a404732d40$exports, "parseYamlFileWithMdContent", function () { return $4d7a07a404732d40$export$dd386c14013925ba; });
+$parcel$export($4d7a07a404732d40$exports, "isPageFAQ", function () { return $4d7a07a404732d40$export$5c49e5abe2bae48e; });
+$parcel$export($4d7a07a404732d40$exports, "getFAQ", function () { return $4d7a07a404732d40$export$24d135d299ddf6e6; });
+
+
+
+
+
+
+
+
+const $9f620ec94f086a5a$export$6e7a2400c9873c8e = ()=>(tree, file)=>{
+        const node = tree.children[0];
+        if (node?.type === "yaml") {
+            const data = (0, $loPuo$jsyaml).load(node.value);
+            file.data.frontmatter = data;
+            tree.children.splice(0, 1);
+        } else file.data.frontmatter = {};
+    };
+
+
+
+
+
+
+const $4d7a07a404732d40$var$ttlMs = 600000 /* 10 minutes */ ;
+const $4d7a07a404732d40$var$memoryCacheConfigDefault = {
+    max: 100,
+    ttl: $4d7a07a404732d40$var$ttlMs
+};
+let $4d7a07a404732d40$var$memoryCache;
+const $4d7a07a404732d40$var$getMemoryCacheInstance = async (memoryCacheConfig = $4d7a07a404732d40$var$memoryCacheConfigDefault)=>{
+    $4d7a07a404732d40$var$memoryCache ??= await (0, $loPuo$caching)("memory", memoryCacheConfig);
+    return $4d7a07a404732d40$var$memoryCache;
+};
+const $4d7a07a404732d40$export$dd386c14013925ba = async (md, remarkPlugins)=>{
+    const file = await (0, $loPuo$unified)().use((0, $loPuo$remarkparse)).use((0, $loPuo$remarkstringify)).use(remarkPlugins || []).process(md);
+    return {
+        content: String(file),
+        data: file.data
+    };
+};
+const $4d7a07a404732d40$export$5c49e5abe2bae48e = (obj)=>{
+    return "identification" in obj && "faq" in obj;
+};
+const $4d7a07a404732d40$var$faqOptionsDefault = {
+    axiosInstance: (0, $loPuo$axios),
+    cache: true
+};
+const $4d7a07a404732d40$export$24d135d299ddf6e6 = async (faqUrl, { axiosInstance: axiosInstance, cache: cache, memoryCacheConfig: memoryCacheConfig } = $4d7a07a404732d40$var$faqOptionsDefault)=>{
+    let memoryCacheInstance;
+    let rawFaqData;
+    if (cache) {
+        memoryCacheInstance = await $4d7a07a404732d40$var$getMemoryCacheInstance(memoryCacheConfig);
+        rawFaqData = await memoryCacheInstance.get(faqUrl);
+    }
+    if (!rawFaqData) {
+        rawFaqData = (await axiosInstance.get(faqUrl)).data;
+        if (cache && memoryCacheInstance) await memoryCacheInstance.set(faqUrl, rawFaqData, $4d7a07a404732d40$var$ttlMs);
+    }
+    // Temporary solution
+    // The CMS, while generating md, adds an '\_' between the text and
+    // the link, which is then replaced by 'nbsp;' (non-breaking space)
+    // and interferes correct content display
+    // To fix this, we replace '\_' with ' '
+    const fixedFileContent = rawFaqData.replace(/\\_\[/gm, " [").replace(/\)\\_/gm, ") ");
+    const { data: data } = await $4d7a07a404732d40$export$dd386c14013925ba(fixedFileContent, [
+        (0, $loPuo$remarkdirective),
+        [
+            (0, $loPuo$remarkfrontmatter),
+            [
+                "yaml"
+            ]
+        ],
+        (0, $9f620ec94f086a5a$export$6e7a2400c9873c8e)
+    ]);
+    return data?.frontmatter?.pages ?? [];
+};
+
+
+
+
+export {$17df517d232bb386$export$821fcbaf011feac1 as FaqAccordion, $b871f2fb17bf3607$export$eb463a824a473e05 as FaqItem, $30e3952008c9e88b$export$cfc7e514f00a6e18 as isFAQItem, $30e3952008c9e88b$export$e9472c8e1e3c866b as isFAQAccordionProps, $4d7a07a404732d40$export$dd386c14013925ba as parseYamlFileWithMdContent, $4d7a07a404732d40$export$5c49e5abe2bae48e as isPageFAQ, $4d7a07a404732d40$export$24d135d299ddf6e6 as getFAQ};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/ui/faq/src/index.ts","packages/ui/faq/src/components/index.ts","packages/ui/faq/src/components/faqAccordion/index.tsx","packages/ui/faq/src/components/faqAccordion/faqAccordion.tsx","packages/ui/faq/src/components/faqAccordion/styles.tsx","packages/ui/faq/styledComponentsWrapper.ts","packages/ui/faq/src/components/faqAccordion/types.ts","packages/ui/faq/src/utils/index.ts","packages/ui/faq/src/utils/remarkPlugins/index.ts","packages/ui/faq/src/utils/remarkPlugins/getFrontmatter.ts","packages/ui/faq/src/utils/remarkPlugins/type.ts"],"sourcesContent":["export * from './components'\nexport * from './utils'\n","export * from './faqAccordion'\n","export * from './faqAccordion'\nexport * from './styles'\nexport * from './types'\n","import React, { FC } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport reactToText from 'react-to-text'\nimport { LidoLink } from '@lidofinance/next-ui-primitives'\nimport * as LidoUI from '@lidofinance/lido-ui'\nconst { Accordion } = LidoUI\n\nimport { FAQAccordionProps } from './types'\nimport { FaqItem } from './styles'\n\nexport const FaqAccordion: FC<FAQAccordionProps> = ({ faqList, onLinkClick, onQuestionOpenOrClose }) => (\n  <>\n    {faqList?.map(({ questionId, question, answer }, index) => (\n      <Accordion\n        key={question}\n        defaultExpanded={index === 0}\n        summary={String(question)}\n        onClick={() => {\n          onQuestionOpenOrClose?.({\n            questionId,\n            question,\n            answer,\n            accordionIndex: index,\n          })\n        }}\n      >\n        <FaqItem>\n          <ReactMarkdown\n            components={{\n              a: ({ children, href, ...rest }) => {\n                const linkContent = reactToText(children)\n\n                return (\n                  <LidoLink\n                    {...rest}\n                    href={href ?? '#'}\n                    onClick={() => {\n                      onLinkClick?.({\n                        questionId,\n                        question,\n                        answer,\n                        accordionIndex: index,\n                        linkContent,\n                        linkHref: href,\n                      })\n                    }}\n                  >\n                    {linkContent}\n                  </LidoLink>\n                )\n              },\n            }}\n          >\n            {answer}\n          </ReactMarkdown>\n        </FaqItem>\n      </Accordion>\n    ))}\n  </>\n)\n","import styled from '../../../styledComponentsWrapper'\n\nexport const FaqItem = styled.div`\n  p {\n    margin: 0 0 1.6em;\n  }\n\n  :is(p, ul) + p,\n  p + :is(ul, ol) {\n    margin-top: -1.6em;\n  }\n\n  :is(ul, ol) > li {\n    margin-top: 0;\n    margin-bottom: 0;\n\n    & > p {\n      margin-top: 0;\n      margin-bottom: 0;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n`\n","// Styled Components v5 has issues with ESM modules:\n// https://github.com/styled-components/styled-components/issues/115\n// https://github.com/rollup/rollup/issues/4438\n// It can be solved by using Styled Components v6, which is in beta ATM\n// But it will be better to stop using styled-components at all.\n// This is a temporary workaround, which seems to work well.\n\nimport _styled, { StyledInterface } from 'styled-components'\n\n// @ts-expect-error Property 'default' does not exist on type 'StyledInterface'.\nconst styled: StyledInterface = _styled.default || _styled\n\nexport * from 'styled-components'\nexport default styled\n","export type FAQItem = {\n  answer: string\n  question: string\n  questionId: string\n}\n\nexport type FAQAccordionOnActionProps = {\n  questionId: string\n  question: string\n  answer: string\n  accordionIndex: number\n}\n\nexport type FAQAccordionOnLinkClickProps = FAQAccordionOnActionProps & {\n  linkContent: string\n  linkHref?: string | undefined\n}\n\nexport type FAQAccordionProps = {\n  faqList?: FAQItem[] | undefined\n  onLinkClick?: (props: FAQAccordionOnLinkClickProps) => void | undefined\n  onQuestionOpenOrClose?: (props: FAQAccordionOnActionProps) => void | undefined\n}\n\nexport const isFAQItem = (obj: FAQItem): obj is FAQItem => {\n  return 'answer' in obj && 'question' in obj\n}\n\nexport const isFAQAccordionProps = (obj: any): obj is FAQAccordionProps => {\n  return Array.isArray(obj.faqList)\n}\n","import axios, { Axios } from 'axios'\nimport { caching, MemoryCache, MemoryConfig } from 'cache-manager'\nimport { unified, PluggableList } from 'unified'\nimport remarkParse from 'remark-parse'\nimport remarkStringify from 'remark-stringify'\nimport remarkFrontmatter from 'remark-frontmatter'\nimport remarkDirective from 'remark-directive'\n\nimport { FAQItem } from '../components'\nimport { getFrontmatter } from './remarkPlugins'\n\nconst ttlMs = 6 * 100 * 1000 /* 10 minutes */\nconst memoryCacheConfigDefault = { max: 100, ttl: ttlMs }\nlet memoryCache: MemoryCache\n\nconst getMemoryCacheInstance = async (memoryCacheConfig: MemoryConfig = memoryCacheConfigDefault) => {\n  memoryCache ??= await caching('memory', memoryCacheConfig)\n\n  return memoryCache\n}\n\nexport const parseYamlFileWithMdContent = async (\n  md: string,\n  remarkPlugins?: PluggableList,\n): Promise<{ content: string; data: Record<string, any> }> => {\n  const file = await unified()\n    .use(remarkParse)\n    .use(remarkStringify)\n    .use(remarkPlugins || [])\n    .process(md)\n\n  return { content: String(file), data: file.data }\n}\n\nexport type PageFAQ = { identification: string; faq: FAQItem[] }\n\nexport const isPageFAQ = (obj: PageFAQ): obj is PageFAQ => {\n  return 'identification' in obj && 'faq' in obj\n}\n\nexport type GetFaqOptionsProps = {\n  axiosInstance: Axios\n  cache?: boolean\n  memoryCacheConfig?: MemoryConfig | undefined\n}\n\nconst faqOptionsDefault: GetFaqOptionsProps = { axiosInstance: axios, cache: true }\n\nexport const getFAQ = async (\n  faqUrl: string,\n  { axiosInstance, cache, memoryCacheConfig } = faqOptionsDefault,\n): Promise<PageFAQ[]> => {\n  let memoryCacheInstance: MemoryCache | undefined\n  let rawFaqData: string | undefined\n\n  if (cache) {\n    memoryCacheInstance = await getMemoryCacheInstance(memoryCacheConfig)\n    rawFaqData = await memoryCacheInstance.get(faqUrl)\n  }\n\n  if (!rawFaqData) {\n    rawFaqData = (await axiosInstance.get(faqUrl)).data as string\n\n    if (cache && memoryCacheInstance) {\n      await memoryCacheInstance.set(faqUrl, rawFaqData, ttlMs)\n    }\n  }\n\n  // Temporary solution\n  // The CMS, while generating md, adds an '\\_' between the text and\n  // the link, which is then replaced by 'nbsp;' (non-breaking space)\n  // and interferes correct content display\n  // To fix this, we replace '\\_' with ' '\n  const fixedFileContent = rawFaqData.replace(/\\\\_\\[/gm, ' [').replace(/\\)\\\\_/gm, ') ')\n\n  const { data } = await parseYamlFileWithMdContent(fixedFileContent, [\n    remarkDirective,\n    [remarkFrontmatter, ['yaml']],\n    getFrontmatter,\n  ])\n  return data?.frontmatter?.pages ?? []\n}\n","export * from './getFrontmatter'\nexport * from './type'\n","import yaml from 'js-yaml'\n\nimport { Tree, VFileWithOutput } from './type'\n\n// eslint-disable-next-line unicorn/consistent-function-scoping\nexport const getFrontmatter = () => (tree: Tree, file: VFileWithOutput<null>) => {\n  const node = tree.children[0]\n\n  if (node?.type === 'yaml') {\n    const data = yaml.load(node.value)\n    file.data.frontmatter = data\n    tree.children.splice(0, 1)\n  } else {\n    file.data.frontmatter = {}\n  }\n}\n","import { Root, Parent, Content } from 'mdast'\nimport { VFileWithOutput } from 'unified'\n\nexport type Tree = Root\n\nexport type Node = Parent\n\nexport type { Content, VFileWithOutput }\n"],"names":[],"version":3,"file":"index.js.map"}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@lidofinance/ui-faq",
+  "description": "FAQ",
+  "repository": "https://github.com/lidofinance/warehouse.git",
+  "homepage": "https://github.com/lidofinance/warehouse/tree/main/packages/ui/faq",
+  "bugs": {
+    "url": "https://github.com/lidofinance/warehouse/issues"
+  },
+  "license": "MIT",
+  "version": "0.38.0",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">= 16",
+    "browsers": "> 0.5%, last 2 versions, not dead"
+  },
+  "type": "module",
+  "source": "./src/index.ts",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "parcel build",
+    "lint": "eslint . && prettier --check src",
+    "lint:fix": "eslint --fix . && prettier --check src --write",
+    "types": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@lidofinance/lido-ui": "^3.7.3",
+    "@lidofinance/next-ui-primitives": "~0.38.0",
+    "axios": "^1.5.0",
+    "cache-manager": "^5.2.3",
+    "react": "17 || 18",
+    "styled-components": "^5.3.5"
+  },
+  "devDependencies": {
+    "@lidofinance/config-prettier": "~0.38.0",
+    "@lidofinance/lido-ui": "^3.7.3",
+    "@lidofinance/next-ui-primitives": "~0.38.0",
+    "@storybook/react": "^7.0.7",
+    "@types/js-yaml": "^4.0.5",
+    "@types/mdast": "^3.0.11",
+    "@types/react": "^18.0.25",
+    "@types/styled-components": "^5.1.26",
+    "axios": "^1.5.0",
+    "cache-manager": "^5.2.3",
+    "react-to-text": "^2.0.1"
+  },
+  "dependencies": {
+    "js-yaml": "^4.1.0",
+    "mdast": "^3.0.0",
+    "react-markdown": "^8.0.7",
+    "react-to-text": "^2.0.1",
+    "remark-directive": "^2.0.1",
+    "remark-frontmatter": "^4.0.1",
+    "remark-parse": "^10.0.2",
+    "remark-stringify": "^10.0.3",
+    "unified": "^10.1.2"
+  }
+}