@lukoweb/apitogo 0.1.0 → 0.1.2

package/src/lib/components/MultiSelect.tsx

@@ -1,82 +1,86 @@
-import { CheckIcon, ChevronDownIcon } from "lucide-react";
-import { useState } from "react";
-import { Popover, PopoverContent, PopoverTrigger } from "@lukoweb/apitogo/ui/Popover.js";
-import { cn } from "../util/cn.js";
-
-type MultiSelectProps = {
-  options: readonly string[];
-  value: string[];
-  onChange: (value: string[]) => void;
-  placeholder?: string;
-  className?: string;
-};
-
-export const MultiSelect = ({
-  options,
-  value,
-  onChange,
-  placeholder = "Select values...",
-  className,
-}: MultiSelectProps) => {
-  const [open, setOpen] = useState(false);
-
-  const toggleValue = (option: string) => {
-    if (value.includes(option)) {
-      onChange(value.filter((v) => v !== option));
-    } else {
-      onChange([...value, option]);
-    }
-  };
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <button
-          type="button"
-          className={cn(
-            "flex items-center justify-between w-full h-9 bg-transparent text-xs font-mono text-left truncate",
-            !value.length && "text-muted-foreground",
-            className,
-          )}
-        >
-          <span className="truncate">
-            {value.length > 0 ? value.join(", ") : placeholder}
-          </span>
-          <ChevronDownIcon className="size-3.5 shrink-0 opacity-50" />
-        </button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="p-1 w-(--radix-popover-trigger-width)"
-        align="start"
-        side="bottom"
-        onWheel={(e) => e.stopPropagation()}
-        onTouchMove={(e) => e.stopPropagation()}
-      >
-        <div className="max-h-[140px] overflow-y-auto">
-          {options.map((option) => {
-            const isSelected = value.includes(option);
-            return (
-              <button
-                key={option}
-                type="button"
-                className="flex items-center gap-2 w-full rounded-xs px-2 py-1.5 text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground"
-                onClick={() => toggleValue(option)}
-              >
-                <span
-                  className={cn(
-                    "flex size-4 shrink-0 items-center justify-center rounded-[4px] border",
-                    isSelected &&
-                      "bg-primary border-primary text-primary-foreground",
-                  )}
-                >
-                  {isSelected && <CheckIcon className="size-3" />}
-                </span>
-                <span className="truncate font-mono text-xs">{option}</span>
-              </button>
-            );
-          })}
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-};
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@lukoweb/apitogo/ui/Popover.js";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../util/cn.js";
+
+type MultiSelectProps = {
+  options: readonly string[];
+  value: string[];
+  onChange: (value: string[]) => void;
+  placeholder?: string;
+  className?: string;
+};
+
+export const MultiSelect = ({
+  options,
+  value,
+  onChange,
+  placeholder = "Select values...",
+  className,
+}: MultiSelectProps) => {
+  const [open, setOpen] = useState(false);
+
+  const toggleValue = (option: string) => {
+    if (value.includes(option)) {
+      onChange(value.filter((v) => v !== option));
+    } else {
+      onChange([...value, option]);
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className={cn(
+            "flex items-center justify-between w-full h-9 bg-transparent text-xs font-mono text-left truncate",
+            !value.length && "text-muted-foreground",
+            className,
+          )}
+        >
+          <span className="truncate">
+            {value.length > 0 ? value.join(", ") : placeholder}
+          </span>
+          <ChevronDownIcon className="size-3.5 shrink-0 opacity-50" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="p-1 w-(--radix-popover-trigger-width)"
+        align="start"
+        side="bottom"
+        onWheel={(e) => e.stopPropagation()}
+        onTouchMove={(e) => e.stopPropagation()}
+      >
+        <div className="max-h-[140px] overflow-y-auto">
+          {options.map((option) => {
+            const isSelected = value.includes(option);
+            return (
+              <button
+                key={option}
+                type="button"
+                className="flex items-center gap-2 w-full rounded-xs px-2 py-1.5 text-sm cursor-pointer hover:bg-accent hover:text-accent-foreground"
+                onClick={() => toggleValue(option)}
+              >
+                <span
+                  className={cn(
+                    "flex size-4 shrink-0 items-center justify-center rounded-[4px] border",
+                    isSelected &&
+                      "bg-primary border-primary text-primary-foreground",
+                  )}
+                >
+                  {isSelected && <CheckIcon className="size-3" />}
+                </span>
+                <span className="truncate font-mono text-xs">{option}</span>
+              </button>
+            );
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/lib/components/TopNavigation.tsx

@@ -1,103 +1,103 @@
-import { cx } from "class-variance-authority";
-import { deepEqual } from "fast-equals";
-import { Suspense } from "react";
-import { NavLink, type NavLinkProps } from "react-router";
-import { Separator } from "@lukoweb/apitogo/ui/Separator.js";
-import type { NavigationItem } from "../../config/validators/NavigationSchema.js";
-import { useAuth } from "../authentication/hook.js";
-import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
-import { getFirstMatchingPath, shouldShowItem } from "./navigation/utils.js";
-import { Slot } from "./Slot.js";
-
-export const TopNavigation = () => {
-  const context = useZudoku();
-  const {
-    options: { navigation = [] },
-  } = context;
-  const auth = useAuth();
-  const filteredItems = navigation.filter(shouldShowItem({ auth, context }));
-
-  if (filteredItems.length === 0 || import.meta.env.MODE === "standalone") {
-    return <style>{`:root { --top-nav-height: 0px; }`}</style>;
-  }
-
-  return (
-    <Suspense>
-      <div className="items-center justify-between px-8 h-(--top-nav-height) hidden lg:flex text-sm relative">
-        <nav className="text-sm">
-          <ul className="flex flex-row items-center gap-8">
-            {filteredItems.map((item) =>
-              item.type === "separator" ? (
-                <li key={item.label} className="-mx-4 h-7">
-                  <Separator orientation="vertical" />
-                </li>
-              ) : item.type !== "section" && item.type !== "filter" ? (
-                <li key={item.label + item.type}>
-                  <TopNavItem {...item} />
-                </li>
-              ) : null,
-            )}
-          </ul>
-        </nav>
-        <Slot.Target name="top-navigation-side" />
-      </div>
-      {/* <PageProgress /> */}
-    </Suspense>
-  );
-};
-
-export const TopNavLink = ({
-  isActive,
-  children,
-  ...props
-}: {
-  isActive?: boolean;
-  children: React.ReactNode;
-} & NavLinkProps) => {
-  return (
-    <NavLink
-      viewTransition
-      className={({ isActive: isActiveNavLink, isPending }) => {
-        const isActiveReal = isActiveNavLink || isActive;
-        return cx(
-          "flex items-center gap-2 lg:py-3.5 font-medium -mb-px transition duration-150 delay-75 relative",
-          isActiveReal || isPending
-            ? [
-                "text-foreground",
-                // underline with view transition animation
-                "after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0",
-                "after:h-0.5 after:bg-primary",
-                isActiveReal &&
-                  "after:[view-transition-name:top-nav-underline]",
-                isPending && "after:bg-primary/25",
-              ]
-            : "text-foreground/75 hover:text-foreground",
-        );
-      }}
-      {...props}
-    >
-      {children}
-    </NavLink>
-  );
-};
-
-export const TopNavItem = (
-  item: Exclude<
-    NavigationItem,
-    { type: "separator" } | { type: "section" } | { type: "filter" }
-  >,
-) => {
-  const currentNav = useCurrentNavigation();
-  const isActiveTopNavItem = deepEqual(currentNav.topNavItem, item);
-
-  const path = getFirstMatchingPath(item);
-
-  return (
-    // We don't use isActive here because it has to be inside the navigation,
-    // the top nav id doesn't necessarily start with the navigation id
-    <TopNavLink to={path} isActive={isActiveTopNavItem}>
-      {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
-      {item.label}
-    </TopNavLink>
-  );
-};
+import { Separator } from "@lukoweb/apitogo/ui/Separator.js";
+import { cx } from "class-variance-authority";
+import { deepEqual } from "fast-equals";
+import { Suspense } from "react";
+import { NavLink, type NavLinkProps } from "react-router";
+import type { NavigationItem } from "../../config/validators/NavigationSchema.js";
+import { useAuth } from "../authentication/hook.js";
+import { useCurrentNavigation, useZudoku } from "./context/ZudokuContext.js";
+import { getFirstMatchingPath, shouldShowItem } from "./navigation/utils.js";
+import { Slot } from "./Slot.js";
+
+export const TopNavigation = () => {
+  const context = useZudoku();
+  const {
+    options: { navigation = [] },
+  } = context;
+  const auth = useAuth();
+  const filteredItems = navigation.filter(shouldShowItem({ auth, context }));
+
+  if (filteredItems.length === 0 || import.meta.env.MODE === "standalone") {
+    return <style>{`:root { --top-nav-height: 0px; }`}</style>;
+  }
+
+  return (
+    <Suspense>
+      <div className="items-center justify-between px-8 h-(--top-nav-height) hidden lg:flex text-sm relative">
+        <nav className="text-sm">
+          <ul className="flex flex-row items-center gap-8">
+            {filteredItems.map((item) =>
+              item.type === "separator" ? (
+                <li key={item.label} className="-mx-4 h-7">
+                  <Separator orientation="vertical" />
+                </li>
+              ) : item.type !== "section" && item.type !== "filter" ? (
+                <li key={item.label + item.type}>
+                  <TopNavItem {...item} />
+                </li>
+              ) : null,
+            )}
+          </ul>
+        </nav>
+        <Slot.Target name="top-navigation-side" />
+      </div>
+      {/* <PageProgress /> */}
+    </Suspense>
+  );
+};
+
+export const TopNavLink = ({
+  isActive,
+  children,
+  ...props
+}: {
+  isActive?: boolean;
+  children: React.ReactNode;
+} & NavLinkProps) => {
+  return (
+    <NavLink
+      viewTransition
+      className={({ isActive: isActiveNavLink, isPending }) => {
+        const isActiveReal = isActiveNavLink || isActive;
+        return cx(
+          "flex items-center gap-2 lg:py-3.5 font-medium -mb-px transition duration-150 delay-75 relative",
+          isActiveReal || isPending
+            ? [
+                "text-foreground",
+                // underline with view transition animation
+                "after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0",
+                "after:h-0.5 after:bg-primary",
+                isActiveReal &&
+                  "after:[view-transition-name:top-nav-underline]",
+                isPending && "after:bg-primary/25",
+              ]
+            : "text-foreground/75 hover:text-foreground",
+        );
+      }}
+      {...props}
+    >
+      {children}
+    </NavLink>
+  );
+};
+
+export const TopNavItem = (
+  item: Exclude<
+    NavigationItem,
+    { type: "separator" } | { type: "section" } | { type: "filter" }
+  >,
+) => {
+  const currentNav = useCurrentNavigation();
+  const isActiveTopNavItem = deepEqual(currentNav.topNavItem, item);
+
+  const path = getFirstMatchingPath(item);
+
+  return (
+    // We don't use isActive here because it has to be inside the navigation,
+    // the top nav id doesn't necessarily start with the navigation id
+    <TopNavLink to={path} isActive={isActiveTopNavItem}>
+      {item.icon && <item.icon size={16} className="align-[-0.125em]" />}
+      {item.label}
+    </TopNavLink>
+  );
+};

package/src/lib/components/index.ts

@@ -1,26 +1,26 @@
-export { Helmet as Head } from "@zudoku/react-helmet-async";
-export { Link } from "react-router";
-export { Button } from "../ui/Button.js";
-export { Callout } from "../ui/Callout.js";
-export { ZudokuError } from "../util/invariant.js";
-export { ClientOnly } from "./ClientOnly.js";
-export { Heading } from "./Heading.js";
-export { Markdown } from "./Markdown.js";
-export { Search } from "./Search.js";
-export { type CustomSlotNames, Slot } from "./Slot.js";
-export { Spinner } from "./Spinner.js";
-export { Typography } from "./Typography.js";
-export { Zudoku } from "./Zudoku.js";
-
-//
-
-/** @deprecated Import from `apitogo/hooks` instead */
-export { useMDXComponents } from "@mdx-js/react";
-/** @deprecated Import from `apitogo/hooks` instead */
-export { useTheme } from "next-themes";
-/** @deprecated Import from `apitogo/hooks` instead */
-export { useAuth } from "../authentication/hook.js";
-/** @deprecated Import from `apitogo/hooks` instead */
-export { CACHE_KEYS, useCache } from "./cache.js";
-/** @deprecated Import from `apitogo/hooks` instead */
-export { useZudoku } from "./context/ZudokuContext.js";
+export { Helmet as Head } from "@zudoku/react-helmet-async";
+export { Link } from "react-router";
+export { Button } from "../ui/Button.js";
+export { Callout } from "../ui/Callout.js";
+export { ZudokuError } from "../util/invariant.js";
+export { ClientOnly } from "./ClientOnly.js";
+export { Heading } from "./Heading.js";
+export { Markdown } from "./Markdown.js";
+export { Search } from "./Search.js";
+export { type CustomSlotNames, Slot } from "./Slot.js";
+export { Spinner } from "./Spinner.js";
+export { Typography } from "./Typography.js";
+export { Zudoku } from "./Zudoku.js";
+
+//
+
+/** @deprecated Import from `apitogo/hooks` instead */
+export { useMDXComponents } from "@mdx-js/react";
+/** @deprecated Import from `apitogo/hooks` instead */
+export { useTheme } from "next-themes";
+/** @deprecated Import from `apitogo/hooks` instead */
+export { useAuth } from "../authentication/hook.js";
+/** @deprecated Import from `apitogo/hooks` instead */
+export { CACHE_KEYS, useCache } from "./cache.js";
+/** @deprecated Import from `apitogo/hooks` instead */
+export { useZudoku } from "./context/ZudokuContext.js";