@terrafirmagreg-team/ui 0.0.0-stage → 1.2.0

package/src/components/mdx/codeblock.tsx

@@ -0,0 +1,250 @@
+'use client';
+import { Check, Clipboard } from 'lucide-react';
+import {
+  type ComponentProps,
+  type CSSProperties,
+  createContext,
+  type HTMLAttributes,
+  type ReactNode,
+  type RefObject,
+  use,
+  useMemo,
+  useRef,
+} from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { useCopyButton } from '@terrafirmagreg-team/ui/hooks/use-copy-button';
+import { buttonVariants } from '@terrafirmagreg-team/ui/components/ui/button';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
+import { mergeRefs } from '@terrafirmagreg-team/ui/lib/utils/merge-refs';
+
+export interface CodeBlockProps extends Omit<ComponentProps<'figure'>, 'title'> {
+  title?: ReactNode;
+
+  icon?: ReactNode;
+
+  allowCopy?: boolean | 'true' | 'false';
+
+  keepBackground?: boolean;
+
+  viewportProps?: HTMLAttributes<HTMLElement>;
+
+  'data-line-numbers'?: boolean;
+
+  'data-line-numbers-start'?: number;
+
+  Actions?: (props: { className?: string; children?: ReactNode }) => ReactNode;
+}
+
+const TabsContext = createContext<{
+  containerRef: RefObject<HTMLDivElement | null>;
+  nested: boolean;
+} | null>(null);
+
+export function Pre(props: ComponentProps<'pre'>) {
+  return (
+    <pre {...props} className={cn('min-w-full w-max *:flex *:flex-col', props.className)}>
+      {props.children}
+    </pre>
+  );
+}
+
+export function CodeBlock({
+  ref,
+  title,
+  allowCopy = true,
+  keepBackground = false,
+  icon,
+  viewportProps = {},
+  children,
+  Actions = (props) => <div {...props} className={cn('empty:hidden', props.className)} />,
+  ...props
+}: CodeBlockProps) {
+  const inTab = use(TabsContext) !== null;
+  const areaRef = useRef<HTMLDivElement>(null);
+  if (allowCopy === 'true') allowCopy = true;
+  else if (allowCopy === 'false') allowCopy = false;
+  return (
+    <figure
+      ref={ref}
+      dir="ltr"
+      {...props}
+      tabIndex={-1}
+      className={cn(
+        inTab ? 'bg-secondary -mx-px -mb-px last:rounded-b-xl' : 'my-4 bg-card rounded-xl',
+        keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)',
+
+        'shiki relative border not-prose overflow-hidden text-sm',
+        props.className,
+      )}
+    >
+      {title ? (
+        <div className="flex text-muted-foreground items-center gap-2 h-9.5 border-b px-4">
+          {typeof icon === 'string' ? (
+            <div
+              className="[&_svg]:size-3.5"
+              dangerouslySetInnerHTML={{
+                __html: icon,
+              }}
+            />
+          ) : (
+            icon
+          )}
+          <figcaption className="flex-1 truncate">{title}</figcaption>
+          {Actions({
+            className: '-me-2',
+            children: allowCopy && <CopyButton containerRef={areaRef} />,
+          })}
+        </div>
+      ) : (
+        Actions({
+          className:
+            'absolute top-2 right-2 z-2 backdrop-blur-lg rounded-lg text-muted-foreground',
+          children: allowCopy && <CopyButton containerRef={areaRef} />,
+        })
+      )}
+      <div
+        ref={areaRef}
+        {...viewportProps}
+        role="region"
+        tabIndex={0}
+        className={cn(
+          'text-[0.8125rem] py-3.5 overflow-auto max-h-[600px] scroll-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',
+          viewportProps.className,
+        )}
+        style={
+          {
+
+            '--padding-right': !title ? 'calc(var(--spacing) * 8)' : undefined,
+            counterSet: props['data-line-numbers']
+              ? `line ${Number(props['data-line-numbers-start'] ?? 1) - 1}`
+              : undefined,
+            ...viewportProps.style,
+          } as CSSProperties
+        }
+      >
+        {children}
+      </div>
+    </figure>
+  );
+}
+
+function CopyButton({
+  className,
+  containerRef,
+  ...props
+}: ComponentProps<'button'> & {
+  containerRef: RefObject<HTMLElement | null>;
+}) {
+  const t = useTranslations();
+  const { checked, onClick } = useCopyButton(() => {
+    const pre = containerRef.current?.getElementsByTagName('pre').item(0);
+    if (!pre) return;
+
+    const clone = pre.cloneNode(true) as HTMLElement;
+    clone.querySelectorAll('.copy-ignore, .nd-copy-ignore').forEach((node) => {
+      node.replaceWith('\n');
+    });
+
+    return navigator.clipboard.writeText(clone.textContent ?? '');
+  });
+
+  return (
+    <button
+      type="button"
+      data-checked={checked || undefined}
+      className={cn(
+        buttonVariants({
+          variant: 'ghost',
+          className: 'hover:text-accent-foreground data-checked:text-accent-foreground',
+          size: 'icon-xs',
+        }),
+        className,
+      )}
+      aria-live="polite"
+      onClick={onClick}
+      {...props}
+    >
+      {checked ? <Check /> : <Clipboard />}
+      <span className="sr-only">
+        {checked
+          ? t('Copied Text', { note: 'ui.copied_text' })
+          : t('Copy Text', { note: 'ui.copy_text' })}
+      </span>
+    </button>
+  );
+}
+
+export function CodeBlockTabs({ ref, className, ...props }: ComponentProps<typeof Tabs>) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const nested = use(TabsContext) !== null;
+
+  return (
+    <Tabs
+      ref={mergeRefs(containerRef, ref)}
+      {...props}
+      className={(s) =>
+        cn(
+          'bg-card rounded-xl border',
+          !nested && 'my-4',
+          typeof className === 'function' ? className(s) : className,
+        )
+      }
+    >
+      <TabsContext
+        value={useMemo(
+          () => ({
+            containerRef,
+            nested,
+          }),
+          [nested],
+        )}
+      >
+        {props.children}
+      </TabsContext>
+    </Tabs>
+  );
+}
+
+export function CodeBlockTabsList({ className, ...props }: ComponentProps<typeof TabsList>) {
+  return (
+    <TabsList
+      {...props}
+      className={(s) =>
+        cn(
+          'flex flex-row px-2 overflow-x-auto text-muted-foreground',
+          typeof className === 'function' ? className(s) : className,
+        )
+      }
+    >
+      {props.children}
+    </TabsList>
+  );
+}
+
+export function CodeBlockTabsTrigger({
+  children,
+  className,
+  ...props
+}: ComponentProps<typeof TabsTrigger>) {
+  return (
+    <TabsTrigger
+      {...props}
+      className={(s) =>
+        cn(
+          'relative group inline-flex text-sm font-medium text-nowrap items-center transition-colors gap-2 px-2 py-1.5 [&_svg]:size-3.5 border-b-0',
+          s.active ? 'text-primary' : 'hover:text-accent-foreground',
+          typeof className === 'function' ? className(s) : className,
+        )
+      }
+    >
+      <div className="absolute inset-x-2 bottom-0 h-px group-data-active:bg-primary" />
+      {children}
+    </TabsTrigger>
+  );
+}
+
+export function CodeBlockTab(props: ComponentProps<typeof TabsContent>) {
+  return <TabsContent {...props} />;
+}
+

