jamespot-react-components 1.0.2 → 1.0.16

package/src/components/Templates/JRCTemplate.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { JRCTemplateBase, JRCTemplateBaseProps } from './JRCBase.template';
+import { Story } from '@storybook/react';
+import { JRCTemplateTwoColumns, JRCTemplateTwoColumnsProps } from './JRCTwoColumns.template';
+
+export default {
+    title: 'JRCTemplateBase',
+    component: JRCTemplateBase,
+};
+
+const Template: Story<JRCTemplateBaseProps> = (args: JRCTemplateBaseProps) => {
+    return <JRCTemplateBase {...args}>{args.children}</JRCTemplateBase>;
+};
+
+export const BaseTemplateDemo = Template.bind({});
+BaseTemplateDemo.args = {
+    children: 'App content',
+    title: 'content title',
+};
+export const BaseTemplateDemoLoading = Template.bind({});
+BaseTemplateDemoLoading.args = {
+    children: 'App content',
+    isLoading: true,
+    title: 'content title',
+};
+
+const TemplateWithLeftColumn: Story<JRCTemplateTwoColumnsProps<any>> = (args: JRCTemplateTwoColumnsProps<any>) => {
+    return <JRCTemplateTwoColumns {...args}>{args.children}</JRCTemplateTwoColumns>;
+};
+
+export const TemplateWithLeftColumnDemo = TemplateWithLeftColumn.bind({});
+TemplateWithLeftColumnDemo.args = {
+    children: 'App content',
+    title: 'content title',
+    leftColumn: {
+        icon: 'icon-edit',
+        color: 'red',
+        title: 'App title',
+        description: 'description',
+    },
+};
+
+export const TemplateWithLeftColumnDemoLoading = TemplateWithLeftColumn.bind({});
+
+TemplateWithLeftColumnDemoLoading.args = {
+    children: 'App content',
+    title: 'content title',
+    isLoading: true,
+    leftColumn: {
+        icon: 'icon-edit',
+        color: 'red',
+        title: 'App title',
+        description: 'description',
+    },
+};

package/src/components/Templates/JRCTwoColumns.template.tsx

@@ -0,0 +1,20 @@
+import { JRCAppContainer, JRCAppLeftColumn } from 'index';
+import * as React from 'react';
+import { JRCAppLeftColumnProps, SectionEntry } from 'types';
+import { ChildrenContainer, JRCTemplateBaseProps } from './JRCBase.template';
+
+export type JRCTemplateTwoColumnsProps<T extends SectionEntry> = {
+    leftColumn: JRCAppLeftColumnProps<T>;
+} & JRCTemplateBaseProps;
+
+export const JRCTemplateTwoColumns: React.FC<any> = <T extends SectionEntry>(props: JRCTemplateTwoColumnsProps<T>) => {
+    const { icon, color, title, description } = props.leftColumn;
+    return (
+        <JRCAppContainer>
+            <JRCAppLeftColumn icon={icon} color={color} title={title} description={description} />
+            <ChildrenContainer title={props.title} isLoading={props.isLoading}>
+                {props.children}
+            </ChildrenContainer>
+        </JRCAppContainer>
+    );
+};

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

@@ -10,6 +10,7 @@ import * as jamespotUserApi from 'jamespot-user-api';
 import * as reactDnd from 'react-dnd';
 import * as reactDndHtml5Backend from 'react-dnd-html5-backend';
 import * as reactHookForm from 'react-hook-form';
