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

@mohamed-karawia/library 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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} />