jamespot-react-components 1.0.0 → 1.0.1

package/build/src/types.d.ts

@@ -1,4 +1,6 @@
 export { JRCAppHeaderProps } from './components/JRCAppHeader/JRCAppHeader.types';
+export { JRCAppLeftColumnProps, SectionEntry } from './components/JRCAppLeftColumn/JRCAppLeftColumn.types';
+export { JRCAppContainerProps } from './components/JRCAppContainer/JRCAppContainer';
 import { JRCAutocompleteAudienceProps } from './components/Form/Input/JRCFormAutocomplete/JRCFormAutocompleteAudience';
 export { JRCAutocompleteAudienceProps };
 import { JRCAutocompleteTaxonomyProps } from './components/Form/Input/JRCFormAutocomplete/JRCFormAutocompleteTaxonomy';
@@ -20,7 +22,8 @@ import { JRCFormSendAlertInputProps } from './components/Form/Input/JRCFormSendA
 export { JRCFormSendAlertInputProps };
 import { TextareaFormInputProps } from './components/Form/Input/JRCFormTextarea/JRCFormTextarea';
 export { TextareaFormInputProps };
-export { JRCAlertProps, AlertType } from './components/JRCAlert/JRCAlert';
+export { MessageType } from './components/Common/util/getColor.util';
+export { JRCAlertProps } from './components/JRCAlert/JRCAlert';
 import { JRCAvatarProps } from './components/JRCAvatar/JRCAvatar';
 export { JRCAvatarProps };
 import { JRCButtonProps } from './components/JRCButton/JRCButton';
@@ -36,6 +39,7 @@ import { JRCColumnRightProps } from './components/JRCColumnRight/JRCColumnRight'
 export { JRCColumnRightProps };
 export { JRCDateProps } from './components/JRCDate/JRCDate';
 export { JRCDropDownProps } from './components/JRCDropDown/JRCDropDown';
+export { JRCFileOpenProps } from './components/JRCFileOpen/JRCFileOpen';
 import { JRCGridProps } from './components/JRCGrid/JRCGrid';
 export { JRCGridProps };
 import { JRCH1Props, JRCH2Props, JRCH3Props, JRCH4Props, JRCH5Props, JRCTextProps } from './components/JRCTypo/JRCTypo';
@@ -75,7 +79,7 @@ export { JRCWritableFormInputProps };
 import { JRCTypographyProps } from './components/JRCTypography/JRCTypography.d';
 export { JRCTypographyProps };
 export { JRCValidationButtonProps } from './components/JRCButton/JRCValidationButton';
-export { JRCInputCheckboxProps } from './components/Form/Input/JRCFormCheckbox/JRCInputCheckbox';
+export * from './components/Form/Input/JRCInputCheckbox/JRCInputCheckbox.types';
 export { JRCInputFieldProps } from './components/Form/Input/Common/JRCFormFieldRenderer.types';
 export { JRCInputSelectProps } from './components/Form/Input/JRCSelect/JRCInputSelect.types';
 export { JRCAutocompleteProps } from './components/Form/Input/JRCSelect/JRCInputSelect.types';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jamespot-react-components",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "description": "",
     "main": "./build/jamespot-react-components.js",
     "types": "./build/src/index.d.ts",
@@ -31,13 +31,13 @@
         "@babel/preset-env": "^7.12.7",
         "@babel/preset-react": "^7.12.7",
         "@babel/preset-typescript": "^7.12.7",
