@papernote/ui 1.10.12 → 1.10.14

package/src/components/CollaboratorAvatars.tsx

@@ -0,0 +1,175 @@
+import { forwardRef } from 'react';
+import Tooltip from './Tooltip';
+
+export interface Collaborator {
+  /** Collaborator's name */
+  name: string;
+  /** Optional avatar URL */
+  avatar?: string;
+}
+
+export interface CollaboratorAvatarsProps {
+  /** Array of collaborators to display */
+  collaborators: Collaborator[];
+  /** Maximum number of avatars to display before showing overflow */
+  max?: number;
+  /** Size of the avatars */
+  size?: 'sm' | 'md' | 'lg';
+  /** Click handler for the avatar stack */
+  onClick?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const sizeStyles = {
+  sm: {
+    container: 'w-6 h-6 text-xs',
+    overlap: '-ml-2',
+    border: 'ring-2',
+  },
+  md: {
+    container: 'w-8 h-8 text-sm',
+    overlap: '-ml-2.5',
+    border: 'ring-2',
+  },
+  lg: {
+    container: 'w-10 h-10 text-base',
+    overlap: '-ml-3',
+    border: 'ring-2',
+  },
+};
+
+// Generate consistent color from name
+function getAvatarColor(name: string): string {
+  const colors = [
+    'bg-accent-500',
+    'bg-success-500',
+    'bg-warning-500',
+    'bg-error-500',
+    'bg-primary-500',
+  ];
+  
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  
+  return colors[Math.abs(hash) % colors.length];
+}
+
+// Get initials from name
+function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  }
+  return name.slice(0, 2).toUpperCase();
+}
+
+/**
+ * CollaboratorAvatars - Stacked avatar display for collaborators.
+ * 
+ * Features:
+ * - Displays avatars in an overlapping stack
+ * - Shows overflow indicator (+N) when exceeding max
+ * - Falls back to initials when no avatar image
+ * - Consistent color generation from names
+ * - Tooltip showing collaborator names
+ * - Three sizes: sm, md, lg
+ * - Optional click handler
+ */
+export const CollaboratorAvatars = forwardRef<HTMLDivElement, CollaboratorAvatarsProps>(
+  function CollaboratorAvatars(
+    {
+      collaborators,
+      max = 3,
+      size = 'md',
+      onClick,
+      className = '',
+    },
+    ref
+  ) {
+    const styles = sizeStyles[size];
+    const visible = collaborators.slice(0, max);
+    const overflow = collaborators.length - max;
+    const hasOverflow = overflow > 0;
+
+    const allNames = collaborators.map((c) => c.name).join(', ');
+    const tooltipContent = (
+      <div className="text-center">
+        <div className="font-medium mb-1">Collaborators</div>
+        <div className="text-ink-300">{allNames}</div>
+      </div>
+    );
+
+    const avatarStack = (
+      <div
+        ref={ref}
+        className={`
+          inline-flex items-center
+          ${onClick ? 'cursor-pointer hover:opacity-90 transition-opacity' : ''}
+          ${className}
+        `}
+        onClick={onClick}
+        role={onClick ? 'button' : 'group'}
+        aria-label={`${collaborators.length} collaborator${collaborators.length !== 1 ? 's' : ''}`}
+      >
+        {visible.map((collaborator, index) => (
+          <div
+            key={`${collaborator.name}-${index}`}
+            className={`
+              ${styles.container}
+              ${index > 0 ? styles.overlap : ''}
+              ${styles.border}
+              ring-white
+              rounded-full
+              flex items-center justify-center
+              overflow-hidden
+              ${collaborator.avatar ? '' : getAvatarColor(collaborator.name)}
+              text-white font-medium
+              shrink-0
+            `}
+            style={{ zIndex: visible.length - index }}
+          >
+            {collaborator.avatar ? (
+              <img
+                src={collaborator.avatar}
+                alt={collaborator.name}
+                className="w-full h-full object-cover"
+              />
+            ) : (
+              <span>{getInitials(collaborator.name)}</span>
+            )}
+          </div>
+        ))}
+
+        {hasOverflow && (
+          <div
+            className={`
+              ${styles.container}
+              ${styles.overlap}
+              ${styles.border}
+              ring-white
+              rounded-full
+              flex items-center justify-center
+              bg-paper-300
+              text-ink-600 font-medium
+              shrink-0
+            `}
+            style={{ zIndex: 0 }}
+          >
+            +{overflow}
+          </div>
+        )}
+      </div>
+    );
+
+    return (
+      <Tooltip content={tooltipContent} position="top">
+        {avatarStack}
+      </Tooltip>
+    );
+  }
+);
+
+export default CollaboratorAvatars;

package/src/components/InviteCard.stories.tsx

