@agilekit/ui 0.1.0-alpha.2 → 0.1.0-alpha.21

package/lib/src/components/Button/Button.d.ts

@@ -16,6 +16,7 @@ export interface IButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     type?: 'button' | 'submit' | 'reset';
     ariaLabel?: string;
     startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
     onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
 }
 declare const Button: React.FC<IButtonProps>;

package/lib/src/components/IconButton/IconButton.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export type IconButtonVariant = 'basic' | 'primary' | 'success' | 'danger' | 'subtle';
+export type IconButtonSize = 'small' | 'medium' | 'large' | 'xlarge';
+export interface IIconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'children'> {
+    ariaLabel: string;
+    icon: React.ReactNode;
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+}
+declare const IconButton: React.FC<IIconButtonProps>;
+export default IconButton;

package/lib/src/components/IconButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default as IconButton } from './IconButton';
+export type { IIconButtonProps, IconButtonSize, IconButtonVariant } from './IconButton';

package/lib/src/components/IconButton/tests/IconButton.test.d.ts

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

package/lib/src/components/InputDuration/InputDuration.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { IInputDurationProps } from './InputDuration.types';
+export type { DurationValue, IInputDurationProps } from './InputDuration.types';
+declare const InputDuration: React.FC<IInputDurationProps>;
+export default InputDuration;

package/lib/src/components/InputDuration/InputDuration.styles.d.ts

@@ -0,0 +1 @@
+export declare const useInputDurationStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"divider" | "root" | "helperText" | "secondaryLabel" | "inputLabel" | "inputLabelFocused" | "asteriskRequired" | "inputContainer" | "inputContainerFocus" | "inputContainerDisabled" | "inputContainerError" | "sizeMd" | "sizeSm" | "segmentContainer" | "iconWrapper" | "iconMd" | "iconSm" | "numberContainer" | "numberInput" | "numberInputDisabled" | "unitLabel">;

package/lib/src/components/InputDuration/InputDuration.types.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { BasicTextFieldProps } from '../TextField';
+export interface DurationValue {
+    hours: number | '';
+    minutes: number | '';
+}
+export interface IInputDurationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'onBlur' | 'onFocus'>, BasicTextFieldProps {
+    value?: DurationValue;
+    onChange?(value: DurationValue): void;
+    size?: 'md' | 'sm';
+    name?: string;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}

package/lib/src/components/InputDuration/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './InputDuration';
+export type { DurationValue, IInputDurationProps } from './InputDuration.types';

package/lib/src/components/InputDuration/tests/InputDuration.test.d.ts

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

package/lib/src/components/MultiTextField/MultiTextField.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BasicTextFieldProps } from '../TextField/TextField';
+import { BasicTextFieldProps } from '../TextField';
 interface Option {
     readonly label: string;
     readonly value: string;

package/lib/src/components/MultiselectGroup/MultiselectGroup.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface MultiselectGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: string[];
+    selectedItems?: string[];
+    consolidated?: boolean;
+    collapsed?: boolean;
+    onSelectionChange?: (newSelected: string[]) => void;
+    isRange?: boolean;
+    disabled?: boolean;
+    'data-testid'?: string;
+}
+declare const MultiselectGroup: React.FC<MultiselectGroupProps>;
+export default MultiselectGroup;

package/lib/src/components/MultiselectGroup/MultiselectGroup.test.d.ts

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

package/lib/src/components/MultiselectGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './MultiselectGroup';
+export type { MultiselectGroupProps } from './MultiselectGroup';

package/lib/src/components/NumberStepper/NumberStepper.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { NumberStepperProps } from './NumberStepper.types';
+export type { NumberStepperProps, NumberStepperValue } from './NumberStepper.types';
+declare const NumberStepper: React.FC<NumberStepperProps>;
+export default NumberStepper;

package/lib/src/components/NumberStepper/NumberStepper.styles.d.ts

@@ -0,0 +1 @@
+export declare const useNumberStepperStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"input" | "root" | "helperText" | "secondaryLabel" | "inputLabel" | "inputLabelFocused" | "asteriskRequired" | "inputContainer" | "inputContainerFocus" | "inputContainerDisabled" | "inputContainerError" | "inputDisabled" | "sizeMd" | "sizeSm" | "actionButton" | "actionButtonLeft" | "actionButtonRight" | "actionButtonLeftMd" | "actionButtonRightMd" | "actionButtonSm" | "actionButtonDisabled" | "actionIconMd" | "actionIconSm" | "valueSegment" | "valueSegmentMd" | "valueSegmentSm" | "valueSegmentFocus" | "valueSegmentDisabled">;

