npm - @ckbox/core - Versions diffs - 1.1.1-dev.0 → 1.2.0-dev.0 - Mend

@ckbox/core 1.1.1-dev.0 → 1.2.0-dev.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (287) hide show

package/README.md CHANGED Viewed

@@ -13,7 +13,7 @@ Using a build served from the CDN is the simplest and fastest way of embedding C
 To start using CKBox on your website, embed the following `script` element in the HTML code of the page:
 ```html
-<script src="https://cdn.ckbox.io/CKBox/1.1.1-dev.0/ckbox.js"></script>
+<script src="https://cdn.ckbox.io/CKBox/1.2.0-dev.0/ckbox.js"></script>
 ```
 Quick implementation example:
@@ -22,7 +22,7 @@ Quick implementation example:
 <html>
 	<head>
 		<meta charset="UTF-8" />
-		<script src="https://cdn.ckbox.io/CKBox/1.1.1-dev.0/ckbox.js"></script>
+		<script src="https://cdn.ckbox.io/CKBox/1.2.0-dev.0/ckbox.js"></script>
 	</head>
 	<body>
 		<div id="ckbox"></div>
@@ -47,7 +47,7 @@ The code snippet below presents the simplest scenario for integration of CKEdito
 	<head>
 		<meta charset="UTF-8" />
 		<script src="https://cdn.ckeditor.com/ckeditor5/34.2.0/classic/ckeditor.js"></script>
-		<script src="https://cdn.ckbox.io/CKBox/1.1.1-dev.0/ckbox.js"></script>
+		<script src="https://cdn.ckbox.io/CKBox/1.2.0-dev.0/ckbox.js"></script>
 	</head>
 	<body>
 		<div id="editor"></div>

package/dist/components/assetSize/AssetSize.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import * as React from 'react';
+/**
+ * Component responsible for parsing asset size and displaying it in a user-friendly way.
+ */
+declare const AssetSize: React.FC<Props>;
+export interface Props {
+    /**
+     * Asset size in bytes.
+     */
+    size?: number;
+}
+export default AssetSize;

package/dist/components/assetSize/getAssetSize.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const getAssetSize: (size: number) => string;

package/dist/components/assetSize/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './getAssetSize';
2	+ export { default } from './AssetSize';

package/dist/components/assets/Assets.d.ts ADDED Viewed

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { ParsedAsset } from '../../providers';
+import { Props as DisplayOptionsProps } from './displayOptions';
+declare const Assets: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export interface Props {
+    /**
+     * Display options config.
+     */
+    displayOptions: DisplayOptionsProps;
+    /**
+     * Specifies the estimated number of assets.
+     * In some scenarios this number might be different than the actual number, but it's available sooner.
+     */
+    estimatedTotalAssetsCount?: number;
+    /**
+     * Indicates if component should be marked as active. It triggers visual effects such as border highlight.
+     */
+    isFilesDropActive?: boolean;
+    /**
+     * Total number of assets available in current category.
+     */
+    totalAssetsCount: number;
+    /**
+     * Current page number for pagination.
+     */
+    pageNumber: number;
+    /**
+     * Callback invoked upon clicking on `Choose` button.
+     */
+    onChoose?: (assets: ParsedAsset[]) => void;
+    /**
+     * Callback to execute when the pagination page has been changed.
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * Callback invoked upon toggling properties drawer.
+     */
+    onPropertiesDrawerToggle: () => void;
+    /**
+     * Indicates if properties drawer should be open.
+     */
+    propertiesDrawerOpen: boolean;
+    /**
+     * List of assets.
+     */
+    assets: ParsedAsset[];
+    /**
+     * Slot prop for category properties drawer.
+     */
+    categoryPropertiesDrawer?: React.ReactNode;
+    /**
+     * Fallback content rendered if there are no assets to display.
+     */
+    fallbackContent?: React.ReactElement;
+    /**
+     * Indicates if data is being loaded for the first time.
+     */
+    isInitDataLoading: boolean;
+    /**
+     * Indicates if data for the next page is being loaded.
+     */
+    isNextDataLoading: boolean;
+    /**
+     * Upload button to render.
+     */
+    uploadButton?: React.ReactNode;
+    /**
+     * Sets the content bar.
+     */
+    contentBar?: React.ReactNode;
+}
+export default Assets;

