jamespot-react-components 1.0.0 → 1.0.3

package/src/components/JRCLoader/JRCSkeleton.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+type SSkeletonLineProps = {
+    width?: string;
+    height?: string;
+    translucent?: boolean;
+};
+
+const SSkeletonLine = styled.div<SSkeletonLineProps>`
+    display: inline-block;
+    width: ${(props) => props.width || `20em`};
+    height: ${(props) => props.height || `0.5em`};
+    border-radius: 5px;
+    margin: 5px;
+    background: linear-gradient(-90deg, #f0f0f0 0%, #f8f8f8 50%, #f0f0f0 100%);
+    background-size: 400% 400%;
+    animation: pulse 1.2s ease-in-out infinite;
+    @keyframes pulse {
+        0% {
+            background-position: 0% 0%;
+        }
+        100% {
+            background-position: -135% 0%;
+        }
+    }
+`;
+const SkeletonRowContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex: 1 100%;
+    overflow: hidden;
+    border-radius: 6px;
+    border: 1px solid ${(props) => props.theme.color.grey1};
+    margin: 8px 32px;
+    padding: 22px;
+    cursor: pointer;
+    &:hover {
+        border: 1px solid ${(props) => props.theme.color.lavender};
+        background: ${(props) => props.theme.color.grey0};
+    }
+`;
+
+const SkeletonLines = styled.div`
+    display: flex;
+    flex: 4;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin: 2px 8px;
+`;
+
+const SkeletonPart = () => (
+    <SkeletonRowContainer data-theme="skeleton">
+        <SkeletonLines>
+            <SSkeletonLine width="50%" />
+            <SSkeletonLine width="30%" />
+            <br />
+            <SSkeletonLine width="50%" />
+            <SSkeletonLine width="30%" />
+            <SSkeletonLine width="10%" />
+        </SkeletonLines>
+    </SkeletonRowContainer>
+);
+
+export const Skeleton = () => (
+    <>
+        <SkeletonPart />
+        <SkeletonPart />
+        <SkeletonPart />
+        <SkeletonPart />
+    </>
+);

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

@@ -60,6 +60,7 @@ export const JRCModalHeader = styled.div`
     margin: 24px;
     display: flex;
     align-items: center;
+    justify-content: space-between;
 `;
 
 export const JRCModalHeaderTitle = styled.div`

package/src/index.tsx

@@ -4,7 +4,6 @@ import * as reduxFormLib from 'redux-form';
 import * as reduxLib from 'redux';
 import * as reactReduxLib from 'react-redux';
 import * as reactIntl from 'react-intl';
-import * as reactTransitionGroup from 'react-transition-group';
 import styled from 'styled-components';
 import * as reactSelect from 'react-select';
 import * as jamespotUserApi from 'jamespot-user-api';
@@ -24,7 +23,6 @@ declare global {
         reduxForm: any;
         reactIntl: any;
         reactSelect: any;
-        reactTransitionGroup: any;
         styledComponents: any;
         reactDnd: any;
         reactDndHtml5Backend: any;
@@ -41,7 +39,6 @@ window.redux = reduxLib;
 window.reduxForm = reduxFormLib;
 window.reactIntl = reactIntl;
 window.reactSelect = reactSelect;
-window.reactTransitionGroup = reactTransitionGroup;
 window.styledComponents = styled;
 window.reactDnd = reactDnd;
 window.reactDndHtml5Backend = reactDndHtml5Backend;
@@ -131,8 +128,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';

package/src/translation/lang.json

@@ -11,6 +11,7 @@
         "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",

package/src/types.ts

@@ -24,7 +24,8 @@ export { JRCFormSendAlertInputProps };
 import { TextareaFormInputProps } from './components/Form/Input/JRCFormTextarea/JRCFormTextarea';
 export { TextareaFormInputProps };
 
-export { JRCAlertProps, AlertType } from './components/JRCAlert/JRCAlert';
+export { MessageType } from './components/Common/util/getColor.util';
+export { JRCAlertProps } from './components/JRCAlert/JRCAlert';
 import { JRCAvatarProps } from './components/JRCAvatar/JRCAvatar';
 export { JRCAvatarProps };
 import { JRCButtonProps } from './components/JRCButton/JRCButton';

package/tsconfig.json

@@ -2,6 +2,7 @@
     "compilerOptions": {
         "baseUrl": "./src",
         "outDir": "./build",
+        "lib": ["dom", "es2019"],
         "noImplicitAny": true,
         "module": "esnext",
         "moduleResolution": "node",

package/.github/workflows/create-stable-branch.yml

@@ -1,80 +0,0 @@
-name: remote-stable
-
-on:
-    push:
-        branches: [master]
-jobs:
-    build:
-        runs-on: ubuntu-latest
-
-        steps:
-            - uses: actions/checkout@v3
-              with:
-                  persist-credentials: false
-            - name: Select Node v. 16.x (and thus npm v. 7.x)
-              uses: actions/setup-node@v2
-              with:
-                  node-version: 16.x
-            - name: Reconfigure git to use HTTP authentication
-              run: >
-                  git config --global url."https://${{ secrets.ONE_TOKEN_TO_RULE_THEM_ALL }}@github.com/".insteadOf ssh://git@github.com/
-            - name: Delete stable
-              uses: dawidd6/action-delete-branch@v3
-              with:
-                  branches: remote-stable
-                  github_token: ${{ secrets.ONE_TOKEN_TO_RULE_THEM_ALL }}
-              continue-on-error: true
-            - name: New remote-stable branch
-              uses: peterjgrainger/action-create-branch@v2.0.1
-              env:
-                  GITHUB_TOKEN: ${{ secrets.ONE_TOKEN_TO_RULE_THEM_ALL }}
-              with:
-                  branch: remote-stable
-            - name: Merge master -> remote-stable
-              uses: devmasx/merge-branch@master
-              with:
-                  type: now
-                  from_branch: master
-                  target_branch: remote-stable
-                  github_token: ${{ secrets.ONE_TOKEN_TO_RULE_THEM_ALL }}
-            - name: ⬇️ Checkout js-util-create-stable-branch
-              uses: actions/checkout@v3
-              with:
-                  repository: Jamespot/js-util-create-stable-branch
-                  token: ${{ secrets.ONE_TOKEN_TO_RULE_THEM_ALL }}
-                  path: js-util-create-stable-branch
-                  persist-credentials: false
-            - name: ⬇️ Checkout remote-stable branch
-              uses: actions/checkout@v3
-              with:
-                  token: ${{ secrets.ONE_TOKEN_TO_RULE_THEM_ALL }}
-                  ref: remote-stable
-                  path: newbranch
-                  persist-credentials: false
-            - name: 🔨 Change package.json
-              run: |
-                  pwd
-                  cd js-util-create-stable-branch
-                  node updatePackage.js ../newbranch
-                  cd ../newbranch
-                  pwd
-            - name: Cache dependencies
-              uses: actions/cache@v2
-              with:
-                  path: ~/.npm
-                  key: npm-${{ hashFiles('package-lock.json') }}
-                  restore-keys: npm-
-            - name: Install dependencies
-              run: |
-                  pwd
-                  cp newbranch/package.json ./
-                  cat package.json
-                  npm i --legacy-peer-deps
-                  cp package-lock.json ./newbranch
-            - name: push
-              uses: actions-x/commit@v4
-              with:
-                  token: ${{ secrets.ONE_TOKEN_TO_RULE_THEM_ALL }}
-                  branch: remote-stable
-                  force: true
-                  directory: newbranch

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/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}
-        />
-    );
-};