jamespot-react-components 1.0.0

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

@@ -0,0 +1,6 @@
+export interface JRCAppHeaderProps {
+    icon: string;
+    color: string;
+    title: string;
+    description: string;
+}

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

@@ -0,0 +1,29 @@
+import { JRCImgProps } from '../JRCImg/JRCImg';
+/**
+ * Props type for JRCAvatar
+ * @see JRCImgProps
+ * /!\ It is not recommended to use the url property as it will result in overriding
+ * the default image size
+ *
+ * @property size, multiple of 8px - The avatar image is downloaded
+ *         with a size twice of the circle/square container in order to make it clear
+ *         in retina like screens. default: xs
+ * @property variant, optional 'circle' | 'square' - default: circle
+ * @property focusable - whether the element is focusable. Independent of onClick property
+ * @property subAvatar - represent a miniature avatar on the bottom right corner
+ * @property className - className passed to the div wrapper
+ * @property cssColor - background-color
+ * @property from - image base url (imagestatic | imagecache)
+ */
+export declare type JRCAvatarProps = Omit<JRCImgProps, 'size' | 'width' | 'height' | 'alt'> & {
+    uri?: string;
+    size?: number;
+    variant?: 'circle' | 'square';
+    focusable?: boolean;
+    subAvatar?: Omit<JRCImgProps, 'size' | 'width' | 'height'>;
+    className?: string;
+    cssColor?: string;
+    alt?: string;
+};
+declare const JRCAvatar: (props: JRCAvatarProps) => JSX.Element;
+export default JRCAvatar;

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

@@ -0,0 +1,5 @@
+import { JRCAvatarProps } from './JRCAvatar';
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<JRCAvatarProps>;

