jamespot-react-components 1.0.0

package/src/components/Form/Input/JRCSelect/JRCInputSelectAsync.stories.tsx

@@ -0,0 +1,83 @@
+import { Meta, Story } from '@storybook/react';
+import { useForm } from 'react-hook-form';
+import { SubmitHandler } from 'react-hook-form/dist/types/form';
+import * as React from 'react';
+import { JRCInputSelect } from './JRCInputSelect';
+import { JRCInputSelectProps } from './JRCInputSelect.types';
+
+export default {
+    title: 'Inputs/new',
+    component: JRCInputSelect,
+} as Meta;
+
+type Data = {
+    animal: string;
+    cat: string;
+};
+
+const Template: Story<JRCInputSelectProps<{ select: Array<Data> }>> = (args) => {
+    const { handleSubmit, control, reset } = useForm({
+        defaultValues: {
+            select: [{ animal: 'elephant', cat: 'big' }],
+        },
+        criteriaMode: 'all',
+    });
+
+    const onSubmit: SubmitHandler<{ select: Array<Data> }> = (data) => {
+        alert(JSON.stringify(data, null, 2));
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)}>
+            <p>-.-</p>
+            <JRCInputSelect {...args} name="select" control={control} />
+            <p>-.-</p>
+            <input type="submit" />
+            <input type="reset" />
+            <button type="button" onClick={() => reset()}>
+                Custom Reset
+            </button>
+        </form>
+    );
+};
+
+export const AsyncSelect = Template.bind({});
+AsyncSelect.args = {
+    label: 'label',
+    htmlFor: 'htmlFor',
+    placeholder: 'placeholder',
+    labelIsLegend: false,
+    description: 'description',
+
+    asyncPromise: (input) =>
+        Promise.resolve(
+            [
+                { animal: 'elephant', cat: 'big' },
+                { animal: 'girage', cat: 'tall' },
+                { animal: 'mouse', cat: 'big' },
+            ].filter((option) => new RegExp(input).test(option.animal)),
+        ),
+
+    multiple: true,
+    getLabel: (option: any) => `~${option.animal}~`,
+    getValue: (option: any) => `~${option.animal}~`,
+
+    searchable: true,
+    getSearch: (option: any) => `${option.animal}`,
+
+    group: true,
+    getGroup: 'cat',
+
+    components: {
+        Option: (props: any) => {
+            return (
+                <div>
+                    {props.option.cat}-{props.option.animal}
+                </div>
+            );
+        },
+        // SelectedOption: (props: any) => {
+        //     return <div>{props.value}</div>
+        // }
+    },
+};

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

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import check from 'assets/check.svg';
+import error from 'assets/x.svg';
+import { InputState } from './JRCFormFieldRender';
+import { DataCy } from '../../../types/dataAttributes';
+
+/**
+ * Input styles are &&& encapsulated in order to go over the reset styles
+ * and the not-resseted legacy style set with input[type="toto"]
+ */
+export const cssCommonStyledInput = css<InputState>`
+    &&&& {
+        font-size: 16px;
+        color: ${(props) => props.theme.color.grey5};
+        border: 1px solid ${(props) => props.theme.color.grey2};
+        width: 100%;
+        height: 40px;
+        border-radius: 8px;
+        box-sizing: border-box;
+        padding: 8px 16px;
+        margin-bottom: 4px;
+        box-shadow: none;
+        transition: border 0.2s, box-shadow 0.2s;
+
+        &:hover {
+            box-shadow: 0 0 2px ${(props) => props.theme.color.grey2};
+        }
+        &:focus {
+            border-color: ${(props) => props.theme.color.navy};
+            box-shadow: 0 0 2px ${(props) => props.theme.color.grey4};
+        }
+
+        ${(props) =>
+            props.valid &&
+            `
+            border-color: ${props.theme.color.green};
+            background-image: url(${check});
+            background-repeat: no-repeat;
+            background-position: calc(100% - 14px) 14px;
+            background-size: 12px;
+            &:focus {
+                border-color: ${props.theme.color.green};
+                box-shadow: none;
+            }
+        `}
+
+        ${(props) =>
+            props.error &&
+            `
+            border-color: ${props.theme.color.orange};
+            background-image: url(${error});
+            background-repeat: no-repeat;
+            background-position: calc(100% - 14px) 14px;
+            background-size: 12px;
+        `}
+    }
+`;
+
+export const cssStyledInput = css<InputState>`
+    ${cssCommonStyledInput}
+    &&&::placeholder {
+        color: ${(props) => props.theme.color.grey3};
+        font-size: 16px;
+        font-style: normal;
+        opacity: 1;
+    }
+`;
+
+export const StyledInput = styled.input.attrs<InputState>(({ dataCy, ...props }) => ({ 'data-cy': dataCy, ...props }))`
+    ${cssStyledInput}
+    &&& {
+        &.inputFile {
+            visibility: hidden;
+            display: none;
+        }
+    }
+`;
+
+export type StyledSelectProps = DataCy & {
+    searchable?: boolean;
+};
+
+export const StyledSelect = styled(StyledInput)<StyledSelectProps>`
+    ${(props) => !props.searchable && 'caret-color: transparent'};
+    ${(props) => !props.searchable && 'cursor: pointer'};
+`;
+
+export const MaxLengthIndicatorContainer = styled.div`
+    text-align: right;
+    margin-top: -24px;
+`;
+
+export const MaxLengthIndicator = ({ maxLength, actualLength }: { maxLength?: number; actualLength: number }) => (
+    <>
+        {maxLength && (
+            <MaxLengthIndicatorContainer>
+                {actualLength}/{maxLength}
+            </MaxLengthIndicatorContainer>
+        )}
+    </>
+);

