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

package/dist/components/assets/assetsPagination/useAssetsPagination.d.ts

@@ -0,0 +1,38 @@
+interface AssetsPaginationProps {
+    /**
+     * Number of assets per page.
+     */
+    assetsPerPage: number;
+    /**
+     * Container element for list of assets.
+     */
+    containerEl: HTMLElement | null;
+    /**
+     * Estimated number of assets.
+     */
+    estimatedTotalAssetsCount?: number;
+    /**
+     * Current page number.
+     */
+    pageNumber: number;
+    /**
+     * Callback invoked when page changes.
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * Total number of assets.
+     */
+    totalAssetsCount: number;
+}
+/**
+ * Holds common pagination logic for components used to render assets.
+ *
+ * @param hook props
+ * @returns pagination state and actions
+ */
+export declare const useAssetsPagination: ({ assetsPerPage, containerEl, estimatedTotalAssetsCount, pageNumber, onPageChange, totalAssetsCount, }: AssetsPaginationProps) => {
+    onPageChangeWithScroll: (page: number) => void;
+    estimatedTotalPagesCount: number | undefined;
+    totalPagesCount: number;
+};
+export {};

package/dist/components/assets/assetsPreview/AssetsPreview.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { ParsedAsset } from '../../../providers';
+declare const AssetsPreview: React.FC<Props>;
+interface Props {
+    /**
+     * List of assets for the current page.
+     */
+    assets: ParsedAsset[];
+    /**
+     * Number of assets per page.
+     */
+    assetsPerPage: number;
+    /**
+     * Indicates if requests associated with download (like asset verification) are in progress.
+     */
+    isDownloading?: boolean;
+    /**
+     * Indicates that assets for a page might be still loading.
+     */
+    isLoading?: boolean;
+    /**
+     * Callback invoked whenever asset changes.
+     */
+    onAssetChange: (id: string) => void;
+    /**
+     * Callback invoked when preview is closed.
+     */
+    onClose: () => void;
+    /**
+     * Callback invoked when download is requested.
+     */
+    onDownload: () => void;
+    /**
+     * Callback invoked when page is changed.
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * Current page number.
+     */
+    pageNumber: number;
+    /**
+     * ID of an asset to start with.
+     */
+    previewedAssetId: string;
+    /**
+     * Total number of assets.
+     */
+    totalAssetsCount: number;
+    /**
+     * Total number of pages.
+     */
+    totalPagesCount: number;
+}
+export default AssetsPreview;

package/dist/components/assets/assetsPreview/index.d.ts

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

package/dist/components/assets/assetsSearchDialog/AssetsSearchDialog.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ParsedCategory } from '../../../providers';
+declare const AssetsSearchDialog: React.FC<Props>;
+export interface Props {
+    /**
+     * Determines if dialog should be rendered open or not.
+     */
+    isOpen: boolean;
+    /**
+     * Callback invoked on dialog being closed.
+     */
+    onClose: () => void;
+    /**
+     * List of available categories.
+     */
+    categoriesData: ParsedCategory[];
+}
+export default AssetsSearchDialog;

package/dist/components/assets/assetsSearchDialog/constants.d.ts

@@ -0,0 +1,12 @@
+import { SelectOption } from '@ckbox/components';
+import { PredefinedDateMode } from '../../../services';
+export declare const DOCS_EXTENSIONS: SelectOption[];
+export declare const IMAGES_EXTENSIONS: SelectOption[];
+export declare const ARCHIVES_EXTENSIONS: SelectOption[];
+export declare const AUDIO_EXTENSIONS: SelectOption[];
+export declare const VIDEO_EXTENSIONS: SelectOption[];
+export declare const EXTENSIONS: SelectOption[];
+export declare const DATES: {
+    label: string;
+    id: PredefinedDateMode;
+}[];

package/dist/components/assets/assetsSearchDialog/form/AssetsSearchDialogForm.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { SelectOption } from '@ckbox/components';
+declare const AssetsSearchDialogFilterForm: React.FC<Props>;
+export interface Props {
+    /**
+     * Options with available categories.
+     */
+    availableCategoryOptions: SelectOption[];
+    /**
+     * Available extensions.
+     */
+    availableExtensions: SelectOption[];
+    /**
+     * Callback invoked when Cancel button is clicked.
+     */
+    onCancel: () => void;
+    /**
+     * Callback invoked when Search button is clicked.
+     */
+    onSearch: () => void;
+}
+export default AssetsSearchDialogFilterForm;

package/dist/components/assets/assetsSearchDialog/form/index.d.ts

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

package/dist/components/assets/assetsSearchDialog/index.d.ts

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

