@vllnt/ui 0.1.4 → 0.1.7-canary.2c4792f

package/dist/components/tutorial-card/index.js

@@ -0,0 +1,6 @@
+import {
+  TutorialCard
+} from "./tutorial-card";
+export {
+  TutorialCard
+};

package/dist/components/tutorial-card/tutorial-card.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useState } from "react";
+import { useMounted } from "../../lib/use-mounted";
+import { Badge } from "../badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "../card";
+const DIFFICULTY_VARIANTS = {
+  advanced: "destructive",
+  beginner: "secondary",
+  intermediate: "default"
+};
+function DefaultLink({
+  children,
+  className,
+  href
+}) {
+  return /* @__PURE__ */ jsx("a", { className, href, children });
+}
+function TutorialCardImpl({
+  getProgress,
+  href,
+  labels,
+  linkComponent: LinkComponent = DefaultLink,
+  tutorial
+}) {
+  const [progress, setProgress] = useState(null);
+  const isHydrated = useMounted();
+  useEffect(() => {
+    if (getProgress) {
+      const result = getProgress(tutorial.id);
+      requestAnimationFrame(() => {
+        setProgress(result);
+      });
+    }
+  }, [getProgress, tutorial.id]);
+  const difficultyVariant = DIFFICULTY_VARIANTS[tutorial.difficulty];
+  const safeCompletedCount = progress ? Math.min(progress.completedCount, tutorial.sectionCount) : 0;
+  const showProgress = isHydrated && safeCompletedCount > 0;
+  return /* @__PURE__ */ jsx(LinkComponent, { className: "block h-full", href, children: /* @__PURE__ */ jsxs(Card, { className: "h-full flex flex-col hover:shadow-lg transition-shadow cursor-pointer", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ jsx(Badge, { className: "text-xs capitalize", variant: difficultyVariant, children: labels.difficulty[tutorial.difficulty] || tutorial.difficulty }),
+        showProgress ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          safeCompletedCount,
+          "/",
+          tutorial.sectionCount,
+          " ",
+          labels.completed
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx(CardTitle, { className: "line-clamp-2 text-lg", children: tutorial.title }),
+      /* @__PURE__ */ jsx(CardDescription, { className: "line-clamp-3", children: tutorial.description })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "mt-auto space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("span", { children: tutorial.estimatedTime }),
+        /* @__PURE__ */ jsx("span", { children: "\u2022" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          tutorial.sectionCount,
+          " ",
+          labels.sectionsCount
+        ] })
+      ] }),
+      tutorial.tags.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: tutorial.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { className: "text-xs", variant: "outline", children: tag }, tag)) }) : null
+    ] })
+  ] }) });
+}
+const TutorialCard = memo(TutorialCardImpl);
+TutorialCard.displayName = "TutorialCard";
+export {
+  TutorialCard
+};

package/dist/components/tutorial-complete/index.js

@@ -0,0 +1,6 @@
+import {
+  TutorialComplete
+} from "./tutorial-complete";
+export {
+  TutorialComplete
+};

package/dist/components/tutorial-complete/tutorial-complete.js

