refactor: [M3-8654] - Migrate Typography to UI package (#11299)

* Move Typography and update imports * Fix Typography story docs * Added changeset: Typography component and story
linode · Nov 22, 2024 · 31960f5 · 31960f5
1 parent 3ca4f1d
commit 31960f5
Show file tree

Hide file tree

Showing 503 changed files with 825 additions and 1,022 deletions.
diff --git a/docs/development-guide/04-component-library.md b/docs/development-guide/04-component-library.md
@@ -7,7 +7,7 @@ We use [Material-UI](https://mui.com/material-ui/getting-started/overview/) as t
 All MUI components have abstractions in the Cloud Manager codebase, meaning you will use relative imports to use them instead of importing from MUI directly:
 
 ```ts
-import { Typography } from "src/components/Typography"; // NOT from '@mui/material/Typography'
+import { Typography } from "@linode/ui"; // NOT from '@mui/material/Typography'
 ```
 
 We do this because it gives us the ability to customize the component and still keep imports consistent. It also gives us flexibility if we ever wanted to change out the underlying component library.

diff --git a/packages/manager/cypress/support/util/csv.ts b/packages/manager/cypress/support/util/csv.ts
@@ -20,7 +20,7 @@ export function parseCsv(csvContent: string): any[] {
     .map((header) => header.trim().replace(/^"|"$/g, ''));
 
   // Map the remaining lines to objects using the headers
-  const data = lines.slice(1).map((line) => {
+  return lines.slice(1).map((line) => {
     // Split each line into values, handling quoted values with commas and embedded quotes
     // The regular expression matches:
     // - Values enclosed in double quotes, which may contain commas and escaped double quotes (e.g., "value, with, commas" or "value with ""embedded"" quotes")
@@ -42,7 +42,4 @@ export function parseCsv(csvContent: string): any[] {
     // Return the object representing the row
     return entry;
   });
-
-  // Return the array of objects representing the CSV data
-  return data;
 }
diff --git a/packages/manager/src/components/AbuseTicketBanner/AbuseTicketBanner.tsx b/packages/manager/src/components/AbuseTicketBanner/AbuseTicketBanner.tsx
@@ -1,10 +1,10 @@
+import { Typography } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import { DateTime } from 'luxon';
 import * as React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
 import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner';
-import { Typography } from 'src/components/Typography';
 import { useNotificationsQuery } from 'src/queries/account/notifications';
 import { getAbuseTickets } from 'src/store/selectors/getAbuseTicket';
 

diff --git a/packages/manager/src/components/AccessPanel/AccessPanel.tsx b/packages/manager/src/components/AccessPanel/AccessPanel.tsx
@@ -1,4 +1,4 @@
-import { Divider, Paper } from '@linode/ui';
+import { Divider, Paper, Typography } from '@linode/ui';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -17,7 +17,6 @@ import { Encryption } from 'src/components/Encryption/Encryption';
 import { useIsDiskEncryptionFeatureEnabled } from 'src/components/Encryption/utils';
 import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
-import { Typography } from 'src/components/Typography';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 import { doesRegionSupportFeature } from 'src/utilities/doesRegionSupportFeature';
 

diff --git a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
@@ -1,4 +1,4 @@
-import { Button, Checkbox } from '@linode/ui';
+import { Button, Checkbox, Typography } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
@@ -10,7 +10,6 @@ import { TableHead } from 'src/components/TableHead';
 import { TableRow } from 'src/components/TableRow';
 import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { TableRowError } from 'src/components/TableRowError/TableRowError';
-import { Typography } from 'src/components/Typography';
 import { CreateSSHKeyDrawer } from 'src/features/Profile/SSHKeys/CreateSSHKeyDrawer';
 import { usePagination } from 'src/hooks/usePagination';
 import { useAccountUsers } from 'src/queries/account/users';

diff --git a/packages/manager/src/components/Accordion.tsx b/packages/manager/src/components/Accordion.tsx
@@ -1,4 +1,4 @@
-import { Notice } from '@linode/ui';
+import { Notice, Typography } from '@linode/ui';
 import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
 import { default as _Accordion } from '@mui/material/Accordion';
 import AccordionDetails from '@mui/material/AccordionDetails';
@@ -7,13 +7,11 @@ import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Typography } from 'src/components/Typography';
-
+import type { TypographyProps } from '@linode/ui';
 import type { Theme } from '@mui/material';
 import type { AccordionProps as _AccordionProps } from '@mui/material/Accordion';
 import type { AccordionDetailsProps } from '@mui/material/AccordionDetails';
 import type { AccordionSummaryProps } from '@mui/material/AccordionSummary';
-import type { TypographyProps } from 'src/components/Typography';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   itemCount: {

diff --git a/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx b/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx
@@ -1,11 +1,10 @@
-import { StyledLinkButton } from '@linode/ui';
+import { StyledLinkButton, Typography } from '@linode/ui';
 import Warning from '@mui/icons-material/CheckCircle';
 import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
-import { Typography } from 'src/components/Typography';
 import { SupportTicketDialog } from 'src/features/Support/SupportTickets/SupportTicketDialog';
 
 import type { AttachmentError } from 'src/features/Support/SupportTicketDetail/SupportTicketDetail';

diff --git a/packages/manager/src/components/AkamaiBanner/AkamaiBanner.tsx b/packages/manager/src/components/AkamaiBanner/AkamaiBanner.tsx
@@ -1,9 +1,8 @@
-import { Box, Stack } from '@linode/ui';
+import { Box, Stack, Typography } from '@linode/ui';
 import { useMediaQuery, useTheme } from '@mui/material';
 import * as React from 'react';
 
 import { Link } from 'src/components/Link';
-import { Typography } from 'src/components/Typography';
 import { useFlags } from 'src/hooks/useFlags';
 import { replaceNewlinesWithLineBreaks } from 'src/utilities/replaceNewlinesWithLineBreaks';
 

diff --git a/packages/manager/src/components/BackupStatus/BackupStatus.tsx b/packages/manager/src/components/BackupStatus/BackupStatus.tsx
@@ -1,12 +1,11 @@
-import { Tooltip, TooltipIcon } from '@linode/ui';
+import { Tooltip, TooltipIcon, Typography } from '@linode/ui';
 import Backup from '@mui/icons-material/Backup';
 import * as React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { makeStyles } from 'tss-react/mui';
 
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { Link } from 'src/components/Link';
-import { Typography } from 'src/components/Typography';
 
 import type { Theme } from '@mui/material/styles';
 

diff --git a/packages/manager/src/components/Breadcrumb/Crumbs.styles.tsx b/packages/manager/src/components/Breadcrumb/Crumbs.styles.tsx
@@ -1,7 +1,6 @@
+import { Typography } from '@linode/ui';
 import { styled } from '@mui/material';
 
-import { Typography } from 'src/components/Typography';
-
 export const StyledTypography = styled(Typography, {
   label: 'StyledTypography',
 })(({}) => ({

diff --git a/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx b/packages/manager/src/components/CheckoutBar/CheckoutBar.stories.tsx
@@ -1,7 +1,6 @@
+import { Typography } from '@linode/ui';
 import React from 'react';
 
-import { Typography } from 'src/components/Typography';
-
 import { CheckoutBar } from './CheckoutBar';
 
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';

diff --git a/packages/manager/src/components/CheckoutBar/CheckoutBar.tsx b/packages/manager/src/components/CheckoutBar/CheckoutBar.tsx
@@ -1,8 +1,8 @@
+import { Typography } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { DisplayPrice } from 'src/components/DisplayPrice';
-import { Typography } from 'src/components/Typography';
 
 import {
   StyledButton,

diff --git a/packages/manager/src/components/CheckoutBar/DisplaySection.tsx b/packages/manager/src/components/CheckoutBar/DisplaySection.tsx
@@ -1,7 +1,6 @@
+import { Typography } from '@linode/ui';
 import * as React from 'react';
 
-import { Typography } from 'src/components/Typography';
-
 import { StyledCheckoutSection, SxTypography } from './styles';
 
 export interface DisplaySectionProps {

diff --git a/packages/manager/src/components/CheckoutSummary/CheckoutSummary.stories.tsx b/packages/manager/src/components/CheckoutSummary/CheckoutSummary.stories.tsx
@@ -1,7 +1,6 @@
+import { Typography } from '@linode/ui';
 import React from 'react';
 
-import { Typography } from 'src/components/Typography';
-
 import { CheckoutSummary } from './CheckoutSummary';
 
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';

diff --git a/packages/manager/src/components/CheckoutSummary/CheckoutSummary.tsx b/packages/manager/src/components/CheckoutSummary/CheckoutSummary.tsx
@@ -1,11 +1,10 @@
-import { Paper } from '@linode/ui';
+import { Paper, Typography } 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 { Typography } from '../Typography';
 import { SummaryItem } from './SummaryItem';
 
 import type { Theme } from '@mui/material/styles';

diff --git a/packages/manager/src/components/CheckoutSummary/SummaryItem.tsx b/packages/manager/src/components/CheckoutSummary/SummaryItem.tsx
@@ -1,9 +1,9 @@
+import { Typography } from '@linode/ui';
 import { styled } from '@mui/material/styles';
+import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
 import React from 'react';
 
-import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
-import { Typography } from '../Typography';
-import { SummaryItem as Props } from './CheckoutSummary';
+import type { SummaryItem as Props } from './CheckoutSummary';
 
 export const SummaryItem = ({ details, title }: Props) => {
   return (

diff --git a/packages/manager/src/components/ColorPalette/ColorPalette.tsx b/packages/manager/src/components/ColorPalette/ColorPalette.tsx
@@ -1,10 +1,9 @@
+import { Typography } from '@linode/ui';
 import { useTheme } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Typography } from 'src/components/Typography';
-
 import type { Theme } from '@mui/material/styles';
 
 interface Color {

diff --git a/packages/manager/src/components/DateTimeDisplay/DateTimeDisplay.tsx b/packages/manager/src/components/DateTimeDisplay/DateTimeDisplay.tsx
@@ -1,8 +1,10 @@
+import { Typography } from '@linode/ui';
 import * as React from 'react';
 
-import { Typography } from 'src/components/Typography';
 import { useProfile } from 'src/queries/profile/profile';
-import { TimeInterval, formatDate } from 'src/utilities/formatDate';
+import { formatDate } from 'src/utilities/formatDate';
+
+import type { TimeInterval } from 'src/utilities/formatDate';
 
 export interface DateTimeDisplayProps {
   /**

diff --git a/packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx b/packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx
@@ -1,5 +1,9 @@
-import { CircleProgress, TextField } from '@linode/ui';
-import { IconButton, InputAdornment } from '@linode/ui';
+import {
+  CircleProgress,
+  IconButton,
+  InputAdornment,
+  TextField,
+} from '@linode/ui';
 import Clear from '@mui/icons-material/Clear';
 import Search from '@mui/icons-material/Search';
 import { styled } from '@mui/material/styles';

diff --git a/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx b/packages/manager/src/components/DeletionDialog/DeletionDialog.tsx
@@ -1,11 +1,10 @@
-import { Notice } from '@linode/ui';
+import { Notice, Typography } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm';
-import { Typography } from 'src/components/Typography';
 import { titlecase } from 'src/features/Linodes/presentation';
 import { usePreferences } from 'src/queries/profile/preferences';
 import { capitalize } from 'src/utilities/capitalize';

diff --git a/packages/manager/src/components/DescriptionList/DescriptionList.styles.ts b/packages/manager/src/components/DescriptionList/DescriptionList.styles.ts
@@ -1,9 +1,7 @@
-import { omittedProps } from '@linode/ui';
+import { Typography, omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 
-import { Typography } from 'src/components/Typography';
-
 import type { DescriptionListProps } from './DescriptionList';
 import type { TypographyProps } from '@mui/material';
 import type { Grid2Props } from '@mui/material/Unstable_Grid2';

diff --git a/packages/manager/src/components/DescriptionList/DescriptionList.tsx b/packages/manager/src/components/DescriptionList/DescriptionList.tsx
@@ -1,9 +1,7 @@
-import { Box, TooltipIcon } from '@linode/ui';
+import { Box, TooltipIcon, Typography } from '@linode/ui';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
 
-import { Typography } from 'src/components/Typography';
-
 import {
   StyledDL,
   StyledDLItemSeparator,

diff --git a/packages/manager/src/components/Dialog/Dialog.stories.tsx b/packages/manager/src/components/Dialog/Dialog.stories.tsx
@@ -1,9 +1,8 @@
-import { Button } from '@linode/ui';
+import { Button, Typography } from '@linode/ui';
 import { action } from '@storybook/addon-actions';
 import { useArgs } from '@storybook/preview-api';
 import React from 'react';
 
-import { Typography } from '../Typography';
 import { Dialog } from './Dialog';
 
 import type { Meta, StoryObj } from '@storybook/react';

diff --git a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.stories.tsx b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.stories.tsx
@@ -1,8 +1,7 @@
-import { Button } from '@linode/ui';
+import { Button, Typography } from '@linode/ui';
 import * as React from 'react';
 
 import { Link } from 'src/components/Link';
-import { Typography } from 'src/components/Typography';
 
 import { DismissibleBanner } from './DismissibleBanner';
 

diff --git a/packages/manager/src/components/DismissibleBanner/DismissibleBanner.test.tsx b/packages/manager/src/components/DismissibleBanner/DismissibleBanner.test.tsx
@@ -1,8 +1,7 @@
-import { Button } from '@linode/ui';
+import { Button, Typography } from '@linode/ui';
 import { fireEvent } from '@testing-library/react';
 import * as React from 'react';
 
-import { Typography } from 'src/components/Typography';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { DismissibleBanner } from './DismissibleBanner';

diff --git a/packages/manager/src/components/DisplayPrice/DisplayPrice.tsx b/packages/manager/src/components/DisplayPrice/DisplayPrice.tsx
@@ -1,8 +1,10 @@
-import { SxProps, Theme, useTheme } from '@mui/material/styles';
+import { Typography } from '@linode/ui';
+import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Currency } from 'src/components/Currency';
-import { Typography } from 'src/components/Typography';
+
+import type { SxProps, Theme } from '@mui/material/styles';
 
 export interface DisplayPriceProps {
   /**

diff --git a/packages/manager/src/components/DownloadTooltip.tsx b/packages/manager/src/components/DownloadTooltip.tsx
@@ -1,9 +1,8 @@
-import { Tooltip } from '@linode/ui';
+import { Tooltip, Typography } from '@linode/ui';
 import * as React from 'react';
 
 import FileDownload from 'src/assets/icons/download.svg';
 import { StyledIconButton } from 'src/components/CopyTooltip/CopyTooltip';
-import { Typography } from 'src/components/Typography';
 import { downloadFile } from 'src/utilities/downloadFile';
 
 interface Props {

diff --git a/packages/manager/src/components/Drawer.stories.tsx b/packages/manager/src/components/Drawer.stories.tsx
@@ -1,11 +1,10 @@
-import { Button, TextField } from '@linode/ui';
+import { Button, TextField, Typography } from '@linode/ui';
 import { action } from '@storybook/addon-actions';
 import { useArgs } from '@storybook/preview-api';
 import React from 'react';
 
 import { ActionsPanel } from './ActionsPanel/ActionsPanel';
 import { Drawer } from './Drawer';
-import { Typography } from './Typography';
 
 import type { Meta, StoryObj } from '@storybook/react';
 

diff --git a/packages/manager/src/components/Drawer.tsx b/packages/manager/src/components/Drawer.tsx
@@ -1,11 +1,10 @@
-import { Box, CircleProgress, IconButton } from '@linode/ui';
+import { Box, CircleProgress, IconButton, Typography } from '@linode/ui';
 import Close from '@mui/icons-material/Close';
 import _Drawer from '@mui/material/Drawer';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Typography } from 'src/components/Typography';
 import { convertForAria } from 'src/utilities/stringUtils';
 
 import type { DrawerProps as _DrawerProps } from '@mui/material/Drawer';

diff --git a/packages/manager/src/components/EditableEntityLabel/EditableEntityLabel.tsx b/packages/manager/src/components/EditableEntityLabel/EditableEntityLabel.tsx
@@ -1,9 +1,9 @@
-import Grid from '@mui/material/Unstable_Grid2';
+import { Typography } from '@linode/ui';
 import { styled, useTheme } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
 import { EntityIcon } from 'src/components/EntityIcon/EntityIcon';
-import { Typography } from 'src/components/Typography';
 
 import { EditableInput } from './EditableInput';
 

diff --git a/packages/manager/src/components/EditableEntityLabel/EditableInput.styles.tsx b/packages/manager/src/components/EditableEntityLabel/EditableInput.styles.tsx
@@ -1,9 +1,7 @@
-import { Box, Button, TextField, fadeIn } from '@linode/ui';
+import { Box, Button, TextField, Typography, fadeIn } from '@linode/ui';
 import Edit from '@mui/icons-material/Edit';
 import { styled } from '@mui/material/styles';
 
-import { Typography } from 'src/components/Typography';
-
 import type { EditableTextVariant } from './EditableInput';
 import type { TextFieldProps } from '@linode/ui';
 

diff --git a/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSubSection.tsx b/packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksSubSection.tsx
@@ -1,8 +1,7 @@
+import { Typography } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
-import { Typography } from 'src/components/Typography';
-
 interface ResourcesLinksSubSectionProps {
   MoreLink?: (props: { className?: any }) => JSX.Element;
   children?: JSX.Element | JSX.Element[];

diff --git a/packages/manager/src/components/EmptyLandingPageResources/ResourcesSection.tsx b/packages/manager/src/components/EmptyLandingPageResources/ResourcesSection.tsx
@@ -1,3 +1,4 @@
+import { Typography } from '@linode/ui';
 import * as React from 'react';
 
 import DocsIcon from 'src/assets/icons/docs.svg';
@@ -8,7 +9,6 @@ import { ResourcesLinksSection } from 'src/components/EmptyLandingPageResources/
 import { ResourcesLinksSubSection } from 'src/components/EmptyLandingPageResources/ResourcesLinksSubSection';
 import { ResourcesMoreLink } from 'src/components/EmptyLandingPageResources/ResourcesMoreLink';
 import { Placeholder } from 'src/components/Placeholder/Placeholder';
-import { Typography } from 'src/components/Typography';
 import {
   getLinkOnClick,
   youtubeChannelLink,