jamespot-react-components 1.0.0

package/src/components/JRCThemeProvider/theme-reset.css

@@ -0,0 +1,246 @@
+.react-reset {
+    visibility: visible;
+}
+
+.react-reset input[type='text'] {
+    box-shadow: none;
+}
+
+.react-reset * {
+    align-content: stretch;
+    align-items: stretch;
+    align-self: auto;
+    animation-delay: 0s;
+    animation-direction: normal;
+    animation-duration: 0s;
+    animation-fill-mode: none;
+    animation-iteration-count: 1;
+    animation-name: none;
+    animation-play-state: running;
+    animation-timing-function: ease;
+    azimuth: center;
+    backface-visibility: visible;
+    background-attachment: scroll;
+    background-blend-mode: normal;
+    background-clip: border-box;
+    background-color: transparent;
+    background-image: none;
+    background-origin: padding-box;
+    background-position: 0% 0%;
+    background-repeat: repeat;
+    background-size: auto auto;
+    border-block-end-color: currentcolor;
+    border-block-end-style: none;
+    border-block-end-width: medium;
+    border-block-start-color: currentcolor;
+    border-block-start-style: none;
+    border-block-start-width: medium;
+    border-bottom-color: currentcolor;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-style: none;
+    border-bottom-width: medium;
+    border-collapse: separate;
+    border-image-outset: 0s;
+    border-image-repeat: stretch;
+    border-image-slice: 100%;
+    border-image-source: none;
+    border-image-width: 1;
+    border-inline-end-color: currentcolor;
+    border-inline-end-style: none;
+    border-inline-end-width: medium;
+    border-inline-start-color: currentcolor;
+    border-inline-start-style: none;
+    border-inline-start-width: medium;
+    border-left-color: currentcolor;
+    border-left-style: none;
+    border-left-width: medium;
+    border-right-color: currentcolor;
+    border-right-style: none;
+    border-right-width: medium;
+    border-spacing: 0;
+    border-top-color: currentcolor;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top-style: none;
+    border-top-width: medium;
+    bottom: auto;
+    box-decoration-break: slice;
+    box-shadow: none;
+    box-sizing: content-box;
+    break-after: auto;
+    break-before: auto;
+    break-inside: auto;
+    caption-side: top;
+    caret-color: auto;
+    clear: none;
+    clip: auto;
+    clip-path: none;
+    color: inherit;
+    column-count: auto;
+    column-fill: balance;
+    column-gap: normal;
+    column-rule-color: currentcolor;
+    column-rule-style: none;
+    column-rule-width: medium;
+    column-span: none;
+    column-width: auto;
+    content: normal;
+    counter-increment: none;
+    counter-reset: none;
+    empty-cells: show;
+    filter: none;
+    flex-basis: auto;
+    flex-direction: row;
+    flex-grow: 0;
+    flex-shrink: 1;
+    flex-wrap: nowrap;
+    float: none;
+    font-feature-settings: normal;
+    font-kerning: auto;
+    font-language-override: normal;
+    font-stretch: normal;
+    font-synthesis: weight style;
+    font-variant: normal;
+    font-variant-alternates: normal;
+    font-variant-caps: normal;
+    font-variant-east-asian: normal;
+    font-variant-ligatures: normal;
+    font-variant-numeric: normal;
+    font-variant-position: normal;
+    grid-auto-columns: auto;
+    grid-auto-flow: row;
+    grid-auto-rows: auto;
+    grid-column-end: auto;
+    grid-column-gap: 0;
+    grid-column-start: auto;
+    grid-row-end: auto;
+    grid-row-gap: 0;
+    grid-row-start: auto;
+    grid-template-areas: none;
+    grid-template-columns: none;
+    grid-template-rows: none;
+    hyphens: manual;
+    image-orientation: 0deg;
+    image-rendering: auto;
+    image-resolution: 1dppx;
+    ime-mode: auto;
+    inline-size: auto;
+    isolation: auto;
+    justify-content: flex-start;
+    left: auto;
+    letter-spacing: inherit;
+    line-break: auto;
+    list-style-image: none;
+    list-style-position: outside;
+    margin-block-end: 0;
+    margin-block-start: 0;
+    margin-bottom: 0;
+    margin-inline-end: 0;
+    margin-inline-start: 0;
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 0;
+    mask-clip: border-box;
+    mask-composite: add;
+    mask-image: none;
+    mask-mode: match-source;
+    mask-origin: border-box;
+    mask-position: 0% 0%;
+    mask-repeat: repeat;
+    mask-size: auto;
+    mask-type: luminance;
+    max-height: none;
+    max-width: none;
+    min-height: 0;
+    min-inline-size: 0;
+    min-width: 0;
+    mix-blend-mode: normal;
+    object-fit: fill;
+    object-position: 50% 50%;
+    offset-block-end: auto;
+    offset-block-start: auto;
+    offset-inline-end: auto;
+    offset-inline-start: auto;
+    opacity: 1;
+    order: 0;
+    orphans: 2;
+    outline-color: initial;
+    outline-offset: 0;
+    outline-style: none;
+    outline-width: medium;
+    overflow: visible;
+    overflow-wrap: normal;
+    overflow-x: visible;
+    overflow-y: visible;
+    padding-block-end: 0;
+    padding-block-start: 0;
+    padding-bottom: 0;
+    padding-inline-end: 0;
+    padding-inline-start: 0;
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 0;
+    page-break-after: auto;
+    page-break-before: auto;
+    page-break-inside: auto;
+    perspective: none;
+    perspective-origin: 50% 50%;
+    pointer-events: auto;
+    position: static;
+    quotes: initial;
+    resize: none;
+    right: auto;
+    ruby-align: space-around;
+    ruby-merge: separate;
+    ruby-position: over;
+    scroll-behavior: auto;
+    scroll-snap-coordinate: none;
+    scroll-snap-destination: 0px 0px;
+    scroll-snap-points-x: none;
+    scroll-snap-points-y: none;
+    scroll-snap-type: none;
+    shape-image-threshold: 0;
+    shape-margin: 0;
+    shape-outside: none;
+    tab-size: 8;
+    table-layout: auto;
+    text-align: initial;
+    text-align-last: auto;
+    text-combine-upright: none;
+    text-emphasis-color: currentcolor;
+    text-emphasis-position: over right;
+    text-emphasis-style: none;
+    text-indent: 0;
+    text-justify: auto;
+    text-orientation: mixed;
+    text-overflow: clip;
+    text-rendering: auto;
+    text-shadow: none;
+    text-transform: none;
+    text-underline-position: auto;
+    top: auto;
+    touch-action: auto;
+    transform: none;
+    transform-box: border-box;
+    transform-origin: 50% 50% 0;
+    transform-style: flat;
+    transition-delay: 0s;
+    transition-duration: 0s;
+    transition-property: all;
+    transition-timing-function: ease;
+    vertical-align: baseline;
+    visibility: inherit;
+    widows: 2;
+    will-change: auto;
+    word-break: normal;
+    word-spacing: normal;
+    word-wrap: normal;
+    writing-mode: horizontal-tb;
+    z-index: auto;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -webkit-box-shadow: none;
+    appearance: none;
+}

