@mohamed-karawia/library 0.1.0

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

@@ -0,0 +1,556 @@
+import React from 'react';
+// React Icons
+import { BiReset, BiFootball, BiMusic, BiGame, BiBook, BiCameraMovie, BiSearch } from "react-icons/bi";
+// Styled components
+import styled from 'styled-components';
+// Formik
+import { Formik, Form, Field } from 'formik';
+import * as Yup from 'yup';
+// Components
+import CustomTextField from '../../Common Inputs/TextField/TextField'
+import CustomAutoComplete from '../../Common Inputs/CustomAutoComplete/CustomAutoComplete';
+import DatePicker from '../../Common Inputs/DatePicker/DatePicker';
+import CustomSelect from '../../Common Inputs/CustomSelect/CustomSelect'
+import CustomDropZone from '../../Common Inputs/CustomDropzone/CustomDropZone';
+import CheckboxGroup from '../../Common Inputs/CheckboxGroup/CheckboxGroup'
+import CustomTextarea from '../../Common Inputs/CustomTextarea/CustomTextarea'
+
+// Dummy Data for Presets
+const presets = [
+    { name: 'football', icon: (<BiFootball />) },
+    { name: 'Music', icon: (<BiMusic />) },
+    { name: 'Games', icon: (<BiGame />) },
+    { name: 'Books', icon: (<BiBook />) },
+    { name: 'Movies', icon: (<BiCameraMovie />) },
+    { name: 'Science', icon: (<BiSearch />) },
+]
+// Dummy Data for styles
+const themes = [
+    { id: 'red', label: 'red' },
+    { id: 'lightgreen', label: 'lightgreen' },
+    { id: 'yellow', label: 'yellow' },
+    { id: 'purple', label: 'purple' },
+    { id: 'lightblue', label: 'lightblue' },
+    { id: 'pink', label: 'pink' }
+];
+// Dummy Data for select options
+const options = [
+    { label: 'select an option', value: '' },
+    { label: 'option 1', value: '1' },
+    { label: 'option 2', value: '2' },
+    { label: 'option 3', value: '3' },
+]
+// Dummy Data for select Checkboxes Group
+const checkboxGroup = [
+    { label: 'option 1', value: '1' },
+    { label: 'option 2', value: '2' },
+    { label: 'option 3', value: '3' },
+]
+
+const CreateProfile = () => {
+    //Form initial Values
+    const initialValues = {
+        file: '',
+        server: '',
+        userName: '',
+        serverName: '',
+        searchThemes: '',
+        preset: '',
+        styles: {
+            fontColor: '',
+            serverFontColor: '',
+            fontSize: '',
+            serverFontSize: '',
+            borderRadius: '',
+            darkenServer: ''
+        },
+        startDate: null,
+        endDate: null,
+        select: '',
+        acceptTerms: [],
+        text: ''
+    }
+    // Form Validation Schema
+    const formSchema = Yup.object().shape({
+        file: Yup.object()
+            .required("Required"),
+        userName: Yup.string()
+            .required("Required"),
+        serverName: Yup.string()
+            .required("Required"),
+        searchThemes: Yup.string()
+            .required("Required"),
+        styles: Yup.object().shape({
+            fontSize: Yup.number()
+                .typeError('Font size must be a number'),
+            serverFontSize: Yup.number()
+                .typeError('Server Font size must be a number'),
+            borderRadius: Yup.number()
+                .typeError('Border radius must be a number'),
+            darkenServer: Yup.number()
+                .typeError('Darken Server must be a number')
+                .min(0, "Must be a number between 0 and 1")
+                .max(1, 'Must be a number between 0 and 1'),
+        }),
+        startDate: Yup.object()
+            .required("Required"),
+        endDate: Yup.object()
+            .required("Required"),
+        select: Yup.string()
+            .required("Required"),
+        acceptTerms: Yup.array()
+            .min(1, 'You must choose at least one element'),
+        text: Yup.string()
+            .required("Required"),
+    });
+
+    const submitHandler = (values) => {
+        console.log(values)
+    }
+
+    return (
+        <Container>
+            <Heading>create profile</Heading>
+            <Formik
+                initialValues={initialValues}
+                validationSchema={formSchema}
+                onSubmit={values => submitHandler(values)}
+            >
+                {({ errors, touched, setFieldValue, values }) => (<CreateForm>
+                    <FormHeader>
+                        <div>
+                            {values.userProfilePreview &&
+                                <ProfileImgWrapper>
+                                    <Img src={values.userProfilePreview} alt="" />
+                                </ProfileImgWrapper>
+                            }
+                            <CustomDropZone
+                                name="file"
+                                label="User Profile"
+                                borderRadius="100"
+                                width="150"
+                                height="150"
+                                fontSize="15"
+                            />
+                        </div>
+                        <InputWrapper>
+                            <CustomTextField
+                                label="Username"
+                                name="userName"
+                                borderRadius="10" />
+                        </InputWrapper>
+                    </FormHeader>
+
+                    <InputWrapper>
+                        <LabelWrapper>
+                            <Label>Create Server</Label>
+                            <ResetIcon onClick={() => { setFieldValue('serverName', '') }}>
+                                <BiReset />
+                            </ResetIcon>
+                        </LabelWrapper>
+                        <CustomTextField
+                            name="serverName"
+                            borderRadius="10" />
+                    </InputWrapper>
+
+                    <InputWrapper>
+                        <LabelWrapper>
+                            <Label>Upload Logo</Label>
+                            <ResetIcon onClick={() => {
+                                setFieldValue('serverFile', null)
+                                setFieldValue('serverPreview', null)
+                            }}><BiReset /></ResetIcon>
+                        </LabelWrapper>
+
+                        {values.serverPreview &&
+                            <ServerLogoWrapper>
+                                <Img src={values.serverPreview} alt="" />
+                            </ServerLogoWrapper>}
+
+                        <CustomDropZone
+                            name="server"
+                            fontSize="15"
+                        />
+                    </InputWrapper>
+
+                    <InputWrapper>
+                        <LabelWrapper>
+                            <Label>Presets</Label>
+                            <ResetIcon onClick={() => setFieldValue('preset', '')}>
+                                <BiReset />
+                            </ResetIcon>
+                        </LabelWrapper>
+                        <List>
+                            {presets.map((presetItem, index) => (
+                                <PresetItem
+                                    key={index}
+                                    onClick={() => setFieldValue('preset', presetItem)}
+                                    isActive={presetItem.name === values.preset.name}>
+                                    {presetItem.icon}
+                                    {presetItem.name}
+                                </PresetItem>
+                            ))}
+                        </List>
+                    </InputWrapper>
+
+                    <InputWrapper>
+                        <LabelWrapper>
+                            <CustomAutoComplete
+                                label="themes"
+                                name="searchThemes"
+                                items={themes}
+                                placeholder="Search Themes"
+                                value={values.searchThemes}
+                                onInputChange={value => {
+                                    setFieldValue('searchThemes', value)
+                                }}
+                                inputValue={values.searchThemes}
+                                borderColor="#9e9e9e"
+                                borderSize="1"
+                                borderRadius="10"
+                                padding="4"
+                                height="30"
+                            />
+                            <ResetIcon onClick={() => {
+                                setFieldValue('searchThemes', '')
+                            }}><BiReset /></ResetIcon>
+                        </LabelWrapper>
+
+
+                        <List>
+                            {themes.map(themeItem => (
+                                <ThemeItem
+                                    key={themeItem.id}
+                                    color={themeItem.label}
+                                    onClick={() => {
+                                        setFieldValue('searchThemes', themeItem.label)
+                                    }}
+                                    isActive={themeItem === values.searchThemes}>
+                                    {themeItem.label}
+                                </ThemeItem>
+                            ))}
+                        </List>
+                    </InputWrapper>
+
+                    <InputWrapper>
+                        <LabelWrapper>
+                            <Label>Styles</Label>
+                            <ResetIcon onClick={() => {
+                                setFieldValue('styles', initialValues.styles)
+                            }}><BiReset /></ResetIcon>
+                        </LabelWrapper>
+                        <List>
+                            <InputWrapper>
+                                <CustomTextField
+                                    label="font color"
+                                    name="styles.fontColor"
+                                    borderRadius="10"
+                                    inputPlaceHolder="ex: red" />
+                            </InputWrapper>
+                            <InputWrapper>
+
+                                <CustomTextField
+                                    label="server font color"
+                                    name="styles.serverFontColor"
+                                    borderRadius="10"
+                                    inputPlaceHolder="Server Font Color" />
+                            </InputWrapper>
+
+                            <InputWrapper>
+                                <CustomTextField
+                                    label="font size"
+                                    name="styles.fontSize"
+                                    inputPlaceHolder="Font Size"
+                                    borderRadius="10" />
+                            </InputWrapper>
+
+                            <InputWrapper>
+                                <CustomTextField
+                                    label="server font size"
+                                    name="styles.serverFontSize"
+                                    inputPlaceHolder="Server Font Size"
+                                    borderRadius="10" />
+                            </InputWrapper>
+
+                            <InputWrapper>
+                                <CustomTextField
+                                    label="Border radius"
+                                    name="styles.borderRadius"
+                                    inputPlaceHolder="Border Radius"
+                                    borderRadius="10" />
+                            </InputWrapper>
+
+                            <InputWrapper>
+                                <CustomTextField
+                                    label="Dark background"
+                                    name="styles.darkenServer"
+                                    inputPlaceHolder="Enter number between 0 and 1"
+                                    borderRadius="10" />
+                            </InputWrapper>
+
+                        </List>
+                    </InputWrapper>
+                    <InputWrapper>
+                        <Field
+                            component={DatePicker}
+                            name="DatePicker"
+                            className="form-control"
+                            startDate={values.startDate}
+                            endDate={values.endDate}
+                            startDateError={errors.startDate}
+                            endDateError={errors.endDate}
+                            datesChanged={(startDate, endDate) => {
+                                setFieldValue('startDate', startDate)
+                                setFieldValue('endDate', endDate)
+                            }}
+                        />
+                    </InputWrapper>
+
+                    <InputWrapper>
+                        <CustomSelect
+                            label="options"
+                            options={options} name="select" />
+                    </InputWrapper>
+
+                    <InputWrapper>
+                        <CheckboxGroup
+                            label="Checkbox Group"
+                            formLabelColor="white"
+                            formLabelFontSize="20"
+                            labelColor="white"
+                            name="acceptTerms"
+                            options={checkboxGroup}
+                            flexGap="30" />
+                    </InputWrapper>
+
+                    <InputWrapper>
+                        <CustomTextarea name="text" label="text" />
+                    </InputWrapper>
+
+                    <InputWrapper>
+                        <LabelWrapper>
+                            <Label>Preview</Label>
+                        </LabelWrapper>
+                        {/****************************************Preview Component************************************ */}
+
+                        <Preview
+                            theme={values.searchThemes}
+                            fontColor={values.styles.fontColor}
+                            fontSize={values.styles.fontSize}>
+                            <FormHeader>
+                                {
+                                    values.userProfilePreview &&
+                                    <ProfileImgWrapper>
+                                        <Img src={values.userProfilePreview} alt="" />
+                                    </ProfileImgWrapper>
+                                }
+                                <SmallHeading>{values.userName}</SmallHeading>
+                            </FormHeader>
+                            {
+                                values.userName &&
+                                <SmallHeading>Welcome {values.userName}!</SmallHeading>
+                            }
+                            {values.serverPreview
+                                &&
+                                <PreviewServer
+                                    logo={values.serverPreview}
+                                    serverFontColor={values.styles.serverFontColor}
+                                    serverFontSize={values.styles.serverFontSize}
+                                    borderRadius={values.styles.borderRadius}
+                                    darkenServer={values.styles.darkenServer}>
+                                    <SmallHeading>{values.serverName}</SmallHeading>
+                                </PreviewServer>
+                            }
+                            {values.preset && <PreviewPreset>
+                                {values.preset.icon}
+                                {values.preset.name}
+                            </PreviewPreset>}
+                        </Preview>
+                    </InputWrapper>
+                    <SubmitButton type="submit">Submit</SubmitButton>
+                </CreateForm>)}
+            </Formik>
+        </Container>
+    )
+}
+// Global Styles
+const Container = styled.div`
+    padding: 20px;
+    font-family: sans-serif;
+`
+const Heading = styled.h1`
+    text-transform: capitalize;
+    font-size: 25px;
+    font-weight: 600;
+`
+// Components Style
+
+const FormHeader = styled.div`
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`
+
+const ProfileImgWrapper = styled.div`
+    width: 90px;
+    height: 90px;
+    border-radius: 100%;
+    border: 1px solid #747474;
+`
+
+const Img = styled.img`
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    object-fit: cover;
+    object-position: center;
+`
+
+const ServerLogoWrapper = styled.div`
+    border: 1px dotted gray;
+    width: 100%;
+    height: 150px;
+`
+
+const List = styled.ul`
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+    justify-content: center;
+    list-style: none;
+
+    
+`
+
+const PresetItem = styled.li`
+    border: 1px solid gray;
+    background-color: ${props => props.isActive ? 'gray' : 'white'};
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: ${props => props.isActive ? 'white' : 'gray'};
+    text-transform: uppercase;
+    padding: 30px;
+    cursor: pointer;
+    transition: all .2s;
+    &:hover{
+        background-color: gray;
+        color: white;
+        svg{
+            fill: white;
+        }
+    }
+    svg{
+        width: 30px;
+        height: 30px;
+        margin-bottom: 10px;
+        fill: ${props => props.isActive ? 'white' : 'gray'};
+    }
+`
+
+const ThemeItem = styled.div`
+    padding: 30px;
+    background-color: ${props => props.color};
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    color: white;
+    text-transform: uppercase;
+    border: ${props => props.isActive ? '1px solid black' : 'none'};
+    &:hover{
+        border: 1px solid black;
+    }
+`
+// Form Styles
+const CreateForm = styled(Form)`
+    display: flex;
+    flex-direction: column;
+`
+
+const InputWrapper = styled.div`
+    margin-top: 30px;
+`
+
+const LabelWrapper = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`
+
+const Label = styled.label`
+    color: #414141;
+`
+
+const ResetIcon = styled.div`
+    svg{
+        fill: #6d6d6d;
+        width: 20px;
+        height: 20px;
+        cursor: pointer;
+        &:hover{
+            fill: black;
+        }
+    }
+`
+const SubmitButton = styled.button`
+    border: 1px solid gray;
+    background-color: transparent;
+    padding: 10px 30px;
+    cursor: pointer;
+    align-self: flex-end;
+    font-size: 20px;
+    margin-top: 10px;
+    color: gray;
+    &:hover{
+        background-color: gray;
+        color: white;
+    }
+`
+// Preview Styles
+const Preview = styled.div`
+    background-color: ${props => props.theme};
+    border: 1px solid black;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: ${props => props.fontColor || 'black'};
+    font-size: ${props => props.fontSize || 20}px;
+    & > *:not(:first-child){
+        margin-top: 20px;
+    }
+`
+
+const SmallHeading = styled.h3`
+    font-family: 'sans-serif';
+    text-transform: capitalize;
+    font-weight: 400;
+`
+
+const PreviewServer = styled.div`
+    width: 100%;
+    height: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: ${props => `linear-gradient( rgba(0, 0, 0, ${props.darkenServer || '0'}), rgba(0, 0, 0, ${props.darkenServer || '0'}) ), url('${props.logo}')`};
+    background-size: cover;
+    background-position: center;
+    font-size: ${props => props.serverFontSize || 30}px;
+    text-transform: uppercase;
+    color: ${props => props.serverFontColor || 'white'};
+    border-radius: ${props => props.borderRadius}px;
+`
+const PreviewPreset = styled(PresetItem)`
+    width: 100%;
+    max-width: 500px;
+    background-color: gray;
+    color: white;
+    cursor: default;
+    svg{
+        fill: white;
+    }
+`
+export default CreateProfile

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

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