@mohamed-karawia/library 0.1.0

package/src/stories/Reusable Components/Cards/Card-style-10/CardStyle10.stories.jsx

@@ -0,0 +1,21 @@
+import CardStyle10 from "./CardStyle10";
+import { AiOutlineHeart, AiOutlineAudioMuted } from "react-icons/ai";
+
+
+export default {
+    title: 'Reusable Components/Cards/Card style 10',
+    component: CardStyle10
+}
+
+const cardControls = [
+    { icon: (<AiOutlineHeart />), action: 'like', name: 'Add member' },
+    { icon: (<AiOutlineAudioMuted />), action: 'mute', name: 'Add member' },
+]
+
+export const Card = args => (
+    <CardStyle10
+        title="Folder"
+        description="Folder description test"
+        cardControls={cardControls}
+        {...args}
+    />)

package/src/stories/Reusable Components/Cards/Card-style-11/CardStyle11.jsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+import PropTypes from "prop-types";
+import Controls from '../../Controls/Controls';
+
+import { MainCard, globalContent, Title, Description, ImgWrapper, Img } from '../globalCardStyles';
+import { BiNotepad } from "react-icons/bi";
+
+
+const CardStyle11 = ({ title, date, ...props }) => {
+    const [showIcons, setShowicons] = useState(false);
+
+    const iconClicked = (action) => {
+        props.iconClicked(action, props.index)
+    }
+
+    return (
+        <Card
+            {...props}>
+            <SvgWrapper {...props}>
+                <BiNotepad />
+            </SvgWrapper>
+            <Content {...props}>
+                <Title {...props}>{title}</Title>
+                <Date {...props}>{date}</Date>
+            </Content>
+            {props.cardControls
+                &&
+                <Controls
+                    controls={props.cardControls}
+                    show={showIcons}
+                    onIconClicked={iconClicked}
+                    {...props.controlsStyles} />}
+        </Card>
+    )
+};
+
+const Card = styled(MainCard)`
+    gap: 10px;
+`
+
+const Date = styled.h5`
+    color: gray;
+    font-weight: 300;
+`
+
+const Content = styled(globalContent)`
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+`
+
+const SvgWrapper = styled.div`
+
+    svg{
+        width: 50px;
+        height: 50px;
+        fill: ${props => props.iconColor}
+    }
+`
+
+CardStyle11.defaultProps = {}
+
+CardStyle11.propTypes = {
+    title: PropTypes.string,
+    cardBackgroundColor: PropTypes.string,
+    onHoverBackgroundColor: PropTypes.string,
+    cardRadius: PropTypes.number,
+    cardTitleFontSize: PropTypes.number,
+    cardTitleFontWeight: PropTypes.number,
+    cardTitleColor: PropTypes.string,
+    cardPadding: PropTypes.number,
+    cardBorderSize: PropTypes.number,
+    cardBorderColor: PropTypes.string,
+    iconColor: PropTypes.string
+};
+
+export default CardStyle11

package/src/stories/Reusable Components/Cards/Card-style-11/CardStyle11.stories.jsx

@@ -0,0 +1,21 @@
+import CardStyle11 from "./CardStyle11";
+import { AiOutlineHeart, AiOutlineAudioMuted } from "react-icons/ai";
+
+export default {
+    title: 'Reusable components/Cards/Card Style 11',
+    component: CardStyle11
+}
+
+const cardControls = [
+    { icon: (<AiOutlineHeart />), action: 'like', name: 'Add member' },
+    { icon: (<AiOutlineAudioMuted />), action: 'mute', name: 'Add member' },
+]
+
+export const Card = args => <CardStyle11 
+    title="Study Notes"
+    date="15/11/2021"
+    cardControls={cardControls}
+    controlsStyles={{
+        iconColor: 'black'
+    }}
+{...args} />

