Storybook: Use bare specifier @grafana/ui in public stories (#26563)

packages/grafana-ui/.storybook/webpack.config.js

@@ -110,6 +110,8 @@ module.exports = ({ config, mode }) => {
   };
 
   config.resolve.extensions.push('.ts', '.tsx', '.mdx');
+  config.resolve.alias = config.resolve.alias || {};
+  config.resolve.alias['@grafana/ui'] = path.resolve(__dirname, '..');
 
   config.stats = {
     warningsFilter: /export .* was not found in/,

packages/grafana-ui/src/components/Badge/Badge.story.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { boolean, text, select } from '@storybook/addon-knobs';
-import { Badge, BadgeColor } from './Badge';
+import { Badge, BadgeColor } from '@grafana/ui';
 
 export default {
   title: 'Data Display/Badge',

packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx

@@ -1,6 +1,7 @@
 import { number, text } from '@storybook/addon-knobs';
-import { BarGauge, Props, BarGaugeDisplayMode } from './BarGauge';
+import { BarGauge, BarGaugeDisplayMode } from '@grafana/ui';
 import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data';
+import { Props } from './BarGauge';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 

packages/grafana-ui/src/components/BigValue/BigValue.story.tsx

@@ -1,5 +1,5 @@
 import { text, select, number, color } from '@storybook/addon-knobs';
-import { BigValue, BigValueColorMode, BigValueGraphMode, BigValueTextMode } from './BigValue';
+import { BigValue, BigValueColorMode, BigValueGraphMode, BigValueTextMode } from '@grafana/ui';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 

packages/grafana-ui/src/components/Button/Button.story.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { select, text, boolean } from '@storybook/addon-knobs';
-import { Button, ButtonVariant } from './Button';
+import { Button, ButtonVariant } from '@grafana/ui';
 import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { getIconKnob } from '../../utils/storybook/knobs';
 import mdx from './Button.mdx';

packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { withKnobs, text, boolean, object } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { ButtonCascader } from './ButtonCascader';
+import { ButtonCascader } from '@grafana/ui';
 
 export default {
   title: 'Forms/Cascader/ButtonCascader',

packages/grafana-ui/src/components/Cascader/Cascader.story.tsx

@@ -1,7 +1,6 @@
 import { text } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { Cascader } from './Cascader';
-// import { Button } from '../Button';
+import { Cascader } from '@grafana/ui';
 import mdx from './Cascader.mdx';
 import React from 'react';
 

packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { boolean } from '@storybook/addon-knobs';
-import { SeriesColorPicker, ColorPicker } from './ColorPicker';
+import { SeriesColorPicker, ColorPicker } from '@grafana/ui';
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';

packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { text, boolean, select } from '@storybook/addon-knobs';
-import { ConfirmButton } from './ConfirmButton';
+import { ConfirmButton } from '@grafana/ui';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { action } from '@storybook/addon-actions';
 import { Button } from '../Button';

packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { text, boolean, select } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { ConfirmModal } from './ConfirmModal';
+import { ConfirmModal } from '@grafana/ui';
 import mdx from './ConfirmModal.mdx';
 
 const getKnobs = () => {

packages/grafana-ui/src/components/Drawer/Drawer.story.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { text } from '@storybook/addon-knobs';
-import { Drawer } from './Drawer';
+import { Drawer } from '@grafana/ui';
 import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from './Drawer.mdx';

packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { FileUpload } from './FileUpload';
+import { FileUpload } from '@grafana/ui';
 import mdx from './FileUpload.mdx';
 import { useSize } from '../../utils/storybook/useSize';
 import { ComponentSize } from '../../types/size';

packages/grafana-ui/src/components/Forms/Field.story.tsx

@@ -1,8 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import { boolean, number, text } from '@storybook/addon-knobs';
-import { Field } from './Field';
-import { Input } from '../Input/Input';
-import { Switch } from '../Switch/Switch';
+import { Field, Input, Switch } from '@grafana/ui';
 import mdx from './Field.mdx';
 
 export default {

packages/grafana-ui/src/components/Forms/FieldSet.story.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { FieldSet } from './FieldSet';
-import { Form } from './Form';
-import { Field } from './Field';
-import { Input } from '../Input/Input';
+import { Input, Form, FieldSet, Field } from '@grafana/ui';
 import mdx from './FieldSet.mdx';
 import { Button } from '../Button';
 

packages/grafana-ui/src/components/Forms/Form.story.tsx

@@ -1,22 +1,23 @@
 import React, { useState } from 'react';
-import { Legend } from './Legend';
 
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
-import { Field } from './Field';
-import { Input } from '../Input/Input';
-import { Button } from '../Button';
-import { Form } from './Form';
-import { Switch } from '../Switch/Switch';
-import { Checkbox } from './Checkbox';
-
-import { RadioButtonGroup } from './RadioButtonGroup/RadioButtonGroup';
-import { Select } from '../Select/Select';
-import { InputControl } from '../InputControl';
 import mdx from './Form.mdx';
 import { ValidateResult } from 'react-hook-form';
 import { boolean } from '@storybook/addon-knobs';
-import { TextArea } from '../TextArea/TextArea';
+import {
+  Field,
+  Legend,
+  Input,
+  Button,
+  Form,
+  Switch,
+  Checkbox,
+  Select,
+  InputControl,
+  TextArea,
+  RadioButtonGroup,
+} from '@grafana/ui';
 
 export default {
   title: 'Forms/Example forms',

packages/grafana-ui/src/components/Forms/Legend.story.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { text } from '@storybook/addon-knobs';
 
-import { Legend } from './Legend';
+import { Legend } from '@grafana/ui';
 import mdx from './Legend.mdx';
 
 const getKnobs = () => {

packages/grafana-ui/src/components/Graph/Graph.story.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Graph } from './Graph';
+import { Graph } from '@grafana/ui';
 import Chart from '../Chart';
 import { dateTime, ArrayVector, FieldType, GraphSeriesXY, FieldColorMode } from '@grafana/data';
 import { select } from '@storybook/addon-knobs';

packages/grafana-ui/src/components/Icon/Icon.story.tsx

@@ -1,9 +1,7 @@
 import React, { ChangeEvent, useState } from 'react';
 import { css } from 'emotion';
 
-import { Input } from '../Input/Input';
-import { Field } from '../Forms/Field';
-import { Icon } from './Icon';
+import { Input, Field, Icon } from '@grafana/ui';
 import { getAvailableIcons, IconName } from '../../types';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { useTheme, selectThemeVariant } from '../../themes';

packages/grafana-ui/src/components/IconButton/IconButton.story.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { css } from 'emotion';
-import { IconButton } from './IconButton';
+import { IconButton } from '@grafana/ui';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { useTheme } from '../../themes/ThemeContext';
 import { GrafanaTheme } from '@grafana/data';
@@ -33,7 +33,7 @@ export const simple = () => {
 };
 
 function renderScenario(surface: string, theme: GrafanaTheme, sizes: IconSize[], icons: IconName[]) {
-  let bg: string = 'red';
+  let bg = 'red';
 
   switch (surface) {
     case 'dashboard':

packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { number } from '@storybook/addon-knobs';
-import { InfoBox } from './InfoBox';
-import { FeatureInfoBox } from './FeatureInfoBox';
+import { InfoBox, FeatureInfoBox } from '@grafana/ui';
 import { FeatureState } from '@grafana/data';
 
 export default {

packages/grafana-ui/src/components/Input/Input.story.tsx

@@ -1,13 +1,10 @@
 import React, { useState } from 'react';
 import { boolean, text, select, number } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { Input } from './Input';
-import { Button } from '../Button';
 import mdx from './Input.mdx';
 import { getAvailableIcons, IconName } from '../../types';
 import { KeyValue } from '@grafana/data';
-import { Icon } from '../Icon/Icon';
-import { Field } from '../Forms/Field';
+import { Field, Icon, Button, Input } from '@grafana/ui';
 
 export default {
   title: 'Forms/Input',

packages/grafana-ui/src/components/Layout/Layout.story.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { VerticalGroup, HorizontalGroup, Layout } from './Layout';
-import { Button } from '../Button';
+import { Layout } from './Layout';
+import { Button, VerticalGroup, HorizontalGroup } from '@grafana/ui';
 import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
 import { select } from '@storybook/addon-knobs';
 import mdx from './Layout.mdx';

packages/grafana-ui/src/components/Legend/Legend.story.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { LegendList, LegendPlacement, LegendItem, LegendTable, generateLegendItems } from './Legend';
+import { generateLegendItems } from './Legend';
+import { LegendList, LegendPlacement, LegendItem, LegendTable } from '@grafana/ui';
 import { number, select, text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { GraphLegendListItem, GraphLegendTableRow, GraphLegendItemProps } from '../Graph/GraphLegendItem';

packages/grafana-ui/src/components/Modal/Modal.story.tsx

@@ -3,10 +3,7 @@ import { oneLineTrim } from 'common-tags';
 import { text, boolean } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
-import { Modal } from './Modal';
-import { Icon } from '../Icon/Icon';
-import { ModalTabsHeader } from './ModalTabsHeader';
-import { TabContent } from '../Tabs/TabContent';
+import { Modal, Icon, TabContent, ModalTabsHeader } from '@grafana/ui';
 import mdx from './Modal.mdx';
 
 const getKnobs = () => {

packages/grafana-ui/src/components/Pagination/Pagination.story.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { number } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { Pagination } from './Pagination';
+import { Pagination } from '@grafana/ui';
 import mdx from './Pagination.mdx';
 
 export const WithPages = () => {

packages/grafana-ui/src/components/PieChart/PieChart.story.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { number, object, select } from '@storybook/addon-knobs';
-import { PieChart, PieChartType } from './PieChart';
+import { PieChart, PieChartType } from '@grafana/ui';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 export default {

packages/grafana-ui/src/components/QueryField/QueryField.story.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { QueryField } from './QueryField';
+import { QueryField } from '@grafana/ui';
 
 export default {
   title: 'Data Source/QueryField',

packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.story.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
-import { RefreshPicker } from './RefreshPicker';
+import { RefreshPicker } from '@grafana/ui';
 
 export default {
   title: 'Pickers and Editors/RefreshPicker',

packages/grafana-ui/src/components/Segment/Segment.story.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Segment } from './';
-import { Icon } from '../Icon/Icon';
+import { Segment, Icon } from '@grafana/ui';
 
 const AddButton = (
   <a className="gf-form-label query-part">

packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { SelectableValue } from '@grafana/data';
-import { SegmentAsync } from './';
-import { Icon } from '../Icon/Icon';
+import { SegmentAsync, Icon } from '@grafana/ui';
 
 const AddButton = (
   <a className="gf-form-label query-part">

packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { SegmentInput } from '.';
-import { Icon } from '../Icon/Icon';
+import { SegmentInput, Icon } from '@grafana/ui';
 
 const SegmentFrame = ({ children }: any) => (
   <>

packages/grafana-ui/src/components/Select/Select.story.tsx

@@ -1,12 +1,9 @@
 import React, { useState } from 'react';
-import { Select, AsyncSelect, MultiSelect, AsyncMultiSelect } from './Select';
 import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { SelectableValue } from '@grafana/data';
+import { Icon, Button, ButtonSelect, Select, AsyncSelect, MultiSelect, AsyncMultiSelect } from '@grafana/ui';
 import { getAvailableIcons, IconName } from '../../types';
 import { select, boolean, number } from '@storybook/addon-knobs';
-import { Icon } from '../Icon/Icon';
-import { Button } from '../Button';
-import { ButtonSelect } from './ButtonSelect';
 import { getIconKnob } from '../../utils/storybook/knobs';
 import kebabCase from 'lodash/kebabCase';
 import { generateOptions } from './mockOptions';

packages/grafana-ui/src/components/Slider/Slider.story.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Slider } from './Slider';
+import { Slider } from '@grafana/ui';
 import { select, number, boolean } from '@storybook/addon-knobs';
 
 export default {

packages/grafana-ui/src/components/Spinner/Spinner.story.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { Spinner } from './Spinner';
+import { Spinner } from '@grafana/ui';
 
 export default {
   title: 'Visualizations/Spinner',

packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { StatsPicker } from './StatsPicker';
+import { StatsPicker } from '@grafana/ui';
 import { text, boolean } from '@storybook/addon-knobs';
 
 const getKnobs = () => {

packages/grafana-ui/src/components/Switch/Switch.story.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import { boolean } from '@storybook/addon-knobs';
 import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { Switch } from './Switch';
+import { Switch } from '@grafana/ui';
 import mdx from './Switch.mdx';
 
 export default {

packages/grafana-ui/src/components/Table/Table.story.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { merge } from 'lodash';
-import { Table } from './Table';
+import { Table } from '@grafana/ui';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { number } from '@storybook/addon-knobs';
 import { useTheme } from '../../themes';

packages/grafana-ui/src/components/Tabs/Tabs.story.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
-import { TabsBar } from './TabsBar';
-import { Tab } from './Tab';
-import { TabContent } from './TabContent';
+import { TabsBar, Tab, TabContent } from '@grafana/ui';
 
 export default {
   title: 'Layout/Tabs',

packages/grafana-ui/src/components/Tags/Tag.story.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Tag } from './Tag';
+import { Tag } from '@grafana/ui';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from './Tag.mdx';
 

packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
-import { TagsInput } from './TagsInput';
+import { TagsInput } from '@grafana/ui';
 
 const mockTags = ['Some', 'Tags', 'With', 'This', 'New', 'Component'];
 

packages/grafana-ui/src/components/TextArea/TextArea.story.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextArea } from './TextArea';
+import { TextArea } from '@grafana/ui';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { boolean, number, text } from '@storybook/addon-knobs';
 import mdx from './TextArea.mdx';

packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.story.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 
-import { TimeOfDayPicker } from './TimeOfDayPicker';
+import { TimeOfDayPicker } from '@grafana/ui';
 import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { dateTime } from '@grafana/data';

packages/grafana-ui/src/components/TimePicker/TimeRangeInput.story.tsx

@@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions';
 import { dateTime, TimeFragment } from '@grafana/data';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
-import { TimeRangeInput } from './TimeRangeInput';
+import { TimeRangeInput } from '@grafana/ui';
 import mdx from './TimeRangeInput.mdx';
 
 export default {

packages/grafana-ui/src/components/TimePicker/TimeRangePicker.story.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 
-import { TimeRangePicker } from './TimeRangePicker';
+import { TimeRangePicker } from '@grafana/ui';
 import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { TimeFragment, dateTime } from '@grafana/data';

packages/grafana-ui/src/components/TimePicker/TimeZonePicker.story.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 
-import { TimeZonePicker } from './TimeZonePicker';
+import { TimeZonePicker } from '@grafana/ui';
 import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 

packages/grafana-ui/src/components/UnitPicker/UnitPicker.story.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { UnitPicker } from './UnitPicker';
+import { UnitPicker } from '@grafana/ui';
 import mdx from './UnitPicker.mdx';
 
 export default {

packages/grafana-ui/src/components/ValuePicker/ValuePicker.story.tsx

@@ -1,6 +1,6 @@
 import { text } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { ValuePicker } from './ValuePicker';
+import { ValuePicker } from '@grafana/ui';
 import React from 'react';
 import { generateOptions } from '../Select/mockOptions';
 

packages/grafana-ui/tsconfig.json

@@ -4,7 +4,8 @@
     "declarationDir": "dist",
     "outDir": "compiled",
     "paths": {
-      "@grafana/slate-react": ["slate-react"]
+      "@grafana/slate-react": ["slate-react"],
+      "@grafana/ui": ["."]
     },
     "rootDirs": [".", "stories"],
     "typeRoots": ["node_modules/@types"]