package/src/components/Form/Input/ReduxFormControls.ts

@@ -0,0 +1,135 @@
+import { useMemo } from 'react';
+import { IntlShape } from 'react-intl';
+
+export type ControlsProps = {
+    required?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    number?: boolean;
+    minValue?: number | string;
+    maxValue?: number | string;
+    email?: boolean;
+    url?: boolean;
+    date?: boolean;
+};
+
+/***
+ * Format
+ * @todo trad
+ */
+const required = (intl: IntlShape) => (value: boolean) =>
+    !value || (value && Array.isArray(value) && !value.length)
+        ? intl.formatMessage({
+              id: 'GLOBAL_Form_Controls_Required',
+          })
+        : undefined;
+const maxLength = (intl: IntlShape, max: number) => (value: string) =>
+    value && value.length > max
+        ? intl.formatMessage(
+              {
+                  id: 'GLOBAL_Form_Controls_MaxLength',
+              },
+              { max },
+          )
+        : undefined;
+
+const minLength = (intl: IntlShape, min: number) => (value: string) =>
+    value && value.length < min
+        ? intl.formatMessage(
+              {
+                  id: 'GLOBAL_Form_Controls_MinLength',
+              },
+              { min },
+          )
+        : undefined;
+
+const number = (intl: IntlShape) => (value: any) =>
+    // TODO : doesn't work !!
+    value && isNaN(Number(value))
+        ? intl.formatMessage({
+              id: 'GLOBAL_Form_Controls_Number',
+          })
+        : undefined;
+
+const minValue = (intl: IntlShape, min: number | string) => (value: number) =>
+    value && value < +min
+        ? intl.formatMessage(
+              {
+                  id: 'GLOBAL_FORM_CONTROLS_MinValue',
+              },
+              { min },
+          )
+        : undefined;
+
+const maxValue = (intl: IntlShape, max: number | string) => (value: number) =>
+    value && value > +max
+        ? intl.formatMessage(
+              {
+                  id: 'GLOBAL_Form_Controls_MaxValue',
+              },
+              { max },
+          )
+        : undefined;
+
+const email = (intl: IntlShape) => (value: string) =>
+    value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
+        ? intl.formatMessage({
+              id: 'ERROR_Mail_Invalid',
+          })
+        : undefined;
+
+const url = (intl: IntlShape) => (value: string) =>
+    // eslint-disable-next-line no-useless-escape
+    value && !/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/i.test(value)
+        ? intl.formatMessage({
+              id: 'GLOBAL_Form_Controls_Url',
+          })
+        : undefined;
+
+const date = (intl: IntlShape) => (value: string) =>
+    value && !/^\d{2,2}\/\d{2,2}\/\d{4,4}$/i.test(value)
+        ? intl.formatMessage({
+              id: 'GLOBAL_Form_Controls_Date',
+          })
+        : undefined;
+
+export const getControls = (props: ControlsProps & { intl: IntlShape }) => {
+    const controls = [];
+    if (props.required) {
+        controls.push(required(props.intl));
+    }
+    if (props.minLength) {
+        controls.push(minLength(props.intl, props.minLength));
+    }
+    if (props.maxLength) {
+        controls.push(maxLength(props.intl, props.maxLength));
+    }
+    if (props.number) {
+        controls.push(number(props.intl));
+    }
+    if (props.date) {
+        controls.push(date(props.intl));
+    }
+    if (props.minValue) {
+        controls.push(minValue(props.intl, props.minValue));
+    }
+    if (props.maxValue) {
+        controls.push(maxValue(props.intl, props.maxValue));
+    }
+    if (props.email) {
+        controls.push(email(props.intl));
+    }
+    if (props.url) {
+        controls.push(url(props.intl));
+    }
+    return controls;
+};
+
+export const useControls = (props: ControlsProps & { intl: IntlShape }) => {
+    const { required, minLength, maxLength, number, minValue, maxValue, email, url } = props;
+    const validate = useMemo(
+        () => getControls({ ...props }),
+        [required, minLength, maxLength, number, minValue, maxValue, email, url],
+    );
+    return validate;
+};

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

