@mohamed-karawia/library 0.1.0

package/src/stories/Reusable Components/WidgetContainer/WidgetContainer.stories.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import WidgetContainer from './WidgetContainer';
+import { data, controls } from '../fakeData'
+
+const Songs = [
+    { name: 'Music 1', musicSrc: 'https://www.pacdv.com/sounds/free-music/kickstarter.mp3', cover: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&w=1000&q=80' },
+    { name: 'Music 2', musicSrc: 'https://www.pacdv.com/sounds/free-music/gentle-thoughts-1.mp3', cover: 'https://c4.wallpaperflare.com/wallpaper/729/961/256/black-minimalistic-music-piano-black-background-1680x1050-entertainment-music-hd-art-wallpaper-preview.jpg' },
+    { name: 'Music 3', musicSrc: 'https://www.pacdv.com/sounds/free-music/glow-in-the-dark.mp3', cover: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NHx8fGVufDB8fHx8&w=1000&q=80' },
+]
+
+export default {
+    title: 'Reusable components/Widget Container',
+    component: WidgetContainer
+}
+
+const Template = (args) => (<WidgetContainer {...args} />);
+
+export const ListWidget = Template.bind({});
+ListWidget.args = {
+    widgetType: "list",
+    widgetTitle: "test",
+    widgetControls: controls,
+    widgetProps: {
+        data: data,
+        cardStyle: "card-style-2",
+        type: "flat"
+    },
+    headerStyles: {
+        padding: 5,
+        headerBackground: '#FE1744',
+        titleColor: '#ffff',
+        controlsStyles: {
+            dropdownBackground: 'black',
+            dropdownFontColor: 'white',
+            dropdownItemHoverColor: '#FE1744'
+        },
+    }
+};
+
+
+export const MusicWidget = Template.bind({});
+MusicWidget.args = {
+    widgetType: "music player",
+    widgetTitle: "Music Player",
+    widgetControls: controls,
+    widgetProps: {
+        playlist: Songs
+    },
+    headerStyles: {
+        padding: 5,
+        headerBackground: '#FE1744',
+        titleColor: '#ffff',
+        controlsStyles: {
+            dropdownBackground: 'black',
+            dropdownFontColor: 'white',
+            dropdownItemHoverColor: '#FE1744'
+        },
+    }
+};
+

package/src/stories/Reusable Components/commonStyles.js

@@ -0,0 +1,47 @@
+export const headingControlsStyles = {
+    iconSize: 20,
+    iconBackground: '',
+    iconBackgroundHover: '',
+    iconHoverColor: 'gray',
+    iconsGap: 5,
+    iconBorderRadius: '',
+    dropdownBackground: '#272727',
+    dropdownFontColor: '',
+    dropdownItemHoverColor: '#000000'
+}
+
+export const galleryCardControlsStyles = {
+    cardPadding:10,
+    cardBorderColor:"#FE1744",
+    cardBorderSize: 1,
+    cardDescriptionColor:"#FE1744",
+    darkOnHover: true,
+    controlsStyles:{
+        showOnHover: true,
+        position: 'center',
+        iconBackground: "#272727",
+        dropdownBackground: "#272727",
+        dropdownFontColor: "white",
+        dropdownItemHoverColor: "#414141",
+        iconBackgroundHover: "#414141",
+        iconBorderRadius: 100,
+        iconSize: 25,
+        iconsGap: 10,
+        iconColor: '#FE1744'
+    }
+}
+
+export const listCardStyled = {
+    cardPadding: 10,
+    cardBorderColor: "#FE1744",
+    cardBorderSize: 1,
+    cardDescriptionColor: "#FE1744",
+    controlsStyles: {
+        showOnHover: true,
+        iconBackground: "#272727",
+        dropdownBackground: "#272727",
+        dropdownFontColor: "white",
+        dropdownItemHoverColor: "#414141",
+        iconBackgroundHover: "#414141"
+    }
+}

package/src/stories/Reusable Components/fakeData.js

@@ -0,0 +1,95 @@
+// Icons
+import { AiOutlineUserAdd, AiOutlineDelete, AiOutlineHeart, AiOutlineAudioMuted } from "react-icons/ai";
+import { IoIosAirplane, IoIosAlarm } from "react-icons/io";
+// List and Gallery controls
+export const controls = [
+    { icon: (<AiOutlineUserAdd />), action: 'add', name: 'Add member' },
+    { icon: (<AiOutlineDelete />), action: 'remove', name: 'Add member' },
+    { icon: (<IoIosAirplane />), action: 'add', name: 'Some Icon' },
+    { icon: (<IoIosAlarm />), action: 'alarm', name: 'Another Icons' },
+    { icon: (<IoIosAlarm />), action: 'alarm', name: 'Another Icons' },
+    { icon: (<IoIosAlarm />), action: 'alarm', name: 'Another Icons' },
+]
+// Cards Controls
+export const cardControls = [
+    { icon: (<AiOutlineHeart />), action: 'like', name: 'Add member' },
+    { icon: (<AiOutlineAudioMuted />), action: 'mute', name: 'Add member' },
+]
+// List and Gallery data
+export const data = [
+    {
+        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',
+    },
+    {
+        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',
+    },
+    {
+        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',
+    },
+    {
+        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',
+    },
+    {
+        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',
+    },
+    {
+        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',
+    },
+]
+// List and Gallery data with sections
+export const dataWithSections =  [
+    {
+        title: 'Section one',
+        data: [
+            {
+                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',
+            },
+            {
+                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'
+            },
+            {
+                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'
+            },
+        ],
+        priority: 2
+    },
+    {
+        title: 'Section Two',
+        data: [
+            {
+                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'
+            },
+            {
+                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'
+            },
+            {
+                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'
+            },
+        ],
+        priority: 1
+    },
+]

package/src/stories/Spaces/WelcomeSpace/WelcomeSpace.jsx

@@ -0,0 +1,102 @@
+import React from "react";
+
+import styled from "styled-components";
+import PropTypes from "prop-types";
+
+import BaseMaterial from "../../Containers/BaseMaterial";
+
+const WelcomeSpace = props => {
+  return (
+    <BaseMaterial {...props}>
+      <Image src={props.image_src} alt={props.image_alt} />
+      <Container1>
+        <WelcomeContainer>
+          <p>{props.text}</p>
+          <span>{props.text1}</span>
+        </WelcomeContainer>
+        <RulesContainer>
+          <p>{props.text2}</p>
+          <span>{props.text3}</span>
+        </RulesContainer>
+        <CreationContainer>
+          <p>{props.text4}</p>
+          <span>{props.text5}</span>
+        </CreationContainer>
+      </Container1>
+    </BaseMaterial>
+  );
+};
+
+const Container = styled("div")({
+  display: "flex",
+  position: "relative",
+  height: "1237px",
+  width: "100%",
+  "align-items": "flex-start",
+  "flex-direction": "column"
+});
+
+const Image = styled("img")({
+  width: "100%",
+  "object-fit": "cover",
+  height: "300px"
+});
+
+const Container1 = styled.div`
+  display: flex;,
+  width: 100%;
+  align-items: flex-start;
+  flex: 1;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: 16px;
+`
+
+const WelcomeContainer = styled("div")({
+  display: "flex",
+  "flex-direction": "column",
+  "justify-content": "flex-start",
+  "align-items": "flex-start"
+});
+
+const RulesContainer = styled("div")({
+  display: "flex",
+  "flex-direction": "column",
+  "justify-content": "flex-start",
+  "align-items": "flex-start",
+  "margin-top": 16
+});
+
+const CreationContainer = styled("div")({
+  display: "flex",
+  "flex-direction": "column",
+  "justify-content": "flex-start",
+  "align-items": "flex-start",
+  "margin-top": 16
+});
+
+WelcomeSpace.defaultProps = {
+  image_src: "https://play.teleporthq.io/static/svg/default-img.svg",
+  image_alt: "image",
+  text: "Welcome To My World",
+  text1:
+    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+  text2: "Rules",
+  text3:
+    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+  text4: "Created At",
+  text5: "January 15, 2019"
+};
+
+WelcomeSpace.propTypes = {
+  image_src: PropTypes.string,
+  image_alt: PropTypes.string,
+  text: PropTypes.string,
+  text1: PropTypes.string,
+  text2: PropTypes.string,
+  text3: PropTypes.string,
+  text4: PropTypes.string,
+  text5: PropTypes.string
+};
+
+export default WelcomeSpace;

package/src/stories/Spaces/WelcomeSpace/WelcomeSpace.stories.js

@@ -0,0 +1,10 @@
+import React from "react"
+
+import WelcomeSpace from "./WelcomeSpace"
+
+export default {
+    title: 'Spaces/Welcome',
+    component: WelcomeSpace
+}
+
+export const Default = (args) => <WelcomeSpace {...args} />

package/src/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.jsx

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import Gallery from '../../Reusable Components/Gallery/Gallery';
+import Modal from '../../Reusable Components/ReactModal/ReactModal';
+import CreateVideoAlbum from '../../Forms/CreateVideoAlbum/CreateVideoAlbum';
+
+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 AlbumsGallery = ({
+    videoAlbums,
+    cardBackgroundColor,
+    cardTitleColor,
+    cardTitleFontSize,
+    countColor,
+    countFontSize,
+    ...props }) => {
+    const [showModal, setShowModal] = useState(false)
+
+    const cardStyles = {
+        cardBackgroundColor,
+        cardTitleColor,
+        cardTitleFontSize,
+        countColor,
+        countFontSize,
+        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 onIconClicked = (action) => {
+        switch (action) {
+            case 'add':
+                setShowModal(true)
+                break;
+            default:
+                break;
+        }
+    }
+
+    const cardIconClicked = (action, index) => {
+        props.cardIconClicked(action, index)
+    }
+
+    const onAddAlbum = (album) => {
+        setShowModal(false)
+        props.onAddAlbum(album)
+    }
+
+    const cancelHandler = () => {
+        setShowModal(false)
+    }
+
+    return (
+        <Container>
+            <Gallery
+                galleryTitle="Video Albums"
+                data={videoAlbums}
+                type="flat"
+                cardStyle="card-style-6"
+                columnsNumber={3}
+                headerStyles={{
+                    padding: 10,
+                    headerBackground: '#FE1744',
+                    titleColor: '#ffff',
+                    controlsStyles: {
+                        iconSize: 25
+                    }
+                }}
+                iconClicked={onIconClicked}
+                galleryColumnGap={10}
+                galleryRowGap={20}
+                galleryControls={galleryControls}
+                cardControls={cardControls}
+                cardClicked={() => null}
+                cardIconClicked={cardIconClicked}
+                customCardStyles={cardStyles}
+            />
+            <Modal
+                modalIsOpen={showModal}
+                closeModal={() => setShowModal(false)}
+                exitModalButton={(e) => (
+                    <div></div>
+                )}>
+                <CreateVideoAlbum
+                    saveHandler={onAddAlbum}
+                    cancelHandler={cancelHandler} />
+            </Modal>
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    
+`
+
+AlbumsGallery.defaultProps = {};
+
+AlbumsGallery.propTypes = {
+    videoAlbums: PropTypes.array,
+    cardBackgroundColor: PropTypes.string,
+    cardTitleColor: PropTypes.string,
+    cardTitleFontSize: PropTypes.number,
+    countColor: PropTypes.string,
+    countFontSize: PropTypes.number
+}
+
+export default AlbumsGallery

package/src/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.stories.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import AlbumsGallery from "./AlbumsGallery";
+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: 'Video Album/Albums Gallery',
+    component: AlbumsGallery
+}
+
+export const Gallery = 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 onAddAlbum = (album) => {
+        const newAlbum = {
+            img: album.cover.meta.previewUrl,
+            title: album.title,
+            count: '55'
+        }
+        setAlbums(addObjectToArray(albums, newAlbum))
+    }
+
+    const onDeleteAlbum = (index) => {
+        setAlbums(deleteFromArrayByIndex(albums, index))
+    }
+
+    return (
+        <AlbumsGallery
+            videoAlbums={albums}
+            onAddAlbum={onAddAlbum}
+            cardIconClicked={cardIconClicked}
+            {...args}
+        />
+    )
+}

package/src/stories/VideoAlbum/Comments/Comments.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import List from '../../Reusable Components/ReusableList/ReusableList';
+
+
+const Comments = ({
+    comments,
+    cardPadding,
+    imgSize,
+    cardTitleFontSize,
+    cardTitleColor,
+    contentGap,
+    cardBackgroundColor,
+    ...props
+}) => {
+    return (
+        <Container>
+            <List
+                data={comments}
+                type="flat"
+                cardStyle="card-style-1"
+                customCardStyles={{
+                    cardPadding: cardPadding,
+                    imgSize: imgSize,
+                    cardTitleFontSize: cardTitleFontSize,
+                    cardTitleColor: cardTitleColor,
+                    contentGap: contentGap,
+                    cardBackgroundColor: cardBackgroundColor
+                }}
+            />
+        </Container>
+    )
+}
+
+const Container = styled.div`
+
+`
+
+Comments.defaultProps = {
+    cardPadding: 10,
+    imgSize: 50,
+    cardTitleFontSize: 12,
+    cardTitleColor: '#353535',
+    cardBackgroundColor: 'white'
+};
+
+Comments.propTypes = {
+    cardPadding: PropTypes.number,
+    imgSize: PropTypes.number,
+    cardTitleFontSize: PropTypes.number,
+    cardTitleColor: PropTypes.string,
+    contentGap: PropTypes.number,
+    cardBackgroundColor: PropTypes.string
+}
+
+export default Comments;

package/src/stories/VideoAlbum/Comments/Comments.stories.jsx

@@ -0,0 +1,18 @@
+import Comments from "./Comments";
+
+export default {
+    title: 'Video Album/Comments',
+    component: Comments
+}
+
+const comments = [
+    {img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.'},
+    {img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.'},
+    {img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.'},
+    {img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.'},
+    {img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png', title: 'User Name', description: 'This is A test for comments on videos.'},
+]
+
+export const videoComments = args => <Comments
+    comments={comments}
+{...args}/>