Calendar Panel: FullCalendar

.eslintrc.json

@@ -18,10 +18,6 @@
     "project": "./tsconfig.json"
   },
   "settings": {
-    "react": {
-      "pragma": "h",
-      "version": "15.0"
-    },
     "import/resolver": {
       "webpack": {
         "config": "./webpack.config.js"
@@ -88,13 +84,6 @@
     "@typescript-eslint/no-unused-vars": 0,
     "@typescript-eslint/explicit-function-return-type": 0
   },
-  "plugins": [
-    "disable",
-    "import",
-    "react",
-    "lit",
-    "prettier",
-    "@typescript-eslint"
-  ],
+  "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
   "processor": "disable/disable"
 }

build-scripts/babel.js

@@ -27,12 +27,6 @@ module.exports.babelLoaderConfig = ({ latestBuild }) => {
           ],
           // Only support the syntax, Webpack will handle it.
           "@babel/syntax-dynamic-import",
-          [
-            "@babel/transform-react-jsx",
-            {
-              pragma: "h",
-            },
-          ],
           "@babel/plugin-proposal-optional-chaining",
           "@babel/plugin-proposal-nullish-coalescing-operator",
           [

build-scripts/gulp/gather-static.js

@@ -80,7 +80,6 @@ gulp.task("copy-translations", (done) => {
 
 gulp.task("copy-static", (done) => {
   const staticDir = paths.static;
-  const staticPath = genStaticPath(paths.static);
   // Basic static files
   fs.copySync(polyPath("public"), paths.root);
 
@@ -90,10 +89,6 @@ gulp.task("copy-static", (done) => {
   copyMdiIcons(staticDir);
 
   // Panel assets
-  copyFileDir(
-    npmPath("react-big-calendar/lib/css/react-big-calendar.css"),
-    staticPath("panels/calendar/")
-  );
   copyMapPanel(staticDir);
   done();
 });

build-scripts/webpack.js

@@ -100,14 +100,6 @@ const createWebpackConfig = ({
     ].filter(Boolean),
     resolve: {
       extensions: [".ts", ".js", ".json"],
-      alias: {
-        react: "preact-compat",
-        "react-dom": "preact-compat",
-        // Not necessary unless you consume a module using `createClass`
-        "create-react-class": "preact-compat/lib/create-react-class",
-        // Not necessary unless you consume a module requiring `react-dom-factories`
-        "react-dom-factories": "preact-compat/lib/react-dom-factories",
-      },
     },
     output: {
       filename: ({ chunk }) => {

package.json

@@ -24,14 +24,19 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@material/chips": "^5.0.0",
-    "@material/mwc-button": "^0.13.0",
-    "@material/mwc-checkbox": "^0.13.0",
-    "@material/mwc-dialog": "^0.13.0",
-    "@material/mwc-fab": "^0.13.0",
-    "@material/mwc-icon-button": "^0.13.0",
-    "@material/mwc-ripple": "^0.13.0",
-    "@material/mwc-switch": "^0.13.0",
+    "@fullcalendar/core": "5.0.0-beta.2",
+    "@fullcalendar/daygrid": "5.0.0-beta.2",
+    "@material/chips": "^6.0.0-canary.35a32aaea.0",
+    "@material/mwc-button": "0.14.1",
+    "@material/mwc-checkbox": "0.14.1",
+    "@material/mwc-dialog": "0.14.1",
+    "@material/mwc-fab": "0.14.1",
+    "@material/mwc-formfield": "0.14.1",
+    "@material/mwc-icon-button": "0.14.1",
+    "@material/mwc-list": "0.14.1",
+    "@material/mwc-menu": "0.14.1",
+    "@material/mwc-ripple": "0.14.1",
+    "@material/mwc-switch": "0.14.1",
     "@mdi/js": "4.9.95",
     "@mdi/svg": "4.9.95",
     "@polymer/app-layout": "^3.0.2",
@@ -102,9 +107,6 @@
     "memoize-one": "^5.0.2",
     "moment": "^2.24.0",
     "node-vibrant": "^3.1.5",
-    "preact": "^8.4.2",
-    "preact-compat": "^3.18.4",
-    "react-big-calendar": "^0.20.4",
     "regenerator-runtime": "^0.13.2",
     "resize-observer": "^1.0.0",
     "roboto-fontface": "^0.10.0",
@@ -123,7 +125,6 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.9.5",
     "@babel/plugin-proposal-optional-chaining": "^7.9.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-react-jsx": "^7.9.4",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-typescript": "^7.9.0",
     "@types/chai": "^4.1.7",
@@ -151,7 +152,6 @@
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-lit": "^1.2.0",
     "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-wc": "^1.2.0",
     "fs-extra": "^7.0.1",
     "gulp": "^4.0.0",
@@ -198,17 +198,19 @@
     "@webcomponents/webcomponentsjs": "^2.2.10",
     "@polymer/polymer": "3.1.0",
     "lit-html": "^1.1.2",
-    "@material/button": "^5.0.0",
-    "@material/checkbox": "^5.0.0",
-    "@material/density": "^5.0.0",
-    "@material/dialog": "^5.0.0",
-    "@material/fab": "^5.0.0",
-    "@material/feature-targeting": "^5.0.0",
-    "@material/switch": "^5.0.0",
-    "@material/ripple": "^5.0.0",
-    "@material/dom": "^5.0.0",
-    "@material/touch-target": "^5.0.0",
-    "@material/theme": "^5.0.0"
+    "@material/animation": "6.0.0",
+    "@material/base": "6.0.0",
+    "@material/checkbox": "6.0.0",
+    "@material/density": "6.0.0",
+    "@material/dom": "6.0.0",
+    "@material/elevation": "6.0.0",
+    "@material/feature-targeting": "6.0.0",
+    "@material/ripple": "6.0.0",
+    "@material/rtl": "6.0.0",
+    "@material/shape": "6.0.0",
+    "@material/theme": "6.0.0",
+    "@material/touch-target": "6.0.0",
+    "@material/typography": "6.0.0"
   },
   "main": "src/home-assistant.js",
   "husky": {

src/common/const.ts

@@ -87,3 +87,66 @@ export const UNIT_F = "°F";
 
 /** Entity ID of the default view. */
 export const DEFAULT_VIEW_ENTITY_ID = "group.default_view";
+
+/** HA Color Pallete. */
+export const HA_COLOR_PALETTE = [
+  "ff0029",
+  "66a61e",
+  "377eb8",
+  "984ea3",
+  "00d2d5",
+  "ff7f00",
+  "af8d00",
+  "7f80cd",
+  "b3e900",
+  "c42e60",
+  "a65628",
+  "f781bf",
+  "8dd3c7",
+  "bebada",
+  "fb8072",
+  "80b1d3",
+  "fdb462",
+  "fccde5",
+  "bc80bd",
+  "ffed6f",
+  "c4eaff",
+  "cf8c00",
+  "1b9e77",
+  "d95f02",
+  "e7298a",
+  "e6ab02",
+  "a6761d",
+  "0097ff",
+  "00d067",
+  "f43600",
+  "4ba93b",
+  "5779bb",
+  "927acc",
+  "97ee3f",
+  "bf3947",
+  "9f5b00",
+  "f48758",
+  "8caed6",
+  "f2b94f",
+  "eff26e",
+  "e43872",
+  "d9b100",
+  "9d7a00",
+  "698cff",
+  "d9d9d9",
+  "00d27e",
+  "d06800",
+  "009f82",
+  "c49200",
+  "cbe8ff",
+  "fecddf",
+  "c27eb6",
+  "8cd2ce",
+  "c4b8d9",
+  "f883b0",
+  "a49100",
+  "f48800",
+  "27d0df",
+  "a04a9b",
+];

src/components/ha-button-menu.ts

@@ -0,0 +1,55 @@
+import {
+  customElement,
+  html,
+  TemplateResult,
+  LitElement,
+  CSSResult,
+  css,
+  query,
+} from "lit-element";
+import "@material/mwc-button";
+import "@material/mwc-menu";
+import "@material/mwc-list/mwc-list-item";
+import type { Menu } from "@material/mwc-menu";
+
+import { haStyle } from "../resources/styles";
+
+import "./ha-icon-button";
+
+@customElement("ha-button-menu")
+export class HaButtonMenu extends LitElement {
+  @query("mwc-menu") private _menu?: Menu;
+
+  protected render(): TemplateResult {
+    return html`
+      <div @click=${this._handleClick}>
+        <slot name="trigger"></slot>
+      </div>
+      <mwc-menu>
+        <slot></slot>
+      </mwc-menu>
+    `;
+  }
+
+  private _handleClick(): void {
+    this._menu!.anchor = this;
+    this._menu!.show();
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        :host {
+          position: relative;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-button-menu": HaButtonMenu;
+  }
+}

src/components/ha-button-toggle-group.ts

@@ -0,0 +1,86 @@
+import {
+  customElement,
+  html,
+  TemplateResult,
+  property,
+  LitElement,
+  CSSResult,
+  css,
+} from "lit-element";
+
+import "./ha-icon-button";
+
+import { fireEvent } from "../common/dom/fire_event";
+import type { ToggleButton } from "../types";
+
+@customElement("ha-button-toggle-group")
+export class HaButtonToggleGroup extends LitElement {
+  @property() public buttons!: ToggleButton[];
+
+  @property() public active?: string;
+
+  protected render(): TemplateResult {
+    return html`
+      <div>
+        ${this.buttons.map(
+          (button) => html` <ha-icon-button
+            .label=${button.label}
+            .icon=${button.icon}
+            .value=${button.value}
+            ?active=${this.active === button.value}
+            @click=${this._handleClick}
+          >
+          </ha-icon-button>`
+        )}
+      </div>
+    `;
+  }
+
+  private _handleClick(ev): void {
+    this.active = ev.target.value;
+    fireEvent(this, "value-changed", { value: this.active });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      div {
+        display: flex;
+        --mdc-icon-button-size: var(--button-toggle-size, 36px);
+        --mdc-icon-size: var(--button-toggle-icon-size, 20px);
+      }
+      ha-icon-button {
+        border: 1px solid var(--primary-color);
+        border-right-width: 0px;
+        position: relative;
+      }
+      ha-icon-button::before {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        background-color: currentColor;
+        opacity: 0;
+        pointer-events: none;
+        content: "";
+        transition: opacity 15ms linear, background-color 15ms linear;
+      }
+      ha-icon-button[active]::before {
+        opacity: var(--mdc-icon-button-ripple-opacity, 0.12);
+      }
+      ha-icon-button:first-child {
+        border-radius: 4px 0 0 4px;
+      }
+      ha-icon-button:last-child {
+        border-radius: 0 4px 4px 0;
+        border-right-width: 1px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-button-toggle-button": HaButtonToggleGroup;
+  }
+}

src/components/ha-icon-button.ts

@@ -42,8 +42,7 @@ export class HaIconButton extends LitElement {
         display: inline-block;
       }
       ha-icon {
-        display: inline-flex;
-        vertical-align: initial;
+        --ha-icon-display: inline;
       }
     `;
   }

src/components/ha-icon.ts

@@ -116,11 +116,6 @@ export class HaIcon extends LitElement {
   static get styles(): CSSResult {
     return css`
       :host {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        vertical-align: middle;
         fill: currentcolor;
       }
     `;

src/components/ha-svg-icon.ts

@@ -27,7 +27,7 @@ export class HaSvgIcon extends LitElement {
   static get styles(): CSSResult {
     return css`
       :host {
-        display: inline-flex;
+        display: var(--ha-icon-display, inline-flex);
         align-items: center;
         justify-content: center;
         position: relative;