npm - @mohamed-karawia/library - Versions diffs - 0.1.0 - Mend

@mohamed-karawia/library 0.1.0

Files changed (539) hide show

package/src/stories/Pages/Chat/Chat.jsx ADDED Viewed

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import Body from '../../Layout/Body/Body';
+import Left from '../../Layout/Left/Left';
+import Center from '../../Layout/Center/Center';
+import Right from '../../Layout/Right/Right';
+import Navbar from '../../Navbar/Navbar';
+import BaseMaterial from '../../Containers/BaseMaterial';
+import SpaceContainer from "../../Reusable Components/SpaceContainer/SpaceContainer";
+import WidgetContainer from "../../Reusable Components/WidgetContainer/WidgetContainer";
+import worldStyles from '../ViewWorld/styles.json';
+import { SPACES } from '../ViewWorld/constatnts';
+import ChatSpace from '../../Chat/Chat';
+const Chat = ({
+    users,
+    data,
+    ...props
+}) => {
+    return (
+        <BaseMaterial {...worldStyles.containerStyle} {...props}>
+            <Navbar />
+            <Body {...worldStyles.bodyStyle}>
+                <Left>
+                    <WidgetContainer
+                        widgetType='logo'
+                        widgetProps={{
+                            imgUrl: props.imgUrl,
+                        }}
+                    />
+                    <WidgetContainer
+                        widgetType='list'
+                        widgetProps={{
+                            listTitle: 'Your Spaces',
+                            type: 'sectioned',
+                            data: SPACES,
+                            cardStyle: 'card-style-3',
+                            sectionHeaderStyles: {
+                                cardBorderSize: 2,
+                                cardPadding: 2,
+                                cardBackgroundColor: '#fff',
+                                cardBorderColor: 'black',
+                            },
+                            customCardStyles: {
+                                cardPadding: 6,
+                                cardTitleFontSize: 15,
+                                cardBackgroundColor: 'black',
+                                cardTitleColor: 'white',
+                                onHoverBackgroundColor: '#F6891F',
+                                controlsStyles: {
+                                    showOnHover: true,
+                                }
+                            },
+                        }}
+                    />
+                </Left>
+                <Center>
+                    <SpaceContainer
+                        title="Music Album"
+                        discription="Lorem ipsum dolor sit amet consectetur."
+                        hideTitle
+                    >
+                        <ChatSpace data={data} users={users} />
+                    </SpaceContainer>
+                </Center>
+                <Right>
+                </Right>
+            </Body>
+        </BaseMaterial>
+    )
+}
+export default Chat

package/src/stories/Pages/Chat/Chat.stories.jsx ADDED Viewed

@@ -0,0 +1,53 @@
+import Chat from "./Chat";
+export default {
+    title: 'Pages/Chat',
+    component: Chat
+}
+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',
+    },
+  ]
+  const data = [
+    {username: 'Test User', img:"https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png", date:'5/11/2021', text: 'This is fake chat test This is fake chat test This is fake chat test This is fake chat test This is fake chat test '},
+    {username: 'Test User', img:"https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png", date:'5/11/2021', text: 'This is fake chat test This is fake chat test This is fake chat test This is fake chat test This is fake chat test ', media:(<img src="https://arabhardware.net/wp-content/uploads/2020/03/valorant-2020-4k-0f-scaled.jpg"/>)},
+    {username: 'Test User', img:"https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png", date:'5/11/2021', text: 'This is fake chat test This is fake chat test This is fake chat test This is fake chat test This is fake chat test '},
+    {username: 'Test User', img:"https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png", date:'5/11/2021', text: 'This is fake chat test This is fake chat test This is fake chat test This is fake chat test This is fake chat test '},
+]
+export const Page = args => <Chat
+  users={users}
+  data={data}
+{...args} />