package/lib/src/components/NumberStepper/NumberStepper.types.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { BasicTextFieldProps } from '../TextField';
+export type NumberStepperValue = number | '';
+export interface NumberStepperProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'onBlur' | 'onFocus'>, BasicTextFieldProps {
+    value?: NumberStepperValue;
+    defaultValue?: NumberStepperValue;
+    onValueChange?(nextValue: NumberStepperValue): void;
+    onChange?(event: React.ChangeEvent<HTMLInputElement>): void;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: 'md' | 'sm';
+    decrementDisabled?: boolean;
+    incrementDisabled?: boolean;
+    name?: string;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+}

package/lib/src/components/NumberStepper/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './NumberStepper';
+export type { NumberStepperProps, NumberStepperValue } from './NumberStepper.types';

package/lib/src/components/NumberStepper/tests/NumberStepper.test.d.ts

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

package/lib/src/components/SectionMessage/SectionMessage.d.ts

@@ -8,7 +8,7 @@ export interface SectionMessageAction {
     rel?: string;
 }
 export interface SectionMessageProps {
-    title: string;
+    title?: string;
     appearance?: 'information' | 'success' | 'warning' | 'error' | 'discovery';
     size?: 'small' | 'medium';
     children?: React.ReactNode;

package/lib/src/components/TextField/TextField.d.ts

@@ -1,58 +1,6 @@
 import React from 'react';
-import { NumberFormatValues } from 'react-number-format';
 import 'react-calendar/dist/Calendar.css';
-export interface BasicTextFieldProps {
-    disabled?: boolean;
-    label?: string;
-    labelHidden?: boolean;
-    secondaryLabel?: React.ReactNode;
-    error?: Error | boolean | string;
-    helperText?: React.ReactNode;
-    placeholder?: string;
-    id?: string;
-    displayRequired?: boolean;
-}
-export interface ITextFieldProps extends React.HTMLAttributes<HTMLInputElement>, BasicTextFieldProps {
-    inputRef?: any;
-    prepend?: React.ReactNode;
-    append?: React.ReactNode;
-    startAdornment?: React.ReactNode;
-    endAdornment?: React.ReactNode;
-    value?: string | number | undefined;
-    readOnly?: boolean;
-    autoFocus?: boolean;
-    autoComplete?: string;
-    focused?: boolean;
-    multiline?: boolean;
-    datePicker?: boolean;
-    dateRange?: boolean;
-    colorPicker?: boolean | number;
-    type?: string;
-    mask?: string;
-    name?: string;
-    iconLeft?: React.ReactNode;
-    iconRight?: React.ReactNode;
-    inputProps?: Record<string, any>;
-    inputSize?: 'medium' | 'large';
-    onFocus?: any;
-    onBlur?: any;
-    color?: 'primary' | 'secondary' | undefined;
-    rows?: string | number;
-    rowsMax?: string | number;
-    rowsMin?: string | number;
-    onChange?(e: React.ChangeEvent<any> | string, id?: string): void;
-    mode?: string;
-    decimalScale?: number;
-    fixedDecimalScale?: boolean;
-    allowNegative?: boolean;
-    prefix?: string;
-    suffix?: string;
-    defaultValue?: string | number;
-    isNumericString?: boolean;
-    format?: string;
-    allowEmptyFormatting?: boolean;
-    isAllowed?: (values: NumberFormatValues) => boolean;
-    locale?: string;
-}
+import type { ITextFieldProps } from './TextField.types';
+export type { BasicTextFieldProps, ITextFieldProps } from './TextField.types';
 declare const TextField: React.FC<ITextFieldProps>;
 export default TextField;

package/lib/src/components/TextField/TextField.helpers.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const createInputChangeEvent: (value: string | number, name?: string) => React.ChangeEvent<HTMLInputElement>;
+export declare const formatDatePickerValue: (value: any, dateRange: boolean, locale: string) => string;

package/lib/src/components/TextField/TextField.renderers.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { ColorResult } from 'react-color';
+interface AdornmentParams {
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    datePicker?: boolean;
+    dateRange?: boolean;
+    classes: any;
+    handlePopoverClick: (event: React.MouseEvent<any>) => void;
+}
+interface DatePickerPopoverParams {
+    open: boolean;
+    anchorEl: HTMLElement | null;
+    datePicker?: boolean;
+    dateRange?: boolean;
+    locale: string;
+    handlePopoverClose: () => void;
+    handleDatePicker: (value: any) => void;
+}
+interface ColorPickerButtonParams {
+    classes: any;
+    value?: string | number;
+    handlePopoverClick: (event: React.MouseEvent<any>) => void;
+}
+interface ColorPickerPopoverParams {
+    name?: string;
+    open: boolean;
+    anchorEl: HTMLElement | null;
+    classes: any;
+    value?: string | number;
+    colorPickerMode: 'free' | 'predefined';
+    predefinedColors?: string[];
+    handlePopoverClose: () => void;
+    handleColorPicker: (color: ColorResult) => void;
+    handlePredefinedColorPicker: (color: ColorResult) => void;
+}
+interface HelperTextParams {
+    error?: Error | boolean | string;
+    helperText?: React.ReactNode;
+    classes: any;
+}
+export declare const getTextFieldAdornments: ({ startAdornment, endAdornment, iconLeft, iconRight, datePicker, dateRange, classes, handlePopoverClick, }: AdornmentParams) => {
+    finalStartAdornment: React.ReactNode;
+    finalEndAdornment: React.ReactNode;
+};
+export declare const renderDatePickerPopover: ({ open, anchorEl, datePicker, dateRange, locale, handlePopoverClose, handleDatePicker, }: DatePickerPopoverParams) => React.ReactNode;
+export declare const renderColorPickerButton: ({ classes, value, handlePopoverClick, }: ColorPickerButtonParams) => React.ReactNode;
+export declare const renderColorPickerPopover: ({ name, open, anchorEl, classes, value, colorPickerMode, predefinedColors, handlePopoverClose, handleColorPicker, handlePredefinedColorPicker, }: ColorPickerPopoverParams) => React.ReactNode;
+export declare const renderHelperText: ({ error, helperText, classes }: HelperTextParams) => React.ReactNode;
+export {};

package/lib/src/components/TextField/TextField.styles.d.ts

@@ -12,5 +12,5 @@ interface HelperTextStyles {
 }
 export declare const inputLabelStyles: (theme: ThemeAgile) => InputLabelStyles;
 export declare const helperTextStyles: (theme: ThemeAgile) => HelperTextStyles;
-export declare const useTextFieldStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"helperText" | "secondaryLabel" | "inputBase" | "inputLabel" | "inputLabelFocused" | "asteriskRequired" | "inputContainer" | "inputContainerFocus" | "inputContainerDisabled" | "inputContainerError" | "multilineContainer" | "inputDisabled" | "inputAction" | "inputGroupAppend" | "inputBtn" | "withAppend" | "withIconLeft" | "sideIcon" | "colorPickerButton" | "colorPopover" | "withMask" | "append" | "edgeEnd">;
+export declare const useTextFieldStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"helperText" | "secondaryLabel" | "inputBase" | "inputLabel" | "inputLabelFocused" | "asteriskRequired" | "inputContainer" | "inputContainerFocus" | "inputContainerDisabled" | "inputContainerError" | "multilineContainer" | "inputDisabled" | "inputAction" | "inputGroupAppend" | "inputBtn" | "withAppend" | "withIconLeft" | "sideIcon" | "colorPickerButton" | "colorPopover" | "predefinedColorInput" | "withMask" | "append" | "edgeEnd">;
 export {};

package/lib/src/components/TextField/TextField.types.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { NumberFormatValues } from 'react-number-format';
+export interface BasicTextFieldProps {
+    disabled?: boolean;
+    label?: string;
+    labelHidden?: boolean;
+    secondaryLabel?: React.ReactNode;
+    error?: Error | boolean | string;
+    helperText?: React.ReactNode;
+    placeholder?: string;
+    id?: string;
+    displayRequired?: boolean;
+}
+export interface ITextFieldProps extends React.HTMLAttributes<HTMLInputElement>, BasicTextFieldProps {
+    inputRef?: any;
+    prepend?: React.ReactNode;
+    append?: React.ReactNode;
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    value?: string | number | undefined;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+    autoComplete?: string;
+    focused?: boolean;
+    multiline?: boolean;
+    datePicker?: boolean;
+    dateRange?: boolean;
+    colorPicker?: boolean | number;
+    colorPickerMode?: 'free' | 'predefined';
+    predefinedColors?: string[];
+    type?: string;
+    mask?: string;
+    name?: string;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    inputProps?: Record<string, any>;
+    inputSize?: 'medium' | 'large';
+    onFocus?: any;
+    onBlur?: any;
+    color?: 'primary' | 'secondary' | undefined;
+    rows?: string | number;
+    rowsMax?: string | number;
+    rowsMin?: string | number;
+    onChange?(e: React.ChangeEvent<any> | string, id?: string): void;
+    mode?: string;
+    decimalScale?: number;
+    fixedDecimalScale?: boolean;
+    allowNegative?: boolean;
+    prefix?: string;
+    suffix?: string;
+    defaultValue?: string | number;
+    isNumericString?: boolean;
+    format?: string;
+    allowEmptyFormatting?: boolean;
+    isAllowed?: (values: NumberFormatValues) => boolean;
+    locale?: string;
+}

package/lib/src/components/TextField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TextField';
+export type { BasicTextFieldProps, ITextFieldProps } from './TextField.types';

package/lib/src/components/TextField/tests/TextField.test.d.ts

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

package/lib/src/components/TooltipBox/TooltipBox.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Placement } from 'popper.js';
+type TooltipBoxTrigger = 'click' | 'hover' | 'focus';
+type TooltipBoxTriggerValue = TooltipBoxTrigger | TooltipBoxTrigger[] | `${TooltipBoxTrigger} ${TooltipBoxTrigger}` | `${TooltipBoxTrigger} ${TooltipBoxTrigger} ${TooltipBoxTrigger}`;
+export type TooltipBoxTipPosition = 'none' | 'top-left' | 'top-center' | 'top-right' | 'left' | 'right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface TooltipBoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    copy?: React.ReactNode;
+    tip?: TooltipBoxTipPosition;
+    type?: 'dark' | 'light';
+    offset?: number | string;
+    children: React.ReactElement;
+    placement?: Placement;
+    isOpen?: boolean;
+    fullWidth?: boolean;
+    maxWidth?: number;
+    zIndex?: number;
+    trigger?: TooltipBoxTriggerValue;
+}
+declare const TooltipBox: React.FC<TooltipBoxProps>;
+export default TooltipBox;

