jamespot-react-components 1.0.16 → 1.0.67

package/build/src/components/JRCDate/JRCDate.d.ts

@@ -1,5 +1,7 @@
+import { DateFormat } from 'utils/utils.date';
 export interface JRCDateProps {
     date?: string;
     useHumanDisplay?: boolean;
+    format?: DateFormat;
 }
 export declare const JRCDate: (props: JRCDateProps) => JSX.Element;

package/build/src/components/JRCEllipsis/JRCEllipsis.d.ts

@@ -1,5 +1,7 @@
+import { JRCTooltipProps } from '../JRCTooltip/JRCTooltip';
 export declare type JRCEllipsisProps = {
     label?: string;
     length: number;
+    position?: JRCTooltipProps['position'];
 };
-export declare const JRCEllipsis: ({ label, length }: JRCEllipsisProps) => JSX.Element;
+export declare const JRCEllipsis: ({ label, length, position }: JRCEllipsisProps) => JSX.Element;

package/build/src/components/JRCFolders/JRCFolder.d.ts

@@ -0,0 +1,3 @@
+import { JRCFolderProps } from './types';
+declare const JRCFolder: (props: JRCFolderProps) => JSX.Element;
+export { JRCFolder };

package/build/src/components/JRCFolders/JRCFolderBreadcrumb.d.ts

@@ -0,0 +1,6 @@
+import { FolderProps } from './types';
+declare const JRCFolderBreadcrumb: ({ entries, onPress, }: {
+    entries: Array<FolderProps>;
+    onPress: (entry: FolderProps) => void;
+}) => JSX.Element;
+export { JRCFolderBreadcrumb };

package/build/src/components/JRCFolders/JRCFolders.d.ts

@@ -0,0 +1,3 @@
+import { JRCFoldersProps } from './types';
+declare const JRCFolders: (props: JRCFoldersProps) => JSX.Element;
+export default JRCFolders;

package/build/src/components/JRCFolders/JRCFolders.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Story } from '@storybook/react';
+import { JRCFoldersProps } from './types';
+declare const _default: {
+    title: string;
+    component: (props: JRCFoldersProps) => JSX.Element;
+};
+export default _default;
+export declare const Folders: Story<JRCFoldersProps>;

package/build/src/components/JRCFolders/mock.folders.d.ts

@@ -0,0 +1,16 @@
+declare const rootFoldersMockup: {
+    id: number;
+    uri: string;
+    nbDocuments: number;
+    title: string;
+    type: string;
+    folderColor: string;
+}[];
+declare const foldersMockup: {
+    uri: string;
+    title: string;
+    type: string;
+    parentURI: string;
+    folderColor: string;
+}[];
+export { rootFoldersMockup, foldersMockup };

package/build/src/components/JRCFolders/types.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Props type for JRCFolders
+ * @property getBanks, optional: Override getBanks api
+ * @property getFolders, optional: Override getFolders api
+ * @property preSelect, optional: Array of preselected object
+ * @property onSelect, optional: Display a selection button
+ * @property onPress, optional: FUTURE DEV
+ * @property extendedListColumns, optional: FUTURE DEV
+ */
+export interface JRCFoldersProps {
+    getBanks?: () => Promise<any>;
+    getFolders?: () => Promise<any>;
+    preSelect?: Array<any>;
+    onSelect?: (folder: any) => void;
+    onPress?: (folder: any) => void;
+    extendedListColumns?: any;
+}
+export interface JRCFolderBreadcrumbProps {
+    color: string;
+    size: 'sm' | 'md' | 'lg';
+}
+export interface JRCFolderProps {
+    color: string;
+    size: 'sm' | 'md' | 'lg';
+}
+export declare type FolderProps = {
+    id: number | string;
+    type: 'folder' | 'rootFolder';
+    uri: string;
+    title: string;
+    folderColor?: string;
+    folders?: Array<FolderProps>;
+};

package/build/src/components/JRCIcon/JRCIcon.d.ts

@@ -3,8 +3,8 @@
  * @property name string: Name of the icon (required)
  * @property color, string, optional: icon color, one of the theme color or a hex, rgb color, default to primary
  * @property variant, string, optional: variant of the icon