-        "@storybook/addon-actions": "^6.4.0",
-        "@storybook/addon-docs": "^6.4.0",
-        "@storybook/addon-essentials": "^6.4.0",
-        "@storybook/addon-links": "^6.4.0",
-        "@storybook/builder-webpack5": "^6.4.0",
-        "@storybook/manager-webpack5": "^6.4.0",
-        "@storybook/react": "^6.4.0",
+        "@storybook/addon-actions": "^6.4.19",
+        "@storybook/addon-docs": "^6.4.19",
+        "@storybook/addon-essentials": "^6.4.19",
+        "@storybook/addon-links": "^6.4.19",
+        "@storybook/builder-webpack5": "^6.4.19",
+        "@storybook/manager-webpack5": "^6.4.19",
+        "@storybook/react": "^6.4.19",
         "@testing-library/dom": "^8.11.0",
         "@testing-library/jest-dom": "^5.12.0",
         "@testing-library/react": "^12.1.2",

package/src/components/Common/util/getColor.util.ts

@@ -0,0 +1,12 @@
+export type MessageType = 'success' | 'error' | 'warning';
+
+export const getColor = (type: MessageType) => {
+    switch (type) {
+        case 'error':
+            return 'orange';
+        case 'warning':
+            return 'yellow';
+        default:
+            return 'green';
+    }
+};

package/src/components/Form/Input/JRCFormColor/JRCFormColor.stories.tsx

@@ -10,7 +10,7 @@ export default {
     decorators: [withReduxForm],
 } as Meta;
 
-const Template: Story<JRCWritableFormInputProps> = (args) => <JRCFormColorField {...args} />;
+const Template: Story<JRCWritableFormInputProps> = (args: any) => <JRCFormColorField {...args} />;
 
 export const InputColor = Template.bind({});
 InputColor.args = {

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Field, WrappedFieldInputProps } from 'redux-form';
-import JRCIcon from '../../../JRCIcon/JRCIcon';
 import JRCFormFieldRender, { FormInputProps, JRCWritableFormInputProps } from '../JRCFormFieldRender';
 import { useControls } from '../ReduxFormControls';
 import { useIntl } from 'react-intl';
@@ -15,6 +14,8 @@ const StyledInputColor = styled.input.attrs(() => ({ type: 'color' }))<FormInput
         height: 40px;
         cursor: pointer;
         border-radius: 4px;
+        text-align: center;
+        box-sizing: border-box;
         ::-webkit-color-swatch {
             border-color: transparent;
         }
