jamespot-react-components 1.0.16 → 1.0.65

package/.history/src/components/JRCAvatar/JRCAvatar_20211221120047.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import JRCImg, { JRCImgProps } from '../JRCImg/JRCImg';
-
-/**
- * Props type for JRCAvatar
- * @see JRCImgProps
- * /!\ It is not recommended to use the url property as it will result in overriding
- * the default image size
- *
- * @property size, multiple of 8px - The avatar image is downloaded
- *         with a size twice of the circle/square container in order to make it clear
- *         in retina like screens. default: xs
- * @property variant, optional 'circle' | 'square' - default: circle
- * @property focusable - whether the element is focusable. Independent of onClick property
- * @property subAvatar - represent a miniature avatar on the bottom right corner
- * @property className - className passed to the div wrapper
- * @property cssColor - background-color
- */
-export type JRCAvatarProps = Omit<JRCImgProps, 'size | width | height'> & {
-    size?: number;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    subAvatar?: Omit<JRCImgProps, 'size | width | height'>;
-    className?: string;
-    cssColor?: string;
-};
-
-const BASE_MULTIPLE = 8;
-
-/**
- * border is calculated to be 2px when the avatar is 24px in width and 4px when the avatar is 80px
- */
-const Avatar = styled(JRCImg).attrs<{ variant?: 'circle' | 'square'; focusable?: boolean }>((props) => ({
-    ...props,
-    border: props.width / 28 + 8 / 7,
-}))<{ variant?: 'circle' | 'square'; focusable?: boolean; border?: number }>`
-
-        cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-        border-radius: ${(props) => (props.variant === 'square' ? '20%' : '50%')};
-        background-color : ${(props) => props.cssColor || 'transparent'}};
-        vertical-align: middle;
-        & + img {
-            border: ${(props) => props.border}px solid white;
-            box-sizing: content-box;
-            margin-left: -${(props) => props.width / 2 + props.border}px;
-            margin-bottom: -${(props) => props.border}px;
-        }
-    
-`;
-
-const JRCAvatar = (props: JRCAvatarProps) => {
-    const { subAvatar, className, size, ...otherProps } = props;
-    const imgSize = (size || 3) * BASE_MULTIPLE;
-    return (
-        <div className={className}>
-            {React.createElement(Avatar, { ...otherProps, width: imgSize, height: imgSize })}
-            {props.subAvatar && React.createElement(Avatar, { ...subAvatar, width: imgSize / 2, height: imgSize / 2 })}
-        </div>
-    );
-};
-
-export default JRCAvatar;

package/.history/src/components/JRCAvatar/JRCAvatar_20211221120048.tsx

@@ -1,63 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import JRCImg, { JRCImgProps } from '../JRCImg/JRCImg';
-
-/**
- * Props type for JRCAvatar
- * @see JRCImgProps
- * /!\ It is not recommended to use the url property as it will result in overriding
- * the default image size
- *
- * @property size, multiple of 8px - The avatar image is downloaded
- *         with a size twice of the circle/square container in order to make it clear
- *         in retina like screens. default: xs
- * @property variant, optional 'circle' | 'square' - default: circle
- * @property focusable - whether the element is focusable. Independent of onClick property
- * @property subAvatar - represent a miniature avatar on the bottom right corner
- * @property className - className passed to the div wrapper
- * @property cssColor - background-color
- */
-export type JRCAvatarProps = Omit<JRCImgProps, 'size | width | height'> & {
-    size?: number;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    subAvatar?: Omit<JRCImgProps, 'size | width | height'>;
-    className?: string;
-    cssColor?: string;
-};
-
-const BASE_MULTIPLE = 8;
-
-/**
- * border is calculated to be 2px when the avatar is 24px in width and 4px when the avatar is 80px
- */
-const Avatar = styled(JRCImg).attrs<{ variant?: 'circle' | 'square'; focusable?: boolean }>((props) => ({
-    ...props,
-    border: props.width / 28 + 8 / 7,
-}))<{ variant?: 'circle' | 'square'; focusable?: boolean; border?: number }>`
-        cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-        border-radius: ${(props) => (props.variant === 'square' ? '20%' : '50%')};
-        background-color : ${(props) => props.cssColor || 'transparent'}};
-        vertical-align: middle;
-        & + img {
-            border: ${(props) => props.border}px solid white;
-            box-sizing: content-box;
-            margin-left: -${(props) => props.width / 2 + props.border}px;
-            margin-bottom: -${(props) => props.border}px;
-        }
-    
-`;
-
-const JRCAvatar = (props: JRCAvatarProps) => {
-    const { subAvatar, className, size, ...otherProps } = props;
-    const imgSize = (size || 3) * BASE_MULTIPLE;
-    return (
-        <div className={className}>
-            {React.createElement(Avatar, { ...otherProps, width: imgSize, height: imgSize })}
-            {props.subAvatar && React.createElement(Avatar, { ...subAvatar, width: imgSize / 2, height: imgSize / 2 })}
-        </div>
-    );
-};
-
-export default JRCAvatar;

