TSJR-111 skills UI updates -> feature/standardized-skills

package.json

@@ -89,7 +89,6 @@
     "react-redux": "^8.0.4",
     "react-redux-toastr": "^7.6.10",
     "react-responsive": "^9.0.0-beta.5",
-    "react-responsive-masonry": "^2.1.7",
     "react-responsive-modal": "^6.2.0",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
@@ -160,7 +159,6 @@
     "@types/react-gtm-module": "^2.0.1",
     "@types/react-helmet": "^6.1.6",
     "@types/react-redux-toastr": "^7.6.2",
-    "@types/react-responsive-masonry": "^2.1.1",
     "@types/react-router-dom": "^5.3.3",
     "@types/redux-actions": "2.6.2",
     "@types/redux-logger": "^3.0.9",

src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss

@@ -22,30 +22,13 @@
         justify-content: space-between;
         align-items: center;
         margin-bottom: $sp-6;
-
-        .skillActions {
-            display: flex;
-            align-items: center;
-
-            @include ltemd {
-                flex-direction: column;
-                align-items: flex-end;
-            }
-
-            > button:nth-child(2) {
-                margin-left: $sp-4;
-
-                @include ltemd {
-                    margin-left: 0;
-                }
-            }
-        }
     }
 
     .skillsWrap {
-        display: flex;
-        flex-wrap: wrap;
-        column-gap: $sp-1;
-        row-gap: $sp-2;
+        padding-bottom: $sp-8;
+
+        @include ltemd {
+            padding-bottom: $sp-4;
+        }
     }
 }

src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx

@@ -35,6 +35,7 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
 
     const groupedSkillsByCategory: { [key: string]: UserSkill[] } = useMemo(() => {
         const grouped: { [key: string]: UserSkill[] } = {}
+        const sortedGroupedSkillsByCategory: { [key: string]: UserSkill[] } = {}
 
         memberSkills.forEach((skill: UserSkill) => {
             if (grouped[skill.category.name]) {
@@ -44,11 +45,14 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
             }
         })
 
-        return grouped
-    }, [memberSkills])
+        Object.keys(grouped)
+            .sort()
+            .forEach(key => {
+                sortedGroupedSkillsByCategory[key] = grouped[key]
+            })
 
-    const [skillsCatsCollapsed, setSkillsCatsCollapsed]: [boolean, Dispatch<SetStateAction<boolean>>]
-        = useState<boolean>(true)
+        return sortedGroupedSkillsByCategory
+    }, [memberSkills])
 
     const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
@@ -87,10 +91,6 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
         setHowSkillsWorkVisible(false)
     }
 
