chore: after merge

README.md

@@ -18,6 +18,9 @@ goal-oriented work environment with a cutting-edge platform.
 - Usage
 - Wiki
 - Contributing
+- Development
+  - Frontend
+  - Backend
 - License
 - Contact
 
@@ -51,12 +54,6 @@ Instructions on how to use the project.
 
 For more information, check out the project's wiki under the link: https://github.com/Tivix/cpf/wiki
 
-# swagger/redoc
-
-Swagger and redoc can be accessed using following urls:
-- http://0.0.0.0:8000/docs
-- http://0.0.0.0:8000/redoc
-
 # Contributing
 
 Guidelines for contributing to the project.
@@ -68,6 +65,41 @@ Guidelines for contributing to the project.
 - Push to the branch.
 - Open a pull request.
 
+# Development
+
+## Frontend
+
+### Folder structure
+
+- `api` - Contains api calls.
+- `app`- The App Router by Next.js.
+- `components` - Contains all components used in the app.
+   - `common` - In the common folder, we keep all essential components like Button, Card, or Input.
+   - `modules` - Here we keep more complex components that are still reusable or are part of layouts.
+   - `pages` - Here we compose view together to create a page. If you want to extract some module of the page, create `modules` folder there and put it in it.
+- `constants` - Contains all the constant values used in the app.
+- `static`- Contains assets like icons.
+- `store` - Contains all stores for state management.
+- `types` - Contains all reusable types and interfaces that are shared between many pages and modules.
+- `utils` - Contains all utility functions like data transformations or calculations.
+
+### Component structure
+
+Component folder should contain:
+
+- `index.ts` - importing and exporting the component.
+- `ComponentName.tsx` - view part of a component.
+- `ComponentName.interface.ts` - types related to that component.
+- `ComponentName.hooks.tsx` - the logic of our component
+
+## Backend
+
+### swagger/redoc
+
+Swagger and redoc can be accessed using following urls:
+- http://0.0.0.0:8000/docs
+- http://0.0.0.0:8000/redoc
+
 # License
 
 Specify the license under which the project is distributed.

frontend/src/api/ladder.ts

@@ -1,6 +1,6 @@
 import { mapKeysToCamelCase } from '@app/utils';
 import { API_URLS } from '.';
