Basic File Explorer

Author: Ives van Hoorne

packages/react-sandpack/package.json

@@ -76,6 +76,7 @@
     "mapCoverage": true
   },
   "dependencies": {
+    "classnames": "^2.2.5",
     "codemirror": "^5.35.0",
     "codesandbox-import-utils": "^1.1.21",
     "react-broadcast": "^0.6.2",
@@ -88,6 +89,7 @@
   "devDependencies": {
     "@storybook/addon-knobs": "^3.3.14",
     "@storybook/react": "^3.3.14",
+    "@types/classnames": "^2.2.3",
     "@types/codemirror": "^0.0.55",
     "@types/jest": "^22.0.0",
     "@types/node": "^9.4.6",

packages/react-sandpack/src/components/FileExplorer/File/File.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
+import classNames from 'classnames';
 
 import cn from '../../../utils/cn';
 
 export interface Props {
   path: string;
   selectFile: (path: string) => void;
+  active?: boolean;
 }
 
 export default class File extends React.PureComponent<Props> {
@@ -18,8 +20,12 @@ export default class File extends React.PureComponent<Props> {
       .filter(Boolean)
       .pop();
 
+    const className = classNames(cn('File', 'container'), {
+      [cn('File', 'active')]: this.props.active,
+    });
+
     return (
-      <div onClick={this.selectFile} className={cn('File', 'container')}>
+      <div onClick={this.selectFile} className={className}>
         {fileName}
       </div>
     );

packages/react-sandpack/src/components/FileExplorer/File/styles.scss

@@ -1,6 +1,23 @@
 .sandpack-File__container {
+  transition: 0.3s ease all;
   font-family: sans-serif;
-  line-height: 1.6;
 
-  background-color: #eee;
+  font-size: 0.875em;
+  padding: 0.3em 0.5em;
+  padding-left: 1rem;
+  color: rgb(220, 220, 220);
+
+  border-left: 2px solid transparent;
+
+  cursor: pointer;
+
+  &:hover {
+    color: rgb(255, 255, 255);
+  }
+}
+
+.sandpack-File__active {
+  background-color: rgba(0, 0, 0, 0.3);
+
+  border-left: 2px solid #6caedd;
 }

packages/react-sandpack/src/components/FileExplorer/FileExplorer.tsx

@@ -3,18 +3,28 @@ import * as React from 'react';
 import ModuleList from './ModuleList';
 import SandpackConsumer from '../SandpackConsumer';
 
-export interface Props {}
+import cn from '../../utils/cn';
+
+export interface Props {
+  style?: Object;
+  className?: string;
+}
 
 export default class FileExplorer extends React.PureComponent<Props> {
   render() {
+    const { style, className = '' } = this.props;
     return (
       <SandpackConsumer>
         {sandpack => (
-          <div>
+          <div
+            className={`${className} ${cn('FileExplorer', 'container')}`}
+            style={style}
+          >
             <ModuleList
               selectFile={sandpack.openFile}
               files={sandpack.files}
               prefixedPath="/"
+              openedPath={sandpack.openedPath}
             />
           </div>
         )}

packages/react-sandpack/src/components/FileExplorer/ModuleList/ModuleList.tsx

@@ -7,10 +7,13 @@ export interface Props {
   prefixedPath: string;
   files: IFiles;
   selectFile: (path: string) => void;
+  openedPath: string;
 }
 
 export default class ModuleList extends React.PureComponent<Props> {
   render() {
+    const { openedPath } = this.props;
+
     const filesToShow: { path: string; code: string }[] = [];
     const directoriesToShow: { path: string }[] = [];
     const pathParts = this.props.prefixedPath.split('/');
@@ -44,6 +47,7 @@ export default class ModuleList extends React.PureComponent<Props> {
             key={file.path}
             selectFile={this.props.selectFile}
             path={file.path}
+            active={openedPath === file.path}
           />
         ))}
       </div>

packages/react-sandpack/src/components/FileExplorer/styles.scss

@@ -0,0 +1,5 @@
+.sandpack-FileExplorer__container {
+  background-color: #24282a;
+  color: white;
+  padding-top: 0.5em;
+}

packages/react-sandpack/src/components/SandpackProvider/SandpackProvider.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Broadcast } from 'react-broadcast';
 import { Manager } from 'sandpack';
 
-import { IFileProps, IFiles } from '../../types';
+import { IFileProps, IFile, IFiles } from '../../types';
 
 export interface State {
   files: IFiles;

packages/react-sandpack/stories/InTheWild.js

@@ -33,7 +33,7 @@ stories.addWithJSX('with one file', () => (
     entry="/index.js"
   >
     <div style={{ display: 'flex', width: '100%', height: '100%' }}>
-      <FileExplorer />
+      <FileExplorer style={{ width: 300 }} />
       <CodeEditor style={{ flex: 1, height: '100%' }} />
       <BrowserPreview style={{ flex: 1, height: '100%' }} />
     </div>

yarn.lock

@@ -522,6 +522,10 @@
     react-treebeard "^2.1.0"
     redux "^3.7.2"
 
+"@types/classnames@^2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.3.tgz#3f0ff6873da793870e20a260cada55982f38a9e5"
+
 "@types/codemirror@^0.0.55":
   version "0.0.55"
   resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-0.0.55.tgz#f4292b7a5f33b2aab509501c3db7e45d19a7c057"