PLAT-826 temp dev - dev

package.json

@@ -5,6 +5,7 @@
     "dependencies": {
         "@datadog/browser-logs": "^4.5.0",
         "@heroicons/react": "^1.0.6",
+        "axios": "^0.26.1",
         "browser-cookies": "^1.2.0",
         "classnames": "^2.3.1",
         "react": "^17.0.2",
@@ -51,6 +52,7 @@
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^12.0.0",
         "@testing-library/user-event": "^13.2.1",
+        "@types/axios": "^0.14.0",
         "@types/jest": "^27.0.1",
         "@types/node": "^16.7.13",
         "@types/react": "^17.0.20",

src/App.tsx

@@ -3,11 +3,11 @@ import { Route, Routes } from 'react-router-dom'
 
 import { EnvironmentConfig } from './config'
 import { Header } from './header'
-import { AnalyticsService, LoggingService, ProfileProvider } from './lib'
+import { initializeAnalytics, initializeLogger, ProfileProvider  } from './lib'
 import { RouteContext, RouteContextData } from './lib/route-provider'
 
-new AnalyticsService().initialize(EnvironmentConfig)
-new LoggingService().initialize(EnvironmentConfig)
+initializeAnalytics(EnvironmentConfig)
+initializeLogger(EnvironmentConfig)
 
 const App: FC<{}> = () => {
 

src/config/environments/environment.default.config.ts

@@ -4,6 +4,7 @@ import { AppHostEnvironment } from './app-host-environment.enum'
 
 export const EnvironmentConfigDefault: GlobalConfig = {
     API: {
+        V3: 'https://api.topcoder-dev.com/v3',
         V5: 'https://api.topcoder-dev.com/v5',
     },
     ENV: AppHostEnvironment.default,

src/config/environments/environment.prod.config.ts

@@ -6,6 +6,7 @@ import { EnvironmentConfigDefault } from './environment.default.config'
 export const EnvironmentConfigProd: GlobalConfig = {
     ...EnvironmentConfigDefault,
     API: {
+        V3: 'https://api.topcoder.com/v3',
         V5: 'https://api.topcoder.com/v5',
     },
     ENV: AppHostEnvironment.prod,

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.module.scss

@@ -2,7 +2,7 @@
 
 $overlaySquare: calc($pad-xxxxl + 2 * $border);
 
-.profile-avater,
+.profile-avatar,
 .overlay {
     cursor: pointer;
 }

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, FC, SetStateAction, useContext, useState } from 'react'
 
-import { Avatar, IconOutline, LoggingService, ProfileContext, ProfileContextData } from '../../../../../lib'
+import { Avatar, IconOutline, logInfo , ProfileContext, ProfileContextData } from '../../../../../lib'
 
 import { ProfilePanel } from './profile-panel'
 import styles from './ProfileLoggedIn.module.scss'
@@ -9,10 +9,9 @@ const ProfileLoggedIn: FC<{}> = () => {
 
     const { profile }: ProfileContextData = useContext(ProfileContext)
     const [profilePanelOpen, setProfilePanelOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
-    const logger: LoggingService = new LoggingService()
 
     if (!profile) {
-        logger.logInfo('tried to render the logged in profile w/out a profile')
+        logInfo('tried to render the logged in profile w/out a profile')
         return <></>
     }
 
@@ -22,7 +21,7 @@ const ProfileLoggedIn: FC<{}> = () => {
 
     return (
         <>
-            <div className={styles['profile-avater']} onClick={() => toggleProfilePanel()} >
+            <div className={styles['profile-avatar']} onClick={() => toggleProfilePanel()} >
                 <Avatar
                     firstName={profile.firstName}
                     lastName={profile.lastName}

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx

@@ -2,10 +2,10 @@ import { FC, useContext } from 'react'
 import { Link } from 'react-router-dom'
 
 import {
-    AuthenticationUrlConfig,
+    logoutUrl,
     ProfileContext,
     ProfileContextData,
-    ProfileRouteConfig,
+    profileRoute,
 } from '../../../../../../lib'
 
 import styles from './ProfilePanel.module.scss'
@@ -31,11 +31,11 @@ const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
             <Link
                 className={styles.profile}
                 onClick={() => props.toggleProfilePanel()}
-                to={ProfileRouteConfig.profile}
+                to={profileRoute}
             >
                 My Profile
             </Link>
-            <a href={AuthenticationUrlConfig.logout} className={styles.logout}>
+            <a href={logoutUrl} className={styles.logout}>
                 Log Out
             </a>
         </div>

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-not-logged-in/ProfileNotLoggedIn.tsx

@@ -1,29 +1,28 @@
-import classNames from 'classnames'
 import { FC } from 'react'
 
-import { AuthenticationUrlConfig, routeRoot } from '../../../../../lib'
+import { Button, loginUrl, routeRoot, signupUrl } from '../../../../../lib'
 import '../../../../../lib/styles/index.scss'
 
 import styles from './ProfileNotLoggedIn.module.scss'
 
 const ProfileNotLoggedIn: FC<{}> = () => {
 
-    const buttonClass: string = 'button'
-
     return (
         <>
-            <a
-                className={classNames(buttonClass, styles.login)}
-                href={AuthenticationUrlConfig.login(routeRoot)}
-            >
-                Log In
-            </a>
-            <a
-                className={classNames(buttonClass, 'all-white', styles.signup)}
-                href={AuthenticationUrlConfig.signup(routeRoot)}
-            >
-                Sign Up
-            </a>
+            <Button
+                className={styles.login}
+                label='Log In'
+                size='sm'
+                buttonStyle='text'
+                url={loginUrl(routeRoot)}
+            />
+            <Button
+                className={styles.signup}
+                label='Sign Up'
+                size='sm'
+                buttonStyle='tertiary'
+                url={signupUrl(routeRoot)}
+            />
         </>
     )
 }

src/lib/button/Button.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames'
+import { FC } from 'react'
+
+interface ButtonProps {
+    readonly buttonStyle?: 'primary' | 'secondary' | 'tertiary' | 'text'
+    readonly className?: string
+    readonly disable?: boolean
+    readonly label: string
+    readonly onClick?: (event?: any) => void
+    readonly size?: 'sm' | 'md' | 'lg' | 'xl'
+    readonly type?: 'button' | 'submit'
+    readonly url?: string
+}
+
+const Button: FC<ButtonProps> = (props: ButtonProps) => {
+
+    const classes: string = classNames(
+        'button',
+        props.className,
+        props.buttonStyle || 'primary',
+        `button-${props.size || 'md'}`
+    )
+
+    // if there is a url, this is a link button
+    if (!!props.url) {
+        return (
+            <a
+                className={classes}
+                href={props.url}
+            >
+                {props.label}
+            </a>
+        )
+    }
+
+    // if there is no click handler, the button is prob a submit
+    // button, so just add a blank click handler
+    const clickHandler: (event: any) => void = props.onClick || (() => undefined)
+
+    return (
+        <button
+            className={classes}
+            disabled={!!props.disable}
+            onClick={event => clickHandler(event)}
+            type={props.type || 'button'}
+        >
+            {props.label}
+        </button>
+    )
+}
+
+export default Button

src/lib/button/Buttons.test.tsx

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('<Button />', () => {
+
+    test('it should render the content', () => { })
+})

src/lib/button/index.ts

@@ -0,0 +1 @@
+export {  default as Button } from './Button'

src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.module.scss

@@ -0,0 +1,83 @@
+@import '../../styles';
+
+$form-pad-top: calc($pad-md - $border);
+$border-xs: 1px;
+$error-line-height: 14px;
+
+.form-field-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    padding-bottom: $pad-md;
+
+    .form-field {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        padding: $pad-sm $form-pad-top;
+        height: calc($pad-xxl * 2);
+        background: $tc-white;
+        border: $border-xs solid $black-40;
+        box-sizing: border-box;
+        border-radius: $pad-xs;
+        margin-bottom: calc($error-line-height + $pad-xs);
+
+        &:hover,
+        &.focus {
+            border-color: $turq-160;
+
+            &.form-field-error {
+                border-color: $red-100;
+            }
+        }
+
+        &.focus,
+        &.form-field-error {
+            border-width: $border;
+            padding: calc($pad-sm - $border-xs) calc($form-pad-top - $border-xs);
+        }
+
+        &.disabled {
+            background-color: $black-10;
+            background: $black-10;
+            border-color: $black-40;
+        }
+
+        &.form-field-error {
+            border-color: $red-100;
+            margin-bottom: 0;
+
+            .label {
+                color: $red-100;
+            }
+        }
+
+        .label {
+            top: calc(50% - $form-pad-top/2);
+            color: $turq-160;
+            margin-bottom: $pad-xs;
+            // extend ultra-small and override some properties
+            @extend .ultra-small;
+            @include font-weight-medium;
+            line-height: calc($pad-md - $border);
+            font-style: normal;
+        }
+    }
+
+    .error {
+        display: flex;
+        align-items: center;
+        color: $red-100;
+        // extend body ultra small and override it
+        @extend .body-ultra-small;
+        line-height: $error-line-height;
+        margin-top: $pad-xs;
+
+        svg {
+            @include icon-md;
+            fill: $red-100;
+            margin-right: $pad-xs;
+        }
+    }
+}

src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.test.tsx

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('<FormFieldWrapper /> ', () => {
+
+    test('it should display the FormField', () => {})
+})

src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.tsx

@@ -0,0 +1,53 @@
+import classNames from 'classnames'
+import { Dispatch, FC, ReactNode, SetStateAction, useState } from 'react'
+
+import { IconSolid } from '../../svgs'
+
+import styles from './Form-Field-Wrapper.module.scss'
+
+interface FormFieldWrapperProps {
+    children: ReactNode
+    disabled: boolean
+    error?: string
+    label: string
+    name: string
+}
+
+const FormFieldWrapper: FC<FormFieldWrapperProps> = (props: FormFieldWrapperProps) => {
+
+    const [focusStyle, setFocusStyle]: [string | undefined, Dispatch<SetStateAction<string | undefined>>] = useState<string | undefined>()
+    const formFieldClasses: string = classNames(
+        styles['form-field'],
+        props.disabled ? styles.disabled : undefined,
+        focusStyle,
+        !!props.error ? styles['form-field-error'] : undefined
+    )
+
+    return (
+        <div className={styles['form-field-wrapper']}>
+
+            <div
+                className={formFieldClasses}
+                onBlur={() => setFocusStyle(undefined)}
+                onFocus={() => setFocusStyle(styles.focus)}
+            >
+                <label
+                    className={styles.label}
+                    role='presentation'
+                >
+                    {props.label}
+                    {props.children}
+                </label>
+            </div>
+
+            {!!props.error && (
+                <div className={styles.error}>
+                    <IconSolid.ExclamationIcon />
+                    {props.error}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default FormFieldWrapper

src/lib/form-elements/form-field-wrapper/index.ts

@@ -0,0 +1 @@
+export { default as FormFieldWrapper } from './Form-Field-Wrapper'

src/lib/form-elements/form-functions/form-definition.model.ts

@@ -0,0 +1,5 @@
+import { TextInputModel } from './text-input.model'
+
+export interface FormDefinition {
+    [input: string]: TextInputModel
+}