diff --git a/.betterer.results b/.betterer.results index ff92a6b8cc8..a9efbf6fe5e 100644 --- a/.betterer.results +++ b/.betterer.results @@ -767,10 +767,6 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], - "packages/grafana-ui/src/components/index.ts:5381": [ - [0, 0, 0, "\'HorizontalGroup\' import from \'./Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "0"], - [0, 0, 0, "\'VerticalGroup\' import from \'./Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "1"] - ], "packages/grafana-ui/src/components/uPlot/Plot.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"] diff --git a/packages/grafana-ui/src/components/Actions/ActionButton.tsx b/packages/grafana-ui/src/components/Actions/ActionButton.tsx index 55b8d3baf32..00db7579dfd 100644 --- a/packages/grafana-ui/src/components/Actions/ActionButton.tsx +++ b/packages/grafana-ui/src/components/Actions/ActionButton.tsx @@ -2,9 +2,9 @@ import { useState } from 'react'; import { ActionModel, Field, ActionVariableInput } from '@grafana/data'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; -import { Button, ButtonProps } from '../Button'; +import { Button, ButtonProps } from '../Button/Button'; import { ConfirmModal } from '../ConfirmModal/ConfirmModal'; import { VariablesInputModal } from './VariablesInputModal'; diff --git a/packages/grafana-ui/src/components/Actions/VariablesInputModal.tsx b/packages/grafana-ui/src/components/Actions/VariablesInputModal.tsx index 73be7916e72..53c3a283068 100644 --- a/packages/grafana-ui/src/components/Actions/VariablesInputModal.tsx +++ b/packages/grafana-ui/src/components/Actions/VariablesInputModal.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import { ActionModel, ActionVariableInput } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; import { Button } from '../Button/Button'; import { Field } from '../Forms/Field'; diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx index f1f0efe7329..5d74780eac4 100644 --- a/packages/grafana-ui/src/components/Alert/Alert.tsx +++ b/packages/grafana-ui/src/components/Alert/Alert.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import { IconName } from '../../types/icon'; import { t } from '../../utils/i18n'; import { Button } from '../Button/Button'; diff --git a/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.tsx b/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.tsx index fdd34d18d9b..637af988c80 100644 --- a/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.tsx +++ b/packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.tsx @@ -3,7 +3,7 @@ import { debounce } from 'lodash'; import { useCallback, useMemo, useRef } from 'react'; import * as React from 'react'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Trans } from '../../utils/i18n'; import { Field, FieldProps } from '../Forms/Field'; import { InlineToast } from '../InlineToast/InlineToast'; diff --git a/packages/grafana-ui/src/components/AutoSaveField/EllipsisAnimated.tsx b/packages/grafana-ui/src/components/AutoSaveField/EllipsisAnimated.tsx index e36aefb9139..67cc52177ba 100644 --- a/packages/grafana-ui/src/components/AutoSaveField/EllipsisAnimated.tsx +++ b/packages/grafana-ui/src/components/AutoSaveField/EllipsisAnimated.tsx @@ -3,7 +3,7 @@ import { memo } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; export const EllipsisAnimated = memo(() => { const styles = useStyles2(getStyles); diff --git a/packages/grafana-ui/src/components/Badge/Badge.tsx b/packages/grafana-ui/src/components/Badge/Badge.tsx index b624944f7e3..e3b3162aec9 100644 --- a/packages/grafana-ui/src/components/Badge/Badge.tsx +++ b/packages/grafana-ui/src/components/Badge/Badge.tsx @@ -7,11 +7,11 @@ import tinycolor from 'tinycolor2'; import { GrafanaTheme2 } from '@grafana/data'; import { useStyles2 } from '../../themes/ThemeContext'; -import { IconName } from '../../types'; +import { IconName } from '../../types/icon'; import { SkeletonComponent, attachSkeleton } from '../../utils/skeleton'; import { Icon } from '../Icon/Icon'; -import { PopoverContent } from '../Tooltip'; import { Tooltip } from '../Tooltip/Tooltip'; +import { PopoverContent } from '../Tooltip/types'; export type BadgeColor = 'blue' | 'red' | 'green' | 'orange' | 'purple' | 'darkgrey'; diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx index fb10481d786..4c5575563d0 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx @@ -3,7 +3,7 @@ import { StoryFn, Meta } from '@storybook/react'; import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data'; import { BarGaugeDisplayMode } from '@grafana/schema'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import { BarGauge, Props } from './BarGauge'; import mdx from './BarGauge.mdx'; diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx index d2579339535..6fd2074e56b 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx @@ -23,9 +23,9 @@ import { import { selectors } from '@grafana/e2e-selectors'; import { BarGaugeDisplayMode, BarGaugeNamePlacement, BarGaugeValueMode, VizTextDisplayOptions } from '@grafana/schema'; -import { Themeable2 } from '../../types'; +import { Themeable2 } from '../../types/theme'; import { calculateFontSize, measureText } from '../../utils/measureText'; -import { clearButtonStyles } from '../Button'; +import { clearButtonStyles } from '../Button/Button'; import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay'; const MIN_VALUE_HEIGHT = 18; diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx index a7a4ea9d6e1..816a377b25a 100644 --- a/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx +++ b/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx @@ -2,7 +2,7 @@ import { StoryFn, Meta } from '@storybook/react'; import { FieldSparkline, FieldType } from '@grafana/data'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import { BigValue, diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.tsx index 220799ee37f..6aceeb3660b 100644 --- a/packages/grafana-ui/src/components/BigValue/BigValue.tsx +++ b/packages/grafana-ui/src/components/BigValue/BigValue.tsx @@ -5,8 +5,8 @@ import * as React from 'react'; import { DisplayValue, DisplayValueAlignmentFactors, FieldSparkline } from '@grafana/data'; import { PercentChangeColorMode, VizTextDisplayOptions } from '@grafana/schema'; -import { Themeable2 } from '../../types'; -import { clearButtonStyles } from '../Button'; +import { Themeable2 } from '../../types/theme'; +import { clearButtonStyles } from '../Button/Button'; import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay'; import { buildLayout } from './BigValueLayout'; diff --git a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx index ef0a5a80f02..a8914563f80 100644 --- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx +++ b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx @@ -5,7 +5,7 @@ import tinycolor from 'tinycolor2'; import { formattedValueToString, DisplayValue, FieldConfig, FieldType, ThemeVisualizationColors } from '@grafana/data'; import { GraphDrawStyle, GraphFieldConfig, PercentChangeColorMode } from '@grafana/schema'; -import { getTextColorForAlphaBackground } from '../../utils'; +import { getTextColorForAlphaBackground } from '../../utils/colors'; import { calculateFontSize } from '../../utils/measureText'; import { Sparkline } from '../Sparkline/Sparkline'; diff --git a/packages/grafana-ui/src/components/BrowserLabel/Label.tsx b/packages/grafana-ui/src/components/BrowserLabel/Label.tsx index 9ce9289575e..942bcfe8f56 100644 --- a/packages/grafana-ui/src/components/BrowserLabel/Label.tsx +++ b/packages/grafana-ui/src/components/BrowserLabel/Label.tsx @@ -5,8 +5,8 @@ import Highlighter from 'react-highlight-words'; import { GrafanaTheme2 } from '@grafana/data'; -import { useTheme2 } from '../../themes'; -import { HighlightPart } from '../../types'; +import { useTheme2 } from '../../themes/ThemeContext'; +import { HighlightPart } from '../../types/completion'; import { PartialHighlighter } from '../Typeahead/PartialHighlighter'; type OnLabelClick = (name: string, value: string | undefined, event: React.MouseEvent) => void; diff --git a/packages/grafana-ui/src/components/Button/Button.story.tsx b/packages/grafana-ui/src/components/Button/Button.story.tsx index 76fec86e1e2..c87d6709567 100644 --- a/packages/grafana-ui/src/components/Button/Button.story.tsx +++ b/packages/grafana-ui/src/components/Button/Button.story.tsx @@ -1,7 +1,7 @@ import { action } from '@storybook/addon-actions'; import { StoryFn } from '@storybook/react'; -import { ComponentSize } from '../../types'; +import { ComponentSize } from '../../types/size'; import { Card } from '../Card/Card'; import { Stack } from '../Layout/Stack/Stack'; diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx index a3d1a41c116..f9500fc196d 100644 --- a/packages/grafana-ui/src/components/Button/Button.tsx +++ b/packages/grafana-ui/src/components/Button/Button.tsx @@ -4,13 +4,14 @@ import * as React from 'react'; import { GrafanaTheme2, ThemeRichColor } from '@grafana/data'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins'; -import { ComponentSize, IconSize, IconType } from '../../types'; -import { IconName } from '../../types/icon'; +import { IconName, IconSize, IconType } from '../../types/icon'; +import { ComponentSize } from '../../types/size'; import { getPropertiesForButtonSize } from '../Forms/commonStyles'; import { Icon } from '../Icon/Icon'; -import { PopoverContent, Tooltip, TooltipPlacement } from '../Tooltip'; +import { Tooltip } from '../Tooltip/Tooltip'; +import { PopoverContent, TooltipPlacement } from '../Tooltip/types'; export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'success'; export const allButtonVariants: ButtonVariant[] = ['primary', 'secondary', 'destructive']; diff --git a/packages/grafana-ui/src/components/Button/ButtonGroup.tsx b/packages/grafana-ui/src/components/Button/ButtonGroup.tsx index 977fa45b896..3ae3043cb96 100644 --- a/packages/grafana-ui/src/components/Button/ButtonGroup.tsx +++ b/packages/grafana-ui/src/components/Button/ButtonGroup.tsx @@ -3,7 +3,7 @@ import { forwardRef, HTMLAttributes } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; export interface Props extends HTMLAttributes { className?: string; diff --git a/packages/grafana-ui/src/components/Button/FullWidthButtonContainer.tsx b/packages/grafana-ui/src/components/Button/FullWidthButtonContainer.tsx index 1e4ee66c10d..a5101520468 100644 --- a/packages/grafana-ui/src/components/Button/FullWidthButtonContainer.tsx +++ b/packages/grafana-ui/src/components/Button/FullWidthButtonContainer.tsx @@ -1,7 +1,7 @@ import { css, cx } from '@emotion/css'; import * as React from 'react'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; export interface Props { className?: string; diff --git a/packages/grafana-ui/src/components/Button/index.ts b/packages/grafana-ui/src/components/Button/index.ts deleted file mode 100644 index 3e27c288a5d..00000000000 --- a/packages/grafana-ui/src/components/Button/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Button'; -export { ButtonGroup } from './ButtonGroup'; diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx index 8939a2e2247..6e6ba1fd725 100644 --- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx +++ b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx @@ -4,9 +4,9 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { IconName } from '../../types/icon'; -import { Button, ButtonProps } from '../Button'; +import { Button, ButtonProps } from '../Button/Button'; import { CascaderOption } from '../Cascader/Cascader'; import { onChangeCascader, onLoadDataCascader } from '../Cascader/optionMappings'; import { getCascaderStyles } from '../Cascader/styles'; diff --git a/packages/grafana-ui/src/components/Card/Card.story.tsx b/packages/grafana-ui/src/components/Card/Card.story.tsx index b199b606565..8f2a9668dd2 100644 --- a/packages/grafana-ui/src/components/Card/Card.story.tsx +++ b/packages/grafana-ui/src/components/Card/Card.story.tsx @@ -1,6 +1,6 @@ import { Meta, StoryFn } from '@storybook/react'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { IconButton } from '../IconButton/IconButton'; import { TagList } from '../Tags/TagList'; diff --git a/packages/grafana-ui/src/components/Card/Card.test.tsx b/packages/grafana-ui/src/components/Card/Card.test.tsx index 8fc37175200..4067dec5ba2 100644 --- a/packages/grafana-ui/src/components/Card/Card.test.tsx +++ b/packages/grafana-ui/src/components/Card/Card.test.tsx @@ -1,7 +1,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { IconButton } from '../IconButton/IconButton'; import { Card } from './Card'; diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx index fd89529d484..dbbd20f2963 100644 --- a/packages/grafana-ui/src/components/Card/Card.tsx +++ b/packages/grafana-ui/src/components/Card/Card.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { getFocusStyles } from '../../themes/mixins'; import { t } from '../../utils/i18n'; diff --git a/packages/grafana-ui/src/components/Card/CardContainer.tsx b/packages/grafana-ui/src/components/Card/CardContainer.tsx index b4ed6b5d0a8..270ac37931c 100644 --- a/packages/grafana-ui/src/components/Card/CardContainer.tsx +++ b/packages/grafana-ui/src/components/Card/CardContainer.tsx @@ -4,7 +4,8 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { styleMixins, useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; +import { getFocusStyles } from '../../themes/mixins'; /** * @public @@ -118,7 +119,7 @@ export const getCardContainerStyles = ( cursor: 'pointer', zIndex: 1, }, - '&:focus': styleMixins.getFocusStyles(theme), + '&:focus': getFocusStyles(theme), }), ...(isSelectable && { @@ -149,7 +150,7 @@ export const getCardContainerStyles = ( cursor: 'pointer', zIndex: 1, }, - '&:focus': styleMixins.getFocusStyles(theme), + '&:focus': getFocusStyles(theme), }), }), }; diff --git a/packages/grafana-ui/src/components/Carousel/Carousel.tsx b/packages/grafana-ui/src/components/Carousel/Carousel.tsx index b205eb4e7ac..8e3ff3d4d38 100644 --- a/packages/grafana-ui/src/components/Carousel/Carousel.tsx +++ b/packages/grafana-ui/src/components/Carousel/Carousel.tsx @@ -6,10 +6,10 @@ import { useState, useEffect, useRef } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; import { Alert } from '../Alert/Alert'; -import { clearButtonStyles } from '../Button'; +import { clearButtonStyles } from '../Button/Button'; import { IconButton } from '../IconButton/IconButton'; // Define the image item interface diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.tsx index b142aaa2fad..44762c2bbdb 100644 --- a/packages/grafana-ui/src/components/Cascader/Cascader.tsx +++ b/packages/grafana-ui/src/components/Cascader/Cascader.tsx @@ -6,8 +6,8 @@ import * as React from 'react'; import { SelectableValue } from '@grafana/data'; -import { withTheme2 } from '../../themes'; -import { Themeable2 } from '../../types'; +import { withTheme2 } from '../../themes/ThemeContext'; +import { Themeable2 } from '../../types/theme'; import { t } from '../../utils/i18n'; import { Icon } from '../Icon/Icon'; import { IconButton } from '../IconButton/IconButton'; diff --git a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx index bfc7b94b793..94a49f35f04 100644 --- a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx +++ b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx @@ -4,9 +4,9 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { t } from '../../../src/utils/i18n'; -import { useStyles2 } from '../../themes'; -import { Button, ButtonProps } from '../Button'; +import { useStyles2 } from '../../themes/ThemeContext'; +import { t } from '../../utils/i18n'; +import { Button, ButtonProps } from '../Button/Button'; import { Icon } from '../Icon/Icon'; import { InlineToast } from '../InlineToast/InlineToast'; diff --git a/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx b/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx index d36e48528d6..e937d7bb1e3 100644 --- a/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx +++ b/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { getFocusStyles } from '../../themes/mixins'; import { Icon } from '../Icon/Icon'; import { Spinner } from '../Spinner/Spinner'; diff --git a/packages/grafana-ui/src/components/Collapse/Collapse.tsx b/packages/grafana-ui/src/components/Collapse/Collapse.tsx index f7d67fc8b23..4089959a6ef 100644 --- a/packages/grafana-ui/src/components/Collapse/Collapse.tsx +++ b/packages/grafana-ui/src/components/Collapse/Collapse.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { useStyles2 } from '../../themes/ThemeContext'; -import { clearButtonStyles } from '../Button'; +import { clearButtonStyles } from '../Button/Button'; import { Icon } from '../Icon/Icon'; const getStyles = (theme: GrafanaTheme2) => ({ diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx index 1e55e1ac481..87105d0f377 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx @@ -6,7 +6,7 @@ import tinycolor from 'tinycolor2'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Input, Props as InputProps } from '../Input/Input'; import { ColorPickerProps } from './ColorPickerPopover'; diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx index 5c56d45e3b5..196c8d65c97 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx @@ -3,7 +3,7 @@ import { useArgs } from '@storybook/preview-api'; import { Meta, StoryFn } from '@storybook/react'; import { useStyles2 } from '../../themes/ThemeContext'; -import { clearButtonStyles } from '../Button'; +import { clearButtonStyles } from '../Button/Button'; import { ColorPicker, SeriesColorPicker } from './ColorPicker'; import mdx from './ColorPicker.mdx'; diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx index 0f2221e497e..5b23a4fefa6 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx @@ -4,7 +4,8 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { withTheme2, stylesFactory } from '../../themes'; +import { withTheme2 } from '../../themes/ThemeContext'; +import { stylesFactory } from '../../themes/stylesFactory'; import { closePopover } from '../../utils/closePopover'; import { Popover } from '../Tooltip/Popover'; import { PopoverController } from '../Tooltip/PopoverController'; diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerInput.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerInput.tsx index 381ad0403b2..27f807051a8 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerInput.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerInput.tsx @@ -5,7 +5,7 @@ import { useThrottleFn } from 'react-use'; import { colorManipulator, GrafanaTheme2 } from '@grafana/data'; -import { useStyles2, useTheme2 } from '../../themes'; +import { useStyles2, useTheme2 } from '../../themes/ThemeContext'; import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper'; import { Props as InputProps } from '../Input/Input'; diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx index 80974cf1b57..a8ffbc6d129 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx @@ -1,7 +1,7 @@ import { Meta } from '@storybook/react'; import { useState } from 'react'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import mdx from './ColorPicker.mdx'; import { ColorPickerPopover } from './ColorPickerPopover'; diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx index 7cf557f3c26..02b62d54573 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx @@ -5,11 +5,13 @@ import * as React from 'react'; import { GrafanaTheme2, colorManipulator } from '@grafana/data'; -import { stylesFactory, withTheme2 } from '../../themes'; +import { withTheme2 } from '../../themes/ThemeContext'; +import { stylesFactory } from '../../themes/stylesFactory'; import { Themeable2 } from '../../types/theme'; import { t } from '../../utils/i18n'; -import { Tab, TabsBar } from '../Tabs'; -import { PopoverContentProps } from '../Tooltip'; +import { Tab } from '../Tabs/Tab'; +import { TabsBar } from '../Tabs/TabsBar'; +import { PopoverContentProps } from '../Tooltip/types'; import { NamedColorsPalette } from './NamedColorsPalette'; import SpectrumPalette from './SpectrumPalette'; diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx index f7258cd3ed9..1757bf7c7ac 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx @@ -1,8 +1,8 @@ -import { withTheme2 } from '../../themes'; +import { withTheme2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; import { InlineField } from '../Forms/InlineField'; import { InlineSwitch } from '../Switch/Switch'; -import { PopoverContentProps } from '../Tooltip'; +import { PopoverContentProps } from '../Tooltip/types'; import { ColorPickerPopover, ColorPickerProps } from './ColorPickerPopover'; diff --git a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx index 589b90375d5..d8c06371ab9 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx @@ -6,7 +6,7 @@ import tinycolor from 'tinycolor2'; import { GrafanaTheme2, colorManipulator } from '@grafana/data'; -import { useStyles2, useTheme2 } from '../../themes'; +import { useStyles2, useTheme2 } from '../../themes/ThemeContext'; import ColorInput from './ColorInput'; diff --git a/packages/grafana-ui/src/components/Combobox/Combobox.tsx b/packages/grafana-ui/src/components/Combobox/Combobox.tsx index 4871f1437b2..90ea3b2a69f 100644 --- a/packages/grafana-ui/src/components/Combobox/Combobox.tsx +++ b/packages/grafana-ui/src/components/Combobox/Combobox.tsx @@ -3,7 +3,7 @@ import { useVirtualizer, type Range } from '@tanstack/react-virtual'; import { useCombobox } from 'downshift'; import React, { useCallback, useId, useMemo } from 'react'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; import { Icon } from '../Icon/Icon'; import { AutoSizeInput } from '../Input/AutoSizeInput'; diff --git a/packages/grafana-ui/src/components/Combobox/ComboboxList.tsx b/packages/grafana-ui/src/components/Combobox/ComboboxList.tsx index 54dab594f30..5f50a563236 100644 --- a/packages/grafana-ui/src/components/Combobox/ComboboxList.tsx +++ b/packages/grafana-ui/src/components/Combobox/ComboboxList.tsx @@ -3,7 +3,7 @@ import { useVirtualizer } from '@tanstack/react-virtual'; import type { UseComboboxPropGetters } from 'downshift'; import { useCallback } from 'react'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Checkbox } from '../Forms/Checkbox'; import { ScrollContainer } from '../ScrollContainer/ScrollContainer'; diff --git a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx b/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx index ff5e51eb87c..a8dd52a5fc3 100644 --- a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx +++ b/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx @@ -2,13 +2,13 @@ import { cx } from '@emotion/css'; import { useCombobox, useMultipleSelection } from 'downshift'; import { useCallback, useMemo, useState } from 'react'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; import { Icon } from '../Icon/Icon'; import { Box } from '../Layout/Box/Box'; import { Portal } from '../Portal/Portal'; import { Text } from '../Text/Text'; -import { Tooltip } from '../Tooltip'; +import { Tooltip } from '../Tooltip/Tooltip'; import { ComboboxBaseProps, AutoSizeConditionals } from './Combobox'; import { ComboboxList } from './ComboboxList'; diff --git a/packages/grafana-ui/src/components/Combobox/ValuePill.tsx b/packages/grafana-ui/src/components/Combobox/ValuePill.tsx index 5205767a1db..ab157dde6b0 100644 --- a/packages/grafana-ui/src/components/Combobox/ValuePill.tsx +++ b/packages/grafana-ui/src/components/Combobox/ValuePill.tsx @@ -3,7 +3,7 @@ import { forwardRef } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; import { IconButton } from '../IconButton/IconButton'; diff --git a/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts b/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts index 5787e88b9b9..760f6bbb4fb 100644 --- a/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts +++ b/packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts @@ -1,7 +1,7 @@ import { autoUpdate, autoPlacement, size, useFloating } from '@floating-ui/react'; import { useMemo, useRef, useState } from 'react'; -import { measureText } from '../../utils'; +import { measureText } from '../../utils/measureText'; import { MENU_ITEM_FONT_SIZE, diff --git a/packages/grafana-ui/src/components/Combobox/useMeasureMulti.ts b/packages/grafana-ui/src/components/Combobox/useMeasureMulti.ts index f64bd007307..2b516c75fbc 100644 --- a/packages/grafana-ui/src/components/Combobox/useMeasureMulti.ts +++ b/packages/grafana-ui/src/components/Combobox/useMeasureMulti.ts @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; import { useMeasure } from 'react-use'; -import { measureText } from '../../utils'; +import { measureText } from '../../utils/measureText'; import { ComboboxOption } from './types'; diff --git a/packages/grafana-ui/src/components/Combobox/useMultiInputAutoSize.tsx b/packages/grafana-ui/src/components/Combobox/useMultiInputAutoSize.tsx index 30ade93a632..9c6e35b3d2e 100644 --- a/packages/grafana-ui/src/components/Combobox/useMultiInputAutoSize.tsx +++ b/packages/grafana-ui/src/components/Combobox/useMultiInputAutoSize.tsx @@ -1,6 +1,6 @@ import { useLayoutEffect, useRef, useState } from 'react'; -import { measureText } from '../../utils'; +import { measureText } from '../../utils/measureText'; export function useMultiInputAutoSize(inputValue: string) { const inputRef = useRef(null); diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx index 49a3564daae..6d138a7cb90 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx +++ b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx @@ -1,7 +1,7 @@ import { action } from '@storybook/addon-actions'; import { Meta, StoryFn } from '@storybook/react'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { ConfirmButton, Props } from './ConfirmButton'; import mdx from './ConfirmButton.mdx'; diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx index 4239b2f1820..ca47414b3b7 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx +++ b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx @@ -4,10 +4,10 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { ComponentSize } from '../../types/size'; import { Trans } from '../../utils/i18n'; -import { Button, ButtonVariant } from '../Button'; +import { Button, ButtonVariant } from '../Button/Button'; export interface Props { /** Confirm action callback */ diff --git a/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx b/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx index 81ca3c12a1c..ceebc2502b5 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx +++ b/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx @@ -1,5 +1,5 @@ import { ComponentSize } from '../../types/size'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { ConfirmButton } from './ConfirmButton'; diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmContent.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmContent.tsx index 48065ea44be..e2849a9338a 100644 --- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmContent.tsx +++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmContent.tsx @@ -6,9 +6,9 @@ import { useForm } from 'react-hook-form'; import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; -import { Button, ButtonVariant } from '../Button'; +import { Button, ButtonVariant } from '../Button/Button'; import { Field } from '../Forms/Field'; import { Input } from '../Input/Input'; import { Stack } from '../Layout/Stack/Stack'; diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx index ae478db3ad5..ffcffa96f58 100644 --- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx +++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx @@ -3,8 +3,8 @@ import * as React from 'react'; import { IconName } from '@grafana/data'; -import { useStyles2 } from '../../themes'; -import { ButtonVariant } from '../Button'; +import { useStyles2 } from '../../themes/ThemeContext'; +import { ButtonVariant } from '../Button/Button'; import { Modal } from '../Modal/Modal'; import { ConfirmContent } from './ConfirmContent'; diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx index 541eb9c8db8..ef916ecc76a 100644 --- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx +++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx @@ -5,7 +5,7 @@ import Scrollbars, { positionValues } from 'react-custom-scrollbars-2'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { ScrollIndicators } from './ScrollIndicators'; diff --git a/packages/grafana-ui/src/components/CustomScrollbar/ScrollIndicators.tsx b/packages/grafana-ui/src/components/CustomScrollbar/ScrollIndicators.tsx index 0572e8cd66d..814687c755a 100644 --- a/packages/grafana-ui/src/components/CustomScrollbar/ScrollIndicators.tsx +++ b/packages/grafana-ui/src/components/CustomScrollbar/ScrollIndicators.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; export const ScrollIndicators = ({ children }: React.PropsWithChildren<{}>) => { const [showScrollTopIndicator, setShowTopScrollIndicator] = useState(false); diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkButton.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkButton.tsx index 527f12f5063..44ea08e36ac 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinkButton.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinkButton.tsx @@ -1,6 +1,6 @@ import { Field, LinkModel } from '@grafana/data'; -import { ButtonProps, Button } from '../Button'; +import { ButtonProps, Button } from '../Button/Button'; type DataLinkButtonProps = { link: LinkModel; diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx index df079db03dc..48bd9a26730 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx @@ -3,7 +3,7 @@ import { memo, ChangeEvent } from 'react'; import { VariableSuggestion, GrafanaTheme2, DataLink } from '@grafana/data'; -import { useStyles2 } from '../../themes/index'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t, Trans } from '../../utils/i18n'; import { Field } from '../Forms/Field'; import { Input } from '../Input/Input'; diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx index 6b808b44542..1439992caf5 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx @@ -10,8 +10,8 @@ import { Editor } from 'slate-react'; import { DataLinkBuiltInVars, GrafanaTheme2, VariableOrigin, VariableSuggestion } from '@grafana/data'; -import { SlatePrism } from '../../slate-plugins'; -import { useStyles2 } from '../../themes'; +import { SlatePrism } from '../../slate-plugins/slate-prism'; +import { useStyles2 } from '../../themes/ThemeContext'; import { SCHEMA, makeValue } from '../../utils/slate'; import { getInputStyles } from '../Input/Input'; import { Portal } from '../Portal/Portal'; diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx index 1308657df35..cd5c7dfbd68 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx @@ -6,7 +6,7 @@ import { useClickAway } from 'react-use'; import { VariableSuggestion, GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { List } from '../List/List'; interface DataLinkSuggestionsProps { diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx index ed73ca99591..dc85dca5464 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import { ActionModel, GrafanaTheme2, LinkModel } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { linkModelToContextMenuItems } from '../../utils/dataLinks'; import { WithContextMenu } from '../ContextMenu/WithContextMenu'; import { MenuGroup, MenuItemsGroup } from '../Menu/MenuGroup'; diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinkEditorModalContent.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinkEditorModalContent.tsx index 02287da7215..4dce8241cad 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinkEditorModalContent.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinkEditorModalContent.tsx @@ -3,7 +3,7 @@ import { useState } from 'react'; import { DataFrame, DataLink, VariableSuggestion } from '@grafana/data'; import { Trans } from '../../../utils/i18n'; -import { Button } from '../../Button'; +import { Button } from '../../Button/Button'; import { Modal } from '../../Modal/Modal'; import { DataLinkEditor } from '../DataLinkEditor'; diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditorBase.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditorBase.tsx index a5f66c6d0c3..e36444feab7 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditorBase.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditorBase.tsx @@ -5,9 +5,9 @@ import { useEffect, useState } from 'react'; import { Action, DataFrame, DataLink, GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { t } from '../../../utils/i18n'; -import { Button } from '../../Button'; +import { Button } from '../../Button/Button'; import { Modal } from '../../Modal/Modal'; import { DataLinksListItemBase } from './DataLinksListItemBase'; diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItemBase.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItemBase.tsx index 6ddbc97e994..b541f412f43 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItemBase.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItemBase.tsx @@ -3,7 +3,7 @@ import { Draggable } from '@hello-pangea/dnd'; import { Action, DataFrame, DataLink, GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { t } from '../../../utils/i18n'; import { Badge } from '../../Badge/Badge'; import { Icon } from '../../Icon/Icon'; diff --git a/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx b/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx index b9ca2e89b07..7a6956e36e3 100644 --- a/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx +++ b/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import { Field, GrafanaTheme2, LinkModel } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Trans } from '../../utils/i18n'; import { Icon } from '../Icon/Icon'; diff --git a/packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx b/packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx index 8f460924798..45cb22863ff 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx @@ -1,7 +1,7 @@ import { ChangeEvent, MouseEvent } from 'react'; import { Trans } from '../../utils/i18n'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { InlineField } from '../Forms/InlineField'; import { InlineFieldRow } from '../Forms/InlineFieldRow'; import { Input } from '../Input/Input'; diff --git a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx index dfd21ec8f2d..44d78d9c7a2 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx @@ -4,9 +4,9 @@ import { PureComponent } from 'react'; import { DataSourceSettings } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t, Trans } from '../../utils/i18n'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { FormField } from '../FormField/FormField'; import { Icon } from '../Icon/Icon'; import { SecretFormField } from '../SecretFormField/SecretFormField'; diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx index cfaaf990d37..993291bbfeb 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx @@ -4,10 +4,10 @@ import { useState, useCallback, useId, useMemo } from 'react'; import { SelectableValue } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import { t, Trans } from '../../utils/i18n'; import { Alert } from '../Alert/Alert'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { Field } from '../Forms/Field'; import { InlineField } from '../Forms/InlineField'; import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup'; diff --git a/packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx index ae570dc4769..3d0a68738c6 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; import { InlineField } from '../Forms/InlineField'; import { Stack } from '../Layout/Stack/Stack'; diff --git a/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx index e48656b38fc..28c88547023 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx @@ -4,7 +4,7 @@ import Calendar from 'react-calendar'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { ClickOutsideWrapper } from '../../ClickOutsideWrapper/ClickOutsideWrapper'; import { Icon } from '../../Icon/Icon'; import { getBodyStyles } from '../TimeRangePicker/CalendarBody'; diff --git a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx b/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx index e13dd5d8840..ec6758de79c 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx @@ -4,7 +4,7 @@ import { ChangeEvent, forwardRef, useImperativeHandle, useState } from 'react'; import { GrafanaTheme2, dateTime } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { Props as InputProps, Input } from '../../Input/Input'; import { DatePicker } from '../DatePicker/DatePicker'; diff --git a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx index 92a4bc91960..6b4cb6c77b0 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx @@ -20,7 +20,7 @@ import { } from '@grafana/data'; import { Components } from '@grafana/e2e-selectors'; -import { useStyles2, useTheme2 } from '../../../themes'; +import { useStyles2, useTheme2 } from '../../../themes/ThemeContext'; import { t, Trans } from '../../../utils/i18n'; import { Button } from '../../Button/Button'; import { InlineField } from '../../Forms/InlineField'; diff --git a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx index 2c93cc5a506..58e7bb2d87a 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx @@ -7,9 +7,9 @@ import { FormEvent, useCallback, useRef, useState } from 'react'; import { RelativeTimeRange, GrafanaTheme2, TimeOption } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { Trans, t } from '../../../utils/i18n'; -import { Button } from '../../Button'; +import { Button } from '../../Button/Button'; import { Field } from '../../Forms/Field'; import { Icon } from '../../Icon/Icon'; import { getInputStyles, Input } from '../../Input/Input'; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx index f4d4ff8bab1..1f0e8fb51e0 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx @@ -19,10 +19,10 @@ import { selectors } from '@grafana/e2e-selectors'; import { useStyles2 } from '../../themes/ThemeContext'; import { t, Trans } from '../../utils/i18n'; -import { ButtonGroup } from '../Button'; +import { ButtonGroup } from '../Button/ButtonGroup'; import { getModalStyles } from '../Modal/getModalStyles'; import { getPortalContainer } from '../Portal/Portal'; -import { ToolbarButton } from '../ToolbarButton'; +import { ToolbarButton } from '../ToolbarButton/ToolbarButton'; import { Tooltip } from '../Tooltip/Tooltip'; import { TimePickerContent } from './TimeRangePicker/TimePickerContent'; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx index 00d69297d4d..e8dcd066de9 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx @@ -4,7 +4,7 @@ import Calendar, { CalendarType } from 'react-calendar'; import { GrafanaTheme2, dateTimeParse, DateTime, TimeZone } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { t } from '../../../utils/i18n'; import { Icon } from '../../Icon/Icon'; import { getWeekStart, WeekStart } from '../WeekStartPicker'; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarFooter.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarFooter.tsx index 58d0e317fc6..3cc79b765ee 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarFooter.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarFooter.tsx @@ -1,5 +1,5 @@ import { Trans } from '../../../utils/i18n'; -import { Button } from '../../Button'; +import { Button } from '../../Button/Button'; import { Stack } from '../../Layout/Stack/Stack'; import { TimePickerCalendarProps } from './TimePickerCalendar'; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx index e0921250053..312a34a2b7a 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx @@ -7,7 +7,7 @@ import { createRef, FormEvent, memo } from 'react'; import { DateTime, GrafanaTheme2, TimeZone } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2, useTheme2 } from '../../../themes'; +import { useStyles2, useTheme2 } from '../../../themes/ThemeContext'; import { getModalStyles } from '../../Modal/getModalStyles'; import { WeekStart } from '../WeekStartPicker'; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx index feea28b7329..b446ce24b8d 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx @@ -4,7 +4,7 @@ import { memo, useMemo, useState } from 'react'; import { GrafanaTheme2, isDateTime, rangeUtil, RawTimeRange, TimeOption, TimeRange, TimeZone } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2, useTheme2 } from '../../../themes'; +import { useStyles2, useTheme2 } from '../../../themes/ThemeContext'; import { getFocusStyles } from '../../../themes/mixins'; import { t, Trans } from '../../../utils/i18n'; import { FilterInput } from '../../FilterInput/FilterInput'; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx index 89b90b8dc33..d00a679a9e9 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx @@ -6,12 +6,14 @@ import * as React from 'react'; import { getTimeZoneInfo, GrafanaTheme2, TimeZone } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { t, Trans } from '../../../utils/i18n'; -import { Button } from '../../Button'; +import { Button } from '../../Button/Button'; import { Combobox } from '../../Combobox/Combobox'; import { Field } from '../../Forms/Field'; -import { Tab, TabContent, TabsBar } from '../../Tabs'; +import { Tab } from '../../Tabs/Tab'; +import { TabContent } from '../../Tabs/TabContent'; +import { TabsBar } from '../../Tabs/TabsBar'; import { TimeZonePicker } from '../TimeZonePicker'; import { TimeZoneDescription } from '../TimeZonePicker/TimeZoneDescription'; import { TimeZoneOffset } from '../TimeZonePicker/TimeZoneOffset'; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerTitle.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerTitle.tsx index e65201002bb..1d6c51a53cc 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerTitle.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerTitle.tsx @@ -3,7 +3,7 @@ import { memo, PropsWithChildren } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; const getStyles = (theme: GrafanaTheme2) => { return { diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx index ecb236f077b..bef32e7005e 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx @@ -17,7 +17,7 @@ import { selectors } from '@grafana/e2e-selectors'; import { useStyles2 } from '../../../themes/ThemeContext'; import { t, Trans } from '../../../utils/i18n'; -import { Button } from '../../Button'; +import { Button } from '../../Button/Button'; import { Field } from '../../Forms/Field'; import { Icon } from '../../Icon/Icon'; import { Input } from '../../Input/Input'; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeLabel.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeLabel.tsx index 4cd7392aa37..90dd49d496e 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeLabel.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeLabel.tsx @@ -3,7 +3,7 @@ import { memo } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../../../src/themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { TimePickerButtonLabel, TimeRangePickerProps } from '../TimeRangePicker'; import { isValidTimeRange } from '../utils'; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx index 1e63f4c1921..d7877a958cc 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx @@ -3,7 +3,7 @@ import { useRef, ReactNode } from 'react'; import { GrafanaTheme2, TimeOption } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { t } from '../../../utils/i18n'; import { TimePickerTitle } from './TimePickerTitle'; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeSyncButton.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeSyncButton.tsx index 1bc84239027..467aa123905 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeSyncButton.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeSyncButton.tsx @@ -1,6 +1,6 @@ import { t } from '../../utils/i18n'; -import { ToolbarButton } from '../ToolbarButton'; -import { Tooltip } from '../Tooltip'; +import { ToolbarButton } from '../ToolbarButton/ToolbarButton'; +import { Tooltip } from '../Tooltip/Tooltip'; interface TimeSyncButtonProps { isSynced: boolean; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx index 12594c31b65..3db29467dfc 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx @@ -3,7 +3,7 @@ import { useMemo } from 'react'; import { GrafanaTheme2, TimeZoneInfo } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; interface Props { info?: TimeZoneInfo; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneGroup.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneGroup.tsx index c5e2c0bba14..1fd77355666 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneGroup.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneGroup.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; interface Props { label: string | undefined; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOffset.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOffset.tsx index 03c1d50b816..413adcf5cc6 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOffset.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOffset.tsx @@ -3,7 +3,7 @@ import { isString } from 'lodash'; import { GrafanaTheme2, TimeZone, dateTimeFormat } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; interface Props { timestamp: number; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx index 3ce0a3cd17a..cf3a2dec556 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx @@ -6,7 +6,7 @@ import * as React from 'react'; import { GrafanaTheme2, SelectableValue, getTimeZoneInfo } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { Icon } from '../../Icon/Icon'; import { TimeZoneDescription } from './TimeZoneDescription'; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx index 25d25e28f75..deecfab7888 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx @@ -3,7 +3,7 @@ import { ReactNode } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; interface Props { title: string | ReactNode; diff --git a/packages/grafana-ui/src/components/Divider/Divider.tsx b/packages/grafana-ui/src/components/Divider/Divider.tsx index 0ffd0c032cf..b9f5f580183 100644 --- a/packages/grafana-ui/src/components/Divider/Divider.tsx +++ b/packages/grafana-ui/src/components/Divider/Divider.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; interface DividerProps { direction?: 'vertical' | 'horizontal'; diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx index cafe8106fad..399cecca5be 100644 --- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx +++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx @@ -9,7 +9,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; import { getDragStyles } from '../DragHandle/DragHandle'; import { IconButton } from '../IconButton/IconButton'; diff --git a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx index 719a32bcb38..7268565239e 100644 --- a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx +++ b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx @@ -17,8 +17,8 @@ import { GrafanaTheme2, SelectableValue } from '@grafana/data'; import { useStyles2 } from '../../themes/ThemeContext'; import { Menu } from '../Menu/Menu'; import { MenuItem } from '../Menu/MenuItem'; -import { ToolbarButton, ToolbarButtonVariant } from '../ToolbarButton'; -import { PopoverContent } from '../Tooltip'; +import { ToolbarButton, ToolbarButtonVariant } from '../ToolbarButton/ToolbarButton'; +import { PopoverContent } from '../Tooltip/types'; export interface Props extends HTMLAttributes { className?: string; diff --git a/packages/grafana-ui/src/components/Dropdown/Dropdown.story.tsx b/packages/grafana-ui/src/components/Dropdown/Dropdown.story.tsx index 40253bb2157..668d0e32d33 100644 --- a/packages/grafana-ui/src/components/Dropdown/Dropdown.story.tsx +++ b/packages/grafana-ui/src/components/Dropdown/Dropdown.story.tsx @@ -1,7 +1,7 @@ import { Meta } from '@storybook/react'; import { StoryExample } from '../../utils/storybook/StoryExample'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { IconButton } from '../IconButton/IconButton'; import { Stack } from '../Layout/Stack/Stack'; import { Menu } from '../Menu/Menu'; diff --git a/packages/grafana-ui/src/components/Dropdown/Dropdown.test.tsx b/packages/grafana-ui/src/components/Dropdown/Dropdown.test.tsx index a4a0151eafc..fc57731dc08 100644 --- a/packages/grafana-ui/src/components/Dropdown/Dropdown.test.tsx +++ b/packages/grafana-ui/src/components/Dropdown/Dropdown.test.tsx @@ -1,7 +1,7 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { Menu } from '../Menu/Menu'; import { Dropdown } from './Dropdown'; diff --git a/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx b/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx index 1cd35603df6..4d2846870a6 100644 --- a/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx +++ b/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx @@ -16,8 +16,8 @@ import { CSSTransition } from 'react-transition-group'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; -import { ReactUtils } from '../../utils'; +import { useStyles2 } from '../../themes/ThemeContext'; +import { renderOrCallToRender } from '../../utils/reactUtils'; import { getPlacement } from '../../utils/tooltipUtils'; import { Portal } from '../Portal/Portal'; import { TooltipPlacement } from '../Tooltip/types'; @@ -105,7 +105,7 @@ export const Dropdown = React.memo(({ children, overlay, placement, offset, onVi timeout={{ appear: animationDuration, exit: 0, enter: 0 }} classNames={animationStyles} > -
{ReactUtils.renderOrCallToRender(overlay, { ...getFloatingProps() })}
+
{renderOrCallToRender(overlay, { ...getFloatingProps() })}
diff --git a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx index e46007e0017..23a794908bf 100644 --- a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx +++ b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; export interface Props { children: JSX.Element | string; diff --git a/packages/grafana-ui/src/components/EmptyState/EmptyState.story.tsx b/packages/grafana-ui/src/components/EmptyState/EmptyState.story.tsx index d7d3b790c1b..c483f4ed4a4 100644 --- a/packages/grafana-ui/src/components/EmptyState/EmptyState.story.tsx +++ b/packages/grafana-ui/src/components/EmptyState/EmptyState.story.tsx @@ -1,6 +1,6 @@ import { Meta, StoryFn } from '@storybook/react'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { EmptyState } from './EmptyState'; import mdx from './EmptyState.mdx'; diff --git a/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx b/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx index 6e92a5d5ce7..a7ee3774666 100644 --- a/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx +++ b/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx @@ -5,7 +5,7 @@ import SVG from 'react-inlinesvg'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Box } from '../Layout/Box/Box'; import { Stack } from '../Layout/Stack/Stack'; import { Text } from '../Text/Text'; diff --git a/packages/grafana-ui/src/components/EmptyState/GrotCTA/GrotCTA.tsx b/packages/grafana-ui/src/components/EmptyState/GrotCTA/GrotCTA.tsx index 9350e1dfc18..fad6ce08eb0 100644 --- a/packages/grafana-ui/src/components/EmptyState/GrotCTA/GrotCTA.tsx +++ b/packages/grafana-ui/src/components/EmptyState/GrotCTA/GrotCTA.tsx @@ -4,7 +4,7 @@ import SVG from 'react-inlinesvg'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import grotCTASvg from './grot-cta.svg'; diff --git a/packages/grafana-ui/src/components/EmptyState/GrotNotFound/GrotNotFound.tsx b/packages/grafana-ui/src/components/EmptyState/GrotNotFound/GrotNotFound.tsx index 8df37510eaa..fadad40f2a7 100644 --- a/packages/grafana-ui/src/components/EmptyState/GrotNotFound/GrotNotFound.tsx +++ b/packages/grafana-ui/src/components/EmptyState/GrotNotFound/GrotNotFound.tsx @@ -4,7 +4,7 @@ import SVG from 'react-inlinesvg'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import notFoundSvg from './grot-not-found.svg'; diff --git a/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.story.tsx b/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.story.tsx index c659719a893..474cfc400fb 100644 --- a/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.story.tsx +++ b/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.story.tsx @@ -2,7 +2,7 @@ import { Meta } from '@storybook/react'; import { useState } from 'react'; import { Alert } from '../Alert/Alert'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { ErrorBoundary, ErrorBoundaryAlert } from './ErrorBoundary'; import mdx from './ErrorBoundary.mdx'; diff --git a/packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx b/packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx index 40594795c97..402142fa030 100644 --- a/packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx +++ b/packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/css'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { ErrorBoundaryApi } from './ErrorBoundary'; diff --git a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx b/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx index 2f0971ad2fb..479d91d99a8 100644 --- a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx +++ b/packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx @@ -5,7 +5,7 @@ import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection, useDropzo import { formattedValueToString, getValueFormat, GrafanaTheme2 } from '@grafana/data'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import { t, Trans } from '../../utils/i18n'; import { Alert } from '../Alert/Alert'; import { Icon } from '../Icon/Icon'; diff --git a/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx b/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx index 4af1d39bdd1..8d08665ddf1 100644 --- a/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx +++ b/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx @@ -2,10 +2,10 @@ import { css } from '@emotion/css'; import { formattedValueToString, getValueFormat, GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { trimFileName } from '../../utils/file'; import { t, Trans } from '../../utils/i18n'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { Icon } from '../Icon/Icon'; import { IconButton } from '../IconButton/IconButton'; diff --git a/packages/grafana-ui/src/components/FileDropzone/index.ts b/packages/grafana-ui/src/components/FileDropzone/index.ts deleted file mode 100644 index 001d9969668..00000000000 --- a/packages/grafana-ui/src/components/FileDropzone/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { FileDropzone, DropzoneFile, FileDropzoneProps, FileDropzoneDefaultChildren } from './FileDropzone'; -import { FileListItem, FileListItemProps } from './FileListItem'; - -export { - FileDropzone, - type FileDropzoneProps, - type DropzoneFile, - FileListItem, - type FileListItemProps, - FileDropzoneDefaultChildren, -}; diff --git a/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx b/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx index ece17bc9276..2cbdd552ef5 100644 --- a/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx +++ b/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx @@ -6,12 +6,12 @@ import { v4 as uuidv4 } from 'uuid'; import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { getFocusStyles } from '../../themes/mixins'; import { ComponentSize } from '../../types/size'; import { trimFileName } from '../../utils/file'; import { t } from '../../utils/i18n'; -import { getButtonStyles } from '../Button'; +import { getButtonStyles } from '../Button/Button'; import { Icon } from '../Icon/Icon'; export interface Props { diff --git a/packages/grafana-ui/src/components/FilterInput/FilterInput.tsx b/packages/grafana-ui/src/components/FilterInput/FilterInput.tsx index 14229991144..41bb49be85d 100644 --- a/packages/grafana-ui/src/components/FilterInput/FilterInput.tsx +++ b/packages/grafana-ui/src/components/FilterInput/FilterInput.tsx @@ -4,7 +4,7 @@ import { escapeStringForRegex, unEscapeStringFromRegex } from '@grafana/data'; import { Trans } from '../../utils/i18n'; import { useCombinedRefs } from '../../utils/useCombinedRefs'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { Icon } from '../Icon/Icon'; import { Input } from '../Input/Input'; diff --git a/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx b/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx index bbc85b2c90c..54dec2ec7ea 100644 --- a/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx +++ b/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx @@ -1,7 +1,7 @@ import { Meta, StoryFn } from '@storybook/react'; import { useState } from 'react'; -import { getAvailableIcons } from '../../types'; +import { getAvailableIcons } from '../../types/icon'; import { Stack } from '../Layout/Stack/Stack'; import { FilterPill } from './FilterPill'; diff --git a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx index 6b1a6aa87ac..48140e3940d 100644 --- a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx +++ b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx @@ -3,9 +3,9 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; -import { IconName } from '../../types'; -import { clearButtonStyles } from '../Button'; +import { useStyles2 } from '../../themes/ThemeContext'; +import { IconName } from '../../types/icon'; +import { clearButtonStyles } from '../Button/Button'; import { Icon } from '../Icon/Icon'; export interface FilterPillProps { diff --git a/packages/grafana-ui/src/components/FormField/FormField.tsx b/packages/grafana-ui/src/components/FormField/FormField.tsx index a0bc181d284..b949a02d106 100644 --- a/packages/grafana-ui/src/components/FormField/FormField.tsx +++ b/packages/grafana-ui/src/components/FormField/FormField.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import { InlineFormLabel } from '../FormLabel/FormLabel'; import { Field } from '../Forms/Field'; import { InlineField } from '../Forms/InlineField'; -import { PopoverContent } from '../Tooltip'; +import { PopoverContent } from '../Tooltip/types'; export interface Props extends InputHTMLAttributes { label: string; diff --git a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx index 654521ba606..8a2ccbf9ee7 100644 --- a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx +++ b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx @@ -2,7 +2,8 @@ import classNames from 'classnames'; import { ReactNode } from 'react'; import { Icon } from '../Icon/Icon'; -import { Tooltip, PopoverContent } from '../Tooltip'; +import { Tooltip } from '../Tooltip/Tooltip'; +import { PopoverContent } from '../Tooltip/types'; interface Props { children: ReactNode; diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.tsx index fa3f9222b71..505c87da4c1 100644 --- a/packages/grafana-ui/src/components/Forms/Checkbox.tsx +++ b/packages/grafana-ui/src/components/Forms/Checkbox.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins'; import { getLabelStyles } from './Label'; diff --git a/packages/grafana-ui/src/components/Forms/Field.story.tsx b/packages/grafana-ui/src/components/Forms/Field.story.tsx index 3d38e8af6e4..b3accd1e492 100644 --- a/packages/grafana-ui/src/components/Forms/Field.story.tsx +++ b/packages/grafana-ui/src/components/Forms/Field.story.tsx @@ -2,7 +2,8 @@ import { Meta, StoryFn } from '@storybook/react'; import { useState, useCallback } from 'react'; import * as React from 'react'; -import { Input, Switch } from '..'; +import { Input } from '../Input/Input'; +import { Switch } from '../Switch/Switch'; import { Field } from './Field'; import mdx from './Field.mdx'; diff --git a/packages/grafana-ui/src/components/Forms/Field.tsx b/packages/grafana-ui/src/components/Forms/Field.tsx index 22f1748b9d8..1c80a2caf81 100644 --- a/packages/grafana-ui/src/components/Forms/Field.tsx +++ b/packages/grafana-ui/src/components/Forms/Field.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { getChildId } from '../../utils/reactUtils'; import { FieldValidationMessage } from './FieldValidationMessage'; diff --git a/packages/grafana-ui/src/components/Forms/FieldArray.tsx b/packages/grafana-ui/src/components/Forms/FieldArray.tsx index 69ebbbca657..fc0cda3b7ff 100644 --- a/packages/grafana-ui/src/components/Forms/FieldArray.tsx +++ b/packages/grafana-ui/src/components/Forms/FieldArray.tsx @@ -1,7 +1,7 @@ import { FC } from 'react'; import { useFieldArray, UseFieldArrayProps } from 'react-hook-form'; -import { FieldArrayApi } from '../../types'; +import { FieldArrayApi } from '../../types/forms'; export interface FieldArrayProps extends UseFieldArrayProps { children: (api: FieldArrayApi) => JSX.Element; diff --git a/packages/grafana-ui/src/components/Forms/FieldSet.story.tsx b/packages/grafana-ui/src/components/Forms/FieldSet.story.tsx index 086ef344d60..96e66a07290 100644 --- a/packages/grafana-ui/src/components/Forms/FieldSet.story.tsx +++ b/packages/grafana-ui/src/components/Forms/FieldSet.story.tsx @@ -1,6 +1,6 @@ import { Meta, StoryFn } from '@storybook/react'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { Input } from '../Input/Input'; import { Field } from './Field'; diff --git a/packages/grafana-ui/src/components/Forms/FieldSet.tsx b/packages/grafana-ui/src/components/Forms/FieldSet.tsx index 1823d5d456e..421ba3a5ad3 100644 --- a/packages/grafana-ui/src/components/Forms/FieldSet.tsx +++ b/packages/grafana-ui/src/components/Forms/FieldSet.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Legend } from './Legend'; diff --git a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx index 14f9c235c89..78f1aeab79e 100644 --- a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx +++ b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Icon } from '../Icon/Icon'; export interface FieldValidationMessageProps { diff --git a/packages/grafana-ui/src/components/Forms/Form.story.tsx b/packages/grafana-ui/src/components/Forms/Form.story.tsx index cad39dfc73c..7c12beb7465 100644 --- a/packages/grafana-ui/src/components/Forms/Form.story.tsx +++ b/packages/grafana-ui/src/components/Forms/Form.story.tsx @@ -2,7 +2,7 @@ import { StoryFn } from '@storybook/react'; import { ValidateResult } from 'react-hook-form'; import { withStoryContainer } from '../../utils/storybook/withStoryContainer'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { Input } from '../Input/Input'; import { InputControl } from '../InputControl'; import { Select } from '../Select/Select'; diff --git a/packages/grafana-ui/src/components/Forms/Form.tsx b/packages/grafana-ui/src/components/Forms/Form.tsx index a56393f95c7..2eb45c69a0e 100644 --- a/packages/grafana-ui/src/components/Forms/Form.tsx +++ b/packages/grafana-ui/src/components/Forms/Form.tsx @@ -3,7 +3,7 @@ import { HTMLProps, useEffect } from 'react'; import * as React from 'react'; import { useForm, Mode, DefaultValues, SubmitHandler, FieldValues } from 'react-hook-form'; -import { FormAPI } from '../../types'; +import { FormAPI } from '../../types/forms'; interface FormProps extends Omit, 'onSubmit' | 'children'> { validateOn?: Mode; diff --git a/packages/grafana-ui/src/components/Forms/InlineField.tsx b/packages/grafana-ui/src/components/Forms/InlineField.tsx index ec63fc93c3f..c63d87b585b 100644 --- a/packages/grafana-ui/src/components/Forms/InlineField.tsx +++ b/packages/grafana-ui/src/components/Forms/InlineField.tsx @@ -3,9 +3,9 @@ import { cloneElement, ReactNode } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import { getChildId } from '../../utils/reactUtils'; -import { PopoverContent } from '../Tooltip'; +import { PopoverContent } from '../Tooltip/types'; import { FieldProps } from './Field'; import { FieldValidationMessage } from './FieldValidationMessage'; diff --git a/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx b/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx index f77222a04d3..f75ec503007 100644 --- a/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx +++ b/packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx @@ -3,7 +3,7 @@ import { HTMLProps, ReactNode } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; export interface Props extends Omit, 'css'> { children: ReactNode | ReactNode[]; diff --git a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx index d930f89247b..fef27352c7f 100644 --- a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx +++ b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx @@ -3,9 +3,10 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Icon } from '../Icon/Icon'; -import { PopoverContent, Tooltip } from '../Tooltip'; +import { Tooltip } from '../Tooltip/Tooltip'; +import { PopoverContent } from '../Tooltip/types'; import { LabelProps } from './Label'; diff --git a/packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx b/packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx index 2dee14a5c9c..0a2a52d2fe7 100644 --- a/packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx +++ b/packages/grafana-ui/src/components/Forms/InlineSegmentGroup.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; export interface Props { grow?: boolean; diff --git a/packages/grafana-ui/src/components/Forms/Label.tsx b/packages/grafana-ui/src/components/Forms/Label.tsx index ddc9df7902a..be9cfaf6475 100644 --- a/packages/grafana-ui/src/components/Forms/Label.tsx +++ b/packages/grafana-ui/src/components/Forms/Label.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Icon } from '../Icon/Icon'; export interface LabelProps extends React.LabelHTMLAttributes { diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.internal.story.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.internal.story.tsx index a9975be2e6f..a837949c744 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.internal.story.tsx +++ b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.internal.story.tsx @@ -2,7 +2,7 @@ import { Meta, StoryFn } from '@storybook/react'; import { zip, fromPairs } from 'lodash'; import { useState } from 'react'; -import { EventsWithValidation } from '../../../../utils'; +import { EventsWithValidation } from '../../../../utils/validate'; import { Input } from './Input'; diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.test.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.test.tsx index d1ba43f4a81..2788349dd8d 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.test.tsx +++ b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.test.tsx @@ -1,8 +1,8 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { ValidationEvents } from '../../../../types'; -import { EventsWithValidation } from '../../../../utils'; +import { ValidationEvents } from '../../../../types/input'; +import { EventsWithValidation } from '../../../../utils/validate'; import { Input } from './Input'; diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx index 40090eee8a5..a45a854a045 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx +++ b/packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx @@ -2,8 +2,8 @@ import classNames from 'classnames'; import { PureComponent, ChangeEvent } from 'react'; import * as React from 'react'; -import { ValidationEvents, ValidationRule } from '../../../../types'; -import { validate, EventsWithValidation, hasValidationEvent } from '../../../../utils'; +import { ValidationEvents, ValidationRule } from '../../../../types/input'; +import { validate, EventsWithValidation, hasValidationEvent } from '../../../../utils/validate'; /** @deprecated Please use the `Input` component, which does not require this enum. */ export enum LegacyInputStatus { diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx index f82614eb9fa..d4352eda423 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx +++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx @@ -13,7 +13,8 @@ import { ScrollContainer } from '../../../ScrollContainer/ScrollContainer'; import { SingleValue } from '../../../Select/SingleValue'; import resetSelectStyles from '../../../Select/resetSelectStyles'; import { SelectCommonProps, SelectAsyncProps } from '../../../Select/types'; -import { Tooltip, PopoverContent } from '../../../Tooltip'; +import { Tooltip } from '../../../Tooltip/Tooltip'; +import { PopoverContent } from '../../../Tooltip/types'; import IndicatorsContainer from './IndicatorsContainer'; import NoOptionsMessage from './NoOptionsMessage'; diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/SelectOptionGroup.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/SelectOptionGroup.tsx index ad478885975..aecc7bf4514 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/SelectOptionGroup.tsx +++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/SelectOptionGroup.tsx @@ -4,8 +4,9 @@ import { GroupProps } from 'react-select'; import { GrafanaTheme2 } from '@grafana/data'; -import { stylesFactory, withTheme2 } from '../../../../themes'; -import { Themeable2 } from '../../../../types'; +import { withTheme2 } from '../../../../themes/ThemeContext'; +import { stylesFactory } from '../../../../themes/stylesFactory'; +import { Themeable2 } from '../../../../types/theme'; import { Icon } from '../../../Icon/Icon'; interface ExtendedGroupProps extends Omit, 'theme'>, Themeable2 { diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx index dc9532511a0..e6a193b2ec3 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx +++ b/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx @@ -6,8 +6,8 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { withTheme2 } from '../../../../themes'; -import { Themeable2 } from '../../../../types'; +import { withTheme2 } from '../../../../themes/ThemeContext'; +import { Themeable2 } from '../../../../types/theme'; import { Icon } from '../../../Icon/Icon'; import { Tooltip } from '../../../Tooltip/Tooltip'; diff --git a/packages/grafana-ui/src/components/Forms/Legend.tsx b/packages/grafana-ui/src/components/Forms/Legend.tsx index fd799dcda94..7b48c149b7b 100644 --- a/packages/grafana-ui/src/components/Forms/Legend.tsx +++ b/packages/grafana-ui/src/components/Forms/Legend.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; export interface LabelProps extends React.HTMLAttributes { children: string | ReactNode; diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx index 92f1c0d494e..30aaecc300f 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { StringSelector, selectors } from '@grafana/e2e-selectors'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { getFocusStyles, getInternalRadius, getMouseFocusStyles } from '../../../themes/mixins'; import { Tooltip } from '../../Tooltip/Tooltip'; import { getPropertiesForButtonSize } from '../commonStyles'; diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx index 918896cd79c..b47ff9913d3 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx @@ -4,7 +4,7 @@ import { useCallback, useEffect, useRef } from 'react'; import { GrafanaTheme2, SelectableValue, toIconName } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { Icon } from '../../Icon/Icon'; import { RadioButtonSize, RadioButton, RADIO_GROUP_PADDING } from './RadioButton'; diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx index 0735b2c4c9e..1dc9a80c1c6 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonDot.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; export interface RadioButtonDotProps extends Omit, 'label' | 'value' | 'onChange' | 'type'> { diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.tsx index 011749924e5..a6366c64756 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.tsx @@ -3,7 +3,7 @@ import { uniqueId } from 'lodash'; import { GrafanaTheme2, SelectableValue } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { RadioButtonDot } from './RadioButtonDot'; diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index cecd0351f5e..d73339b12b6 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -14,7 +14,7 @@ import { import { VizTextDisplayOptions, VizOrientation } from '@grafana/schema'; import { calculateFontSize } from '../../utils/measureText'; -import { clearButtonStyles } from '../Button'; +import { clearButtonStyles } from '../Button/Button'; import { calculateGaugeAutoProps, DEFAULT_THRESHOLDS, getFormattedThresholds } from './utils'; diff --git a/packages/grafana-ui/src/components/Gauge/utils.test.ts b/packages/grafana-ui/src/components/Gauge/utils.test.ts index 0aef2c93d3f..4c53929af0f 100644 --- a/packages/grafana-ui/src/components/Gauge/utils.test.ts +++ b/packages/grafana-ui/src/components/Gauge/utils.test.ts @@ -1,7 +1,7 @@ import { FieldColorModeId, FieldConfig, ThresholdsMode } from '@grafana/data'; import { VizOrientation } from '@grafana/schema'; -import { getTheme } from '../../themes'; +import { getTheme } from '../../themes/getTheme'; import { calculateGaugeAutoProps, getFormattedThresholds } from './utils'; diff --git a/packages/grafana-ui/src/components/Icon/Icon.story.tsx b/packages/grafana-ui/src/components/Icon/Icon.story.tsx index 61403b4326d..cb2693589bc 100644 --- a/packages/grafana-ui/src/components/Icon/Icon.story.tsx +++ b/packages/grafana-ui/src/components/Icon/Icon.story.tsx @@ -4,8 +4,8 @@ import { ChangeEvent, useState } from 'react'; import { toIconName, IconName } from '@grafana/data'; -import { useTheme2 } from '../../themes'; -import { getAvailableIcons } from '../../types'; +import { useTheme2 } from '../../themes/ThemeContext'; +import { getAvailableIcons } from '../../types/icon'; import { Field } from '../Forms/Field'; import { Input } from '../Input/Input'; diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx index 95a50b0e8ec..7a1c7a0c6f3 100644 --- a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx +++ b/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx @@ -1,8 +1,8 @@ import { css } from '@emotion/css'; import { StoryFn, Meta } from '@storybook/react'; -import { useTheme2 } from '../../themes'; -import { IconSize, IconName } from '../../types'; +import { useTheme2 } from '../../themes/ThemeContext'; +import { IconSize, IconName } from '../../types/icon'; import { Stack } from '../Layout/Stack/Stack'; import { BasePropsWithTooltip, IconButton, IconButtonVariant, Props as IconButtonProps } from './IconButton'; diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.tsx index 8a694fa39ce..2964143b331 100644 --- a/packages/grafana-ui/src/components/IconButton/IconButton.tsx +++ b/packages/grafana-ui/src/components/IconButton/IconButton.tsx @@ -3,13 +3,14 @@ import * as React from 'react'; import { GrafanaTheme2, colorManipulator, deprecationWarning } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins'; -import { ComponentSize } from '../../types'; import { IconName, IconSize, IconType } from '../../types/icon'; -import { IconRenderer } from '../Button'; +import { ComponentSize } from '../../types/size'; +import { IconRenderer } from '../Button/Button'; import { getSvgSize } from '../Icon/utils'; -import { TooltipPlacement, PopoverContent, Tooltip } from '../Tooltip'; +import { Tooltip } from '../Tooltip/Tooltip'; +import { PopoverContent, TooltipPlacement } from '../Tooltip/types'; export type IconButtonVariant = 'primary' | 'secondary' | 'destructive'; diff --git a/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx index c466528c97d..29b625f5ebf 100644 --- a/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx +++ b/packages/grafana-ui/src/components/InfoBox/FeatureInfoBox.tsx @@ -3,7 +3,7 @@ import { memo, forwardRef } from 'react'; import { FeatureState, GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { FeatureBadge } from '../FeatureBadge/FeatureBadge'; import { InfoBox, InfoBoxProps } from './InfoBox'; diff --git a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx index 3132d31add0..cb445321333 100644 --- a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx +++ b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Alert, AlertVariant } from '../Alert/Alert'; import { Icon } from '../Icon/Icon'; diff --git a/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx index 83f411fedf8..f7397864f73 100644 --- a/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx +++ b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx @@ -1,5 +1,6 @@ import { IconButton } from '../IconButton/IconButton'; -import { TooltipProps, PopoverContent } from '../Tooltip'; +import { TooltipProps } from '../Tooltip/Tooltip'; +import { PopoverContent } from '../Tooltip/types'; interface InfoTooltipProps extends Omit { children: PopoverContent; diff --git a/packages/grafana-ui/src/components/InlineToast/InlineToast.tsx b/packages/grafana-ui/src/components/InlineToast/InlineToast.tsx index 37edf67dea5..9c6fa9695c9 100644 --- a/packages/grafana-ui/src/components/InlineToast/InlineToast.tsx +++ b/packages/grafana-ui/src/components/InlineToast/InlineToast.tsx @@ -5,8 +5,8 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2, useTheme2 } from '../../themes'; -import { IconName } from '../../types'; +import { useStyles2, useTheme2 } from '../../themes/ThemeContext'; +import { IconName } from '../../types/icon'; import { Icon } from '../Icon/Icon'; import { Portal } from '../Portal/Portal'; diff --git a/packages/grafana-ui/src/components/Input/Input.story.tsx b/packages/grafana-ui/src/components/Input/Input.story.tsx index 6fe9528b7cf..7cc245c9b9e 100644 --- a/packages/grafana-ui/src/components/Input/Input.story.tsx +++ b/packages/grafana-ui/src/components/Input/Input.story.tsx @@ -3,8 +3,8 @@ import { useState } from 'react'; import { KeyValue } from '@grafana/data'; -import { getAvailableIcons } from '../../types'; -import { Button } from '../Button'; +import { getAvailableIcons } from '../../types/icon'; +import { Button } from '../Button/Button'; import { Field } from '../Forms/Field'; import { Input } from './Input'; diff --git a/packages/grafana-ui/src/components/Input/Input.tsx b/packages/grafana-ui/src/components/Input/Input.tsx index 43dae3faa29..fe142c8799a 100644 --- a/packages/grafana-ui/src/components/Input/Input.tsx +++ b/packages/grafana-ui/src/components/Input/Input.tsx @@ -4,7 +4,8 @@ import { useMeasure } from 'react-use'; import { GrafanaTheme2 } from '@grafana/data'; -import { stylesFactory, useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; +import { stylesFactory } from '../../themes/stylesFactory'; import { getFocusStyle, sharedInputStyle } from '../Forms/commonStyles'; import { Spinner } from '../Spinner/Spinner'; diff --git a/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.story.tsx b/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.story.tsx index f048e45cba4..454c4f77486 100644 --- a/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.story.tsx +++ b/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.story.tsx @@ -2,7 +2,7 @@ import { Meta, StoryFn, StoryObj } from '@storybook/react'; import { useCallback, useMemo, useState } from 'react'; import { CellProps } from 'react-table'; -import { LinkButton } from '../Button'; +import { LinkButton } from '../Button/Button'; import { Field } from '../Forms/Field'; import { Input } from '../Input/Input'; diff --git a/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx b/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx index c82a7bb4961..4c0faebccf5 100644 --- a/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx +++ b/packages/grafana-ui/src/components/InteractiveTable/InteractiveTable.tsx @@ -15,10 +15,11 @@ import { import { GrafanaTheme2, IconName, isTruthy } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Icon } from '../Icon/Icon'; import { Pagination } from '../Pagination/Pagination'; -import { PopoverContent, Tooltip } from '../Tooltip'; +import { Tooltip } from '../Tooltip/Tooltip'; +import { PopoverContent } from '../Tooltip/types'; import { Column } from './types'; import { EXPANDER_CELL_ID, getColumns } from './utils'; diff --git a/packages/grafana-ui/src/components/Layout/Box/Box.tsx b/packages/grafana-ui/src/components/Layout/Box/Box.tsx index 9f65cce7048..c012eb9d5f3 100644 --- a/packages/grafana-ui/src/components/Layout/Box/Box.tsx +++ b/packages/grafana-ui/src/components/Layout/Box/Box.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import { GrafanaTheme2, ThemeSpacingTokens, ThemeShape, ThemeShadows } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { AlignItems, Direction, FlexProps, JustifyContent } from '../types'; import { ResponsiveProp, getResponsiveStyle } from '../utils/responsiveness'; import { getSizeStyles, SizeProps } from '../utils/styles'; diff --git a/packages/grafana-ui/src/components/Layout/Grid/Grid.story.tsx b/packages/grafana-ui/src/components/Layout/Grid/Grid.story.tsx index f69433d22eb..3e344991718 100644 --- a/packages/grafana-ui/src/components/Layout/Grid/Grid.story.tsx +++ b/packages/grafana-ui/src/components/Layout/Grid/Grid.story.tsx @@ -1,6 +1,6 @@ import { Meta, StoryFn } from '@storybook/react'; -import { useTheme2 } from '../../../themes'; +import { useTheme2 } from '../../../themes/ThemeContext'; import { SpacingTokenControl } from '../../../utils/storybook/themeStorybookControls'; import { Grid } from './Grid'; diff --git a/packages/grafana-ui/src/components/Layout/Grid/Grid.tsx b/packages/grafana-ui/src/components/Layout/Grid/Grid.tsx index 969d5fb1f06..1573f881a04 100644 --- a/packages/grafana-ui/src/components/Layout/Grid/Grid.tsx +++ b/packages/grafana-ui/src/components/Layout/Grid/Grid.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { AlignItems } from '../types'; import { getResponsiveStyle, ResponsiveProp } from '../utils/responsiveness'; diff --git a/packages/grafana-ui/src/components/Layout/Layout.mdx b/packages/grafana-ui/src/components/Layout/Layout.mdx index 854cbcc9e2f..a99f3d0bd7c 100644 --- a/packages/grafana-ui/src/components/Layout/Layout.mdx +++ b/packages/grafana-ui/src/components/Layout/Layout.mdx @@ -1,7 +1,7 @@ import { Canvas, ArgTypes } from '@storybook/blocks'; -import { Layout, HorizontalGroup, VerticalGroup } from './Layout'; -import { Button } from '../Button'; -import { Select } from '../index'; +import { Layout, HorizontalGroup, VerticalGroup } from '../Layout/Layout'; +import { Button } from '../Button/Button'; +import { Select } from '../Select/Select'; import { ExampleFrame } from '../../utils/storybook/ExampleFrame'; import * as LayoutStories from './Layout.story'; diff --git a/packages/grafana-ui/src/components/Layout/Layout.story.tsx b/packages/grafana-ui/src/components/Layout/Layout.story.tsx index 4b12e6ee07e..82f9e7bf15e 100644 --- a/packages/grafana-ui/src/components/Layout/Layout.story.tsx +++ b/packages/grafana-ui/src/components/Layout/Layout.story.tsx @@ -1,7 +1,7 @@ import { StoryFn, Meta } from '@storybook/react'; import { withStoryContainer } from '../../utils/storybook/withStoryContainer'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { HorizontalGroup, Layout, LayoutProps, VerticalGroup } from './Layout'; import mdx from './Layout.mdx'; diff --git a/packages/grafana-ui/src/components/Layout/Layout.tsx b/packages/grafana-ui/src/components/Layout/Layout.tsx index 06b0b3faf06..a2f34d44d06 100644 --- a/packages/grafana-ui/src/components/Layout/Layout.tsx +++ b/packages/grafana-ui/src/components/Layout/Layout.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; enum Orientation { Horizontal, diff --git a/packages/grafana-ui/src/components/Layout/Stack/Stack.story.tsx b/packages/grafana-ui/src/components/Layout/Stack/Stack.story.tsx index 4190e727f6b..013b1a96ff9 100644 --- a/packages/grafana-ui/src/components/Layout/Stack/Stack.story.tsx +++ b/packages/grafana-ui/src/components/Layout/Stack/Stack.story.tsx @@ -2,7 +2,7 @@ import { Meta, StoryFn } from '@storybook/react'; import { ThemeSpacingTokens } from '@grafana/data'; -import { useTheme2 } from '../../../themes'; +import { useTheme2 } from '../../../themes/ThemeContext'; import { SpacingTokenControl } from '../../../utils/storybook/themeStorybookControls'; import { JustifyContent, Wrap, Direction } from '../types'; diff --git a/packages/grafana-ui/src/components/Layout/Stack/Stack.tsx b/packages/grafana-ui/src/components/Layout/Stack/Stack.tsx index d73dfe4d1cf..5b8aaa4af3c 100644 --- a/packages/grafana-ui/src/components/Layout/Stack/Stack.tsx +++ b/packages/grafana-ui/src/components/Layout/Stack/Stack.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { AlignItems, Direction, FlexProps, JustifyContent, Wrap } from '../types'; import { ResponsiveProp, getResponsiveStyle } from '../utils/responsiveness'; import { getSizeStyles, SizeProps } from '../utils/styles'; diff --git a/packages/grafana-ui/src/components/Link/TextLink.tsx b/packages/grafana-ui/src/components/Link/TextLink.tsx index 6bf83ce3454..d46a1ba3bc3 100644 --- a/packages/grafana-ui/src/components/Link/TextLink.tsx +++ b/packages/grafana-ui/src/components/Link/TextLink.tsx @@ -3,8 +3,8 @@ import { AnchorHTMLAttributes, forwardRef } from 'react'; import { GrafanaTheme2, locationUtil, textUtil, ThemeTypographyVariantTypes } from '@grafana/data'; -import { useTheme2 } from '../../themes'; -import { IconName, IconSize } from '../../types'; +import { useTheme2 } from '../../themes/ThemeContext'; +import { IconName, IconSize } from '../../types/icon'; import { Icon } from '../Icon/Icon'; import { customWeight } from '../Text/utils'; diff --git a/packages/grafana-ui/src/components/List/AbstractList.tsx b/packages/grafana-ui/src/components/List/AbstractList.tsx index 2ed732e8106..bc4f6260a9e 100644 --- a/packages/grafana-ui/src/components/List/AbstractList.tsx +++ b/packages/grafana-ui/src/components/List/AbstractList.tsx @@ -1,7 +1,7 @@ import { cx, css } from '@emotion/css'; import { PureComponent } from 'react'; -import { stylesFactory } from '../../themes'; +import { stylesFactory } from '../../themes/stylesFactory'; export interface ListProps { items: T[]; diff --git a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx b/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx index 7fad091b13d..ad070f6427f 100644 --- a/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx +++ b/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx @@ -3,7 +3,7 @@ import { CSSProperties } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; export interface LoadingBarProps { width: number; diff --git a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx index 695b43ab0cf..fb3ec626437 100644 --- a/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx +++ b/packages/grafana-ui/src/components/LoadingPlaceholder/LoadingPlaceholder.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Spinner } from '../Spinner/Spinner'; /** diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldValueMatcher.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldValueMatcher.tsx index f5d28b03df7..cd7ffcb2257 100644 --- a/packages/grafana-ui/src/components/MatchersUI/FieldValueMatcher.tsx +++ b/packages/grafana-ui/src/components/MatchersUI/FieldValueMatcher.tsx @@ -13,7 +13,7 @@ import { } from '@grafana/data'; import { ComparisonOperation } from '@grafana/schema'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; import { Input } from '../Input/Input'; import { Select } from '../Select/Select'; diff --git a/packages/grafana-ui/src/components/MatchersUI/utils.ts b/packages/grafana-ui/src/components/MatchersUI/utils.ts index d9806bac2b5..8d31dfc8dfb 100644 --- a/packages/grafana-ui/src/components/MatchersUI/utils.ts +++ b/packages/grafana-ui/src/components/MatchersUI/utils.ts @@ -2,7 +2,7 @@ import { useMemo } from 'react'; import { DataFrame, Field, getFieldDisplayName, SelectableValue, FieldNamePickerBaseNameMode } from '@grafana/data'; -import { getFieldTypeIcon } from '../../types'; +import { getFieldTypeIcon } from '../../types/icon'; /** * @internal diff --git a/packages/grafana-ui/src/components/Menu/Menu.story.tsx b/packages/grafana-ui/src/components/Menu/Menu.story.tsx index bc0b311f6fd..741fe74a998 100644 --- a/packages/grafana-ui/src/components/Menu/Menu.story.tsx +++ b/packages/grafana-ui/src/components/Menu/Menu.story.tsx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/react'; -import { GraphContextMenuHeader } from '..'; +import { GraphContextMenuHeader } from '../../graveyard/Graph/GraphContextMenu'; import { StoryExample } from '../../utils/storybook/StoryExample'; import { Stack } from '../Layout/Stack/Stack'; diff --git a/packages/grafana-ui/src/components/Menu/Menu.tsx b/packages/grafana-ui/src/components/Menu/Menu.tsx index 1c9d675cff4..187943293db 100644 --- a/packages/grafana-ui/src/components/Menu/Menu.tsx +++ b/packages/grafana-ui/src/components/Menu/Menu.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Box } from '../Layout/Box/Box'; import { MenuDivider } from './MenuDivider'; diff --git a/packages/grafana-ui/src/components/Menu/MenuDivider.tsx b/packages/grafana-ui/src/components/Menu/MenuDivider.tsx index 64e2e832eaf..f89359bf191 100644 --- a/packages/grafana-ui/src/components/Menu/MenuDivider.tsx +++ b/packages/grafana-ui/src/components/Menu/MenuDivider.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; export function MenuDivider() { const styles = useStyles2(getStyles); diff --git a/packages/grafana-ui/src/components/Menu/MenuGroup.tsx b/packages/grafana-ui/src/components/Menu/MenuGroup.tsx index 8f508a6732e..04b3c93faca 100644 --- a/packages/grafana-ui/src/components/Menu/MenuGroup.tsx +++ b/packages/grafana-ui/src/components/Menu/MenuGroup.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { MenuItemProps } from './MenuItem'; diff --git a/packages/grafana-ui/src/components/Menu/MenuItem.tsx b/packages/grafana-ui/src/components/Menu/MenuItem.tsx index f295b8eb22b..0f39c690c37 100644 --- a/packages/grafana-ui/src/components/Menu/MenuItem.tsx +++ b/packages/grafana-ui/src/components/Menu/MenuItem.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { GrafanaTheme2, LinkTarget } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { getFocusStyles } from '../../themes/mixins'; import { IconName } from '../../types/icon'; import { t } from '../../utils/i18n'; diff --git a/packages/grafana-ui/src/components/Menu/SubMenu.tsx b/packages/grafana-ui/src/components/Menu/SubMenu.tsx index 57472f0be17..8384e143695 100644 --- a/packages/grafana-ui/src/components/Menu/SubMenu.tsx +++ b/packages/grafana-ui/src/components/Menu/SubMenu.tsx @@ -4,7 +4,7 @@ import { memo, CSSProperties, ReactElement, useEffect, useRef, useState } from ' import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Icon } from '../Icon/Icon'; import { MenuItemProps } from './MenuItem'; diff --git a/packages/grafana-ui/src/components/Modal/Modal.story.tsx b/packages/grafana-ui/src/components/Modal/Modal.story.tsx index 9072b9ffa22..92e8e13348c 100644 --- a/packages/grafana-ui/src/components/Modal/Modal.story.tsx +++ b/packages/grafana-ui/src/components/Modal/Modal.story.tsx @@ -3,9 +3,9 @@ import { StoryFn, Meta } from '@storybook/react'; import { oneLineTrim } from 'common-tags'; import { useState } from 'react'; -import { getAvailableIcons } from '../../types'; -import { Button } from '../Button'; -import { TabContent } from '../Tabs'; +import { getAvailableIcons } from '../../types/icon'; +import { Button } from '../Button/Button'; +import { TabContent } from '../Tabs/TabContent'; import { Modal } from './Modal'; import mdx from './Modal.mdx'; diff --git a/packages/grafana-ui/src/components/Modal/Modal.tsx b/packages/grafana-ui/src/components/Modal/Modal.tsx index db59a62f013..ea35cc7948f 100644 --- a/packages/grafana-ui/src/components/Modal/Modal.tsx +++ b/packages/grafana-ui/src/components/Modal/Modal.tsx @@ -5,8 +5,8 @@ import { OverlayContainer, useOverlay } from '@react-aria/overlays'; import { PropsWithChildren, useRef } from 'react'; import * as React from 'react'; -import { useStyles2 } from '../../themes'; -import { IconName } from '../../types'; +import { useStyles2 } from '../../themes/ThemeContext'; +import { IconName } from '../../types/icon'; import { t } from '../../utils/i18n'; import { IconButton } from '../IconButton/IconButton'; import { Stack } from '../Layout/Stack/Stack'; diff --git a/packages/grafana-ui/src/components/Modal/ModalHeader.tsx b/packages/grafana-ui/src/components/Modal/ModalHeader.tsx index c580df54acb..14b29944da1 100644 --- a/packages/grafana-ui/src/components/Modal/ModalHeader.tsx +++ b/packages/grafana-ui/src/components/Modal/ModalHeader.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { useStyles2 } from '../../themes'; -import { IconName } from '../../types'; +import { useStyles2 } from '../../themes/ThemeContext'; +import { IconName } from '../../types/icon'; import { getModalStyles } from './getModalStyles'; diff --git a/packages/grafana-ui/src/components/Modal/ModalTabContent.tsx b/packages/grafana-ui/src/components/Modal/ModalTabContent.tsx index 85f5a979287..f363ff2dc9b 100644 --- a/packages/grafana-ui/src/components/Modal/ModalTabContent.tsx +++ b/packages/grafana-ui/src/components/Modal/ModalTabContent.tsx @@ -3,8 +3,8 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; -import { IconName } from '../../types'; +import { useStyles2 } from '../../themes/ThemeContext'; +import { IconName } from '../../types/icon'; interface Props { /** @deprecated */ diff --git a/packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx b/packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx index ab1785d1d0a..91c65c298fc 100644 --- a/packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx +++ b/packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx @@ -1,6 +1,6 @@ import { NavModelItem } from '@grafana/data'; -import { IconName } from '../../types'; +import { IconName } from '../../types/icon'; import { Tab } from '../Tabs/Tab'; import { TabsBar } from '../Tabs/TabsBar'; diff --git a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx index 00aaf6b4533..0d525d5b4a5 100644 --- a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx +++ b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx @@ -5,8 +5,8 @@ import { PureComponent } from 'react'; import { GrafanaTheme2, monacoLanguageRegistry } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { withTheme2 } from '../../themes'; -import { Themeable2 } from '../../types'; +import { withTheme2 } from '../../themes/ThemeContext'; +import { Themeable2 } from '../../types/theme'; import { ReactMonacoEditorLazy } from './ReactMonacoEditorLazy'; import { registerSuggestions } from './suggestions'; diff --git a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx index 56714d927c6..72c13272190 100644 --- a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx +++ b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx @@ -2,7 +2,7 @@ import Editor, { loader as monacoEditorLoader, Monaco } from '@monaco-editor/rea import * as monaco from 'monaco-editor'; import { useCallback, useEffect } from 'react'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import defineThemes from './theme'; import type { ReactMonacoEditorProps } from './types'; diff --git a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx index f5dc860567c..a4875ca978a 100644 --- a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx +++ b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditorLazy.tsx @@ -3,7 +3,7 @@ import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; import { useAsyncDependency } from '../../utils/useAsyncDependency'; import { ErrorWithStack } from '../ErrorBoundary/ErrorWithStack'; diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.story.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.story.tsx index da042128e83..1c0e984cf4f 100644 --- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.story.tsx +++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.story.tsx @@ -4,7 +4,7 @@ import { Meta } from '@storybook/react'; import { StoryExample } from '../../utils/storybook/StoryExample'; import { IconButton } from '../IconButton/IconButton'; import { Stack } from '../Layout/Stack/Stack'; -import { ToolbarButton } from '../ToolbarButton'; +import { ToolbarButton } from '../ToolbarButton/ToolbarButton'; import { PageToolbar } from './PageToolbar'; diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.test.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.test.tsx index e74bb4a4776..547d699e7f3 100644 --- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.test.tsx +++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.test.tsx @@ -1,6 +1,6 @@ import { render, screen } from '@testing-library/react'; -import { PageToolbar } from '..'; +import { PageToolbar } from './PageToolbar'; const resizeWindow = (x: number, y: number) => { global.innerWidth = x; diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx index 521b059ea8e..18199350164 100644 --- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx +++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx @@ -6,7 +6,7 @@ import { selectors } from '@grafana/e2e-selectors'; import { useStyles2 } from '../../themes/ThemeContext'; import { getFocusStyles } from '../../themes/mixins'; -import { IconName } from '../../types'; +import { IconName } from '../../types/icon'; import { t } from '../../utils/i18n'; import { Icon } from '../Icon/Icon'; import { IconButton } from '../IconButton/IconButton'; diff --git a/packages/grafana-ui/src/components/Pagination/Pagination.tsx b/packages/grafana-ui/src/components/Pagination/Pagination.tsx index 4778e81c670..394f267b894 100644 --- a/packages/grafana-ui/src/components/Pagination/Pagination.tsx +++ b/packages/grafana-ui/src/components/Pagination/Pagination.tsx @@ -1,9 +1,9 @@ import { css, cx } from '@emotion/css'; import { useMemo } from 'react'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; -import { Button, ButtonVariant } from '../Button'; +import { Button, ButtonVariant } from '../Button/Button'; import { Icon } from '../Icon/Icon'; export interface Props { diff --git a/packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx b/packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx index fa767de0d53..74cf3cc108c 100644 --- a/packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { selectors as e2eSelectors } from '@grafana/e2e-selectors'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Icon } from '../Icon/Icon'; import { PanelMenu } from './PanelMenu'; diff --git a/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx b/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx index 6fbb87ccbb3..19fc83fa6d6 100644 --- a/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/LoadingIndicator.tsx @@ -3,7 +3,7 @@ import { css, cx, keyframes } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; import { Icon } from '../Icon/Icon'; import { Tooltip } from '../Tooltip/Tooltip'; diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx index c892110fbab..c00acacda20 100644 --- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx +++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx @@ -4,7 +4,7 @@ import { PanelChrome } from './PanelChrome'; import { action } from '@storybook/addon-actions'; import { LoadingState } from '@grafana/data'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { Menu } from '../Menu/Menu'; import { Stack } from '../Layout/Stack/Stack'; import { IconButton } from '../IconButton/IconButton'; diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx index c844c1beae3..de64d94c7f5 100644 --- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx @@ -7,7 +7,7 @@ import { useInterval, useToggle } from 'react-use'; import { LoadingState } from '@grafana/data'; import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup'; import { Icon } from '../Icon/Icon'; import { Stack } from '../Layout/Stack/Stack'; diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx index c042f5d4539..1e98084081b 100644 --- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx @@ -6,16 +6,16 @@ import { useMeasure, useToggle } from 'react-use'; import { GrafanaTheme2, LoadingState } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2, useTheme2 } from '../../themes'; +import { useStyles2, useTheme2 } from '../../themes/ThemeContext'; import { getFocusStyles } from '../../themes/mixins'; -import { usePointerDistance } from '../../utils'; import { DelayRender } from '../../utils/DelayRender'; import { t } from '../../utils/i18n'; +import { usePointerDistance } from '../../utils/usePointerDistance'; import { useElementSelection } from '../ElementSelectionContext/ElementSelectionContext'; import { Icon } from '../Icon/Icon'; import { LoadingBar } from '../LoadingBar/LoadingBar'; import { Text } from '../Text/Text'; -import { Tooltip } from '../Tooltip'; +import { Tooltip } from '../Tooltip/Tooltip'; import { HoverWidget } from './HoverWidget'; import { PanelDescription } from './PanelDescription'; diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelDescription.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelDescription.tsx index b9e74f5c39d..f66ca51bb86 100644 --- a/packages/grafana-ui/src/components/PanelChrome/PanelDescription.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/PanelDescription.tsx @@ -2,9 +2,9 @@ import { css, cx } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Icon } from '../Icon/Icon'; -import { Tooltip } from '../Tooltip'; +import { Tooltip } from '../Tooltip/Tooltip'; import { TitleItem } from './TitleItem'; diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx index 5116b76e41c..e56d8c6302f 100644 --- a/packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/PanelMenu.tsx @@ -5,8 +5,8 @@ import { selectors } from '@grafana/e2e-selectors'; import { t } from '../../utils/i18n'; import { Dropdown } from '../Dropdown/Dropdown'; -import { ToolbarButton } from '../ToolbarButton'; -import { TooltipPlacement } from '../Tooltip'; +import { ToolbarButton } from '../ToolbarButton/ToolbarButton'; +import { TooltipPlacement } from '../Tooltip/types'; interface PanelMenuProps { menu: ReactElement | (() => ReactElement); diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx index 9667163d12a..7eac0235289 100644 --- a/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { ToolbarButton } from '../ToolbarButton/ToolbarButton'; export interface Props { diff --git a/packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx b/packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx index a4922f2331b..6a2a8adaa2d 100644 --- a/packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/TitleItem.tsx @@ -4,9 +4,9 @@ import * as React from 'react'; import { GrafanaTheme2, LinkModel, LinkTarget } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; type TitleItemProps = { className?: string; diff --git a/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx b/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx index e84e295f654..7d60c5cb3a0 100644 --- a/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx +++ b/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx @@ -3,7 +3,7 @@ import { DetailedHTMLProps, HTMLAttributes } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; type Props = DetailedHTMLProps, HTMLDivElement>; diff --git a/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.tsx b/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.tsx index 403a7c4b408..698e61c466b 100644 --- a/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.tsx +++ b/packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.tsx @@ -2,7 +2,7 @@ import { HTMLAttributes } from 'react'; import { PluginSignatureStatus, PluginSignatureType } from '@grafana/data'; -import { IconName } from '../../types'; +import { IconName } from '../../types/icon'; import { Badge, BadgeProps } from '../Badge/Badge'; const SIGNATURE_ICONS: Record = { diff --git a/packages/grafana-ui/src/components/Portal/Portal.tsx b/packages/grafana-ui/src/components/Portal/Portal.tsx index 4cc232e331a..a3f2215bd1f 100644 --- a/packages/grafana-ui/src/components/Portal/Portal.tsx +++ b/packages/grafana-ui/src/components/Portal/Portal.tsx @@ -6,7 +6,7 @@ import ReactDOM from 'react-dom'; import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2, useTheme2 } from '../../themes'; +import { useStyles2, useTheme2 } from '../../themes/ThemeContext'; interface Props { className?: string; diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.story.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.story.tsx index bd9d92659e8..ce7e4b61f80 100644 --- a/packages/grafana-ui/src/components/QueryField/QueryField.story.tsx +++ b/packages/grafana-ui/src/components/QueryField/QueryField.story.tsx @@ -1,6 +1,6 @@ import { Meta, StoryFn } from '@storybook/react'; -import { TypeaheadInput } from '../../types'; +import { TypeaheadInput } from '../../types/completion'; import { QueryField, QueryFieldProps } from './QueryField'; diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.tsx index 156883ac7cc..9b5133ac830 100644 --- a/packages/grafana-ui/src/components/QueryField/QueryField.tsx +++ b/packages/grafana-ui/src/components/QueryField/QueryField.tsx @@ -10,16 +10,14 @@ import { Editor, EventHook, Plugin } from 'slate-react'; import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { - ClearPlugin, - NewlinePlugin, - SelectionShortcutsPlugin, - IndentationPlugin, - ClipboardPlugin, - RunnerPlugin, - SuggestionsPlugin, -} from '../../slate-plugins'; -import { withTheme2 } from '../../themes'; +import { ClearPlugin } from '../../slate-plugins/clear'; +import { ClipboardPlugin } from '../../slate-plugins/clipboard'; +import { IndentationPlugin } from '../../slate-plugins/indentation'; +import { NewlinePlugin } from '../../slate-plugins/newline'; +import { RunnerPlugin } from '../../slate-plugins/runner'; +import { SelectionShortcutsPlugin } from '../../slate-plugins/selection_shortcuts'; +import { SuggestionsPlugin } from '../../slate-plugins/suggestions'; +import { withTheme2 } from '../../themes/ThemeContext'; import { getFocusStyles } from '../../themes/mixins'; import { CompletionItemGroup, SuggestionsState, TypeaheadInput, TypeaheadOutput } from '../../types/completion'; import { Themeable2 } from '../../types/theme'; diff --git a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx index 8e753e8e90c..36c02708329 100644 --- a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx +++ b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx @@ -6,9 +6,9 @@ import { SelectableValue, parseDuration } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; import { t } from '../../utils/i18n'; -import { ButtonGroup } from '../Button'; +import { ButtonGroup } from '../Button/ButtonGroup'; import { ButtonSelect } from '../Dropdown/ButtonSelect'; -import { ToolbarButtonVariant, ToolbarButton } from '../ToolbarButton'; +import { ToolbarButton, ToolbarButtonVariant } from '../ToolbarButton/ToolbarButton'; // Default intervals used in the refresh picker component export const defaultIntervals = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d']; diff --git a/packages/grafana-ui/src/components/ScrollContainer/ScrollContainer.tsx b/packages/grafana-ui/src/components/ScrollContainer/ScrollContainer.tsx index d3336e20780..9eafa437690 100644 --- a/packages/grafana-ui/src/components/ScrollContainer/ScrollContainer.tsx +++ b/packages/grafana-ui/src/components/ScrollContainer/ScrollContainer.tsx @@ -4,7 +4,7 @@ import { forwardRef, PropsWithChildren, UIEventHandler } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Box, BoxProps } from '../Layout/Box/Box'; import { ScrollIndicators } from './ScrollIndicators'; diff --git a/packages/grafana-ui/src/components/ScrollContainer/ScrollIndicators.tsx b/packages/grafana-ui/src/components/ScrollContainer/ScrollIndicators.tsx index a81bd0f7c6a..a51d03e0c2a 100644 --- a/packages/grafana-ui/src/components/ScrollContainer/ScrollIndicators.tsx +++ b/packages/grafana-ui/src/components/ScrollContainer/ScrollIndicators.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; export const ScrollIndicators = ({ children }: React.PropsWithChildren<{}>) => { const [showScrollTopIndicator, setShowTopScrollIndicator] = useState(false); diff --git a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx index 77343c52fd4..8989060a759 100644 --- a/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx +++ b/packages/grafana-ui/src/components/SecretFormField/SecretFormField.tsx @@ -8,7 +8,7 @@ import { Button } from '../Button/Button'; import { FormField } from '../FormField/FormField'; import { Field } from '../Forms/Field'; import { SecretInput } from '../SecretInput'; -import { PopoverContent } from '../Tooltip'; +import { PopoverContent } from '../Tooltip/types'; export interface Props extends Omit, 'onReset'> { // Function to use when reset is clicked. Means you have to reset the input value yourself as this is uncontrolled diff --git a/packages/grafana-ui/src/components/SecretInput/SecretInput.tsx b/packages/grafana-ui/src/components/SecretInput/SecretInput.tsx index da7dc303264..b7cc7b41a72 100644 --- a/packages/grafana-ui/src/components/SecretInput/SecretInput.tsx +++ b/packages/grafana-ui/src/components/SecretInput/SecretInput.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { Input } from '../Input/Input'; import { Stack } from '../Layout/Stack/Stack'; diff --git a/packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx b/packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx index e38edf11a5d..b7196732660 100644 --- a/packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx +++ b/packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { useStyles2 } from '../../themes/ThemeContext'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { Box } from '../Layout/Box/Box'; import { Stack } from '../Layout/Stack/Stack'; import { TextArea } from '../TextArea/TextArea'; diff --git a/packages/grafana-ui/src/components/Segment/Segment.tsx b/packages/grafana-ui/src/components/Segment/Segment.tsx index 36ae2552a8d..3abec60b774 100644 --- a/packages/grafana-ui/src/components/Segment/Segment.tsx +++ b/packages/grafana-ui/src/components/Segment/Segment.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import { SelectableValue } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { InlineLabel } from '../Forms/InlineLabel'; import { SegmentSelect } from './SegmentSelect'; diff --git a/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx b/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx index 9819507db01..a8fe446c181 100644 --- a/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx +++ b/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx @@ -7,7 +7,7 @@ import { type AsyncState } from 'react-use/lib/useAsync'; import { SelectableValue } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; import { InlineLabel } from '../Forms/InlineLabel'; diff --git a/packages/grafana-ui/src/components/Segment/SegmentInput.tsx b/packages/grafana-ui/src/components/Segment/SegmentInput.tsx index 45ac598203b..22e9411297e 100644 --- a/packages/grafana-ui/src/components/Segment/SegmentInput.tsx +++ b/packages/grafana-ui/src/components/Segment/SegmentInput.tsx @@ -3,7 +3,7 @@ import { HTMLProps, useRef, useState } from 'react'; import * as React from 'react'; import { useClickAway } from 'react-use'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { measureText } from '../../utils/measureText'; import { InlineLabel } from '../Forms/InlineLabel'; diff --git a/packages/grafana-ui/src/components/Segment/SegmentSection.tsx b/packages/grafana-ui/src/components/Segment/SegmentSection.tsx index bdd03681d73..96e5c5eaa52 100644 --- a/packages/grafana-ui/src/components/Segment/SegmentSection.tsx +++ b/packages/grafana-ui/src/components/Segment/SegmentSection.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { InlineFieldRow } from '../Forms/InlineFieldRow'; import { InlineLabel } from '../Forms/InlineLabel'; diff --git a/packages/grafana-ui/src/components/Segment/index.ts b/packages/grafana-ui/src/components/Segment/index.ts deleted file mode 100644 index f09d38aac8d..00000000000 --- a/packages/grafana-ui/src/components/Segment/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export { Segment } from './Segment'; -export { SegmentAsync } from './SegmentAsync'; -export { SegmentSelect } from './SegmentSelect'; -export { SegmentInput } from './SegmentInput'; -export { SegmentSection } from './SegmentSection'; -export type { SegmentProps } from './types'; -export { useExpandableLabel } from './useExpandableLabel'; diff --git a/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx b/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx index bc80d49f457..7e447b0c6e4 100644 --- a/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx +++ b/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx @@ -1,8 +1,8 @@ import { useState, useRef, ReactElement } from 'react'; import * as React from 'react'; -import { useStyles2 } from '../../themes'; -import { clearButtonStyles } from '../Button'; +import { useStyles2 } from '../../themes/ThemeContext'; +import { clearButtonStyles } from '../Button/Button'; interface LabelProps { Component: ReactElement; diff --git a/packages/grafana-ui/src/components/Select/MultiValue.tsx b/packages/grafana-ui/src/components/Select/MultiValue.tsx index 01be4f7b644..fb8c3104660 100644 --- a/packages/grafana-ui/src/components/Select/MultiValue.tsx +++ b/packages/grafana-ui/src/components/Select/MultiValue.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; import { IconButton, Props as IconButtonProps } from '../IconButton/IconButton'; diff --git a/packages/grafana-ui/src/components/Select/Select.story.tsx b/packages/grafana-ui/src/components/Select/Select.story.tsx index 1a6aea76ea7..e73c07b7311 100644 --- a/packages/grafana-ui/src/components/Select/Select.story.tsx +++ b/packages/grafana-ui/src/components/Select/Select.story.tsx @@ -6,7 +6,7 @@ import { useState } from 'react'; import { SelectableValue, toIconName } from '@grafana/data'; -import { getAvailableIcons } from '../../types'; +import { getAvailableIcons } from '../../types/icon'; import { Alert } from '../Alert/Alert'; import { Icon } from '../Icon/Icon'; diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx index 99408d2fe26..c573eda0ae8 100644 --- a/packages/grafana-ui/src/components/Select/SelectBase.tsx +++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx @@ -13,7 +13,7 @@ import Creatable from 'react-select/creatable'; import { SelectableValue, toOption } from '@grafana/data'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import { t, Trans } from '../../utils/i18n'; import { Icon } from '../Icon/Icon'; diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx index 779b737ef15..713e2865f53 100644 --- a/packages/grafana-ui/src/components/Select/SelectMenu.tsx +++ b/packages/grafana-ui/src/components/Select/SelectMenu.tsx @@ -9,7 +9,7 @@ import { selectors } from '@grafana/e2e-selectors'; import { useTheme2 } from '../../themes/ThemeContext'; import { t, Trans } from '../../utils/i18n'; -import { clearButtonStyles } from '../Button'; +import { clearButtonStyles } from '../Button/Button'; import { Icon } from '../Icon/Icon'; import { ScrollContainer } from '../ScrollContainer/ScrollContainer'; diff --git a/packages/grafana-ui/src/components/Select/SingleValue.tsx b/packages/grafana-ui/src/components/Select/SingleValue.tsx index 98e5dde07d6..fb0e3159724 100644 --- a/packages/grafana-ui/src/components/Select/SingleValue.tsx +++ b/packages/grafana-ui/src/components/Select/SingleValue.tsx @@ -3,7 +3,7 @@ import { components, GroupBase, SingleValueProps } from 'react-select'; import { GrafanaTheme2, SelectableValue, toIconName } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { useDelayedSwitch } from '../../utils/useDelayedSwitch'; import { Icon } from '../Icon/Icon'; import { Spinner } from '../Spinner/Spinner'; diff --git a/packages/grafana-ui/src/components/SingleStatShared/index.ts b/packages/grafana-ui/src/components/SingleStatShared/index.ts deleted file mode 100644 index 26f86d35d86..00000000000 --- a/packages/grafana-ui/src/components/SingleStatShared/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export { - type SingleStatBaseOptions, - sharedSingleStatMigrationHandler, - convertOldAngularValueMapping, - sharedSingleStatPanelChangedHandler, -} from './SingleStatBaseOptions'; diff --git a/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx b/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx index 09d58a9ebac..6d4547e3fbe 100644 --- a/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx +++ b/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx @@ -21,7 +21,7 @@ import { ScaleOrientation, } from '@grafana/schema'; -import { Themeable2 } from '../../types'; +import { Themeable2 } from '../../types/theme'; import { UPlotChart } from '../uPlot/Plot'; import { UPlotConfigBuilder } from '../uPlot/config/UPlotConfigBuilder'; import { preparePlotData2, getStackingGroups } from '../uPlot/utils'; diff --git a/packages/grafana-ui/src/components/Spinner/Spinner.tsx b/packages/grafana-ui/src/components/Spinner/Spinner.tsx index 6e8161d58f1..ed50dbf7cde 100644 --- a/packages/grafana-ui/src/components/Spinner/Spinner.tsx +++ b/packages/grafana-ui/src/components/Spinner/Spinner.tsx @@ -4,8 +4,8 @@ import SVG from 'react-inlinesvg'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; -import { IconSize, isIconSize } from '../../types'; +import { useStyles2 } from '../../themes/ThemeContext'; +import { IconSize, isIconSize } from '../../types/icon'; import { t } from '../../utils/i18n'; import { spin } from '../../utils/keyframes'; import { Icon } from '../Icon/Icon'; diff --git a/packages/grafana-ui/src/components/Splitter/useSplitter.ts b/packages/grafana-ui/src/components/Splitter/useSplitter.ts index 4987154612c..b5343ae80aa 100644 --- a/packages/grafana-ui/src/components/Splitter/useSplitter.ts +++ b/packages/grafana-ui/src/components/Splitter/useSplitter.ts @@ -5,8 +5,8 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; -import { ComponentSize } from '../../types'; +import { useStyles2 } from '../../themes/ThemeContext'; +import { ComponentSize } from '../../types/size'; import { DragHandlePosition, getDragStyles } from '../DragHandle/DragHandle'; export interface UseSplitterOptions { diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx index f00e1b288a8..8bde19dc0c8 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.tsx +++ b/packages/grafana-ui/src/components/Switch/Switch.tsx @@ -4,7 +4,7 @@ import { forwardRef, HTMLProps, useRef } from 'react'; import { GrafanaTheme2, deprecationWarning } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins'; import { Icon } from '../Icon/Icon'; diff --git a/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx b/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx index 7bd44f8a762..be4c568d4ae 100644 --- a/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx +++ b/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx @@ -5,8 +5,10 @@ import * as React from 'react'; import { SelectableValue, GrafanaTheme2 } from '@grafana/data'; import { IconButton } from '../../components/IconButton/IconButton'; -import { TabsBar, Tab, TabContent } from '../../components/Tabs'; -import { useStyles2 } from '../../themes'; +import { Tab } from '../../components/Tabs/Tab'; +import { TabContent } from '../../components/Tabs/TabContent'; +import { TabsBar } from '../../components/Tabs/TabsBar'; +import { useStyles2 } from '../../themes/ThemeContext'; import { IconName } from '../../types/icon'; import { Box } from '../Layout/Box/Box'; import { ScrollContainer } from '../ScrollContainer/ScrollContainer'; diff --git a/packages/grafana-ui/src/components/Table/ActionsCell.tsx b/packages/grafana-ui/src/components/Table/ActionsCell.tsx index 00a62567ada..2b18c1dc962 100644 --- a/packages/grafana-ui/src/components/Table/ActionsCell.tsx +++ b/packages/grafana-ui/src/components/Table/ActionsCell.tsx @@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { ActionButton } from '../Actions/ActionButton'; import { TableCellProps } from './types'; diff --git a/packages/grafana-ui/src/components/Table/CellActions.tsx b/packages/grafana-ui/src/components/Table/CellActions.tsx index 8adfe7e9747..6efb5c68243 100644 --- a/packages/grafana-ui/src/components/Table/CellActions.tsx +++ b/packages/grafana-ui/src/components/Table/CellActions.tsx @@ -5,7 +5,7 @@ import { IconSize } from '../../types/icon'; import { t } from '../../utils/i18n'; import { IconButton } from '../IconButton/IconButton'; import { Stack } from '../Layout/Stack/Stack'; -import { TooltipPlacement } from '../Tooltip'; +import { TooltipPlacement } from '../Tooltip/types'; import { TableCellInspectorMode } from './TableCellInspector'; import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR, TableCellProps } from './types'; diff --git a/packages/grafana-ui/src/components/Table/Cells/DataLinksCell.tsx b/packages/grafana-ui/src/components/Table/Cells/DataLinksCell.tsx index 4993c3c617b..a95102c70a3 100644 --- a/packages/grafana-ui/src/components/Table/Cells/DataLinksCell.tsx +++ b/packages/grafana-ui/src/components/Table/Cells/DataLinksCell.tsx @@ -1,4 +1,4 @@ -import { getCellLinks } from '../../../utils'; +import { getCellLinks } from '../../../utils/table'; import { TableCellProps } from '../types'; export const DataLinksCell = (props: TableCellProps) => { diff --git a/packages/grafana-ui/src/components/Table/Cells/DefaultCell.tsx b/packages/grafana-ui/src/components/Table/Cells/DefaultCell.tsx index 2b32fa77773..1c70685e017 100644 --- a/packages/grafana-ui/src/components/Table/Cells/DefaultCell.tsx +++ b/packages/grafana-ui/src/components/Table/Cells/DefaultCell.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { DisplayValue, formattedValueToString } from '@grafana/data'; import { TableCellDisplayMode } from '@grafana/schema'; -import { getCellLinks } from '../../../utils'; +import { getCellLinks } from '../../../utils/table'; import { CellActions } from '../CellActions'; import { DataLinksActionsTooltip, renderSingleLink } from '../DataLinksActionsTooltip'; import { TableCellInspectorMode } from '../TableCellInspector'; diff --git a/packages/grafana-ui/src/components/Table/Cells/ImageCell.tsx b/packages/grafana-ui/src/components/Table/Cells/ImageCell.tsx index 1f2b5cf2a88..9eb49788371 100644 --- a/packages/grafana-ui/src/components/Table/Cells/ImageCell.tsx +++ b/packages/grafana-ui/src/components/Table/Cells/ImageCell.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; -import { getCellLinks } from '../../../utils'; +import { getCellLinks } from '../../../utils/table'; import { DataLinksActionsTooltip, renderSingleLink } from '../DataLinksActionsTooltip'; import { TableCellDisplayMode, TableCellProps } from '../types'; import { DataLinksActionsTooltipCoords, getCellOptions, getDataLinksActionsTooltipUtils } from '../utils'; diff --git a/packages/grafana-ui/src/components/Table/Cells/JSONViewCell.tsx b/packages/grafana-ui/src/components/Table/Cells/JSONViewCell.tsx index 591bcb66dac..e214c600458 100644 --- a/packages/grafana-ui/src/components/Table/Cells/JSONViewCell.tsx +++ b/packages/grafana-ui/src/components/Table/Cells/JSONViewCell.tsx @@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css'; import { isString } from 'lodash'; import { useState } from 'react'; -import { getCellLinks } from '../../../utils'; +import { getCellLinks } from '../../../utils/table'; import { CellActions } from '../CellActions'; import { DataLinksActionsTooltip, renderSingleLink } from '../DataLinksActionsTooltip'; import { TableCellInspectorMode } from '../TableCellInspector'; diff --git a/packages/grafana-ui/src/components/Table/Cells/SparklineCell.tsx b/packages/grafana-ui/src/components/Table/Cells/SparklineCell.tsx index 8df085d542a..7dbc09968b9 100644 --- a/packages/grafana-ui/src/components/Table/Cells/SparklineCell.tsx +++ b/packages/grafana-ui/src/components/Table/Cells/SparklineCell.tsx @@ -21,8 +21,8 @@ import { VisibilityMode, } from '@grafana/schema'; -import { useTheme2 } from '../../../themes'; -import { measureText } from '../../../utils'; +import { useTheme2 } from '../../../themes/ThemeContext'; +import { measureText } from '../../../utils/measureText'; import { FormattedValueDisplay } from '../../FormattedValueDisplay/FormattedValueDisplay'; import { Sparkline } from '../../Sparkline/Sparkline'; import { TableCellProps } from '../types'; diff --git a/packages/grafana-ui/src/components/Table/DataLinksActionsTooltip.tsx b/packages/grafana-ui/src/components/Table/DataLinksActionsTooltip.tsx index e918daffed1..36327a6ca7b 100644 --- a/packages/grafana-ui/src/components/Table/DataLinksActionsTooltip.tsx +++ b/packages/grafana-ui/src/components/Table/DataLinksActionsTooltip.tsx @@ -6,7 +6,7 @@ import * as React from 'react'; import { ActionModel, GrafanaTheme2, LinkModel } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Portal } from '../Portal/Portal'; import { VizTooltipFooter } from '../VizTooltip/VizTooltipFooter'; import { VizTooltipWrapper } from '../VizTooltip/VizTooltipWrapper'; diff --git a/packages/grafana-ui/src/components/Table/Table.story.tsx b/packages/grafana-ui/src/components/Table/Table.story.tsx index de0915a64e4..ff9fe3160f8 100644 --- a/packages/grafana-ui/src/components/Table/Table.story.tsx +++ b/packages/grafana-ui/src/components/Table/Table.story.tsx @@ -13,7 +13,7 @@ import { Field, } from '@grafana/data'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas'; import { prepDataForStorybook } from '../../utils/storybook/data'; import { Button } from '../Button/Button'; diff --git a/packages/grafana-ui/src/components/Table/TableCellInspector.tsx b/packages/grafana-ui/src/components/Table/TableCellInspector.tsx index 21d8a5cde81..8de4a8178f5 100644 --- a/packages/grafana-ui/src/components/Table/TableCellInspector.tsx +++ b/packages/grafana-ui/src/components/Table/TableCellInspector.tsx @@ -6,7 +6,8 @@ import { ClipboardButton } from '../ClipboardButton/ClipboardButton'; import { Drawer } from '../Drawer/Drawer'; import { Stack } from '../Layout/Stack/Stack'; import { CodeEditor } from '../Monaco/CodeEditor'; -import { Tab, TabsBar } from '../Tabs'; +import { Tab } from '../Tabs/Tab'; +import { TabsBar } from '../Tabs/TabsBar'; export enum TableCellInspectorMode { code = 'code', diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/ActionsCell.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/ActionsCell.tsx index 128224b6261..9616baa5a76 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Cells/ActionsCell.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/ActionsCell.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../../../themes'; +import { useStyles2 } from '../../../../themes/ThemeContext'; import { ActionButton } from '../../../Actions/ActionButton'; import { ActionCellProps } from '../types'; diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/AutoCell.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/AutoCell.tsx index 5667ba7db24..91b2c8e0da2 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Cells/AutoCell.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/AutoCell.tsx @@ -6,7 +6,7 @@ import { GrafanaTheme2, formattedValueToString } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; import { TableCellDisplayMode, TableCellOptions } from '@grafana/schema'; -import { useStyles2 } from '../../../../themes'; +import { useStyles2 } from '../../../../themes/ThemeContext'; import { DataLinksActionsTooltip, renderSingleLink } from '../../DataLinksActionsTooltip'; import { DataLinksActionsTooltipCoords, getDataLinksActionsTooltipUtils } from '../../utils'; import { AutoCellProps } from '../types'; diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/DataLinksCell.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/DataLinksCell.tsx index 5163d7414cd..d1612de97c8 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Cells/DataLinksCell.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/DataLinksCell.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../../../themes'; +import { useStyles2 } from '../../../../themes/ThemeContext'; import { DataLinksCellProps } from '../types'; import { getCellLinks } from '../utils'; diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/GeoCell.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/GeoCell.tsx index 40e5bc04778..33d1530f8a9 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Cells/GeoCell.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/GeoCell.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import WKT from 'ol/format/WKT'; import { Geometry } from 'ol/geom'; -import { useStyles2 } from '../../../../themes'; +import { useStyles2 } from '../../../../themes/ThemeContext'; import { GeoCellProps } from '../types'; export function GeoCell({ value, justifyContent, height }: GeoCellProps) { diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/HeaderCell.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/HeaderCell.tsx index 9537c502f09..6604629564b 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Cells/HeaderCell.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/HeaderCell.tsx @@ -5,8 +5,8 @@ import { Column, SortDirection } from 'react-data-grid'; import { Field, GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../../../themes'; -import { getFieldTypeIcon } from '../../../../types'; +import { useStyles2 } from '../../../../themes/ThemeContext'; +import { getFieldTypeIcon } from '../../../../types/icon'; import { Icon } from '../../../Icon/Icon'; import { Filter } from '../Filter/Filter'; import { TableColumnResizeActionCallback, FilterType, TableRow, TableSummaryRow } from '../types'; diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/ImageCell.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/ImageCell.tsx index 805259bae62..13c4727e4e7 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Cells/ImageCell.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/ImageCell.tsx @@ -5,7 +5,7 @@ import { useState } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { TableCellDisplayMode } from '@grafana/schema'; -import { useStyles2 } from '../../../../themes'; +import { useStyles2 } from '../../../../themes/ThemeContext'; import { DataLinksActionsTooltip, renderSingleLink } from '../../DataLinksActionsTooltip'; import { DataLinksActionsTooltipCoords, getDataLinksActionsTooltipUtils } from '../../utils'; import { ImageCellProps } from '../types'; diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/JSONCell.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/JSONCell.tsx index 8098c9e6afc..025cf19bac3 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Cells/JSONCell.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/JSONCell.tsx @@ -4,7 +4,7 @@ import { useState } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../../../themes'; +import { useStyles2 } from '../../../../themes/ThemeContext'; import { DataLinksActionsTooltip, renderSingleLink } from '../../DataLinksActionsTooltip'; import { DataLinksActionsTooltipCoords, getDataLinksActionsTooltipUtils } from '../../utils'; import { JSONCellProps } from '../types'; diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/RowExpander.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/RowExpander.tsx index b02e660d77d..85ac8b4cdb7 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Cells/RowExpander.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/RowExpander.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../../../themes'; +import { useStyles2 } from '../../../../themes/ThemeContext'; import { t } from '../../../../utils/i18n'; import { Icon } from '../../../Icon/Icon'; import { RowExpanderNGProps } from '../types'; diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/SparklineCell.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/SparklineCell.tsx index 02cfff3e974..190de5b85bd 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Cells/SparklineCell.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/SparklineCell.tsx @@ -23,8 +23,8 @@ import { VisibilityMode, } from '@grafana/schema'; -import { useStyles2 } from '../../../../themes'; -import { measureText } from '../../../../utils'; +import { useStyles2 } from '../../../../themes/ThemeContext'; +import { measureText } from '../../../../utils/measureText'; import { FormattedValueDisplay } from '../../../FormattedValueDisplay/FormattedValueDisplay'; import { Sparkline } from '../../../Sparkline/Sparkline'; import { SparklineCellProps } from '../types'; diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx index f50c9a6d5e4..aacf5bb6071 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx @@ -6,7 +6,7 @@ import { ReactNode, useCallback, useLayoutEffect, useMemo, useRef, useState } fr import { FieldType, GrafanaTheme2, isDataFrame, isTimeSeriesFrame } from '@grafana/data'; import { TableAutoCellOptions, TableCellDisplayMode } from '@grafana/schema'; -import { useStyles2 } from '../../../../themes'; +import { useStyles2 } from '../../../../themes/ThemeContext'; import { t } from '../../../../utils/i18n'; import { IconButton } from '../../../IconButton/IconButton'; // import { GeoCell } from '../../Cells/GeoCell'; diff --git a/packages/grafana-ui/src/components/Table/TableNG/Filter/Filter.tsx b/packages/grafana-ui/src/components/Table/TableNG/Filter/Filter.tsx index dfbda8354fe..120cbc985a7 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Filter/Filter.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Filter/Filter.tsx @@ -3,7 +3,7 @@ import { useCallback, useMemo, useRef, useState } from 'react'; import { Field, GrafanaTheme2, SelectableValue } from '@grafana/data'; -import { useStyles2 } from '../../../../themes'; +import { useStyles2 } from '../../../../themes/ThemeContext'; import { Icon } from '../../../Icon/Icon'; import { Popover } from '../../../Tooltip/Popover'; import { TableRow } from '../types'; diff --git a/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterList.tsx b/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterList.tsx index 2e8302cde92..0089b125caf 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterList.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterList.tsx @@ -5,9 +5,11 @@ import { FixedSizeList as List, ListChildComponentProps } from 'react-window'; import { GrafanaTheme2, formattedValueToString, getValueFormat, SelectableValue } from '@grafana/data'; -import { Checkbox, Label, Stack } from '../../..'; -import { useStyles2, useTheme2 } from '../../../../themes'; +import { useStyles2, useTheme2 } from '../../../../themes/ThemeContext'; import { Trans } from '../../../../utils/i18n'; +import { Checkbox } from '../../../Forms/Checkbox'; +import { Label } from '../../../Forms/Label'; +import { Stack } from '../../../Layout/Stack/Stack'; import { operatorSelectableValues } from './FilterPopup'; diff --git a/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterPopup.tsx b/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterPopup.tsx index 316ddc6889e..93322747d46 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterPopup.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterPopup.tsx @@ -3,9 +3,14 @@ import React, { useCallback, useMemo, useState } from 'react'; import { Field, GrafanaTheme2, SelectableValue } from '@grafana/data'; -import { Button, ButtonSelect, ClickOutsideWrapper, FilterInput, Label, Stack } from '../../..'; -import { useStyles2, useTheme2 } from '../../../../themes'; +import { useStyles2, useTheme2 } from '../../../../themes/ThemeContext'; import { t, Trans } from '../../../../utils/i18n'; +import { Button } from '../../../Button/Button'; +import { ClickOutsideWrapper } from '../../../ClickOutsideWrapper/ClickOutsideWrapper'; +import { ButtonSelect } from '../../../Dropdown/ButtonSelect'; +import { FilterInput } from '../../../FilterInput/FilterInput'; +import { Label } from '../../../Forms/Label'; +import { Stack } from '../../../Layout/Stack/Stack'; import { FilterType } from '../types'; import { FilterList } from './FilterList'; diff --git a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx index 2e50a05a7fb..91bfc448e03 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx @@ -18,7 +18,7 @@ import { } from '@grafana/data'; import { TableCellDisplayMode } from '@grafana/schema'; -import { useStyles2, useTheme2 } from '../../../themes'; +import { useStyles2, useTheme2 } from '../../../themes/ThemeContext'; import { t, Trans } from '../../../utils/i18n'; import { ContextMenu } from '../../ContextMenu/ContextMenu'; import { MenuItem } from '../../Menu/MenuItem'; diff --git a/packages/grafana-ui/src/components/Table/TableNG/utils.ts b/packages/grafana-ui/src/components/Table/TableNG/utils.ts index 8491e867b6c..3827d2adf34 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/utils.ts +++ b/packages/grafana-ui/src/components/Table/TableNG/utils.ts @@ -26,8 +26,8 @@ import { TableSortByFieldState, } from '@grafana/schema'; -import { TableCellInspectorMode } from '../..'; -import { getTextColorForAlphaBackground } from '../../../utils'; +import { getTextColorForAlphaBackground } from '../../../utils/colors'; +import { TableCellInspectorMode } from '../TableCellInspector'; import { TABLE } from './constants'; import { diff --git a/packages/grafana-ui/src/components/Table/TableRT/ExpandedRow.tsx b/packages/grafana-ui/src/components/Table/TableRT/ExpandedRow.tsx index 9b73a42a6a2..9a364da9caf 100644 --- a/packages/grafana-ui/src/components/Table/TableRT/ExpandedRow.tsx +++ b/packages/grafana-ui/src/components/Table/TableRT/ExpandedRow.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import { DataFrame, Field, GrafanaTheme2 } from '@grafana/data'; import { TableCellHeight } from '@grafana/schema'; -import { useStyles2, useTheme2 } from '../../../themes'; +import { useStyles2, useTheme2 } from '../../../themes/ThemeContext'; import { EXPANDER_WIDTH } from '../utils'; import { Table } from './Table'; diff --git a/packages/grafana-ui/src/components/Table/TableRT/Filter.tsx b/packages/grafana-ui/src/components/Table/TableRT/Filter.tsx index 67c185695db..352453a1ce8 100644 --- a/packages/grafana-ui/src/components/Table/TableRT/Filter.tsx +++ b/packages/grafana-ui/src/components/Table/TableRT/Filter.tsx @@ -3,8 +3,8 @@ import { useCallback, useMemo, useRef, useState } from 'react'; import { Field, GrafanaTheme2, SelectableValue } from '@grafana/data'; -import { Popover } from '../..'; -import { useStyles2 } from '../../../themes'; +import { Popover } from '../../../components/Tooltip/Popover'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { Icon } from '../../Icon/Icon'; import { REGEX_OPERATOR } from './FilterList'; diff --git a/packages/grafana-ui/src/components/Table/TableRT/FilterList.tsx b/packages/grafana-ui/src/components/Table/TableRT/FilterList.tsx index 32615a9070a..47cba0739ed 100644 --- a/packages/grafana-ui/src/components/Table/TableRT/FilterList.tsx +++ b/packages/grafana-ui/src/components/Table/TableRT/FilterList.tsx @@ -5,9 +5,13 @@ import { FixedSizeList as List, ListChildComponentProps } from 'react-window'; import { GrafanaTheme2, formattedValueToString, getValueFormat, SelectableValue } from '@grafana/data'; -import { ButtonSelect, Checkbox, FilterInput, Label, Stack } from '../..'; -import { useStyles2, useTheme2 } from '../../../themes'; +import { useStyles2, useTheme2 } from '../../../themes/ThemeContext'; import { t, Trans } from '../../../utils/i18n'; +import { ButtonSelect } from '../../Dropdown/ButtonSelect'; +import { FilterInput } from '../../FilterInput/FilterInput'; +import { Checkbox } from '../../Forms/Checkbox'; +import { Label } from '../../Forms/Label'; +import { Stack } from '../../Layout/Stack/Stack'; interface Props { values: SelectableValue[]; diff --git a/packages/grafana-ui/src/components/Table/TableRT/FilterPopup.tsx b/packages/grafana-ui/src/components/Table/TableRT/FilterPopup.tsx index 6eaeac0ee90..cebbf3eae9a 100644 --- a/packages/grafana-ui/src/components/Table/TableRT/FilterPopup.tsx +++ b/packages/grafana-ui/src/components/Table/TableRT/FilterPopup.tsx @@ -4,9 +4,13 @@ import * as React from 'react'; import { Field, GrafanaTheme2, SelectableValue } from '@grafana/data'; -import { Button, ClickOutsideWrapper, IconButton, Label, Stack } from '../..'; -import { useStyles2, useTheme2 } from '../../../themes'; +import { useStyles2, useTheme2 } from '../../../themes/ThemeContext'; import { t, Trans } from '../../../utils/i18n'; +import { Button } from '../../Button/Button'; +import { ClickOutsideWrapper } from '../../ClickOutsideWrapper/ClickOutsideWrapper'; +import { Label } from '../../Forms/Label'; +import { IconButton } from '../../IconButton/IconButton'; +import { Stack } from '../../Layout/Stack/Stack'; import { calculateUniqueFieldValues, getFilteredOptions, valuesToOptions } from '../utils'; import { FilterList } from './FilterList'; diff --git a/packages/grafana-ui/src/components/Table/TableRT/HeaderRow.tsx b/packages/grafana-ui/src/components/Table/TableRT/HeaderRow.tsx index 323a11562f6..8ac31d59b2d 100644 --- a/packages/grafana-ui/src/components/Table/TableRT/HeaderRow.tsx +++ b/packages/grafana-ui/src/components/Table/TableRT/HeaderRow.tsx @@ -3,7 +3,7 @@ import { HeaderGroup, Column } from 'react-table'; import { Field } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { getFieldTypeIcon } from '../../../types'; +import { getFieldTypeIcon } from '../../../types/icon'; import { Icon } from '../../Icon/Icon'; import { TableFieldOptions } from '../types'; diff --git a/packages/grafana-ui/src/components/Table/TableRT/RowsList.tsx b/packages/grafana-ui/src/components/Table/TableRT/RowsList.tsx index d206388cf91..251cfddaefd 100644 --- a/packages/grafana-ui/src/components/Table/TableRT/RowsList.tsx +++ b/packages/grafana-ui/src/components/Table/TableRT/RowsList.tsx @@ -17,7 +17,7 @@ import { } from '@grafana/data'; import { TableCellDisplayMode, TableCellHeight } from '@grafana/schema'; -import { useTheme2 } from '../../../themes'; +import { useTheme2 } from '../../../themes/ThemeContext'; import CustomScrollbar from '../../CustomScrollbar/CustomScrollbar'; import { usePanelContext } from '../../PanelChrome'; import { TableCell } from '../Cells/TableCell'; diff --git a/packages/grafana-ui/src/components/Table/TableRT/Table.tsx b/packages/grafana-ui/src/components/Table/TableRT/Table.tsx index b18d22dfa09..d90df5c7f5a 100644 --- a/packages/grafana-ui/src/components/Table/TableRT/Table.tsx +++ b/packages/grafana-ui/src/components/Table/TableRT/Table.tsx @@ -14,7 +14,7 @@ import { FieldType, ReducerID, getRowUniqueId, getFieldMatcher } from '@grafana/ import { selectors } from '@grafana/e2e-selectors'; import { TableCellHeight } from '@grafana/schema'; -import { useTheme2 } from '../../../themes'; +import { useTheme2 } from '../../../themes/ThemeContext'; import { Trans } from '../../../utils/i18n'; import { CustomScrollbar } from '../../CustomScrollbar/CustomScrollbar'; import { Pagination } from '../../Pagination/Pagination'; diff --git a/packages/grafana-ui/src/components/Table/utils.ts b/packages/grafana-ui/src/components/Table/utils.ts index 6c3a158d046..1f1f9f0c50c 100644 --- a/packages/grafana-ui/src/components/Table/utils.ts +++ b/packages/grafana-ui/src/components/Table/utils.ts @@ -31,7 +31,7 @@ import { TableCellDisplayMode, } from '@grafana/schema'; -import { getTextColorForAlphaBackground } from '../../utils'; +import { getTextColorForAlphaBackground } from '../../utils/colors'; import { ActionsCell } from './ActionsCell'; import { BarGaugeCell } from './Cells/BarGaugeCell'; diff --git a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx b/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx index 75a231b840e..e4ef3bfaff3 100644 --- a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx +++ b/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx @@ -5,7 +5,8 @@ import * as React from 'react'; import { DataFrame, CSVConfig, readCSV, GrafanaTheme2 } from '@grafana/data'; -import { stylesFactory, withTheme2 } from '../../themes'; +import { withTheme2 } from '../../themes/ThemeContext'; +import { stylesFactory } from '../../themes/stylesFactory'; import { Themeable2 } from '../../types/theme'; import { t, Trans } from '../../utils/i18n'; import { Icon } from '../Icon/Icon'; diff --git a/packages/grafana-ui/src/components/Tabs/Counter.tsx b/packages/grafana-ui/src/components/Tabs/Counter.tsx index 093fe5c2b55..f126852b5b5 100644 --- a/packages/grafana-ui/src/components/Tabs/Counter.tsx +++ b/packages/grafana-ui/src/components/Tabs/Counter.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import { GrafanaTheme2, locale } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; type CounterVariant = 'primary' | 'secondary'; export interface CounterProps { diff --git a/packages/grafana-ui/src/components/Tabs/Tab.tsx b/packages/grafana-ui/src/components/Tabs/Tab.tsx index f102ed3f0fa..10f2ae2ea6f 100644 --- a/packages/grafana-ui/src/components/Tabs/Tab.tsx +++ b/packages/grafana-ui/src/components/Tabs/Tab.tsx @@ -5,10 +5,10 @@ import * as React from 'react'; import { GrafanaTheme2, NavModelItem } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { getFocusStyles } from '../../themes/mixins'; -import { IconName } from '../../types'; -import { clearButtonStyles } from '../Button'; +import { IconName } from '../../types/icon'; +import { clearButtonStyles } from '../Button/Button'; import { Icon } from '../Icon/Icon'; import { Tooltip } from '../Tooltip/Tooltip'; diff --git a/packages/grafana-ui/src/components/Tabs/TabContent.tsx b/packages/grafana-ui/src/components/Tabs/TabContent.tsx index e7259f7e823..a22f6102dba 100644 --- a/packages/grafana-ui/src/components/Tabs/TabContent.tsx +++ b/packages/grafana-ui/src/components/Tabs/TabContent.tsx @@ -3,7 +3,7 @@ import { HTMLAttributes, ReactNode } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; interface Props extends HTMLAttributes { children: ReactNode; diff --git a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx index 7ebfaf20c03..8ba4405dcfa 100644 --- a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx +++ b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx @@ -3,7 +3,7 @@ import { forwardRef, ReactNode } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; export interface Props { /** Children should be a single or an array of */ diff --git a/packages/grafana-ui/src/components/Tabs/index.ts b/packages/grafana-ui/src/components/Tabs/index.ts deleted file mode 100644 index 0ee2245e140..00000000000 --- a/packages/grafana-ui/src/components/Tabs/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { Tab } from './Tab'; -export { TabsBar } from './TabsBar'; -export { TabContent } from './TabContent'; diff --git a/packages/grafana-ui/src/components/Tags/Tag.tsx b/packages/grafana-ui/src/components/Tags/Tag.tsx index 22880a4fcc0..2550cb052c5 100644 --- a/packages/grafana-ui/src/components/Tags/Tag.tsx +++ b/packages/grafana-ui/src/components/Tags/Tag.tsx @@ -5,10 +5,10 @@ import Skeleton from 'react-loading-skeleton'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2, useTheme2 } from '../../themes'; +import { useStyles2, useTheme2 } from '../../themes/ThemeContext'; import { IconName } from '../../types/icon'; -import { getTagColor, getTagColorsFromName } from '../../utils'; import { SkeletonComponent, attachSkeleton } from '../../utils/skeleton'; +import { getTagColor, getTagColorsFromName } from '../../utils/tags'; import { Icon } from '../Icon/Icon'; /** diff --git a/packages/grafana-ui/src/components/Tags/TagList.tsx b/packages/grafana-ui/src/components/Tags/TagList.tsx index 283eaf0b42f..ed15b032479 100644 --- a/packages/grafana-ui/src/components/Tags/TagList.tsx +++ b/packages/grafana-ui/src/components/Tags/TagList.tsx @@ -3,7 +3,7 @@ import { forwardRef, memo } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2, useTheme2 } from '../../themes'; +import { useStyles2, useTheme2 } from '../../themes/ThemeContext'; import { IconName } from '../../types/icon'; import { t } from '../../utils/i18n'; import { SkeletonComponent, attachSkeleton } from '../../utils/skeleton'; diff --git a/packages/grafana-ui/src/components/TagsInput/TagItem.tsx b/packages/grafana-ui/src/components/TagsInput/TagItem.tsx index 8d6bde058bc..4ed082f2c9a 100644 --- a/packages/grafana-ui/src/components/TagsInput/TagItem.tsx +++ b/packages/grafana-ui/src/components/TagsInput/TagItem.tsx @@ -3,9 +3,9 @@ import { useMemo } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; -import { getTagColorsFromName } from '../../utils'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; +import { getTagColorsFromName } from '../../utils/tags'; import { IconButton } from '../IconButton/IconButton'; interface Props { diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx index bb7f23cd332..1ecd72ed50c 100644 --- a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx +++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx @@ -6,7 +6,7 @@ import { GrafanaTheme2 } from '@grafana/data'; import { useStyles2, useTheme2 } from '../../themes/ThemeContext'; import { Trans } from '../../utils/i18n'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { Input } from '../Input/Input'; import { TagItem } from './TagItem'; diff --git a/packages/grafana-ui/src/components/Text/Text.mdx b/packages/grafana-ui/src/components/Text/Text.mdx index 9fb69f4a73d..f807f5ad966 100644 --- a/packages/grafana-ui/src/components/Text/Text.mdx +++ b/packages/grafana-ui/src/components/Text/Text.mdx @@ -2,7 +2,7 @@ import { Meta, Canvas, ArgTypes } from '@storybook/blocks'; import { Text } from './Text'; import { TextLink } from '../Link/TextLink.tsx'; import { Basic } from './Text.story.tsx'; -import { Tooltip } from '../Tooltip'; +import { Tooltip } from '../Tooltip/Tooltip'; import { ExampleFrame } from '../../utils/storybook/ExampleFrame'; diff --git a/packages/grafana-ui/src/components/Text/Text.tsx b/packages/grafana-ui/src/components/Text/Text.tsx index e4415b9e5bc..55b88ee4011 100644 --- a/packages/grafana-ui/src/components/Text/Text.tsx +++ b/packages/grafana-ui/src/components/Text/Text.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { GrafanaTheme2, ThemeTypographyVariantTypes } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { TruncatedText } from './TruncatedText'; import { customWeight, customColor, customVariant } from './utils'; diff --git a/packages/grafana-ui/src/components/TextArea/TextArea.tsx b/packages/grafana-ui/src/components/TextArea/TextArea.tsx index b7002bc5742..1c84344348f 100644 --- a/packages/grafana-ui/src/components/TextArea/TextArea.tsx +++ b/packages/grafana-ui/src/components/TextArea/TextArea.tsx @@ -3,7 +3,7 @@ import { forwardRef, HTMLProps } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { getFocusStyle, sharedInputStyle } from '../Forms/commonStyles'; export interface Props extends Omit, 'size'> { diff --git a/packages/grafana-ui/src/components/ThemeDemos/BorderRadius.tsx b/packages/grafana-ui/src/components/ThemeDemos/BorderRadius.tsx index daabe71e01e..945efedea8d 100644 --- a/packages/grafana-ui/src/components/ThemeDemos/BorderRadius.tsx +++ b/packages/grafana-ui/src/components/ThemeDemos/BorderRadius.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { getInternalRadius, getExternalRadius } from '../../themes/mixins'; import { Stack } from '../Layout/Stack/Stack'; import { Text } from '../Text/Text'; diff --git a/packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx b/packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx index 178a4276837..6609ea3c9ae 100644 --- a/packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx +++ b/packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx @@ -6,8 +6,8 @@ import React, { Profiler, ProfilerOnRenderCallback, useState, FC } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2, useTheme2 } from '../../themes'; -import { Button } from '../Button'; +import { useStyles2, useTheme2 } from '../../themes/ThemeContext'; +import { Button } from '../Button/Button'; import { Stack } from '../Layout/Stack/Stack'; export function EmotionPerfTest() { diff --git a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx index d33331a74cb..97b451a9478 100644 --- a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx +++ b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx @@ -7,7 +7,7 @@ import tinycolor from 'tinycolor2'; import { GrafanaTheme2, ThemeRichColor, ThemeVizHue } from '@grafana/data'; import { useTheme2 } from '../../themes/ThemeContext'; -import { allButtonVariants, Button } from '../Button'; +import { allButtonVariants, Button } from '../Button/Button'; import { Card } from '../Card/Card'; import { CollapsableSection } from '../Collapse/CollapsableSection'; import { Combobox } from '../Combobox/Combobox'; diff --git a/packages/grafana-ui/src/components/Toggletip/Toggletip.story.tsx b/packages/grafana-ui/src/components/Toggletip/Toggletip.story.tsx index 9a81241cbca..1c3cbb57919 100644 --- a/packages/grafana-ui/src/components/Toggletip/Toggletip.story.tsx +++ b/packages/grafana-ui/src/components/Toggletip/Toggletip.story.tsx @@ -1,6 +1,6 @@ import { Meta, StoryFn } from '@storybook/react'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { ScrollContainer } from '../ScrollContainer/ScrollContainer'; import mdx from '../Toggletip/Toggletip.mdx'; diff --git a/packages/grafana-ui/src/components/Toggletip/Toggletip.test.tsx b/packages/grafana-ui/src/components/Toggletip/Toggletip.test.tsx index 5d503426735..b9c84ca8ec8 100644 --- a/packages/grafana-ui/src/components/Toggletip/Toggletip.test.tsx +++ b/packages/grafana-ui/src/components/Toggletip/Toggletip.test.tsx @@ -1,7 +1,7 @@ import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { Button, LinkButton } from '../Button'; +import { Button, LinkButton } from '../Button/Button'; import { Toggletip } from './Toggletip'; diff --git a/packages/grafana-ui/src/components/Toggletip/index.ts b/packages/grafana-ui/src/components/Toggletip/index.ts deleted file mode 100644 index f8dd556ecb7..00000000000 --- a/packages/grafana-ui/src/components/Toggletip/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { Toggletip, type ToggletipProps } from './Toggletip'; -export type { ToggletipContent, ToggletipContentProps } from './types'; diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx index 8cea57b401c..18234f1b0d0 100644 --- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx +++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx @@ -1,7 +1,7 @@ import { Meta, StoryFn } from '@storybook/react'; import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas'; -import { ButtonGroup } from '../Button'; +import { ButtonGroup } from '../Button/ButtonGroup'; import { Stack } from '../Layout/Stack/Stack'; import { ToolbarButton, ToolbarButtonVariant } from './ToolbarButton'; diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx index 359c7f32d33..a866ccefc9e 100644 --- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx +++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx @@ -5,12 +5,12 @@ import * as React from 'react'; import { GrafanaTheme2, IconName, isIconName } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { styleMixins, useStyles2 } from '../../themes'; -import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins'; +import { useStyles2 } from '../../themes/ThemeContext'; +import { getFocusStyles, getMouseFocusStyles, mediaUp } from '../../themes/mixins'; import { IconSize } from '../../types/icon'; -import { getPropertiesForVariant } from '../Button'; +import { getPropertiesForVariant } from '../Button/Button'; import { Icon } from '../Icon/Icon'; -import { Tooltip } from '../Tooltip'; +import { Tooltip } from '../Tooltip/Tooltip'; type CommonProps = { /** Icon name */ @@ -232,7 +232,7 @@ const getStyles = (theme: GrafanaTheme2) => { display: 'none', paddingLeft: theme.spacing(1), - [`@media ${styleMixins.mediaUp(theme.v1.breakpoints.md)}`]: { + [`@media ${mediaUp(theme.v1.breakpoints.md)}`]: { display: 'block', }, }), diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx index 2133b7df55c..924c5e723f4 100644 --- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx +++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButtonRow.tsx @@ -6,7 +6,7 @@ import { Children, forwardRef, HTMLAttributes, useState, useRef, useLayoutEffect import { GrafanaTheme2 } from '@grafana/data'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; import { getPortalContainer } from '../Portal/Portal'; diff --git a/packages/grafana-ui/src/components/ToolbarButton/index.ts b/packages/grafana-ui/src/components/ToolbarButton/index.ts deleted file mode 100644 index f6a0851d6b9..00000000000 --- a/packages/grafana-ui/src/components/ToolbarButton/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './ToolbarButton'; -export { ToolbarButtonRow } from './ToolbarButtonRow'; diff --git a/packages/grafana-ui/src/components/Tooltip/Popover.tsx b/packages/grafana-ui/src/components/Tooltip/Popover.tsx index 46b8ac849a5..cb4b5468707 100644 --- a/packages/grafana-ui/src/components/Tooltip/Popover.tsx +++ b/packages/grafana-ui/src/components/Tooltip/Popover.tsx @@ -11,7 +11,7 @@ import { useLayoutEffect, useRef } from 'react'; import * as React from 'react'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import { getPlacement } from '../../utils/tooltipUtils'; import { Portal } from '../Portal/Portal'; diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.story.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.story.tsx index a768069770d..d97f310172f 100644 --- a/packages/grafana-ui/src/components/Tooltip/Tooltip.story.tsx +++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.story.tsx @@ -1,6 +1,6 @@ import { Meta, StoryFn } from '@storybook/react'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { Stack } from '../Layout/Stack/Stack'; import mdx from '../Tooltip/Tooltip.mdx'; diff --git a/packages/grafana-ui/src/components/Tooltip/index.ts b/packages/grafana-ui/src/components/Tooltip/index.ts deleted file mode 100644 index cdb5f1ef15e..00000000000 --- a/packages/grafana-ui/src/components/Tooltip/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { Tooltip, type TooltipProps } from './Tooltip'; -export { PopoverController } from './PopoverController'; -export type { TooltipPlacement, PopoverContent, PopoverContentProps } from './types'; diff --git a/packages/grafana-ui/src/components/Typeahead/PartialHighlighter.tsx b/packages/grafana-ui/src/components/Typeahead/PartialHighlighter.tsx index a1c5603a4e5..1c6ad63a9ce 100644 --- a/packages/grafana-ui/src/components/Typeahead/PartialHighlighter.tsx +++ b/packages/grafana-ui/src/components/Typeahead/PartialHighlighter.tsx @@ -1,6 +1,6 @@ import { createElement } from 'react'; -import { HighlightPart } from '../../types'; +import { HighlightPart } from '../../types/completion'; interface Props { text: string; diff --git a/packages/grafana-ui/src/components/Typeahead/Typeahead.test.tsx b/packages/grafana-ui/src/components/Typeahead/Typeahead.test.tsx index c26a0df1e13..87a4bcfd03a 100644 --- a/packages/grafana-ui/src/components/Typeahead/Typeahead.test.tsx +++ b/packages/grafana-ui/src/components/Typeahead/Typeahead.test.tsx @@ -1,6 +1,6 @@ import { render, screen } from '@testing-library/react'; -import { CompletionItemGroup } from '../../types'; +import { CompletionItemGroup } from '../../types/completion'; import { Typeahead } from './Typeahead'; diff --git a/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.test.tsx b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.test.tsx index 65bdfbd0009..860541619f5 100644 --- a/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.test.tsx +++ b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.test.tsx @@ -1,6 +1,6 @@ import { render, screen } from '@testing-library/react'; -import { CompletionItem } from '../../types'; +import { CompletionItem } from '../../types/completion'; import { TypeaheadInfo } from './TypeaheadInfo'; diff --git a/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx index 0938eb0f25a..cb4f9588119 100644 --- a/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx +++ b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx @@ -3,7 +3,7 @@ import { css, cx } from '@emotion/css'; import { GrafanaTheme2, renderMarkdown } from '@grafana/data'; import { useTheme2 } from '../../themes/ThemeContext'; -import { CompletionItem } from '../../types'; +import { CompletionItem } from '../../types/completion'; const getStyles = (theme: GrafanaTheme2, height: number, visible: boolean) => { return { diff --git a/packages/grafana-ui/src/components/UsersIndicator/Avatar.tsx b/packages/grafana-ui/src/components/UsersIndicator/Avatar.tsx index 473787febd3..4e49caf1ab3 100644 --- a/packages/grafana-ui/src/components/UsersIndicator/Avatar.tsx +++ b/packages/grafana-ui/src/components/UsersIndicator/Avatar.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { getResponsiveStyle, ResponsiveProp } from '../Layout/utils/responsiveness'; export interface AvatarProps { diff --git a/packages/grafana-ui/src/components/UsersIndicator/UserIcon.tsx b/packages/grafana-ui/src/components/UsersIndicator/UserIcon.tsx index fa10f5bdf1f..8d9cf905db2 100644 --- a/packages/grafana-ui/src/components/UsersIndicator/UserIcon.tsx +++ b/packages/grafana-ui/src/components/UsersIndicator/UserIcon.tsx @@ -3,9 +3,9 @@ import { useMemo, PropsWithChildren } from 'react'; import { dateTime, DateTimeInput, GrafanaTheme2 } from '@grafana/data'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import { t, Trans } from '../../utils/i18n'; -import { Tooltip } from '../Tooltip'; +import { Tooltip } from '../Tooltip/Tooltip'; import { UserView } from './types'; diff --git a/packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx b/packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx index 6ac131c2d0c..16ca77cd69c 100644 --- a/packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx +++ b/packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; import { UserIcon } from './UserIcon'; diff --git a/packages/grafana-ui/src/components/ValuePicker/ValuePicker.story.tsx b/packages/grafana-ui/src/components/ValuePicker/ValuePicker.story.tsx index 5fd1b20f1d5..86d4df02e8d 100644 --- a/packages/grafana-ui/src/components/ValuePicker/ValuePicker.story.tsx +++ b/packages/grafana-ui/src/components/ValuePicker/ValuePicker.story.tsx @@ -1,6 +1,6 @@ import { Meta, StoryFn } from '@storybook/react'; -import { getAvailableIcons } from '../../types'; +import { getAvailableIcons } from '../../types/icon'; import { generateOptions } from '../Select/mockOptions'; import { ValuePicker } from './ValuePicker'; diff --git a/packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx b/packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx index 382d3fc2b2e..128a038ea8d 100644 --- a/packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx +++ b/packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx @@ -3,10 +3,10 @@ import { useState } from 'react'; import { SelectableValue } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useTheme2 } from '../../themes'; -import { IconName } from '../../types'; +import { useTheme2 } from '../../themes/ThemeContext'; +import { IconName } from '../../types/icon'; import { ComponentSize } from '../../types/size'; -import { Button, ButtonFill, ButtonVariant } from '../Button'; +import { Button, ButtonFill, ButtonVariant } from '../Button/Button'; import { Select } from '../Select/Select'; export interface ValuePickerProps { diff --git a/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx b/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx index 12f64d89520..b6c3dfae3e3 100644 --- a/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx +++ b/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import { GrafanaTheme2, fieldColorModeRegistry } from '@grafana/data'; import { LineStyle } from '@grafana/schema'; -import { useTheme2, useStyles2 } from '../../themes'; +import { useTheme2, useStyles2 } from '../../themes/ThemeContext'; export interface Props extends React.HTMLAttributes { color?: string; diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx index 77457edfe94..f6a38b71937 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx @@ -4,7 +4,7 @@ import { FC, useEffect, useState } from 'react'; import { DisplayValue, GrafanaTheme2 } from '@grafana/data'; import { LegendDisplayMode, LegendPlacement } from '@grafana/schema'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import { VizLegend } from './VizLegend'; import { VizLegendItem } from './types'; diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx index 113cd7d9ff8..7bd8e345d94 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx @@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { InlineList } from '../List/InlineList'; import { List } from '../List/List'; diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx index 4b6280a0f86..51a64645dad 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { VizLegendSeriesIcon } from './VizLegendSeriesIcon'; import { VizLegendStatsList } from './VizLegendStatsList'; diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx index d5cc82be906..52b2aa5d60d 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx @@ -4,8 +4,8 @@ import * as React from 'react'; import { formattedValueToString, GrafanaTheme2 } from '@grafana/data'; -import { styleMixins } from '../../themes'; import { useStyles2 } from '../../themes/ThemeContext'; +import { hoverColor } from '../../themes/mixins'; import { Trans } from '../../utils/i18n'; import { VizLegendSeriesIcon } from './VizLegendSeriesIcon'; @@ -112,7 +112,7 @@ export const LegendTableItem = ({ LegendTableItem.displayName = 'LegendTableItem'; const getStyles = (theme: GrafanaTheme2) => { - const rowHoverBg = styleMixins.hoverColor(theme.colors.background.primary, theme); + const rowHoverBg = hoverColor(theme.colors.background.primary, theme); return { row: css({ diff --git a/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx b/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx index 39f324ca7ff..30013bbd58b 100644 --- a/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/SeriesTable.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { GrafanaTheme2, GraphSeriesValue } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { t } from '../../utils/i18n'; import { SeriesIcon } from '../VizLegend/SeriesIcon'; diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx index 23b39b18356..0a174683de4 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { Dimensions, TimeZone } from '@grafana/data'; import { TooltipDisplayMode } from '@grafana/schema'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Portal } from '../Portal/Portal'; import { VizTooltipContainer } from './VizTooltipContainer'; diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx index b61905c7d4f..34c251eee13 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx @@ -3,7 +3,7 @@ import { css, cx } from '@emotion/css'; import { FALLBACK_COLOR, GrafanaTheme2 } from '@grafana/data'; import { LineStyle } from '@grafana/schema'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { SeriesIcon } from '../VizLegend/SeriesIcon'; import { ColorIndicator, DEFAULT_COLOR_INDICATOR } from './types'; diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx index b30b4e5ff81..10e97629d4a 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx @@ -5,7 +5,7 @@ import { useWindowSize } from 'react-use'; import { Dimensions2D, GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { getTooltipContainerStyles } from '../../themes/mixins'; import { calculateTooltipPosition } from './utils'; diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx index 4debad70718..40f19c37157 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx @@ -3,7 +3,7 @@ import { CSSProperties, ReactNode } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { VizTooltipRow } from './VizTooltipRow'; import { VizTooltipItem } from './types'; diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx index cb4aa330a63..267c09bed9c 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipFooter.tsx @@ -3,10 +3,13 @@ import { useMemo } from 'react'; import { ActionModel, Field, GrafanaTheme2, LinkModel, ThemeSpacingTokens } from '@grafana/data'; -import { Button, DataLinkButton, Icon, Stack } from '..'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Trans } from '../../utils/i18n'; import { ActionButton } from '../Actions/ActionButton'; +import { Button } from '../Button/Button'; +import { DataLinkButton } from '../DataLinks/DataLinkButton'; +import { Icon } from '../Icon/Icon'; +import { Stack } from '../Layout/Stack/Stack'; import { ResponsiveProp } from '../Layout/utils/responsiveness'; interface VizTooltipFooterProps { diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeader.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeader.tsx index 52a294b82ec..13b429f5d43 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeader.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipHeader.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { VizTooltipRow } from './VizTooltipRow'; import { VizTooltipItem } from './types'; diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx index 7d7cdf9504f..3babe63b17c 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx @@ -4,9 +4,9 @@ import * as React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { InlineToast } from '../InlineToast/InlineToast'; -import { Tooltip } from '../Tooltip'; +import { Tooltip } from '../Tooltip/Tooltip'; import { ColorIndicatorPosition, VizTooltipColorIndicator } from './VizTooltipColorIndicator'; import { ColorPlacement, VizTooltipItem } from './types'; diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipWrapper.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipWrapper.tsx index 4c803abc085..b94859f7ed7 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipWrapper.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipWrapper.tsx @@ -3,7 +3,7 @@ import React, { HTMLAttributes } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; export interface Props extends HTMLAttributes { children?: React.ReactNode; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts deleted file mode 100644 index 115a91d89e9..00000000000 --- a/packages/grafana-ui/src/components/index.ts +++ /dev/null @@ -1,343 +0,0 @@ -import { FormField } from './FormField/FormField'; -import { Input, LegacyInputStatus } from './Forms/Legacy/Input/Input'; -import { IndicatorsContainer } from './Forms/Legacy/Select/IndicatorsContainer'; -import { NoOptionsMessage } from './Forms/Legacy/Select/NoOptionsMessage'; -import { AsyncSelect, Select } from './Forms/Legacy/Select/Select'; -import { Switch } from './Forms/Legacy/Switch/Switch'; -import { SecretFormField } from './SecretFormField/SecretFormField'; - -export { Icon } from './Icon/Icon'; -export { IconButton, type IconButtonVariant } from './IconButton/IconButton'; -export { ConfirmButton } from './ConfirmButton/ConfirmButton'; -export { DeleteButton } from './ConfirmButton/DeleteButton'; -export { Tooltip } from './Tooltip/Tooltip'; -export type { PopoverContent } from './Tooltip/types'; -export { PopoverController } from './Tooltip/PopoverController'; -export { Popover } from './Tooltip/Popover'; -export { Toggletip } from './Toggletip/Toggletip'; -export { Portal, getPortalContainer, PortalContainer } from './Portal/Portal'; -export { CustomScrollbar, type ScrollbarPosition } from './CustomScrollbar/CustomScrollbar'; -export { TabbedContainer, type TabConfig } from './TabbedContainer/TabbedContainer'; - -export { ClipboardButton } from './ClipboardButton/ClipboardButton'; -export { Cascader, type CascaderOption } from './Cascader/Cascader'; -export { Carousel } from './Carousel/Carousel'; -export { ButtonCascader } from './ButtonCascader/ButtonCascader'; -export { InlineToast } from './InlineToast/InlineToast'; - -export { LoadingPlaceholder, type LoadingPlaceholderProps } from './LoadingPlaceholder/LoadingPlaceholder'; -export { LoadingBar, type LoadingBarProps } from './LoadingBar/LoadingBar'; -export { ColorPicker, SeriesColorPicker } from './ColorPicker/ColorPicker'; -export { ColorPickerInput } from './ColorPicker/ColorPickerInput'; -export { SeriesColorPickerPopover, SeriesColorPickerPopoverWithTheme } from './ColorPicker/SeriesColorPickerPopover'; -export { EmptySearchResult } from './EmptySearchResult/EmptySearchResult'; -export { EmptyState } from './EmptyState/EmptyState'; -export { UnitPicker } from './UnitPicker/UnitPicker'; -export { StatsPicker } from './StatsPicker/StatsPicker'; -export { RefreshPicker, defaultIntervals } from './RefreshPicker/RefreshPicker'; -export { TimeRangePicker, type TimeRangePickerProps } from './DateTimePickers/TimeRangePicker'; -export { TimeRangeProvider } from './DateTimePickers/TimeRangeContext'; -export { TimePickerTooltip } from './DateTimePickers/TimeRangePicker'; -export { TimeRangeLabel } from './DateTimePickers/TimeRangePicker/TimeRangeLabel'; -export { TimeOfDayPicker } from './DateTimePickers/TimeOfDayPicker'; -export { TimeZonePicker } from './DateTimePickers/TimeZonePicker'; -export { WeekStartPicker, getWeekStart, type WeekStart, isWeekStart } from './DateTimePickers/WeekStartPicker'; -export { DatePicker, type DatePickerProps } from './DateTimePickers/DatePicker/DatePicker'; -export { - DatePickerWithInput, - type DatePickerWithInputProps, -} from './DateTimePickers/DatePickerWithInput/DatePickerWithInput'; -export { DateTimePicker } from './DateTimePickers/DateTimePicker/DateTimePicker'; -export { List } from './List/List'; -export { InteractiveTable, type FetchDataArgs, type FetchDataFunc } from './InteractiveTable/InteractiveTable'; -export { TagsInput } from './TagsInput/TagsInput'; -export { AutoSaveField } from './AutoSaveField/AutoSaveField'; -export { Pagination } from './Pagination/Pagination'; -export { Tag, type OnTagClick } from './Tags/Tag'; -export { TagList } from './Tags/TagList'; -export { FilterPill } from './FilterPill/FilterPill'; - -export { ConfirmModal, type ConfirmModalProps } from './ConfirmModal/ConfirmModal'; -export { QueryField, type QueryFieldProps } from './QueryField/QueryField'; - -export { CodeEditor } from './Monaco/CodeEditor'; - -export { ReactMonacoEditorLazy as ReactMonacoEditor } from './Monaco/ReactMonacoEditorLazy'; - -export { - type Monaco, - type monacoTypes, - type MonacoEditor, - type MonacoOptions as CodeEditorMonacoOptions, - type CodeEditorSuggestionItem, - CodeEditorSuggestionItemKind, -} from './Monaco/types'; -export { variableSuggestionToCodeEditorSuggestion } from './Monaco/utils'; - -// TODO: namespace -export { Modal, type Props as ModalProps } from './Modal/Modal'; -export { ModalHeader } from './Modal/ModalHeader'; -export { ModalTabsHeader } from './Modal/ModalTabsHeader'; -export { ModalTabContent } from './Modal/ModalTabContent'; -export { ModalsProvider, ModalRoot, ModalsController, ModalsContext } from './Modal/ModalsContext'; -export { PageToolbar } from './PageLayout/PageToolbar'; - -// Renderless -export { SetInterval } from './SetInterval/SetInterval'; - -export { Table } from './Table/Table'; -export { TableCellInspector, TableCellInspectorMode } from './Table/TableCellInspector'; -export { - type TableCustomCellOptions, - type CustomCellRendererProps, - type TableFieldOptions, - type TableSortByFieldState, - type TableFooterCalc, - type AdHocFilterItem, - type TableAutoCellOptions, - type TableSparklineCellOptions, - type TableBarGaugeCellOptions, - type TableColoredBackgroundCellOptions, - type TableColorTextCellOptions, - type TableImageCellOptions, - type TableJsonViewCellOptions, -} from './Table/types'; - -export { TableInputCSV } from './TableInputCSV/TableInputCSV'; -export { TabsBar } from './Tabs/TabsBar'; -export { Tab, type TabProps } from './Tabs/Tab'; -export { VerticalTab } from './Tabs/VerticalTab'; -export { TabContent } from './Tabs/TabContent'; -export { Counter } from './Tabs/Counter'; -export { RenderUserContentAsHTML } from './RenderUserContentAsHTML/RenderUserContentAsHTML'; - -// Visualizations -export { - BigValue, - BigValueColorMode, - BigValueGraphMode, - BigValueJustifyMode, - BigValueTextMode, -} from './BigValue/BigValue'; -export { Sparkline } from './Sparkline/Sparkline'; - -export { Gauge } from './Gauge/Gauge'; -export { BarGauge } from './BarGauge/BarGauge'; -export { - VizTooltip, - VizTooltipContainer, - SeriesTable, - type SeriesTableProps, - SeriesTableRow, - type SeriesTableRowProps, -} from './VizTooltip'; -export { VizRepeater, type VizRepeaterRenderValueProps } from './VizRepeater/VizRepeater'; -export { - PanelChrome, - type PanelChromeProps, - type PanelPadding, - type PanelChromeType, - PanelChromeLoadingIndicator, - type PanelChromeLoadingIndicatorProps, - PanelContextProvider, - type PanelContext, - PanelContextRoot, - usePanelContext, -} from './PanelChrome'; -export { - VizLayout, - type VizLayoutComponentType, - type VizLayoutLegendProps, - type VizLayoutProps, -} from './VizLayout/VizLayout'; -export { type VizLegendItem, SeriesVisibilityChangeBehavior } from './VizLegend/types'; -export { VizLegend } from './VizLegend/VizLegend'; -export { VizLegendListItem } from './VizLegend/VizLegendListItem'; - -export { Alert, type AlertVariant } from './Alert/Alert'; -export { GraphSeriesToggler, type GraphSeriesTogglerAPI } from '../graveyard/Graph/GraphSeriesToggler'; -export { Collapse, ControlledCollapse } from './Collapse/Collapse'; -export { CollapsableSection } from './Collapse/CollapsableSection'; -export { DataLinkButton } from './DataLinks/DataLinkButton'; -export { FieldLinkList } from './DataLinks/FieldLinkList'; -// Panel editors -export { FullWidthButtonContainer } from './Button/FullWidthButtonContainer'; -export { ClickOutsideWrapper } from './ClickOutsideWrapper/ClickOutsideWrapper'; -export * from './SingleStatShared/index'; -export { CallToActionCard } from './CallToActionCard/CallToActionCard'; -export { ContextMenu, type ContextMenuProps } from './ContextMenu/ContextMenu'; -export { Menu, type MenuProps } from './Menu/Menu'; -export { MenuGroup, type MenuItemsGroup, type MenuGroupProps } from './Menu/MenuGroup'; -export { MenuItem, type MenuItemProps } from './Menu/MenuItem'; -export { WithContextMenu } from './ContextMenu/WithContextMenu'; -export { DataLinksInlineEditor } from './DataLinks/DataLinksInlineEditor/DataLinksInlineEditor'; -export { - DataLinksInlineEditorBase, - type DataLinksInlineEditorBaseProps, -} from './DataLinks/DataLinksInlineEditor/DataLinksInlineEditorBase'; -export { DataLinkInput } from './DataLinks/DataLinkInput'; -export { - DataLinksContextMenu, - type DataLinksContextMenuProps, - type DataLinksContextMenuApi, -} from './DataLinks/DataLinksContextMenu'; -export { SeriesIcon } from './VizLegend/SeriesIcon'; -export { InfoBox } from './InfoBox/InfoBox'; -export { FeatureInfoBox } from './InfoBox/FeatureInfoBox'; -export { FeatureBadge } from './FeatureBadge/FeatureBadge'; - -export { JSONFormatter } from './JSONFormatter/JSONFormatter'; -export { JsonExplorer } from './JSONFormatter/json_explorer/json_explorer'; -export { - ErrorBoundary, - ErrorBoundaryAlert, - type ErrorBoundaryAlertProps, - withErrorBoundary, -} from './ErrorBoundary/ErrorBoundary'; -export { ErrorWithStack } from './ErrorBoundary/ErrorWithStack'; -export { DataSourceHttpSettings } from './DataSourceSettings/DataSourceHttpSettings'; -export { CustomHeadersSettings } from './DataSourceSettings/CustomHeadersSettings'; -export { AlertingSettings } from './DataSourceSettings/AlertingSettings'; -export { SecureSocksProxySettings } from './DataSourceSettings/SecureSocksProxySettings'; -export { TLSAuthSettings } from './DataSourceSettings/TLSAuthSettings'; -export { CertificationKey } from './DataSourceSettings/CertificationKey'; -export { Spinner } from './Spinner/Spinner'; -export { FadeTransition } from './transitions/FadeTransition'; -export { SlideOutTransition } from './transitions/SlideOutTransition'; -export { Segment, SegmentAsync, SegmentInput, SegmentSelect, SegmentSection } from './Segment/'; -export { Drawer } from './Drawer/Drawer'; -export { Slider } from './Slider/Slider'; -export { RangeSlider } from './Slider/RangeSlider'; - -// Next-gen forms -export { Form } from './Forms/Form'; -export { sharedInputStyle } from './Forms/commonStyles'; -export { InputControl } from './InputControl'; -export { Button, LinkButton, type ButtonVariant, ButtonGroup, type ButtonProps, clearButtonStyles } from './Button'; -export { ToolbarButton, ToolbarButtonRow } from './ToolbarButton'; -export { ValuePicker } from './ValuePicker/ValuePicker'; -export { fieldMatchersUI } from './MatchersUI/fieldMatchersUI'; -export { Link } from './Link/Link'; -export { TextLink } from './Link/TextLink'; -export { Text } from './Text/Text'; -export { Box } from './Layout/Box/Box'; -export { Stack } from './Layout/Stack/Stack'; -export { Grid } from './Layout/Grid/Grid'; -export { Space } from './Layout/Space'; -export { ScrollContainer } from './ScrollContainer/ScrollContainer'; - -export { Label } from './Forms/Label'; -export { Field, type FieldProps } from './Forms/Field'; -export { Legend } from './Forms/Legend'; -export { FieldSet } from './Forms/FieldSet'; -export { FieldValidationMessage } from './Forms/FieldValidationMessage'; -export { InlineField } from './Forms/InlineField'; -export { InlineSegmentGroup } from './Forms/InlineSegmentGroup'; -export { InlineLabel } from './Forms/InlineLabel'; -export { InlineFieldRow } from './Forms/InlineFieldRow'; -export { FieldArray } from './Forms/FieldArray'; - -// Select -// Note - Select is nearly deprecated in favor of Combobox -export { default as resetSelectStyles } from './Select/resetSelectStyles'; -export * from './Select/Select'; -export { SelectMenuOptions } from './Select/SelectMenu'; -export { getSelectStyles } from './Select/getSelectStyles'; -export * from './Select/types'; - -export { Combobox } from './Combobox/Combobox'; -export { MultiCombobox } from './Combobox/MultiCombobox'; -export { type ComboboxOption } from './Combobox/types'; - -export { HorizontalGroup, VerticalGroup, Container } from './Layout/Layout'; -export { Badge, type BadgeColor, type BadgeProps } from './Badge/Badge'; -export { RadioButtonGroup } from './Forms/RadioButtonGroup/RadioButtonGroup'; -export { RadioButtonDot } from './Forms/RadioButtonList/RadioButtonDot'; -export { RadioButtonList } from './Forms/RadioButtonList/RadioButtonList'; - -export { Input, getInputStyles } from './Input/Input'; -export { AutoSizeInput } from './Input/AutoSizeInput'; -export { FilterInput } from './FilterInput/FilterInput'; -export type { FormInputSize } from './Forms/types'; -export * from './SecretInput'; -export * from './SecretTextArea'; - -export { Switch, InlineSwitch } from './Switch/Switch'; -export { Checkbox } from './Forms/Checkbox'; - -export { TextArea } from './TextArea/TextArea'; -export { FileUpload } from './FileUpload/FileUpload'; -export * from './FileDropzone'; -export { TimeRangeInput } from './DateTimePickers/TimeRangeInput'; -export { RelativeTimeRangePicker } from './DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker'; -export { Card, type Props as CardProps, getCardStyles } from './Card/Card'; -export { CardContainer, type CardContainerProps } from './Card/CardContainer'; -export { FormattedValueDisplay } from './FormattedValueDisplay/FormattedValueDisplay'; -export { ButtonSelect } from './Dropdown/ButtonSelect'; -export { Dropdown } from './Dropdown/Dropdown'; -export { PluginSignatureBadge, type PluginSignatureBadgeProps } from './PluginSignatureBadge/PluginSignatureBadge'; -export { UserIcon, type UserIconProps } from './UsersIndicator/UserIcon'; -export { UsersIndicator, type UsersIndicatorProps } from './UsersIndicator/UsersIndicator'; -export { type UserView } from './UsersIndicator/types'; -export { Avatar } from './UsersIndicator/Avatar'; -// Export this until we've figured out a good approach to inline form styles. -export { InlineFormLabel } from './FormLabel/FormLabel'; -export { Divider } from './Divider/Divider'; -export { getDragStyles, type DragHandlePosition } from './DragHandle/DragHandle'; -export { useSplitter } from './Splitter/useSplitter'; - -/** @deprecated Please use non-legacy versions of these components */ -const LegacyForms = { - SecretFormField, - FormField, - Select, - AsyncSelect, - IndicatorsContainer, - NoOptionsMessage, - Input, - Switch, -}; -export { LegacyForms, LegacyInputStatus }; - -// WIP, need renames and exports cleanup -export * from './uPlot/config'; -export { ScaleDistribution, BarGaugeDisplayMode } from '@grafana/schema'; -export { UPlotConfigBuilder } from './uPlot/config/UPlotConfigBuilder'; -export { UPLOT_AXIS_FONT_SIZE } from './uPlot/config/UPlotAxisBuilder'; -export { UPlotChart } from './uPlot/Plot'; -export { PlotLegend } from './uPlot/PlotLegend'; -export * from './uPlot/geometries'; -export * from './uPlot/plugins'; -export { type PlotTooltipInterpolator, type PlotSelection, FIXED_UNIT } from './uPlot/types'; -export { type UPlotConfigPrepFn } from './uPlot/config/UPlotConfigBuilder'; -export * from './PanelChrome/types'; -export { Label as BrowserLabel } from './BrowserLabel/Label'; -export { PanelContainer } from './PanelContainer/PanelContainer'; - -// ----------------------------------------------------- -// Graveyard: exported, but no longer used internally -// These will be removed in the future -// ----------------------------------------------------- - -export { Graph } from '../graveyard/Graph/Graph'; -export { GraphWithLegend } from '../graveyard/Graph/GraphWithLegend'; -export { GraphContextMenu, GraphContextMenuHeader } from '../graveyard/Graph/GraphContextMenu'; -export { graphTimeFormat, graphTickFormatter } from '../graveyard/Graph/utils'; - -export { GraphNG, type GraphNGProps } from '../graveyard/GraphNG/GraphNG'; -export { TimeSeries } from '../graveyard/TimeSeries/TimeSeries'; -export { useGraphNGContext } from '../graveyard/GraphNG/hooks'; -export { preparePlotFrame, buildScaleKey } from '../graveyard/GraphNG/utils'; -export { type GraphNGLegendEvent } from '../graveyard/GraphNG/types'; - -export { ZoomPlugin } from '../graveyard/uPlot/plugins/ZoomPlugin'; -export { TooltipPlugin } from '../graveyard/uPlot/plugins/TooltipPlugin'; - -export { - ElementSelectionContext, - useElementSelection, - type ElementSelectionContextState, - type ElementSelectionContextItem, - type ElementSelectionOnSelectOptions, - type UseElementSelectionResult, -} from './ElementSelectionContext/ElementSelectionContext'; diff --git a/packages/grafana-ui/src/components/transitions/FadeTransition.tsx b/packages/grafana-ui/src/components/transitions/FadeTransition.tsx index 72f1424fa38..a50e650a77b 100644 --- a/packages/grafana-ui/src/components/transitions/FadeTransition.tsx +++ b/packages/grafana-ui/src/components/transitions/FadeTransition.tsx @@ -5,7 +5,7 @@ import { CSSTransition } from 'react-transition-group'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; type Props = { children: React.ReactElement; diff --git a/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx b/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx index e2d12a350ee..18151b51757 100644 --- a/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx +++ b/packages/grafana-ui/src/components/transitions/SlideOutTransition.tsx @@ -5,7 +5,7 @@ import { CSSTransition } from 'react-transition-group'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; type Props = { children: React.ReactElement; diff --git a/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx b/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx index 0163d9483c5..13d2067ce3d 100644 --- a/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx +++ b/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx @@ -3,7 +3,7 @@ import { memo } from 'react'; import { DataFrame, getFieldDisplayName, getFieldSeriesColor } from '@grafana/data'; import { VizLegendOptions, AxisPlacement } from '@grafana/schema'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; import { VizLayout, VizLayoutLegendProps } from '../VizLayout/VizLayout'; import { VizLegend } from '../VizLegend/VizLegend'; import { VizLegendItem } from '../VizLegend/types'; diff --git a/packages/grafana-ui/src/components/uPlot/geometries/index.ts b/packages/grafana-ui/src/components/uPlot/geometries/index.ts deleted file mode 100644 index 1fe6ab579a1..00000000000 --- a/packages/grafana-ui/src/components/uPlot/geometries/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { EventsCanvas } from './EventsCanvas'; -import { Marker } from './Marker'; -import { XYCanvas } from './XYCanvas'; -export { XYCanvas, Marker, EventsCanvas }; diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx index 649e1a377d2..b9e3d01b2ac 100644 --- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx +++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx @@ -7,7 +7,7 @@ import uPlot from 'uplot'; import { GrafanaTheme2, LinkModel } from '@grafana/data'; import { DashboardCursorSync } from '@grafana/schema'; -import { useStyles2 } from '../../../themes'; +import { useStyles2 } from '../../../themes/ThemeContext'; import { RangeSelection1D, RangeSelection2D, OnSelectRangeCallback } from '../../PanelChrome'; import { getPortalContainer } from '../../Portal/Portal'; import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder'; diff --git a/packages/grafana-ui/src/components/uPlot/plugins/index.ts b/packages/grafana-ui/src/components/uPlot/plugins/index.ts deleted file mode 100644 index 0c5f3123c2d..00000000000 --- a/packages/grafana-ui/src/components/uPlot/plugins/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { TooltipPlugin2 } from './TooltipPlugin2'; -export { EventBusPlugin } from './EventBusPlugin'; -export { KeyboardPlugin } from './KeyboardPlugin'; diff --git a/packages/grafana-ui/src/components/uPlot/utils.test.ts b/packages/grafana-ui/src/components/uPlot/utils.test.ts index a72b806d622..8e91ba3696e 100644 --- a/packages/grafana-ui/src/components/uPlot/utils.test.ts +++ b/packages/grafana-ui/src/components/uPlot/utils.test.ts @@ -1,7 +1,7 @@ import { FieldMatcherID, fieldMatchers, FieldType, MutableDataFrame } from '@grafana/data'; import { BarAlignment, GraphDrawStyle, GraphTransform, LineInterpolation, StackingMode } from '@grafana/schema'; -import { preparePlotFrame } from '..'; +import { preparePlotFrame } from '../../graveyard/GraphNG/utils'; import { getStackingGroups, preparePlotData2 } from './utils'; diff --git a/packages/grafana-ui/src/components/uPlot/utils.ts b/packages/grafana-ui/src/components/uPlot/utils.ts index ad7ab4da509..d6a14cb68ac 100644 --- a/packages/grafana-ui/src/components/uPlot/utils.ts +++ b/packages/grafana-ui/src/components/uPlot/utils.ts @@ -15,7 +15,7 @@ import { } from '@grafana/data'; import { BarAlignment, GraphDrawStyle, GraphTransform, LineInterpolation, StackingMode } from '@grafana/schema'; -import { attachDebugger } from '../../utils'; +import { attachDebugger } from '../../utils/debug'; import { createLogger } from '../../utils/logger'; import { buildScaleKey } from './internal'; diff --git a/packages/grafana-ui/src/graveyard/Graph/GraphContextMenu.tsx b/packages/grafana-ui/src/graveyard/Graph/GraphContextMenu.tsx index 2d8775d9a44..75d2f3e381d 100644 --- a/packages/grafana-ui/src/graveyard/Graph/GraphContextMenu.tsx +++ b/packages/grafana-ui/src/graveyard/Graph/GraphContextMenu.tsx @@ -16,7 +16,7 @@ import { HorizontalGroup } from '../../components/Layout/Layout'; import { MenuGroup, MenuGroupProps } from '../../components/Menu/MenuGroup'; import { MenuItem } from '../../components/Menu/MenuItem'; import { SeriesIcon } from '../../components/VizLegend/SeriesIcon'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { GraphDimensions } from './GraphTooltip/types'; diff --git a/packages/grafana-ui/src/graveyard/Graph/GraphWithLegend.tsx b/packages/grafana-ui/src/graveyard/Graph/GraphWithLegend.tsx index 4fcda58d8ea..a4f37dc6f8b 100644 --- a/packages/grafana-ui/src/graveyard/Graph/GraphWithLegend.tsx +++ b/packages/grafana-ui/src/graveyard/Graph/GraphWithLegend.tsx @@ -9,7 +9,7 @@ import { LegendDisplayMode, LegendPlacement } from '@grafana/schema'; import { CustomScrollbar } from '../../components/CustomScrollbar/CustomScrollbar'; import { VizLegend } from '../../components/VizLegend/VizLegend'; import { VizLegendItem } from '../../components/VizLegend/types'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; import { Graph, GraphProps } from './Graph'; diff --git a/packages/grafana-ui/src/graveyard/Graph/utils.test.ts b/packages/grafana-ui/src/graveyard/Graph/utils.test.ts index f68ed2e4b3f..d04816b5169 100644 --- a/packages/grafana-ui/src/graveyard/Graph/utils.test.ts +++ b/packages/grafana-ui/src/graveyard/Graph/utils.test.ts @@ -9,7 +9,7 @@ import { DataFrame, } from '@grafana/data'; -import { getTheme } from '../../themes'; +import { getTheme } from '../../themes/getTheme'; import { getMultiSeriesGraphHoverInfo, findHoverIndexFromData, graphTimeFormat } from './utils'; diff --git a/packages/grafana-ui/src/graveyard/GraphNG/GraphNG.tsx b/packages/grafana-ui/src/graveyard/GraphNG/GraphNG.tsx index 61acbfe2dee..c7e87d55ba5 100644 --- a/packages/grafana-ui/src/graveyard/GraphNG/GraphNG.tsx +++ b/packages/grafana-ui/src/graveyard/GraphNG/GraphNG.tsx @@ -25,7 +25,7 @@ import { AxisProps } from '../../components/uPlot/config/UPlotAxisBuilder'; import { Renderers, UPlotConfigBuilder } from '../../components/uPlot/config/UPlotConfigBuilder'; import { ScaleProps } from '../../components/uPlot/config/UPlotScaleBuilder'; import { findMidPointYPosition, pluginLog } from '../../components/uPlot/utils'; -import { Themeable2 } from '../../types'; +import { Themeable2 } from '../../types/theme'; import { GraphNGLegendEvent, XYFieldMatchers } from './types'; import { preparePlotFrame as defaultPreparePlotFrame } from './utils'; diff --git a/packages/grafana-ui/src/graveyard/uPlot/plugins/TooltipPlugin.tsx b/packages/grafana-ui/src/graveyard/uPlot/plugins/TooltipPlugin.tsx index a6328d27aff..69bc0e3ec8f 100644 --- a/packages/grafana-ui/src/graveyard/uPlot/plugins/TooltipPlugin.tsx +++ b/packages/grafana-ui/src/graveyard/uPlot/plugins/TooltipPlugin.tsx @@ -19,7 +19,10 @@ import { } from '@grafana/data'; import { TooltipDisplayMode, SortOrder } from '@grafana/schema'; -import { Portal, SeriesTable, SeriesTableRowProps, UPlotConfigBuilder, VizTooltipContainer } from '../../../components'; +import { Portal } from '../../../components/Portal/Portal'; +import { SeriesTable, SeriesTableRowProps } from '../../../components/VizTooltip/SeriesTable'; +import { UPlotConfigBuilder } from '../../../components/uPlot/config/UPlotConfigBuilder'; +import { VizTooltipContainer } from '../../../components/VizTooltip/VizTooltipContainer'; import { findMidPointYPosition } from '../../../components/uPlot/utils'; import { useStyles2, useTheme2 } from '../../../themes/ThemeContext'; diff --git a/packages/grafana-ui/src/graveyard/uPlot/plugins/ZoomPlugin.tsx b/packages/grafana-ui/src/graveyard/uPlot/plugins/ZoomPlugin.tsx index 72bbf76b17c..65cf18d34f3 100644 --- a/packages/grafana-ui/src/graveyard/uPlot/plugins/ZoomPlugin.tsx +++ b/packages/grafana-ui/src/graveyard/uPlot/plugins/ZoomPlugin.tsx @@ -1,6 +1,6 @@ import { useLayoutEffect } from 'react'; -import { UPlotConfigBuilder } from '../../../components'; +import { UPlotConfigBuilder } from '../../../components/uPlot/config/UPlotConfigBuilder'; interface ZoomPluginProps { onZoom: (range: { from: number; to: number }) => void; diff --git a/packages/grafana-ui/src/index.ts b/packages/grafana-ui/src/index.ts index 62142c29bac..b42f2da41de 100644 --- a/packages/grafana-ui/src/index.ts +++ b/packages/grafana-ui/src/index.ts @@ -3,13 +3,506 @@ * * @packageDocumentation */ -export * from './components'; -export * from './types'; -export * from './utils'; -export * from './themes'; -export * from './options'; -export * from './slate-plugins'; -// Moved to `@grafana/schema`, in Grafana 9, this will be removed -export * from './schema'; -export { getAvailableIcons } from './types'; +import { FormField } from './components/FormField/FormField'; +import { Input, LegacyInputStatus } from './components/Forms/Legacy/Input/Input'; +import { IndicatorsContainer } from './components/Forms/Legacy/Select/IndicatorsContainer'; +import { NoOptionsMessage } from './components/Forms/Legacy/Select/NoOptionsMessage'; +import { AsyncSelect, Select } from './components/Forms/Legacy/Select/Select'; +import { Switch } from './components/Forms/Legacy/Switch/Switch'; +import { SecretFormField } from './components/SecretFormField/SecretFormField'; +import * as commonOptionsBuilder from './options/builder'; +import * as styleMixins from './themes/mixins'; +import * as DOMUtil from './utils/dom'; +import * as ReactUtils from './utils/reactUtils'; + +export { Icon } from './components/Icon/Icon'; +export { IconButton, type IconButtonVariant } from './components/IconButton/IconButton'; +export { ConfirmButton } from './components/ConfirmButton/ConfirmButton'; +export { DeleteButton } from './components/ConfirmButton/DeleteButton'; +export { Tooltip } from './components/Tooltip/Tooltip'; +export type { PopoverContent } from './components/Tooltip/types'; +export { PopoverController } from './components/Tooltip/PopoverController'; +export { Popover } from './components/Tooltip/Popover'; +export { Toggletip } from './components/Toggletip/Toggletip'; +export { Portal, getPortalContainer, PortalContainer } from './components/Portal/Portal'; +export { CustomScrollbar, type ScrollbarPosition } from './components/CustomScrollbar/CustomScrollbar'; +export { TabbedContainer, type TabConfig } from './components/TabbedContainer/TabbedContainer'; +export { ClipboardButton } from './components/ClipboardButton/ClipboardButton'; +export { Cascader, type CascaderOption } from './components/Cascader/Cascader'; +export { Carousel } from './components/Carousel/Carousel'; +export { ButtonCascader } from './components/ButtonCascader/ButtonCascader'; +export { InlineToast } from './components/InlineToast/InlineToast'; +export { LoadingPlaceholder, type LoadingPlaceholderProps } from './components/LoadingPlaceholder/LoadingPlaceholder'; +export { LoadingBar, type LoadingBarProps } from './components/LoadingBar/LoadingBar'; +export { ColorPicker, SeriesColorPicker } from './components/ColorPicker/ColorPicker'; +export { ColorPickerInput } from './components/ColorPicker/ColorPickerInput'; +export { + SeriesColorPickerPopover, + SeriesColorPickerPopoverWithTheme, +} from './components/ColorPicker/SeriesColorPickerPopover'; +export { EmptySearchResult } from './components/EmptySearchResult/EmptySearchResult'; +export { EmptyState } from './components/EmptyState/EmptyState'; +export { UnitPicker } from './components/UnitPicker/UnitPicker'; +export { StatsPicker } from './components/StatsPicker/StatsPicker'; +export { RefreshPicker, defaultIntervals } from './components/RefreshPicker/RefreshPicker'; +export { TimeRangePicker, type TimeRangePickerProps } from './components/DateTimePickers/TimeRangePicker'; +export { TimeRangeProvider } from './components/DateTimePickers/TimeRangeContext'; +export { TimePickerTooltip } from './components/DateTimePickers/TimeRangePicker'; +export { TimeRangeLabel } from './components/DateTimePickers/TimeRangePicker/TimeRangeLabel'; +export { TimeOfDayPicker } from './components/DateTimePickers/TimeOfDayPicker'; +export { TimeZonePicker } from './components/DateTimePickers/TimeZonePicker'; +export { + WeekStartPicker, + getWeekStart, + type WeekStart, + isWeekStart, +} from './components/DateTimePickers/WeekStartPicker'; +export { DatePicker, type DatePickerProps } from './components/DateTimePickers/DatePicker/DatePicker'; +export { + DatePickerWithInput, + type DatePickerWithInputProps, +} from './components/DateTimePickers/DatePickerWithInput/DatePickerWithInput'; +export { DateTimePicker } from './components/DateTimePickers/DateTimePicker/DateTimePicker'; +export { List } from './components/List/List'; +export { + InteractiveTable, + type FetchDataArgs, + type FetchDataFunc, +} from './components/InteractiveTable/InteractiveTable'; +export { TagsInput } from './components/TagsInput/TagsInput'; +export { AutoSaveField } from './components/AutoSaveField/AutoSaveField'; +export { Pagination } from './components/Pagination/Pagination'; +export { Tag, type OnTagClick } from './components/Tags/Tag'; +export { TagList } from './components/Tags/TagList'; +export { FilterPill } from './components/FilterPill/FilterPill'; + +export { ConfirmModal, type ConfirmModalProps } from './components/ConfirmModal/ConfirmModal'; +export { QueryField, type QueryFieldProps } from './components/QueryField/QueryField'; +export { CodeEditor } from './components/Monaco/CodeEditor'; +export { ReactMonacoEditorLazy as ReactMonacoEditor } from './components/Monaco/ReactMonacoEditorLazy'; +export { + type Monaco, + type monacoTypes, + type MonacoEditor, + type MonacoOptions as CodeEditorMonacoOptions, + type CodeEditorSuggestionItem, + CodeEditorSuggestionItemKind, +} from './components/Monaco/types'; +export { variableSuggestionToCodeEditorSuggestion } from './components/Monaco/utils'; + +// TODO: namespace +export { Modal, type Props as ModalProps } from './components/Modal/Modal'; +export { ModalHeader } from './components/Modal/ModalHeader'; +export { ModalTabsHeader } from './components/Modal/ModalTabsHeader'; +export { ModalTabContent } from './components/Modal/ModalTabContent'; +export { ModalsProvider, ModalRoot, ModalsController, ModalsContext } from './components/Modal/ModalsContext'; +export { PageToolbar } from './components/PageLayout/PageToolbar'; + +// Renderless +export { SetInterval } from './components/SetInterval/SetInterval'; +export { Table } from './components/Table/Table'; +export { TableCellInspector, TableCellInspectorMode } from './components/Table/TableCellInspector'; +export { + type TableCustomCellOptions, + type CustomCellRendererProps, + type TableFieldOptions, + type TableSortByFieldState, + type TableFooterCalc, + type AdHocFilterItem, + type TableAutoCellOptions, + type TableSparklineCellOptions, + type TableBarGaugeCellOptions, + type TableColoredBackgroundCellOptions, + type TableColorTextCellOptions, + type TableImageCellOptions, + type TableJsonViewCellOptions, +} from './components/Table/types'; + +export { TableInputCSV } from './components/TableInputCSV/TableInputCSV'; +export { TabsBar } from './components/Tabs/TabsBar'; +export { Tab, type TabProps } from './components/Tabs/Tab'; +export { VerticalTab } from './components/Tabs/VerticalTab'; +export { TabContent } from './components/Tabs/TabContent'; +export { Counter } from './components/Tabs/Counter'; +export { RenderUserContentAsHTML } from './components/RenderUserContentAsHTML/RenderUserContentAsHTML'; + +// Visualizations +export { + BigValue, + BigValueColorMode, + BigValueGraphMode, + BigValueJustifyMode, + BigValueTextMode, +} from './components/BigValue/BigValue'; +export { Sparkline } from './components/Sparkline/Sparkline'; + +export { Gauge } from './components/Gauge/Gauge'; +export { BarGauge } from './components/BarGauge/BarGauge'; +export { + VizTooltip, + VizTooltipContainer, + SeriesTable, + type SeriesTableProps, + SeriesTableRow, + type SeriesTableRowProps, +} from './components/VizTooltip'; +export { VizRepeater, type VizRepeaterRenderValueProps } from './components/VizRepeater/VizRepeater'; +export { + PanelChrome, + type PanelChromeProps, + type PanelPadding, + type PanelChromeType, + PanelChromeLoadingIndicator, + type PanelChromeLoadingIndicatorProps, + PanelContextProvider, + type PanelContext, + PanelContextRoot, + usePanelContext, +} from './components/PanelChrome'; +export { + VizLayout, + type VizLayoutComponentType, + type VizLayoutLegendProps, + type VizLayoutProps, +} from './components/VizLayout/VizLayout'; +export { type VizLegendItem, SeriesVisibilityChangeBehavior } from './components/VizLegend/types'; +export { VizLegend } from './components/VizLegend/VizLegend'; +export { VizLegendListItem } from './components/VizLegend/VizLegendListItem'; + +export { Alert, type AlertVariant } from './components/Alert/Alert'; +export { Collapse, ControlledCollapse } from './components/Collapse/Collapse'; +export { CollapsableSection } from './components/Collapse/CollapsableSection'; +export { DataLinkButton } from './components/DataLinks/DataLinkButton'; +export { FieldLinkList } from './components/DataLinks/FieldLinkList'; +// Panel editors +export { FullWidthButtonContainer } from './components/Button/FullWidthButtonContainer'; +export { ClickOutsideWrapper } from './components/ClickOutsideWrapper/ClickOutsideWrapper'; +export { + type SingleStatBaseOptions, + sharedSingleStatMigrationHandler, + convertOldAngularValueMapping, + sharedSingleStatPanelChangedHandler, +} from './components/SingleStatShared/SingleStatBaseOptions'; +export { CallToActionCard } from './components/CallToActionCard/CallToActionCard'; +export { ContextMenu, type ContextMenuProps } from './components/ContextMenu/ContextMenu'; +export { Menu, type MenuProps } from './components/Menu/Menu'; +export { MenuGroup, type MenuItemsGroup, type MenuGroupProps } from './components/Menu/MenuGroup'; +export { MenuItem, type MenuItemProps } from './components/Menu/MenuItem'; +export { WithContextMenu } from './components/ContextMenu/WithContextMenu'; +export { DataLinksInlineEditor } from './components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor'; +export { + DataLinksInlineEditorBase, + type DataLinksInlineEditorBaseProps, +} from './components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditorBase'; +export { DataLinkInput } from './components/DataLinks/DataLinkInput'; +export { + DataLinksContextMenu, + type DataLinksContextMenuProps, + type DataLinksContextMenuApi, +} from './components/DataLinks/DataLinksContextMenu'; +export { SeriesIcon } from './components/VizLegend/SeriesIcon'; +export { InfoBox } from './components/InfoBox/InfoBox'; +export { FeatureInfoBox } from './components/InfoBox/FeatureInfoBox'; +export { FeatureBadge } from './components/FeatureBadge/FeatureBadge'; + +export { JSONFormatter } from './components/JSONFormatter/JSONFormatter'; +export { JsonExplorer } from './components/JSONFormatter/json_explorer/json_explorer'; +export { + ErrorBoundary, + ErrorBoundaryAlert, + type ErrorBoundaryAlertProps, + withErrorBoundary, +} from './components/ErrorBoundary/ErrorBoundary'; +export { ErrorWithStack } from './components/ErrorBoundary/ErrorWithStack'; +export { DataSourceHttpSettings } from './components/DataSourceSettings/DataSourceHttpSettings'; +export { CustomHeadersSettings } from './components/DataSourceSettings/CustomHeadersSettings'; +export { AlertingSettings } from './components/DataSourceSettings/AlertingSettings'; +export { SecureSocksProxySettings } from './components/DataSourceSettings/SecureSocksProxySettings'; +export { TLSAuthSettings } from './components/DataSourceSettings/TLSAuthSettings'; +export { CertificationKey } from './components/DataSourceSettings/CertificationKey'; +export { Spinner } from './components/Spinner/Spinner'; +export { FadeTransition } from './components/transitions/FadeTransition'; +export { SlideOutTransition } from './components/transitions/SlideOutTransition'; +export { Segment } from './components/Segment/Segment'; +export { SegmentAsync } from './components/Segment/SegmentAsync'; +export { SegmentInput } from './components/Segment/SegmentInput'; +export { SegmentSelect } from './components/Segment/SegmentSelect'; +export { SegmentSection } from './components/Segment/SegmentSection'; +export { Drawer } from './components/Drawer/Drawer'; +export { Slider } from './components/Slider/Slider'; +export { RangeSlider } from './components/Slider/RangeSlider'; + +// Next-gen forms +export { Form } from './components/Forms/Form'; +export { sharedInputStyle } from './components/Forms/commonStyles'; +export { InputControl } from './components/InputControl'; +export { + Button, + LinkButton, + type ButtonVariant, + type ButtonProps, + clearButtonStyles, +} from './components/Button/Button'; +export { ButtonGroup } from './components/Button/ButtonGroup'; +export { ToolbarButton } from './components/ToolbarButton/ToolbarButton'; +export { ToolbarButtonRow } from './components/ToolbarButton/ToolbarButtonRow'; +export { ValuePicker } from './components/ValuePicker/ValuePicker'; +export { fieldMatchersUI } from './components/MatchersUI/fieldMatchersUI'; +export { Link } from './components/Link/Link'; +export { TextLink } from './components/Link/TextLink'; +export { Text } from './components/Text/Text'; +export { Box } from './components/Layout/Box/Box'; +export { Stack } from './components/Layout/Stack/Stack'; +export { Grid } from './components/Layout/Grid/Grid'; +export { Space } from './components/Layout/Space'; +export { ScrollContainer } from './components/ScrollContainer/ScrollContainer'; + +export { Label } from './components/Forms/Label'; +export { Field, type FieldProps } from './components/Forms/Field'; +export { Legend } from './components/Forms/Legend'; +export { FieldSet } from './components/Forms/FieldSet'; +export { FieldValidationMessage } from './components/Forms/FieldValidationMessage'; +export { InlineField } from './components/Forms/InlineField'; +export { InlineSegmentGroup } from './components/Forms/InlineSegmentGroup'; +export { InlineLabel } from './components/Forms/InlineLabel'; +export { InlineFieldRow } from './components/Forms/InlineFieldRow'; +export { FieldArray } from './components/Forms/FieldArray'; + +// Select +// Note - Select is nearly deprecated in favor of Combobox +export { default as resetSelectStyles } from './components/Select/resetSelectStyles'; +export * from './components/Select/Select'; +export { SelectMenuOptions } from './components/Select/SelectMenu'; +export { getSelectStyles } from './components/Select/getSelectStyles'; +export * from './components/Select/types'; + +export { Combobox } from './components/Combobox/Combobox'; +export { MultiCombobox } from './components/Combobox/MultiCombobox'; +export { type ComboboxOption } from './components/Combobox/types'; + +export { HorizontalGroup, VerticalGroup, Container } from './components/Layout/Layout'; +export { Badge, type BadgeColor, type BadgeProps } from './components/Badge/Badge'; +export { RadioButtonGroup } from './components/Forms/RadioButtonGroup/RadioButtonGroup'; +export { RadioButtonDot } from './components/Forms/RadioButtonList/RadioButtonDot'; +export { RadioButtonList } from './components/Forms/RadioButtonList/RadioButtonList'; + +export { Input, getInputStyles } from './components/Input/Input'; +export { AutoSizeInput } from './components/Input/AutoSizeInput'; +export { FilterInput } from './components/FilterInput/FilterInput'; +export type { FormInputSize } from './components/Forms/types'; +export * from './components/SecretInput'; +export * from './components/SecretTextArea'; + +export { Switch, InlineSwitch } from './components/Switch/Switch'; +export { Checkbox } from './components/Forms/Checkbox'; + +export { TextArea } from './components/TextArea/TextArea'; +export { FileUpload } from './components/FileUpload/FileUpload'; +export { + FileDropzone, + FileDropzoneDefaultChildren, + type FileDropzoneProps, + type DropzoneFile, +} from './components/FileDropzone/FileDropzone'; +export { FileListItem, type FileListItemProps } from './components/FileDropzone/FileListItem'; +export { TimeRangeInput } from './components/DateTimePickers/TimeRangeInput'; +export { RelativeTimeRangePicker } from './components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker'; +export { Card, type Props as CardProps, getCardStyles } from './components/Card/Card'; +export { CardContainer, type CardContainerProps } from './components/Card/CardContainer'; +export { FormattedValueDisplay } from './components/FormattedValueDisplay/FormattedValueDisplay'; +export { ButtonSelect } from './components/Dropdown/ButtonSelect'; +export { Dropdown } from './components/Dropdown/Dropdown'; +export { + PluginSignatureBadge, + type PluginSignatureBadgeProps, +} from './components/PluginSignatureBadge/PluginSignatureBadge'; +export { UserIcon, type UserIconProps } from './components/UsersIndicator/UserIcon'; +export { UsersIndicator, type UsersIndicatorProps } from './components/UsersIndicator/UsersIndicator'; +export { type UserView } from './components/UsersIndicator/types'; +export { Avatar } from './components/UsersIndicator/Avatar'; +// Export this until we've figured out a good approach to inline form styles. +export { InlineFormLabel } from './components/FormLabel/FormLabel'; +export { Divider } from './components/Divider/Divider'; +export { getDragStyles, type DragHandlePosition } from './components/DragHandle/DragHandle'; +export { useSplitter } from './components/Splitter/useSplitter'; + +/** @deprecated Please use non-legacy versions of these components */ +const LegacyForms = { + SecretFormField, + FormField, + Select, + AsyncSelect, + IndicatorsContainer, + NoOptionsMessage, + Input, + Switch, +}; +export { LegacyForms, LegacyInputStatus }; + +// WIP, need renames and exports cleanup +export { graphFieldOptions } from './components/uPlot/config'; +export { UPlotConfigBuilder } from './components/uPlot/config/UPlotConfigBuilder'; +export { UPLOT_AXIS_FONT_SIZE } from './components/uPlot/config/UPlotAxisBuilder'; +export { UPlotChart } from './components/uPlot/Plot'; +export { PlotLegend } from './components/uPlot/PlotLegend'; +export { XYCanvas } from './components/uPlot/geometries/XYCanvas'; +export { Marker } from './components/uPlot/geometries/Marker'; +export { EventsCanvas } from './components/uPlot/geometries/EventsCanvas'; +export { TooltipPlugin2 } from './components/uPlot/plugins/TooltipPlugin2'; +export { EventBusPlugin } from './components/uPlot/plugins/EventBusPlugin'; +export { KeyboardPlugin } from './components/uPlot/plugins/KeyboardPlugin'; + +export { type PlotTooltipInterpolator, type PlotSelection, FIXED_UNIT } from './components/uPlot/types'; +export { type UPlotConfigPrepFn } from './components/uPlot/config/UPlotConfigBuilder'; +export * from './components/PanelChrome/types'; +export { Label as BrowserLabel } from './components/BrowserLabel/Label'; +export { PanelContainer } from './components/PanelContainer/PanelContainer'; + +// ----------------------------------------------------- +// Graveyard: exported, but no longer used internally +// These will be removed in the future +// ----------------------------------------------------- + +export { Graph } from './graveyard/Graph/Graph'; +export { GraphWithLegend } from './graveyard/Graph/GraphWithLegend'; +export { GraphContextMenu, GraphContextMenuHeader } from './graveyard/Graph/GraphContextMenu'; +export { graphTimeFormat, graphTickFormatter } from './graveyard/Graph/utils'; +export { GraphSeriesToggler, type GraphSeriesTogglerAPI } from './graveyard/Graph/GraphSeriesToggler'; + +export { GraphNG, type GraphNGProps } from './graveyard/GraphNG/GraphNG'; +export { TimeSeries } from './graveyard/TimeSeries/TimeSeries'; +export { useGraphNGContext } from './graveyard/GraphNG/hooks'; +export { preparePlotFrame, buildScaleKey } from './graveyard/GraphNG/utils'; +export { type GraphNGLegendEvent } from './graveyard/GraphNG/types'; + +export { ZoomPlugin } from './graveyard/uPlot/plugins/ZoomPlugin'; +export { TooltipPlugin } from './graveyard/uPlot/plugins/TooltipPlugin'; + +export { + ElementSelectionContext, + useElementSelection, + type ElementSelectionContextState, + type ElementSelectionContextItem, + type ElementSelectionOnSelectOptions, + type UseElementSelectionResult, +} from './components/ElementSelectionContext/ElementSelectionContext'; + +export type { Themeable, Themeable2 } from './types/theme'; +export type { ValidationRule, ValidationEvents } from './types/input'; +export type { + SearchFunction, + CompletionItemGroup, + HighlightPart, + CompletionItem, + TypeaheadOutput, + TypeaheadInput, + SuggestionsState, +} from './types/completion'; +export { CompletionItemKind } from './types/completion'; +export type { FormsOnSubmit, FormFieldErrors, FormAPI, FieldArrayApi } from './types/forms'; +export type { IconName, IconType, IconSize } from './types/icon'; +export { toIconName, isIconSize, getAvailableIcons, getFieldTypeIcon, getFieldTypeIconName } from './types/icon'; +export type { ActionMeta } from './types/select'; +export type { ComponentSize } from './types/size'; +export type { Column } from './types/interactiveTable'; +export type { CellProps, SortByFn } from 'react-table'; + +export { + DEFAULT_ANNOTATION_COLOR, + OK_COLOR, + ALERTING_COLOR, + NO_DATA_COLOR, + PENDING_COLOR, + REGION_FILL_ALPHA, + colors, + getTextColorForBackground, + getTextColorForAlphaBackground, + sortedColors, +} from './utils/colors'; +export { EventsWithValidation, validate, hasValidationEvent, regexValidation } from './utils/validate'; +export { SCHEMA, makeFragment, makeValue } from './utils/slate'; +export { linkModelToContextMenuItems } from './utils/dataLinks'; +export { getTagColorIndexFromName, getTagColorsFromName, getTagColor } from './utils/tags'; +export { getScrollbarWidth } from './utils/scrollbar'; +export { getCellLinks } from './utils/table'; +export { getCanvasContext, measureText, calculateFontSize } from './utils/measureText'; +export { createPointerDistance, usePointerDistance } from './utils/usePointerDistance'; +export { useForceUpdate } from './utils/useForceUpdate'; +export { SearchFunctionType } from './utils/searchFunctions'; +export { createLogger } from './utils/logger'; +export { attachDebugger } from './utils/debug'; +export { NodeGraphDataFrameFieldNames } from './utils/nodeGraph'; +export { fuzzyMatch } from './utils/fuzzy'; +export { logOptions } from './utils/logOptions'; + +export { DOMUtil, ReactUtils }; + +export { ThemeContext } from '@grafana/data'; +export { + withTheme, + withTheme2, + useTheme, + useTheme2, + useStyles, + useStyles2, + mockThemeContext, +} from './themes/ThemeContext'; +export { getTheme, mockTheme } from './themes/getTheme'; +export { stylesFactory } from './themes/stylesFactory'; +export { GlobalStyles } from './themes/GlobalStyles/GlobalStyles'; + +export { styleMixins, commonOptionsBuilder }; + +export { BracesPlugin } from './slate-plugins/braces'; +export { ClearPlugin } from './slate-plugins/clear'; +export { ClipboardPlugin } from './slate-plugins/clipboard'; +export { IndentationPlugin } from './slate-plugins/indentation'; +export { NewlinePlugin } from './slate-plugins/newline'; +export { RunnerPlugin } from './slate-plugins/runner'; +export { SelectionShortcutsPlugin } from './slate-plugins/selection_shortcuts'; +export { SlatePrism, type Token } from './slate-plugins/slate-prism'; +export { SuggestionsPlugin } from './slate-plugins/suggestions'; + +// @deprecated import from @grafana/schema +export { + // Styles that changed + GraphDrawStyle as DrawStyle, + // All exports + AxisPlacement, + VisibilityMode as PointVisibility, + LineInterpolation, + ScaleDistribution, + GraphGradientMode, + BarGaugeDisplayMode, + type LineStyle, + type PointsConfig, + type ScaleDistributionConfig, + type HideSeriesConfig, + BarAlignment, + VisibilityMode as BarValueVisibility, + ScaleOrientation, + ScaleDirection, + type LineConfig, + type BarConfig, + type FillConfig, + type AxisConfig, + type HideableFieldConfig, + StackingMode, + type StackingConfig, + type StackableFieldConfig, + GraphThresholdsStyleMode, + type GraphThresholdsStyleConfig, + type GraphFieldConfig, + type LegendPlacement, + LegendDisplayMode, + type VizLegendOptions, + type OptionsWithLegend, + TableCellDisplayMode, + type FieldTextAlignment, + type VizTextDisplayOptions, + type OptionsWithTextFormatting, + TooltipDisplayMode, + type VizTooltipOptions, + type OptionsWithTooltip, +} from '@grafana/schema'; diff --git a/packages/grafana-ui/src/internal/index.ts b/packages/grafana-ui/src/internal/index.ts index 07b943a07f3..3cffdd2cf92 100644 --- a/packages/grafana-ui/src/internal/index.ts +++ b/packages/grafana-ui/src/internal/index.ts @@ -55,7 +55,7 @@ export { getModalStyles } from '../components/Modal/getModalStyles'; export { MultiValueRemove, type MultiValueRemoveProps } from '../components/Select/MultiValue'; export { getSvgSize } from '../components/Icon/utils'; export { LoadingIndicator } from '../components/PanelChrome/LoadingIndicator'; -export { type ButtonLinkProps, getButtonStyles } from '../components/Button'; +export { type ButtonLinkProps, getButtonStyles } from '../components/Button/Button'; export { type TableSortByFieldState, type TableFieldOptions, @@ -77,7 +77,7 @@ export type { CodeEditorProps } from '../components/Monaco/types'; export { type Props as InlineFieldProps } from '../components/Forms/InlineField'; export { DataLinkSuggestions } from '../components/DataLinks/DataLinkSuggestions'; export { type Props as AlertProps } from '../components/Alert/Alert'; -export { type TooltipPlacement } from '../components/Tooltip'; +export { type TooltipPlacement } from '../components/Tooltip/types'; export { ConfirmContent, type ConfirmContentProps } from '../components/ConfirmModal/ConfirmContent'; export { EmotionPerfTest } from '../components/ThemeDemos/EmotionPerfTest'; diff --git a/packages/grafana-ui/src/slate-plugins/index.ts b/packages/grafana-ui/src/slate-plugins/index.ts deleted file mode 100644 index 4acf6cbdc40..00000000000 --- a/packages/grafana-ui/src/slate-plugins/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export { BracesPlugin } from './braces'; -export { ClearPlugin } from './clear'; -export { ClipboardPlugin } from './clipboard'; -export { IndentationPlugin } from './indentation'; -export { NewlinePlugin } from './newline'; -export { RunnerPlugin } from './runner'; -export { SelectionShortcutsPlugin } from './selection_shortcuts'; -export { SlatePrism, type Token } from './slate-prism'; -export { SuggestionsPlugin } from './suggestions'; diff --git a/packages/grafana-ui/src/slate-plugins/suggestions.tsx b/packages/grafana-ui/src/slate-plugins/suggestions.tsx index 7e27a5adfe6..1d22c988822 100644 --- a/packages/grafana-ui/src/slate-plugins/suggestions.tsx +++ b/packages/grafana-ui/src/slate-plugins/suggestions.tsx @@ -4,9 +4,9 @@ import { Editor, Plugin as SlatePlugin } from 'slate-react'; import { BootData } from '@grafana/data'; import { Typeahead } from '../components/Typeahead/Typeahead'; -import { CompletionItem, SuggestionsState, TypeaheadInput, TypeaheadOutput } from '../types'; -import { makeFragment, SearchFunctionType } from '../utils'; -import { SearchFunctionMap } from '../utils/searchFunctions'; +import { CompletionItem, SuggestionsState, TypeaheadInput, TypeaheadOutput } from '../types/completion'; +import { SearchFunctionType, SearchFunctionMap } from '../utils/searchFunctions'; +import { makeFragment } from '../utils/slate'; import TOKEN_MARK from './slate-prism/TOKEN_MARK'; diff --git a/packages/grafana-ui/src/themes/index.ts b/packages/grafana-ui/src/themes/index.ts deleted file mode 100644 index 31d4208cf8a..00000000000 --- a/packages/grafana-ui/src/themes/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -// @deprecated use ThemeContext from @grafana/data instead -export { ThemeContext } from '@grafana/data'; - -export { withTheme, withTheme2, useTheme, useTheme2, useStyles, useStyles2, mockThemeContext } from './ThemeContext'; -export { getTheme, mockTheme } from './getTheme'; -export { stylesFactory } from './stylesFactory'; -export { GlobalStyles } from './GlobalStyles/GlobalStyles'; - -import * as styleMixins from './mixins'; -export { styleMixins }; diff --git a/packages/grafana-ui/src/themes/selectThemeVariant.test.ts b/packages/grafana-ui/src/themes/selectThemeVariant.test.ts index 974e3cc8889..ad3dbc87890 100644 --- a/packages/grafana-ui/src/themes/selectThemeVariant.test.ts +++ b/packages/grafana-ui/src/themes/selectThemeVariant.test.ts @@ -1,9 +1,8 @@ import { GrafanaThemeType } from '@grafana/data'; +import { mockTheme } from './getTheme'; import { selectThemeVariant } from './selectThemeVariant'; -import { mockTheme } from './index'; - const lightThemeMock = { color: { red: '#ff0000', diff --git a/packages/grafana-ui/src/types/completion.ts b/packages/grafana-ui/src/types/completion.ts index 18f0d9c4d70..7cdbe473920 100644 --- a/packages/grafana-ui/src/types/completion.ts +++ b/packages/grafana-ui/src/types/completion.ts @@ -1,7 +1,7 @@ import { Value } from 'slate'; import { Editor } from 'slate-react'; -import { SearchFunctionType } from '../utils'; +import { SearchFunctionType } from '../utils/searchFunctions'; /** * @internal diff --git a/packages/grafana-ui/src/types/index.ts b/packages/grafana-ui/src/types/index.ts deleted file mode 100644 index 9d3f5dd1e14..00000000000 --- a/packages/grafana-ui/src/types/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -export * from './theme'; -export * from './input'; -export * from './completion'; -export * from './forms'; -export * from './icon'; -export * from './select'; -export * from './size'; -export * from './interactiveTable'; diff --git a/packages/grafana-ui/src/utils/fuzzy.ts b/packages/grafana-ui/src/utils/fuzzy.ts index 418a9efe182..b54bf413683 100644 --- a/packages/grafana-ui/src/utils/fuzzy.ts +++ b/packages/grafana-ui/src/utils/fuzzy.ts @@ -1,6 +1,6 @@ import { last } from 'lodash'; -import { HighlightPart } from '../types'; +import { HighlightPart } from '../types/completion'; type FuzzyMatch = { /** diff --git a/packages/grafana-ui/src/utils/index.ts b/packages/grafana-ui/src/utils/index.ts deleted file mode 100644 index d71759bbbd2..00000000000 --- a/packages/grafana-ui/src/utils/index.ts +++ /dev/null @@ -1,24 +0,0 @@ -import * as DOMUtil from './dom'; // includes Element.closest polyfill -import * as ReactUtils from './reactUtils'; - -export * from './colors'; -export * from './validate'; -export * from './slate'; -export * from './dataLinks'; -export * from './tags'; -export * from './scrollbar'; -export * from './table'; -export * from './measureText'; -export * from './usePointerDistance'; -export * from './useForceUpdate'; -export { SearchFunctionType } from './searchFunctions'; - -export { DOMUtil }; - -export { createLogger } from './logger'; -export { attachDebugger } from './debug'; -export * from './nodeGraph'; -export { fuzzyMatch } from './fuzzy'; -export { logOptions } from './logOptions'; - -export { ReactUtils }; diff --git a/packages/grafana-ui/src/utils/searchFunctions.ts b/packages/grafana-ui/src/utils/searchFunctions.ts index 02cce0ff35f..5f291c51e15 100644 --- a/packages/grafana-ui/src/utils/searchFunctions.ts +++ b/packages/grafana-ui/src/utils/searchFunctions.ts @@ -1,4 +1,4 @@ -import { CompletionItem, SearchFunction } from '../types'; +import { CompletionItem, SearchFunction } from '../types/completion'; import { fuzzyMatch } from './fuzzy'; diff --git a/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx b/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx index 4537c9ab13a..ef3aad2bfd3 100644 --- a/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx +++ b/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/css'; import * as React from 'react'; -import { useTheme2 } from '../../themes'; +import { useTheme2 } from '../../themes/ThemeContext'; export interface Props { children?: React.ReactNode; diff --git a/packages/grafana-ui/src/utils/storybook/ExampleFrame.tsx b/packages/grafana-ui/src/utils/storybook/ExampleFrame.tsx index dedd9b91e37..63c5f07c672 100644 --- a/packages/grafana-ui/src/utils/storybook/ExampleFrame.tsx +++ b/packages/grafana-ui/src/utils/storybook/ExampleFrame.tsx @@ -4,7 +4,7 @@ import { ReactNode } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles2 } from '../../themes'; +import { useStyles2 } from '../../themes/ThemeContext'; interface ExampleFrameProps { children: ReactNode; diff --git a/packages/grafana-ui/src/utils/storybook/ThemedDocsContainer.tsx b/packages/grafana-ui/src/utils/storybook/ThemedDocsContainer.tsx index d6485671d84..3345372dcce 100644 --- a/packages/grafana-ui/src/utils/storybook/ThemedDocsContainer.tsx +++ b/packages/grafana-ui/src/utils/storybook/ThemedDocsContainer.tsx @@ -5,7 +5,7 @@ import * as React from 'react'; import { getThemeById } from '@grafana/data'; import { createStorybookTheme } from '../../../.storybook/storybookTheme'; -import { GlobalStyles } from '../../themes'; +import { GlobalStyles } from '../../themes/GlobalStyles/GlobalStyles'; type Props = { context: DocsContextProps; diff --git a/packages/grafana-ui/src/utils/storybook/icons.ts b/packages/grafana-ui/src/utils/storybook/icons.ts index 3474f8974ca..2e1557ce0bf 100644 --- a/packages/grafana-ui/src/utils/storybook/icons.ts +++ b/packages/grafana-ui/src/utils/storybook/icons.ts @@ -1,4 +1,4 @@ -import { getAvailableIcons } from '../../types'; +import { getAvailableIcons } from '../../types/icon'; export const iconOptions: Record = { None: undefined, diff --git a/packages/grafana-ui/src/utils/tooltipUtils.ts b/packages/grafana-ui/src/utils/tooltipUtils.ts index 821b9de5f7f..c02edbece4c 100644 --- a/packages/grafana-ui/src/utils/tooltipUtils.ts +++ b/packages/grafana-ui/src/utils/tooltipUtils.ts @@ -3,7 +3,7 @@ import { Placement } from '@floating-ui/react'; import { GrafanaTheme2 } from '@grafana/data'; -import { TooltipPlacement } from '../components/Tooltip'; +import { TooltipPlacement } from '../components/Tooltip/types'; export function getPlacement(placement?: TooltipPlacement): Placement { switch (placement) {