jamespot-react-components 1.0.0

package/src/utils/test-utils.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { render, RenderOptions } from '@testing-library/react';
+import { ThemeProvider } from 'styled-components';
+import Theme from 'styles/theme';
+
+import { reduxForm, reducer as formReducer } from 'redux-form';
+import { Provider } from 'react-redux';
+import { createStore, combineReducers } from 'redux';
+import { IntlProvider } from 'react-intl';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const lang = require('../translation/lang.json');
+
+export interface RenderWrapperProps {
+    children: React.ReactNode;
+}
+
+const Wrapper = (props: RenderWrapperProps) => {
+    const reducers: any = { form: formReducer };
+    const reducer = combineReducers(reducers);
+    const store = createStore(reducer);
+    const TestedCompo = () => <>{props.children}</>;
+    const TestedCompoWithReduxForm = reduxForm({ form: 'withReduxForm' })(TestedCompo);
+    const locale = 'en';
+    const messages = lang.en;
+    return (
+        <IntlProvider locale={locale} messages={messages}>
+            <ThemeProvider theme={Theme.get()}>
+                <Provider store={store}>
+                    <TestedCompoWithReduxForm />
+                </Provider>
+            </ThemeProvider>
+        </IntlProvider>
+    );
+};
+
+const renderWithWrapper = (ui: React.ReactElement, options?: Omit<RenderOptions, 'queries'>) => {
+    return render(ui, { wrapper: Wrapper, ...options });
+};
+
+export { renderWithWrapper };

package/src/utils/types.tsx

@@ -0,0 +1,35 @@
+// input & field
+export interface ReduxFormField {
+    input: ReduxFormFieldInput;
+    meta: ReduxFormFieldMeta;
+}
+
+export interface ReduxFormFieldInput {
+    name: string;
+    value?: any;
+    checked?: boolean;
+    onBlur?: (event: any) => void;
+    onChange?: (event: any) => void;
+    onDragStart?: (event: any) => void;
+    onDrop?: (event: any) => void;
+    onFocus?: (event: any) => void;
+}
+
+export interface ReduxFormFieldMeta {
+    active?: boolean;
+    autofilled?: boolean;
+    asyncValidating?: boolean;
+    dirty?: boolean;
+    dispatch?: () => void;
+    error?: string;
+    form?: string;
+    initial?: any;
+    invalid?: boolean;
+    pristine?: boolean;
+    submitting?: boolean;
+    submitFailed?: boolean;
+    touched?: boolean;
+    valid?: boolean;
+    visited?: boolean;
+    warning?: string;
+}

package/src/utils/utils.date.test.tsx

@@ -0,0 +1,14 @@
+import { extractDate } from './utils.date';
+
+describe('Test ExtractDate utils', () => {
+    test('extractDate', () => {
+        expect(extractDate('2022-01-19 09:43:58')).toStrictEqual({
+            date: 19,
+            month: 1,
+            year: 2022,
+            hours: 9,
+            minutes: 43,
+            seconds: 58,
+        });
+    });
+});

package/src/utils/utils.date.tsx

@@ -0,0 +1,20 @@
+export interface extractDateProps {
+    date: number;
+    month: number;
+    year: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+}
+
+export const extractDate = (str: string): extractDateProps => {
+    const dateJs = new Date(str);
+    return {
+        date: dateJs.getDate(),
+        month: dateJs.getMonth() + 1,
+        year: dateJs.getFullYear(),
+        hours: dateJs.getHours(),
+        minutes: dateJs.getMinutes(),
+        seconds: dateJs.getSeconds(),
+    };
+};

package/src/utils/utils.document.tsx

