jamespot-react-components 1.0.3 → 1.0.65

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

@@ -1,117 +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';
-
-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: inline-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;

package/.history/src/components/JRCCarousel/JRCCarousel.stories_20210412155338.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { AnyStyledComponent } from 'styled-components';
-
-import { JRCStyledHref, JRCLinkToUser, JRCLinkToArticle } from './JRCHref';
-
-export default {
-    title: 'JRCHref',
-};
-
-const Template = (args: AnyStyledComponent) => (
-    <JRCStyledHref {...args}>{args.children}</JRCStyledHref>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-    children: 'Hello',
-    href: '#',
-};
-
-const UserTemplate = (args: any) => (
-    <JRCLinkToUser {...args}>{args.children}</JRCLinkToUser>
-);
-export const User = UserTemplate.bind({});
-User.args = {
-    id: '10',
-    title: 'John Doe',
-};
-
-const ArticleTemplate = (args: any) => (
-    <JRCLinkToArticle {...args}>{args.children}</JRCLinkToArticle>
-);
-export const Article = ArticleTemplate.bind({});
-Article.args = {
-    id: '10',
-    title: 'Comment écrire un article?',
-};

package/.history/src/components/JRCCarousel/JRCCarousel.stories_20210412155438.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { AnyStyledComponent } from 'styled-components';
-
-import { JRCStyledHref, JRCLinkToUser, JRCLinkToArticle } from './JRCHref';
-
-export default {
-    title: 'JRCHref',
-};
-
-const Template = (args: AnyStyledComponent) => (
-    <JRCCarousel {...args}>{args.children}</JRCCarousel>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-    children: 'Hello',
-    href: '#',
-};
-
-const UserTemplate = (args: any) => (
-    <JRCLinkToUser {...args}>{args.children}</JRCLinkToUser>
-);
-export const User = UserTemplate.bind({});
-User.args = {
-    id: '10',
-    title: 'John Doe',
-};
-
-const ArticleTemplate = (args: any) => (
-    <JRCLinkToArticle {...args}>{args.children}</JRCLinkToArticle>
-);
-export const Article = ArticleTemplate.bind({});
-Article.args = {
-    id: '10',
-    title: 'Comment écrire un article?',
-};

package/.history/src/components/JRCCarousel/JRCCarousel.stories_20210412155441.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { AnyStyledComponent } from 'styled-components';
-import { JRCCarousel } from './JRCCarousel';
-
-import { JRCStyledHref, JRCLinkToUser, JRCLinkToArticle } from './JRCHref';
-
-export default {
-    title: 'JRCHref',
-};
-
-const Template = (args: AnyStyledComponent) => (
-    <JRCCarousel {...args}>{args.children}</JRCCarousel>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-    children: 'Hello',
-    href: '#',
-};
-
-const UserTemplate = (args: any) => (
-    <JRCLinkToUser {...args}>{args.children}</JRCLinkToUser>
-);
-export const User = UserTemplate.bind({});
-User.args = {
-    id: '10',
-    title: 'John Doe',
-};
-
-const ArticleTemplate = (args: any) => (
-    <JRCLinkToArticle {...args}>{args.children}</JRCLinkToArticle>
-);
-export const Article = ArticleTemplate.bind({});
-Article.args = {
-    id: '10',
-    title: 'Comment écrire un article?',
-};

package/.history/src/components/JRCCarousel/JRCCarousel.stories_20210412155446.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { AnyStyledComponent } from 'styled-components';
-import { JRCCarousel } from './JRCCarousel';
-
-import { JRCStyledHref, JRCLinkToUser, JRCLinkToArticle } from './JRCHref';
-
-export default {
-    title: 'JRCHref',
-};
-
-const Template = (args: any) => (
-    <JRCCarousel {...args}>{args.children}</JRCCarousel>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-    children: 'Hello',
-    href: '#',
-};
-
-const UserTemplate = (args: any) => (
-    <JRCLinkToUser {...args}>{args.children}</JRCLinkToUser>
-);
-export const User = UserTemplate.bind({});
-User.args = {
-    id: '10',
-    title: 'John Doe',
-};
-
-const ArticleTemplate = (args: any) => (
-    <JRCLinkToArticle {...args}>{args.children}</JRCLinkToArticle>
-);
-export const Article = ArticleTemplate.bind({});
-Article.args = {
-    id: '10',
-    title: 'Comment écrire un article?',
-};

package/.history/src/components/JRCCarousel/JRCCarousel.stories_20210412155459.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { AnyStyledComponent } from 'styled-components';
-import { JRCCarousel } from './JRCCarousel';
-
-import { JRCStyledHref, JRCLinkToUser, JRCLinkToArticle } from './JRCHref';
-
-export default {
-    title: 'JRCCarousel',
-};
-
-const Template = (args: any) => (
-    <JRCCarousel {...args}>{args.children}</JRCCarousel>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-    children: 'Hello',
-    href: '#',
-};

