diff --git a/docker-compose.yml b/docker-compose.yml index 5285fdd036d..494f64db0de 100644 --- a/docker-compose.yml +++ b/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 diff --git a/packages/manager/.changeset/pr-11092-tech-stories-1728680192850.md b/packages/manager/.changeset/pr-11092-tech-stories-1728680192850.md new file mode 100644 index 00000000000..6add695d908 --- /dev/null +++ b/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)) diff --git a/packages/manager/cypress/support/component/setup.tsx b/packages/manager/cypress/support/component/setup.tsx index cb1e039d375..33b816548fc 100644 --- a/packages/manager/cypress/support/component/setup.tsx +++ b/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. diff --git a/packages/manager/cypress/support/util/components.ts b/packages/manager/cypress/support/util/components.ts index 0fe9bd25692..ce2e95794da 100644 --- a/packages/manager/cypress/support/util/components.ts +++ b/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. diff --git a/packages/manager/src/LinodeThemeWrapper.tsx b/packages/manager/src/LinodeThemeWrapper.tsx index 74e5d054aec..bbae51a017f 100644 --- a/packages/manager/src/LinodeThemeWrapper.tsx +++ b/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 */ diff --git a/packages/manager/src/components/Button/StyledActionButton.ts b/packages/manager/src/components/Button/StyledActionButton.ts index 008257f5a50..6753b8408db 100644 --- a/packages/manager/src/components/Button/StyledActionButton.ts +++ b/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'; /** diff --git a/packages/manager/src/components/HighlightedMarkdown/HighlightedMarkdown.tsx b/packages/manager/src/components/HighlightedMarkdown/HighlightedMarkdown.tsx index dc9e9cc87c1..95f9aa966d1 100644 --- a/packages/manager/src/components/HighlightedMarkdown/HighlightedMarkdown.tsx +++ b/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); diff --git a/packages/manager/src/components/PrimaryNav/SideMenu.test.tsx b/packages/manager/src/components/PrimaryNav/SideMenu.test.tsx index 089201f2414..4f011df2392 100644 --- a/packages/manager/src/components/PrimaryNav/SideMenu.test.tsx +++ b/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'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.test.tsx b/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.test.tsx index 5fa50d0d33f..d21b6d35cc8 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesPlansPanel/KubernetesPlanSelection.test.tsx +++ b/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'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/Security.tsx b/packages/manager/src/features/Linodes/LinodeCreate/Security.tsx index 547f26f4422..36c86b2c3dc 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/Security.tsx +++ b/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'; diff --git a/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx b/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx index 9656629d303..483cb67c548 100644 --- a/packages/manager/src/features/Linodes/LinodeCreate/VPC/VPC.tsx +++ b/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'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerTableRow.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerTableRow.test.tsx index f09fae2088d..32d60ff80d6 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancersLanding/NodeBalancerTableRow.test.tsx +++ b/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'; diff --git a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.test.tsx b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.test.tsx index 1f106e874ac..2a63dd161f3 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.test.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.test.tsx @@ -1,3 +1,4 @@ +import { breakpoints } from '@linode/ui'; import { render, screen } from '@testing-library/react'; import * as React from 'react'; @@ -5,7 +6,6 @@ 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 { diff --git a/packages/manager/src/features/components/PlansPanel/PlanSelection.test.tsx b/packages/manager/src/features/components/PlansPanel/PlanSelection.test.tsx index e141aaa62d2..09e4048ed6d 100644 --- a/packages/manager/src/features/components/PlansPanel/PlanSelection.test.tsx +++ b/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'; diff --git a/packages/manager/src/utilities/theme.ts b/packages/manager/src/utilities/theme.ts index 9c2257c6ddb..7de52ec1697 100644 --- a/packages/manager/src/utilities/theme.ts +++ b/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 = { dark, light }; diff --git a/packages/ui/.changeset/pr-11092-added-1728931799888.md b/packages/ui/.changeset/pr-11092-added-1728931799888.md new file mode 100644 index 00000000000..97433b22de6 --- /dev/null +++ b/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)) diff --git a/packages/manager/src/foundations/breakpoints.ts b/packages/ui/src/foundations/breakpoints.ts similarity index 100% rename from packages/manager/src/foundations/breakpoints.ts rename to packages/ui/src/foundations/breakpoints.ts diff --git a/packages/manager/src/foundations/fonts.ts b/packages/ui/src/foundations/fonts.ts similarity index 100% rename from packages/manager/src/foundations/fonts.ts rename to packages/ui/src/foundations/fonts.ts diff --git a/packages/ui/src/foundations/index.ts b/packages/ui/src/foundations/index.ts new file mode 100644 index 00000000000..29d492e9c07 --- /dev/null +++ b/packages/ui/src/foundations/index.ts @@ -0,0 +1,3 @@ +export * from './breakpoints'; +export * from './fonts'; +export * from './themes'; diff --git a/packages/manager/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts similarity index 99% rename from packages/manager/src/foundations/themes/dark.ts rename to packages/ui/src/foundations/themes/dark.ts index 8025974c2fb..a4ffa1f4ba6 100644 --- a/packages/manager/src/foundations/themes/dark.ts +++ b/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'; diff --git a/packages/manager/src/foundations/themes/index.ts b/packages/ui/src/foundations/themes/index.ts similarity index 92% rename from packages/manager/src/foundations/themes/index.ts rename to packages/ui/src/foundations/themes/index.ts index a04bb90c75f..a874f0c0bba 100644 --- a/packages/manager/src/foundations/themes/index.ts +++ b/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); diff --git a/packages/manager/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts similarity index 99% rename from packages/manager/src/foundations/themes/light.ts rename to packages/ui/src/foundations/themes/light.ts index 713381b6bb0..b42e5ade10d 100644 --- a/packages/manager/src/foundations/themes/light.ts +++ b/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'; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 07635cbbc8e..43f9ba85b57 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1 +1,2 @@ export * from './components'; +export * from './foundations';