@ibm-aspera/sdk 0.2.7 → 0.2.8

package/example/src/Views/Installer.tsx

@@ -1,119 +0,0 @@
-import './Views.scss';
-import { CodeSnippet, Tab, TabList, Tabs } from '@carbon/react';
-import React, { useEffect, useState } from 'react';
-import hljs from 'highlight.js';
-
-const InstallerViewReact = `const InstallerView = () => {
-  /**
-   * React function to render a basic installer window
-   * Inline styling used to make it easy to copy.
-   * After successful init you should usually remove this.
-   */
-
-  const [installers, setInstallers] = React.useState([]);
-
-  React.useEffect(() => {
-    window.asperaSdk.getInstallerInfo().then(response => {
-      // Installers for your platform. While normally just one. Some OS may provide multiple for user to choose.
-      setInstallers(response.entries);
-    }).catch(error => {
-      console.error('Installer info get failed', error);
-    });
-  }, []);
-
-  const launch = () => {
-    window.asperaSdk.launch();
-  };
-
-  const install = (url) => {
-    window.open(url, '_blank', 'noopener,noreferrer');
-  }
-
-  return (
-    <div style={{position: 'fixed', bottom: 0, right: 32, height: 260, width: 280, backgroundColor: '#444', padding: '16px 20px'}}>
-      <h4 style={{marginBottom: 20, color: '#fff'}}>IBM Aspera Installer</h4>
-      <button style={{display: 'block', width: '100%', marginBottom: 16, padding: 8}} type="button" onClick={launch}>Launch</button>
-      {installers.map(installer => {
-        return (
-          <button
-            key={installer.platform + installer.type}
-            style={{display: 'block', width: '100%', marginBottom: 16, padding: 8}}
-            type="button"
-            onClick={() => install(installer.url)}
-          >
-            Install ({installer.platform} - {installer.type})
-          </button>
-        );
-      })}
-    </div>
-  );
-};`;
-
-const InstallerViewAngular = `import {Component, OnInit} from '@angular/core';
-import {CommonModule} from '@angular/common';
-
-@Component({
-  selector: 'aspera-installer',
-  imports: [CommonModule],
-  template: \`
-    <div [ngStyle]="wrapperStyle">
-      <h4 [ngStyle]="{'margin-bottom': '20px', color: '#fff'}">IBM Aspera Installer</h4>
-      <button type="button" [ngStyle]="buttonStyle" (click)="launch()">Launch</button>
-      <button type="button" *ngFor="let entry of entries" [ngStyle]="buttonStyle" (click)="install(entry.url)">Install ({{entry.platform}} - {{entry.type}})</button>
-    </div>
-  \`,
-})
-
-export class InstallerView implements OnInit {
-  public wrapperStyle = {position: 'fixed', bottom: '0px', right: '32px', height: '260px', width: '280px', 'background-color': '#444', padding: '16px 20px'};
-  public buttonStyle = {display: 'block', width: '100%', 'margin-bottom': '16px', padding: '8px'};
-  public entries: {platform: string; type: string; url: string; version: string; arch: string}[] = [];
-
-  ngOnInit() {
-    window.asperaSdk.getInstallerInfo().then(response => {
-      this.entries = response.entries;
-    }).catch(error => {
-      console.error('Installer info get failed', error);
-    });
-  }
-
-  public launch() {
-    window.asperaSdk.launch();
-  }
-
-  public install(url: string) {
-    window.open(url, '_blank', 'noopener,noreferrer');
-  }
-}`;
-
-export default function Installer() {
-  const [tabIndex, setTabIndex] = useState(0);
-
-  useEffect(() => {
-    document.querySelectorAll('.cds--snippet-container > pre > code')?.forEach(item => item.classList.add('language-javascript'));
-    hljs.highlightAll();
-    window.installerAspera();
-
-    return () => {
-      document.querySelector('#aspera-installer-test')?.remove();
-    }
-  }, []);
-
-  const getCodeView = (code: string, index: number): React.ReactNode => {
-    return <CodeSnippet key={index} type="multi" className={index !== tabIndex ? 'hidden' : ''} feedback="Copied to clipboard" maxCollapsedNumberOfRows={25}>{code}</CodeSnippet>;
-  }
-
-  return (
-    <div className="example-pages">
-      <h2>Code example</h2>
-      <Tabs selectedIndex={tabIndex} onChange={(data => setTabIndex(data.selectedIndex))}>
-        <TabList>
-          <Tab>React</Tab>
-          <Tab>JavaScript</Tab>
-          <Tab>Angular</Tab>
-        </TabList>
-      </Tabs>
-      {[InstallerViewReact, window.installerAspera.toString(), InstallerViewAngular].map((item, index) => getCodeView(item, index))}
-    </div>
-  );
-};