package/dist/components/assets/AssetsBottombar.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import * as React from 'react';
+declare const AssetsBottombar: React.FC<Props>;
+interface Props {
+    /**
+     * Toggles loading effect.
+     */
+    isLoading: boolean;
+    /**
+     * Callback invoked upon clicking on `Choose` button.
+     */
+    onChoose?: () => void;
+    /**
+     * Callback to execute when the pagination page has been changed.
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * Current page number for pagination.
+     */
+    pageNumber: number;
+    /**
+     * Toggles `Choose` button.
+     */
+    showChoose: boolean;
+    /**
+     * Total number of selected assets.
+     */
+    selectedAssetsNum: number;
+    /**
+     * Total number of pages.
+     */
+    totalPagesCount: number;
+}
+export default AssetsBottombar;

package/dist/components/assets/AssetsTopbar.d.ts ADDED Viewed

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { Props as DisplayOptionsProps } from './displayOptions';
+declare const AssetsTopbar: React.FC<Props>;
+export interface Props {
+    /**
+     * Display options config.
+     */
+    displayOptions: DisplayOptionsProps;
+    /**
+     * Displays `Delete` button as active.
+     */
+    isDeleteActive?: boolean;
+    /**
+     * Enables `Delete` button.
+     */
+    isDeleteEnabled?: boolean;
+    /**
+     * Indicates if requests associated with download (like asset verification) are in progress.
+     */
+    isDownloading?: boolean;
+    /**
+     * Enables `Download` button.
+     */
+    isDownloadEnabled?: boolean;
+    /**
+     * Displays `Properties` button as active.
+     */
+    isPropertiesActive?: boolean;
+    /**
+     * Enables `Rename` button.
+     */
+    isRenameEnabled?: boolean;
+    isSearchActive?: boolean;
+    /**
+     * Displays `View` button as active.
+     */
+    isViewActive?: boolean;
+    /**
+     * Enables `View` button.
+     */
+    isViewEnabled?: boolean;
+    /**
+     * Callback invoked upon clicking `Delete` button.
+     */
+    onDelete: () => void;
+    /**
+     * Callback invoked upon clicking `Download` button.
+     */
+    onDownload: () => void;
+    /**
+     * Callback invoked upon clicking `Properties` button.
+     */
+    onProperties: () => void;
+    /**
+     * Callback invoked upon clicking `Rename` button.
+     */
+    onRename: () => void;
+    /**
+     * Callback invoked upon clicking `View` button.
+     */
+    onView: () => void;
+    /**
+     * Callback invoked upon clicking `View` button.
+     */
+    onSearch: () => void;
+    /**
+     * Upload button to render.
+     */
+    uploadButton?: React.ReactNode;
+}
+export default AssetsTopbar;

package/dist/components/assets/asset/Asset.d.ts ADDED Viewed

@@ -0,0 +1,45 @@
+import * as React from 'react';
+declare const Asset: React.FC<Props>;
+export interface Props {
+    /**
+     * Allows cover mode for the thumbnail.
+     */
+    allowCover?: boolean;
+    /**
+     * Asset image's blurhash representation.
+     */
+    blurHash?: string;
+    /**
+     * Container element.
+     */
+    containerEl: HTMLDivElement | null;
+    /**
+     * Asset extension.
+     */
+    extension: string;
+    /**
+     * Original image's height.
+     */
+    height?: number;
+    /**
+     * Asset id.
+     */
+    id: string;
+    /**
+     * Asset name.
+     */
+    name: string;
+    /**
+     * Asset description.
+     */
+    description?: string;
+    /**
+     * Original image's width.
+     */
+    width?: number;
+    /**
+     * Applies settings relevant for thumb.
+     */
+    thumb?: boolean;
+}
+export default Asset;

