monica-alexandria 3.4.49 → 3.4.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monica-alexandria",
-  "version": "3.4.49",
+  "version": "3.4.50",
   "description": "A styled-components styles library for Doitforme platorm and universal tweeks to create your own new styled library for your project",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/export/components/index.js

@@ -5,4 +5,5 @@ export * from './form'
 export * from './nav';
 export * from './sidebar';
 export * from './steps';
-export * from './slider';
+export * from './slider';
+export * from './loader';

package/src/export/components/loader/Card_Loader.js

@@ -0,0 +1,90 @@
+import React from 'react'
+import styled, { keyframes } from 'styled-components'
+
+const Fade = keyframes`
+    0% { 
+        opacity: 1;
+    }
+    20% { 
+        opacity: 0.5;
+    }
+    90%{
+        opacity: 0.8;
+    }
+    100% { 
+        opacity: 1;
+    }
+`
+
+const Slide = keyframes`
+    0%{
+        transform: translate(-100%);
+    }
+    100% { 
+        transform: translate(100%);
+    }
+`
+
+const CardLoader = styled.div`
+    width: 100%;
+    background: ${p => p.theme.mid};
+    height: 30rem;
+    border-radius: var(--normalRadius);
+    overflow: hidden;
+    animation: ${Fade} infinite 2s ease-in-out;
+`
+
+const CardSlider = styled.div`
+    animation: ${Slide} infinite 2s ease-in-out;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: linear-gradient(to right, transparent, ${p => p.theme.high});
+`
+
+const CardLoaderImg = styled.div`
+    position: relative;
+    height: 20rem;
+    background-color: ${p => p.theme.low};
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    justify-content: center;
+`
+
+const CardLoaderCircle = styled.div`
+    width: 10rem;
+    height: 10rem;
+    border-radius: 50%;
+    background-color: ${p => p.theme.mid};
+    position: relative;
+`
+
+const CardLoaderTitle = styled.div`
+    width: 80%;
+    height: 2rem;
+    border-radius: 4rem;
+    background-color: ${p => p.theme.low};
+    margin: 2rem auto;
+    overflow: hidden;
+    position: relative;
+`
+
+export const Card_Loader = (props) => {
+  return (
+    <CardLoader key={props.key}>
+        <CardLoaderImg>
+            <CardSlider/>
+            {props.circle && 
+                <CardLoaderCircle></CardLoaderCircle>
+            } 
+        </CardLoaderImg>
+        <CardLoaderTitle>
+            <CardSlider></CardSlider>
+        </CardLoaderTitle>
+        {props.children}
+    </CardLoader>
+  )
+}

package/src/export/components/loader/Forty_Card_Loader.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const Forty_Card_Loader = (props) => {
+  return (
+    <div>Forty_Card_Loader</div>
+  )
+}

package/src/export/components/loader/Full_Card_Loader.js

@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { breakPoints } from '../../helpers/MediaQ'
+import { CardsFull } from '../../styles/Cards'
+import { Card_Loader } from './Card_Loader'
+
+const FullCardLoader = styled(CardsFull)`
+   
+`
+
+export const Full_Card_Loader = (props) => {
+
+    let width = 1440;
+
+    const [repeats , setRepeats] = useState();
+    const ChangeRepeats = () => {
+        if (width > breakPoints.lg) {
+            setRepeats(10);
+        }
+        else if ( width <= breakPoints.lg && width > breakPoints.md) {
+            setRepeats(6);
+        }
+        else if ( width <= breakPoints.md && width > breakPoints.sm) {
+            setRepeats(4);
+        }
+        else if (width <= breakPoints.sm) {
+            setRepeats(2);
+        }
+    } 
+
+    window.addEventListener('resize', () => 
+        {
+            width = window.innerWidth
+            ChangeRepeats()
+        }
+    )
+
+  return (
+    <FullCardLoader>
+        {[...Array(repeats)].map((i) =>
+            <Card_Loader key={i} children={props.children} circle={props.circle}/>
+        )}
+    </FullCardLoader>
+  )
+}

package/src/export/components/loader/Sixty_Card_Loader.js

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react'
+import styled from 'styled-components'
+import { breakPoints } from '../../helpers/MediaQ'
+import { CardsSixty } from '../../styles/Cards'
+import { Card_Loader } from './Card_Loader'
+
+const SixtyCardLoader = styled(CardsSixty)`
+    
+`
+
+export const Sixty_Card_Loader = (props) => {
+
+    const [repeats , setRepeats] = useState();
+    const ChangeRepeats = () => {
+        if (window.innerWidth > breakPoints.md) {
+            setRepeats(6);
+        }
+        else if (window.innerWidth > breakPoints.sm) {
+            setRepeats(1);
+        }
+    } 
+
+    let width
+    window.addEventListener('resize', () => 
+        {
+            width = window.innerWidth
+            console.log(width);
+            ChangeRepeats()
+        }
+    )
+
+  return (
+    <SixtyCardLoader>
+        {[...Array(repeats)].map((i) =>
+            <Card_Loader key={i} children={props.children} circle={props.circle}/>
+        )}
+    </SixtyCardLoader>
+  )
+}

package/src/export/components/loader/index.js

@@ -0,0 +1 @@
+export * from './Full_Card_Loader.js'

package/src/export/helpers/MediaQ.js

@@ -1,4 +1,4 @@
-const breakPoints = {
+export const breakPoints = {
     xs: 576,
     sm: 768,
     md: 992,

package/src/stories/loader/Loader.stories.jsx

@@ -0,0 +1,19 @@
+import { Full_Card_Loader } from "../../export/components/loader/Full_Card_Loader"
+import { Sixty_Card_Loader } from "../../export/components/loader/Sixty_Card_Loader"
+
+
+export default{
+    title: 'Components/Loader'
+}
+
+export const Full = (args) => <Full_Card_Loader {...args}/>
+Full.args ={
+    circle : false
+}
+
+export const Sixty = (args) => <Sixty_Card_Loader {...args}/>
+Full.args ={
+    circle : false
+}
+
+export const Forty = (args) => <Full_Card_Loader {...args}/>