@terrafirmagreg-team/ui 0.0.0-stage → 1.2.0

package/src/components/mdx/accordion.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import { Check, LinkIcon } from 'lucide-react';
+import { type ComponentProps, type ReactNode, useEffect, useRef, useState } from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { Accordion as Primitive } from '@base-ui/react/accordion';
+import { ChevronRight } from 'lucide-react';
+import { useCopyButton } from '@terrafirmagreg-team/ui/hooks/use-copy-button';
+import { buttonVariants } from '@terrafirmagreg-team/ui/components/ui/button';
+import { mergeRefs } from '@terrafirmagreg-team/ui/lib/utils/merge-refs';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+
+export function AccordionRoot({ className, ...props }: ComponentProps<typeof Primitive.Root>) {
+  return (
+    <Primitive.Root
+      className={(s) =>
+        cn(
+          'divide-y divide-border overflow-hidden rounded-lg border bg-card',
+          typeof className === 'function' ? className(s) : className,
+        )
+      }
+      {...props}
+    />
+  );
+}
+
+export function AccordionItem({ children, ...props }: ComponentProps<typeof Primitive.Item>) {
+  return <Primitive.Item {...props}>{children}</Primitive.Item>;
+}
+
+export function AccordionHeader({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof Primitive.Header>) {
+  return (
+    <Primitive.Header
+      className={(s) =>
+        cn(
+          'scroll-m-24 not-prose flex flex-row items-center text-card-foreground font-medium has-focus-visible:bg-accent',
+          typeof className === 'function' ? className(s) : className,
+        )
+      }
+      {...props}
+    >
+      {children}
+    </Primitive.Header>
+  );
+}
+
+export function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof Primitive.Trigger>) {
+  return (
+    <Primitive.Trigger
+      className={(s) =>
+        cn(
+          'group flex flex-1 items-center gap-2 px-3 py-2.5 text-start focus-visible:outline-none',
+          typeof className === 'function' ? className(s) : className,
+        )
+      }
+      {...props}
+    >
+      <ChevronRight className="size-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-panel-open:rotate-90" />
+      {children}
+    </Primitive.Trigger>
+  );
+}
+
+export function AccordionContent({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof Primitive.Panel>) {
+  return (
+    <Primitive.Panel
+      className={(s) =>
+        cn(
+          'h-(--accordion-panel-height) overflow-hidden transition-[height] ease-out data-ending-style:h-0 data-starting-style:h-0',
+          typeof className === 'function' ? className(s) : className,
+        )
+      }
+      {...props}
+    >
+      {children}
+    </Primitive.Panel>
+  );
+}
+
+export function Accordions({
+  ref,
+  className,
+  defaultValue,
+  ...props
+}: ComponentProps<typeof AccordionRoot>) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const composedRef = mergeRefs(ref, rootRef);
+  const [value, setValue] = useState<unknown[]>(defaultValue ?? []);
+
+  useEffect(() => {
+    const id = window.location.hash.substring(1);
+    const element = rootRef.current;
+    if (!element || id.length === 0) return;
+
+    const selected = document.getElementById(id);
+    if (!selected || !element.contains(selected)) return;
+    const value = selected.getAttribute('data-accordion-value');
+
+    if (value) setValue((prev) => [value, ...prev]);
+  }, []);
+
+  return (
+    <AccordionRoot
+      ref={composedRef}
+      value={value}
+      onValueChange={setValue}
+      className={(s) =>
+        cn(
+          'divide-y divide-border overflow-hidden rounded-lg border bg-card',
+          typeof className === 'function' ? className(s) : className,
+        )
+      }
+      {...props}
+    />
+  );
+}
+
+export function Accordion({
+  title,
+  id,
+  value = String(title),
+  children,
+  ...props
+}: Omit<ComponentProps<typeof AccordionItem>, 'value' | 'title'> & {
+  title: string | ReactNode;
+  value?: string;
+}) {
+  return (
+    <AccordionItem value={value} {...props}>
+      <AccordionHeader id={id} data-accordion-value={value}>
+        <AccordionTrigger>{title}</AccordionTrigger>
+        {id ? <CopyButton id={id} /> : null}
+      </AccordionHeader>
+      <AccordionContent hiddenUntilFound>
+        <div className="px-4 pb-2 text-[0.9375rem] prose-no-margin [&[hidden]:not([hidden='until-found'])]:hidden">
+          {children}
+        </div>
+      </AccordionContent>
+    </AccordionItem>
+  );
+}
+
+function CopyButton({ id }: { id: string }) {
+  const t = useTranslations();
+  const { checked, onClick } = useCopyButton(() => {
+    const url = new URL(window.location.href);
+    url.hash = id;
+
+    return navigator.clipboard.writeText(url.toString());
+  });
+
+  return (
+    <button
+      type="button"
+      aria-live="polite"
+      className={cn(
+        buttonVariants({
+          variant: 'ghost',
+          className: 'text-muted-foreground me-2',
+        }),
+      )}
+      onClick={onClick}
+    >
+      {checked ? <Check className="size-3.5" /> : <LinkIcon className="size-3.5" />}
+      <span className="sr-only">
+        {checked
+          ? t('Copied Link', { note: 'ui.copied_link' })
+          : t('Copy Link', { note: 'ui.copy_link' })}
+      </span>
+    </button>
+  );
+}
+

