@sqlrooms/ui 0.0.0 → 0.0.1-alpha.0

package/src/components/dropdown-menu.tsx

@@ -1,199 +0,0 @@
-import * as React from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import {Check, ChevronRight, Circle} from 'lucide-react';
-
-import {cn} from '../lib/utils';
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({className, inset, children, ...props}, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-      inset && 'pl-8',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({className, ...props}, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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',
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({className, sideOffset = 4, ...props}, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
-        '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',
-        className,
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({className, inset, ...props}, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
-      inset && 'pl-8',
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({className, children, checked, ...props}, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({className, children, ...props}, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({className, inset, ...props}, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      'px-2 py-1.5 text-sm font-semibold',
-      inset && 'pl-8',
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({className, ...props}, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
-      {...props}
-    />
-  );
-};
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-};

package/src/components/editable-text.tsx

@@ -1,199 +0,0 @@
-import {ChangeEvent, FC, useCallback, useEffect, useRef, useState} from 'react';
-
-import {Input} from './input';
-import {cn} from '../lib/utils';
-
-/**
- * Component that allows the user to edit a string.
- *
- * The editing mode can be controlled (the mode is managed by the parent component)
- * or uncontrolled (managed by the component itself).
- *
- * Controlled mode example:
- * ```
- *    const [text, setText] = useState('');
- *    const [isEditing, setEditing] = useState(false);
- *    ...
- *    <EditableText
- *       value={text}
- *       onChange={setText}
- *       isEditing={isEditing}
- *       onEditingChange={setEditing}
- *    />
- * ```
- *
- * Uncontrolled mode example:
- * ```
- *    const [text, setText] = useState('');
- *    ...
- *    <EditableText
- *      value={text}
- *      onChange={setText}
- *      defaultEditing={false}
- *    />
- * ```
- */
-
-type Props = {
-  className?: string;
-  isReadOnly?: boolean;
-  value: string;
-  minWidth?: number;
-  maxWidth?: number;
-  placeholder?: string;
-  onChange: (text: string) => void;
-
-  /**
-   * The editing state when it is initially rendered. Use when you do not need to control its editing state
-   * in the parent component.
-   **/
-  defaultEditing?: boolean;
-
-  /**
-   * The controlled editing state of the component. Must be used in conjunction with onEditingChange.
-   **/
-  isEditing?: boolean;
-  onEditingChange?: (isEditing: boolean) => void;
-};
-
-const EDITING_PAD = 12;
-
-export const EditableText: FC<Props> = ({
-  className,
-  isReadOnly = false,
-  defaultEditing = false,
-  minWidth = 100,
-  maxWidth = 500,
-  isEditing,
-  placeholder,
-  value,
-  onChange,
-  onEditingChange,
-}) => {
-  const [isInternalEditing, setInternalIsEditing] = useState(defaultEditing);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [internalValue, setInternalValue] = useState(value);
-  const internalValueRef = useRef(internalValue);
-  internalValueRef.current = internalValue;
-
-  const [inputWidth, setInputWidth] = useState(minWidth);
-  const spanRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    // Update input width based on the invisible span width
-    setInputWidth(spanRef.current?.offsetWidth ?? 0);
-  }, [internalValue]);
-
-  const handleSetValue = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      if (isReadOnly || !isInternalEditing) {
-        return;
-      }
-      return setInternalValue(e.target.value);
-    },
-    [isInternalEditing, isReadOnly],
-  );
-
-  const handleSetEditing = useCallback(
-    (nextIsEditing: boolean) => {
-      if (isReadOnly) {
-        return;
-      }
-      setInternalIsEditing(nextIsEditing);
-      onEditingChange?.(nextIsEditing);
-    },
-    [isReadOnly, onEditingChange],
-  );
-
-  const handleBlur = useCallback(() => {
-    handleSetEditing(false);
-    onChange(internalValueRef.current?.trim());
-  }, [handleSetEditing, onChange]);
-
-  const handleClick = useCallback(() => {
-    if (!isInternalEditing) {
-      handleSetEditing(true);
-    }
-  }, [isInternalEditing, handleSetEditing]);
-
-  useEffect(() => {
-    if (value !== internalValueRef.current) {
-      setInternalValue(value);
-    }
-  }, [value]);
-  useEffect(() => {
-    if (isEditing !== undefined && isEditing !== isInternalEditing) {
-      setInternalIsEditing(Boolean(isEditing));
-      if (isEditing) {
-        setTimeout(() => {
-          // When enabling editing from a dropdown menu, there will be a blur event when the dropdown closes,
-          // so we need to wait a bit before making sure the input is focused and selected
-          inputRef.current?.select();
-          inputRef.current?.focus();
-        }, 200);
-      }
-    }
-  }, [isInternalEditing, handleSetEditing, isEditing]);
-
-  // Add keydown event listener to handle enter key
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      switch (e.key) {
-        case 'Escape':
-          // Reset the internal value to the original value
-          setInternalValue(value);
-          internalValueRef.current = value;
-          handleSetEditing(false);
-          inputRef.current?.blur();
-          break;
-        case 'Enter':
-          handleSetEditing(false);
-          onChange(internalValueRef.current.trim());
-          inputRef.current?.blur();
-          break;
-      }
-    };
-    if (isInternalEditing) {
-      document.addEventListener('keydown', handleKeyDown);
-    }
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [isInternalEditing, onChange, handleSetEditing, value]);
-
-  return (
-    <>
-      {/* Hidden span to measure the input width, so that the we can make the input grow to fit the text */}
-      <span
-        ref={spanRef}
-        className={cn(
-          className,
-          'white-space-pre pointer-events-none invisible absolute left-0 top-0 px-1',
-        )}
-        style={{minWidth, maxWidth}}
-      >
-        {internalValue}
-      </span>
-      <Input
-        ref={inputRef}
-        className={cn(
-          'disabled:opacity-1 rounded-sm border-transparent px-1 py-0 focus:border-blue-500 focus:outline-none focus:ring-blue-500 disabled:cursor-text',
-          {'select-none bg-transparent': !isInternalEditing},
-          className,
-        )}
-        style={{
-          width: inputWidth + EDITING_PAD, // add padding to avoid jittering when editing
-          caretColor: isInternalEditing ? undefined : 'transparent',
-        }}
-        value={internalValue}
-        onChange={handleSetValue}
-        onBlur={handleBlur}
-        disabled={isReadOnly}
-        onClick={handleClick}
-        placeholder={
-          !isInternalEditing ? (placeholder ?? 'Click to edit') : undefined
-        }
-      />
-    </>
-  );
-};

