From c01f8fdabfbb9d6540fbd5c4682ce6ed818867d1 Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Mon, 24 Jun 2024 19:36:08 -0400
Subject: [PATCH] Refactor: `components/shared` (#227)

### TL;DR

This pull request consolidates all shared component exports into a new `index.ts` file within the `components/shared` directory. The purpose is to streamline and centralize the exports of shared components for improved maintainability.

### What changed?

- Created a new `index.ts` file in the `components/shared` directory that exports all shared components.
- Updated import statements to use the new centralized `index.ts` file instead of individual component files.

### How to test?

1. Run the frontend application.
2. Navigate through the application to ensure all shared components render correctly without console errors.

### Why make this change?

The motivation behind this change is to organize exports of shared components in a single file. This enhances code maintainability and simplifies the process of importing shared components across the project.

---
---
 .../frontend/src/components/shared/index.ts   | 27 +++++++++++++++++++
 .../frontend/src/pages/org-slug/index.tsx     |  8 +++---
 .../pages/org-slug/projects/id/Overview.tsx   | 13 ++++-----
 3 files changed, 35 insertions(+), 13 deletions(-)
 create mode 100644 packages/frontend/src/components/shared/index.ts

diff --git a/packages/frontend/src/components/shared/index.ts b/packages/frontend/src/components/shared/index.ts
new file mode 100644
index 00000000..3cd42b00
--- /dev/null
+++ b/packages/frontend/src/components/shared/index.ts
@@ -0,0 +1,27 @@
+export { Avatar } from './Avatar';
+export { Badge } from './Badge';
+export { Button } from './Button';
+export { Calendar } from './Calendar';
+export { Checkbox } from './Checkbox';
+export { DatePicker } from './DatePicker';
+export { DotBorder } from './DotBorder';
+export { Heading } from './Heading';
+export { IconWithFrame } from './IconWithFrame';
+export { InlineNotification } from './InlineNotification';
+export { Input } from './Input';
+export { Modal } from './Modal';
+export { OverflownText } from './OverflownText';
+export { Radio } from './Radio';
+export { SegmentedControls } from './SegmentedControls';
+export { Select } from './Select';
+export { Sidebar } from './Sidebar';
+export { Step } from './Steps';
+export { Switch } from './Switch';
+export { Table } from './Table';
+export { Tabs } from './Tabs';
+export { Tag } from './Tag';
+export { useToast } from './Toast';
+export { Tooltip } from './Tooltip';
+export { UserSelect } from './UserSelect';
+export { VerifyCodeInput } from './VerifyCodeInput';
+export { WavyBorder } from './WavyBorder';
diff --git a/packages/frontend/src/pages/org-slug/index.tsx b/packages/frontend/src/pages/org-slug/index.tsx
index 019cbf6f..9f3147aa 100644
--- a/packages/frontend/src/pages/org-slug/index.tsx
+++ b/packages/frontend/src/pages/org-slug/index.tsx
@@ -1,13 +1,11 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
-import { Project } from 'gql-client';
-import { Button } from 'components/shared/Button';
 
-import { PlusIcon } from 'components/shared/CustomIcon';
 import { ProjectCard } from 'components/projects/ProjectCard';
-import { Heading } from 'components/shared/Heading';
-import { Badge } from 'components/shared/Badge';
+import { Heading, Badge, Button } from 'components/shared';
+import { PlusIcon } from 'components/shared/CustomIcon';
 import { useGQLClient } from 'context/GQLClientContext';
+import { Project } from 'gql-client';
 
 const Projects = () => {
   const client = useGQLClient();
diff --git a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
index 367b348d..895da48b 100644
--- a/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
+++ b/packages/frontend/src/pages/org-slug/projects/id/Overview.tsx
@@ -1,14 +1,11 @@
 import { useEffect, useState } from 'react';
-import { Domain, DomainStatus } from 'gql-client';
 import { Link, useNavigate, useOutletContext } from 'react-router-dom';
 import { RequestError } from 'octokit';
 
-import { useOctokit } from '../../../../context/OctokitContext';
+import { useOctokit } from 'context/OctokitContext';
 import { GitCommitWithBranch, OutletContextType } from '../../../../types';
-import { useGQLClient } from '../../../../context/GQLClientContext';
-import { Button } from 'components/shared/Button';
-import { Heading } from 'components/shared/Heading';
-import { Avatar } from 'components/shared/Avatar';
+import { useGQLClient } from 'context/GQLClientContext';
+import { Button, Heading, Avatar, Tag } from 'components/shared';
 import { getInitials } from 'utils/geInitials';
 import {
   BranchStrokeIcon,
@@ -18,12 +15,12 @@ import {
   GithubStrokeIcon,
   GlobeIcon,
   LinkIcon,
+  CalendarDaysIcon,
 } from 'components/shared/CustomIcon';
-import { Tag } from 'components/shared/Tag';
 import { Activity } from 'components/projects/project/overview/Activity';
 import { OverviewInfo } from 'components/projects/project/overview/OverviewInfo';
-import { CalendarDaysIcon } from 'components/shared/CustomIcon/CalendarDaysIcon';
 import { relativeTimeMs } from 'utils/time';
+import { Domain, DomainStatus } from 'gql-client';
 
 const COMMITS_PER_PAGE = 4;