@mohamed-karawia/react-storybook 0.1.1

package/src/stories/Forms/CreateProfile-3/CreateProfile.jsx

@@ -0,0 +1,488 @@
+import React, { useState, useCallback } from 'react';
+import { Formik, Form, useField } from 'formik';
+import { useDropzone } from 'react-dropzone';
+import styled from 'styled-components';
+import * as Yup from 'yup';
+import SearchCard from '../../Reusable Components/SearchCard/SearchCard';
+
+const MyTextInput = ({ label, ...props }) => {
+  // useField() returns [formik.getFieldProps(), formik.getFieldMeta()]
+  // which we can spread on <input>. We can use field meta to show an error
+  // message if the field is invalid and it has been touched (i.e. visited)
+  const [field, meta] = useField(props);
+  return (
+    <TextInput>
+      <Label>{label}</Label>
+      <UserInput {...field} {...props} />
+      {meta.touched && meta.error ? <Error>{meta.error}</Error> : null}
+    </TextInput>
+  );
+};
+
+const MyStyleTextInput = ({ label, ...props }) => {
+  // useField() returns [formik.getFieldProps(), formik.getFieldMeta()]
+  // which we can spread on <input>. We can use field meta to show an error
+  // message if the field is invalid and it has been touched (i.e. visited)
+  const [field, meta] = useField(props);
+  return (
+    <StyleTextInput>
+      <StyleLabel>{label}</StyleLabel>
+      <StyleInput {...field} {...props} />
+      {meta.touched && meta.error ? <Error>{meta.error}</Error> : null}
+    </StyleTextInput>
+  );
+};
+
+const CreateProfile = () => {
+  // const [serverName, setServerName] = useState('');
+  const [themeName, setThemeName] = useState('');
+  const [fileName, setFileName] = useState('');
+  const [preset, setPreset] = useState([
+    { name: 'preset1', selected: false },
+    { name: 'preset2', selected: false },
+    { name: 'preset3', selected: false },
+  ]);
+  const theme=[
+    { name: 'abc', selected: false },
+    { name: 'bcd', selected: false },
+    { name: 'def', selected: false },
+  ];
+  const [image, setImage] = useState();
+  const onDrop = useCallback((acceptedFiles) => {
+    const url = URL.createObjectURL(acceptedFiles[acceptedFiles.length - 1]);
+    setImage(url);
+  }, []);
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept: 'image/*',
+    onDrop,
+  });
+  return (
+    <Container>
+      <Formik
+        initialValues={{
+          userName: '',
+          preset: '',
+          theme: '',
+          serverName: '',
+          serverDescription: '',
+          margin: '',
+          color: '',
+          padding: '',
+          backgroundColor: '',
+          border: '',
+          fontSize: '',
+        }}
+        validationSchema={Yup.object({
+          userName: Yup.string()
+            .min(4, 'Must be atleast 4 characters or more')
+            .required('username cannot be empty'),
+          serverName: Yup.string().required('Server name cannot be empty'),
+          margin: Yup.string().required('provide margin'),
+          color: Yup.string().required('provide color'),
+          padding: Yup.string().required('provide padding'),
+          backgroundColor: Yup.string().required('provide backgroundColor'),
+          border: Yup.string().required('provide border'),
+          fontSize: Yup.string().required('provide fontSize'),
+        })}
+       
+        onSubmit={(values, { setSubmitting }) => {
+          console.log(values);
+          // setTimeout(() => {
+          //   alert(JSON.stringify(values, null, 2));
+          //   setSubmitting(false);
+          // }, 400);
+        }}
+      >
+        <Form>
+          <Title>Create Profile</Title>
+          <FileContainer>
+            <UploadFile>
+              <FileInput
+                onChange={(e) => setFileName(e.target.files[0].name)}
+                type='file'
+              ></FileInput>
+              +
+            </UploadFile>
+
+            {fileName.length > 0 ? (
+              <FileName>{fileName}</FileName>
+            ) : (
+              <FileName>Choose File </FileName>
+            )}
+            {/* <UserInput
+          value={userName}
+          onChange={(e) => setUserName(e.target.value)}
+          placeholder='username'
+        /> */}
+            <MyTextInput
+              label='Username'
+              name='userName'
+              type='text'
+              placeholder='user name'
+            />
+          </FileContainer>
+
+          <SubContainer>
+            <SubHeading marginRight='20'>Create a Server</SubHeading>
+            <Icon
+              src='https://www.clipartmax.com/png/middle/138-1389227_refresh-icon-circle.png'
+              // onClick={() => setServerName('')}
+              marginRight='8'
+            ></Icon>
+          </SubContainer>
+          <InputContainer>
+            <MyTextInput
+              label='Server name'
+              name='serverName'
+              type='text'
+              placeholder='server name'
+            />
+          </InputContainer>
+
+          <InputContainer>
+            {/* <Input
+              value={serverDescription}
+              onChange={(e) => {
+                setServerDescription(e.target.value);
+              }}
+              placeholder='server description'
+            /> */}
+
+            <MyTextInput
+              label='Server description'
+              name='serverDescription'
+              type='text'
+              placeholder='server description'
+            />
+          </InputContainer>
+          <H4>Upload a logo</H4>
+          <Dropdiv {...getRootProps()}>
+            <input {...getInputProps()} />
+            {isDragActive ? (
+              <p>Drop the files here ...</p>
+            ) : (
+              <p>Drag 'n' drop some files here, or click to select files</p>
+            )}
+          </Dropdiv>
+          <PreviewImageContainer>
+            {image && <PreviewImage src={image} />}
+          </PreviewImageContainer>
+          {/* <SubContainer> */}
+          <PresetHeadContainer>
+            <H4>Presets</H4>
+          </PresetHeadContainer>
+          {/* <Icon src='https://www.clipartmax.com/png/middle/138-1389227_refresh-icon-circle.png'></Icon> */}
+          {/* </SubContainer> */}
+
+          <PresetDivContainer>
+            {preset.map((p, index) => (
+              <PresetDiv
+                key={index}
+                onClick={() => {
+                  const a = preset.filter((pre, i) => {
+                    if (i === index) {
+                      pre.selected = !pre.selected;
+                      return pre;
+                    } else {
+                      pre.selected = false;
+                      return pre;
+                    }
+                  });
+                  setPreset(a);
+                }}
+                selected={p.selected}
+              >
+                <CardImage src='https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg' />
+                <CardTitle>{p.name}</CardTitle>
+                <CardDescription>{p.name}</CardDescription>
+              </PresetDiv>
+            ))}
+          </PresetDivContainer>
+
+          <SubContainer>
+            <SubHeading>Theme</SubHeading>
+
+            <Icon
+              src='https://www.clipartmax.com/png/middle/138-1389227_refresh-icon-circle.png'
+              onClick={() => setThemeName('')}
+              marginLeft='5'
+            ></Icon>
+          </SubContainer>
+          <InputContainer>
+            <Input
+              value={themeName}
+              onChange={(e) => {
+                setThemeName(e.target.value);
+                
+              }}
+              placeholder='search theme...'
+            />
+          </InputContainer>
+          <SearchCard list={theme} item={themeName} />
+          <SubContainer>
+            <SubHeading>Styles</SubHeading>
+
+            <Icon
+              src='https://www.clipartmax.com/png/middle/138-1389227_refresh-icon-circle.png'
+              marginLeft='7'
+            ></Icon>
+          </SubContainer>
+          <PresetDivContainer>
+            <MyStyleTextInput
+              label='Margin'
+              name='margin'
+              type='text'
+              placeholder='margin'
+            />
+            <MyStyleTextInput
+              label='Color'
+              name='color'
+              type='text'
+              placeholder='color'
+            />
+
+            <MyStyleTextInput
+              label='Padding'
+              name='padding'
+              type='text'
+              placeholder='padding'
+            />
+          </PresetDivContainer>
+          <PresetDivContainer>
+            <MyStyleTextInput
+              label='Background Color'
+              name='backgroundColor'
+              type='text'
+              placeholder='background color'
+            />
+            <MyStyleTextInput
+              label='Border'
+              name='border'
+              type='text'
+              placeholder='border'
+            />
+
+            <MyStyleTextInput
+              label='Font Size'
+              name='fontSize'
+              type='text'
+              placeholder='font size'
+            />
+          </PresetDivContainer>
+
+          <PresetDivContainer>
+            {/* <StyleInput placeholder='style 4' />
+            <StyleInput placeholder='style 5' />
+            <StyleInput placeholder='style 6' /> */}
+          </PresetDivContainer>
+          <H4 marginRight='20'>Preview</H4>
+          <PreviewBox>
+            <h1>1</h1>
+          </PreviewBox>
+          <ButtonContainer>
+            <Button type='submit'>Create</Button>
+          </ButtonContainer>
+        </Form>
+      </Formik>
+    </Container>
+  );
+};
+const Title = styled.h3`
+  /* text-align: center; */
+  margin-right: 20%;
+`;
+
+const Container = styled.div`
+  flex: 1;
+  flex-direction: column;
+  font-family: Arial, Helvetica, sans-serif;
+  /* text-align: center; */
+  //   background:'#000'
+`;
+
+const FileContainer = styled.div`
+  /* text-align: center; */
+  /* margin-left: 3%; */
+  /* width: 40%; */
+`;
+
+const UploadFile = styled.label`
+  border: 1px solid grey;
+  border-radius: 100px;
+  display: inline-block;
+  padding: 6px 12px;
+  cursor: pointer;
+  margin-right: 2%;
+  margin-bottom: 1%;
+  :hover {
+    color: #fff;
+    background: grey;
+  }
+`;
+const FileInput = styled.input`
+  display: none;
+`;
+const FileName = styled.label`
+  border: 1px solid #606060;
+  font-size: 14px;
+  color: #979899;
+  padding: 5px;
+  margin-right: 23%;
+`;
+const UserInput = styled.input`
+  /* width: 30%; */
+  width: 99%;
+  padding: 0.5%;
+  margin-top: 1%;
+  /* align-self: center; */
+`;
+const SubContainer = styled.div`
+  margin-top: 1%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1%;
+`;
+const PresetHeadContainer = styled.div`
+  margin-top: 1%;
+  margin-bottom: 1%;
+`;
+const SubHeading = styled.label`
+  font-size: 18px;
+  font-weight: 600;
+`;
+const H4 = styled.span`
+  font-size: 18px;
+  font-weight: 600;
+`;
+const Icon = styled.img`
+  width: 24px;
+  height: 24px;
+  justify-self: flex-end;
+  /* margin-right: ${(props) => props.marginRight}%; */
+  /* margin-left: ${(props) => props.marginLeft}%; */
+`;
+const InputContainer = styled.div`
+  /* margin-left: 2%; */
+  margin-bottom: 2%;
+`;
+const Input = styled.input`
+  width: 99%;
+  margin-top: 0.5%;
+  padding: 0.5%;
+`;
+const PresetDivContainer = styled.div`
+  display: flex;
+  width: 100%;
+  /* justify-content: center; */
+  margin-bottom: 2%;
+  /* margin-left: 2%; */
+`;
+const PresetDiv = styled.div`
+  margin-right: 2%;
+  width: 30%;
+  display: flex;
+  flex-direction: column;
+  /* flex: 1; */
+  border: 1px solid white;
+
+  background: ${(props) => (props.selected ? '#ccc' : 'white')};
+  :hover {
+    opacity: 0.8;
+  }
+`;
+const CardImage = styled.img`
+  height: 70%;
+  width: 100%;
+  :hover {
+    opacity: 0.8;
+  }
+`;
+
+const CardTitle = styled.label`
+  font-size: 18px;
+  font-weight: 400;
+  margin-top: 1%;
+  margin-left: 2%;
+`;
+
+const CardDescription = styled.label`
+  font-size: 14px;
+  font-weight: 200;
+  margin-top: 1%;
+  margin-left: 2%;
+`;
+
+const PreviewBox = styled.div`
+  width: 320px;
+  /* margin-left: 36%; */
+  background: grey;
+`;
+const ButtonContainer = styled.div`
+  /* margin-left: 26%; */
+  margin-top: 2%;
+  text-align: center;
+`;
+const Button = styled.button`
+  width: 300px;
+  padding: 1%;
+  border: 1px solid black;
+  :hover {
+    background: grey;
+    color: white;
+  }
+`;
+const PreviewImage = styled.img`
+  margin-top: 1%;
+  width: 20%;
+  height: 20%;
+`;
+const PreviewImageContainer = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+const Dropdiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  border-width: 2px;
+  border-radius: 2px;
+  border-color: #eee;
+  border-style: dashed;
+  background-color: #fafafa;
+  color: #bdbdbd;
+  outline: none;
+  transition: border 0.24s ease-in-out;
+`;
+const TextInput = styled.div`
+  display: flex;
+  flex-direction: column;
+  /* background-color: black; */
+`;
+
+const StyleTextInput = styled.span`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  /*   width: 10%; */
+  /* margin-left: 2%; */
+  margin-right: 10%;
+`;
+const Error = styled.div`
+  color: red;
+  font-size: 14px;
+`;
+const Label = styled.label`
+  font-size: 14px;
+`;
+const StyleLabel = styled.label`
+  font-size: 14px;
+`;
+const StyleInput = styled.input`
+  width: 100%;
+  margin-top: 3%;
+  padding: 2%;
+  /* align-self: center; */
+`;
+export default CreateProfile;

package/src/stories/Forms/CreateProfile-3/CreateProfile.stories.js

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

package/src/stories/Forms/CreateUser/CreateUser.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import styled from "styled-components";
+import BaseMaterial from "../../Containers/BaseMaterial";
+
+const CreateUser = props => (
+  <BaseMaterial {...props}>
+    <input type="textbox" placeholder="Username" />
+    <input type="email" placeholder="Email Address" />
+  </BaseMaterial>
+);
+
+
+export default CreateUser

package/src/stories/Forms/CreateUser/CreateUser.stories.js

@@ -0,0 +1,10 @@
+import React from "react"
+
+import CreateUser from "./CreateUser"
+
+export default {
+    title: "Forms/CreateUser",
+    component: CreateUser
+}
+
+export const Default = props => <CreateUser inputBGColor="yellow" />

package/src/stories/Forms/CreateVideoAlbum/CreateVideoAlbum.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as Yup from 'yup';
+import ReusableForm from '../../Reusable Components/ReusableForm/ReusableForm';
+import TextField from '../../Common Inputs/TextField/TextField';
+import CustomDropZone from '../../Common Inputs/CustomDropzone/CustomDropZone';
+
+const CreateVideoAlbum = (props) => {
+
+    const initialValues = {
+        cover: null,
+        title: ''
+    }
+
+    const formSchema = Yup.object().shape({
+        title: Yup.string()
+            .required("Required")
+    });
+
+    const sections = [
+        {
+            title: "Announcment Details",
+            body: [
+                (<CustomDropZone label="Album Cover" name="cover" />),
+                (<TextField label="Title" name="title" />),
+            ],
+            hideTitle: true
+        },
+    ]
+
+    const onCreate = (values) => {
+        const album = { ...values }
+        const date = new Date()
+        album.date = date
+        props.saveHandler(album)
+    }
+
+    const cancelHandler = () => {
+        props.cancelHandler()
+    }
+
+    return (
+        <ReusableForm
+            formTitle="Create Video Album"
+            initialValues={initialValues}
+            formSchema={formSchema}
+            sections={sections}
+            headerStyles={{
+                padding: 10,
+                headerBackground: 'black',
+                titleColor: '#ffff',
+            }}
+            saveBtnText={props.saveBtnText}
+            cancelBtnText={props.cancelBtnText}
+            saveHandler={onCreate}
+            cancelHandler={cancelHandler}
+            headerStyles={{
+                padding: 10,
+                headerBackground: 'black',
+                titleColor: '#ffff',
+            }}
+            sectionPadding={10}
+            bodyRowGap={10}
+            {...props.formStyles}
+        />
+    )
+}
+
+CreateVideoAlbum.defaultProps = {};
+
+CreateVideoAlbum.propTypes = {
+    saveHandler: PropTypes.func,
+    cancelHandler: PropTypes.func,
+    saveBtnText: PropTypes.string,
+    cancelBtnText: PropTypes.string
+}
+
+export default CreateVideoAlbum

package/src/stories/Forms/CreateVideoAlbum/CreateVideoAlbum.stories.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import CreateVideoAlbum from './CreateVideoAlbum';
+
+export default {
+    title: 'Forms/Create Video Album',
+    component: CreateVideoAlbum
+}
+
+const onSave = (album) => {
+    console.log(album)
+}
+
+const onCancel = () => {
+    console.log('Cancel')
+}
+
+export const Form = args =>
+    <CreateVideoAlbum
+        saveHandler={onSave}
+        cancelHandler={onCancel}
+        saveBtnText='Create'
+        cancelBtnText='Cancel'
+        {...args} />

package/src/stories/Forms/Form/Form.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import RadioInput from '../../Common Inputs/RadioInput/RadioInput';
+
+const Form = () => {
+  const list = [
+    {
+      title: 'abc',
+      description: 'abc',
+      imageURL:
+        'https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg',
+    },
+    {
+      title: 'bcd',
+
+      description: 'abc',
+      imageURL:
+        'https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554__340.jpg',
+    },
+  ];
+  console.log('!!!');
+  return (
+    <div>
+      <RadioInput
+        list={list}
+        title='abc'
+        onChange={(changedListItem) => {
+          console.log(changedListItem);
+        }}
+      />
+    </div>
+  );
+};
+
+export default Form;

package/src/stories/Forms/Form/Form.stories.js

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