@mohamed-karawia/react-storybook 0.1.1

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

@@ -0,0 +1,134 @@
+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 CreateAlbum from '../../Forms/CreateMusicAlbum/CreateMusicAlbum';
+
+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,
+    albumTitleColor,
+    descColor,
+    ...props
+}) => {
+    const cardStyles = {
+        darkOnHover: true,
+        cardBackgroundColor: cardBackgroundColor,
+        cardTitleColor: albumTitleColor,
+        descColor,
+        controlsStyles: {
+            showOnHover: true,
+            position: 'center',
+            iconBackground: "#272727",
+            dropdownBackground: "#272727",
+            dropdownFontColor: "white",
+            dropdownItemHoverColor: "#414141",
+            iconBackgroundHover: "#414141",
+            iconBorderRadius: 100,
+            iconSize: 25,
+            iconsGap: 10,
+            iconColor: 'white',
+            containerPadding: 20
+        }
+    }
+
+    const [showModal, setShowModal] = useState(false);
+
+    const onHeaderIconClicked = (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="Music Albums"
+                data={albums}
+                type="flat"
+                cardStyle="card-style-6"
+                headerStyles={{
+                    padding: 10,
+                    headerBackground: 'black',
+                    titleColor: '#ffff',
+                    controlsStyles: {
+                        iconSize: 25
+                    }
+                }}
+                columnsNumber={3}
+                galleryColumnGap={10}
+                galleryRowGap={20}
+                galleryControls={galleryControls}
+                iconClicked={onHeaderIconClicked}
+                cardControls={cardControls}
+                cardClicked={() => null}
+                cardIconClicked={cardIconClicked}
+                customCardStyles={cardStyles}
+                {...props}
+            />
+            <Modal
+                modalIsOpen={showModal}
+                closeModal={() => setShowModal(false)}
+                exitModalButton={(e) => (
+                    <div></div>
+                )}>
+                <CreateAlbum
+                    saveHandler={onAddAlbum}
+                    cancelHandler={cancelHandler}
+                    saveBtnText="Create"
+                    cancelBtnText="Cancel" />
+            </Modal>
+        </Container>
+    )
+}
+const Container = styled.div`
+
+`
+
+ViewAlbums.defaultProps = {
+    cardBackgroundColor: 'white'
+};
+
+ViewAlbums.propTypes = {
+    albums: PropTypes.array,
+    cardIconClicked: PropTypes.func,
+    onAddAlbum: PropTypes.func,
+    cardBackgroundColor: PropTypes.string,
+    albumTitleColor: PropTypes.string,
+    descColor: PropTypes.string,
+};
+
+export default ViewAlbums

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

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import ViewAlbums from "./ViewAlbums";
+import { deleteFromArrayByIndex, addObjectToArray } from '../../helpers/util';
+
+import img1 from '../../assets/images/music1.jpg';
+import img2 from '../../assets/images/music2.jpg';
+import img3 from '../../assets/images/music3.jpg';
+import img4 from '../../assets/images/music4.jpg';
+import img5 from '../../assets/images/music5.jpg';
+import img6 from '../../assets/images/music6.jpg';
+
+export default {
+    title: 'Music Albums/Music Albums',
+    component: ViewAlbums
+}
+
+export const Albums = args => {
+    const [albums, setAlbums] = useState([
+        { index: 0, img: img4, title: 'Tomorrows |', description: 'Son Lux' },
+        { index: 1, img: img5, title: 'Blond', description: 'Frank Ocean' },
+        { index: 2, img: img6, title: 'Love At First Sting', description: 'Scorpions' },
+        { index: 3, img: img1, title: 'The 1975', description: '1975' },
+        { index: 4, img: img3, title: 'Hardwired...To Self-Destruct', description: 'Metallica' },
+        { index: 5, img: img2, title: 'Use Your IIIlusion |', description: "Guns N' Roses" },
+    ])
+
+    const cardIconClicked = (action, index) => {
+        switch (action) {
+            case 'delete':
+                deleteFromAlbums(index)
+                break;
+            default:
+                break;
+        }
+    }
+
+    const onAddAlbum = (album) => {
+        const newAlbum = {
+            img: album.cover.preview,
+            title: album.title,
+            description: album.artist
+        }
+        setAlbums(addObjectToArray(albums, newAlbum))
+    }
+
+    const deleteFromAlbums = (index) => {
+        setAlbums(deleteFromArrayByIndex(albums, index))
+    }
+
+    return (
+        <ViewAlbums 
+            albums={albums}
+            cardIconClicked={cardIconClicked}
+            onAddAlbum={onAddAlbum}
+        {...args} />
+    )
+}

