refactor: split "ui" into "common" and "svelte-ui"

aliases.d.ts

@@ -0,0 +1,8 @@
+export function aliases(): {
+    '@svelte-ui': string;
+    '@common': string;
+    '@icons': string;
+    '@images': string;
+    '@dashboard': string;
+    '@dashboard-pages': string;
+};

aliases.js

@@ -1,25 +1,15 @@
 module.exports.aliases = () => {
   const root = `${process.cwd()}/../../`
 
-  const uiRoot = `${root}/packages/ui`
+  const svelteUiRoot = `${root}/packages/svelte-ui`
   const commonRoot = `${root}/packages/common`
   const dashboardRoot = `${root}/apps/dashboard`
 
   return {
-    '@components': `${uiRoot}/src/components`,
-    '@styles': `${uiRoot}/src/styles.ts`,
-    '@utils': `${uiRoot}/src/utils`,
-    '@directives': `${uiRoot}/src/directives`,
-    '@api': `${uiRoot}/src/api`,
+    '@svelte-ui': `${svelteUiRoot}/src/lib`,
     '@common': `${commonRoot}/src`,
-    '@constants': `${uiRoot}/src/constants`,
-    '@stores': `${uiRoot}/src/stores`,
-    '@icons': `${uiRoot}/static/icons`,
-    '@images': `${uiRoot}/static/images`,
-    '@fonts': `${uiRoot}/src/fonts.css`,
-    '@networks': `${uiRoot}/src/network`,
-    '@featureFlags': `${uiRoot}/src/feature-flags`,
-
+    '@icons': `${commonRoot}/src/static/icons`,
+    '@images': `${commonRoot}/src/static/images`,
     '@dashboard': `${dashboardRoot}/src`,
     '@dashboard-pages': `${dashboardRoot}/src/pages`
   }

apps/console/package.json

@@ -81,8 +81,8 @@
     "ts-node": "^10.9.1",
     "tslib": "^2.3.1",
     "typescript": "^5.1.6",
-    "vite": "^5.0.10",
-    "vitest": "^0.32.0",
+    "vite": "^5.0.11",
+    "vitest": "^1.2.0",
     "vitest-mock-extended": "^1.1.3"
   },
   "type": "module",

apps/console/src/hooks.server.ts

@@ -1,5 +1,5 @@
 import type { Handle } from '@sveltejs/kit'