package/src/stories/Pages/Enrollment/DetailedForm/DetailedForm.jsx ADDED Viewed

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import Body from '../../../Layout/Body/Body';
+import Left from '../../../Layout/Left/Left';
+import Center from '../../../Layout/Center/Center';
+import Right from '../../../Layout/Right/Right';
+import Navbar from '../../../Navbar/Navbar';
+import BaseMaterial from '../../../Containers/BaseMaterial';
+import SpaceContainer from "../../../Reusable Components/SpaceContainer/SpaceContainer";
+import WidgetContainer from "../../../Reusable Components/WidgetContainer/WidgetContainer";
+import worldStyles from '../../ViewWorld/styles.json';
+import { SPACES } from '../../ViewWorld/constatnts';
+import Detailed from '../../../Enrollment/Admin/DetailedForm/DetailedForm';
+const DetailedForm = (props) => {
+    const questions = [
+        {
+            title: 'Question 1 ?',
+            description: 'Answer for question one'
+        },
+        {
+            title: 'Question 2 ?',
+            description: 'Answer for question two'
+        },
+        {
+            title: 'Question 3 ?',
+            description: 'Answer for question three'
+        },
+        {
+            title: 'Question 4 ?',
+            description: 'Answer for question four'
+        },
+        {
+            title: 'Question 5 ?',
+            description: 'Answer for question five'
+        },
+    ]
+    return (
+        <BaseMaterial {...worldStyles.containerStyle} {...props}>
+            <Navbar />
+            <Body {...worldStyles.bodyStyle}>
+                <Left>
+                    <WidgetContainer
+                        widgetType='logo'
+                        widgetProps={{
+                            imgUrl: props.imgUrl,
+                        }}
+                    />
+                    <WidgetContainer
+                        widgetType='list'
+                        widgetProps={{
+                            listTitle: 'Your Spaces',
+                            type: 'sectioned',
+                            data: SPACES,
+                            cardStyle: 'card-style-3',
+                            sectionHeaderStyles: {
+                                cardBorderSize: 2,
+                                cardPadding: 2,
+                                cardBackgroundColor: '#fff',
+                                cardBorderColor: 'black',
+                            },
+                            customCardStyles: {
+                                cardPadding: 6,
+                                cardTitleFontSize: 15,
+                                cardBackgroundColor: 'black',
+                                cardTitleColor: 'white',
+                                onHoverBackgroundColor: '#F6891F',
+                                controlsStyles: {
+                                    showOnHover: true,
+                                }
+                            },
+                        }}
+                    />
+                </Left>
+                <Center>
+                    <SpaceContainer
+                        title="Music Album"
+                        discription="Lorem ipsum dolor sit amet consectetur."
+                        hideTitle
+                    >
+                        <Detailed
+                            userName="User Name"
+                            userImg="https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png"
+                            questions={questions} />
+                    </SpaceContainer>
+                </Center>
+                <Right>
+                </Right>
+            </Body>
+        </BaseMaterial>
+    )
+}
+export default DetailedForm;

package/src/stories/Pages/Enrollment/DetailedForm/DetailedForm.stories.jsx ADDED Viewed

@@ -0,0 +1,8 @@
+import DetailedForm from './DetailedForm';
+export default {
+    title: 'Pages/Enrollment/Detailed Form',
+    component: DetailedForm
+}
+export const Form = args => <DetailedForm {...args} />

package/src/stories/Pages/Enrollment/FillForm/FillForm.jsx ADDED Viewed

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import Body from '../../../Layout/Body/Body';
+import Left from '../../../Layout/Left/Left';
+import Center from '../../../Layout/Center/Center';
+import Right from '../../../Layout/Right/Right';
+import Navbar from '../../../Navbar/Navbar';
+import BaseMaterial from '../../../Containers/BaseMaterial';
+import SpaceContainer from "../../../Reusable Components/SpaceContainer/SpaceContainer";
+import WidgetContainer from "../../../Reusable Components/WidgetContainer/WidgetContainer";
+import worldStyles from '../../ViewWorld/styles.json';
+import { SPACES } from '../../ViewWorld/constatnts';
+import Form from '../../../Enrollment/Guest/FillForm/FillForm';
+import TextField from '../../../Common Inputs/TextField/TextField';
+const FillForm = (props) => {
+    const sections = [
+        {
+            title: "Server Name",
+            body: [
+                (<TextField label="Question 1" name="question0" />),
+                (<TextField label="Question 2" name="question1" />),
+                (<TextField label="Question 3" name="question2" />),
+                (<TextField label="Question 4" name="question3" />),
+                (<TextField label="Question 5" name="question4" />),
+            ],
+            hideTitle: true
+        },
+    ]
+    return (
+        <BaseMaterial {...worldStyles.containerStyle} {...props}>
+            <Navbar />
+            <Body {...worldStyles.bodyStyle}>
+                <Left>
+                    <WidgetContainer
+                        widgetType='logo'
+                        widgetProps={{
+                            imgUrl: props.imgUrl,
+                        }}
+                    />
+                    <WidgetContainer
+                        widgetType='list'
+                        widgetProps={{
+                            listTitle: 'Your Spaces',
+                            type: 'sectioned',
+                            data: SPACES,
+                            cardStyle: 'card-style-3',
+                            sectionHeaderStyles: {
+                                cardBorderSize: 2,
+                                cardPadding: 2,
+                                cardBackgroundColor: '#fff',
+                                cardBorderColor: 'black',
+                            },
+                            customCardStyles: {
+                                cardPadding: 6,
+                                cardTitleFontSize: 15,
+                                cardBackgroundColor: 'black',
+                                cardTitleColor: 'white',
+                                onHoverBackgroundColor: '#F6891F',
+                                controlsStyles: {
+                                    showOnHover: true,
+                                }
+                            },
+                        }}
+                    />
+                </Left>
+                <Center>
+                    <SpaceContainer
+                        title="Music Album"
+                        discription="Lorem ipsum dolor sit amet consectetur."
+                        hideTitle
+                    >
+                        <Form
+                            sections={sections}
+                            saveBtnText={'Submit'}
+                            cancelBtnText="Cancel"
+                            />
+                    </SpaceContainer>
+                </Center>
+                <Right>
+                </Right>
+            </Body>
+        </BaseMaterial>
+    )
+}
+export default FillForm