package/example/src/Views/MonitorTransfers.tsx

@@ -1,88 +0,0 @@
-import './Views.scss';
-import { getAllTransfers } from '@ibm-aspera/sdk';
-import { CodeSnippet, UnorderedList, ListItem, Link, Button } from '@carbon/react';
-import { Renew } from '@carbon/icons-react';
-import { iterableToArray } from '../helpers';
-import { useEffect, useReducer } from 'react';
-import hljs from 'highlight.js';
-
-let transfers: Map<string, any> = new Map();
-let destroyed = false;
-
-export default function MonitorTransfers() {
-  const [_, forceUpdate] = useReducer(x => x + 1, 0);
-
-  const monitorTransfers = (): void => {
-    if (!destroyed) {
-      forceUpdate();
-      setTimeout(monitorTransfers, 1000);
-    }
-  }
-
-  useEffect(() => {
-    document.querySelector('.cds--snippet-container > pre > code')?.classList.add('language-javascript');
-    hljs.highlightAll();
-    transfers = window.monitorTransfersAspera();
-    monitorTransfers();
-
-    // Unmount cleanup
-    return () => {
-      destroyed = true;
-    }
-  }, []);
-
-  const reloadTransfers = (): void => {
-    getAllTransfers().then((transferUpdate: any[]) => {
-      transferUpdate.forEach(item => {
-        transfers.set(item.uuid, item);
-      });
-    }).catch((error: unknown) => {
-      console.error('Could not get all transfers on reload', error);
-    });
-  }
-
-  const removeTransfer = (transferId: string): void => {
-    transfers.delete(transferId);
-    window.removeTransferAspera(transferId);
-  }
-
-  const getTransferContent = (transfer: any): React.ReactNode => {
-    const running = transfer.status === 'running' || transfer.status === 'queued';
-    const canResume = transfer.status === 'paused';
-    const canOpen = transfer.status === 'completed' && transfer.transfer_spec.direction === 'receive';
-
-    return (
-      <ListItem className="transfer-row" key={transfer.uuid} title={transfer.uuid}>
-        {transfer.status} - {(transfer.percentage * 100).toFixed(1)}%
-        <Link onClick={() => removeTransfer(transfer.uuid)}>Remove</Link>
-        {running && <Link onClick={() => window.stopTransferAspera(transfer.uuid)}>Stop</Link>}
-        {canResume && <Link onClick={() => window.resumeTransferAspera(transfer.uuid)}>Resume</Link>}
-        {canOpen && <Link onClick={() => window.showDirectoryAspera(transfer.uuid)}>Show local</Link>}
-        <Link onClick={() => window.transferInfoAspera(transfer.uuid)}>Info</Link>
-      </ListItem>
-    );
-  }
-
-  const transferArray = iterableToArray(transfers.values());
-  const codeSnippet = [window.monitorTransfersAspera.toString(), window.removeTransferAspera.toString(), window.stopTransferAspera.toString(), window.resumeTransferAspera.toString(), window.showDirectoryAspera.toString(), window.transferInfoAspera.toString()].join('\n\n')
-
-  return (
-    <div className="example-pages">
-      <h2>Code example</h2>
-      <CodeSnippet type="multi" feedback="Copied to clipboard" maxCollapsedNumberOfRows={25}>{codeSnippet}</CodeSnippet>
-      <h2>See it in action</h2>
-      <div className="ending-content">
-        {transferArray.length ? (
-          <UnorderedList>
-            {transferArray.map(transfer => getTransferContent(transfer))}
-          </UnorderedList> ) : (
-            <h4>
-              No transfers
-              <Button kind="ghost" aria-label="Reload transfers" iconDescription="Reload transfers" hasIconOnly={true} renderIcon={Renew} size="sm" style={{marginLeft: '1rem'}} onClick={reloadTransfers} />
-            </h4>
-          )
-        }
-      </div>
-    </div>
-  );
-};