@@ -0,0 +1,174 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { InviteCard, PendingInvite } from './InviteCard';
+import Stack from './Stack';
+import Text from './Text';
+
+const meta: Meta<typeof InviteCard> = {
+  title: 'Collaboration/InviteCard',
+  component: InviteCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Card for inviting collaborators via email. Features email input with validation, pending invitations list, and cancel functionality.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    loading: {
+      control: 'boolean',
+      description: 'Whether an invitation is being sent',
+    },
+    maxPending: {
+      control: { type: 'number', min: 1, max: 10 },
+      description: 'Maximum pending invites to display',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InviteCard>;
+
+const now = new Date();
+const samplePending: PendingInvite[] = [
+  { email: 'alice@example.com', sentAt: new Date(now.getTime() - 5 * 60000) },
+  { email: 'bob@example.com', sentAt: new Date(now.getTime() - 2 * 3600000) },
+  { email: 'carol@example.com', sentAt: new Date(now.getTime() - 24 * 3600000) },
+];
+
+// Basic example
+export const Default: Story = {
+  args: {
+    onInvite: (email) => alert(`Invited: ${email}`),
+  },
+};
+
+// With pending invites
+export const WithPending: Story = {
+  args: {
+    onInvite: (email) => alert(`Invited: ${email}`),
+    pending: samplePending,
+    onCancelInvite: (email) => alert(`Cancelled: ${email}`),
+  },
+};
+
+// Loading state
+export const Loading: Story = {
+  args: {
+    onInvite: () => {},
+    loading: true,
+  },
+};
+
+// Interactive demo
+export const Interactive: Story = {
+  render: function InteractiveDemo() {
+    const [pending, setPending] = useState<PendingInvite[]>([]);
+    const [loading, setLoading] = useState(false);
+
+    const handleInvite = (email: string) => {
+      setLoading(true);
+      setTimeout(() => {
+        setPending((prev) => [
+          { email, sentAt: new Date() },
+          ...prev,
+        ]);
+        setLoading(false);
+      }, 1000);
+    };
+
+    const handleCancel = (email: string) => {
+      setPending((prev) => prev.filter((p) => p.email !== email));
+    };
+
+    return (
+      <div className="w-96">
+        <InviteCard
+          onInvite={handleInvite}
+          pending={pending}
+          loading={loading}
+          onCancelInvite={handleCancel}
+        />
+      </div>
+    );
+  },
+};
+
+// Many pending invites
+export const ManyPending: Story = {
+  args: {
+    onInvite: (email) => alert(`Invited: ${email}`),
+    pending: [
+      ...samplePending,
+      { email: 'david@example.com', sentAt: new Date() },
+      { email: 'eve@example.com', sentAt: new Date() },
+      { email: 'frank@example.com', sentAt: new Date() },
+      { email: 'grace@example.com', sentAt: new Date() },
+    ],
+    maxPending: 3,
+    onCancelInvite: (email) => alert(`Cancelled: ${email}`),
+  },
+};
+
+// Without cancel functionality
+export const WithoutCancel: Story = {
+  args: {
+    onInvite: (email) => alert(`Invited: ${email}`),
+    pending: samplePending,
+  },
+};
+
+// In context - Modal content
+export const ModalContext: Story = {
+  render: () => (
+    <div className="bg-paper-50 p-6 rounded-xl w-[450px]">
+      <Stack gap="lg">
+        <div>
+          <Text size="xl" weight="bold">Share "Q4 Budget"</Text>
+          <Text size="sm" className="text-ink-500 mt-1">
+            Invite team members to collaborate on this document.
+          </Text>
+        </div>
+        <InviteCard
+          onInvite={(email) => alert(`Invited: ${email}`)}
+          pending={samplePending.slice(0, 2)}
+          onCancelInvite={(email) => alert(`Cancelled: ${email}`)}
+        />
+      </Stack>
+    </div>
+  ),
+};
+
+// Empty state
+export const EmptyState: Story = {
+  render: () => (
+    <div className="w-96">
+      <InviteCard
+        onInvite={(email) => alert(`Invited: ${email}`)}
+        pending={[]}
+      />
+    </div>
+  ),
+};
+
+// Validation demo
+export const ValidationDemo: Story = {
+  render: () => (
+    <Stack gap="md" className="w-96">
+      <Text size="sm" className="text-ink-500">
+        Try submitting with:
+      </Text>
+      <ul className="text-sm text-ink-500 list-disc list-inside">
+        <li>Empty email</li>
+        <li>Invalid email format</li>
+        <li>Already invited email (alice@example.com)</li>
+      </ul>
+      <InviteCard
+        onInvite={(email) => alert(`Would invite: ${email}`)}
+        pending={[{ email: 'alice@example.com', sentAt: new Date() }]}
+      />
+    </Stack>
+  ),
+};

package/src/components/InviteCard.tsx

@@ -0,0 +1,209 @@
+import { useState } from 'react';
+import { Send, Clock, X, Mail } from 'lucide-react';
+import Button from './Button';
+import Input from './Input';
+import Stack from './Stack';
+import Text from './Text';
+
+export interface PendingInvite {
+  /** Email address of the invitee */
+  email: string;
+  /** When the invitation was sent */
+  sentAt: Date;
+}
+
+export interface InviteCardProps {
+  /** Callback when an invitation is sent */
+  onInvite: (email: string) => void;
+  /** List of pending invitations */
+  pending?: PendingInvite[];
+  /** Whether an invitation is being sent */
+  loading?: boolean;
+  /** Maximum pending invites to display */
+  maxPending?: number;
+  /** Callback to cancel a pending invite */
+  onCancelInvite?: (email: string) => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+// Format relative time
+function formatRelativeTime(date: Date): string {
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+
+// Simple email validation
+function isValidEmail(email: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+/**
+ * InviteCard - Card for inviting collaborators via email.
+ * 
+ * Features:
+ * - Email input with validation
+ * - Send button with loading state
+ * - List of pending invitations
+ * - Cancel pending invites
+ * - Relative timestamps for pending
+ */
+export function InviteCard({
+  onInvite,
+  pending = [],
+  loading = false,
+  maxPending = 5,
+  onCancelInvite,
+  className = '',
+}: InviteCardProps) {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const displayedPending = pending.slice(0, maxPending);
+  const hasMorePending = pending.length > maxPending;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    const trimmedEmail = email.trim();
+    
+    if (!trimmedEmail) {
+      setError('Email is required');
+      return;
+    }
+    
+    if (!isValidEmail(trimmedEmail)) {
+      setError('Please enter a valid email address');
+      return;
+    }
+
+    // Check if already invited
+    if (pending.some((p) => p.email.toLowerCase() === trimmedEmail.toLowerCase())) {
+      setError('This email has already been invited');
+      return;
+    }
+    
+    setError(null);
+    onInvite(trimmedEmail);
+    setEmail('');
+  };
+
+  const handleEmailChange = (value: string) => {
+    setEmail(value);
+    if (error) {
+      setError(null);
+    }
+  };
+
+  return (
+    <div
+      className={`
+        bg-white
+        rounded-xl
+        border border-paper-200
+        shadow-card
+        p-4
+        ${className}
+      `}
+    >
+      <Stack gap="md">
+        {/* Header */}
+        <Stack direction="horizontal" gap="sm" align="center">
+          <div className="p-2 bg-accent-100 rounded-lg">
+            <Mail className="w-5 h-5 text-accent-600" />
+          </div>
+          <div>
+            <Text weight="semibold" className="text-ink-800">Invite People</Text>
+            <Text size="sm" className="text-ink-500">Share access via email</Text>
+          </div>
+        </Stack>
+
+        {/* Invite form */}
+        <form onSubmit={handleSubmit}>
+          <Stack direction="horizontal" gap="sm">
+            <div className="flex-1">
+              <Input
+                type="email"
+                placeholder="Enter email address"
+                value={email}
+                onChange={(e) => handleEmailChange(e.target.value)}
+                validationState={error ? 'error' : undefined}
+                validationMessage={error || undefined}
+                disabled={loading}
+              />
+            </div>
+            <Button
+              type="submit"
+              variant="primary"
+              loading={loading}
+              disabled={!email.trim()}
+              icon={<Send className="w-4 h-4" />}
+            >
+              Send
+            </Button>
+          </Stack>
+        </form>
+
+        {/* Pending invites */}
+        {displayedPending.length > 0 && (
+          <Stack gap="sm">
+            <Stack direction="horizontal" gap="xs" align="center">
+              <Clock className="w-4 h-4 text-ink-400" />
+              <Text size="sm" className="text-ink-500">
+                Pending invitations ({pending.length})
+              </Text>
+            </Stack>
+            
+            <div className="border border-paper-200 rounded-lg divide-y divide-paper-200">
+              {displayedPending.map((invite) => (
+                <div
+                  key={invite.email}
+                  className="px-3 py-2 flex items-center justify-between"
+                >
+                  <Stack gap="xs">
+                    <Text size="sm" weight="medium" className="text-ink-700">
+                      {invite.email}
+                    </Text>
+                    <Text size="xs" className="text-ink-400">
+                      Sent {formatRelativeTime(invite.sentAt)}
+                    </Text>
+                  </Stack>
+                  
+                  {onCancelInvite && (
+                    <button
+                      onClick={() => onCancelInvite(invite.email)}
+                      className="p-1 rounded hover:bg-paper-100 text-ink-400 hover:text-error-500 transition-colors"
+                      aria-label={`Cancel invitation to ${invite.email}`}
+                    >
+                      <X className="w-4 h-4" />
+                    </button>
+                  )}
+                </div>
+              ))}
+              
+              {hasMorePending && (
+                <div className="px-3 py-2 text-center">
+                  <Text size="sm" className="text-ink-400">
+                    +{pending.length - maxPending} more
+                  </Text>
+                </div>
+              )}
+            </div>
+          </Stack>
+        )}
+      </Stack>
+    </div>
+  );
+}
+
+export default InviteCard;