Workspace tools

Installation & usage

npx @youj/cli add app-file-manager

Also installs app-page, async-button, badge, breadcrumb, button, checkbox, context-menu, counter, empty, icon-archive, icon-check, icon-cloud-upload, icon-copy, icon-download, icon-eye, icon-file, icon-file-text, icon-film, icon-folder, icon-image, icon-layout-grid, icon-layout-list, icon-link, icon-menu, icon-music, icon-search, icon-table, icon-trash, icon-upload, icon-x, illustrations, input-group, morph-label, presence-list, progress, resizable, select, sheet, skeleton, switch, toast, toggle-group, tree-view, typography, use-mobile, youj-core, youj-presets, youj-ui-core.

The CLI copies the block to blocks/app/file-manager.tsx with every component it uses, so it’s yours to edit.

Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:

fileManager-view.tsx

'use client'

import { FileManager, type FileManagerProps } from '@/blocks/app/file-manager'

export function FileManagerView({ files, folders, storage }: Pick<FileManagerProps, 'files' | 'folders' | 'storage'>) {
  return (
    <FileManager
      files={files}
      folders={folders}
      storage={storage}
      copy={{ titleSuffix: ' files' }}
      onFolderChange={(folder) => {
        // your code
      }}
      onViewChange={(view) => {
        // your code
      }}
      onUpload={(file, folder, onProgress) => {
        // your code
      }}
    />
  )
}

Reference

Props28 props, 3 types

Props

FileManager props
Prop	Type	Default
`theme`	`ThemeInput` A theme to force on the block. Default: none, so it inherits the app's (YoujProvider or a ThemeScope around it).	–
`embedded`	`boolean` A page in your app's frame: the shared page header (AppPage) with search and Upload, and the frame's gutter, with no top bar of its own. default true	`true`
`brand`	`{ name: string; logo?: ReactNode }` The product in the header, the breadcrumb root and the demo logo files. default Stash	`Stash`
`headingLevel`	`1 \| 2 \| 3` The title's level. default 1	`1`
`copy`	`Partial<FileManagerCopy>` Any of the block's strings, to rewrite or translate.	–
`locale`	`string` Formats dates and sizes. Default: `copy.locale`, else the app's locale (YoujProvider), else en-US.	–
`files`	`FileManagerFile[]` Every file, each naming its folder by id. Uploads and deletes change the list from here. default the demo's seventeen	`the demo's seventeen`
`folders`	`FileManagerFolder[]` The folder tree. default Brand, Campaigns (Autumn 26, Orbit launch), Contracts, Research	`Brand, Campaigns (Autumn 26, Orbit launch), Contracts, Research`
`storage`	`FileManagerStorage[]` What the storage meter splits the space used into. default media, documents, archives	`media, documents, archives`
`quota`	`number` The storage quota, in bytes. default 100 GB	`100 GB`
`now`	`Date \| number` The moment "Today" and "3 days ago" count from, in epoch ms. default a fixed demo date	`a fixed demo date`
`folder`	`string` The open folder, to control it. Pair with `onFolderChange`.	–
`defaultFolder`	`string` The folder open at first, when uncontrolled. Default: Autumn 26 in the demo, else the first folder.	–
`onFolderChange`	`(folder: string) => void` Called with the folder's id when the person opens another.	–
`view`	`'grid' \| 'list'` Grid or list, to control it. Pair with `onViewChange`.	–
`defaultView`	`'grid' \| 'list'` Grid or list at first, when uncontrolled. default 'grid'	`'grid'`
`onViewChange`	`(view: 'grid' \| 'list') => void` Called when the person switches between grid and list.	–
`onUpload`	`(file: File, folder: string, onProgress: (percent: number) => void) => ReturnType<FileManagerUploadHandler>` Uploads one dropped or picked file into the open folder; report progress and resolve with the stored file. A rejection drops it from the tray with its message. Default: a demo transfer.	–
`onDelete`	`(files: FileManagerFile[]) => Promise<unknown> \| unknown` Moves files to trash. They leave at once; a rejection puts them back and shows its message.	–
`onRestore`	`(files: FileManagerFile[]) => Promise<unknown> \| unknown` Undo after a delete: the files are back in the list.	–
`onDownload`	`(files: FileManagerFile[]) => Promise<unknown> \| unknown` Downloads one file (the preview) or the selection; resolve when it's done. Default: a demo wait.	–
`onCopyLink`	`(file: FileManagerFile) => Promise<unknown> \| unknown` Copies a file's link (the tile's menu); resolve when copied. Default: a "Link copied" toast.	–
`getShareUrl`	`(file: FileManagerFile) => string` The share link the preview shows and copies. Default: a demo stash.app link.	–
`onOpen`	`(file: FileManagerFile) => void` Called when a file's preview opens.	–
`loading`	`boolean` Shows skeleton tiles in place of the files while they load. default false	`false`
`error`	`ReactNode` A load failure, shown in place of the files, with Try again when `onRetry` is set.	–
`onRetry`	`() => void` Called from the error's Try again button.	–
`empty`	`ReactNode` Replaces the empty folder's state. Default: a drop hint from `copy.emptyTitle`.	–

`FileManagerFile`

FileManagerFile props
Prop	Type	Default
`id`Required	`string`	–
`name`Required	`string`	–
`folder`Required	`string` The id of the folder it sits in.	–
`kind`Required	`Kind` `'image''video''doc''pdf''sheet''audio''archive'`	–
`size`Required	`number` In bytes.	–
`modified`Required	`number` When it last changed, in epoch milliseconds.	–
`owner`Required	`string`	–
`scene`	`Scene` The scene that says what's inside. Default: its kind's.	–
`preview`	`'wordmark' \| 'wordmark-inverse' \| 'swatches'` Draws the content itself instead of a scene, for a file whose content is the point: a logo, a palette.	–
`length`	`string` A clip's running time, shown on its tile.	–

`FileManagerFolder`

FileManagerFolder props
Prop	Type	Default
`id`Required	`string`	–
`name`Required	`string`	–
`children`	`FileManagerFolder[]` Folders inside it, shown in the tree and as tiles above its files.	–

`FileManagerStorage`

FileManagerStorage props
Prop	Type	Default
`label`Required	`string`	–
`bytes`Required	`number`	–
`tone`Required	`string` The meter cells' background class, e.g. 'bg-accent'.	–

Strings57 keys for copy

Built from22 components

Accessibilitylandmarks, toolbars, status

#Installation & usage

#Description

#Code

#Reference

Props

FileManagerFile

FileManagerFolder

FileManagerStorage

Strings

Built from

Components used

#Accessibility

Installation & usage

Description

Code

Reference

`FileManagerFile`

`FileManagerFolder`

`FileManagerStorage`

Accessibility