package/.history/src/components/JRCAvatar/JRCAvatar_20211221120052.tsx

@@ -1,63 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import JRCImg, { JRCImgProps } from '../JRCImg/JRCImg';
-
-/**
- * Props type for JRCAvatar
- * @see JRCImgProps
- * /!\ It is not recommended to use the url property as it will result in overriding
- * the default image size
- *
- * @property size, multiple of 8px - The avatar image is downloaded
- *         with a size twice of the circle/square container in order to make it clear
- *         in retina like screens. default: xs
- * @property variant, optional 'circle' | 'square' - default: circle
- * @property focusable - whether the element is focusable. Independent of onClick property
- * @property subAvatar - represent a miniature avatar on the bottom right corner
- * @property className - className passed to the div wrapper
- * @property cssColor - background-color
- */
-export type JRCAvatarProps = Omit<JRCImgProps, 'size | width | height'> & {
-    size?: number;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    subAvatar?: Omit<JRCImgProps, 'size | width | height'>;
-    className?: string;
-    cssColor?: string;
-};
-
-const BASE_MULTIPLE = 8;
-
-/**
- * border is calculated to be 2px when the avatar is 24px in width and 4px when the avatar is 80px
- */
-const Avatar = styled(JRCImg).attrs<{ variant?: 'circle' | 'square'; focusable?: boolean }>((props) => ({
-    ...props,
-    border: props.width / 28 + 8 / 7,
-}))<{ variant?: 'circle' | 'square'; focusable?: boolean; border?: number }>`
-    cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-    border-radius: ${(props) => (props.variant === 'square' ? '20%' : '50%')};
-    background-color : ${(props) => props.cssColor || 'transparent'}};
-    vertical-align: middle;
-    & + img {
-        border: ${(props) => props.border}px solid white;
-        box-sizing: content-box;
-        margin-left: -${(props) => props.width / 2 + props.border}px;
-        margin-bottom: -${(props) => props.border}px;
-    }
-    
-`;
-
-const JRCAvatar = (props: JRCAvatarProps) => {
-    const { subAvatar, className, size, ...otherProps } = props;
-    const imgSize = (size || 3) * BASE_MULTIPLE;
-    return (
-        <div className={className}>
-            {React.createElement(Avatar, { ...otherProps, width: imgSize, height: imgSize })}
-            {props.subAvatar && React.createElement(Avatar, { ...subAvatar, width: imgSize / 2, height: imgSize / 2 })}
-        </div>
-    );
-};
-
-export default JRCAvatar;

