refactor: [M3-8639] - Move Accordion to linode/ui package (linode…

…#11316)

* refactor: [M3-8639] - Move `Accordion` to `linode/ui` package

* Added changeset: Move `Accordion` from `manager` to `ui` package

* Added changeset: Move `Accordion` from `manager` to `ui` package

* Change import location for `TypographyProps`

Co-authored-by: Harsh Shankar Rao <hrao@akamai.com>

---------

Co-authored-by: Harsh Shankar Rao <hrao@akamai.com>

packages/manager/.changeset/pr-11316-removed-1732523914805.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+Move `Accordion` from `manager` to `ui` package ([#11316](https://github.com/linode/manager/pull/11316))

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

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

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

@@ -1,9 +1,8 @@
-import { Notice, Typography } from '@linode/ui';
+import { Accordion, Notice, Typography } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Accordion } from 'src/components/Accordion';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
 import { Toggle } from 'src/components/Toggle/Toggle';

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

@@ -1,8 +1,7 @@
-import { Button } from '@linode/ui';
+import { Accordion, Button } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
-import { Accordion } from 'src/components/Accordion';
 import { useProfile } from 'src/queries/profile/profile';
 
 import CloseAccountDialog from './CloseAccountDialog';

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

@@ -1,10 +1,9 @@
 import { enableManaged } from '@linode/api-v4/lib/managed';
-import { Button, Typography } from '@linode/ui';
+import { Accordion, Button, Typography } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useQueryClient } from '@tanstack/react-query';
 import * as React from 'react';
 
-import { Accordion } from 'src/components/Accordion';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { Link } from 'src/components/Link';

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

@@ -1,8 +1,7 @@
-import { Typography } from '@linode/ui';
+import { Accordion, Typography } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
-import { Accordion } from 'src/components/Accordion';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Toggle } from 'src/components/Toggle/Toggle';
 

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