package/build/src/components/JRCAvatar/JRCAvatar.test.d.ts

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

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { JRCIconProps } from '../JRCIcon/JRCIcon';
+import { DataCy } from '../../types/dataAttributes';
+export declare type JRCButtonProps = React.ComponentPropsWithoutRef<'button'> & DataCy & {
+    /** Color of the background of the button */
+    color?: 'primary' | 'valid' | 'danger' | 'secondary';
+    /** Indicates loading of content on the button */
+    loader?: boolean;
+    /** This Boolean attribute specifies that the button should have input focus when the page loads */
+    autofocus?: boolean;
+    /** Defines the value associated with the button’s name when it’s submitted with the form data */
+    value?: string;
+    /** Enhance your button with an icon */
+    icon?: string;
+    /** The variant is used to define what type of action the button will take */
+    variant?: 'contained' | 'outlined';
+    /** CSS float attribute */
+    float?: 'left' | 'right';
+    /** CSS min-width attribute */
+    minWidth?: string;
+};
+export declare const transformColor: (color?: string | undefined) => JRCIconProps['color'];
+declare const JRCButton: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & DataCy & {
+    /** Color of the background of the button */
+    color?: "primary" | "valid" | "danger" | "secondary" | undefined;
+    /** Indicates loading of content on the button */
+    loader?: boolean | undefined;
+    /** This Boolean attribute specifies that the button should have input focus when the page loads */
+    autofocus?: boolean | undefined;
+    /** Defines the value associated with the button’s name when it’s submitted with the form data */
+    value?: string | undefined;
+    /** Enhance your button with an icon */
+    icon?: string | undefined;
+    /** The variant is used to define what type of action the button will take */
+    variant?: "contained" | "outlined" | undefined;
+    /** CSS float attribute */
+    float?: "left" | "right" | undefined;
+    /** CSS min-width attribute */
+    minWidth?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default JRCButton;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { JRCButtonProps } from './JRCButton';
+import { JRCValidationButtonProps } from './JRCValidationButton';
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const CustomButton: Story<JRCButtonProps>;
+export declare const AllButtons: () => JSX.Element;
+export declare const ValidationButton: Story<JRCValidationButtonProps>;

package/build/src/components/JRCButton/JRCButton.test.d.ts

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

package/build/src/components/JRCButton/JRCButtonConfig.d.ts

@@ -0,0 +1,150 @@
+declare const _default: {
+    contained: {
+        primary: {
+            color: string;
+            background: string;
+            border: string;
+            active: {
+                background: string;
+                border: string;
+            };
+            hover: {
+                background: string;
+                border: string;
+            };
+        };
+        valid: {
+            color: string;
+            background: string;
+            border: string;
+            active: {
+                background: string;
+                border: string;
+            };
+            hover: {
+                background: string;
+                border: string;
+            };
+        };
+        danger: {
+            color: string;
+            background: string;
+            border: string;
+            active: {
+                background: string;
+                border: string;
+            };
+            hover: {
+                background: string;
+                border: string;
+            };
+        };
+        secondary: {
+            color: string;
+            background: string;
+            border: string;
+            active: {
+                background: string;
+                border: string;
+            };
+            hover: {
+                background: string;
+                border: string;
+            };
+        };
+        disabled: {
+            color: string;
+            background: string;
+            border: string;
+            active: {
+                background: string;
+                border: string;
+            };
+            hover: {
+                background: string;
+                border: string;
+            };
+        };
+    };
+    outlined: {
+        primary: {
+            color: string;
+            background: string;
+            border: string;
+            active: {
+                background: string;
+                border: string;
+            };
+            hover: {
+                background: string;
+                border: string;
+            };
+        };
+        valid: {
+            color: string;
+            background: string;
+            border: string;
+            active: {
+                background: string;
+                border: string;
+            };
+            hover: {
+                background: string;
+                border: string;
+            };
+        };
+        danger: {
+            color: string;
+            background: string;
+            border: string;
+            active: {
+                background: string;
+                border: string;
+            };
+            hover: {
+                background: string;
+                border: string;
+            };
+        };
+        secondary: {
+            color: string;
+            background: string;
+            border: string;
+            active: {
+                background: string;
+                border: string;
+            };
+            hover: {
+                background: string;
+                border: string;
+            };
+        };
+        disabled: {
+            color: string;
+            background: string;
+            border: string;
+            active: {
+                background: string;
+                border: string;
+            };
+            hover: {
+                background: string;
+                border: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare type ButtonType = {
+    color: string;
+    background: string;
+    border: string;
+    active: {
+        background: string;
+        border: string;
+    };
+    hover: {
+        background: string;
+        border: string;
+    };
+};

package/build/src/components/JRCButton/JRCValidationButton.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { JRCButtonProps } from './JRCButton';
+/**
+ * @see JRCButtonProps
+ * @member onValidationClick, optional callback called when the first click is made
+ * @member validationMessage, optional validation message, default to "Confirm / Valider"
+ */
+export declare type JRCValidationButtonProps = JRCButtonProps & {
+    onValidationClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    validationMessage?: string;
+};
+export declare const JRCValidationButton: ({ onClick, onValidationClick, children, color, variant, icon, ...props }: JRCValidationButtonProps) => JSX.Element;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+/**
+ * Interface to provide JRCMenu props
+ * @member open open menu
+ */
+export interface JRCMenuProps {
+    open?: boolean;
+}
+/**
+ * Interface to provide JRCMenu props
+ * @member color Color of the background of the button
+ * @member variant The variant is used to define what type of action the button will take
+ * @member value Defines the value associated with the button’s name when it’s submitted with the form data
+ * @member label name button
+ * @member action button action handler
+ * @member iconName name icon on button
+ */
+export interface JRCButtonDropdownProps extends React.ComponentPropsWithoutRef<'button'> {
+    color?: 'primary' | 'valid' | 'danger' | 'secondary';
+    variant?: 'contained' | 'outlined';
+    value?: string;
+    label: string;
+    action?: (event?: React.MouseEvent) => void;
+    iconName?: string;
+}
+/**
+ *
+ * @param iconName icon name
+ * @param {label, action?, color?, variant?} props, @see JRCButtonDropdownProps
+ * @returns JSX.Element
+ */
+export declare const JRCButtonDropdown: ({ iconName, variant, ...props }: JRCButtonDropdownProps) => JSX.Element;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const simple: () => JSX.Element;
+export declare const simpleWithAction: () => JSX.Element;
+export declare const AllButtonDropdown: () => JSX.Element;
+export declare const AllWithAction: () => JSX.Element;

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export declare type TVariants = 'span' | 'div';
+export declare type JRCCardProps = {
+    className?: string;
+    children: React.ReactNode;
+    variant?: TVariants;
+};
+export declare const Card: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const JRCCard: (props: JRCCardProps) => JSX.Element;

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

@@ -0,0 +1,5 @@
+import { JRCCardProps } from './JRCCard';
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<JRCCardProps>;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+/**
+ * Props type for JRCColumnCenter
+ * @member children enclosed React component
+ */
+export interface JRCColumnCenterProps {
+    children: React.ReactNode;
+}
+declare const JRCColumnCenter: (props: JRCColumnCenterProps) => JSX.Element;
+export default JRCColumnCenter;

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+/**
+ * Props type for JRCColumnCenterTitle
+ * @member title string : column title content
+ * @member children enclosed React component (rendered after the title)
+ */
+export interface JRCColumnCenterTitleProps {
+    title: string;
+    children: React.ReactNode;
+}
+declare const JRCColumnCenterTitle: (props: JRCColumnCenterTitleProps) => JSX.Element;
+export default JRCColumnCenterTitle;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+/**
+ * Props type for JRCColumnLeft
+ * @member children enclosed React component
+ */
+export interface JRCColumnLeftProps {
+    children: React.ReactNode;
+}
+declare const JRCColumnLeft: (props: JRCColumnLeftProps) => JSX.Element;
+export default JRCColumnLeft;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+/**
+ * Props type for JRCColumnRight
+ * @member children enclosed React component
+ */
+export interface JRCColumnRightProps {
+    children: React.ReactNode;
+}
+declare const JRCColumnRight: (props: JRCColumnRightProps) => JSX.Element;
+export default JRCColumnRight;

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

@@ -0,0 +1,5 @@
+export interface JRCDateProps {
+    date?: string;
+    useHumanDisplay?: boolean;
+}
+export declare const JRCDate: (props: JRCDateProps) => JSX.Element;

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

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

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface JRCDropDownProps {
+    trigger: React.ReactNode;
+    dropdown: React.ReactNode;
+    align?: 'left' | 'right';
+}
+export declare const JRCDropDown: ({ trigger, dropdown, align }: JRCDropDownProps) => JSX.Element;

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

@@ -0,0 +1,5 @@
+import { JRCDropDownProps } from './JRCDropDown';
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Simple: Story<JRCDropDownProps>;

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+/**
+ * Props type for JRCGrid
+ * @member children: enclosed React component
+ * @member cols : number of cols  "1" | "2" | "3"
+ */
+export interface JRCGridProps {
+    children: React.ReactNode;
+    cols: '1' | '2' | '3';
+}
+declare const JRCGrid: (props: JRCGridProps) => JSX.Element;
+export default JRCGrid;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: (props: import("./JRCGrid").JRCGridProps) => JSX.Element;
+};
+export default _default;
+export declare const Grid_1_col: () => JSX.Element;
+export declare const Grid_2_col_Left_Center: () => JSX.Element;
+export declare const Grid_3_col_Left_Center_Right: () => JSX.Element;

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { DataCy } from '../../types/dataAttributes';
+/**
+ * Props type for JRCLinkToArticle and JRCLinkToUser
+ * @member id number : id of the record
+ * @member href string : href for href
+ * @member children: enclosed React component
+ */
+export interface JRCLinkToProps extends JRCStyledHrefProps {
+    idObject?: number;
+    href?: string;
+    children: React.ReactNode;
+}
+/**
+ * Props type for JRCStyledHref
+ * @see HTML.a default props
+ */
+export declare type JRCStyledHrefProps = DataCy & React.ComponentPropsWithoutRef<'a'>;
+export declare const JRCStyledHref: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const JRCLinkToArticle: ({ idObject, href, children, ...props }: JRCLinkToProps) => JSX.Element;
+export declare const JRCLinkToUser: ({ idObject, href, children, ...props }: JRCLinkToProps) => JSX.Element;

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

@@ -0,0 +1,7 @@
+import { JRCStyledHrefProps, JRCLinkToProps } from './JRCHref';
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Default: Story<JRCStyledHrefProps>;
+export declare const User: Story<JRCLinkToProps>;
+export declare const Article: Story<JRCLinkToProps>;

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

@@ -0,0 +1,22 @@
+/**
+ * Props type for JRCIcon
+ * @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 className, optional, className of the <i /> tag
+ */
+export interface JRCIconProps {
+    /** Name of the icon (required) */
+    name: string;
+    /** Color */
+    color?: string;
+    /** background color */
+    variant?: 'default' | 'circle' | 'square';
+    /** Defined the icon's dimensions */
+    size?: number;
+    className?: string;
+}
+declare const JRCIcon: ({ color, variant, name, size, className }: JRCIconProps) => JSX.Element;
+export default JRCIcon;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { JRCIconProps } from './JRCIcon';
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<JRCIconProps>;
+export declare const AllIcons: () => JSX.Element;

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Colors, Shades } from 'styles/theme';
+import { JRCTooltipProps } from '../JRCTooltip/JRCTooltip';
+import { DataCy } from '../../types/dataAttributes';
+/**
+ * IconButton props
+ * @member icon icon of the button
+ * @member onClick on click callback
+ * @member name name (for form only)
+ * @member value value (for form only)
+ * @member disabled disable the button
+ * @member size size of the button, default value, set to m
+ * @member tooltip tooltip props
+ */
+export declare type JRCIconButtonProps = DataCy & {
+    icon: string;
+    size?: 'small' | 'medium';
+    onClick?: (event?: React.MouseEvent) => void;
+    name?: string;
+    value?: string;
+    disabled?: boolean;
+    type?: 'submit' | 'reset' | 'button';
+    color?: Colors | Shades | 'inherit';
+    tooltip?: Omit<JRCTooltipProps, 'children'>;
+};
+declare const defaultProps: {
+    onClick: () => void;
+    type: string;
+    size: string;
+};
+declare const JRCIconButton: {
+    (props: JRCIconButtonProps & typeof defaultProps): JSX.Element;
+    defaultProps: {
+        onClick: () => void;
+        type: string;
+        size: string;
+    };
+};
+export { JRCIconButton };

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

@@ -0,0 +1,5 @@
+import { JRCIconButtonProps } from './JRCIconButton';
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<JRCIconButtonProps>;

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

@@ -0,0 +1,34 @@
+import { ImgUrlProps } from './url.util';
+/**
+ * @see ImgUrlProps
+ * @property loading - img loading attribute - default is lazy
+ * @property alt - img alt attributes
+ *
+ * @property type - type of the record image (ex: user, fileArticle, spot, diffgroup, etc.)
+ * @property recordId - id of the record
+ * @property uri - uri of the record
+ *
+ * @property width - Width of the <img /> tag. Also used to compute the image size downloaded
+ * @property height - Height of the <img /> tag. Also used to compute the image size downloaded
+ * @property size - if the url is not provided, used to download the image at this size.
+ *                  If not provided, the size will be computed from width and height.
+ *                  /!\ This property should not be used unless the image should not be displayed
+ *                  at retina resolution for any reason.
+ *
+ * @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 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
+ *
+ * @property className - className of the <img /> tag
+ */
+export declare type JRCImgProps = ImgUrlProps & {
+    loading?: 'eager' | 'lazy';
+    alt: string;
+    className?: string;
+};
+declare const JRCImg: (props: JRCImgProps) => JSX.Element;
+export default JRCImg;

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

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

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

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

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

@@ -0,0 +1,62 @@
+import { UriOrTypeId } from 'components/Form/Common/types';
+/**
+ * @see JRCImgProps
+ */
+declare type WidthHeight = {
+    width?: number;
+    height?: number;
+};
+/**
+ * @see JRCImgProps
+ */
+declare type Size = {
+    size?: string;
+};
+/**
+ * @see JRCImgProps
+ */
+declare type Format = {
+    format?: string;
+};
+/**
+ * @see JRCImgProps
+ */
+declare type Timestamp = {
+    timestamp?: string | number;
+};
+/**
+ * @see JRCImgProps
+ */
+export declare type ImgUrlProps = {
+    url?: string;
+    size?: string;
+    width?: number;
+    height?: number;
+    from?: string;
+    uri?: string;
+    recordId?: string | number;
+    type?: string;
+    format?: string;
+    timestamp?: string | number;
+};
+export declare function getFrom(arg: Pick<ImgUrlProps, 'from'>): string | undefined;
+export declare function getTimestamp(arg: Timestamp): string;
+export declare function getUri(arg: UriOrTypeId): string;
+export declare function getSize(arg: Size & WidthHeight): string;
+export declare function getFormat(arg: Format): string;
+export declare function getUrl(url: string): URL | undefined;
+/**
+ * Format an img url
+ * If url arg is provided, it is used, in addition with an optional timestamp
+ * If not parsable or not passed, one should provide:
+ *   - optional from
+ *   - size in either size or width/height argument.
+ *     If width & height are provided, the downloaded image take car of the screen resolution
+ *   - uri or type/recordId
+ *   - optional format, default png
+ *   - optional timestamp
+ *   The final url is {from}/{size}/{uri}.{format}?_={timestamp}
+ * @param arg
+ */
+export declare function formatImgUrl(arg: ImgUrlProps): string;
+export {};

package/build/src/components/JRCImg/url.utils.test.d.ts

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