@connectycube/react-ui-kit 0.0.17 → 0.0.19

package/src/components/linkify-text.tsx

@@ -0,0 +1,41 @@
+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',
+};
+
+interface LinkifyTextProps extends React.ComponentProps<'p'> {
+  text: string;
+  linkifyProps?: Opts;
+}
+
+function LinkifyTextBase(
+  { text, linkifyProps, ...props }: LinkifyTextProps,
+  ref: React.ForwardedRef<HTMLParagraphElement>
+) {
+  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<HTMLParagraphElement, LinkifyTextProps>(LinkifyTextBase));
+
+LinkifyText.displayName = 'LinkifyText';
+
+export { LinkifyText, type LinkifyTextProps };

package/src/components/spinner.tsx

@@ -1,14 +1,40 @@
-import { LoaderCircle, type LucideProps } from 'lucide-react';
+import { Loader, LoaderCircle, type LucideProps } from 'lucide-react';
 import { cn } from './utils';
 
 interface SpinnerProps extends LucideProps {
   loading?: boolean;
+  type?: 'default' | 'circle';
+  layout?: 'absolute' | 'centered' | 'overlay' | 'flow';
 }
 
-function Spinner({ loading = true, ...props }: SpinnerProps) {
-  return loading ? (
-    <LoaderCircle strokeWidth={2.5} {...props} className={cn('animate-spin mx-auto text-ring', props?.className)} />
-  ) : null;
+function Spinner({ loading = false, layout = 'flow', type = 'default', ...props }: SpinnerProps) {
+  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';

package/src/components/status-sent.tsx

@@ -0,0 +1,25 @@
+import { Ban, Check, CheckCheck, Clock, type LucideProps } from 'lucide-react';
+import { cn } from './utils';
+
+interface StatusSentProps extends LucideProps {
+  status?: 'wait' | 'sent' | 'read' | 'lost' | null | undefined;
+}
+
+const StatusSent: React.FC<StatusSentProps> = ({ 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, type StatusSentProps };

package/src/components/switch.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { cn } from './utils';
+
+type SwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root>;
+
+function Switch(props: SwitchProps) {
+  return (
+    <SwitchPrimitive.Root
+      {...props}
+      className={cn(
+        'peer data-[state=checked]:bg-ring data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15em] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring disabled:cursor-not-allowed disabled:opacity-50',
+        props?.className
+      )}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch, type SwitchProps };

package/src/components/utils.ts

@@ -9,13 +9,6 @@ export function getRandomString(length = 8): string {
   return (Date.now() / Math.random()).toString(36).replace('.', '').slice(0, length);
 }
 
-export function getInitialsFromName(name?: string): string {
-  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?: string): string {
   return typeof str === 'string' && str.length > 0 ? `${str[0]?.toUpperCase()}${str.slice(1)}` : '';
 }

package/src/index.ts

@@ -1,7 +1,75 @@
-export { DismissLayer } from './components/dismiss-layer';
+export {
+  Attachment,
+  AttachmentLink,
+  AttachmentImage,
+  AttachmentAudio,
+  AttachmentVideo,
+  AttachmentFile,
+  AttachmentFailed,
+  type AttachmentProps,
+  type AttachmentLinkProps,
+  type AttachmentImageProps,
+  type AttachmentAudioProps,
+  type AttachmentVideoProps,
+  type AttachmentFileProps,
+  type AttachmentFailedProps,
+} from './components/attachment';
 
-export type { DismissLayerProps } from './components/dismiss-layer';
+export { Avatar, type AvatarProps } from './components/avatar';
 
-export { StreamView, LocalStreamView, RemoteStreamView, FullscreenStreamView } from './components/stream-view';
+export { Badge, type BadgeProps } from './components/badge';
 
-export type { StreamViewProps, FullscreenStreamViewProps, FullscreenStreamViewRef } from './components/stream-view';
+export { Button, type ButtonProps } from './components/button';
+
+export { DialogItem, type DialogItemProps } from './components/dialog-item';
+
+export { DismissLayer, type DismissLayerProps } from './components/dismiss-layer';
+
+export {
+  FilePickerInput,
+  FilePickerDropzone,
+  type FilePickerInputProps,
+  type FilePickerDropzoneProps,
+} from './components/file-picker';
+
+export { FormattedDate, type FormattedDateProps } from './components/formatted-date';
+
+export { Input, type InputProps } from './components/input';
+
+export { Label, type LabelProps } from './components/label';
+
+export { LinkPreview, type LinkPreviewProps } from './components/link-preview';
+
+export { LinkifyText, type LinkifyTextProps } from './components/linkify-text';
+
+export { PlaceholderText, type PlaceholderTextProps } from './components/placeholder-text';
+
+export {
+  Presence,
+  PresenceBadge,
+  type PresenceStatus,
+  type PresenceProps,
+  type PresenceBadgeProps,
+} from './components/presence';
+
+export { Search, type SearchProps } from './components/search';
+
+export { Spinner, type SpinnerProps } from './components/spinner';
+
+export { StatusIndicator, type StatusName, type StatusIndicatorProps } from './components/status-indicator';
+
+export { StatusSent, type StatusSentProps } from './components/status-sent';
+
+export {
+  StreamView,
+  LocalStreamView,
+  RemoteStreamView,
+  FullscreenStreamView,
+  type StreamViewProps,
+  type FullscreenStreamViewProps,
+  type FullscreenStreamViewRef,
+} from './components/stream-view';
+
+export { Switch, type SwitchProps } from './components/switch';
+
+export * from './components/utils';