package/dist/components/assets/asset/AssetPreview.d.ts ADDED Viewed

@@ -0,0 +1,45 @@
+import * as React from 'react';
+declare const AssetPreview: React.FC<Props>;
+export interface Props {
+    /**
+     * Allows cover mode for the thumbnail.
+     */
+    allowCover?: boolean;
+    /**
+     * Asset image's blurhash representation.
+     */
+    blurHash?: string;
+    /**
+     * Gallery container element.
+     */
+    containerEl: HTMLDivElement | null;
+    /**
+     * Original image's height.
+     */
+    height?: number;
+    /**
+     * Asset id.
+     */
+    id: string;
+    /**
+     * Asset name.
+     */
+    name: string;
+    /**
+     * Asset description.
+     */
+    description?: string;
+    /**
+     * Original image's width.
+     */
+    width?: number;
+    /**
+     * Callback invoked when a resource failed to load, or can't be used.
+     */
+    onError?: () => void;
+    /**
+     * Applies settings relevant for thumb.
+     */
+    thumb?: boolean;
+}
+export default AssetPreview;

package/dist/components/assets/asset/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default } from './Asset';

package/dist/components/assets/assetEditForm/AssetEditForm.d.ts ADDED Viewed

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { ParsedAsset } from '../../../providers';
+declare const AssetEditForm: React.FC<Props>;
+export interface Props {
+    /**
+     * Form Id to use.
+     */
+    formId: string;
+    /**
+     * Initial asset data.
+     */
+    assetData: ParsedAsset;
+    /**
+     * Asset tags.
+     */
+    assetTags?: string[];
+    /**
+     * List of allowed extensions.
+     */
+    allowedExtensions?: string[];
+    /**
+     * Callback invoked when save button is clicked.
+     */
+    onSave: (id: string, categoryId: string, data: {
+        name: string;
+        extension: string;
+        description?: string;
+        tags: string[];
+    }) => void;
+    /**
+     * Setter for element that will contain file name.
+     */
+    setFileNameInputEl?: (el: HTMLInputElement | null) => void;
+    /**
+     * Callback invoked when dirty status of form changes.
+     */
+    onDirtyStatusChange?: (isDirty: boolean) => void;
+}
+export default AssetEditForm;

package/dist/components/assets/assetEditForm/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default } from './AssetEditForm';

package/dist/components/assets/assetEditForm/useFormValidation.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { RegisterOptions } from 'react-hook-form';
+/**
+ * Creates validation rules for asset properties form fields.
+ *
+ * @param allowedExtensions allowed file extensions for the file
+ * @returns validation rules
+ */
+export declare const useFormValidation: (allowedExtensions: string[]) => Record<'description' | 'extension' | 'name', RegisterOptions>;

package/dist/components/assets/assetPropertiesDialog/AssetPropertiesDialog.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ParsedAsset } from '../../../providers';
+declare const AssetPropertiesDialog: React.FC<Props>;
+export interface Props {
+    /**
+     * Asset data.
+     */
+    assetData: ParsedAsset;
+    /**
+     * Sets initial focus on file name input.
+     */
+    focusFileName?: boolean;
+    /**
+     * Callback invoked when close button is clicked.
+     */
+    onClose: () => void;
+    /**
+     * Callback invoked when save button is clicked.
+     */
+    onSave: (id: string, categoryId: string, data: {
+        name: string;
+        extension: string;
+        description?: string;
+        tags: string[];
+    }) => Promise<void>;
+}
+export default AssetPropertiesDialog;

package/dist/components/assets/assetPropertiesDialog/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default } from './AssetPropertiesDialog';

