@hanzo/ui 4.9.0 → 5.0.1

package/primitives/next/youtube-embed.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import { useState } from 'react'
+import Image from 'next/image'
+
+import * as Icons from '../icons'
+
+// Concept based on https://www.youtube.com/watch?v=lLqRchtjN00
+// (https://github.com/a-trost/fableton)
+
+const YouTubeEmbed: React.FC<{
+  youtubeID: string
+  width: number
+  height: number
+  buttonSize?: number
+  timeAt?: string // '5s'
+  title?: string
+  caption?: string
+  className?: string
+}> = ({
+  youtubeID,
+  width,
+  height,
+  buttonSize=100,
+  timeAt,
+  title,
+  caption,
+  className=''
+}) => {
+
+  const [showVideo, setShowVideo] = useState(false)
+
+    // re autoplay: https://stackoverflow.com/a/45610557/11645689
+  return (
+    <div className={className}>
+      {showVideo ? (
+        <iframe
+          width={width}
+          height={height}
+          src={`https://www.youtube-nocookie.com/embed/${youtubeID + ((timeAt) ? `?t=${timeAt}&` : '?')}rel=0&autoplay=1`}
+          allow='accelerometer ; autoplay *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *;'
+          allowFullScreen
+          title={title || 'Youtube video'}
+          className='aspect-[16/9] h-full w-full p-0 border-0 '
+        />
+      ) : (
+        <button
+          type='button'
+          onClick={() => setShowVideo(true)}
+          className='relative aspect-[16/9] w-full'
+          aria-label={`Play video ${title}`}
+        >
+          <Image
+            src={`https://img.youtube.com/vi/${youtubeID}/maxresdefault.jpg`}
+            alt=''
+            className='h-full w-full'
+            width={width}
+            height={height}
+            loading='lazy'
+          />
+          <div 
+            className={  //https://stackoverflow.com/a/23384995/11645689
+              'absolute z-above-content-2 left-[50%] top-[50%] -translate-y-2/4 -translate-x-2/4 ' + 
+              'grid place-items-center ' + 
+              'text-xl text-white opacity-90'
+            }
+          >
+            <Icons.youtube 
+              width={buttonSize} 
+              height={buttonSize} 
+              role='img'
+              className='transform transition hover:scale-110'
+              {...{'aria-hidden': true}} 
+            />
+          </div>
+          {caption && <p className='hidden md:block whitespace-nowrap typography absolute z-above-content left-[50%] top-[20px] -translate-x-2/4 '>{caption}</p>}
+        </button>
+      )}
+    </div>
+  )
+}
+
+export default YouTubeEmbed

package/primitives/pagination.tsx

@@ -0,0 +1,117 @@
+import { MoreHorizontal, RedoIcon, UndoIcon } from 'lucide-react';
+import React from 'react';
+
+import { cn } from '../src/utils';
+import { ButtonProps, buttonVariants } from './button';
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+  <nav
+    aria-label="pagination"
+    className={cn('mx-auto flex w-full justify-center', className)}
+    role="navigation"
+    {...props}
+  />
+);
+Pagination.displayName = 'Pagination';
+
+const PaginationContent = ({
+  className,
+  ...props
+}: React.ComponentProps<'ul'>) => (
+  <ul
+    className={cn('flex flex-row items-center gap-1', className)}
+    {...props}
+  />
+);
+PaginationContent.displayName = 'PaginationContent';
+
+const PaginationItem = ({
+  className,
+  ...props
+}: React.ComponentProps<'li'>) => (
+  <li className={cn('', className)} {...props} />
+);
+PaginationItem.displayName = 'PaginationItem';
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<'a'>;
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? 'page' : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? 'outline' : 'tertiary',
+        size,
+      }),
+      'size-[30px] rounded-lg p-0.5',
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = 'PaginationLink';
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    className={cn('gap-1', className)}
+    size="sm"
+    {...props}
+  >
+    <UndoIcon className="h-4 w-4" />
+    <span className="sr-only">Previous</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    className={cn('gap-1', className)}
+    size="sm"
+    {...props}
+  >
+    <span className="sr-only">Next</span>
+    <RedoIcon className="h-4 w-4" />
+  </PaginationLink>
+);
+PaginationNext.displayName = 'PaginationNext';
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    aria-hidden
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};

package/primitives/popover.tsx

@@ -0,0 +1,34 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverArrow = PopoverPrimitive.Arrow;
+const PopoverClose = PopoverPrimitive.Close;
+
+const PopoverContent = ({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      align={align}
+      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',
+        'bg-bg-dark border-divider z-50 w-72 rounded-md border p-4 text-gray-50 shadow-lg shadow-md outline-hidden',
+        className,
+      )}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverArrow, PopoverClose };