package/.history/src/components/JRCAvatar/JRCAvatar_20211221120055.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import JRCImg, { JRCImgProps } from '../JRCImg/JRCImg';
-
-/**
- * Props type for JRCAvatar
- * @see JRCImgProps
- * /!\ It is not recommended to use the url property as it will result in overriding
- * the default image size
- *
- * @property size, multiple of 8px - The avatar image is downloaded
- *         with a size twice of the circle/square container in order to make it clear
- *         in retina like screens. default: xs
- * @property variant, optional 'circle' | 'square' - default: circle
- * @property focusable - whether the element is focusable. Independent of onClick property
- * @property subAvatar - represent a miniature avatar on the bottom right corner
- * @property className - className passed to the div wrapper
- * @property cssColor - background-color
- */
-export type JRCAvatarProps = Omit<JRCImgProps, 'size | width | height'> & {
-    size?: number;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    subAvatar?: Omit<JRCImgProps, 'size | width | height'>;
-    className?: string;
-    cssColor?: string;
-};
-
-const BASE_MULTIPLE = 8;
-
-/**
- * border is calculated to be 2px when the avatar is 24px in width and 4px when the avatar is 80px
- */
-const Avatar = styled(JRCImg).attrs<{ variant?: 'circle' | 'square'; focusable?: boolean }>((props) => ({
-    ...props,
-    border: props.width / 28 + 8 / 7,
-}))<{ variant?: 'circle' | 'square'; focusable?: boolean; border?: number }>`
-    cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-    border-radius: ${(props) => (props.variant === 'square' ? '20%' : '50%')};
-    background-color : ${(props) => props.cssColor || 'transparent'}};
-    vertical-align: middle;
-    & + img {
-        border: ${(props) => props.border}px solid white;
-        box-sizing: content-box;
-        margin-left: -${(props) => props.width / 2 + props.border}px;
-        margin-bottom: -${(props) => props.border}px;
-    }
-`;
-
-const JRCAvatar = (props: JRCAvatarProps) => {
-    const { subAvatar, className, size, ...otherProps } = props;
-    const imgSize = (size || 3) * BASE_MULTIPLE;
-    return (
-        <div className={className}>
-            {React.createElement(Avatar, { ...otherProps, width: imgSize, height: imgSize })}
-            {props.subAvatar && React.createElement(Avatar, { ...subAvatar, width: imgSize / 2, height: imgSize / 2 })}
-        </div>
-    );
-};
-
-export default JRCAvatar;

package/.history/src/components/JRCAvatar/JRCAvatar_20211221120153.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react';
-
-import styled from 'styled-components';
-import JRCImg, { JRCImgProps } from '../JRCImg/JRCImg';
-
-/**
- * Props type for JRCAvatar
- * @see JRCImgProps
- * /!\ It is not recommended to use the url property as it will result in overriding
- * the default image size
- *
- * @property size, multiple of 8px - The avatar image is downloaded
- *         with a size twice of the circle/square container in order to make it clear
- *         in retina like screens. default: xs
- * @property variant, optional 'circle' | 'square' - default: circle
- * @property focusable - whether the element is focusable. Independent of onClick property
- * @property subAvatar - represent a miniature avatar on the bottom right corner
- * @property className - className passed to the div wrapper
- * @property cssColor - background-color
- */
-export type JRCAvatarProps = Omit<JRCImgProps, 'size | width | height'> & {
-    size?: number;
-    variant?: 'circle' | 'square';
-    focusable?: boolean;
-    subAvatar?: Omit<JRCImgProps, 'size | width | height'>;
-    className?: string;
-    cssColor?: string;
-};
-
-const BASE_MULTIPLE = 8;
-
-/**
- * border is calculated to be 2px when the avatar is 24px in width and 4px when the avatar is 80px
- */
-const Avatar = styled(JRCImg).attrs<{ variant?: 'circle' | 'square'; focusable?: boolean }>((props) => ({
-    ...props,
-    border: props.width / 28 + 8 / 7,
-}))<{ variant?: 'circle' | 'square'; focusable?: boolean; border?: number }>`
-    cursor: ${(props) => (props.focusable ? 'pointer' : 'default')};
-    border-radius: ${(props) => (props.variant === 'square' ? '20%' : '50%')};
-    background-color: ${(props) => props.cssColor || 'transparent'};
-    vertical-align: middle;
-    & + img {
-        border: ${(props) => props.border}px solid white;
-        box-sizing: content-box;
-        margin-left: -${(props) => props.width / 2 + props.border}px;
-        margin-bottom: -${(props) => props.border}px;
-    }
-`;
-
-const JRCAvatar = (props: JRCAvatarProps) => {
-    const { subAvatar, className, size, ...otherProps } = props;
-    const imgSize = (size || 3) * BASE_MULTIPLE;
-    return (
-        <div className={className}>
-            {React.createElement(Avatar, { ...otherProps, width: imgSize, height: imgSize })}
-            {props.subAvatar && React.createElement(Avatar, { ...subAvatar, width: imgSize / 2, height: imgSize / 2 })}
-        </div>
-    );
-};
-
-export default JRCAvatar;