-    function handleExpandAllClick(): void {
-        setSkillsCatsCollapsed(!skillsCatsCollapsed)
-    }
-
     return (
         <div className={styles.container}>
             {
@@ -119,24 +119,13 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                         onClick={handleHowSkillsWorkClick}
                         variant='linkblue'
                     />
-                    {
-                        memberSkills.length > 0 && (
-                            <Button
-                                link
-                                label={skillsCatsCollapsed ? 'Expand all' : 'Collapse all'}
-                                onClick={handleExpandAllClick}
-                                variant='linkblue'
-                            />
-                        )
-                    }
                 </div>
             </div>
 
             <div className={styles.skillsWrap}>
                 {memberSkills.length > 0 && (
                     <GroupedSkillsUI
                         groupedSkillsByCategory={groupedSkillsByCategory}
-                        skillsCatsCollapsed={skillsCatsCollapsed}
                     />
                 )}
                 {!memberSkills.length && (

src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.module.scss

@@ -2,4 +2,13 @@
 
 .skillsCategories {
     flex: 1;
+    columns: 3 auto;
+
+    @include xl {
+        columns: 2 auto;
+    }
+
+    @include ltelg {
+        columns: 1 auto;
+    }
 }

src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx

@@ -1,47 +1,41 @@
 import { FC } from 'react'
-import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'
 
 import { UserSkill } from '~/libs/core'
 import { SkillPill } from '~/libs/shared'
 
-import { CollapsibleSkillsList } from '../collapsible-skills-list'
+import { SkillsList } from '../skills-list'
 
 import styles from './GroupedSkillsUI.module.scss'
 
 interface GroupedSkillsUIProps {
     groupedSkillsByCategory: { [key: string]: UserSkill[] }
-    skillsCatsCollapsed: boolean
 }
 const GroupedSkillsUI: FC<GroupedSkillsUIProps> = (props: GroupedSkillsUIProps) => (
-    <ResponsiveMasonry
+    <div
         className={styles.skillsCategories}
-        columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}
     >
-        <Masonry>
-            {
-                Object.keys(props.groupedSkillsByCategory)
-                    .map((categoryName: string) => (
+        {
+            Object.keys(props.groupedSkillsByCategory)
+                .map((categoryName: string) => (
 
-                        <CollapsibleSkillsList
-                            key={categoryName}
-                            header={categoryName}
-                            isCollapsed={props.skillsCatsCollapsed}
-                        >
-                            {
-                                props.groupedSkillsByCategory[categoryName]
-                                    .map((skill: UserSkill) => (
-                                        <SkillPill
-                                            skill={skill}
-                                            key={skill.id}
-                                            theme='catList'
-                                        />
-                                    ))
-                            }
-                        </CollapsibleSkillsList>
-                    ))
-            }
-        </Masonry>
-    </ResponsiveMasonry>
+                    <SkillsList
+                        key={categoryName}
+                        header={categoryName}
+                    >
+                        {
+                            props.groupedSkillsByCategory[categoryName]
+                                .map((skill: UserSkill) => (
+                                    <SkillPill
+                                        skill={skill}
+                                        key={skill.id}
+                                        theme='catList'
+                                    />
+                                ))
+                        }
+                    </SkillsList>
+                ))
+        }
+    </div>
 )
 
 export default GroupedSkillsUI

src/libs/shared/lib/components/index.ts

@@ -6,4 +6,4 @@ export * from './member-skill-editor'
 export * from './skill-pill'
 export * from './expandable-list'
 export * from './grouped-skills-ui'
-export * from './collapsible-skills-list'
+export * from './skills-list'

src/libs/shared/lib/components/skill-pill/SkillPill.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import { IconOutline } from '~/libs/ui'
 import { UserSkill } from '~/libs/core'
 
-import { isSkillVerified } from '../../services'
+import { isSkillVerified } from '../../services/standard-skills'
 
 import styles from './SkillPill.module.scss'
 

src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.module.scss → src/libs/shared/lib/components/skills-list/SkillsList.module.scss

@@ -25,25 +25,12 @@
         display: flex;
         justify-content: flex-start;
         align-items: flex-start;
-        cursor: pointer;
 
         .title {
             font-weight: 700;
             font-size: 14px;
         }
 
-        .btn {
-            padding-left: 0;
-            padding-right: $sp-2;
-            color: $turq-120;
-
-            svg {
-                flex: 0 0 auto;
-                color: $turq-120;
-                @include icon-size(16);
-            }
-        }
-
         .badgeCount {
             background-color: $black-10;
             border-radius: 50%;
@@ -58,11 +45,11 @@
         transition: opacity 0.3s ease-in-out;
         max-height: auto;
         opacity: 1;
-        padding-left: $sp-8;
+        padding-left: $sp-4;
         margin-top: $sp-1;
 
         @include ltemd {
-            padding-left: $sp-4;
+            padding-left: $sp-2;
         }
     }
 }

src/libs/shared/lib/components/skills-list/SkillsList.tsx

@@ -0,0 +1,29 @@
+import { FC, ReactNode } from 'react'
+import classNames from 'classnames'
+
+import styles from './SkillsList.module.scss'
+
+interface SkillsListProps {
+    children?: ReactNode[]
+    header?: ReactNode
+    containerClass?: string
+    headerClass?: string
+    contentClass?: string
+}
+
+const SkillsList: FC<SkillsListProps> = (props: SkillsListProps) => (
+    <div className={classNames(styles.container, props.containerClass)}>
+        <div className={classNames(styles.header, props.headerClass)}>
+            <div className={styles.title}>{props.header}</div>
+            <div className={styles.badgeCount}>
+                {props.children && props.children.length}
+            </div>
+        </div>
+
+        <div className={classNames(styles.content, props.contentClass)}>
+            {props.children}
+        </div>
+    </div>
+)
+
+export default SkillsList

src/libs/shared/lib/components/skills-list/index.ts

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

yarn.lock

@@ -5402,13 +5402,6 @@
     "@types/react" "*"
     redux "^3.6.0 || ^4.0.0"
 
-"@types/react-responsive-masonry@^2.1.1":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@types/react-responsive-masonry/-/react-responsive-masonry-2.1.1.tgz#694fc86964f37b991c3b85ac99a253a04ecb8f6b"
-  integrity sha512-sFzNsxYugWO8G4d3ObhpcJCiqiYthWp9Udr9phDzy5BYxW78uMF8yK2IJ8+7bQLbmQz2xaIey1ZogbW3ATIo+A==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-router-dom@^5.3.3":
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
@@ -16335,11 +16328,6 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
-react-responsive-masonry@^2.1.7:
-  version "2.1.7"
-  resolved "https://registry.yarnpkg.com/react-responsive-masonry/-/react-responsive-masonry-2.1.7.tgz#9b4a8d63b296a6265bea720c9d7da89754548346"
-  integrity sha512-/jOqnTVNtO8zRJMTl6ZXBex7EFYEIFBLVlkIFjiCT7omfm0CgNF2z4ST8RIr0v2ut15NWAQs7Q3kJJPhMoe3Ew==
-
 react-responsive-modal@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/react-responsive-modal/-/react-responsive-modal-6.2.0.tgz#339226b911d8ffaba4e0afce83387a65221b8e29"