{"_id":"@bigmistqke/solid-fs-components","name":"@bigmistqke/solid-fs-components","dist-tags":{"latest":"0.1.0-beta"},"versions":{"0.1.0-beta":{"name":"@bigmistqke/solid-fs-components","version":"0.1.0-beta","description":"headless components for visualizing and interacting with reactive filesystem","license":"MIT","author":{"name":"bigmistqke"},"contributors":[],"repository":{"type":"git","url":"git+https://github.com/bigmistqke/solid-fs-components.git"},"homepage":"https://github.com/bigmistqke/solid-fs-components#readme","bugs":{"url":"https://github.com/bigmistqke/solid-fs-components/issues"},"private":false,"sideEffects":false,"type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","browser":{},"exports":{"development":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"typesVersions":{},"dependencies":{"@solid-primitives/keyed":"^1.5.0","@solid-primitives/map":"^0.6.0","@solid-primitives/range":"^0.2.0","clsx":"^2.1.1"},"peerDependencies":{"solid-js":"^1.6.0"},"devDependencies":{"@bigmistqke/solid-grid-split":"^0.0.2","@bigmistqke/vite-plugin-raw-directory":"^0.0.2","@types/node":"^20.12.12","@typescript-eslint/eslint-plugin":"^7.9.0","@typescript-eslint/parser":"^7.9.0","concurrently":"^8.2.2","esbuild":"^0.21.3","esbuild-css-modules-plugin":"^3.1.4","esbuild-plugin-solid":"^0.6.0","eslint":"^8.56.0","eslint-plugin-eslint-comments":"^3.2.0","eslint-plugin-no-only-tests":"^3.1.0","jsdom":"^24.0.0","prettier":"3.0.0","solid-js":"^1.8.17","tm-textarea":"^0.1.1","typescript":"^5.4.5","vite":"^5.2.11","vite-plugin-css-classnames":"^0.0.2","vite-plugin-dts":"^4.5.3","vite-plugin-dts-bundle-generator":"^2.1.0","vite-plugin-lib-inject-css":"^2.2.1","vite-plugin-solid":"^2.10.2","vite-tsconfig-paths":"^5.1.4","vitest":"^1.6.0"},"keywords":["solid"],"engines":{"node":">=18","pnpm":">=9.0.0"},"scripts":{"dev":"vite serve dev","build":"vite build","build:dev":"vite build dev","test":"concurrently pnpm:test:*","test:client":"vitest","test:ssr":"pnpm run test:client --mode ssr","format":"prettier --ignore-path .gitignore -w \"src/**/*.{js,ts,json,css,tsx,jsx}\" \"dev/**/*.{js,ts,json,css,tsx,jsx}\"","lint":"concurrently pnpm:lint:*","lint:code":"eslint --ignore-path .gitignore --max-warnings 0 src/**/*.{js,ts,tsx,jsx}","lint:types":"tsc --noEmit","update-deps":"pnpm up -Li"},"_id":"@bigmistqke/solid-fs-components@0.1.0-beta","_integrity":"sha512-tVsUONnoF0ZNDVHmv9BkF5OAezeL+UoBK8Tl947kJHntWAfNfYFOaI5u7FX4nM7sO+d8KmFHS8n/z6J4//GvMA==","_resolved":"/private/var/folders/kf/33x7c6xs76l2v21jmt7lmhpm0000gn/T/c6b193717dab3131fbfcc3e334921752/bigmistqke-solid-fs-components-0.1.0-beta.tgz","_from":"file:bigmistqke-solid-fs-components-0.1.0-beta.tgz","_nodeVersion":"22.13.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-tVsUONnoF0ZNDVHmv9BkF5OAezeL+UoBK8Tl947kJHntWAfNfYFOaI5u7FX4nM7sO+d8KmFHS8n/z6J4//GvMA==","shasum":"d25e767e8fdff51fe99045b2dd6b3fc509ad39a8","tarball":"https://registry.npmjs.org/@bigmistqke/solid-fs-components/-/solid-fs-components-0.1.0-beta.tgz","fileCount":6,"unpackedSize":49950,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHhZoF0kp14rvCG0gxpOXIzSUXNE2q1Tft65AVeZ+0C/AiAxs3iR57303UauLxWDWCFIAUka8nBNIF6mi+hf4LrhQQ=="}]},"_npmUser":{"name":"bigmistqke","email":"vandijckv@gmail.com"},"directories":{},"maintainers":[{"name":"bigmistqke","email":"vandijckv@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/solid-fs-components_0.1.0-beta_1745149263209_0.13032670610912978"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-20T11:41:03.112Z","0.1.0-beta":"2025-04-20T11:41:03.406Z","modified":"2025-04-20T11:41:03.660Z"},"maintainers":[{"name":"bigmistqke","email":"vandijckv@gmail.com"}],"description":"headless components for visualizing and interacting with reactive filesystem","homepage":"https://github.com/bigmistqke/solid-fs-components#readme","keywords":["solid"],"repository":{"type":"git","url":"git+https://github.com/bigmistqke/solid-fs-components.git"},"contributors":[],"author":{"name":"bigmistqke"},"bugs":{"url":"https://github.com/bigmistqke/solid-fs-components/issues"},"license":"MIT","readme":"<p>\n  <img width=\"100%\" src=\"https://assets.solidjs.com/banner?type=solid-fs-components&background=tiles&project=%20\" alt=\"solid-fs-components\">\n</p>\n\n# @bigmistqke/solid-fs-components\n\n[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)\n\nHeadless components for visualizing and interacting with a reactive filesystem.\n\n**solid-fs-components** provides headless components for file explorers and folder trees in [SolidJS](https://www.solidjs.com/). You bring the UI — it handles the logic.\n\n## Installation\n\n```bash\npnpm add @bigmistqke/solid-fs-components\n```\n\n## Components\n\n- [x] [FileTree](#filetree)\n- [ ] FileList (yet to implement)\n- [ ] FileGrid (yet to implement)\n\n## FileTree\n\nThe `<FileTree>` component is a headless UI component designed to manage and render a reactive view of filesystem directories and files. This component handles the state and logic for expanding, collapsing, selecting, and moving files and directories.\n\n### Features\n\n- 📁 Expand and collapse directories\n- 🖱️ Multi-selection with ctrl-click/cmd-click\n- 🖱️ Range selection with shift-click\n- ⌨️ Keyboard navigation including space to toggle folders\n- 🚀 Drag-and-drop to reorganize entries\n- ✏️ Inline renaming\n- 🌍 ~~Compatible with any reactive filesystem model~~ (currently only sync filesystems supported)\n\n### Usage\n\n```tsx\n<FileTree\n  base=\"/\"\n  fs={yourFileSystem}\n  onRename={(oldPath, newPath) => console.log(`Renamed \\${oldPath} → \\${newPath}`)}\n>\n  {(dirEnt, fileTree) => (\n    <FileTree.DirEnt>\n      <FileTree.IndentGuides render={kind => <span class=\"indent\" data-kind={kind()} />} />\n      <FileTree.Expanded collapsed={<span>▶</span>} expanded={<span>▼</span>} />\n      <FileTree.Name editable />\n    </FileTree.DirEnt>\n  )}\n</FileTree>\n```\n\n### Props\n\n- `base`: Root path to begin rendering from (default is `\"/\"`).\n- `fs`: An implementation of the FileSystem interface:\n  - `readdir(path)`: Retrieves directories and files.\n  - `rename(oldPath, newPath)`: Moves or renames files or directories.\n  - `exists(path)`: Checks if a path exists.\n\n### Compound Components\n\n#### FileTree.DirEnt\n\nThis subcomponent wraps individual directory or file entries, handling all user interactions such as selection, focus, drag-and-drop, and expand/collapse operations.\n\n#### FileTree.IndentGuides\n\nRenders visual guides indicating the nesting level of each directory, customizable via a render prop.\n\n#### FileTree.Expanded\n\nProvides a toggle icon indicating whether a directory is expanded or collapsed.\n\n#### FileTree.Name\n\nDisplays and optionally allows editing of the directory or file name.\n\n## FileSystem Interface\n\nTo use `FileTree`, you need to implement the following FileSystem interface:\n\n```ts\ninterface FileSystem {\n  readdir(path: string): Array<{ path: string; type: 'file' | 'dir' }>\n  rename(oldPath: string, newPath: string): void\n  exists(path: string): boolean\n}\n```\n\n### Context Hooks\n\n- **useFileTree()**: Access the file tree context for operations like expanding, collapsing, selecting, or moving entries.\n- **useDirEnt()**: Access the properties and methods related to the directory entry currently being rendered.\n- **useIndentGuide()** Access the indent guide kind\n\n### API\n\n#### useFileTree\n\n```ts\n{\n  getDirEntsOfDirId(path: string): Array<DirEnt>\n  expandDirById(id: string): void\n  collapseDirById(id: string): void\n  isDirExpandedById(id: string): boolean\n  resetSelectedDirEntIds(): void\n  moveToPath(path: string): void\n  selectDirEntById(id: string): void\n  shiftSelectDirEntById(id: string): void\n  deselectDirEntById(id: string): void\n  focusDirEnt(path: string): void\n  blurDirEnt(path: string): void\n  isDirEntFocused(path: string): boolean\n  pathToId(path: string): string\n}\n```\n\n#### useDirEnt\n\n```ts\n{\n  id: string,\n  path: string,\n  name: string,\n  type: \"file\" | \"dir\",\n  selected: boolean,\n  focused: boolean,\n  indentation: number,\n  select(): void,\n  deselect(): void,\n  shiftSelect(): void,\n  rename(path: string): void,\n  focus(): void,\n  blur(): void,\n  expand?(): void,\n  collapse?(): void,\n  expanded?: boolean\n}\n```\n\n### useIndentGuide()\n\nUsed inside `<FileTree.IndentGuides>` to get the current guide kind:\n\n```ts\nconst kind = useIndentGuide() // returns Accessor<\"pipe\" | \"tee\" | \"elbow\" | \"spacer\">\n```\n\n## License\n\nMIT © 2025\n","readmeFilename":"README.md","_rev":"1-76180b8a4dbe2bdd0160dd8006c4a127"}