Migrate to npm mode

javier-godoy · javier-godoy · commit cbe0e11093f8 · 2019-10-02T17:54:32.000-03:00
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,4 @@
 /.project
 /node_modules
 /webpack.generated.js
+/node
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "no-name",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@polymer/polymer": "3.2.0",
+    "@webcomponents/webcomponentsjs": "^2.2.10",
+    "@vaadin/flow-deps": "./target/frontend"
+  },
+  "devDependencies": {
+    "webpack": "4.30.0",
+    "webpack-cli": "3.3.0",
+    "webpack-dev-server": "3.3.0",
+    "webpack-babel-multi-target-plugin": "2.1.0",
+    "copy-webpack-plugin": "5.0.3",
+    "compression-webpack-plugin": "3.0.0",
+    "webpack-merge": "4.2.1",
+    "raw-loader": "3.0.0"
+  },
+  "vaadinAppPackageHash": "4bbf55d6bde075b49ad2db86aef1cb82a5cd7c6cbdfceff74af35cced361ac40"
+}
diff --git a/src/main/java/com/flowingcode/addons/applayout/AppDrawer.java b/src/main/java/com/flowingcode/addons/applayout/AppDrawer.java
@@ -30,6 +30,8 @@
 import com.vaadin.flow.component.HasComponents;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.dependency.HtmlImport;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.html.H4;
 import com.vaadin.flow.shared.Registration;
 
@@ -43,6 +45,8 @@
 @Tag("app-drawer")
 @HtmlImport("bower_components/app-layout/app-drawer/app-drawer.html")
 @HtmlImport("bower_components/iron-scroll-target-behavior/iron-scroll-target-behavior.html")
