diff --git a/packages/grafana-ui/.storybook/webpack.config.js b/packages/grafana-ui/.storybook/webpack.config.js index b20437d5b62..bfdf4d0f3cc 100644 --- a/packages/grafana-ui/.storybook/webpack.config.js +++ b/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/, diff --git a/packages/grafana-ui/src/components/Badge/Badge.story.tsx b/packages/grafana-ui/src/components/Badge/Badge.story.tsx index 5c2e1f15e94..2ce4585b2fc 100644 --- a/packages/grafana-ui/src/components/Badge/Badge.story.tsx +++ b/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', diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx index 5a8364119b5..51dcc8c9fcc 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx index 943a7026e27..8ec60ce3277 100644 --- a/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/Button/Button.story.tsx b/packages/grafana-ui/src/components/Button/Button.story.tsx index ca37314fc5d..513628cd284 100644 --- a/packages/grafana-ui/src/components/Button/Button.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx index 0813313a152..7e92c5dcf0b 100644 --- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx +++ b/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', diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx index ab5dd1a560a..0ae80eea3e3 100644 --- a/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx index bdb85d07867..0d25039ecc2 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx index 1627e3e1253..fdd7526b188 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx index 3e6fa9f1407..98e97ad6fdc 100644 --- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx +++ b/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 = () => { diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx index 26a4b59d9d1..b537035ad2c 100644 --- a/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx b/packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx index 398295d3e43..8937b07bad0 100644 --- a/packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/Forms/Field.story.tsx b/packages/grafana-ui/src/components/Forms/Field.story.tsx index 41aeaed495d..9c3d7ce53e1 100644 --- a/packages/grafana-ui/src/components/Forms/Field.story.tsx +++ b/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 { diff --git a/packages/grafana-ui/src/components/Forms/FieldSet.story.tsx b/packages/grafana-ui/src/components/Forms/FieldSet.story.tsx index a269af80169..38420169f69 100644 --- a/packages/grafana-ui/src/components/Forms/FieldSet.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/Forms/Form.story.tsx b/packages/grafana-ui/src/components/Forms/Form.story.tsx index 001c3d70c86..5d415902b58 100644 --- a/packages/grafana-ui/src/components/Forms/Form.story.tsx +++ b/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', diff --git a/packages/grafana-ui/src/components/Forms/Legend.story.tsx b/packages/grafana-ui/src/components/Forms/Legend.story.tsx index 5708da1fccb..9f6b8c3035a 100644 --- a/packages/grafana-ui/src/components/Forms/Legend.story.tsx +++ b/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 = () => { diff --git a/packages/grafana-ui/src/components/Graph/Graph.story.tsx b/packages/grafana-ui/src/components/Graph/Graph.story.tsx index 8af308fc78e..f9b08ba3d64 100644 --- a/packages/grafana-ui/src/components/Graph/Graph.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/Icon/Icon.story.tsx b/packages/grafana-ui/src/components/Icon/Icon.story.tsx index 917b6555e5a..4d8873fbe55 100644 --- a/packages/grafana-ui/src/components/Icon/Icon.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx index 5f1dad0bfaf..79c253952ae 100644 --- a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx +++ b/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': diff --git a/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx b/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx index d0ec39b3c69..10243280d9c 100644 --- a/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx +++ b/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 { diff --git a/packages/grafana-ui/src/components/Input/Input.story.tsx b/packages/grafana-ui/src/components/Input/Input.story.tsx index 65051fe00f8..75f20dc09f3 100644 --- a/packages/grafana-ui/src/components/Input/Input.story.tsx +++ b/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', diff --git a/packages/grafana-ui/src/components/Layout/Layout.story.tsx b/packages/grafana-ui/src/components/Layout/Layout.story.tsx index 5d2df8ad939..41f9ac7742f 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 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'; diff --git a/packages/grafana-ui/src/components/Legend/Legend.story.tsx b/packages/grafana-ui/src/components/Legend/Legend.story.tsx index bef97672904..6fca9d13b92 100644 --- a/packages/grafana-ui/src/components/Legend/Legend.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/Modal/Modal.story.tsx b/packages/grafana-ui/src/components/Modal/Modal.story.tsx index b15c9873845..0222507dc5e 100644 --- a/packages/grafana-ui/src/components/Modal/Modal.story.tsx +++ b/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 = () => { diff --git a/packages/grafana-ui/src/components/Pagination/Pagination.story.tsx b/packages/grafana-ui/src/components/Pagination/Pagination.story.tsx index 42bb475ad19..3d57f9a0d2d 100644 --- a/packages/grafana-ui/src/components/Pagination/Pagination.story.tsx +++ b/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 = () => { diff --git a/packages/grafana-ui/src/components/PieChart/PieChart.story.tsx b/packages/grafana-ui/src/components/PieChart/PieChart.story.tsx index 761afb95d4d..7f66f453512 100644 --- a/packages/grafana-ui/src/components/PieChart/PieChart.story.tsx +++ b/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 { diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.story.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.story.tsx index 98abf95b34a..de2ffe3e60e 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 React from 'react'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; -import { QueryField } from './QueryField'; +import { QueryField } from '@grafana/ui'; export default { title: 'Data Source/QueryField', diff --git a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.story.tsx b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.story.tsx index f4ec91d6827..75012972b5a 100644 --- a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.story.tsx +++ b/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', diff --git a/packages/grafana-ui/src/components/Segment/Segment.story.tsx b/packages/grafana-ui/src/components/Segment/Segment.story.tsx index 5118705f3f1..3da2a4b5edd 100644 --- a/packages/grafana-ui/src/components/Segment/Segment.story.tsx +++ b/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 = ( diff --git a/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx b/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx index 56482d8bcb7..5ced7790dd2 100644 --- a/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx +++ b/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 = ( diff --git a/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx b/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx index f6d446e7802..848bc106504 100644 --- a/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx +++ b/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) => ( <> diff --git a/packages/grafana-ui/src/components/Select/Select.story.tsx b/packages/grafana-ui/src/components/Select/Select.story.tsx index cafb86f2227..e9029d14b2d 100644 --- a/packages/grafana-ui/src/components/Select/Select.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/Slider/Slider.story.tsx b/packages/grafana-ui/src/components/Slider/Slider.story.tsx index 48dd5ac1b55..3dc2fbf4725 100644 --- a/packages/grafana-ui/src/components/Slider/Slider.story.tsx +++ b/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 { diff --git a/packages/grafana-ui/src/components/Spinner/Spinner.story.tsx b/packages/grafana-ui/src/components/Spinner/Spinner.story.tsx index d9b77073ca0..a8b7e4ebcdd 100644 --- a/packages/grafana-ui/src/components/Spinner/Spinner.story.tsx +++ b/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', diff --git a/packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx b/packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx index e50f3546f5c..17e47ff07cc 100644 --- a/packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx +++ b/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 = () => { diff --git a/packages/grafana-ui/src/components/Switch/Switch.story.tsx b/packages/grafana-ui/src/components/Switch/Switch.story.tsx index da0aa0ac53b..66606a4028a 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.story.tsx +++ b/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 { diff --git a/packages/grafana-ui/src/components/Table/Table.story.tsx b/packages/grafana-ui/src/components/Table/Table.story.tsx index 92eba4fd293..b9c93210e87 100644 --- a/packages/grafana-ui/src/components/Table/Table.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/Tabs/Tabs.story.tsx b/packages/grafana-ui/src/components/Tabs/Tabs.story.tsx index f7279567f76..04552b8a8f9 100644 --- a/packages/grafana-ui/src/components/Tabs/Tabs.story.tsx +++ b/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', diff --git a/packages/grafana-ui/src/components/Tags/Tag.story.tsx b/packages/grafana-ui/src/components/Tags/Tag.story.tsx index 6eac33423d1..8c67194cd82 100644 --- a/packages/grafana-ui/src/components/Tags/Tag.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx index c9a9c07f4a1..ac585847cf4 100644 --- a/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx +++ b/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']; diff --git a/packages/grafana-ui/src/components/TextArea/TextArea.story.tsx b/packages/grafana-ui/src/components/TextArea/TextArea.story.tsx index a298d784995..f27a0892cae 100644 --- a/packages/grafana-ui/src/components/TextArea/TextArea.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.story.tsx b/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.story.tsx index e00f76de074..caf2f3acd6d 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangeInput.story.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangeInput.story.tsx index d426397b1f8..c83764345c5 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimeRangeInput.story.tsx +++ b/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 { diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.story.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.story.tsx index 945d4b8c3dd..7b38f482f10 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.story.tsx b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.story.tsx index 6c12222937c..a36b32d7280 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.story.tsx +++ b/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'; diff --git a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.story.tsx b/packages/grafana-ui/src/components/UnitPicker/UnitPicker.story.tsx index 1afde539b07..b8a2be377eb 100644 --- a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.story.tsx +++ b/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 { diff --git a/packages/grafana-ui/src/components/ValuePicker/ValuePicker.story.tsx b/packages/grafana-ui/src/components/ValuePicker/ValuePicker.story.tsx index 5968dac8b3a..a2b4362558d 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 { 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'; diff --git a/packages/grafana-ui/tsconfig.json b/packages/grafana-ui/tsconfig.json index a85c41e2baf..42f0a8b3a3d 100644 --- a/packages/grafana-ui/tsconfig.json +++ b/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"]