package/src/components/JRCTooltip/JRCTooltip.stories.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import JRCTooltip, { JRCTooltipProps } from './JRCTooltip';
+import { withReduxForm } from 'storybook/decorators';
+import styled from 'styled-components';
+import { Meta, Story } from '@storybook/react';
+
+export default {
+    title: 'JRCTooltip',
+    component: JRCTooltip,
+    decorators: [withReduxForm],
+    argTypes: {
+        children: {
+            table: { disable: true },
+        },
+    },
+} as Meta;
+
+const P = styled.p`
+    text-align: center;
+`;
+
+const Template: Story<JRCTooltipProps> = (args) => (
+    <div style={{ width: 'fit-content', margin: 'auto' }}>
+        <JRCTooltip {...args}>{args.children}</JRCTooltip>
+    </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    title: 'Tooltip title',
+    description: 'Very small tooltip',
+    children: (
+        <P>
+            <span>Open the tooltip</span>
+        </P>
+    ),
+};
+
+export const SmallTooltip = Template.bind({});
+SmallTooltip.args = {
+    description: 'Small Tooltip',
+    children: (
+        <P>
+            <span>Open the tooltip</span>
+        </P>
+    ),
+};
+
+export const LargeTooltipWithTitle = Template.bind({});
+LargeTooltipWithTitle.args = {
+    title: 'Titre',
+    description: 'Performance review work flows can we take this offline nail jelly to the hothouse wall.',
+    children: (
+        <P>
+            <span>Open the tooltip</span>
+        </P>
+    ),
+};
+
+export const LargeTooltipWithoutTitle = Template.bind({});
+LargeTooltipWithoutTitle.args = {
+    description: 'Performance review work flows can we take this offline nail jelly to the hothouse wall.',
+    children: (
+        <P>
+            <span>Open the tooltip</span>
+        </P>
+    ),
+};
+
+export const LargeTooltipWithButton = Template.bind({});
+LargeTooltipWithButton.args = {
+    title: 'Titre',
+    description: 'Performance review work flows can we take this offline nail jelly to the hothouse wall.',
+    button: {
+        onClick: () => {
+            // eslint-disable-next-line no-console
+            console.log('Fermeture');
+        },
+        children: 'Bouton',
+    },
+    closeButton: true,
+    children: (
+        <P>
+            <span>Open the tooltip</span>
+        </P>
+    ),
+};

