* feat: Add new picker to DashNavTimeControls * chore: noImplicitAny limit reached * chore: noImplicityAny fix * chore: Add momentUtc helper to avoid the isUtc conditionals * chore: Move getRaw from Explore's time picker to grafana/ui utils and rename to getRawRange * feat: Use helper functions to convert utc to browser time * fix: Dont Select current value when pressing tab when using Time Picker * fix: Add tabIndex to time range inputs so tab works smoothly and prevent mouseDown event to propagate to react-select * fix: Add spacing to custom range labels * fix: Updated snapshot * fix: Re-adding getRaw() temporary to fix the build * fix: Disable scroll event in Popper when we're using the TimePicker so the popup wont "follow" the menu * fix: Move all "Last xxxx" quick ranges to the menu and show a "UTC" text when applicable * fix: Add zoom functionality * feat: Add logic to mark selected option as active * fix: Add tooltip to zoom button * fix: lint fix after rebase * chore: Remove old time picker from DashNav * TimePicker: minor design update * chore: Move all time picker quick ranges to the menu * fix: Remove the popover border-right, since the quick ranges are gone * chore: Remove function not in use * Fix: Close time picker on resize event * Fix: Remove border bottom * Fix: Use fa icons on prev/next arrows * Fix: Pass ref from TimePicker to TimePickerOptionGroup so the popover will align as it should * Fix: time picker ui adjustments to get better touch area on buttons * Fix: Dont increase line height on large screens * TimePicker: style updates * Fix: Add more prominent colors for selected dates and fade out dates in previous/next month * TimePicker: style updates2 * TimePicker: Big refactorings and style changes * Removed use of Popper not sure we need that here? * Made active selected item in the list have the "selected" checkmark * Changed design of popover * Changed design of and implementation of the Custom selection in the dropdown it did not feel like a item you could select like the rest now the list is just a normal list * TimePicker: Refactoring & style changes * TimePicker: use same date format everywhere * TimePicker: Calendar style updates * TimePicker: fixed unit test * fixed unit test * TimeZone: refactoring time zone type * TimePicker: refactoring * TimePicker: finally to UTC to work * TimePicker: better way to handle calendar utc dates * TimePicker: Fixed tooltip issues * Updated snapshot * TimePicker: moved tooltip from DashNavControls into TimePicker |
||
---|---|---|
.. | ||
.storybook | ||
src | ||
CHANGELOG.md | ||
index.js | ||
package.json | ||
README.md | ||
rollup.config.ts | ||
tsconfig.build.json | ||
tsconfig.json | ||
tslint.json |
Grafana UI components library
@grafana/ui is a collection of components used by Grafana
Our goal is to deliver Grafana's common UI elements for plugins developers and contributors.
See package source for more details.
Installation
yarn add @grafana/ui
npm install @grafana/ui
Development
For development purposes we suggest using yarn link
that will create symlink to @grafana/ui lib. To do so navigate to packages/grafana-ui
and run yarn link
. Then, navigate to your project and run yarn link @grafana/ui
to use the linked version of the lib. To unlink follow the same procedure, but use yarn unlink
instead.
Building @grafana/ui
To build @grafana/ui run npm run gui:build
script from Grafana repository root. The build will be created in packages/grafana-ui/dist
directory. Following steps from Development you can test built package.
Releasing new version
To release new version run npm run gui:release
script from Grafana repository root. The script will prepare the distribution package as well as prompt you to bump library version and publish it to the NPM registry.
Automatic version bump
When running npm run gui:release
package.json file will be automatically updated. Also, package.json file will be commited and pushed to upstream branch.
Manual version bump
To use package.json
defined version run npm run gui:release --usePackageJsonVersion
from Grafana repository root.
Preparing release package without publishing to NPM registry
For testing purposes there is npm run gui:releasePrepare
task that prepares distribution package without publishing it to the NPM registry.
V1 release process overview
- Package is compiled with TSC. Typings are created in
/dist
directory, and the compiled js lands in/compiled
dir - Rollup creates a CommonJS package based on compiled sources, and outputs it to
/dist
directory - Readme, changelog and index.js files are moved to
/dist
directory - Package version is bumped in both
@grafana/ui
package dir and in dist directory. - Version commit is created and pushed to master branch
- Package is published to npm
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.