@terrafirmagreg-team/ui 0.0.0-stage → 1.2.0

package/src/components/blocks/canvas/flow-viewport.tsx

@@ -0,0 +1,244 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import {
+  useReactFlow,
+  useStoreApi,
+} from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
+import { readStoredViewport } from '@terrafirmagreg-team/ui/lib/canvas/viewport';
+import { zoomToFitBox } from '@terrafirmagreg-team/ui/lib/canvas/geometry';
+import type { FlowContentBox } from '@terrafirmagreg-team/ui/types/canvas';
+
+export function FlowViewport({
+  storageKey,
+  resetKey,
+  selectedId,
+  suppressPanRef,
+  nodes,
+  contentBox,
+  viewSize,
+  focusZoom,
+  minZoom,
+  maxZoom,
+  restoreViewport = true,
+  ready = true,
+  onReady,
+  initFocusId,
+  userMovedRef,
+}: {
+  storageKey: string;
+  resetKey: string;
+  selectedId?: string | null;
+
+  initFocusId?: string | null;
+  suppressPanRef?: { current: string | null };
+
+  userMovedRef?: { current: boolean };
+  nodes: ReadonlyArray<{ id: string; position: { x: number; y: number } }>;
+  contentBox: FlowContentBox | null;
+  viewSize: { w: number; h: number };
+  focusZoom: number;
+  minZoom?: number;
+  maxZoom?: number;
+  restoreViewport?: boolean;
+  ready?: boolean;
+  onReady: () => void;
+}) {
+  const { setCenter, setViewport, getZoom } = useReactFlow();
+  const storeApi = useStoreApi();
+  const initRef = useRef<string | null>(null);
+  const preInitRef = useRef<string | null>(null);
+  const nodesRef = useRef(nodes);
+  const boxRef = useRef(contentBox);
+
+  useEffect(() => {
+    nodesRef.current = nodes;
+    boxRef.current = contentBox;
+  }, [nodes, contentBox]);
+
+  const initKey = `${resetKey}:${ready ? 'ready' : 'warm'}`;
+
+  const lastSelectedRef = useRef<string | null>(null);
+  useEffect(() => {
+    lastSelectedRef.current = null;
+    if (userMovedRef) userMovedRef.current = false;
+  }, [resetKey, userMovedRef]);
+
+  useEffect(() => {
+    if (viewSize.w < 1 || viewSize.h < 1) return;
+    if (!ready) {
+
+      initRef.current = null;
+    } else if (initRef.current === initKey) return;
+    if (userMovedRef?.current) return;
+    const box = boxRef.current ?? contentBox;
+    const initNode = initFocusId
+      ? nodesRef.current.find((entry) => entry.id === initFocusId)
+      : undefined;
+    if (!ready) {
+
+      if (preInitRef.current === resetKey) return;
+      if (initNode) {
+        void setCenter(initNode.position.x, initNode.position.y, {
+          zoom: focusZoom,
+          duration: 0,
+        });
+      } else if (box) {
+        void setCenter(box.midX, box.midY, {
+          zoom: Math.min(
+            zoomToFitBox(box, viewSize.w, viewSize.h, minZoom, maxZoom),
+            1,
+          ),
+          duration: 0,
+        });
+      } else {
+        return;
+      }
+      preInitRef.current = resetKey;
+      return;
+    }
+    const cached = restoreViewport ? readStoredViewport(storageKey) : null;
+    if (cached) {
+
+      const px = -cached.x / cached.zoom;
+      const py = -cached.y / cached.zoom;
+      const pw = viewSize.w / cached.zoom;
+      const ph = viewSize.h / cached.zoom;
+      let hasContent = false;
+      for (const node of storeApi.getState().nodeLookup.values()) {
+        if (node.hidden) continue;
+        const abs = node.internals.positionAbsolute;
+        const w = node.measured?.width ?? node.width ?? 0;
+        const h = node.measured?.height ?? node.height ?? 0;
+        if (
+          abs.x < px + pw &&
+          abs.x + w > px &&
+          abs.y < py + ph &&
+          abs.y + h > py
+        ) {
+          hasContent = true;
+          break;
+        }
+      }
+      if (hasContent) {
+        void setViewport(cached);
+        initRef.current = initKey;
+        onReady();
+        return;
+      }
+    }
+    const focusId =
+      selectedId && selectedId !== suppressPanRef?.current
+        ? selectedId
+        : undefined;
+    const tooWide =
+      !!box &&
+      Math.min(
+        (viewSize.w * 0.76) / box.width,
+        (viewSize.h * 0.76) / box.height,
+      ) <
+        focusZoom * 0.5;
+    const wanted = focusId ?? (tooWide ? initFocusId : undefined);
+    if (wanted) {
+      const node = nodesRef.current.find((entry) => entry.id === wanted);
+      if (node) {
+        void setCenter(node.position.x, node.position.y, {
+          zoom: focusZoom,
+          duration: 0,
+        });
+        initRef.current = initKey;
+        onReady();
+        return;
+      }
+    }
+    if (!box) return;
+    void setCenter(box.midX, box.midY, {
+      zoom: Math.min(
+        zoomToFitBox(box, viewSize.w, viewSize.h, minZoom, maxZoom),
+        focusZoom,
+      ),
+      duration: 0,
+    });
+    initRef.current = initKey;
+    onReady();
+  }, [
+    contentBox,
+    focusZoom,
+    initKey,
+    minZoom,
+    maxZoom,
+    initFocusId,
+    nodes,
+    onReady,
+    ready,
+    resetKey,
+    restoreViewport,
+    selectedId,
+    suppressPanRef,
+    userMovedRef,
+    setCenter,
+    setViewport,
+    storageKey,
+    storeApi,
+    viewSize,
+  ]);
+
+  const lastBoxRef = useRef<FlowContentBox | null>(null);
+  useEffect(() => {
+    if (contentBox === lastBoxRef.current) return;
+    lastBoxRef.current = contentBox;
+    if (!ready || !contentBox || viewSize.w < 1 || viewSize.h < 1) return;
+    if (initRef.current !== initKey) return;
+    const { transform } = storeApi.getState();
+    const px = -transform[0] / transform[2];
+    const py = -transform[1] / transform[2];
+    const pw = viewSize.w / transform[2];
+    const ph = viewSize.h / transform[2];
+    for (const node of storeApi.getState().nodeLookup.values()) {
+      if (node.hidden) continue;
+      const abs = node.internals.positionAbsolute;
+      const w = node.measured?.width ?? node.width ?? 0;
+      const h = node.measured?.height ?? node.height ?? 0;
+      if (
+        abs.x < px + pw &&
+        abs.x + w > px &&
+        abs.y < py + ph &&
+        abs.y + h > py
+      )
+        return;
+    }
+    void setCenter(contentBox.midX, contentBox.midY, {
+      zoom: Math.min(
+        zoomToFitBox(contentBox, viewSize.w, viewSize.h, minZoom, maxZoom),
+        focusZoom,
+      ),
+      duration: 0,
+    });
+  }, [
+    contentBox,
+    focusZoom,
+    initKey,
+    minZoom,
+    maxZoom,
+    ready,
+    setCenter,
+    storeApi,
+    viewSize,
+  ]);
+
+  useEffect(() => {
+    if (selectedId === lastSelectedRef.current) return;
+    lastSelectedRef.current = selectedId ?? null;
+    if (initRef.current !== resetKey || !selectedId) return;
+    if (selectedId === suppressPanRef?.current) return;
+    const node = nodesRef.current.find((entry) => entry.id === selectedId);
+    if (!node) return;
+    void setCenter(node.position.x, node.position.y, {
+      zoom: getZoom() || focusZoom,
+      duration: 300,
+    });
+  }, [focusZoom, getZoom, resetKey, selectedId, suppressPanRef, setCenter]);
+
+  return null;
+}
+

