@terrafirmagreg-team/ui 0.0.0-stage → 1.2.0

package/src/components/mdx/tabs.tsx

@@ -0,0 +1,354 @@
+'use client';
+
+import * as React from 'react';
+import {
+  type ComponentProps,
+  createContext,
+  type ReactNode,
+  use,
+  useContext,
+  useEffect,
+  useEffectEvent,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { mergeRefs } from '@terrafirmagreg-team/ui/lib/utils/merge-refs';
+import { Tabs as Primitive } from '@base-ui/react/tabs';
+
+type ChangeListener = (v: string) => void;
+const listeners = new Map<string, Set<ChangeListener>>();
+
+export interface BaseTabsProps extends ComponentProps<typeof Primitive.Root> {
+
+  groupId?: string;
+
+  persist?: boolean;
+
+  updateAnchor?: boolean;
+
+  onValueChange?: (value: string) => void;
+}
+
+const BaseTabsContext = createContext<{
+  valueToIdMap: Map<string, string>;
+
+  panels: Map<string, HTMLElement>;
+
+  triggers: Set<string>;
+} | null>(null);
+
+function useBaseTabContext() {
+  const ctx = use(BaseTabsContext);
+  if (!ctx) throw new Error('You must wrap your component in <BaseTabs>');
+  return ctx;
+}
+
+export const BaseTabsList = Primitive.List;
+
+export function BaseTabsTrigger({ value, ref, ...props }: ComponentProps<typeof Primitive.Tab>) {
+  const { triggers } = useBaseTabContext();
+
+  return (
+    <Primitive.Tab
+      ref={mergeRefs(ref, (element) => {
+        if (element) triggers.add(value);
+        else triggers.delete(value);
+      })}
+      value={value}
+      {...props}
+    />
+  );
+}
+
+export function BaseTabs({
+  ref,
+  groupId,
+  persist = false,
+  updateAnchor = false,
+  defaultValue,
+  value: _value,
+  onValueChange: _onValueChange,
+  ...props
+}: BaseTabsProps) {
+  const tabsRef = useRef<HTMLDivElement>(null);
+  const valueToIdMap = useMemo(() => new Map<string, string>(), []);
+  const panels = useMemo(() => new Map<string, HTMLElement>(), []);
+  const triggers = useMemo(() => new Set<string>(), []);
+  const [value, setValue] =
+    _value === undefined
+      ? // eslint-disable-next-line react-hooks/rules-of-hooks -- not supposed to change controlled/uncontrolled
+        useState(defaultValue)
+      : // eslint-disable-next-line react-hooks/rules-of-hooks -- not supposed to change controlled/uncontrolled
+        [_value, (v: string) => _onValueChange?.(v)];
+
+  const onChange = useEffectEvent((v: string) => {
+    if (triggers.has(v)) setValue(v);
+  });
+
+  const openFromHash = useEffectEvent(() => {
+    const hash = window.location.hash.slice(1);
+    if (!hash) return;
+
+    for (const [value, id] of valueToIdMap.entries()) {
+      if (id === hash) {
+        setValue(value);
+        tabsRef.current?.scrollIntoView();
+        return;
+      }
+    }
+
+    const target = document.getElementById(hash);
+    if (!target) return;
+
+    for (const [value, panel] of panels.entries()) {
+      if (!panel.contains(target)) continue;
+
+      setValue(value);
+      requestAnimationFrame(() => target.scrollIntoView());
+      return;
+    }
+  });
+
+  useLayoutEffect(() => {
+    if (!groupId) return;
+    let previous = sessionStorage.getItem(groupId);
+    if (persist) previous ??= localStorage.getItem(groupId);
+    if (previous) onChange(previous);
+
+    const groupListeners = listeners.get(groupId) ?? new Set();
+    groupListeners.add(onChange);
+    listeners.set(groupId, groupListeners);
+    return () => {
+      groupListeners.delete(onChange);
+    };
+  }, [groupId, persist]);
+
+  useLayoutEffect(() => {
+    openFromHash();
+    window.addEventListener('hashchange', openFromHash);
+    return () => window.removeEventListener('hashchange', openFromHash);
+  }, []);
+
+  return (
+    <Primitive.Root
+      ref={mergeRefs(ref, tabsRef)}
+      value={value}
+      onValueChange={(v: string) => {
+        if (updateAnchor) {
+          const id = valueToIdMap.get(v);
+
+          if (id) {
+            window.history.replaceState(null, '', `#${id}`);
+          }
+        }
+
+        if (groupId) {
+          const groupListeners = listeners.get(groupId);
+          if (groupListeners) {
+            for (const listener of groupListeners) listener(v);
+          }
+
+          sessionStorage.setItem(groupId, v);
+          if (persist) localStorage.setItem(groupId, v);
+        } else {
+          setValue(v);
+        }
+      }}
+      {...props}
+    >
+      <BaseTabsContext
+        value={useMemo(
+          () => ({ valueToIdMap, panels, triggers }),
+          [valueToIdMap, panels, triggers],
+        )}
+      >
+        {props.children}
+      </BaseTabsContext>
+    </Primitive.Root>
+  );
+}
+
+export function BaseTabsContent({ value, ref, ...props }: ComponentProps<typeof Primitive.Panel>) {
+  const { valueToIdMap, panels } = useBaseTabContext();
+
+  if (props.id) {
+    valueToIdMap.set(value, props.id);
+  }
+
+  return (
+    <Primitive.Panel
+      ref={mergeRefs(ref, (element) => {
+        if (element) panels.set(value, element);
+        else panels.delete(value);
+      })}
+      value={value}
+      {...props}
+    >
+      {props.children}
+    </Primitive.Panel>
+  );
+}
+
+type CollectionKey = string | symbol;
+
+export interface TabsProps extends Omit<
+  ComponentProps<typeof BaseTabs>,
+  'value' | 'onValueChange'
+> {
+
+  items?: string[];
+
+  defaultIndex?: number;
+
+  label?: ReactNode;
+}
+
+const TabsContext = createContext<{
+  items?: string[];
+  collection: CollectionKey[];
+} | null>(null);
+
+function useTabContext() {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error('You must wrap your component in <Tabs>');
+  return ctx;
+}
+
+export function TabsList({ className, ...props }: React.ComponentProps<typeof BaseTabsList>) {
+  return (
+    <BaseTabsList
+      {...props}
+      className={(s) =>
+        cn(
+          'flex gap-3.5 text-secondary-foreground overflow-x-auto px-4 not-prose border-b border-border',
+          typeof className === 'function' ? className(s) : className,
+        )
+      }
+    />
+  );
+}
+
+export function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof BaseTabsTrigger>) {
+  return (
+    <BaseTabsTrigger
+      {...props}
+      className={(s) =>
+        cn(
+          'inline-flex items-center gap-2 whitespace-nowrap text-muted-foreground border-b border-transparent py-2 text-sm font-medium transition-colors [&_svg]:size-4 hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[active]:border-primary data-[active]:text-primary',
+          typeof className === 'function' ? className(s) : className,
+        )
+      }
+    />
+  );
+}
+
+export function Tabs({
+  ref,
+  className,
+  items,
+  label,
+  defaultIndex = 0,
+  defaultValue = items ? escapeValue(items[defaultIndex]) : undefined,
+  ...props
+}: TabsProps) {
+  const collection = useMemo<CollectionKey[]>(() => [], []);
+
+  return (
+    <BaseTabs
+      ref={ref}
+      className={(s) =>
+        cn(
+          'flex flex-col overflow-hidden rounded-xl border bg-secondary my-4',
+          typeof className === 'function' ? className(s) : className,
+        )
+      }
+      defaultValue={defaultValue}
+      {...props}
+    >
+      {items && (
+        <TabsList>
+          {label && <span className="text-sm font-medium my-auto me-auto">{label}</span>}
+          {items.map((item) => (
+            <TabsTrigger key={item} value={escapeValue(item)}>
+              {item}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      )}
+      <TabsContext.Provider value={useMemo(() => ({ items, collection }), [collection, items])}>
+        {props.children}
+      </TabsContext.Provider>
+    </BaseTabs>
+  );
+}
+
+export interface TabProps extends Omit<ComponentProps<typeof BaseTabsContent>, 'value'> {
+
+  value?: string;
+}
+
+export function Tab({ value, ...props }: TabProps) {
+  const { items } = useTabContext();
+  const resolved =
+    value ??
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- `value` is not supposed to change
+    items?.at(useCollectionIndex());
+  if (!resolved)
+    throw new Error(
+      'Failed to resolve tab `value`, please pass a `value` prop to the Tab component.',
+    );
+
+  return (
+    <TabsContent value={escapeValue(resolved)} {...props}>
+      {props.children}
+    </TabsContent>
+  );
+}
+
+export function TabsContent({
+  value,
+  className,
+  ...props
+}: ComponentProps<typeof BaseTabsContent>) {
+  return (
+    <BaseTabsContent
+      value={value}
+      className={(s) =>
+        cn(
+          'p-4 text-[0.9375rem] bg-background rounded-xl outline-none prose-no-margin data-[inactive]:hidden [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none',
+          typeof className === 'function' ? className(s) : className,
+        )
+      }
+      {...props}
+    >
+      {props.children}
+    </BaseTabsContent>
+  );
+}
+
+function useCollectionIndex() {
+  const key = useId();
+  const { collection } = useTabContext();
+
+  useEffect(() => {
+    return () => {
+      const idx = collection.indexOf(key);
+      if (idx !== -1) collection.splice(idx, 1);
+    };
+  }, [key, collection]);
+
+  if (!collection.includes(key)) collection.push(key);
+  return collection.indexOf(key);
+}
+
+function escapeValue(v: string): string {
+  return v.toLowerCase().replace(/\s/, '-');
+}
+

package/src/components/mdx/type-table.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import { ChevronDown } from 'lucide-react';
+import { useUiComponents } from '@terrafirmagreg-team/ui/provider';
+import { cva } from 'class-variance-authority';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { type ComponentProps, type ReactNode, useEffect, useState } from 'react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+
+export interface ParameterNode {
+  name: string;
+  description: ReactNode;
+}
+
+export interface TypeNode {
+
+  description?: ReactNode;
+
+  type: ReactNode;
+
+  typeDescription?: ReactNode;
+
+  typeDescriptionLink?: string;
+
+  default?: ReactNode;
+
+  required?: boolean;
+  deprecated?: boolean;
+
+  parameters?: ParameterNode[];
+
+  returns?: ReactNode;
+}
+
+const fieldVariants = cva('text-muted-foreground not-prose pe-2');
+
+export function TypeTable({
+  id,
+  type,
+  className,
+  ...props
+}: { type: Record<string, TypeNode> } & ComponentProps<'div'>) {
+  const t = useTranslations();
+
+  return (
+    <div
+      id={id}
+      className={cn(
+        '@container flex flex-col p-1 bg-card text-card-foreground rounded-2xl border my-6 text-sm overflow-hidden',
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex font-medium items-center px-3 py-1 not-prose text-muted-foreground">
+        <p className="w-1/4">{t('Prop', { note: 'ui.prop' })}</p>
+        <p className="@max-xl:hidden">{t('Type', { note: 'ui.type' })}</p>
+      </div>
+      {Object.entries(type).map(([key, value]) => (
+        <Item key={key} parentId={id} name={key} item={value} />
+      ))}
+    </div>
+  );
+}
+
+function Item({
+  parentId,
+  name,
+  item: {
+    parameters = [],
+    description,
+    required = false,
+    deprecated,
+    typeDescription,
+    default: defaultValue,
+    type,
+    typeDescriptionLink,
+    returns,
+  },
+}: {
+  parentId?: string;
+  name: string;
+  item: TypeNode;
+}) {
+  const t = useTranslations();
+  const { Link } = useUiComponents();
+  const [open, setOpen] = useState(false);
+  const id = parentId ? `${parentId}-${name}` : undefined;
+
+  useEffect(() => {
+    const hash = window.location.hash;
+    if (!id || !hash) return;
+    if (`#${id}` === hash) setOpen(true);
+  }, [id]);
+
+  return (
+    <Collapsible
+      id={id}
+      open={open}
+      onOpenChange={(v) => {
+        if (v && id) {
+          window.history.replaceState(null, '', `#${id}`);
+        }
+        setOpen(v);
+      }}
+      className={cn(
+        'rounded-xl border overflow-hidden scroll-m-20 transition-all',
+        open ? 'shadow-sm bg-background not-last:mb-2' : 'border-transparent',
+      )}
+    >
+      <CollapsibleTrigger className="relative flex flex-row items-center w-full group text-start px-3 py-2 not-prose hover:bg-accent">
+        <code
+          className={cn(
+            'text-primary min-w-fit w-1/4 font-mono font-medium pe-2',
+            deprecated && 'line-through text-primary/50',
+          )}
+        >
+          {name}
+          {!required && '?'}
+        </code>
+        {typeDescriptionLink ? (
+          <Link href={typeDescriptionLink} className="underline @max-xl:hidden">
+            {type}
+          </Link>
+        ) : (
+          <span className="@max-xl:hidden">{type}</span>
+        )}
+        <ChevronDown className="absolute inset-e-2 size-4 text-muted-foreground transition-transform group-data-[open]:rotate-180" />
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="grid grid-cols-[1fr_3fr] gap-y-4 text-sm p-3 overflow-auto scroll-container border-t">
+          <div className="prose prose-sm col-span-full prose-no-margin empty:hidden">
+            {description}
+          </div>
+          {typeDescription && (
+            <>
+              <p className={cn(fieldVariants())}>{t('Type', { note: 'ui.type' })}</p>
+              <p className="my-auto not-prose">{typeDescription}</p>
+            </>
+          )}
+          {defaultValue && (
+            <>
+              <p className={cn(fieldVariants())}>{t('Default', { note: 'ui.default' })}</p>
+              <p className="my-auto not-prose">{defaultValue}</p>
+            </>
+          )}
+          {parameters.length > 0 && (
+            <>
+              <p className={cn(fieldVariants())}>{t('Parameters', { note: 'ui.parameters' })}</p>
+              <div className="flex flex-col gap-2">
+                {parameters.map((param) => (
+                  <div key={param.name} className="inline-flex items-center flex-wrap gap-1">
+                    <p className="font-medium not-prose text-nowrap">{param.name} -</p>
+                    <div className="prose prose-sm prose-no-margin">{param.description}</div>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+          {returns && (
+            <>
+              <p className={cn(fieldVariants())}>{t('Returns', { note: 'ui.returns' })}</p>
+              <div className="my-auto prose prose-sm prose-no-margin">{returns}</div>
+            </>
+          )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+

package/src/components/provider.tsx

@@ -0,0 +1,139 @@
+'use client';
+import Link from 'next/link';
+import {
+  createContext,
+  useContext,
+  useMemo,
+  type ComponentProps,
+  type ComponentType,
+  type ReactNode,
+} from 'react';
+import { flushSync } from 'react-dom';
+import { DirectionProvider } from '@base-ui/react/direction-provider';
+import {
+  ThemeProvider,
+  useTheme,
+  type ThemeProviderProps,
+} from 'next-themes';
+import { TranslationProvider } from '@terrafirmagreg-team/translate';
+import { useHotKey } from '@terrafirmagreg-team/ui/hooks/use-hot-key';
+
+export type UiLinkProps = { href: string; prefetch?: boolean } & Omit<
+  ComponentProps<'a'>,
+  'href'
+>;
+
+export type UiComponents = {
+  Link?: ComponentType<UiLinkProps>;
+};
+
+const defaults: Required<UiComponents> = {
+  Link: Link as ComponentType<UiLinkProps>,
+};
+
+const UiComponentsContext = createContext<UiComponents | null>(null);
+
+export function UiProvider({
+  components,
+  translations,
+  children,
+}: {
+  components?: UiComponents;
+  translations?: Record<string, string>;
+  children: ReactNode;
+}) {
+  const parent = useContext(UiComponentsContext);
+  const merged = useMemo(
+    () => ({ ...parent, ...components }),
+    [parent, components],
+  );
+  const inner = (
+    <UiComponentsContext.Provider value={merged}>
+      {children}
+    </UiComponentsContext.Provider>
+  );
+  if (!translations) return inner;
+  return (
+    <TranslationProvider translations={translations}>
+      {inner}
+    </TranslationProvider>
+  );
+}
+
+export function useUiComponents(): Required<UiComponents> {
+  return { ...defaults, ...useContext(UiComponentsContext) };
+}
+
+export interface ThemeOptions extends ThemeProviderProps {
+
+  enabled?: boolean;
+
+  hotKey?: string | ((e: KeyboardEvent) => boolean) | false;
+}
+
+function ThemeHotKey({
+  hotKey,
+}: {
+  hotKey: Exclude<ThemeOptions['hotKey'], false | undefined>;
+}) {
+  const { setTheme, resolvedTheme } = useTheme();
+
+  useHotKey(
+    (e) => {
+
+      const matched =
+        typeof hotKey === 'string'
+          ? !e.metaKey &&
+            !e.ctrlKey &&
+            !e.altKey &&
+            e.key.toLowerCase() === hotKey.toLowerCase()
+          : hotKey(e);
+      if (!matched) return;
+
+      e.preventDefault();
+      const next = resolvedTheme === 'dark' ? 'light' : 'dark';
+      if (document?.startViewTransition) {
+        document.startViewTransition(() => flushSync(() => setTheme(next)));
+      } else {
+        setTheme(next);
+      }
+    },
+    { ignoreTyping: true },
+  );
+
+  return null;
+}
+
+export function UiRootProvider({
+  children,
+  dir = 'ltr',
+  theme = {},
+}: {
+  children?: ReactNode;
+
+  dir?: 'rtl' | 'ltr';
+
+  theme?: ThemeOptions;
+}) {
+  let body = children;
+
+  if (theme?.enabled !== false) {
+    const { enabled: _, hotKey = 'd', ...themeProps } = theme;
+
+    body = (
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+        {...themeProps}
+      >
+        {hotKey !== false && <ThemeHotKey hotKey={hotKey} />}
+        {body}
+      </ThemeProvider>
+    );
+  }
+
+  return <DirectionProvider direction={dir}>{body}</DirectionProvider>;
+}
+