From 56389b30ba026bbe84fe990dd6a2f39ecf975cc4 Mon Sep 17 00:00:00 2001 From: Serhii Kulykov Date: Tue, 16 Mar 2021 11:08:48 +0200 Subject: [PATCH] chore: add usage instructions to README (#75) --- README.md | 168 +++++++++++++++++++++++++++++++++++++++++++++--- vaadin-logo.svg | 1 + 2 files changed, 160 insertions(+), 9 deletions(-) create mode 100644 vaadin-logo.svg diff --git a/README.md b/README.md index 7891a2aac3b..91b05749a3f 100644 --- a/README.md +++ b/README.md @@ -1,39 +1,189 @@ -# Vaadin web components +

+ Vaadin logo

+

-This is a monorepo powered by [Lerna](https://github.com/lerna/lerna) that includes all Vaadin web components. +

Vaadin web components

-## Setup +
+ +[Vaadin components](https://vaadin.com/components) is an evolving set of high-quality web components for business web applications. + +[![Chrome](https://github.com/vaadin/vaadin-web-components/actions/workflows/chrome.yml/badge.svg)](https://github.com/vaadin/vaadin-web-components/actions/workflows/chrome.yml) +[![Firefox](https://github.com/vaadin/vaadin-web-components/actions/workflows/firefox.yml/badge.svg)](https://github.com/vaadin/vaadin-web-components/actions/workflows/firefox.yml) +[![WebKit](https://github.com/vaadin/vaadin-web-components/actions/workflows/webkit.yml/badge.svg)](https://github.com/vaadin/vaadin-web-components/actions/workflows/webkit.yml) +[![Follow on Twitter](https://img.shields.io/twitter/follow/vaadin.svg?label=follow+vaadin)](https://twitter.com/vaadin) +[![Discord](https://discordapp.com/api/guilds/732335336448852018/widget.png)](https://vaad.in/chat) +
+ +## Installation + +Install the components that you need from npm: + +```sh +npm install @vaadin/vaadin-grid +``` + +## Usage + +[Live demo →](https://webcomponents.dev/edit/JZcKP3kkHcJIgiCaI818/www/index.html) + +Import the component's JavaScript module, use the component in your HTML, and control it with JavaScript: + +```html + + + + + Vaadin example + + + + + + + + + + + + + + +``` + +Serve your HTML with a development server that supports bare module specifiers, such as [`@web/dev-server`](https://modern-web.dev/docs/dev-server/overview/): + +```sh +npm i -g @web/dev-server +web-dev-server --node-resolve --open +``` + +## Components + +This project contains components for Vaadin 20+. Please see individual repositories for older Vaadin versions. + +### Core Components + +The components below are licensed under the Apache License 2.0. + +| Component | npm version | Issues | +|-----------|--------------|--------------------| +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-accordion) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-accordion/next)](https://www.npmjs.com/package/@vaadin/vaadin-accordion) | [Issues](https://github.com/vaadin/vaadin-accordion/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-app-layout) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-app-layout/next)](https://www.npmjs.com/package/@vaadin/vaadin-app-layout) | [Issues](https://github.com/vaadin/vaadin-app-layout/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-avatar) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-avatar/next)](https://www.npmjs.com/package/@vaadin/vaadin-avatar) | [Issues](https://github.com/vaadin/vaadin-avatar/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-button) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-button/next)](https://www.npmjs.com/package/@vaadin/vaadin-button) | [Issues](https://github.com/vaadin/vaadin-button/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-checkbox) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-checkbox/next)](https://www.npmjs.com/package/@vaadin/vaadin-checkbox) | [Issues](https://github.com/vaadin/vaadin-checkbox/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-combo-box) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-combo-box/next)](https://www.npmjs.com/package/@vaadin/vaadin-combo-box) | [Issues](https://github.com/vaadin/vaadin-combo-box/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-context-menu) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-context-menu/next)](https://www.npmjs.com/package/@vaadin/vaadin-context-menu) | [Issues](https://github.com/vaadin/vaadin-context-menu/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-custom-field) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-custom-field/next)](https://www.npmjs.com/package/@vaadin/vaadin-custom-field) | [Issues](https://github.com/vaadin/vaadin-custom-field/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-date-picker) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-date-picker/next)](https://www.npmjs.com/package/@vaadin/vaadin-date-picker) | [Issues](https://github.com/vaadin/vaadin-date-picker/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-date-time-picker) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-date-time-picker/next)](https://www.npmjs.com/package/@vaadin/vaadin-date-time-picker) | [Issues](https://github.com/vaadin/vaadin-date-time-picker/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-details) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-details/next)](https://www.npmjs.com/package/@vaadin/vaadin-details) | [Issues](https://github.com/vaadin/vaadin-details/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-dialog) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-dialog/next)](https://www.npmjs.com/package/@vaadin/vaadin-dialog) | [Issues](https://github.com/vaadin/vaadin-dialog/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-form-layout) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-form-layout/next)](https://www.npmjs.com/package/@vaadin/vaadin-form-layout) | [Issues](https://github.com/vaadin/vaadin-form-layout/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-grid) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-grid/next)](https://www.npmjs.com/package/@vaadin/vaadin-grid) | [Issues](https://github.com/vaadin/vaadin-grid/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-icons) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-icons/next)](https://www.npmjs.com/package/@vaadin/vaadin-icons) | [Issues](https://github.com/vaadin/vaadin-icons/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-item) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-item/next)](https://www.npmjs.com/package/@vaadin/vaadin-item) | [Issues](https://github.com/vaadin/vaadin-item/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-list-box) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-list-box/next)](https://www.npmjs.com/package/@vaadin/vaadin-list-box) | [Issues](https://github.com/vaadin/vaadin-list-box/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-login) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-login/next)](https://www.npmjs.com/package/@vaadin/vaadin-login) | [Issues](https://github.com/vaadin/vaadin-login/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-menu-bar) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-menu-bar/next)](https://www.npmjs.com/package/@vaadin/vaadin-menu-bar) | [Issues](https://github.com/vaadin/vaadin-menu-bar/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-messages) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-messages/next)](https://www.npmjs.com/package/@vaadin/vaadin-messages) | [Issues](https://github.com/vaadin/vaadin-messages/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-notification) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-notification/next)](https://www.npmjs.com/package/@vaadin/vaadin-notification) | [Issues](https://github.com/vaadin/vaadin-notification/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-ordered-layout) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-ordered-layout/next)](https://www.npmjs.com/package/@vaadin/vaadin-ordered-layout) | [Issues](https://github.com/vaadin/vaadin-ordered-layout/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-progress-bar) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-progress-bar/next)](https://www.npmjs.com/package/@vaadin/vaadin-progress-bar) | [Issues](https://github.com/vaadin/vaadin-progress-bar/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-radio-button) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-radio-button/next)](https://www.npmjs.com/package/@vaadin/vaadin-radio-button) | [Issues](https://github.com/vaadin/vaadin-radio-button/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-select) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-select/next)](https://www.npmjs.com/package/@vaadin/vaadin-select) | [Issues](https://github.com/vaadin/vaadin-select/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-split-layout) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-split-layout/next)](https://www.npmjs.com/package/@vaadin/vaadin-split-layout) | [Issues](https://github.com/vaadin/vaadin-split-layout/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-tabs) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-tabs/next)](https://www.npmjs.com/package/@vaadin/vaadin-tabs) | [Issues](https://github.com/vaadin/vaadin-tabs/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-text-field) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-text-field/next)](https://www.npmjs.com/package/@vaadin/vaadin-text-field) | [Issues](https://github.com/vaadin/vaadin-text-field/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-time-picker) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-time-picker/next)](https://www.npmjs.com/package/@vaadin/vaadin-time-picker) | [Issues](https://github.com/vaadin/vaadin-time-picker/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-upload) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-upload/next)](https://www.npmjs.com/package/@vaadin/vaadin-upload) | [Issues](https://github.com/vaadin/vaadin-upload/issues) + +### Pro Components + +The components below are licensed under [CVDL 4.0 license](https://vaadin.com/license/cvdl-4.0) and available as part of the [Vaadin Pro Subscription](https://vaadin.com/pricing). + +| Component | npm version | Issues | +|-----------|--------------|--------------------| +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-board) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-board/next)](https://www.npmjs.com/package/@vaadin/vaadin-board) | [Issues](https://github.com/vaadin/vaadin-board/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-charts) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-charts/next)](https://www.npmjs.com/package/@vaadin/vaadin-charts) | [Issues](https://github.com/vaadin/vaadin-charts/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-confirm-dialog) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-confirm-dialog/next)](https://www.npmjs.com/package/@vaadin/vaadin-confirm-dialog) | [Issues](https://github.com/vaadin/vaadin-confirm-dialog/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-cookie-consent) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-cookie-consent/next)](https://www.npmjs.com/package/@vaadin/vaadin-cookie-consent) | [Issues](https://github.com/vaadin/vaadin-cookie-consent/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-crud) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-crud/next)](https://www.npmjs.com/package/@vaadin/vaadin-crud) | [Issues](https://github.com/vaadin/vaadin-crud/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-grid-pro) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-grid-pro/next)](https://www.npmjs.com/package/@vaadin/vaadin-grid-pro) | [Issues](https://github.com/vaadin/vaadin-grid-pro/issues) +| [``](https://github.com/vaadin/vaadin-web-components/tree/master/packages/vaadin-rich-text-editor) | [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-rich-text-editor/next)](https://www.npmjs.com/package/@vaadin/vaadin-rich-text-editor) | [Issues](https://github.com/vaadin/vaadin-rich-text-editor/issues) + +## Browser support + +Vaadin components use [Custom Elements](https://caniuse.com/#feat=custom-elementsv1) and [Shadow DOM](https://caniuse.com/#feat=shadowdomv1) +that are natively supported by modern browsers. + +## Documentation + +Check out our [design system documentation](https://vaadin.com/docs-beta/latest/ds/overview/). + +## Examples + +Are you looking for an example project to get started? Visit [start.vaadin.com](https://start.vaadin.com/?preset=fusion) to create a Vaadin app. + +## Questions + +For help and support questions, please use our [community chat](https://vaad.in/chat). + +## Contributing + +Read the [contributing guide](https://vaadin.com/docs-beta/latest/guide/contributing/overview/) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components. + +## Development + +Setup the repo: ```sh yarn ``` -## Run all tests in Chrome +Run all tests in Chrome: ```sh yarn test ``` -Note: this and following scripts only run tests for packages changed since `origin/master` branch. - -## Run all tests in Firefox +Run all tests in Firefox: ```sh yarn test:firefox ``` -## Run all tests in WebKit +Run all tests in WebKit: ```sh yarn test:webkit ``` -## Run tests for single package +Run tests for single package: ```sh yarn test --group vaadin-upload ``` +Debug tests for single package: + +```sh +yarn debug --group vaadin-upload +``` + ## LICENSE For specific package(s), check the LICENSE file under the package folder. diff --git a/vaadin-logo.svg b/vaadin-logo.svg new file mode 100644 index 00000000000..59513410a65 --- /dev/null +++ b/vaadin-logo.svg @@ -0,0 +1 @@ +vaadin-logo \ No newline at end of file