@@ -0,0 +1,22 @@
+import { JRCButtonProps } from 'components/JRCButton/JRCButton';
+
+export interface extraInfoProps {
+    label?: string;
+    placeholder?: string;
+    htmlFor?: string;
+    description?: string;
+    helper?: {
+        message: string;
+        title?: string;
+        button?: JRCButtonProps;
+        closeButton?: boolean;
+        position?: 'top' | 'bottom' | 'left' | 'right';
+    };
+}
+
+export interface entryProps {
+    input: any;
+    placeholder: string;
+    classes: string;
+    htmlFor: string;
+}

package/src/components/JRCAlert/JRCAlert.stories.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable no-console */
+import * as React from 'react';
+import JRCAlert, { JRCAlertProps } from './JRCAlert';
+import { withReduxForm } from '../../storybook/decorators';
+import { Story, Meta } from '@storybook/react';
+
+export default {
+    title: 'JRCAlert',
+    component: JRCAlert,
+    decorators: [withReduxForm],
+} as Meta;
+
+const Template: Story<JRCAlertProps> = (args) => <JRCAlert {...args}>{args.children}</JRCAlert>;
+
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Custom Alert',
+    description: 'Everyone loves cauliflower cheese caerphilly',
+    color: 'success',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+    label: "C'est tout bon !",
+    description:
+        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+    buttons: [
+        {
+            color: 'primary',
+            children: 'Action',
+        },
+        {
+            color: 'primary',
+            children: 'Accéder au contenu',
+            variant: 'outlined',
+            onClick: () => console.log('Accès au contenu'),
+        },
+    ],
+    hasLoader: true,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+    label: 'Aïe, il y a eu un couac...',
+    color: 'error',
+    description: 'Votre contenu a bien été crée !',
+    hasLoader: true,
+    buttons: [
+        {
+            color: 'primary',
+            children: 'Action',
+        },
+    ],
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+    label: 'Attention !',
+    color: 'warning',
+    hasLoader: true,
+    description: 'Votre contenu a bien été crée !',
+};

package/src/components/JRCAlert/JRCAlert.tsx

@@ -0,0 +1,147 @@
+import * as React from 'react';
+import styled, { ThemeContext } from 'styled-components';
+import { JRCIconButton } from '../JRCIconButton/JRCIconButton';
+import JRCButton, { JRCButtonProps } from 'components/JRCButton/JRCButton';
+import { JRCTypography } from '../JRCTypography/JRCTypography';
+import JRCIcon from '../JRCIcon/JRCIcon';
+
+export type AlertType = 'success' | 'error' | 'warning';
+
+export interface JRCAlertProps extends React.ComponentPropsWithoutRef<'div'> {
+    /** Alert title */
+    label: string;
+    /** Main content of the alert */
+    description?: string;
+    /** Define the type of alert */
+    type?: AlertType;
+    /** Add a loader which will make the alert disappear after the timeout */
+    hasLoader?: boolean;
+    /** Timeout */
+    timeout?: number;
+    /** Add buttons on the alert */
+    buttons?: JRCButtonProps[];
+}
+
+const Alert = styled.div<{ description?: string; type: AlertType }>`
+    width: 320px;
+    border-radius: 8px;
+    background: ${(props) => (props.description ? 'white' : props.theme.color[getColor(props.type)])};
+    overflow: hidden;
+    ${(props) => props.description && `box-shadow: 0 0 5px ${props.theme.color.grey2}`};
+`;
+const Container = styled.div<{ center: boolean }>`
+    display: flex;
+    padding: 8px;
+    justify-content: space-between;
+    ${(props) => props.center && 'align-items: center'};
+    flex-direction: row;
+`;
+const Content = styled.div`
+    width: 100%;
+    margin-left: 8px;
+`;
+const Header = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`;
+
+const getColor = (type: AlertType) => {
+    switch (type) {
+        case 'error':
+            return 'orange';
+        case 'warning':
+            return 'yellow';
+        default:
+            return 'green';
+    }
+};
+
+const icons = {
+    success: 'icon-check-circle',
+    error: 'icon-times-circle',
+    warning: 'icon-exclamation-circle',
+};
+
+const JRCAlert = ({ label, description, hasLoader, buttons, type = 'success', timeout = 3000 }: JRCAlertProps) => {
+    const colors = React.useContext(ThemeContext).color;
+    const [showAlert, setShowAlert] = React.useState(true);
+    const closeAlert = () => setShowAlert(false);
+
+    React.useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            setShowAlert(false);
+        }, timeout);
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [timeout]);
+
+    return (
+        (showAlert && (
+            <Alert
+                description={description}
+                type={type}
+                style={{ '--timeout': `${timeout}ms` } as React.CSSProperties}
+                className="slide-right"
+                role="alert"
+                aria-live="polite">
+                <Container center={!description}>
+                    <JRCIcon name={icons[type]} color={description ? getColor(type) : 'white'} />
+                    <Content>
+                        <Header>
+                            <JRCTypography
+                                size={description ? 'm' : 'l'}
+                                weight="medium"
+                                color={(!description && 'white') || undefined}>
+                                {label}
+                            </JRCTypography>
+                            <JRCIconButton
+                                size="small"
+                                icon="icon-times"
+                                onClick={closeAlert}
+                                aria-label="close"
+                                color={(!description && 'white') || undefined}
+                            />
+                        </Header>
+                        {description && <JRCTypography>{description}</JRCTypography>}
+                        {buttons &&
+                            buttons.map((button: JRCButtonProps, index: number) => (
+                                <JRCButton
+                                    key={index}
+                                    {...button}
+                                    float="right"
+                                    onClick={(e) => {
+                                        if (button.onClick) button.onClick(e);
+                                        closeAlert();
+                                    }}>
+                                    {button.children}
+                                </JRCButton>
+                            ))}
+                    </Content>
+                </Container>
+                {hasLoader && description && <ProgressBar color={description ? colors[getColor(type)] : 'white'} />}
+            </Alert>
+        )) ||
+        null
+    );
+};
+
+/**
+ * @member color color of the bar
+ */
+interface ProgressBarProps {
+    color: string;
+}
+
+const Bar = styled.div<ProgressBarProps>`
+    height: 4px;
+    border-radius: 2px;
+    background-color: ${(props) => props.color};
+`;
+
+const ProgressBar = ({ color }: ProgressBarProps) => {
+    return <Bar color={color} className="scale-left" />;
+};
+
+export default JRCAlert;

package/src/components/JRCAppContainer/JRCAppContainer.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+    display: flex;
+    max-width: 1600px;
+    width: 100%;
+    margin: auto;
+    gap: 16px;
+    padding: 16px;
+`;
+
+export interface JRCAppContainerProps {
+    children: React.ReactNode;
+}
+
+const JRCAppContainer = (props: JRCAppContainerProps) => <Container>{props.children}</Container>;
+
+export { JRCAppContainer };