package/src/stories/Pages/Enrollment/FillForm/FillForm.stories.jsx ADDED Viewed

@@ -0,0 +1,8 @@
+import FillForm from './FillForm';
+export default {
+    title: 'Pages/Enrollment/Fill Form',
+    component: FillForm
+}
+export const form = args => <FillForm {...args} />

package/src/stories/Pages/Enrollment/Forms/Forms.jsx ADDED Viewed

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import Body from '../../../Layout/Body/Body';
+import Left from '../../../Layout/Left/Left';
+import Center from '../../../Layout/Center/Center';
+import Right from '../../../Layout/Right/Right';
+import Navbar from '../../../Navbar/Navbar';
+import BaseMaterial from '../../../Containers/BaseMaterial';
+import SpaceContainer from "../../../Reusable Components/SpaceContainer/SpaceContainer";
+import WidgetContainer from "../../../Reusable Components/WidgetContainer/WidgetContainer";
+import ViewForms from '../../../Enrollment/Admin/ViewForms/ViewForms';
+import { addObjectToArray, deleteFromArrayByIndex } from '../../../helpers/util';
+import worldStyles from '../../ViewWorld/styles.json';
+import { SPACES } from '../../ViewWorld/constatnts';
+const Forms = (props) => {
+    const [forms, setForms] = useState([
+        {
+            title: 'Pending',
+            data: [
+                {
+                    username: 'User one',
+                    answered: '3/5',
+                    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+                    status: 'pending'
+                },
+                {
+                    username: 'User Two',
+                    answered: '5/5',
+                    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+                    status: 'pending'
+                },
+                {
+                    username: 'User Three',
+                    answered: '5/5',
+                    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+                    status: 'pending'
+                },
+            ],
+            priority: 1
+        },
+        {
+            title: 'In Review',
+            data: [
+                {
+                    username: 'User Four',
+                    answered: '2/5',
+                    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+                    status: 'inReview'
+                },
+                {
+                    username: 'User Five',
+                    answered: '1/5',
+                    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+                    status: 'inReview'
+                },
+                {
+                    username: 'User Six',
+                    answered: '3/5',
+                    img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
+                    status: 'inReview'
+                },
+            ],
+            priority: 2
+        },
+    ])
+    return (
+        <BaseMaterial {...worldStyles.containerStyle} {...props}>
+        <Navbar />
+        <Body {...worldStyles.bodyStyle}>
+            <Left>
+                <WidgetContainer
+                    widgetType='logo'
+                    widgetProps={{
+                        imgUrl: props.imgUrl,
+                    }}
+                />
+                <WidgetContainer
+                    widgetType='list'
+                    widgetProps={{
+                        listTitle: 'Your Spaces',
+                        type: 'sectioned',
+                        data: SPACES,
+                        cardStyle: 'card-style-3',
+                        sectionHeaderStyles: {
+                            cardBorderSize: 2,
+                            cardPadding: 2,
+                            cardBackgroundColor: '#fff',
+                            cardBorderColor: 'black',
+                        },
+                        customCardStyles: {
+                            cardPadding: 6,
+                            cardTitleFontSize: 15,
+                            cardBackgroundColor: 'black',
+                            cardTitleColor: 'white',
+                            onHoverBackgroundColor: '#F6891F',
+                            controlsStyles: {
+                                showOnHover: true,
+                            }
+                        },
+                    }}
+                />
+            </Left>
+            <Center>
+                <SpaceContainer
+                    title="Music Album"
+                    discription="Lorem ipsum dolor sit amet consectetur."
+                    hideTitle
+                >
+                    <ViewForms
+                        data={forms} />
+                </SpaceContainer>
+            </Center>
+            <Right>
+            </Right>
+        </Body>
+    </BaseMaterial>
+    )
+}
+export default Forms