+@NpmPackage(value = "@polymer/app-layout", version= AppLayout.NPM_VERSION)
+@JsModule("@polymer/app-layout/app-drawer/app-drawer.js")
 public class AppDrawer extends Component implements HasComponents {
 	
 	private final PaperListbox pm = new PaperListbox(Collections.emptyList());
diff --git a/src/main/java/com/flowingcode/addons/applayout/AppHeader.java b/src/main/java/com/flowingcode/addons/applayout/AppHeader.java
@@ -26,6 +26,8 @@
 import com.vaadin.flow.component.HasComponents;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.dependency.HtmlImport;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.html.Image;
 
 /**
@@ -35,8 +37,10 @@
  *
  */
 @SuppressWarnings("serial")
-@Tag("app-header")
 @HtmlImport("bower_components/app-layout/app-header/app-header.html")
+@NpmPackage(value = "@polymer/app-layout", version= AppLayout.NPM_VERSION)
+@JsModule("@polymer/app-layout/app-header/app-header.js")
+@Tag("app-header")
 public class AppHeader extends Component implements HasComponents {
 
 	private AppToolbar appToolbar;
diff --git a/src/main/java/com/flowingcode/addons/applayout/AppLayout.java b/src/main/java/com/flowingcode/addons/applayout/AppLayout.java
@@ -21,13 +21,14 @@
 
 
 import java.util.ArrayList;
-
-
 import java.util.Arrays;
 
 import com.flowingcode.addons.applayout.menu.MenuItem;
 import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.dependency.HtmlImport;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Image;
 import com.vaadin.flow.server.InitialPageSettings;
@@ -41,12 +42,18 @@
  */
 @SuppressWarnings("serial")
 @HtmlImport("bower_components/font-roboto/roboto.html")
-@HtmlImport("bower_components/iron-icons/iron-icons.html")
 @HtmlImport("bower_components/app-layout/app-scroll-effects/app-scroll-effects.html")
-@HtmlImport("bower_components/app-layout/app-toolbar/app-toolbar.html")
 @HtmlImport("frontend://styles/applayout-styles.html")
+@NpmPackage(value = "@polymer/app-layout", version=AppLayout.NPM_VERSION)
+@NpmPackage(value = "@polymer/font-roboto", version="3")
+@JsModule("@polymer/app-layout/app-drawer/app-drawer.js")
+@JsModule("@polymer/app-layout/app-scroll-effects/app-scroll-effects.js")
+@JsModule("@polymer/font-roboto/roboto.js")
+@CssImport("./styles/applayout-styles.css")
 public class AppLayout extends Div implements PageConfigurator {
 
+	final static String NPM_VERSION = "3.0.2";
+	
 	AppDrawer drawer;
 	AppHeader header;
 	
diff --git a/src/main/java/com/flowingcode/addons/applayout/AppToolbar.java b/src/main/java/com/flowingcode/addons/applayout/AppToolbar.java
@@ -29,6 +29,8 @@
 import com.vaadin.flow.component.HasComponents;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.dependency.HtmlImport;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Image;
 
@@ -39,8 +41,13 @@
  *
  */
 @SuppressWarnings("serial")
-@Tag("app-toolbar")
 @HtmlImport("bower_components/app-layout/app-toolbar/app-toolbar.html")
+@HtmlImport("bower_components/iron-icons/iron-icons.html")
+@NpmPackage(value = "@polymer/app-layout", version= AppLayout.NPM_VERSION)
+@NpmPackage(value = "@polymer/iron-icons", version = "^3.0.0")
+@JsModule("@polymer/app-layout/app-toolbar/app-toolbar.js")
+@JsModule("@polymer/iron-icons/iron-icons.js")
+@Tag("app-toolbar")
 public class AppToolbar extends Component implements HasComponents {
 	
 	private PaperIconButton menu;
diff --git a/src/main/java/com/flowingcode/addons/applayout/PaperButton.java b/src/main/java/com/flowingcode/addons/applayout/PaperButton.java
@@ -24,6 +24,8 @@
 import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.dependency.HtmlImport;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.server.Command;
 
 /**
@@ -33,8 +35,10 @@
  *
  */
 @SuppressWarnings("serial")
-@Tag("paper-button")
 @HtmlImport("bower_components/paper-button/paper-button.html")
+@NpmPackage(value = "@polymer/paper-button", version = "3.0.1")
+@JsModule("@polymer/paper-button/paper-button.js")
+@Tag("paper-button")
 public class PaperButton extends Component {
 	
     public PaperButton(String label) {
diff --git a/src/main/java/com/flowingcode/addons/applayout/PaperCard.java b/src/main/java/com/flowingcode/addons/applayout/PaperCard.java
@@ -31,6 +31,8 @@
 import com.vaadin.flow.component.HasStyle;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.dependency.HtmlImport;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.orderedlayout.ThemableLayout;
 import com.vaadin.flow.dom.Element;
@@ -43,6 +45,8 @@
  */
 @SuppressWarnings("serial")
 @HtmlImport("bower_components/paper-card/paper-card.html")
+@NpmPackage(value = "@polymer/paper-card", version = "3.0.1")
+@JsModule("@polymer/paper-card/paper-card.js")
 @Tag("paper-card")
 @Deprecated
 public class PaperCard extends Component implements HasSize, HasStyle, ThemableLayout {
@@ -58,7 +62,7 @@ public Element getElement() {
 		}
     };
 
-    protected PaperCard() {
+    public PaperCard() {
         this(null);
     }
 
diff --git a/src/main/java/com/flowingcode/addons/applayout/PaperIconButton.java b/src/main/java/com/flowingcode/addons/applayout/PaperIconButton.java
@@ -25,6 +25,8 @@
 import com.vaadin.flow.component.HasEnabled;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.dependency.HtmlImport;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.server.Command;
 
 /**
@@ -34,8 +36,10 @@
  *
  */
 @SuppressWarnings("serial")
-@Tag("paper-icon-button")
 @HtmlImport("bower_components/paper-icon-button/paper-icon-button.html")
+@NpmPackage(value = "@polymer/paper-icon-button", version = "3.0.2")
+@JsModule("@polymer/paper-icon-button/paper-icon-button.js")
+@Tag("paper-icon-button")
 public class PaperIconButton extends Component implements HasEnabled {
 
     public PaperIconButton(String icon) {
diff --git a/src/main/java/com/flowingcode/addons/applayout/PaperIconItem.java b/src/main/java/com/flowingcode/addons/applayout/PaperIconItem.java
@@ -30,6 +30,8 @@
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.Text;
 import com.vaadin.flow.component.dependency.HtmlImport;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.server.Command;
 
 /**
@@ -40,6 +42,8 @@
  */
 @SuppressWarnings("serial")
 @HtmlImport("bower_components/paper-item/paper-icon-item.html")
+@NpmPackage(value = "@polymer/paper-item", version = "3.0.1")
+@JsModule("@polymer/paper-item/paper-icon-item.js")
 @Tag("paper-icon-item")
 public class PaperIconItem extends Component implements HasComponents, HasText, HasSize {
 	
diff --git a/src/main/java/com/flowingcode/addons/applayout/PaperItem.java b/src/main/java/com/flowingcode/addons/applayout/PaperItem.java
@@ -29,6 +29,8 @@
 import com.vaadin.flow.component.HasText;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.dependency.HtmlImport;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.server.Command;
 
 /**
@@ -39,6 +41,8 @@
  */
 @SuppressWarnings("serial")
 @HtmlImport("bower_components/paper-item/paper-item.html")
+@NpmPackage(value = "@polymer/paper-item", version = "3.0.1")
+@JsModule("@polymer/paper-item/paper-item.js")
 @Tag("paper-item")
 public class PaperItem extends Component implements HasEnabled, HasText, HasSize {
 
diff --git a/src/main/java/com/flowingcode/addons/applayout/PaperListbox.java b/src/main/java/com/flowingcode/addons/applayout/PaperListbox.java
@@ -27,6 +27,8 @@
 import com.vaadin.flow.component.HasOrderedComponents;
 import com.vaadin.flow.component.Tag;
 import com.vaadin.flow.component.dependency.HtmlImport;
+import com.vaadin.flow.component.dependency.JsModule;
+import com.vaadin.flow.component.dependency.NpmPackage;
 
 /**
  * Component that renders a paper-listbox
@@ -36,6 +38,8 @@
  */
 @SuppressWarnings("serial")
 @HtmlImport("bower_components/paper-listbox/paper-listbox.html")
+@NpmPackage(value = "@polymer/paper-listbox", version = "3.0.1")
+@JsModule("@polymer/paper-listbox/paper-listbox.js")
 @Tag("paper-listbox")
 public class PaperListbox extends Component implements HasOrderedComponents<PaperListbox> {
 	
diff --git a/src/main/resources/META-INF/frontend/styles/applayout-styles.css b/src/main/resources/META-INF/frontend/styles/applayout-styles.css
@@ -0,0 +1,45 @@
+.sub-menu{
+	background-color: var(--lumo-primary-color-10pct);
+}
+
+app-toolbar {
+  background-color: #4285f4;
+      color: #fff;
+}
+
+paper-icon-button + [main-title] {
+  margin-left: 24px;
+}
+
+paper-icon-button {
+	--paper-icon-button-disabled-text: var(--lumo-disabled-text-color);
+}
+
+paper-progress {
+  display: block;
+      width: 100%;
+      --paper-progress-active-color: rgba(255, 255, 255, 0.5);
+      --paper-progress-container-color: transparent;
+}
+
+app-header {
+  position: var(--layout-fixed-top_-_position); top: var(--layout-fixed-top_-_top); left: var(--layout-fixed-top_-_left); right: var(--layout-fixed-top_-_right);
+      color: #fff;
+      --app-header-background-rear-layer_-_background-color:  #ef6c00;;
+  z-index: 1000;
+}
+
+app-drawer {
+  --app-drawer-scrim-background: rgba(0, 0, 100, 0.8);
+	z-index: 1000;
+}
+
+app-drawer paper-listbox {
+	overflow-y: auto;
+}
+
+app-drawer paper-item, 
+app-drawer paper-icon-item,
+app-drawer iron-collapse-button {
+	cursor: pointer;
+}
diff --git a/src/test/java/com/flowingcode/addons/applayout/DemoView.java b/src/test/java/com/flowingcode/addons/applayout/DemoView.java
@@ -29,6 +29,7 @@
 import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.checkbox.Checkbox;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.dependency.HtmlImport;
 import com.vaadin.flow.component.dialog.Dialog;
 import com.vaadin.flow.component.html.Div;
@@ -48,6 +49,7 @@
 @Route("")
 @HtmlImport("frontend://styles/shared-styles.html")
 @HtmlImport("frontend://bower_components/vaadin-icons/vaadin-icons.html")
+@CssImport("./styles/shared-styles.css")
 public class DemoView extends VerticalLayout {
 
 	private VerticalLayout container = new VerticalLayout();
diff --git a/src/test/resources/META-INF/frontend/styles/shared-styles.css b/src/test/resources/META-INF/frontend/styles/shared-styles.css
@@ -0,0 +1,56 @@
+html, body {
+  margin: 0;
+  font-family: 'Roboto', 'Noto', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  background: #f1f1f1;
+  max-height: 368px;
+  max-width: 100%;
+}
+
+sample-content {
+  padding-top: 64px;
+}
+
+app-drawer {
+	--app-drawer-scrim-background: rgba(0, 0, 100, 0.8);
+	--app-drawer-content-container: {
+         background-color: #F1F1F1;
+       }
+	z-index: 1001;
+}
+
+app-drawer paper-listbox {
+	background-color:transparent;
+}
+
+img.applogo {
+	margin-right: 8px;
+}
+
+.compact img.applogo {
+	width:  22px;
+	height: 22px;
+}
+
+.hamlet paper-card {
+	max-width: 600px;
+	min-width: 200px;
+}
+
+.hamlet paper-card.claudius {
+	background: rgb(220,248,198);
+}
+
+.hamlet paper-card h5 {margin-top: 0.25em}
+
+.hamlet paper-card[elevation="0"] {
+	background: rgb(254,244,197);
+	border-radius: 8px;
+	min-width: 30%;
+	height: 42px;
+}
+
+.hamlet paper-card[elevation="0"] .card-content {
+	padding: 8px;
+	text-align: center;
+}
diff --git a/webpack.config.js b/webpack.config.js