package/src/stories/Reusable Components/Cards/Card-style-2/CardStyle2.jsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+import PropTypes from "prop-types";
+import Controls from '../../Controls/Controls';
+
+import { MainCard, globalContent, Title, Description, ImgWrapper, Img } from '../globalCardStyles';
+
+
+const CardStyle2 = ({ title, description, img, ...props }) => {
+    const [showIcons, setShowIcons] = useState(false)
+
+    const iconCliked = (action) => {
+        console.log(action)
+    }
+
+
+    return (
+        <Card
+            onMouseEnter={e => setShowIcons(true)}
+            onMouseLeave={e => setShowIcons(false)}
+            {...props}>
+            <ImgWrapper {...props}>
+                <Img src={img} />
+            </ImgWrapper>
+            <Content {...props}>
+                <Title {...props}>{title}</Title>
+                <Description {...props}>{description}</Description>
+            </Content>
+            {props.cardControls
+                &&
+                <Controls
+                    controls={props.cardControls}
+                    show={showIcons}
+                    onIconClicked={iconCliked}
+                    {...props.controlsStyles} />}
+        </Card>
+    )
+}
+
+const Card = styled(MainCard)`
+    flex-direction: column;
+    row-gap: 10px;
+`
+
+
+
+const Content = styled(globalContent)`
+    align-items: center;
+    justify-content: space-between;
+
+`
+
+CardStyle2.defaultProps = {}
+
+CardStyle2.propTypes = {
+    title: PropTypes.string,
+    description: PropTypes.string,
+    img: PropTypes.string,
+    cardBackgroundColor: PropTypes.string,
+    onHoverBackgroundColor: PropTypes.string,
+    cardRadius: PropTypes.number,
+    cardTitleFontSize: PropTypes.number,
+    cardTitleFontWeight: PropTypes.number,
+    cardTitleColor: PropTypes.string,
+    cardImageRadius: PropTypes.string,
+    cardDescriptionFontSize: PropTypes.number,
+    cardDescriptionColor: PropTypes.string,
+    cardPadding: PropTypes.number,
+    imgSize: PropTypes.number,
+    cardBorderSize: PropTypes.number,
+    cardBorderColor: PropTypes.string
+};
+
+export default CardStyle2

package/src/stories/Reusable Components/Cards/Card-style-2/CardStyle2.stories.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import CardStyle2 from './CardStyle2';
+
+import { cardControls } from '../../fakeData'
+
+export default {
+    title: 'Reusable Components/Cards/Card style 2',
+    component: CardStyle2
+}
+
+export const Card = args => (
+    <CardStyle2
+        img='https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png'
+        title="Card Style 2"
+        description="Card style 2 description test"
+        cardControls={cardControls}
+        darkOnHover={true}
+        controlsStyles={{
+            iconColor: 'black',
+            position: 'center',
+            showOnHover: true
+        }}
+        {...args}
+    />)

package/src/stories/Reusable Components/Cards/Card-style-3/CardStyle3.jsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+import PropTypes from "prop-types";
+import Controls from '../../Controls/Controls';
+import { globalContent, MainCard, Title, Description } from '../globalCardStyles';
+
+const CardStyle3 = ({ title, description, ...props }) => {
+    const [showIcons, setShowIcons] = useState(false)
+
+    const iconCliked = (action) => {
+        console.log(action)
+    }
+
+
+    return (
+        <MainCard
+            onMouseEnter={e => setShowIcons(true)}
+            onMouseLeave={e => setShowIcons(false)}
+            {...props}>
+            <Content {...props}>
+                <Title {...props}>{title}</Title>
+                <Description {...props}>{description}</Description>
+            </Content>
+            {props.cardControls
+                &&
+                <Controls
+                    controls={props.cardControls}
+                    show={showIcons}
+                    onIconClicked={iconCliked}
+                    {...props.controlsStyles} />}
+        </MainCard>
+    )
+}
+
+
+const Content = styled(globalContent)`
+    row-gap: ${props => props.rowGap}px;
+`
+
+
+CardStyle3.defaultProps = {}
+
+CardStyle3.propTypes = {
+    title: PropTypes.string,
+    description: PropTypes.string,
+    cardBackgroundColor: PropTypes.string,
+    onHoverBackgroundColor: PropTypes.string,
+    cardRadius: PropTypes.number,
+    cardTitleFontSize: PropTypes.number,
+    cardTitleFontWeight: PropTypes.number,
+    cardTitleColor: PropTypes.string,
+    cardDescriptionFontSize: PropTypes.number,
+    cardDescriptionColor: PropTypes.string,
+    cardPadding: PropTypes.number,
+    cardBorderSize: PropTypes.number,
+    cardBorderColor: PropTypes.string,
+    rowGap: PropTypes.number
+};
+
+export default CardStyle3

package/src/stories/Reusable Components/Cards/Card-style-3/CardStyle3.stories.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import CardStyle3 from './CardStyle3';
+
+import { cardControls } from '../../fakeData'
+
+
+export default {
+    title: 'Reusable Components/Cards/Card style 3',
+    component: CardStyle3
+}
+
+export const Card = args => (
+    <CardStyle3
+        img='https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png'
+        title="Card Style 3"
+        description="Card style 3 description test"
+        cardControls={cardControls}
+        controlsStyles={{
+            iconColor: 'black'
+        }}
+        {...args}
+    />)