package/src/stories/Pages/Enrollment/Forms/Forms.stories.jsx ADDED Viewed

@@ -0,0 +1,8 @@
+import Forms from "./Forms";
+export default {
+    title: 'Pages/Enrollment/Forms',
+    component: Forms
+}
+export const ViewForms = args => <Forms {...args} />

package/src/stories/Pages/Events/Event/Event.jsx ADDED Viewed

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import Body from '../../../Layout/Body/Body';
+import Left from '../../../Layout/Left/Left';
+import Center from '../../../Layout/Center/Center';
+import Right from '../../../Layout/Right/Right';
+import Navbar from '../../../Navbar/Navbar';
+import BaseMaterial from '../../../Containers/BaseMaterial';
+import SpaceContainer from "../../../Reusable Components/SpaceContainer/SpaceContainer";
+import WidgetContainer from "../../../Reusable Components/WidgetContainer/WidgetContainer";
+import DetailedEvent from '../../../Events/Event/Event';
+import { addObjectToArray, deleteFromArrayByIndex } from '../../../helpers/util';
+import worldStyles from '../../ViewWorld/styles.json';
+import { SPACES } from '../../ViewWorld/constatnts';
+const Event = (props) => {
+    return (
+        <BaseMaterial {...worldStyles.containerStyle} {...props}>
+            <Navbar />
+            <Body {...worldStyles.bodyStyle}>
+                <Left>
+                    <WidgetContainer
+                        widgetType='logo'
+                        widgetProps={{
+                            imgUrl: props.imgUrl,
+                        }}
+                    />
+                    <WidgetContainer
+                        widgetType='list'
+                        widgetProps={{
+                            listTitle: 'Your Spaces',
+                            type: 'sectioned',
+                            data: SPACES,
+                            cardStyle: 'card-style-3',
+                            sectionHeaderStyles: {
+                                cardBorderSize: 2,
+                                cardPadding: 2,
+                                cardBackgroundColor: '#fff',
+                                cardBorderColor: 'black',
+                            },
+                            customCardStyles: {
+                                cardPadding: 6,
+                                cardTitleFontSize: 15,
+                                cardBackgroundColor: 'black',
+                                cardTitleColor: 'white',
+                                onHoverBackgroundColor: '#F6891F',
+                                controlsStyles: {
+                                    showOnHover: true,
+                                }
+                            },
+                        }}
+                    />
+                </Left>
+                <Center>
+                    <SpaceContainer
+                        title="Music Album"
+                        discription="Lorem ipsum dolor sit amet consectetur."
+                        hideTitle
+                    >
+                        <DetailedEvent
+                            cover='https://s3.amazonaws.com/sndb/uploads/photo/image/2737/large_qOMWTdCoaiVtZMJL044D0ZRkpu1.jpg'
+                            title="ACDC Concert"
+                            date="15/11/1976 : 16/11/1976"
+                            disc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia impedit fugiat reprehenderit adipisci eos atque ullam error quia amet nihil, exercitationem beatae distinctio eligendi neque, consequuntur odit commodi id porro."
+                            backgroundColor="black"
+                            headerBackground="black"
+                            headerTitleColor="white"
+                            titleColor="white"
+                            discColor="white"
+                            dateColor="white"
+                        />
+                    </SpaceContainer>
+                </Center>
+                <Right>
+                </Right>
+            </Body>
+        </BaseMaterial>
+    )
+}
+export default Event

package/src/stories/Pages/Events/Event/Event.stories.jsx ADDED Viewed

@@ -0,0 +1,8 @@
+import Event from "./Event";
+export default  {
+    title: 'Pages/Events/Detailed Event',
+    component: Event
+}
+export const DetailedEvent = args => <Event {...args} />