refactor: [M3-8648] – Migrate Paper to ui package (#11183)

docs/development-guide/02-component-structure.md

@@ -15,9 +15,9 @@ The basic structure of a component file should follow:
 Here is a minimal code example demonstrating the basic structure of a component file:
 
 ```tsx
-import * as React from "react";
+import { omittedProps } from "@linode/ui";
 import { styled } from "@mui/material/styles";
-import { omittedProps } from "src/utilities/omittedProps";
+import * as React from "react";
 
 // If not exported, it can just be named `Props`
 export interface SayHelloProps {

packages/manager/.storybook/utils.test.ts

@@ -10,7 +10,7 @@ describe('getReactDocgenTSFileGlobs', () => {
     ).toBe(true);
     expect(
       typeScriptFileGlobs.some((file) =>
-        file.includes('../manager/src/components/Paper.{ts,tsx}')
+        file.includes('../ui/src/components/Paper/**/*.{ts,tsx}')
       )
     ).toBe(true);
     expect(

packages/manager/src/components/AccessPanel/AccessPanel.tsx

@@ -1,3 +1,4 @@
+import { Paper } from '@linode/ui';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -14,7 +15,6 @@ import {
 } from 'src/components/Encryption/constants';
 import { Encryption } from 'src/components/Encryption/Encryption';
 import { useIsDiskEncryptionFeatureEnabled } from 'src/components/Encryption/utils';
-import { Paper } from 'src/components/Paper';
 import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 import { Typography } from 'src/components/Typography';

packages/manager/src/components/AkamaiBanner/AkamaiBanner.styles.ts

@@ -1,9 +1,8 @@
-import { Box } from '@linode/ui';
+import { Box, omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
 import Warning from 'src/assets/icons/warning.svg';
 import AkamaiLogo from 'src/assets/logo/akamai-logo.svg';
-import { omittedProps } from 'src/utilities/omittedProps';
 
 import { Stack } from '../Stack';
 

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

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

packages/manager/src/components/Autocomplete/Autocomplete.styles.tsx

@@ -1,10 +1,9 @@
+import { omittedProps } from '@linode/ui';
 import DoneIcon from '@mui/icons-material/Done';
 import Popper from '@mui/material/Popper';
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
-import { omittedProps } from 'src/utilities/omittedProps';
-
 import type { PopperProps } from '@mui/material/Popper';
 
 export const StyledListItem = styled('li', {

packages/manager/src/components/BarPercent/BarPercent.tsx

@@ -1,8 +1,8 @@
+import { omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import { LinearProgress } from 'src/components/LinearProgress';
-import { omittedProps } from 'src/utilities/omittedProps';
 
 import type { SxProps, Theme } from '@mui/material/styles';
 

packages/manager/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from '@linode/ui';
+import { Tooltip, omittedProps } from '@linode/ui';
 import HelpOutline from '@mui/icons-material/HelpOutline';
 import _Button from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
@@ -7,7 +7,6 @@ import * as React from 'react';
 import Reload from 'src/assets/icons/reload.svg';
 
 import { rotate360 } from '../../styles/keyframes';
-import { omittedProps } from '../../utilities/omittedProps';
 
 import type { ButtonProps as _ButtonProps } from '@mui/material/Button';
 import type { SxProps, Theme } from '@mui/material/styles';

packages/manager/src/components/Button/StyledTagButton.ts

@@ -1,7 +1,7 @@
+import { omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
 import Plus from 'src/assets/icons/plusSign.svg';
-import { omittedProps } from 'src/utilities/omittedProps';
 
 import { Button } from './Button';
 

packages/manager/src/components/CheckoutSummary/CheckoutSummary.tsx

@@ -1,10 +1,10 @@
+import { Paper } from '@linode/ui';
 import { useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
 
-import { Paper } from '../Paper';
 import { Typography } from '../Typography';
 import { SummaryItem } from './SummaryItem';
 

packages/manager/src/components/CircleProgress/CircleProgress.tsx

@@ -1,10 +1,8 @@
-import { Box } from '@linode/ui';
+import { Box, omittedProps } from '@linode/ui';
 import _CircularProgress from '@mui/material/CircularProgress';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
-import { omittedProps } from 'src/utilities/omittedProps';
-
 import type { CircularProgressProps } from '@mui/material/CircularProgress';
 import type { SxProps, Theme } from '@mui/material/styles';
 

packages/manager/src/components/CopyTooltip/CopyTooltip.tsx

@@ -1,11 +1,10 @@
-import { Tooltip, VisibilityTooltip } from '@linode/ui';
+import { Tooltip, VisibilityTooltip, omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import copy from 'copy-to-clipboard';
 import * as React from 'react';
 
 import FileCopy from 'src/assets/icons/copy.svg';
 import { createMaskedText } from 'src/utilities/createMaskedText';
-import { omittedProps } from 'src/utilities/omittedProps';
 
 import type { MaskableTextLength } from '../MaskableText/MaskableText';
 import type { TooltipProps } from '@linode/ui';

packages/manager/src/components/DescriptionList/DescriptionList.styles.ts

@@ -1,8 +1,8 @@
+import { omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 
 import { Typography } from 'src/components/Typography';
-import { omittedProps } from 'src/utilities/omittedProps';
 
 import type { DescriptionListProps } from './DescriptionList';
 import type { TypographyProps } from '@mui/material';

packages/manager/src/components/Dialog/Dialog.tsx

@@ -1,12 +1,11 @@
-import { Box } from '@linode/ui';
+import { Box, omittedProps } from '@linode/ui';
 import _Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import { styled, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { DialogTitle } from 'src/components/DialogTitle/DialogTitle';
 import { Notice } from 'src/components/Notice/Notice';
-import { omittedProps } from 'src/utilities/omittedProps';
 import { convertForAria } from 'src/utilities/stringUtils';
 
 import type { DialogProps as _DialogProps } from '@mui/material/Dialog';

packages/manager/src/components/Divider.tsx

@@ -1,8 +1,9 @@
-import _Divider, { DividerProps as _DividerProps } from '@mui/material/Divider';
+import { omittedProps } from '@linode/ui';
+import _Divider from '@mui/material/Divider';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
-import { omittedProps } from 'src/utilities/omittedProps';
+import type { DividerProps as _DividerProps } from '@mui/material/Divider';
 
 export interface DividerProps extends _DividerProps {
   dark?: boolean;

packages/manager/src/components/EntityDetail/EntityDetail.tsx

@@ -1,9 +1,8 @@
+import { omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
-import { omittedProps } from '../../utilities/omittedProps';
-
 export interface EntityDetailProps {
   body?: JSX.Element;
   footer?: JSX.Element;

packages/manager/src/components/GaugePercent/GaugePercent.styles.ts

@@ -1,8 +1,7 @@
+import { omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
-import { omittedProps } from 'src/utilities/omittedProps';
-
-import { GaugePercentProps } from './GaugePercent';
+import type { GaugePercentProps } from './GaugePercent';
 
 type StyledGaugePercentProps = Pick<GaugePercentProps, 'innerTextFontSize'> &
   Required<Pick<GaugePercentProps, 'height' | 'width'>>;

packages/manager/src/components/LineGraph/LineGraph.styles.ts

@@ -1,11 +1,11 @@
+import { omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
 import { Button } from 'src/components/Button/Button';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
 import { TableCell } from 'src/components/TableCell';
 import { TableHead } from 'src/components/TableHead';
-import { omittedProps } from 'src/utilities/omittedProps';
 
 export const StyledWrapper = styled('div')(() => ({
   display: 'flex',

packages/manager/src/components/LineGraph/MetricDisplay.styles.ts

@@ -1,9 +1,9 @@
+import { omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
 import { Button } from 'src/components/Button/Button';
 import { Table } from 'src/components/Table';
 import { TableCell } from 'src/components/TableCell';
-import { omittedProps } from 'src/utilities/omittedProps';
 
 export const StyledTable = styled(Table, {
   label: 'StyledTable',

packages/manager/src/components/Link.tsx

@@ -1,4 +1,5 @@
 import { sanitizeUrl } from '@braintree/sanitize-url';
+import { omitProps } from '@linode/ui';
 import * as React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 
@@ -9,7 +10,6 @@ import {
   flattenChildrenIntoAriaLabel,
   opensInNewTab,
 } from 'src/utilities/link';
-import { omitProps } from 'src/utilities/omittedProps';
 
 import type { LinkProps as TanStackLinkProps } from '@tanstack/react-router';
 import type { LinkProps as _LinkProps } from 'react-router-dom';

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

@@ -1,12 +1,11 @@
-import { Box } from '@linode/ui';
+import { Box, Paper } 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 { 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';
 

packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts

@@ -1,4 +1,4 @@
-import { Box } from '@linode/ui';
+import { Box, omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import { Link } from 'react-router-dom';
@@ -7,7 +7,6 @@ import AkamaiLogo from 'src/assets/logo/akamai-logo.svg';
 import { Accordion } from 'src/components/Accordion';
 import { Divider } from 'src/components/Divider';
 import { SIDEBAR_WIDTH } from 'src/components/PrimaryNav/SideMenu';
-import { omittedProps } from 'src/utilities/omittedProps';
 
 export const StyledGrid = styled(Grid, {
   label: 'StyledGrid',

packages/manager/src/components/PromotionalOfferCard/PromotionalOfferCard.tsx

@@ -1,15 +1,16 @@
+import { Paper } from '@linode/ui';
 import Button from '@mui/material/Button';
-import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { makeStyles } from 'tss-react/mui';
 
 import HeavenlyBucketIcon from 'src/assets/icons/promotionalOffers/heavenly-bucket.svg';
-import { Paper } from 'src/components/Paper';
 import { Typography } from 'src/components/Typography';
-import { PromotionalOffer } from 'src/featureFlags';
-import { useWindowDimensions } from 'src/hooks/useWindowDimensions';
 import { OFFSITE_URL_REGEX, ONSITE_URL_REGEX } from 'src/constants';
+import { useWindowDimensions } from 'src/hooks/useWindowDimensions';
+
+import type { Theme } from '@mui/material/styles';
+import type { PromotionalOffer } from 'src/featureFlags';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   alignLeft: {

packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.style.ts

@@ -1,9 +1,8 @@
-import { Box } from '@linode/ui';
+import { Box, omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
 import { List } from 'src/components/List';
 import { ListItem } from 'src/components/ListItem';
-import { omittedProps } from 'src/utilities/omittedProps';
 
 import { Typography } from '../Typography';
 

packages/manager/src/components/SelectFirewallPanel/SelectFirewallPanel.tsx

@@ -1,8 +1,7 @@
-import { Box } from '@linode/ui';
+import { Box, Paper } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
-import { Paper } from 'src/components/Paper';
 import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 import { CreateFirewallDrawer } from 'src/features/Firewalls/FirewallLanding/CreateFirewallDrawer';

packages/manager/src/components/Stack.stories.tsx

@@ -1,7 +1,7 @@
+import { Paper } from '@linode/ui';
 import React from 'react';
 
 import { Divider } from './Divider';
-import { Paper } from './Paper';
 import { Stack } from './Stack';
 
 import type { Meta, StoryObj } from '@storybook/react';

packages/manager/src/components/StatusIcon/StatusIcon.tsx

@@ -1,9 +1,7 @@
-import { Box } from '@linode/ui';
+import { Box, omittedProps } from '@linode/ui';
 import { styled } from '@mui/material';
 import * as React from 'react';
 
-import { omittedProps } from 'src/utilities/omittedProps';
-
 import type { BoxProps } from '@linode/ui';
 
 export type Status = 'active' | 'error' | 'inactive' | 'other';

packages/manager/src/components/TabbedPanel/TabbedPanel.tsx

@@ -1,10 +1,9 @@
-import { Box, Tooltip } from '@linode/ui';
+import { Box, Paper, Tooltip } from '@linode/ui';
 import HelpOutline from '@mui/icons-material/HelpOutline';
 import { styled } from '@mui/material/styles';
 import React, { useEffect, useState } from 'react';
 
 import { Notice } from 'src/components/Notice/Notice';
-import { Paper } from 'src/components/Paper';
 import { Tab } from 'src/components/Tabs/Tab';
 import { TabList } from 'src/components/Tabs/TabList';
 import { TabPanel } from 'src/components/Tabs/TabPanel';

packages/manager/src/components/Table/Table.styles.ts

@@ -1,7 +1,6 @@
+import { omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
-import { omittedProps } from 'src/utilities/omittedProps';
-
 import type { TableProps } from './Table';
 
 export const StyledTableWrapper = styled('div', {

packages/manager/src/components/TableRow/TableRow.styles.ts

@@ -1,8 +1,7 @@
+import { omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import { default as _TableRow } from '@mui/material/TableRow';
 
-import { omittedProps } from 'src/utilities/omittedProps';
-
 import type { TableRowProps } from './TableRow';
 
 export const StyledTableRow = styled(_TableRow, {

packages/manager/src/components/Tabs/Tabs.stories.tsx

@@ -1,6 +1,6 @@
+import { Paper } from '@linode/ui';
 import * as React from 'react';
 
-import { Paper } from 'src/components/Paper';
 import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';

packages/manager/src/components/Tag/Tag.styles.ts

@@ -1,7 +1,7 @@
+import { omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
 import { Chip } from 'src/components/Chip';
-import { omittedProps } from 'src/utilities/omittedProps';
 
 import { StyledLinkButton } from '../Button/StyledLinkButton';
 

packages/manager/src/components/TagCell/TagCell.tsx

@@ -1,12 +1,11 @@
-import { IconButton } from '@linode/ui';
+import { IconButton, omittedProps } from '@linode/ui';
 import MoreHoriz from '@mui/icons-material/MoreHoriz';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
 import { Tag } from 'src/components/Tag/Tag';
 import { useWindowDimensions } from 'src/hooks/useWindowDimensions';
-import { omittedProps } from 'src/utilities/omittedProps';
 
 import { StyledPlusIcon, StyledTagButton } from '../Button/StyledTagButton';
 import { CircleProgress } from '../CircleProgress';