FileTree

const fileTreeFixture = {
  id: "file-tree",
  repo: "ledger-api",
  nodes: [
    {
      name: "src",
      defaultOpen: true,
      children: [
        { name: "charge.ts", git: "M" as const },
        { name: "ledger.ts" },
      ],
    },
    { name: "README.md" },
  ],
  defaultSelected: "/src/charge.ts",
};
 
import { FileTree } from "@grassroot/ui-react/advanced";
 
export default function FileTreeDemo() {
  const { id: _id, ...props } = fileTreeFixture;
  return (
    <div>
      <FileTree {...props} />
    </div>
  );
}

<script setup lang="ts">
const fileTreeFixture = {
  id: "file-tree",
  repo: "ledger-api",
  nodes: [
    {
      name: "src",
      defaultOpen: true,
      children: [
        { name: "charge.ts", git: "M" as const },
        { name: "ledger.ts" },
      ],
    },
    { name: "README.md" },
  ],
  defaultSelected: "/src/charge.ts",
};
 
import { FileTree } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <FileTree
      :nodes="fileTreeFixture.nodes"
      :repo="fileTreeFixture.repo"
      :default-selected="fileTreeFixture.defaultSelected"
    />
  </div>
</template>

import { Component } from "@angular/core";
const fileTreeFixture = {
  id: "file-tree",
  repo: "ledger-api",
  nodes: [
    {
      name: "src",
      defaultOpen: true,
      children: [
        { name: "charge.ts", git: "M" as const },
        { name: "ledger.ts" },
      ],
    },
    { name: "README.md" },
  ],
  defaultSelected: "/src/charge.ts",
};
 
import { GrassrootFileTree } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-file-tree-demo",
  standalone: true,
  imports: [GrassrootFileTree],
  template: `
    <div>
      <grassroot-file-tree
        [nodes]="fixture.nodes"
        [repo]="fixture.repo"
        [defaultSelected]="fixture.defaultSelected"
      />
    </div>
  `,
})
export class FileTreeDemoComponent {
  protected readonly fixture = fileTreeFixture;
}
 
export default FileTreeDemoComponent;

<script lang="ts">
  const fileTreeFixture = {
    id: "file-tree",
    repo: "ledger-api",
    nodes: [
      {
        name: "src",
        defaultOpen: true,
        children: [
          { name: "charge.ts", git: "M" as const },
          { name: "ledger.ts" },
        ],
      },
      { name: "README.md" },
    ],
    defaultSelected: "/src/charge.ts",
  };
 
  import { FileTree } from "@grassroot/ui-svelte";
</script>
 
<div>
  <FileTree
    nodes={fileTreeFixture.nodes}
    repo={fileTreeFixture.repo}
    defaultSelected={fileTreeFixture.defaultSelected}
  />
</div>

/** @jsxImportSource solid-js */
const fileTreeFixture = {
  id: "file-tree",
  repo: "ledger-api",
  nodes: [
    {
      name: "src",
      defaultOpen: true,
      children: [
        { name: "charge.ts", git: "M" as const },
        { name: "ledger.ts" },
      ],
    },
    { name: "README.md" },
  ],
  defaultSelected: "/src/charge.ts",
};
 
import { FileTree } from "@grassroot/ui-solid";
 
export default function FileTreeDemo() {
  return (
    <div>
      <FileTree
        nodes={fileTreeFixture.nodes}
        repo={fileTreeFixture.repo}
        defaultSelected={fileTreeFixture.defaultSelected}
      />
    </div>
  );
}