Dropbox

.storybook/webpack.config.js

@@ -1,6 +1,5 @@
 const path = require('path');
 const {compilerOptions} = require('../tsconfig.json');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 const SRC_PATH = path.join(__dirname, '../src');
 
@@ -35,6 +34,5 @@ module.exports = {
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.jsx', '.gif', '.jpg', '.png'],
     enforceExtension: false,
-  },
-  plugins: [new ForkTsCheckerWebpackPlugin()],
+  }
 };

package.json

@@ -47,7 +47,6 @@
     "@types/react": "18.0.3",
     "@types/react-dom": "18.0.0",
     "babel-loader": "8.2.4",
-    "fork-ts-checker-webpack-plugin": "7.2.4",
     "gh-pages": "3.2.3",
     "git-cz": "4.8.0",
     "husky": "7.0.4",

src/ReactEmbed.tsx

@@ -26,6 +26,7 @@ export interface Blocks {
 }
 
 const defaultBlocks: Blocks = {
+  dropbox: React.lazy(() => import('./blocks/dropbox')),
   figma: React.lazy(() => import('./blocks/figma')),
   gfycat: React.lazy(() => import('./blocks/gfycat')),
   gist: React.lazy(() => import('./blocks/gist')),

src/__story__/dropbox.story.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import {storiesOf} from '@storybook/react';
+import Embed from '..';
+import {Box} from './Box';
+
+const url = 'https://www.dropbox.com/s/cla7asg2zjzscpd/CV%20VC%20Top%2050%20Report%202021%20V1.pdf?dl=0';
+
+storiesOf('Dropbox', module)
+  .add('A pdf file', () => {
+    return <Embed url={url} />;
+  })
+  .add('Fitted', () => {
+    return (
+      <Box>
+        <Embed url={url} />
+      </Box>
+    );
+  });

src/__story__/pdf.story.tsx

@@ -3,7 +3,7 @@ import {storiesOf} from '@storybook/react';
 import Embed from '..';
 import {Box} from './Box';
 
-const pdf = 'https://www.africau.edu/images/default/sample.pdf';
+const pdf = 'http://www.africau.edu/images/default/sample.pdf';
 
 storiesOf('PDF', module)
   .add('A pdf file', () => {

src/blocks/dropbox/index.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import {BlockProps} from '../..';
+
+const script = document.createElement('script');
+script.type = 'text/javascript';
+script.id = 'dropboxjs';
+const DROPBOX_APP_KEY = (window as any).DROPBOX_APP_KEY;
+if (DROPBOX_APP_KEY) script.setAttribute('data-app-key', DROPBOX_APP_KEY);
+script.src = 'https://www.dropbox.com/static/api/2/dropins.js';
+document.body.append(script);
+
+declare const Dropbox: any;
+
+const DropboxUi: React.FC<BlockProps> = ({url, renderWrap}) => {
+  const ref = React.useRef();
+  React.useLayoutEffect(() => {
+    if (!ref.current) return;
+    const embed = (Dropbox as any).embed({
+      link: url,
+      file: {
+        zoom: "best" // or "fit"
+      },
+      folder: {
+        view: "list", // or "grid"
+        headerSize: "normal" // or "small"
+      }
+    }, ref.current);
+    return () => {
+      (Dropbox as any).unmount(embed);
+    };
+  }, []);
+
+  return renderWrap(
+    <div ref={ref as any} style={{height: 500}} />,
+  );
+};
+
+const WithDropbox: React.FC<BlockProps> = (props) => {
+  const [ready, setReady] = React.useState(false);
+  React.useEffect(() => {
+    let mounted = true;
+    const wait = () => {
+      if (!mounted) return;
+      if (typeof Dropbox !== 'undefined') setReady(true);
+      setTimeout(wait, 100);
+    };
+    wait();
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  if (!ready) return null;
+
+  return <DropboxUi {...props} />;
+};
+
+export default WithDropbox;

src/routeToBlock.ts

@@ -89,6 +89,9 @@ const routeToBlock: ReactEmbedRouter = (blocks: Blocks, parsed: ParsedUrl) => {
       return routeGoogle(blocks, parsed);
     case 'gfycat.com':
       return routeGfycat(blocks, parsed);
+    case 'dropbox.com':
+    case 'www.dropbox.com':
+      return [blocks.dropbox, ''];
     default:
       if (canPlayPdf(url)) {
         return [blocks.pdf, ''];

yarn.lock

@@ -4058,7 +4058,7 @@ chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
-chokidar@^3.4.1, chokidar@^3.4.2, chokidar@^3.5.3:
+chokidar@^3.4.1, chokidar@^3.4.2:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -4513,7 +4513,7 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
-cosmiconfig@^7, cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
+cosmiconfig@^7, cosmiconfig@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
   integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
@@ -5698,23 +5698,6 @@ foreground-child@^2.0.0:
     cross-spawn "^7.0.0"
     signal-exit "^3.0.2"
 
-fork-ts-checker-webpack-plugin@7.2.4:
-  version "7.2.4"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-7.2.4.tgz#9c755035405eecad0680826c7063564126d21a16"
-  integrity sha512-wVN8w0aGiiF4/1o0N5VPeh+PCs4OMg8VzKiYc7Uw7e2VmTt8JuKjEc2/uvd/VfG0Ux+4WnxMncSRcZpXAS6Fyw==
-  dependencies:
-    "@babel/code-frame" "^7.16.7"
-    chalk "^4.1.2"
-    chokidar "^3.5.3"
-    cosmiconfig "^7.0.1"
-    deepmerge "^4.2.2"
-    fs-extra "^10.0.0"
-    memfs "^3.4.1"
-    minimatch "^3.0.4"
-    schema-utils "^3.1.1"
-    semver "^7.3.5"
-    tapable "^2.2.1"
-
 fork-ts-checker-webpack-plugin@^4.1.6:
   version "4.1.6"
   resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-4.1.6.tgz#5055c703febcf37fa06405d400c122b905167fc5"
@@ -7791,7 +7774,7 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
-memfs@^3.1.2, memfs@^3.4.1:
+memfs@^3.1.2:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.4.1.tgz#b78092f466a0dce054d63d39275b24c71d3f1305"
   integrity sha512-1c9VPVvW5P7I85c35zAdEr1TD5+F11IToIHIlrVIcflfnzPkJa0ZoYEoEdYDP8KgPFoSZ/opDrUsAoZWym3mtw==
@@ -10315,7 +10298,7 @@ schema-utils@^2.6.5, schema-utils@^2.7.0:
     ajv "^6.12.4"
     ajv-keywords "^3.5.2"
 
-schema-utils@^3.0.0, schema-utils@^3.1.1:
+schema-utils@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
   integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
@@ -11100,7 +11083,7 @@ tapable@^1.0.0, tapable@^1.1.3:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
-tapable@^2.2.0, tapable@^2.2.1:
+tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==