package/src/components/JRCTooltip/JRCTooltip.tsx

@@ -0,0 +1,145 @@
+import JRCButton, { JRCButtonProps } from 'components/JRCButton/JRCButton';
+import JRCIcon from 'components/JRCIcon/JRCIcon';
+import * as React from 'react';
+import ReactTooltip from 'react-tooltip';
+import { JRCText } from 'components/JRCTypo/JRCTypo';
+import { v4 as uuidv4 } from 'uuid';
+import styled, { ThemeContext } from 'styled-components';
+
+/**
+ * Props type for JRCTooltip
+ * @member children : enclosed React component (on which the tooltip is set)
+ * @member title string, optional: Tooltip title
+ * @member description: string : Content of the tooltip
+ * @member closeButton: boolean, optional: Add a close button to the tooltip
+ * @member button: @see JRCButtonProps, optional: Add a button to the tooltip
+ * @member position: optional, "top" | "bottom" | "left" | "right": Chose the placement of the tooltip
+ */
+
+export interface JRCTooltipProps {
+    children: React.ReactNode;
+    /** Tooltip title */
+    title?: string;
+    /** Content of the tooltip */
+    description: string;
+    /** Add a close button to the tooltip */
+    closeButton?: boolean;
+    /** Add a button to the tooltip */
+    button?: JRCButtonProps;
+    /** Chose the placement of the tooltip */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const sizes = {
+    padding: {
+        small: '4px 8px',
+        medium: '8px 12px',
+        large: '12px',
+    },
+} as { padding: Record<string, string> };
+
+const Tooltip = styled((props) => <ReactTooltip {...props} />)<{ sizeTooltip: keyof typeof sizes.padding }>`
+    &&& {
+        border-radius: 8px;
+        padding: ${(props) => sizes.padding[props.sizeTooltip]};
+        max-width: 360px;
+        opacity: 1;
+        border: none;
+    }
+`;
+const Content = styled.div`
+    width: 100%;
+`;
+const Container = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-direction: row-reverse;
+`;
+const CloseButton = styled.a`
+    cursor: pointer;
+    opacity: 50%;
+    &:hover {
+        opacity: 70%;
+    }
+`;
+const ButtonWrapper = styled.div`
+    display: flex;
+    justify-content: flex-end;
+`;
+const Text = styled(JRCText)<{ sizeTooltip: keyof typeof sizes.padding }>`
+    margin: 0;
+    text-align: ${(props) => (props.sizeTooltip === 'small' ? 'center' : 'initial')};
+`;
+
+export const JRCTooltip = (props: JRCTooltipProps) => {
+    const id = uuidv4();
+    const sizeTooltip =
+        props.closeButton || props.button
+            ? 'large'
+            : props.title || (props.description && props.description.length > 50)
+            ? 'medium'
+            : 'small';
+    const color = React.useContext(ThemeContext).color;
+    const hide = () => {
+        ReactTooltip.hide();
+    };
+    return (
+        <>
+            <span
+                aria-describedby={id}
+                data-event="mouseenter focusin"
+                data-event-off={props.closeButton && props.button ? 'click' : 'mouseleave'}
+                data-tip
+                data-for={id}>
+                {props.children}
+            </span>
+            <Tooltip
+                effect="solid"
+                role="tooltip"
+                id={id}
+                place={props.position || 'bottom'}
+                arrowColor={color.navy}
+                backgroundColor={color.navy}
+                borderColor={color.navy}
+                textColor={color.white}
+                clickable
+                globalEventOff="click"
+                scrollHide={true}
+                resizeHide={true}
+                sizeTooltip={sizeTooltip}>
+                <div>
+                    <Container>
+                        {sizeTooltip === 'large' && props.closeButton && props.button && (
+                            <CloseButton onClick={hide}>
+                                <JRCIcon name="icon-times" size={24} color="white" />
+                            </CloseButton>
+                        )}
+                        <Content>
+                            {props.title && <JRCText size="l">{props.title}</JRCText>}
+                            <Text size="m" sizeTooltip={sizeTooltip}>
+                                {props.description}
+                            </Text>
+                        </Content>
+                    </Container>
+                    <ButtonWrapper>
+                        {sizeTooltip === 'large' && props.button && (
+                            <JRCButton
+                                {...props.button}
+                                onClick={(e) => {
+                                    // FIXME TYPESCRIPT-STRICT
+                                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                    // @ts-ignore
+                                    if (props.button.onClick) props.button.onClick(e);
+                                    hide();
+                                }}
+                            />
+                        )}
+                    </ButtonWrapper>
+                </div>
+            </Tooltip>
+        </>
+    );
+};
+
+export default JRCTooltip;

package/src/components/JRCTypo/JRCTypo.stories.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import {
+    JRCH1,
+    JRCH2,
+    JRCH3,
+    JRCH4,
+    JRCH5,
+    JRCText,
+    JRCH1Props,
+    JRCH2Props,
+    JRCH3Props,
+    JRCH4Props,
+    JRCH5Props,
+    JRCTextProps,
+} from './JRCTypo';
+
+export default {
+    title: 'Typography',
+};
+
+const TemplateH1 = (args: JRCH1Props) => <JRCH1 {...args}>Portez ce vieux whisky au juge blond qui fume</JRCH1>;
+export const H1 = TemplateH1.bind({});
+const TemplateH2 = (args: JRCH2Props) => <JRCH2 {...args}>Portez ce vieux whisky au juge blond qui fume</JRCH2>;
+export const H2 = TemplateH2.bind({});
+const TemplateH3 = (args: JRCH3Props) => <JRCH3 {...args}>Portez ce vieux whisky au juge blond qui fume</JRCH3>;
+export const H3 = TemplateH3.bind({});
+const TemplateH4 = (args: JRCH4Props) => <JRCH4 {...args}>Portez ce vieux whisky au juge blond qui fume</JRCH4>;
+export const H4 = TemplateH4.bind({});
+const TemplateH5 = (args: JRCH5Props) => <JRCH5 {...args}>Portez ce vieux whisky au juge blond qui fume</JRCH5>;
+export const H5 = TemplateH5.bind({});
+const TemplateP = (args: JRCTextProps) => (
+    <JRCText {...args}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet purus laoreet, suscipit mi vel, dictum
+        nisi. Donec gravida laoreet eros in pharetra. Sed maximus lorem lobortis tincidunt tincidunt. Phasellus magna
+        metus, efficitur vitae laoreet at, interdum et diam. Duis tincidunt imperdiet magna id suscipit. Donec rhoncus
+        massa in dapibus facilisis. Nam molestie malesuada rhoncus. Suspendisse suscipit libero non tellus mattis, sed
+        placerat nunc luctus. Duis gravida varius ullamcorper. Sed venenatis neque at felis fringilla, vel congue metus
+        sagittis. Praesent sollicitudin ligula nisi, et pretium urna auctor sed.
+    </JRCText>
+);
+export const P = TemplateP.bind({});

package/src/components/JRCTypo/JRCTypo.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+
+const Typography = css`
+    line-height: 1.5em;
+`;
+
+/**
+ * @deprecated use JRCTypography instead
+ * Props Type for JRCH1
+ * @see HTML.H1 props
+ */
+export type JRCH1Props = React.ComponentPropsWithoutRef<'h1'>;
+const JRCH1 = styled.h1<JRCH1Props>`
+    ${Typography};
+    font-size: 32px;
+`;
+
+/**
+ * @deprecated use JRCTypography instead
+ * Props Type for JRCH2
+ * @see HTML.H2 props
+ */
+export type JRCH2Props = React.ComponentPropsWithoutRef<'h2'>;
+
+const JRCH2 = styled.h2<JRCH2Props>`
+    ${Typography};
+    font-size: 24px;
+`;
+
+/**
+ * @deprecated use JRCTypography instead
+ * Props Type for JRCH3
+ * @see HTML.H3 props
+ */
+export type JRCH3Props = React.ComponentPropsWithoutRef<'h3'>;
+const JRCH3 = styled.h3<JRCH3Props>`
+    ${Typography};
+    font-size: 18px;
+`;
+
+/**
+ * @deprecated use JRCTypography instead
+ * Props Type for JRCH4
+ * @see HTML.H4 props
+ */
+export type JRCH4Props = React.ComponentPropsWithoutRef<'h3'>;
+const JRCH4 = styled.h4<JRCH4Props>`
+    ${Typography};
+    font-size: 16px;
+    font-weight: bold;
+`;
+
+/**
+ * @deprecated use JRCTypography instead
+ * Props Type for JRCH5
+ * @see HTML.H5 props
+ */
+export type JRCH5Props = React.ComponentPropsWithoutRef<'h5'>;
+const JRCH5 = styled.h5<JRCH5Props>`
+    ${Typography};
+    font-size: 16px;
+    text-transform: uppercase;
+`;
+
+/**
+ * @deprecated use JRCTypography instead
+ * Props Type for JRCText
+ * @member size: optionnal size of the text 's'|'m'|'l'
+ */
+export interface JRCTextProps {
+    /** Size of the text */
+    size?: 's' | 'm' | 'l';
+}
+
+const sizeMap = new Map([
+    ['s', '12px'],
+    ['m', '14px'], // default
+    ['l', '16px'],
+]);
+
+const Text = css<JRCTextProps>`
+    ${Typography};
+    font-size: ${(props) => sizeMap.get(props.size || 'm')};
+`;
+
+const JRCText = styled.p<JRCTextProps>`
+    ${Text};
+`;
+
+export { JRCH1, JRCH2, JRCH3, JRCH4, JRCH5, Text, JRCText };

package/src/components/JRCTypography/JRCTypography.d.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Colors, FontWeight } from '../../styles/theme';
+
+export type TSizes = 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
+export type TVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+export type TWeight = keyof FontWeight;
+
+/**
+ * Props type for JRCTypography
+ * @member children ReactNode content of the button
+ * @member className optional Additional className for override the component
+ * @member weight optional You can custom the font-weight with the weight property
+ * @member size You can change the font-size with the size property
+ * @member variant You can change the semantic element with the variant property
+ */
+export interface JRCTypographyProps {
+    /** Additional className for override the component: */
+    className?: string;
+    /** You can custom the font-weight with the weight property */
+    weight?: TWeight;
+    /** You can change the font-size with the size property */
+    size?: TSizes;
+    /** Text color */
+    color?: Colors;
+    /**ReactNode | text content of the button */
+    children: string | React.ReactNode;
+    /** You can change the semantic element with the variant property */
+    variant?: TVariants;
+}

package/src/components/JRCTypography/JRCTypography.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { JRCTypography } from './JRCTypography';
+import { Meta, Story } from '@storybook/react';
+import { JRCTypographyProps } from './JRCTypography.d';
+
+export default {
+    component: JRCTypography,
+    title: 'JRCTypography',
+} as Meta;
+
+const JRCTypographyDefault: Story<JRCTypographyProps> = (args) => (
+    <JRCTypography {...args}>JRCTypography</JRCTypography>
+);
+
+export const Typography = JRCTypographyDefault.bind({});
+Typography.args = {
+    children: 'JRCTypography',
+};

package/src/components/JRCTypography/JRCTypography.styles.tsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { JRCTypographyProps } from './JRCTypography.d';
+
+export const SIZES = Object.freeze({
+    s: '12px',
+    m: '14px',
+    l: '16px',
+    xl: '18px',
+    xxl: '24px',
+    xxxl: '32px',
+});
+
+export const Typography = styled.p<Pick<JRCTypographyProps, 'size' | 'weight' | 'color'>>`
+    line-height: 1.5em;
+    ${(props) => props.size && `font-size: ${SIZES[props.size]}`};
+    ${(props) => props.weight && `font-weight: ${props.theme.font.weight[props.weight]}`};
+    ${(props) => props.color && `color: ${props.theme.color[props.color]}`};
+`;