package/dist/components/assets/assetsSearchDialog/recentSearchItem/RecentSearchItem.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { SearchCriteria } from '../../../../services';
+import { ParsedCategory } from '../../../../providers';
+declare const RecentSearchItem: React.FC<Props>;
+export interface Props {
+    /**
+     * Object containing search criteria to show.
+     */
+    searchData: SearchCriteria;
+    /**
+     * Callback invoked when list item is clicked.
+     */
+    onClick: (clickedSearch: SearchCriteria) => void;
+    /**
+     * Callback invoked when delete button is clicked.
+     */
+    onDelete: (deletedSearch: SearchCriteria) => void;
+    /**
+     * List of available categories.
+     */
+    categoriesData: ParsedCategory[];
+}
+export default RecentSearchItem;

package/dist/components/assets/assetsSearchDialog/recentSearchItem/index.d.ts

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

package/dist/components/assets/assetsSearchDialog/utils.d.ts

@@ -0,0 +1,82 @@
+import { SelectOption } from '@ckbox/components';
+import { useTranslation } from '@ckbox/i18n';
+import { PredefinedDateMode, SearchCriteria } from '../../../services';
+import { AssetSearchDialogProps } from './types';
+import { ParsedCategory } from '../../../providers';
+declare type TFn = ReturnType<typeof useTranslation>['t'];
+/**
+ * Creates handler for toggling value in Select component with multiple values.
+ *
+ * @param onChange form's onChange callback
+ * @param value current enabled values
+ */
+export declare const createMultiSelectToggleHandler: (onChange: (value: SelectOption[]) => void, value: SelectOption[]) => (toggled: SelectOption) => void;
+/**
+ * Creates handler for toggling value in Select component with single value.
+ *
+ * @param onChange form's onChange callback
+ */
+export declare const createSingleSelectToggleHandler: (onChange: (value: SelectOption) => void) => (toggled: SelectOption) => void;
+/**
+ * Joins labels of given SelectOption objects
+ *
+ * @param options options to join
+ */
+export declare const joinLabels: (options: SelectOption[]) => string;
+/**
+ * Adds all unselected extensions belonging to a given group.
+ *
+ * @param extensions current selected extensions
+ * @param fixedExtensions extensions to add
+ */
+export declare const mergeExtensions: (extensions: SelectOption[], fixedExtensions: SelectOption[]) => SelectOption[];
+/**
+ * Removes all selected extensions belonging to a given group.
+ *
+ * @param extensions current selected extensions
+ * @param fixedExtensions extensions to remove
+ */
+export declare const removeExtensions: (extensions: SelectOption[], fixedExtensions: SelectOption[]) => SelectOption[];
+/**
+ * Checks if all extensions belonging to a given group, are selected.
+ *
+ * @param extensions current selected extensions
+ * @param fixedExtensions extensions to check
+ */
+export declare const checkBtnActive: (extensions: SelectOption[], fixedExtensions: SelectOption[]) => boolean;
+/**
+ * Retrieves category name for given category id.
+ *
+ * @param id id to check
+ * @param categoriesData list of all categories
+ */
+export declare const getCategoryNameForId: (id: string, categoriesData: ParsedCategory[]) => string | undefined;
+/**
+ * Gets translated label for specific predefined date mode.
+ *
+ * @param dateMode predefined date mode
+ * @param t translation function
+ */
+export declare const getTranslatedPredefinedDate: (dateMode: PredefinedDateMode, t: TFn) => string;
+/**
+ * Builds a multi line message describing properties of a given search criteria object.
+ *
+ * @param searchData search criteria data
+ * @param t translation
+ * @param categoryNames readable names of categories
+ */
+export declare const buildTooltipMessage: (searchData: SearchCriteria, t: TFn, categoryNames?: string[]) => string;
+/**
+ * Builds form's state object from given SearchFilters.
+ *
+ * @param apiSearchPayload search filters object
+ * @param availableCategories all available categories
+ */
+export declare const buildFormStateFromPayload: (apiSearchPayload: SearchCriteria, availableCategories: SelectOption[], availableExtensions: SelectOption[]) => AssetSearchDialogProps;
+/**
+ * Builds SearchFilters object from given form's state.
+ *
+ * @param data form state object
+ */
+export declare const buildPayloadFromFormState: (data: AssetSearchDialogProps) => SearchCriteria;
+export {};

package/dist/components/assets/assetsSelection/index.d.ts

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

package/dist/components/assets/assetsSelection/useAssetsSelection.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { SelectionAreaCoords } from '@ckbox/components';
+import { ParsedAsset } from '../../../providers';
+export declare const useAssetsSelection: (assets: ParsedAsset[]) => {
+    containerEl: HTMLDivElement | null;
+    createSetAssetRef: (id: string) => (element: HTMLDivElement | null) => void;
+    onContainerKeyDown: (evt: {
+        readonly key: string;
+        readonly code: string;
+        readonly ctrlKey: boolean;
+        readonly metaKey: boolean;
+        readonly shiftKey: boolean;
+        readonly altKey: boolean;
+        preventDefault: () => void;
+        stopPropagation: () => void;
+    }) => void;
+    onContainerMouseDown: (evt: React.MouseEvent<HTMLElement>) => void;
+    onSelectionAreaChange: (area: SelectionAreaCoords) => void;
+    selectedAssets: Set<string>;
+    selectRange: (id: string) => void;
+    selectSingle: (id: string) => void;
+    selectSingleWithFocus: (id: string) => void;
+    setContainerEl: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
+    toggleSelection: (id: string) => void;
+};

