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>

front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx

@@ -0,0 +1,43 @@
+import { Fragment } from 'react';
+import { Link } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+type BreadcrumbProps = {
+  className?: string;
+  links: { children: string; href?: string }[];
+};
+
+const StyledWrapper = styled.nav`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.extraLight};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: ${({ theme }) => theme.spacing(6)};
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+`;
+
+const StyledLink = styled(Link)`
+  color: inherit;
+  text-decoration: none;
+`;
+
+const StyledText = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`;
+
+export const Breadcrumb = ({ className, links }: BreadcrumbProps) => (
+  <StyledWrapper className={className}>
+    {links.map((link, index) => (
+      <Fragment key={index}>
+        {link.href ? (
+          <StyledLink to={link.href}>{link.children}</StyledLink>
+        ) : (
+          <StyledText>{link.children}</StyledText>
+        )}
+        {index < links.length - 1 && '/'}
+      </Fragment>
+    ))}
+  </StyledWrapper>
+);

front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+import { Breadcrumb } from '../Breadcrumb';
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: 'UI/Breadcrumb/Breadcrumb',
+  component: Breadcrumb,
+  decorators: [ComponentDecorator, ComponentWithRouterDecorator],
+  args: {
+    links: [
+      { children: 'Objects', href: '/link-1' },
+      { children: 'Companies', href: '/link-2' },
+      { children: 'New' },
+    ],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Default: Story = {};