package/example/src/Views/Other.tsx

@@ -1,25 +0,0 @@
-import './Views.scss';
-import { Button, CodeSnippet } from '@carbon/react';
-import { useEffect } from 'react';
-import hljs from 'highlight.js';
-
-export default function Test() {
-  useEffect(() => {
-    document.querySelector('.cds--snippet-container > pre > code')?.classList.add('language-javascript');
-    hljs.highlightAll();
-  }, []);
-
-  const codeSnippet = [window.getInfoAspera.toString(), window.showPreferencesAspera.toString(), window.registerStatusCallbackAspera.toString(), window.registerSafariExtensionStatusCallbackAspera.toString()].join('\n\n')
-
-  return (
-    <div className="example-pages">
-      <h2>Code example</h2>
-      <CodeSnippet type="multi" feedback="Copied to clipboard" maxCollapsedNumberOfRows={25}>{codeSnippet}</CodeSnippet>
-      <h2>Try it out</h2>
-      <Button onClick={window.getInfoAspera}>Get info</Button>
-      <Button onClick={window.showPreferencesAspera}>Open preferences</Button>
-      <Button onClick={window.registerStatusCallbackAspera}>Status changes</Button>
-      <Button onClick={window.registerSafariExtensionStatusCallbackAspera}>Status changes (Safari)</Button>
-    </div>
-  );
-};

package/example/src/Views/SelectItems.tsx

@@ -1,46 +0,0 @@
-import './Views.scss';
-import { Button, CodeSnippet, ListItem, UnorderedList } from '@carbon/react';
-import { useEffect, useReducer } from 'react';
-import hljs from 'highlight.js';
-
-let destroyed = false;
-
-export default function SelectItems() {
-  const [_, forceUpdate] = useReducer(x => x + 1, 0);
-
-  const monitorFileChanges = (): void => {
-    if (!destroyed) {
-      forceUpdate();
-      setTimeout(monitorFileChanges, 1000);
-    }
-  };
-
-  useEffect(() => {
-    document.querySelector('.cds--snippet-container > pre > code')?.classList.add('language-javascript');
-    hljs.highlightAll();
-    monitorFileChanges();
-
-    return () => {
-      destroyed = true;
-    }
-  }, []);
-
-  return (
-    <div className="example-pages">
-      <h2>Code example</h2>
-      <CodeSnippet type="multi" feedback="Copied to clipboard" maxCollapsedNumberOfRows={25}>{window.selectItemsAspera.toString()}</CodeSnippet>
-      <h2>Try it out</h2>
-      <Button onClick={() => window.selectItemsAspera(false)}>Select files</Button>
-      <Button onClick={() => window.selectItemsAspera(true)}>Select folders</Button>
-      <div className="ending-content">
-        {window.selectedFiles.length ? (
-          <UnorderedList>
-            {window.selectedFiles.map((file: {name: string; size: number; type: string}) => <ListItem>{file.name} ({file.size} - {file.type})</ListItem>)}
-          </UnorderedList> ) : (
-            <h4>No files selected</h4>
-          )
-        }
-      </div>
-    </div>
-  );
-};

package/example/src/Views/StartTransfer.tsx

