@object-ui/plugin-view 3.3.0 → 3.3.1

package/src/SharedViewLink.tsx

@@ -1,199 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import * as React from 'react';
-import {
-  cn,
-  Button,
-  Badge,
-  Input,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@object-ui/components';
-import { Share2, Copy, Check, Lock, Calendar } from 'lucide-react';
-
-export interface SharedViewLinkProps {
-  /** The object name used in the share URL path */
-  objectName: string;
-  /** Optional view identifier; defaults to "default" */
-  viewId?: string;
-  /** Base URL for the shareable link (defaults to window.location.origin) */
-  baseUrl?: string;
-  /** Callback fired after a share URL is generated */
-  onShare?: (shareUrl: string, options?: { password?: string; expiresAt?: string }) => void;
-  className?: string;
-}
-
-function generateToken(): string {
-  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
-    return crypto.randomUUID();
-  }
-  // Fallback for environments without crypto.randomUUID
-  if (typeof crypto !== 'undefined' && typeof crypto.getRandomValues === 'function') {
-    const bytes = new Uint8Array(16);
-    crypto.getRandomValues(bytes);
-    return Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
-  }
-  return Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
-}
-
-function buildShareUrl(baseUrl: string, objectName: string, viewId: string, token: string): string {
-  return `${baseUrl}/share/${objectName}/${viewId}?mode=readonly&token=${token}`;
-}
-
-export const SharedViewLink: React.FC<SharedViewLinkProps> = ({
-  objectName,
-  viewId = 'default',
-  baseUrl,
-  onShare,
-  className,
-}) => {
-  const [shareUrl, setShareUrl] = React.useState<string | null>(null);
-  const [copied, setCopied] = React.useState(false);
-  const [open, setOpen] = React.useState(false);
-  const [password, setPassword] = React.useState('');
-  const [expiresIn, setExpiresIn] = React.useState('');
-
-  const resolvedBaseUrl = baseUrl ?? (typeof window !== 'undefined' ? window.location.origin : '');
-
-  const handleGenerateLink = React.useCallback(() => {
-    const token = generateToken();
-    const url = buildShareUrl(resolvedBaseUrl, objectName, viewId, token);
-    setShareUrl(url);
-    setCopied(false);
-    const expiresAt = expiresIn ? new Date(Date.now() + parseInt(expiresIn, 10) * 86400000).toISOString() : undefined;
-    onShare?.(url, { password: password || undefined, expiresAt });
-  }, [resolvedBaseUrl, objectName, viewId, onShare, password, expiresIn]);
-
-  const handleCopy = React.useCallback(async () => {
-    if (!shareUrl) return;
-    try {
-      await navigator.clipboard.writeText(shareUrl);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Fallback for environments without clipboard API
-      const textarea = document.createElement('textarea');
-      textarea.value = shareUrl;
-      document.body.appendChild(textarea);
-      textarea.select();
-      document.execCommand('copy');
-      document.body.removeChild(textarea);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  }, [shareUrl]);
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className={cn('gap-2', className)}>
-          <Share2 className="h-4 w-4" />
-          Share
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-96 space-y-4" align="end">
-        <div className="space-y-2">
-          <div className="flex items-center justify-between">
-            <h4 className="text-sm font-medium">Share View</h4>
-            <Badge variant="secondary" className="text-xs">
-              Read-only
-            </Badge>
-          </div>
-          <p className="text-xs text-muted-foreground">
-            Generate a public link to share this view. Recipients can view data without logging in.
-          </p>
-        </div>
-
-        {!shareUrl ? (
-          <div className="space-y-3">
-            {/* Password protection */}
-            <div className="space-y-1.5">
-              <label className="flex items-center gap-1.5 text-xs font-medium text-foreground">
-                <Lock className="h-3.5 w-3.5" />
-                Password protection (optional)
-              </label>
-              <Input
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="Enter password..."
-                className="h-8 text-xs"
-              />
-            </div>
-
-            {/* Expiration */}
-            <div className="space-y-1.5">
-              <label className="flex items-center gap-1.5 text-xs font-medium text-foreground">
-                <Calendar className="h-3.5 w-3.5" />
-                Expires after (optional)
-              </label>
-              <select
-                value={expiresIn}
-                onChange={(e) => setExpiresIn(e.target.value)}
-                className="w-full h-8 text-xs rounded-md border border-input bg-background px-3"
-              >
-                <option value="">Never</option>
-                <option value="1">1 day</option>
-                <option value="7">7 days</option>
-                <option value="30">30 days</option>
-                <option value="90">90 days</option>
-              </select>
-            </div>
-
-            <Button onClick={handleGenerateLink} className="w-full gap-2" size="sm">
-              <Share2 className="h-4 w-4" />
-              Generate Link
-            </Button>
-          </div>
-        ) : (
-          <>
-            <div className="flex items-center gap-2">
-              <Input
-                value={shareUrl}
-                readOnly
-                className="h-8 text-xs"
-                onClick={(e) => (e.target as HTMLInputElement).select()}
-              />
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleCopy}
-                className="shrink-0 gap-1"
-              >
-                {copied ? (
-                  <Check className="h-4 w-4 text-green-500" />
-                ) : (
-                  <Copy className="h-4 w-4" />
-                )}
-              </Button>
-            </div>
-            {/* Share options indicators */}
-            {(password || expiresIn) && (
-              <div className="flex items-center gap-2 flex-wrap">
-                {password && (
-                  <Badge variant="outline" className="text-xs gap-1">
-                    <Lock className="h-3 w-3" />
-                    Password protected
-                  </Badge>
-                )}
-                {expiresIn && (
-                  <Badge variant="outline" className="text-xs gap-1">
-                    <Calendar className="h-3 w-3" />
-                    Expires in {expiresIn} day{expiresIn !== '1' ? 's' : ''}
-                  </Badge>
-                )}
-              </div>
-            )}
-          </>
-        )}
-      </PopoverContent>
-    </Popover>
-  );
-};