@@ -0,0 +1,54 @@
+export function isDocumentElement(el: HTMLElement | typeof window): el is typeof window {
+    return [document.documentElement, document.body, window].indexOf(el) > -1;
+}
+
+export function scrollTo(el: HTMLElement | typeof window, top: number): void {
+    // with a scroll distance, we perform scroll on the element
+    if (isDocumentElement(el)) {
+        window.scrollTo(0, top);
+        return;
+    }
+
+    el.scrollTop = top;
+}
+
+// Get Scroll Parent
+// ------------------------------
+
+export function getScrollParent(element: HTMLElement) {
+    let style = getComputedStyle(element);
+    const excludeStaticParent = style.position === 'absolute';
+    const overflowRx = /(auto|scroll)/;
+
+    if (style.position === 'fixed') return document.documentElement;
+
+    for (let parent: HTMLElement | null = element; (parent = parent.parentElement); ) {
+        style = getComputedStyle(parent);
+        if (excludeStaticParent && style.position === 'static') {
+            continue;
+        }
+        if (overflowRx.test(style.overflow + style.overflowY + style.overflowX)) {
+            return parent;
+        }
+    }
+
+    return document.documentElement;
+}
+
+export function scrollIntoView(menuEl: HTMLElement, focusedEl: HTMLElement): void {
+    const menuRect = menuEl.getBoundingClientRect();
+    const focusedRect = focusedEl.getBoundingClientRect();
+    const overScroll = focusedEl.offsetHeight / 3;
+
+    if (focusedRect.bottom + overScroll > menuRect.bottom) {
+        scrollTo(
+            menuEl,
+            Math.min(
+                focusedEl.offsetTop + focusedEl.clientHeight - menuEl.offsetHeight + overScroll,
+                menuEl.scrollHeight,
+            ),
+        );
+    } else if (focusedRect.top - overScroll < menuRect.top) {
+        scrollTo(menuEl, Math.max(focusedEl.offsetTop - overScroll, 0));
+    }
+}

package/src/utils/utils.object.test.tsx

@@ -0,0 +1,38 @@
+import { deepEqual } from './utils.object';
+
+describe('Test Object utils', () => {
+    const allTypes = {
+        string: 'string',
+        number: 42,
+        boolean: true,
+        regexp: new RegExp(''),
+        date: new Date(),
+        templateLiteral: ``,
+        null: null,
+        undefined: undefined,
+    };
+
+    const obj = {
+        ...allTypes,
+        array: Object.values(allTypes),
+        nested: {
+            nested: {
+                nested: allTypes,
+            },
+        },
+    };
+
+    const obj2 = {
+        ...allTypes,
+        array: Object.values(allTypes),
+        nested: {
+            nested: {
+                nested: allTypes,
+            },
+        },
+    };
+
+    test('deepEqual', () => {
+        expect(deepEqual(obj, obj2)).toBeTruthy();
+    });
+});

package/src/utils/utils.object.tsx

@@ -0,0 +1,71 @@
+const isArray = Array.isArray;
+const keyList = Object.keys;
+const hasProp = Object.prototype.hasOwnProperty;
+
+export function deepEqual(a: any, b: any) {
+    // fast-deep-equal index.js 2.0.1
+    if (a === b) return true;
+
+    if (a && b && typeof a == 'object' && typeof b == 'object') {
+        const arrA = isArray(a);
+        const arrB = isArray(b);
+        let i: number;
+        let length: number;
+        let key;
+
+        if (arrA && arrB) {
+            length = (a as Array<any>).length;
+            if (length !== (b as Array<any>).length) return false;
+            for (i = length; i-- !== 0; ) {
+                if (!deepEqual((a as Array<any>)[i], (b as Array<any>)[i])) return false;
+            }
+            return true;
+        }
+
+        if (arrA !== arrB) return false;
+
+        const dateA = a instanceof Date;
+        const dateB = b instanceof Date;
+        if (dateA !== dateB) return false;
+        if (dateA && dateB) return (a as Date).getTime() === (b as Date).getTime();
+
+        const regexpA = a instanceof RegExp;
+        const regexpB = b instanceof RegExp;
+        if (regexpA !== regexpB) return false;
+        if (regexpA && regexpB) return a.toString() === b.toString();
+
+        const keys = keyList(a);
+        length = keys.length;
+
+        if (length !== keyList(b).length) {
+            return false;
+        }
+
+        for (i = length; i-- !== 0; ) {
+            if (!hasProp.call(b, keys[i])) return false;
+        }
+        // end fast-deep-equal
+
+        // Custom handling for React
+        for (i = length; i-- !== 0; ) {
+            key = keys[i];
+            if (key === '_owner' && a.$$typeof) {
+                // React-specific: avoid traversing React elements' _owner.
+                //  _owner contains circular references
+                // and is not needed when comparing the actual elements (and not their owners)
+                // .$$typeof and ._store on just reasonable markers of a react element
+                continue;
+            } else {
+                // all other properties should be traversed as usual
+                if (!deepEqual((a as Record<typeof key, object>)[key], (b as Record<typeof key, object>)[key]))
+                    return false;
+            }
+        }
+
+        // fast-deep-equal index.js 2.0.1
+        return true;
+    }
+
+    // eslint-disable-next-line no-self-compare
+    return a !== a && b !== b;
+}

package/src/utils/utils.regexp.test.ts