@@ -24,372 +25,31 @@ const StyledInputColor = styled.input.attrs(() => ({ type: 'color' }))<FormInput
     }
 `;
 
-const colors = [
-    'rgb(255, 235, 238)',
-    'rgb(255, 205, 210)',
-    'rgb(239, 154, 154)',
-    'rgb(229, 115, 115)',
-    'rgb(239, 83, 80)',
-    'rgb(244, 67, 54)',
-    'rgb(229, 57, 53)',
-    'rgb(211, 47, 47)',
-    'rgb(198, 40, 40)',
-    'rgb(183, 28, 28)',
-    'rgb(252, 228, 236)',
-    'rgb(248, 187, 208)',
-    'rgb(244, 143, 177)',
-    'rgb(240, 98, 146)',
-    'rgb(236, 64, 122)',
-    'rgb(233, 30, 99)',
-    'rgb(216, 27, 96)',
-    'rgb(194, 24, 91)',
-    'rgb(173, 20, 87)',
-    'rgb(136, 14, 79)',
-    'rgb(243, 229, 245)',
-    'rgb(225, 190, 231)',
-    'rgb(206, 147, 216)',
-    'rgb(186, 104, 200)',
-    'rgb(171, 71, 188)',
-    'rgb(156, 39, 176)',
-    'rgb(142, 36, 170)',
-    'rgb(123, 31, 162)',
-    'rgb(106, 27, 154)',
-    'rgb(74, 20, 140)',
-    'rgb(237, 231, 246)',
-    'rgb(209, 196, 233)',
-    'rgb(179, 157, 219)',
-    'rgb(149, 117, 205)',
-    'rgb(126, 87, 194)',
-    'rgb(103, 58, 183)',
-    'rgb(94, 53, 177)',
-    'rgb(81, 45, 168)',
-    'rgb(69, 39, 160)',
-    'rgb(49, 27, 146)',
-    'rgb(232, 234, 246)',
-    'rgb(197, 202, 233)',
-    'rgb(159, 168, 218)',
-    'rgb(121, 134, 203)',
-    'rgb(92, 107, 192)',
-    'rgb(63, 81, 181)',
-    'rgb(57, 73, 171)',
-    'rgb(48, 63, 159)',
-    'rgb(40, 53, 147)',
-    'rgb(26, 35, 126)',
-    'rgb(227, 242, 253)',
-    'rgb(187, 222, 251)',
-    'rgb(144, 202, 249)',
-    'rgb(100, 181, 246)',
-    'rgb(66, 165, 245)',
-    'rgb(33, 150, 243)',
-    'rgb(30, 136, 229)',
-    'rgb(25, 118, 210)',
-    'rgb(21, 101, 192)',
-    'rgb(13, 71, 161)',
-    'rgb(225, 245, 254)',
-    'rgb(179, 229, 252)',
-    'rgb(129, 212, 250)',
-    'rgb(79, 195, 247)',
-    'rgb(41, 182, 246)',
-    'rgb(3, 169, 244)',
-    'rgb(3, 155, 229)',
-    'rgb(2, 136, 209)',
-    'rgb(2, 119, 189)',
-    'rgb(1, 87, 155)',
-    'rgb(224, 247, 250)',
-    'rgb(178, 235, 242)',
-    'rgb(128, 222, 234)',
-    'rgb(77, 208, 225)',
-    'rgb(38, 198, 218)',
-    'rgb(0, 188, 212)',
-    'rgb(0, 172, 193)',
-    'rgb(0, 151, 167)',
-    'rgb(0, 131, 143)',
-    'rgb(0, 96, 100)',
-    'rgb(224, 242, 241)',
-    'rgb(178, 223, 219)',
-    'rgb(128, 203, 196)',
-    'rgb(77, 182, 172)',
-    'rgb(38, 166, 154)',
-    'rgb(0, 150, 136)',
-    'rgb(0, 137, 123)',
-    'rgb(0, 121, 107)',
-    'rgb(0, 105, 92)',
-    'rgb(0, 77, 64)',
-    'rgb(232, 245, 233)',
-    'rgb(200, 230, 201)',
-    'rgb(165, 214, 167)',
-    'rgb(129, 199, 132)',
-    'rgb(102, 187, 106)',
-    'rgb(76, 175, 80)',
-    'rgb(67, 160, 71)',
-    'rgb(56, 142, 60)',
-    'rgb(46, 125, 50)',
-    'rgb(27, 94, 32)',
-    'rgb(241, 248, 233)',
-    'rgb(220, 237, 200)',
-    'rgb(197, 225, 165)',
-    'rgb(174, 213, 129)',
-    'rgb(156, 204, 101)',
-    'rgb(139, 195, 74)',
-    'rgb(124, 179, 66)',
-    'rgb(104, 159, 56)',
-    'rgb(85, 139, 47)',
-    'rgb(51, 105, 30)',
-    'rgb(249, 251, 231)',
-    'rgb(240, 244, 195)',
-    'rgb(230, 238, 156)',
-    'rgb(220, 231, 117)',
-    'rgb(212, 225, 87)',
-    'rgb(205, 220, 57)',
-    'rgb(192, 202, 51)',
-    'rgb(175, 180, 43)',
-    'rgb(158, 157, 36)',
-    'rgb(130, 119, 23)',
-    'rgb(255, 253, 231)',
-    'rgb(255, 249, 196)',
-    'rgb(255, 245, 157)',
-    'rgb(255, 241, 118)',
-    'rgb(255, 238, 88)',
-    'rgb(255, 235, 59)',
-    'rgb(253, 216, 53)',
-    'rgb(251, 192, 45)',
-    'rgb(249, 168, 37)',
-    'rgb(245, 127, 23)',
-    'rgb(255, 248, 225)',
-    'rgb(255, 236, 179)',
-    'rgb(255, 224, 130)',
-    'rgb(255, 213, 79)',
-    'rgb(255, 202, 40)',
-    'rgb(255, 193, 7)',
-    'rgb(255, 179, 0)',
-    'rgb(255, 160, 0)',
-    'rgb(255, 143, 0)',
-    'rgb(255, 111, 0)',
-    'rgb(255, 243, 224)',
-    'rgb(255, 224, 178)',
-    'rgb(255, 204, 128)',
-    'rgb(255, 183, 77)',
-    'rgb(255, 167, 38)',
-    'rgb(255, 152, 0)',
-    'rgb(251, 140, 0)',
-    'rgb(245, 124, 0)',
-    'rgb(239, 108, 0)',
-    'rgb(230, 81, 0)',
-    'rgb(251, 233, 231)',
-    'rgb(255, 204, 188)',
-    'rgb(255, 171, 145)',
-    'rgb(255, 138, 101)',
-    'rgb(255, 112, 67)',
-    'rgb(255, 87, 34)',
-    'rgb(244, 81, 30)',
-    'rgb(230, 74, 25)',
-    'rgb(216, 67, 21)',
-    'rgb(191, 54, 12)',
-    'rgb(239, 235, 233)',
-    'rgb(215, 204, 200)',
-    'rgb(188, 170, 164)',
-    'rgb(161, 136, 127)',
-    'rgb(141, 110, 99)',
-    'rgb(121, 85, 72)',
-    'rgb(109, 76, 65)',
-    'rgb(93, 64, 55)',
-    'rgb(78, 52, 46)',
-    'rgb(62, 39, 35)',
-    'rgb(250, 250, 250)',
-    'rgb(245, 245, 245)',
-    'rgb(238, 238, 238)',
-    'rgb(224, 224, 224)',
-    'rgb(189, 189, 189)',
-    'rgb(158, 158, 158)',
-    'rgb(117, 117, 117)',
-    'rgb(97, 97, 97)',
-    'rgb(66, 66, 66)',
-    'rgb(33, 33, 33)',
-    'rgb(255, 255, 255)',
-    'rgb(207, 216, 220)',
-    'rgb(176, 190, 197)',
-    'rgb(144, 164, 174)',
-    'rgb(120, 144, 156)',
-    'rgb(96, 125, 139)',
-    'rgb(84, 110, 122)',
-    'rgb(69, 90, 100)',
-    'rgb(55, 71, 79)',
-    'rgb(0, 0, 0)',
-];
-
 const Container = styled.div`
