@mohamed-karawia/library 0.1.0

package/src/stories/Photo Album/ViewAlbum/ViewAlbum.jsx

@@ -0,0 +1,250 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import AddPhoto from '../../Forms/AddPhoto/AddPhoto'
+import Gallery from '../../Reusable Components/Gallery/Gallery';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import DetailedPhoto from '../DetailedPhoto/DetailedPhoto';
+import { AiOutlineArrowLeft, AiOutlineArrowRight, AiOutlineClose, AiOutlineFileAdd, AiFillDelete } from "react-icons/ai";
+
+const galleryControls = [
+    { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Photo' },
+]
+
+const cardControls = [
+    { icon: (<AiFillDelete />), action: 'delete', name: 'Delete Image' },
+]
+
+const ViewAlbum = ({
+    album,
+    cardBackgroundColor,
+    imgTitleColor,
+    columnsNumber,
+    columnGap,
+    rowGap,
+    descColor,
+    ...props
+}) => {
+
+    const cardStyles = {
+        cardBackgroundColor: cardBackgroundColor,
+        cardTitleColor: imgTitleColor,
+        descColor,
+        controlsStyles: {
+            showOnHover: true,
+            position: 'absolute',
+            iconBackground: "transparent",
+            dropdownBackground: "white",
+            dropdownFontColor: "#FE1744",
+            dropdownItemHoverColor: "#FE1744",
+            iconBackgroundHover: "white",
+            iconBorderRadius: 100,
+            iconSize: 20,
+            iconsGap: 10,
+            maxIcons: 0,
+            iconColor: '#FE1744',
+            iconHoverColor: 'white',
+            dropdownFontSize: 10
+        }
+    }
+
+    const [showModal, setShowModal] = useState(false)
+    const [showImgModal, setShowImgModal] = useState(false)
+    const [openedImgIndex, setOpenedImgIndex] = useState(null);
+    const [openedImg, setOpenedImg] = useState(null)
+
+    const handleUserKeyPress = useCallback(event => {
+        const { key } = event;
+        if (key === 'ArrowRight') {
+            setOpenedImgIndex(prev => prev <= album.length - 2 ? prev + 1 : 0)
+        } else if (key === 'ArrowLeft') {
+            setOpenedImgIndex(prev => prev !== 0 ? prev - 1 : 0)
+        }
+    }, []);
+
+    useEffect(() => {
+        setOpenedImg(album[openedImgIndex])
+        window.addEventListener("keydown", handleUserKeyPress);
+    }, [openedImgIndex, handleUserKeyPress]);
+
+    const onIconClicked = (action) => {
+        switch (action) {
+            case 'add':
+                setShowModal(true)
+                break;
+            default:
+                break;
+        }
+    }
+
+    const cardIconClicked = (action, index) => {
+        props.cardIconClicked(action, index)
+    }
+
+    const onAddPhoto = (photo) => {
+        setShowModal(false)
+        props.addPhoto(photo)
+    }
+
+    const cancelHandler = () => {
+        setShowModal(false)
+    }
+
+    const cardClicked = (index) => {
+        setOpenedImgIndex(index)
+        setShowImgModal(true)
+    }
+
+    const prevPhoto = () => {
+        if (openedImgIndex !== 0) {
+            setOpenedImgIndex(openedImgIndex - 1)
+        }
+    }
+
+    const nextPhoto = () => {
+        if (openedImgIndex <= album.length - 2) {
+            setOpenedImgIndex(openedImgIndex + 1)
+        }
+    }
+
+    return (
+        <Container>
+            <Gallery
+                galleryTitle="Photo Album"
+                data={album}
+                type="flat"
+                cardStyle="card-style-6"
+                headerStyles={{
+                    padding: 10,
+                    headerBackground: props.headerBackground,
+                    titleColor: props.titleColor,
+                    controlsStyles: {
+                        iconSize: 25
+                    }
+                }}
+                columnsNumber={columnsNumber}
+                galleryColumnGap={columnGap}
+                galleryRowGap={rowGap}
+                galleryControls={galleryControls}
+                iconClicked={onIconClicked}
+                cardClicked={cardClicked}
+                cardIconClicked={cardIconClicked}
+                cardControls={cardControls}
+                customCardStyles={cardStyles}
+                {...props} />
+
+            <Modal
+                modalIsOpen={showModal}
+                closeModal={() => setShowModal(false)}
+                exitModalButton={(e) => (
+                    <div></div>
+                )}>
+                <AddPhoto
+                    saveHandler={onAddPhoto}
+                    cancelHandler={cancelHandler}
+                    saveBtnText={'Add'}
+                    cancelBtnText={'Cancel'} />
+            </Modal>
+            <Modal
+                modalIsOpen={showImgModal}
+                closeModal={() => {
+                    setShowImgModal(false)
+                    setOpenedImgIndex(null)
+                }}
+                exitModalButton={(e) => (
+                    <div></div>
+                )}
+                width="70vw"
+                height="90vh">
+                <CloseIconContainer onClick={() => setShowImgModal(false)}>
+                    <AiOutlineClose />
+                </CloseIconContainer>
+                <LeftIconContainer onClick={prevPhoto}>
+                    <AiOutlineArrowLeft />
+                </LeftIconContainer>
+                <DetailedPhoto cardClicked={nextPhoto} img={openedImg} />
+                <RightIconContainer onClick={nextPhoto}>
+                    <AiOutlineArrowRight />
+                </RightIconContainer>
+            </Modal>
+        </Container>
+    )
+}
+
+const Container = styled.div`
+
+`
+
+const IconContainer = styled.div`
+    width: 30px;
+    height: 30px;
+    background-color: #757575;
+    position: absolute;
+    transform: translateY(-50%);
+    top: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50rem;
+    z-index: 999;
+    cursor: pointer;
+    opacity: .4;
+    transition: all .2s;
+
+    &:hover{
+        opacity: 1;
+        transform: scale(1.1) translateY(-50%);
+    }
+
+    svg{
+        color: white;
+    }
+    
+`
+
+const CloseIconContainer = styled.div`
+    position: absolute;
+    z-index: 999;
+    right: 10px;
+    top: 10px;
+    cursor: pointer;
+
+    svg{
+        color: white;
+    }
+`
+
+const LeftIconContainer = styled(IconContainer)`
+   left: 10px;
+`
+
+const RightIconContainer = styled(IconContainer)`
+    right: 10px;
+`
+
+ViewAlbum.defaultProps = {
+    headerBackground: '#FE1744',
+    titleColor: 'white',
+    columnsNumber: 3,
+    columnGap: 10,
+    rowGap: 20,
+    cardBackgroundColor: 'white'
+};
+
+ViewAlbum.propTypes = {
+    album: PropTypes.array,
+    addPhoto: PropTypes.func,
+    deletePhoto: PropTypes.func,
+    cardIconClicked: PropTypes.func,
+    headerBackground: PropTypes.string,
+    titleColor: PropTypes.string,
+    columnsNumber: PropTypes.number,
+    columnGap: PropTypes.number,
+    rowGap: PropTypes.number,
+    cardBackgroundColor: PropTypes.string,
+    imgTitleColor: PropTypes.string,
+    descColor: PropTypes.string,
+}
+
+export default ViewAlbum;

package/src/stories/Photo Album/ViewAlbum/ViewAlbum.stories.jsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import ViewAlbum from "./ViewAlbum";
+import { deleteFromArrayByIndex, addObjectToArray } from '../../helpers/util';
+
+import img1 from '../../assets/images/album1.jpg';
+import img2 from '../../assets/images/album2.jpg';
+import img3 from '../../assets/images/album3.jpg';
+import img4 from '../../assets/images/album4.jpg';
+import img5 from '../../assets/images/album5.jpg';
+import img6 from '../../assets/images/album6.jpg';
+
+
+export default {
+    title: 'Photo Album/View Album',
+    component: ViewAlbum
+}
+
+export const Album = args => {
+    const [album, setAlbum] = useState([
+        { index: 0, img: img5, title: 'Image 1', description: 'This is description test', date: '2021-11-30' },
+        { index: 1, img: img3, title: 'Image 2', description: 'This is description test', date: '2021-11-30' },
+        { index: 2, img: img6, title: 'Image 3', description: 'This is description test', date: '2021-11-30' },
+        { index: 3, img: img2, title: 'Image 4', description: 'This is description test', date: '2021-11-30' },
+        { index: 4, img: img1, title: 'Image 5', description: 'This is description test', date: '2021-11-30' },
+        { index: 5, img: img4, title: 'Image 6', description: 'This is description test', date: '2021-11-30' },
+    ])
+
+    const onAddPhoto = (photo) => {
+        const newImg = {
+            img: photo.cover.meta.previewUrl,
+            title: photo.title,
+            description: photo.description,
+            date: photo.date
+        }
+        setAlbum(addObjectToArray(album, newImg))
+    }
+
+    const cardIconClicked = (action, index) => {
+        switch (action) {
+            case 'delete':
+                onDeletePhoto(index)
+                break;
+            default:
+                break;
+        }
+    }
+
+    const onDeletePhoto = (index) => {
+        setAlbum(deleteFromArrayByIndex(album, index))
+    }
+
+    return (
+        <ViewAlbum
+            album={album}
+            addPhoto={onAddPhoto}
+            deletePhoto={onDeletePhoto}
+            cardIconClicked={cardIconClicked}
+            {...args} />
+    )
+}

package/src/stories/Photo Album/ViewAlbums/ViewAlbums.jsx

@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import CreateAlbum from '../../Forms/CreateAlbum/CreateAlbum'
+import Gallery from '../../Reusable Components/Gallery/Gallery';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+
+import { AiOutlineFileAdd, AiFillDelete } from "react-icons/ai";
+
+const cardControls = [
+    { icon: (<AiFillDelete />), action: 'delete', name: 'Delete album' },
+]
+
+const galleryControls = [
+    { icon: (<AiOutlineFileAdd />), action: 'add', name: 'Add Album' },
+]
+
+const ViewAlbums = ({
+    albums,
+    cardBackgroundColor,
+    cardTitleColor,
+    cardTitleFontSize,
+    albumTitleColor,
+    countColor,
+    countFontSize,
+    columnsNumber,
+    columnGap,
+    rowGap,
+    ...props }) => {
+
+    const cardStyles = {
+        darkOnHover: true,
+        cardBackgroundColor,
+        cardTitleColor,
+        cardTitleFontSize,
+        countColor,
+        countFontSize,
+        controlsStyles: {
+            showOnHover: true,
+            position: 'center',
+            dropdownFontColor: "white",
+            iconBorderRadius: 100,
+            iconSize: 40,
+            iconsGap: 10,
+            iconColor: 'white',
+            containerPadding: 20,
+        }
+    }
+
+    const [showModal, setShowModal] = useState(false)
+
+    const onIconClicked = (action) => {
+        switch (action) {
+            case 'add':
+                setShowModal(true)
+                break;
+            default:
+                break;
+        }
+    }
+
+    const cardIconClicked = (action, index) => {
+        props.cardIconClicked(action, index)
+    }
+
+    const onAddAlbum = (album) => {
+        props.onAddAlbum(album)
+        setShowModal(false)
+    }
+
+    const cancelHandler = () => {
+        setShowModal(false)
+    }
+
+    return (
+        <Container>
+            <Gallery
+                galleryTitle="Photo Albums"
+                data={albums}
+                type="flat"
+                cardStyle="card-style-6"
+                headerStyles={{
+                    padding: 10,
+                    headerBackground: props.headerBackground,
+                    titleColor: props.titleColor,
+                    controlsStyles: {
+                        iconSize: 25
+                    }
+                }}
+                columnsNumber={columnsNumber}
+                galleryColumnGap={columnGap}
+                galleryRowGap={rowGap}
+                galleryControls={galleryControls}
+                iconClicked={onIconClicked}
+                cardClicked={() => null}
+                cardControls={cardControls}
+                cardIconClicked={cardIconClicked}
+                customCardStyles={cardStyles}
+                {...props} />
+
+            <Modal
+                modalIsOpen={showModal}
+                closeModal={() => setShowModal(false)}
+                exitModalButton={(e) => (
+                    <div></div>
+                )}>
+                <CreateAlbum
+                    saveHandler={onAddAlbum}
+                    cancelHandler={cancelHandler} />
+            </Modal>
+        </Container>
+    )
+}
+
+const Container = styled.div`
+
+`
+
+ViewAlbums.defaultProps = {
+    columnsNumber: 3,
+    headerBackground: '#FE1744',
+    titleColor: 'white',
+    cardBackgroundColor: 'white',
+    columnGap: 10,
+    rowGap: 20
+};
+
+ViewAlbums.propTypes = {
+    albums: PropTypes.array,
+    cardIconClicked: PropTypes.func,
+    onDeleteAlbum: PropTypes.func,
+    onAddAlbum: PropTypes.func,
+    columnsNumber: PropTypes.number,
+    headerBackground: PropTypes.string,
+    titleColor: PropTypes.string,
+    cardBackgroundColor: PropTypes.string,
+    columnGap: PropTypes.number,
+    rowGap: PropTypes.number,
+    countColor: PropTypes.string,
+    countFontSize: PropTypes.number,
+    cardTitleColor: PropTypes.string,
+    cardTitleFontSize: PropTypes.number,
+}
+
+export default ViewAlbums

package/src/stories/Photo Album/ViewAlbums/ViewAlbums.stories.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import ViewAlbums from './ViewAlbums';
+import { deleteFromArrayByIndex, addObjectToArray } from '../../helpers/util';
+
+import img1 from '../../assets/images/album1.jpg';
+import img2 from '../../assets/images/album2.jpg';
+import img3 from '../../assets/images/album3.jpg';
+import img4 from '../../assets/images/album4.jpg';
+import img5 from '../../assets/images/album5.jpg';
+import img6 from '../../assets/images/album6.jpg';
+
+
+export default {
+    title: 'Photo Album/Albums/Albums',
+    component: ViewAlbums
+}
+
+export const Albums = args => {
+    const [albums, setAlbums] = useState([
+        { img: img1, title: 'Album 1', count: '24' },
+        { img: img2, title: 'Album 2', count: '24' },
+        { img: img3, title: 'Album 3', count: '24' },
+        { img: img4, title: 'Album 4', count: '24' },
+        { img: img5, title: 'Album 5', count: '24' },
+        { img: img6, title: 'Album 6', count: '24' },
+    ])
+
+    const cardIconClicked = (action, index) => {
+        switch (action) {
+            case 'delete':
+                onDeleteAlbum(index)
+                break;
+            default:
+                break;
+        }
+    }
+
+    const onDeleteAlbum = (index) => {
+        setAlbums(deleteFromArrayByIndex(albums, index))
+    }
+
+    const onAddAlbum = (album) => {
+        const newAlbum = {
+            img: album.cover.meta.previewUrl,
+            title: album.title,
+            count: '55'
+        }
+        setAlbums(addObjectToArray(albums, newAlbum))
+    }
+
+    return (
+        <ViewAlbums
+            albums={albums}
+            cardIconClicked={cardIconClicked}
+            onDeleteAlbum={onDeleteAlbum}
+            onAddAlbum={onAddAlbum}
+            {...args} />
+    )
+}

package/src/stories/Reusable Components/Cards/Card-style-1/CardStyle1.jsx

@@ -0,0 +1,74 @@
+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 CardStyle1 = ({ 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)`
+    column-gap: 30px;
+`
+
+const Content = styled(globalContent)`
+    justify-content: space-between;
+`
+
+CardStyle1.defaultProps = {}
+
+CardStyle1.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 CardStyle1

package/src/stories/Reusable Components/Cards/Card-style-1/CardStyle1.stories.jsx

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

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

@@ -0,0 +1,94 @@
+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 } from '../globalCardStyles';
+import { AiFillFolderOpen, AiOutlineHeart, AiOutlineAudioMuted } from "react-icons/ai";
+
+const CardStyle10 = ({
+    title,
+    description,
+    img,
+    cardControls,
+    ...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}>
+            <SvgWrapper {...props}>
+                <AiFillFolderOpen />
+            </SvgWrapper>
+            <Content {...props}>
+                <Title {...props}>{title}</Title>
+                <Description {...props}>{description}</Description>
+            </Content>
+            <Controls
+                controls={cardControls}
+                show={showIcons}
+                onIconClicked={iconCliked}
+                showOnHover={true}
+                position='absolute'
+                iconBorderRadius={100}
+                iconSize={20}
+                iconsGap={10}
+                maxIcons={0}
+                iconColor='#FE1744'
+                dropdownFontSize={10}
+                {...props.controlsStyles} />
+        </Card>
+    )
+}
+
+const Card = styled(MainCard)`
+    flex-direction: column;
+    row-gap: 10px;
+`
+
+
+
+const Content = styled(globalContent)`
+    align-items: center;
+    justify-content: space-between;
+
+`
+
+const SvgWrapper = styled.div`
+
+    svg{
+        width: 70px;
+        height: 70px;
+        fill: ${props => props.iconColor}
+    }
+`
+
+CardStyle10.defaultProps = {}
+
+CardStyle10.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,
+    iconColor: PropTypes.string
+};
+
+
+export default CardStyle10