@@ -0,0 +1,134 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { Check, ChevronRight, RotateCcw } from "lucide-react";
+import { Button } from "../button";
+import { ProfileSection } from "../profile-section";
+import { ShareSection } from "../share-section";
+function DefaultLink({
+  children,
+  className,
+  href
+}) {
+  return /* @__PURE__ */ jsx("a", { className, href, children });
+}
+function TutorialCompleteImpl({
+  backHref,
+  completedSections,
+  completionPercent,
+  labels,
+  linkComponent: LinkComponent = DefaultLink,
+  onGoToSection,
+  onRestart,
+  profile,
+  relatedContent,
+  sections,
+  shareUrl,
+  title
+}) {
+  const isFullyComplete = completionPercent === 100;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `inline-flex items-center justify-center w-20 h-20 rounded-full mb-6 ${isFullyComplete ? "bg-green-100 dark:bg-green-900/30" : "bg-muted"}`,
+          children: /* @__PURE__ */ jsx(
+            Check,
+            {
+              className: `h-10 w-10 ${isFullyComplete ? "text-green-600 dark:text-green-400" : "text-muted-foreground"}`
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold mb-2", children: isFullyComplete ? labels.tutorialComplete : labels.tutorialFinished }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-6", children: isFullyComplete ? `${labels.youveCompletedAll} "${title}"` : `${labels.youveFinishedWith} "${title}" (${completionPercent}%)` }),
+      /* @__PURE__ */ jsxs(Button, { className: "gap-2", onClick: onRestart, variant: "outline", children: [
+        /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4" }),
+        labels.startOver
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "max-w-2xl mx-auto mt-8", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: labels.reviewSections }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: sections.map((section, index) => {
+        const isCompleted = completedSections.has(section.id);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: "w-full flex items-center gap-3 p-3 rounded-lg border border-border hover:bg-muted/50 transition-colors text-left",
+            onClick: () => {
+              onGoToSection(index);
+            },
+            type: "button",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `flex-shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center ${isCompleted ? "bg-foreground border-foreground" : "border-muted-foreground"}`,
+                  children: isCompleted ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-background" }) : null
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: section.title }),
+              /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+            ]
+          },
+          `${section.id}-${index}`
+        );
+      }) })
+    ] }),
+    relatedContent.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "max-w-2xl mx-auto mt-12", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: labels.relatedContent }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: relatedContent.map((item) => /* @__PURE__ */ jsxs(
+        LinkComponent,
+        {
+          className: "flex items-center gap-3 p-3 rounded-lg border border-border hover:bg-muted/50 transition-colors",
+          href: item.href,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs uppercase text-muted-foreground font-medium", children: item.type }),
+            /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.title }),
+            /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+          ]
+        },
+        item.href
+      )) })
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto mt-12", children: /* @__PURE__ */ jsx(
+      ShareSection,
+      {
+        shareOn: labels.shareOn,
+        shareTitle: labels.shareTitle,
+        title,
+        url: shareUrl
+      }
+    ) }),
+    profile ? /* @__PURE__ */ jsx("div", { className: "border-t border-border pt-8 mt-12", children: /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto", children: /* @__PURE__ */ jsx(
+      ProfileSection,
+      {
+        dict: {
+          profile: {
+            name: labels.profileName,
+            tagline: labels.profileTagline
+          }
+        },
+        imageSource: profile.imageSource,
+        socialLinks: profile.socialLinks
+      }
+    ) }) }) : null,
+    /* @__PURE__ */ jsx("div", { className: "text-center pt-8", children: /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        className: "inline-flex items-center space-x-2 text-muted-foreground hover:text-foreground transition-colors",
+        href: backHref,
+        children: /* @__PURE__ */ jsxs("span", { children: [
+          "\u2190 ",
+          labels.backToTutorials
+        ] })
+      }
+    ) })
+  ] });
+}
+const TutorialComplete = memo(TutorialCompleteImpl);
+TutorialComplete.displayName = "TutorialComplete";
+export {
+  TutorialComplete
+};

package/dist/components/tutorial-filters/index.js

@@ -0,0 +1,6 @@
+import {
+  TutorialFilters
+} from "./tutorial-filters";
+export {
+  TutorialFilters
+};

package/dist/components/tutorial-filters/tutorial-filters.js