package/dist/components/assets/constants/constants.d.ts

@@ -0,0 +1,13 @@
+import { DocIconName } from '@ckbox/components';
+/**
+ * Selector for identifying asset tiles.
+ */
+export declare const ASSET_TILE_SELECTOR = "[data-gallery-item]";
+/**
+ * Thumbnail of the following resolutions will be shown as asset image preview.
+ */
+export declare const THUMBNAIL_BREAKPOINTS: number[];
+/**
+ * For the following extensions a predefined fallback icon will be shown.
+ */
+export declare const DOC_ICONS: Record<string, DocIconName>;

package/dist/components/assets/constants/index.d.ts

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

package/dist/components/assets/displayOptions/DisplayOptions.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { ApiSortingOrder } from '../../../services';
+declare const DisplayOptions: React.FC<Props>;
+export interface Props {
+    /**
+     * Assets to show per page.
+     */
+    assetsPerPage: number;
+    /**
+     * Available options of assets per page.
+     */
+    assetsPerPageOptions: {
+        label: string;
+        onSelect: () => void;
+    }[];
+    /**
+     * Allows cover mode for thumbnails.
+     */
+    allowCover: boolean;
+    /**
+     * Callback invoked if "Keep Aspect Ratio" option changes.
+     */
+    onCoverModeToggle: () => void;
+    /**
+     * Callback invoked if preferred thumb size changes.
+     */
+    onThumbSizeChange: (thumbSize: number) => void;
+    /**
+     * Label of the current sort option.
+     */
+    sort?: string;
+    /**
+     * Order of the current sort option.
+     */
+    sortOrder?: ApiSortingOrder;
+    /**
+     * Callback invoked when sort order changes.
+     */
+    onSortOrderToggle?: () => void;
+    /**
+     * Available sort options.
+     *
+     * List of available options depends on category type.
+     * Regular categories have different options than Recent pseudo-category.
+     */
+    sortOptions?: {
+        label: string;
+        onSelect: () => void;
+    }[];
+    /**
+     * Indicates how zoomed the assets are. Pass a relative value in range 0 .. 1.
+     */
+    thumbSize: number;
+}
+export default DisplayOptions;

package/dist/components/assets/displayOptions/index.d.ts

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

package/dist/components/assets/index.d.ts

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

package/dist/components/assets/loader/GalleryLoader.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+declare const GalleryLoader: React.FC<Props>;
+export interface Props {
+    /**
+     * Assets to show per page.
+     */
+    assetsPerPage: number;
+    /**
+     * Specifies the estimated number of assets.
+     */
+    estimatedTotalAssetsCount?: number;
+    /**
+     * Specifies the estimated number of pages.
+     */
+    estimatedTotalPagesCount?: number;
+    /**
+     * Current page number for pagination.
+     */
+    pageNumber: number;
+    /**
+     * Represents relative size of a thumb.
+     */
+    thumbSize: number;
+}
+export default GalleryLoader;

package/dist/components/assets/loader/index.d.ts

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

package/dist/components/assets/loader/useLoader.d.ts

@@ -0,0 +1,14 @@
+/**
+ * This hook encapsulates logic related to toggling loading effects.
+ *
+ * A primary loading effect is the one associated with loading initial data.
+ * A secondary loading effect is associated with loading subsequent pages of assets.
+ *
+ * @param isInitDataLoading flag indicating if initial data load is in progress
+ * @param isNextDataLoading flag indicating if subsequent data load is in progress
+ * @returns flags for toggling loading effects
+ */
+export declare const useLoader: (isInitDataLoading: boolean, isNextDataLoading: boolean) => {
+    showPrimaryLoader: boolean;
+    showSecondaryLoader: boolean;
+};

package/dist/components/assets/srcSet/index.d.ts

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

package/dist/components/assets/srcSet/useSrcSet.d.ts