package/src/components/mdx/collapsible.tsx

@@ -0,0 +1,33 @@
+'use client';
+import { Collapsible as Primitive } from '@base-ui/react/collapsible';
+import type { ComponentProps } from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+export const Collapsible = Primitive.Root;
+
+export const CollapsibleTrigger = Primitive.Trigger;
+
+export function CollapsibleContent({
+  children,
+  className,
+  ...props
+}: ComponentProps<typeof Primitive.Panel>) {
+  return (
+    <Primitive.Panel
+      {...props}
+      className={(s) =>
+        cn(
+          "overflow-hidden [&[hidden]:not([hidden='until-found'])]:hidden h-(--collapsible-panel-height) transition-[height,opacity] data-starting-style:opacity-0 data-starting-style:h-0 data-ending-style:h-0 data-ending-style:opacity-0",
+          typeof className === 'function' ? className(s) : className,
+        )
+      }
+    >
+      {children}
+    </Primitive.Panel>
+  );
+}
+
+export type CollapsibleProps = Primitive.Root.Props;
+export type CollapsibleContentProps = Primitive.Panel.Props;
+export type CollapsibleTriggerProps = Primitive.Trigger.Props;
+

package/src/components/mdx/files.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { cva } from 'class-variance-authority';
+import { FileIcon, FolderIcon, FolderOpen } from 'lucide-react';
+import { type HTMLAttributes, type ReactNode, useState } from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible';
+
+const itemVariants = cva(
+  'flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground [&_svg]:size-4',
+);
+
+export function Files({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.ReactElement {
+  return (
+    <div className={cn('not-prose rounded-md border bg-card p-2', className)} {...props}>
+      {props.children}
+    </div>
+  );
+}
+
+export interface FileProps extends HTMLAttributes<HTMLDivElement> {
+  name: string;
+  icon?: ReactNode;
+}
+
+export interface FolderProps extends HTMLAttributes<HTMLDivElement> {
+  name: string;
+
+  disabled?: boolean;
+
+  defaultOpen?: boolean;
+}
+
+export function File({
+  name,
+  icon = <FileIcon />,
+  className,
+  ...rest
+}: FileProps): React.ReactElement {
+  return (
+    <div className={cn(itemVariants({ className }))} {...rest}>
+      {icon}
+      {name}
+    </div>
+  );
+}
+
+export function Folder({ name, defaultOpen = false, ...props }: FolderProps): React.ReactElement {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen} {...props}>
+      <CollapsibleTrigger className={cn(itemVariants({ className: 'w-full' }))}>
+        {open ? <FolderOpen /> : <FolderIcon />}
+        {name}
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="ms-2 flex flex-col border-l ps-2">{props.children}</div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+

package/src/components/mdx/glow-header.tsx

@@ -0,0 +1,54 @@
+import type { ComponentProps } from 'react';
+import { gradientImage, type GradientProps } from '@terrafirmagreg-team/ui/lib/mdx/gradient';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+export function GlowHeader({
+  fade,
+  gradient,
+  from,
+  to,
+  dir,
+  image,
+  style,
+  className,
+  children,
+  ...props
+}: GradientProps & { fade?: boolean; gradient?: boolean } & ComponentProps<'span'>) {
+  const boxFrom = from ?? '#fa18cf';
+  const boxTo = to ?? '#ff7967';
+  const gradientBg = gradientImage({ from, to, dir, image });
+  const boxBg = `radial-gradient(color-mix(in srgb, ${boxFrom} 18%, transparent), color-mix(in srgb, ${boxTo} 8%, transparent))`;
+  return (
+    <span
+      className={cn(
+        'relative mb-6 inline-block rounded-[20px] px-4 py-2.5 text-center',
+        className,
+      )}
+      style={{
+        backgroundImage: gradient ? `${gradientBg}, ${boxBg}` : boxBg,
+        ...(gradient && {
+          WebkitBackgroundClip: 'text, border-box',
+          backgroundClip: 'text, border-box',
+          WebkitTextFillColor: 'transparent',
+        }),
+        boxShadow: `0 10px 20px color-mix(in srgb, ${boxFrom} 25%, transparent)`,
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+      {fade && (
+        <span
+          aria-hidden
+          className="pointer-events-none absolute inset-x-4 -bottom-0.5 h-0.5 rounded-full"
+          style={{
+            backgroundImage: gradientBg,
+            maskImage:
+              'linear-gradient(to right, transparent, black 25%, black 75%, transparent)',
+          }}
+        />
+      )}
+    </span>
+  );
+}
+

package/src/components/mdx/gradient-text.tsx

@@ -0,0 +1,28 @@
+import type { ComponentProps } from 'react';
+import { gradientImage, type GradientProps } from '@terrafirmagreg-team/ui/lib/mdx/gradient';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+export function GradientText({
+  from,
+  to,
+  dir,
+  image,
+  style,
+  className,
+  ...props
+}: GradientProps & ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn('text-transparent', className)}
+      style={{
+        backgroundImage: gradientImage({ from, to, dir, image }),
+        WebkitBackgroundClip: 'text',
+        backgroundClip: 'text',
+        WebkitTextFillColor: 'transparent',
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}
+

package/src/components/mdx/icon.tsx

@@ -0,0 +1,35 @@
+import { icons, type LucideProps } from 'lucide-react';
+import * as SI from '@icons-pack/react-simple-icons';
+import type { ComponentType } from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+const registry = icons as Record<string, ComponentType<LucideProps>>;
+const brands = SI as unknown as Record<string, ComponentType<LucideProps>>;
+
+function toPascal(name: string): string {
+  return name
+    .split(/[-_\s]+/)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
+}
+
+export function Icon({
+  name,
+  className,
+  ...props
+}: { name: string } & LucideProps) {
+  const Component =
+    registry[name] ?? registry[toPascal(name)] ?? brands[`Si${toPascal(name)}`];
+  if (!Component) return null;
+  return (
+    <Component
+      className={cn(
+        'inline-block align-[-0.125em]',
+        props.size === undefined && 'size-[1em]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+