Merge branch 'develop' into dev-tools/test-data-alias-ownership

.eslintrc.js

@@ -43,7 +43,7 @@ module.exports = {
         '**/dist/',
         '**/.next/',
         '**/.swc/',
-        '**/out/'
+        '**/out/',
     ],
     rules: {
         'no-case-declarations': 'off',
@@ -214,7 +214,7 @@ module.exports = {
                                 name: 'react-router-dom',
                                 importNames: ['Link', 'useNavigate', 'useSearchParams'],
                                 message:
-                                    'Please use `LinkWithQuery`, `useSearchParamsMerged`, and `useNavigateWithQuery` from "~/ui/utils/LinkWithQuery" instead.',
+                                    'Please use `LinkWithQuery`, `useSearchParamsMerged`, and `useNavigateWithQuery` from "~/components/ui/LinkWithQuery" instead.',
                             },
                         ],
                     },

apps/core/src/hooks/useKioskClient.ts

@@ -4,7 +4,7 @@
 
 import { useContext } from 'react';
 
-import { KioskClientContext } from '../components/KioskClientProvider';
+import { KioskClientContext } from '../components';
 
 export function useKioskClient() {
     const kioskClient = useContext(KioskClientContext);

apps/explorer/package.json

@@ -15,9 +15,6 @@
         "lint": "pnpm eslint:check && pnpm prettier:check",
         "lint:fix": "pnpm eslint:fix && pnpm prettier:fix",
         "preview": "vite preview",
-        "storybook": "storybook dev",
-        "build-storybook": "storybook build",
-        "preview-storybook": "pnpm dlx serve ./storybook-static",
         "ampli": "ampli",
         "pull-amplitude": "ampli pull web && node prependLicense.mjs && prettier -w ampli.json src/utils/analytics/ampli/index.ts"
     },
@@ -81,12 +78,6 @@
         "@amplitude/ampli": "^1.31.5",
         "@babel/core": "^7.22.9",
         "@playwright/test": "^1.36.1",
-        "@storybook/addon-a11y": "^7.1.0",
-        "@storybook/addon-essentials": "^7.1.0",
-        "@storybook/addons": "^7.1.0",
-        "@storybook/react": "^7.1.0",
-        "@storybook/react-vite": "^7.1.0",
-        "@storybook/theming": "^7.1.0",
         "@testing-library/dom": "^9.3.1",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^14.0.0",
@@ -102,7 +93,6 @@
         "onchange": "^7.1.0",
         "postcss": "^8.4.31",
         "start-server-and-test": "^2.0.0",
-        "storybook": "^7.1.0",
         "tailwindcss": "^3.3.3",
         "tsconfig-paths": "^4.2.0",
         "typescript": "^5.3.3",

apps/explorer/src/components/AccountCardGraph.tsx

@@ -14,7 +14,7 @@ import { FormattedStatsAmount } from './home-metrics/FormattedStatsAmount';
 import { ErrorBoundary } from './error-boundary/ErrorBoundary';
 import { useGetAddressMetrics } from '~/hooks/useGetAddressMetrics';
 import { useGetAllEpochAddressMetrics } from '~/hooks/useGetAllEpochAddressMetrics';
-import { Card } from '~/ui/Card';
+import { Card } from '~/components/ui';
 
 const GRAPH_DATA_FIELD = 'cumulativeAddresses';
 const GRAPH_DATA_TEXT = 'Total accounts';

apps/explorer/src/components/IotaTokenCard.tsx

@@ -6,8 +6,7 @@ import { COIN_GECKO_IOTA_URL, useIotaCoinData } from '@iota/core';
 import { Iota } from '@iota/icons';
 import { Text } from '@iota/ui';
 