-import { CURRENT_NETWORK } from '@networks'
+import { CURRENT_NETWORK } from './network'
 
 const json = {
   dApps: [

apps/console/src/lib/OwnerRole.svelte

@@ -2,14 +2,14 @@
   import { derived, writable } from 'svelte/store'
   import Select from '$lib/select/Select.svelte'
   import Label from '$lib/Label.svelte'
-  import { accounts } from '@stores'
+  import { accounts } from '@svelte-ui/stores'
   import {
     getAccountData,
     type FungibleResource,
     type NonFungibleResource,
     type TransformedNonFungible
-  } from '@api/_deprecated/utils/entities/resource'
-  import { shortenAddress } from '@utils'
+  } from '@common/api/_deprecated/utils/entities/resource'
+  import { shortenAddress } from '@common/utils/formatting'
   import type { AccessRule } from '../helpers/simple-access-rule-builder'
   import { goto } from '$app/navigation'
   import { createEventDispatcher } from 'svelte'

apps/console/src/lib/SendToWalletButton.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import ExternalLink from '@icons/external.svg'
-  import IconNew from '@components/_base/icon/IconNew.svelte'
-  import Button from '@components/_base/button/ButtonNew.svelte'
-  import LoadingSpinner from '@components/_base/button/loading-spinner/LoadingSpinner.svelte'
+  import IconNew from '@svelte-ui/components/_base/icon/IconNew.svelte'
+  import Button from '@svelte-ui/components/_base/button/ButtonNew.svelte'
+  import LoadingSpinner from '@svelte-ui/components/_base/button/loading-spinner/LoadingSpinner.svelte'
 
   export let disabled = false
   export let loading = false

apps/console/src/lib/form/Form.svelte

@@ -51,9 +51,9 @@
   import Input from '../input/Input.svelte'
   import Textarea from '../Textarea.svelte'
   import Label from '../Label.svelte'
-  import type { ZodSchema, z } from '@common/zod'
+  import type { ZodSchema, z } from '@common/utils/zod'
   import { writable } from 'svelte/store'
-  import Checkbox from '@components/_base/checkbox/Checkbox.svelte'
+  import Checkbox from '@svelte-ui/components/_base/checkbox/Checkbox.svelte'
 
   export let items: FormItem[] = []
   export let state = writable<Record<string, string>>({})

apps/console/src/lib/input/Input.stories.svelte

@@ -2,7 +2,7 @@
   import { Meta, Story } from '@storybook/addon-svelte-csf'
   import Input from './Input.svelte'
   import Label from '../Label.svelte'
-  import Checkbox from '@components/_base/checkbox/Checkbox.svelte'
+  import Checkbox from '@svelte-ui/components/_base/checkbox/Checkbox.svelte'
 
   let value = ''
 </script>

packages/ui/src/network.ts → apps/console/src/network.ts

@@ -1,5 +1,5 @@
 import { PUBLIC_NETWORK_NAME } from '$env/static/public'
-import { Network, NETWORK_CONFIG } from '@constants'
+import { Network, NETWORK_CONFIG } from '@common/utils/constants'
 
 export const CURRENT_NETWORK =
   NETWORK_CONFIG[PUBLIC_NETWORK_NAME as (typeof Network)[keyof typeof Network]]!

apps/console/src/pages/navbar-pages/NavbarPage.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import Box from '@components/_base/box/Box.svelte'
-  import Text from '@components/_base/text/Text.svelte'
-  import { accounts, connected } from '@stores'
-  import { accountLabel } from '@utils'
+  import Box from '@svelte-ui/components/_base/box/Box.svelte'
+  import Text from '@svelte-ui/components/_base/text/Text.svelte'
+  import { accounts, connected } from '@svelte-ui/stores'
+  import { accountLabel } from '@common/utils/formatting'
 
   export let title: string
 

apps/console/src/pages/navbar-pages/create-token/CreateToken.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-  import { z } from '@common/zod'
-  import { derived, writable, type Writable } from 'svelte/store'
+  import { z } from '@common/utils/zod'
+  import { derived, writable } from 'svelte/store'
   import Form, { type FormItem } from '$lib/form/Form.svelte'
   import OwnerRole from '$lib/OwnerRole.svelte'
   import type {
     OwnerAccessRuleUpdatable,
     AccessRule
   } from '../../../helpers/simple-access-rule-builder'
-  import AccountPicker from '@components/_base/picker/account-picker/AccountPicker.svelte'
-  import type { Account as AccountType } from '@stores'
+  import AccountPicker from '@svelte-ui/components/_base/picker/account-picker/AccountPicker.svelte'
+  import type { Account as AccountType } from '@svelte-ui/stores'
   import { createFungibleTokenManifest } from '../../../helpers/create-fungible-token-manifest'
-  import { dAppToolkit } from '@stores'
+  import { dAppToolkit } from '@svelte-ui/stores'
   import {
     MetadataType,
     stringArrayMetadata,
@@ -19,7 +19,7 @@
   import Nft, { type NftData } from './Nft.svelte'
   import { createNonFungibleTokenManifest } from '../../../helpers/create-non-fungible-token-manifest'
   import { goto } from '$app/navigation'
-  import { getTransactionDetails } from '@api/_deprecated/gateway'
+  import { getTransactionDetails } from '@common/api/_deprecated/gateway'
   import { onMount } from 'svelte'
   import SendToWalletButton from '$lib/SendToWalletButton.svelte'
 

apps/console/src/pages/navbar-pages/create-token/Success.svelte

@@ -2,8 +2,8 @@
   import {
     TransactionStatus,
     RadixNetworkConfigById
-  } from '@common/gateway-sdk'
-  import { CURRENT_NETWORK } from '@networks'
+  } from '@common/utils/gateway-sdk'
+  import { CURRENT_NETWORK } from '../../../network'
 
   export let txID: string
   export let txStatus: TransactionStatus

apps/console/src/pages/navbar-pages/dapp-definition/DappDefinition.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-  import Button from '@components/_base/button/ButtonNew.svelte'
+  import Button from '@svelte-ui/components/_base/button/ButtonNew.svelte'
   import { writable } from 'svelte/store'
-  import type { Account } from '@stores'
-  import { query } from '@api/query'
+  import type { Account } from '@svelte-ui/stores'
+  import { query } from '@common/api/query'
   import {
     getFormattedAccounts,
     type FormattedAccount,
     getTxManifest
   } from './side-effects'
-  import Text from '@components/_base/text/Text.svelte'
-  import StackList from '@components/stack-list/StackList.svelte'
-  import Icon from '@components/_base/icon/Icon.svelte'
-  import LoadingSpinner from '@components/_base/button/loading-spinner/LoadingSpinner.svelte'
+  import Text from '@svelte-ui/components/_base/text/Text.svelte'
+  import StackList from '@svelte-ui/components/stack-list/StackList.svelte'
+  import Icon from '@svelte-ui/components/_base/icon/Icon.svelte'
+  import LoadingSpinner from '@svelte-ui/components/_base/button/loading-spinner/LoadingSpinner.svelte'
   import TrashIcon from '@icons/trash.svg'
-  import Checkbox from '@components/_base/checkbox/Checkbox.svelte'
-  import AccountPicker from '@components/_base/picker/account-picker/AccountPicker.svelte'
-  import type { Account as AccountType } from '@stores'
+  import Checkbox from '@svelte-ui/components/_base/checkbox/Checkbox.svelte'
+  import AccountPicker from '@svelte-ui/components/_base/picker/account-picker/AccountPicker.svelte'
+  import type { Account as AccountType } from '@svelte-ui/stores'
 
   export let accounts: Account[]
 

apps/console/src/pages/navbar-pages/dapp-definition/side-effects.test.ts

@@ -1,4 +1,4 @@
-import { RadixEngineToolkit } from '@common/ret'
+import { RadixEngineToolkit } from '@common/utils/ret'
 import { getTxManifest } from './side-effects'
 
 describe('dApp definition TX manifest', () => {

apps/console/src/pages/navbar-pages/dapp-definition/side-effects.ts

@@ -1,12 +1,12 @@
 import {
   getAccountData,
   type DecoratedAccount
-} from '@api/_deprecated/utils/entities/resource'
-import type { Account } from '@stores'
+} from '@common/api/_deprecated/utils/entities/resource'
+import type { Account } from '@svelte-ui/stores'
 import {
   getStringMetadata,
   getVectorMetadata
-} from '@api/_deprecated/utils/metadata'
+} from '@common/api/_deprecated/utils/metadata'
 
 export type FormattedAccount = Awaited<
   ReturnType<typeof getFormattedAccounts>

apps/console/src/pages/navbar-pages/deploy-package/DeployPackage.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
   import { Buffer } from 'buffer'
-  import FileUpload from '@components/file-upload/FileUpload.svelte'
+  import FileUpload from '@svelte-ui/components/file-upload/FileUpload.svelte'
   import { derived, writable } from 'svelte/store'
   import Select from '$lib/select/Select.svelte'
   import Label from '$lib/Label.svelte'
-  import { accounts, dAppToolkit } from '@stores'
+  import { accounts, dAppToolkit } from '@svelte-ui/stores'
   import {
     getAccountData,
     type FungibleResource,
     type NonFungibleResource,
     type TransformedNonFungible
-  } from '@api/_deprecated/utils/entities/resource'
-  import { shortenAddress, typedError } from '@utils'
+  } from '@common/api/_deprecated/utils/entities/resource'
+  import { shortenAddress } from '@common/utils/formatting'
+  import { typedError } from '@common/utils/error'
   import { getDeployPackageManifest, sborDecodeSchema } from './side-effects'
   import { ResultAsync } from 'neverthrow'
