Restructured ui library for RN ui

easybase · Jun 3, 2021 · 94bdb16 · 94bdb16
1 parent 6a3a910
commit 94bdb16
Show file tree

Hide file tree

Showing 16 changed files with 243 additions and 77 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -34,6 +34,7 @@
     "no-trailing-spaces": 0,
     "no-unused-vars": 0,
     "jsx-quotes": 0,
-    "react/jsx-indent-props": 0
+    "react/jsx-indent-props": 0,
+    "no-use-before-define": 0
   }
-}
+}
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -51,7 +51,16 @@ const AuthExample = () => {
   React.useEffect(() => console.log("MOUNTING AUTH EXAMPLE"), []);
   const { signOut } = useEasybase();
   return (
-    <Auth theme="minimal-dark">
+    <Auth 
+      theme="minimal-dark"
+      signUpFields={{ 
+          lastName: { minLength: { message: "Must be 14 characters", value: 14 }},
+          phoneNumber: true,
+          gender: true,
+          dateOfBirth: { required: true }
+      }}
+      dictionary={{ signInHeader: "PLEASE SG IN" }}
+    > 
       <h2>You're in!</h2>
       <button onClick={signOut}>Sign Out</button>
     </Auth>

diff --git a/native-example/package.json b/native-example/package.json
@@ -7,7 +7,7 @@
     "start": "react-native start"
   },
   "dependencies": {
-    "easybase-react": "github:easybase/easybase-react#dev",
+    "easybase-react": "../",
     "expo": "~41.0.1",
     "expo-splash-screen": "~0.10.2",
     "expo-status-bar": "~1.0.4",

diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "microbundle": "microbundle build --jsx React.createElement --external react,react-native --no-compress --format modern,cjs",
     "genDocs": "typedoc",
     "clean": "shx rm -rf dist",
-    "fixDist": "shx cp -r dist/src/ui/Auth/. dist/ui/Auth && shx rm -rf dist/src/",
+    "fixDist": "shx cp -r dist/src/ui/utils.d.ts dist/ui/utils.d.ts && shx cp -r dist/src/ui/uiTypes.d.ts dist/ui/uiTypes.d.ts && shx cp -r dist/src/ui/Auth/. dist/ui/Auth && shx rm -rf dist/src/ && shx rm -rf dist/src/ ",
     "test": "echo 'no test specified' || true"
   },
   "peerDependencies": {

diff --git a/src/ui/Auth/Auth.tsx b/src/ui/Auth/Auth.tsx
@@ -2,41 +2,41 @@ import React, { useEffect, useState, lazy, Suspense, Fragment } from 'react';
 import Container from './components/Container';
 import { ThemeProvider } from 'styled-components';
 import { Toaster } from 'react-hot-toast';
-import { mergeDeep, defaultDictionary } from './utils';
-import { IStyles, IAuth, IDictionary } from './uiTypes';
+import { mergeDeep, defaultDictionary } from '../utils';
+import { IStyles, IAuth } from '../uiTypes';
 import useEasybase from '../../useEasybase';
 
 const DefaultSignIn = lazy(() => import('./pages/SignIn'));
 const DefaultSignUp = lazy(() => import('./pages/SignUp'));
 const DefaultForgotPassword = lazy(() => import('./pages/ForgotPassword'));
 
-export default function({ theme, customStyles, children, dictionary }: IAuth): JSX.Element {
+export default function ({ theme, customStyles, children, dictionary, signUpFields }: IAuth): JSX.Element {
     const [themeVal, setThemeVal] = useState<any>({});
-    const [dictionaryVal, setDictionaryVal] = useState<IDictionary>({ ...defaultDictionary, ...dictionary });
+
     const [currentPage, setCurrentPage] = useState<"SignIn" | "SignUp" | "ForgotPassword" | "ForgotPasswordConfirm">("SignIn");
     const { isUserSignedIn } = useEasybase();
-    
+
     useEffect(() => {
         try {
             document.body.style.margin = "0px";
-        } catch (_) {}
+        } catch (_) { }
         async function mounted() {
             let loadedTheme: IStyles = {};
             if (theme === "minimal-dark") {
-                const _theme = (await import('./themes/minimal-dark')).default;
+                const _theme = (await import('../themes/minimal-dark')).default;
                 if (_theme.init) {
                     _theme.init()
                 }
                 loadedTheme = _theme;
             } else if (theme === "material") {
-                const _theme = (await import('./themes/material')).default;
+                const _theme = (await import('../themes/material')).default;
                 if (_theme.init) {
                     _theme.init()
                 }
                 loadedTheme = _theme;
             } else {
                 // catch all
-                const _theme = (await import('./themes/minimal')).default;
+                const _theme = (await import('../themes/minimal')).default;
                 if (_theme.init) {
                     _theme.init()
                 }
@@ -52,22 +52,40 @@ export default function({ theme, customStyles, children, dictionary }: IAuth): J
         mounted();
     }, [theme])
 
-    useEffect(() => {
-        setDictionaryVal({ ...defaultDictionary, ...dictionary })
-    }, [dictionary])
-
     if (isUserSignedIn()) {
         return <React.Fragment>{children}</React.Fragment>
     }
 
     const getCurrentPage = () => {
         switch (currentPage) {
             case "SignIn":
-                return <Suspense fallback={<Fragment />}><DefaultSignIn setCurrentPage={setCurrentPage} dictionary={dictionaryVal} /></Suspense>
+                return (
+                    <Suspense fallback={<Fragment />}>
+                        <DefaultSignIn 
+                            setCurrentPage={setCurrentPage} 
+                            dictionary={typeof dictionary === "object" ? { ...defaultDictionary, ...dictionary } : defaultDictionary} 
+                        />
+                    </Suspense>
+                )
             case "SignUp":
-                return <Suspense fallback={<Fragment />}><DefaultSignUp setCurrentPage={setCurrentPage} dictionary={dictionaryVal} /></Suspense>
+                return (
+                    <Suspense fallback={<Fragment />}>
+                        <DefaultSignUp 
+                            setCurrentPage={setCurrentPage} 
+                            dictionary={typeof dictionary === "object" ? { ...defaultDictionary, ...dictionary } : defaultDictionary} 
+                            signUpFields={typeof signUpFields === "object" ? signUpFields : {}}
+                        />
+                    </Suspense>
+                )
             case "ForgotPassword":
-                return <Suspense fallback={<Fragment />}><DefaultForgotPassword setCurrentPage={setCurrentPage} dictionary={dictionaryVal} /></Suspense>
+                return (
+                    <Suspense fallback={<Fragment />}>
+                        <DefaultForgotPassword 
+                            setCurrentPage={setCurrentPage} 
+                            dictionary={typeof dictionary === "object" ? { ...defaultDictionary, ...dictionary } : defaultDictionary} 
+                        />
+                    </Suspense>
+                )
             default:
                 return <React.Fragment />;
         }

diff --git a/src/ui/Auth/components/Container.tsx b/src/ui/Auth/components/Container.tsx
@@ -9,7 +9,6 @@ const Container = styled.div(props => ({
     left: 0,
     bottom: 0,
     right: 0,
-    overflow: 'auto',
     boxSizing: 'content-box',
     ...(props.theme.container ? { ...props.theme.container } : {})
 }))

diff --git a/src/ui/Auth/components/GenderSelect.tsx b/src/ui/Auth/components/GenderSelect.tsx
@@ -4,7 +4,10 @@ import styled from 'styled-components';
 import Label from './internal/Label';
 import Select from './internal/Select';
 
-const GenderSelect = styled(Select)(props => props.theme.genderSelect ? { ...props.theme.genderSelect } : {})
+const GenderSelect = styled(Select)(props => ({
+    boxSizing: "border-box",
+    ...(props.theme.genderSelect ? { ...props.theme.genderSelect } : {})
+}))
 
 const Root = styled.div({
     position: "relative"

diff --git a/src/ui/Auth/index.tsx b/src/ui/Auth/index.tsx
@@ -1,5 +1,5 @@
 import React, { Suspense, Fragment, lazy } from 'react';
-import { IAuth } from './uiTypes';
+import { IAuth } from '../uiTypes';
 
 const Auth = lazy(() => import('./Auth'));
 

diff --git a/src/ui/Auth/pages/ForgotPassword.tsx b/src/ui/Auth/pages/ForgotPassword.tsx
@@ -7,7 +7,7 @@ import SecondaryButton from '../components/SecondaryButton';
 import SubmitButton from '../components/SubmitButton';
 import Spacer from '../components/Spacer';
 import { useForm } from 'react-hook-form';
-import { IPage } from '../uiTypes';
+import { IPage } from '../../uiTypes';
 import toast from 'react-hot-toast';
 import ErrorText from '../components/ErrorText';
 import Input from '../components/internal/Input';

diff --git a/src/ui/Auth/pages/SignIn.tsx b/src/ui/Auth/pages/SignIn.tsx
@@ -9,7 +9,7 @@ import SubmitButton from '../components/SubmitButton';
 import Spacer from '../components/Spacer';
 import { useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
-import { IPage } from '../uiTypes';
+import { IPage } from '../../uiTypes';
 import useEasybase from '../../../useEasybase';
 
 export default function ({ setCurrentPage, dictionary }: IPage) {

diff --git a/src/ui/Auth/pages/SignUp.tsx b/src/ui/Auth/pages/SignUp.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import Form from '../components/Form';
 import EmailInput from '../components/EmailInput';
 import PasswordInput from '../components/PasswordInput';
@@ -7,12 +7,18 @@ import SecondaryButton from '../components/SecondaryButton';
 import SubmitButton from '../components/SubmitButton';
 import Spacer from '../components/Spacer';
 import ErrorText from '../components/ErrorText';
+import GenderSelect from '../components/GenderSelect';
+import Input from '../components/internal/Input';
 import { useForm } from 'react-hook-form';
-import { IPage } from '../uiTypes';
+import { IPage, ISignUpFields } from '../../uiTypes';
 import toast from 'react-hot-toast';
 import useEasybase from '../../../useEasybase';
 
-export default function ({ setCurrentPage, dictionary }: IPage) {
+interface ISignUpPage extends IPage {
+    signUpFields: ISignUpFields
+}
+
+export default function ({ setCurrentPage, dictionary, signUpFields }: ISignUpPage) {
     const { register, handleSubmit, formState: { errors, isSubmitting }, reset } = useForm();
     const { signUp, signIn } = useEasybase();
 
@@ -26,7 +32,19 @@ export default function ({ setCurrentPage, dictionary }: IPage) {
             return;
         }
 
-        const signUpRes = await signUp(formData.email, formData.password, { createdAt: new Date().toISOString() });
+        const signUpAttrs = { createdAt: new Date().toISOString() };
+        for (const currField of ["firstName", "lastName", "fullName", "dateOfBirth", "gender", "phoneNumber"]) {
+            if (signUpFields[currField]) {
+                if (formData[currField]) {
+                    signUpAttrs[currField] = "" + formData[currField];
+                } else {
+                    toast.error("Missing sign up field value");
+                    return;
+                }
+            }
+        }
+
+        const signUpRes = await signUp(formData.email, formData.password, signUpAttrs);
         if (signUpRes.success) {
             setCurrentPage("SignIn")
             await signIn(formData.email, formData.password)
@@ -69,6 +87,80 @@ export default function ({ setCurrentPage, dictionary }: IPage) {
                 disabled={isSubmitting}
             />
 
+            { signUpFields.firstName &&
+                <Fragment>
+                    <Spacer size="xlarge" />
+                    <Input
+                        register={() => register("firstName", typeof signUpFields.firstName === "boolean" ? {} : signUpFields.firstName)}
+                        label={dictionary.newFirstNameLabel || ""}
+                        disabled={isSubmitting}
+                    />
+                    <ErrorText value={errors.firstName?.message} />
+                </Fragment>
+            }
+
+            { signUpFields.lastName &&
+                <Fragment>
+                    <Spacer size="xlarge" />
+                    <Input
+                        register={() => register("lastName", typeof signUpFields.lastName === "boolean" ? {} : signUpFields.lastName)}
+                        label={dictionary.newLastNameLabel || ""}
+                        disabled={isSubmitting}
+                    />
+                    <ErrorText value={errors.lastName?.message} />
+                </Fragment>
+            }
+
+            { signUpFields.fullName &&
+                <Fragment>
+                    <Spacer size="xlarge" />
+                    <Input
+                        register={() => register("fullName", typeof signUpFields.fullName === "boolean" ? {} : signUpFields.fullName)}
+                        label={dictionary.newFullNameLabel || ""}
+                        disabled={isSubmitting}
+                    />
+                    <ErrorText value={errors.fullName?.message} />
+                </Fragment>
+            }
+
+            { signUpFields.dateOfBirth &&
+                <Fragment>
+                    <Spacer size="xlarge" />
+                    <Input
+                        type="date"
+                        register={() => register("dateOfBirth", typeof signUpFields.dateOfBirth === "boolean" ? {} : signUpFields.dateOfBirth)}
+                        label={dictionary.newDateOfBirthLabel || ""}
+                        disabled={isSubmitting}
+                        style={{ overflow: "hidden" }}
+                    />
+                    <ErrorText value={errors.dateOfBirth?.message} />
+                </Fragment>
+            }
+
+            { signUpFields.gender &&
+                <Fragment>
+                    <Spacer size="xlarge" />
+                    <GenderSelect
+                        register={() => register("gender", typeof signUpFields.gender === "boolean" ? {} : signUpFields.gender)}
+                        disabled={isSubmitting}
+                    />
+                    <ErrorText value={errors.gender?.message} />
+                </Fragment>
+            }
+
+            { signUpFields.phoneNumber &&
+                <Fragment>
+                    <Spacer size="xlarge" />
+                    <Input
+                        type="tel"
+                        label={dictionary.newPhoneNumberLabel || ""}
+                        register={() => register("phoneNumber", typeof signUpFields.phoneNumber === "boolean" ? {} : signUpFields.phoneNumber)}
+                        disabled={isSubmitting}
+                    />
+                    <ErrorText value={errors.phoneNumber?.message} />
+                </Fragment>
+            }
+
             <Spacer size="xlarge" />
             <PasswordInput
                 register={() => register("password", passwordReqs)}

diff --git a/src/ui/Auth/themes/material.ts → src/ui/themes/material.ts b/src/ui/Auth/themes/material.ts → src/ui/themes/material.ts
diff --git a/src/ui/Auth/themes/minimal-dark.ts → src/ui/themes/minimal-dark.ts b/src/ui/Auth/themes/minimal-dark.ts → src/ui/themes/minimal-dark.ts
@@ -64,11 +64,15 @@ export default {
         boxShadow: 'rgb(60 66 87 / 16%) 0px 0px 0px 1px',
         padding: '6px 12px',
         borderRadius: 4,
-        marginBottom: 64,
+        backgroundColor: 'rgba(255, 255, 255, 0.09)',
+        color: "#fff",
         '&:active, &:focus': {
             boxShadow: 'rgb(58 151 212 / 36%) 0px 0px 0px 4px, rgb(60 66 87 / 16%) 0px 0px 0px 1px'
         }
     },
+    selectOption: {
+        background: '#000000'
+    },
     toast: {
         borderRadius: '10px',
         color: '#FFF',

diff --git a/src/ui/Auth/themes/minimal.ts → src/ui/themes/minimal.ts b/src/ui/Auth/themes/minimal.ts → src/ui/themes/minimal.ts
@@ -62,7 +62,6 @@ export default {
         boxShadow: 'rgb(60 66 87 / 16%) 0px 0px 0px 1px',
         padding: '6px 12px',
         borderRadius: 4,
-        marginBottom: 64,
         '&:active, &:focus': {
             boxShadow: 'rgb(58 151 212 / 36%) 0px 0px 0px 4px, rgb(60 66 87 / 16%) 0px 0px 0px 1px'
         }