package/lib/src/components/TooltipBox/index.d.ts

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

package/lib/src/index.d.ts

@@ -27,7 +27,10 @@ export { default as FileUpload, type FileUploadItemProps } from './components/Fi
 export { Gallery } from './components/Gallery/Gallery';
 export { default as Heading } from './components/Heading/Heading';
 export { default as Icon } from './components/Icon/Icon';
+export { default as IconButton } from './components/IconButton/IconButton';
 export { default as InputFile } from './components/InputFile/InputFile';
+export { default as InputDuration } from './components/InputDuration';
+export { default as NumberStepper } from './components/NumberStepper';
 export { default as Label } from './components/Label/Label';
 export { default as Labelled } from './components/Labelled/Labelled';
 export { default as Link } from './components/Link/Link';
@@ -35,6 +38,7 @@ export { default as Loader } from './components/Loader/Loader';
 export { default as Modal } from './components/Modal/Modal';
 export { default as MultiTextField } from './components/MultiTextField/MultiTextField';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect';
+export { default as MultiselectGroup } from './components/MultiselectGroup/MultiselectGroup';
 export { default as Navigation } from './components/Navigation/Navigation';
 export { default as Image } from './components/Image/Image';
 export { default as OutsideClickDetector } from './components/OutsideClickDetector/OutsideClickDetector';