-  import { getTransactionDetails as getTransactionDetailsFn } from '@api/_deprecated/gateway'
+  import { getTransactionDetails as getTransactionDetailsFn } from '@common/api/_deprecated/gateway'
   import { goto } from '$app/navigation'
   import type {
     AccessRule,

apps/console/src/pages/navbar-pages/deploy-package/Success.svelte

@@ -2,8 +2,8 @@
   import {
     TransactionStatus,
     RadixNetworkConfigById
-  } from '@common/gateway-sdk'
-  import { CURRENT_NETWORK } from '@networks'
+  } from '@common/utils/gateway-sdk'
+  import { CURRENT_NETWORK } from '../../../network'
 
   export let txID: string
   export let txStatus: TransactionStatus

apps/console/src/pages/navbar-pages/deploy-package/side-effects.test.ts

@@ -1,11 +1,11 @@
 import {
   ManifestSborStringRepresentation,
   RadixEngineToolkit
-} from '@common/ret'
+} from '@common/utils/ret'
 import { getDeployPackageManifest } from './side-effects'
 import { readFileSync } from 'fs'
 import { join } from 'path'
-import { RadixNetwork } from '@common/gateway-sdk'
+import { RadixNetwork } from '@common/utils/gateway-sdk'
 
 describe('Deploy Package Transaction Manifests', () => {
   const NETWORK_ID = RadixNetwork.RCnetV3

apps/console/src/pages/navbar-pages/deploy-package/side-effects.ts

@@ -1,6 +1,5 @@
-import { hash } from '@utils'
-import { http } from '@common/http'
-import { createLogger } from '@radixdlt/radix-dapp-toolkit'
+import { hash } from '@common/utils/formatting'
+import { http } from '@common/utils/http'
 import {
   accessRuleToManifestSyntax,
   type AccessRule,

apps/console/src/pages/navbar-pages/send-tokens/SendTokens.svelte

@@ -10,21 +10,20 @@
 
 <script lang="ts">
   import Label from '$lib/Label.svelte'
-  import Box from '@components/_base/box/Box.svelte'
+  import Box from '@svelte-ui/components/_base/box/Box.svelte'
   import Input from '$lib/input/Input.svelte'
   import Select from '$lib/select/Select.svelte'
   import { goto } from '$app/navigation'
-  import SendTxButton from '@components/send-tx-button/SendTxButton.svelte'
-  import AccountPicker from '@components/_base/picker/account-picker/AccountPicker.svelte'
-  import type { Account } from '@stores'
-  import { shortenAddress } from '@utils'
+  import SendTxButton from '@svelte-ui/components/send-tx-button/SendTxButton.svelte'
+  import AccountPicker from '@svelte-ui/components/_base/picker/account-picker/AccountPicker.svelte'
+  import type { Account } from '@svelte-ui/stores'
+  import { shortenAddress } from '@common/utils/formatting'
   import { createBadgeProof } from '../dapp-definition/side-effects'
-  import { address } from '@radixdlt/radix-engine-toolkit'
   import {
     getAccountData,
     type Resources,
     type TransformedNonFungible
-  } from '@api/_deprecated/utils/entities/resource'
+  } from '@common/api/_deprecated/utils/entities/resource'
 
   let resources: Promise<Resources[number]> = new Promise((resolve) => {})
 

apps/console/src/pages/navbar-pages/send-tokens/Success.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import InfoBox from '@components/info-box/InfoBox.svelte'
-  import Row from '@components/info-box/Row.svelte'
-  import Success from '@components/success/Success.svelte'
-  import Text from '@components/_base/text/Text.svelte'
-  import { TransactionStatus } from '@common/gateway-sdk'
+  import InfoBox from '@svelte-ui/components/info-box/InfoBox.svelte'
+  import Row from '@svelte-ui/components/info-box/Row.svelte'
+  import Success from '@svelte-ui/components/success/Success.svelte'
+  import Text from '@svelte-ui/components/_base/text/Text.svelte'
+  import { TransactionStatus } from '@common/utils/gateway-sdk'
 
   export let txID: string
   export let txStatus: TransactionStatus

apps/console/src/pages/navbar-pages/send-tokens/manifests.test.ts

@@ -1,4 +1,4 @@
-import { RadixEngineToolkit } from '@common/ret'
+import { RadixEngineToolkit } from '@common/utils/ret'
 import { getSendNFTManifest, getSendTokenManifest } from './manifests'
 
 describe('send tokens manifests', () => {

apps/console/src/pages/navbar-pages/send-tokens/token-type/Fungible.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import { goto } from '$app/navigation'
-  import SkeletonLoader from '@components/_base/skeleton-loader/SkeletonLoader.svelte'
-  import { query } from '@api/query'
+  import SkeletonLoader from '@svelte-ui/components/_base/skeleton-loader/SkeletonLoader.svelte'
+  import { query } from '@common/api/query'
   import Input from '$lib/input/Input.svelte'
   import Select from '$lib/select/Select.svelte'
-  import Text from '@components/_base/text/Text.svelte'
+  import Text from '@svelte-ui/components/_base/text/Text.svelte'
   import { getSendTokenManifest } from '../manifests'
   import Label from '$lib/Label.svelte'
-  import { formatTokenValue, shortenAddress } from '@utils'
-  import type { FungibleResource } from '@api/_deprecated/utils/entities/resource'
+  import { formatTokenValue, shortenAddress } from '@common/utils/formatting'
+  import type { FungibleResource } from '@common/api/_deprecated/utils/entities/resource'
 
   export let resources: Promise<FungibleResource[]>
   export let selectedFromAccount: string = ''

apps/console/src/pages/navbar-pages/send-tokens/token-type/NonFungible.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import SkeletonLoader from '@components/_base/skeleton-loader/SkeletonLoader.svelte'
-  import type { Resources } from '@api/_deprecated/utils/entities/resource'
-  import CheckedList from '@components/_base/checked-list/CheckedList.svelte'
-  import Text from '@components/_base/text/Text.svelte'
+  import SkeletonLoader from '@svelte-ui/components/_base/skeleton-loader/SkeletonLoader.svelte'
+  import type { Resources } from '@common/api/_deprecated/utils/entities/resource'
+  import CheckedList from '@svelte-ui/components/_base/checked-list/CheckedList.svelte'
+  import Text from '@svelte-ui/components/_base/text/Text.svelte'
   import { getSendNFTManifest } from '../manifests'
   import Label from '$lib/Label.svelte'
-  import { RadixNetworkConfigById } from '@common/gateway-sdk'
-  import { CURRENT_NETWORK } from '@networks'
-  import type { NonFungible } from '@api/_deprecated/utils/nfts'
+  import { RadixNetworkConfigById } from '@common/utils/gateway-sdk'
+  import { CURRENT_NETWORK } from '../../../../network'
+  import type { NonFungible } from '@common/api/_deprecated/utils/nfts'
 
   export let resources: Promise<Resources[number]['nonFungible']>
   export let selectedFromAccount: string = ''

apps/console/src/pages/navbar-pages/transaction-manifest/Success.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import InfoBox from '@components/info-box/InfoBox.svelte'
-  import Row from '@components/info-box/Row.svelte'
-  import Success from '@components/success/Success.svelte'
-  import Text from '@components/_base/text/Text.svelte'
-  import { RadixNetworkConfigById } from '@common/gateway-sdk'
-  import { CURRENT_NETWORK } from '@networks'
+  import InfoBox from '@svelte-ui/components/info-box/InfoBox.svelte'
+  import Row from '@svelte-ui/components/info-box/Row.svelte'
+  import Success from '@svelte-ui/components/success/Success.svelte'
+  import Text from '@svelte-ui/components/_base/text/Text.svelte'
+  import { RadixNetworkConfigById } from '@common/utils/gateway-sdk'
+  import { CURRENT_NETWORK } from '../../../network'
 
   export let txID: string
   const dashboardUrl = RadixNetworkConfigById[CURRENT_NETWORK.id].dashboardUrl

apps/console/src/pages/navbar-pages/transaction-manifest/TransactionManifest.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation'
-  import SendTxButton from '@components/send-tx-button/SendTxButton.svelte'
+  import SendTxButton from '@svelte-ui/components/send-tx-button/SendTxButton.svelte'
 
   let component: HTMLTextAreaElement
   const adjustHeight = () => {