From ec88f28c6f4da397f3d7d46b1c233cfddc662efa Mon Sep 17 00:00:00 2001 From: Anemy Date: Mon, 28 Feb 2022 16:22:41 -0500 Subject: [PATCH 01/13] Add theme HOC --- .../src/hooks/use-theme.tsx | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/compass-components/src/hooks/use-theme.tsx b/packages/compass-components/src/hooks/use-theme.tsx index 99868fd49f6..ad3f8b3f6fd 100644 --- a/packages/compass-components/src/hooks/use-theme.tsx +++ b/packages/compass-components/src/hooks/use-theme.tsx @@ -1,6 +1,6 @@ import React, { createContext, useContext } from 'react'; -export enum Theme { +enum Theme { Light = 'Light', Dark = 'Dark', } @@ -29,4 +29,27 @@ function useTheme(): ThemeState { return useContext(ThemeContext); } -export { useTheme, ThemeProvider }; +// High Order Component(HOC) used to inject Compass' theme pulled from the +// available ThemeProvider on the React context into the wrapped component. +function withTheme( + WrappedComponent: React.ComponentType +): (props: T) => JSX.Element { + const ComponentWithTheme = (props: T) => { + const theme = useTheme(); + + return ; + }; + + const displayName = + WrappedComponent.displayName || WrappedComponent.name || 'Component'; + ComponentWithTheme.displayName = `withTheme(${displayName})`; + + return ComponentWithTheme; +} + +export { Theme, ThemeProvider, useTheme, withTheme }; From 45c56a88fd91ef0fc8a47fae5160580d0994db59 Mon Sep 17 00:00:00 2001 From: Anemy Date: Tue, 1 Mar 2022 17:23:15 -0500 Subject: [PATCH 02/13] Add wraps around lg --- .../src/components/leafygreen/index.ts | 150 ++++++++++++++++++ .../src/components/toggle.tsx | 29 +++- .../src/hooks/use-theme.tsx | 14 +- packages/compass-components/src/index.ts | 47 +----- packages/compass/src/app/theme.js | 2 +- 5 files changed, 194 insertions(+), 48 deletions(-) create mode 100644 packages/compass-components/src/components/leafygreen/index.ts diff --git a/packages/compass-components/src/components/leafygreen/index.ts b/packages/compass-components/src/components/leafygreen/index.ts new file mode 100644 index 00000000000..5cfe0f32d89 --- /dev/null +++ b/packages/compass-components/src/components/leafygreen/index.ts @@ -0,0 +1,150 @@ +import { withTheme } from '../../hooks/use-theme'; + +// This file wraps the leafygreen-ui packages with +// a listener to Compass' theme in the react context. + + +// 1. Import the components we use from leafygreen. +import { + default as LeafyGreenBadge, +} from '@leafygreen-ui/badge'; +import { + default as LeafyGreenBanner, +} from '@leafygreen-ui/banner'; +import { + default as LeafyGreenButton +} from '@leafygreen-ui/button'; +import { default as LeafyGreenCard } from '@leafygreen-ui/card'; +import { default as LeafyGreenIcon } from '@leafygreen-ui/icon'; +import { default as LeafyGreenIconButton } from '@leafygreen-ui/icon-button'; +import { + AtlasLogoMark as LeafyGreenAtlasLogoMark, + MongoDBLogoMark as LeafyGreenMongoDBLogoMark, + MongoDBLogo as LeafyGreenMongoDBLogo, +} from '@leafygreen-ui/logo'; +import { Menu as LeafyGreenMenu, MenuSeparator as LeafyGreenMenuSeparator, MenuItem as LeafyGreenMenuItem } from '@leafygreen-ui/menu'; +import { RadioBox as LeafyGreenRadioBox } from '@leafygreen-ui/radio-box-group'; +import { Radio as LeafyGreenRadio, RadioGroup as LeafyGreenRadioGroup } from '@leafygreen-ui/radio-group'; +import { + SegmentedControl as LeafyGreenSegmentedControl, + SegmentedControlOption as LeafyGreenSegmentedControlOption, +} from '@leafygreen-ui/segmented-control'; +import { + Select as LeafyGreenSelect, + Option as LeafyGreenOption, + OptionGroup as LeafyGreenOptionGroup, +} from '@leafygreen-ui/select'; +import { Table as LeafyGreenTable, TableHeader as LeafyGreenTableHeader, Row as LeafyGreenRow, Cell as LeafyGreenCell } from '@leafygreen-ui/table'; +import { Tabs as LeafyGreenTabs, Tab as LeafyGreenTab } from '@leafygreen-ui/tabs'; +import { default as LeafyGreenTextArea } from '@leafygreen-ui/text-area'; +import { default as LeafyGreenTextInput } from '@leafygreen-ui/text-input'; +import { + default as LeafyGreenToast, +} from '@leafygreen-ui/toast'; +import { default as LeafyGreenToggle } from '@leafygreen-ui/toggle'; +import { + H1 as LeafyGreenH1, + H2 as LeafyGreenH2, + H3 as LeafyGreenH3, + Subtitle as LeafyGreenSubtitle, + Body as LeafyGreenBody, + InlineCode as LeafyGreenInlineCode, + InlineKeyCode as LeafyGreenInlineKeyCode, + Disclaimer as LeafyGreenDisclaimer, + Overline as LeafyGreenOverline, + Label as LeafyGreenLabel, + Link as LeafyGreenLink, + Description as LeafyGreenDescription, +} from '@leafygreen-ui/typography'; + +// 2. Wrap the components with Compass' theme. +const Badge = withTheme(LeafyGreenBadge); +const Banner = withTheme(LeafyGreenBanner); +const Button = withTheme(LeafyGreenButton); +const Card = withTheme(LeafyGreenCard); +const Icon = withTheme(LeafyGreenIcon); +const IconButton = withTheme(LeafyGreenIconButton); +const AtlasLogoMark = withTheme(LeafyGreenAtlasLogoMark); +const MongoDBLogoMark = withTheme(LeafyGreenMongoDBLogoMark); +const MongoDBLogo = withTheme(LeafyGreenMongoDBLogo); +const Menu = withTheme(LeafyGreenMenu); +const MenuItem = withTheme(LeafyGreenMenuItem); +const MenuSeparator = withTheme(LeafyGreenMenuSeparator); +const RadioBox = withTheme(LeafyGreenRadioBox); +const Radio = withTheme(LeafyGreenRadio); +const RadioGroup = withTheme(LeafyGreenRadioGroup); +const SegmentedControl = withTheme(LeafyGreenSegmentedControl); +const SegmentedControlOption = withTheme(LeafyGreenSegmentedControlOption); +const Select = withTheme(LeafyGreenSelect); +const Option = withTheme(LeafyGreenOption); +const OptionGroup = withTheme(LeafyGreenOptionGroup); +const Table = withTheme(LeafyGreenTable); +const TableHeader = withTheme(LeafyGreenTableHeader); +const Row = withTheme(LeafyGreenRow); +const Cell = withTheme(LeafyGreenCell); +const Tab = withTheme(LeafyGreenTab); +const Tabs = withTheme(LeafyGreenTabs); +const TextArea = withTheme(LeafyGreenTextArea); +const TextInput = withTheme(LeafyGreenTextInput); +const Toast = withTheme(LeafyGreenToast); +const Toggle = withTheme(LeafyGreenToggle); + +const H1 = withTheme(LeafyGreenH1); +const H2 = withTheme(LeafyGreenH2); +const H3 = withTheme(LeafyGreenH3); +const Subtitle = withTheme(LeafyGreenSubtitle); +const Body = withTheme(LeafyGreenBody); +const InlineCode = withTheme(LeafyGreenInlineCode); +const InlineKeyCode = withTheme(LeafyGreenInlineKeyCode); +const Disclaimer = withTheme(LeafyGreenDisclaimer); +const Overline = withTheme(LeafyGreenOverline); +const Label = withTheme(LeafyGreenLabel); +const Link = withTheme(LeafyGreenLink); +const Description = withTheme(LeafyGreenDescription); + +// 3. Export leafygreen components. + +export { + Badge, + Banner, + Button, + Card, + Icon, + IconButton, + AtlasLogoMark, + MongoDBLogoMark, + MongoDBLogo, + Menu, + MenuItem, + MenuSeparator, + RadioBox, + Radio, + RadioGroup, + SegmentedControl, + SegmentedControlOption, + Select, + Option, + OptionGroup, + Table, + TableHeader, + Row, + Cell, + Tab, + Tabs, + TextArea, + TextInput, + Toast, + Toggle, + H1, + H2, + H3, + Subtitle, + Body, + InlineCode, + InlineKeyCode, + Disclaimer, + Overline, + Label, + Link, + Description, +}; diff --git a/packages/compass-components/src/components/toggle.tsx b/packages/compass-components/src/components/toggle.tsx index 6f50a3bc2df..431eea95de4 100644 --- a/packages/compass-components/src/components/toggle.tsx +++ b/packages/compass-components/src/components/toggle.tsx @@ -1,7 +1,16 @@ import React from 'react'; -import LeafyGreenToggle from '@leafygreen-ui/toggle'; +import { Toggle as LeafyGreenToggle } from './leafygreen'; import { Theme, useTheme } from '../hooks/use-theme'; +// import { withTheme } from '../hooks/use-theme'; + +// function Toggle( +// props: React.ComponentProps +// ): ReturnType { +// const theme = useTheme(); + +// return ; +// } function Toggle( props: React.ComponentProps @@ -11,4 +20,22 @@ function Toggle( return ; } +// LeafyGreenToggle +// const Toggle = withTheme>(LeafyGreenToggle); +// const Toggle = withTheme(LeafyGreenToggle); +// const Toggle = withTheme>(LeafyGreenToggle); +// const Toggle = withTheme(LeafyGreenToggle); +// const Toggle = withTheme(LeafyGreenToggle); +// const toggle = withTheme(LeafyGreenToggle as any); +// : React.ComponentType +// const Toggle = withTheme(LeafyGreenToggle); + +// function aa() { +// return ( +// +// ) +// } + export { Toggle }; diff --git a/packages/compass-components/src/hooks/use-theme.tsx b/packages/compass-components/src/hooks/use-theme.tsx index ad3f8b3f6fd..e77588a9073 100644 --- a/packages/compass-components/src/hooks/use-theme.tsx +++ b/packages/compass-components/src/hooks/use-theme.tsx @@ -37,12 +37,14 @@ function withTheme( const ComponentWithTheme = (props: T) => { const theme = useTheme(); - return ; + return ( + + ); }; const displayName = diff --git a/packages/compass-components/src/index.ts b/packages/compass-components/src/index.ts index d581a5d1199..ac2c2824498 100644 --- a/packages/compass-components/src/index.ts +++ b/packages/compass-components/src/index.ts @@ -1,3 +1,5 @@ +export * from './components/leafygreen'; + export { default as emotion, flush, @@ -21,47 +23,29 @@ import { ResizeHandle, ResizeDirection } from './components/resize-handle'; import Accordion from './components/accordion'; export { FavoriteIcon } from './components/icons/favorite-icon'; export { - default as Badge, Variant as BadgeVariant, } from '@leafygreen-ui/badge'; export { Footer } from '@leafygreen-ui/modal'; export { - default as Banner, Variant as BannerVariant, } from '@leafygreen-ui/banner'; export { - default as Button, Size as ButtonSize, Variant as ButtonVariant, } from '@leafygreen-ui/button'; -export { default as Card } from '@leafygreen-ui/card'; + export { Checkbox } from './components/checkbox'; -export { default as Icon } from '@leafygreen-ui/icon'; -export { default as IconButton } from '@leafygreen-ui/icon-button'; export { default as LeafyGreenProvider } from '@leafygreen-ui/leafygreen-provider'; -export { - AtlasLogoMark, - MongoDBLogoMark, - MongoDBLogo, -} from '@leafygreen-ui/logo'; -export { Menu, MenuSeparator, MenuItem } from '@leafygreen-ui/menu'; + export { uiColors } from '@leafygreen-ui/palette'; export * as compassFontSizes from './compass-font-sizes'; export * as compassUIColors from './compass-ui-colors'; export { default as Portal } from '@leafygreen-ui/portal'; -export { RadioBox, Size as RadioBoxSize } from '@leafygreen-ui/radio-box-group'; -export { Radio, RadioGroup } from '@leafygreen-ui/radio-group'; +export { Size as RadioBoxSize } from '@leafygreen-ui/radio-box-group'; export { - Select, - Option, - OptionGroup, Size as SelectSize, } from '@leafygreen-ui/select'; -export { Tabs, Tab } from '@leafygreen-ui/tabs'; -export { default as TextArea } from '@leafygreen-ui/text-area'; -export { default as TextInput } from '@leafygreen-ui/text-input'; export { - default as Toast, Variant as ToastVariant, } from '@leafygreen-ui/toast'; @@ -71,20 +55,7 @@ export { Toggle } from './components/toggle'; export { breakpoints, spacing } from '@leafygreen-ui/tokens'; export { Tooltip } from './components/tooltip'; -export { - H1, - H2, - H3, - Subtitle, - Body, - InlineCode, - InlineKeyCode, - Disclaimer, - Overline, - Label, - Link, - Description, -} from '@leafygreen-ui/typography'; + export { Accordion, CancelLoader, @@ -109,15 +80,11 @@ export { export { InlineDefinition } from './components/inline-definition'; import type { glyphs } from '@leafygreen-ui/icon'; export type IconGlyph = Extract; -export { - SegmentedControl, - SegmentedControlOption, -} from '@leafygreen-ui/segmented-control'; + export { ErrorBoundary } from './components/error-boundary'; export { InlineInfoLink } from './components/inline-info-link'; export { Placeholder } from './components/placeholder'; export { useDOMRect } from './hooks/use-dom-rect'; -export { Table, TableHeader, Row, Cell } from '@leafygreen-ui/table'; export { VirtualGrid } from './components/virtual-grid'; export { mergeProps } from './utils/merge-props'; export { useFocusRing } from './hooks/use-focus-ring'; diff --git a/packages/compass/src/app/theme.js b/packages/compass/src/app/theme.js index 276828e3d6f..64082d0a8dc 100644 --- a/packages/compass/src/app/theme.js +++ b/packages/compass/src/app/theme.js @@ -12,7 +12,7 @@ function enableDarkTheme() { global.hadronApp.theme = Theme.Dark; global.hadronApp.appRegistry?.emit('darkmode-enable'); - darkreader.enable(darkreaderOptions); + // darkreader.enable(darkreaderOptions); } function disableDarkTheme() { From 5a5b5b60c859d173d5c68a2da3b54a3e8db95ec0 Mon Sep 17 00:00:00 2001 From: Anemy Date: Wed, 2 Mar 2022 11:06:20 -0500 Subject: [PATCH 03/13] dont enable darkreader when flag is on, use wrapped components in other compass-components --- .../src/components/accordion.tsx | 2 +- .../src/components/checkbox.tsx | 13 +- .../src/components/confirmation-modal.tsx | 3 +- .../src/components/error-boundary.tsx | 3 +- .../src/components/file-input.tsx | 9 +- .../src/components/inline-definition.tsx | 2 +- .../src/components/inline-info-link.tsx | 4 +- .../src/components/leafygreen.ts | 136 ++++++++++++++++ .../src/components/leafygreen/index.ts | 150 ------------------ .../src/components/modal.tsx | 3 +- .../src/components/radio-box-group.tsx | 3 +- .../src/components/tooltip.tsx | 2 +- .../src/hooks/use-theme.tsx | 4 +- packages/compass-components/src/index.ts | 17 +- packages/compass/src/app/theme.js | 4 +- packages/compass/src/index.d.ts | 7 + .../general-tab/scheme-input.tsx | 4 +- 17 files changed, 178 insertions(+), 188 deletions(-) create mode 100644 packages/compass-components/src/components/leafygreen.ts delete mode 100644 packages/compass-components/src/components/leafygreen/index.ts diff --git a/packages/compass-components/src/components/accordion.tsx b/packages/compass-components/src/components/accordion.tsx index d0ea0b8508a..076998d037a 100644 --- a/packages/compass-components/src/components/accordion.tsx +++ b/packages/compass-components/src/components/accordion.tsx @@ -1,10 +1,10 @@ import React, { useState } from 'react'; import { spacing } from '@leafygreen-ui/tokens'; import { css } from '@leafygreen-ui/emotion'; -import Icon from '@leafygreen-ui/icon'; import { uiColors } from '@leafygreen-ui/palette'; import { useId } from '@react-aria/utils'; +import { Icon } from './leafygreen'; import { defaultFontSize } from '../compass-font-sizes'; const buttonStyles = css({ diff --git a/packages/compass-components/src/components/checkbox.tsx b/packages/compass-components/src/components/checkbox.tsx index 8e345a75675..abcd3316996 100644 --- a/packages/compass-components/src/components/checkbox.tsx +++ b/packages/compass-components/src/components/checkbox.tsx @@ -1,24 +1,15 @@ import React from 'react'; -import LeafyGreenCheckbox from '@leafygreen-ui/checkbox'; -import { css } from '@leafygreen-ui/emotion'; +import { Checkbox as LeafyGreenCheckbox } from './leafygreen'; import { Theme, useTheme } from '../hooks/use-theme'; -const checkboxOverrideStyles = css({ - fontWeight: 'bold', -}); - function Checkbox( props: React.ComponentProps ): ReturnType { const theme = useTheme(); return ( - + ); } diff --git a/packages/compass-components/src/components/confirmation-modal.tsx b/packages/compass-components/src/components/confirmation-modal.tsx index b844d45482c..922729b8041 100644 --- a/packages/compass-components/src/components/confirmation-modal.tsx +++ b/packages/compass-components/src/components/confirmation-modal.tsx @@ -1,8 +1,9 @@ import React, { useEffect } from 'react'; -import LeafyGreenConfirmationModal from '@leafygreen-ui/confirmation-modal'; import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging'; const { track } = createLoggerAndTelemetry('COMPASS-UI'); +import { ConfirmationModal as LeafyGreenConfirmationModal } from './leafygreen'; + function ConfirmationModal({ trackingId, ...props diff --git a/packages/compass-components/src/components/error-boundary.tsx b/packages/compass-components/src/components/error-boundary.tsx index 67ef3f7c880..2314ffb0093 100644 --- a/packages/compass-components/src/components/error-boundary.tsx +++ b/packages/compass-components/src/components/error-boundary.tsx @@ -1,9 +1,10 @@ import type { ErrorInfo } from 'react'; import React from 'react'; -import Banner from '@leafygreen-ui/banner'; import { css } from '@leafygreen-ui/emotion'; import { spacing } from '@leafygreen-ui/tokens'; +import { Banner } from './leafygreen'; + const errorContainerStyles = css({ padding: spacing[3], width: '100%', diff --git a/packages/compass-components/src/components/file-input.tsx b/packages/compass-components/src/components/file-input.tsx index ad42153a5a5..b1b20158e6c 100644 --- a/packages/compass-components/src/components/file-input.tsx +++ b/packages/compass-components/src/components/file-input.tsx @@ -4,7 +4,14 @@ import { css, cx } from '@leafygreen-ui/emotion'; import { uiColors } from '@leafygreen-ui/palette'; import { spacing } from '@leafygreen-ui/tokens'; -import { Button, Icon, IconButton, Label, Link, Description } from '..'; +import { + Button, + Icon, + IconButton, + Label, + Link, + Description, +} from './leafygreen'; const { base: redBaseColor } = uiColors.red; diff --git a/packages/compass-components/src/components/inline-definition.tsx b/packages/compass-components/src/components/inline-definition.tsx index 51a941335c2..c973d42486c 100644 --- a/packages/compass-components/src/components/inline-definition.tsx +++ b/packages/compass-components/src/components/inline-definition.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ import React from 'react'; -import { Body } from '@leafygreen-ui/typography'; import { css } from '@leafygreen-ui/emotion'; +import { Body } from './leafygreen'; import { Tooltip } from './tooltip'; import { mergeProps } from '../utils/merge-props'; diff --git a/packages/compass-components/src/components/inline-info-link.tsx b/packages/compass-components/src/components/inline-info-link.tsx index 6ef75151126..ad715f5e255 100644 --- a/packages/compass-components/src/components/inline-info-link.tsx +++ b/packages/compass-components/src/components/inline-info-link.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { css } from '@leafygreen-ui/emotion'; import { spacing } from '@leafygreen-ui/tokens'; -import IconButton from '@leafygreen-ui/icon-button'; -import Icon from '@leafygreen-ui/icon'; + +import { Icon, IconButton } from './leafygreen'; const infoButtonStyles = css({ marginTop: -spacing[2], diff --git a/packages/compass-components/src/components/leafygreen.ts b/packages/compass-components/src/components/leafygreen.ts new file mode 100644 index 00000000000..37bf893904e --- /dev/null +++ b/packages/compass-components/src/components/leafygreen.ts @@ -0,0 +1,136 @@ +import { withTheme } from '../hooks/use-theme'; + +// This file exports `@leafygreen-ui` components and wraps some of +// them with a listener to Compass' theme in the react context. + +// 1. Import the components we use from leafygreen. +import { default as Badge } from '@leafygreen-ui/badge'; +import { default as Banner } from '@leafygreen-ui/banner'; +import { default as LeafyGreenButton } from '@leafygreen-ui/button'; +import { default as LeafyGreenCheckbox } from '@leafygreen-ui/checkbox'; +import { default as LeafyGreenCard } from '@leafygreen-ui/card'; +import { default as LeafyGreenConfirmationModal } from '@leafygreen-ui/confirmation-modal'; +import { default as Icon } from '@leafygreen-ui/icon'; +import { default as LeafyGreenIconButton } from '@leafygreen-ui/icon-button'; +import { + AtlasLogoMark, + MongoDBLogoMark, + MongoDBLogo, +} from '@leafygreen-ui/logo'; +import { Menu, MenuSeparator, MenuItem } from '@leafygreen-ui/menu'; +import { + default as LeafyGreenModal, + Footer as LeafyGreenFooter, +} from '@leafygreen-ui/modal'; +import { RadioBox, RadioBoxGroup } from '@leafygreen-ui/radio-box-group'; +import { + Radio, + RadioGroup as LeafyGreenRadioGroup, +} from '@leafygreen-ui/radio-group'; +import { + SegmentedControl as LeafyGreenSegmentedControl, + SegmentedControlOption, +} from '@leafygreen-ui/segmented-control'; +import { + Select as LeafyGreenSelect, + Option, + OptionGroup, +} from '@leafygreen-ui/select'; +import { + Table as LeafyGreenTable, + TableHeader, + Row, + Cell, +} from '@leafygreen-ui/table'; +import { Tabs as LeafyGreenTabs, Tab } from '@leafygreen-ui/tabs'; +import { default as LeafyGreenTextArea } from '@leafygreen-ui/text-area'; +import { default as LeafyGreenTextInput } from '@leafygreen-ui/text-input'; +import { default as Toast } from '@leafygreen-ui/toast'; +import { default as LeafyGreenToggle } from '@leafygreen-ui/toggle'; +import { default as LeafyGreenTooltip } from '@leafygreen-ui/tooltip'; +import { + H1, + H2, + H3, + Subtitle, + Body, + InlineCode, + InlineKeyCode, + Disclaimer, + Overline, + Label as LeafyGreenLabel, + Link, + Description as LeafyGreenDescription, +} from '@leafygreen-ui/typography'; + +// 2. Wrap the components that accept darkMode with Compass' theme. +const Button = withTheme(LeafyGreenButton); +const Card = withTheme(LeafyGreenCard); +const Checkbox = withTheme(LeafyGreenCheckbox); +const ConfirmationModal = withTheme(LeafyGreenConfirmationModal); +const IconButton = withTheme(LeafyGreenIconButton); +const Footer = withTheme(LeafyGreenFooter); +const Modal = withTheme(LeafyGreenModal); +const RadioGroup = withTheme(LeafyGreenRadioGroup); +const SegmentedControl = withTheme(LeafyGreenSegmentedControl); +const Select = withTheme(LeafyGreenSelect); +const Table = withTheme(LeafyGreenTable); +const Tabs = withTheme(LeafyGreenTabs); +const TextArea = withTheme(LeafyGreenTextArea); +const TextInput = withTheme(LeafyGreenTextInput); +const Toggle = withTheme(LeafyGreenToggle); +const Tooltip = withTheme(LeafyGreenTooltip); +const Label = withTheme(LeafyGreenLabel); +const Description = withTheme(LeafyGreenDescription); + +// 3. Export the leafygreen components. +export { + AtlasLogoMark, + Badge, + Banner, + Button, + Card, + Checkbox, + ConfirmationModal, + Icon, + IconButton, + Footer, + Menu, + MenuItem, + MenuSeparator, + Modal, + MongoDBLogoMark, + MongoDBLogo, + RadioBox, + RadioBoxGroup, + Radio, + RadioGroup, + SegmentedControl, + SegmentedControlOption, + Select, + Option, + OptionGroup, + Table, + TableHeader, + Row, + Cell, + Tab, + Tabs, + TextArea, + TextInput, + Toast, + Toggle, + Tooltip, + H1, + H2, + H3, + Subtitle, + Body, + InlineCode, + InlineKeyCode, + Disclaimer, + Overline, + Label, + Link, + Description, +}; diff --git a/packages/compass-components/src/components/leafygreen/index.ts b/packages/compass-components/src/components/leafygreen/index.ts deleted file mode 100644 index 5cfe0f32d89..00000000000 --- a/packages/compass-components/src/components/leafygreen/index.ts +++ /dev/null @@ -1,150 +0,0 @@ -import { withTheme } from '../../hooks/use-theme'; - -// This file wraps the leafygreen-ui packages with -// a listener to Compass' theme in the react context. - - -// 1. Import the components we use from leafygreen. -import { - default as LeafyGreenBadge, -} from '@leafygreen-ui/badge'; -import { - default as LeafyGreenBanner, -} from '@leafygreen-ui/banner'; -import { - default as LeafyGreenButton -} from '@leafygreen-ui/button'; -import { default as LeafyGreenCard } from '@leafygreen-ui/card'; -import { default as LeafyGreenIcon } from '@leafygreen-ui/icon'; -import { default as LeafyGreenIconButton } from '@leafygreen-ui/icon-button'; -import { - AtlasLogoMark as LeafyGreenAtlasLogoMark, - MongoDBLogoMark as LeafyGreenMongoDBLogoMark, - MongoDBLogo as LeafyGreenMongoDBLogo, -} from '@leafygreen-ui/logo'; -import { Menu as LeafyGreenMenu, MenuSeparator as LeafyGreenMenuSeparator, MenuItem as LeafyGreenMenuItem } from '@leafygreen-ui/menu'; -import { RadioBox as LeafyGreenRadioBox } from '@leafygreen-ui/radio-box-group'; -import { Radio as LeafyGreenRadio, RadioGroup as LeafyGreenRadioGroup } from '@leafygreen-ui/radio-group'; -import { - SegmentedControl as LeafyGreenSegmentedControl, - SegmentedControlOption as LeafyGreenSegmentedControlOption, -} from '@leafygreen-ui/segmented-control'; -import { - Select as LeafyGreenSelect, - Option as LeafyGreenOption, - OptionGroup as LeafyGreenOptionGroup, -} from '@leafygreen-ui/select'; -import { Table as LeafyGreenTable, TableHeader as LeafyGreenTableHeader, Row as LeafyGreenRow, Cell as LeafyGreenCell } from '@leafygreen-ui/table'; -import { Tabs as LeafyGreenTabs, Tab as LeafyGreenTab } from '@leafygreen-ui/tabs'; -import { default as LeafyGreenTextArea } from '@leafygreen-ui/text-area'; -import { default as LeafyGreenTextInput } from '@leafygreen-ui/text-input'; -import { - default as LeafyGreenToast, -} from '@leafygreen-ui/toast'; -import { default as LeafyGreenToggle } from '@leafygreen-ui/toggle'; -import { - H1 as LeafyGreenH1, - H2 as LeafyGreenH2, - H3 as LeafyGreenH3, - Subtitle as LeafyGreenSubtitle, - Body as LeafyGreenBody, - InlineCode as LeafyGreenInlineCode, - InlineKeyCode as LeafyGreenInlineKeyCode, - Disclaimer as LeafyGreenDisclaimer, - Overline as LeafyGreenOverline, - Label as LeafyGreenLabel, - Link as LeafyGreenLink, - Description as LeafyGreenDescription, -} from '@leafygreen-ui/typography'; - -// 2. Wrap the components with Compass' theme. -const Badge = withTheme(LeafyGreenBadge); -const Banner = withTheme(LeafyGreenBanner); -const Button = withTheme(LeafyGreenButton); -const Card = withTheme(LeafyGreenCard); -const Icon = withTheme(LeafyGreenIcon); -const IconButton = withTheme(LeafyGreenIconButton); -const AtlasLogoMark = withTheme(LeafyGreenAtlasLogoMark); -const MongoDBLogoMark = withTheme(LeafyGreenMongoDBLogoMark); -const MongoDBLogo = withTheme(LeafyGreenMongoDBLogo); -const Menu = withTheme(LeafyGreenMenu); -const MenuItem = withTheme(LeafyGreenMenuItem); -const MenuSeparator = withTheme(LeafyGreenMenuSeparator); -const RadioBox = withTheme(LeafyGreenRadioBox); -const Radio = withTheme(LeafyGreenRadio); -const RadioGroup = withTheme(LeafyGreenRadioGroup); -const SegmentedControl = withTheme(LeafyGreenSegmentedControl); -const SegmentedControlOption = withTheme(LeafyGreenSegmentedControlOption); -const Select = withTheme(LeafyGreenSelect); -const Option = withTheme(LeafyGreenOption); -const OptionGroup = withTheme(LeafyGreenOptionGroup); -const Table = withTheme(LeafyGreenTable); -const TableHeader = withTheme(LeafyGreenTableHeader); -const Row = withTheme(LeafyGreenRow); -const Cell = withTheme(LeafyGreenCell); -const Tab = withTheme(LeafyGreenTab); -const Tabs = withTheme(LeafyGreenTabs); -const TextArea = withTheme(LeafyGreenTextArea); -const TextInput = withTheme(LeafyGreenTextInput); -const Toast = withTheme(LeafyGreenToast); -const Toggle = withTheme(LeafyGreenToggle); - -const H1 = withTheme(LeafyGreenH1); -const H2 = withTheme(LeafyGreenH2); -const H3 = withTheme(LeafyGreenH3); -const Subtitle = withTheme(LeafyGreenSubtitle); -const Body = withTheme(LeafyGreenBody); -const InlineCode = withTheme(LeafyGreenInlineCode); -const InlineKeyCode = withTheme(LeafyGreenInlineKeyCode); -const Disclaimer = withTheme(LeafyGreenDisclaimer); -const Overline = withTheme(LeafyGreenOverline); -const Label = withTheme(LeafyGreenLabel); -const Link = withTheme(LeafyGreenLink); -const Description = withTheme(LeafyGreenDescription); - -// 3. Export leafygreen components. - -export { - Badge, - Banner, - Button, - Card, - Icon, - IconButton, - AtlasLogoMark, - MongoDBLogoMark, - MongoDBLogo, - Menu, - MenuItem, - MenuSeparator, - RadioBox, - Radio, - RadioGroup, - SegmentedControl, - SegmentedControlOption, - Select, - Option, - OptionGroup, - Table, - TableHeader, - Row, - Cell, - Tab, - Tabs, - TextArea, - TextInput, - Toast, - Toggle, - H1, - H2, - H3, - Subtitle, - Body, - InlineCode, - InlineKeyCode, - Disclaimer, - Overline, - Label, - Link, - Description, -}; diff --git a/packages/compass-components/src/components/modal.tsx b/packages/compass-components/src/components/modal.tsx index e25de4f5fdd..3d5bce3f56a 100644 --- a/packages/compass-components/src/components/modal.tsx +++ b/packages/compass-components/src/components/modal.tsx @@ -1,8 +1,9 @@ import React, { useEffect } from 'react'; -import LeafyGreenModal from '@leafygreen-ui/modal'; import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging'; const { track } = createLoggerAndTelemetry('COMPASS-UI'); +import { Modal as LeafyGreenModal } from './leafygreen'; + function Modal({ trackingId, ...props diff --git a/packages/compass-components/src/components/radio-box-group.tsx b/packages/compass-components/src/components/radio-box-group.tsx index 54e58dd8321..74561fb479a 100644 --- a/packages/compass-components/src/components/radio-box-group.tsx +++ b/packages/compass-components/src/components/radio-box-group.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { css } from '@leafygreen-ui/emotion'; import { spacing } from '@leafygreen-ui/tokens'; -import { RadioBoxGroup as LeafyGreenRadioBoxGroup } from '@leafygreen-ui/radio-box-group'; + +import { RadioBoxGroup as LeafyGreenRadioBoxGroup } from './leafygreen'; const radioBoxGroupStyles = css({ marginTop: spacing[1], diff --git a/packages/compass-components/src/components/tooltip.tsx b/packages/compass-components/src/components/tooltip.tsx index db78f091671..e2255505fcd 100644 --- a/packages/compass-components/src/components/tooltip.tsx +++ b/packages/compass-components/src/components/tooltip.tsx @@ -1,8 +1,8 @@ /* eslint-disable react/prop-types */ import { useTooltipTriggerState } from '@react-stately/tooltip'; import { useTooltipTrigger } from '@react-aria/tooltip'; -import LeafyGreenTooltip from '@leafygreen-ui/tooltip'; import React, { useCallback, useRef } from 'react'; +import { Tooltip as LeafyGreenTooltip } from './leafygreen'; import { mergeProps } from '../utils/merge-props'; /** diff --git a/packages/compass-components/src/hooks/use-theme.tsx b/packages/compass-components/src/hooks/use-theme.tsx index e77588a9073..f0da37bc92f 100644 --- a/packages/compass-components/src/hooks/use-theme.tsx +++ b/packages/compass-components/src/hooks/use-theme.tsx @@ -37,11 +37,13 @@ function withTheme( const ComponentWithTheme = (props: T) => { const theme = useTheme(); + const applyTheme = global?.process?.env?.COMPASS_LG_DARKMODE === 'true'; + return ( ); diff --git a/packages/compass-components/src/index.ts b/packages/compass-components/src/index.ts index ac2c2824498..afaa8d75458 100644 --- a/packages/compass-components/src/index.ts +++ b/packages/compass-components/src/index.ts @@ -22,13 +22,8 @@ import { SpinLoader } from './components/spin-loader'; import { ResizeHandle, ResizeDirection } from './components/resize-handle'; import Accordion from './components/accordion'; export { FavoriteIcon } from './components/icons/favorite-icon'; -export { - Variant as BadgeVariant, -} from '@leafygreen-ui/badge'; -export { Footer } from '@leafygreen-ui/modal'; -export { - Variant as BannerVariant, -} from '@leafygreen-ui/banner'; +export { Variant as BadgeVariant } from '@leafygreen-ui/badge'; +export { Variant as BannerVariant } from '@leafygreen-ui/banner'; export { Size as ButtonSize, Variant as ButtonVariant, @@ -42,12 +37,8 @@ export * as compassFontSizes from './compass-font-sizes'; export * as compassUIColors from './compass-ui-colors'; export { default as Portal } from '@leafygreen-ui/portal'; export { Size as RadioBoxSize } from '@leafygreen-ui/radio-box-group'; -export { - Size as SelectSize, -} from '@leafygreen-ui/select'; -export { - Variant as ToastVariant, -} from '@leafygreen-ui/toast'; +export { Size as SelectSize } from '@leafygreen-ui/select'; +export { Variant as ToastVariant } from '@leafygreen-ui/toast'; export { useToast, ToastArea } from './hooks/use-toast'; diff --git a/packages/compass/src/app/theme.js b/packages/compass/src/app/theme.js index 64082d0a8dc..e7d675defe9 100644 --- a/packages/compass/src/app/theme.js +++ b/packages/compass/src/app/theme.js @@ -12,7 +12,9 @@ function enableDarkTheme() { global.hadronApp.theme = Theme.Dark; global.hadronApp.appRegistry?.emit('darkmode-enable'); - // darkreader.enable(darkreaderOptions); + if (process?.env?.COMPASS_LG_DARKMODE !== 'true') { + darkreader.enable(darkreaderOptions); + } } function disableDarkTheme() { diff --git a/packages/compass/src/index.d.ts b/packages/compass/src/index.d.ts index d9bde0c06d5..884b48c1cf5 100644 --- a/packages/compass/src/index.d.ts +++ b/packages/compass/src/index.d.ts @@ -37,6 +37,13 @@ declare module 'process' { // Feature flags. USE_NEW_CONNECT_FORM?: 'true' | 'false'; + /** + * Currently Compass uses `darkreader` to globally change the views of + * Compass to a dark theme. Turning on this feature flag stops darkreader + * from being used and instead components which have darkMode + * support will listen to the theme to change their styles. + */ + COMPASS_LG_DARKMODE?: 'true' | 'false'; /** * Enables new tab in the instance workspace that shows saved diff --git a/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.tsx b/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.tsx index 3ceae0dce7e..862d5dd7d4d 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.tsx @@ -32,7 +32,7 @@ const regularSchemaDescription = const srvSchemaDescription = 'DNS Seed List Connection Format. The +srv indicates to the client that the hostname that follows corresponds to a DNS SRV record.'; -function SchemaInput({ +function SchemeInput({ connectionStringUrl, errors, updateConnectionFormField, @@ -90,4 +90,4 @@ function SchemaInput({ ); } -export default SchemaInput; +export default SchemeInput; From 3fbb076489f98042efddb6ae2f38d6dab06dacce Mon Sep 17 00:00:00 2001 From: Anemy Date: Wed, 2 Mar 2022 11:14:04 -0500 Subject: [PATCH 04/13] remove extra comments --- .../src/components/toggle.tsx | 29 +------------------ 1 file changed, 1 insertion(+), 28 deletions(-) diff --git a/packages/compass-components/src/components/toggle.tsx b/packages/compass-components/src/components/toggle.tsx index 431eea95de4..5313f884b08 100644 --- a/packages/compass-components/src/components/toggle.tsx +++ b/packages/compass-components/src/components/toggle.tsx @@ -1,16 +1,7 @@ import React from 'react'; -import { Toggle as LeafyGreenToggle } from './leafygreen'; +import { Toggle as LeafyGreenToggle } from './leafygreen'; import { Theme, useTheme } from '../hooks/use-theme'; -// import { withTheme } from '../hooks/use-theme'; - -// function Toggle( -// props: React.ComponentProps -// ): ReturnType { -// const theme = useTheme(); - -// return ; -// } function Toggle( props: React.ComponentProps @@ -20,22 +11,4 @@ function Toggle( return ; } -// LeafyGreenToggle -// const Toggle = withTheme>(LeafyGreenToggle); -// const Toggle = withTheme(LeafyGreenToggle); -// const Toggle = withTheme>(LeafyGreenToggle); -// const Toggle = withTheme(LeafyGreenToggle); -// const Toggle = withTheme(LeafyGreenToggle); -// const toggle = withTheme(LeafyGreenToggle as any); -// : React.ComponentType -// const Toggle = withTheme(LeafyGreenToggle); - -// function aa() { -// return ( -// -// ) -// } - export { Toggle }; From 2b6148c8488f9b01d450919bec9d8fc136924b26 Mon Sep 17 00:00:00 2001 From: Anemy Date: Wed, 2 Mar 2022 12:04:37 -0500 Subject: [PATCH 05/13] update scheme to schema where used in form --- .../general-tab/scheme-input.spec.tsx | 18 ++++++------- .../general-tab/scheme-input.tsx | 26 +++++++++---------- .../tls-ssl-tab/tls-ssl-tab.tsx | 6 ++--- .../src/hooks/use-connect-form.spec.ts | 8 +++--- .../src/hooks/use-connect-form.ts | 4 +-- 5 files changed, 30 insertions(+), 32 deletions(-) diff --git a/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.spec.tsx b/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.spec.tsx index 692f40d5708..b426e6f17c5 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.spec.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.spec.tsx @@ -51,10 +51,10 @@ describe('SchemeInput', function () { fireEvent.click(standardSchemeRadioBox); }); - it('should call to update the connection string with standard schema', function () { + it('should call to update the connection string with standard scheme', function () { expect(updateConnectionFormFieldSpy.callCount).to.equal(1); expect(updateConnectionFormFieldSpy.firstCall.args[0]).to.deep.equal({ - type: 'update-connection-schema', + type: 'update-connection-scheme', isSrv: false, }); }); @@ -99,16 +99,16 @@ describe('SchemeInput', function () { expect(srvRadioBox.getAttribute('aria-checked')).to.equal('false'); }); - describe('when the srv schema radio box is clicked', function () { + describe('when the srv scheme radio box is clicked', function () { beforeEach(function () { - const srvSchemaRadioBox = screen.getAllByRole('radio')[1]; - fireEvent.click(srvSchemaRadioBox); + const srvSchemeRadioBox = screen.getAllByRole('radio')[1]; + fireEvent.click(srvSchemeRadioBox); }); - it('should call to update the connection string with srv schema', function () { + it('should call to update the connection string with srv scheme', function () { expect(updateConnectionFormFieldSpy.callCount).to.equal(1); expect(updateConnectionFormFieldSpy.firstCall.args[0]).to.deep.equal({ - type: 'update-connection-schema', + type: 'update-connection-scheme', isSrv: true, }); }); @@ -116,7 +116,7 @@ describe('SchemeInput', function () { }); }); - describe('when there is a schema error', function () { + describe('when there is a scheme error', function () { beforeEach(function () { const connectionStringUrl = new ConnectionStringUrl( 'mongodb://0ranges:p!neapp1es@outerspace:27017/?ssl=true' @@ -139,7 +139,7 @@ describe('SchemeInput', function () { ); }); - it('should render the schema conversion error', function () { + it('should render the scheme conversion error', function () { expect(screen.getByText('aaaa!!!1!')).to.be.visible; }); }); diff --git a/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.tsx b/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.tsx index 862d5dd7d4d..df8b59f00dd 100644 --- a/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.tsx +++ b/packages/connection-form/src/components/advanced-options-tabs/general-tab/scheme-input.tsx @@ -18,7 +18,7 @@ import { fieldNameHasError, } from '../../../utils/validation'; -enum MONGODB_SCHEMA { +enum MONGODB_SCHEME { MONGODB = 'MONGODB', MONGODB_SRV = 'MONGODB_SRV', } @@ -27,9 +27,9 @@ const descriptionStyles = css({ marginTop: spacing[2], }); -const regularSchemaDescription = +const regularSchemeDescription = 'Standard Connection String Format. The standard format of the MongoDB connection URI is used to connect to a MongoDB deployment: standalone, replica set, or a sharded cluster.'; -const srvSchemaDescription = +const srvSchemeDescription = 'DNS Seed List Connection Format. The +srv indicates to the client that the hostname that follows corresponds to a DNS SRV record.'; function SchemeInput({ @@ -43,11 +43,11 @@ function SchemeInput({ }): React.ReactElement { const { isSRV } = connectionStringUrl; - const onChangeConnectionSchema = useCallback( + const onChangeConnectionScheme = useCallback( (event: React.ChangeEvent) => { updateConnectionFormField({ - type: 'update-connection-schema', - isSrv: event.target.value === MONGODB_SCHEMA.MONGODB_SRV, + type: 'update-connection-scheme', + isSrv: event.target.value === MONGODB_SCHEME.MONGODB_SRV, }); }, [updateConnectionFormField] @@ -55,31 +55,31 @@ function SchemeInput({ return ( <> -