skiff-front-utils

import { 
  createPermissionsAuthData,
  createChunkAuthData,
  MetadataDatagram 
} from 'skiff-front-utils';

// Create signature data for permissions
const authData = createPermissionsAuthData(
  encryptedSessionKey,
  PermissionLevel.Editor,
  expiryDate
);

// Create signature data for document chunks
const chunkAuth = createChunkAuthData(0, encryptedContent);

// Metadata datagram for document metadata
const metadata = MetadataDatagram.encode({ title, icon, color });

import { 
  downloadDocument,
  uploadDocument,
  createDocRequest 
} from 'skiff-front-utils';

// Download document with decryption
await downloadDocument({
  docID,
  client,
  privateKey,
  publicKey
});

// Create document request for GraphQL
const request = createDocRequest({
  docID,
  contents,
  metadata
});

import { useToast } from 'skiff-front-utils';

function MyComponent() {
  const { enqueueToast, closeToast } = useToast();

  const showSuccess = () => {
    enqueueToast({
      title: 'Success!',
      body: 'Document saved successfully',
      type: 'success'
    });
  };

  const showError = () => {
    const key = enqueueToast({
      title: 'Error',
      body: 'Failed to save document',
      type: 'error',
      persist: true, // Don't auto-hide
      actions: [
        {
          label: 'Retry',
          onClick: () => {
            retryOperation();
            closeToast(key);
          }
        }
      ]
    });
  };

  return <button onClick={showSuccess}>Save</button>;
}

import { useDocument } from 'skiff-front-utils';

function DocumentEditor({ docID }) {
  const { 
    document,
    loading,
    error,
    updateDocument,
    deleteDocument 
  } = useDocument(docID);

  if (loading) return <Spinner />;
  if (error) return <Error />;

  return (
    <div>
      <h1>{document.metadata.title}</h1>
      <button onClick={() => updateDocument({ title: 'New Title' })}>
        Update
      </button>
    </div>
  );
}

import { useCurrentUserEmailAliases } from 'skiff-front-utils';

function AliasSelector() {
  const { 
    emailAliases,
    defaultAlias,
    loading 
  } = useCurrentUserEmailAliases();

  return (
    <select defaultValue={defaultAlias}>
      {emailAliases.map(alias => (
        <option key={alias} value={alias}>{alias}</option>
      ))}
    </select>
  );
}

import { useFeatureTag, useGetFF } from 'skiff-front-utils';

function FeatureComponent() {
  // Get specific feature flag value
  const isNewEditorEnabled = useFeatureTag('new-editor');
  
  // Get feature flag function
  const getFF = useGetFF();
  const showBetaFeatures = getFF('beta-features');

  return isNewEditorEnabled ? <NewEditor /> : <LegacyEditor />;
}

import { useStorageLimit, useStorageUsage } from 'skiff-front-utils';

function StorageIndicator() {
  const { storageLimit } = useStorageLimit();
  const { storageUsed, loading } = useStorageUsage();

  const percentUsed = (storageUsed / storageLimit) * 100;

  return (
    <div>
      <ProgressBar value={percentUsed} />
      <span>{storageUsed} / {storageLimit} bytes used</span>
    </div>
  );
}

import { useDebouncedCallback } from 'skiff-front-utils';

function SearchInput() {
  const debouncedSearch = useDebouncedCallback(
    (query: string) => {
      performSearch(query);
    },
    500 // 500ms delay
  );

  return (
    <input
      onChange={(e) => debouncedSearch(e.target.value)}
      placeholder="Search..."
    />
  );
}

import {
  useMediaQuery,      // Responsive design
  usePrevious,        // Track previous value
  useResizeObserver,  // Observe element size changes
  useWarnBeforeUnloading, // Warn before leaving page
  useTimedRerender    // Periodic re-renders
} from 'skiff-front-utils';

// Responsive design
const isMobile = useMediaQuery('(max-width: 768px)');

// Track previous prop value
const prevValue = usePrevious(currentValue);

// Observe element resizing
const { ref, width, height } = useResizeObserver();

// Warn before leaving with unsaved changes
useWarnBeforeUnloading(hasUnsavedChanges);

import { uploadFile, processFileUpload } from 'skiff-front-utils';

// Handle file uploads with encryption
await uploadFile({
  file,
  docID,
  sessionKey,
  publicKey,
  client
});

import { useFilePreview } from 'skiff-front-utils';

function FilePreview({ fileID }) {
  const { previewUrl, loading, error } = useFilePreview(fileID);

  if (loading) return <Spinner />;
  if (error) return <div>Preview unavailable</div>;

  return <img src={previewUrl} alt="Preview" />;
}

import { copyToClipboard } from 'skiff-front-utils';

// Copy text to clipboard
await copyToClipboard('text to copy');

import { 
  linkToEmailUtils,
  linkToDriveUtils,
  linkToEditorUtils,
  linkToCalendarUtils 
} from 'skiff-front-utils';

// Generate links to specific documents/emails
const emailLink = linkToEmailUtils.getThreadLink(threadID);
const docLink = linkToEditorUtils.getDocLink(docID);
const fileLink = linkToDriveUtils.getFileLink(fileID);
const eventLink = linkToCalendarUtils.getEventLink(eventID);

import { createApolloClient, typePolicies } from 'skiff-front-utils';

// Create configured Apollo Client instance
const client = createApolloClient({
  uri: graphqlEndpoint,
  credentials: userCredentials
});

import { AppThemeProvider } from 'skiff-front-utils';

function App() {
  return (
    <AppThemeProvider>
      <YourApp />
    </AppThemeProvider>
  );
}

import { CustomCircularProgress } from 'skiff-front-utils';

function LoadingView() {
  return <CustomCircularProgress size={40} />;
}

{
  "dependencies": {
    "skiff-front-utils": "workspace:libs/skiff-front-utils"
  }
}

{
  "react": "^17.0.0",
  "react-dom": "^17.0.0",
  "notistack": "^2.0.3"
}