@@ -1,32 +0,0 @@
-import './Views.scss';
-import { Button, CodeSnippet, TextArea } from '@carbon/react';
-import { useEffect, useState } from 'react';
-import hljs from 'highlight.js';
-
-export default function StartTransfer() {
-  const [transferSpec, setTransferSpec] = useState('');
-
-  useEffect(() => {
-    document.querySelector('.cds--snippet-container > pre > code')?.classList.add('language-javascript');
-    hljs.highlightAll();
-  }, []);
-
-  const startTransfer = (): void => {
-    try {
-      window.startTransferAspera(JSON.parse(transferSpec));
-    } catch (error) {
-      console.error('Start transfer failed to parse transferSpec', {error, transferSpec});
-      alert('Unable to parse transfer spec for starting transfer');
-    }
-  }
-
-  return (
-    <div className="example-pages">
-      <h2>Code example</h2>
-      <CodeSnippet type="multi" feedback="Copied to clipboard" maxCollapsedNumberOfRows={25}>{window.startTransferAspera.toString()}</CodeSnippet>
-      <h2>Try it out</h2>
-      <TextArea className="code-input" value={transferSpec} onChange={value => setTransferSpec(value.target.value)} labelText="Transfer spec" helperText="Paste a transfer spec to test a transfer. For uploads be sure to select the items first on the 'Select items' page." />
-      <Button onClick={startTransfer}>Start transfer</Button>
-    </div>
-  );
-};

package/example/src/Views/Test.tsx

@@ -1,20 +0,0 @@
-import './Views.scss';
-import { Button, CodeSnippet } from '@carbon/react';
-import { useEffect } from 'react';
-import hljs from 'highlight.js';
-
-export default function Test() {
-  useEffect(() => {
-    document.querySelector('.cds--snippet-container > pre > code')?.classList.add('language-javascript');
-    hljs.highlightAll();
-  }, []);
-
-  return (
-    <div className="example-pages">
-      <h2>Code example</h2>
-      <CodeSnippet type="multi" feedback="Copied to clipboard" maxCollapsedNumberOfRows={25}>{window.testAspera.toString()}</CodeSnippet>
-      <h2>Try it out</h2>
-      <Button onClick={window.testAspera}>Test SDK</Button>
-    </div>
-  );
-};

package/example/src/Views/Views.scss