@@ -49,6 +53,7 @@ export { default as Select } from './components/Select/Select';
 export { default as Skeleton } from './components/Skeleton/Skeleton';
 export { default as Slider } from './components/Slider/Slider';
 export { default as Switch } from './components/Switch/Switch';
+export { default as TooltipBox } from './components/TooltipBox/TooltipBox';
 export { default as Text } from './components/Text/Text';
 export { default as TableList } from './components/TableList/TableList';
 export { default as TableListCell } from './components/TableList/components/Cell/Cell';
@@ -59,10 +64,11 @@ export { default as TableListRow } from './components/TableList/components/Table
 export { default as TopBar } from './components/TopBar/TopBar';
 export { default as Tabs } from './components/Tabs/Tabs';
 export { default as Tag } from './components/Tag/Tag';
-export { default as TextField } from './components/TextField/TextField';
+export { default as TextField } from './components/TextField';
 export { default as UnstyledLink } from './components/UnstyledLink/UnstyledLink';
 export { default as SpinnerCube } from './components/SpinnerCube/SpinnerCube';
 export { default as StatusInline } from './components/StatusInline/StatusInline';
+export type { IIconButtonProps, IconButtonSize, IconButtonVariant } from './components/IconButton/IconButton';
 export type { IStepType } from './components/ProgressIndicator/ProgressIndicator';
 export type { ThemeAgile } from './Theme';
 export { default as defaultTheme, themeObject } from './Theme';

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@agilekit/ui",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.21",
   "description": "Agile's product component library",
   "author": "Michael de Lima Alves <michaelalves@outlook.com>",
   "license": "MIT",
   "main": "lib/index",
