+ 
A guide to help you automate your Grafana setup & configuration.
- }}" class="nav-cards__item nav-cards__item--guide"> -Article on all the new cool features and enhancements in v5.4
+ }}" class="nav-cards__item nav-cards__item--guide"> +Article on all the new cool features and enhancements in v6.0
}}" class="nav-cards__item nav-cards__item--guide">
+
- 
+ 
+ 
diff --git a/docs/sources/project/building_from_source.md b/docs/sources/project/building_from_source.md
index eed05f05fa6..35e840d6e88 100644
--- a/docs/sources/project/building_from_source.md
+++ b/docs/sources/project/building_from_source.md
@@ -57,7 +57,7 @@ For this you need nodejs (v.6+).
```bash
npm install -g yarn
yarn install --pure-lockfile
-yarn watch
+yarn start
```
## Running Grafana Locally
@@ -83,7 +83,7 @@ go get github.com/Unknwon/bra
bra run
```
-You'll also need to run `yarn watch` to watch for changes to the front-end (typescript, html, sass)
+You'll also need to run `yarn start` to watch for changes to the front-end (typescript, html, sass)
### Running tests
@@ -145,4 +145,4 @@ Please contribute to the Grafana project and submit a pull request! Build new fe
## Logging in for the first time
To run Grafana open your browser and go to the default port http://localhost:3000 or the port you have configured.
-Then follow the instructions [here](/guides/getting_started/).
\ No newline at end of file
+Then follow the instructions [here](/guides/getting_started/).
diff --git a/latest.json b/latest.json
index dc83446f588..7e69b431a4d 100644
--- a/latest.json
+++ b/latest.json
@@ -1,4 +1,4 @@
{
- "stable": "5.4.3",
- "testing": "5.4.3"
+ "stable": "6.0.0",
+ "testing": "6.0.0"
}
diff --git a/package.json b/package.json
index ca3836e03e2..9e0b88804fd 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,12 @@
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.1.0",
"@rtsao/plugin-proposal-class-properties": "^7.0.1-patch.1",
+ "@types/chalk": "^2.2.0",
"@types/classnames": "^2.2.6",
+ "@types/commander": "^2.12.2",
"@types/d3": "^4.10.1",
"@types/enzyme": "^3.1.13",
+ "@types/inquirer": "^0.0.43",
"@types/jest": "^23.3.2",
"@types/jquery": "^1.10.35",
"@types/node": "^8.0.31",
@@ -36,13 +39,16 @@
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.4",
"babel-plugin-angularjs-annotate": "^0.9.0",
+ "chalk": "^2.4.2",
"clean-webpack-plugin": "^0.1.19",
+ "concurrently": "^4.1.0",
"css-loader": "^0.28.7",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"enzyme-to-json": "^3.3.4",
"es6-promise": "^3.0.2",
"es6-shim": "^0.35.3",
+ "execa": "^1.0.0",
"expect.js": "~0.2.0",
"expose-loader": "^0.7.3",
"file-loader": "^1.1.11",
@@ -66,6 +72,7 @@
"html-webpack-harddisk-plugin": "^0.2.0",
"html-webpack-plugin": "^3.2.0",
"husky": "^1.3.1",
+ "inquirer": "^6.2.2",
"jest": "^23.6.0",
"jest-date-mock": "^1.0.6",
"lint-staged": "^8.1.3",
@@ -79,6 +86,7 @@
"node-sass": "^4.11.0",
"npm": "^5.4.2",
"optimize-css-assets-webpack-plugin": "^4.0.2",
+ "ora": "^3.1.0",
"phantomjs-prebuilt": "^2.1.15",
"postcss-browser-reporter": "^0.5.0",
"postcss-loader": "^2.0.6",
@@ -88,14 +96,17 @@
"react-test-renderer": "^16.5.0",
"redux-mock-store": "^1.5.3",
"regexp-replace-loader": "^1.0.1",
+ "rimraf": "^2.6.3",
"sass-lint": "^1.10.2",
"sass-loader": "^7.0.1",
+ "semver": "^5.6.0",
"sinon": "1.17.6",
"style-loader": "^0.21.0",
"systemjs": "0.20.19",
"systemjs-plugin-css": "^0.1.36",
"ts-jest": "^23.10.4",
"ts-loader": "^5.1.0",
+ "ts-node": "^8.0.2",
"tslib": "^1.9.3",
"tslint": "^5.8.0",
"tslint-loader": "^3.5.3",
@@ -112,8 +123,10 @@
},
"scripts": {
"dev": "webpack --progress --colors --mode development --config scripts/webpack/webpack.dev.js",
- "start": "webpack-dev-server --progress --colors --mode development --config scripts/webpack/webpack.hot.js",
- "watch": "webpack --progress --colors --watch --mode development --config scripts/webpack/webpack.dev.js",
+ "start": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --theme",
+ "start:hot": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --hot --theme",
+ "start:ignoreTheme": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --hot",
+ "watch": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --theme -d watch,start",
"build": "grunt build",
"test": "grunt test",
"tslint": "tslint -c tslint.json --project tsconfig.json",
@@ -121,7 +134,10 @@
"jest": "jest --notify --watch",
"api-tests": "jest --notify --watch --config=tests/api/jest.js",
"storybook": "cd packages/grafana-ui && yarn storybook",
- "prettier:check": "prettier --list-different \"**/*.{ts,tsx,scss}\""
+ "themes:generate": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/generateSassVariableFiles.ts",
+ "prettier:check": "prettier --list-different \"**/*.{ts,tsx,scss}\"",
+ "gui:build": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --build",
+ "gui:release": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --release"
},
"husky": {
"hooks": {
@@ -168,6 +184,7 @@
"moment": "^2.22.2",
"mousetrap": "^1.6.0",
"mousetrap-global-bind": "^1.1.0",
+ "nodemon": "^1.18.10",
"prismjs": "^1.6.0",
"prop-types": "^15.6.2",
"rc-cascader": "^0.14.0",
diff --git a/packages/grafana-ui/CHANGELOG.md b/packages/grafana-ui/CHANGELOG.md
new file mode 100644
index 00000000000..cbc7afc2609
--- /dev/null
+++ b/packages/grafana-ui/CHANGELOG.md
@@ -0,0 +1,6 @@
+# 6.0.0-alpha.0 (2019-02-22)
+Version update to 6.0.0 to keep @grafana/ui version in sync with [Grafana](https://github.com/grafana/grafana)
+
+# 1.0.0-alpha.0 (2019-02-21)
+First public release
+
diff --git a/packages/grafana-ui/README.md b/packages/grafana-ui/README.md
index 1413965f7da..fa482003253 100644
--- a/packages/grafana-ui/README.md
+++ b/packages/grafana-ui/README.md
@@ -1,3 +1,17 @@
-# Grafana (WIP) shared component library
+# Grafana UI components library
-Used by internal & external plugins.
+@grafana/ui is a collection of components used by [Grafana](https://github.com/grafana/grafana)
+
+Our goal is to deliver Grafana's common UI elements for plugins developers and contributors.
+
+See [package source](https://github.com/grafana/grafana/tree/master/packages/grafana-ui) for more details.
+
+## Installation
+
+`yarn add @grafana/ui`
+
+`npm install @grafana/ui`
+
+## Versioning
+To limit the confusion related to @grafana/ui and Grafana versioning we decided to keep the major version in sync between those two.
+This means, that first version of @grafana/ui is taged with 6.0.0-alpha.0 to keep version in sync with Grafana 6.0 release.
diff --git a/packages/grafana-ui/index.js b/packages/grafana-ui/index.js
new file mode 100644
index 00000000000..d1a4363350e
--- /dev/null
+++ b/packages/grafana-ui/index.js
@@ -0,0 +1,7 @@
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+ module.exports = require('./index.production.js');
+} else {
+ module.exports = require('./index.development.js');
+}
diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json
index a0c76f711af..6c28c8abbd3 100644
--- a/packages/grafana-ui/package.json
+++ b/packages/grafana-ui/package.json
@@ -1,12 +1,19 @@
{
"name": "@grafana/ui",
- "version": "1.0.0",
- "description": "",
+ "version": "6.0.1-alpha.0",
+ "description": "Grafana Components Library",
+ "keywords": [
+ "typescript",
+ "react",
+ "react-component"
+ ],
"main": "src/index.ts",
"scripts": {
"tslint": "tslint -c tslint.json --project tsconfig.json",
"typecheck": "tsc --noEmit",
- "storybook": "start-storybook -p 9001 -c .storybook -s ../../public"
+ "storybook": "start-storybook -p 9001 -c .storybook -s ../../public",
+ "clean": "rimraf ./dist ./compiled",
+ "build": "rollup -c rollup.config.ts"
},
"author": "Grafana Labs",
"license": "Apache-2.0",
@@ -53,6 +60,13 @@
"react-docgen-typescript-loader": "^3.0.0",
"react-docgen-typescript-webpack-plugin": "^1.1.0",
"react-test-renderer": "^16.7.0",
+ "rollup": "^1.1.2",
+ "rollup-plugin-commonjs": "^9.2.0",
+ "rollup-plugin-node-resolve": "^4.0.0",
+ "rollup-plugin-sourcemaps": "^0.4.2",
+ "rollup-plugin-terser": "^4.0.4",
+ "rollup-plugin-typescript2": "^0.19.2",
+ "rollup-plugin-visualizer": "^0.9.2",
"typescript": "^3.2.2"
},
"resolutions": {
diff --git a/packages/grafana-ui/rollup.config.ts b/packages/grafana-ui/rollup.config.ts
new file mode 100644
index 00000000000..28f949d6e4e
--- /dev/null
+++ b/packages/grafana-ui/rollup.config.ts
@@ -0,0 +1,54 @@
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import sourceMaps from 'rollup-plugin-sourcemaps';
+import { terser } from 'rollup-plugin-terser';
+
+const pkg = require('./package.json');
+
+const libraryName = pkg.name;
+
+const buildCjsPackage = ({ env }) => {
+ return {
+ input: `compiled/index.js`,
+ output: [
+ {
+ file: `dist/index.${env}.js`,
+ name: libraryName,
+ format: 'cjs',
+ sourcemap: true,
+ exports: 'named',
+ globals: {
+ react: 'React',
+ 'prop-types': 'PropTypes',
+ },
+ },
+ ],
+ external: ['react', 'react-dom'],
+ plugins: [
+ commonjs({
+ include: /node_modules/,
+ namedExports: {
+ '../../node_modules/lodash/lodash.js': [
+ 'flatten',
+ 'find',
+ 'upperFirst',
+ 'debounce',
+ 'isNil',
+ 'isNumber',
+ 'flattenDeep',
+ 'map',
+ 'chunk',
+ 'sortBy',
+ 'uniqueId',
+ 'zip',
+ ],
+ '../../node_modules/react-color/lib/components/common': ['Saturation', 'Hue', 'Alpha'],
+ },
+ }),
+ resolve(),
+ sourceMaps(),
+ env === 'production' && terser(),
+ ],
+ };
+};
+export default [buildCjsPackage({ env: 'development' }), buildCjsPackage({ env: 'production' })];
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx
index 4c5df5314b8..9b5f5b98432 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { ColorPickerProps } from './ColorPicker';
+import { ColorPickerProps } from './ColorPickerPopover';
import tinycolor from 'tinycolor2';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
interface ColorInputState {
previousColor: string;
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
index 321323ac58b..183cbfed67f 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
@@ -1,32 +1,11 @@
import React, { Component, createRef } from 'react';
import { PopperController } from '../Tooltip/PopperController';
import { Popper } from '../Tooltip/Popper';
-import { ColorPickerPopover } from './ColorPickerPopover';
-import { Themeable } from '../../types';
+import { ColorPickerPopover, ColorPickerProps, ColorPickerChangeHandler } from './ColorPickerPopover';
import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
-import propDeprecationWarning from '../../utils/propDeprecationWarning';
+
import { withTheme } from '../../themes/ThemeContext';
-type ColorPickerChangeHandler = (color: string) => void;
-
-export interface ColorPickerProps extends Themeable {
- color: string;
- onChange: ColorPickerChangeHandler;
-
- /**
- * @deprecated Use onChange instead
- */
- onColorChange?: ColorPickerChangeHandler;
- enableNamedColors?: boolean;
- children?: JSX.Element;
-}
-
-export const warnAboutColorPickerPropsDeprecation = (componentName: string, props: ColorPickerProps) => {
- const { onColorChange } = props;
- if (onColorChange) {
- propDeprecationWarning(componentName, 'onColorChange', 'onChange');
- }
-};
export const colorPickerFactory =