@mohamed-karawia/react-storybook 0.1.1

package/src/stories/Reusable Components/Cards/Card-style-8/CardStyle8.jsx

@@ -0,0 +1,113 @@
+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,
+    Img
+} from '../globalCardStyles';
+
+const CardStyle8 = ({ username, date, text, img, media, ...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}>
+                <Header>
+                    <Title {...props}>{username}</Title>
+                    <Date>{date}</Date>
+                </Header>
+                <Description {...props}>{text}</Description>
+                {media && <Media>
+                    {media}
+                </Media>}
+            </Content>
+            {props.cardControls
+                &&
+                <Controls
+                    controls={props.cardControls}
+                    show={showIcons}
+                    onIconClicked={iconCliked}
+                    {...props.controlsStyles} />}
+        </Card>
+    )
+}
+
+const Card = styled(MainCard)`
+    column-gap: 30px;
+    align-items: flex-start;
+`
+const ImgWrapper = styled.div`
+    min-width: ${props => props.imgSize || 60}px;
+    min-height: ${props => props.imgSize || 60}px;
+    width: 60px;
+    height: 60px;
+    border-radius: 100%;
+`
+
+const Content = styled(globalContent)`
+    height: 100%;
+    justify-content: space-between;
+    gap: 10px;
+`
+
+const Header = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 20px;
+`
+
+const Date = styled.p`
+    font-size: 14px;
+    color: gray;
+`
+
+const Media = styled.div`
+    max-width: 300px;
+
+    *{
+        width: 100%;
+    }
+`
+
+
+CardStyle8.defaultProps = {
+    cardTitleFontSize: 15,
+    cardPadding: 5
+}
+
+CardStyle8.propTypes = {
+    username: PropTypes.string,
+    text: PropTypes.string,
+    img: PropTypes.string,
+    date: 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 CardStyle8

package/src/stories/Reusable Components/Cards/Card-style-8/CardStyle8.stories.jsx

@@ -0,0 +1,29 @@
+import CardStyle8 from './CardStyle8';
+
+import { controls } from '../../fakeData'
+
+export default {
+    title: 'Reusable Components/Cards/Card style 8',
+    component: CardStyle8
+}
+
+export const Card = args => (
+    <CardStyle8
+        img='https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png'
+        username="Card Style 8"
+        date="15/12/2021"
+        text="Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test "
+        cardControls={controls}
+        media={(<img src="https://arabhardware.net/wp-content/uploads/2020/03/valorant-2020-4k-0f-scaled.jpg"/>)}
+        controlsStyles={{
+            iconColor: 'black',
+            showOnHover: true,
+            position: 'absolute',
+            iconBackground: '#414141',
+            iconSize: 18,
+            iconColor: 'white',
+            dropdownBackground: '#414141',
+            dropdownFontColor: 'white'
+        }}
+        {...args}
+    />)

package/src/stories/Reusable Components/Cards/Card-style-9/CardStyle9.jsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+import PropTypes from "prop-types";
+
+import {
+    MainCard,
+    globalContent,
+    Title,
+    Img
+} from '../globalCardStyles';
+
+const CardStyle9 = ({ username, answered, img, status, ...props }) => {
+    console.log(props)
+
+    const onAccept = () => {
+        alert(props.index)
+    }
+
+    return (
+        <Card {...props}>
+            <ImgWrapper {...props}>
+                <Img src={img} />
+            </ImgWrapper>
+            <Content {...props}>
+                    <Title {...props}>{username}</Title>
+                    <Answered>Questions Answered: {answered}</Answered>
+                    <Buttons>
+                        <Accept onClick={onAccept}>Accept</Accept>
+                        <Decline >Decline</Decline>
+                        {status === 'pending' && <Review>In Review</Review>}
+                    </Buttons>
+            </Content>
+        </Card>
+    )
+}
+
+const Card = styled(MainCard)`
+    align-items: center;
+    gap: 20px;
+    padding: 10px;
+`
+const ImgWrapper = styled.div`
+    min-width: ${props => props.imgSize || 60}px;
+    min-height: ${props => props.imgSize || 60}px;
+    width: 60px;
+    height: 60px;
+    border-radius: 100%;
+`
+
+const Content = styled(globalContent)`
+    height: 100%;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+`
+
+const Answered = styled.h5`
+    font-weight: 300;
+`
+
+const Buttons = styled.div`
+    display: flex;
+    gap: 10px;
+`
+
+const Button = styled.button`
+    padding: 7px 20px;
+    border: none;
+    color: white;
+    cursor: pointer;
+`
+
+const Accept = styled(Button)`
+    background-color: #69d869;
+`
+
+const Decline = styled(Button)`
+    background-color: #e24848;
+`
+
+const Review = styled(Button)`
+    background-color: #18b8e9;
+`
+
+export default CardStyle9;

package/src/stories/Reusable Components/Cards/Card-style-9/CardStyle9.stories.jsx

@@ -0,0 +1,14 @@
+import CardStyle9 from "./CardStyle9";
+
+export default {
+    title: 'Reusable Components/Cards/Card style 9',
+    component: CardStyle9
+}
+
+export const Card = args =>
+    <CardStyle9
+        img='https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png'
+        username="User Name"
+        answered={'3/4'}
+        status="pending"
+        {...args} />

package/src/stories/Reusable Components/Cards/Card.jsx

@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+
+import styled from 'styled-components';
+import PropTypes from "prop-types";
+import Controls from '../Controls/Controls';
+
+const Card = ({ title, description, ...props }) => {
+    const [showIcons, setShowIcons] = useState(false)
+    console.log(props)
+    return (
+        <MainCard
+            onMouseEnter={e => setShowIcons(true)}
+            onMouseLeave={e => setShowIcons(false)}
+            {...props}>
+            {
+                props.img &&
+                <ImgWrapper {...props}>
+                    <Img src={props.img} />
+                </ImgWrapper>
+            }
+            <Content {...props}>
+                <Title {...props}>{title}</Title>
+                <Discription {...props}>{description}</Discription>
+            </Content>
+            {props.cardControls
+                &&
+                <Controls
+                    controls={props.cardControls}
+                    show={showIcons}
+                    {...props.controlsStyles} />}
+        </MainCard>
+    )
+}
+
+const MainCard = styled.div`
+    * {
+        margin: 0;
+        padding: 0;
+    }
+    font-family: sans-serif;
+    display: flex;
+    background-color: ${props => props.cardBackgroundColor || 'white'};
+    border-radius: ${props => props.cardRadius}px;
+    border: ${props => props.cardBorderSize + 'px solid ' + props.cardBorderColor};
+    flex-direction: ${props => props.cardDirection};
+    align-items: center;
+    column-gap: 30px;
+    padding: ${props => props.cardPadding + 'px' || 0} !important;
+    /* position: relative; */
+    &:hover {
+        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+        -webkit-filter: ${props => props.darkOnHover ? 'brightness(60%)' : 'brightness(100%)'};
+        transition: all .2s ease;
+        background-color: ${props => props.onHoverBackgroundColor};
+    }
+    
+`
+
+const ImgWrapper = styled.div`
+    width: ${props => props.imgSize || 100}px;
+    height: ${props => props.imgSize || 100}px;
+    border-radius: ${props => props.cardImageRadius + 'px' || '100%'};
+`
+const Img = styled.img`
+    width: 100%;
+    height: 100%;
+    object-position: center;
+    object-fit: cover;
+    border-radius: inherit;
+`
+
+const Content = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: ${props => props.cardDirection === 'column' ? 'center' : 'flex-start'};
+    justify-content: space-space-between;
+
+`
+
+const Title = styled.h3`
+    text-transform: capitalize;
+    color: ${props => props.cardTitleColor || 'black'};
+    font-size: ${props => props.cardTitleFontSize}px;
+    font-weight: ${props => props.cardTitleFontWeight || 300};
+`
+
+const Discription = styled.h5`
+    color: ${props => props.cardDescriptionColor || 'black'};
+    font-size: ${props => props.cardDescriptionFontSize}px;
+    text-align: center;
+    font-weight: 500;
+`
+
+
+Card.defaultProps = {}
+
+Card.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,
+    cardDirection: PropTypes.string,
+    cardPadding: PropTypes.number,
+    imgSize: PropTypes.number,
+    cardBorderSize: PropTypes.number,
+    cardBorderColor: PropTypes.string
+};
+
+export default Card
+
+