package/.history/src/components/JRCCarousel/JRCCarousel.stories_20210412155511.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { AnyStyledComponent } from 'styled-components';
-import { JRCCarousel } from './JRCCarousel';
-
-export default {
-    title: 'JRCCarousel',
-};
-
-const Template = (args: any) => (
-    <JRCCarousel {...args}>{args.children}</JRCCarousel>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-    children: 'Hello',
-    href: '#',
-};

package/.history/src/components/JRCCarousel/JRCCarousel.stories_20210412161017.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { AnyStyledComponent } from 'styled-components';
-import { JRCCarousel } from './JRCCarousel';
-
-export default {
-    title: 'JRCCarousel',
-};
-
-const Template = (args: any) => (
-    <JRCCarousel {...args}>{args.children}</JRCCarousel>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-    children: 'Hello',
-    href: '#',
-    customSettings: { dots: false },
-};

package/.history/src/components/JRCCarousel/JRCCarousel.stories_20210412161020.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { AnyStyledComponent } from 'styled-components';
-import { JRCCarousel } from './JRCCarousel';
-
-export default {
-    title: 'JRCCarousel',
-};
-
-const Template = (args: any) => (
-    <JRCCarousel {...args}>{args.children}</JRCCarousel>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-    customSettings: { dots: false },
-};

package/.history/src/components/JRCCarousel/JRCCarousel.stories_20210412161032.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { AnyStyledComponent } from 'styled-components';
-import { JRCCarousel } from './JRCCarousel';
-
-export default {
-    title: 'JRCCarousel',
-};
-
-const Template = (args: any) => (
-    <JRCCarousel {...args}>{args.children}</JRCCarousel>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-    customSettings: { dots: false },
-};

package/.history/src/components/JRCCarousel/JRCCarousel.stories_20210412161148.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { AnyStyledComponent } from 'styled-components';
-import { JRCCarousel } from './JRCCarousel';
-
-export default {
-    title: 'JRCCarousel',
-};
-
-const Template = (args: any) => (
-    <JRCCarousel {...args}>{args.children}</JRCCarousel>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-    customSettings: { dots: true },
-};

package/.history/src/components/JRCCarousel/JRCCarousel.stories_20210412161438.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { AnyStyledComponent } from 'styled-components';
-import { JRCCarousel } from './JRCCarousel';
-
-export default {
-    title: 'JRCCarousel',
-};
-
-const Template = (args: any) => (
-    <JRCCarousel {...args}>{args.children}</JRCCarousel>
-);
-
-const cards= [
-     <div>
-                    <Card>1</Card>
-                </div>
-                <div>
-                    <Card>2</Card>
-                </div>
-                <div>
-                    <Card>3</Card>
-                </div>
-                <div>
-                    <Card>4</Card>
-                </div>
-                <div>
-                    <Card>5</Card>
-                </div>
-                <div>
-                    <Card>6</Card>
-                </div>
-]
-
-export const Default = Template.bind({});
-Default.args = {
-    customSettings: { dots: true },
-};

package/.history/src/components/JRCCarousel/JRCCarousel.stories_20210412161447.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { AnyStyledComponent } from 'styled-components';
-import { JRCCarousel } from './JRCCarousel';
-
-export default {
-    title: 'JRCCarousel',
-};
-
-const Template = (args: any) => (
-    <JRCCarousel {...args}>{args.children}</JRCCarousel>
-);
-
-const cards = [
-    <div>
-        <Card>1</Card>
-    </div>,
-    <div>
-        <Card>2</Card>
-    </div>,
-    <div>
-        <Card>3</Card>
-    </div>,
-    <div>
-        <Card>4</Card>
-    </div>,
-    <div>
-        <Card>5</Card>
-    </div>,
-    <div>
-        <Card>6</Card>
-    </div>,
-];
-
-export const Default = Template.bind({});
-Default.args = {
-    customSettings: { dots: true },
-};

package/.history/src/components/JRCCarousel/JRCCarousel.stories_20210412161456.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { AnyStyledComponent } from 'styled-components';
-import { JRCCarousel } from './JRCCarousel';
-
-export default {
-    title: 'JRCCarousel',
-};
-
-const Template = (args: any) => (
-    <JRCCarousel {...args}>{args.children}</JRCCarousel>
-);
-const Card = styled.div`
-    background-color: red;
-    height: 200px;
-    border: 1px solid black;
-`;
-const cards = [
-    <div>
-        <Card>1</Card>
-    </div>,
-    <div>
-        <Card>2</Card>
-    </div>,
-    <div>
-        <Card>3</Card>
-    </div>,
-    <div>
-        <Card>4</Card>
-    </div>,
-    <div>
-        <Card>5</Card>
-    </div>,
-    <div>
-        <Card>6</Card>
-    </div>,
-];
-
-export const Default = Template.bind({});
-Default.args = {
-    customSettings: { dots: true },
-};

