refactor: [M3-8641] - Move Box component to ui package (Part 1) (#…

…11163)

* move Box to linode/ui part 1

* remove old story

* Added changeset: `Box` component from `manager` to `ui` package, part 1

* move box into its own package in ui package

packages/manager/src/MainContent.tsx

@@ -1,11 +1,11 @@
+import { Box } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import { RouterProvider } from '@tanstack/react-router';
 import * as React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { makeStyles } from 'tss-react/mui';
 
 import Logo from 'src/assets/logo/akamai-logo.svg';
-import { Box } from 'src/components/Box';
 import { MainContentBanner } from 'src/components/MainContentBanner';
 import { MaintenanceScreen } from 'src/components/MaintenanceScreen';
 import { SideMenu } from 'src/components/PrimaryNav/SideMenu';

packages/manager/src/Root.tsx

@@ -1,9 +1,9 @@
+import { Box } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import { Outlet } from '@tanstack/react-router';
 import React from 'react';
 
 import Logo from 'src/assets/logo/akamai-logo.svg';
-import { Box } from 'src/components/Box';
 import { MainContentBanner } from 'src/components/MainContentBanner';
 import { MaintenanceScreen } from 'src/components/MaintenanceScreen';
 import { SideMenu } from 'src/components/PrimaryNav/SideMenu';

packages/manager/src/components/AreaChart/AccessibleAreaChart.tsx

@@ -1,8 +1,7 @@
+import { Box } from '@linode/ui';
 import { visuallyHidden } from '@mui/utils';
 import * as React from 'react';
 
