jamespot-react-components 1.0.16 → 1.0.65

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

@@ -1,246 +0,0 @@
-.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

@@ -1,87 +0,0 @@
-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

@@ -1,148 +0,0 @@
-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')};
-`;
-const InlineBlock = styled.span`
-    display: inline-block;
-`;
-
-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 (
-        <>
-            <InlineBlock
-                aria-describedby={id}
-                data-event="mouseenter focusin"
-                data-event-off={props.closeButton && props.button ? 'click' : 'mouseleave'}
-                data-tip
-                data-for={id}>
-                {props.children}
-            </InlineBlock>
-            <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

@@ -1,42 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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]}`};
-`;