package/.history/src/components/JRCButton/JRCButton.stories_20210114075959.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react'
-import JRCButton, { JRCButtonProps } from './JRCButton'
-import { action } from '@storybook/addon-actions';
-
-
-
-export default {
-    title: 'JRCButton',
-    component: JRCButton,
-}
-
-
-export const allButtons = () => {
-    return (
-        <div>
-            <JRCButton onClick={action('button-click')} type="submit" color="primary">Submit</JRCButton>
-            <JRCButton onClick={action('button-click')} color="green">Green</JRCButton>
-            <JRCButton onClick={action('button-click')} color="red">Red</JRCButton>
-            <JRCButton onClick={action('button-click')} color="grey">Grey</JRCButton>
-        </div>
-    )
-}
-
-
-/***
- * Submit button for a basic form
- */
-const Template = (args: JRCButtonProps & { label: string }) => <JRCButton {...args}> {args.label}</JRCButton>;
-export const Primary = Template.bind({});
-Primary.args = {
-    label: 'Submit',
-    color: 'primary',
-    onClick: action('button-click'),
-    type: 'submit'
-};
-
-export const Green = Template.bind({});
-Green.args = {
-    label: 'Green',
-    color: 'green',
-    onClick: action('button-click'),
-};
-
-export const Red = Template.bind({});
-Red.args = {
-    label: 'Red',
-    color: 'red',
-    onClick: action('button-click'),
-};
-
-export const Grey = Template.bind({});
-Grey.args = {
-    label: 'Grey',
-    color: 'grey',
-    onClick: action('button-click'),
-};
-
-export const Disable = Template.bind({});
-Disable.args = {
-    label: 'Submit',
-    color: 'primary',
-    onClick: action('button-click'),
-    type: 'submit',
-    disabled: true
-};

package/.history/src/components/JRCButton/JRCButton.stories_20210324153346.tsx

@@ -1,78 +0,0 @@
-import * as React from 'react';
-import JRCButton, { JRCButtonProps } from './JRCButton';
-import { action } from '@storybook/addon-actions';
-
-export default {
-    title: 'JRCButton',
-    component: JRCButton,
-};
-
-export const allButtons = () => {
-    return (
-        <div>
-            <JRCButton
-                onClick={action('button-click')}
-                type="submit"
-                color="primary"
-            >
-                Submit
-            </JRCButton>
-            <JRCButton onClick={action('button-click')} color="green">
-                Green
-            </JRCButton>
-            <JRCButton onClick={action('button-click')} color="red">
-                Red
-            </JRCButton>
-            <JRCButton onClick={action('button-click')} color="grey">
-                Grey
-            </JRCButton>
-            <JRCButton onClick={action('button-click')} color="white">
-                White
-            </JRCButton>
-        </div>
-    );
-};
-
-/***
- * Submit button for a basic form
- */
-const Template = (args: JRCButtonProps & { label: string }) => (
-    <JRCButton {...args}> {args.label}</JRCButton>
-);
-export const Primary = Template.bind({});
-Primary.args = {
-    label: 'Submit',
-    color: 'primary',
-    onClick: action('button-click'),
-    type: 'submit',
-};
-
-export const Green = Template.bind({});
-Green.args = {
-    label: 'Green',
-    color: 'green',
-    onClick: action('button-click'),
-};
-
-export const Red = Template.bind({});
-Red.args = {
-    label: 'Red',
-    color: 'red',
-    onClick: action('button-click'),
-};
-
-export const Grey = Template.bind({});
-Grey.args = {
-    label: 'Grey',
-    color: 'grey',
-    onClick: action('button-click'),
-};
-
-export const Disable = Template.bind({});
-Disable.args = {
-    label: 'Submit',
-    color: 'primary',
-    onClick: action('button-click'),
-    type: 'submit',
-    disabled: true,
-};

package/.history/src/components/JRCButton/JRCButton_20211103141623.tsx

