@mohamed-karawia/library 0.1.0

package/src/stories/Forms/NewProfile/NewProfile.jsx

@@ -0,0 +1,464 @@
+import React, { useState } from "react";
+import { Formik, Field } from "formik";
+import Dropzone from "../../Common Inputs/DropZone";
+import data from "./presets.json";
+import Reset from "../../assets/images/reset.png";
+import { stringSearch } from "../../helpers/util";
+const backgroundColors = ["red", "blue", "green", "white", "yellow", "gray"];
+const customStyles = [
+  {
+    name: "fontColor",
+    placeholder: "Font Color",
+  },
+  {
+    name: "serverFontColor",
+    placeholder: "Server Font Color",
+  },
+  {
+    name: "fontSize",
+    placeholder: "Font Size",
+  },
+  {
+    name: "serverFontSize",
+    placeholder: "Server Font Size",
+  },
+  {
+    name: "borderRadius",
+    placeholder: "Border Radius",
+  },
+  {
+    name: "backgroundColor",
+    placeholder: "Background Color",
+  },
+];
+
+const NewProfile = () => {
+  const [profileUrl, setUrl] = useState();
+
+  const setProfilePic = (event) => {
+    var reader = new FileReader();
+    reader.readAsDataURL(event.target.files[0]);
+    reader.onload = (_event) => {
+      setUrl(reader.result);
+    };
+  };
+
+  return (
+    <div className="container" style={style.container}>
+      <h2 className="page-title">Create Profile</h2>
+      <Formik
+        initialValues={{
+          profilePicture: "",
+          name: "",
+          serverName: "",
+          fontColor: "",
+          fontSize: "",
+          serverFontColor: "",
+          serverFontSize: "",
+          borderRadius: "",
+          preset: "",
+          presets: data,
+          backgroundColor: "",
+          backgroundColors,
+        }}
+        onSubmit={(values, actions) => {
+          setTimeout(() => {
+            alert(JSON.stringify(values, null, 2));
+            actions.setSubmitting(false);
+          }, 1000);
+        }}
+      >
+        {(props) => (
+          <form onSubmit={props.handleSubmit}>
+            <div style={style.headerSection}>
+              <div style={{ flex: "1" }}>
+                <div style={style.profilePicture}>
+                  <img
+                    style={{ height: 70, width: 70, borderRadius: "50%", objectFit: 'contain', backgroundColor: 'grey' }}
+                    src={
+                      profileUrl ||
+                      "https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png"
+                    }
+                  />
+                </div>
+                <input
+                  style={{ marginTop: "3px" }}
+                  type="file"
+                  onChange={(e) => setProfilePic(e)}
+                />
+              </div>
+              <Field
+                type="text"
+                onChange={props.handleChange}
+                onBlur={props.handleBlur}
+                value={props.values.name}
+                name="name"
+                placeholder="username"
+                style={style.usernameSection}
+              />
+            </div>
+            {props.errors.name && <div id="feedback">{props.errors.name}</div>}
+            <div>
+              <div style={style.resetRow}>
+                <h2 className="page-title">Create Server</h2>
+                <img
+                  onClick={() => props.setFieldValue("serverName", "")}
+                  style={style.resetButton}
+                  src={Reset}
+                />
+              </div>
+              <Field
+                type="text"
+                onChange={props.handleChange}
+                onBlur={props.handleBlur}
+                value={props.values.serverName}
+                name="serverName"
+                placeholder="serverName"
+                style={style.serverSection}
+              />
+
+              {props.errors.serverName && (
+                <div id="feedback">{props.errors.serverName}</div>
+              )}
+            </div>
+            <div style={style.resetRow}>
+              <h2 className="page-title">Upload Logo</h2>
+            </div>
+            <Dropzone />
+            <div>
+              <div style={style.resetRow}>
+                <h2 className="page-title">Presets</h2>
+                <img
+                  onClick={() => {
+                    props.setFieldValue("preset", "");
+                  }}
+                  style={style.resetButton}
+                  src={Reset}
+                />
+              </div>
+              <div style={style.presets}>
+                {props.values.presets.map((item, index) => {
+                  const preset = props.values.preset;
+                  const borderColor =
+                    preset?.serverName === item.serverName
+                      ? { border: "3px solid blue" }
+                      : {};
+                  return (
+                    <div
+                      onClick={() => {
+                        props.setFieldValue("preset", item);
+                      }}
+                      key={item.id}
+                      style={{
+                        ...style.preset,
+                        ...borderColor,
+                        cursor: "pointer",
+                        marginRight: (index + 1) % 3 ? 8 : 2,
+                      }}
+                    >
+                      <h5 style={style.presetHeading}>{item.serverName}</h5>
+                      <img
+                        style={{ ...style.presetImage, cursor: "pointer" }}
+                        src={item.imageUrl}
+                        alt={item.serverName}
+                      />
+                      <h5 style={{ textAlign: "center" }}>
+                        Description will be shown here
+                      </h5>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            <div style={style.resetRow}>
+              <h2 className="page-title">Theme</h2>
+              <img
+                onClick={() => props.setFieldValue("backgroundColor", "")}
+                style={style.resetButton}
+                src={Reset}
+              />
+            </div>
+            <Field
+              type="text"
+              name="search"
+              placeholder="Search..."
+              onChange={(e) => {
+                let allValue = [...backgroundColors];
+                if (e.target.value.trim()) {
+                  allValue = backgroundColors.find((item) =>
+                    stringSearch(e.target.value, item)
+                  );
+                  if (allValue) {
+                    allValue = [allValue];
+                  } else {
+                    allValue = [];
+                  }
+                }
+
+                props.setFieldValue("backgroundColors", allValue);
+              }}
+              style={{ ...style.serverSection, marginBottom: 12 }}
+            />
+            <div style={style.theme}>
+              {props.values.backgroundColors.map((item, index) => {
+                const border =
+                  props.values.backgroundColor === item
+                    ? { border: "3px solid black" }
+                    : {};
+
+                return (
+                  <div
+                    onClick={() => props.setFieldValue("backgroundColor", item)}
+                    key={`${index}Colors`}
+                    style={{
+                      ...style.themeItem,
+                      backgroundColor: item,
+                      ...border,
+                      marginRight: (index + 1) % 3 ? 8 : 2,
+                    }}
+                  >
+                    <h5 style={style.themeHeading}>{item}</h5>
+                  </div>
+                );
+              })}
+            </div>
+
+            <div style={style.resetRow}>
+              <h2 className="page-title">Styles</h2>
+              <img
+                onClick={() => {
+                  props.setFieldValue("backgroundColor", "");
+                  props.setFieldValue("fontColor", "");
+                  props.setFieldValue("fontSize", "");
+                  props.setFieldValue("serverFontSize", "");
+                  props.setFieldValue("serverFontColor", "");
+                  props.setFieldValue("borderRadius", "");
+                }}
+                style={style.resetButton}
+                src={Reset}
+              />
+            </div>
+            <div style={style.theme}>
+              {customStyles.map((item, index) => {
+                return (
+                  <Field
+                    key={`${index}styles`}
+                    placeholder={item.placeholder}
+                    onChange={(e) =>
+                      props.setFieldValue(e.target.name, e.target.value)
+                    }
+                    name={item.name}
+                    style={{ ...style.themeItem, paddingLeft: 12 }}
+                  />
+                );
+              })}
+            </div>
+            <div>
+              <h2 className="page-title">Preview</h2>
+              <div
+                style={{
+                  ...style.preview,
+                  backgroundColor: props.values.backgroundColor,
+                }}
+              >
+                {props.values.name && (
+                  <h3
+                    style={{
+                      fontSize: props.values.fontSize,
+                      color: props.values.fontColor,
+                    }}
+                  >
+                    {props.values.name}
+                  </h3>
+                )}
+                {props.values.serverName && (
+                  <h3
+                    style={{
+                      fontSize: props.values.serverFontSize,
+                      color: props.values.serverFontColor,
+                    }}
+                  >
+                    {props.values.serverName}
+                  </h3>
+                )}
+                {(props.values.imageUrl || props.values.preset) && (
+                  <img
+                    style={{
+                      height: "auto",
+                      width: "80%",
+                      marginTop: '8px',
+                      borderRadius: props.values.borderRadius,
+                    }}
+                    src={props.values.preset.imageUrl || props.values.imageUrl}
+                  />
+                )}
+              </div>
+            </div>
+            <button style={style.buttonSubmit} type="submit">
+              Submit
+            </button>
+          </form>
+        )}
+      </Formik>
+    </div>
+  );
+};
+
+const style = {
+  profilePicture: {
+    borderRadius: "50%",
+    height: 70,
+    marginLeft: 10,
+    width: 70,
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "16px 18px",
+    backgroundPosition: "98% 50%",
+    cursor: "auto",
+  },
+  resetRow: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  theme: {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "space-between",
+    width: "100%",
+    marginLeft: "auto",
+    marginRight: "auto",
+  },
+  resetButton: {
+    width: 30,
+    height: 30,
+    float: "right",
+  },
+  preview: {
+    width: "99%",
+    minHeight: 400,
+    border: "1px solid rgb(144, 144, 144)",
+    boxSizing: "border-box",
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "16px 18px",
+    backgroundPosition: "98% 50%",
+    cursor: "auto",
+    textAlign: "center",
+  },
+  buttonSubmit: {
+    marginRight: "10px",
+    border: "none",
+    height: 40,
+    width: 80,
+    marginTop: 24,
+    color: "white",
+    fontSize: 14,
+    fontWeight: 600,
+    float: "right",
+    backgroundColor: "#20bf55",
+    backgroundImage: "linear-gradient(315deg, #20bf55 0%, #01baef 74%)",
+    borderRadius: "4px",
+    boxShadow: "2px 2px #20bf55",
+  },
+  themeItem: {
+    marginRight: 8,
+    marginTop: 8,
+    border: "2px solid black",
+    width: "14rem",
+    height: "3rem",
+    borderRadius: "5px",
+    border: "1px solid rgb(144, 144, 144)",
+    boxSizing: "border-box",
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "16px 18px",
+    alignItems: "center",
+  },
+  themeHeading: {
+    position: "relative",
+    left: "46%",
+    bottom: "4px",
+  },
+  presets: {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    width: "100%",
+    justifyContent: "space-around",
+  },
+  presetImage: {
+    height: "10rem",
+    width: "100%",
+    cursor: "auto",
+  },
+  preset: {
+    marginRight: 9,
+    marginTop: 8,
+    border: "2px solid black",
+    width: "14rem",
+    height: "17rem",
+    borderRadius: "5px",
+    border: "1px solid rgb(144, 144, 144)",
+    boxSizing: "border-box",
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "16px 18px",
+    backgroundPosition: "98% 50%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-evenly",
+    alignItems: "left",
+  },
+  presetHeading: {
+    paddingLeft: "5.5rem",
+  },
+  serverSection: {
+    borderRadius: "5px",
+    border: "1px solid rgb(144, 144, 144)",
+    padding: "7px 14px",
+    boxSizing: "border-box",
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "16px 18px",
+    backgroundPosition: "98% 50%",
+    cursor: "auto",
+    width: "43.5rem",
+  },
+  usernameSection: {
+    flex: "1",
+    position: "relative",
+    bottom: 6,
+    borderRadius: "5px",
+    minWidth: "200px",
+    width: 100,
+    border: "1px solid rgb(144, 144, 144)",
+    padding: "7px 14px",
+    boxSizing: "border-box",
+    backgroundSize: "16px 18px",
+    backgroundPosition: "98% 50%",
+    cursor: "auto",
+  },
+  headerSection: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  resets: {
+    fontFamily: "arial",
+    boxSizing: "border-box",
+  },
+
+  container: {
+    maxWidth: "700px",
+    margin: "0 auto",
+    marginBottom: "100px",
+  },
+
+
+  profilePic: {
+    border: "1px solid #909090",
+    borderRadius: "4px",
+    padding: "5px 16px",
+  }
+};
+
+export default NewProfile;

package/src/stories/Forms/NewProfile/NewProfile.stories.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import NewProfile from './NewProfile';
+
+export default {
+    title: 'Forms/New Profile',
+    component: NewProfile
+}
+
+export const Profile = (args) => <NewProfile {...args} />

package/src/stories/Forms/NewProfile/presets.json

@@ -0,0 +1,9 @@
+[
+    {"id":1,"serverName":"football","imageUrl":"https://e0.365dm.com/21/09/768x432/skysports-mohamed-salah-liverpool_5510527.jpg?20210912170025"}
+    ,{"id":2,"serverName":"Music","imageUrl":"https://www.incimages.com/uploaded_files/image/1920x1080/getty_626660256_2000108620009280158_388846.jpg"},
+    {"id":4,"serverName":"Dance","imageUrl":"https://dailytimes.com.pk/assets/uploads/2018/04/22/IMG_5340-1280x720.jpg"},
+    {"id":3,"serverName":"Art","imageUrl":"https://mymodernmet.com/wp/wp-content/uploads/2019/03/elements-of-art-6.jpg"},
+    {"id":5,"serverName":"Tennis","imageUrl":"https://photoresources.wtatennis.com/photo-resources/2019/08/15/dbb59626-9254-4426-915e-57397b6d6635/tennis-origins-e1444901660593.jpg?width=1200&height=630"},
+    {"id":6,"serverName":"Robotics","imageUrl":"https://cdn.builtin.com/sites/www.builtin.com/files/styles/blog_medium/public/robotics-companies-roundup.jpg"}
+
+]

package/src/stories/Layout/Body/Body.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import styled from 'styled-components'
+
+import Left from '../Left/Left'
+import Center from '../Center/Center'
+import Right from '../Right/Right'
+
+const Body = ({children}) => {
+  return (
+    <StyledBody>
+      {children}
+    </StyledBody>
+  )
+}
+
+const StyledBody = styled('div')(
+  {
+    display: 'flex',
+    'align-items': 'flex-start',
+  }
+)
+
+export default Body

package/src/stories/Layout/Body/Body.stories.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+import Body from "./Body";
+
+import Left from "../Left/Left";
+import Center from "../Center/Center";
+import Right from "../Right/Right";
+
+export default {
+  title: "Layout/Body",
+  component: Body
+};
+
+export const Default = props => (
+  <Body {...props}>
+    <Left>
+      <p>Left</p>
+    </Left>
+    <Center>
+      <p>Center</p>
+    </Center>
+    <Right>
+      <p>Right</p>
+    </Right>
+  </Body>
+);

package/src/stories/Layout/Center/Center.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import styled from 'styled-components'
+
+const Center = ({ children }) => {
+  return <StyledCenter>{children}</StyledCenter>
+}
+
+export default Center
+
+const StyledCenter = styled('div')({
+  display: 'flex',
+  flex: '5',
+  'align-items': 'flex-start',
+  'flex-direction': 'column',
+})

package/src/stories/Layout/Center/Center.stories.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+import Center from "./Center";
+
+export default {
+  title: "Layout/Center",
+  component: Center
+};
+
+export const Default = props => (
+  <Center {...props}>
+    <p>Center</p>
+  </Center>
+);

package/src/stories/Layout/Head/Head.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import styled from 'styled-components'
+
+const Head = () => {
+  return <StyledHead></StyledHead>
+}
+
+export default Head
+
+const StyledHead = styled('div')({
+  height: '75px',
+  display: 'flex',
+  'align-items': 'flex-start',
+})

package/src/stories/Layout/Head/Head.stories.js

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

package/src/stories/Layout/Left/Left.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import styled from "styled-components";
+
+import BaseMaterial from "../../Containers/BaseMaterial";
+
+const Left = ({ children }, ...rest) => {
+  return <StyledLeft>{children}</StyledLeft>;
+};
+
+export default Left;
+
+const StyledLeft = styled.div`
+  flex: 2;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  padding-left: 10px;
+  padding-right: 10px;
+  overflow: hidden;
+`

package/src/stories/Layout/Left/Left.stories.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+import Left from "./Left";
+
+export default {
+  title: "Layout/Left",
+  component: Left
+};
+
+export const Default = props => (
+  <Left {...props}>
+    <p>Left</p>
+  </Left>
+);

package/src/stories/Layout/Right/Right.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import styled from 'styled-components'
+
+const Right = ({children}) => {
+  return <StyledRight>{children}</StyledRight>
+}
+
+export default Right
+
+const StyledRight = styled('div')({
+  flex: '3',
+  display: 'flex',
+  'align-items': 'flex-end',
+  'flex-direction': 'column',
+  padding: '0 10px'
+})

package/src/stories/Layout/Right/Right.stories.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+import Right from "./Right";
+
+export default {
+  title: "Layout/Right",
+  component: Right
+};
+
+export const Default = props => (
+  <Right {...props}>
+    <p>Right</p>
+  </Right>
+);