+  "style": "lib/index.css",
   "types": "lib/src/index.d.ts",
-  "source": "src/index.ts",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
   "files": [
     "/lib",
     "/src/assets",
@@ -62,7 +66,6 @@
     "react-color": "^2.19.3",
     "react-dom": "18.2.0",
     "react-multi-select-component": "^4.2.3",
-    "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.3",
     "react-select": "^5.4.0"
   },
@@ -115,10 +118,12 @@
     "jest": "^29.5.0",
     "jest-axe": "^7.0.1",
     "jest-environment-jsdom": "^29.5.0",
+    "mini-css-extract-plugin": "^2.10.0",
     "postcss-loader": "^7.1.0",
     "prettier": "^2.8.4",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-hook-form": "^7.57.0",
+    "react-router-dom": "^5.1.2",
     "react-input-mask": "^2.0.4",
     "react-number-format": "^4.9.1",
     "sass-loader": "^13.2.0",

package/src/components/utils/breakpoints.ts

@@ -1,3 +1,7 @@
+/**
+ * @file utils/breakpoints.ts
+ * @description Source module for `utils/breakpoints`.
+ */
 export const Breakpoints = {
   mobileXS: 374,
   // tslint:disable-next-line:object-literal-sort-keys

package/src/components/utils/browser.ts

@@ -1,3 +1,7 @@
+/**
+ * @file utils/browser.ts
+ * @description Source module for `utils/browser`.
+ */
 const isIE = (): boolean => {
   const ua = window.navigator.userAgent;
 

package/src/components/utils/findParentBySelector.ts

@@ -1,3 +1,7 @@
+/**
+ * @file utils/findParentBySelector.ts
+ * @description Source module for `utils/findParentBySelector`.
+ */
 function collectionHas(a, b) {
   for (let i = 0, len = a.length; i < len; i++) {
     if (a[i] === b) {

package/src/components/utils/idGenerator.ts

@@ -1,3 +1,7 @@
+/**
+ * @file utils/idGenerator.ts
+ * @description Source module for `utils/idGenerator`.
+ */
 export const idGenerator = (prefix: string | number): (() => string) => {
   let index = 1;
   return () => '' + prefix + index++;

package/src/components/utils/index.ts

@@ -1,3 +1,7 @@
+/**
+ * @file utils/index.ts
+ * @description Public exports for the `utils` component module.
+ */
 export { Breakpoints } from './breakpoints';
 export { idGenerator } from './idGenerator';
 export { setNativeValue } from './setNativeValue';

package/src/components/utils/setNativeValue.ts

@@ -1,3 +1,7 @@
+/**
+ * @file utils/setNativeValue.ts
+ * @description Source module for `utils/setNativeValue`.
+ */
 export function setNativeValue(element: any, value: any): void {
   const { set: valueSetter } = Object.getOwnPropertyDescriptor(element, 'value') || { set: undefined };
   const prototype = Object.getPrototypeOf(element);

package/lib/src/components/FileUpload/FileUpload.stories.d.ts

@@ -1,14 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import FileUploadItem, { FileUploadItemProps } from './FileUpload';
-declare const meta: Meta<typeof FileUploadItem>;
-export default meta;
-type Story = StoryObj<FileUploadItemProps>;
-export declare const InProgress: Story;
-export declare const Completed: Story;
-export declare const Error: Story;
-export declare const ClickToView: Story;
-export declare const ImageInProgress: Story;
-export declare const ImageCompleted: Story;
-export declare const ImageWithoutProgress: Story;
-export declare const DraggableImage: Story;
-export declare const AllStatesDemo: Story;