@@ -1,135 +0,0 @@
-import * as React from 'react';
-import JRCIcon, { JRCIconProps } from '../JRCIcon/JRCIcon';
-import styled from 'styled-components';
-import JRCLoader from 'components/JRCLoader/JRCLoader';
-import config, { ButtonType } from './JRCButtonConfig';
-import { Colors, Shades } from 'styles/theme';
-
-export interface JRCButtonProps
-    extends React.ComponentPropsWithoutRef<'button'> {
-    onClick?: (event?: React.MouseEvent) => void;
-    /** Color of the background of the button */
-    color?: 'primary' | 'valid' | 'danger' | 'secondary';
-    /** Indicates loading of content on the button */
-    loader?: boolean;
-    /** This Boolean attribute specifies that the button should have input focus when the page loads */
-    autofocus?: boolean;
-    /** Defines the value associated with the button’s name when it’s submitted with the form data */
-    value?: string;
-    /** Enhance your button with an icon */
-    icon?: string;
-    /** The variant is used to define what type of action the button will take */
-    variant?: 'contained' | 'outlined';
-    /** CSS float attribute */
-    float?: 'left' | 'right';
-    /** CSS min-width attribute */
-    minWidth?: string;
-}
-
-const defaultProps = {
-    color: 'primary',
-    type: 'button',
-    variant: 'contained',
-};
-
-const transformColor = (color: string): JRCIconProps['color'] => {
-    switch (color) {
-        case 'primary':
-            return 'primary';
-        case 'valid':
-            return 'green';
-        case 'danger':
-            return 'orange';
-        case 'secondary':
-            return 'grey4';
-        default:
-            return null;
-    }
-};
-
-const Button = styled.button<
-    { themeButton: ButtonType; hasChildren: boolean } & JRCButtonProps
->`
-    float: ${(props) => props.float};
-    min-width: ${(props) => props.minWidth};
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    cursor: ${(props) =>
-        props.disabled ? 'not-allowed' : props.loader ? 'wait' : 'pointer'};
-    align-items: center;
-    color: ${(props) => props.theme.color[props.themeButton.color]};
-    height: 40px;
-    margin: 0.2rem;
-    position: relative;
-    outline: none;
-    border-radius: 8px;
-    padding: ${(props) => (props.hasChildren ? '8px 16px' : '8px 10px')};
-    background-color: ${(props) =>
-        props.theme.color[props.themeButton.background]};
-    box-sizing: border-box;
-    border: 2px solid ${(props) => props.theme.color[props.themeButton.border]};
-    transition: all 0.5s;
-    &:hover {
-        background-color: ${(props) =>
-            props.theme.color[props.themeButton.hover.background]};
-        border-color: ${(props) =>
-            props.theme.color[props.themeButton.hover.border]};
-    }
-    &:active {
-        background-color: ${(props) =>
-            props.theme.color[props.themeButton.active.background]};
-        border-color: ${(props) =>
-            props.theme.color[props.themeButton.active.border]};
-    }
-    &:before {
-        display: none;
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: calc(100% - 2.5px);
-        border-radius: inherit;
-        height: calc(100% - 2.5px);
-        border: 1px dashed
-            ${(props) => props.theme.color[props.themeButton.color]};
-    }
-    & > i,
-    & > div {
-        margin: ${(props) => `0 ${props.hasChildren ? '8px' : '0'} 0 0`};
-    }
-    &:focus-visible:before {
-        display: ${(props) => !props.disabled && !props.loader && 'block'};
-    }
-`;
-
-const JRCButton = (props: JRCButtonProps & typeof defaultProps) => {
-    const color =
-        config[props.variant][
-            props.disabled || props.loader ? 'disabled' : props.color
-        ];
-
-    return (
-        <Button hasChildren={!!props.children} themeButton={color} {...props}>
-            {props.icon && !props.loader && (
-                <JRCIcon
-                    name={props.icon}
-                    size="medium"
-                    color={
-                        props.disabled
-                            ? 'grey3'
-                            : props.variant === 'contained'
-                            ? 'white'
-                            : transformColor(props.color)
-                    }
-                />
-            )}
-            {props.loader && <JRCLoader color="grey3" />}
-            {props.children}
-        </Button>
-    );
-};
-
-JRCButton.defaultProps = defaultProps;
-export default JRCButton;