feat(design-system): FileExplorer (#15513)

* wip: cleaning up the specs list and swapping it to be a filetree

* wip: refactor

* wip: refactor

* wip: work on refactor

* chore: improve types

* styling

* chore: remove all references to Cypress in tree list

* chore: remove all references to Cypress in tree list

* extract spec list component

* write some tests

* correctly update state

* chore: refactor

* update test

* make props optional

* optimizations

* add back search

* use memo

* run spec

* run spec

* fix a11l nav

* add tests for spec list a11y nav

* fix tests:

* remove unused

* update version

Co-authored-by: Jessica Sachs <[email protected]>

npm/design-system/.mocharc.json

@@ -0,0 +1,8 @@
+{
+  "watch-ignore": [
+    "./test/_test-output",
+    "node_modules"
+  ],
+  "require": "ts-node/register",
+  "exit": true
+}

npm/design-system/cypress.json

@@ -14,6 +14,5 @@
   "componentFolder": "src",
   "experimentalComponentTesting": true,
   "experimentalFetchPolyfill": true,
-  "fixturesFolder": false,
-  "supportFile": false
+  "fixturesFolder": false
 }

npm/design-system/cypress/support/index.js

@@ -0,0 +1,2 @@
+import 'regenerator-runtime/runtime'
+import 'cypress-real-events/support'

npm/design-system/package.json

@@ -21,6 +21,8 @@
     "@fortawesome/free-brands-svg-icons": "5.15.2",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.14",
+    "@iconify/icons-vscode-icons": "1.1.1",
+    "@iconify/react": "2.0.0-rc.8",
     "classnames": "2.2.6",
     "debug": "4.3.2"
   },
@@ -41,6 +43,8 @@
     "babel-loader": "8.0.6",
     "css-loader": "2.1.1",
     "cypress": "0.0.0-development",
+    "cypress-real-events": "1.1.0",
+    "mocha": "^7.0.1",
     "react": "16.8.6",
     "react-dom": "16.8.6",
     "rollup": "^2.38.5",

npm/design-system/src/components/FileExplorer/FileExplorer.module.scss

@@ -0,0 +1,48 @@
+@use '../../index.scss' as *;
+
+.nav {
+  user-select: none;
+  white-space: nowrap;
+}
+
+.ul {
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-inline-start: 0;
+  &:before {
+    display: none;
+  }
+}
+
+.li.li {
+  padding-left: 20px;
+}
+
+
+.ul, .li {
+  position: relative;
+  list-style: none;
+  font-size: $text-s;
+  line-height: 1.6;
+}
+
+.a {
+  position: relative;
+  color: unset;
+  text-decoration: none;
+  display: inline-block;
+  width: 100%;
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.ul .ul {
+  margin-inline-start: $text-xs;
+}
+
+.isSelected, .isSelected:hover {
+  text-decoration: underline;
+}

npm/design-system/src/components/FileExplorer/FileExplorer.spec.tsx

@@ -0,0 +1,130 @@
+import { mount } from '@cypress/react'
+import React from 'react'
+import { FileExplorer, FileComponentProps, FolderComponentProps } from './FileExplorer'
+import { FileNode, makeFileHierarchy, TreeNode } from './helpers/makeFileHierarchy'
+
+import styles from './FileExplorer.module.scss'
+
+const specs: Cypress.Cypress['spec'][] = [
+  {
+    relative: 'foo/bar/foo.spec.js',
+    absolute: 'Users/code/foo/bar/foo.spec.js',
+    name: 'foo/bar/foo.spec.js',
+  },
+  {
+    relative: 'bar/foo.spec.tsx',
+    absolute: 'bar/foo.spec.tsx',
+    name: 'bar/foo.spec.tsx',
+  },
+  {
+    relative: 'merp/map.spec.ts',
+    absolute: 'merp/map.spec.ts',
+    name: 'merp/map.spec.ts',
+  },
+]
+
+interface FileExplorerTestProps {
+  clickFileStub: typeof cy.stub
+  clickFolderStub: typeof cy.stub
+}
+
+function createFileExplorer (testProps: FileExplorerTestProps): React.FC {
+  return () => {
+    const [selectedFile, setSelectedFile] = React.useState<string>()
+
+    const onFileClick = (file: FileNode) => {
+      setSelectedFile(file.absolute)
+    }
+
+    const files = makeFileHierarchy(specs.map((spec) => spec.relative))
+
+    const FileComponent: React.FC<FileComponentProps> = (props) => {
+      return (
+        <div onClick={() => {
+          testProps.clickFileStub(props.item)
+          props.onClick(props.item)
+        }}>
+          {props.item.name}
+        </div>
+      )
+    }
+
+    const FolderComponent: React.FC<FolderComponentProps> = (props) => {
+      return (
+        <div onClick={() => {
+          testProps.clickFolderStub()
+          props.onClick()
+        }}>
+          {props.item.name}
+        </div>
+      )
+    }
+
+    return (
+      <FileExplorer
+        files={files}
+        cssModule={styles}
+        selectedFile={selectedFile}
+        fileComponent={FileComponent}
+        folderComponent={FolderComponent}
+        onFileClick={onFileClick}
+      />
+    )
+  }
+}
+
+describe('FileExplorer', () => {
+  it('basic usage', () => {
+    const files: TreeNode[] = [
+      {
+        type: 'folder',
+        name: 'foo',
+        absolute: 'foo',
+        files: [
+          {
+            type: 'file',
+            name: 'bar.js',
+            absolute: 'foo/bar.js',
+          },
+        ],
+      },
+    ]
+
+    const FileComponent: React.FC<FileComponentProps> = (props) => <div>{props.item.name}</div>
+    const FolderComponent: React.FC<FolderComponentProps> = (props) => <div>{props.item.name}</div>
+
+    mount(
+      <FileExplorer
+        files={files}
+        selectedFile={undefined}
+        fileComponent={FileComponent}
+        folderComponent={FolderComponent}
+        onFileClick={() => {}}
+      />,
+    )
+  })
+
+  it('clicks file and folders', () => {
+    const clickFolderStub = cy.stub()
+    const clickFileStub = cy.stub()
+
+    const Wrapper = createFileExplorer({
+      clickFolderStub,
+      clickFileStub,
+    })
+
+    mount(<Wrapper />)
+
+    cy.get('div').contains('bar').click().then(() => {
+      expect(clickFolderStub).to.have.been.calledWith()
+    })
+
+    cy.get('div').contains('map.spec.ts').click().then(() => {
+      expect(clickFileStub).to.have.been.calledWith({
+        type: 'file',
+        absolute: 'merp/map.spec.ts',
+        name: 'map.spec.ts',
+      })
+    })
+  })
+})