Add example and docs to Storybook

products/jbrowse-react-linear-genome-view/stories/JBrowseLinearGenomeView.stories.tsx

@@ -619,6 +619,41 @@ export const WithExternalPlugins = () => {
   return <JBrowseLinearGenomeView viewState={state} />
 }
 
+export const WithInternetAccounts = () => {
+  const state = createViewState({
+    assembly,
+    tracks: [
+      {
+        type: 'QuantitativeTrack',
+        trackId: 'google_bigwig',
+        name: 'Google Drive BigWig',
+        category: ['Authentication'],
+        assemblyNames: ['volvox'],
+        adapter: {
+          type: 'BigWigAdapter',
+          bigWigLocation: {
+            locationType: 'UriLocation',
+            uri: ' https://www.googleapis.com/drive/v3/files/1PIvZCOJioK9eBL1Vuvfa4L_Fv9zTooHk?alt=media',
+            internetAccountId: 'manualGoogleEntry',
+          },
+        },
+      },
+    ],
+    defaultSession,
+    location: 'ctgA:1105..1221',
+    internetAccounts: [
+      {
+        type: 'ExternalTokenInternetAccount',
+        internetAccountId: 'manualGoogleEntry',
+        name: 'Google Drive Manual Token Entry',
+        description: 'Manually enter a token to access Google Drive files',
+        tokenType: 'Bearer',
+      },
+    ],
+  })
+  return <JBrowseLinearGenomeView viewState={state} />
+}
+
 const JBrowseLinearGenomeViewStories = {
   title: 'Linear View',
 }

products/jbrowse-react-linear-genome-view/stories/UsingInternetAccounts.stories.mdx

@@ -0,0 +1,64 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import { isArrayLike } from 'lodash'
+
+<Meta title="Using InternetAccounts" />
+
+## Using InternetAccounts
+
+Starting with v2.2.1 of `@jbrowse/react-linear-genome-view`, developers can use
+JBrowse's InternetAccounts in the component.
+
+Before using InternetAccounts, make sure they are what you need for your
+application. InternetAccounts in JBrowse Web are generally used for accessing
+controlled files, e.g. Google Drive, Dropbox, and other password-protected
+files. Often it will be better to handle this type of functionality in your app
+and then run `@jbrowse/react-linear-genome-view` in an part of your app that has
+already been authenticated. In fact, JBrowse's DropboxOAuthInternetAccount and
+GoogleDriveOAuthInternetAccount will not work as-is because
+`@jbrowse/react-linear-genome-view` doesn't have the app-level control needed to
+properly execute an OAuth 2.0 login flow.
+
+There are some instances where InternetAccounts could be useful, though. For
+example, you can use a custom InterentAccount to override the `fetch` behavior
+of a particular track, allowing you to customize where and how the data is
+retrieved.
+
+InternetAccount configurations are passed to `createViewState` like this:
+
+```js
+import {
+  createViewState,
+  loadPlugins,
+  JBrowseLinearGenomeView,
+} from '@jbrowse/react-linear-genome-view'
+import makeWorkerInstance from '@jbrowse/react-linear-genome-view/esm/makeWorkerInstance'
+
+function YourApp() {
+  const state = createViewState({
+    assembly,
+    tracks,
+    location: 'ctgA:1105..1221',
+    internetAccounts: [
+      {
+        type: 'ExternalTokenInternetAccount',
+        internetAccountId: 'manualGoogleEntry',
+        name: 'Google Drive Manual Token Entry',
+        description: 'Manually enter a token to access Google Drive files',
+        tokenType: 'Bearer',
+      },
+    ],
+  })
+
+  return <JBrowseLinearGenomeView viewState={state} />
+}
+```
+
+Then any file location in your tracks that specifies an `internetAccountId` of
+"manualGoogleEntry" will use the specified InternetAccount. The above example
+lets the user manually enter a token already retrieved elsewhere. An
+"Authorization" header is then set on any request to that resource with a value
+of `Bearer <token>`.
+
+<Canvas withSource="open">
+  <Story id="linear-view--with-internet-accounts" />
+</Canvas>