@@ -1,4 +1,5 @@
 import {
+  Accordion,
   Box,
   Button,
   CircleProgress,
@@ -9,7 +10,6 @@ import {
 import { enqueueSnackbar } from 'notistack';
 import * as React from 'react';
 
-import { Accordion } from 'src/components/Accordion';
 import { Link } from 'src/components/Link';
 import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
 import { useAccountSettings } from 'src/queries/account/settings';

packages/manager/src/features/EntityTransfers/TransfersTable.tsx

@@ -1,11 +1,6 @@
-import {
-  EntityTransfer,
-  TransferEntities,
-} from '@linode/api-v4/lib/entity-transfers';
-import { APIError } from '@linode/api-v4/lib/types';
+import { Accordion } from '@linode/ui';
 import * as React from 'react';
 
-import { Accordion } from 'src/components/Accordion';
 import { Hidden } from 'src/components/Hidden';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 import { TableBody } from 'src/components/TableBody';
@@ -20,6 +15,12 @@ import { TransferDetailsDialog } from './EntityTransfersLanding/TransferDetailsD
 import { RenderTransferRow } from './RenderTransferRow';
 import { StyledDiv, StyledTable } from './TransfersTable.styles';
 
+import type {
+  EntityTransfer,
+  TransferEntities,
+} from '@linode/api-v4/lib/entity-transfers';
+import type { APIError } from '@linode/api-v4/lib/types';
+
 interface Props {
   error: APIError[] | null;
   handlePageChange: (v: number, showSpinner?: boolean | undefined) => void;

packages/manager/src/features/Linodes/LinodeCreate/UserData/UserData.tsx

@@ -1,8 +1,7 @@
-import { Notice, TextField, Typography } from '@linode/ui';
+import { Accordion, Notice, TextField, Typography } from '@linode/ui';
 import React, { useMemo } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
-import { Accordion } from 'src/components/Accordion';
 import { Link } from 'src/components/Link';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useImageQuery } from 'src/queries/images';

packages/manager/src/features/Linodes/LinodeCreate/VLAN/VLAN.tsx

@@ -1,8 +1,13 @@
-import { Stack, TextField, TooltipIcon, Typography } from '@linode/ui';
+import {
+  Accordion,
+  Stack,
+  TextField,
+  TooltipIcon,
+  Typography,
+} from '@linode/ui';
 import React from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
-import { Accordion } from 'src/components/Accordion';
 import { Link } from 'src/components/Link';
 import { VLANSelect } from 'src/components/VLANSelect';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';

packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/UserDataAccordion/UserDataAccordion.tsx

@@ -1,7 +1,6 @@
-import { Box, Notice, TextField, Typography } from '@linode/ui';
+import { Accordion, Box, Notice, TextField, Typography } from '@linode/ui';
 import * as React from 'react';
 
-import { Accordion } from 'src/components/Accordion';
 import { Link } from 'src/components/Link';
 
 import { UserDataAccordionHeading } from './UserDataAccordionHeading';

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsAlertsPanel.tsx

@@ -1,10 +1,9 @@
-import { Notice } from '@linode/ui';
+import { Accordion, Notice } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
-import { Accordion } from 'src/components/Accordion';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import {
   useLinodeQuery,

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsDeletePanel.tsx

@@ -1,8 +1,7 @@
-import { Button, Notice, Typography } from '@linode/ui';
+import { Accordion, Button, Notice, Typography } from '@linode/ui';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Accordion } from 'src/components/Accordion';
 import { TypeToConfirmDialog } from 'src/components/TypeToConfirmDialog/TypeToConfirmDialog';
 import { useEventsPollingActions } from 'src/queries/events/events';
 import {

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsLabelPanel.tsx

@@ -1,10 +1,9 @@
-import { Notice, TextField } from '@linode/ui';
+import { Accordion, Notice, TextField } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
-import { Accordion } from 'src/components/Accordion';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import {
   useLinodeQuery,

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeSettingsPasswordPanel.tsx

@@ -1,9 +1,8 @@
-import { Notice } from '@linode/ui';
+import { Accordion, Notice } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
-import { Accordion } from 'src/components/Accordion';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import EnhancedSelect from 'src/components/EnhancedSelect/Select';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/LinodeWatchdogPanel.tsx

@@ -1,9 +1,8 @@
-import { CircleProgress, Notice, Typography } from '@linode/ui';
+import { Accordion, CircleProgress, Notice, Typography } from '@linode/ui';
 import { Box, Stack } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
-import { Accordion } from 'src/components/Accordion';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Toggle } from 'src/components/Toggle/Toggle';
 import {

packages/manager/src/features/NodeBalancers/NodeBalancerCreate.tsx

@@ -1,4 +1,5 @@
 import {
+  Accordion,
   Box,
   Button,
   Notice,
@@ -22,7 +23,6 @@ import {
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
-import { Accordion } from 'src/components/Accordion';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { CheckoutSummary } from 'src/components/CheckoutSummary/CheckoutSummary';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';

packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerConfigurations.tsx

@@ -8,7 +8,7 @@ import {
   updateNodeBalancerConfig,
   updateNodeBalancerConfigNode,
 } from '@linode/api-v4/lib/nodebalancers';
-import { Box, Button, Typography } from '@linode/ui';
+import { Accordion, Box, Button, Typography } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import {
   append,
@@ -25,7 +25,6 @@ import * as React from 'react';
 import { withRouter } from 'react-router-dom';
 import { compose as composeC } from 'recompose';
 
-import { Accordion } from 'src/components/Accordion';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';

packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSettings.tsx

@@ -1,10 +1,15 @@
-import { Button, FormHelperText, InputAdornment, TextField } from '@linode/ui';
+import {
+  Accordion,
+  Button,
+  FormHelperText,
+  InputAdornment,
+  TextField,
+} from '@linode/ui';
 import { useTheme } from '@mui/material';
 import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
-import { Accordion } from 'src/components/Accordion';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 import {

packages/manager/src/features/NotificationCenter/Notifications/NotificationCenterNotificationsContainer.tsx

@@ -1,7 +1,6 @@
-import { Box, Typography } from '@linode/ui';
+import { Accordion, Box, Typography } from '@linode/ui';
 import * as React from 'react';
 
-import { Accordion } from 'src/components/Accordion';
 import { Hidden } from 'src/components/Hidden';
 import { Link } from 'src/components/Link';
 

packages/manager/src/features/Support/SupportTicketDetail/TabbedReply/ReplyContainer.tsx

@@ -1,12 +1,11 @@
 import { uploadAttachment } from '@linode/api-v4';
-import { Notice } from '@linode/ui';
+import { Accordion, Notice } from '@linode/ui';
 import Grid from '@mui/material/Unstable_Grid2';
 import { lensPath, set } from 'ramda';
 import * as React from 'react';
 import { debounce } from 'throttle-debounce';
 import { makeStyles } from 'tss-react/mui';
 
-import { Accordion } from 'src/components/Accordion';
 import { useSupportTicketReplyMutation } from 'src/queries/support';
 import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils';
 import { storage } from 'src/utilities/storage';

packages/manager/src/features/Support/SupportTickets/SupportTicketDialog.tsx

@@ -1,13 +1,12 @@
 import { yupResolver } from '@hookform/resolvers/yup';
 import { uploadAttachment } from '@linode/api-v4/lib/support';
-import { Box, Notice, TextField, Typography } from '@linode/ui';
+import { Accordion, Box, Notice, TextField, Typography } from '@linode/ui';
 import { update } from 'ramda';
 import * as React from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { useLocation } from 'react-router-dom';
 import { debounce } from 'throttle-debounce';
 
-import { Accordion } from 'src/components/Accordion';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
 import { Dialog } from 'src/components/Dialog/Dialog';

packages/ui/.changeset/pr-11316-added-1732523878928.md

@@ -0,0 +1,5 @@
+---
+"@linode/ui": Added
+---
+
+Move `Accordion` from `manager` to `ui` package ([#11316](https://github.com/linode/manager/pull/11316))

packages/manager/src/components/Accordion.stories.tsx → packages/ui/src/components/Accordion/Accordion.stories.tsx

@@ -1,8 +1,9 @@
-import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { Accordion } from './Accordion';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 const meta: Meta<typeof Accordion> = {
   component: Accordion,
   title: 'Foundations/Accordion',

packages/manager/src/components/Accordion.tsx → packages/ui/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,3 @@
-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,7 +6,10 @@ import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import type { TypographyProps } from '@linode/ui';
+import { Notice } from '../Notice';
+import { Typography } from '../Typography';
+
+import type { TypographyProps } from '../Typography';
 import type { Theme } from '@mui/material';
 import type { AccordionProps as _AccordionProps } from '@mui/material/Accordion';
 import type { AccordionDetailsProps } from '@mui/material/AccordionDetails';

packages/ui/src/components/Accordion/index.ts

@@ -0,0 +1 @@
+export * from './Accordion';

packages/ui/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './Accordion';
 export * from './BetaChip';
 export * from './Box';
 export * from './Button';