jamespot-react-components 1.0.0

package/src/components/JRCTypography/JRCTypography.test.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { screen } from '@testing-library/react';
+import { JRCTypography } from './JRCTypography';
+import { TVariants } from './JRCTypography.d';
+
+import { renderWithWrapper } from '../../utils/test-utils';
+
+const childrenText = 'JRCTypography';
+const variants: TVariants[] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span'];
+
+describe('JRCTypography', () => {
+    test('match snapshot', () => {
+        const { asFragment } = renderWithWrapper(<JRCTypography>{childrenText}</JRCTypography>);
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    test('renders component with correct text', () => {
+        renderWithWrapper(<JRCTypography>{childrenText}</JRCTypography>);
+        expect(screen.getByText(childrenText)).toBeInTheDocument();
+    });
+
+    test('renders component with correct default tag', () => {
+        const { container } = renderWithWrapper(<JRCTypography>{childrenText}</JRCTypography>);
+        expect(container.querySelector('p')).toBeInTheDocument();
+    });
+
+    test('renders component with correct variant tag', () => {
+        variants.forEach((variant) => {
+            const { container } = renderWithWrapper(<JRCTypography variant={variant}>{childrenText}</JRCTypography>);
+            expect(container.querySelector(variant)).toBeInTheDocument();
+        });
+    });
+
+    test('renders component with correct default className', () => {
+        const { container } = renderWithWrapper(<JRCTypography size="m">{childrenText}</JRCTypography>);
+        expect(container.firstChild).toHaveStyle('font-size: 14px');
+    });
+});

package/src/components/JRCTypography/JRCTypography.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { JRCTypographyProps } from './JRCTypography.d';
+import { Typography } from './JRCTypography.styles';
+
+export const JRCTypography = ({ variant, ...props }: JRCTypographyProps) => <Typography as={variant} {...props} />;

package/src/components/JRCTypography/__snapshots__/JRCTypography.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JRCTypography match snapshot 1`] = `
+<DocumentFragment>
+  <p
+    class="sc-bdvvtL iOYRhi"
+  >
+    JRCTypography
+  </p>
+</DocumentFragment>
+`;

package/src/hooks/UseDebounce.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+
+/**
+ * This hook provides a way to retrieve only the last value (after the delay has been passed without any change)
+ * To put it in context, if the user is typing within a search box, the debounced value will be returned when
+ * they've stopped typing for more than 200ms (delay).
+ * @param value value to debounce
+ * @param delay delay
+ */
+export function useDebounce(value: string, delay = 200) {
+    // State and setters for debounced value
+    const [debouncedValue, setDebouncedValue] = React.useState(value);
+
+    React.useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+
+    return debouncedValue;
+}

package/src/hooks/UseDidMountEffect.tsx

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

package/src/hooks/UseTimeout.ts

@@ -0,0 +1,24 @@
+import React, { Dispatch, SetStateAction } from 'react';
+
+/**
+ * This hook provides a way to reset a value after a timeout everytime it is set
+ * @param value default value
+ * @param delay delay
+ */
+export function useTimeout<T>(value?: T, delay = 3000): [T | undefined, Dispatch<SetStateAction<T | undefined>>] {
+    const [timeoutValue, setTimeoutValue] = React.useState(value);
+
+    React.useEffect(() => {
+        if (timeoutValue) {
+            const handler = setTimeout(() => {
+                setTimeoutValue(undefined);
+            }, delay);
+
+            return () => {
+                clearTimeout(handler);
+            };
+        }
+    }, [timeoutValue, delay]);
+
+    return [timeoutValue, setTimeoutValue];
+}

package/src/index.tsx

@@ -0,0 +1,205 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+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';
+import * as reactDnd from 'react-dnd';
+import * as reactDndHtml5Backend from 'react-dnd-html5-backend';
+import * as reactHookForm from 'react-hook-form';
+
+/****
+ * DECLARE SHARED LIBRARIES ON GLOBAL
+ */
+
+declare global {
+    interface Window {
+        jamespotUserApi: any;
+        reactRedux: any;
+        redux: any;
+        reduxForm: any;
+        reactIntl: any;
+        reactSelect: any;
+        reactTransitionGroup: any;
+        styledComponents: any;
+        reactDnd: any;
+        reactDndHtml5Backend: any;
+        reactHookForm: any;
+    }
+}
+
+window.React = React;
+window.ReactDOM = ReactDOM;
+
+window.jamespotUserApi = jamespotUserApi;
+window.reactRedux = reactReduxLib;
+window.redux = reduxLib;
+window.reduxForm = reduxFormLib;
+window.reactIntl = reactIntl;
+window.reactSelect = reactSelect;
+window.reactTransitionGroup = reactTransitionGroup;
+window.styledComponents = styled;
+window.reactDnd = reactDnd;
+window.reactDndHtml5Backend = reactDndHtml5Backend;
+window.reactHookForm = reactHookForm;
+
+/****
+ *
+ * PLEASE RESPECT ALPHABETICAL ORDER
+ *
+ */
+
+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';
+
+import JRCAvatar from './components/JRCAvatar/JRCAvatar';
+export { JRCAvatar };
+
+export { JRCAutocompleteAudienceField } from './components/Form/Input/JRCFormAutocomplete/JRCFormAutocompleteAudience';
+
+export { JRCAutocompleteCommunityField } from './components/Form/Input/JRCFormAutocomplete/JRCFormAutocompleteCommunity';
+
+export { JRCAutocompleteTaxonomyField } from './components/Form/Input/JRCFormAutocomplete/JRCFormAutocompleteTaxonomy';
+
+import JRCButton from './components/JRCButton/JRCButton';
+export { JRCButton };
+
+import { JRCButtonDropdown } from './components/JRCButtonDropdown/JRCButtonDropdown';
+export { JRCButtonDropdown };
+
+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 };
+
+import JRCColumnRight from './components/JRCColumnRight/JRCColumnRight';
+export { JRCColumnRight };
+
+export { JRCConditionalWrapper } from './components/Common/JRCConditionalWrapper';
+
+export { JRCDate } from './components/JRCDate/JRCDate';
+
+export { JRCFormCheckbox } from './components/Form/Input/JRCFormCheckbox/JRCFormCheckbox';
+
+export { JRCFormColorField } from './components/Form/Input/JRCFormColor/JRCFormColor';
+
+export { JRCFormDatetimeField } from './components/Form/Input/JRCFormDateTime/JRCFormDateTime';
+
+export { JRCFormEmailField } from './components/Form/Input/JRCFormEmail/JRCFormEmail';
+
+export { JRCFormNumberField } from './components/Form/Input/JRCFormNumber/JRCFormNumber';
+
+export { JRCFormInputFile, JRCFormInputFileField } from './components/Form/Input/JRCFormFile/JRCFormFile';
+
+export { JRCDropDown } from './components/JRCDropDown/JRCDropDown';
+
+export { JRCFormRangeField } from './components/Form/Input/JRCFormRange/JRCFormRange';
+
+export { JRCFormRichTextField } from './components/Form/Input/JRCFormRichText/JRCFormRichTextField';
+
+export { JRCFormSendAlertField } from './components/Form/Input/JRCFormSendAlert/JRCFormSendAlert';
+
+export { JRCFormReceiveACopyField } from './components/Form/Input/JRCFormReceiveACopy/JRCFormReceiveACopy';
+
+export { JRCFormTextField } from './components/Form/Input/JRCFormText/JRCFormText';
+
+export { JRCFormUrlField } from './components/Form/Input/JRCFormURL/JRCFormUrl';
+
+export { JRCFormSelectInput, JRCFormSelectField } from './components/Form/Input/JRCFormSelect/JRCFormSelect';
+
+export { JRCFormSelectTagField } from './components/Form/Input/JRCFormSelect/JRCFormSelectTag';
+
+import JRCGrid from 'components/JRCGrid/JRCGrid';
+export { JRCGrid };
+
+import JRCPagination from './components/JRCPagination/JRCPagination';
+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';
+export { JRCModalImg };
+
+import JRCModal from './components/JRCModal/JRCModal';
+export { JRCModal };
+
+export { JRCStyledHref, JRCLinkToUser, JRCLinkToArticle } from './components/JRCHref/JRCHref';
+
+import JRCFileOpen from './components/JRCFileOpen/JRCFileOpen';
+export { JRCFileOpen };
+
+import JRCIcon from './components/JRCIcon/JRCIcon';
+export { JRCIcon };
+
+import { JRCIconButton } from './components/JRCIconButton/JRCIconButton';
+export { JRCIconButton };
+
+import JRCImg from './components/JRCImg/JRCImg';
+export { JRCImg };
+
+import JRCLoader from './components/JRCLoader/JRCLoader';
+export { JRCLoader };
+
+import JRCMenu from './components/JRCMenu/JRCMenu';
+export { JRCMenu };
+
+export { JRCTabs, JRCTabPanel } from './components/JRCTabs/JRCTabs';
+export { JRCTag } from './components/JRCTag/JRCTag';
+
+import JRCThemeProvider from './components/JRCThemeProvider/JRCThemeProvider';
+export { JRCThemeProvider };
+
+import JRCTooltip from './components/JRCTooltip/JRCTooltip';
+export { JRCTooltip };
+
+import { JRCH1, JRCH2, JRCH3, JRCH4, JRCH5, JRCText } from './components/JRCTypo/JRCTypo';
+export { JRCH1, JRCH2, JRCH3, JRCH4, JRCH5, JRCText };
+
+import { JRCTypography } from './components/JRCTypography/JRCTypography';
+export { JRCTypography };
+
+export { JRCValidationButton } from './components/JRCButton/JRCValidationButton';
+
+import Theme from './styles/theme';
+export { Theme };
+
+import Resources from './translation';
+export { useTimeout } from './hooks/UseTimeout';
+export { useDebounce } from './hooks/UseDebounce';
+export { default as useDidMountEffect } from './hooks/UseDidMountEffect';
+export { Resources };
+
+export { StyledInput } from './components/Form/Input/JRCStyledInput';
+
+export { JRCInputCheckbox } from './components/Form/Input/JRCInputCheckbox/JRCInputCheckbox';
+export { JRCInputEmail } from './components/Form/Input/JRCFormEmail/JRCInputEmail';
+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';
+
+/****
+ *
+ * PLEASE RESPECT ALPHABETICAL ORDER
+ *
+ */
+
+export * from './types';

package/src/jest/svgTransform.js

@@ -0,0 +1,10 @@
+/* eslint-disable no-undef */
+module.exports = {
+    process() {
+        return 'module.exports = {};';
+    },
+    getCacheKey() {
+        // The output is always the same.
+        return 'svgTransform';
+    },
+};

package/src/storybook/decorators.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { reduxForm, reducer as formReducer } from 'redux-form';
+import { Provider } from 'react-redux';
+import { createStore, combineReducers, applyMiddleware } from 'redux';
+import logger from 'redux-logger';
+
+export const withReduxForm = (storyFunc: any) => {
+    const reducers: any = { form: formReducer };
+    const reducer = combineReducers(reducers);
+    const store = createStore(reducer, applyMiddleware(logger));
+    const Test = reduxForm({ form: 'withReduxForm' })(storyFunc);
+    return (
+        <Provider store={store}>
+            <Test />
+        </Provider>
+    );
+};

package/src/styles/Theme.stories.tsx

@@ -0,0 +1,265 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+export default {
+    title: 'Colors',
+};
+
+const Wrapper = styled.div`
+    margin: 15px 5px;
+    border-radius: 5px;
+    border: 1px solid #aaa;
+`;
+
+const WrapperVariante = styled.div`
+    margin: 5px;
+    border-radius: 5px;
+    border: 1px solid #aaa;
+`;
+
+const Flex = styled.div`
+    display: flex;
+    align-items: center;
+`;
+
+const Color = styled.div`
+    width: 50px;
+    height: 50px;
+    border-radius: 25px;
+    margin: 10px;
+    flex-shrink: 0;
+    background-color: ${(props) => props.theme.color[props.color as string]};
+`;
+
+const ColorVariante = styled.div`
+    width: 30px;
+    height: 30px;
+    border-radius: 15px;
+    margin: 5px 10px 5px 5px;
+    flex-shrink: 0;
+    background-color: ${(props) => props.theme.color[props.color as string]};
+`;
+
+const P = styled.p`
+    margin: 0;
+    font-size: 12px;
+`;
+
+const PVariante = styled.p`
+    margin: 0;
+    font-size: 10px;
+`;
+
+const config = [
+    {
+        color: 'primary',
+        origin: 'Thème plateforme',
+        palette: 'Hérité',
+        description: [
+            'Couleur primaire, utilisée pour les élements de customisation de la plateforme (boutons, icones, input de type radio ou checkbox)',
+        ],
+        variants: [
+            {
+                color: 'primaryD20',
+                description: ["Variante pour les éléments 'contained' à l'état 'focus'"],
+            },
+            {
+                color: 'primaryL15',
+                description: ["Variante pour les éléments 'contained' à l'état 'hover'"],
+            },
+            {
+                color: 'primaryL80',
+                description: ["Variante pour les éléments 'outlined' à l'état 'focus'"],
+            },
+            {
+                color: 'primaryL90',
+                description: ["Variante pour les éléments 'outlined' à l'état 'hover'"],
+            },
+        ],
+    },
+    {
+        color: 'secondary',
+        origin: 'Thème plateforme',
+        palette: 'Hérité',
+        description: ['Couleur secondaire, utilisée pour les élements de customisation de la plateforme (liens)'],
+    },
+    {
+        color: 'orange',
+        origin: 'Code',
+        palette: 'Palette principal',
+        description: [
+            'Usages relatifs à une action avec mise en garde (boutons avec action irréversible importante), erreur (input, alert)',
+        ],
+        variants: [
+            {
+                color: 'orangeD20',
+                description: ["Variante pour les éléments 'contained' à l'état 'focus'"],
+            },
+            {
+                color: 'orangeL15',
+                description: ["Variante pour les éléments 'contained' à l'état 'hover'"],
+            },
+            {
+                color: 'orangeL80',
+                description: ["Variante pour les éléments 'outlined' à l'état 'focus'"],
+            },
+            {
+                color: 'orangeL90',
+                description: ["Variante pour les éléments 'outlined' à l'état 'hover'"],
+            },
+        ],
+    },
+    {
+        color: 'green',
+        origin: 'Code',
+        palette: 'Palette principal',
+        description: ['Usages relatifs à une action de validation (boutons) ou un message de succès'],
+        variants: [
+            {
+                color: 'greenD20',
+                description: ["Variante pour les éléments 'contained' à l'état 'focus'"],
+            },
+            {
+                color: 'greenL20',
+                description: ["Variante pour les éléments 'contained' à l'état 'hover'"],
+            },
+            {
+                color: 'greenL80',
+                description: ["Variante pour les éléments 'outlined' à l'état 'focus'"],
+            },
+            {
+                color: 'greenL90',
+                description: ["Variante pour les éléments 'outlined' à l'état 'hover'"],
+            },
+        ],
+    },
+    {
+        color: 'navy',
+        origin: 'Code',
+        palette: 'Palette principal',
+        description: [
+            "Couleur utilisée pour les contours de l'input ayant le focus utilisateur",
+            'Couleur utilisée le background des tooltips',
+        ],
+    },
+    {
+        color: 'overseas',
+        origin: 'Code',
+        palette: 'Palette principal',
+        description: ['Couleur utilisée pour la navigation (pagination)'],
+    },
+    {
+        color: 'lavender',
+        origin: 'Code',
+        palette: 'Palette principal',
+        description: ["Pas d'usage aujourd'hui"],
+    },
+    {
+        color: 'yellow',
+        origin: 'Code',
+        palette: 'Palette principal',
+        description: ['Usages relatifs à un warning (alert)'],
+    },
+    {
+        color: 'black',
+        origin: 'Code',
+        palette: 'Palette de gris',
+        description: ["Couleur inutilisé. Préferer l'usage du niveau de gris 5 à la place"],
+    },
+    {
+        color: 'grey6',
+        origin: 'Code',
+        palette: 'Palette de gris',
+        description: ['Couleur non utilisée pour le moment'],
+    },
+    {
+        color: 'grey5',
+        origin: 'Code',
+        palette: 'Palette de gris',
+        description: ['Couleur par défaut pour le texte'],
+    },
+    {
+        color: 'grey4',
+        origin: 'Code',
+        palette: 'Palette de gris',
+        description: [
+            "Couleur pour le texte d'aide (description de champs) ainsi que pour les options non sélectionnées (select, checkbox, radio)",
+            "Couleur utilisée pour la bordure pointillée 'focus' des éléments blancs dont le fond change en fonction de l'état du composant",
+        ],
+    },
+    {
+        color: 'grey3',
+        origin: 'Code',
+        palette: 'Palette de gris',
+        description: ['Couleur pour le texte de type placeholder ou pour les champs désactivés'],
+    },
+    {
+        color: 'grey2',
+        origin: 'Code',
+        palette: 'Palette de gris',
+        description: [''],
+    },
+    {
+        color: 'grey1',
+        origin: 'Code',
+        palette: 'Palette de gris',
+        description: [
+            "Couleur utilisée pour l'état pressed des éléments blancs dont le fond change en fonction de l'état du composant",
+        ],
+    },
+    {
+        color: 'grey0',
+        origin: 'Code',
+        palette: 'Palette de gris',
+        description: [
+            "Couleur utilisée pour l'état hover ou focused des éléments blancs dont le fond change en fonction de l'état du composant",
+        ],
+    },
+    {
+        color: 'white',
+        origin: 'Code',
+        palette: 'Palette de gris',
+        description: [
+            "Couleur du texte sur les composants dont le fond est l'une des couleur du thème principal",
+            'Couleur de fond des éléments par défaut',
+        ],
+    },
+];
+
+const Template = () => (
+    <>
+        {config.map((c) => (
+            <Wrapper>
+                <Flex>
+                    <Color color={c.color} />
+                    <div>
+                        <P>Nom: {c.color}</P>
+                        <P>Origine: {c.origin}</P>
+                        <P>Palette: {c.palette}</P>
+                        <P>Description: </P>
+                        {c.description.map((d) => (
+                            <P>- {d}</P>
+                        ))}
+                    </div>
+                </Flex>
+                {c.variants &&
+                    c.variants.map((v) => (
+                        <WrapperVariante>
+                            <Flex>
+                                <ColorVariante color={v.color} />
+                                <div>
+                                    <PVariante>Nom: {v.color}</PVariante>
+                                    <PVariante>Description: </PVariante>
+                                    {v.description.map((d) => (
+                                        <P>- {d}</P>
+                                    ))}
+                                </div>
+                            </Flex>
+                        </WrapperVariante>
+                    ))}
+            </Wrapper>
+        ))}
+    </>
+);
+
+export const Colors = Template.bind({});

package/src/styles/theme.d.ts

@@ -0,0 +1,6 @@
+import 'styled-components';
+import { ThemeType } from './theme';
+
+declare module 'styled-components' {
+    export interface DefaultTheme extends ThemeType {}
+}