+import * as reactRouterDom from 'react-router-dom';
 
 /****
  * DECLARE SHARED LIBRARIES ON GLOBAL
@@ -17,6 +18,8 @@ import * as reactHookForm from 'react-hook-form';
 
 declare global {
     interface Window {
+        React: any;
+        ReactDOM: any;
         jamespotUserApi: any;
         reactRedux: any;
         redux: any;
@@ -27,6 +30,7 @@ declare global {
         reactDnd: any;
         reactDndHtml5Backend: any;
         reactHookForm: any;
+        reactRouterDom: any;
     }
 }
 
@@ -43,6 +47,7 @@ window.styledComponents = styled;
 window.reactDnd = reactDnd;
 window.reactDndHtml5Backend = reactDndHtml5Backend;
 window.reactHookForm = reactHookForm;
+window.reactRouterDom = reactRouterDom;
 
 /****
  *
@@ -54,6 +59,7 @@ import JRCAlert from './components/JRCAlert/JRCAlert';
 export { JRCAlert };
 
 export { JRCAppHeader } from './components/JRCAppHeader/JRCAppHeader';
+
 export { JRCAppContainer } from './components/JRCAppContainer/JRCAppContainer';
 export { JRCAppLeftColumn } from './components/JRCAppLeftColumn/JRCAppLeftColumn';
 
@@ -77,9 +83,6 @@ export { JRCCard } from './components/JRCCard/JRCCard';
 import JRCColumnCenter from './components/JRCColumnCenter/JRCColumnCenter';
 export { JRCColumnCenter };
 
-import JRCColumnCenterTitle from './components/JRCColumnCenterTitle/JRCColumnCenterTitle';
-export { JRCColumnCenterTitle };
-
 import JRCColumnLeft from './components/JRCColumnLeft/JRCColumnLeft';
 export { JRCColumnLeft };
 
@@ -90,6 +93,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';
@@ -128,8 +133,6 @@ export { JRCPagination };
 
 export { JRCFormTextarea, JRCFormTextareaField } from './components/Form/Input/JRCFormTextarea/JRCFormTextarea';
 
-export { JRCFormTextEditorField } from './components/Form/Input/JRCFormTextEditor/JRCFormTextEditor';
-
 export { JRCList } from './components/JRCList/JRCList';
 
 import JRCModalImg from './components/JRCModalImg/JRCModalImg';
@@ -171,18 +174,17 @@ import { JRCH1, JRCH2, JRCH3, JRCH4, JRCH5, JRCText } from './components/JRCTypo
 export { JRCH1, JRCH2, JRCH3, JRCH4, JRCH5, JRCText };
 
 import { JRCTypography } from './components/JRCTypography/JRCTypography';
+import { JRCAppHeader } from 'components/JRCAppHeader/JRCAppHeader';
 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';
 
@@ -192,6 +194,11 @@ 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';
+
+export { JRCTemplateBase } from './components/Templates/JRCBase.template';
+export { JRCTemplateTwoColumns } from './components/Templates/JRCTwoColumns.template';
 
 /****
  *

package/src/styles/theme.tsx

@@ -7,6 +7,7 @@ export interface ITheme {
 }
 
 export type ThemeConfigOptions = {
+    fontFamily: string;
     linkColor: string;
     buttonColor: string;
     headerColor: string;
@@ -49,7 +50,6 @@ export type Colors =
     | 'white';
 type ThemeConfigColorType = { [color in Colors]: string };
 
-//                    contained hover | outlined pressed | outlined hover | contained pressed
 export type Shades =
     | 'primaryL15'
     | 'primaryL80'
@@ -66,19 +66,21 @@ export type Shades =
 type ThemeConfigShadeType = { [color in Shades]: string };
 
 export type FontWeight = {
+    light: number;
     normal: number;
     medium: number;
+    semiBold: number;
     bold: number;
 };
 
 export type ThemeType = {
+    dpr: number;
     font: {
         family: string;
         color: string;
         hrefColor: string;
         size: string;
         lineHeight: string;
-        fontWeight: number;
         weight: FontWeight;
     };
     color: ThemeConfigColorType & ThemeConfigShadeType;
@@ -147,7 +149,7 @@ const Theme: ITheme = {
             black15: '#00000026',
             black20: '#00000033',
 
-            grey6: '#131E4B',
+            grey6: '#2E2E33',
             grey5: '#4A4A52',
             grey4: '#848491',
             grey3: '#BEBED1',
@@ -175,18 +177,22 @@ const Theme: ITheme = {
         };
 
         this.config = {
+            dpr: Math.ceil(window?.devicePixelRatio || 2),
             font: {
                 // Before using these properties, check JRCTypo.tsx
-                family: "'Poppins',sans-serif",
+                family:
+                    options && options.fontFamily
+                        ? "'" + options.fontFamily + "', sans-serif"
+                        : "'Poppins', sans-serif",
                 color: defaultColors.grey5,
                 hrefColor: defaultColors.secondary,
                 size: '16px',
                 lineHeight: '1.5em',
-                // @deprecated
-                fontWeight: 400,
                 weight: {
+                    light: 300,
                     normal: 400,
                     medium: 500,
+                    semiBold: 600,
                     bold: 700,
                 },
             },

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

@@ -33,14 +33,13 @@ export { JRCButtonProps };
 export { JRCButtonDropdownProps } from './components/JRCButtonDropdown/JRCButtonDropdown';
 import { JRCColumnCenterProps } from './components/JRCColumnCenter/JRCColumnCenter';
 export { JRCColumnCenterProps };
-import { JRCColumnCenterTitleProps } from './components/JRCColumnCenterTitle/JRCColumnCenterTitle';
-export { JRCColumnCenterTitleProps };
 import { JRCColumnLeftProps } from './components/JRCColumnLeft/JRCColumnLeft';
 export { JRCColumnLeftProps };
 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 };
@@ -78,11 +77,18 @@ import { JRCValueLabelProps } from './components/Form/Common/types';
 export { JRCValueLabelProps };
 import { JRCWritableFormInputProps } from './components/Form/Input/JRCFormFieldRender';
 export { JRCWritableFormInputProps };
+
+export { JRCTemplateBaseProps } from './components/Templates/JRCBase.template';
+export { JRCTemplateTwoColumnsProps } from './components/Templates/JRCTwoColumns.template';
+
 import { JRCTypographyProps } from './components/JRCTypography/JRCTypography.d';
 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/build/src/components/Form/Input/JRCFormTextEditor/JRCFormTextEditor.d.ts

@@ -1,10 +0,0 @@
-import { JRCWritableFormInputProps } from '../JRCFormFieldRender';
-import 'react-quill/dist/quill.snow.css';
-/**
- * @deprecated The component @link JRCFormRichTextField must be used to replace JRCFormTextEditorField
- * Component used as a rich text editor
- * @param props JRCWritableFormInputProps
- * validation props: minValue, maxValue, required
- * @returns JSX.Element
- */
-export declare const JRCFormTextEditorField: (props: JRCWritableFormInputProps) => JSX.Element;