@@ -0,0 +1,11 @@
+import { escapeRegExp } from './utils.regexp';
+
+describe('Test RegExp utils', () => {
+    test('escapeRegExp', () => {
+        expect(escapeRegExp('toto')).toStrictEqual(new RegExp('toto', 'i'));
+        expect(escapeRegExp(undefined)).toStrictEqual(undefined);
+        expect(escapeRegExp('.*+?^${}()|[]\\')).toStrictEqual(
+            new RegExp('\\.\\*\\+\\?\\^\\$\\{\\}\\(\\)\\|\\[\\]\\\\', 'i'),
+        );
+    });
+});

package/src/utils/utils.regexp.tsx

@@ -0,0 +1,8 @@
+/**
+ * Escape a regex from regex specific characters
+ * @param string the string to escape
+ * @param flags the regexp flags, default to i
+ */
+export function escapeRegExp(string?: string, flags = 'i') {
+    return string ? new RegExp(string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), flags) : undefined;
+}

package/src/utils/utils.string.test.ts

@@ -0,0 +1,18 @@
+import { removeIfStartsWith, suffixIfDoesNotExist } from './utils.string';
+
+describe('Test String utils', () => {
+    test('suffixIfDoesNotExist', () => {
+        expect(suffixIfDoesNotExist('toto', '/')).toStrictEqual('toto/');
+        expect(suffixIfDoesNotExist('toto/', '/')).toStrictEqual('toto/');
+        expect(suffixIfDoesNotExist('', '/')).toStrictEqual('');
+        expect(suffixIfDoesNotExist(undefined, '/')).toStrictEqual(undefined);
+    });
+
+    test('removeIfStartsWith', () => {
+        expect(removeIfStartsWith('toto', '/')).toStrictEqual('toto');
+        expect(removeIfStartsWith('/toto/', '/')).toStrictEqual('toto/');
+        expect(removeIfStartsWith('/', '/')).toStrictEqual('');
+        expect(removeIfStartsWith('', '/')).toStrictEqual('');
+        expect(removeIfStartsWith(undefined, '/')).toStrictEqual(undefined);
+    });
+});

package/src/utils/utils.string.ts

@@ -0,0 +1,7 @@
+export function suffixIfDoesNotExist(str: string | undefined, suffix: string) {
+    return str && !str.endsWith(suffix) ? `${str}${suffix}` : str;
+}
+
+export function removeIfStartsWith(str: string | undefined, prefix: string) {
+    return str && str.startsWith(prefix) ? str.split('').slice(prefix.length).join('') : str;
+}

package/src/variables.scss

@@ -0,0 +1,67 @@
+//     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;

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "baseUrl": "./src",
+        "outDir": "./build",
+        "noImplicitAny": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "target": "es6",
+        "jsx": "react",
+        "declaration": true,
+        "allowSyntheticDefaultImports": true,
+        "sourceMap": true,
+        "strict": true,
+        "sourceRoot": "/react/jamespot-react-components"
+    },
+    "includes": ["src"]
+}

package/webpack.config.js

@@ -0,0 +1,70 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = (env) => ({
+    mode: env.NODE_ENV || 'none',
+    watch: env.WATCH === 'true' ? true : false,
+
+    // Enable sourcemaps for debugging webpack's output.
+    devtool: 'source-map',
+
+    resolve: {
+        // Add '.ts' and '.tsx' as resolvable extensions.
+        extensions: ['.ts', '.tsx', '.js'],
+        modules: [path.resolve(__dirname, 'src'), 'node_modules'],
+    },
+    plugins: [
+        // Ignore all locale files of moment.js
+        new webpack.IgnorePlugin({
+            resourceRegExp: /^\.\/locale$/,
+            contextRegExp: /moment$/,
+        }),
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.ts(x?)$/,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: 'ts-loader',
+                    },
+                ],
+            },
+            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                exclude: /node_modules/,
+                loader: 'source-map-loader',
+            },
+            {
+                test: /\.css$/i,
+                use: ['style-loader', 'css-loader'],
+            },
+            {
+                test: /\.(jpe?g|gif|bmp|svg|mp3|mp4|ogg|wav|eot|ttf|woff|woff2)$/,
+                loader: 'file-loader',
+                options: {
+                    name: '[name].[contenthash].[ext]',
+                    outputPath: 'assets',
+                    publicPath: env.PUBLIC_PATH,
+                },
+            },
+        ],
+    },
+    externals: { moment: 'moment' },
+    entry: {
+        app: './src/index.tsx',
+    },
+    output: {
+        clean: true,
+        path: path.resolve(__dirname, './build'),
+        filename: 'jamespot-react-components.js',
+        libraryTarget: 'commonjs2',
+        globalObject: 'this',
+        umdNamedDefine: true,
+    },
+});