@mohamed-karawia/react-storybook 0.1.1

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import PropTypes from 'prop-types';
+
+import Controls from '../Controls/Controls';
+
+const ReusableHeader = ({ title, discription, controls, ...props }) => {
+    
+    const iconCliked = (action) => {
+        props.iconClicked(action)
+    }
+
+    return (
+        <Container {...props}>
+            <Title {...props}>{title}</Title>
+            <Discription {...props}>{discription}</Discription>
+            {
+                controls
+                &&
+                <Controls
+                    controls={controls}
+                    onIconClicked={iconCliked}
+                    {...props.controlsStyles} />
+            }
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    font-family: sans-serif;
+    display: flex;
+    background-color: ${props => props.headerBackground || 'white'};
+    padding: ${props => props.padding || 0}px !important;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    > * {
+        margin: 0;
+        padding: 0;
+    }
+  
+`
+
+const Title = styled.h3`
+    color: ${props => props.titleColor};
+    font-size: ${props => props.titleFontSize}px;
+    font-weight: ${props => props.titleFontWeight || 400};
+`
+
+const Discription = styled.p`
+    color: ${props => props.DiscriptionColor};
+    font-size: ${props => props.DiscriptionFontSize}px;
+    font-weight: ${props => props.DiscriptionFontWeight};
+`
+
+ReusableHeader.defaultProps = {};
+
+ReusableHeader.propTypes = {
+    title: PropTypes.string,
+    discription: PropTypes.string,
+    controls: PropTypes.array,
+    controlsStyles: PropTypes.object,
+    headerBackground: PropTypes.string,
+    padding: PropTypes.number,
+    horizontalPadding: PropTypes.number,
+    headerMarginBottom: PropTypes.number,
+    titleColor: PropTypes.string,
+    titleFontSize: PropTypes.number,
+    titleFontWeight: PropTypes.number,
+    DiscriptionColor: PropTypes.string,
+    DiscriptionFontSize: PropTypes.number,
+    DiscriptionFontWeight: PropTypes.number
+}
+
+export default ReusableHeader

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import ReusableHeader from './ReusableHeader';
+import { controls } from '../fakeData'
+
+export default {
+    title: 'Reusable Components/Reusable Header',
+    component: ReusableHeader
+}
+
+const Template = (args) => (<ReusableHeader {...args} />
+);
+
+export const Header = Template.bind({});
+Header.args = {
+    title: "Reusable Header",
+    discription: "This is a discription for header",
+    controls: controls,
+    controlsStyles: {
+        iconColor: 'red'
+    }
+};

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from "prop-types";
+
+import { getCardStyle } from '../../helpers/util';
+
+import CardStyle3 from '../Cards/Card-style-3/CardStyle3';
+import ReusableHeader from '../ReusableHeader/ReusableHeader';
+
+const ReusableList = ({ data, cardStyle, customCardStyles, type, cardControls = null, ...props }) => {
+    let child;
+
+    const iconCliked = (action) => {
+        props.iconClicked(action)
+    }
+
+    const clicked = (index) => {
+        props.cardClicked(index)
+    }
+
+    const cardIconClicked = (action, index) => {
+        props.cardIconClicked(action, index)
+    }
+
+    const mapOverCardsData = (data) => {
+        return data.map((cardProps, index) => (
+            getCardStyle(cardProps, cardStyle, customCardStyles, cardControls, index, clicked, cardIconClicked)
+        ))
+    }
+
+    if (type === 'flat') {
+        child = mapOverCardsData(data)
+    } else {
+        child = data.map(section => (
+            <Section priority={section.priority}>
+                <CardStyle3 title={section.title} {...props.sectionHeaderStyles} />
+                <SectionBody>
+                    {mapOverCardsData(section.data)}
+                </SectionBody>
+            </Section>
+        ))
+    }
+
+
+    return (
+        <List {...props}>
+            {!props.hideTitle && <ReusableHeader
+                title={props.listTitle}
+                controls={props.listControls}
+                iconClicked={iconCliked}
+                {...props.headerStyles}
+            />}
+            <ListBody {...props}>
+                {child}
+            </ListBody>
+        </List>
+    )
+}
+
+const List = styled.ul`
+    display: flex;
+    flex-direction: column;
+    font-family: sans-serif;
+    width: ${props => props.listWidth + 'px' || '100%'};
+    padding: 0;
+    > * {
+        padding: 0;
+        margin: 0;
+    }
+`
+
+const ListBody = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: ${props => props.listRowGap}px;
+`
+
+const Section = styled.div`
+    order: ${({ priority }) => priority};
+`
+
+const SectionBody = styled.div`
+    display: flex;
+    flex-direction: column;
+`
+
+
+ReusableList.defaultProps = {}
+
+ReusableList.propTypes = {
+    data: PropTypes.array.isRequired,
+    cardStyle: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(['flat', 'sectioned']),
+    listControls: PropTypes.array,
+    controlsStyles: PropTypes.object,
+    cardControls: PropTypes.array,
+    customCardStyles: PropTypes.object,
+    listRowGap: PropTypes.number,
+    listTitle: PropTypes.string,
+    hideTitle: PropTypes.bool
+};
+
+export default ReusableList

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

@@ -0,0 +1,70 @@
+import React from 'react';
+// Components
+import ReusableList from './ReusableList';
+// Data
+import { controls, data, dataWithSections, cardControls } from '../fakeData';
+export default {
+    title: 'Reusable components/List',
+    component: ReusableList
+}
+
+const Template = (args) => (<ReusableList
+    listTitle='Reusable List'
+    cardStyle="card-style-1"
+    {...args} />
+);
+
+export const ListFlat = Template.bind({});
+ListFlat.args = {
+    data: data,
+    type: "flat",
+    cardControls,
+    headerStyles: {
+        padding: 10,
+        headerBackground: '#FE1744',
+        titleColor: '#ffff',
+        controlsStyles: {
+            dropdownBackground: 'black',
+            dropdownFontColor: 'white',
+            dropdownItemHoverColor: '#FE1744'
+        },
+    },
+    listControls: controls,
+    customCardStyles: {
+        controlsStyles: {
+            iconColor: 'black',
+            showOnHover: true
+        }
+    },
+    hideTitle: false
+};
+
+export const ListSectioned = Template.bind({});
+ListSectioned.args = {
+    data: dataWithSections,
+    type: "sectioned",
+    sectionHeaderStyles: {
+        cardTitleColor: 'white',
+        cardBackgroundColor: 'black',
+        cardPadding: 10
+    },
+    cardControls,
+    headerStyles: {
+        padding: 10,
+        headerBackground: '#FE1744',
+        titleColor: '#ffff',
+        controlsStyles: {
+            dropdownBackground: 'black',
+            dropdownFontColor: 'white',
+            dropdownItemHoverColor: '#FE1744'
+        },
+    },
+    listControls: controls,
+    customCardStyles: {
+        controlsStyles: {
+            iconColor: 'black',
+            showOnHover: true
+
+        }
+    },
+}

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

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+const SearchCard = ({ list=[], item='' }) => {
+  const [filteredList, setFilteredList] = useState([]);
+
+  const getFilteredList = (item) => {
+    const a = list.filter((l) => {
+      if (l.name.indexOf(item) !== -1) return l;
+    });
+    console.log('item:', item, 'filtered array:', a);
+    setFilteredList(a);
+  };
+  useEffect(() => {
+    if (item.length > 0) getFilteredList(item);
+    else setFilteredList([]);
+  }, [item]);
+  return (
+    <PresetDivContainer>
+      {filteredList.length > 0 &&
+        filteredList.map((t, index) => (
+          <PresetDiv
+            key={index}
+            onClick={() => {
+              const a = filteredList.filter((the, i) => {
+                if (i === index) {
+                  the.selected = !the.selected;
+                  return the;
+                } else {
+                  the.selected = false;
+                  return the;
+                }
+              });
+              setFilteredList(a);
+            }}
+            selected={t.selected}
+          >
+            <CardImage src='https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg' />
+            <CardTitle>{t.name}</CardTitle>
+            <CardDescription>{t.name}</CardDescription>
+          </PresetDiv>
+        ))}
+    </PresetDivContainer>
+  );
+};
+
+const PresetDivContainer = styled.div`
+  display: flex;
+  width: 100%;
+  /* justify-content: center; */
+  margin-bottom: 2%;
+  /* margin-left: 2%; */
+`;
+const PresetDiv = styled.div`
+  margin-right: 2%;
+  width: 30%;
+  display: flex;
+  flex-direction: column;
+  /* flex: 1; */
+  border: 1px solid white;
+
+  background: ${(props) => (props.selected ? '#ccc' : 'white')};
+  :hover {
+    opacity: 0.8;
+  }
+`;
+const CardImage = styled.img`
+  height: 70%;
+  width: 100%;
+  :hover {
+    opacity: 0.8;
+  }
+`;
+
+const CardTitle = styled.label`
+  font-size: 18px;
+  font-weight: 400;
+  margin-top: 1%;
+  margin-left: 2%;
+`;
+
+const CardDescription = styled.label`
+  font-size: 14px;
+  font-weight: 200;
+  margin-top: 1%;
+  margin-left: 2%;
+`;
+
+export default SearchCard;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import SearchCard from './SearchCard';
+
+export default {
+  title: 'Components/SearchCard/Item',
+  component: SearchCard,
+};
+
+export const Default = (args) => <SearchCard {...args} />

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from "prop-types";
+
+import ReusableHeader from '../ReusableHeader/ReusableHeader';
+
+const SpaceContainer = ({ title, discription, controls, ...props }) => {
+    const iconClicked = (action) => {
+        console.log(action)
+    }
+
+    return (
+        <Container>
+            {!props.hideTitle && <ReusableHeader
+                title={title}
+                discription={discription}
+                controls={controls}
+                iconClicked={iconClicked}
+                {...props.headerStyles}
+            />}
+            <Body>
+                {props.children}
+            </Body>
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    width: 100%;
+    font-family: sans-serif;
+    padding: 0;
+`
+
+const Body = styled.div`
+    display: flex;
+    justify-content: center;
+`
+
+SpaceContainer.defaultProps = {};
+
+SpaceContainer.propTypes = {
+    title: PropTypes.string,
+    discription: PropTypes.string,
+    controls: PropTypes.array,
+    headerStyles: PropTypes.object
+}
+
+export default SpaceContainer

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

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import SpaceContainer from './SpaceContainer';
+import EditorComponent from '../../Common Inputs/EditorComponent/EditorComponent'
+
+import { cardControls, controls } from '../fakeData';
+
+
+const data = {
+  blocks: [
+    {
+      type: "header",
+      data: {
+        text: "Editor.js",
+        level: 1
+      }
+    },
+    {
+      type: "paragraph",
+      data: {
+        text:
+          "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text."
+      }
+    },
+    {
+      type: 'image',
+      "data": {
+        "file": {
+          "url": "https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg"
+        },
+        "caption": "Caption Example",
+        "withBorder": false,
+        "withBackground": false,
+        "stretched": false
+      }
+    },
+    {
+      "type": "paragraph",
+      "data": {
+        "text": "Create a directory for your module, enter it and run <mark class=\"cdx-marker\">npm init</mark> command."
+      }
+    },
+    {
+      "type": "table",
+      "data": {
+        "withHeadings": true,
+        "content": [["Kine", "Pigs", "Chicken"], ["1 pcs", "3 pcs", "12 pcs"], ["100$", "200$", "150$"]]
+      }
+    }
+
+  ]
+};
+
+export default {
+  title: 'Reusable Components/Space Container',
+  component: SpaceContainer
+}
+
+const Template = (args) => (
+  <SpaceContainer {...args}>
+    <EditorComponent data={data} />
+  </SpaceContainer>
+);
+
+export const EditorSpace = Template.bind({});
+EditorSpace.args = {
+  title: "Space Title",
+  discription: "Lorem ipsum dolor sit amet consectetur.",
+  controls: cardControls,
+  headerStyles: {
+    padding: 10,
+    headerBackground: '#FE1744',
+    titleColor: '#ffff',
+    controlsStyles: {
+      iconsGap: 5
+    },
+  },
+};

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

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+import PropTypes from "prop-types";
+
+const Spinner = (props) => {
+    return (
+        <Loader {...props}>
+            Loading...
+        </Loader>
+    )
+}
+
+const Loader = styled.div`
+    &,
+    &:before,
+    &:after {
+    border-radius: 50%;
+    width: 2.5em;
+    height: 2.5em;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    -webkit-animation: load7 1.8s infinite ease-in-out;
+    animation: load7 1.8s infinite ease-in-out;
+    }
+    & {
+    color: ${props => props.color || 'white'};
+    font-size: 10px;
+    margin: 80px auto;
+    position: relative;
+    text-indent: -9999em;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+    }
+    &:before,
+    &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    }
+    &:before {
+    left: -3.5em;
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+    }
+    &:after {
+    left: 3.5em;
+    }
+    @-webkit-keyframes load7 {
+    0%,
+    80%,
+    100% {
+        box-shadow: 0 2.5em 0 -1.3em;
+    }
+    40% {
+        box-shadow: 0 2.5em 0 0;
+    }
+    }
+    @keyframes load7 {
+    0%,
+    80%,
+    100% {
+        box-shadow: 0 2.5em 0 -1.3em;
+    }
+    40% {
+        box-shadow: 0 2.5em 0 0;
+    }
+    }
+`
+
+Spinner.defaultProps = {};
+
+Spinner.propTypes = {
+    color: PropTypes.string
+};
+
+
+export default Spinner;

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

@@ -0,0 +1,8 @@
+import Spinner from "./Spinner";
+
+export default {
+    title: 'Reusable Components/Spinner/Spinner',
+    component: Spinner
+}
+
+export const spinner = args => <Spinner {...args} />

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from "prop-types";
+
+import { getWidgetType } from '../../helpers/util';
+import ReusableHeader from '../ReusableHeader/ReusableHeader';
+
+const WidgetContainer = ({
+    widgetTitle,
+    widgetType,
+    widgetControls,
+    widgetProps,
+    ...props
+}) => {
+
+    const child = getWidgetType(widgetType, widgetProps)
+
+    const iconCliked = (action) => {
+        console.log(action)
+    }
+
+    return (
+        <Container>
+            {widgetTitle &&
+                <ReusableHeader
+                    title={widgetTitle}
+                    controls={widgetControls}
+                    iconClicked={iconCliked}
+                    {...props.headerStyles}
+                />
+            }
+            <Body>
+                {child}
+            </Body>
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+`
+
+const Body = styled.div`
+    margin: 0;
+    padding: 0;
+`
+
+WidgetContainer.defaultProps = {}
+
+WidgetContainer.propTypes = {
+    widgetType: PropTypes.oneOf(['list', 'music player', 'logo']).isRequired,
+    widgetTitle: PropTypes.string,
+    widgetControls: PropTypes.array,
+    widgetProps: PropTypes.object,
+    headerStyles: PropTypes.object
+};
+
+export default WidgetContainer