package/src/stories/Navbar/Navbar.jsx

@@ -0,0 +1,350 @@
+import { Formik, Form } from 'formik';
+import React, { Fragment, useState } from 'react';
+import Select from 'react-select';
+import styled from 'styled-components';
+import CustomAutoComplete from '../Common Inputs/CustomAutoComplete/CustomAutoComplete';
+import BaseMaterial from '../Containers/BaseMaterial';
+import home from '../../assets/home-svgrepo-com.svg';
+import discover from '../../assets/compass-svgrepo-com.svg';
+import add from '../../assets/add-svgrepo-com.svg';
+import basket from '../../assets/basket-svgrepo-com.svg';
+import bell from '../../assets/bell-svgrepo-com.svg';
+import medal from '../../assets/medal-svgrepo-com.svg';
+import settings from '../../assets/settings-svgrepo-com.svg';
+import search from '../../assets/search-svgrepo-com.svg';
+
+/* icon size can sm md lg  @sm by default*/
+/* icon background color @transparent by default*/
+const Navbar = ({ iconSize, iconBackgroundColor, navbarColor, dropDownItemHeight }) => {
+  const initialValues = {
+    search: '',
+    searchIcons: '',
+  };
+  const [menuOpen, setMenuOpen] = useState(false);
+  const submitHandler = (values) => {
+    console.log(values);
+  };
+  const icons = [
+    { id: 'home', label: 'home' },
+    { id: 'add', label: 'add' },
+    { id: 'discover', label: 'discover' },
+    { id: 'badge', label: 'badge' },
+    { id: 'marketplace', label: 'marketplace' },
+    { id: 'setting', label: 'setting' },
+    { id: 'notification', label: 'notification' },
+  ];
+  const Option = (name, image) => (
+    <OptionContainer itemHeight={dropDownItemHeight}>
+      <OptionImage src={image} />
+      <Label>{name}</Label>
+    </OptionContainer>
+  );
+  const options = [
+    {
+      value: 'cat',
+      label: Option(
+        'cat',
+        'https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg'
+      ),
+    },
+    {
+      value: 'strawberry',
+      label: Option(
+        'strawberry',
+        'https://media.istockphoto.com/photos/red-berry-strawberry-isolated-picture-id1157946861?b=1&k=20&m=1157946861&s=170667a&w=0&h=feuhHInk3SV4tpLEHTWtpEW-dBKjPWPmOMlgmPh82Ls='
+      ),
+    },
+    {
+      value: 'vanilla',
+      label: Option(
+        'vanilla',
+        'https://static.toiimg.com/thumb/54677722.cms?imgsize=134423&width=800&height=800'
+      ),
+    },
+  ];
+
+  const accountOptions = [
+    {
+      value: 'settings',
+      label: Option(
+        'settings',
+        'http://simpleicon.com/wp-content/uploads/setting2.png'
+      ),
+    },
+    {
+      value: 'logout',
+      label: Option(
+        'logout',
+        'https://cdn2.vectorstock.com/i/1000x1000/24/66/door-icon-emergency-exit-sign-vector-20712466.jpg'
+      ),
+    },
+  ];
+  const customStyles = {
+    menu: (styles) => ({ ...styles, width: '150px' }),
+    control: (styles) => ({
+      ...styles,
+      border: '0',
+      backgroundColor: `${navbarColor}`,
+    }),
+  };
+
+  return (
+    <BaseMaterial>
+      <NavBar color={navbarColor}>
+        <UniverseContainer>
+          <IconContainer size={iconSize} color={iconBackgroundColor}>
+            <Icon src={home} size={iconSize} />
+          </IconContainer>
+          <IconContainer size={iconSize} color={iconBackgroundColor}>
+            <Icon src={add} size={iconSize} />
+          </IconContainer>
+          <div style={{ width: '200px' }}>
+            <Select options={options} styles={{ color: 'blue' }} />
+          </div>
+        </UniverseContainer>
+        <DiscoverContainer>
+          <IconContainer size={iconSize} color={iconBackgroundColor}>
+            <Icon src={discover} size={iconSize} />
+          </IconContainer>
+          <IconContainer size={iconSize} color={iconBackgroundColor}>
+            <Icon src={medal} size={iconSize} />
+          </IconContainer>
+          <IconContainer size={iconSize} color={iconBackgroundColor}>
+            <Icon src={basket} size={iconSize} />
+          </IconContainer>
+        </DiscoverContainer>
+        <SearchContainer>
+          <SearchBar>
+            <Icon src={search} size={iconSize} />
+
+            <Formik
+              initialValues={initialValues}
+              onSubmit={(values) => submitHandler(values)}
+            >
+              {({ errors, touched, setFieldValue, values }) => (
+                <CreateForm>
+                  <div>
+                    <CustomAutoComplete
+                      label=''
+                      name='searchIcons'
+                      items={icons}
+                      placeholder='Search Icons'
+                      value={values.searchIcons}
+                      onInputChange={(value) => {
+                        setFieldValue('searchIcons', value);
+                      }}
+                      inputValue={values.searchIcons}
+                      outline='none'
+                      itemHeight='35'
+                      width='98'
+                      borderColor='#9e9e9e'
+                      borderSize='0'
+                      borderRadius='10'
+                      padding='4'
+                      height='30'
+                    />
+                  </div>
+                </CreateForm>
+              )}
+            </Formik>
+          </SearchBar>
+        </SearchContainer>
+        <ProfileBar>
+          <ProfileContainer>
+            <Profile>
+              <Select
+                options={accountOptions}
+                styles={customStyles}
+                components={{
+                  ValueContainer: () => null,
+                  IndicatorSeparator: () => null,
+                  DropdownIndicator: () => (
+                    <Image
+                      src='https://play.teleporthq.io/static/svg/default-img.svg'
+                      onClick={() => setMenuOpen(!menuOpen)}
+                    />
+                  ),
+                }}
+                menuIsOpen={menuOpen}
+              />
+            </Profile>
+            <UserName>illo</UserName>
+          </ProfileContainer>
+          <SettingsContainer>
+            <IconContainer size={iconSize} color={iconBackgroundColor}>
+              <Icon src={settings} size={iconSize} />
+            </IconContainer>
+            <IconContainer size={iconSize} color={iconBackgroundColor}>
+              <Icon src={bell} size={iconSize} />
+            </IconContainer>
+          </SettingsContainer>
+        </ProfileBar>
+      </NavBar>
+    </BaseMaterial>
+  );
+};
+
+export default Navbar;
+const CreateForm = styled(Form)`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const Image = styled.img`
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+`;
+const NavBar = styled.div`
+  flex: 0 0 auto;
+  height: 72px;
+  display: flex;
+  align-items: center;
+  padding-left: 16;
+  padding-right: 16;
+  flex-direction: row;
+  justify-content: flex-start;
+  background-color: ${(props) => props.color || '#e3e5e8'};
+`;
+
+const UniverseContainer = styled('div')({
+  width: '346px',
+  height: '72px',
+  display: 'flex',
+  'align-items': 'center',
+  'flex-direction': 'row',
+  'justify-content': 'flex-start',
+});
+
+const IconContainer = styled.div`
+  flex: 0 0 auto;
+  width: ${(props) =>
+    props.size === 'sm'
+      ? '30px'
+      : props.size === 'md'
+      ? '35px'
+      : props.size === 'lg'
+      ? '40px'
+      : '30px'};
+  height: ${(props) =>
+    props.size === 'sm'
+      ? '30px'
+      : props.size === 'md'
+      ? '35px'
+      : props.size === 'lg'
+      ? '40px'
+      : '30px'};
+  display: flex;
+  align-items: center;
+  margin-left: 0px;
+  margin-right: 4px;
+  border-radius: 20px;
+  flex-direction: row;
+  justify-content: center;
+  background-color: ${(props) => props.color || 'transparent'};
+`;
+
+const Icon = styled.img`
+  width: ${(props) =>
+    props.size === 'sm'
+      ? '20px'
+      : props.size === 'md'
+      ? '25px'
+      : props.size === 'lg'
+      ? '30px'
+      : '20px'};
+  height: ${(props) =>
+    props.size === 'sm'
+      ? '20px'
+      : props.size === 'md'
+      ? '25px'
+      : props.size === 'lg'
+      ? '30px'
+      : '20px'};
+`;
+
+const DiscoverContainer = styled('div')({
+  width: '190px',
+  height: '72px',
+  display: 'flex',
+  'align-items': 'center',
+  'flex-direction': 'row',
+  'justify-content': 'center',
+});
+const SearchContainer = styled('div')({
+  width: '100%',
+  height: '72px',
+  display: 'flex',
+  'align-items': 'center',
+  'flex-direction': 'row',
+  'justify-content': 'center',
+});
+
+const SearchBar = styled('div')({
+  width: '315px',
+  height: '40px',
+  display: 'flex',
+  paddingLeft: '8px',
+  'align-items': 'center',
+  'border-radius': '20px',
+  'flex-direction': 'row',
+  'background-color': '#ffffff',
+  flex: '1',
+});
+
+const ProfileBar = styled('div')({
+  width: '273px',
+  height: '72px',
+  display: 'flex',
+  'align-items': 'center',
+  'flex-direction': 'row',
+  'justify-content': 'space-between',
+});
+
+const ProfileContainer = styled('div')({
+  width: '86px',
+  height: '100%',
+  display: 'flex',
+  'align-items': 'center',
+  'flex-direction': 'row',
+  'justify-content': 'flex-start',
+});
+
+const Profile = styled('div')({
+  flex: '0 0 auto',
+  width: '50px',
+  height: '50px',
+  display: 'flex',
+  'align-items': 'center',
+  'margin-left': '4px',
+  'border-radius': '20px',
+  'flex-direction': 'row',
+  'justify-content': 'center',
+});
+
+const UserName = styled('span')({
+  'padding-left': '8px',
+});
+
+const SettingsContainer = styled('div')({
+  width: '59px',
+  height: '100%',
+  display: 'flex',
+  'align-items': 'center',
+  'flex-direction': 'row',
+  'justify-content': 'center',
+});
+const OptionContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: ${(props) => props.itemHeight || '20px'};
+`;
+
+const OptionImage = styled.img`
+  height: 30px;
+  width: 30px;
+`;
+const Label = styled.label`
+  padding-left: 5px;
+`;