-    display: flex;
-    flex-direction: column;
-    width: 500px;
-    background-color: white;
-    position: relative;
-`;
-
-const PickerContainer = styled.div`
-    position: absolute;
-    top: 65px;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    width: 400px;
-    height: 213px;
-    background-color: white;
-    z-index: 1;
-    padding: 8px;
-    border-radius: 8px;
-    box-shadow: 0 0 2px ${(props) => props.theme.color.grey2};
-`;
-
-const SelectColor = styled.div`
-    display: flex;
-    flex: 8%;
-    cursor: pointer;
-    margin: 2px;
-    border-radius: 0px;
-    &:hover {
-        box-shadow: inset 0 0 4px #9e9e9e;
-    }
-`;
-
-const EditPicker = styled.div`
     display: flex;
     flex: 1;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: center;
     margin: 0px;
     padding: 5px;
     border-radius: 4px;
 `;
 
-const Palette = styled.div`
-    display: flex;
-    flexdirection: row;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-`;
-
-const ColorHex = styled.input`
-    &&& {
-        width: 100px;
-        height: 40px;
-        margin: 0px;
-        margin-left: 8px;
-        text-align: center;
-        border-radius: 4px;
-    }
-`;
-
-const Text = styled.span`
-    font-size: 15px;
-    font-weight: 400;
-    margin-left: 5px;
-`;
-
-const RGBToHex = (color: string): string => {
-    if (!color.includes('rgb')) {
-        return color;
-    }
-
-    const rgb: number[] = color
-        .substring(4, color.length - 1)
-        .replace(/ /g, '')
-        .split(',')
-        .map((i) => Number(i));
-    let r = rgb[0].toString(16);
-    let g = rgb[1].toString(16);
-    let b = rgb[2].toString(16);
-
-    if (r.length == 1) r = '0' + r;
-    if (g.length == 1) g = '0' + g;
-    if (b.length == 1) b = '0' + b;
-
-    return '#' + r + g + b;
-};
-
 const JRCFormColorFieldRender = (input: WrappedFieldInputProps, props: JRCWritableFormInputProps) => {
-    const [open, setOpen] = React.useState(false);
+    const [, setOpen] = React.useState(false);
 
     React.useEffect(() => {
         if (input.value == '') input.onChange('#000000');
     }, []);
 
     const handleClickAway = () => setOpen(false);
-    const handleOpen = () => setOpen(!open);
 
     return (
         <ClickAwayListener onClickAway={handleClickAway}>
             <Container>
-                <EditPicker>
-                    {/* dirty fix to go over a css legacy rule, will be refactored when component is designed */}
-                    <StyledInputColor
-                        id={props.name}
-                        {...input}
-                        style={{ textAlign: 'center', boxSizing: 'border-box' }}
-                    />
-                    <ColorHex
-                        type="text"
-                        onChange={({ target }) => input.onChange(RGBToHex(target.value))}
-                        value={RGBToHex(input.value)}
-                        style={{ boxSizing: 'border-box' }}
-                    />
-                    <Palette onClick={handleOpen}>
-                        <svg
-                            id="Capa_2"
-                            enableBackground="new 0 0 512 512"
-                            height="20"
-                            width="20"
-                            viewBox="0 0 512 512"
-                            xmlns="http://www.w3.org/2000/svg">
-                            <g>
-                                <g>
-                                    <path
-                                        d="M106,361c-24.813,0-45,20.187-45,45s20.187,45,45,45s45-20.187,45-45S130.813,361,106,361z M106,421
-                                        c-8.271,0-15-6.729-15-15s6.729-15,15-15s15,6.729,15,15S114.271,421,106,421z"
-                                    />
-                                </g>
-                            </g>
-                            <g>
-                                <g>
-                                    <path
-                                        d="M484.927,304.736c10.233-13.848,12.118-33.159,2.813-49.274l-59.969-104.87c-10.374-17.968-32.25-26.167-51.764-20.951
-                                        c4.155-18.677-3.997-38.714-21.423-48.775L250.667,20.87c-14.841-8.57-32.586-7.692-46.233,0.749C196.525,8.666,182.256,0,166,0
-                                        H45C20.187,0,0,20.187,0,45c0,10.405,0,410.022,0,422c0,24.813,20.187,45,45,45c11.653,0,364.968,0,422,0
-                                        c24.813,0,45-20.187,45-45V346C512,327.557,500.843,311.677,484.927,304.736z M181,467c0,8.271-6.729,15-15,15H45
-                                        c-8.271,0-15-6.729-15-15c0-6.853,0-129.418,0-136h151V467z M181,301H30V180h151V301z M181,150H30V45c0-8.271,6.729-15,15-15h121
-                                        c8.271,0,15,6.729,15,15V150z M211,59.568l4.171-7.225c4.138-7.165,13.332-9.629,20.496-5.492l103.917,59.996
-                                        c7.165,4.137,9.628,13.331,5.48,20.516l-17.332,30.127c-0.434,0.641-0.824,1.307-1.152,2.002L211,360.395V59.568z M211,420.555
-                                        l140.222-243.737l28.993-16.739c7.35-4.243,17.431-1.666,21.545,5.459l59.969,104.87c4.148,7.184,1.729,16.394-5.529,20.584
-                                        c-10.712,6.201-234.651,135.846-245.2,141.953V420.555z M482,467c0,8.271-6.729,15-15,15H208.42
-                                        c1.599-4.51,2.496-9.346,2.565-14.381L446.97,331H467c8.271,0,15,6.729,15,15V467z"
-                                    />
-                                </g>
-                            </g>
-                        </svg>
-                        <Text>Afficher la palette</Text>
-                        <div>
-                            <JRCIcon name={open ? 'icon-angle-down' : 'icon-angle-up'} key={'icon-angle'} size={24} />
-                        </div>
-                    </Palette>
-                </EditPicker>
                 {/* dirty fix to go over a css legacy rule, will be refactored when component is designed */}
-                <PickerContainer
-                    style={
-                        open
-                            ? { display: 'flex', boxSizing: 'content-box' }
-                            : { display: 'none', boxSizing: 'content-box' }
-                    }>
-                    {colors.map((color, index) => (
-                        <SelectColor
-                            key={index}
-                            onClick={() => {
-                                input.onChange(RGBToHex(color));
-                            }}
-                            style={{ backgroundColor: color }}
-                        />
-                    ))}
-                </PickerContainer>
+                <StyledInputColor id={props.name} {...input} />
             </Container>
         </ClickAwayListener>
     );

package/src/components/JRCAlert/JRCAlert.tsx

@@ -4,8 +4,7 @@ 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';
+import { getColor, MessageType } from 'components/Common/util/getColor.util';
 
 export interface JRCAlertProps extends React.ComponentPropsWithoutRef<'div'> {
     /** Alert title */
@@ -13,7 +12,7 @@ export interface JRCAlertProps extends React.ComponentPropsWithoutRef<'div'> {
     /** Main content of the alert */
     description?: string;
     /** Define the type of alert */
-    type?: AlertType;
+    type?: MessageType;
     /** Add a loader which will make the alert disappear after the timeout */
     hasLoader?: boolean;
     /** Timeout */
@@ -22,7 +21,7 @@ export interface JRCAlertProps extends React.ComponentPropsWithoutRef<'div'> {
     buttons?: JRCButtonProps[];
 }
 
-const Alert = styled.div<{ description?: string; type: AlertType }>`
+const Alert = styled.div<{ description?: string; type: MessageType }>`
     width: 320px;
     border-radius: 8px;
     background: ${(props) => (props.description ? 'white' : props.theme.color[getColor(props.type)])};
@@ -46,17 +45,6 @@ const Header = styled.div`
     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',