-
  * @property size, optional: in px - The icon size, default set to 20px
+ * @property isMargin, optional: whether there is a horizontal margin, default to true
  * @property className, optional, className of the <i /> tag
  */
 export interface JRCIconProps {
@@ -16,7 +16,9 @@ export interface JRCIconProps {
     variant?: 'default' | 'circle' | 'square';
     /** Defined the icon's dimensions */
     size?: number;
+    /** margin */
+    isMargin?: boolean;
     className?: string;
 }
-declare const JRCIcon: ({ color, variant, name, size, className }: JRCIconProps) => JSX.Element;
+declare const JRCIcon: ({ color, variant, name, size, isMargin, className, }: JRCIconProps) => JSX.Element;
 export default JRCIcon;

package/build/src/components/JRCIconButton/JRCIconButton.d.ts

@@ -14,7 +14,7 @@ import { DataCy } from '../../types/dataAttributes';
  * @member variant?:  can be 'circle' | 'square' ;
 
  */
-export declare type JRCIconButtonProps = DataCy & {
+export declare type JRCIconButtonProps = React.ComponentPropsWithoutRef<'button'> & DataCy & {
     icon: string;
     size?: 'small' | 'medium';
     onClick?: (event?: React.MouseEvent) => void;

package/build/src/components/JRCImg/JRCImg.d.ts

@@ -18,7 +18,7 @@ import { ImgUrlProps } from './url.util';
  * @property format - format of the image (ex: png, jpeg, etc.) - default is png
  *
  * @property url - img url used in place of width, height, size, uri, recordId and type to download an image
- *
+ * @property iconColor - Toggle default icon color white/black
  * @property timestamp - date used to force an image to be downloaded from the server instead
  *                       of from the cache. The modified timestamp of the object being displayed
  *                       should be passed

package/build/src/components/JRCImg/JRCImg.stories.d.ts

@@ -3,3 +3,4 @@ import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Primary: Story<JRCImgProps>;
+export declare const FallbackUrl: Story<JRCImgProps>;

package/build/src/components/JRCImg/url.util.d.ts

@@ -24,11 +24,15 @@ declare type Format = {
 declare type Timestamp = {
     timestamp?: string | number;
 };
+declare type Args = Timestamp & {
+    iconColor?: 'white';
+};
 /**
  * @see JRCImgProps
  */
 export declare type ImgUrlProps = {
     url?: string;
+    fallbackUrl?: string;
     size?: string;
     width?: number;
     height?: number;
@@ -37,10 +41,12 @@ export declare type ImgUrlProps = {
     recordId?: string | number;
     type?: string;
     format?: string;
+    iconColor?: 'white';
     timestamp?: string | number;
 };
 export declare function getFrom(arg: Pick<ImgUrlProps, 'from'>): string;
 export declare function getTimestamp(arg: Timestamp): string;
+export declare function getArgs(arg: Args): string;
 export declare function getUri(arg: UriOrTypeId): string;
 export declare function getSize(arg: Size & WidthHeight, dpr?: number): string;
 export declare function getFormat(arg: Format): string;
@@ -57,6 +63,7 @@ export declare function getUrl(url: string): URL | undefined;
  *   - optional timestamp
  *   The final url is {from}/{size}/{uri}.{format}?_={timestamp}
  * @param arg
+ * @param dpr device pixel ratio
  */
 export declare function formatImgUrl(arg: ImgUrlProps, dpr?: number): string;
 export {};

package/build/src/components/JRCList/JRCList.d.ts

@@ -1,5 +1,15 @@
 import { Column } from 'react-table';
 import type { Orders } from 'jamespot-user-api';
+export declare type LoadMorePagination = {
+    type: 'loadMore';
+    end: boolean;
+};
+export declare type PaginationPagination = {
+    type?: 'pagination';
+    page: number;
+    perPage: number;
+    nbResults: number;
+};
 /**
  * Props type for JRCList
  * @member columns default react-table column props
@@ -16,16 +26,10 @@ export declare type JRCListProps<T extends Record<string, unknown>> = {
         onSort?: (orders: Orders) => void;
         onPage?: (page: number) => void;
     };
-    config: {
-        manualSortBy: boolean;
-        draggable: boolean;
-        pagination?: {
-            type?: string;
-            end?: boolean;
-            page: number;
-            perPage: number;
-            nbResults: number;
-        };
+    config?: {
+        manualSortBy?: boolean;
+        draggable?: boolean;
+        pagination?: LoadMorePagination | PaginationPagination;
     };
     className?: string;
 };

package/build/src/components/JRCList/JRCList.styles.d.ts

@@ -10,7 +10,6 @@ export declare const Tr: import("styled-components").StyledComponent<"tr", any,
 }, never>;
 export declare const Td: import("styled-components").StyledComponent<"td", any, {}, never>;
 export declare const LoadMore: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LoadMoreButton: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare type DraggableTBodyProps = {
     draggable: boolean;
     children: Array<JSX.Element>;

package/build/src/components/JRCMenuItem/JRCMenuItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare const VerticalItemFlex: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const JRCDefaultIconVerticalItem: import("styled-components").StyledComponent<({ color, variant, name, size, className }: import("../JRCIcon/JRCIcon").JRCIconProps) => JSX.Element, any, {}, never>;
+export declare const JRCDefaultIconVerticalItem: import("styled-components").StyledComponent<({ color, variant, name, size, isMargin, className, }: import("../JRCIcon/JRCIcon").JRCIconProps) => JSX.Element, any, {}, never>;
 export interface ItemProps {
     isActive: boolean;
 }

package/build/src/components/JRCModal/JRCModal.d.ts

@@ -12,6 +12,7 @@ export interface JRCModalButtonType extends ComponentPropsWithoutRef<'button'> {
     variant?: 'contained' | 'outlined';
     isClosed?: boolean;
     clickHandler?: () => void;
+    dataCy?: string;
 }
 /**
  * Interface for JRCModal props

package/build/src/components/JRCModal/JRCModal.stories.d.ts

@@ -1,9 +1,5 @@
-/// <reference types="react" />
 import { JRCModalProps } from './JRCModal';
 import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const SkeletonModal: Story<JRCModalProps>;
-export declare const fullModal: Story<JRCModalProps>;
-export declare const ShowAndHideModal: (args: JRCModalProps) => JSX.Element;
-export declare const ShowAndHideAndClickOutsideModal: (args: JRCModalProps) => JSX.Element;
+export declare const Modal: Story<JRCModalProps>;

package/build/src/components/JRCModalImg/JRCModalImg.d.ts

@@ -1,4 +1,5 @@
 import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { DataCy } from '../../types/dataAttributes';
 /**
  * Interface to provide Modal Buttons
  * @member color button color "primary" | "red" | "green" | "grey"
@@ -7,13 +8,13 @@ import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
  * @member children default ReactNode children in the Modal content
  * @member variant optional style button "contained" | "outlined"
  */
-export interface JRCModalImgButtonType extends ComponentPropsWithoutRef<'button'> {
+export declare type JRCModalImgButtonType = ComponentPropsWithoutRef<'button'> & DataCy & {
     children: ReactNode;
     color?: 'primary' | 'valid' | 'danger';
     variant?: 'contained' | 'outlined';
     isClosed?: boolean;
     clickHandler?: (event?: React.MouseEvent) => void;
-}
+};
 /**
  * Interface for JRCModal props
  * @member open boolean that open or close the Modal
@@ -22,9 +23,9 @@ export interface JRCModalImgButtonType extends ComponentPropsWithoutRef<'button'
  * @member title optional string (header content) if hasHeader= true
  * @member showIconClose boolean to show/hide the close (x) button of the Modal
  * @member children default ReactNode children in the Modal content
- * @member alignContent content's align, default:flex-start
- * @member img path image type string
+ * @member img src & alt attributes
  * @member size modal max height
+ * @member className use for overriding the styled-components styles
  */
 export interface JRCModalImgProps {
     open: boolean;
@@ -33,8 +34,11 @@ export interface JRCModalImgProps {
     children?: ReactNode;
     title?: string;
     showIconClose?: boolean;
-    img: string;
-    alignContent?: 'flex-start' | 'center' | 'flex-end';
+    img: {
+        src: string;
+        alt?: string;
+    };
+    className?: string;
 }
-declare const JRCModalImg: ({ open, closeHandler, buttons, children, title, showIconClose, img, alignContent, }: JRCModalImgProps) => JSX.Element | null;
+declare const JRCModalImg: ({ open, closeHandler, buttons, children, title, showIconClose, img, className, }: JRCModalImgProps) => JSX.Element | null;
 export default JRCModalImg;

package/build/src/components/JRCModalImg/JRCModalImg.stories.d.ts

@@ -4,4 +4,4 @@ import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const SkeletonModal: Story<JRCModalImgProps>;
-export declare const ShowAndHideModal: (args: JRCModalImgProps) => JSX.Element;
+export declare const ShowAndHideModal: () => JSX.Element;

package/build/src/components/JRCModalImg/JRCModalImg.styles.d.ts

@@ -1,15 +1,7 @@
 export declare const JRCModalBox: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const JRCModalContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-/**
- * Type for align content
- * @member align left: 'flex-start' | align center: 'center' | align right: 'flex-end'
- */
-declare type AlignProps = {
-    align?: 'flex-start' | 'center' | 'flex-end';
-};
-export declare const JRCModalContent: import("styled-components").StyledComponent<"div", any, AlignProps, never>;
+export declare const JRCModalContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const JRCModalFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const JRCModalClose: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ImgContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export {};

package/build/src/components/JRCPagination/JRCPagination.stories.d.ts

@@ -2,7 +2,4 @@ import { JRCPaginationProps } from './JRCPagination';
 import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const PaginationFirst: Story<JRCPaginationProps>;
-export declare const PaginationFirstBis: Story<JRCPaginationProps>;
-export declare const PaginationMiddle: Story<JRCPaginationProps>;
-export declare const PaginationFinal: Story<JRCPaginationProps>;
+export declare const Pagination: Story<JRCPaginationProps>;

package/build/src/components/JRCTabs/JRCTabs.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { DataCy } from '../../types/dataAttributes';
 export interface ItemProps {
     isActive: boolean;
 }
@@ -6,7 +7,7 @@ export declare const VerticalWrapper: import("styled-components").StyledComponen
 export declare const VerticalItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const ItemButton: import("styled-components").StyledComponent<"button", any, ItemProps, never>;
 export declare const VerticalItemFlex: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const JRCDefaultIconVerticalItem: import("styled-components").StyledComponent<({ color, variant, name, size, className }: import("../JRCIcon/JRCIcon").JRCIconProps) => JSX.Element, any, {}, never>;
+export declare const JRCDefaultIconVerticalItem: import("styled-components").StyledComponent<({ color, variant, name, size, isMargin, className, }: import("../JRCIcon/JRCIcon").JRCIconProps) => JSX.Element, any, {}, never>;
 /**
  * Interface of a single Menu Item  props
  * @member label label of the tag
@@ -22,18 +23,18 @@ export interface ItemEntriesProps {
  * @member direction direction of tab to horizontal or vertical
  * @member callback tab selection handler
  */
-export interface JRCTabsProps {
+export declare type JRCTabsProps = DataCy & {
     entries?: ItemEntriesProps[];
     activeItem?: string;
     direction: 'horizontal' | 'vertical';
     callback: (key: string) => void;
-}
+};
 /**
  *
  * @param {entries, activeItem, direction} props, @see JRCTabsProps interface
  * @returns JSX.Element
  */
-export declare const JRCTabs: ({ entries, activeItem, direction, callback }: JRCTabsProps) => JSX.Element;
+export declare const JRCTabs: ({ entries, activeItem, direction, callback, dataCy, }: JRCTabsProps) => JSX.Element;
 /**
  * Interface to provide JRCTabPanel props
  * @member active whether the tab is active

package/build/src/components/JRCTabs/JRCTabs.stories.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
     title: string;
-    component: ({ entries, activeItem, direction, callback }: import("./JRCTabs").JRCTabsProps) => JSX.Element;
+    component: ({ entries, activeItem, direction, callback, dataCy, }: import("./JRCTabs").JRCTabsProps) => JSX.Element;
 };
 export default _default;
 export declare const TabHorizontal: () => JSX.Element;

package/build/src/components/JRCTag/JRCTag.d.ts

@@ -13,19 +13,22 @@ import { UriOrTypeId } from 'components/Form/Common/types';
  * @member focusable - whether the element is focusable. Independant of onClick property
  * @member isFocused - whether the element is focused. Property used with variant for styling the component
  * @member tooltipDescription - if present, show a tooltip with the description
+ * @member alt - alt attribute
+ * @member fallbackUrl - url loaded if the uri leads to an undefined image
  * @member clickVariant - whether the hover/focus style is a selectable item or a deletable item
  */
 export declare type JRCTagProps<T> = UriOrTypeId & {
     collapsed?: boolean;
     label?: string;
     value?: T;
-    onClick?: (e: React.MouseEvent, value: T) => void;
+    onClick?: (e: React.MouseEvent, value?: T) => void;
     onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
     variant?: 'circle' | 'square';
     focusable?: boolean;
     isFocused?: boolean;
     tooltipDescription?: string;
     alt?: string;
+    fallbackUrl?: string;
     clickVariant?: 'select' | 'delete';
 };
 export declare function JRCTag<T>(props: JRCTagProps<T>): JSX.Element;

package/build/src/components/JRCTooltip/JRCTooltip.d.ts

@@ -8,6 +8,7 @@ import * as React from 'react';
  * @member closeButton: boolean, optional: Add a close button to the tooltip
  * @member button: @see JRCButtonProps, optional: Add a button to the tooltip
  * @member position: optional, "top" | "bottom" | "left" | "right": Chose the placement of the tooltip
+ * @member className: optional, overwrite span wrapper style
  */
 export interface JRCTooltipProps {
     children: React.ReactNode;
@@ -21,6 +22,8 @@ export interface JRCTooltipProps {
     button?: JRCButtonProps;
     /** Chose the placement of the tooltip */
     position?: 'top' | 'bottom' | 'left' | 'right';
+    /** overwrite span wrapper style */
+    className?: string;
 }
 export declare const JRCTooltip: (props: JRCTooltipProps) => JSX.Element;
 export default JRCTooltip;

package/build/src/components/Templates/JRCAppColumn.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { JRCAppColumnProps } from './template.type';
+export declare function JRCAppColumn({ description, activeTab, tabs, ...props }: JRCAppColumnProps): JSX.Element;

package/build/src/components/Templates/JRCAppTab.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { Closing, JRCAppTabProps, JRCAppTabsProps, Open } from './template.type';
+export declare function JRCAppTab({ label, active, icon, onClick, href, target, open, closing }: JRCAppTabProps): JSX.Element;
+export declare function JRCAppTabs({ tabs, activeTab, ...props }: JRCAppTabsProps & Open & Closing): JSX.Element;

package/build/src/components/Templates/JRCColumn.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { JRCColumnProps } from './template.type';
+export declare function JRCColumn({ children, ...props }: JRCColumnProps): JSX.Element;

package/build/src/components/Templates/JRCContainer.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { JRCContainerProps } from './template.type';
+export declare function JRCContainer({ children, ...props }: JRCContainerProps): JSX.Element;

package/build/src/components/Templates/JRCMainColumn.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { JRCMainColumnProps } from './template.type';
+export declare function JRCMainColumn({ children, ...props }: JRCMainColumnProps): JSX.Element;

package/build/src/components/Templates/JRCTemplate.stories.d.ts

@@ -1,13 +1,5 @@
-import React from 'react';
-import { JRCTemplateBaseProps } from './JRCBase.template';
-import { Story } from '@storybook/react';
-import { JRCTemplateTwoColumnsProps } from './JRCTwoColumns.template';
-declare const _default: {
-    title: string;
-    component: React.FC<any>;
-};
+import { Meta, Story } from '@storybook/react';
+import { JRCAppColumnProps } from './template.type';
+declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const BaseTemplateDemo: Story<JRCTemplateBaseProps>;
-export declare const BaseTemplateDemoLoading: Story<JRCTemplateBaseProps>;
-export declare const TemplateWithLeftColumnDemo: Story<JRCTemplateTwoColumnsProps<any>>;
-export declare const TemplateWithLeftColumnDemoLoading: Story<JRCTemplateTwoColumnsProps<any>>;
+export declare const Primary: Story<JRCAppColumnProps>;