package/src/stories/Navbar/Navbar.stories.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import Navbar from './Navbar';
+
+export default {
+  title: 'Navbar/Default',
+  component: Navbar,
+  argTypes: {
+    iconSize: {
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+    },
+    iconBackgroundColor: {
+      type: 'string',
+    },
+    navbarColor: {
+      type: 'string',
+    },
+    dropDownItemHeight: {
+      type: 'string',
+    },
+  },
+};
+
+export const Default = (props) => <Navbar {...props} />;

package/src/stories/Pages/Blank/Blank.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import styled from 'styled-components'
+
+import Head from '../../Layout/Head/Head'
+import Body from '../../Layout/Body/Body'
+import Left from '../../Layout/Left/Left'
+import Center from '../../Layout/Center/Center'
+import Right from '../../Layout/Right/Right'
+
+const BlankPage = () => {
+  return (
+    <Container>
+      <Head></Head>
+      <Body>
+        <Left><p>Left</p></Left>
+        <Center><p>Center</p></Center>
+        <Right><p>Right</p></Right>
+      </Body>
+    </Container>
+  )
+}
+
+export default BlankPage
+
+const Container = styled('div')({
+  width: '100%',
+  height: 'auto',
+  display: 'flex',
+  'min-height': '100vh',
+  'flex-direction': 'column',
+})

package/src/stories/Pages/Blank/Blank.stories.js

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

package/src/stories/Pages/Centered/Centered.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import styled from 'styled-components'
+
+const Centered = ({ children }) => {
+  return (
+    <Container>
+      <Content>
+        {children}
+      </Content>
+    </Container>
+  )
+}
+
+export default Centered
+
+const Container = styled('div')({
+  height: 'auto',
+  'min-height': '100vh',
+  width: '100%',
+  display: 'flex',
+  'flex-direction': 'column',
+  'align-items': 'center',
+  'justify-content': 'center',
+})
+
+const Content = styled('div')({
+  display: 'flex',
+  'align-items': 'flex-start',
+  flex: '0 0 auto',
+})

package/src/stories/Pages/Centered/Centered.stories.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import Centered from './Centered';
+
+export default {
+  title: 'Pages/Centered',
+  component: Centered,
+};
+
+export const Default = (props) => (
+    <Centered {...props}>
+        Welcome To Community Builder Pro
+    </Centered>
+)