Skip to content

Commit

Permalink
add prettier config
Browse files Browse the repository at this point in the history
  • Loading branch information
piitaya committed Jan 7, 2022
1 parent d3fba3a commit 082396f
Show file tree
Hide file tree
Showing 24 changed files with 1,286 additions and 1,247 deletions.
2 changes: 1 addition & 1 deletion .babelrc
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"presets": ["@babel/preset-typescript"]
"presets": ["@babel/preset-typescript"]
}
5 changes: 5 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules
dist
.hass_dev/*
package-lock.json
package.json
12 changes: 12 additions & 0 deletions .prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
module.exports = {
arrowParens: "always",
bracketSpacing: true,
bracketSameLine: false,
endOfLine: "lf",
printWidth: 80,
semi: true,
singleQuote: false,
tabWidth: 4,
trailingComma: "es5",
useTabs: false,
};
17 changes: 9 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,26 +15,27 @@ Once it's done, go to home assitant instance ([http://localhost:8123](http://loc
### Mushroom

In another terminal, install dependencies and run development server:

```sh
npm i
npm start
```

Server will start on port `5000`.
Server will start on port `5000`.

### Home assistant configuration

Once both Home Assistant and mushroom are running, you have to add a resource to Home Assistant UI:
- Go on your profile ([http://localhost:8123/profile](http://localhost:8123/profile))
- Enable `Advanced mode`
- Then go to Lovelace resources ([http://localhost:8123/config/lovelace/resources](http://localhost:8123/config/lovelace/resources))
- Add the ressource `http://localhost:5000/mushroom.js`:
![Add resource](doc/add_resource.png)
- A showcase dashboard is provided ([http://localhost:8123/lovelace-mushroom-showcase](http://localhost:8123/lovelace-mushroom-showcase))

- Go on your profile ([http://localhost:8123/profile](http://localhost:8123/profile))
- Enable `Advanced mode`
- Then go to Lovelace resources ([http://localhost:8123/config/lovelace/resources](http://localhost:8123/config/lovelace/resources))
- Add the ressource `http://localhost:5000/mushroom.js`:
![Add resource](doc/add_resource.png)
- A showcase dashboard is provided ([http://localhost:8123/lovelace-mushroom-showcase](http://localhost:8123/lovelace-mushroom-showcase))

## Build

```sh
npm run build
```

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"scripts": {
"start": "rollup -c --watch",
"build": "rollup -c",
"format": "prettier --write .",
"start:hass": "docker run --rm -p8123:8123 -v ${PWD}/.hass_dev:/config homeassistant/home-assistant:beta"
},
"author": "",
Expand Down
35 changes: 19 additions & 16 deletions rollup.config.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@

import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import babel from '@rollup/plugin-babel';
import json from '@rollup/plugin-json';
import commonjs from "@rollup/plugin-commonjs";
import nodeResolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import babel from "@rollup/plugin-babel";
import json from "@rollup/plugin-json";
import { terser } from "rollup-plugin-terser";
import serve from "rollup-plugin-serve";

Expand All @@ -27,28 +26,32 @@ const plugins = [
commonjs(),
json(),
babel({
exclude: 'node_modules/**',
babelHelpers: "bundled"
exclude: "node_modules/**",
babelHelpers: "bundled",
}),
...(dev ? [serve(serveOptions)] : [terser()]),
];

export default [
{
input: 'src/index.ts',
input: "src/index.ts",
output: {
file: "dist/mushroom.js",
format: 'es',
format: "es",
},
plugins,
moduleContext: (id) => {
const thisAsWindowForModules = [
'node_modules/@formatjs/intl-utils/lib/src/diff.js',
'node_modules/@formatjs/intl-utils/lib/src/resolve-locale.js'
"node_modules/@formatjs/intl-utils/lib/src/diff.js",
"node_modules/@formatjs/intl-utils/lib/src/resolve-locale.js",
];
if (thisAsWindowForModules.some(id_ => id.trimRight().endsWith(id_))) {
return 'window';
if (
thisAsWindowForModules.some((id_) =>
id.trimRight().endsWith(id_)
)
) {
return "window";
}
},
}
];
},
];
194 changes: 97 additions & 97 deletions src/cards/cover-card/cover-card-editor.ts
Original file line number Diff line number Diff line change
@@ -1,129 +1,129 @@
import {
fireEvent,
HomeAssistant,
LovelaceCardEditor,
stateIcon,
fireEvent,
HomeAssistant,
LovelaceCardEditor,
stateIcon,
} from "custom-card-helpers";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { assert, assign, object, optional, string } from "superstruct";
import {
baseLovelaceCardConfig,
configElementStyle,
EditorTarget,
baseLovelaceCardConfig,
configElementStyle,
EditorTarget,
} from "../../utils/editor";
import { COVER_CARD_EDITOR_NAME } from "./const";
import { CoverCardConfig } from "./cover-card";

const DOMAINS = ["cover"];

const cardConfigStruct = assign(
baseLovelaceCardConfig,
object({
entity: string(),
icon: optional(string()),
name: optional(string()),
})
baseLovelaceCardConfig,
object({
entity: string(),
icon: optional(string()),
name: optional(string()),
})
);

@customElement(COVER_CARD_EDITOR_NAME)
export class CoverCardEditor extends LitElement implements LovelaceCardEditor {
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ attribute: false }) public hass?: HomeAssistant;

@state() private _config?: CoverCardConfig;
@state() private _config?: CoverCardConfig;

public setConfig(config: CoverCardConfig): void {
assert(config, cardConfigStruct);
this._config = config;
}

get _entity(): string {
return this._config!.entity || "";
}
public setConfig(config: CoverCardConfig): void {
assert(config, cardConfigStruct);
this._config = config;
}

get _name(): string {
return this._config!.name || "";
}
get _entity(): string {
return this._config!.entity || "";
}

get _icon(): string {
return this._config!.icon || "";
}
get _name(): string {
return this._config!.name || "";
}

protected render(): TemplateResult {
if (!this.hass || !this._config) {
return html``;
get _icon(): string {
return this._config!.icon || "";
}

const entityState = this.hass.states[this._entity];
protected render(): TemplateResult {
if (!this.hass || !this._config) {
return html``;
}

return html`
<div class="card-config">
<ha-entity-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.entity"
)}"
.hass=${this.hass}
.value=${this._entity}
.configValue=${"entity"}
@value-changed=${this._valueChanged}
.includeDomains=${DOMAINS}
allow-custom-entity
></ha-entity-picker>
<div class="side-by-side">
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.name"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
></paper-input>
<ha-icon-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.icon"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._icon}
.placeholder=${this._icon || stateIcon(entityState)}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
></ha-icon-picker>
</div>
</div>
`;
}
const entityState = this.hass.states[this._entity];

private _valueChanged(ev: CustomEvent): void {
if (!this._config || !this.hass) {
return;
return html`
<div class="card-config">
<ha-entity-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.entity"
)}"
.hass=${this.hass}
.value=${this._entity}
.configValue=${"entity"}
@value-changed=${this._valueChanged}
.includeDomains=${DOMAINS}
allow-custom-entity
></ha-entity-picker>
<div class="side-by-side">
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.name"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
></paper-input>
<ha-icon-picker
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.icon"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._icon}
.placeholder=${this._icon || stateIcon(entityState)}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
></ha-icon-picker>
</div>
</div>
`;
}
const target = ev.target! as EditorTarget;
const value =
target.checked !== undefined ? target.checked : ev.detail.value;

if (this[`_${target.configValue}`] === value) {
return;
}
private _valueChanged(ev: CustomEvent): void {
if (!this._config || !this.hass) {
return;
}
const target = ev.target! as EditorTarget;
const value =
target.checked !== undefined ? target.checked : ev.detail.value;

if (this[`_${target.configValue}`] === value) {
return;
}

let newConfig;
if (target.configValue) {
if (!value) {
newConfig = { ...this._config };
delete newConfig[target.configValue!];
} else {
newConfig = {
...this._config,
[target.configValue!]: value,
};
}
let newConfig;
if (target.configValue) {
if (!value) {
newConfig = { ...this._config };
delete newConfig[target.configValue!];
} else {
newConfig = {
...this._config,
[target.configValue!]: value,
};
}
}
fireEvent(this, "config-changed", { config: newConfig });
}
fireEvent(this, "config-changed", { config: newConfig });
}

static get styles(): CSSResultGroup {
return configElementStyle;
}
static get styles(): CSSResultGroup {
return configElementStyle;
}
}
Loading

0 comments on commit 082396f

Please sign in to comment.