@hanzo/ui 4.7.0 → 4.8.3

package/primitives/carousel.tsx

@@ -0,0 +1,238 @@
+'use client'
+
+import React from 'react';
+import useEmblaCarousel from 'embla-carousel-react'
+// @ts-ignore
+const { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } = {}
+
+import { ArrowLeft, ArrowRight } from 'lucide-react'
+
+import { cn } from '../util'
+import Button from './button'
+
+type CarouselApi = EmblaCarouselType  
+type CarouselOptions = EmblaOptionsType
+type CarouselPlugin = EmblaPluginType
+
+type CarouselProps = {
+  options?: CarouselOptions
+  plugins?: CarouselPlugin[] 
+  orientation?: 'horizontal' | 'vertical'
+  setApi?: (api: CarouselApi) => void
+  onCarouselSelect?: (api: CarouselApi) => void 
+}
+
+type UseCarouselType = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<UseCarouselType | null>(null)
+
+const useCarousel = (): UseCarouselType => {
+  const service = React.useContext(CarouselContext)
+  if (!service) { throw new Error('useCarousel must be used within a <Carousel />') }
+  return service
+}
+
+// https://github.com/emilkowalski/vaul/pull/250
+// See data-vaul-no-drag throughout
+
+const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
+  ({
+    orientation = 'horizontal',
+    options,
+    setApi,
+    plugins,
+    className,
+    children,
+    onCarouselSelect,
+    ...props
+  }, ref ) => {
+
+    const [carouselRef, api] = useEmblaCarousel({...options, axis: orientation === 'horizontal' ? 'x' : 'y'}, plugins)
+
+    const [canScrollPrev, setCanScrollPrev] = React.useState<boolean>(false)
+    const [canScrollNext, setCanScrollNext] = React.useState<boolean>(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) { return } // would this ever happen??
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+      if (onCarouselSelect) { onCarouselSelect(api)}
+    }, [])
+
+    const scrollPrev = React.useCallback(() => { api?.scrollPrev()}, [api])
+    const scrollNext = React.useCallback(() => { api?.scrollNext()}, [api])
+
+    const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault()
+        scrollPrev()
+      }
+      else if (event.key === 'ArrowRight') {
+        event.preventDefault()
+        scrollNext()
+      }
+    }, [scrollPrev, scrollNext])
+
+    React.useEffect(() => {
+      if (!api || !setApi) { return }
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) { return }
+      onSelect(api)
+      api.on('reInit', onSelect)
+      api.on('select', onSelect)
+      return () => { api?.off('select', onSelect) }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api,
+          options,
+          orientation: orientation || (options?.axis === 'y' ? 'vertical' : 'horizontal'),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn('relative', className)}
+          role='region'
+          aria-roledescription='carousel'
+          data-vaul-no-drag 
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = 'Carousel'
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className='overflow-hidden' data-vaul-no-drag >
+      <div
+        ref={ref}
+        className={cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = 'CarouselContent'
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role='group'
+      aria-roledescription='slide'
+      data-vaul-no-drag 
+      className={cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = 'CarouselItem'
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = 'ghost', size = 'icon', ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute  h-8 w-8 rounded-full',
+        orientation === 'horizontal'
+          ? '-left-12 top-1/2 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className='h-4 w-4' />
+      <span className='sr-only'>Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = 'CarouselPrevious'
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = 'ghost', size = 'icon', ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute h-8 w-8 rounded-full',
+        orientation === 'horizontal'
+          ? '-right-12 top-1/2 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className='h-4 w-4' />
+      <span className='sr-only'>Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = 'CarouselNext'
+
+export {
+  type CarouselApi,
+  type CarouselOptions,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

package/primitives/chat/chat-input-area.tsx

@@ -0,0 +1,88 @@
+// import { useTranslation } from '@hanzo_network/hanzo-i18n';
+const useTranslation = () => ({ t: (key) => key });
+import React from 'react';
+
+import { useCombinedRefs } from '../../src/hooks/use-combined-refs';
+import { cn } from '../../src/utils';
+import { ChatInput } from './chat-input';
+
+type ChatInputAreaProps = {
+  value: string;
+  onChange: (value: string) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  onPaste?: (e: React.ClipboardEvent<HTMLTextAreaElement>) => void;
+  onSubmit: () => void;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  isLoading?: boolean;
+  placeholder?: string;
+  topAddons?: React.ReactNode;
+  bottomAddons?: React.ReactNode;
+  textareaClassName?: string;
+  className?: string;
+  alternateElement?: React.ReactNode;
+  ref?: React.RefObject<HTMLTextAreaElement | null>;
+};
+export const ChatInputArea = ({
+  value,
+  onChange,
+  onPaste,
+  onKeyDown,
+  autoFocus,
+  onSubmit,
+  disabled,
+  isLoading,
+  placeholder,
+  topAddons,
+  bottomAddons,
+  textareaClassName,
+  alternateElement,
+  className,
+  ref,
+}: ChatInputAreaProps) => {
+  const { t } = useTranslation();
+  const textareaRef = useCombinedRefs<HTMLTextAreaElement>(
+    ref as React.RefObject<HTMLTextAreaElement>,
+  );
+
+  return (
+    <div
+      className={cn(
+        'bg-bg-secondary flex w-full max-w-full flex-col rounded-xl text-sm aria-disabled:cursor-not-allowed aria-disabled:opacity-50',
+        'shadow-border-input focus-within:shadow-border-input-focus overflow-hidden shadow-[0_0_0_1px_currentColor] transition-shadow',
+        className,
+      )}
+    >
+      {topAddons}
+      <div
+        aria-disabled={disabled}
+        className="flex cursor-text flex-col aria-disabled:cursor-not-allowed"
+        onClick={(e) => {
+          if (e.target === e.currentTarget) {
+            textareaRef?.current?.focus();
+          }
+        }}
+      >
+        {alternateElement ? (
+          alternateElement
+        ) : (
+          <ChatInput
+            autoFocus={autoFocus}
+            className={textareaClassName}
+            disabled={disabled || isLoading}
+            onChange={(e) => onChange(e.target.value)}
+            onKeyDown={onKeyDown}
+            onPaste={onPaste}
+            onSend={onSubmit}
+            placeholder={placeholder ?? t('chat.sendMessagePlaceholder')}
+            ref={textareaRef}
+            value={value}
+          />
+        )}
+        {bottomAddons}
+      </div>
+    </div>
+  );
+};
+
+ChatInputArea.displayName = 'ChatInputArea';

package/primitives/chat/chat-input.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { cn } from '../../src/utils';
+
+export interface ChatInputProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  onSend?: () => void;
+  ref: React.RefObject<HTMLTextAreaElement | null>;
+}
+
+export const useAutoResizeTextarea = (
+  ref: React.RefObject<HTMLTextAreaElement | null>,
+  value: string | number | readonly string[] | undefined,
+  autoResize = true, //later to unify
+) => {
+  const textAreaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  React.useImperativeHandle(ref, () => textAreaRef.current!);
+
+  React.useEffect(() => {
+    const ref = textAreaRef?.current;
+
+    const updateTextareaHeight = () => {
+      if (ref && autoResize) {
+        ref.style.height = 'auto';
+        ref.style.height = ref?.scrollHeight + 'px';
+      }
+    };
+
+    updateTextareaHeight();
+
+    ref?.addEventListener('input', updateTextareaHeight);
+    return () => ref?.removeEventListener('input', updateTextareaHeight);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
+  return { textAreaRef };
+};
+
+const ChatInputBase = ({
+  className,
+  onSend,
+  onKeyDown,
+  ref,
+  ...props
+}: ChatInputProps) => {
+  const { textAreaRef } = useAutoResizeTextarea(ref, props.value);
+
+  return (
+    <textarea
+      className={cn(
+        'placeholder:!text-text-placeholder flex max-h-[40vh] min-h-[80px] w-full resize-none overflow-y-auto border-none bg-transparent px-3 py-2 text-base leading-normal break-words focus:outline-hidden focus-visible:ring-0 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      id="chat-input"
+      onKeyDown={(event) => {
+        onKeyDown?.(event);
+        if (event.key === 'Enter' && !event.shiftKey) {
+          event.preventDefault();
+          onSend?.();
+        }
+      }}
+      ref={textAreaRef}
+      spellCheck={false}
+      {...props}
+    />
+  );
+};
+
+ChatInputBase.displayName = 'ChatInput';
+export const ChatInput = React.memo(ChatInputBase);