package/src/stories/Reusable Components/Cards/Card-style-4/CardStyle4.jsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+import PropTypes from "prop-types";
+import Controls from '../../Controls/Controls';
+import { globalContent, MainCard, Title, Description } from '../globalCardStyles';
+
+const CardStyle4 = ({ title, description, ...props }) => {
+    const [showIcons, setShowIcons] = useState(false)
+
+    const iconCliked = (action) => {
+        console.log(action)
+    }
+
+
+    return (
+        <Card
+            onMouseEnter={e => setShowIcons(true)}
+            onMouseLeave={e => setShowIcons(false)}
+            {...props}>
+            <Content {...props}>
+                <Title {...props}>{title}</Title>
+                <Description {...props}>{description}</Description>
+            </Content>
+            {props.cardControls
+                &&
+                <Controls
+                    controls={props.cardControls}
+                    show={showIcons}
+                    onIconClicked={iconCliked}
+                    {...props.controlsStyles} />}
+        </Card>
+    )
+}
+
+const Card = styled(MainCard)`
+    justify-content: center;
+`
+
+const Content = styled(globalContent)`
+    align-items: center;
+    row-gap: ${props => props.rowGap}px;
+`
+
+
+
+
+CardStyle4.defaultProps = {}
+
+CardStyle4.propTypes = {
+    title: PropTypes.string,
+    description: PropTypes.string,
+    cardBackgroundColor: PropTypes.string,
+    onHoverBackgroundColor: PropTypes.string,
+    cardRadius: PropTypes.number,
+    cardTitleFontSize: PropTypes.number,
+    cardTitleFontWeight: PropTypes.number,
+    cardTitleColor: PropTypes.string,
+    cardDescriptionFontSize: PropTypes.number,
+    cardDescriptionColor: PropTypes.string,
+    cardPadding: PropTypes.number,
+    cardBorderSize: PropTypes.number,
+    cardBorderColor: PropTypes.string,
+    rowGap: PropTypes.number
+};
+
+export default CardStyle4

package/src/stories/Reusable Components/Cards/Card-style-4/CardStyle4.stories.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import CardStyle4 from './CardStyle4';
+
+import { cardControls } from '../../fakeData'
+
+export default {
+    title: 'Reusable Components/Cards/Card style 4',
+    component: CardStyle4
+}
+
+export const Card = args => (
+    <CardStyle4
+        img='https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png'
+        title="Card Style 4"
+        description="Card style 4 description test"
+        cardControls={cardControls}
+        darkOnHover={true}
+        controlsStyles={{
+            iconColor: 'black',
+            position: 'center',
+            showOnHover: true,
+            iconColor: 'red'
+        }}
+        {...args}
+    />)

package/src/stories/Reusable Components/Cards/Card-style-6/CardStyle6.jsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import PropTypes from "prop-types";
+
+import Controls from '../../Controls/Controls';
+
+
+import {
+    MainCard,
+    Title,
+    Description,
+    Img
+} from '../globalCardStyles';
+
+const CardStyle6 = ({ title, description, img, date, ...props }) => {
+    const [showIcons, setShowIcons] = useState(false)
+
+    const iconCliked = (action) => {
+        props.iconClicked(action, props.index)
+    }
+
+    return (
+        <Card
+            onMouseEnter={e => setShowIcons(true)}
+            onMouseLeave={e => setShowIcons(false)}
+            {...props}>
+            <ImgWrapper 
+            onClick={() => props.cardClicked()}
+            {...props}>
+                <Img src={img} />
+            </ImgWrapper>
+            <Content {...props}>
+                <Header>
+                    <CardTitle {...props}>{title}</CardTitle>
+                    <Count {...props}>{props.count}</Count>
+                    <Date>{date}</Date>
+                </Header>
+                <Desc {...props}>{description}</Desc>
+            </Content>
+            {props.cardControls
+                &&
+                <Controls
+                    controls={props.cardControls}
+                    show={showIcons}
+                    onIconClicked={iconCliked}
+                    {...props.controlsStyles} />}
+        </Card>
+    )
+}
+
+const Card = styled(MainCard)`
+    flex-direction: column;
+    cursor: pointer;
+    height: 100%;
+`
+
+const ImgWrapper = styled.div`
+    width: 100%;
+    height: 80%;
+    border-radius: ${props => props.cardRadius + 'px ' + props.cardRadius + 'px ' + '0 0'};
+`
+
+const Content = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    flex-grow: 1;
+`
+
+const Header = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px 20px;
+`
+
+const CardTitle = styled(Title)`
+    flex-grow: 1;
+`
+
+const Count = styled.p`
+    color: ${props => props.countColor};
+    font-size: ${props => props.countFontSize}px;
+`
+
+const Date = styled.p`
+    color: #5f5f5f;
+    font-size: 12px;
+`
+
+
+const Desc = styled(Description)`
+    padding: 2px 20px;
+    color: ${props => props.descColor || '#5f5f5f'};
+`
+
+CardStyle6.defaultProps = {}
+
+CardStyle6.propTypes = {
+    title: PropTypes.string,
+    img: PropTypes.string,
+    cardBackgroundColor: PropTypes.string,
+    onHoverBackgroundColor: PropTypes.string,
+    cardRadius: PropTypes.number,
+    cardTitleFontSize: PropTypes.number,
+    cardTitleFontWeight: PropTypes.number,
+    cardTitleColor: PropTypes.string,
+    cardPadding: PropTypes.number,
+    imgHeight: PropTypes.number,
+    cardBorderSize: PropTypes.number,
+    cardBorderColor: PropTypes.string,
+    countColor: PropTypes.string,
+    countFontSize: PropTypes.number
+};
+
+export default CardStyle6