package/dist/components/assets/assetPropertiesDialog/useFormValidation.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { RegisterOptions } from 'react-hook-form';
+/**
+ * Creates validation rules for asset properties form fields.
+ *
+ * @param allowedExtensions allowed file extensions for the file
+ * @returns validation rules
+ */
+export declare const useFormValidation: (allowedExtensions: string[]) => Record<'description' | 'extension' | 'name', RegisterOptions>;

package/dist/components/assets/assetPropertiesDrawer/AssetPropertiesDrawer.d.ts ADDED Viewed

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { ParsedAsset } from '../../../providers';
+declare const AssetPropertiesDrawer: React.FC<Props>;
+export interface Props {
+    /**
+     * Asset data.
+     */
+    assetData: ParsedAsset;
+    /**
+     * Sets initial focus on file name input.
+     */
+    focusFileName?: boolean;
+    /**
+     * Determines if drawer should use fixed display.
+     */
+    isUsingFixedSideContent?: boolean;
+    /**
+     * Callback invoked after focusing file name input.
+     */
+    onRenameDidFocus: () => void;
+    /**
+     * Callback invoked when close button is clicked.
+     */
+    onClose: () => void;
+    /**
+     * Callback invoked when save button is clicked.
+     */
+    onSave: (id: string, categoryId: string, data: {
+        name: string;
+        extension: string;
+        description?: string;
+        tags: string[];
+    }) => void;
+}
+export default AssetPropertiesDrawer;

package/dist/components/assets/assetPropertiesDrawer/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default } from './AssetPropertiesDrawer';

package/dist/components/assets/assetsActions/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './useAssetsActions';

package/dist/components/assets/assetsActions/useAssetsActions.d.ts ADDED Viewed

@@ -0,0 +1,35 @@
+import { ParsedAsset } from '../../../providers';
+export declare const useAssetsActions: (assets: ParsedAsset[], selectedAssets: Set<string>, onPropertiesDrawerToggle: () => void, onChoose?: ((assets: ParsedAsset[]) => void) | undefined) => {
+    assetsToDelete: ParsedAsset[];
+    handleAssetUpdate: (assetId: string, categoryId: string, { name, extension, description, tags, }: {
+        name: string;
+        extension: string;
+        description?: string | undefined;
+        tags: string[];
+    }) => Promise<void>;
+    handleDeleteCancel: () => void;
+    handleDeleteConfirm: () => Promise<void>;
+    handleDelete: () => void;
+    handleDownload: () => Promise<void>;
+    handleToggleProperties: () => Promise<void>;
+    handleRename: () => Promise<void>;
+    handleRenameDidFocus: () => void;
+    handleSelectedAssetsChoose: () => void;
+    handleAssetChoose: (id: string) => void;
+    handleAssetPreviewOpen: () => void;
+    handleAssetPreviewClose: () => void;
+    onKeyDown: (evt: {
+        readonly key: string;
+        readonly code: string;
+        readonly ctrlKey: boolean;
+        readonly metaKey: boolean;
+        readonly shiftKey: boolean;
+        readonly altKey: boolean;
+        preventDefault: () => void;
+        stopPropagation: () => void;
+    }) => void;
+    focusFileName: boolean;
+    isDeletingAssets: boolean;
+    isVerifyingAsset: boolean;
+    previewedAssetId: string | undefined;
+};

package/dist/components/assets/assetsContent/AssetGalleryItem.d.ts ADDED Viewed

