@connectycube/react-ui-kit 0.0.22 → 0.1.2

package/src/components/connectycube-ui/file-picker.tsx

@@ -1,231 +0,0 @@
-import type React from 'react';
-import { forwardRef, useState } from 'react';
-import { FilePlusCorner, LucideProps, Paperclip } from 'lucide-react';
-import { Label, type LabelProps } from './label';
-import { cn } from './utils';
-
-const areValidFiles = (files: File[], accept?: string): boolean => {
-  if (files.length === 0) {
-    return false;
-  }
-
-  const acceptList =
-    typeof accept === 'string' ? accept.split(/\s*,\s*|\s+/).map((type) => type.toLowerCase().trim()) : null;
-
-  if (acceptList === null || acceptList.length === 0) {
-    return false;
-  }
-
-  return files.every((file) => {
-    const { type, size } = file;
-
-    if (typeof type !== 'string' || typeof size !== 'number' || size <= 0 || type.length === 0) {
-      return false;
-    }
-
-    const fileMimeType = type.toLowerCase();
-    const [fileType, fileSubtype] = fileMimeType.split('/');
-
-    return acceptList.some(
-      (acceptType) =>
-        acceptType.startsWith('*') ||
-        acceptType === fileMimeType ||
-        (fileType && acceptType.endsWith('/*') && acceptType.startsWith(fileType)) ||
-        (acceptType.startsWith('.') && acceptType.slice(1) === fileSubtype)
-    );
-  });
-};
-const handleFiles = (
-  fileList: FileList | null,
-  accept: string,
-  multiple: boolean,
-  onSelectFile: (files: File[]) => void,
-  onInvalidFile: () => void
-) => {
-  const files = Array.from(fileList || []).filter(Boolean);
-
-  if (files.length === 0) {
-    return;
-  }
-
-  const validated = areValidFiles(files, accept);
-
-  if (validated) {
-    onSelectFile(multiple ? files : files[0] ? [files[0]] : []);
-  } else {
-    onInvalidFile();
-  }
-};
-
-interface FilePickerInputProps extends React.ComponentProps<'input'> {
-  onSelectFile: (files: File[]) => void;
-  onInvalidFile?: () => void;
-  iconElement?: React.ReactNode;
-  labelProps?: LabelProps;
-  iconProps?: LucideProps;
-}
-
-interface FilePickerDropzoneProps extends FilePickerInputProps {
-  children?: React.ReactNode;
-  placeholder?: string;
-  dropZoneProps?: React.ComponentProps<'div'>;
-  placeholderContainerProps?: React.ComponentProps<'div'>;
-  iconProps?: LucideProps;
-  placeholderProps?: React.ComponentProps<'span'>;
-}
-
-function FilePickerInputBase(
-  {
-    onSelectFile = () => {},
-    onInvalidFile = () => {},
-    multiple = false,
-    accept = '*/*',
-    iconElement,
-    labelProps,
-    iconProps,
-    ...props
-  }: FilePickerInputProps,
-  ref?: React.ForwardedRef<HTMLInputElement>
-) {
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    handleFiles(event.currentTarget.files, accept, multiple, onSelectFile, onInvalidFile);
-    event.currentTarget.value = '';
-  };
-
-  return (
-    <Label
-      {...labelProps}
-      htmlFor="file-uploader"
-      className={cn(
-        'group p-2 rounded-full hover:bg-ring/10 transition-all duration-200 ease-in-out cursor-pointer',
-        labelProps?.className
-      )}
-    >
-      {iconElement || (
-        <Paperclip
-          {...iconProps}
-          className={cn(
-            'text-foreground group-hover:scale-110 transition-all duration-200 ease-in-out',
-            iconProps?.className
-          )}
-        />
-      )}
-      <input
-        ref={ref}
-        id="file-uploader"
-        type="file"
-        multiple={multiple}
-        accept={accept}
-        onChange={handleChange}
-        {...props}
-        className={cn('hidden', props?.className)}
-      />
-    </Label>
-  );
-}
-
-const FilePickerInput = forwardRef<HTMLInputElement, FilePickerInputProps>(FilePickerInputBase);
-
-FilePickerInput.displayName = 'FilePickerInput';
-
-function FilePickerDropzoneBase(
-  {
-    onSelectFile = () => {},
-    onInvalidFile = () => {},
-    multiple = false,
-    accept = '*/*',
-    children,
-    iconElement,
-    placeholder,
-    dropZoneProps,
-    placeholderContainerProps,
-    iconProps,
-    placeholderProps,
-    ...props
-  }: FilePickerDropzoneProps,
-  ref: React.ForwardedRef<HTMLDivElement>
-) {
-  const [isDragging, setIsDragging] = useState(false);
-  const handleDragEvent = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-  };
-  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
-    handleDragEvent(event);
-    setIsDragging(false);
-    handleFiles(event.dataTransfer.files, accept, multiple, onSelectFile, onInvalidFile);
-    event.dataTransfer.clearData();
-  };
-  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
-    handleDragEvent(event);
-
-    if (event.dataTransfer.items && event.dataTransfer.items.length > 0) {
-      setIsDragging(true);
-    }
-  };
-  const handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
-    if (!event.currentTarget.contains(event.relatedTarget as Node)) {
-      setIsDragging(false);
-    }
-  };
-
-  return (
-    <div
-      ref={ref}
-      onDragEnter={handleDragEnter}
-      onDragLeave={handleDragLeave}
-      onDragOver={handleDragEvent}
-      {...props}
-      className={cn('size-full relative', props?.className)}
-    >
-      {children}
-      <div
-        onDrop={handleDrop}
-        {...dropZoneProps}
-        className={cn(
-          'group absolute top-0 left-0 size-full',
-          'flex items-center justify-center',
-          'transition-all duration-300 ease-out',
-          'border-2 border-dashed border-ring bg-ring/25 rounded-md',
-          isDragging
-            ? 'opacity-100 pointer-events-auto visible scale-100'
-            : 'opacity-0 pointer-events-none invisible scale-98',
-          dropZoneProps?.className
-        )}
-      >
-        <div
-          {...placeholderContainerProps}
-          className={cn(
-            'bg-muted flex flex-row items-center gap-2 rounded-full py-2 px-4 transition-all',
-            isDragging ? 'scale-100' : 'scale-90',
-            placeholderContainerProps?.className
-          )}
-        >
-          {iconElement || (
-            <FilePlusCorner
-              absoluteStrokeWidth
-              {...iconProps}
-              className={cn('text-ring size-6', iconProps?.className)}
-            />
-          )}
-          <span {...placeholderProps} className={cn('text-ring text-md font-bold', placeholderProps?.className)}>
-            {placeholder || 'Drop files here'}
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-const FilePickerDropzone = forwardRef<HTMLDivElement, FilePickerDropzoneProps>(FilePickerDropzoneBase);
-
-FilePickerDropzone.displayName = 'FilePickerDropzone';
-
-export {
-  FilePickerInput,
-  FilePickerDropzone,
-  FilePickerInput as Input,
-  FilePickerDropzone as Dropzone,
-  type FilePickerInputProps,
-  type FilePickerDropzoneProps,
-};

package/src/components/connectycube-ui/formatted-date.jsx

@@ -1,57 +0,0 @@
-import { forwardRef, memo } from 'react';
-import { differenceInCalendarDays, format, formatDistanceToNow, isToday } from 'date-fns';
-import { el, enUS, uk } from 'date-fns/locale';
-import { cn } from './utils';
-
-const locales = {
-  en: enUS,
-  el: el,
-  ua: uk,
-};
-
-function formatDate(date, language = 'en', distanceToNow = false) {
-  const locale = locales[language] ?? enUS;
-
-  if (distanceToNow) {
-    return formatDistanceToNow(date, {
-      locale,
-      addSuffix: true,
-    });
-  }
-
-  const isWithinLast7Days = (date) => {
-    const diff = differenceInCalendarDays(new Date(), date);
-
-    return diff >= 0 && diff <= 6;
-  };
-
-  return isToday(date)
-    ? format(date, 'p', {
-        locale,
-      })
-    : isWithinLast7Days(date)
-      ? format(date, 'eeee', {
-          locale,
-        })
-      : format(date, 'P', {
-          locale,
-        });
-}
-
-function FormattedDateBase({ date, language, distanceToNow, ...props }, ref) {
-  if (!date) {
-    return null;
-  }
-
-  return (
-    <span ref={ref} {...props} className={cn('text-xs text-muted-foreground', props?.className)}>
-      {formatDate(date, language, distanceToNow)}
-    </span>
-  );
-}
-
-const FormattedDate = memo(forwardRef(FormattedDateBase));
-
-FormattedDate.displayName = 'FormattedDate';
-
-export { FormattedDate };

package/src/components/connectycube-ui/formatted-date.tsx

@@ -1,57 +0,0 @@
-import { forwardRef, memo } from 'react';
-import { differenceInCalendarDays, format, formatDistanceToNow, isToday } from 'date-fns';
-import { el, enUS, uk, type Locale } from 'date-fns/locale';
-import { cn } from './utils';
-
-interface FormattedDateProps extends React.ComponentProps<'span'> {
-  date?: Date | string | number | null;
-  language?: string;
-  distanceToNow?: boolean;
-}
-
-const locales: Record<string, Locale> = {
-  en: enUS,
-  el: el,
-  ua: uk,
-};
-
-function formatDate(date: string | number | Date, language: string = 'en', distanceToNow = false): string {
-  const locale = locales[language] ?? enUS;
-
-  if (distanceToNow) {
-    return formatDistanceToNow(date, { locale, addSuffix: true });
-  }
-
-  const isWithinLast7Days = (date: Date | string | number) => {
-    const diff = differenceInCalendarDays(new Date(), date);
-
-    return diff >= 0 && diff <= 6;
-  };
-
-  return isToday(date)
-    ? format(date, 'p', { locale })
-    : isWithinLast7Days(date)
-      ? format(date, 'eeee', { locale })
-      : format(date, 'P', { locale });
-}
-
-function FormattedDateBase(
-  { date, language, distanceToNow, ...props }: FormattedDateProps,
-  ref: React.ForwardedRef<HTMLSpanElement>
-) {
-  if (!date) {
-    return null;
-  }
-
-  return (
-    <span ref={ref} {...props} className={cn('text-xs text-muted-foreground', props?.className)}>
-      {formatDate(date, language, distanceToNow)}
-    </span>
-  );
-}
-
-const FormattedDate = memo(forwardRef<HTMLSpanElement, FormattedDateProps>(FormattedDateBase));
-
-FormattedDate.displayName = 'FormattedDate';
-
-export { FormattedDate, type FormattedDateProps };

package/src/components/connectycube-ui/label.jsx

@@ -1,22 +0,0 @@
-import { forwardRef } from 'react';
-import { Root as LabelRoot } from '@radix-ui/react-label';
-import { cn } from './utils';
-
-function LabelBase({ ...props }, ref) {
-  return (
-    <LabelRoot
-      ref={ref}
-      {...props}
-      className={cn(
-        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-        props?.className
-      )}
-    />
-  );
-}
-
-const Label = forwardRef(LabelBase);
-
-Label.displayName = 'Label';
-
-export { Label };

package/src/components/connectycube-ui/label.tsx

@@ -1,23 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-import { Root as LabelRoot, type LabelProps } from '@radix-ui/react-label';
-import { cn } from './utils';
-
-function LabelBase({ ...props }: LabelProps, ref: React.ForwardedRef<HTMLLabelElement>) {
-  return (
-    <LabelRoot
-      ref={ref}
-      {...props}
-      className={cn(
-        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-        props?.className
-      )}
-    />
-  );
-}
-
-const Label = forwardRef(LabelBase);
-
-Label.displayName = 'Label';
-
-export { Label, type LabelProps };

package/src/components/connectycube-ui/link-preview.tsx

@@ -1,149 +0,0 @@
-import type React from 'react';
-import { forwardRef, memo, useCallback, useState } from 'react';
-import { Globe, type LucideProps } from 'lucide-react';
-import { cn } from './utils';
-
-const decodeHtmlEntities = (text: string) => {
-  if (text.length === 0) {
-    return text;
-  }
-
-  const element = document.createElement('div');
-
-  element.innerHTML = text;
-
-  return element.textContent.trim();
-};
-
-interface LinkPreviewProps extends React.ComponentProps<'a'> {
-  thin?: boolean;
-  title?: string;
-  description?: string;
-  icon?: React.ComponentProps<'img'>['src'];
-  image?: React.ComponentProps<'img'>['src'];
-  onReady?: () => void;
-  iconFallbackElement?: React.ReactElement;
-  titleContainerProps?: React.ComponentProps<'div'>;
-  iconProps?: React.ComponentProps<'img'>;
-  iconFallbackProps?: LucideProps;
-  titleProps?: React.ComponentProps<'span'>;
-  descriptionProps?: React.ComponentProps<'div'>;
-  imageContainerProps?: React.ComponentProps<'div'>;
-  imageProps?: React.ComponentProps<'img'>;
-}
-
-function LinkPreviewBase(
-  {
-    thin = false,
-    title = '',
-    description = '',
-    icon,
-    iconFallbackElement,
-    image,
-    onReady = () => {},
-    titleContainerProps,
-    iconProps,
-    iconFallbackProps,
-    titleProps,
-    descriptionProps,
-    imageContainerProps,
-    imageProps,
-    ...props
-  }: LinkPreviewProps,
-  ref: React.ForwardedRef<HTMLAnchorElement>
-) {
-  const [iconSrc, setIconSrc] = useState<React.ComponentProps<'img'>['src']>(icon);
-  const [imageSrc, setImageSrc] = useState<React.ComponentProps<'img'>['src']>(image);
-  const handleOnLoad = useCallback(
-    (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
-      imageProps?.onLoad?.(event);
-      onReady();
-    },
-    [onReady, imageProps]
-  );
-  const handleIconOnError = useCallback(
-    (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
-      iconProps?.onError?.(event);
-      setIconSrc(undefined);
-    },
-    [iconProps]
-  );
-  const handleImageOnError = useCallback(
-    (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
-      imageProps?.onError?.(event);
-      setImageSrc(undefined);
-    },
-    [imageProps]
-  );
-
-  return (
-    <a
-      ref={ref}
-      target="_blank"
-      rel="noopener noreferrer"
-      {...props}
-      className={cn(
-        'transition-color duration-300 ease-out',
-        'grid items-start gap-2 p-2 mt-1 overflow-hidden rounded border-l-4 border-l-ring bg-white hover:bg-ring/20',
-        thin ? 'grid-cols-3' : 'grid-cols-1',
-        props?.className
-      )}
-    >
-      <div
-        {...titleContainerProps}
-        className={cn('flex items-start gap-2', thin ? 'col-span-3' : 'col-span-1', titleContainerProps?.className)}
-      >
-        {iconSrc ? (
-          <img
-            alt="icon"
-            src={iconSrc}
-            {...iconProps}
-            onError={handleIconOnError}
-            className={cn('size-5', iconProps?.className)}
-          />
-        ) : (
-          iconFallbackElement || <Globe {...iconFallbackProps} className={cn('size-5', iconFallbackProps?.className)} />
-        )}
-        <span
-          {...titleProps}
-          className={cn('text-sm font-bold', thin ? 'line-clamp-1' : 'line-clamp-2', titleProps?.className)}
-        >
-          {decodeHtmlEntities(title)}
-        </span>
-      </div>
-      {description && (
-        <span
-          {...descriptionProps}
-          className={cn(
-            'text-sm line-clamp-5',
-            thin ? (imageSrc ? 'col-span-2' : 'col-span-3') : 'col-span-1',
-            descriptionProps?.className
-          )}
-        >
-          {decodeHtmlEntities(description)}
-        </span>
-      )}
-      {imageSrc && (
-        <div
-          {...imageContainerProps}
-          className={cn('flex items-center justify-center', imageContainerProps?.className)}
-        >
-          <img
-            alt="banner"
-            src={imageSrc}
-            {...imageProps}
-            onLoad={handleOnLoad}
-            onError={handleImageOnError}
-            className={cn('rounded max-w-full object-contain', thin ? 'max-h-25' : 'max-h-60', imageProps?.className)}
-          />
-        </div>
-      )}
-    </a>
-  );
-}
-
-const LinkPreview = memo(forwardRef<HTMLAnchorElement, LinkPreviewProps>(LinkPreviewBase));
-
-LinkPreview.displayName = 'LinkPreview';
-
-export { LinkPreview, type LinkPreviewProps };

package/src/components/connectycube-ui/linkify-text.tsx

@@ -1,40 +0,0 @@
-import type React from 'react';
-import type { Opts } from 'linkifyjs';
-import { forwardRef, memo, useMemo } from 'react';
-import Linkify from 'linkify-react';
-import { cn } from './utils';
-
-const DEFAULT_LINKIFY_OPTIONS: Opts = {
-  target: '_blank',
-  rel: 'noopener noreferrer',
-  className: 'text-blue-500 hover:underline hover:text-blue-600 transition-color duration-300',
-};
-
-type LinkifyTextProps = React.ComponentProps<'p'> & {
-  text: string;
-  linkifyProps?: Opts;
-};
-
-function LinkifyTextBase(
-  { text, linkifyProps, ...props }: LinkifyTextProps,
-  ref: React.ForwardedRef<HTMLParagraphElement>
-) {
-  const options = useMemo(() => {
-    return {
-      ...DEFAULT_LINKIFY_OPTIONS,
-      ...linkifyProps,
-    };
-  }, [linkifyProps]);
-
-  return (
-    <p ref={ref} {...props} className={cn('wrap-break-word text-base', props?.className)}>
-      <Linkify options={options}>{text}</Linkify>
-    </p>
-  );
-}
-
-const LinkifyText = memo(forwardRef<HTMLParagraphElement, LinkifyTextProps>(LinkifyTextBase));
-
-LinkifyText.displayName = 'LinkifyText';
-
-export { LinkifyText, type LinkifyTextProps };

package/src/components/connectycube-ui/presence.jsx

@@ -1,81 +0,0 @@
-import { capitalize, cn } from './utils';
-
-function PresenceBadge({ status, ...props }) {
-  switch (status) {
-    case 'available':
-      return (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          fill="currentColor"
-          viewBox="0 0 16 16"
-          {...props}
-          className={cn('rounded-full size-4.5 text-green-600 bg-white', props?.className)}
-        >
-          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
-        </svg>
-      );
-    case 'busy':
-      return (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          fill="currentColor"
-          viewBox="0 0 16 16"
-          {...props}
-          className={cn('rounded-full size-4.5 text-red-600 bg-white', props?.className)}
-        >
-          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z" />
-        </svg>
-      );
-    case 'away':
-      return (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          fill="currentColor"
-          viewBox="0 0 16 16"
-          {...props}
-          className={cn('rounded-full size-4.5 text-yellow-500 bg-white', props?.className)}
-        >
-          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z" />
-        </svg>
-      );
-    case 'unknown':
-      return (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          fill="currentColor"
-          viewBox="0 0 16 16"
-          {...props}
-          className={cn('rounded-full size-4.5 text-gray-500 bg-white', props?.className)}
-        >
-          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247m2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z" />
-        </svg>
-      );
-    default:
-      return null;
-  }
-}
-
-PresenceBadge.displayName = 'PresenceBadge';
-
-function Presence({ badge = true, status, label, badgeProps, labelProps, ...props }) {
-  const presence = capitalize(label || status);
-
-  return (
-    <div {...props} className={cn('flex items-center gap-2', props?.className)}>
-      {badge && <PresenceBadge status={status} {...badgeProps} />}
-      <span {...labelProps}>{presence}</span>
-    </div>
-  );
-}
-
-Presence.displayName = 'Presence';
-
-export { Presence, PresenceBadge };