package/src/components/JRCCard/JRCCard.tsx

@@ -1,3 +1,4 @@
+import { getColor, MessageType } from 'components/Common/util/getColor.util';
 import * as React from 'react';
 import styled from 'styled-components';
 
@@ -7,20 +8,21 @@ export type JRCCardProps = {
     className?: string;
     children: React.ReactNode;
     variant?: TVariants;
+    type?: MessageType;
 };
 
-export const Card = styled.div`
+export const Card = styled.div<{ type?: MessageType }>`
     border-radius: 8px;
-    background-color: ${(props) => props.theme.color.white};
+    background: ${(props) => (props.type ? props.theme.color[getColor(props.type)] : 'white')};
     padding: 8px;
     margin: 0 8px 16px;
 `;
 
 export const JRCCard = (props: JRCCardProps) => {
-    const { className, children, variant } = props;
+    const { className, children, variant, type } = props;
 
     return (
-        <Card as={variant} className={className}>
+        <Card as={variant} className={className} type={type}>
             {children}
         </Card>
     );

package/src/components/JRCLoader/JRCLoader.stories.tsx

@@ -9,4 +9,9 @@ export default {
 
 const Template: Story<JRCLoaderProps> = (args: JRCLoaderProps) => <JRCLoader {...args} />;
 
-export const Primary = Template.bind({});
+export const Spinner = Template.bind({});
+
+export const Skeleton = Template.bind({});
+Skeleton.args = {
+    variant: 'skeleton',
+};

package/src/components/JRCLoader/JRCLoader.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { Colors } from '../../styles/theme';
+import { Skeleton } from './JRCSkeleton';
 
 /**
  * Props type for JRCLoader
@@ -8,10 +9,14 @@ import { Colors } from '../../styles/theme';
  * @member size size of the loader, default is s, 20px width
  */
 
-export interface JRCLoaderProps {
+interface JRCSpinnerProps {
     color?: Colors;
     size?: 's' | 'm' | 'l';
 }
+interface JRCLoaderVariantProps {
+    variant?: 'spinner' | 'skeleton';
+}
+export type JRCLoaderProps = JRCLoaderVariantProps & JRCSpinnerProps;
 
 const sizeMap = {
     s: 20,
@@ -19,7 +24,7 @@ const sizeMap = {
     l: 60,
 };
 
-const Loader = styled.div<Required<JRCLoaderProps>>`
+const Loader = styled.div<Required<JRCSpinnerProps>>`
     border: ${(props) => `${sizeMap[props.size] / 10}px solid transparent`};
     border-top: ${(props) => `${sizeMap[props.size] / 10}px solid ${props.theme.color[props.color]}`};
     border-radius: 50%;
@@ -38,6 +43,11 @@ const Loader = styled.div<Required<JRCLoaderProps>>`
     }
 `;
 
-const JRCLoader = ({ color = 'primary', size = 's' }: JRCLoaderProps) => <Loader color={color} size={size} />;
+const JRCLoader = ({ color = 'primary', size = 's', variant = 'spinner' }: JRCLoaderProps) => {
+    if (variant === 'skeleton') {
+        return <Skeleton />;
+    }
+    return <Loader color={color} size={size} />;
+};
 
 export default JRCLoader;

package/src/components/JRCLoader/JRCSkeleton.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+type SSkeletonLineProps = {
+    width?: string;
+    height?: string;
+    translucent?: boolean;
+};
+
+const SSkeletonLine = styled.div<SSkeletonLineProps>`
+    display: inline-block;
+    width: ${(props) => props.width || `20em`};
+    height: ${(props) => props.height || `0.5em`};
+    border-radius: 5px;
+    margin: 5px;
+    background: linear-gradient(-90deg, #f0f0f0 0%, #f8f8f8 50%, #f0f0f0 100%);
+    background-size: 400% 400%;
+    animation: pulse 1.2s ease-in-out infinite;
+    @keyframes pulse {
+        0% {
+            background-position: 0% 0%;
+        }
+        100% {
+            background-position: -135% 0%;
+        }
+    }
+`;
+const SkeletonRowContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex: 1 100%;
+    overflow: hidden;
+    border-radius: 6px;
+    border: 1px solid ${(props) => props.theme.color.grey1};
+    margin: 8px 32px;
+    padding: 22px;
+    cursor: pointer;
+    &:hover {
+        border: 1px solid ${(props) => props.theme.color.lavender};
+        background: ${(props) => props.theme.color.grey0};
+    }
+`;
+
+const SkeletonLines = styled.div`
+    display: flex;
+    flex: 4;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin: 2px 8px;
+`;
+
+const SkeletonPart = () => (
+    <SkeletonRowContainer data-theme="skeleton">
+        <SkeletonLines>
+            <SSkeletonLine width="50%" />
+            <SSkeletonLine width="30%" />
+            <br />
+            <SSkeletonLine width="50%" />
+            <SSkeletonLine width="30%" />
+            <SSkeletonLine width="10%" />
+        </SkeletonLines>
+    </SkeletonRowContainer>
+);
+
+export const Skeleton = () => (
+    <>
+        <SkeletonPart />
+        <SkeletonPart />
+        <SkeletonPart />
+        <SkeletonPart />
+    </>
+);