@@ -0,0 +1,73 @@
+import * as React from 'react';
+/**
+ * Make sure that any prop passed to `AssetGalleryItem` component is either a primitve value or its ref does not change too often.
+ * This is to ensure that `React.memo`'s shallow compare works correctly.
+ */
+export interface Props {
+    /**
+     * Flag indicating if asset is active.
+     */
+    active: boolean;
+    /**
+     * Allows cover mode for the thumbnail.
+     */
+    allowCover?: boolean;
+    /**
+     * Asset image's blurhash representation.
+     */
+    blurHash?: string;
+    /**
+     * Gallery container element.
+     */
+    containerEl: HTMLDivElement | null;
+    /**
+     * Creates a callback that registers asset's ref.
+     */
+    createSetAssetRef: (id: string) => (ref: HTMLDivElement | null) => void;
+    /**
+     * Asset description.
+     */
+    description?: string;
+    /**
+     * Asset extension.
+     */
+    extension: string;
+    /**
+     * Original image's height.
+     */
+    height?: number;
+    /**
+     * Asset id.
+     */
+    id: string;
+    /**
+     * Asset name.
+     */
+    name: string;
+    /**
+     * A callback that can be invoked upon `dblclick` event on the gallery item.
+     */
+    onAssetDoubleClick: (id: string) => void;
+    /**
+     * Callback for selecting a single asset.
+     */
+    selectSingle: (id: string) => void;
+    /**
+     * Callback for selecting range of assets.
+     */
+    selectRange: (id: string) => void;
+    /**
+     * Callback for toggling asset selection.
+     */
+    toggleSelection: (id: string) => void;
+    /**
+     * Original image's width.
+     */
+    width?: number;
+}
+/**
+ * `AssetGalleryItem` component is memoized since upstream components might trigger lots of updates on selection events.
+ * Let's prevent unnecessary re-renders.
+ */
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/components/assets/assetsContent/AssetsContent.d.ts ADDED Viewed

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { SelectionAreaCoords } from '@ckbox/components';
+import { ParsedAsset } from '../../../providers';
+declare const AssetsContent: React.FC<Props>;
+export interface Props {
+    /**
+     * Allows cover mode for thumbnails.
+     */
+    allowCover?: boolean;
+    /**
+     * List of assets.
+     */
+    assets: ParsedAsset[];
+    /**
+     * Ref to the gallery container's element.
+     */
+    containerEl: HTMLDivElement | null;
+    /**
+     * Creates a callback that registers asset's ref.
+     */
+    createSetAssetRef: (id: string) => (ref: HTMLDivElement | null) => void;
+    /**
+     * A callback that can be invoked upon `dblclick` event on the gallery item.
+     */
+    onAssetDoubleClick: (id: string) => void;
+    /**
+     * Callback invoked on selection area change.
+     */
+    onSelectionAreaChange: (area: SelectionAreaCoords) => void;
+    /**
+     * Selected assets.
+     */
+    selectedAssets: Set<string>;
+    /**
+     * Callback for selecting a single asset.
+     */
+    selectSingle: (id: string) => void;
+    /**
+     * Callback for selecting range of assets.
+     */
+    selectRange: (id: string) => void;
+    /**
+     * Callback for toggling asset selection.
+     */
+    toggleSelection: (id: string) => void;
+    /**
+     * Represents relative size of a thumb.
+     */
+    thumbSize: number;
+}
+export default AssetsContent;

package/dist/components/assets/assetsContent/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default } from './AssetsContent';

package/dist/components/assets/assetsDeleteDialog/AssetsDeleteDialog.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { ParsedAsset } from '../../../providers';
+declare const AssetsDeleteDialog: React.FC<Props>;
+interface Props {
+    /**
+     * List of assets to delete.
+     */
+    assetsToDelete: ParsedAsset[];
+    /**
+     * Indicates if asset is being deleted.
+     */
+    isDeleting?: boolean;
+    /**
+     * Callback invoked upon clicking cancel button.
+     */
+    onCancel: () => void;
+    /**
+     * Callback invoked upon clicking confirm button.
+     */
+    onConfirm: () => Promise<void>;
+}
+export default AssetsDeleteDialog;

package/dist/components/assets/assetsDeleteDialog/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default } from './AssetsDeleteDialog';

package/dist/components/assets/assetsPagination/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './useAssetsPagination';