@nodeblocks/frontend-faq-block 0.0.2

package/README.md

@@ -0,0 +1,57 @@
+## 🚀 Nodeblocks Frontend Starter Kit
+
+Welcome to the Nodeblocks Frontend Starter Kit! 🎉 This kit is designed to make building frontend libraries in React super easy, helping you streamline your development workflow with minimal fuss. Let's dive in! 🤿
+
+### ✨ Features
+- **🚀 Bundling with Rollup:** Get a clean, minimalistic approach to bundling your JavaScript files for smoother frontend development.
+- **💙 TypeScript Support:** We've included a pre-configured `tsconfig.json` to ensure your TypeScript setup is strict, efficient, and ready to go.
+- **⚙️ Peer Dependencies:** Keep bundle sizes lean with React and React DOM set as peer dependencies.
+- **🎨 CSS Support:** Easily import and process CSS files, giving you more control over your styles.
+
+### 🛠️ How to Use
+1. **Clone this repository** 🌀:
+   ```bash
+   git clone <repository-url>
+   cd <repository-directory>
+   ```
+
+2. **Install dependencies** 📦:
+   ```bash
+   npm install
+   ```
+
+3. **Start development** 🛠️:
+   ```bash
+   npm run watch
+   ```
+
+4. **Build for production** 🏗️:
+   ```bash
+   npm run build
+   ```
+
+### 🧪 How to Test
+
+The `test` folder contains examples that demonstrate how to use the libraries you create with this starter kit. These examples show compatibility with various bundlers, such as:
+
+- **Create React App** (Webpack)
+- **Vite** ⚡
+- **Rollup** (itself) (Coming soon) 🔄
+- **Parcel** (Coming soon) 📦
+
+This ensures Nodeblocks libraries integrate seamlessly with different workflows. 🛠️✨
+
+**Before running each project make sure you run `npm link`:**
+
+1. In the root of this project:
+   ```bash
+   npm link
+   ```
+2. In the test project you want to run:
+   ```bash
+   npm i
+   npm link @basaldev/frontend-starter-kit
+   ```
+(Note that in real life your library would not be called frontend-starter-kit.)
+
+3. Then you can follow your usual workflow either with **Create React App** (`npm start`) or with Vite (`npm run dev`). This will give you a development environment where whenever you change your library it will be available in your test project.

package/dist/blocks.d.ts

