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

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": "1.0.0",
     "classnames": "2.2.6",
     "debug": "4.3.2"
   },

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

@@ -0,0 +1,73 @@
+@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;
+  padding: 0;
+  line-height: 1.6;
+}
+
+.a {
+  position: relative;
+  color: unset;
+  text-decoration: none;
+  display: inline-block;
+  width: 100%;
+  &:hover {
+    background: opacify($color: $metal-05, $amount: 0.2);
+  }
+}
+
+.ul .ul::before {
+  content: "";
+  position: absolute;
+  z-index: 0;
+  width: 3px;
+  bottom: 0;
+  top: 0;
+  left: calc(1 * (#{$text-xs}));
+  background-size: 3px 3px;
+  background-image: radial-gradient(#999999 30%, transparent 0);
+  background-position: center;
+  display: block;
+}
+
+.ul .ul {
+  margin-inline-start: $text-xs;
+}
+
+.folderIcon, .brandIcon {
+  margin-right: 0.5em;
+}
+
+.isClosed {
+  + .ul, + .li {
+    display: none;
+  }
+}
+
+.isSelected, .isSelected:hover {
+  background: $chill-10;
+}

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

@@ -0,0 +1,25 @@
+import { mount } from '@cypress/react'
+import React from 'react'
+import { FileExplorer } from './FileExplorer'
+import { FileLike } from './types'
+
+const files: FileLike[] = [
+  {
+    name: 'foo/bar/foo.spec.js',
+    onClick: (e, foo) => {
+    },
+    isOpen: false,
+  },
+  // @ts-ignore
+  { name: 'bar/foo.spec.tsx' },
+  // @ts-ignore
+  { name: 'merp/foo.spec.ts' },
+]
+
+describe('FileExplorer', () => {
+  it('renders', () => {
+    mount(<>
+      <FileExplorer files={files} />
+    </>)
+  })
+})

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

@@ -0,0 +1,114 @@
+import React from 'react'
+import { makeFileHierarchy } from './helpers/makeFileHierarchy'
+import { FileExplorerProps, FileTreeProps, FileLike, FolderOrFile } from './types'
+import styles from './FileExplorer.module.scss'
+import { InlineIcon } from '@iconify/react'
+import javascriptIcon from '@iconify/icons-vscode-icons/file-type-js-official'
+import typescriptIcon from '@iconify/icons-vscode-icons/file-type-typescript-official'
+import reactJs from '@iconify/icons-vscode-icons/file-type-reactjs'
+import reactTs from '@iconify/icons-vscode-icons/file-type-reactts'
+import folderClosed from '@iconify/icons-vscode-icons/default-folder'
+import folderOpen from '@iconify/icons-vscode-icons/default-folder-opened'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+import cs from 'classnames'
+
+library.add(fas)
+
+const icons: Record<string, any> = {
+  js: { icon: javascriptIcon },
+  ts: { icon: typescriptIcon },
+  tsx: { icon: reactTs },
+  jsx: { icon: reactJs },
+  folderOpen: { icon: folderOpen },
+  folderClosed: { icon: folderClosed },
+}
+
+const getExt = (path: string) => {
+  const extensionMatches = path.match(/(?:\.([^.]+))?$/)
+
+  return extensionMatches ? extensionMatches[1] : ''
+}
+
+export const FileExplorer: React.FC<FileExplorerProps> = (props) => {
+  return (<nav className={cs(props.className || '', styles.nav)}><FileTree files={makeFileHierarchy(props.files) || []} isSelected={props.isSelected || (() => {})} onClick={props.onClick || (() => {})}></FileTree></nav>)
+}
+
+export const FileTree: React.FC<FileTreeProps> = (props) => {
+  const depth = props.depth || 0
+  const [files, setFiles] = React.useState(props.files || [])
+
+  // Negative margins let the <a> tag take full width (a11y)
+  // while the <li> tag with text content can be positioned relatively
+  // This gives us HTML + CSS-only highlight and click handling
+  const inlineStyles = {
+    a: {
+      marginLeft: `calc(-20px * ${props.depth})`,
+      width: `calc(100% + (20px * ${props.depth}))`,
+    },
+    li: {
+      marginLeft: `calc(20px * ${props.depth})`,
+    },
+  }
+
+  const updateItem = (i: FolderOrFile, idx: number, prop: Partial<FileLike>) => {
+    files[idx] = { ...i, ...prop }
+    setFiles([...files])
+  }
+
+  return (
+    <ul className={styles.ul}>
+      {
+        files.map((item, idx) => {
+          const ext = getExt(item.shortName) || ''
+          const folderIcon = item.isOpen ? icons.folderOpen : icons.folderClosed
+          const inlineIconProps = ext ? icons[ext] : folderIcon
+
+          function handleOnSelect (e: any) {
+            const onItemClick = item.onClick || (() => {})
+
+            onItemClick(e, item)
+            props.onClick(item)
+            updateItem(item, idx, { isOpen: !item.isOpen })
+          }
+
+          return (<React.Fragment key={item.shortName}>
+            <a
+              data-file={item.relative}
+              key={item.shortName}
+              style={inlineStyles.a}
+              className={cs(styles.a, { [styles.isClosed]: !item.isOpen, [styles.isSelected]: props.isSelected(item) })}
+              onKeyDown={(e) => e.key === ' ' || e.key === 'Enter' && handleOnSelect(e)}
+              onClick={handleOnSelect}
+              tabIndex={0}>
+              <li
+                style={{ ...props.style, ...inlineStyles.li }}
+                className={styles.li}>
+                { item.type === 'folder' &&
+                    <FontAwesomeIcon
+                      className={styles.folderIcon}
+                      icon='chevron-up'
+                      size='xs'
+                      transform={{ rotate: item.isOpen ? 180 : 90 }} />
+                }
+
+                {<InlineIcon {...inlineIconProps} className={styles.brandIcon} />}
+                { item.shortName }
+              </li>
+            </a>
+            {
+              item.type === 'folder' &&
+              <FileTree
+                depth={depth + 1}
+                files={item.files}
+                onClick={props.onClick}
+                isSelected={props.isSelected}
+              />
+            }
+          </React.Fragment>)
+        })
+      }
+    </ul>
+  )
+}

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

@@ -0,0 +1,83 @@
+import React, { ReactNode } from 'react'
+import { InlineIcon } from '@iconify/react'
+import javascriptIcon from '@iconify/icons-vscode-icons/file-type-js-official'
+import typescriptIcon from '@iconify/icons-vscode-icons/file-type-typescript-official'
+import reactJs from '@iconify/icons-vscode-icons/file-type-reactjs'
+import reactTs from '@iconify/icons-vscode-icons/file-type-reactts'
+import folderClosed from '@iconify/icons-vscode-icons/default-folder'
+import folderOpen from '@iconify/icons-vscode-icons/default-folder-opened'
+import { FolderOrFile } from './types'
+import styles from './FileExplorer.module.scss'
+import cs from 'classnames'
+
+const icons: Record<string, any> = {
+  js: { icon: javascriptIcon },
+  ts: { icon: typescriptIcon },
+  tsx: { icon: reactTs },
+  jsx: { icon: reactJs },
+  folderOpen: { icon: folderOpen },
+  folderClosed: { icon: folderClosed },
+}
+
+const getExt = (path: string) => {
+  const extensionMatches = path.match(/(?:\.([^.]+))?$/)
+
+  return extensionMatches ? extensionMatches[1] : ''
+}
+
+export interface FileExplorerItemProps {
+  item: FolderOrFile
+  children?: ReactNode
+  style?: React.CSSProperties
+  getHref? (item: FolderOrFile): string
+  depth: number
+  onFocus: any
+  onClick: any
+  onBlur: any
+}
+
+export const FileExplorerItem: React.FC<FileExplorerItemProps> = (props) => {
+  const ext = getExt(props.item.shortName) || ''
+  const folderIcon = props.item.isOpen ? icons.folderOpen : icons.folderClosed
+  const getHref = props.getHref || (() => '#')
+  const onClick = props.item.onClick || (() => {})
+
+  const inlineIconProps = ext ? icons[ext] : folderIcon
+
+  // Negative margins let the <a> tag take full width (a11y)
+  // while the <li> tag with text content can be positioned relatively
+  // This gives us HTML + CSS-only highlight and click handling
+  const inlineStyles = {
+    a: {
+      marginLeft: `calc(-20px * ${props.depth})`,
+      width: `calc(100% + (20px * ${props.depth}))`,
+    },
+    li: {
+      marginLeft: `calc(20px * ${props.depth})`,
+    },
+  }
+
+  return (
+    <a
+      style={inlineStyles.a}
+      className={cs(styles.a, { [styles.isClosed]: !props.item.isOpen, [styles.isSelected]: props.item.isSelected })}
+      href={getHref(props.item)}
+      onFocus={(e) => {
+        props.onFocus(e, props.item)
+      }}
+      onBlur={(e) => {
+        props.onBlur(e, props.item)
+      }}
+      onClick={(e) => {
+        props.onClick(e, props.item)
+        onClick(e, props.item)
+      }}
+      tabIndex={0}>
+      { props.item.isSelected }
+      <li
+        style={{ ...props.style, ...inlineStyles.li }}
+        className={styles.li}>
+        {<InlineIcon {...inlineIconProps} />}
+        { props.children }
+      </li></a>)
+}

npm/design-system/src/components/FileExplorer/helpers/makeFileHierarchy.ts

@@ -0,0 +1,56 @@
+import { FileLike, Folder, FolderOrFile } from '../types'
+
+/**
+ * Split specs into group by their
+ * first level of folder hierarchy
+ *
+ * @param {Array<{name: string}>} specs
+ */
+export function makeFileHierarchy (files: FileLike[]) {
+  // to save the existing folder paths
+  const kvpGroups: { [fullPath: string]: Folder } = {}
+
+  return files.reduce<FolderOrFile[]>((groups, file) => {
+    const pathArray = file.name.split('/')
+    let currentFileArray: FolderOrFile[] = groups
+    let currentPath = ''
+
+    do {
+      const pathPart = pathArray.shift() || ''
+
+      currentPath += `/${pathPart}`
+      // if we have a file set is as part of the current group
+      if (!pathArray.length) {
+        currentFileArray.push({
+          ...file,
+          type: 'file',
+          shortName: pathPart,
+          currentPath,
+        })
+      } else if (pathPart) {
+        //if it is a folder find if the next folder exists
+        let currentGroup: Folder = kvpGroups[currentPath]
+
+        if (!currentGroup) {
+          //if it does not exist we create it
+          currentGroup = {
+            type: 'folder',
+            shortName: pathPart,
+            files: [],
+            isOpen: true,
+            name: pathPart,
+            currentPath,
+          }
+
+          kvpGroups[currentPath] = currentGroup
+          // and add it to the current set of objects
+          currentFileArray.push(currentGroup)
+        }
+
+        currentFileArray = currentGroup.files
+      }
+    } while (pathArray.length)
+
+    return groups
+  }, [])
+}