rspress-plugin-file-tree 0.4.0 → 1.0.1

package/components/Tree/TreeFolderIcon.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { buildClassName } from '../presets';
-
-export interface TreeFolderIconProps {
-  color?: string;
-  width?: number;
-  height?: number;
-}
-
-const defaultProps = {
-  width: 22,
-  height: 22,
-};
-
-const TreeFolderIcon: React.FC<TreeFolderIconProps> = ({
-  color,
-  width,
-  height,
-}: TreeFolderIconProps & typeof defaultProps) => {
-  return (
-    <svg
-      className={buildClassName('folder-icon')}
-      viewBox="0 0 24 24"
-      width={width}
-      height={height}
-      stroke="currentColor"
-      strokeWidth="1"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="none"
-      shapeRendering="geometricPrecision"
-    >
-      <path d="M2.707 7.454V5.62C2.707 4.725 3.469 4 4.409 4h4.843c.451 0 .884.17 1.204.474l.49.467c.126.12.296.186.473.186h8.399c.94 0 1.55.695 1.55 1.59v.737m-18.661 0h-.354a.344.344 0 00-.353.35l.508 11.587c.015.34.31.609.668.609h17.283c.358 0 .652-.269.667-.61L22 7.805a.344.344 0 00-.353-.35h-.278m-18.662 0h18.662" />
-    </svg>
-  );
-};
-
-TreeFolderIcon.defaultProps = defaultProps;
-TreeFolderIcon.displayName = 'GeistTreeFolderIcon';
-export default TreeFolderIcon;

package/components/Tree/TreeIndents.tsx

@@ -1,26 +0,0 @@
-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/components/Tree/TreeStatusIcon.tsx

@@ -1,45 +0,0 @@
-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/components/Tree/index.less

@@ -1,178 +0,0 @@
-@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/components/helpers.ts

@@ -1,42 +0,0 @@
-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/components/presets.ts

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

package/dist/parser.d.ts

@@ -1,8 +0,0 @@
-type TreeItem = {
-    type: 'file' | 'directory';
-    name: string;
-    extra?: string;
-    files?: TreeItem[];
-};
-export declare function parseInput(input: string): TreeItem[];
-export {};

package/dist/parser.js

@@ -1,40 +0,0 @@
-function countLeadingSpaces(line) {
-    const matches = line.match(/^(\s*\│\s*)*/);
-    if (!matches)
-        return 0;
-    return matches[0].length;
-}
-export function parseInput(input) {
-    var _a, _b;
-    const lines = input.split('\n').filter((line) => line.trim());
-    const tree = [];
-    const stack = [];
-    for (let i = 0; i < lines.length; i++) {
-        const line = lines[i];
-        if (line === '.')
-            continue;
-        const level = countLeadingSpaces(line);
-        const normalizedLine = line.split('─').slice(-1)[0].trimStart();
-        const [_, name, extra = ''] = (_a = normalizedLine.match(/^(.*?)(?:\s*\/\/\s*(.*))?$/)) !== null && _a !== void 0 ? _a : [];
-        const nextLine = lines[i + 1] || '';
-        const nextLineLevel = countLeadingSpaces(nextLine);
-        const type = nextLineLevel > level ? 'directory' : 'file';
-        const item = type === 'directory'
-            ? { type, name, files: [], extra }
-            : { type, name, extra };
-        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;
-            (_b = parentItem.files) === null || _b === void 0 ? void 0 : _b.push(item);
-        }
-        if (item.type === 'directory') {
-            stack.push({ level, item });
-        }
-    }
-    return tree;
-}