@securancy/file-explorer 1.0.0

package/dist/file-explorer.pcss

@@ -0,0 +1,304 @@
+/* eslint-disable */
+@import url("@securancy/svelte-components/styles/custom-media.pcss");
+
+.file-explorer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background: var(--file-explorer-background);
+  overflow: hidden;
+
+  &__controls {
+    flex-shrink: 0;
+    display: flex;
+    border-bottom: var(--file-explorer-border-style);
+    padding: var(--file-explorer-default-spacing);
+    background: var(--file-explorer-background-shade);
+  }
+
+  &__content {
+    flex-grow: 1;
+    display: flex;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+  }
+
+  /* Keep the index within screen */
+  @media (--screen-sm) {
+    &--display-mode-index {
+      /* @formatter:off */
+      ^&__content {
+        /* @formatter:on */
+        overflow-x: inherit;
+      }
+    }
+  }
+
+  &__column,
+  &__index {
+    flex-shrink: 0;
+    border-right: var(--file-explorer-border-style);
+    background: var(--file-explorer-background);
+  }
+
+  &__column {
+    display: flex;
+    flex-direction: column;
+    width: var(--file-explorer-column-default-width);
+    min-width: var(--file-explorer-column-min-width);
+    overflow: hidden;
+
+    &--file-detail {
+      flex-grow: 1;
+      width: var(--file-explorer-preview-default-width);
+      display: flex;
+      flex-direction: column;
+    }
+
+    &--sticky {
+      position: sticky;
+      left: 0;
+      z-index: 1;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      transition: background-color 0.2s ease-in-out;
+    }
+
+    &--dragover {
+      cursor: copy;
+
+      &::after {
+        pointer-events: all;
+        background-color: var(--file-explorer-background-dragover);
+      }
+    }
+  }
+
+  &__index {
+    display: flex;
+    flex-direction: column;
+    width: var(--file-explorer-index-default-width);
+    overflow: hidden;
+
+    @media (--screen-sm) {
+      flex-shrink: 1;
+    }
+
+    &--hidden {
+      display: none;
+    }
+  }
+
+  &__column-scroll-container,
+  &__index-scroll-container {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: calc(var(--file-explorer-default-spacing) * 1.5) var(--file-explorer-default-spacing) 0 var(--file-explorer-default-spacing);
+  }
+
+  &__grid {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: var(--file-explorer-default-spacing);
+  }
+
+  &__breadcrumb {
+    /* @todo */
+  }
+
+  &__display-mode-switcher {
+    display: flex;
+    gap: calc(0.5 * var(--file-explorer-default-spacing));
+    margin-left: auto;
+  }
+
+  &__search {
+    margin-bottom: var(--file-explorer-default-spacing);
+    padding: calc(var(--file-explorer-default-spacing) * 1.5) var(--file-explorer-default-spacing) 0 var(--file-explorer-default-spacing);
+  }
+
+  &__list {
+    margin-bottom: var(--file-explorer-default-spacing);
+  }
+
+  &__list-header {
+    display: flex;
+    justify-content: space-between;
+    gap: calc(0.5 * var(--file-explorer-default-spacing));
+    width: 100%;
+    margin-bottom: calc(0.5 * var(--file-explorer-default-spacing));
+    color: var(--file-explorer-list-header-color);
+
+    span {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    button {
+      flex-shrink: 0;
+      color: var(--file-explorer-action-primary-color);
+      cursor: pointer;
+    }
+  }
+
+  &__grid-header {
+    width: 100%;
+
+    button {
+      color: var(--file-explorer-action-primary-color);
+      cursor: pointer;
+    }
+  }
+
+  &__list-item,
+  &__grid-item {
+    border-radius: var(--file-explorer-list-item-border-radius);
+    background: none;
+    color: var(--file-explorer-list-item-color);
+
+    > :global(i) {
+      flex-shrink: 0;
+    }
+
+    &:not(&--active):hover {
+      background: var(--file-explorer-list-item-background-hover);
+    }
+
+    &--active {
+      color: var(--file-explorer-list-item-color-active);
+      background: var(--file-explorer-list-item-background-active);
+    }
+  }
+
+  &__grid-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    /* 3 items in a grid, spaced out with default spacing means the width of 2 gaps must be subtracted from width */
+    width: calc(33.33% - (0.6666 * var(--file-explorer-default-spacing)));
+    padding: 5px 2px;
+
+    @media (--screen-sm) {
+      width: 100px;
+    }
+
+    &--active {
+      /* @todo */
+    }
+
+    > span {
+      word-break: break-word;
+      margin-top: calc(0.25 * var(--file-explorer-default-spacing));
+    }
+  }
+
+  &__list-item {
+    display: flex;
+    align-items: baseline;
+    width: 100%;
+    text-align: left;
+    padding: var(--file-explorer-list-item-spacing);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    > span {
+      flex-grow: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    > :global(i:first-child) {
+      margin-right: var(--file-explorer-list-item-spacing);
+    }
+
+    > :global(i:last-child) {
+      margin-left: var(--file-explorer-list-item-spacing);
+    }
+  }
+
+  &__message {
+    display: block;
+    padding: var(--file-explorer-list-item-spacing) 0;
+    color: var(--file-explorer-message-color);
+  }
+
+  &__image-preview {
+    max-width: 100%;
+    margin: 0 auto;
+  }
+
+  &-preview {
+    &__title {
+      font-size: var(--font-size--h1);
+      font-weight: var(--font-weight--semi-bold);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &__download {
+      color: var(--file-explorer-action-primary-color);
+      font-weight: var(--font-weight--semi-bold);
+
+      &:hover {
+        text-decoration-line: underline;
+      }
+    }
+
+    &__info {
+      margin-top: 14px;
+
+      & span {
+        color: var(--file-explorer-message-color);
+      }
+
+      button {
+        cursor: pointer;
+      }
+    }
+  }
+
+  &__scroll-back-button {
+    position: fixed;
+    bottom: var(--file-explorer-default-spacing);
+    right: var(--file-explorer-default-spacing);
+    z-index: 2;
+    background: var(--file-explorer-action-primary-color);
+    color: var(--file-explorer-action-primary-color-contrast);
+    padding: var(--file-explorer-list-item-spacing);
+    border-radius: var(--file-explorer-list-item-border-radius);
+  }
+
+  &__file-icon {
+    &--large {
+      width: 100%;
+      text-align: center;
+      padding: calc(2 * var(--file-explorer-default-spacing));
+
+      :global(i) {
+        font-size: var(--file-explorer-preview-icon-size);
+      }
+    }
+  }
+
+  &__text--semi-bold {
+    font-weight: var(--file-explorer-text-semi-bold);
+  }
+
+  &__loader {
+    display: flex;
+    justify-content: center;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FileExplorer } from './components/FileExplorer.svelte';
+export type * from './components/FileExplorer.svelte';
+export * from './models/index.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default as FileExplorer } from './components/FileExplorer.svelte';
+export * from './models/index.js';

package/dist/models/file-explorer-display-mode.d.ts

@@ -0,0 +1,4 @@
+export declare enum FileExplorerDisplayMode {
+    Columns = "columns",
+    Index = "index"
+}

package/dist/models/file-explorer-display-mode.js

@@ -0,0 +1,5 @@
+export var FileExplorerDisplayMode;
+(function (FileExplorerDisplayMode) {
+    FileExplorerDisplayMode["Columns"] = "columns";
+    FileExplorerDisplayMode["Index"] = "index";
+})(FileExplorerDisplayMode || (FileExplorerDisplayMode = {}));

package/dist/models/file-item.d.ts

@@ -0,0 +1,23 @@
+export type FileSystemItem = FileItem | DirectoryItem;
+type FileSystemItemProperties = {
+    name: string;
+    path: string;
+};
+export type FileItem = {
+    type: 'file';
+} & FileSystemItemProperties;
+export type DirectoryItem = {
+    type: 'directory';
+    children: FileSystemItem[];
+} & FileSystemItemProperties;
+export interface FilePreview {
+    url: string;
+    fileSize: number;
+    createdAt?: Date;
+    modifiedAt?: Date;
+}
+export type CreateDirectoryRequest = Pick<FileSystemItem, 'path' | 'name'>;
+export type UploadFilesRequest = Pick<FileItem, 'path'> & {
+    files: FileList;
+};
+export {};

package/dist/models/file-item.js

@@ -0,0 +1 @@
+export {};

package/dist/models/index.d.ts

@@ -0,0 +1,3 @@
+export * from './file-explorer-display-mode.js';
+export * from './file-item.js';
+export * from './translations.js';

package/dist/models/index.js

@@ -0,0 +1,3 @@
+export * from './file-explorer-display-mode.js';
+export * from './file-item.js';
+export * from './translations.js';

package/dist/models/translations.d.ts

@@ -0,0 +1,19 @@
+import type { FileSystemItem } from './file-item.js';
+export declare const defaultTranslations: {
+    readonly createNewDirectoryModalTitle: "Create new directory";
+    readonly cancel: "Cancel";
+    readonly create: "Create";
+    readonly creating: "Creating...";
+    readonly itemTitle: (item: FileSystemItem) => string;
+    readonly emptyDirectory: "Empty directory";
+    readonly previewFile: "Preview file";
+    readonly createdAt: "Created at";
+    readonly modifiedAt: "Last modified at";
+    readonly deleteFile: "Delete file";
+    readonly deleteFileConfirmation: "Are you sure you want to delete:";
+    readonly deleting: "Deleting...";
+    readonly delete: "Delete";
+    readonly createDirectory: "Create directory";
+    readonly uploadFile: "Upload file";
+};
+export type DocumentTranslations = typeof defaultTranslations;

package/dist/models/translations.js

@@ -0,0 +1,17 @@
+export const defaultTranslations = {
+    createNewDirectoryModalTitle: 'Create new directory',
+    cancel: 'Cancel',
+    create: 'Create',
+    creating: 'Creating...',
+    itemTitle: (item) => `Open ${item.type === 'directory' ? 'directory' : 'file'} ${item.name}`,
+    emptyDirectory: 'Empty directory',
+    previewFile: 'Preview file',
+    createdAt: 'Created at',
+    modifiedAt: 'Last modified at',
+    deleteFile: 'Delete file',
+    deleteFileConfirmation: 'Are you sure you want to delete:',
+    deleting: 'Deleting...',
+    delete: 'Delete',
+    createDirectory: 'Create directory',
+    uploadFile: 'Upload file',
+};

package/dist/utilities/file-utilities.d.ts

@@ -0,0 +1,8 @@
+import type { FileSystemItem } from '../models/file-item.js';
+export declare function openItem(item: FileSystemItem, routePrefix: string): Promise<void>;
+export declare function getExtension(path: string): string;
+export declare const imageExtensions: string[];
+export declare const videoExtensions: string[];
+export declare function isImage(path: string): boolean;
+export declare function formatBytes(bytes: number, decimals?: number): string;
+export declare function formatBytesParts(bytes: number, decimals?: number): [number, string];

package/dist/utilities/file-utilities.js

@@ -0,0 +1,49 @@
+import { goto } from '$app/navigation';
+export async function openItem(item, routePrefix) {
+    const itemPath = [
+        ...routePrefix.split('/'),
+        ...item.path.split('/'),
+        item.name,
+    ]
+        .filter((node) => node !== '')
+        .map(encodeURIComponent)
+        .join('/');
+    await goto(itemPath.startsWith('/') ? itemPath : `/${itemPath}`);
+}
+export function getExtension(path) {
+    // extract file name from full path (supports `\\` and `/` separators)
+    const basename = path.split(/[/\\]/).pop();
+    if (!basename)
+        return '';
+    const basenameStripped = basename.split('?')[0];
+    // get last position of `.`
+    const position = basenameStripped.lastIndexOf('.');
+    // if file name is empty or `.` not found (-1) or comes first (0)
+    if (basenameStripped === '' || position < 1)
+        return '';
+    // extract extension ignoring `.`
+    return basenameStripped.slice(position + 1).toLowerCase();
+}
+export const imageExtensions = [
+    'jpg', 'png', 'gif', 'bmp', 'svg', 'webp', 'jpeg',
+];
+export const videoExtensions = [
+    'mp4', 'webm', 'mov', 'mpg', 'mpeg',
+];
+export function isImage(path) {
+    const extension = getExtension(path);
+    return imageExtensions.includes(extension);
+}
+export function formatBytes(bytes, decimals = 2) {
+    const values = formatBytesParts(bytes, decimals);
+    return `${values[0]} ${values[1]}`;
+}
+export function formatBytesParts(bytes, decimals = 2) {
+    if (bytes === 0)
+        return [0, 'Bytes'];
+    const k = 1000;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const index = Math.floor(Math.log(bytes) / Math.log(k));
+    return [Number.parseFloat((bytes / Math.pow(k, index)).toFixed(dm)), sizes[index]];
+}

package/dist/utilities/index.d.ts

@@ -0,0 +1 @@
+export * from './file-utilities.js';

package/dist/utilities/index.js

@@ -0,0 +1 @@
+export * from './file-utilities.js';

package/dist/validation/file-upload-schema.d.ts

@@ -0,0 +1,2 @@
+import { z } from 'zod';
+export declare const fileUploadSchema: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;

package/dist/validation/file-upload-schema.js

@@ -0,0 +1,2 @@
+import { z } from 'zod';
+export const fileUploadSchema = z.object({});

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@securancy/file-explorer",
+  "version": "1.0.0",
+  "type": "module",
+  "private": false,
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./default-styling.pcss": "./default-styling.pcss"
+  },
+  "files": [
+    "dist",
+    "./default-styling.pcss",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "devDependencies": {
+    "@faker-js/faker": "^8.4.1",
+    "@sveltejs/adapter-auto": "^3.2.2",
+    "@sveltejs/kit": "^2.5.18",
+    "@sveltejs/package": "^2.3.2",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@types/luxon": "^3.4.2",
+    "autoprefixer": "^10.4.19",
+    "esm-env": "^1.0.0",
+    "fast-cartesian": "^9.0.0",
+    "luxon": "^3.4.4",
+    "postcss": "^8.4.39",
+    "postcss-custom-media": "^10.0.8",
+    "postcss-each": "^1.1.0",
+    "postcss-easy-import": "^4.0.0",
+    "postcss-extend": "^1.0.5",
+    "postcss-for": "^2.1.1",
+    "postcss-mixins": "^10.0.1",
+    "postcss-nested": "^6.2.0",
+    "postcss-nested-ancestors": "^3.0.0",
+    "publint": "^0.2.9",
+    "svelte": "^4.2.18",
+    "svelte-check": "^3.8.4",
+    "the-new-css-reset": "^1.11.2",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.4",
+    "zod": "^3.23.8",
+    "@securancy/eslint-config": "0.2.1",
+    "@securancy/stylelint-config": "0.1.2",
+    "@securancy/svelte-components": "4.2.2",
+    "@securancy/svelte-utilities": "2.0.1",
+    "@securancy/validation": "1.0.1"
+  },
+  "peerDependencies": {
+    "svelte": "^4.2.18"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "sync": "svelte-kit sync",
+    "build": "npm run package",
+    "build:docs": "svelte-kit sync && vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-package && publint",
+    "package-watch": "svelte-package -w",
+    "lint": "eslint \"./**/*.*{ts,js,svelte,json}\" --config ../../.eslintrc.json --ignore-path ../../.eslintignore",
+    "lint-fix": "npm run lint -- --fix",
+    "stylelint": "stylelint \"src/**/*.{pcss,svelte,css}\" --config ../../.stylelintrc.json",
+    "stylelint-fix": "npm run stylelint -- --fix",
+    "svelte-check": "svelte-check --fail-on-warnings --compiler-warnings \"css-unused-selector:ignore\""
+  }
+}