@mohamed-karawia/library 0.1.6 → 0.1.7

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

@@ -1,118 +0,0 @@
-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/Controls/Controls.stories.jsx

@@ -1,24 +0,0 @@
-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,
-};

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

@@ -1,43 +0,0 @@
-import React from 'react';
-
-import Gallery from './Gallery';
-// Data
-import { controls, data, dataWithSections, cardControls } from '../fakeData';
-// Styles
-import { headingControlsStyles, galleryCardControlsStyles } from '../commonStyles';
-
-export default {
-    title: 'Reusable components/Gallery',
-    component: Gallery
-}
-
-const Template = (args) => (
-    <Gallery
-        galleryTitle="Reusable Gallery"
-        galleryControls={controls}
-        headerStyles={{
-            padding: 10,
-            headerBackground: '#FE1744',
-            titleColor: '#ffff',
-        }}
-        columnsNumber={3}
-        galleryColumnGap={10}
-        controlsStyles={headingControlsStyles}
-        cardStyle="card-style-6"
-        customCardStyles={galleryCardControlsStyles}
-        {...args} />
-);
-
-export const GalleryFlat = Template.bind({});
-GalleryFlat.args = {
-    data: data,
-    type: "flat",
-    cardControls: cardControls
-};
-
-export const GallerySectioned = Template.bind({});
-GallerySectioned.args = {
-    data: dataWithSections,
-    type: "sectioned",
-    cardControls: cardControls
-}

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

@@ -1,55 +0,0 @@
-import React, { useState } from 'react';
-import Mention from "./Mention";
-
-export default {
-    title: 'Resuable Components/Mention',
-    component: Mention
-}
-
-const users = [
-    {
-        id: 'walter',
-        display: 'Walter White',
-    },
-    {
-        id: 'jesse',
-        display: 'Jesse Pinkman',
-    },
-    {
-        id: 'gus',
-        display: 'Gustavo "Gus" Fring',
-    },
-    {
-        id: 'saul',
-        display: 'Saul Goodman',
-    },
-    {
-        id: 'hank',
-        display: 'Hank Schrader',
-    },
-    {
-        id: 'skyler',
-        display: 'Skyler White',
-    },
-    {
-        id: 'mike',
-        display: 'Mike Ehrmantraut',
-    },
-    {
-        id: 'lydia',
-        display: 'Lydìã Rôdarté-Qüayle',
-    },
-]
-
-export const MentionArea = args => {
-    const [value, setValue] = useState('');
-
-    return (
-    <Mention
-        value={value}
-        handleOnChange={(value) => setValue(value)}
-        users={users}
-        {...args}
-        />
-        )
-}

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

