Package library as @moduletrace/twui npm package

- Move components/ to src/ and compile to dist/ with tsc - Add root barrel export plus deep-import subpath exports and base.css export - Post-compile step: copy base.css, add .js import extensions, mark client modules - Add publish.sh and .npmrc for the Gitea npm registry - Fix type errors, guard TinyMCE env access, drop ace-builds type dependency - Rename clashing props type names, remove Next.js scaffolding and unused deps Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-18 10:17:54 +01:00
parent d19d412066
commit 11da9b89e7
148 changed files with 937 additions and 500 deletions
@@ -0,0 +1,128 @@
+import React, {
+    type AnchorHTMLAttributes,
+    type ComponentProps,
+    type DetailedHTMLProps,
+} from "react";
+import type { DocsLinkType } from ".";
+import Stack from "../../layout/Stack";
+import { twMerge } from "tailwind-merge";
+import Row from "../../layout/Row";
+import Divider from "../../layout/Divider";
+import { ChevronDown, Circle } from "lucide-react";
+import Button from "../../layout/Button";
+
+type Props = DetailedHTMLProps<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+> & {
+    docLink: DocsLinkType;
+    wrapperProps?: ComponentProps<typeof Stack>;
+    strict?: boolean;
+    childWrapperProps?: ComponentProps<typeof Stack>;
+    autoExpandAll?: boolean;
+    child?: boolean;
+};
+
+/**
+ * # TWUI Docs Left Aside Link
+ * @note use dataset attribute `data-strict` for strict matching
+ *
+ * @className `twui-docs-left-aside-link`
+ */
+export default function TWUIDocsLink({
+    docLink,
+    wrapperProps,
+    childWrapperProps,
+    strict,
+    autoExpandAll,
+    child,
+    ...props
+}: Props) {
+    const [isActive, setIsActive] = React.useState(false);
+    const [expand, setExpand] = React.useState(autoExpandAll || false);
+    const linkRef = React.useRef<HTMLAnchorElement>(null);
+
+    React.useEffect(() => {
+        if (typeof window !== "undefined") {
+            const basePathMatch = window.location.pathname.includes(
+                docLink.href,
+            );
+
+            const isStrictMatch = Boolean(
+                linkRef.current?.getAttribute("data-strict"),
+            );
+
+            if (strict || isStrictMatch) {
+                setIsActive(window.location.pathname === docLink.href);
+            } else {
+                setIsActive(basePathMatch);
+            }
+
+            if (basePathMatch) {
+                setExpand(true);
+            }
+        }
+    }, []);
+
+    return (
+        <Stack
+            className={twMerge("gap-2 w-full", wrapperProps?.className)}
+            {...wrapperProps}
+        >
+            <Row className="flex-nowrap grow justify-between w-full">
+                {child && <Circle size={6} />}
+                <a
+                    href={docLink.href}
+                    title={docLink.title}
+                    {...props}
+                    className={twMerge(
+                        "twui-docs-left-aside-link whitespace-nowrap",
+                        "grow overflow-hidden overflow-ellipsis",
+                        isActive ? "active" : "",
+                        props.className,
+                    )}
+                    ref={linkRef}
+                    data-strict={strict || docLink.strict}
+                >
+                    {docLink.title}
+                </a>
+
+                {docLink.children?.[0] && (
+                    <Button
+                        variant="ghost"
+                        color="gray"
+                        className={twMerge(
+                            "p-1 hover:opacity-100",
+                            expand ? "rotate-180 opacity-30" : "opacity-70",
+                        )}
+                        onClick={() => setExpand(!expand)}
+                        title="Docs Aside Links Dropdown Button"
+                    >
+                        <ChevronDown className="text-slate-500" size={20} />
+                    </Button>
+                )}
+            </Row>
+            {docLink.children && expand && (
+                <Row className="items-stretch gap-4 grow w-full flex-nowrap">
+                    <Stack
+                        className={twMerge(
+                            "gap-2 w-full pl-3",
+                            childWrapperProps?.className,
+                        )}
+                        {...childWrapperProps}
+                    >
+                        {docLink.children.map((link, index) => (
+                            <TWUIDocsLink
+                                key={index}
+                                docLink={link}
+                                className="opacity-70"
+                                autoExpandAll={autoExpandAll}
+                                child
+                            />
+                        ))}
+                    </Stack>
+                </Row>
+            )}
+        </Stack>
+    );
+}