rspress-plugin-file-tree 0.1.1

package/src/components/Tree/TreeIndents.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { buildClassName } from '../presets';
+
+interface Props {
+  count: number;
+}
+
+const TreeIndents: React.FC<Props> = ({ count }) => {
+  if (count === 0) return null;
+
+  return (
+    <>
+      {[...new Array(count)].map((_, index) => (
+        <span
+          className={buildClassName('indent')}
+          key={`indent-${index}`}
+          style={{
+            left: `calc(-1.875rem * ${index + 1} + 0.75rem)`,
+          }}
+        ></span>
+      ))}
+    </>
+  );
+};
+
+export default TreeIndents;

package/src/components/Tree/TreeStatusIcon.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { buildClassName } from '../presets';
+
+export interface TreeStatusIconProps {
+  color?: string;
+  width?: number;
+  height?: number;
+  active?: boolean;
+}
+
+const defaultProps = {
+  width: 12,
+  height: 12,
+  active: false,
+};
+
+const TreeStatusIcon: React.FC<TreeStatusIconProps> = ({
+  color,
+  width,
+  height,
+  active,
+}: TreeStatusIconProps & typeof defaultProps) => {
+  return (
+    <svg
+      className={buildClassName('folder-status-icon')}
+      viewBox="0 0 24 24"
+      width={width}
+      height={height}
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      fill="none"
+      shapeRendering="geometricPrecision"
+    >
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+      {!active && <path d="M12 8v8" />}
+      <path d="M8 12h8" />
+    </svg>
+  );
+};
+
+TreeStatusIcon.defaultProps = defaultProps;
+TreeStatusIcon.displayName = 'GeistTreeStatusIcon';
+export default TreeStatusIcon;

package/src/components/Tree/index.less