@@ -0,0 +1,37 @@
+interface AssetInfo {
+    /**
+     * Asset's id.
+     */
+    id: string;
+    /**
+     * Asset's original width.
+     */
+    originalWidth?: number;
+    /**
+     * Asset's original height.
+     */
+    originalHeight?: number;
+}
+/**
+ * Returns `srcSet` that can be used for constructing `srcset` attribute of `img` element.
+ *
+ * Checks for which breakpoints asset can be displayed as a cover.
+ *
+ * @param breakpoints available breakpoints
+ * @param info asset's info
+ * @returns asset's image srcSet
+ */
+export declare const useSrcSet: (breakpoints: number[], { id, originalHeight, originalWidth }: AssetInfo) => {
+    srcSet: {
+        optional: never[];
+        default: never[];
+    };
+    cover?: undefined;
+} | {
+    srcSet: {
+        optional: string[];
+        default: string[];
+    };
+    cover: Record<number, boolean>;
+};
+export {};

package/dist/components/assets/uploadIndicator/UploadIndicator.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const UploadIndicator: React.FC;
+export default UploadIndicator;

package/dist/components/assets/uploadIndicator/index.d.ts

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

package/dist/components/categoryPropertiesDrawer/CategoryPropertiesDrawer.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { CategoryIconProps, ParsedAsset } from '../../providers';
+declare const CategoryPropertiesDrawer: React.FC<Props>;
+export interface Props {
+    /**
+     * Total number of assets in the category.
+     */
+    assetsCount: number;
+    /**
+     * List of allowed extensions for the category.
+     */
+    extensions?: string[];
+    /**
+     * Properties of displayed category icon.
+     */
+    iconProps: CategoryIconProps;
+    /**
+     * Maximum allowed file size.
+     */
+    maxFileSize?: number;
+    /**
+     * Maximum allowed image resolution.
+     */
+    maxImgResolution?: number;
+    /**
+     * Category name to display.
+     */
+    name: string;
+    /**
+     * Callback invoked when drawer is closed.
+     */
+    onClose: () => void;
+    /**
+     * List of recently modified assets for the category.
+     */
+    recentlyModified?: ParsedAsset[];
+}
+export default CategoryPropertiesDrawer;

package/dist/components/categoryPropertiesDrawer/index.d.ts

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

package/dist/components/date/Date.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+/**
+ * Component responsible for displaying date in a user-friendly way in accordance with user's locale.
+ */
+declare const DateComponent: React.FC<Props>;
+export interface Props {
+    /**
+     * Date value in ISO format.
+     */
+    isoValue?: string;
+}
+export default DateComponent;

package/dist/components/date/index.d.ts

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

package/dist/components/errorContainer/ErrorContainer.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare const ErrorContainer: React.FC<Props>;
+export interface Props {
+    /**
+     * Error instance associated with this container.
+     */
+    error?: Error;
+}
+export default ErrorContainer;

package/dist/components/errorContainer/index.d.ts

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

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Assets } from './assets';
+export { default as AssetSize } from './assetSize';
+export { default as CategoryPropertiesDrawer } from './categoryPropertiesDrawer';
+export { default as Date } from './date';
+export { default as ErrorContainer } from './errorContainer';
+export { default as Notifications } from './notifications';
+export { default as TimeLeft } from './timeLeft';
+export { default as UploadButton } from './uploadButton';
+export { default as UploadDialog } from './uploadDialog';

package/dist/components/notifications/Notifications.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const Notifications: React.FC;
+export default Notifications;

package/dist/components/notifications/index.d.ts

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

package/dist/components/timeLeft/TimeLeft.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+/**
+ * Component responsible for displaying time distance in a user-friendly way.
+ *
+ * Translation message is created by concatenating multiple time unit translation messages.
+ * Such approach is usually an anti-pattern but it allows us to work around all possible permutations of multiple plurals within a single phrase.
+ */
+declare const TimeLeft: React.FC<Props>;
+export interface Props {
+    /**
+     * Time distance (in s).
+     */
+    time: number;
+}
+export default TimeLeft;

package/dist/components/timeLeft/index.d.ts

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

package/dist/components/uploadButton/UploadButton.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ParsedCategory } from '../../providers';
+declare const UploadButton: React.FC<Props>;
+export declare type Props = {
+    /**
+     * Category data.
+     */
+    category: ParsedCategory;
+};
+export default UploadButton;

package/dist/components/uploadButton/index.d.ts

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

package/dist/components/uploadDialog/UploadDialog.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const UploadDialog: React.FC;
+export default UploadDialog;

package/dist/components/uploadDialog/index.d.ts

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

package/dist/components/uploadDialog/uploadDialogFooter/UploadDialogFooter.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { UploadAsset } from '../../../providers';
+declare const UploadDialogFooter: React.FC<Props>;
+interface Props {
+    /**
+     * Upload queue.
+     */
+    queue: UploadAsset[];
+    /**
+     * Callback invoked upon clicking on abort button.
+     */
+    onAbortClick: () => void;
+    /**
+     * Callback invoked upon clicking on error counter.
+     */
+    onErrorClick: () => void;
+}
+export default UploadDialogFooter;

package/dist/components/uploadDialog/uploadDialogFooter/index.d.ts

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