jamespot-react-components 1.0.0

package/src/components/Form/Input/JRCFormCheckbox/JRCFormCheckbox.types.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { JRCTooltipProps } from '../../../JRCTooltip/JRCTooltip';
+
+/**
+ * Checkbox option
+ * @member label input label displayed in front of the checkbox
+ * @member value value set in the redux form
+ * @member disabled whether the option is disabled
+ */
+export type CheckboxOption = {
+    label: string | JSX.Element;
+    value: string | number;
+    disabled?: boolean;
+};
+
+/**
+ * props of the JRCFormCheckbox components
+ * @member label legend, used as the label of the checkboxes
+ * @member description, description, part of the html label
+ * @member helper, tooltip, part of the html label
+ * @member name field name, used a redux form key
+ * @member checkboxMode checkbox, toggle (both rendered as input type checkbox) or radio
+ * @member options checkbox options @see CheckboxOption
+ * @member direction column or row display
+ * @member variant variant
+ * @member labelPosition Display the label before or after the checkbox
+ * @member SortByChecked Automatically place the checked options first
+ * @member backgroundOnHover whether the background is colored on hover
+ * @member backgroundOnSelect whether the background is colored on select
+ * @member reduxFormValueType Only for the checkboxMode checkbox et radio
+ *     redux form value form. If set to boolean (and if there is only one option),
+ *     the redux form value will be a boolean instead of an array
+ */
+export interface JRCFormCheckboxProps extends React.ComponentPropsWithoutRef<'input'> {
+    label?: string | JSX.Element;
+    description?: string;
+    helper?: Omit<JRCTooltipProps, 'children'>;
+    name: string;
+    checkboxMode?: 'checkbox' | 'toggle' | 'radio';
+    options: CheckboxOption[];
+    direction?: 'row' | 'column' | 'two-columns';
+    variant?: 'default' | 'outlined';
+    labelPosition?: 'before' | 'after';
+    SortByChecked?: boolean;
+    backgroundOnHover?: boolean;
+    backgroundOnSelect?: boolean;
+    reduxFormValueType?: 'array' | 'boolean';
+}
+
+export type CheckboxLabelProps = {
+    direction: string;
+    variant: string;
+    checked: boolean;
+    disabled: boolean;
+    labelPosition: string;
+    backgroundOnHover: boolean;
+    backgroundOnSelect: boolean;
+};

package/src/components/Form/Input/JRCFormCheckbox/JRCRadio.tsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import { FormInputProps } from '../JRCFormFieldRender';
+
+export const JRCRadio = styled.input.attrs(() => ({ type: 'radio' }))<FormInputProps>`
+    &&& {
+        flex-shrink: 0;
+        display: inline-block;
+        outline: none;
+        margin: 0 10px 0 5px;
+        width: 12px;
+        height: 12px;
+        border-radius: 100%;
+        box-shadow: 0px 0px 0px 1px ${(props) => props.theme.color.grey3};
+        background-color: ${(props) => props.theme.color.grey1};
+        &:checked {
+            border: 3px solid ${(props) => props.theme.color.primary};
+            box-shadow: 0 0 0 1px ${(props) => props.theme.color.primaryD20};
+            background-color: ${(props) => props.theme.color.white};
+        }
+        &:disabled {
+            border: 1px solid ${(props) => props.theme.color.grey2};
+            background: none;
+            cursor: default;
+            box-shadow: none;
+        }
+    }
+`;

package/src/components/Form/Input/JRCFormCheckbox/JRCToggle.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { FormInputProps } from '../JRCFormFieldRender';
+
+const ToggleWrapper = styled.div`
+    flex-shrink: 0;
+    margin: 5px 8px;
+    position: relative;
+    box-sizing: border-box;
+    display: inline-block;
+    width: 28px;
+    height: 16px;
+
+    input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    span {
+        position: absolute;
+        border-radius: 8px;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: ${(props) => props.theme.color.grey1};
+        border: 1px solid ${(props) => props.theme.color.grey3};
+        -webkit-transition: 0.4s;
+        transition: 0.4s;
+    }
+
+    span:before {
+        position: absolute;
+        content: '';
+        height: 12px;
+        width: 12px;
+        border-radius: 50%;
+        left: 1px;
+        bottom: 1px;
+        background-color: white;
+        -webkit-transition: 0.4s;
+        transition: 0.4s;
+    }
+
+    input:checked + span {
+        background-color: ${(props) => props.theme.color.primary};
+        border: 1px solid ${(props) => props.theme.color.primaryD20};
+    }
+
+    input:checked + span:before {
+        -webkit-transform: translateX(12px);
+        -ms-transform: translateX(12px);
+        transform: translateX(12px);
+    }
+
+    input:disabled + span {
+        background-color: ${(props) => props.theme.color.white};
+        border: 1px solid ${(props) => props.theme.color.grey2};
+        cursor: default;
+        &:before {
+            background-color: ${(props) => props.theme.color.grey2};
+        }
+    }
+`;
+
+export const JRCToggle = React.forwardRef(function (props: FormInputProps, ref: React.ForwardedRef<HTMLInputElement>) {
+    return (
+        <ToggleWrapper>
+            <input {...props} type="checkbox" ref={ref}></input>
+            {/* empty span for toggle styling */}
+            <span></span>
+        </ToggleWrapper>
+    );
+});