package/.history/src/components/JRCCarousel/JRCCarousel.stories_20210412161507.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { AnyStyledComponent } from 'styled-components';
-import { JRCCarousel } from './JRCCarousel';
-import styled from 'styled-components';
-
-export default {
-    title: 'JRCCarousel',
-};
-
-const Template = (args: any) => (
-    <JRCCarousel {...args}>{args.children}</JRCCarousel>
-);
-const Card = styled.div`
-    background-color: red;
-    height: 200px;
-    border: 1px solid black;
-`;
-const cards = [
-    <div>
-        <Card>1</Card>
-    </div>,
-    <div>
-        <Card>2</Card>
-    </div>,
-    <div>
-        <Card>3</Card>
-    </div>,
-    <div>
-        <Card>4</Card>
-    </div>,
-    <div>
-        <Card>5</Card>
-    </div>,
-    <div>
-        <Card>6</Card>
-    </div>,
-];
-
-export const Default = Template.bind({});
-Default.args = {
-    customSettings: { dots: true },
-};

package/.history/src/components/JRCCarousel/JRCCarousel.stories_20210412161516.tsx

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import { AnyStyledComponent } from 'styled-components';
-import { JRCCarousel } from './JRCCarousel';
-import styled from 'styled-components';
-
-export default {
-    title: 'JRCCarousel',
-};
-
-const Template = (args: any) => (
-    <JRCCarousel {...args}>{args.children}</JRCCarousel>
-);
-const Card = styled.div`
-    background-color: red;
-    height: 200px;
-    border: 1px solid black;
-`;
-const cards = [
-    <div>
-        <Card>1</Card>
-    </div>,
-    <div>
-        <Card>2</Card>
-    </div>,
-    <div>
-        <Card>3</Card>
-    </div>,
-    <div>
-        <Card>4</Card>
-    </div>,
-    <div>
-        <Card>5</Card>
-    </div>,
-    <div>
-        <Card>6</Card>
-    </div>,
-];
-
-export const Default = Template.bind({});
-Default.args = {
-    customSettings: { dots: true },
-    cards: cards,
-};

package/.history/src/components/JRCCarousel/JRCCarousel.stories_20210412161820.tsx

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import { AnyStyledComponent } from 'styled-components';
-import { JRCCarousel } from './JRCCarousel';
-import styled from 'styled-components';
-
-export default {
-    title: 'JRCCarousel',
-};
-
-const Template = (args: any) => (
-    <JRCCarousel {...args}>{args.children}</JRCCarousel>
-);
-const Card = styled.div`
-    background-color: red;
-    height: 200px;
-    border: 1px solid black;
-`;
-const cards = [
-    <div>
-        <Card>1</Card>
-    </div>,
-    <div>
-        <Card>2</Card>
-    </div>,
-    <div>
-        <Card>3</Card>
-    </div>,
-    <div>
-        <Card>4</Card>
-    </div>,
-    <div>
-        <Card>5</Card>
-    </div>,
-    <div>
-        <Card>6</Card>
-    </div>,
-];
-
-export const Default = Template.bind({});
-Default.args = {
-    customSettings: { dots: true },
-    cards: cards,
-};

package/.history/src/components/JRCCarousel/JRCCarousel.stories_20210412164337.tsx

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import { AnyStyledComponent } from 'styled-components';
-import { JRCCarousel } from './JRCCarousel';
-import styled from 'styled-components';
-
-export default {
-    title: 'JRCCarousel',
-};
-
-const Template = (args: any) => (
-    <JRCCarousel {...args}>{args.children}</JRCCarousel>
-);
-const Card = styled.div`
-    background-color: red;
-    height: 200px;
-    border: 1px solid black;
-`;
-
-const data = [{}];
-const cards = [
-    <div>
-        <Card>1</Card>
-    </div>,
-    <div>
-        <Card>2</Card>
-    </div>,
-    <div>
-        <Card>3</Card>
-    </div>,
-    <div>
-        <Card>4</Card>
-    </div>,
-    <div>
-        <Card>5</Card>
-    </div>,
-    <div>
-        <Card>6</Card>
-    </div>,
-];
-
-export const Default = Template.bind({});
-Default.args = {
-    customSettings: { dots: true },
-    cards: cards,
-};