@@ -1,167 +0,0 @@
-import React from 'react';
-import withFormik from "storybook-formik";
-import * as Yup from 'yup';
-
-import ReusableForm from './ReusableForm';
-import TextField from '../../Common Inputs/TextField/TextField';
-import CustomDropZone from '../../Common Inputs/CustomDropzone/CustomDropZone';
-import CustomTextarea from '../../Common Inputs/CustomTextarea/CustomTextarea';
-import CheckboxGroup from '../../Common Inputs/CheckboxGroup/CheckboxGroup';
-import CustomAutoComplete from '../../Common Inputs/CustomAutoComplete/CustomAutoComplete';
-import CustomSelect from '../../Common Inputs/CustomSelect/CustomSelect';
-import DatePicker from '../../Common Inputs/DatePicker/DatePicker';
-
-const submitHandler = (values) => {
-    console.log(values)
-}
-
-const cancelHandler = () => {
-    console.log('cancel')
-}
-
-const sections = [
-    {
-        title: "Server Name",
-        body: [(<TextField label="Server Name" name="userName" />)]
-    },
-    {
-        title: "User Name",
-        body: [
-            (<TextField label="User Name" name="firstName" />),
-            (<TextField label="Last Name" name="lastName" />),
-        ],
-        bodyColumns: 2
-    },
-    {
-        title: 'More inputs',
-        body: [
-            (<TextField label="Input one" name="input1" />),
-            (<TextField label="Input two" name="input2" />),
-        ],
-        hideTitle: true
-    },
-    {
-        title: "Server history",
-        body: [
-            (<TextField label="Age" name="age" />),
-            (<TextField label="Hobby" name="hobby" />),
-            (<CustomTextarea label="Discription" name="discription" />),
-            (<CheckboxGroup label="Checkbox Group" name="acceptTerms" options={[
-                { label: 'option 1', value: '1' },
-                { label: 'option 2', value: '2' },
-                { label: 'option 3', value: '3' },
-            ]} />),
-            (<CustomAutoComplete
-                name="search"
-                label="Search"
-                items={[
-                    { id: 'foo', label: 'foo' },
-                    { id: 'bar', label: 'bar' },
-                    { id: 'baz', label: 'baz' },
-                ]}
-            />),
-            (
-                <CustomSelect label="options" options={[
-                    { label: 'select an option', value: '' },
-                    { label: 'option 1', value: '1' },
-                    { label: 'option 2', value: '2' },
-                    { label: 'option 3', value: '3' },
-                ]} name="select" />
-            )
-        ]
-    },
-    {
-        title: "User Media",
-        body: [
-            (<CustomDropZone label="User Profile" name="file" />),
-            (<DatePicker label="Date Range" name='date' />)
-        ],
-    },
-]
-
-const initialValues = {
-    userName: '',
-    firstName: '',
-    lastName: '',
-    input1: '',
-    input2: '',
-    age: '',
-    hobby: '',
-    discription: '',
-    acceptTerms: [],
-    search: '',
-    select: '',
-    file: '',
-    date: {
-        startDate: null,
-        endDate: null
-    }
-
-}
-const formSchema = Yup.object().shape({
-    userName: Yup.string()
-        .required("Required"),
-    firstName: Yup.string()
-        .required("Required"),
-    lastName: Yup.string()
-        .required("Required"),
-    age: Yup.string()
-        .required("Required"),
-    hobby: Yup.string()
-        .required("Required"),
-    discription: Yup.string()
-        .required('Required'),
-    acceptTerms: Yup.array()
-        .min(1, 'You must choose at least one element'),
-    search: Yup.string()
-        .required("Required"),
-    select: Yup.string()
-        .required("Required"),
-    date: Yup.object().shape({
-        startDate: Yup.object()
-            .required("Required")
-            .typeError('Invalid Start Date'),
-        endDate: Yup.object()
-            .required("Required")
-            .typeError('Invalid End Date')
-    })
-});
-
-export default {
-    title: 'Reusable Components/Reusable Formik Form',
-    component: ReusableForm,
-    // decorators: [withFormik],
-    // parameters: {
-    //     formik: {
-    //         initialValues,
-    //         validationSchema: formSchema,
-    //         onSubmit: submitHandler
-    //     },
-    // }
-}
-
-export const form = args => (
-    <ReusableForm
-        formTitle="Reusable form"
-        initialValues={initialValues}
-        formSchema={formSchema}
-        sections={sections}
-        headerStyles={{
-            padding: 10,
-            headerBackground: 'black',
-            titleColor: '#ffff',
-        }}
-        sectionHeaderStyles={{
-            padding: 6,
-            headerBackground: '#FE1744',
-            titleColor: '#ffff',
-        }}
-        bodyPadding={10}
-        saveBtnText="Save"
-        cancelBtnText="Cancel"
-        saveBtnHandle={submitHandler}
-        cancelHandler={cancelHandler}
-        bodyRowGap={20}
-        bodyColumnGap={10}
-        {...args} />
-)

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

@@ -1,22 +0,0 @@
-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.stories.jsx

@@ -1,70 +0,0 @@
-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.stories.js

@@ -1,10 +0,0 @@
-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.stories.jsx

@@ -1,78 +0,0 @@
-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.stories.jsx

@@ -1,8 +0,0 @@
-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.stories.jsx

@@ -1,61 +0,0 @@
-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/Spaces/WelcomeSpace/WelcomeSpace.stories.js

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