@hanzo/ui 5.0.2 → 5.1.0

package/primitives/carousel.tsx

@@ -1,238 +0,0 @@
-'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

@@ -1,88 +0,0 @@
-// 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

@@ -1,71 +0,0 @@
-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);