package/src/components/error-boundary.tsx

@@ -1,48 +0,0 @@
-import {Component, ErrorInfo, ReactNode} from 'react';
-import {ErrorPane} from './error-pane';
-
-interface Props {
-  children?: ReactNode;
-  onRetry?: () => void;
-  fallback?: ReactNode;
-}
-
-interface State {
-  hasError: boolean;
-  error: Error | null;
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-  public state: State = {
-    hasError: false,
-    error: null,
-  };
-
-  public static getDerivedStateFromError(error: Error): State {
-    return {hasError: true, error};
-  }
-
-  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error('Uncaught error:', error, errorInfo);
-  }
-
-  private handleRetry = () => {
-    if (this.props.onRetry) {
-      this.props.onRetry();
-    }
-  };
-
-  public render() {
-    if (this.state.hasError) {
-      return (
-        <ErrorPane
-          error={this.state.error}
-          onRetry={this.props.onRetry ? this.handleRetry : undefined}
-          actions={!!this.props.onRetry}
-        />
-      );
-    }
-
-    return this.props.children;
-  }
-}

package/src/components/error-pane.tsx

@@ -1,81 +0,0 @@
-import {Alert, AlertDescription, AlertTitle} from './alert';
-import {RotateCcwIcon, TriangleAlertIcon} from 'lucide-react';
-import * as React from 'react';
-import {cn} from '../lib/utils';
-import {Button} from './button';
-
-interface ErrorPaneProps extends React.HTMLAttributes<HTMLDivElement> {
-  embed?: boolean;
-  error?: string | Error | unknown;
-  title?: string;
-  text?: string;
-  onRetry?: () => void;
-  onGoToStart?: () => void;
-  actions?: boolean;
-}
-
-const ErrorPane = React.forwardRef<HTMLDivElement, ErrorPaneProps>(
-  (
-    {
-      className,
-      embed,
-      title = 'Something went wrong',
-      text = `We are sorry, but something unexpected happened. We were notified
-              and will be working on resolving the issue as soon as possible.`,
-      onRetry,
-      actions = false,
-      onGoToStart,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={cn('flex justify-center', className)}
-        {...props}
-      >
-        <Alert
-          variant="destructive"
-          className={cn(
-            'flex min-h-[200px] max-w-[450px] flex-col items-center justify-center rounded-lg bg-gray-700 px-6 py-6 text-center',
-            !embed && 'min-w-[350px]',
-          )}
-        >
-          <div className="mb-4">
-            <TriangleAlertIcon className="h-8 w-8 text-destructive" />
-          </div>
-          <AlertTitle className="mb-1 text-xl">{title}</AlertTitle>
-          <AlertDescription className="mt-3 max-w-sm px-2">
-            <p className="mb-5 text-left">{text}</p>
-            {actions && (
-              <div className="mt-6 mb-3">
-                <div className="flex justify-center gap-2">
-                  {onRetry && (
-                    <Button
-                      size="sm"
-                      onClick={onRetry}
-                      className="inline-flex items-center"
-                    >
-                      <RotateCcwIcon className="mr-2 h-4 w-4" />
-                      Retry
-                    </Button>
-                  )}
-                  {!embed && onGoToStart && (
-                    <Button size="sm" onClick={onGoToStart}>
-                      Go to start page
-                    </Button>
-                  )}
-                </div>
-              </div>
-            )}
-          </AlertDescription>
-        </Alert>
-      </div>
-    );
-  },
-);
-
-ErrorPane.displayName = 'ErrorPane';
-
-export {ErrorPane};

