@helpwave/hightide
Version:
helpwave's component and theming library
302 lines (299 loc) • 10.1 kB
JavaScript
// src/components/layout/FAQSection.tsx
import clsx2 from "clsx";
import { ChevronDown as ChevronDown2, ChevronUp as ChevronUp2 } from "lucide-react";
// src/components/Expandable.tsx
import { forwardRef, useState } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";
import clsx from "clsx";
import { jsx, jsxs } from "react/jsx-runtime";
var DefaultIcon = (expanded) => expanded ? /* @__PURE__ */ jsx(ChevronUp, { size: 16, className: "min-w-[16px]" }) : /* @__PURE__ */ jsx(ChevronDown, { size: 16, className: "min-w-[16px]" });
var Expandable = forwardRef(({
children,
label,
icon,
initialExpansion = false,
clickOnlyOnHeader = true,
className = "",
headerClassName = ""
}, ref) => {
const [isExpanded, setIsExpanded] = useState(initialExpansion);
icon ??= DefaultIcon;
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: clsx("col bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader }, className),
onClick: () => !clickOnlyOnHeader && setIsExpanded(!isExpanded),
children: [
/* @__PURE__ */ jsxs(
"button",
{
className: clsx("btn-md rounded-lg justify-between items-center bg-surface text-on-surface", { "group-hover:brightness-95": !isExpanded }, headerClassName),
onClick: () => clickOnlyOnHeader && setIsExpanded(!isExpanded),
children: [
label,
icon(isExpanded)
]
}
),
isExpanded && /* @__PURE__ */ jsx("div", { className: "col", children })
]
}
);
});
Expandable.displayName = "Expandable";
// src/components/MarkdownInterpreter.tsx
import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
var astNodeInserterType = ["helpwave", "newline"];
var ASTNodeInterpreter = ({
node,
isRoot = false,
className = ""
}) => {
switch (node.type) {
case "newline":
return /* @__PURE__ */ jsx2("br", {});
case "text":
return isRoot ? /* @__PURE__ */ jsx2("span", { className, children: node.text }) : node.text;
case "helpwave":
return /* @__PURE__ */ jsx2("span", { className: "font-bold font-space no-underline", children: "helpwave" });
case "none":
return isRoot ? /* @__PURE__ */ jsx2("span", { className, children: node.children.map((value, index) => /* @__PURE__ */ jsx2(
ASTNodeInterpreter,
{
node: value
},
index
)) }) : /* @__PURE__ */ jsx2(Fragment, { children: node.children.map((value, index) => /* @__PURE__ */ jsx2(ASTNodeInterpreter, { node: value }, index)) });
case "bold":
return /* @__PURE__ */ jsx2("b", { children: node.children.map((value, index) => /* @__PURE__ */ jsx2(ASTNodeInterpreter, { node: value }, index)) });
case "italic":
return /* @__PURE__ */ jsx2("i", { children: node.children.map((value, index) => /* @__PURE__ */ jsx2(ASTNodeInterpreter, { node: value }, index)) });
case "underline":
return /* @__PURE__ */ jsx2("u", { children: node.children.map((value, index) => /* @__PURE__ */ jsx2(ASTNodeInterpreter, { node: value }, index)) });
case "font-space":
return /* @__PURE__ */ jsx2("span", { className: "font-space", children: node.children.map((value, index) => /* @__PURE__ */ jsx2(
ASTNodeInterpreter,
{
node: value
},
index
)) });
case "primary":
return /* @__PURE__ */ jsx2("span", { className: "text-primary", children: node.children.map((value, index) => /* @__PURE__ */ jsx2(
ASTNodeInterpreter,
{
node: value
},
index
)) });
case "secondary":
return /* @__PURE__ */ jsx2("span", { className: "text-secondary", children: node.children.map((value, index) => /* @__PURE__ */ jsx2(
ASTNodeInterpreter,
{
node: value
},
index
)) });
case "warn":
return /* @__PURE__ */ jsx2("span", { className: "text-warning", children: node.children.map((value, index) => /* @__PURE__ */ jsx2(
ASTNodeInterpreter,
{
node: value
},
index
)) });
case "positive":
return /* @__PURE__ */ jsx2("span", { className: "text-positive", children: node.children.map((value, index) => /* @__PURE__ */ jsx2(
ASTNodeInterpreter,
{
node: value
},
index
)) });
case "negative":
return /* @__PURE__ */ jsx2("span", { className: "text-negative", children: node.children.map((value, index) => /* @__PURE__ */ jsx2(
ASTNodeInterpreter,
{
node: value
},
index
)) });
default:
return null;
}
};
var modifierIdentifierMapping = [
{ id: "i", name: "italic" },
{ id: "b", name: "bold" },
{ id: "u", name: "underline" },
{ id: "space", name: "font-space" },
{ id: "primary", name: "primary" },
{ id: "secondary", name: "secondary" },
{ id: "warn", name: "warn" },
{ id: "positive", name: "positive" },
{ id: "negative", name: "negative" }
];
var inserterIdentifierMapping = [
{ id: "helpwave", name: "helpwave" },
{ id: "newline", name: "newline" }
];
var parseMarkdown = (text, commandStart = "\\", open = "{", close = "}") => {
let start = text.indexOf(commandStart);
const children = [];
while (text !== "") {
if (start === -1) {
children.push({
type: "text",
text
});
break;
}
children.push(parseMarkdown(text.substring(0, start)));
text = text.substring(start);
if (text.length <= 1) {
children.push({
type: "text",
text
});
text = "";
continue;
}
const simpleReplace = [commandStart, open, close];
if (simpleReplace.some((value) => text[1] === value)) {
children.push({
type: "text",
text: simpleReplace.find((value) => text[1] === value)
});
text = text.substring(2);
start = text.indexOf(commandStart);
continue;
}
const inserter = inserterIdentifierMapping.find((value) => text.substring(1).startsWith(value.id));
if (inserter) {
children.push({
type: inserter.name
});
text = text.substring(inserter.id.length + 1);
start = text.indexOf(commandStart);
continue;
}
const modifier = modifierIdentifierMapping.find((value) => text.substring(1).startsWith(value.id));
if (modifier) {
if (text[modifier.id.length + 1] !== open) {
children.push({
type: "text",
text: text.substring(0, modifier.id.length + 1)
});
text = text.substring(modifier.id.length + 2);
start = text.indexOf(commandStart);
continue;
}
let closing = -1;
let index = modifier.id.length + 2;
let counter = 1;
let escaping = false;
while (index < text.length) {
if (text[index] === open && !escaping) {
counter++;
}
if (text[index] === close && !escaping) {
counter--;
if (counter === 0) {
closing = index;
break;
}
}
escaping = text[index] === commandStart;
index++;
}
if (closing !== -1) {
children.push({
type: modifier.name,
children: [parseMarkdown(text.substring(modifier.id.length + 2, closing))]
});
text = text.substring(closing + 1);
start = text.indexOf(commandStart);
continue;
}
}
children.push({
type: "text",
text: text[0]
});
text = text.substring(1);
start = text.indexOf(commandStart);
}
return {
type: "none",
children
};
};
var optimizeTree = (node) => {
if (node.type === "text") {
return !node.text ? void 0 : node;
}
if (astNodeInserterType.some((value) => value === node.type)) {
return node;
}
const currentNode = node;
if (currentNode.children.length === 0) {
return void 0;
}
let children = [];
for (let i = 0; i < currentNode.children.length; i++) {
const child = optimizeTree(currentNode.children[i]);
if (!child) {
continue;
}
if (child.type === "none") {
children.push(...child.children);
} else {
children.push(child);
}
}
currentNode.children = children;
children = [];
for (let i = 0; i < currentNode.children.length; i++) {
const child = currentNode.children[i];
if (child) {
if (child.type === "text" && children[children.length - 1]?.type === "text") {
children[children.length - 1].text += child.text;
} else {
children.push(child);
}
}
}
currentNode.children = children;
return currentNode;
};
var MarkdownInterpreter = ({ text, className }) => {
const tree = parseMarkdown(text);
const optimizedTree = optimizeTree(tree);
return /* @__PURE__ */ jsx2(ASTNodeInterpreter, { node: optimizedTree, isRoot: true, className });
};
// src/components/layout/FAQSection.tsx
import { jsx as jsx3 } from "react/jsx-runtime";
var FAQSection = ({
entries,
expandableClassName
}) => {
const chevronSize = 28;
return /* @__PURE__ */ jsx3("div", { className: "col gap-y-4", children: entries.map(({ id, title, content, ...restProps }) => /* @__PURE__ */ jsx3(
Expandable,
{
...restProps,
label: /* @__PURE__ */ jsx3("h3", { id, className: "textstyle-title-md", children: title }),
clickOnlyOnHeader: false,
icon: (expanded) => expanded ? /* @__PURE__ */ jsx3(ChevronUp2, { size: chevronSize, className: "text-primary", style: { minWidth: `${chevronSize}px` } }) : /* @__PURE__ */ jsx3(ChevronDown2, { size: chevronSize, className: "text-primary" }),
className: clsx2("rounded-xl", expandableClassName),
headerClassName: "px-6 py-4",
children: /* @__PURE__ */ jsx3("div", { className: "mt-2 px-6 pb-4", children: content.type === "markdown" ? /* @__PURE__ */ jsx3(MarkdownInterpreter, { text: content.value }) : content.value })
},
id
)) });
};
export {
FAQSection
};
//# sourceMappingURL=FAQSection.mjs.map