package/src/components/JRCAppHeader/JRCAppHeader.stories.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { JRCAppHeader } from './JRCAppHeader';
+import { JRCAppHeaderProps } from './JRCAppHeader.types';
+import { Meta, Story } from '@storybook/react';
+
+export default {
+    title: 'JRCAppHeader',
+    component: JRCAppHeader,
+} as Meta;
+
+const Template: Story<JRCAppHeaderProps> = (args) => {
+    return (
+        <div style={{ width: '200px' }}>
+            <JRCAppHeader {...args} />
+        </div>
+    );
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+    icon: 'icon-edit',
+    color: 'green',
+    title: 'Studio',
+    description: 'Créez et gérez vos propres applications métiers sans une seule ligne de code !',
+};

package/src/components/JRCAppHeader/JRCAppHeader.styles.tsx

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+export const HeaderContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 8px;
+`;
+
+export const FlexDC = styled.div`
+    display: flex;
+    flex-direction: column;
+`;
+
+export const WrapperTop = styled.div`
+    display: flex;
+    flex-basis: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+`;

package/src/components/JRCAppHeader/JRCAppHeader.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { JRCAppHeaderProps } from './JRCAppHeader.types';
+import JRCIcon from '../JRCIcon/JRCIcon';
+import { JRCTypography } from '../JRCTypography/JRCTypography';
+import { FormattedMessage } from 'react-intl';
+import { HeaderContainer } from './JRCAppHeader.styles';
+import { WrapperTop } from './JRCAppHeader.styles';
+
+const defaultProps = {};
+
+const JRCAppHeader = (props: JRCAppHeaderProps) => {
+    return (
+        <HeaderContainer>
+            <WrapperTop>
+                <JRCIcon name={props.icon} variant="circle" color={props.color} size={40} />
+                <JRCTypography variant="h1" size="xl" weight="medium">
+                    <FormattedMessage id={props.title} />
+                </JRCTypography>
+            </WrapperTop>
+            <FormattedMessage id={props.description} />
+        </HeaderContainer>
+    );
+};
+
+JRCAppHeader.defaultProps = defaultProps;
+export { JRCAppHeader };

package/src/components/JRCAppHeader/JRCAppHeader.types.tsx

@@ -0,0 +1,6 @@
+export interface JRCAppHeaderProps {
+    icon: string;
+    color: string;
+    title: string;
+    description: string;
+}