package/src/stories/Reusable Components/Cards/Card-style-6/CardStyle6.stories.jsx

@@ -0,0 +1,9 @@
+import CardStyle6 from "./CardStyle6";
+import img from '../../../assets/images/album1.jpg'
+
+export default {
+    title: 'Reusable Components/cards/Card style 6',
+    component: CardStyle6
+}
+
+export const Card = args => <CardStyle6 img={img} title="Test" {...args}/>

package/src/stories/Reusable Components/Cards/Card-style-7/CardStyle7.jsx

@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+import PropTypes from "prop-types";
+import Controls from '../../Controls/Controls';
+
+import { BsPlayFill } from "react-icons/bs";
+
+import {
+    MainCard,
+    globalContent,
+    Title,
+    Description,
+    ImgWrapper,
+    Img
+} from '../globalCardStyles';
+
+const CardStyle7 = ({ title, description, cover, time, ...props }) => {
+    const [showPlay, setShowPlay] = useState(false)
+
+    const iconClicked = (action) => {
+        props.iconClicked(action, props.index)
+    }  
+
+    return (
+        <Card
+            onMouseEnter={e => setShowPlay(true)}
+            onMouseLeave={e => setShowPlay(false)}
+            {...props}>
+            <ImgContainer 
+            onClick={() => props.cardClicked()}
+            {...props}>
+                <Img src={cover} />
+                {showPlay && <Play>
+                    <BsPlayFill />
+                </Play>}
+            </ImgContainer>
+            <Content 
+            onClick={() => props.cardClicked()}
+            {...props}>
+                <Title {...props}>{title}</Title>
+                <Desc {...props}>{description}</Desc>
+            </Content>
+            <TimeWrapper>
+                <Time>{time}</Time>
+            </TimeWrapper>
+            {props.cardControls
+                && 
+                <Controls
+                    controls={props.cardControls}
+                    show={true}
+                    onIconClicked={iconClicked}
+                    {...props.controlsStyles} />}
+        </Card>
+    )
+}
+
+const Card = styled(MainCard)`
+    column-gap: 30px;
+    padding-right: 15px;
+`
+
+const ImgContainer = styled(ImgWrapper)`
+    cursor: pointer;
+    position: relative;
+`
+
+const Play = styled.div`
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: #000000ce;
+    width: 100%;
+    height: 100%;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    svg{
+        width: 35px;
+        height: 35px;
+    }
+`
+
+const Content = styled(globalContent)`
+    /* cursor: pointer;
+    justify-content: space-between;
+    border: 1px solid black;
+    background-color: red; */
+`
+
+const Desc = styled(Description)`
+    color: #666666;
+`
+
+const TimeWrapper = styled.div`
+
+`
+
+const Time = styled.p`
+    color: #747474;
+`
+
+CardStyle7.defaultProps = {}
+
+CardStyle7.propTypes = {
+    title: PropTypes.string,
+    description: PropTypes.string,
+    img: PropTypes.string,
+    cardBackgroundColor: PropTypes.string,
+    onHoverBackgroundColor: PropTypes.string,
+    cardRadius: PropTypes.number,
+    cardTitleFontSize: PropTypes.number,
+    cardTitleFontWeight: PropTypes.number,
+    cardTitleColor: PropTypes.string,
+    cardImageRadius: PropTypes.string,
+    cardDescriptionFontSize: PropTypes.number,
+    cardDescriptionColor: PropTypes.string,
+    cardPadding: PropTypes.number,
+    imgSize: PropTypes.number,
+    cardBorderSize: PropTypes.number,
+    cardBorderColor: PropTypes.string
+};
+
+export default CardStyle7

package/src/stories/Reusable Components/Cards/Card-style-7/CardStyle7.stories.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import CardStyle7 from './CardStyle7';
+import { cardControls } from '../../fakeData'
+
+import img4 from '../../../assets/images/music4.jpg';
+
+export default {
+    title: 'Reusable Components/Cards/Card style 7',
+    component: CardStyle7
+}
+
+export const Card = args => (
+    <CardStyle7
+        img={img4}
+        title="Card Style 7"
+        description="Card style 7 description test"
+        time="5:10"
+        cardControls={cardControls}
+        controlsStyles={{
+            iconColor: 'black',
+        }}
+        {...args}
+    />)