Refactor UI folder (#2016)

* Added Overview page * Revised Getting Started page * Minor revision * Edited readme, minor modifications to docs * Removed sweep.yaml, .devcontainer, .ergomake * Moved security.md to .github, added contributing.md * changes as per code review * updated contributing.md * fixed broken links & added missing links in doc, improved structure * fixed link in wsl setup * fixed server link, added https cloning in yarn-setup * removed package-lock.json * added doc card, admonitions * removed underline from nav buttons * refactoring modules/ui * refactoring modules/ui * Change folder case * Fix theme location * Fix case 2 * Fix storybook --------- Co-authored-by: Nimra Ahmed <nimra1408@gmail.com> Co-authored-by: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com>
2023-10-14 00:04:29 +02:00
parent a35ea5e8f9
commit 258685467b
732 changed files with 1106 additions and 1010 deletions
--- a/front/src/modules/ui/navigation/navbar/components/NavItem.tsx
+++ b/front/src/modules/ui/navigation/navbar/components/NavItem.tsx
@ -0,0 +1,166 @@
+import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+
+import { isNavbarOpenedState } from '../../../layout/states/isNavbarOpenedState';
+
+type NavItemProps = {
+  label: string;
+  to?: string;
+  onClick?: () => void;
+  Icon: IconComponent;
+  active?: boolean;
+  danger?: boolean;
+  soon?: boolean;
+  count?: number;
+  keyboard?: string[];
+};
+
+type StyledItemProps = {
+  active?: boolean;
+  danger?: boolean;
+  soon?: boolean;
+};
+
+const StyledItem = styled.button<StyledItemProps>`
+  align-items: center;
+  background: ${(props) =>
+    props.active ? props.theme.background.transparent.light : 'inherit'};
+  border: none;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${(props) => {
+    if (props.active) {
+      return props.theme.font.color.primary;
+    }
+    if (props.danger) {
+      return props.theme.color.red;
+    }
+    if (props.soon) {
+      return props.theme.font.color.light;
+    }
+    return props.theme.font.color.secondary;
+  }};
+  cursor: ${(props) => (props.soon ? 'default' : 'pointer')};
+  display: flex;
+  font-family: 'Inter';
+  font-size: ${({ theme }) => theme.font.size.md};
+  margin-bottom: calc(${({ theme }) => theme.spacing(1)} / 2);
+  padding-bottom: ${({ theme }) => theme.spacing(1)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-top: ${({ theme }) => theme.spacing(1)};
+  pointer-events: ${(props) => (props.soon ? 'none' : 'auto')};
+  :hover {
+    background: ${({ theme }) => theme.background.transparent.light};
+    color: ${(props) =>
+      props.danger ? props.theme.color.red : props.theme.font.color.primary};
+  }
+  :hover .keyboard-shortcuts {
+    visibility: visible;
+  }
+  user-select: none;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    font-size: ${({ theme }) => theme.font.size.lg};
+  }
+`;
+
+const StyledItemLabel = styled.div`
+  display: flex;
+  margin-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledSoonPill = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.background.transparent.light};
+  border-radius: 50px;
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  height: 16px;
+  justify-content: center;
+  margin-left: auto;
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledItemCount = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.color.blue};
+  border-radius: ${({ theme }) => theme.border.radius.rounded};
+  color: ${({ theme }) => theme.grayScale.gray0};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+
+  height: 16px;
+  justify-content: center;
+  margin-left: auto;
+  width: 16px;
+`;
+
+const StyledKeyBoardShortcut = styled.div`
+  align-items: center;
+  border-radius: 4px;
+  color: ${({ theme }) => theme.font.color.light};
+  display: flex;
+  justify-content: center;
+  letter-spacing: 1px;
+  margin-left: auto;
+  visibility: hidden;
+`;
+
+const NavItem = ({
+  label,
+  Icon,
+  to,
+  onClick,
+  active,
+  danger,
+  soon,
+  count,
+  keyboard,
+}: NavItemProps) => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const [, setIsNavbarOpened] = useRecoilState(isNavbarOpenedState);
+
+  const isMobile = useIsMobile();
+
+  const handleItemClick = () => {
+    if (isMobile) {
+      setIsNavbarOpened(false);
+    }
+
+    if (onClick) {
+      onClick();
+    } else if (to) {
+      navigate(to);
+    }
+  };
+
+  return (
+    <StyledItem
+      onClick={handleItemClick}
+      active={active}
+      aria-selected={active}
+      danger={danger}
+      soon={soon}
+    >
+      {Icon && <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />}
+      <StyledItemLabel>{label}</StyledItemLabel>
+      {soon && <StyledSoonPill>Soon</StyledSoonPill>}
+      {!!count && <StyledItemCount>{count}</StyledItemCount>}
+      {keyboard && (
+        <StyledKeyBoardShortcut className="keyboard-shortcuts">
+          {keyboard.map((key) => key)}
+        </StyledKeyBoardShortcut>
+      )}
+    </StyledItem>
+  );
+};
+
+export default NavItem;