package/build/src/components/Form/Input/JRCFormTextEditor/JRCFormTextEditor.stories.d.ts

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

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

@@ -1,12 +0,0 @@
-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/src/components/Form/Input/JRCFormTextEditor/JRCFormTextEditor.stories.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { withReduxForm } from '../../../../storybook/decorators';
-import { JRCWritableFormInputProps } from '../JRCFormFieldRender';
-import { JRCFormTextEditorField } from './JRCFormTextEditor';
-import { Meta, Story } from '@storybook/react';
-
-export default {
-    title: 'Inputs/old',
-    component: JRCFormTextEditorField,
-    decorators: [withReduxForm],
-} as Meta;
-
-const Template: Story<JRCWritableFormInputProps> = (args) => (
-    <>
-        <h1>Deprecated: use RichTextEditor</h1>
-        <JRCFormTextEditorField {...args} />
-    </>
-);
-
-export const InputTextEditor = Template.bind({});
-InputTextEditor.args = {
-    name: 'name-storybook',
-    label: 'Article',
-    description: 'Ecrivez un article captivant pour vos auditeurs, ni trop long, ni trop court, juste suffisant.',
-    placeholder: "Moi, j'aime les haricots",
-    helper: { description: 'Si vis pacem, para bellum', title: 'Indication' },
-    minLength: 3,
-    maxLength: 2500,
-    required: false,
-};

package/src/components/Form/Input/JRCFormTextEditor/JRCFormTextEditor.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { Field, WrappedFieldInputProps } from 'redux-form';
-import JRCFormFieldRender, { JRCWritableFormInputProps } from '../JRCFormFieldRender';
-import { useControls } from '../ReduxFormControls';
-import ReactQuill from 'react-quill';
-import 'react-quill/dist/quill.snow.css';
-import { useIntl } from 'react-intl';
-
-const renderInput = (input: WrappedFieldInputProps) => {
-    return <ReactQuill theme="snow" value={input.value} onChange={input.onChange} />;
-};
-
-/**
- * @deprecated The component @link JRCFormRichTextField must be used to replace JRCFormTextEditorField
- * Component used as a rich text editor
- * @param props JRCWritableFormInputProps
- * validation props: minValue, maxValue, required
- * @returns JSX.Element
- */
-export const JRCFormTextEditorField = (props: JRCWritableFormInputProps) => {
-    const validate = useControls({
-        intl: useIntl(),
-        minLength: props.minLength,
-        maxLength: props.maxLength,
-        required: props.required,
-    });
-    return (
-        <Field
-            component={JRCFormFieldRender}
-            renderInputFct={(input: WrappedFieldInputProps) => renderInput(input)}
-            validate={validate}
-            htmlFor={props.name}
-            {...props}
-        />
-    );
-};

package/src/components/JRCColumnCenterTitle/JRCColumnCenterTitle.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-import { JRCH1 } from '../JRCTypo/JRCTypo';
-
-/**
- * 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;
-}
-
-const StyledDiv = styled.div`
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-`;
-
-const JRCColumnCenterTitle = (props: JRCColumnCenterTitleProps) => (
-    <StyledDiv>
-        <JRCH1>{props.title}</JRCH1>
-        {props.children}
-    </StyledDiv>
-);
-
-export default JRCColumnCenterTitle;

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;