@instantdb/components 0.0.1

package/src/components/explorer/table-components.tsx

@@ -0,0 +1,341 @@
+import React from 'react';
+import {
+  cn,
+  Fence,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@lib/components/ui';
+import {
+  Cell,
+  flexRender,
+  Header,
+  HeaderGroup,
+  Table,
+} from '@tanstack/react-table';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+import clsx from 'clsx';
+import { CSSProperties, useEffect, useState } from 'react';
+import {
+  ArrowDownIcon,
+  ArrowsUpDownIcon,
+  ArrowUpIcon,
+} from '@heroicons/react/24/outline';
+import { useIsOverflow } from '@lib/hooks/useIsOverflow';
+import { isObject } from 'lodash';
+import copy from 'copy-to-clipboard';
+import { useExplorerProps, useExplorerState } from '.';
+import { TableColMeta } from './inner-explorer';
+
+export const TableHeader = ({
+  header,
+  table,
+  headerGroup,
+  index,
+  setMinViableColWidth,
+  onSort,
+  currentSortAttr,
+  currentSortAsc,
+}: {
+  header: Header<any, any>;
+  table: Table<any>;
+  headerGroup: HeaderGroup<any>;
+  index: number;
+  setMinViableColWidth: (columnId: string) => void;
+  onSort?: (
+    attrName: string,
+    currentAttr: string | undefined,
+    currentAsc?: boolean,
+  ) => void;
+  currentSortAttr?: string;
+  currentSortAsc?: boolean;
+}) => {
+  const {
+    attributes,
+    setActivatorNodeRef,
+    isDragging,
+    listeners,
+    setNodeRef,
+    transform,
+  } = useSortable({
+    id: header.column.id,
+    disabled: header.id === 'select-col',
+  });
+
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.8 : 1,
+    position: 'relative',
+    transform:
+      header.id === 'select-col'
+        ? undefined
+        : CSS.Translate.toString(transform), // translate instead of transform to avoid squishing
+    transition: 'width transform 0.2s ease-in-out',
+    whiteSpace: 'nowrap',
+    width: header.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+  };
+
+  const meta = header.column.columnDef?.meta as TableColMeta | null;
+
+  const isSortable = !!meta?.sortable;
+
+  const headerText =
+    typeof header.column.columnDef.header === 'string'
+      ? header.column.columnDef.header
+      : '';
+
+  // Check if this column is currently sorted
+  const isCurrentSort =
+    currentSortAttr === headerText ||
+    (currentSortAttr === 'serverCreatedAt' && headerText === 'id');
+
+  return (
+    <div
+      key={header.id}
+      ref={setNodeRef}
+      className={clsx(
+        'group relative z-10 h-8 w-full whitespace-nowrap select-none',
+      )}
+      style={{
+        ...style,
+        width: header.getSize() !== 0 ? header.getSize() : undefined,
+      }}
+    >
+      {header.id !== 'select-col' && (
+        <button
+          className="absolute inset-0 z-0 hover:cursor-grab active:cursor-grabbing"
+          {...attributes}
+          {...listeners}
+          ref={setActivatorNodeRef}
+          style={{ pointerEvents: 'auto' }}
+        />
+      )}
+      <div className="flex h-full items-stretch justify-between overflow-hidden">
+        <div
+          className={`flex shrink items-center gap-1 truncate px-2 py-1 font-semibold th-${header.column.id}`}
+        >
+          {isSortable ? (
+            <button
+              className="relative z-50 flex items-center gap-1 py-2 pr-5"
+              onClick={() => {
+                if (onSort) {
+                  let thisAttrName =
+                    headerText === 'id' ? 'serverCreatedAt' : headerText;
+                  onSort(thisAttrName, currentSortAttr, currentSortAsc);
+                }
+              }}
+            >
+              <span className={cn(isCurrentSort && 'underline')}>
+                {header.isPlaceholder
+                  ? null
+                  : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
+              </span>
+              <span
+                className="opacity-50 transition-opacity group-hover:opacity-70"
+                style={{
+                  opacity: isCurrentSort ? 1 : undefined,
+                  fontWeight: isCurrentSort ? 'bold' : 'normal',
+                }}
+              >
+                {isCurrentSort ? (
+                  currentSortAsc ? (
+                    <ArrowUpIcon strokeWidth={3} width={10} />
+                  ) : (
+                    <ArrowDownIcon strokeWidth={3} width={10} />
+                  )
+                ) : (
+                  <ArrowsUpDownIcon strokeWidth={3} width={10} />
+                )}
+              </span>
+            </button>
+          ) : (
+            <>
+              {header.isPlaceholder
+                ? null
+                : flexRender(
+                    header.column.columnDef.header,
+                    header.getContext(),
+                  )}
+            </>
+          )}
+        </div>
+
+        <div className="flex h-full items-center justify-between">
+          <div
+            {...{
+              onDoubleClick: () => setMinViableColWidth(header.column.id),
+              onMouseDown: (e) => {
+                e.stopPropagation();
+                return header.getResizeHandler()(e);
+              },
+              onTouchStart: header.getResizeHandler(),
+              className: cn(
+                `resizer h-full flex justify-center z-50 ${
+                  table.options.columnResizeDirection
+                } ${header.column.getIsResizing() ? 'isResizing' : ''}`,
+                headerGroup.headers.length - 1 == index && 'justify-end',
+                header.id !== 'select-col' && 'hover:cursor-col-resize',
+              ),
+              style: {
+                width: 8,
+                pointerEvents: 'auto',
+              },
+            }}
+          >
+            {headerGroup.headers.length - 1 !== index && (
+              <div className="h-full w-0.5 bg-neutral-200 dark:bg-neutral-700"></div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const TableCell = ({ cell }: { cell: Cell<any, unknown> }) => {
+  const resizing = cell.column.getIsResizing();
+
+  const { history } = useExplorerState();
+
+  const meta = cell.column.columnDef.meta as TableColMeta | null;
+  const { isDragging, setNodeRef, transform } = useSortable({
+    id: cell.column.id,
+    disabled: cell.column.id === 'select-col',
+  });
+  const [showCopy, setShowCopy] = useState(false);
+  const { ref: overflowRef, isOverflow, setIsOverflow } = useIsOverflow();
+  const shouldShowTooltip =
+    (isOverflow || isObject(cell.getValue())) && !meta?.isLink;
+
+  useEffect(() => {
+    const observer = new ResizeObserver(() => {
+      const hasOverflow =
+        overflowRef.current.scrollWidth > overflowRef.current.clientWidth ||
+        overflowRef.current.scrollHeight > overflowRef.current.clientHeight;
+
+      setIsOverflow(hasOverflow);
+    });
+    observer.observe(overflowRef.current!);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [overflowRef.current]);
+
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.8 : 1,
+    position: 'relative',
+    transform:
+      cell.column.id === 'select-col'
+        ? undefined
+        : CSS.Translate.toString(transform), // translate instead of transform to avoid squishing
+    transition: 'width transform 0.2s ease-in-out',
+    width: cell.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+  };
+
+  const disablePadding = meta?.disablePadding ?? false;
+
+  const realValue = cell.getValue();
+
+  return (
+    <Tooltip>
+      {' '}
+      <TooltipTrigger className="text-left">
+        <div
+          ref={(el) => {
+            setNodeRef(el);
+            overflowRef.current = el;
+          }}
+          style={{
+            ...style,
+            padding: disablePadding ? 0 : '0.5rem',
+          }}
+          className={cn(`cursor-default truncate whitespace-nowrap`)}
+          key={cell.id}
+        >
+          <span
+            className={cn(
+              `h-full min-h-full cursor-pointer td-${cell.column.id}`,
+              disablePadding ? '' : 'pr-2',
+            )}
+            onClick={() => {
+              if (
+                meta?.isLink &&
+                meta.attr &&
+                Array.isArray(realValue) &&
+                realValue.length > 0
+              ) {
+                const attr = meta.attr;
+                const linkConfigDir =
+                  attr.linkConfig[!attr.isForward ? 'forward' : 'reverse'];
+
+                if (linkConfigDir) {
+                  history.push({
+                    namespace: linkConfigDir.namespace,
+                    where: [`${linkConfigDir.attr}.id`, cell.row.original.id],
+                  });
+                  return;
+                }
+              }
+              if (meta?.copyable) {
+                if (copy(formatVal(realValue))) {
+                  setShowCopy(true);
+                  setTimeout(() => setShowCopy(false), 1000);
+                }
+              }
+            }}
+          >
+            {showCopy ? (
+              <div className="h-1">Copied!</div>
+            ) : (
+              flexRender(cell.column.columnDef.cell, cell.getContext())
+            )}
+          </span>
+        </div>
+      </TooltipTrigger>
+      {shouldShowTooltip && !resizing && (
+        <TooltipContent
+          className={cn(isObject(realValue) && 'p-0')}
+          side="bottom"
+        >
+          {typeof realValue === 'string' ? (
+            flexRender(cell.column.columnDef.cell, cell.getContext())
+          ) : (
+            <Val pretty data={realValue} />
+          )}
+        </TooltipContent>
+      )}
+    </Tooltip>
+  );
+};
+
+function formatVal(data: any, pretty?: boolean): string {
+  if (isObject(data)) {
+    return JSON.stringify(data, null, pretty ? 2 : undefined);
+  }
+
+  return String(data);
+}
+
+function Val({ data, pretty }: { data: any; pretty?: boolean }) {
+  const sanitized = formatVal(data, pretty);
+  const explorerProps = useExplorerProps();
+
+  if (pretty && isObject(data)) {
+    return (
+      <Fence
+        darkMode={explorerProps.darkMode}
+        code={sanitized}
+        language="json"
+      />
+    );
+  }
+
+  return <>{sanitized}</>;
+}

package/src/components/explorer/view-settings.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Switch } from '@lib/components/ui';
+import { Checkbox, Dialog, Divider, IconButton } from '@lib/components/ui';
+import { useColumnVisibility } from '@lib/hooks/useColumnVisibility';
+import { Cog6ToothIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { useState } from 'react';
+
+interface ViewSettingsProps {
+  visiblity: ReturnType<typeof useColumnVisibility>;
+  localDates: boolean;
+  setLocalDates: (v: boolean | undefined) => void;
+}
+
+export const ViewSettings = ({
+  visiblity,
+  localDates,
+  setLocalDates,
+}: ViewSettingsProps) => {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  return (
+    <>
+      <IconButton
+        icon={<Cog6ToothIcon width={16} />}
+        label="View Settings"
+        onClick={() => setDialogOpen(true)}
+      />
+      <Dialog
+        hideCloseButton={true}
+        onClose={() => setDialogOpen(false)}
+        open={dialogOpen}
+      >
+        <div className="flex items-center justify-between">
+          <div className="text-lg">Explorer View Settings</div>
+          <button onClick={() => setDialogOpen(false)}>
+            <XMarkIcon className="h-4 w-4 cursor-pointer" />
+          </button>
+        </div>
+
+        <div className="py-2">
+          <div>Visible Columns</div>
+          <div className="py-1">
+            {visiblity.attrs?.map((attr) => (
+              <div key={attr.id + attr.name} className="flex gap-2">
+                <Checkbox
+                  label={attr.name}
+                  checked={visiblity.visibility[attr.id + attr.name] !== false}
+                  onChange={(checked) =>
+                    visiblity.setVisibility((prev) => ({
+                      ...prev,
+                      [attr.id + attr.name]: checked,
+                    }))
+                  }
+                ></Checkbox>
+              </div>
+            ))}
+          </div>
+        </div>
+        <Divider className="py-2" />
+
+        <div className="flex items-center gap-2">
+          <div>Show Dates in Local Time</div>
+          <Switch
+            onClick={(e) => {
+              setLocalDates(!localDates);
+            }}
+            checked={localDates}
+          ></Switch>
+        </div>
+        <div className="text-xs opacity-40">
+          Copy to clipboard will still use the original value.
+        </div>
+      </Dialog>
+    </>
+  );
+};

package/src/components/rosePineDawnTheme.ts

@@ -0,0 +1,45 @@
+// Rosé Pine Dawn theme (matching prism.css)
+export const rosePineDawnTheme = {
+  plain: {
+    backgroundColor: '#fff',
+    color: '#575279',
+  },
+  styles: [
+    {
+      types: ['comment', 'prolog', 'cdata', 'punctuation'],
+      style: { color: '#797593' },
+    },
+    {
+      types: ['delimiter', 'important', 'atrule', 'operator', 'keyword'],
+      style: { color: '#286983' },
+    },
+    {
+      types: [
+        'tag',
+        'doctype',
+        'variable',
+        'regex',
+        'class-name',
+        'selector',
+        'inserted',
+      ],
+      style: { color: '#56949f' },
+    },
+    {
+      types: ['boolean', 'entity', 'number', 'symbol', 'function'],
+      style: { color: '#d7827e' },
+    },
+    {
+      types: ['string', 'char', 'property', 'attr-value'],
+      style: { color: '#ea9d34' },
+    },
+    {
+      types: ['parameter', 'url', 'attr-name', 'builtin'],
+      style: { color: '#907aa9' },
+    },
+    {
+      types: ['deleted'],
+      style: { color: '#b4637a' },
+    },
+  ],
+};

package/src/components/select.tsx

@@ -0,0 +1,198 @@
+'use client';
+
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { cn } from './ui';
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from '@heroicons/react/24/outline';
+import { useShadowRoot, useShadowDarkMode } from './StyleMe';
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return (
+    <SelectPrimitive.Value
+      className="content-[hi]"
+      data-slot="select-value"
+      {...props}
+    />
+  );
+}
+
+function SelectTrigger({
+  className,
+  size = 'default',
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: 'sm' | 'default';
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex w-fit items-center justify-between gap-2 rounded-sm border border-gray-300/80 bg-white px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:bg-neutral-700/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon width={14} />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  const shadowRoot = useShadowRoot();
+  const darkMode = useShadowDarkMode();
+  return (
+    <SelectPrimitive.Portal container={shadowRoot}>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-sm border bg-gray-100 text-gray-900 shadow-md dark:border-neutral-700 dark:bg-neutral-800 dark:text-white',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          darkMode ? 'dark' : '',
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1',
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none hover:bg-gray-200/50 data-disabled:pointer-events-none data-disabled:opacity-50 dark:text-white dark:hover:bg-neutral-700 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon width={12} className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/src/components/toast.tsx

@@ -0,0 +1,18 @@
+import { toast } from './ui';
+
+export function infoToast(text: string) {
+  toast(text);
+}
+
+export function successToast(text: string) {
+  toast.success(text, {
+    richColors: true,
+  });
+}
+
+export function errorToast(text: string, options?: any) {
+  toast.error(text, {
+    duration: options?.autoClose,
+    richColors: true,
+  });
+}