package/src/stories/Reusable Components/Cards/Card.stories.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import Card from './Card';
+
+export default {
+    title: 'Reusable Components/Cards/Regular Card',
+    component: Card,
+};
+
+const Template = (args) => <Card  {...args} />;
+
+export const CardWithImage = Template.bind({});
+CardWithImage.args = {
+    title: 'Card with image',
+    description: 'Lorem ipsum dolor sit amet consectetur.',
+    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+    cardBackgroundColor: '#f1d6d6',
+    cardRadius: '20',
+    cardTitleFontSize: '',
+    cardTitleColor: '',
+    cardImageRadius: '100',
+    cardDescriptionFontSize: '',
+    cardDescriptionColor: '',
+    cardDirection: '',
+    cardPadding: '10',
+    imgSize: '90',
+    cardBorderSize: '',
+    cardBorderColor: '',
+    controlsStyles: {
+        showOnHover: true,
+        iconBackground: "#272727",
+        dropdownBackground: "#272727",
+        dropdownFontColor: "white",
+        dropdownItemHoverColor: "#414141",
+        iconBackgroundHover: "#414141"
+    }
+};
+
+export const CardWithImageColumn = Template.bind({});
+CardWithImageColumn.args = {
+    title: 'Card with image column',
+    description: 'Lorem ipsum dolor sit amet consectetur.',
+    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+    cardBackgroundColor: '#f1d6d6',
+    cardRadius: '20',
+    cardTitleFontSize: '',
+    cardTitleColor: '',
+    cardImageRadius: '100',
+    cardDescriptionFontSize: '',
+    cardDescriptionColor: '',
+    cardDirection: 'column',
+    cardPadding: '10',
+    imgSize: '90',
+    cardBorderSize: '',
+    cardBorderColor: '',
+    controlsStyles: {
+        showOnHover: true,
+        iconBackground: "#272727",
+        dropdownBackground: "#272727",
+        dropdownFontColor: "white",
+        dropdownItemHoverColor: "#414141",
+        iconBackgroundHover: "#414141"
+    }
+};
+
+export const CardWithoutImage = Template.bind({});
+CardWithoutImage.args = {
+    title: 'Card with image',
+    description: 'Lorem ipsum dolor sit amet consectetur.',
+    img: '',
+    cardBackgroundColor: '#f1d6d6',
+    cardRadius: '20',
+    cardTitleFontSize: '',
+    cardTitleColor: '',
+    cardImageRadius: '100',
+    cardDescriptionFontSize: '',
+    cardDescriptionColor: '',
+    cardDirection: '',
+    cardPadding: '10',
+    imgSize: '90',
+    cardBorderSize: '',
+    cardBorderColor: '',
+    controlsStyles: {
+        showOnHover: true,
+        iconBackground: "#272727",
+        dropdownBackground: "#272727",
+        dropdownFontColor: "white",
+        dropdownItemHoverColor: "#414141",
+        iconBackgroundHover: "#414141"
+    }
+};
+
+export const CardWithoutImageColumn = Template.bind({});
+CardWithoutImageColumn.args = {
+    title: 'Card with image column',
+    description: 'Lorem ipsum dolor sit amet consectetur.',
+    img: '',
+    cardBackgroundColor: '#f1d6d6',
+    onHoverBackgroundColor: '',
+    cardRadius: '20',
+    cardTitleFontSize: '',
+    cardTitleColor: '',
+    cardImageRadius: '100',
+    cardDescriptionFontSize: '',
+    cardDescriptionColor: '',
+    cardDirection: 'column',
+    cardPadding: '10',
+    imgSize: '90',
+    cardBorderSize: '',
+    cardBorderColor: '',
+    controlsStyles: {
+        showOnHover: true,
+        iconBackground: "#272727",
+        dropdownBackground: "#272727",
+        dropdownFontColor: "white",
+        dropdownItemHoverColor: "#414141",
+        iconBackgroundHover: "#414141"
+    }
+};

