Merge branch 'onboarding' of github.com:topcoder-platform/platform-ui into onboarding

Author: jmgasper

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "vue.features.codeActions.enable": false
+}

src/apps/onboarding/assets/images/x-icon.svg

@@ -0,0 +1,29 @@
+import React, { FC } from 'react'
+
+import styles from './styles.module.scss'
+
+interface ProgressBarProps {
+    progress: number
+    className?: string
+}
+
+export const ProgressBar: FC<ProgressBarProps> = (props: ProgressBarProps) => {
+
+    const progressProps: React.CSSProperties & { '--progress': number } = {
+        '--progress': props.progress,
+    }
+
+    return (
+        <div className={props.className}>
+            <span>#/##</span>
+            <div className={styles.wrap}>
+                <div
+                    className='progress'
+                    style={progressProps}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default ProgressBar

src/apps/onboarding/components/progress-bar/index.tsx

@@ -0,0 +1,27 @@
+@import '../../../../libs/ui/lib/styles/includes';
+
+.wrap {
+    background: $black-10;
+    border-radius: $sp-1;
+    height: 4px;
+    width: 100%;
+    display: flex;
+
+    :global(.progress) {
+        background: gray;
+        border-radius: inherit;
+        width: calc(var(--progress, 0) * 100%);
+        position: relative;
+
+        .percentage {
+            position: absolute;
+            top: 1px;
+            font-family: $font-barlow;
+            font-style: normal;
+            font-weight: $font-weight-bold;
+            font-size: 11px;
+            line-height: 14px;
+            color: $black-100;
+        }
+    }
+}

src/apps/onboarding/components/progress-bar/styles.module.scss

@@ -0,0 +1,24 @@
+import React, { FC } from 'react'
+import classNames from 'classnames'
+
+import { Skill } from '~/apps/talent-search/src/lib/models'
+
+import XIcon from '../../assets/images/x-icon.svg'
+
+import styles from './styles.module.scss'
+
+interface SkillTagProps {
+    skill: Skill
+    onDelete?: () => void
+}
+
+const SkillTag: FC<SkillTagProps> = (props: SkillTagProps) => (
+    <div className={classNames('d-flex align-items-center', styles.container)}>
+        {props.skill.name}
+        <button type='button' className={styles.btnDelete} onClick={props.onDelete}>
+            <img width={7} height={7} src={XIcon} alt='' />
+        </button>
+    </div>
+)
+
+export default SkillTag

src/apps/onboarding/components/skill-tag/index.tsx

@@ -0,0 +1,19 @@
+.container {
+  background-color: gray;
+  color: white;
+  border-radius: 3px;
+  padding: 0 10px;
+  font-size: 14px;
+  gap: 5px;
+}
+
+.btnDelete {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  border-radius: 100%;
+  flex-shrink: 0;
+  width: 15px;
+  height: 15px;
+}

src/apps/onboarding/components/skill-tag/styles.module.scss

@@ -0,0 +1,11 @@
+export const ACTIONS: {
+    MEMBER: {
+        GET_MEMBER: string;
+        UPDATE_MEMBER_SKILLS: string;
+    };
+} = {
+    MEMBER: {
+        GET_MEMBER: 'GET_MEMBER',
+        UPDATE_MEMBER_SKILLS: 'UPDATE_MEMBER_SKILLS',
+    },
+}

src/apps/onboarding/config/index.ts

@@ -0,0 +1,7 @@
+export default interface SkillInfo {
+  category: string;
+  emsiId: string;
+  name: string;
+  skillSources?: string[];
+  subCategory: string;
+}

src/apps/onboarding/models/SkillInfo.ts

@@ -0,0 +1,38 @@
+import { Navigate } from 'react-router-dom'
+
+import { ToolTitle } from '~/config/constants'
+import { lazyLoad, LazyLoadedComponent, PlatformRoute } from '~/libs/core'
+
+const PageOnboarding: LazyLoadedComponent = lazyLoad(() => import('./pages/onboarding/index'), 'OnboardingWrapper')
+const PageStart: LazyLoadedComponent = lazyLoad(() => import('./pages/start/index'), 'PageStart')
+const PageSkills: LazyLoadedComponent = lazyLoad(() => import('./pages/skills/index'), 'PageSkills')
+const toolTitle: string = ToolTitle.onboarding
+const onboardingRootRoute: string = '/onboarding'
+
+export const onboardRouteId: string = `${toolTitle} Onbarding`
+
+export const onboardingRoutes: ReadonlyArray<PlatformRoute> = [
+    {
+        authRequired: true,
+        children: [
+            {
+                element: <Navigate to='./start' />,
+                route: '/',
+            },
+            {
+                element: <PageStart />,
+                route: '/start',
+                title: toolTitle,
+            },
+            {
+                element: <PageSkills />,
+                route: '/skills',
+                title: toolTitle,
+            },
+        ],
+        element: <PageOnboarding />,
+        id: onboardRouteId,
+        route: onboardingRootRoute,
+        title: toolTitle,
+    },
+]

src/apps/onboarding/onboarding.routes.tsx

@@ -0,0 +1,46 @@
+import { FC, useContext, useEffect } from 'react'
+import { Outlet, Routes } from 'react-router-dom'
+import { connect, Provider } from 'react-redux'
+import classNames from 'classnames'
+
+import { ContentLayout } from '~/libs/ui'
+import { routerContext, RouterContextData } from '~/libs/core'
+
+import { onboardRouteId } from '../../onboarding.routes'
+import { fetchMemberInfo } from '../../redux/actions/member'
+import store from '../../redux/store'
+import '../../styles/global/_index.scss'
+
+import styles from './styles.module.scss'
+
+const OnboardingContent: FC<{ fetchMemberInfo: () => void }> = props => {
+    const { getChildRoutes }: RouterContextData = useContext(routerContext)
+    useEffect(() => {
+        props.fetchMemberInfo()
+        /* eslint-disable react-hooks/exhaustive-deps */
+    }, [])
+
+    return (
+        <div className={classNames('d-flex flex-column', styles.container)}>
+            <Outlet />
+            <Routes>
+                {getChildRoutes(onboardRouteId)}
+            </Routes>
+        </div>
+    )
+}
+
+const mapDispatchToProps: any = {
+    fetchMemberInfo,
+}
+const Onboarding: any = connect(undefined, mapDispatchToProps)(OnboardingContent)
+
+export const OnboardingWrapper: FC<{}> = () => (
+    <ContentLayout>
+        <Provider store={store}>
+            <Onboarding />
+        </Provider>
+    </ContentLayout>
+)
+
+export default OnboardingWrapper