-import { Card } from '~/ui/Card';
-import { ButtonOrLink } from '~/ui/ButtonOrLink';
+import { ButtonOrLink, Card } from '~/components/ui';
 
 export function IotaTokenCard(): JSX.Element {
     const { data } = useIotaCoinData();

apps/explorer/src/components/TransactionsCardGraph.tsx

@@ -11,7 +11,7 @@ import clsx from 'clsx';
 import { AreaGraph } from './AreaGraph';
 import { FormattedStatsAmount } from './home-metrics/FormattedStatsAmount';
 import { ErrorBoundary } from './error-boundary/ErrorBoundary';
-import { Card } from '~/ui/Card';
+import { Card } from '~/components/ui';
 
 interface TooltipContentProps {
     data: {

apps/explorer/src/components/activity/index.tsx → apps/explorer/src/components/activity/Activity.tsx

@@ -3,19 +3,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useFeatureIsOn } from '@growthbook/growthbook-react';
-// import { Filter16 } from '@iota/icons';
 import { Heading } from '@iota/ui';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
 
+import { CheckpointsTable } from '../checkpoints/CheckpointsTable';
 import { EpochsActivityTable } from './EpochsActivityTable';
 import { TransactionsActivityTable } from './TransactionsActivityTable';
-import { CheckpointsTable } from '../checkpoints/CheckpointsTable';
-// import { useNetwork } from '~/context';
-// import { DropdownMenu, DropdownMenuCheckboxItem } from '~/ui/DropdownMenu';
-import { PlayPause } from '~/ui/PlayPause';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/ui/Tabs';
-// import { Network } from '~/utils/api/defaultRpcClient';
+import { PlayPause, Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui';
 
 const VALID_TABS = ['transactions', 'epochs', 'checkpoints'];
 

apps/explorer/src/components/activity/EpochsActivityTable.tsx

@@ -8,12 +8,15 @@ import { Text } from '@iota/ui';
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 
-import { generateTableDataFromEpochsData } from './utils';
-import { Link } from '~/ui/Link';
-import { Pagination, useCursorPagination } from '~/ui/Pagination';
-import { PlaceholderTable } from '~/ui/PlaceholderTable';
-import { TableCard } from '~/ui/TableCard';
-import { numberSuffix } from '~/utils/numberUtil';
+import {
+    Link,
+    Pagination,
+    PlaceholderTable,
+    TableCard,
+    useCursorPagination,
+} from '~/components/ui';
+import { generateTableDataFromEpochsData } from '~/lib/ui';
+import { numberSuffix } from '~/lib/utils';
 
 const DEFAULT_EPOCHS_LIMIT = 20;
 

apps/explorer/src/components/activity/TransactionsActivityTable.tsx

@@ -8,16 +8,19 @@ import { Text } from '@iota/ui';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useRef, useState } from 'react';
 
-import { genTableDataFromTxData } from '../transactions/TxCardUtils';
+import {
+    Link,
+    Pagination,
+    PlaceholderTable,
+    TableCard,
+    useCursorPagination,
+} from '~/components/ui';
 import {
     DEFAULT_TRANSACTIONS_LIMIT,
     useGetTransactionBlocks,
 } from '~/hooks/useGetTransactionBlocks';
-import { Link } from '~/ui/Link';
-import { Pagination, useCursorPagination } from '~/ui/Pagination';
-import { PlaceholderTable } from '~/ui/PlaceholderTable';
-import { TableCard } from '~/ui/TableCard';
-import { numberSuffix } from '~/utils/numberUtil';
+import { numberSuffix } from '~/lib/utils';
+import { genTableDataFromTxData } from '../transactions/TxCardUtils';
 
 interface TransactionsActivityTableProps {
     disablePagination?: boolean;

apps/explorer/src/components/activity/index.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Activity';
+export * from './EpochsActivityTable';
+export * from './TransactionsActivityTable';

apps/explorer/src/components/checkpoints/CheckpointsTable.tsx

@@ -7,13 +7,16 @@ import { ArrowRight12 } from '@iota/icons';
 import { Text } from '@iota/ui';
 import { useMemo, useState } from 'react';
 
+import {
+    Link,
+    Pagination,
+    PlaceholderTable,
+    TableCard,
+    useCursorPagination,
+} from '~/components/ui';
 import { DEFAULT_CHECKPOINTS_LIMIT, useGetCheckpoints } from '~/hooks/useGetCheckpoints';
-import { generateTableDataFromCheckpointsData } from './utils';
-import { Link } from '~/ui/Link';
-import { Pagination, useCursorPagination } from '~/ui/Pagination';
-import { PlaceholderTable } from '~/ui/PlaceholderTable';
-import { TableCard } from '~/ui/TableCard';
-import { numberSuffix } from '~/utils/numberUtil';
+import { generateTableDataFromCheckpointsData } from '~/lib/ui';
+import { numberSuffix } from '~/lib/utils';
 
 interface CheckpointsTableProps {
     disablePagination?: boolean;

apps/explorer/src/components/checkpoints/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './CheckpointsTable';

apps/explorer/src/components/error-boundary/ErrorBoundary.tsx

@@ -5,7 +5,7 @@
 import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
 import { useLocation } from 'react-router-dom';
 
-import { Banner } from '~/ui/Banner';
+import { Banner } from '~/components/ui';
 
 import type { ReactNode } from 'react';
 import type { FallbackProps } from 'react-error-boundary';

apps/explorer/src/components/error-boundary/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './ErrorBoundary';

apps/explorer/src/components/footer/Footer.tsx

@@ -7,7 +7,7 @@ import { Text } from '@iota/ui';
 import { LegalLinks, LegalText } from './Legal';
 import { FooterIcon } from './FooterIcon';
 import { ReactComponent as MystenLabsRed } from '../../assets/mysten_labs_red.svg';
-import { Link } from '~/ui/Link';
+import { Link } from '~/components/ui';
 import { FOOTER_LINKS, SOCIAL_LINKS } from '~/lib/constants';
 import Icon from '../Icon';
 

apps/explorer/src/components/footer/Legal.tsx

@@ -6,7 +6,7 @@ import { useProductAnalyticsConfig } from '@iota/core';
 import { Text } from '@iota/ui';
 
 import { LEGAL_LINKS } from '~/lib/constants';
-import { Link } from '~/ui/Link';
+import { Link } from '~/components/ui';
 
 export function LegalText(): JSX.Element {
     return (

apps/explorer/src/components/footer/index.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Footer';
+export * from './FooterIcon';
+export * from './Legal';

apps/explorer/src/components/gas-breakdown/index.tsx → apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx

@@ -11,12 +11,15 @@ import {
 import { IOTA_TYPE_ARG } from '@iota/iota.js/utils';
 import { Heading, Text } from '@iota/ui';
 
-import { CopyToClipboard } from '~/ui/CopyToClipboard';
-import { DescriptionItem } from '~/ui/DescriptionList';
-import { Divider } from '~/ui/Divider';
-import { AddressLink, ObjectLink } from '~/ui/InternalLink';
-import { CollapsibleCard } from '~/ui/collapsible/CollapsibleCard';
-import { CollapsibleSection } from '~/ui/collapsible/CollapsibleSection';
+import {
+    AddressLink,
+    CollapsibleCard,
+    CollapsibleSection,
+    CopyToClipboard,
+    DescriptionItem,
+    Divider,
+    ObjectLink,
+} from '~/components/ui';
 
 interface GasProps {
     amount?: bigint | number | string;

apps/explorer/src/components/gas-breakdown/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './GasBreakdown';

apps/explorer/src/components/header/Header.tsx

@@ -6,9 +6,9 @@ import { Iota, IotaLogoTxt } from '@iota/icons';
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 
-import NetworkSelect from '../network/Network';
+import { NetworkSelector } from '../network';
 import Search from '../search/Search';
-import { LinkWithQuery } from '~/ui/LinkWithQuery';
+import { LinkWithQuery } from '~/components/ui';
 
 function Header(): JSX.Element {
     const [isScrolled, setIsScrolled] = useState(window.scrollY > 0);
@@ -42,7 +42,7 @@ function Header(): JSX.Element {
                     <div className="flex-1">
                         <Search />
                     </div>
-                    <NetworkSelect />
+                    <NetworkSelector />
                 </div>
             </div>
         </header>

apps/explorer/src/components/header/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Header';

apps/explorer/src/components/home-metrics/CurrentEpoch.tsx

@@ -2,17 +2,15 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { formatDate, formatAmountParts } from '@iota/core';
-import { Text, Heading } from '@iota/ui';
+import { formatAmountParts, formatDate } from '@iota/core';
+import { Heading, Text } from '@iota/ui';
 import { format, isToday, isYesterday } from 'date-fns';
 import { useMemo } from 'react';
 
-import { Checkpoint } from '~/components/home-metrics/Checkpoint';
+import { Checkpoint } from '~/components';
+import { Card, LinkWithQuery, ProgressBar } from '~/components/ui';
+import { ampli } from '~/lib/utils';
 import { useEpochProgress } from '~/pages/epochs/utils';
-import { Card } from '~/ui/Card';
-import { ProgressBar } from '~/ui/ProgressBar';
-import { LinkWithQuery } from '~/ui/LinkWithQuery';
-import { ampli } from '~/utils/analytics/ampli';
 
 export function CurrentEpoch(): JSX.Element {
     const { epoch, progress, label, end, start } = useEpochProgress();

apps/explorer/src/components/home-metrics/FormattedStatsAmount.tsx

@@ -4,7 +4,7 @@
 
 import { formatAmountParts } from '@iota/core';
 
-import { Stats, type StatsProps } from '~/ui/Stats';
+import { Stats, type StatsProps } from '~/components/ui';
 
 interface FormattedStatsAmountProps {
     amount?: string | number | bigint;

apps/explorer/src/components/home-metrics/OnTheNetwork.tsx

@@ -6,10 +6,9 @@ import { CoinFormat, formatBalance } from '@iota/core';
 import { useIotaClientQuery } from '@iota/dapp-kit';
 import { Heading } from '@iota/ui';
 
-import { FormattedStatsAmount, StatsWrapper } from './FormattedStatsAmount';
+import { Card, Divider } from '~/components/ui';
 import { useGetNetworkMetrics } from '~/hooks/useGetNetworkMetrics';
-import { Card } from '~/ui/Card';
-import { Divider } from '~/ui/Divider';
+import { FormattedStatsAmount, StatsWrapper } from './FormattedStatsAmount';
 
 export function OnTheNetwork(): JSX.Element {
     const { data: networkMetrics } = useGetNetworkMetrics();