Merge branch 'feat/folder-tree' into chore/all-my-stuffs

# Conflicts:
#	package.json
#	pnpm-lock.yaml
#	src/tools/index.ts

Author: sharevb

package.json

@@ -52,6 +52,9 @@
     "@types/figlet": "^1.5.8",
     "@types/luxon": "^3.4.2",
     "@types/markdown-it": "^13.0.7",
+    "@types/lodash.defaultsdeep": "^4.6.9",
+    "@types/lodash.flattendeep": "^4.4.9",
+    "@types/lodash.last": "^3.0.9",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.11.1",
@@ -104,6 +107,9 @@
     "lodash": "^4.17.21",
     "luxon": "^3.5.0",
     "markdown-it": "^14.0.0",
+    "lodash.defaultsdeep": "^4.6.1",
+    "lodash.flattendeep": "^4.4.0",
+    "lodash.last": "^3.0.0",
     "marked": "^10.0.0",
     "mathjs": "^11.9.1",
     "mime-types": "^2.1.35",

pnpm-lock.yaml

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { generateTree } from './lib/generate-tree';
+import { parseInput } from './lib/parse-input';
+import { withDefaultOnError } from '@/utils/defaults';
+
+const inputStructure = ref([
+  'my-app',
+  '  src',
+  '    index.html',
+  '    main.ts',
+  '   main.scss',
+  '  - build',
+  '    - index.html',
+  '    main.js',
+  '    main.css',
+  '',
+  '  ',
+  '  .prettierrc.json',
+  '  .gitlab-ci.yml',
+  '  README.md',
+  'empty dir',
+].join('\n'));
+const outputTree = computed(() => withDefaultOnError(() => generateTree(parseInput(inputStructure.value)), ''));
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="inputStructure"
+      label="Your indented structure"
+      placeholder="Paste your indented structure here..."
+      rows="20"
+      multiline
+      raw-text
+      monospace
+    />
+
+    <n-divider />
+
+    <n-form-item label="Your tree-like structure:">
+      <TextareaCopyable :value="outputTree" />
+    </n-form-item>
+  </div>
+</template>

src/tools/folder-structure-diagram/folder-structure-diagram.vue

@@ -0,0 +1,12 @@
+import { Folder } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Folder Structure Diagram',
+  path: '/folder-structure-diagram',
+  description: 'tree-like utility for generating ASCII folder structure diagrams',
+  keywords: ['folder', 'structure', 'diagram', 'tree', 'ascii'],
+  component: () => import('./folder-structure-diagram.vue'),
+  icon: Folder,
+  createdAt: new Date('2024-04-20'),
+});

src/tools/folder-structure-diagram/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Represents a single item in a file system
+ * (i.e. a file or a folder)
+ */
+export interface FileStructure {
+  /** The name of the file or folder */
+  name: string
+
+  /** If a folder, the contents of the folder */
+  children: FileStructure[]
+
+  /**
+   * The number of spaces in front of the name
+   * in the original source string
+   */
+  indentCount: number
+
+  /** The parent directory of this file or folder */
+  parent: FileStructure | null
+}

src/tools/folder-structure-diagram/lib/FileStructure.ts

@@ -0,0 +1,165 @@
+import { describe, expect, it } from 'vitest';
+import { generateTree } from './generate-tree';
+import { mockInput } from './mock-input';
+import { parseInput } from './parse-input';
+
+describe('generateTree', () => {
+  it('returns an UTF-8 representation of the provided FileStructure object', () => {
+    const actual = generateTree(parseInput(mockInput));
+
+    const expected = `
+.
+├── my-app
+│   ├── src
+│   │   ├── index.html
+│   │   ├── main.ts
+│   │   └── main.scss
+│   ├── build
+│   │   ├── index.html
+│   │   ├── main.js
+│   │   └── main.css
+│   ├── .prettierrc.json
+│   ├── .gitlab-ci.yml
+│   └── README.md
+└── empty dir
+
+    `.trim();
+
+    expect(actual).toEqual(expected);
+  });
+
+  it('returns an ASCII representation of the provided FileStructure object', () => {
+    const actual = generateTree(parseInput(mockInput), { charset: 'ascii' });
+
+    const expected = `
+.
+|-- my-app
+|   |-- src
+|   |   |-- index.html
+|   |   |-- main.ts
+|   |   \`-- main.scss
+|   |-- build
+|   |   |-- index.html
+|   |   |-- main.js
+|   |   \`-- main.css
+|   |-- .prettierrc.json
+|   |-- .gitlab-ci.yml
+|   \`-- README.md
+\`-- empty dir
+
+    `.trim();
+
+    expect(actual).toEqual(expected);
+  });
+
+  it('does not render lines for parent directories that have already printed all of their children', () => {
+    const input = `
+
+grandparent
+  parent
+    child
+  parent
+    child
+      grandchild
+
+    `;
+
+    const actual = generateTree(parseInput(input));
+
+    const expected = `
+.
+└── grandparent
+    ├── parent
+    │   └── child
+    └── parent
+        └── child
+            └── grandchild
+
+        `.trim();
+
+    expect(actual).toEqual(expected);
+  });
+
+  it('appends a trailing slash to directories if trailingDirSlash === true', () => {
+    const input = `
+
+grandparent
+  parent/
+    child
+  parent//
+    child
+      grandchild
+
+    `;
+
+    const actual = generateTree(parseInput(input), { trailingDirSlash: true });
+
+    const expected = `
+.
+└── grandparent/
+    ├── parent/
+    │   └── child
+    └── parent//
+        └── child/
+            └── grandchild
+
+        `.trim();
+
+    expect(actual).toEqual(expected);
+  });
+
+  it('prints each items\' full path if fullPath === true', () => {
+    const input = `
+
+grandparent
+  parent/
+    child
+  parent//
+    child
+      grandchild
+
+    `;
+
+    const actual = generateTree(parseInput(input), { fullPath: true });
+
+    const expected = `
+.
+└── ./grandparent
+    ├── ./grandparent/parent/
+    │   └── ./grandparent/parent/child
+    └── ./grandparent/parent//
+        └── ./grandparent/parent//child
+            └── ./grandparent/parent//child/grandchild
+
+        `.trim();
+
+    expect(actual).toEqual(expected);
+  });
+
+  it('does not render the root dot if rootDot === false', () => {
+    const input = `
+
+grandparent
+  parent
+    child
+  parent
+    child
+      grandchild
+
+    `;
+
+    const actual = generateTree(parseInput(input), { rootDot: false });
+
+    const expected = `
+grandparent
+├── parent
+│   └── child
+└── parent
+    └── child
+        └── grandchild
+
+        `.trim();
+
+    expect(actual).toEqual(expected);
+  });
+});