package/src/SortUI.tsx

@@ -1,210 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import * as React from 'react';
-import {
-  cn,
-  Button,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  SortBuilder,
-} from '@object-ui/components';
-import { cva } from 'class-variance-authority';
-import { ArrowDown, ArrowUp } from 'lucide-react';
-import type { SortItem } from '@object-ui/components';
-import type { SortUISchema } from '@object-ui/types';
-
-export type SortUIProps = {
-  schema: SortUISchema;
-  className?: string;
-  onChange?: (sort: SortUISchema['sort']) => void;
-  [key: string]: any;
-};
-
-type SortEntry = {
-  field: string;
-  direction: 'asc' | 'desc';
-};
-
-const sortContainerVariants = cva('', {
-  variants: {
-    variant: {
-      buttons: 'flex flex-wrap gap-2',
-      dropdown: 'flex flex-wrap items-center gap-3',
-      builder: 'space-y-3',
-    },
-  },
-  defaultVariants: {
-    variant: 'dropdown',
-  },
-});
-
-const toSortEntries = (sort?: SortUISchema['sort']): SortEntry[] => {
-  if (!sort) return [];
-  return sort.map(item => ({
-    field: item.field,
-    direction: item.direction,
-  }));
-};
-
-const toSortItems = (sort: SortEntry[]): SortItem[] => {
-  return sort.map(item => ({
-    id: `${item.field}-${item.direction}`,
-    field: item.field,
-    order: item.direction,
-  }));
-};
-
-const toSortEntriesFromItems = (items: SortItem[]): SortEntry[] => {
-  return items
-    .filter(item => item.field)
-    .map(item => ({
-      field: item.field,
-      direction: item.order,
-    }));
-};
-
-export const SortUI: React.FC<SortUIProps> = ({
-  schema,
-  className,
-  onChange,
-}) => {
-  const [sortState, setSortState] = React.useState<SortEntry[]>(() => toSortEntries(schema.sort));
-  const [builderItems, setBuilderItems] = React.useState<SortItem[]>(() => toSortItems(toSortEntries(schema.sort)));
-
-  React.useEffect(() => {
-    const entries = toSortEntries(schema.sort);
-    setSortState(entries);
-    setBuilderItems(toSortItems(entries));
-  }, [schema.sort]);
-
-  const notifyChange = React.useCallback((nextSort: SortEntry[]) => {
-    setSortState(nextSort);
-    onChange?.(nextSort);
-
-    if (schema.onChange && typeof window !== 'undefined') {
-      window.dispatchEvent(
-        new CustomEvent(schema.onChange, {
-          detail: { sort: nextSort },
-        })
-      );
-    }
-  }, [onChange, schema.onChange]);
-
-  const handleToggle = React.useCallback((field: string) => {
-    const existing = sortState.find(item => item.field === field);
-    const multiple = Boolean(schema.multiple);
-
-    if (!existing) {
-      const next = multiple
-        ? [...sortState, { field, direction: 'asc' as const }]
-        : [{ field, direction: 'asc' as const }];
-      notifyChange(next);
-      return;
-    }
-
-    if (existing.direction === 'asc') {
-      const next = sortState.map(item =>
-        item.field === field ? { ...item, direction: 'desc' as const } : item
-      );
-      notifyChange(next);
-      return;
-    }
-
-    const next = sortState.filter(item => item.field !== field);
-    notifyChange(next);
-  }, [notifyChange, schema.multiple, sortState]);
-
-  const variant = schema.variant || 'dropdown';
-
-  if (variant === 'buttons') {
-    return (
-      <div className={cn(sortContainerVariants({ variant: 'buttons' }), className)}>
-        {schema.fields.map(field => {
-          const current = sortState.find(item => item.field === field.field);
-          const Icon = current?.direction === 'asc' ? ArrowUp : ArrowDown;
-          return (
-            <Button
-              key={field.field}
-              type="button"
-              variant={current ? 'secondary' : 'outline'}
-              size="sm"
-              onClick={() => handleToggle(field.field)}
-              className="gap-2"
-            >
-              <span>{field.label || field.field}</span>
-              {current && <Icon className="h-3.5 w-3.5" />}
-            </Button>
-          );
-        })}
-      </div>
-    );
-  }
-
-  if (schema.multiple) {
-    return (
-      <div className={cn(sortContainerVariants({ variant: 'builder' }), className)}>
-        <SortBuilder
-          fields={schema.fields.map(field => ({ value: field.field, label: field.label || field.field }))}
-          value={builderItems}
-          onChange={(items) => {
-            setBuilderItems(items);
-            notifyChange(toSortEntriesFromItems(items));
-          }}
-        />
-      </div>
-    );
-  }
-
-  const singleSort = sortState[0];
-
-  return (
-    <div className={cn(sortContainerVariants({ variant: 'dropdown' }), className)}>
-      <Select
-        value={singleSort?.field || ''}
-        onValueChange={(value) => {
-          if (!value) {
-            notifyChange([]);
-            return;
-          }
-          notifyChange([{ field: value, direction: singleSort?.direction || 'asc' }]);
-        }}
-      >
-        <SelectTrigger className="w-56">
-          <SelectValue placeholder="Select field" />
-        </SelectTrigger>
-        <SelectContent>
-          {schema.fields.map(field => (
-            <SelectItem key={field.field} value={field.field}>
-              {field.label || field.field}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-
-      <Select
-        value={singleSort?.direction || 'asc'}
-        onValueChange={(value) => {
-          if (!singleSort?.field) return;
-          notifyChange([{ field: singleSort.field, direction: value as 'asc' | 'desc' }]);
-        }}
-      >
-        <SelectTrigger className="w-36">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="asc">Ascending</SelectItem>
-          <SelectItem value="desc">Descending</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  );
-};