Add file tree component

src/client/components/file_tree/controller.ts

@@ -0,0 +1,37 @@
+import { action } from 'mobx'
+
+import { FileTreeModel, TreeNode } from './model'
+
+export class FileTreeController {
+  constructor(private model: FileTreeModel) {}
+
+  static of(model: FileTreeModel) {
+    return new FileTreeController(model)
+  }
+
+  @action
+  toggleNode(node: TreeNode) {
+    node.expanded = !node.expanded
+  }
+
+  @action
+  selectNode(node: TreeNode) {
+    this.model.selectedNode = node
+  }
+
+  sortNodes(a: TreeNode, b: TreeNode) {
+    if (a.leaf) {
+      if (b.leaf) {
+        return a.label.localeCompare(b.label)
+      } else {
+        return 1
+      }
+    } else {
+      if (b.leaf) {
+        return -1
+      } else {
+        return a.label.localeCompare(b.label)
+      }
+    }
+  }
+}

src/client/components/file_tree/model.ts

@@ -0,0 +1,82 @@
+import { observable } from 'mobx'
+import { createTransformer } from 'mobx-utils'
+
+export interface TreeNode {
+  label: string
+  children: TreeNode[]
+  expanded: boolean
+  leaf: boolean
+  file?: File
+}
+
+export interface File {
+  path: string
+  data?: any
+}
+
+export class FileTreeModel {
+  @observable rootNode: TreeNode
+  @observable selectedNode?: TreeNode
+
+  constructor(files: File[]) {
+    this.rootNode = createTreeFromFiles(files)
+  }
+
+  static of = createTransformer((files: File[]): FileTreeModel => {
+    return new FileTreeModel(files)
+  })
+}
+
+function createTreeFromFiles(files: File[]): TreeNode {
+  const root = {
+    label: 'root',
+    children: [],
+    leaf: false,
+    expanded: true,
+  }
+
+  files.forEach(file => {
+    const path = normalizePath(file.path)
+    createTreeNode(path.split('/'), file, root)
+  })
+
+  return root
+}
+
+export function createTreeNode(pathSegments: string[], file: File, parent: TreeNode): void {
+  if (pathSegments.length === 0) {
+    throw Error('[createTreeNode]: pathSegments cannot be empty')
+  } else if (pathSegments.length === 1) {
+    const node = getOrCreateChild(parent, pathSegments[0])
+    node.leaf = true
+    node.file = file
+  } else {
+    const intermediateParent = getOrCreateChild(parent, pathSegments[0])
+    intermediateParent.leaf = false
+
+    createTreeNode(pathSegments.slice(1), file, intermediateParent)
+  }
+}
+
+function getOrCreateChild(parent: TreeNode, childLabel: string): TreeNode {
+  const existingChild = parent.children.find(parent => parent.label === childLabel)
+
+  if (existingChild) {
+    return existingChild
+  }
+
+  const newChild = {
+    label: childLabel,
+    children: [],
+    leaf: false,
+    expanded: false,
+  }
+
+  parent.children.push(newChild)
+
+  return newChild
+}
+
+function normalizePath(path: string) {
+  return path.replace(/\/\//g, '/') // Collapse consecutive slashes
+}

src/client/components/file_tree/stories/file_tree.stories.tsx

@@ -0,0 +1,90 @@
+import { action } from '@storybook/addon-actions'
+import { storiesOf } from '@storybook/react'
+import { action as mobxAction, observable } from 'mobx'
+import { observer } from 'mobx-react'
+import * as React from 'react'
+
+import { File } from '../model'
+import { FileBrowser } from '../view'
+
+const actions = {
+  onSelect: action('onSelect'),
+}
+
+storiesOf('components.file_tree', module)
+  .addDecorator(story => {
+    return <div style={{
+      maxWidth: '320px',
+      maxHeight: '400px',
+      border: '1px solid #EEE',
+      overflowY: 'auto',
+    }}>{story()}</div>
+  })
+  .add('empty', () => {
+    return <FileBrowser
+      files={[]}
+      onSelect={actions.onSelect}
+    />
+  })
+  .add('interactive', () => {
+    const files = getFiles()
+    return <FileBrowser
+      files={files}
+      onSelect={actions.onSelect}
+    />
+  })
+  .add('no animation', () => {
+    const files = getFiles()
+    return <FileBrowser
+      files={files}
+      animate={false}
+      onSelect={actions.onSelect}
+    />
+  })
+
+function getFiles(): File[] {
+  return [
+    {
+      path: 'TopLevelFile.yaml',
+    },
+    {
+      path: 'scripts/igus1/Stand.yaml',
+    },
+    {
+      path: 'scripts/igus1/GetupFront.yaml',
+    },
+    {
+      path: 'scripts/igus1/GetupBack.yaml',
+    },
+    {
+      path: 'scripts/igus2/Stand.yaml',
+    },
+    {
+      path: 'scripts/igus2/GetupFront.yaml',
+    },
+    {
+      path: 'scripts/igus2/GetupBack.yaml',
+    },
+    {
+      path: 'config/igus1/NUsight.yaml',
+    },
+    {
+      path: 'config/igus1/DataLogger.yaml',
+    },
+    {
+      path: 'config/igus1/WalkEngine.yaml',
+    },
+    {
+      path: 'config/igus2/NUsight.yaml',
+    },
+    {
+      path: 'config/igus2/DataLogger.yaml',
+    },
+    {
+      path: 'config/igus2/WalkEngine.yaml',
+    },
+    {
+      path: 'AnotherTopLevelFile.yaml',
+    },
+  ]
+}

src/client/components/file_tree/style.css

@@ -0,0 +1,7 @@
+.placeholder {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 8px;
+  text-align: center;
+  color: #757575;
+}

src/client/components/file_tree/tree_node/style.css

@@ -0,0 +1,84 @@
+.node {
+  display: flex;
+  flex-direction: column;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nodeHeader {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  padding: 4px 8px;
+  cursor: pointer;
+  user-select: none;
+  font-weight: normal;
+}
+
+.nodeHeader:hover {
+  background-color: #EEE;
+  color: #1197d3;
+}
+
+.nodeHeader:hover .icon {
+  color: #1197d3;
+}
+
+.nodeHeaderSelected,
+.nodeHeaderSelected:hover {
+  background-color: #1197d3;
+  color: white;
+}
+
+.nodeHeaderSelected .icon,
+.nodeHeaderSelected:hover .icon {
+  color: white;
+}
+
+.icon {
+  color: #757575;
+}
+
+.dropdownIcon {
+  width: 18px;
+  height: 18px;
+  margin-right: 4px;
+}
+
+.dropdownIcon svg {
+  display: block;
+  width: 18px;
+  height: 18px;
+}
+
+.dropdownIconExpanded {
+  transform: rotate(90deg);
+}
+
+.dropdownIconAnimate {
+  transition: transform 0.2s ease;
+}
+
+.nodeIcon {
+  width: 16px;
+  height: 16px;
+  margin-right: 6px;
+}
+
+.nodeIcon svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.nodeLabel {
+  flex-grow: 1;
+  line-height: 1;
+}
+
+.nodeChildren {
+  padding: 0;
+  margin: 0;
+  border: none;
+}