package/src/components/blocks/fit-box.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useRef, type ReactNode } from 'react';
+import { useElementSize } from '@terrafirmagreg-team/ui/hooks/use-element-size';
+
+export function FitBox({
+  w,
+  children,
+}: {
+  w: number;
+  children: ReactNode;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { w: avail } = useElementSize(ref);
+  const fit = w > 0 && avail > 0 ? Math.min(1, avail / w) : 1;
+  return (
+    <div ref={ref} className="w-full">
+      <div
+        className="mx-auto w-fit"
+        style={fit < 1 ? { zoom: fit } : undefined}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/blocks/git/github-info.tsx

@@ -0,0 +1,78 @@
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { GitFork, Star } from 'lucide-react';
+import { SiGithub } from '@icons-pack/react-simple-icons';
+import { ItemRow } from '@terrafirmagreg-team/ui/components/blocks/list/row';
+
+interface RepositoryInfo {
+  stars: number;
+  forks: number;
+}
+
+async function fetchRepositoryInfo(
+  owner: string,
+  repo: string,
+): Promise<RepositoryInfo | null> {
+  try {
+    const response = await fetch(
+      `https://api.github.com/repos/${owner}/${repo}`,
+      {
+        next: { revalidate: 3600 },
+        headers: process.env.GITHUB_TOKEN
+          ? { Authorization: `Bearer ${process.env.GITHUB_TOKEN}` }
+          : undefined,
+      } as RequestInit,
+    );
+    if (!response.ok) return null;
+    const data = await response.json();
+    return {
+      stars: data.stargazers_count,
+      forks: data.forks_count,
+    };
+  } catch {
+    return null;
+  }
+}
+
+const formatterOptions: Intl.NumberFormatOptions = {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+};
+
+export async function GithubInfo({
+  owner,
+  repo,
+  locale,
+  className,
+}: {
+  owner: string;
+  repo: string;
+  locale?: Intl.LocalesArgument;
+  className?: string;
+}) {
+  const info = await fetchRepositoryInfo(owner, repo);
+  const formatter = new Intl.NumberFormat(locale, formatterOptions);
+
+  return (
+    <ItemRow
+      href={`https://github.com/${owner}/${repo}`}
+      target="_blank"
+      rel="noreferrer noopener"
+      variant="outline"
+      size="default"
+      media={<SiGithub color="currentColor" className="size-3.5" />}
+      title={`${owner}/${repo}`}
+      description={
+        info ? (
+          <span className="flex items-center gap-1">
+            <Star className="size-3" />
+            {formatter.format(info.stars)}
+            <GitFork className="ms-2 size-3" />
+            {formatter.format(info.forks)}
+          </span>
+        ) : undefined
+      }
+      className={cn('bg-card', className)}
+    />
+  );
+}
+

package/src/components/blocks/lang/content.tsx

@@ -0,0 +1,52 @@
+'use client';
+import { useEffect, useState, type ReactNode } from 'react';
+import { useResolvedLang } from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+import type { LangContent } from '@terrafirmagreg-team/translate/types/content';
+import { UntranslatedContext } from '@terrafirmagreg-team/ui/hooks/use-lang';
+
+export { UntranslatedContext };
+
+export type LocaleNodeResult = { node: ReactNode; missing: boolean } | null;
+export type LoadLocaleNode = (lang: Lang) => Promise<LocaleNodeResult>;
+
+export function LangContentSwitch({
+  content,
+  loadLang,
+}: {
+  content: LangContent;
+  loadLang?: LoadLocaleNode;
+}) {
+  const lang = useResolvedLang();
+  const [loaded, setLoaded] = useState<
+    Partial<Record<Lang, LocaleNodeResult>>
+  >({});
+  const result =
+    lang === content.lang
+      ? { node: content.node, missing: false }
+      : loaded[lang];
+
+  useEffect(() => {
+    if (!loadLang || lang === content.lang || lang in loaded) return;
+    let live = true;
+    void loadLang(lang).then((next) => {
+      if (live) {
+        setLoaded((map) => (lang in map ? map : { ...map, [lang]: next }));
+      }
+    });
+    return () => {
+      live = false;
+    };
+  }, [lang, content.lang, loadLang, loaded]);
+
+  const missing =
+    result === undefined
+      ? !loadLang && lang !== content.lang
+      : (result?.missing ?? lang !== content.lang);
+  return (
+    <UntranslatedContext.Provider value={missing}>
+      {(result ?? content).node}
+    </UntranslatedContext.Provider>
+  );
+}
+

package/src/components/blocks/lang/flag.tsx

@@ -0,0 +1,25 @@
+import { Globe } from 'lucide-react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import countries from 'flag-icons/country.json';
+
+const CODES = new Set(countries.map((country) => country.code));
+
+export function LangFlag({
+  locale,
+  className,
+}: {
+  locale: string;
+  className?: string;
+}) {
+  const region = locale.split(/[-_]/)[1]?.toLowerCase();
+  if (!region || !CODES.has(region)) {
+    return <Globe className={cn('size-4', className)} />;
+  }
+  return (
+    <span
+      aria-hidden
+      className={cn('fi fis rounded-full text-base', `fi-${region}`, className)}
+    />
+  );
+}
+

package/src/components/blocks/lang/link.tsx

@@ -0,0 +1,23 @@
+'use client';
+import NextLink from 'next/link';
+import type { ComponentProps } from 'react';
+import { hrefWithLang } from '@terrafirmagreg-team/translate/lib/url';
+import {
+  useDefaultLang,
+  useResolvedLang,
+} from '@terrafirmagreg-team/translate/hooks/use-resolved-lang';
+
+export function LangLink({
+  href,
+  ...props
+}: ComponentProps<'a'> & { prefetch?: boolean }) {
+  const lang = useResolvedLang();
+  const defaultLang = useDefaultLang();
+  const nextHref =
+    typeof href === 'string' && href.startsWith('/') && !href.startsWith('//')
+      ? hrefWithLang(href, lang, defaultLang)
+      : href;
+
+  return <NextLink href={nextHref ?? href ?? '#'} {...props} />;
+}
+

package/src/components/blocks/lang/redirect.tsx

@@ -0,0 +1,48 @@
+'use client';
+import { Suspense, useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useLocaleRegistry } from '@terrafirmagreg-team/translate/hooks/use-locale-registry';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { resolveLang } from '@terrafirmagreg-team/translate/lib/code';
+import { langFromFragment, withLang } from '@terrafirmagreg-team/translate/lib/url';
+
+function RedirectLink({ href }: { href: string }) {
+  const t = useTranslations();
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center py-16">
+      <a
+        href={href}
+        className="text-sm text-muted-foreground underline underline-offset-4 transition-colors hover:text-accent-foreground"
+      >
+        {t('Redirecting…', { note: 'ui.redirecting' })}
+      </a>
+    </div>
+  );
+}
+
+function Redirect({ to }: { to: string }) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { languages, defaultLanguage } = useLocaleRegistry();
+  const lang = resolveLang(
+    searchParams.get('lang') ??
+      (typeof window === 'undefined'
+        ? undefined
+        : langFromFragment(window.location.hash)),
+    languages,
+    defaultLanguage,
+  );
+  useEffect(() => {
+    router.replace(withLang(to, lang, defaultLanguage));
+  }, [to, router, lang, defaultLanguage]);
+  return <RedirectLink href={withLang(to, lang, defaultLanguage)} />;
+}
+
+export function LangRedirect({ to }: { to: string }) {
+  return (
+    <Suspense fallback={<RedirectLink href={to} />}>
+      <Redirect to={to} />
+    </Suspense>
+  );
+}
+

package/src/components/blocks/lang/switcher.tsx

@@ -0,0 +1,54 @@
+'use client';
+import { useMemo } from 'react';
+import { Languages } from 'lucide-react';
+import { LangFlag } from '@terrafirmagreg-team/ui/components/blocks/lang/flag';
+import { Switcher } from '@terrafirmagreg-team/ui/components/blocks/nav/switcher';
+import type { SwitcherOption, SwitcherProps } from '@terrafirmagreg-team/ui/types/nav';
+
+export type LangSwitcherLocale = string | { locale: string; name?: string };
+
+const languageName = (lang: string): string => {
+  const bcp47 = lang.replace(/_/g, '-');
+  try {
+    const name =
+      new Intl.DisplayNames([bcp47], { type: 'language' }).of(bcp47) ?? lang;
+    return name.charAt(0).toUpperCase() + name.slice(1);
+  } catch {
+    return lang;
+  }
+};
+
+export function LangSwitcher({
+  locales,
+  label,
+  icon,
+  ...props
+}: Omit<SwitcherProps, 'options' | 'header'> & {
+  locales: LangSwitcherLocale[];
+  label?: string;
+}) {
+  const options = useMemo<SwitcherOption[]>(
+    () =>
+      locales.map((item) => {
+        const value = typeof item === 'string' ? item : item.locale;
+        return {
+          value,
+          title:
+            (typeof item === 'string' ? undefined : item.name) ??
+            languageName(value),
+          icon: <LangFlag locale={value} />,
+        };
+      }),
+    [locales],
+  );
+  return (
+    <Switcher
+      options={options}
+      icon={icon ?? <Languages />}
+      placeholder={label}
+      header={label}
+      {...props}
+    />
+  );
+}
+

package/src/components/blocks/lang/untranslated-callout.tsx

@@ -0,0 +1,29 @@
+'use client';
+import { Callout } from '@terrafirmagreg-team/ui/components/mdx/callout';
+import { useUntranslated } from '@terrafirmagreg-team/ui/hooks/use-lang';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import type { TranslationState } from '@terrafirmagreg-team/translate/server';
+
+export function UntranslatedCallout({
+  copied,
+}: {
+
+  copied?: TranslationState;
+}) {
+  const missing = useUntranslated();
+  const t = useTranslations();
+  if (!missing && !copied) return null;
+  const full = missing || copied === 'untranslated';
+  return (
+    <Callout
+      type="warn"
+      title={
+        full ? t('This page is not translated', { note: 'untranslated.title' }) : t('This page is not fully translated', { note: 'untranslated.partial_title' })
+      }
+      className="shrink-0"
+    >
+      <p>{full ? t('Showing the English version. A translation is not available yet.', { note: 'untranslated.body' }) : t('Some content is still shown in English.', { note: 'untranslated.partial_body' })}</p>
+    </Callout>
+  );
+}
+

package/src/components/blocks/lang/untranslated-chip.tsx

@@ -0,0 +1,53 @@
+'use client';
+import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+
+function LanguagesIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden
+    >
+      <path d="m5 8 6 6" />
+      <path d="m4 14 6-6 2-3" />
+      <path d="M2 5h12" />
+      <path d="M7 2h1" />
+      <path d="m22 22-5-10-5 10" />
+      <path d="M14 18h6" />
+    </svg>
+  );
+}
+
+export function UntranslatedChip({ className }: { className?: string }) {
+  const t = useTranslations();
+  return (
+    <Hint
+      side="top"
+      label={
+        <span className="block max-w-56">
+          <span className="mb-0.5 block font-semibold">
+            {t('This page is not translated', { note: 'untranslated.title' })}
+          </span>
+          {t('Showing the English version. A translation is not available yet.', { note: 'untranslated.body' })}
+        </span>
+      }
+    >
+      <span
+        className={cn(
+          'inline-flex cursor-help items-center gap-1 rounded-md bg-amber-500/15 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-600 dark:text-amber-400',
+          className,
+        )}
+      >
+        <LanguagesIcon className="size-3" />
+        {t('Untranslated', { note: 'untranslated.chip' })}
+      </span>
+    </Hint>
+  );
+}