jamespot-react-components 1.0.3 → 1.0.9

package/src/components/JRCList/JRCList.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useTable, usePagination, useSortBy, UseSortByColumnProps, HeaderGroup, Column, Row, Cell } from 'react-table';
 import { FormattedMessage } from 'react-intl';
 import JRCPagination from '../JRCPagination/JRCPagination';
-import useDidMountEffect from '../../hooks/UseDidMountEffect';
+import { useDidMountEffect } from '../../hooks/UseDidMountEffect';
 import JRCIcon from '../JRCIcon/JRCIcon';
 
 import {
@@ -25,6 +25,7 @@ import type { Orders } from 'jamespot-user-api';
  * @member data default react-table data props
  * @member eventHandlers event handlers: onDrag, onSort and onPage. You Must rearrange the array of data when these events are dispatched
  * @member config config object. See the Type for use
+ * @member className className
  */
 export type JRCListProps<T extends Record<string, unknown>> = {
     columns: Array<Column<T>>;
@@ -45,6 +46,7 @@ export type JRCListProps<T extends Record<string, unknown>> = {
             nbResults: number;
         };
     };
+    className?: string;
 };
 
 export const JRCList = <T extends Record<string, unknown>>(props: JRCListProps<T>) => {
@@ -133,7 +135,7 @@ export const JRCList = <T extends Record<string, unknown>>(props: JRCListProps<T
 
     return (
         <React.Fragment>
-            <Table {...getTableProps()}>
+            <Table {...getTableProps()} className={props.className}>
                 <Thead>
                     {headerGroups.map((headerGroup) => (
                         <Tr {...headerGroup.getHeaderGroupProps()}>
@@ -162,9 +164,7 @@ export const JRCList = <T extends Record<string, unknown>>(props: JRCListProps<T
                 <TBody {...getTableBodyProps()}>
                     <DraggableTBody draggable={props.config.draggable}>
                         {rows.map((row: Row<T>, index: number): any => {
-                            if (prepareRow(row) !== undefined) {
-                                prepareRow(row);
-                            }
+                            prepareRow(row);
                             return (
                                 <DraggableTr
                                     index={index}

package/src/components/JRCList/JRCListMockData.stories.tsx

@@ -83,7 +83,7 @@ const Template: Story<never> = (/*args: JRCListProps<MyData>*/) => {
             limit: config.pagination.perPage,
             orders,
         };
-        jamespot.shortcut.getList(args).then((res: any) => {
+        jamespot.bookmark.getList(args).then((res: any) => {
             setData(res.data);
             setConfig({
                 ...config,

package/src/components/JRCModal/JRCModal.styles.tsx

@@ -63,12 +63,6 @@ export const JRCModalHeader = styled.div`
     justify-content: space-between;
 `;
 
-export const JRCModalHeaderTitle = styled.div`
-    display: flex;
-    flex-direction: row;
-    flex: 1;
-`;
-
 export const JRCModalFooter = styled.div`
     flex-shrink: 0;
     display: flex;

package/src/components/JRCModal/JRCModal.tsx

@@ -9,7 +9,6 @@ import {
     JRCModalContainerFull,
     JRCModalContent,
     JRCModalHeader,
-    JRCModalHeaderTitle,
     JRCModalFooter,
     JRCModalClose,
 } from './JRCModal.styles';
@@ -40,6 +39,8 @@ export interface JRCModalButtonType extends ComponentPropsWithoutRef<'button'> {
  * @member enableClickAwayCloseModal boolean to enable the close of the Modal by Click Outside of Modal
  * @member children default ReactNode children in the Modal content
  * @member portalId id attribute for createPortal
+ * @member inPlace if true, does not use a portal
+ * @member className use for overriding the styled-components styles
  */
 export interface JRCModalProps {
     open: boolean;
@@ -52,6 +53,8 @@ export interface JRCModalProps {
     isFull?: boolean;
     headerButtons?: ReactNode;
     portalId?: string;
+    inPlace?: boolean;
+    className?: string;
 }
 
 type MouseEvents = 'click' | 'mousedown' | 'mouseup';
@@ -90,7 +93,9 @@ const JRCModalContainerClickAway = ({
     return React.createElement(props.isFull ? JRCModalContainerFull : JRCModalContainer, { ref: node, ...props });
 };
 
-const JRCModal = ({
+const JRCModal = React.forwardRef(
+    (
+        {
     open,
     closeHandler,
     buttons,
@@ -101,8 +106,11 @@ const JRCModal = ({
     isFull,
     headerButtons,
     portalId = 'react-modal',
-}: JRCModalProps) => {
-    const modalRef = React.useRef(null);
+    inPlace = false,
+    className,
+}: JRCModalProps,
+        ref: React.ForwardedRef<HTMLDivElement>,
+        ) => {
 
     const closeModal = () => {
         closeHandler();
@@ -111,14 +119,11 @@ const JRCModal = ({
     const escapeHandler = (e: React.KeyboardEvent) => {
         if (e.key == 'Escape') closeHandler();
     };
-    const dummyVoid = (): undefined => {
-        return undefined;
-    };
 
-    const handleClickAway = (event: any) => {
-        event.stopPropagation();
-        closeHandler();
-    };
+        const handleClickAway = (event: any) => {
+            event.stopPropagation();
+            closeHandler();
+        };
 
     const getClickHandlerList = () => {
         const handlerList: (() => void)[] = [];
@@ -127,63 +132,73 @@ const JRCModal = ({
                 if (button.isClosed == undefined || !button.isClosed)
                     handlerList.push(() => {
                         closeHandler();
-                        button.clickHandler != undefined ? button.clickHandler() : dummyVoid();
+                        button.clickHandler != undefined && button.clickHandler();
                     });
                 else
                     handlerList.push(() => {
-                        dummyVoid();
+                        /* dummy void */
                     });
             });
         }
         return handlerList;
-    };
-
-    const displayHeaderButtons = headerButtons ? headerButtons : null;
-    const clickHandlerList = getClickHandlerList();
-    const portalDiv = document.getElementById(portalId);
-
-    const ModalBox = open ? (
-        // FIXME TYPESCRIPT-STRICT
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        <JRCThemeProvider>
-            <JRCModalBox onKeyDown={(e) => escapeHandler(e)} tabIndex={0} ref={modalRef}>
-                <JRCModalContainerClickAway
-                    onClickAway={enableClickAwayCloseModal ? handleClickAway : undefined}
-                    isFull={isFull}>
-                    {(title || showIconClose) && (
-                        <JRCModalHeader>
-                            {title && <JRCH3>{title}</JRCH3>}
-                            {displayHeaderButtons}
-                            {showIconClose && (
-                                <JRCModalClose>
-                                    <JRCIconButton icon="icon-times" onClick={closeModal} />
-                                </JRCModalClose>
-                            )}
-                        </JRCModalHeader>
-                    )}
-
-                    <JRCModalContent>{children}</JRCModalContent>
-
-                    {buttons ? (
-                        <JRCModalFooter>
-                            {buttons.map((button: JRCModalButtonType, index: number) => (
-                                <JRCButton
-                                    key={index}
-                                    color={button.color}
-                                    variant={button.variant}
-                                    onClick={button.isClosed ? closeModal : clickHandlerList[index]}>
-                                    {button.children}
-                                </JRCButton>
-                            ))}
-                        </JRCModalFooter>
-                    ) : null}
-                </JRCModalContainerClickAway>
-            </JRCModalBox>
-        </JRCThemeProvider>
-    ) : null;
-
-    return portalDiv ? ReactDOM.createPortal(ModalBox, portalDiv) : null;
-};
+    }
+
+        const displayHeaderButtons = headerButtons ? headerButtons : null;
+        const clickHandlerList = getClickHandlerList();
+        const portalDiv = document.getElementById(portalId);
+
+    const ModalBox = () => (
+        <JRCModalBox onKeyDown={(e) => escapeHandler(e)} tabIndex={0} ref={ref} className={className}>
+            <JRCModalContainerClickAway
+                className="modal-container"
+                onClickAway={enableClickAwayCloseModal ? handleClickAway : undefined}
+                isFull={isFull}>
+                {(title || showIconClose) && (
+                    <JRCModalHeader className={'modal-header'}>
+                        {title && <JRCH3>{title}</JRCH3>}
+                        {displayHeaderButtons}
+                        {showIconClose && (
+                            <JRCModalClose>
+                                <JRCIconButton icon="icon-times" onClick={closeModal} />
+                            </JRCModalClose>
+                        )}
+                    </JRCModalHeader>
+                )}
+
+                <JRCModalContent className="modal-content">{children}</JRCModalContent>
+
+                {buttons ? (
+                    <JRCModalFooter>
+                        {buttons.map((button: JRCModalButtonType, index: number) => (
+                            <JRCButton
+                                key={index}
+                                color={button.color}
+                                variant={button.variant}
+                                onClick={button.isClosed ? closeModal : clickHandlerList[index]}>
+                                {button.children}
+                            </JRCButton>
+                        ))}
+                    </JRCModalFooter>
+                ) : null}
+            </JRCModalContainerClickAway>
+        </JRCModalBox>
+    );
+
+    if (open) {
+        if (inPlace) {
+            return <ModalBox />;
+        } else if (portalDiv) {
+            // when using a portal, we need to provide the Theme explicitely
+            return ReactDOM.createPortal(
+                <JRCThemeProvider>
+                    <ModalBox />
+                </JRCThemeProvider>,
+                portalDiv,
+            );
+        }
+    }
+    return null;
+}
+);
 
 export default JRCModal;

package/src/components/JRCTag/JRCTag.tsx

@@ -19,6 +19,7 @@ import JRCTooltip from '../JRCTooltip/JRCTooltip';
  * @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 clickVariant - whether the hover/focus style is a selectable item or a deletable item
  */
 export type JRCTagProps<T> = UriOrTypeId & {
     collapsed?: boolean;
@@ -31,9 +32,10 @@ export type JRCTagProps<T> = UriOrTypeId & {
     isFocused?: boolean;
     tooltipDescription?: string;
     alt?: string;
+    clickVariant?: 'select' | 'delete';
 };
 
-const TagWrapper = styled.div<{ focusable: boolean; isFocused: boolean }>`
+const TagWrapper = styled.div<{ focusable: boolean; isFocused: boolean; clickVariant: 'select' | 'delete' }>`
     position: relative;
     display: inline-flex;
     align-items: center;
@@ -44,16 +46,16 @@ const TagWrapper = styled.div<{ focusable: boolean; isFocused: boolean }>`
     cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
     background-color: ${(props) => {
         if (props.focusable && props.isFocused) {
-            return props.theme.color.orangeL80;
+            return props.theme.color[config[props.clickVariant].hoverBGColor];
         } else {
-            return props.theme.color.grey0;
+            return props.theme.color[config[props.clickVariant].backgroundColor];
         }
     }};
     color: ${(props) => {
         if (props.focusable && props.isFocused) {
-            return props.theme.color.grey4;
+            return props.theme.color[config[props.clickVariant].hoverColor];
         } else {
-            return props.theme.color.grey5;
+            return props.theme.color[config[props.clickVariant].color];
         }
     }};
 
@@ -72,14 +74,15 @@ const TagWrapper = styled.div<{ focusable: boolean; isFocused: boolean }>`
     }
 
     :hover {
-        ${(props) => props.focusable && `background-color: ${props.theme.color.orangeL80}`};
-        ${(props) => props.focusable && `color: ${props.theme.color.grey4}`};
+        ${(props) =>
+            props.focusable && `background-color: ${props.theme.color[config[props.clickVariant].hoverBGColor]}`};
+        ${(props) => props.focusable && `color: ${props.theme.color[config[props.clickVariant].hoverColor]}`};
     }
     :hover i {
-        ${(props) => props.focusable && `display: block`};
+        ${(props) => props.focusable && props.clickVariant === 'delete' && `display: block`};
     }
     & i {
-        ${(props) => props.focusable && props.isFocused && `display: block`};
+        ${(props) => props.focusable && props.isFocused && props.clickVariant === 'delete' && `display: block`};
     }
 `;
 
@@ -87,8 +90,24 @@ const TagLabel = styled.div`
     margin-left: 4px;
 `;
 
+const config = {
+    select: {
+        color: 'grey4',
+        backgroundColor: 'white',
+        hoverColor: 'grey5',
+        hoverBGColor: 'grey0',
+    },
+    delete: {
+        color: 'grey5',
+        backgroundColor: 'grey0',
+        hoverColor: 'grey4',
+        hoverBGColor: 'orangeL80',
+    },
+};
+
 export function JRCTag<T>(props: JRCTagProps<T>) {
     const uri = 'uri' in props ? props.uri : `${props.type}/${props.recordId}`;
+    const clickVariant = props.clickVariant || 'delete';
 
     const getAvatar = () =>
         React.createElement(
@@ -104,6 +123,7 @@ export function JRCTag<T>(props: JRCTagProps<T>) {
                     : undefined,
                 focusable: props.focusable,
                 isFocused: props.isFocused,
+                clickVariant,
             },
             <>
                 <JRCAvatar alt={props.alt} uri={uri} variant={props.variant} focusable={props.focusable} />

package/src/components/JRCThemeProvider/animation.css

@@ -1,3 +1,22 @@
+.wiggle {
+    animation: 0.25s ease-in-out 0s 4 wiggle;
+}
+
+@keyframes wiggle {
+    0% {
+        transform: rotate(0deg);
+    }
+    25% {
+        transform: rotate(10deg) scale(1.1);
+    }
+    75% {
+        transform: rotate(-10deg) scale(1.1);
+    }
+    100% {
+        transform: rotate(0deg);
+    }
+}
+
 .scale-left {
     animation: scale var(--timeout, 1000ms) linear 0s 1;
 }

package/src/components/JRCThemeProvider/gabarit.css

@@ -1,3 +1,7 @@
+.react-reset {
+    width: 100%;
+}
+
 .r-grid {
     display: grid;
     --pageColWidthLeft: 230px;

package/src/components/JRCTooltip/JRCTooltip.tsx

@@ -71,6 +71,9 @@ const Text = styled(JRCText)<{ sizeTooltip: keyof typeof sizes.padding }>`
     margin: 0;
     text-align: ${(props) => (props.sizeTooltip === 'small' ? 'center' : 'initial')};
 `;
+const InlineBlock = styled.span`
+    display: inline-block;
+`;
 
 export const JRCTooltip = (props: JRCTooltipProps) => {
     const id = uuidv4();
@@ -86,14 +89,14 @@ export const JRCTooltip = (props: JRCTooltipProps) => {
     };
     return (
         <>
-            <span
+            <InlineBlock
                 aria-describedby={id}
                 data-event="mouseenter focusin"
                 data-event-off={props.closeButton && props.button ? 'click' : 'mouseleave'}
                 data-tip
                 data-for={id}>
                 {props.children}
-            </span>
+            </InlineBlock>
             <Tooltip
                 effect="solid"
                 role="tooltip"

package/src/hooks/UseDidMountEffect.tsx

@@ -1,6 +1,6 @@
 import { DependencyList, useEffect, useRef } from 'react';
 
-const useDidMountEffect = (func: Function, deps: DependencyList) => {
+export const useDidMountEffect = (func: Function, deps: DependencyList) => {
     const didMount = useRef(false);
 
     useEffect(() => {
@@ -8,5 +8,3 @@ const useDidMountEffect = (func: Function, deps: DependencyList) => {
         else didMount.current = true;
     }, deps);
 };
-
-export default useDidMountEffect;

package/src/index.tsx

@@ -17,6 +17,8 @@ import * as reactHookForm from 'react-hook-form';
 
 declare global {
     interface Window {
+        React: any;
+        ReactDOM: any;
         jamespotUserApi: any;
         reactRedux: any;
         redux: any;
@@ -90,6 +92,8 @@ export { JRCConditionalWrapper } from './components/Common/JRCConditionalWrapper
 
 export { JRCDate } from './components/JRCDate/JRCDate';
 
+export { JRCEllipsis } from './components/JRCEllipsis/JRCEllipsis';
+
 export { JRCFormCheckbox } from './components/Form/Input/JRCFormCheckbox/JRCFormCheckbox';
 
 export { JRCFormColorField } from './components/Form/Input/JRCFormColor/JRCFormColor';
@@ -173,14 +177,12 @@ export { JRCTypography };
 
 export { JRCValidationButton } from './components/JRCButton/JRCValidationButton';
 
-import Theme from './styles/theme';
-export { Theme };
+export { default as Theme } from './styles/theme';
+export { default as Resources } from './translation';
 
-import Resources from './translation';
 export { useTimeout } from './hooks/UseTimeout';
 export { useDebounce } from './hooks/UseDebounce';
-export { default as useDidMountEffect } from './hooks/UseDidMountEffect';
-export { Resources };
+export { useDidMountEffect } from './hooks/UseDidMountEffect';
 
 export { StyledInput } from './components/Form/Input/JRCStyledInput';
 
@@ -190,6 +192,8 @@ export { JRCInputSelect } from './components/Form/Input/JRCSelect/JRCInputSelect
 export { JRCInputAutocomplete } from './components/Form/Input/JRCSelect/JRCInputAutocomplete';
 export { JRCInputCommunity } from './components/Form/Input/JRCSelect/JRCAutocompleteCommunity';
 export { JRCInputText } from './components/Form/Input/JRCInputText/JRCInputText';
+export { JRCInputTextarea } from './components/Form/Input/JRCInputTextarea/JRCInputTextarea';
+export { JRCInputDate } from './components/Form/Input/JRCInputDate/JRCInputDate';
 
 /****
  *

package/src/styles/theme.tsx

@@ -49,7 +49,6 @@ export type Colors =
     | 'white';
 type ThemeConfigColorType = { [color in Colors]: string };
 
-//                    contained hover | outlined pressed | outlined hover | contained pressed
 export type Shades =
     | 'primaryL15'
     | 'primaryL80'
@@ -72,6 +71,7 @@ export type FontWeight = {
 };
 
 export type ThemeType = {
+    dpr: number;
     font: {
         family: string;
         color: string;
@@ -147,7 +147,7 @@ const Theme: ITheme = {
             black15: '#00000026',
             black20: '#00000033',
 
-            grey6: '#131E4B',
+            grey6: '#2E2E33',
             grey5: '#4A4A52',
             grey4: '#848491',
             grey3: '#BEBED1',
@@ -175,6 +175,7 @@ const Theme: ITheme = {
         };
 
         this.config = {
+            dpr: Math.ceil(window?.devicePixelRatio || 2),
             font: {
                 // Before using these properties, check JRCTypo.tsx
                 family: "'Poppins',sans-serif",

package/src/translation/lang.json

@@ -7,11 +7,11 @@
         "GLOBAL_Form_Controls_MinValue": "Must be at least {min}",
         "GLOBAL_Form_Controls_MaxValue": "Must be at max {max}",
         "GLOBAL_Form_Controls_Pattern": "Must follow the specified pattern {pattern}",
+        "GLOBAL_Error_occurred": "An error occurred",
         "GLOBAL_Form_No_Options": "No options",
         "GLOBAL_Form_Characters": "characters",
         "GLOBAL_Loading": "Loading",
         "GLOBAL_Validation": "Confirm",
-        "GLOBAL_Error_occurred": "An error occurred",
         "GROUP_more": "More",
         "GLOBAL_Select": "Select",
         "ERROR_Mail_Invalid": "Must be a valid email",
@@ -24,6 +24,7 @@
         "AppLeftColumn_App_Navigation": "App navigation",
         "GLOBAL_Today": "Today",
         "GLOBAL_Yesterday": "Yesterday",
-        "GLOBAL_Unsuported_File_Format": "Unsuported file format"
+        "GLOBAL_Unsuported_File_Format": "Unsuported file format",
+        "GLOBAL_Move": "Move"
     }
 }

package/src/types.ts

@@ -41,6 +41,7 @@ import { JRCColumnRightProps } from './components/JRCColumnRight/JRCColumnRight'
 export { JRCColumnRightProps };
 export { JRCDateProps } from './components/JRCDate/JRCDate';
 export { JRCDropDownProps } from './components/JRCDropDown/JRCDropDown';
+export { JRCEllipsisProps } from './components/JRCEllipsis/JRCEllipsis';
 export { JRCFileOpenProps } from './components/JRCFileOpen/JRCFileOpen';
 import { JRCGridProps } from './components/JRCGrid/JRCGrid';
 export { JRCGridProps };
@@ -83,6 +84,9 @@ export { JRCTypographyProps };
 export { JRCValidationButtonProps } from './components/JRCButton/JRCValidationButton';
 
 export * from './components/Form/Input/JRCInputCheckbox/JRCInputCheckbox.types';
+export { JRCInputDateProps } from './components/Form/Input/JRCInputDate/JRCInputDate';
+export { JRCInputTextProps } from './components/Form/Input/JRCInputText/JRCInputText';
+export { JRCInputTextareaProps } from './components/Form/Input/JRCInputTextarea/JRCInputTextarea';
 export { JRCInputFieldProps } from './components/Form/Input/Common/JRCFormFieldRenderer.types';
 export { JRCInputSelectProps } from './components/Form/Input/JRCSelect/JRCInputSelect.types';
 export { JRCAutocompleteProps } from './components/Form/Input/JRCSelect/JRCInputSelect.types';

package/src/variables.scss

@@ -1,67 +0,0 @@
-//     COLORS     //
-
-//  Primary Color
-$linkColor: rgb(52, 230, 243);
-
-// Originals colors
-$grey: #a7a7a7;
-$blue: #3ec3ef;
-$blueDark: #0064cd;
-$green: #4dbf96;
-$red: #f67370;
-$yellow: #f8d120;
-$orange: #f89406;
-$pink: #c3325f;
-$purple: #7a43b6;
-
-// black to white
-$black: #000000;
-$white: #ffffff;
-
-// --------------------------------- //
-
-//     TEXT     //
-
-// Fonts
-$sansSerif: sans-serif;
-
-// Line height
-$lineHeightBase: 18px;
-
-// Text Color
-$textColor: #3f3f3f;
-$textColorBlur: #858585;
-
-// Text Weights
-$fontWeightLight: 300;
-$fontWeightBase: 400;
-$fontWeightBold: 700;
-
-// Text Sizes
-$fontSizeHeader: 22px;
-$fontSizeTitle: 18px;
-$fontSizeBase: 14.5px;
-$fontSizeSmall: 12px;
-
-// Text Modal Window
-$fontSizeTitleModal: 18px;
-
-// --------------------------------- //
-
-//     PADDINGS & MARGINS (En cours de réflexion)    //
-
-// Paddings
-$paddingLight: 4px;
-$paddingBase: 8px;
-$paddingMedium: 16px;
-$paddingBold: 24px;
-$paddingExtraBold: 32px;
-$paddingBlack: 48px;
-
-// Margins
-$marginLight: 4px;
-$marginBase: 8px;
-$marginMedium: 16px;
-$marginBold: 24px;
-$marginExtraBold: 32px;
-$marginBlack: 48px;