[RFD]Amber Lightbox

[VirginiaLP]

AmberLightbox

• Specifically describe the problem you'd like the new component to solve: There are multiple places on faithlife.com that we use an embedded Amber lightbox to select files. We want to add this in more places on faithlife.com as well as in ChMS as well as adding the tabs for stock photos and Unsplash. Having it as a shared component here would make that quick and easy.
• Are there existing solutions or examples where this component would help? There are several places on faithlife.com where we have the amber lightbox already, like uploading a picture to your group. Sites has the version with the stock photos and Unsplash tabs.
• Describe the proposed API: There will be a UploadContainer which contains Tabs for the different vaults and the option of having a tab for the native uploader (names not finalized) Upload Container:

  static propTypes = {
  onFileSelected: PropTypes.func.isRequired,
  tabs: PropTypes.arrayOf(PropTypes.shape({
      onFileSelected: PropTypes.func.isRequired,
      title: PropTypes.string.isRequired,
      vaultId: PropTypes.number.isRequired,
      filter: PropTypes.string.isRequired,
      viewStyle: PropTypes.string,
  })),
  fileTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
  allowMultiSelect: PropTypes.bool,
  localizationProps: PropTypes.shape({
      addText: PropTypes.string,
      cancelText: PropTypes.string,
  })
  }

  Tab:

  static propTypes = {
  title: PropTypes.string.isRequired,
  vaultId: PropTypes.number.isRequired,
  filter: PropTypes.string.isRequired,
  viewStyle: PropTypes.string,
  }

• Are there existing specs or designs? https://app.zeplin.io/project/594ad63bfedba903192b9a4f/screen/59f8ff290101883312d0271b
• Do you have additional questions? I had several offline discussions about this component being a potential problem because unauthed users cannot view an Amber vault. For now, I'm going to move on with this component knowing it won't demo all the way, but I'm inviting discussion if anyone feels strongly against this.

[VirginiaLP]

Actually, since this will handle photo uploads from your computer, your amber vault, or the stock images, maybe it should be named something more like FileUploadModal.

[bryanrsmith]

I'd be interested in seeing fully fleshed-out sample code consuming the proposed component API. I have a lot of questions about that spec that I'm not sure how to ask without understanding the scope of the component. e.g.,

• How does the component handle unauthenticated users? Does it have hooks to facilitate an auth flow, or does it just show an error?
• How is localization handled? (I think the product drawer has some localization support)
• What technology will be used for drag & drop? React DnD is popular here; will this component expect the host application to provide a DnD context?
• What functionality does the component provide to the host application? The proposed prop types demonstrate no mechanism for exposing data from the component. Is the purpose to let the user simply browse assets, or does it need to let them pick assets and return the result to the host, or something else?
• Does it open an iframe? If so, do we need to be able to override the target so we can test in different environments? Does it need to inject an auth token, or will it rely on ssi to do its thing?

[bryanrsmith]

maybe it should be named something more like FileUploadModal.

Consider avoiding assumptions that prevent future applications from leveraging this component. We may want it outside of a modal, so this component could be just FileUpload, and a consumer can stick it in a modal if they want. We may want to upload files other than photos, so consider avoiding assumptions about file types, and maybe make it accept a whitelist of file extensions, like <input type="file">'s accept attribute.

[VirginiaLP]

How does the component handle unauthenticated users? Does it have hooks to facilitate an auth flow, or does it just show an error?

Amber already has it implemented so that if a user is unauthenticated it will tell them to log in and offer a button to direct them through the sign in flow.

[VirginiaLP]

Does it open an iframe?

The consumer will be able to configure what tab/s they want. They can include a native file picker and tabs to Amber vaults. The tabs to vaults will have iframes to Amber.

[VirginiaLP]

How is localization handled? (I think the product drawer has some localization support) What functionality does the component provide to the host application? The proposed prop types demonstrate no mechanism for exposing data from the component. Is the purpose to let the user simply browse assets, or does it need to let them pick assets and return the result to the host, or something else?

I've updated the suggested architecture section of the original post now that I've had time to sit down at a whiteboard and think it all out.

[korbinancell]

Added in https://github.com/Faithlife/styled-ui/pull/153