path to json tree on react

index.stories.tsx

import React from "react";
import { storiesOf } from "@storybook/react";
import Component, { Props } from ".";

const props: Props = {
  paths: [
    "src/test/1.ts",
    "src/test/2.ts",
    "src/components/index.tsx",
    "src/components/atoms/index.tsx",
    "package.json",
    "src/components/atoms/stories.tsx",
    "src/components/molecules/stories.tsx"
  ]
};

storiesOf("molecules", module).add("filetree", () => <Component {...props} />);

index.tsx

import React, { FunctionComponent } from "react";
import _ from "lodash";

export interface Props {
  paths: string[];
}

function parsePath(paths: string[]) {
  const dirs = paths.map(path => {
    const dir: any = {};
    const arr = path.split("/");
    arr.reduce((o, s, i) => {
      if (i === arr.length - 1) return (o[arr[i - 1]] = [s]);
      else return (o[s] = {});
    }, dir);
    return dir;
  });
  const filesystem = {};
  dirs.forEach(dir => {
    _.mergeWith(filesystem, dir, (a, b) => {
      if (_.isArray(a)) {
        return b.concat(a);
      }
    });
  });
  console.log({ filesystem });
  return filesystem;
}

const Traverse: FunctionComponent<{ dirs: any }> = ({ dirs }) => {
  const keys = Object.keys(dirs);

  return (
    <ul>
      {keys.map(key => {
        console.log({ key });
        const data: any = dirs[key];
        console.log({ data });
        return (
          <li>
            {_.isArray(data) ? (
              data.map((str: any) => <div key={str}>{str}</div>)
            ) : (
              <div>
                {key}
                <Traverse dirs={data} />
              </div>
            )}
          </li>
        );
      })}
    </ul>
  );
};

const FileTree: FunctionComponent<Props> = ({ paths }) => {
  return (
    <div>
      <Traverse dirs={parsePath(paths)} />
    </div>
  );
};

export default FileTree;