From bde7b55874f0d9b798d9df8bc1e2a6b5ec9bef7d Mon Sep 17 00:00:00 2001
From: razzle <harry@razzle.cloud>
Date: Wed, 11 Jan 2023 20:33:47 -0600
Subject: [PATCH] Cleanup UI imports (#1189)

## Description

Cleans up Svelte imports of internal (from `$lib/components`). I find
this to be easier to read, and can take up fewer space.
---
 src/ui/lib/components/index.ts                | 30 +++++++++++++++++++
 src/ui/routes/+layout.svelte                  |  2 +-
 src/ui/routes/+page.svelte                    |  3 +-
 src/ui/routes/auth/+page.svelte               |  2 +-
 .../routes/initialize/configure/+page.svelte  | 11 +++----
 .../routes/initialize/finished/+page.svelte   |  2 +-
 src/ui/routes/initialize/review/+page.svelte  | 10 ++++---
 src/ui/routes/packages/+page.svelte           |  5 +---
 8 files changed, 47 insertions(+), 18 deletions(-)
 create mode 100644 src/ui/lib/components/index.ts

diff --git a/src/ui/lib/components/index.ts b/src/ui/lib/components/index.ts
new file mode 100644
index 0000000000..74d2b2f5f3
--- /dev/null
+++ b/src/ui/lib/components/index.ts
@@ -0,0 +1,30 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2021-Present The Zarf Authors
+
+import AccordionGroup from './accordion-group.svelte';
+import Container from './container.svelte';
+import Divider from './divider.svelte';
+import Header from './header.svelte';
+import Hero from './hero.svelte';
+import Icon from './icon.svelte';
+import Modal from './modal.svelte';
+import PackageComponentAccordion from './package-component-accordion.svelte';
+import PackageDetailsCard from './package-details-card.svelte';
+import Spinner from './spinner.svelte';
+import ThemeToggle from './theme-toggle.svelte';
+import YamlCode from './yaml-code.svelte';
+
+export {
+	AccordionGroup,
+	Container,
+	Divider,
+	Header,
+	Hero,
+	Icon,
+	Modal,
+	PackageComponentAccordion,
+	PackageDetailsCard,
+	Spinner,
+	ThemeToggle,
+	YamlCode
+};
diff --git a/src/ui/routes/+layout.svelte b/src/ui/routes/+layout.svelte
index 675a1ae826..82e19d5c5f 100644
--- a/src/ui/routes/+layout.svelte
+++ b/src/ui/routes/+layout.svelte
@@ -8,7 +8,7 @@
 	import '@fontsource/roboto';
 	import { Cluster } from '$lib/api';
 	import { clusterStore } from '$lib/store';
-	import Header from '$lib/components/header.svelte';
+	import { Header } from '$lib/components';
 	import 'material-symbols/';
 	import { Theme } from '@ui';
 	import { ZarfPalettes } from '$lib/palette';
diff --git a/src/ui/routes/+page.svelte b/src/ui/routes/+page.svelte
index 4c2806c2e2..4f2ca66059 100644
--- a/src/ui/routes/+page.svelte
+++ b/src/ui/routes/+page.svelte
@@ -6,8 +6,7 @@
 	import { goto } from '$app/navigation';
 	import { Button, Typography } from '@ui';
 	import { clusterStore } from '$lib/store';
-	import Hero from '$lib/components/hero.svelte';
-	import Spinner from '$lib/components/spinner.svelte';
+	import { Hero, Spinner } from '$lib/components';
 	import bigZarf from '@images/zarf-bubbles-right.png';
 </script>
 
diff --git a/src/ui/routes/auth/+page.svelte b/src/ui/routes/auth/+page.svelte
index cabaed7038..682e89318d 100644
--- a/src/ui/routes/auth/+page.svelte
+++ b/src/ui/routes/auth/+page.svelte
@@ -6,7 +6,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { Auth } from '$lib/api';
-	import Hero from '$lib/components/hero.svelte';
+	import { Hero } from '$lib/components';
 	import sadDay from '@images/sadness.png';
 
 	let authFailure = false;
diff --git a/src/ui/routes/initialize/configure/+page.svelte b/src/ui/routes/initialize/configure/+page.svelte
index 528e5370c7..1bad59e13c 100644
--- a/src/ui/routes/initialize/configure/+page.svelte
+++ b/src/ui/routes/initialize/configure/+page.svelte
@@ -3,11 +3,12 @@
 // SPDX-FileCopyrightText: 2021-Present The Zarf Authors
  -->
 <script lang="ts">
-	import AccordionGroup from '../../../lib/components/accordion-group.svelte';
-
-	import Icon from '$lib/components/icon.svelte';
-	import PackageDetails from '$lib/components/package-details-card.svelte';
-	import PackageComponent from '$lib/components/package-component-accordion.svelte';
+	import {
+		AccordionGroup,
+		Icon,
+		PackageDetailsCard as PackageDetails,
+		PackageComponentAccordion as PackageComponent
+	} from '$lib/components';
 	import { pkgStore } from '$lib/store';
 	import { Button, Typography } from '@ui';
 </script>
diff --git a/src/ui/routes/initialize/finished/+page.svelte b/src/ui/routes/initialize/finished/+page.svelte
index 76f9762da1..de013fa99c 100644
--- a/src/ui/routes/initialize/finished/+page.svelte
+++ b/src/ui/routes/initialize/finished/+page.svelte
@@ -3,7 +3,7 @@
 // SPDX-FileCopyrightText: 2021-Present The Zarf Authors
  -->
 <script lang="ts">
-	import Modal from '$lib/components/modal.svelte';
+	import { Modal } from '$lib/components';
 	import zarfLogo from '@images/zarf-bubbles-right.png';
 </script>
 
diff --git a/src/ui/routes/initialize/review/+page.svelte b/src/ui/routes/initialize/review/+page.svelte
index e5c0f7d5d7..ea29653a01 100644
--- a/src/ui/routes/initialize/review/+page.svelte
+++ b/src/ui/routes/initialize/review/+page.svelte
@@ -3,10 +3,12 @@
 // SPDX-FileCopyrightText: 2021-Present The Zarf Authors
  -->
 <script lang="ts">
-	import Icon from '$lib/components/icon.svelte';
-	import PackageDetails from '$lib/components/package-details-card.svelte';
-	import PackageComponent from '$lib/components/package-component-accordion.svelte';
-	import AccordionGroup from '$lib/components/accordion-group.svelte';
+	import {
+		Icon,
+		PackageDetailsCard as PackageDetails,
+		PackageComponentAccordion as PackageComponent,
+		AccordionGroup
+	} from '$lib/components';
 
 	import { pkgComponentDeployStore, pkgStore } from '$lib/store';
 	import { Button, Typography } from '@ui';
diff --git a/src/ui/routes/packages/+page.svelte b/src/ui/routes/packages/+page.svelte
index 75c8d7d6f6..b135aeb984 100644
--- a/src/ui/routes/packages/+page.svelte
+++ b/src/ui/routes/packages/+page.svelte
@@ -4,11 +4,8 @@
  -->
 <script>
 	import { Packages } from '$lib/api';
-	import Hero from '$lib/components/hero.svelte';
-	import PackageDetails from '$lib/components/package-details-card.svelte';
-	import Spinner from '$lib/components/spinner.svelte';
+	import { Hero, PackageDetailsCard as PackageDetails, Spinner, Icon } from '$lib/components';
 	import { Button, Typography } from '@ui';
-	import Icon from '$lib/components/icon.svelte';
 </script>
 
 {#await Packages.getDeployedPackages()}