@@ -0,0 +1,17 @@
+import { DefaultBlocks, FAQListItem } from './types';
+export declare function FAQTitle({ title, subtitle }: {
+    title: string;
+    subtitle: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FAQItem({ item, index, activeIndex, toggleAccordion, ChevronIcon }: {
+    item: FAQListItem;
+    index: number;
+    activeIndex: number | null;
+    toggleAccordion: (index: number) => void;
+    ChevronIcon: React.FC<{
+        direction: string;
+    }>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const defaultOptions: {};
+export declare const defaultBlocks: DefaultBlocks;
+//# sourceMappingURL=blocks.d.ts.map

package/dist/blocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../src/blocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAiCpD,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,2CAOhF;AACD,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,eAAe,EACf,WAAW,EAAE,EAAE;IACb,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAC7C,2CAsBF;AAED,eAAO,MAAM,cAAc,IAAK,CAAA;AAEhC,eAAO,MAAM,aAAa,EAAE,aAI3B,CAAC"}

package/dist/className.d.ts

@@ -0,0 +1,9 @@
+type ClassName = string | ClassName[] | undefined | null;
+/**
+ * Utility function to join class names together, ignoring undefined or nil values.
+ * @param classes - The class names to join.
+ * @returns The joined class names.
+ */
+export declare function classNames(...classes: ClassName[]): string;
+export {};
+//# sourceMappingURL=className.d.ts.map

package/dist/className.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"className.d.ts","sourceRoot":"","sources":["../src/className.tsx"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAE1D"}

package/dist/faq.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './faq.css';
+import { FAQProps } from './types';
+export declare const FAQ: React.FC<FAQProps>;
+export default FAQ;
+//# sourceMappingURL=faq.d.ts.map

package/dist/faq.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"faq.d.ts","sourceRoot":"","sources":["../src/faq.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,WAAW,CAAC;AAGnB,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGnC,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CA+BlC,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/dist/index.cjs.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".nbb-faq-accordion {\n  --color-object-accent-primary: #006EAD;\n  --color-object-accent-primary-emphasis: #006EAD;\n  --border-radius-4: 8px;\n  --color-text-mid-emphasis: #1D1E20;\n  --color-surface-secondary: #d1d1d1;\n  --color-surface-primary: #fff;\n\n  background-color: var(--color-surface-primary);\n  padding: 16px;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n.nbb-faq-heading {\n  color: var(--color-text-mid-emphasis);\n  margin-bottom: 16px;\n  text-align: center;\n}\n\n.nbb-faq-heading h2 {\n  margin: 0;\n  font-size: 25px;\n}\n\n.nbb-faq-heading h3 {\n  color: var(--color-object-accent-primary);\n  margin: 0 0 8px 0;\n  font-size: 18px;\n}\n\n.nbb-faq-item {\n  padding: 16px 0px;\n  margin-bottom: 8px;\n  overflow: hidden;\n  border-top: 1px solid var(--color-surface-secondary);\n  background-color: transparent;\n}\n\n.nbb-faq-question {\n  background-color: transparent;\n  color: var(--color-text-mid-emphasis);\n  padding: 12px 16px;\n  width: 100%;\n  border: none;\n  font-size: 18px;\n  font-weight: bold;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n\n.nbb-faq-question:focus {\n  outline: none;\n}\n\n.nbb-faq-header {\n  display: flex;\n  justify-content: flex-start;\n  gap: 16px;\n  text-align: left;\n}\n\n.nbb-question-mark {\n  align-self: center;\n  color: var(--color-object-accent-primary);\n  width: 24px;\n  height: 24px;\n}\n\n.nbb-faq-answer {\n  background-color: var(--color-surface-primary);\n  color: var(--color-text-mid-emphasis);\n  padding: 12px 16px;\n  transition: all 0.3s;\n  text-align: left;\n}\n";
+styleInject(css_248z);
+
+function DefaultChevronIcon({ direction }) {
+    return direction === 'up' ? (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M7.41 15.59L12 11L16.59 15.59L18 14.17L12 8.17L6 14.17L7.41 15.59Z", fill: "#737D90" }) })) : (jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M7.41 8.41L12 13L16.59 8.41L18 9.83L12 15.83L6 9.83L7.41 8.41Z", fill: "#737D90" }) }));
+}
+function FAQTitle({ title, subtitle }) {
+    return (jsxRuntime.jsxs("div", { className: "nbb-faq-heading", children: [jsxRuntime.jsx("h3", { children: title }), jsxRuntime.jsx("h2", { children: subtitle })] }));
+}
+function FAQItem({ item, index, activeIndex, toggleAccordion, ChevronIcon }) {
+    return (jsxRuntime.jsxs("div", { className: "nbb-faq-item", children: [jsxRuntime.jsxs("button", { className: `nbb-faq-question ${activeIndex === index ? 'active' : ''}`, onClick: () => toggleAccordion(index), children: [jsxRuntime.jsxs("div", { className: "nbb-faq-header", children: [jsxRuntime.jsx("span", { className: "nbb-question-mark", children: "Q." }), jsxRuntime.jsx("span", { children: item.question })] }), jsxRuntime.jsx("span", { className: "nbb-faq-toggle", children: jsxRuntime.jsx(ChevronIcon, { direction: `${activeIndex === index ? 'up' : 'down'}` }) })] }), activeIndex === index && (jsxRuntime.jsx("div", { className: "nbb-faq-answer", children: jsxRuntime.jsx("p", { children: item.answer }) }))] }));
+}
+const defaultOptions = {};
+const defaultBlocks = {
+    FAQTitle: FAQTitle,
+    FAQItem: FAQItem,
+    FAQChevronIcon: DefaultChevronIcon
+};
+
+/**
+ * Sets the blocks by merging default blocks with custom blocks provided by the children function.
+ *
+ * @param defaultBlocks - The default blocks to be used.
+ * @param children - An optional function that returns custom blocks and arguments.
+ * @param args - Additional unknown arguments.
+ * @returns An object containing the merged blocks and additional arguments.
+ */
+function setBlocks(defaultBlocks, defaultOptions, children) {
+    const results = children
+        ? children({ defaultBlocks, ...defaultOptions })
+        : { blocks: {}, ...defaultOptions };
+    const { blocks: customBlocks = {} } = results;
+    return {
+        ...results,
+        blocks: Object.fromEntries(Object.entries(defaultBlocks).map(([key, defaultComponent]) => [
+            key,
+            customBlocks[key] || defaultComponent,
+        ])),
+    };
+}
+
+/**
+ * Utility function to join class names together, ignoring undefined or nil values.
+ * @param classes - The class names to join.
+ * @returns The joined class names.
+ */
+function classNames(...classes) {
+    return classes.flat().filter(Boolean).join(' ');
+}
+
+const FAQ = ({ className, title, subtitle, questionsAndAnswers, children, }) => {
+    const [activeIndex, setActiveIndex] = react.useState(null);
+    const toggleAccordion = (index) => {
+        setActiveIndex(activeIndex === index ? null : index);
+    };
+    const { blocks } = setBlocks(defaultBlocks, defaultOptions, children);
+    const { FAQItem, FAQTitle, FAQChevronIcon } = blocks;
+    return (jsxRuntime.jsxs("div", { className: classNames('nbb-faq-accordion', className), children: [jsxRuntime.jsx(FAQTitle, { title: title, subtitle: subtitle }), questionsAndAnswers.map((item, index) => (jsxRuntime.jsx(FAQItem, { item: item, index: index, activeIndex: activeIndex, toggleAccordion: toggleAccordion, ChevronIcon: FAQChevronIcon }, index)))] }));
+};
+
+exports.FAQ = FAQ;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/blocks.tsx","../src/lib.ts","../src/className.tsx","../src/faq.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import { DefaultBlocks, FAQListItem } from './types'\n\nfunction DefaultChevronIcon({ direction }: { direction: string }) {\n  return direction === 'up' ? (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7.41 15.59L12 11L16.59 15.59L18 14.17L12 8.17L6 14.17L7.41 15.59Z\"\n        fill=\"#737D90\"\n      />\n    </svg>\n  ) : (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7.41 8.41L12 13L16.59 8.41L18 9.83L12 15.83L6 9.83L7.41 8.41Z\"\n        fill=\"#737D90\"\n      />\n    </svg>\n  );\n}\n\n\nexport function FAQTitle({ title, subtitle }: { title: string; subtitle: string }) {\n  return (\n    <div className=\"nbb-faq-heading\">\n      <h3>{title}</h3>\n      <h2>{subtitle}</h2>\n    </div>\n  )\n}\nexport function FAQItem({\n  item,\n  index,\n  activeIndex, \n  toggleAccordion,\n  ChevronIcon }: {\n    item: FAQListItem;\n    index: number;\n    activeIndex: number | null;\n    toggleAccordion: (index: number) => void;\n    ChevronIcon: React.FC<{ direction: string }>\n  }) {\n  return (\n    <div className=\"nbb-faq-item\">\n      <button\n        className={`nbb-faq-question ${activeIndex === index ? 'active' : ''}`}\n        onClick={() => toggleAccordion(index)}\n      >\n        <div className=\"nbb-faq-header\">\n          <span className=\"nbb-question-mark\">Q.</span>\n          <span>{item.question}</span>\n        </div>\n        <span className=\"nbb-faq-toggle\">\n          <ChevronIcon direction={`${activeIndex === index ? 'up' : 'down'}`} />\n        </span>\n      </button>\n      {activeIndex === index && (\n        <div className=\"nbb-faq-answer\">\n          <p>{item.answer}</p>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const defaultOptions = {}\n\nexport const defaultBlocks: DefaultBlocks = {\n  FAQTitle: FAQTitle,\n  FAQItem: FAQItem,\n  FAQChevronIcon: DefaultChevronIcon\n};\n","import { DefaultBlocks, DefaultOptions, ChildrenProps } from './types';\n\n/**\n * Sets the blocks by merging default blocks with custom blocks provided by the children function.\n *\n * @param defaultBlocks - The default blocks to be used.\n * @param children - An optional function that returns custom blocks and arguments.\n * @param args - Additional unknown arguments.\n * @returns An object containing the merged blocks and additional arguments.\n */\n\nexport function setBlocks(\n  defaultBlocks: DefaultBlocks,\n  defaultOptions: DefaultOptions,\n  children?: (props: ChildrenProps) => DefaultOptions & {\n    blocks: { [x: string]: any };\n  },\n) {\n  const results = children\n    ? children({ defaultBlocks, ...defaultOptions })\n    : { blocks: {}, ...defaultOptions };\n  const {\n    blocks: customBlocks = {}\n  } = results;\n  return {\n    ...results,\n    blocks: Object.fromEntries(\n      Object.entries(defaultBlocks).map(([key, defaultComponent]) => [\n        key,\n        customBlocks[key] || defaultComponent,\n      ])\n    ),\n  };\n}\n\ntype ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n  return classes.flat().filter(Boolean).join(' ');\n}","type ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n    return classes.flat().filter(Boolean).join(' ');\n}\n","import React, { useState } from 'react';\nimport './faq.css';\nimport { defaultBlocks, defaultOptions } from './blocks';\nimport { setBlocks } from './lib';\nimport { FAQProps } from './types';\nimport { classNames } from './className';\n\nexport const FAQ: React.FC<FAQProps> = ({\n  className,\n  title,\n  subtitle,\n  questionsAndAnswers,\n  children,\n}) => {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const toggleAccordion = (index: number) => {\n    setActiveIndex(activeIndex === index ? null : index);\n  };\n\n  const { blocks } = setBlocks(defaultBlocks, defaultOptions, children);\n  const { FAQItem, FAQTitle, FAQChevronIcon } = blocks;\n\n  return (\n    <div className={classNames('nbb-faq-accordion', className)}>\n      <FAQTitle title={title} subtitle={subtitle} />\n      {questionsAndAnswers.map((item, index) => (\n        <FAQItem\n          key={index}\n          item={item}\n          index={index}\n          activeIndex={activeIndex}\n          toggleAccordion={toggleAccordion}\n          ChevronIcon={FAQChevronIcon}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport default FAQ;\n"],"names":["_jsx","_jsxs","useState"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FAQ } from "./faq";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC"}

package/dist/index.esm.js

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".nbb-faq-accordion {\n  --color-object-accent-primary: #006EAD;\n  --color-object-accent-primary-emphasis: #006EAD;\n  --border-radius-4: 8px;\n  --color-text-mid-emphasis: #1D1E20;\n  --color-surface-secondary: #d1d1d1;\n  --color-surface-primary: #fff;\n\n  background-color: var(--color-surface-primary);\n  padding: 16px;\n  max-width: 600px;\n  margin: 0 auto;\n}\n\n.nbb-faq-heading {\n  color: var(--color-text-mid-emphasis);\n  margin-bottom: 16px;\n  text-align: center;\n}\n\n.nbb-faq-heading h2 {\n  margin: 0;\n  font-size: 25px;\n}\n\n.nbb-faq-heading h3 {\n  color: var(--color-object-accent-primary);\n  margin: 0 0 8px 0;\n  font-size: 18px;\n}\n\n.nbb-faq-item {\n  padding: 16px 0px;\n  margin-bottom: 8px;\n  overflow: hidden;\n  border-top: 1px solid var(--color-surface-secondary);\n  background-color: transparent;\n}\n\n.nbb-faq-question {\n  background-color: transparent;\n  color: var(--color-text-mid-emphasis);\n  padding: 12px 16px;\n  width: 100%;\n  border: none;\n  font-size: 18px;\n  font-weight: bold;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n\n.nbb-faq-question:focus {\n  outline: none;\n}\n\n.nbb-faq-header {\n  display: flex;\n  justify-content: flex-start;\n  gap: 16px;\n  text-align: left;\n}\n\n.nbb-question-mark {\n  align-self: center;\n  color: var(--color-object-accent-primary);\n  width: 24px;\n  height: 24px;\n}\n\n.nbb-faq-answer {\n  background-color: var(--color-surface-primary);\n  color: var(--color-text-mid-emphasis);\n  padding: 12px 16px;\n  transition: all 0.3s;\n  text-align: left;\n}\n";
+styleInject(css_248z);
+
+function DefaultChevronIcon({ direction }) {
+    return direction === 'up' ? (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M7.41 15.59L12 11L16.59 15.59L18 14.17L12 8.17L6 14.17L7.41 15.59Z", fill: "#737D90" }) })) : (jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M7.41 8.41L12 13L16.59 8.41L18 9.83L12 15.83L6 9.83L7.41 8.41Z", fill: "#737D90" }) }));
+}
+function FAQTitle({ title, subtitle }) {
+    return (jsxs("div", { className: "nbb-faq-heading", children: [jsx("h3", { children: title }), jsx("h2", { children: subtitle })] }));
+}
+function FAQItem({ item, index, activeIndex, toggleAccordion, ChevronIcon }) {
+    return (jsxs("div", { className: "nbb-faq-item", children: [jsxs("button", { className: `nbb-faq-question ${activeIndex === index ? 'active' : ''}`, onClick: () => toggleAccordion(index), children: [jsxs("div", { className: "nbb-faq-header", children: [jsx("span", { className: "nbb-question-mark", children: "Q." }), jsx("span", { children: item.question })] }), jsx("span", { className: "nbb-faq-toggle", children: jsx(ChevronIcon, { direction: `${activeIndex === index ? 'up' : 'down'}` }) })] }), activeIndex === index && (jsx("div", { className: "nbb-faq-answer", children: jsx("p", { children: item.answer }) }))] }));
+}
+const defaultOptions = {};
+const defaultBlocks = {
+    FAQTitle: FAQTitle,
+    FAQItem: FAQItem,
+    FAQChevronIcon: DefaultChevronIcon
+};
+
+/**
+ * Sets the blocks by merging default blocks with custom blocks provided by the children function.
+ *
+ * @param defaultBlocks - The default blocks to be used.
+ * @param children - An optional function that returns custom blocks and arguments.
+ * @param args - Additional unknown arguments.
+ * @returns An object containing the merged blocks and additional arguments.
+ */
+function setBlocks(defaultBlocks, defaultOptions, children) {
+    const results = children
+        ? children({ defaultBlocks, ...defaultOptions })
+        : { blocks: {}, ...defaultOptions };
+    const { blocks: customBlocks = {} } = results;
+    return {
+        ...results,
+        blocks: Object.fromEntries(Object.entries(defaultBlocks).map(([key, defaultComponent]) => [
+            key,
+            customBlocks[key] || defaultComponent,
+        ])),
+    };
+}
+
+/**
+ * Utility function to join class names together, ignoring undefined or nil values.
+ * @param classes - The class names to join.
+ * @returns The joined class names.
+ */
+function classNames(...classes) {
+    return classes.flat().filter(Boolean).join(' ');
+}
+
+const FAQ = ({ className, title, subtitle, questionsAndAnswers, children, }) => {
+    const [activeIndex, setActiveIndex] = useState(null);
+    const toggleAccordion = (index) => {
+        setActiveIndex(activeIndex === index ? null : index);
+    };
+    const { blocks } = setBlocks(defaultBlocks, defaultOptions, children);
+    const { FAQItem, FAQTitle, FAQChevronIcon } = blocks;
+    return (jsxs("div", { className: classNames('nbb-faq-accordion', className), children: [jsx(FAQTitle, { title: title, subtitle: subtitle }), questionsAndAnswers.map((item, index) => (jsx(FAQItem, { item: item, index: index, activeIndex: activeIndex, toggleAccordion: toggleAccordion, ChevronIcon: FAQChevronIcon }, index)))] }));
+};
+
+export { FAQ };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/blocks.tsx","../src/lib.ts","../src/className.tsx","../src/faq.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import { DefaultBlocks, FAQListItem } from './types'\n\nfunction DefaultChevronIcon({ direction }: { direction: string }) {\n  return direction === 'up' ? (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7.41 15.59L12 11L16.59 15.59L18 14.17L12 8.17L6 14.17L7.41 15.59Z\"\n        fill=\"#737D90\"\n      />\n    </svg>\n  ) : (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7.41 8.41L12 13L16.59 8.41L18 9.83L12 15.83L6 9.83L7.41 8.41Z\"\n        fill=\"#737D90\"\n      />\n    </svg>\n  );\n}\n\n\nexport function FAQTitle({ title, subtitle }: { title: string; subtitle: string }) {\n  return (\n    <div className=\"nbb-faq-heading\">\n      <h3>{title}</h3>\n      <h2>{subtitle}</h2>\n    </div>\n  )\n}\nexport function FAQItem({\n  item,\n  index,\n  activeIndex, \n  toggleAccordion,\n  ChevronIcon }: {\n    item: FAQListItem;\n    index: number;\n    activeIndex: number | null;\n    toggleAccordion: (index: number) => void;\n    ChevronIcon: React.FC<{ direction: string }>\n  }) {\n  return (\n    <div className=\"nbb-faq-item\">\n      <button\n        className={`nbb-faq-question ${activeIndex === index ? 'active' : ''}`}\n        onClick={() => toggleAccordion(index)}\n      >\n        <div className=\"nbb-faq-header\">\n          <span className=\"nbb-question-mark\">Q.</span>\n          <span>{item.question}</span>\n        </div>\n        <span className=\"nbb-faq-toggle\">\n          <ChevronIcon direction={`${activeIndex === index ? 'up' : 'down'}`} />\n        </span>\n      </button>\n      {activeIndex === index && (\n        <div className=\"nbb-faq-answer\">\n          <p>{item.answer}</p>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const defaultOptions = {}\n\nexport const defaultBlocks: DefaultBlocks = {\n  FAQTitle: FAQTitle,\n  FAQItem: FAQItem,\n  FAQChevronIcon: DefaultChevronIcon\n};\n","import { DefaultBlocks, DefaultOptions, ChildrenProps } from './types';\n\n/**\n * Sets the blocks by merging default blocks with custom blocks provided by the children function.\n *\n * @param defaultBlocks - The default blocks to be used.\n * @param children - An optional function that returns custom blocks and arguments.\n * @param args - Additional unknown arguments.\n * @returns An object containing the merged blocks and additional arguments.\n */\n\nexport function setBlocks(\n  defaultBlocks: DefaultBlocks,\n  defaultOptions: DefaultOptions,\n  children?: (props: ChildrenProps) => DefaultOptions & {\n    blocks: { [x: string]: any };\n  },\n) {\n  const results = children\n    ? children({ defaultBlocks, ...defaultOptions })\n    : { blocks: {}, ...defaultOptions };\n  const {\n    blocks: customBlocks = {}\n  } = results;\n  return {\n    ...results,\n    blocks: Object.fromEntries(\n      Object.entries(defaultBlocks).map(([key, defaultComponent]) => [\n        key,\n        customBlocks[key] || defaultComponent,\n      ])\n    ),\n  };\n}\n\ntype ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n  return classes.flat().filter(Boolean).join(' ');\n}","type ClassName = string | ClassName[] | undefined | null;\n\n/**\n * Utility function to join class names together, ignoring undefined or nil values.\n * @param classes - The class names to join.\n * @returns The joined class names.\n */\nexport function classNames(...classes: ClassName[]): string {\n    return classes.flat().filter(Boolean).join(' ');\n}\n","import React, { useState } from 'react';\nimport './faq.css';\nimport { defaultBlocks, defaultOptions } from './blocks';\nimport { setBlocks } from './lib';\nimport { FAQProps } from './types';\nimport { classNames } from './className';\n\nexport const FAQ: React.FC<FAQProps> = ({\n  className,\n  title,\n  subtitle,\n  questionsAndAnswers,\n  children,\n}) => {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const toggleAccordion = (index: number) => {\n    setActiveIndex(activeIndex === index ? null : index);\n  };\n\n  const { blocks } = setBlocks(defaultBlocks, defaultOptions, children);\n  const { FAQItem, FAQTitle, FAQChevronIcon } = blocks;\n\n  return (\n    <div className={classNames('nbb-faq-accordion', className)}>\n      <FAQTitle title={title} subtitle={subtitle} />\n      {questionsAndAnswers.map((item, index) => (\n        <FAQItem\n          key={index}\n          item={item}\n          index={index}\n          activeIndex={activeIndex}\n          toggleAccordion={toggleAccordion}\n          ChevronIcon={FAQChevronIcon}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport default FAQ;\n"],"names":["_jsx","_jsxs"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/lib.d.ts

@@ -0,0 +1,27 @@
+import { DefaultBlocks, DefaultOptions, ChildrenProps } from './types';
+/**
+ * Sets the blocks by merging default blocks with custom blocks provided by the children function.
+ *
+ * @param defaultBlocks - The default blocks to be used.
+ * @param children - An optional function that returns custom blocks and arguments.
+ * @param args - Additional unknown arguments.
+ * @returns An object containing the merged blocks and additional arguments.
+ */
+export declare function setBlocks(defaultBlocks: DefaultBlocks, defaultOptions: DefaultOptions, children?: (props: ChildrenProps) => DefaultOptions & {
+    blocks: {
+        [x: string]: any;
+    };
+}): {
+    blocks: {
+        [k: string]: any;
+    };
+};
+type ClassName = string | ClassName[] | undefined | null;
+/**
+ * Utility function to join class names together, ignoring undefined or nil values.
+ * @param classes - The class names to join.
+ * @returns The joined class names.
+ */
+export declare function classNames(...classes: ClassName[]): string;
+export {};
+//# sourceMappingURL=lib.d.ts.map

package/dist/lib.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lib.d.ts","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEvE;;;;;;;GAOG;AAEH,wBAAgB,SAAS,CACvB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,cAAc,GAAG;IACpD,MAAM,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;CAC9B;;;;EAiBF;AAED,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,CAE1D"}

package/dist/types.d.ts

@@ -0,0 +1,38 @@
+export type FAQListItem = {
+    question: string;
+    answer: string;
+};
+export type ChildrenProps = {
+    defaultBlocks: DefaultBlocks;
+};
+export type FAQProps = {
+    className?: string;
+    title: string;
+    subtitle: string;
+    questionsAndAnswers: FAQListItem[];
+    children?: (props: ChildrenProps) => DefaultOptions & {
+        blocks: {
+            [x: string]: any;
+        };
+    };
+};
+export type DefaultBlocks = {
+    FAQTitle: React.FC<{
+        title: string;
+        subtitle: string;
+    }>;
+    FAQItem: React.FC<{
+        item: FAQListItem;
+        index: number;
+        activeIndex: number | null;
+        toggleAccordion: (index: number) => void;
+        ChevronIcon: React.FC<{
+            direction: string;
+        }>;
+    }>;
+    FAQChevronIcon: React.FC<{
+        direction: string;
+    }>;
+};
+export type DefaultOptions = {};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAClB,CAAC;AACF,MAAM,MAAM,aAAa,GAAG;IACxB,aAAa,EAAE,aAAa,CAAC;CAC9B,CAAC;AAEJ,MAAM,MAAM,QAAQ,GAAG;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,EAAE,WAAW,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,cAAc,GAAG;QAClD,MAAM,EAAE;YAAE,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAA;SAAE,CAAC;KAC9B,CAAC;CACP,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxD,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;QACd,IAAI,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAAC,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;YAAE,SAAS,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;KACvJ,CAAC,CAAC;IACH,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,EAAE,CAAA"}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@nodeblocks/frontend-faq-block",
+  "version": "0.0.2",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "browser": "dist/index.iife.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "dist/index.css"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "watch": "rollup -c --watch"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "rollup": "^4.28.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-serve": "^1.1.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2"
+  }
+}