package/src/stories/Reusable Components/Cards/globalCardStyles.js

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+
+export const MainCard = styled.div`
+* {
+        margin: 0;
+        padding: 0;
+    }
+    font-family: sans-serif;
+    display: flex;
+    background-color: ${props => props.cardBackgroundColor || 'white'};
+    border-radius: ${props => props.cardRadius}px;
+    border: ${props => props.cardBorderSize + 'px solid ' + props.cardBorderColor};
+    align-items: center;
+    padding: ${props => props.cardPadding + 'px' || 0} !important;
+    order: ${props => props.priority};
+    &:hover {
+        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+        -webkit-filter: ${props => props.darkOnHover ? 'brightness(60%)' : 'brightness(100%)'};
+        transition: all .2s ease;
+        background-color: ${props => props.onHoverBackgroundColor};
+    }
+`
+export const globalContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: ${props => props.contentGap}px;
+`
+
+export const Title = styled.h3`
+    text-transform: capitalize;
+    color: ${props => props.cardTitleColor || 'black'};
+    font-size: ${props => props.cardTitleFontSize}px;
+    font-weight: ${props => props.cardTitleFontWeight || 300};
+`
+
+export const Description = styled.h5`
+color: ${props => props.cardDescriptionColor || 'black'};
+font-size: ${props => props.cardDescriptionFontSize}px;
+font-weight: 500;
+`
+
+export const ImgWrapper = styled.div`
+    width: ${props => props.imgSize || 100}px;
+    height: ${props => props.imgSize || 100}px;
+    border-radius: ${props => props.cardImageRadius + 'px' || '100%'};
+`
+export const Img = styled.img`
+    width: 100%;
+    height: 100%;
+    object-position: center;
+    object-fit: cover;
+    border-radius: inherit;
+`

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

@@ -0,0 +1,137 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+// Icons
+import { IoIosMore } from "react-icons/io";
+
+const Controls = ({ controls, maxIcons = 2, ...props }) => {
+    const [showMore, setShowMore] = useState(false)
+
+    const showIcons = (props.showOnHover && props.show) || !props.showOnHover;
+    const showMoreIcon = showIcons && controls.length > maxIcons;
+
+    const clicked = (action) => {
+        props.onIconClicked(action)
+    }
+
+    let dropdownMenu;
+    if (showMore) {
+        dropdownMenu = (
+            <IconsDropDown {...props}>
+                {controls.slice(maxIcons, controls.length).map((control, index) => (
+                    <DropdownItem key={index} {...props} onClick={(e) => clicked(control.action)}>
+                        {control.icon}
+                        <IconName>{control.name}</IconName>
+                    </DropdownItem>
+                ))
+                }
+            </IconsDropDown>
+        )
+    }
+    return (
+        <ListIcons {...props}>
+            {
+                showIcons && controls.slice(0, maxIcons).map((control, index) => (
+                    <IconContainer key={index} {...props} onClick={() => clicked(control.action)}>
+                        {control.icon}
+                    </IconContainer>
+                ))
+            }
+            {
+                showMoreIcon &&
+                (<IconContainer onClick={() => setShowMore(!showMore)} onMouseLeave={e => setShowMore(false)} {...props}>
+                    <IoIosMore />
+                    {dropdownMenu}
+                </IconContainer>)
+            }
+
+        </ListIcons>
+    )
+}
+
+const ListIcons = styled.div`
+    display: flex;
+    gap: ${props => props.iconsGap}px;
+    position: ${props => props.position ? 'absolute' : 'static'};
+    left: ${props => props.position === 'center' ? '50%' : '90%'};
+    top: ${props => props.position === 'center' ? '50%' : '0'};
+    bottom: ${props => props.position === 'center' ? 'unset' : '90%'};
+    transform: ${props => props.position === 'center' ? 'translate(-50%, -50%)' : 'translate(0, 0)'};
+
+    & * {
+        padding: 0;
+        margin: 0;
+    }
+
+    & svg{
+        fill: ${props => props.iconColor || 'white'};
+        width: ${props => props.iconSize}px;
+        height: ${props => props.iconSize}px;
+    }
+`
+
+const IconContainer = styled.div`
+    background-color: ${props => props.iconBackground};
+    border-radius: ${props => props.iconBorderRadius}px;
+    cursor: pointer;
+    position: relative;
+    padding: ${props => props.containerPadding}px;
+
+    &:hover {
+        background-color: ${props => props.iconBackgroundHover}
+    }
+
+`
+
+const IconsDropDown = styled.div`
+    position: absolute;
+    right: 0;
+    top: 100%;
+    background-color: ${props => props.dropdownBackground};
+    min-width: 150px;
+    color: ${props => props.dropdownFontColor};
+`
+
+const DropdownItem = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 3px !important;
+
+    &:hover{
+        background-color: ${props => props.dropdownItemHoverColor};
+        color: white;
+
+        svg{
+        fill: ${props => props.iconHoverColor};
+    }
+    }
+`
+
+const IconName = styled.p`
+   text-transform: capitalize;
+   font-size: ${props => props.dropdownFontSize}px;
+`
+
+Controls.defaultProps = {}
+
+Controls.propTypes = {
+    controls: PropTypes.array.isRequired,
+    maxIcons: PropTypes.number,
+    showOnHover: PropTypes.bool,
+    iconSize: PropTypes.number,
+    iconColor: PropTypes.string,
+    iconBackground: PropTypes.string,
+    iconBackgroundHover: PropTypes.string,
+    iconColorOnHover: PropTypes.string,
+    iconsGap: PropTypes.number,
+    iconBorderRadius: PropTypes.number,
+    dropdownBackground: PropTypes.string,
+    dropdownFontColor: PropTypes.string,
+    dropdownFontSize: PropTypes.number,
+    dropdownItemHoverColor: PropTypes.string,
+    position: PropTypes.string,
+    containerPadding: PropTypes.number
+};
+
+export default Controls

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import Controls from './Controls';
+
+import { AiOutlineUserAdd, AiOutlineDelete } from "react-icons/ai";
+import { IoIosAirplane, IoIosAlarm } from "react-icons/io";
+
+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: 'remove', name: 'Another Icons' },
+]
+
+export default {
+    title: 'reusable Components/Controls',
+    component: Controls
+}
+
+const Template = (args) => <Controls {...args} />;
+
+export const fixedControls = Template.bind({});
+fixedControls.args = {
+    controls,
+};