🔨 Refactored and 🧠 Overmind ...Dependencies/elements and ...Dependencies/index

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.tsx

@@ -0,0 +1,109 @@
+// @flow
+
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import getDefinition from '@codesandbox/common/lib/templates';
+import React, { FunctionComponent } from 'react';
+import { useOvermind } from 'app/overmind';
+import { WorkspaceSubtitle } from '../elements';
+
+import AddVersion from './AddVersion';
+import { VersionEntry } from './VersionEntry';
+import AddResource from './AddResource';
+import ExternalResource from './ExternalResource';
+
+import { ErrorMessage } from './elements';
+
+export const Dependencies: FunctionComponent = () => {
+  const {
+    state: { editor },
+    actions: { workspace, editor: editorSignals },
+  } = useOvermind();
+
+  const sandbox = editor.currentSandbox;
+
+  if (!editor.parsedConfigurations.package) {
+    return <ErrorMessage>Unable to find package.json</ErrorMessage>;
+  }
+
+  const { parsed, error } = editor.parsedConfigurations.package;
+
+  if (error) {
+    return (
+      <ErrorMessage>
+        We weren
+        {"'"}t able to parse the package.json
+      </ErrorMessage>
+    );
+  }
+
+  const dependencies = parsed.dependencies || {};
+  // const devDependencies = parsed.devDependencies || {};
+
+  const templateDefinition = getDefinition(sandbox.template);
+
+  return (
+    <div>
+      <Margin bottom={0}>
+        {Object.keys(dependencies)
+          .sort()
+          .map(dep => (
+            <VersionEntry