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/display/chip/components/EntityChip.tsx
+++ b/front/src/modules/ui/display/chip/components/EntityChip.tsx
@ -0,0 +1,76 @@
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@emotion/react';
+
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { Avatar, AvatarType } from '@/users/components/Avatar';
+import { isNonEmptyString } from '~/utils/isNonEmptyString';
+
+import { Chip, ChipVariant } from './Chip';
+
+type EntityChipProps = {
+  linkToEntity?: string;
+  entityId: string;
+  name: string;
+  pictureUrl?: string;
+  avatarType?: AvatarType;
+  variant?: EntityChipVariant;
+  LeftIcon?: IconComponent;
+};
+
+export enum EntityChipVariant {
+  Regular = 'regular',
+  Transparent = 'transparent',
+}
+
+export const EntityChip = ({
+  linkToEntity,
+  entityId,
+  name,
+  pictureUrl,
+  avatarType = 'rounded',
+  variant = EntityChipVariant.Regular,
+  LeftIcon,
+}: EntityChipProps) => {
+  const navigate = useNavigate();
+
+  const theme = useTheme();
+
+  const handleLinkClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (linkToEntity) {
+      event.preventDefault();
+      event.stopPropagation();
+      navigate(linkToEntity);
+    }
+  };
+
+  return isNonEmptyString(name) ? (
+    <div onClick={handleLinkClick}>
+      <Chip
+        label={name}
+        variant={
+          linkToEntity
+            ? variant === EntityChipVariant.Regular
+              ? ChipVariant.Highlighted
+              : ChipVariant.Regular
+            : ChipVariant.Transparent
+        }
+        leftComponent={
+          LeftIcon ? (
+            <LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+          ) : (
+            <Avatar
+              avatarUrl={pictureUrl}
+              colorId={entityId}
+              placeholder={name}
+              size="sm"
+              type={avatarType}
+            />
+          )
+        }
+      />
+    </div>
+  ) : (
+    <></>
+  );
+};