-import { Box } from 'src/components/Box';
-
 import { getAccessibleTimestamp } from './utils';
 
 export interface AccessibleAreaChartProps {

packages/manager/src/components/AreaChart/AreaChart.tsx

@@ -1,3 +1,4 @@
+import { Box } from '@linode/ui';
 import { Typography, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { DateTime } from 'luxon';
@@ -14,7 +15,6 @@ import {
 } from 'recharts';
 
 import { AccessibleAreaChart } from 'src/components/AreaChart/AccessibleAreaChart';
-import { Box } from 'src/components/Box';
 import MetricsDisplay from 'src/components/LineGraph/MetricsDisplay';
 import { Paper } from 'src/components/Paper';
 import { StyledBottomLegend } from 'src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/TablesPanel';

packages/manager/src/components/Encryption/Encryption.tsx

@@ -1,7 +1,7 @@
+import { Box } from '@linode/ui';
 import { List, ListItem } from '@mui/material';
 import * as React from 'react';
 
-import { Box } from 'src/components/Box';
 import { Checkbox } from 'src/components/Checkbox';
 import { Typography } from 'src/components/Typography';
 

packages/manager/src/components/EntityHeader/EntityHeader.tsx

@@ -1,8 +1,10 @@
-import { Box } from 'src/components/Box';
+import { Box } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
-import { Typography, TypographyProps } from 'src/components/Typography';
+import { Typography } from 'src/components/Typography';
+
+import type { TypographyProps } from 'src/components/Typography';
 
 export interface HeaderProps {
   children?: React.ReactNode;

packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx

@@ -1,18 +1,20 @@
-import { PaymentMethod } from '@linode/api-v4/lib/account/types';
+import { Box } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu';
-import { Box } from 'src/components/Box';
+import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
 import { Chip } from 'src/components/Chip';
 import { Paper } from 'src/components/Paper';
 import CreditCard from 'src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/CreditCard';
 import { useMakeDefaultPaymentMethodMutation } from 'src/queries/account/payment';
 
 import { ThirdPartyPayment } from './ThirdPartyPayment';
 
+import type { PaymentMethod } from '@linode/api-v4/lib/account/types';
+import type { Action } from 'src/components/ActionMenu/ActionMenu';
+
 interface Props {
   /**
    * Whether the user is a child user.

packages/manager/src/components/PaymentMethodRow/ThirdPartyPayment.tsx

@@ -1,18 +1,20 @@
-import {
-  ThirdPartyPayment as _ThirdPartyPayment,
-  PaymentMethod,
-} from '@linode/api-v4/lib/account';
-import { Theme, useTheme } from '@mui/material/styles';
+import { Box } from '@linode/ui';
+import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import GooglePayIcon from 'src/assets/icons/payment/googlePay.svg';
 import PayPalIcon from 'src/assets/icons/payment/payPal.svg';
-import { Box } from 'src/components/Box';
 import { Typography } from 'src/components/Typography';
 import CreditCard from 'src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/CreditCard';
 
+import type {
+  ThirdPartyPayment as _ThirdPartyPayment,
+  PaymentMethod,
+} from '@linode/api-v4/lib/account';
+import type { Theme } from '@mui/material/styles';
+
 const useStyles = makeStyles()((theme: Theme) => ({
   icon: {
     // https://stackoverflow.com/questions/57516373/image-stretching-in-flexbox-in-safari

packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx

@@ -1,10 +1,10 @@
+import { Box } from '@linode/ui';
 import { styled } from '@mui/material';
 import { Duration } from 'luxon';
 import * as React from 'react';
 import { useDropzone } from 'react-dropzone';
 
 import { BarPercent } from 'src/components/BarPercent';
-import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';

packages/manager/src/features/Account/Agreements/EUAgreementCheckbox.tsx

@@ -1,7 +1,7 @@
+import { Box } from '@linode/ui';
 import { useTheme } from '@mui/material';
 import * as React from 'react';
 
-import { Box } from 'src/components/Box';
 import { Checkbox } from 'src/components/Checkbox';
 import { Link } from 'src/components/Link';
 import { Typography } from 'src/components/Typography';

packages/manager/src/features/Account/Maintenance/MaintenanceTable.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
+import { Box } from '@linode/ui';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Box } from 'src/components/Box';
 import { DownloadCSV } from 'src/components/DownloadCSV/DownloadCSV';
 import { Hidden } from 'src/components/Hidden';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';

packages/manager/src/features/Account/ObjectStorageSettings.tsx

@@ -1,8 +1,8 @@
+import { Box } from '@linode/ui';
 import { enqueueSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { Accordion } from 'src/components/Accordion';
-import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { Link } from 'src/components/Link';

packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx

@@ -1,8 +1,8 @@
+import { Box } from '@linode/ui';
 import React, { useState } from 'react';
 import { Waypoint } from 'react-waypoint';
 
 import ErrorStateCloud from 'src/assets/icons/error-state-cloud.svg';
-import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { StyledLinkButton } from 'src/components/Button/StyledLinkButton';
 import { CircleProgress } from 'src/components/CircleProgress';

packages/manager/src/features/Backups/BackupDrawer.tsx

@@ -1,9 +1,9 @@
+import { Box } from '@linode/ui';
 import { styled } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Box } from 'src/components/Box';
 import { DisplayPrice } from 'src/components/DisplayPrice';
 import { Drawer } from 'src/components/Drawer';
 import { Link } from 'src/components/Link';
@@ -31,11 +31,12 @@ import { UNKNOWN_PRICE } from 'src/utilities/pricing/constants';
 import { AutoEnroll } from './AutoEnroll';
 import { BackupLinodeRow } from './BackupLinodeRow';
 import {
-  EnableBackupsRejectedResult,
   getFailureNotificationText,
   useEnableBackupsOnLinodesMutation,
 } from './utils';
 
+import type { EnableBackupsRejectedResult } from './utils';
+
 interface Props {
   onClose: () => void;
   open: boolean;

packages/manager/src/features/Backups/BackupsCTA.tsx

@@ -1,7 +1,7 @@
+import { Box } from '@linode/ui';
 import Close from '@mui/icons-material/Close';
 import * as React from 'react';
 
-import { Box } from 'src/components/Box';
 import { StyledLinkButton } from 'src/components/Button/StyledLinkButton';
 import { Typography } from 'src/components/Typography';
 import { useAccountSettings } from 'src/queries/account/settings';

packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.tsx

@@ -1,12 +1,9 @@
-import { PaymentMethod } from '@linode/api-v4';
-import { ActivePromotion } from '@linode/api-v4/lib/account/types';
-import Grid from '@mui/material/Unstable_Grid2';
+import { Box } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
-import { Breakpoint } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
 
-import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { Currency } from 'src/components/Currency';
 import { Divider } from 'src/components/Divider';
@@ -22,7 +19,10 @@ import PaymentDrawer from './PaymentDrawer';
 import PromoDialog from './PromoDialog';
 import { PromoDisplay } from './PromoDisplay';
 
+import type { PaymentMethod } from '@linode/api-v4';
+import type { ActivePromotion } from '@linode/api-v4/lib/account/types';
 import type { GridSize } from '@mui/material';
+import type { Breakpoint } from '@mui/material/styles';
 
 interface BillingSummaryProps {
   balance: number;

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/CreditCard.tsx

@@ -1,5 +1,4 @@
-import { CardType, CreditCardData } from '@linode/api-v4/lib/account/types';
-import { Theme } from '@mui/material/styles';
+import { Box } from '@linode/ui';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -9,10 +8,15 @@ import DiscoverIcon from 'src/assets/icons/payment/discover.svg';
 import JCBIcon from 'src/assets/icons/payment/jcb.svg';
 import MastercardIcon from 'src/assets/icons/payment/mastercard.svg';
 import VisaIcon from 'src/assets/icons/payment/visa.svg';
-import { Box } from 'src/components/Box';
 import { Typography } from 'src/components/Typography';
 import { formatExpiry, isCreditCardExpired } from 'src/utilities/creditCard';
 
+import type {
+  CardType,
+  CreditCardData,
+} from '@linode/api-v4/lib/account/types';
+import type { Theme } from '@mui/material/styles';
+
 const useStyles = makeStyles()((theme: Theme) => ({
   card: {
     display: 'flex',

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDisplay.tsx

@@ -1,16 +1,17 @@
-import {
-  ActivePromotion,
-  PromotionServiceType,
-} from '@linode/api-v4/lib/account/types';
+import { Box } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
-import { Box } from 'src/components/Box';
 import { Currency } from 'src/components/Currency';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 
+import type {
+  ActivePromotion,
+  PromotionServiceType,
+} from '@linode/api-v4/lib/account/types';
+
 type PromoDisplayProps = ActivePromotion;
 
 export const SERVICE_TYPES: Partial<Record<PromotionServiceType, string>> = {

packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx

@@ -1,10 +1,10 @@
+import { Box } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import { allCountries } from 'country-region-data';
 import * as React from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
-import { Box } from 'src/components/Box';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { getRestrictedResourceText } from 'src/features/Account/utils';

packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx

@@ -1,13 +1,11 @@
-import { PaymentMethod } from '@linode/api-v4/lib/account';
+import { Box } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
-import { VariantType } from 'notistack';
 import * as React from 'react';
 
-import { Box } from 'src/components/Box';
 import { Divider } from 'src/components/Divider';
 import { Drawer } from 'src/components/Drawer';
 import { LinearProgress } from 'src/components/LinearProgress';
-import { Notice, NoticeVariant } from 'src/components/Notice/Notice';
+import { Notice } from 'src/components/Notice/Notice';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { MAXIMUM_PAYMENT_METHODS } from 'src/constants';
@@ -20,6 +18,10 @@ import { PayPalChip } from '../PayPalChip';
 import { PayPalErrorBoundary } from '../PayPalErrorBoundary';
 import AddCreditCardForm from './AddCreditCardForm';
 
+import type { PaymentMethod } from '@linode/api-v4/lib/account';
+import type { VariantType } from 'notistack';
+import type { NoticeVariant } from 'src/components/Notice/Notice';
+
 interface Props {
   onClose: () => void;
   open: boolean;

packages/manager/src/features/Billing/InvoiceDetail/InvoiceDetail.tsx

@@ -1,13 +1,12 @@
 import { getInvoice, getInvoiceItems } from '@linode/api-v4/lib/account';
-import { IconButton } from '@linode/ui';
+import { Box, IconButton } from '@linode/ui';
 import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
 import { useTheme } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
-import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { Currency } from 'src/components/Currency';
 import { DownloadCSV } from 'src/components/DownloadCSV/DownloadCSV';

packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsLanding.tsx

@@ -1,3 +1,4 @@
+import { Box } from '@linode/ui';
 import * as React from 'react';
 import {
   Redirect,
@@ -7,7 +8,6 @@ import {
   useRouteMatch,
 } from 'react-router-dom';
 
-import { Box } from 'src/components/Box';
 import { Paper } from 'src/components/Paper';
 import { TabLinkList } from 'src/components/Tabs/TabLinkList';
 import { Tabs } from 'src/components/Tabs/Tabs';

packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx

@@ -1,7 +1,7 @@
+import { Box } from '@linode/ui';
 import React from 'react';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
-import { Box } from 'src/components/Box';
 import { Typography } from 'src/components/Typography';
 import { useCloudPulseDashboardsQuery } from 'src/queries/cloudpulse/dashboards';
 import { useCloudPulseServiceTypes } from 'src/queries/cloudpulse/services';