package/src/components/form.tsx

@@ -1,176 +0,0 @@
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import {Slot} from '@radix-ui/react-slot';
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
-} from 'react-hook-form';
-
-import {cn} from '../lib/utils';
-import {Label} from './label';
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue,
-);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{name: props.name}}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const {getFieldState, formState} = useFormContext();
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>');
-  }
-
-  const {id} = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue,
-);
-
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({className, ...props}, ref) => {
-  const id = React.useId();
-
-  return (
-    <FormItemContext.Provider value={{id}}>
-      <div ref={ref} className={cn('space-y-2', className)} {...props} />
-    </FormItemContext.Provider>
-  );
-});
-FormItem.displayName = 'FormItem';
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({className, ...props}, ref) => {
-  const {error, formItemId} = useFormField();
-
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && 'text-destructive', className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
-});
-FormLabel.displayName = 'FormLabel';
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({...props}, ref) => {
-  const {error, formItemId, formDescriptionId, formMessageId} = useFormField();
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-});
-FormControl.displayName = 'FormControl';
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({className, ...props}, ref) => {
-  const {formDescriptionId} = useFormField();
-
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn('text-[0.8rem] text-muted-foreground', className)}
-      {...props}
-    />
-  );
-});
-FormDescription.displayName = 'FormDescription';
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({className, children, ...props}, ref) => {
-  const {error, formMessageId} = useFormField();
-  const body = error ? String(error?.message) : children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn('text-[0.8rem] font-medium text-destructive', className)}
-      {...props}
-    >
-      {body}
-    </p>
-  );
-});
-FormMessage.displayName = 'FormMessage';
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-};