package/src/components/Form/Input/JRCFormColor/JRCFormColor.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { withReduxForm } from '../../../../storybook/decorators';
+import { JRCWritableFormInputProps } from '../JRCFormFieldRender';
+import { JRCFormColorField } from './JRCFormColor';
+import { Meta, Story } from '@storybook/react';
+
+export default {
+    title: 'Inputs/to-refactor',
+    component: JRCFormColorField,
+    decorators: [withReduxForm],
+} as Meta;
+
+const Template: Story<JRCWritableFormInputProps> = (args) => <JRCFormColorField {...args} />;
+
+export const InputColor = Template.bind({});
+InputColor.args = {
+    name: 'name-storybook',
+    label: 'Couleur du groupe',
+    description: 'La couleur sera utilisé pour styliser la page du groupe',
+    placeholder: '#2B3C4D',
+    helper: {
+        description: 'Nous vous conseillons une couleur qui se contraste bien avec le blanc et avec le noir',
+        title: 'Indication',
+    },
+    required: false,
+};

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

@@ -0,0 +1,418 @@
+import * as React from 'react';
+import { Field, WrappedFieldInputProps } from 'redux-form';
+import JRCIcon from '../../../JRCIcon/JRCIcon';
+import JRCFormFieldRender, { FormInputProps, JRCWritableFormInputProps } from '../JRCFormFieldRender';
+import { useControls } from '../ReduxFormControls';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { ClickAwayListener } from '../../Common/ClickAwayListener';
+
+const StyledInputColor = styled.input.attrs(() => ({ type: 'color' }))<FormInputProps>`
+    &&& {
+        padding: 8px;
+        margin: 0px;
+        width: 40px;
+        height: 40px;
+        cursor: pointer;
+        border-radius: 4px;
+        ::-webkit-color-swatch {
+            border-color: transparent;
+        }
+        ::-moz-color-swatch {
+            border-color: transparent;
+        }
+    }
+`;
+
+const colors = [
+    'rgb(255, 235, 238)',
+    'rgb(255, 205, 210)',
+    'rgb(239, 154, 154)',
+    'rgb(229, 115, 115)',
+    'rgb(239, 83, 80)',
+    'rgb(244, 67, 54)',
+    'rgb(229, 57, 53)',
+    'rgb(211, 47, 47)',
+    'rgb(198, 40, 40)',
+    'rgb(183, 28, 28)',
+    'rgb(252, 228, 236)',
+    'rgb(248, 187, 208)',
+    'rgb(244, 143, 177)',
+    'rgb(240, 98, 146)',
+    'rgb(236, 64, 122)',
+    'rgb(233, 30, 99)',
+    'rgb(216, 27, 96)',
+    'rgb(194, 24, 91)',
+    'rgb(173, 20, 87)',
+    'rgb(136, 14, 79)',
+    'rgb(243, 229, 245)',
+    'rgb(225, 190, 231)',
+    'rgb(206, 147, 216)',
+    'rgb(186, 104, 200)',
+    'rgb(171, 71, 188)',
+    'rgb(156, 39, 176)',
+    'rgb(142, 36, 170)',
+    'rgb(123, 31, 162)',
+    'rgb(106, 27, 154)',
+    'rgb(74, 20, 140)',
+    'rgb(237, 231, 246)',
+    'rgb(209, 196, 233)',
+    'rgb(179, 157, 219)',
+    'rgb(149, 117, 205)',
+    'rgb(126, 87, 194)',
+    'rgb(103, 58, 183)',
+    'rgb(94, 53, 177)',
+    'rgb(81, 45, 168)',
+    'rgb(69, 39, 160)',
+    'rgb(49, 27, 146)',
+    'rgb(232, 234, 246)',
+    'rgb(197, 202, 233)',
+    'rgb(159, 168, 218)',
+    'rgb(121, 134, 203)',
+    'rgb(92, 107, 192)',
+    'rgb(63, 81, 181)',
+    'rgb(57, 73, 171)',
+    'rgb(48, 63, 159)',
+    'rgb(40, 53, 147)',
+    'rgb(26, 35, 126)',
+    'rgb(227, 242, 253)',
+    'rgb(187, 222, 251)',
+    'rgb(144, 202, 249)',
+    'rgb(100, 181, 246)',
+    'rgb(66, 165, 245)',
+    'rgb(33, 150, 243)',
+    'rgb(30, 136, 229)',
+    'rgb(25, 118, 210)',
+    'rgb(21, 101, 192)',
+    'rgb(13, 71, 161)',
+    'rgb(225, 245, 254)',
+    'rgb(179, 229, 252)',
+    'rgb(129, 212, 250)',
+    'rgb(79, 195, 247)',
+    'rgb(41, 182, 246)',
+    'rgb(3, 169, 244)',
+    'rgb(3, 155, 229)',
+    'rgb(2, 136, 209)',
+    'rgb(2, 119, 189)',
+    'rgb(1, 87, 155)',
+    'rgb(224, 247, 250)',
+    'rgb(178, 235, 242)',
+    'rgb(128, 222, 234)',
+    'rgb(77, 208, 225)',
+    'rgb(38, 198, 218)',
+    'rgb(0, 188, 212)',
+    'rgb(0, 172, 193)',
+    'rgb(0, 151, 167)',
+    'rgb(0, 131, 143)',
+    'rgb(0, 96, 100)',
+    'rgb(224, 242, 241)',
+    'rgb(178, 223, 219)',
+    'rgb(128, 203, 196)',
+    'rgb(77, 182, 172)',
+    'rgb(38, 166, 154)',
+    'rgb(0, 150, 136)',
+    'rgb(0, 137, 123)',
+    'rgb(0, 121, 107)',
+    'rgb(0, 105, 92)',
+    'rgb(0, 77, 64)',
+    'rgb(232, 245, 233)',
+    'rgb(200, 230, 201)',
+    'rgb(165, 214, 167)',
+    'rgb(129, 199, 132)',
+    'rgb(102, 187, 106)',
+    'rgb(76, 175, 80)',
+    'rgb(67, 160, 71)',
+    'rgb(56, 142, 60)',
+    'rgb(46, 125, 50)',
+    'rgb(27, 94, 32)',
+    'rgb(241, 248, 233)',
+    'rgb(220, 237, 200)',
+    'rgb(197, 225, 165)',
+    'rgb(174, 213, 129)',
+    'rgb(156, 204, 101)',
+    'rgb(139, 195, 74)',
+    'rgb(124, 179, 66)',
+    'rgb(104, 159, 56)',
+    'rgb(85, 139, 47)',
+    'rgb(51, 105, 30)',
+    'rgb(249, 251, 231)',
+    'rgb(240, 244, 195)',
+    'rgb(230, 238, 156)',
+    'rgb(220, 231, 117)',
+    'rgb(212, 225, 87)',
+    'rgb(205, 220, 57)',
+    'rgb(192, 202, 51)',
+    'rgb(175, 180, 43)',
+    'rgb(158, 157, 36)',
+    'rgb(130, 119, 23)',
+    'rgb(255, 253, 231)',
+    'rgb(255, 249, 196)',
+    'rgb(255, 245, 157)',
+    'rgb(255, 241, 118)',
+    'rgb(255, 238, 88)',
+    'rgb(255, 235, 59)',
+    'rgb(253, 216, 53)',
+    'rgb(251, 192, 45)',
+    'rgb(249, 168, 37)',
+    'rgb(245, 127, 23)',
+    'rgb(255, 248, 225)',
+    'rgb(255, 236, 179)',
+    'rgb(255, 224, 130)',
+    'rgb(255, 213, 79)',
+    'rgb(255, 202, 40)',
+    'rgb(255, 193, 7)',
+    'rgb(255, 179, 0)',
+    'rgb(255, 160, 0)',
+    'rgb(255, 143, 0)',
+    'rgb(255, 111, 0)',
+    'rgb(255, 243, 224)',
+    'rgb(255, 224, 178)',
+    'rgb(255, 204, 128)',
+    'rgb(255, 183, 77)',
+    'rgb(255, 167, 38)',
+    'rgb(255, 152, 0)',
+    'rgb(251, 140, 0)',
+    'rgb(245, 124, 0)',
+    'rgb(239, 108, 0)',
+    'rgb(230, 81, 0)',
+    'rgb(251, 233, 231)',
+    'rgb(255, 204, 188)',
+    'rgb(255, 171, 145)',
+    'rgb(255, 138, 101)',
+    'rgb(255, 112, 67)',
+    'rgb(255, 87, 34)',
+    'rgb(244, 81, 30)',
+    'rgb(230, 74, 25)',
+    'rgb(216, 67, 21)',
+    'rgb(191, 54, 12)',
+    'rgb(239, 235, 233)',
+    'rgb(215, 204, 200)',
+    'rgb(188, 170, 164)',
+    'rgb(161, 136, 127)',
+    'rgb(141, 110, 99)',
+    'rgb(121, 85, 72)',
+    'rgb(109, 76, 65)',
+    'rgb(93, 64, 55)',
+    'rgb(78, 52, 46)',
+    'rgb(62, 39, 35)',
+    'rgb(250, 250, 250)',
+    'rgb(245, 245, 245)',
+    'rgb(238, 238, 238)',
+    'rgb(224, 224, 224)',
+    'rgb(189, 189, 189)',
+    'rgb(158, 158, 158)',
+    'rgb(117, 117, 117)',
+    'rgb(97, 97, 97)',
+    'rgb(66, 66, 66)',
+    'rgb(33, 33, 33)',
+    'rgb(255, 255, 255)',
+    'rgb(207, 216, 220)',
+    'rgb(176, 190, 197)',
+    'rgb(144, 164, 174)',
+    'rgb(120, 144, 156)',
+    'rgb(96, 125, 139)',
+    'rgb(84, 110, 122)',
+    'rgb(69, 90, 100)',
+    'rgb(55, 71, 79)',
+    'rgb(0, 0, 0)',
+];
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 500px;
+    background-color: white;
+    position: relative;
+`;
+
+const PickerContainer = styled.div`
+    position: absolute;
+    top: 65px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: 400px;
+    height: 213px;
+    background-color: white;
+    z-index: 1;
+    padding: 8px;
+    border-radius: 8px;
+    box-shadow: 0 0 2px ${(props) => props.theme.color.grey2};
+`;
+
+const SelectColor = styled.div`
+    display: flex;
+    flex: 8%;
+    cursor: pointer;
+    margin: 2px;
+    border-radius: 0px;
+    &:hover {
+        box-shadow: inset 0 0 4px #9e9e9e;
+    }
+`;
+
+const EditPicker = styled.div`
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0px;
+    padding: 5px;
+    border-radius: 4px;
+`;
+
+const Palette = styled.div`
+    display: flex;
+    flexdirection: row;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+`;
+
+const ColorHex = styled.input`
+    &&& {
+        width: 100px;
+        height: 40px;
+        margin: 0px;
+        margin-left: 8px;
+        text-align: center;
+        border-radius: 4px;
+    }
+`;
+
+const Text = styled.span`
+    font-size: 15px;
+    font-weight: 400;
+    margin-left: 5px;
+`;
+
+const RGBToHex = (color: string): string => {
+    if (!color.includes('rgb')) {
+        return color;
+    }
+
+    const rgb: number[] = color
+        .substring(4, color.length - 1)
+        .replace(/ /g, '')
+        .split(',')
+        .map((i) => Number(i));
+    let r = rgb[0].toString(16);
+    let g = rgb[1].toString(16);
+    let b = rgb[2].toString(16);
+
+    if (r.length == 1) r = '0' + r;
+    if (g.length == 1) g = '0' + g;
+    if (b.length == 1) b = '0' + b;
+
+    return '#' + r + g + b;
+};
+
+const JRCFormColorFieldRender = (input: WrappedFieldInputProps, props: JRCWritableFormInputProps) => {
+    const [open, setOpen] = React.useState(false);
+
+    React.useEffect(() => {
+        if (input.value == '') input.onChange('#000000');
+    }, []);
+
+    const handleClickAway = () => setOpen(false);
+    const handleOpen = () => setOpen(!open);
+
+    return (
+        <ClickAwayListener onClickAway={handleClickAway}>
+            <Container>
+                <EditPicker>
+                    {/* dirty fix to go over a css legacy rule, will be refactored when component is designed */}
+                    <StyledInputColor
+                        id={props.name}
+                        {...input}
+                        style={{ textAlign: 'center', boxSizing: 'border-box' }}
+                    />
+                    <ColorHex
+                        type="text"
+                        onChange={({ target }) => input.onChange(RGBToHex(target.value))}
+                        value={RGBToHex(input.value)}
+                        style={{ boxSizing: 'border-box' }}
+                    />
+                    <Palette onClick={handleOpen}>
+                        <svg
+                            id="Capa_2"
+                            enableBackground="new 0 0 512 512"
+                            height="20"
+                            width="20"
+                            viewBox="0 0 512 512"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <g>
+                                <g>
+                                    <path
+                                        d="M106,361c-24.813,0-45,20.187-45,45s20.187,45,45,45s45-20.187,45-45S130.813,361,106,361z M106,421
+                                        c-8.271,0-15-6.729-15-15s6.729-15,15-15s15,6.729,15,15S114.271,421,106,421z"
+                                    />
+                                </g>
+                            </g>
+                            <g>
+                                <g>
+                                    <path
+                                        d="M484.927,304.736c10.233-13.848,12.118-33.159,2.813-49.274l-59.969-104.87c-10.374-17.968-32.25-26.167-51.764-20.951
+                                        c4.155-18.677-3.997-38.714-21.423-48.775L250.667,20.87c-14.841-8.57-32.586-7.692-46.233,0.749C196.525,8.666,182.256,0,166,0
+                                        H45C20.187,0,0,20.187,0,45c0,10.405,0,410.022,0,422c0,24.813,20.187,45,45,45c11.653,0,364.968,0,422,0
+                                        c24.813,0,45-20.187,45-45V346C512,327.557,500.843,311.677,484.927,304.736z M181,467c0,8.271-6.729,15-15,15H45
+                                        c-8.271,0-15-6.729-15-15c0-6.853,0-129.418,0-136h151V467z M181,301H30V180h151V301z M181,150H30V45c0-8.271,6.729-15,15-15h121
+                                        c8.271,0,15,6.729,15,15V150z M211,59.568l4.171-7.225c4.138-7.165,13.332-9.629,20.496-5.492l103.917,59.996
+                                        c7.165,4.137,9.628,13.331,5.48,20.516l-17.332,30.127c-0.434,0.641-0.824,1.307-1.152,2.002L211,360.395V59.568z M211,420.555
+                                        l140.222-243.737l28.993-16.739c7.35-4.243,17.431-1.666,21.545,5.459l59.969,104.87c4.148,7.184,1.729,16.394-5.529,20.584
+                                        c-10.712,6.201-234.651,135.846-245.2,141.953V420.555z M482,467c0,8.271-6.729,15-15,15H208.42
+                                        c1.599-4.51,2.496-9.346,2.565-14.381L446.97,331H467c8.271,0,15,6.729,15,15V467z"
+                                    />
+                                </g>
+                            </g>
+                        </svg>
+                        <Text>Afficher la palette</Text>
+                        <div>
+                            <JRCIcon name={open ? 'icon-angle-down' : 'icon-angle-up'} key={'icon-angle'} size={24} />
+                        </div>
+                    </Palette>
+                </EditPicker>
+                {/* dirty fix to go over a css legacy rule, will be refactored when component is designed */}
+                <PickerContainer
+                    style={
+                        open
+                            ? { display: 'flex', boxSizing: 'content-box' }
+                            : { display: 'none', boxSizing: 'content-box' }
+                    }>
+                    {colors.map((color, index) => (
+                        <SelectColor
+                            key={index}
+                            onClick={() => {
+                                input.onChange(RGBToHex(color));
+                            }}
+                            style={{ backgroundColor: color }}
+                        />
+                    ))}
+                </PickerContainer>
+            </Container>
+        </ClickAwayListener>
+    );
+};
+
+/**
+ * Component used as a <input type="text"/>
+ * @param props JRCWritableFormInputProps
+ * validation props: required
+ * @returns JSX.Element
+ */
+export const JRCFormColorField = (props: JRCWritableFormInputProps) => {
+    const validate = useControls({
+        intl: useIntl(),
+        required: props.required,
+    });
+    return (
+        <Field
+            component={JRCFormFieldRender}
+            renderInputFct={(input: WrappedFieldInputProps) => JRCFormColorFieldRender(input, props)}
+            validate={validate}
+            htmlFor={props.name}
+            {...props}
+        />
+    );
+};