@@ -1,111 +0,0 @@
-
-.markdown-render {
-  h1 {
-    display: none;
-  }
-
-  p {
-    margin-bottom: 1rem;
-  }
-
-  h2, h3 {
-    margin-top: 1rem;
-    margin-bottom: 1.5rem;
-  }
-
-  pre {
-    padding: 0.5rem;
-    background-color: var(--cds-layer-01);
-    margin-bottom: 1rem;
-  }
-}
-
-.example-pages {
-  h2 {
-    margin-bottom: 2rem;
-  }
-
-  .cds--snippet {
-    margin-bottom: 2rem;
-  }
-
-  .cds--btn {
-    margin-right: 1rem;
-    margin-bottom: 2rem;
-    max-width: 100%;
-  }
-
-  .cds--form-item {
-    margin-bottom: 1.5rem;
-    max-width: 48rem;
-  }
-
-  pre, code {
-    font-family: 'IBM Plex Mono', monospace;
-  }
-
-  .code-input {
-    textarea, input {
-      font-family: 'IBM Plex Mono', monospace;
-    }
-  }
-
-  .cds--snippet--multi {
-    $max-width: 60rem;
-    max-width: $max-width;
-    max-inline-size: $max-width;
-  }
-
-  .drop-zone {
-    width: 25rem;
-    height: 5rem;
-    background-color: var(--cds-layer-02);
-    margin-bottom: 1.5rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .transfer-row {
-    .cds--link {
-      margin: 0 0.5rem;
-      cursor: pointer;
-    }
-  }
-
-  .hidden {
-    display: none;
-  }
-}
-
-.all-together {
-  .item-row {
-    display: flex;
-    flex-wrap: wrap;
-
-    &:not(.flat-space) {
-      gap: 1rem;
-
-      .item-area {
-        flex: 1;
-        min-width: 20rem;
-      }
-    }
-
-    &:not(:last-child) {
-      margin-bottom: 2rem;
-    }
-  }
-
-  .cds--btn--primary {
-    padding-right: 2rem;
-  }
-
-  h2:not(.item-area--header) {
-    display: none;
-  }
-
-  .cds--snippet, .cds--tabs {
-    display: none;
-  }
-}

package/example/src/helpers/index.ts

@@ -1,19 +0,0 @@
-/**
- * Convert iterable (Map for example) to an array
- * @param iterable - Map or iterable to convert to array
- * @returns Array of items
- */
-export const iterableToArray = (iterable: IterableIterator<unknown>): any[] => {
-  const newArray = [];
-
-  (function addItem(): void {
-    const value = iterable.next();
-
-    if (!value.done) {
-      newArray.push(value.value);
-      addItem();
-    }
-  }());
-
-  return newArray;
-};

package/example/src/index.scss

@@ -1,47 +0,0 @@
-@use '@carbon/react';
-@import 'highlight.js/styles/tomorrow-night-bright.css';
-
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-weight: 400;
-  src: url(~@ibm/plex/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Regular.woff2) format('woff2');
-}
-
-@font-face {
-  font-family: 'IBM Plex Mono';
-  font-weight: 400;
-  src: url(~@ibm/plex/IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-Regular.woff2) format('woff2');
-}
-
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-weight: 300;
-  src: url(~@ibm/plex/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Light.woff2) format('woff2');
-}
-
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-weight: 600;
-  src: url(~@ibm/plex/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-SemiBold.woff2) format('woff2');
-}
-
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-weight: 700;
-  src: url(~@ibm/plex/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Bold.woff2) format('woff2');
-}
-
-@font-face {
-  font-family: 'IBM Plex Sans';
-  font-style: italic;
-  src: url(~@ibm/plex/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Italic.woff2) format('woff2');
-}
-
-.cds--snippet--multi .cds--snippet-container {
-  width: calc(100% - 3rem);
-
-  pre code {
-    background-color: unset;
-    overflow: auto;
-  }
-}

package/example/src/main.tsx

@@ -1,17 +0,0 @@
-import { BrowserRouter } from "react-router";
-import { createRoot } from 'react-dom/client';
-import './index.scss';
-import App from './App';
-
-// Aspera properties are put on window to avoid building and minifying and losing commments
-declare global {
-  interface Window {
-    [key: string]: any;
-  }
-}
-
-createRoot(document.getElementById('root')!).render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
-);

package/example/src/vite-env.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="vite/client" />
-declare module '@ibm-aspera/sdk';

package/example/tsconfig.json

@@ -1,30 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-    "allowJs": true,
-    "paths": {
-      "@ibm-aspera/sdk": ["./src/*"]
-    }
-  },
-  "include": ["src"]
-}

package/example/vite.config.ts

@@ -1,22 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import basicSsl from '@vitejs/plugin-basic-ssl';
-import path from "path";
-
-export default defineConfig({
-  resolve: {
-    alias: {
-      '~@ibm/plex': path.resolve(__dirname, 'node_modules/@ibm/plex'),
-      '@ibm-aspera/sdk': path.resolve(__dirname, '../src'),
-    },
-  },
-  plugins: [
-    react(),
-    basicSsl()
-  ],
-  assetsInclude: ['**/*.md'],
-  server: {
-    host: 'js-sdk.aspera.us',
-    open: true,
-  },
-});

package/jest.config.js

@@ -1,15 +0,0 @@
-module.exports = {
-  'automock': false,
-  'setupFiles': [
-    './jest.setup.js'
-  ],
-  'moduleFileExtensions': [
-    'ts',
-    'js'
-  ],
-  'testEnvironment': 'jsdom',
-  'transform': {
-    '^.+\\.tsx?$': 'ts-jest'
-  },
-  'testRegex': '/tests/.*\\.spec\\.ts$'
-}