@connectycube/react-ui-kit 0.0.16 → 0.0.18

package/gen/components/file-picker.jsx

@@ -0,0 +1,200 @@
+import { forwardRef, useState } from 'react';
+import { FilePlusCorner, Paperclip } from 'lucide-react';
+import { Label } from './label';
+import { cn } from './utils';
+
+const areValidFiles = (files, accept) => {
+  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, accept, multiple, onSelectFile, onInvalidFile) => {
+  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();
+  }
+};
+
+function FilePickerInputBase(
+  {
+    onSelectFile = () => {},
+    onInvalidFile = () => {},
+    multiple = false,
+    accept = '*/*',
+    iconElement,
+    labelProps,
+    iconProps,
+    ...props
+  },
+  ref
+) {
+  const handleChange = (event) => {
+    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(FilePickerInputBase);
+
+FilePickerInput.displayName = 'FilePickerInput';
+
+function FilePickerDropzoneBase(
+  {
+    onSelectFile = () => {},
+    onInvalidFile = () => {},
+    multiple = false,
+    accept = '*/*',
+    children,
+    iconElement,
+    placeholder,
+    dropZoneProps,
+    placeholderContainerProps,
+    iconProps,
+    placeholderProps,
+    ...props
+  },
+  ref
+) {
+  const [isDragging, setIsDragging] = useState(false);
+  const handleDragEvent = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const handleDrop = (event) => {
+    handleDragEvent(event);
+    setIsDragging(false);
+    handleFiles(event.dataTransfer.files, accept, multiple, onSelectFile, onInvalidFile);
+    event.dataTransfer.clearData();
+  };
+  const handleDragEnter = (event) => {
+    handleDragEvent(event);
+
+    if (event.dataTransfer.items && event.dataTransfer.items.length > 0) {
+      setIsDragging(true);
+    }
+  };
+  const handleDragLeave = (event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      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(FilePickerDropzoneBase);
+
+FilePickerDropzone.displayName = 'FilePickerDropzone';
+
+export { FilePickerInput, FilePickerDropzone, FilePickerInput as Input, FilePickerDropzone as Dropzone };

package/gen/components/formatted-date.jsx

@@ -0,0 +1,57 @@
+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/gen/components/input.jsx

@@ -0,0 +1,23 @@
+import { forwardRef } from 'react';
+import { cn } from './utils';
+
+function InputBase(props, ref) {
+  return (
+    <input
+      ref={ref}
+      {...props}
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-10 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        props?.className
+      )}
+    />
+  );
+}
+
+const Input = forwardRef(InputBase);
+
+Input.displayName = 'Input';
+
+export { Input };

package/gen/components/label.jsx

@@ -0,0 +1,22 @@
+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/gen/components/link-preview.jsx

@@ -0,0 +1,131 @@
+import { forwardRef, memo, useCallback, useState } from 'react';
+import { Globe } from 'lucide-react';
+import { cn } from './utils';
+
+const decodeHtmlEntities = (text) => {
+  if (text.length === 0) {
+    return text;
+  }
+
+  const element = document.createElement('div');
+
+  element.innerHTML = text;
+
+  return element.textContent.trim();
+};
+
+function LinkPreviewBase(
+  {
+    thin = false,
+    title = '',
+    description = '',
+    icon,
+    iconFallbackElement,
+    image,
+    onReady = () => {},
+    titleContainerProps,
+    iconProps,
+    iconFallbackProps,
+    titleProps,
+    descriptionProps,
+    imageContainerProps,
+    imageProps,
+    ...props
+  },
+  ref
+) {
+  const [iconSrc, setIconSrc] = useState(icon);
+  const [imageSrc, setImageSrc] = useState(image);
+  const handleOnLoad = useCallback(
+    (event) => {
+      imageProps?.onLoad?.(event);
+      onReady();
+    },
+    [onReady, imageProps]
+  );
+  const handleIconOnError = useCallback(
+    (event) => {
+      iconProps?.onError?.(event);
+      setIconSrc(undefined);
+    },
+    [iconProps]
+  );
+  const handleImageOnError = useCallback(
+    (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(LinkPreviewBase));
+
+LinkPreview.displayName = 'LinkPreview';
+
+export { LinkPreview };

package/gen/components/linkify-text.jsx

@@ -0,0 +1,31 @@
+import { forwardRef, memo, useMemo } from 'react';
+import Linkify from 'linkify-react';
+import { cn } from './utils';
+
+const DEFAULT_LINKIFY_OPTIONS = {
+  target: '_blank',
+  rel: 'noopener noreferrer',
+};
+
+function LinkifyTextBase({ text, linkifyProps, ...props }, ref) {
+  const options = useMemo(
+    () => ({
+      ...DEFAULT_LINKIFY_OPTIONS,
+      ...linkifyProps,
+      className: cn('text-blue-500 hover:text-blue-600 hover:underline', linkifyProps?.className),
+    }),
+    [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(LinkifyTextBase));
+
+LinkifyText.displayName = 'LinkifyText';
+
+export { LinkifyText };

package/gen/components/search.jsx

@@ -0,0 +1,75 @@
+import { forwardRef, useState } from 'react';
+import { cn } from './utils';
+import { Input } from './input';
+import { Search as SearchIcon, X as CloseIcon } from 'lucide-react';
+
+function SearchBase(
+  {
+    onSearch = () => {},
+    onCancel = () => {},
+    hasSearchIcon = true,
+    hasCancelIcon = true,
+    searchIconProps,
+    cancelIconProps,
+    containerProps,
+    ...props
+  },
+  ref
+) {
+  const [value, setValue] = useState('');
+  const handleOnSearch = (e) => {
+    const keyword = e.target.value;
+
+    setValue(keyword);
+    onSearch(keyword.toLowerCase());
+  };
+  const handleOnCancel = () => {
+    setValue('');
+    onCancel();
+  };
+
+  return (
+    <div {...containerProps} className={cn('group relative', containerProps?.className)}>
+      {hasSearchIcon && (
+        <SearchIcon
+          {...searchIconProps}
+          className={cn(
+            'absolute top-1/2 left-2 transform -translate-y-1/2 size-5 text-muted-foreground group-focus-within:text-ring',
+            searchIconProps?.className
+          )}
+        />
+      )}
+      <Input
+        ref={ref}
+        name="search"
+        placeholder={props?.placeholder || 'Search...'}
+        value={value}
+        onChange={handleOnSearch}
+        {...props}
+        className={cn(
+          'placeholder:text-muted-foreground focus-visible:ring-ring/50 focus-visible:ring flex',
+          hasSearchIcon ? 'pl-10' : 'pl-3',
+          hasCancelIcon ? 'pr-10' : 'pr-3',
+          props?.className
+        )}
+      />
+      {hasCancelIcon && (
+        <CloseIcon
+          onClick={handleOnCancel}
+          {...cancelIconProps}
+          className={cn(
+            'absolute top-1/2 right-2 transform -translate-y-1/2 size-5 text-muted-foreground cursor-pointer hover:text-ring transition-all duration-300 ease-in-out',
+            value.length > 0 ? 'opacity-100 scale-100' : 'opacity-0 scale-75 pointer-events-none',
+            cancelIconProps?.className
+          )}
+        />
+      )}
+    </div>
+  );
+}
+
+const Search = forwardRef(SearchBase);
+
+Search.displayName = 'Search';
+
+export { Search };

package/gen/components/spinner.jsx

@@ -0,0 +1,36 @@
+import { Loader, LoaderCircle } from 'lucide-react';
+import { cn } from './utils';
+
+function Spinner({ loading = false, layout = 'flow', type = 'default', ...props }) {
+  const LoaderIcon = type === 'circle' ? LoaderCircle : Loader;
+
+  if (!loading) {
+    return null;
+  }
+
+  const spinnerElement = (
+    <LoaderIcon
+      strokeWidth={2.5}
+      {...props}
+      className={cn('animate-spin text-ring', layout === 'flow' && 'mx-auto', props?.className)}
+    />
+  );
+
+  switch (layout) {
+    case 'absolute':
+      return (
+        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">{spinnerElement}</div>
+      );
+    case 'centered':
+      return <div className="flex items-center justify-center size-full">{spinnerElement}</div>;
+    case 'overlay':
+      return <div className="flex items-center justify-center size-full absolute bg-muted/50">{spinnerElement}</div>;
+    case 'flow':
+    default:
+      return spinnerElement;
+  }
+}
+
+Spinner.displayName = 'Spinner';
+
+export { Spinner };

package/gen/components/status-sent.jsx

@@ -0,0 +1,21 @@
+import { Ban, Check, CheckCheck, Clock } from 'lucide-react';
+import { cn } from './utils';
+
+const StatusSent = ({ status, ...props }) => {
+  switch (status) {
+    case 'wait':
+      return <Clock {...props} className={cn('text-gray-500 size-4', props?.className)} />;
+    case 'sent':
+      return <Check {...props} className={cn('text-gray-500 size-4', props?.className)} />;
+    case 'read':
+      return <CheckCheck {...props} className={cn('text-gray-500 size-4', props?.className)} />;
+    case 'lost':
+      return <Ban {...props} className={cn('text-red-500 size-4', props?.className)} />;
+    default:
+      return null;
+  }
+};
+
+StatusSent.displayName = 'StatusSent';
+
+export { StatusSent };

package/gen/components/stream-view.jsx

@@ -1,6 +1,10 @@
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Maximize, Minimize, PictureInPicture2 } from 'lucide-react';
-import { cn, getRandomString } from './utils';
+import { cn } from './utils';
+
+function getRandomString(length = 8) {
+  return (Date.now() / Math.random()).toString(36).replace('.', '').slice(0, length);
+}
 
 function StreamViewBase({ id, stream, mirror, className, muted, ...props }, ref) {
   const innerRef = useRef(null);

package/gen/components/utils.js

@@ -5,17 +5,6 @@ export function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-export function getRandomString(length = 8) {
-  return (Date.now() / Math.random()).toString(36).replace('.', '').slice(0, length);
-}
-
-export function getInitialsFromName(name) {
-  const words = name?.trim().split(/\s+/).filter(Boolean) ?? [];
-  const result = words.length > 1 ? `${words[0]?.[0]}${words[1]?.[0]}` : (words[0]?.slice(0, 2) ?? 'NA');
-
-  return result.toUpperCase();
-}
-
 export function capitalize(str) {
   return typeof str === 'string' && str.length > 0 ? `${str[0]?.toUpperCase()}${str.slice(1)}` : '';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectycube/react-ui-kit",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "Simple React UI Kit generator with TSX/JSX",
   "homepage": "https://github.com/ConnectyCube/react-ui-kit#readme",
   "bugs": {
@@ -64,13 +64,16 @@
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "execa": "^9.6.0",
     "fs-extra": "^11.3.2",
-    "lucide-react": "^0.554.0",
+    "linkify-react": "^4.3.2",
+    "lucide-react": "^0.555.0",
     "prompts": "^2.4.2",
     "tailwind-merge": "^3.4.0"
   },

package/src/components/alert-dialog.tsx

@@ -96,7 +96,9 @@ function AlertDialogBase(
               className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', footerProps?.className)}
             >
               <AlertDialogPrimitive.Cancel {...cancelProps} onClick={onCancel}>
-                <Button {...cancelButtonProps}>{cancelTitle}</Button>
+                <Button variant="outline" {...cancelButtonProps}>
+                  {cancelTitle}
+                </Button>
               </AlertDialogPrimitive.Cancel>
               <AlertDialogPrimitive.Action {...actionProps} onClick={onConfirm}>
                 <Button {...actionButtonProps}>{actionTitle}</Button>