@@ -0,0 +1,178 @@
+@rp-file-tree: ~'rp-file-tree';
+
+@rp-tree-color-light: #000;
+@rp-tree-color-dark: #fafafa;
+
+@rp-tree-status-bg-light: #fff;
+@rp-tree-status-bg-dark: #000;
+
+@rp-tree-indent-bg-light: #eaeaea;
+@rp-tree-indent-bg-dark: #333;
+
+.@{rp-file-tree} {
+  &[data-dark='true'] {
+    --rp-tree-color: @rp-tree-color-dark;
+    --rp-tree-status-bg: @rp-tree-status-bg-dark;
+    --rp-tree-indent-bg: @rp-tree-indent-bg-dark;
+  }
+
+  &[data-dark='false'] {
+    --rp-tree-color: @rp-tree-color-light;
+    --rp-tree-status-bg: @rp-tree-status-bg-light;
+    --rp-tree-indent-bg: @rp-tree-indent-bg-light;
+  }
+
+  padding-left: 1.625rem;
+
+  &-expand {
+    &-container {
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+
+      &-expanded {
+        height: auto;
+        visibility: visible;
+      }
+    }
+  }
+
+  &-indent {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1px;
+    height: 100%;
+    background-color: var(--rp-tree-indent-bg);
+    margin-left: -1px;
+  }
+
+  &-folder {
+    cursor: pointer;
+    line-height: 1;
+    user-select: none;
+
+    &-names {
+      display: flex;
+      height: 1.75rem;
+      align-items: center;
+      position: relative;
+
+      & > :global(.@{rp-file-tree}-indent) {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 1px;
+        height: 100%;
+        background-color: var(--rp-tree-indent-bg);
+        margin-left: -1px;
+      }
+    }
+
+    &-icon {
+      margin-right: 0.3rem;
+
+      & > svg {
+        color: var(--rp-tree-color);
+      }
+    }
+
+    &-status {
+      position: absolute;
+      left: calc(-1.125rem);
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 0.875rem;
+      height: 0.875rem;
+      z-index: 10;
+      background-color: var(--rp-tree-status-bg);
+
+      & > svg {
+        color: var(--rp-tree-color);
+      }
+    }
+
+    &-status,
+    &-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &-name {
+      transition: opacity 100ms ease 0ms;
+      white-space: nowrap;
+      font-size: 0.875rem;
+      color: var(--rp-tree-color);
+
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+
+    &-extra {
+      font-size: 0.75rem;
+      align-self: baseline;
+      padding-left: 4px;
+      color: #888;
+    }
+
+    &-content {
+      display: flex;
+      flex-direction: column;
+      height: auto;
+    }
+  }
+
+  &-file {
+    cursor: pointer;
+    line-height: 1;
+    user-select: none;
+
+    &-names {
+      display: flex;
+      height: 1.75rem;
+      align-items: center;
+      position: relative;
+
+      & > :global(.@{rp-file-tree}-indent) {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 1px;
+        height: 100%;
+        background-color: var(--rp-tree-indent-bg);
+
+        margin-left: -1px;
+      }
+    }
+
+    &-icon {
+      display: inline-flex;
+      align-items: center;
+      margin-right: 0.3rem;
+
+      & > svg {
+        color: var(--rp-tree-color);
+      }
+    }
+
+    &-name {
+      transition: opacity 100ms ease 0ms;
+      color: var(--rp-tree-color);
+      white-space: nowrap;
+      font-size: 0.875rem;
+
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+
+    &-extra {
+      font-size: 0.75rem;
+      align-self: baseline;
+      padding-left: 4px;
+      color: #888;
+    }
+  }
+}

package/src/components/helpers.ts

@@ -0,0 +1,42 @@
+import React, { type ReactNode } from 'react';
+
+export const sortChildren = (
+  children: ReactNode | undefined,
+  folderComponentType: React.ElementType,
+) => {
+  return React.Children.toArray(children).sort((a, b) => {
+    if (!React.isValidElement(a) || !React.isValidElement(b)) return 0;
+    if (a.type !== b.type) return a.type !== folderComponentType ? 1 : -1;
+    return `${a.props.name}`.charCodeAt(0) - `${b.props.name}`.charCodeAt(0);
+  });
+};
+
+export const makeChildPath = (name: string, parentPath?: string) => {
+  if (!parentPath) return name;
+  return `${parentPath}/${name}`;
+};
+
+export const stopPropagation = (event: React.MouseEvent) => {
+  event.stopPropagation();
+  event.nativeEvent.stopImmediatePropagation();
+};
+
+export const setChildrenProps = (
+  children: ReactNode | undefined,
+  props: Record<string, unknown>,
+  targetComponents: Array<React.ElementType> = [],
+): ReactNode | undefined => {
+  if (React.Children.count(children) === 0) return [];
+  const allowAll = targetComponents.length === 0;
+  const clone = (child: React.ReactElement, props = {}) =>
+    React.cloneElement(child, props);
+
+  return React.Children.map(children, (item) => {
+    if (!React.isValidElement(item)) return item;
+    if (allowAll) return clone(item, props);
+
+    const isAllowed = targetComponents.find((child) => child === item.type);
+    if (isAllowed) return clone(item, props);
+    return item;
+  });
+};

package/src/components/presets.ts

@@ -0,0 +1,5 @@
+export const presetClassName = 'rp-file-tree';
+
+export function buildClassName(fragment?: string) {
+  return fragment?.length ? `${presetClassName}-${fragment}` : presetClassName;
+}

package/src/index.ts

@@ -0,0 +1,50 @@
+import path from 'node:path';
+
+import {
+  PresetConfigMutator,
+  RemarkCodeBlockToGlobalComponentPluginFactory,
+} from 'rspress-plugin-devkit';
+
+import { parseInput } from './parser';
+
+import type { RspressPlugin } from '@rspress/shared';
+
+interface RspressPluginFileTreeOptions {
+  initialExpandDepth?: number;
+}
+
+export default function rspressPluginFileTree(
+  options: RspressPluginFileTreeOptions = {},
+): RspressPlugin {
+  const { initialExpandDepth = 0 } = options;
+
+  const remarkFileTree = new RemarkCodeBlockToGlobalComponentPluginFactory({
+    components: [
+      {
+        lang: 'tree',
+        componentPath: path.join(
+          __dirname,
+          './components/Tree/FileTreeRender.tsx',
+        ),
+        propsProvider(code) {
+          return {
+            tree: parseInput(code),
+            initialExpandDepth,
+          };
+        },
+      },
+    ],
+  });
+
+  return {
+    name: 'rspress-plugin-file-tree',
+    config(config) {
+      return new PresetConfigMutator(config).disableMdxRs().toConfig();
+    },
+    markdown: {
+      remarkPlugins: [remarkFileTree.remarkPlugin],
+      globalComponents: remarkFileTree.mdxComponents,
+    },
+    builderConfig: remarkFileTree.builderConfig,
+  };
+}

package/src/parser.ts

@@ -0,0 +1,50 @@
+type TreeItem = {
+  type: 'file' | 'directory';
+  name: string;
+  files?: TreeItem[];
+};
+
+function countLeadingSpaces(line: string): number {
+  const matches = line.match(/^(\s*\│\s*)*/);
+  if (!matches) return 0;
+  return matches[0].length;
+}
+
+export function parseInput(input: string): TreeItem[] {
+  const lines = input.split('\n').filter((line) => line.trim());
+  const tree: TreeItem[] = [];
+  const stack: { level: number; item: TreeItem }[] = [];
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    if (line === '.') continue;
+
+    const level = countLeadingSpaces(line);
+
+    const name = line.trim().split(' ').slice(-1)[0];
+
+    const nextLine = lines[i + 1] || '';
+    const nextLineLevel = countLeadingSpaces(nextLine);
+    const type = nextLineLevel > level ? 'directory' : 'file';
+    const item: TreeItem =
+      type === 'directory' ? { type, name, files: [] } : { type, name };
+
+    while (stack.length > 0 && stack[stack.length - 1].level >= level) {
+      stack.pop();
+    }
+
+    if (stack.length === 0) {
+      tree.push(item);
+    } else {
+      const parentItem = stack[stack.length - 1].item;
+      parentItem.files?.push(item);
+    }
+
+    if (item.type === 'directory') {
+      stack.push({ level, item });
+    }
+  }
+
+  return tree;
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "extends": "../../tsconfig.base.json"
+}