package/src/components/mdx/banner.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import { type HTMLAttributes, useEffect, useState } from 'react';
+import { X } from 'lucide-react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { buttonVariants } from '@terrafirmagreg-team/ui/components/ui/button';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+
+type BannerVariant = 'rainbow' | 'normal';
+
+export type BannerProps = HTMLAttributes<HTMLDivElement> & {
+
+  height?: string;
+
+  variant?: BannerVariant;
+
+  rainbowColors?: string[];
+
+  changeLayout?: boolean;
+};
+
+export function Banner({
+  id,
+  variant = 'normal',
+  changeLayout = true,
+  height = '3rem',
+  rainbowColors = [
+    'rgba(0,149,255,0.56)',
+    'rgba(231,77,255,0.77)',
+    'rgba(255,0,0,0.73)',
+    'rgba(131,255,166,0.66)',
+  ],
+  ...props
+}: BannerProps) {
+  const t = useTranslations();
+  const [open, setOpen] = useState(true);
+  const globalKey = id ? `banner-${encodeBase32(id)}` : null;
+
+  useEffect(() => {
+    if (globalKey && localStorage.getItem(globalKey) === 'true') setOpen(false);
+  }, [globalKey]);
+
+  function onClose() {
+    setOpen(false);
+    if (globalKey) localStorage.setItem(globalKey, 'true');
+  }
+
+  if (!open) return null;
+
+  return (
+    <div
+      id={id}
+      {...props}
+      className={cn(
+        'sticky top-0 z-40 flex flex-row items-center justify-center rounded-xl px-4 text-center text-sm font-medium',
+        variant === 'normal' && 'bg-secondary',
+        variant === 'rainbow' && 'bg-background',
+        !open && 'hidden',
+        props.className,
+      )}
+      style={{
+        height,
+      }}
+    >
+      {changeLayout && open ? (
+        <style>
+          {globalKey
+            ? `:root:not(.${globalKey}) { --banner-height: ${height}; }`
+            : `:root { --banner-height: ${height}; }`}
+        </style>
+      ) : null}
+      {globalKey ? <style>{`.${globalKey} #${id} { display: none; }`}</style> : null}
+      {globalKey ? (
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `if (localStorage.getItem('${globalKey}') === 'true') document.documentElement.classList.add('${globalKey}');`,
+          }}
+        />
+      ) : null}
+
+      {variant === 'rainbow'
+        ? flow({
+            colors: rainbowColors,
+          })
+        : null}
+      {props.children}
+      {id ? (
+        <button
+          type="button"
+          aria-label={t('Close Banner', { note: 'ui.banner_close' })}
+          onClick={onClose}
+          className={cn(
+            buttonVariants({
+              variant: 'ghost',
+              className: 'absolute inset-e-2 top-1/2 -translate-y-1/2 text-muted-foreground/50',
+              size: 'icon-sm',
+            }),
+          )}
+        >
+          <X />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+const maskImage =
+  'linear-gradient(to bottom,white,transparent), radial-gradient(circle at top center, white, transparent)';
+
+function flow({ colors }: { colors: string[] }) {
+  return (
+    <>
+      <div
+        className="absolute inset-0 -z-1"
+        style={{
+          maskImage,
+          maskComposite: 'intersect',
+          animation: 'moving-banner 20s linear infinite',
+          backgroundImage: `repeating-linear-gradient(70deg, ${[...colors, colors[0]].map((color, i) => `${color} ${(i * 50) / colors.length}%`).join(', ')})`,
+          backgroundSize: '200% 100%',
+          filter: 'saturate(2)',
+        }}
+      />
+      <style>
+        {`@keyframes moving-banner {
+            from { background-position: 0% 0;  }
+            to { background-position: 100% 0;  }
+         }`}
+      </style>
+    </>
+  );
+}
+
+function encodeBase32(str: string) {
+  const alphabet = 'abcdefghijklmnopqrstuvwxyz234567';
+  let encoded = '';
+
+  let buffer = 0;
+  let bitsLeft = 0;
+
+  for (let i = 0; i < str.length; i++) {
+    buffer = (buffer << 8) | str.charCodeAt(i);
+    bitsLeft += 8;
+
+    while (bitsLeft >= 5) {
+      bitsLeft -= 5;
+      encoded += alphabet[(buffer >> bitsLeft) & 31];
+    }
+  }
+
+  if (bitsLeft > 0) {
+    encoded += alphabet[(buffer << (5 - bitsLeft)) & 31];
+  }
+
+  return encoded;
+}
+

package/src/components/mdx/callout.tsx

@@ -0,0 +1,97 @@
+import { CircleCheck, CircleX, Info, Lightbulb, StickyNote, TriangleAlert } from 'lucide-react';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { calloutStyle } from '@terrafirmagreg-team/ui/lib/mdx/callout';
+
+export type CalloutType =
+  | 'info'
+  | 'note'
+  | 'tip'
+  | 'warn'
+  | 'warning'
+  | 'error'
+  | 'danger'
+  | 'success'
+  | 'idea';
+
+const iconClass = 'size-5 -me-0.5 fill-(--callout-color) text-card';
+
+const ICONS: Record<string, ReactNode> = {
+  info: <Info className={iconClass} />,
+  note: <StickyNote className={iconClass} />,
+  tip: (
+    <Lightbulb className="size-5 -me-0.5 fill-(--callout-color) text-(--callout-color)" />
+  ),
+  warn: <TriangleAlert className={iconClass} />,
+  warning: <TriangleAlert className={iconClass} />,
+  error: <CircleX className={iconClass} />,
+  danger: <CircleX className={iconClass} />,
+  success: <CircleCheck className={iconClass} />,
+  idea: (
+    <Lightbulb className="size-5 -me-0.5 fill-(--callout-color) text-(--callout-color)" />
+  ),
+};
+
+export function Callout({
+  children,
+  title,
+  ...props
+}: { title?: ReactNode } & Omit<CalloutContainerProps, 'title'>) {
+  return (
+    <CalloutContainer {...props}>
+      {title && <CalloutTitle>{title}</CalloutTitle>}
+      <CalloutDescription>{children}</CalloutDescription>
+    </CalloutContainer>
+  );
+}
+
+export interface CalloutContainerProps extends ComponentProps<'div'> {
+
+  type?: CalloutType;
+
+  icon?: ReactNode;
+}
+
+export function CalloutContainer({
+  type = 'info',
+  icon,
+  children,
+  className,
+  style,
+  ...props
+}: CalloutContainerProps) {
+  return (
+    <div
+      className={cn(
+        'flex gap-2 my-4 rounded-xl border bg-card p-3 ps-1 text-sm text-card-foreground',
+        className,
+      )}
+      style={calloutStyle(type, style)}
+      {...props}
+    >
+      <div role="none" className="w-0.5 bg-(--callout-color)/50 rounded-sm" />
+      {icon ?? ICONS[type]}
+      <div className="flex flex-col gap-2 min-w-0 flex-1">{children}</div>
+    </div>
+  );
+}
+
+export function CalloutTitle({ children, className, ...props }: ComponentProps<'p'>) {
+  return (
+    <p className={cn('font-medium my-0!', className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+export function CalloutDescription({ children, className, ...props }: ComponentProps<'p'>) {
+  return (
+    <div
+      className={cn('text-muted-foreground prose-no-margin empty:hidden', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+

package/src/components/mdx/card.tsx

@@ -0,0 +1,56 @@
+'use client';
+import { useUiComponents } from '@terrafirmagreg-team/ui/provider';
+import type { ComponentProps, ComponentType, HTMLAttributes, ReactNode } from 'react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { Icon } from '@terrafirmagreg-team/ui/components/mdx/icon';
+
+export function Cards(props: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div {...props} className={cn('grid grid-cols-2 gap-3 @container', props.className)}>
+      {props.children}
+    </div>
+  );
+}
+
+export type CardProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+  icon?: ReactNode | string;
+  title: ReactNode;
+  description?: ReactNode;
+
+  href?: string;
+  external?: boolean;
+};
+
+export function Card({ icon, title, description, ...props }: CardProps) {
+  const { Link } = useUiComponents();
+  const { external, href, ...rest } = props;
+  const E = (href ? Link : 'div') as ComponentType<ComponentProps<'a'>>;
+
+  return (
+    <E
+      {...rest}
+      href={href}
+      {...(external
+        ? { target: '_blank', rel: 'noopener noreferrer' }
+        : {})}
+      data-card
+      className={cn(
+        'block rounded-xl border bg-card p-4 text-card-foreground transition-colors @max-lg:col-span-full',
+        props.href && 'hover:bg-accent/80',
+        props.className,
+      )}
+    >
+      {icon ? (
+        <div className="not-prose mb-2 inline-flex h-7 min-w-8 items-center justify-center rounded-lg border bg-muted px-2 text-muted-foreground shadow-md [&_svg]:size-4">
+          {typeof icon === 'string' ? <Icon name={icon} /> : icon}
+        </div>
+      ) : null}
+      <h3 className="not-prose mb-1 text-sm font-medium">{title}</h3>
+      {description ? <p className="my-0! text-sm text-muted-foreground">{description}</p> : null}
+      <div className="text-sm text-muted-foreground prose-no-margin empty:hidden">
+        {props.children}
+      </div>
+    </E>
+  );
+}
+