refactor: [M3-8640] – Move Theme layer from manager package to ui…

… package (#11092)

docker-compose.yml

@@ -67,9 +67,7 @@ x-e2e-volumes:
   &default-volumes
   - ./.git:/home/node/app/.git
   - ./cache:/home/node/app/cache
-  - ./packages/manager:/home/node/app/packages/manager
-  - ./packages/validation:/home/node/app/packages/validation
-  - ./packages/api-v4:/home/node/app/packages/api-v4
+  - ./packages:/home/node/app/packages
   - ./package.json:/home/node/app/package.json
   - ./node_modules:/home/node/app/node_modules
 

packages/manager/.changeset/pr-11092-tech-stories-1728680192850.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Moved `src/foundations` directory from `manager` package to new `ui` package ([#11092](https://github.com/linode/manager/pull/11092))

packages/manager/cypress/support/component/setup.tsx

@@ -13,22 +13,21 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-import * as React from 'react';
+import { queryClientFactory } from '@src/queries/base';
+import { QueryClientProvider } from '@tanstack/react-query';
+import '@testing-library/cypress/add-commands';
+import 'cypress-axe';
 import { mount } from 'cypress/react18';
-
-import { Provider } from 'react-redux';
 import { LDProvider } from 'launchdarkly-react-client-sdk';
-import { QueryClientProvider } from '@tanstack/react-query';
-import { queryClientFactory } from '@src/queries/base';
-import { LinodeThemeWrapper } from 'src/LinodeThemeWrapper';
 import { SnackbarProvider } from 'notistack';
+import * as React from 'react';
+import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
-import { storeFactory } from 'src/store';
 
-import '@testing-library/cypress/add-commands';
-import { ThemeName } from 'src/foundations/themes';
+import { LinodeThemeWrapper } from 'src/LinodeThemeWrapper';
+import { storeFactory } from 'src/store';
 
-import 'cypress-axe';
+import type { ThemeName } from '@linode/ui';
 
 /**
  * Mounts a component with a Cloud Manager theme applied.

packages/manager/cypress/support/util/components.ts

@@ -2,8 +2,8 @@
  * @file Utilities for component testing.
  */
 
-import { MountReturn } from 'cypress/react18';
-import type { ThemeName } from 'src/foundations/themes';
+import type { ThemeName } from '@linode/ui';
+import type { MountReturn } from 'cypress/react18';
 
 /**
  * Array of themes for which to test components.

packages/manager/src/LinodeThemeWrapper.tsx

@@ -1,9 +1,10 @@
 import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
 import * as React from 'react';
 
-import { ThemeName } from './foundations/themes';
 import { themes, useColorMode } from './utilities/theme';
 
+import type { ThemeName } from '@linode/ui';
+
 interface Props {
   children: React.ReactNode;
   /** Allows theme to be overwritten. Used for Storybook theme switching */

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

@@ -1,7 +1,6 @@
+import { latoWeb } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
-import { latoWeb } from 'src/foundations/fonts';
-
 import { Button } from './Button';
 
 /**

packages/manager/src/components/HighlightedMarkdown/HighlightedMarkdown.tsx

@@ -14,7 +14,7 @@ import { unsafe_MarkdownIt } from 'src/utilities/markdown';
 import { sanitizeHTML } from 'src/utilities/sanitizeHTML';
 import { useColorMode } from 'src/utilities/theme';
 
-import type { ThemeName } from 'src/foundations/themes';
+import type { ThemeName } from '@linode/ui';
 import type { SanitizeOptions } from 'src/utilities/sanitizeHTML';
 
 hljs.registerLanguage('apache', apache);

packages/manager/src/components/PrimaryNav/SideMenu.test.tsx

@@ -1,7 +1,7 @@
+import { breakpoints } from '@linode/ui';
 import { fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 
-import { breakpoints } from 'src/foundations/breakpoints';
 import { renderWithTheme, resizeScreenSize } from 'src/utilities/testHelpers';
 
 import { SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_WIDTH, SideMenu } from './SideMenu';

packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.test.tsx

@@ -1,21 +1,19 @@
+import { breakpoints } from '@linode/ui';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import * as React from 'react';
 
 import { extendedTypeFactory } from 'src/factories/types';
 import { LIMITED_AVAILABILITY_COPY } from 'src/features/components/PlansPanel/constants';
-import { breakpoints } from 'src/foundations/breakpoints';
+import { PlanWithAvailability } from 'src/features/components/PlansPanel/types';
 import {
   renderWithTheme,
   resizeScreenSize,
   wrapWithTableBody,
 } from 'src/utilities/testHelpers';
 
-import {
-  KubernetesPlanSelection,
-  KubernetesPlanSelectionProps,
-} from './KubernetesPlanSelection';
+import { KubernetesPlanSelection } from './KubernetesPlanSelection';
 
-import type { PlanWithAvailability } from 'src/features/components/PlansPanel/types';
+import type { KubernetesPlanSelectionProps } from './KubernetesPlanSelection';
 
 const planHeader = 'Dedicated 20 GB';
 const baseHourlyPrice = '$0.015';

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

@@ -1,3 +1,4 @@
+import { inputMaxWidth } from '@linode/ui';
 import React from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
@@ -15,7 +16,6 @@ import { Paper } from 'src/components/Paper';
 import { getIsDistributedRegion } from 'src/components/RegionSelect/RegionSelect.utils';
 import { Skeleton } from 'src/components/Skeleton';
 import { Typography } from 'src/components/Typography';
-import { inputMaxWidth } from 'src/foundations/themes/light';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 

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

@@ -1,3 +1,4 @@
+import { inputMaxWidth } from '@linode/ui';
 import React, { useState } from 'react';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 
@@ -20,7 +21,6 @@ import {
   VPC_AUTO_ASSIGN_IPV4_TOOLTIP,
 } from 'src/features/VPCs/constants';
 import { VPCCreateDrawer } from 'src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer';
-import { inputMaxWidth } from 'src/foundations/themes/light';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 import { useVPCQuery, useVPCsQuery } from 'src/queries/vpcs/vpcs';
 import { sendLinodeCreateFormInputEvent } from 'src/utilities/analytics/formEventAnalytics';

packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerTableRow.test.tsx

@@ -1,8 +1,8 @@
+import { breakpoints } from '@linode/ui';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
 import { nodeBalancerFactory } from 'src/factories';
-import { breakpoints } from 'src/foundations/breakpoints';
 import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 import { renderWithTheme, resizeScreenSize } from 'src/utilities/testHelpers';
 

packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.test.tsx

@@ -1,11 +1,11 @@
+import { breakpoints } from '@linode/ui';
 import { render, screen } from '@testing-library/react';
 import * as React from 'react';
 
 import {
   supportReplyFactory,
   supportTicketFactory,
 } from 'src/factories/support';
-import { breakpoints } from 'src/foundations/breakpoints';
 import { makeResourcePage } from 'src/mocks/serverHandlers';
 import { HttpResponse, http, server } from 'src/mocks/testServer';
 import {

packages/manager/src/features/components/PlansPanel/PlanSelection.test.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@linode/ui';
 import { fireEvent, waitFor } from '@testing-library/react';
 import React from 'react';
 
@@ -6,10 +7,9 @@ import {
   planSelectionTypeFactory,
 } from 'src/factories/types';
 import { LIMITED_AVAILABILITY_COPY } from 'src/features/components/PlansPanel/constants';
-import { breakpoints } from 'src/foundations/breakpoints';
+import { renderWithTheme } from 'src/utilities/testHelpers';
 import { resizeScreenSize } from 'src/utilities/testHelpers';
 import { wrapWithTableBody } from 'src/utilities/testHelpers';
-import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { PlanSelection } from './PlanSelection';
 

packages/manager/src/utilities/theme.ts

@@ -1,12 +1,12 @@
-import { Theme } from '@mui/material/styles';
+import { dark, light } from '@linode/ui';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
-import { dark, light } from 'src/foundations/themes';
-
-import type { ThemeName } from 'src/foundations/themes';
 import { useAuthentication } from 'src/hooks/useAuthentication';
 import { usePreferences } from 'src/queries/profile/preferences';
 
+import type { ThemeName } from '@linode/ui';
+import type { Theme } from '@mui/material/styles';
+
 export type ThemeChoice = 'dark' | 'light' | 'system';
 
 export const themes: Record<ThemeName, Theme> = { dark, light };

packages/ui/.changeset/pr-11092-added-1728931799888.md

@@ -0,0 +1,5 @@
+---
+"@linode/ui": Added
+---
+
+Themes, fonts, and breakpoints previously located in `manager` package ([#11092](https://github.com/linode/manager/pull/11092))

packages/ui/src/foundations/index.ts

@@ -0,0 +1,3 @@
+export * from './breakpoints';
+export * from './fonts';
+export * from './themes';

packages/manager/src/foundations/themes/dark.ts → packages/ui/src/foundations/themes/dark.ts

@@ -10,8 +10,8 @@ import {
   TextField,
 } from '@linode/design-language-system/themes/dark';
 
-import { breakpoints } from 'src/foundations/breakpoints';
-import { latoWeb } from 'src/foundations/fonts';
+import { breakpoints } from '../breakpoints';
+import { latoWeb } from '../fonts';
 
 import type { ThemeOptions } from '@mui/material/styles';
 

packages/manager/src/foundations/themes/index.ts → packages/ui/src/foundations/themes/index.ts

@@ -1,27 +1,27 @@
 import { createTheme } from '@mui/material/styles';
 
 // Themes & Brands
-import { darkTheme } from 'src/foundations/themes/dark';
-import { lightTheme } from 'src/foundations/themes/light';
+import { darkTheme } from './dark';
+import { lightTheme, inputMaxWidth as _inputMaxWidth } from './light';
 
 import type {
   ChartTypes,
   InteractionTypes as InteractionTypesLight,
 } from '@linode/design-language-system';
 import type { InteractionTypes as InteractionTypesDark } from '@linode/design-language-system/themes/dark';
-import type { latoWeb } from 'src/foundations/fonts';
+import type { latoWeb } from '../fonts';
 // Types & Interfaces
 import type {
   customDarkModeOptions,
   notificationToast as notificationToastDark,
-} from 'src/foundations/themes/dark';
+} from './dark';
 import type {
   bg,
   borderColors,
   color,
   notificationToast,
   textColors,
-} from 'src/foundations/themes/light';
+} from './light';
 
 export type ThemeName = 'dark' | 'light';
 
@@ -105,5 +105,6 @@ declare module '@mui/material/styles/createTheme' {
   }
 }
 
+export const inputMaxWidth = _inputMaxWidth;
 export const light = createTheme(lightTheme);
 export const dark = createTheme(lightTheme, darkTheme);

packages/manager/src/foundations/themes/light.ts → packages/ui/src/foundations/themes/light.ts

@@ -10,8 +10,8 @@ import {
   Select,
 } from '@linode/design-language-system';
 
-import { breakpoints } from 'src/foundations/breakpoints';
-import { latoWeb } from 'src/foundations/fonts';
+import { breakpoints } from '../breakpoints';
+import { latoWeb } from '../fonts';
 
 import type { ThemeOptions } from '@mui/material/styles';
 

packages/ui/src/index.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './foundations';