@@ -0,0 +1,205 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { Badge } from "../badge";
+function SearchInput({
+  isPending,
+  labels,
+  onSearchChange,
+  searchQuery
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: "tutorial-search", children: labels.searchLabel }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "w-full px-4 py-2 border border-border rounded-lg bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        defaultValue: searchQuery,
+        disabled: isPending,
+        id: "tutorial-search",
+        onChange: onSearchChange,
+        placeholder: labels.searchPlaceholder,
+        type: "text"
+      }
+    )
+  ] });
+}
+function DifficultyFilter({
+  activeDifficulty,
+  difficultyOptions,
+  isPending,
+  labels,
+  onDifficultyChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 mb-2", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: labels.difficultyLabel }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: difficultyOptions.map((difficulty) => {
+      const isActive = difficulty === activeDifficulty;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `px-3 py-1 text-sm rounded-lg border transition-colors ${isActive ? "bg-primary text-primary-foreground border-transparent" : "bg-background text-foreground border-border hover:bg-muted"}`,
+          disabled: isPending,
+          onClick: () => {
+            onDifficultyChange(difficulty);
+          },
+          type: "button",
+          children: /* @__PURE__ */ jsx("span", { className: "capitalize", children: labels.difficulty[difficulty] || difficulty })
+        },
+        difficulty
+      );
+    }) })
+  ] });
+}
+function TagFilter({
+  currentTags,
+  labels,
+  onClearTags,
+  onTagToggle,
+  tags
+}) {
+  if (tags.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: labels.tagsLabel }),
+      currentTags.length > 0 ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "text-xs text-muted-foreground hover:text-foreground transition-colors",
+          onClick: onClearTags,
+          type: "button",
+          children: labels.clear
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: tags.map((tag) => {
+      const isActive = currentTags.includes(tag);
+      return /* @__PURE__ */ jsx(
+        Badge,
+        {
+          className: `cursor-pointer transition-all ${isActive ? "bg-primary text-primary-foreground border-transparent" : "hover:bg-muted"}`,
+          onClick: () => {
+            onTagToggle(tag);
+          },
+          variant: isActive ? "default" : "outline",
+          children: tag
+        },
+        tag
+      );
+    }) })
+  ] });
+}
+function ActiveFiltersSummary({
+  currentDifficulty,
+  currentTags,
+  labels,
+  onClearAll,
+  searchQuery
+}) {
+  if (!currentDifficulty && currentTags.length === 0 && !searchQuery) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("span", { children: labels.activeFilters }),
+    currentDifficulty ? /* @__PURE__ */ jsx(Badge, { className: "capitalize", variant: "secondary", children: labels.difficulty[currentDifficulty] || currentDifficulty }) : null,
+    currentTags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: tag }, tag)),
+    searchQuery ? /* @__PURE__ */ jsxs(Badge, { variant: "secondary", children: [
+      labels.searchFilter,
+      ' "',
+      searchQuery,
+      '"'
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "text-xs hover:underline",
+        onClick: onClearAll,
+        type: "button",
+        children: labels.clearAll
+      }
+    )
+  ] });
+}
+const DEFAULT_DIFFICULTY_OPTIONS = [
+  "all",
+  "beginner",
+  "intermediate",
+  "advanced"
+];
+function TutorialFiltersImpl({
+  currentDifficulty,
+  currentTags,
+  difficultyOptions = DEFAULT_DIFFICULTY_OPTIONS,
+  isPending = false,
+  labels,
+  onFilterChange,
+  searchQuery,
+  tags
+}) {
+  const activeDifficulty = currentDifficulty || "all";
+  const handleDifficultyChange = (difficulty) => {
+    onFilterChange({ difficulty });
+  };
+  const handleSearchChange = (event) => {
+    onFilterChange({ search: event.target.value });
+  };
+  const handleTagToggle = (tag) => {
+    const newTags = currentTags.includes(tag) ? currentTags.filter((t) => t !== tag) : [...currentTags, tag];
+    onFilterChange({ tags: newTags });
+  };
+  const handleClearAll = () => {
+    onFilterChange({ difficulty: "all", search: "", tags: [] });
+    const input = document.querySelector("#tutorial-search");
+    if (input) input.value = "";
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 mb-8", children: [
+    /* @__PURE__ */ jsx(
+      SearchInput,
+      {
+        isPending,
+        labels,
+        onSearchChange: handleSearchChange,
+        searchQuery
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DifficultyFilter,
+      {
+        activeDifficulty,
+        difficultyOptions,
+        isPending,
+        labels,
+        onDifficultyChange: handleDifficultyChange
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TagFilter,
+      {
+        currentTags,
+        labels,
+        onClearTags: () => {
+          onFilterChange({ tags: [] });
+        },
+        onTagToggle: handleTagToggle,
+        tags
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ActiveFiltersSummary,
+      {
+        currentDifficulty,
+        currentTags,
+        labels,
+        onClearAll: handleClearAll,
+        searchQuery
+      }
+    )
+  ] });
+}
+const TutorialFilters = memo(TutorialFiltersImpl);
+TutorialFilters.displayName = "TutorialFilters";
+export {
+  TutorialFilters
+};

package/dist/components/tutorial-intro-content/index.js

@@ -0,0 +1,6 @@
+import {
+  TutorialIntroContent
+} from "./tutorial-intro-content";
+export {
+  TutorialIntroContent
+};

package/dist/components/tutorial-intro-content/tutorial-intro-content.js

@@ -0,0 +1,141 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+import { cn } from "../../lib/utils";
+const serverMarkdownComponents = {
+  a: ({
+    children,
+    href,
+    ...props
+  }) => /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: "text-primary underline underline-offset-4 hover:text-primary/80 font-medium",
+      href,
+      ...props,
+      children
+    }
+  ),
+  blockquote: ({
+    children,
+    ...props
+  }) => /* @__PURE__ */ jsx(
+    "blockquote",
+    {
+      className: "border-l-4 border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm",
+      ...props,
+      children
+    }
+  ),
+  code: ({
+    children,
+    className: codeClassName,
+    ...props
+  }) => {
+    const isBlock = codeClassName?.includes("language-");
+    if (isBlock) {
+      return /* @__PURE__ */ jsx("code", { className: cn("font-mono text-sm", codeClassName), ...props, children });
+    }
+    return /* @__PURE__ */ jsx(
+      "code",
+      {
+        className: "bg-muted px-1.5 py-0.5 rounded text-sm font-mono",
+        ...props,
+        children
+      }
+    );
+  },
+  h1: ({
+    children,
+    ...props
+  }) => /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mt-8 mb-4", ...props, children }),
+  h2: ({
+    children,
+    ...props
+  }) => /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold mt-6 mb-3", ...props, children }),
+  h3: ({
+    children,
+    ...props
+  }) => /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold mt-4 mb-2", ...props, children }),
+  hr: (props) => /* @__PURE__ */ jsx("hr", { className: "my-8 border-border", ...props }),
+  li: ({
+    children,
+    ...props
+  }) => /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: "mb-2 leading-relaxed text-muted-foreground text-sm pl-2",
+      ...props,
+      children
+    }
+  ),
+  ol: ({
+    children,
+    ...props
+  }) => /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: "list-decimal list-outside mb-6 space-y-2 ml-6 text-muted-foreground text-sm",
+      ...props,
+      children
+    }
+  ),
+  p: ({
+    children,
+    ...props
+  }) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: "mb-4 leading-relaxed text-muted-foreground text-sm",
+      ...props,
+      children
+    }
+  ),
+  pre: ({
+    children,
+    ...props
+  }) => /* @__PURE__ */ jsx(
+    "pre",
+    {
+      className: "bg-zinc-950 dark:bg-zinc-900 text-zinc-100 p-4 rounded-lg overflow-x-auto my-6 border border-zinc-800 shadow-lg font-mono text-sm",
+      ...props,
+      children
+    }
+  ),
+  strong: ({
+    children,
+    ...props
+  }) => /* @__PURE__ */ jsx("strong", { className: "font-semibold text-foreground", ...props, children }),
+  ul: ({
+    children,
+    ...props
+  }) => /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: "list-disc list-outside mb-6 space-y-2 ml-6 text-muted-foreground text-sm",
+      ...props,
+      children
+    }
+  )
+};
+function stripMDXComponents(content) {
+  let cleaned = content.replaceAll(/<[A-Z][A-Za-z]*[^>]*\/>/g, "");
+  cleaned = cleaned.replaceAll(
+    /<[A-Z][A-Za-z]*[^>]*>[\S\s]*?<\/[A-Z][A-Za-z]*>/g,
+    ""
+  );
+  return cleaned;
+}
+function TutorialIntroContent({
+  className,
+  content,
+  title
+}) {
+  const markdownContent = stripMDXComponents(content);
+  return /* @__PURE__ */ jsxs("section", { className: cn("py-6", className), children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-2xl md:text-3xl font-bold mb-6", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "max-w-none [&_h2:first-of-type]:hidden", children: /* @__PURE__ */ jsx(ReactMarkdown, { components: serverMarkdownComponents, children: markdownContent }) })
+  ] });
+}
+export {
+  TutorialIntroContent
+};

package/dist/components/tutorial-mdx/index.js

@@ -0,0 +1,8 @@
+import {
+  mdxComponents,
+  TutorialMDX
+} from "./tutorial-mdx";
+export {
+  TutorialMDX,
+  mdxComponents
+};