package/primitives/pretty-json-print.tsx

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import { cn } from '../src/utils';
+
+export const PrettyJsonPrint = ({
+  json,
+  className,
+}: {
+  json: string | object;
+  className?: string;
+}) => {
+  const formattedJson = useMemo(() => {
+    let formattedValue = `Unparseable JSON: String(${json})`;
+    if (typeof json === 'object') {
+      formattedValue = JSON.stringify(json, null, 2);
+    } else if (typeof json === 'string') {
+      try {
+        const parsedJson = JSON.parse(json);
+        formattedValue = JSON.stringify(parsedJson, null, 2);
+      } catch (error) {
+        console.error('error parsing json', error);
+      }
+    }
+    return formattedValue;
+  }, [json]);
+  return (
+    <pre className={cn('overflow-x-scroll', className)}>{formattedJson}</pre>
+  );
+};

package/primitives/progress.tsx

@@ -0,0 +1,27 @@
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+const Progress = ({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) => (
+  <ProgressPrimitive.Root
+    className={cn(
+      'bg-bg-quaternary relative h-4 w-full overflow-hidden',
+      className,
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-green-500 transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+);
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
+export default Progress;

package/primitives/prompt-textarea.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import { cn } from '../src/utils';
+import { DotsLoader } from './dots-loader';
+import { FormLabel } from './form';
+
+const MIN_TEXTAREA_HEIGHT = 32;
+export interface PromptTextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  isLoading?: boolean;
+  label?: string;
+  field: {
+    onChange: (...event: any[]) => void;
+    onBlur: () => void;
+    value: any;
+    disabled?: boolean;
+    name: string;
+    placeholder?: string;
+  };
+}
+
+const PromptTextarea = ({ className, ...props }: PromptTextareaProps) => {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  React.useLayoutEffect(() => {
+    // Reset height - important to shrink on delete
+
+    if (!textareaRef.current) return;
+
+    textareaRef.current.style.height = '60px';
+    // Set height
+    textareaRef.current.style.height = `${Math.max(
+      textareaRef.current.scrollHeight + 2,
+      MIN_TEXTAREA_HEIGHT,
+    )}px`;
+
+    if (props.autoFocus !== undefined && props.autoFocus) {
+      textareaRef.current.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.value]);
+
+  return (
+    <>
+      <textarea
+        className={cn(
+          'flex w-full rounded-md border border-gray-200 bg-gray-400 px-4 py-2 pt-4 text-sm break-words placeholder-gray-100 placeholder:text-base focus-visible:ring-1 focus-visible:ring-gray-100 focus-visible:outline-hidden focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        style={{
+          minHeight: MIN_TEXTAREA_HEIGHT,
+          resize: 'none',
+          maxHeight: '300px',
+        }}
+        {...props.field}
+        onKeyDown={props.onKeyDown}
+        ref={textareaRef}
+        {...(!props.isLoading && {
+          placeholder: props.label,
+        })}
+      />
+
+      {props.isLoading ? (
+        <DotsLoader className="absolute top-6 left-4" />
+      ) : null}
+      <FormLabel className="sr-only">{props.label}</FormLabel>
+    </>
+  );
+};
+PromptTextarea.displayName = 'PromptTextarea';
+
+export { PromptTextarea };

package/primitives/qr-code.tsx

@@ -0,0 +1,112 @@
+import { DownloadIcon } from '@radix-ui/react-icons';
+import { Check } from 'lucide-react';
+import React, { useState } from 'react';
+import { IProps, QRCode as ReactQRCode } from 'react-qrcode-logo';
+
+import hanzoLogo from '../assets/images/app-icon.png';
+import { Button } from './button';
+import { Dialog, DialogContent } from './dialog';
+
+export function QRCode({
+  value,
+  size,
+  id,
+  ...props
+}: {
+  value: IProps['value'];
+  size: IProps['size'];
+  id?: IProps['id'];
+} & React.HTMLAttributes<HTMLDivElement>): React.ReactElement {
+  return (
+    <div {...props}>
+      <ReactQRCode
+        ecLevel={'M'}
+        eyeColor="black"
+        eyeRadius={10}
+        fgColor="black"
+        id={id}
+        logoHeight={size ? size * 0.2 : undefined}
+        logoImage={hanzoLogo}
+        logoPaddingStyle="circle"
+        logoWidth={size ? size * 0.2 : undefined}
+        qrStyle="dots"
+        removeQrCodeBehindLogo
+        size={size ?? 300}
+        value={value}
+      />
+    </div>
+  );
+}
+
+export function QrCodeModal({
+  open,
+  onOpenChange,
+  value,
+  onSave,
+  title,
+  description,
+  modalClassName,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  value: IProps['value'];
+  onSave: (key: string) => void;
+  title: React.ReactNode;
+  description: React.ReactNode;
+  modalClassName?: string;
+}) {
+  const [saved, setSaved] = useState(false);
+  const downloadCode = async () => {
+    const canvas = document.querySelector('#registration-code-qr');
+    if (canvas instanceof HTMLCanvasElement) {
+      try {
+        const pngUrl = canvas.toDataURL();
+        onSave(pngUrl);
+        setSaved(true);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setTimeout(() => {
+          setSaved(false);
+        }, 3000);
+      }
+    }
+  };
+
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogContent className={modalClassName}>
+        <div className="flex flex-col items-center py-4">
+          <h2 className="mb-1 text-lg font-semibold">{title}</h2>
+          <p className="text-text-secondary mb-5 text-center text-xs">
+            {description}
+          </p>
+          <div className="mb-7 overflow-hidden rounded-lg shadow-2xl">
+            <QRCode size={190} value={value} />
+            <QRCode
+              className="hidden"
+              id="registration-code-qr"
+              size={1024}
+              value={value}
+            />
+          </div>
+          <div className="flex flex-col gap-4">
+            <Button className="flex gap-1" onClick={downloadCode}>
+              {saved ? <Check /> : <DownloadIcon className="h-4 w-4" />}
+              {saved ? 'Saved' : 'Download'}
+            </Button>
+            <Button
+              className="flex gap-1"
+              onClick={() => {
+                onOpenChange(false);
+              }}
+              variant="tertiary"
+            >
+              I saved it, close
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/primitives/radio-group.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+const RadioGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn('grid gap-2', className)}
+      {...props}
+    />
+  );
+};
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) => {
+  return (
+    <RadioGroupPrimitive.Item
+      className={cn(
+        'border-brand text-brand ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+};
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

package/primitives/resizable.tsx

@@ -0,0 +1,47 @@
+import { GripVertical } from 'lucide-react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+
+import { cn } from '../src/utils';
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+      className,
+    )}
+    {...props}
+  />
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      'focus-visible:ring-ring relative flex w-px items-center justify-center bg-gray-100 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden',
+      'data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      'data-[resize-handle-state=drag]:after:bg-bg-secondary',
+      'data-[resize-handle-state=hover]:after:bg-bg-secondary',
+      'after:w-[1px] data-[panel-group-direction=vertical]:after:h-[1px]',
+      className,
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-gray-200">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+);
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

package/primitives/scroll-area.tsx

@@ -0,0 +1,57 @@
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+const ScrollArea = ({
+  className,
+  children,
+  ref,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
+  ref?: React.RefObject<HTMLDivElement | null>;
+}) => (
+  <ScrollAreaPrimitive.Root
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport
+      className="h-full w-full rounded-[inherit]"
+      ref={ref}
+    >
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+);
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = ({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    className={cn(
+      'flex touch-none transition-colors select-none',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 border-t border-t-transparent p-[1px]',
+      className,
+    )}
+    orientation={orientation}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb
+      className={cn(
+        'relative rounded-full bg-gray-300',
+        orientation === 'vertical' && 'flex-1',
+      )}
+    />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+);
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/primitives/search-input.tsx

@@ -0,0 +1,66 @@
+import { SearchIcon, XIcon } from 'lucide-react';
+import React from 'react';
+
+import { cn } from '../src/utils';
+import { Button } from './button';
+import { Input } from './input';
+
+export type SearchInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  classNames?: {
+    container?: string;
+    input?: string;
+    button?: string;
+  };
+};
+
+const SearchInput = ({
+  className,
+  value,
+  onChange,
+  classNames,
+  ...props
+}: SearchInputProps) => {
+  return (
+    <div
+      className={cn(
+        'shadow-border-input focus-within:shadow-border-input-focus relative flex h-10 flex-1 items-center overflow-hidden rounded-full shadow-[0_0_0_1px_currentColor] transition-shadow',
+        classNames?.container,
+      )}
+    >
+      <Input
+        className={cn(
+          'placeholder:!text-text-placeholder !h-full border-none bg-transparent py-2 pl-10',
+          classNames?.input,
+        )}
+        onChange={(e) => {
+          onChange?.(e);
+        }}
+        placeholder="Search..."
+        spellCheck={false}
+        value={value}
+        {...props}
+      />
+      <SearchIcon className="text-text-tertiary absolute top-1/2 left-4 -z-[1px] h-4 w-4 -translate-y-1/2" />
+      {value && (
+        <Button
+          className={cn('absolute right-1 h-8 w-8 p-2', classNames?.button)}
+          onClick={() => {
+            onChange?.({
+              target: { value: '' },
+            } as React.ChangeEvent<HTMLInputElement>);
+          }}
+          size="auto"
+          type="button"
+          variant="tertiary"
+        >
+          <XIcon />
+          <span className="sr-only">Clear</span>
+        </Button>
+      )}
+    </div>
+  );
+};
+
+SearchInput.displayName = 'SearchInput';
+
+export { SearchInput };