-import { LadderCardInterface } from '@app/components/common/LadderCard';
+import { LadderCardInterface } from '@app/components/pages/Library/modules/LadderCard';
 import { LadderBand } from '@app/types/library';
 
 async function getLadders() {

frontend/src/app/(app)/(peopleFlow)/people/add-new/personal-details/page.tsx

@@ -1,3 +1,3 @@
-import { PersonalDetails } from '@app/components/views/PersonalDetails/PersonalDetails';
+import { PersonalDetails } from '@app/components/pages/PersonalDetails/PersonalDetails';
 
 export default PersonalDetails;

frontend/src/app/(app)/(root)/documentation/page.tsx

@@ -1,11 +1,9 @@
-import { Typography } from '@app/components/common/Typography';
+import { PageTitle } from '@app/components/common/PageTitle';
 
 export default function Documentation() {
   return (
     <div>
-      <Typography className="mb-10" variant="body-l/semibold" as="h1">
-        Documentation
-      </Typography>
+      <PageTitle title="Documentation" />
     </div>
   );
 }

frontend/src/app/(app)/(root)/library/[ladder]/[bucket]/page.tsx

@@ -1,26 +1,13 @@
-import { Breadcrumbs } from '@app/components/modules/Breadcrumbs';
-import { BucketDetails } from '@app/components/modules/BucketDetails';
+import { BucketDetails } from '@app/components/pages/BucketDetails';
 import { getLadderName } from '@app/api/ladder';
 import { getBucketDetails } from '@app/api/bucket';
-import { routes } from '@app/constants';
 
 export default async function BucketDetailed({ params }: { params: { bucket: string; ladder: string } }) {
   const { bucket, ladder } = params;
   const data = await getBucketDetails(bucket);
   const ladderName = await getLadderName(ladder);
 
-  return (
-    <div>
-      <Breadcrumbs
-        breadcrumbs={[
-          { label: 'CPF Library', href: routes.library.index, current: false },
-          { label: ladderName, href: `${routes.library.index}/${ladder}`, current: false },
-          { label: data.bucketName, href: `${routes.library.index}/${ladder}/${bucket}`, current: true },
-        ]}
-      />
-      {data && <BucketDetails data={data} />}
-    </div>
-  );
+  return <BucketDetails data={data} ladderName={ladderName} ladderSlug={ladder} bucketSlug={bucket} />;
 }
 
 export const dynamic = 'force-dynamic';

frontend/src/app/(app)/(root)/library/[ladder]/page.tsx

@@ -1,22 +1,10 @@
-import { Breadcrumbs } from '@app/components/modules/Breadcrumbs';
-import { LibraryDetailed } from '@app/components/modules/LibraryDetailed';
 import { getLadderDetails } from '@app/api/ladder';
-import { routes } from '@app/constants';
+import { LadderDetails } from '@app/components/pages/LadderDetails';
 
 export default async function LadderDetailed({ params }: { params: { ladder: string } }) {
   const data = await getLadderDetails(params.ladder);
 
-  return (
-    <div>
-      <Breadcrumbs
-        breadcrumbs={[
-          { label: 'CPF Library', href: routes.library.index, current: false },
-          { label: data.ladderName, href: `${routes.library.index}/${params.ladder}`, current: true },
-        ]}
-      />
-      {data && <LibraryDetailed ladderSlug={params.ladder} data={data} />}
-    </div>
-  );
+  return <LadderDetails ladderSlug={params.ladder} data={data} />;
 }
 
 export const dynamic = 'force-dynamic';

frontend/src/app/(app)/(root)/library/page.tsx

@@ -1,25 +1,10 @@
-import { LadderCard } from '@app/components/common/LadderCard';
 import { getLadders } from '@app/api/ladder';
-import { Typography } from '@app/components/common/Typography';
+import { Library } from '@app/components/pages/Library';
 
 export default async function LibraryPage() {
   const data = await getLadders();
 
-  return (
-    <div>
-      <Typography className="mb-10" variant="body-l/semibold" as="h1">
-        CPF Library
-      </Typography>
-      <Typography className="mb-6 text-navy-600" variant="body-m/regular">
-        Select a career path to view the details.
-      </Typography>
-      <div className="grid grid-cols-3 gap-6">
-        {data.map((ladder) => (
-          <LadderCard key={ladder.ladderSlug} {...ladder} />
-        ))}
-      </div>
-    </div>
-  );
+  return <Library data={data} />;
 }
 
 export const dynamic = 'force-dynamic';

frontend/src/app/(app)/(root)/my-space/page.tsx

@@ -1,11 +1,24 @@
-import { Typography } from '@app/components/common/Typography';
+import { MySpace } from '@app/components/pages/MySpace';
 
-export default function MySpace() {
-  return (
-    <div>
-      <Typography className="mb-10" variant="body-l/semibold" as="h1">
-        My Space
-      </Typography>
-    </div>
-  );
+// TODO: get data from api
+const data = {
+  user: {
+    firstName: 'Jane',
+    lastName: 'Edge',
+    position: 'Front End Developer, Junior',
+  },
+  currentLevel: {
+    band: 2,
+    score: 10,
+  },
+  nextLevel: {
+    band: 3,
+    threshold: 11,
+  },
+};
+
+export default function MySpacePage() {
+  return <MySpace data={data} />;
 }
+
+export const dynamic = 'force-dynamic';

frontend/src/app/(app)/(root)/people/my-profile/page.tsx

@@ -1,6 +1,4 @@
-import { Breadcrumbs } from '@app/components/modules/Breadcrumbs';
-import { ProfileSettings } from '@app/components/modules/ProfileSetting';
-import { routes } from '@app/constants';
+import { ProfileSettings } from '@app/components/pages/ProfileSetting';
 
 // TODO: get data from api
 const data = {
@@ -21,15 +19,5 @@ const data = {
 };
 
 export default async function LibraryPage() {
-  return (
-    <div>
-      <Breadcrumbs
-        breadcrumbs={[
-          { label: 'People', href: routes.people.index, current: false },
-          { label: 'Profile settings', href: routes.people.myProfile, current: true },
-        ]}
-      />
-      <ProfileSettings data={data} />
-    </div>
-  );
+  return <ProfileSettings data={data} />;
 }

frontend/src/components/common/AccordionCard/AccordionCard.tsx

@@ -26,7 +26,7 @@ export const AccordionCard = ({
         className={generateClassNames(
           'group flex w-full items-center justify-between rounded-2xl border border-navy-200 p-6',
           {
-            'hover:bg-transparent rounded-b-none border-b-0 pb-0': isOpen,
+            'rounded-b-none border-b-0 pb-0 hover:bg-transparent': isOpen,
             'cursor-auto': !children,
           },
         )}

frontend/src/components/common/AccordionList/AccordionListItem.tsx

@@ -19,24 +19,25 @@ export const AccordionListItem = ({
 
   return (
     <div className="border-b border-b-navy-200 px-2 py-4">
-      <Tooltip tooltipText={noContentTooltipText}>
-        <button
-          className={generateClassNames('flex w-full items-center justify-between border', {
-            'cursor-pointer': children,
-          })}
-          onClick={handleClick}
-          disabled={disableExpand}
-        >
-          <Typography variant="body-m/medium" className="text-left text-navy-600">
-            {title}
-          </Typography>
+      <button
+        className={generateClassNames('flex w-full items-center justify-between', {
+          'cursor-pointer': children,
+        })}
+        onClick={handleClick}
+        disabled={disableExpand}
+      >
+        <Typography variant="body-m/medium" className="text-left text-navy-600">
+          {title}
+        </Typography>
+        <Tooltip tooltipText={noContentTooltipText}>
           <div
             className={`flex min-h-10 min-w-10 items-center justify-center ${disableExpand ? 'text-navy-300' : 'text-navy-500'}`}
           >
             <ChevronRightIcon className={generateClassNames('rotate-90', { '-rotate-90': isOpen })} />
           </div>
-        </button>
-      </Tooltip>
+        </Tooltip>
+      </button>
+
       {children ? (
         <div className={`font-normal text-navy-600 duration-300 ${isOpen ? 'mt-4 h-auto text-sm' : 'h-0 text-[0px]'}`}>
           {children}

frontend/src/components/common/PageTitle/PageTitle.interface.ts

@@ -0,0 +1,3 @@
+export interface PageTitleProps {
+  title: string;
+}

frontend/src/components/common/PageTitle/PageTitle.tsx

@@ -0,0 +1,10 @@
+import { Typography } from '@app/components/common/Typography';
+import { PageTitleProps } from './PageTitle.interface';
+
+export const PageTitle: React.FC<PageTitleProps> = ({ title }) => {
+  return (
+    <Typography className="mb-10" variant="body-l/semibold" as="h1">
+      {title}
+    </Typography>
+  );
+};

frontend/src/components/common/PageTitle/index.ts

@@ -0,0 +1 @@
+export { PageTitle } from './PageTitle';

frontend/src/components/common/Tabs/Tabs.interface.ts

@@ -0,0 +1,9 @@
+export interface TabsProps {
+  tabs: {
+    key: string;
+    label: string;
+    href: string;
+  }[];
+  currentTab: string;
+  onTabChange: (tab: string) => void;
+}

frontend/src/components/common/Tabs/Tabs.tsx

@@ -0,0 +1,47 @@
+import { FC } from 'react';
+import { TabsProps } from './Tabs.interface';
+import { generateClassNames } from '@app/utils';
+
+export const Tabs: FC<TabsProps> = ({ tabs, currentTab, onTabChange }) => {
+  return (
+    <div>
+      <div className="sm:hidden">
+        <label htmlFor="tabs" className="sr-only">
+          Select a tab
+        </label>
+        <select
+          id="tabs"
+          name="tabs"
+          onChange={(e) => onTabChange(e.target.value)}
+          defaultValue={tabs.find((tab) => tab.key === currentTab)?.label}
+          className="block w-full rounded-md border-navy-300 py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
+        >
+          {tabs.map((tab) => (
+            <option key={tab.key}>{tab.label}</option>
+          ))}
+        </select>
+      </div>
+      <div className="hidden sm:block">
+        <div className="border-b border-navy-200">
+          <nav aria-label="Tabs" className="flex justify-center space-x-8">
+            {tabs.map((tab) => (
+              <a
+                key={tab.key}
+                href={tab.href}
+                aria-current={tab.key === currentTab ? 'page' : undefined}
+                className={generateClassNames(
+                  tab.key === currentTab
+                    ? 'border-blue-800 text-blue-800'
+                    : 'border-transparent text-navy-500 hover:border-navy-300 hover:text-navy-700',
+                  'whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium',
+                )}
+              >
+                {tab.label}
+              </a>
+            ))}
+          </nav>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/components/common/Tabs/index.ts

@@ -0,0 +1 @@
+export { Tabs } from './Tabs';

frontend/src/components/common/Tooltip/Tooltip.tsx

@@ -7,7 +7,7 @@ export const TooltipPopover: FC<PropsWithChildren<TooltipProps>> = ({ tooltipTex
   const [open, setOpen] = useState(false);
 
   return (
-    <Popover className="relative flex flex-1">
+    <Popover className="relative">
       <PopoverButton
         onMouseEnter={() => setOpen(true)}
         onMouseLeave={() => setOpen(false)}