@widgetic/file-browser Module

A modern reusable web-based file browser module built with SvelteKit and Tailwind CSS. The module provides an intuitive interface for managing files and folders with features like search, file preview, recent files (at the bottom), and batch operations (upload, move).

Quick Start

1. Install dependencies: npm install
2. Start development server: npm run dev
3. Build for production: npm run build

Documentation

See CODE-OVERVIEW.md for detailed documentation including:

• Project structure
• Component architecture
• State management
• Feature documentation
• Best practices

Setup

Before using this package, you need to set up pnpm correctly:

npm run ipnpm

This will:

1. Create the necessary directories
2. Install pnpm globally
3. Configure pnpm with consistent settings
4. Set the virtual store directory to a consistent location

Building and Linking

To build the package and make it available for linking:

# In the file-browser directory
npm run build
# this will run 'vite build && npm run package && npm run plink'

Linking into Another Project using pnpm link

# In your consuming project directory
pnpm link --global @widgetic/file-browser

Usage

<script>
  import { FileBrowser } from '@widgetic/file-browser';
  // Or import specific components
  import { SomeComponent } from '@widgetic/file-browser';
</script>

<FileBrowser />

Available Components

The package exports all components from:

• Core components
• Modal components
• Item components
• Preview components
• UI components

It also exports types.

Development

To develop the package:

Install dependencies

npm install

Start the server

npm run dev

To watch for changes and rebuild the package while linked in another project:

npm run package:watch

Troubleshooting

If you encounter issues with pnpm linking:

andy@Andy-MBPro-14-2021 file-browser % npm run plink

> @widgetic/[email protected] plink
> pnpm link --global

 ERR_PNPM_UNEXPECTED_VIRTUAL_STORE  Unexpected virtual store location

The dependencies at "/Users/andy/Library/pnpm/global/5/node_modules" are currently symlinked from the virtual store directory at "/Users/andy/Library/pnpm/global/5/node_modules/.pnpm".

pnpm now wants to use the virtual store at "/Users/andy/Library/pnpm/global/5/.pnpm" to link dependencies from the store.

If you want to use the new virtual store location, reinstall your dependencies with "pnpm install".

You may change the virtual store location by changing the value of the virtual-store-dir config.

Solution:

1. Make sure you've run the ipnpm script

2. Try unlinking and relinking:

   # Remove from global store
   cd /Users/$USER/Library/pnpm/global/5
   # Edit package.json to remove the link
   pnpm install
      
   # Then relink
   cd /path/to/file-browser
   pnpm link --global

3. remove the global store: rm -rf /Users/andy/Library/pnpm/global/5 && mkdir -p /Users/andy/Library/pnpm/global/5 && cd /Users/andy/Library/pnpm/global/5 && echo '{"dependencies":{"pnpm":"^9.15.4"}}' > package.json && npm install -g pnpm && pnpm install",