Reorganize frontend and install Craco to alias modules (#190)

front/src/modules/ui/layout/navbar/NavItem.tsx

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  label: string;
+  to: string;
+  active?: boolean;
+  icon: ReactNode;
+};
+
+type StyledItemProps = {
+  active?: boolean;
+};
+
+const StyledItem = styled.button<StyledItemProps>`
+  display: flex;
+  align-items: center;
+  border: none;
+  font-size: ${(props) => props.theme.fontSizeMedium};
+  cursor: pointer;
+  user-select: none;
+  background: ${(props) => (props.active ? 'rgba(0, 0, 0, 0.04)' : 'inherit')};
+  padding-top: ${(props) => props.theme.spacing(1)};
+  padding-bottom: ${(props) => props.theme.spacing(1)};
+  padding-left: ${(props) => props.theme.spacing(1)};
+  font-family: 'Inter';
+  color: ${(props) =>
+    props.active ? props.theme.text100 : props.theme.text60};
+  border-radius: 4px;
+  :hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: ${(props) => props.theme.text100};
+  }
+  margin-bottom: calc(${(props) => props.theme.spacing(1)} / 2);
+`;
+
+const StyledItemLabel = styled.div`
+  display: flex;
+  margin-left: ${(props) => props.theme.spacing(2)};
+`;
+
+function NavItem({ label, icon, to, active }: OwnProps) {
+  const navigate = useNavigate();
+
+  return (
+    <StyledItem
+      onClick={() => {
+        navigate(to);
+      }}
+      active={active}
+      aria-selected={active}
+    >
+      {icon}
+      <StyledItemLabel>{label}</StyledItemLabel>
+    </StyledItem>
+  );
+}
+
+export default NavItem;

front/src/modules/ui/layout/navbar/NavTitle.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  label: string;
+};
+
+const StyledTitle = styled.div`
+  display: flex;
+  text-transform: uppercase;
+  color: ${(props) => props.theme.text30};
+  font-size: ${(props) => props.theme.fontSizeExtraSmall};
+  font-weight: 600;
+  padding-top: ${(props) => props.theme.spacing(1)};
+  padding-bottom: ${(props) => props.theme.spacing(2)};
+  padding-left: ${(props) => props.theme.spacing(1)};
+`;
+
+function NavTitle({ label }: OwnProps) {
+  return <StyledTitle>{label}</StyledTitle>;
+}
+
+export default NavTitle;

front/src/modules/ui/layout/navbar/Navbar.tsx

@@ -0,0 +1,64 @@
+import { TbBuilding, TbUser } from 'react-icons/tb';
+import { useMatch, useResolvedPath } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { User } from '@/users/interfaces/user.interface';
+import { Workspace } from '@/workspaces/interfaces/workspace.interface';
+
+import NavItem from './NavItem';
+import NavTitle from './NavTitle';
+import WorkspaceContainer from './WorkspaceContainer';
+
+const NavbarContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 220px;
+  padding: ${(props) => props.theme.spacing(2)};
+  flex-shrink: 0;
+`;
+
+const NavItemsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 40px;
+`;
+
+type OwnProps = {
+  user?: User;
+  workspace?: Workspace;
+};
+
+export function Navbar({ workspace }: OwnProps) {
+  return (
+    <>
+      <NavbarContainer>
+        {workspace && <WorkspaceContainer workspace={workspace} />}
+        <NavItemsContainer>
+          <NavTitle label="Workspace" />
+          <NavItem
+            label="People"
+            to="/people"
+            icon={<TbUser size={16} />}
+            active={
+              !!useMatch({
+                path: useResolvedPath('/people').pathname,
+                end: true,
+              })
+            }
+          />
+          <NavItem
+            label="Companies"
+            to="/companies"
+            icon={<TbBuilding size={16} />}
+            active={
+              !!useMatch({
+                path: useResolvedPath('/companies').pathname,
+                end: true,
+              })
+            }
+          />
+        </NavItemsContainer>
+      </NavbarContainer>
+    </>
+  );
+}

front/src/modules/ui/layout/navbar/WorkspaceContainer.tsx

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+
+import { Workspace } from '@/workspaces/interfaces/workspace.interface';
+
+type OwnProps = {
+  workspace: Workspace;
+};
+
+const StyledContainer = styled.button`
+  display: inline-flex;
+  height: 34px;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  border: 0;
+  background: inherit;
+  padding: ${(props) => props.theme.spacing(2)};
+  margin-left: ${(props) => props.theme.spacing(1)};
+  align-self: flex-start;
+`;
+
+type StyledLogoProps = {
+  logo?: string | null;
+};
+
+const StyledLogo = styled.div<StyledLogoProps>`
+  background: url(${(props) => props.logo});
+  background-size: cover;
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+`;
+
+const StyledName = styled.div`
+  margin-left: ${(props) => props.theme.spacing(1)};
+  font-family: 'Inter';
+  font-weight: 500;
+  font-size: ${(props) => props.theme.fontSizeLarge};
+`;
+
+function WorkspaceContainer({ workspace }: OwnProps) {
+  return (
+    <StyledContainer>
+      <StyledLogo logo={workspace.logo}></StyledLogo>
+      <StyledName>{workspace?.displayName}</StyledName>
+    </StyledContainer>
+  );
+}
+
+export default WorkspaceContainer;