diff --git a/build-scripts/gulp/clean.js b/build-scripts/gulp/clean.js index 2b184d5e6..7bc0ed9e8 100644 --- a/build-scripts/gulp/clean.js +++ b/build-scripts/gulp/clean.js @@ -31,6 +31,6 @@ gulp.task("clean-hassio", () => gulp.task( "clean-gallery", gulp.parallel("clean-translations", () => - del([paths.gallery_output_root, paths.build_dir]) + del([paths.gallery_output_root, paths.gallery_build, paths.build_dir]) ) ); diff --git a/build-scripts/gulp/gallery.js b/build-scripts/gulp/gallery.js index 6e45f045c..09ea380d7 100644 --- a/build-scripts/gulp/gallery.js +++ b/build-scripts/gulp/gallery.js @@ -1,8 +1,11 @@ +/* eslint-disable */ // Run demo develop mode const gulp = require("gulp"); const fs = require("fs"); const path = require("path"); const marked = require("marked"); +const glob = require("glob"); +const yaml = require("js-yaml"); const env = require("../env"); const paths = require("../paths"); @@ -18,7 +21,7 @@ require("./rollup.js"); gulp.task("gather-gallery-demos", async function gatherDemos() { const demoDir = path.resolve(paths.gallery_dir, "src/demos"); - const files = await fs.promises.readdir(demoDir); + const files = glob.sync(path.resolve(demoDir, "**/*")); const galleryBuild = path.resolve(paths.gallery_dir, "build"); fs.mkdirSync(galleryBuild, { recursive: true }); @@ -28,47 +31,110 @@ gulp.task("gather-gallery-demos", async function gatherDemos() { const processed = new Set(); for (const file of files) { - let demoId = path.basename( - file, - file.endsWith(".ts") ? ".ts" : ".markdown" - ); + if (fs.lstatSync(file).isDirectory()) { + continue; + } + demoId = file.substring(demoDir.length + 1, file.lastIndexOf(".")); - // Can be processed if we saw demo or description before. if (processed.has(demoId)) { continue; } - processed.add(demoId); - const demoFile = path.resolve(demoDir, `${demoId}.ts`); + const [category, name] = demoId.split("/", 2); + const demoFile = path.resolve(demoDir, `${demoId}.ts`); const descriptionFile = path.resolve(demoDir, `${demoId}.markdown`); const hasDemo = fs.existsSync(demoFile); - const hasDescription = fs.existsSync(descriptionFile); + let hasDescription = fs.existsSync(descriptionFile); + let metadata = {}; if (hasDescription) { - const descriptionContent = fs.readFileSync(descriptionFile, "utf-8"); - fs.writeFileSync( - path.resolve(galleryBuild, `${demoId}-description.ts`), - ` - import {html} from "lit"; - export default html\`${marked(descriptionContent)}\` - ` - ); + let descriptionContent = fs.readFileSync(descriptionFile, "utf-8"); + + if (descriptionContent.startsWith("---")) { + const metadataEnd = descriptionContent.indexOf("---", 3); + metadata = yaml.load(descriptionContent.substring(3, metadataEnd)); + descriptionContent = descriptionContent + .substring(metadataEnd + 3) + .trim(); + } + + // If description is just metadata + if (descriptionContent === "") { + hasDescription = false; + } else { + fs.mkdirSync(path.resolve(galleryBuild, category), { recursive: true }); + fs.writeFileSync( + path.resolve(galleryBuild, `${demoId}-description.ts`), + ` + import {html} from "lit"; + export default html\`${marked(descriptionContent)}\` + ` + ); + } } - const demoPath = `../src/demos/${demoId}`; - const descriptionPath = `./${demoId}-description`; - content += ` "${demoId.substring(5)}": { + content += ` "${demoId}": { + metadata: ${JSON.stringify(metadata)}, ${ hasDescription - ? `description: () => import("${descriptionPath}").then(m => m.default),` + ? `description: () => import("./${demoId}-description").then(m => m.default),` : "" } - ${hasDemo ? `load: () => import("${demoPath}")` : ""} + ${hasDemo ? `load: () => import("../src/demos/${demoId}")` : ""} },\n`; } - content += "};"; + content += "};\n"; + + // Generate sidebar + const sidebarPath = path.resolve(paths.gallery_dir, "sidebar.js"); + // To make watch work during development + delete require.cache[sidebarPath]; + const sidebar = require(sidebarPath); + + const demosToProcess = {}; + for (const key of processed) { + const [category, demo] = key.split("/", 2); + if (!(category in demosToProcess)) { + demosToProcess[category] = new Set(); + } + demosToProcess[category].add(demo); + } + + for (const group of Object.values(sidebar)) { + const toProcess = demosToProcess[group.category]; + delete demosToProcess[group.category]; + + if (!toProcess) { + console.error("Unknown category", group.category); + continue; + } + + // Any pre-defined groups will not be sorted. + if (group.demos) { + for (const demo of group.demos) { + if (!toProcess.delete(demo)) { + console.error("Found unreferenced demo", demo); + } + } + } else { + group.demos = []; + } + for (const demo of Array.from(toProcess).sort()) { + group.demos.push(demo); + } + } + + for (const [category, demos] of Object.entries(demosToProcess)) { + sidebar.push({ + category, + header: category, + demos: Array.from(demos), + }); + } + + content += `export const SIDEBAR = ${JSON.stringify(sidebar, null, 2)};\n`; fs.writeFileSync( path.resolve(galleryBuild, "import-demos.ts"), @@ -99,7 +165,10 @@ gulp.task( : "webpack-dev-server-gallery", async function watchMarkdownFiles() { gulp.watch( - path.resolve(paths.gallery_dir, "src/demos/*.markdown"), + [ + path.resolve(paths.gallery_dir, "src/demos/**/*.markdown"), + path.resolve(paths.gallery_dir, "sidebar.js"), + ], gulp.series("gather-gallery-demos") ); } diff --git a/build-scripts/paths.js b/build-scripts/paths.js index d89f5f582..241c7669d 100644 --- a/build-scripts/paths.js +++ b/build-scripts/paths.js @@ -26,6 +26,7 @@ module.exports = { cast_output_es5: path.resolve(__dirname, "../cast/dist/frontend_es5"), gallery_dir: path.resolve(__dirname, "../gallery"), + gallery_build: path.resolve(__dirname, "../gallery/build"), gallery_output_root: path.resolve(__dirname, "../gallery/dist"), gallery_output_latest: path.resolve( __dirname, diff --git a/gallery/sidebar.js b/gallery/sidebar.js new file mode 100644 index 000000000..2d40478a8 --- /dev/null +++ b/gallery/sidebar.js @@ -0,0 +1,40 @@ +module.exports = [ + { + category: "introduction", + demos: ["introduction"], + }, + + { + category: "lovelace", + // Each section has a header + header: "Lovelace", + // Specify demos to make sure they are put on top. + demos: [], + // Add a demoStart to automatically gather demos based on their name + }, + { + category: "automation", + header: "Automation", + }, + { + category: "components", + header: "Components", + demos: [ + "ha-alert", + "ha-bar", + "ha-chips", + "ha-faded", + "ha-form", + "ha-label-badge", + "ha-selector", + ], + }, + { + category: "more-info", + header: "More Info", + }, + { + category: "rest", + header: "Rest", + }, +]; diff --git a/gallery/src/components/demo-description.ts b/gallery/src/components/demo-description.ts new file mode 100644 index 000000000..41dc6fc4a --- /dev/null +++ b/gallery/src/components/demo-description.ts @@ -0,0 +1,44 @@ +import { html, css, LitElement } from "lit"; +import { customElement, property } from "lit/decorators"; +import { until } from "lit/directives/until"; +import { haStyle } from "../../../src/resources/styles"; +import { DEMOS } from "../../build/import-demos"; + +@customElement("demo-description") +class DemoDescription extends LitElement { + @property() public demo!: string; + + render() { + if (!DEMOS[this.demo].description) { + return ""; + } + return html` + ${until( + DEMOS[this.demo].description().then( + (content) => html` + +
${content}
+ + ` + ), + "" + )} + `; + } + + static styles = [ + haStyle, + css` + ha-card { + max-width: 600px; + margin: 16px auto; + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + "demo-description": DemoDescription; + } +} diff --git a/gallery/src/demos/demo-automation-describe-action.ts b/gallery/src/demos/automation/describe-action.ts similarity index 89% rename from gallery/src/demos/demo-automation-describe-action.ts rename to gallery/src/demos/automation/describe-action.ts index ea9b13fff..55c3317ac 100644 --- a/gallery/src/demos/demo-automation-describe-action.ts +++ b/gallery/src/demos/automation/describe-action.ts @@ -1,10 +1,10 @@ import { dump } from "js-yaml"; import { html, css, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; -import "../../../src/components/ha-card"; -import { describeAction } from "../../../src/data/script_i18n"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import { HomeAssistant } from "../../../src/types"; +import "../../../../src/components/ha-card"; +import { describeAction } from "../../../../src/data/script_i18n"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import { HomeAssistant } from "../../../../src/types"; const actions = [ { wait_template: "{{ true }}", alias: "Something with an alias" }, diff --git a/gallery/src/demos/demo-automation-describe-condition.ts b/gallery/src/demos/automation/describe-condition.ts similarity index 92% rename from gallery/src/demos/demo-automation-describe-condition.ts rename to gallery/src/demos/automation/describe-condition.ts index 60f42d78e..11de8b978 100644 --- a/gallery/src/demos/demo-automation-describe-condition.ts +++ b/gallery/src/demos/automation/describe-condition.ts @@ -1,8 +1,8 @@ import { dump } from "js-yaml"; import { html, css, LitElement, TemplateResult } from "lit"; import { customElement } from "lit/decorators"; -import "../../../src/components/ha-card"; -import { describeCondition } from "../../../src/data/automation_i18n"; +import "../../../../src/components/ha-card"; +import { describeCondition } from "../../../../src/data/automation_i18n"; const conditions = [ { condition: "and" }, diff --git a/gallery/src/demos/demo-automation-describe-trigger.ts b/gallery/src/demos/automation/describe-trigger.ts similarity index 92% rename from gallery/src/demos/demo-automation-describe-trigger.ts rename to gallery/src/demos/automation/describe-trigger.ts index 8a409386c..6bfe3213c 100644 --- a/gallery/src/demos/demo-automation-describe-trigger.ts +++ b/gallery/src/demos/automation/describe-trigger.ts @@ -1,8 +1,8 @@ import { dump } from "js-yaml"; import { html, css, LitElement, TemplateResult } from "lit"; import { customElement } from "lit/decorators"; -import "../../../src/components/ha-card"; -import { describeTrigger } from "../../../src/data/automation_i18n"; +import "../../../../src/components/ha-card"; +import { describeTrigger } from "../../../../src/data/automation_i18n"; const triggers = [ { platform: "state" }, diff --git a/gallery/src/demos/demo-automation-editor-action.ts b/gallery/src/demos/automation/editor-action.ts similarity index 57% rename from gallery/src/demos/demo-automation-editor-action.ts rename to gallery/src/demos/automation/editor-action.ts index 1aea950b9..01769ccaa 100644 --- a/gallery/src/demos/demo-automation-editor-action.ts +++ b/gallery/src/demos/automation/editor-action.ts @@ -1,25 +1,25 @@ /* eslint-disable lit/no-template-arrow */ import { LitElement, TemplateResult, html } from "lit"; import { customElement, state } from "lit/decorators"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import type { HomeAssistant } from "../../../src/types"; -import "../components/demo-black-white-row"; -import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry"; -import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry"; -import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry"; -import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor"; -import "../../../src/panels/config/automation/action/ha-automation-action"; -import { HaChooseAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-choose"; -import { HaDelayAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-delay"; -import { HaDeviceAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-device_id"; -import { HaEventAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-event"; -import { HaRepeatAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-repeat"; -import { HaSceneAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-scene"; -import { HaServiceAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-service"; -import { HaWaitForTriggerAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger"; -import { HaWaitAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-wait_template"; -import { Action } from "../../../src/data/script"; -import { HaConditionAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-condition"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import type { HomeAssistant } from "../../../../src/types"; +import "../../components/demo-black-white-row"; +import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry"; +import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry"; +import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry"; +import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor"; +import "../../../../src/panels/config/automation/action/ha-automation-action"; +import { HaChooseAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-choose"; +import { HaDelayAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-delay"; +import { HaDeviceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-device_id"; +import { HaEventAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-event"; +import { HaRepeatAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-repeat"; +import { HaSceneAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-scene"; +import { HaServiceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-service"; +import { HaWaitForTriggerAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger"; +import { HaWaitAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_template"; +import { Action } from "../../../../src/data/script"; +import { HaConditionAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-condition"; const SCHEMAS: { name: string; actions: Action[] }[] = [ { name: "Event", actions: [HaEventAction.defaultConfig] }, diff --git a/gallery/src/demos/demo-automation-editor-condition.ts b/gallery/src/demos/automation/editor-condition.ts similarity index 62% rename from gallery/src/demos/demo-automation-editor-condition.ts rename to gallery/src/demos/automation/editor-condition.ts index 4b1ebd8a1..77e42e617 100644 --- a/gallery/src/demos/demo-automation-editor-condition.ts +++ b/gallery/src/demos/automation/editor-condition.ts @@ -1,24 +1,24 @@ /* eslint-disable lit/no-template-arrow */ import { LitElement, TemplateResult, html } from "lit"; import { customElement, state } from "lit/decorators"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import type { HomeAssistant } from "../../../src/types"; -import "../components/demo-black-white-row"; -import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry"; -import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry"; -import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry"; -import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor"; -import type { Condition } from "../../../src/data/automation"; -import "../../../src/panels/config/automation/condition/ha-automation-condition"; -import { HaDeviceCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-device"; -import { HaLogicalCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-logical"; -import HaNumericStateCondition from "../../../src/panels/config/automation/condition/types/ha-automation-condition-numeric_state"; -import { HaStateCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-state"; -import { HaSunCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-sun"; -import { HaTemplateCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-template"; -import { HaTimeCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-time"; -import { HaTriggerCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-trigger"; -import { HaZoneCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-zone"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import type { HomeAssistant } from "../../../../src/types"; +import "../../components/demo-black-white-row"; +import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry"; +import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry"; +import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry"; +import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor"; +import type { Condition } from "../../../../src/data/automation"; +import "../../../../src/panels/config/automation/condition/ha-automation-condition"; +import { HaDeviceCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-device"; +import { HaLogicalCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-logical"; +import HaNumericStateCondition from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-numeric_state"; +import { HaStateCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-state"; +import { HaSunCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-sun"; +import { HaTemplateCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-template"; +import { HaTimeCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-time"; +import { HaTriggerCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-trigger"; +import { HaZoneCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-zone"; const SCHEMAS: { name: string; conditions: Condition[] }[] = [ { diff --git a/gallery/src/demos/demo-automation-editor-trigger.ts b/gallery/src/demos/automation/editor-trigger.ts similarity index 58% rename from gallery/src/demos/demo-automation-editor-trigger.ts rename to gallery/src/demos/automation/editor-trigger.ts index 0bc04b743..af6d3bd6b 100644 --- a/gallery/src/demos/demo-automation-editor-trigger.ts +++ b/gallery/src/demos/automation/editor-trigger.ts @@ -1,29 +1,29 @@ /* eslint-disable lit/no-template-arrow */ import { LitElement, TemplateResult, html } from "lit"; import { customElement, state } from "lit/decorators"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import type { HomeAssistant } from "../../../src/types"; -import "../components/demo-black-white-row"; -import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry"; -import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry"; -import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry"; -import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor"; -import type { Trigger } from "../../../src/data/automation"; -import { HaGeolocationTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location"; -import { HaEventTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-event"; -import { HaHassTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant"; -import { HaNumericStateTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state"; -import { HaSunTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-sun"; -import { HaTagTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-tag"; -import { HaTemplateTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-template"; -import { HaTimeTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time"; -import { HaTimePatternTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern"; -import { HaWebhookTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-webhook"; -import { HaZoneTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-zone"; -import { HaDeviceTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-device"; -import { HaStateTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state"; -import { HaMQTTTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt"; -import "../../../src/panels/config/automation/trigger/ha-automation-trigger"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import type { HomeAssistant } from "../../../../src/types"; +import "../../components/demo-black-white-row"; +import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry"; +import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry"; +import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry"; +import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor"; +import type { Trigger } from "../../../../src/data/automation"; +import { HaGeolocationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location"; +import { HaEventTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-event"; +import { HaHassTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant"; +import { HaNumericStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state"; +import { HaSunTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-sun"; +import { HaTagTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-tag"; +import { HaTemplateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-template"; +import { HaTimeTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time"; +import { HaTimePatternTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern"; +import { HaWebhookTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-webhook"; +import { HaZoneTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-zone"; +import { HaDeviceTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-device"; +import { HaStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state"; +import { HaMQTTTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt"; +import "../../../../src/panels/config/automation/trigger/ha-automation-trigger"; const SCHEMAS: { name: string; triggers: Trigger[] }[] = [ { diff --git a/gallery/src/demos/demo-automation-trace-timeline.ts b/gallery/src/demos/automation/trace-timeline.ts similarity index 83% rename from gallery/src/demos/demo-automation-trace-timeline.ts rename to gallery/src/demos/automation/trace-timeline.ts index f94cd97fb..b4d9fea9e 100644 --- a/gallery/src/demos/demo-automation-trace-timeline.ts +++ b/gallery/src/demos/automation/trace-timeline.ts @@ -1,13 +1,13 @@ /* eslint-disable lit/no-template-arrow */ import { html, css, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; -import "../../../src/components/ha-card"; -import "../../../src/components/trace/hat-script-graph"; -import "../../../src/components/trace/hat-trace-timeline"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import { HomeAssistant } from "../../../src/types"; -import { mockDemoTrace } from "../data/traces/mock-demo-trace"; -import { DemoTrace } from "../data/traces/types"; +import "../../../../src/components/ha-card"; +import "../../../../src/components/trace/hat-script-graph"; +import "../../../../src/components/trace/hat-trace-timeline"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import { HomeAssistant } from "../../../../src/types"; +import { mockDemoTrace } from "../../data/traces/mock-demo-trace"; +import { DemoTrace } from "../../data/traces/types"; const traces: DemoTrace[] = [ mockDemoTrace({ state: "running" }), diff --git a/gallery/src/demos/demo-automation-trace.ts b/gallery/src/demos/automation/trace.ts similarity index 82% rename from gallery/src/demos/demo-automation-trace.ts rename to gallery/src/demos/automation/trace.ts index 508576c22..7de26e100 100644 --- a/gallery/src/demos/demo-automation-trace.ts +++ b/gallery/src/demos/automation/trace.ts @@ -1,14 +1,14 @@ /* eslint-disable lit/no-template-arrow */ import { html, css, LitElement, TemplateResult } from "lit"; -import "../../../src/components/ha-card"; -import "../../../src/components/trace/hat-script-graph"; -import "../../../src/components/trace/hat-trace-timeline"; +import "../../../../src/components/ha-card"; +import "../../../../src/components/trace/hat-script-graph"; +import "../../../../src/components/trace/hat-trace-timeline"; import { customElement, property, state } from "lit/decorators"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import { HomeAssistant } from "../../../src/types"; -import { DemoTrace } from "../data/traces/types"; -import { basicTrace } from "../data/traces/basic_trace"; -import { motionLightTrace } from "../data/traces/motion-light-trace"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import { HomeAssistant } from "../../../../src/types"; +import { DemoTrace } from "../../data/traces/types"; +import { basicTrace } from "../../data/traces/basic_trace"; +import { motionLightTrace } from "../../data/traces/motion-light-trace"; const traces: DemoTrace[] = [basicTrace, motionLightTrace]; diff --git a/gallery/src/demos/demo-ha-alert.markdown b/gallery/src/demos/components/ha-alert.markdown similarity index 100% rename from gallery/src/demos/demo-ha-alert.markdown rename to gallery/src/demos/components/ha-alert.markdown diff --git a/gallery/src/demos/demo-ha-alert.ts b/gallery/src/demos/components/ha-alert.ts similarity index 94% rename from gallery/src/demos/demo-ha-alert.ts rename to gallery/src/demos/components/ha-alert.ts index 3a62c4a1d..c4f44e80a 100644 --- a/gallery/src/demos/demo-ha-alert.ts +++ b/gallery/src/demos/components/ha-alert.ts @@ -1,10 +1,10 @@ import "@material/mwc-button/mwc-button"; import { css, html, LitElement, TemplateResult } from "lit"; import { customElement } from "lit/decorators"; -import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element"; -import "../../../src/components/ha-alert"; -import "../../../src/components/ha-card"; -import "../../../src/components/ha-logo-svg"; +import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element"; +import "../../../../src/components/ha-alert"; +import "../../../../src/components/ha-card"; +import "../../../../src/components/ha-logo-svg"; const alerts: { title?: string; @@ -128,7 +128,7 @@ const alerts: { }, ]; -@customElement("demo-ha-alert") +@customElement("demo-components-ha-alert") export class DemoHaAlert extends LitElement { protected render(): TemplateResult { return html` @@ -212,6 +212,6 @@ export class DemoHaAlert extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-ha-alert": DemoHaAlert; + "demo-components-ha-alert": DemoHaAlert; } } diff --git a/gallery/src/demos/demo-ha-bar.ts b/gallery/src/demos/components/ha-bar.ts similarity index 90% rename from gallery/src/demos/demo-ha-bar.ts rename to gallery/src/demos/components/ha-bar.ts index 83f47f5dd..797e3ff30 100644 --- a/gallery/src/demos/demo-ha-bar.ts +++ b/gallery/src/demos/components/ha-bar.ts @@ -1,8 +1,8 @@ import { html, css, LitElement, TemplateResult } from "lit"; import { customElement } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; -import "../../../src/components/ha-bar"; -import "../../../src/components/ha-card"; +import "../../../../src/components/ha-bar"; +import "../../../../src/components/ha-card"; const bars: { min?: number; @@ -34,7 +34,7 @@ const bars: { }, ]; -@customElement("demo-ha-bar") +@customElement("demo-components-ha-bar") export class DemoHaBar extends LitElement { protected render(): TemplateResult { return html` @@ -80,6 +80,6 @@ export class DemoHaBar extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-ha-bar": DemoHaBar; + "demo-components-ha-bar": DemoHaBar; } } diff --git a/gallery/src/demos/demo-ha-chips.ts b/gallery/src/demos/components/ha-chips.ts similarity index 86% rename from gallery/src/demos/demo-ha-chips.ts rename to gallery/src/demos/components/ha-chips.ts index d1dcc2ae7..a81606458 100644 --- a/gallery/src/demos/demo-ha-chips.ts +++ b/gallery/src/demos/components/ha-chips.ts @@ -1,10 +1,10 @@ import { mdiHomeAssistant } from "@mdi/js"; import { css, html, LitElement, TemplateResult } from "lit"; import { customElement } from "lit/decorators"; -import "../../../src/components/ha-card"; -import "../../../src/components/ha-chip"; -import "../../../src/components/ha-chip-set"; -import "../../../src/components/ha-svg-icon"; +import "../../../../src/components/ha-card"; +import "../../../../src/components/ha-chip"; +import "../../../../src/components/ha-chip-set"; +import "../../../../src/components/ha-svg-icon"; const chips: { icon?: string; @@ -23,7 +23,7 @@ const chips: { }, ]; -@customElement("demo-ha-chips") +@customElement("demo-components-ha-chips") export class DemoHaChips extends LitElement { protected render(): TemplateResult { return html` @@ -81,6 +81,6 @@ export class DemoHaChips extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-ha-chips": DemoHaChips; + "demo-components-ha-chips": DemoHaChips; } } diff --git a/gallery/src/demos/demo-ha-faded.ts b/gallery/src/demos/components/ha-faded.ts similarity index 96% rename from gallery/src/demos/demo-ha-faded.ts rename to gallery/src/demos/components/ha-faded.ts index 65dcb4315..1f962ef10 100644 --- a/gallery/src/demos/demo-ha-faded.ts +++ b/gallery/src/demos/components/ha-faded.ts @@ -1,8 +1,8 @@ import { css, html, LitElement, TemplateResult } from "lit"; import { customElement } from "lit/decorators"; -import "../../../src/components/ha-card"; -import "../../../src/components/ha-faded"; -import "../../../src/components/ha-markdown"; +import "../../../../src/components/ha-card"; +import "../../../../src/components/ha-faded"; +import "../../../../src/components/ha-markdown"; const LONG_TEXT = ` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet velit ut elit volutpat, eget ultrices odio lacinia. In imperdiet malesuada est, nec sagittis metus ultricies quis. Sed nisl ex, convallis porttitor ante quis, hendrerit tristique justo. Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque sed consequat risus. Suspendisse facilisis ligula a odio consectetur condimentum. Curabitur vehicula elit nec augue mollis, et volutpat massa dictum. @@ -18,7 +18,7 @@ Quisque posuere, velit sed porttitor dapibus, neque augue fringilla felis, eu lu const SMALL_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit."; -@customElement("demo-ha-faded") +@customElement("demo-components-ha-faded") export class DemoHaFaded extends LitElement { protected render(): TemplateResult { return html` @@ -83,6 +83,6 @@ export class DemoHaFaded extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-ha-faded": DemoHaFaded; + "demo-components-ha-faded": DemoHaFaded; } } diff --git a/gallery/src/demos/demo-ha-form.ts b/gallery/src/demos/components/ha-form.ts similarity index 94% rename from gallery/src/demos/demo-ha-form.ts rename to gallery/src/demos/components/ha-form.ts index 69933af07..324eb3a58 100644 --- a/gallery/src/demos/demo-ha-form.ts +++ b/gallery/src/demos/components/ha-form.ts @@ -2,10 +2,10 @@ import "@material/mwc-button"; import { LitElement, TemplateResult, html } from "lit"; import { customElement } from "lit/decorators"; -import { computeInitialHaFormData } from "../../../src/components/ha-form/compute-initial-ha-form-data"; -import type { HaFormSchema } from "../../../src/components/ha-form/types"; -import "../../../src/components/ha-form/ha-form"; -import "../components/demo-black-white-row"; +import { computeInitialHaFormData } from "../../../../src/components/ha-form/compute-initial-ha-form-data"; +import type { HaFormSchema } from "../../../../src/components/ha-form/types"; +import "../../../../src/components/ha-form/ha-form"; +import "../../components/demo-black-white-row"; const SCHEMAS: { title: string; @@ -248,7 +248,7 @@ const SCHEMAS: { }, ]; -@customElement("demo-ha-form") +@customElement("demo-components-ha-form") class DemoHaForm extends LitElement { private data = SCHEMAS.map( ({ schema, data }) => data || computeInitialHaFormData(schema) @@ -301,6 +301,6 @@ class DemoHaForm extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-ha-form": DemoHaForm; + "demo-components-ha-form": DemoHaForm; } } diff --git a/gallery/src/demos/demo-ha-label-badge.ts b/gallery/src/demos/components/ha-label-badge.ts similarity index 92% rename from gallery/src/demos/demo-ha-label-badge.ts rename to gallery/src/demos/components/ha-label-badge.ts index 277c53904..7a164dc87 100644 --- a/gallery/src/demos/demo-ha-label-badge.ts +++ b/gallery/src/demos/components/ha-label-badge.ts @@ -1,7 +1,7 @@ import { html, css, LitElement, TemplateResult } from "lit"; import { customElement } from "lit/decorators"; -import "../../../src/components/ha-label-badge"; -import "../../../src/components/ha-card"; +import "../../../../src/components/ha-label-badge"; +import "../../../../src/components/ha-card"; const colors = ["#03a9f4", "#ffa600", "#43a047"]; @@ -50,7 +50,7 @@ const badges: { }, ]; -@customElement("demo-ha-label-badge") +@customElement("demo-components-ha-label-badge") export class DemoHaLabelBadge extends LitElement { protected render(): TemplateResult { return html` @@ -117,6 +117,6 @@ export class DemoHaLabelBadge extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-ha-label-badge": DemoHaLabelBadge; + "demo-components-ha-label-badge": DemoHaLabelBadge; } } diff --git a/gallery/src/demos/demo-ha-selector.ts b/gallery/src/demos/components/ha-selector.ts similarity index 81% rename from gallery/src/demos/demo-ha-selector.ts rename to gallery/src/demos/components/ha-selector.ts index 919a2c241..b25790a29 100644 --- a/gallery/src/demos/demo-ha-selector.ts +++ b/gallery/src/demos/components/ha-selector.ts @@ -2,16 +2,16 @@ import "@material/mwc-button"; import { LitElement, TemplateResult, css, html } from "lit"; import { customElement, state } from "lit/decorators"; -import "../../../src/components/ha-selector/ha-selector"; -import "../../../src/components/ha-settings-row"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import type { HomeAssistant } from "../../../src/types"; -import "../components/demo-black-white-row"; -import { BlueprintInput } from "../../../src/data/blueprint"; -import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry"; -import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry"; -import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry"; -import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor"; +import "../../../../src/components/ha-selector/ha-selector"; +import "../../../../src/components/ha-settings-row"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import type { HomeAssistant } from "../../../../src/types"; +import "../../components/demo-black-white-row"; +import { BlueprintInput } from "../../../../src/data/blueprint"; +import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry"; +import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry"; +import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry"; +import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor"; const SCHEMAS: { name: string; @@ -62,7 +62,7 @@ const SCHEMAS: { }, ]; -@customElement("demo-ha-selector") +@customElement("demo-components-ha-selector") class DemoHaSelector extends LitElement { @state() private hass!: HomeAssistant; @@ -126,6 +126,6 @@ class DemoHaSelector extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-ha-selector": DemoHaSelector; + "demo-components-ha-selector": DemoHaSelector; } } diff --git a/gallery/src/demos/demo-introduction.markdown b/gallery/src/demos/introduction/introduction.markdown similarity index 93% rename from gallery/src/demos/demo-introduction.markdown rename to gallery/src/demos/introduction/introduction.markdown index d80033b05..a6fa62a9a 100644 --- a/gallery/src/demos/demo-introduction.markdown +++ b/gallery/src/demos/introduction/introduction.markdown @@ -1,3 +1,6 @@ +--- +title: Introduction +--- Lovelace has many different cards. Each card allows the user to tell a different story about what is going on in their house. These cards are very customizable, as no household is the same. diff --git a/gallery/src/demos/lovelace/alarm-panel-card.markdown b/gallery/src/demos/lovelace/alarm-panel-card.markdown new file mode 100644 index 000000000..30b1662ad --- /dev/null +++ b/gallery/src/demos/lovelace/alarm-panel-card.markdown @@ -0,0 +1,3 @@ +--- +title: Alarm Panel Card +--- diff --git a/gallery/src/demos/demo-hui-alarm-panel-card.ts b/gallery/src/demos/lovelace/alarm-panel-card.ts similarity index 87% rename from gallery/src/demos/demo-hui-alarm-panel-card.ts rename to gallery/src/demos/lovelace/alarm-panel-card.ts index be9a5a22e..b55b1ca5d 100644 --- a/gallery/src/demos/demo-hui-alarm-panel-card.ts +++ b/gallery/src/demos/lovelace/alarm-panel-card.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { getEntity } from "../../../src/fake_data/entity"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { getEntity } from "../../../../src/fake_data/entity"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const ENTITIES = [ getEntity("alarm_control_panel", "alarm", "disarmed", { @@ -70,7 +70,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-alarm-panel-card") +@customElement("demo-lovelace-alarm-panel-card") class DemoAlarmPanelEntity extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -89,6 +89,6 @@ class DemoAlarmPanelEntity extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-alarm-panel-card": DemoAlarmPanelEntity; + "demo-lovelace-alarm-panel-card": DemoAlarmPanelEntity; } } diff --git a/gallery/src/demos/demo-hui-area-card.ts b/gallery/src/demos/lovelace/area-card.ts similarity index 93% rename from gallery/src/demos/demo-hui-area-card.ts rename to gallery/src/demos/lovelace/area-card.ts index bbb6dedfd..3d46fc031 100644 --- a/gallery/src/demos/demo-hui-area-card.ts +++ b/gallery/src/demos/lovelace/area-card.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { getEntity } from "../../../src/fake_data/entity"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { getEntity } from "../../../../src/fake_data/entity"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const ENTITIES = [ getEntity("light", "bed_light", "on", { @@ -75,7 +75,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-area-card") +@customElement("demo-lovelace-area-card") class DemoArea extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -151,6 +151,6 @@ class DemoArea extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-area-card": DemoArea; + "demo-lovelace-area-card": DemoArea; } } diff --git a/gallery/src/demos/demo-hui-conditional-card.ts b/gallery/src/demos/lovelace/conditional-card.ts similarity index 85% rename from gallery/src/demos/demo-hui-conditional-card.ts rename to gallery/src/demos/lovelace/conditional-card.ts index 5977ee3c0..bdaf093ed 100644 --- a/gallery/src/demos/demo-hui-conditional-card.ts +++ b/gallery/src/demos/lovelace/conditional-card.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { getEntity } from "../../../src/fake_data/entity"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { getEntity } from "../../../../src/fake_data/entity"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const ENTITIES = [ getEntity("light", "controller_1", "on", { @@ -52,7 +52,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-conditional-card") +@customElement("demo-lovelace-conditional-card") class DemoConditional extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -71,6 +71,6 @@ class DemoConditional extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-conditional-card": DemoConditional; + "demo-lovelace-conditional-card": DemoConditional; } } diff --git a/gallery/src/demos/demo-hui-entities-card.ts b/gallery/src/demos/lovelace/entities-card.ts similarity index 95% rename from gallery/src/demos/demo-hui-entities-card.ts rename to gallery/src/demos/lovelace/entities-card.ts index c6ed878c0..aab189d21 100644 --- a/gallery/src/demos/demo-hui-entities-card.ts +++ b/gallery/src/demos/lovelace/entities-card.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { getEntity } from "../../../src/fake_data/entity"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { getEntity } from "../../../../src/fake_data/entity"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const ENTITIES = [ getEntity("light", "bed_light", "on", { @@ -216,7 +216,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-entities-card") +@customElement("demo-lovelace-entities-card") class DemoEntities extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -235,6 +235,6 @@ class DemoEntities extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-entities-card": DemoEntities; + "demo-lovelace-entities-card": DemoEntities; } } diff --git a/gallery/src/demos/demo-hui-entity-button-card.ts b/gallery/src/demos/lovelace/entity-button-card.ts similarity index 85% rename from gallery/src/demos/demo-hui-entity-button-card.ts rename to gallery/src/demos/lovelace/entity-button-card.ts index 320eb8f8c..871862939 100644 --- a/gallery/src/demos/demo-hui-entity-button-card.ts +++ b/gallery/src/demos/lovelace/entity-button-card.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { getEntity } from "../../../src/fake_data/entity"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { getEntity } from "../../../../src/fake_data/entity"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const ENTITIES = [ getEntity("light", "bed_light", "on", { @@ -68,7 +68,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-entity-button-card") +@customElement("demo-lovelace-entity-button-card") class DemoButtonEntity extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -87,6 +87,6 @@ class DemoButtonEntity extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-entity-button-card": DemoButtonEntity; + "demo-lovelace-entity-button-card": DemoButtonEntity; } } diff --git a/gallery/src/demos/demo-hui-entity-filter-card.ts b/gallery/src/demos/lovelace/entity-filter-card.ts similarity index 91% rename from gallery/src/demos/demo-hui-entity-filter-card.ts rename to gallery/src/demos/lovelace/entity-filter-card.ts index 3a0162ae7..879cf3bb7 100644 --- a/gallery/src/demos/demo-hui-entity-filter-card.ts +++ b/gallery/src/demos/lovelace/entity-filter-card.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { getEntity } from "../../../src/fake_data/entity"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { getEntity } from "../../../../src/fake_data/entity"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const ENTITIES = [ getEntity("device_tracker", "demo_paulus", "work", { @@ -109,7 +109,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-entity-filter-card") +@customElement("demo-lovelace-entity-filter-card") class DemoEntityFilter extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -128,6 +128,6 @@ class DemoEntityFilter extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-entity-filter-card": DemoEntityFilter; + "demo-lovelace-entity-filter-card": DemoEntityFilter; } } diff --git a/gallery/src/demos/demo-hui-gauge-card.ts b/gallery/src/demos/lovelace/gauge-card.ts similarity index 90% rename from gallery/src/demos/demo-hui-gauge-card.ts rename to gallery/src/demos/lovelace/gauge-card.ts index fdcf07188..9094f678b 100644 --- a/gallery/src/demos/demo-hui-gauge-card.ts +++ b/gallery/src/demos/lovelace/gauge-card.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { getEntity } from "../../../src/fake_data/entity"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { getEntity } from "../../../../src/fake_data/entity"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const ENTITIES = [ getEntity("sensor", "brightness", "12", {}), @@ -106,7 +106,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-gauge-card") +@customElement("demo-lovelace-gauge-card") class DemoGaugeEntity extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -125,6 +125,6 @@ class DemoGaugeEntity extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-gauge-card": DemoGaugeEntity; + "demo-lovelace-gauge-card": DemoGaugeEntity; } } diff --git a/gallery/src/demos/demo-hui-glance-card.ts b/gallery/src/demos/lovelace/glance-card.ts similarity index 95% rename from gallery/src/demos/demo-hui-glance-card.ts rename to gallery/src/demos/lovelace/glance-card.ts index c078ba5f6..1e4d0755d 100644 --- a/gallery/src/demos/demo-hui-glance-card.ts +++ b/gallery/src/demos/lovelace/glance-card.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { getEntity } from "../../../src/fake_data/entity"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { getEntity } from "../../../../src/fake_data/entity"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const ENTITIES = [ getEntity("device_tracker", "demo_paulus", "home", { @@ -209,7 +209,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-glance-card") +@customElement("demo-lovelace-glance-card") class DemoGlanceEntity extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -228,6 +228,6 @@ class DemoGlanceEntity extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-glance-card": DemoGlanceEntity; + "demo-lovelace-glance-card": DemoGlanceEntity; } } diff --git a/gallery/src/demos/demo-hui-grid-and-stack-card.ts b/gallery/src/demos/lovelace/grid-and-stack-card.ts similarity index 93% rename from gallery/src/demos/demo-hui-grid-and-stack-card.ts rename to gallery/src/demos/lovelace/grid-and-stack-card.ts index 6b743b243..9fc7d6f5e 100644 --- a/gallery/src/demos/demo-hui-grid-and-stack-card.ts +++ b/gallery/src/demos/lovelace/grid-and-stack-card.ts @@ -1,9 +1,9 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { mockHistory } from "../../../demo/src/stubs/history"; -import { getEntity } from "../../../src/fake_data/entity"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { mockHistory } from "../../../../demo/src/stubs/history"; +import { getEntity } from "../../../../src/fake_data/entity"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const ENTITIES = [ getEntity("light", "kitchen_lights", "on", { @@ -199,7 +199,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-grid-and-stack-card") +@customElement("demo-lovelace-grid-and-stack-card") class DemoStack extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -219,6 +219,6 @@ class DemoStack extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-grid-and-stack-card": DemoStack; + "demo-lovelace-grid-and-stack-card": DemoStack; } } diff --git a/gallery/src/demos/demo-hui-iframe-card.ts b/gallery/src/demos/lovelace/iframe-card.ts similarity index 84% rename from gallery/src/demos/demo-hui-iframe-card.ts rename to gallery/src/demos/lovelace/iframe-card.ts index 32d7e3914..72800f640 100644 --- a/gallery/src/demos/demo-hui-iframe-card.ts +++ b/gallery/src/demos/lovelace/iframe-card.ts @@ -1,7 +1,7 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const CONFIGS = [ { @@ -37,7 +37,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-iframe-card") +@customElement("demo-lovelace-iframe-card") class DemoIframe extends LitElement { @query("demo-cards") private _demos!: HTMLElement; @@ -53,6 +53,6 @@ class DemoIframe extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-iframe-card": DemoIframe; + "demo-lovelace-iframe-card": DemoIframe; } } diff --git a/gallery/src/demos/demo-hui-light-card.ts b/gallery/src/demos/lovelace/light-card.ts similarity index 86% rename from gallery/src/demos/demo-hui-light-card.ts rename to gallery/src/demos/lovelace/light-card.ts index 8cae0ff9d..3b0fc0101 100644 --- a/gallery/src/demos/demo-hui-light-card.ts +++ b/gallery/src/demos/lovelace/light-card.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { getEntity } from "../../../src/fake_data/entity"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { getEntity } from "../../../../src/fake_data/entity"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const ENTITIES = [ getEntity("light", "bed_light", "on", { @@ -62,7 +62,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-light-card") +@customElement("demo-lovelace-light-card") class DemoLightEntity extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -81,6 +81,6 @@ class DemoLightEntity extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-light-card": DemoLightEntity; + "demo-lovelace-light-card": DemoLightEntity; } } diff --git a/gallery/src/demos/demo-hui-map-card.ts b/gallery/src/demos/lovelace/map-card.ts similarity index 93% rename from gallery/src/demos/demo-hui-map-card.ts rename to gallery/src/demos/lovelace/map-card.ts index 68912a6e7..db83496bf 100644 --- a/gallery/src/demos/demo-hui-map-card.ts +++ b/gallery/src/demos/lovelace/map-card.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { getEntity } from "../../../src/fake_data/entity"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { getEntity } from "../../../../src/fake_data/entity"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const ENTITIES = [ getEntity("device_tracker", "demo_paulus", "not_home", { @@ -160,7 +160,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-map-card") +@customElement("demo-lovelace-map-card") class DemoMap extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -179,6 +179,6 @@ class DemoMap extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-map-card": DemoMap; + "demo-lovelace-map-card": DemoMap; } } diff --git a/gallery/src/demos/demo-hui-markdown-card.ts b/gallery/src/demos/lovelace/markdown-card.ts similarity index 95% rename from gallery/src/demos/demo-hui-markdown-card.ts rename to gallery/src/demos/lovelace/markdown-card.ts index 6e34a04c6..2b6257cd2 100644 --- a/gallery/src/demos/demo-hui-markdown-card.ts +++ b/gallery/src/demos/lovelace/markdown-card.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { mockTemplate } from "../../../demo/src/stubs/template"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { mockTemplate } from "../../../../demo/src/stubs/template"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const CONFIGS = [ { @@ -253,7 +253,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-markdown-card") +@customElement("demo-lovelace-markdown-card") class DemoMarkdown extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -272,6 +272,6 @@ class DemoMarkdown extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-markdown-card": DemoMarkdown; + "demo-lovelace-markdown-card": DemoMarkdown; } } diff --git a/gallery/src/demos/demo-hui-media-control-card.ts b/gallery/src/demos/lovelace/media-control-card.ts similarity index 92% rename from gallery/src/demos/demo-hui-media-control-card.ts rename to gallery/src/demos/lovelace/media-control-card.ts index 0b963f36e..9fb7ab7b5 100644 --- a/gallery/src/demos/demo-hui-media-control-card.ts +++ b/gallery/src/demos/lovelace/media-control-card.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; -import { createMediaPlayerEntities } from "../data/media_players"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; +import { createMediaPlayerEntities } from "../../data/media_players"; const CONFIGS = [ { @@ -157,7 +157,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-media-control-card") +@customElement("demo-lovelace-media-control-card") class DemoHuiMediaControlCard extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -176,6 +176,6 @@ class DemoHuiMediaControlCard extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-media-control-card": DemoHuiMediaControlCard; + "demo-lovelace-media-control-card": DemoHuiMediaControlCard; } } diff --git a/gallery/src/demos/demo-hui-media-player-row.ts b/gallery/src/demos/lovelace/media-player-row.ts similarity index 88% rename from gallery/src/demos/demo-hui-media-player-row.ts rename to gallery/src/demos/lovelace/media-player-row.ts index f99b20fcd..44433bc08 100644 --- a/gallery/src/demos/demo-hui-media-player-row.ts +++ b/gallery/src/demos/lovelace/media-player-row.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; -import { createMediaPlayerEntities } from "../data/media_players"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; +import { createMediaPlayerEntities } from "../../data/media_players"; const CONFIGS = [ { @@ -54,7 +54,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-media-player-row") +@customElement("demo-lovelace-media-player-row") class DemoHuiMediaPlayerRow extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -73,6 +73,6 @@ class DemoHuiMediaPlayerRow extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-media-player-rows": DemoHuiMediaPlayerRow; + "demo-lovelace-media-player-rows": DemoHuiMediaPlayerRow; } } diff --git a/gallery/src/demos/demo-hui-picture-elements-card.ts b/gallery/src/demos/lovelace/picture-elements-card.ts similarity index 92% rename from gallery/src/demos/demo-hui-picture-elements-card.ts rename to gallery/src/demos/lovelace/picture-elements-card.ts index c3fcc7d61..f1f594115 100644 --- a/gallery/src/demos/demo-hui-picture-elements-card.ts +++ b/gallery/src/demos/lovelace/picture-elements-card.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { getEntity } from "../../../src/fake_data/entity"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { getEntity } from "../../../../src/fake_data/entity"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const ENTITIES = [ getEntity("light", "bed_light", "on", { @@ -124,7 +124,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-picture-elements-card") +@customElement("demo-lovelace-picture-elements-card") class DemoPictureElements extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -143,6 +143,6 @@ class DemoPictureElements extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-picture-elements-card": DemoPictureElements; + "demo-lovelace-picture-elements-card": DemoPictureElements; } } diff --git a/gallery/src/demos/demo-hui-picture-entity-card.ts b/gallery/src/demos/lovelace/picture-entity-card.ts similarity index 87% rename from gallery/src/demos/demo-hui-picture-entity-card.ts rename to gallery/src/demos/lovelace/picture-entity-card.ts index 6b8d8418e..b88d97cbc 100644 --- a/gallery/src/demos/demo-hui-picture-entity-card.ts +++ b/gallery/src/demos/lovelace/picture-entity-card.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { getEntity } from "../../../src/fake_data/entity"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { getEntity } from "../../../../src/fake_data/entity"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const ENTITIES = [ getEntity("light", "kitchen_lights", "on", { @@ -79,7 +79,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-picture-entity-card") +@customElement("demo-lovelace-picture-entity-card") class DemoPictureEntity extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -98,6 +98,6 @@ class DemoPictureEntity extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-picture-entity-card": DemoPictureEntity; + "demo-lovelace-picture-entity-card": DemoPictureEntity; } } diff --git a/gallery/src/demos/demo-hui-picture-glance-card.ts b/gallery/src/demos/lovelace/picture-glance-card.ts similarity index 91% rename from gallery/src/demos/demo-hui-picture-glance-card.ts rename to gallery/src/demos/lovelace/picture-glance-card.ts index b82c2a2fa..f698754ea 100644 --- a/gallery/src/demos/demo-hui-picture-glance-card.ts +++ b/gallery/src/demos/lovelace/picture-glance-card.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { getEntity } from "../../../src/fake_data/entity"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { getEntity } from "../../../../src/fake_data/entity"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const ENTITIES = [ getEntity("switch", "decorative_lights", "on", { @@ -120,7 +120,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-picture-glance-card") +@customElement("demo-lovelace-picture-glance-card") class DemoPictureGlance extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -139,6 +139,6 @@ class DemoPictureGlance extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-picture-glance-card": DemoPictureGlance; + "demo-lovelace-picture-glance-card": DemoPictureGlance; } } diff --git a/gallery/src/demos/demo-hui-plant-card.ts b/gallery/src/demos/lovelace/plant-card.ts similarity index 81% rename from gallery/src/demos/demo-hui-plant-card.ts rename to gallery/src/demos/lovelace/plant-card.ts index 683d0c6a3..99b6780ae 100644 --- a/gallery/src/demos/demo-hui-plant-card.ts +++ b/gallery/src/demos/lovelace/plant-card.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; -import { createPlantEntities } from "../data/plants"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; +import { createPlantEntities } from "../../data/plants"; const CONFIGS = [ { @@ -29,7 +29,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-plant-card") +@customElement("demo-lovelace-plant-card") export class DemoPlantEntity extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -48,6 +48,6 @@ export class DemoPlantEntity extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-plant-card": DemoPlantEntity; + "demo-lovelace-plant-card": DemoPlantEntity; } } diff --git a/gallery/src/demos/demo-hui-shopping-list-card.ts b/gallery/src/demos/lovelace/shopping-list-card.ts similarity index 83% rename from gallery/src/demos/demo-hui-shopping-list-card.ts rename to gallery/src/demos/lovelace/shopping-list-card.ts index 034c150ab..68b089451 100644 --- a/gallery/src/demos/demo-hui-shopping-list-card.ts +++ b/gallery/src/demos/lovelace/shopping-list-card.ts @@ -1,7 +1,7 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const CONFIGS = [ { @@ -19,7 +19,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-shopping-list-card") +@customElement("demo-lovelace-shopping-list-card") class DemoShoppingListEntity extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -44,6 +44,6 @@ class DemoShoppingListEntity extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-shopping-list-card": DemoShoppingListEntity; + "demo-lovelace-shopping-list-card": DemoShoppingListEntity; } } diff --git a/gallery/src/demos/demo-hui-thermostat-card.ts b/gallery/src/demos/lovelace/thermostat-card.ts similarity index 88% rename from gallery/src/demos/demo-hui-thermostat-card.ts rename to gallery/src/demos/lovelace/thermostat-card.ts index 86216da56..cc33346a0 100644 --- a/gallery/src/demos/demo-hui-thermostat-card.ts +++ b/gallery/src/demos/lovelace/thermostat-card.ts @@ -1,8 +1,8 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, query } from "lit/decorators"; -import { getEntity } from "../../../src/fake_data/entity"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import "../components/demo-cards"; +import { getEntity } from "../../../../src/fake_data/entity"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-cards"; const ENTITIES = [ getEntity("climate", "ecobee", "auto", { @@ -73,7 +73,7 @@ const CONFIGS = [ }, ]; -@customElement("demo-hui-thermostat-card") +@customElement("demo-lovelace-thermostat-card") class DemoThermostatEntity extends LitElement { @query("#demos") private _demoRoot!: HTMLElement; @@ -92,6 +92,6 @@ class DemoThermostatEntity extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-hui-thermostat-card": DemoThermostatEntity; + "demo-lovelace-thermostat-card": DemoThermostatEntity; } } diff --git a/gallery/src/demos/demo-more-info-cover.ts b/gallery/src/demos/more-info/cover.ts similarity index 93% rename from gallery/src/demos/demo-more-info-cover.ts rename to gallery/src/demos/more-info/cover.ts index f715d5fc9..6afa1a6ff 100644 --- a/gallery/src/demos/demo-more-info-cover.ts +++ b/gallery/src/demos/more-info/cover.ts @@ -1,6 +1,6 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, property, query } from "lit/decorators"; -import "../../../src/components/ha-card"; +import "../../../../src/components/ha-card"; import { SUPPORT_OPEN, SUPPORT_STOP, @@ -10,14 +10,14 @@ import { SUPPORT_STOP_TILT, SUPPORT_CLOSE_TILT, SUPPORT_SET_TILT_POSITION, -} from "../../../src/data/cover"; -import "../../../src/dialogs/more-info/more-info-content"; -import { getEntity } from "../../../src/fake_data/entity"; +} from "../../../../src/data/cover"; +import "../../../../src/dialogs/more-info/more-info-content"; +import { getEntity } from "../../../../src/fake_data/entity"; import { MockHomeAssistant, provideHass, -} from "../../../src/fake_data/provide_hass"; -import "../components/demo-more-infos"; +} from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-more-infos"; const ENTITIES = [ getEntity("cover", "position_buttons", "on", { diff --git a/gallery/src/demos/demo-more-info-light.ts b/gallery/src/demos/more-info/light.ts similarity index 93% rename from gallery/src/demos/demo-more-info-light.ts rename to gallery/src/demos/more-info/light.ts index a3107a5df..530b95909 100644 --- a/gallery/src/demos/demo-more-info-light.ts +++ b/gallery/src/demos/more-info/light.ts @@ -1,19 +1,19 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { customElement, property, query } from "lit/decorators"; -import "../../../src/components/ha-card"; +import "../../../../src/components/ha-card"; import { LightColorModes, SUPPORT_EFFECT, SUPPORT_FLASH, SUPPORT_TRANSITION, -} from "../../../src/data/light"; -import "../../../src/dialogs/more-info/more-info-content"; -import { getEntity } from "../../../src/fake_data/entity"; +} from "../../../../src/data/light"; +import "../../../../src/dialogs/more-info/more-info-content"; +import { getEntity } from "../../../../src/fake_data/entity"; import { MockHomeAssistant, provideHass, -} from "../../../src/fake_data/provide_hass"; -import "../components/demo-more-infos"; +} from "../../../../src/fake_data/provide_hass"; +import "../../components/demo-more-infos"; const ENTITIES = [ getEntity("light", "bed_light", "on", { diff --git a/gallery/src/demos/demo-integration-card.ts b/gallery/src/demos/rest/integration-card.ts similarity index 91% rename from gallery/src/demos/demo-integration-card.ts rename to gallery/src/demos/rest/integration-card.ts index 5067d6e45..b00760485 100644 --- a/gallery/src/demos/demo-integration-card.ts +++ b/gallery/src/demos/rest/integration-card.ts @@ -1,22 +1,22 @@ import { html, css, LitElement, TemplateResult } from "lit"; -import "../../../src/components/ha-formfield"; -import "../../../src/components/ha-switch"; +import "../../../../src/components/ha-formfield"; +import "../../../../src/components/ha-switch"; import { classMap } from "lit/directives/class-map"; import { customElement, property, state } from "lit/decorators"; -import { IntegrationManifest } from "../../../src/data/integration"; +import { IntegrationManifest } from "../../../../src/data/integration"; -import { provideHass } from "../../../src/fake_data/provide_hass"; -import { HomeAssistant } from "../../../src/types"; -import "../../../src/panels/config/integrations/ha-integration-card"; -import "../../../src/panels/config/integrations/ha-ignored-config-entry-card"; -import "../../../src/panels/config/integrations/ha-config-flow-card"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import { HomeAssistant } from "../../../../src/types"; +import "../../../../src/panels/config/integrations/ha-integration-card"; +import "../../../../src/panels/config/integrations/ha-ignored-config-entry-card"; +import "../../../../src/panels/config/integrations/ha-config-flow-card"; import type { ConfigEntryExtended, DataEntryFlowProgressExtended, -} from "../../../src/panels/config/integrations/ha-config-integrations"; -import { DeviceRegistryEntry } from "../../../src/data/device_registry"; -import { EntityRegistryEntry } from "../../../src/data/entity_registry"; +} from "../../../../src/panels/config/integrations/ha-config-integrations"; +import { DeviceRegistryEntry } from "../../../../src/data/device_registry"; +import { EntityRegistryEntry } from "../../../../src/data/entity_registry"; const createConfigEntry = ( title: string, @@ -217,7 +217,7 @@ const createDeviceRegistryEntries = ( }, ]; -@customElement("demo-integration-card") +@customElement("demo-rest-integration-card") export class DemoIntegrationCard extends LitElement { @property({ attribute: false }) hass?: HomeAssistant; @@ -352,6 +352,6 @@ export class DemoIntegrationCard extends LitElement { declare global { interface HTMLElementTagNameMap { - "demo-integration-card": DemoIntegrationCard; + "demo-rest-integration-card": DemoIntegrationCard; } } diff --git a/gallery/src/demos/demo-util-long-press.ts b/gallery/src/demos/rest/util-long-press.ts similarity index 83% rename from gallery/src/demos/demo-util-long-press.ts rename to gallery/src/demos/rest/util-long-press.ts index d7851dcef..0188cf0af 100644 --- a/gallery/src/demos/demo-util-long-press.ts +++ b/gallery/src/demos/rest/util-long-press.ts @@ -1,11 +1,11 @@ import "@material/mwc-button"; import { css, html, LitElement, TemplateResult } from "lit"; import { customElement } from "lit/decorators"; -import "../../../src/components/ha-card"; -import { ActionHandlerEvent } from "../../../src/data/lovelace"; -import { actionHandler } from "../../../src/panels/lovelace/common/directives/action-handler-directive"; +import "../../../../src/components/ha-card"; +import { ActionHandlerEvent } from "../../../../src/data/lovelace"; +import { actionHandler } from "../../../../src/panels/lovelace/common/directives/action-handler-directive"; -@customElement("demo-util-long-press") +@customElement("demo-rest-util-long-press") export class DemoUtilLongPress extends LitElement { protected render(): TemplateResult { return html` diff --git a/gallery/src/ha-gallery.ts b/gallery/src/ha-gallery.ts index 2aa583ca1..0454111a1 100644 --- a/gallery/src/ha-gallery.ts +++ b/gallery/src/ha-gallery.ts @@ -3,14 +3,16 @@ import "@material/mwc-drawer"; import "@material/mwc-top-app-bar-fixed"; import { html, css, LitElement, PropertyValues } from "lit"; import { customElement, property, query } from "lit/decorators"; -import { until } from "lit/directives/until"; import "../../src/components/ha-card"; import "../../src/components/ha-icon-button"; import "../../src/managers/notification-manager"; import { haStyle } from "../../src/resources/styles"; -import { DEMOS } from "../build/import-demos"; +import { DEMOS, SIDEBAR } from "../build/import-demos"; import { dynamicElement } from "../../src/common/dom/dynamic-element-directive"; -import { SIDEBAR } from "./sidebar"; +import "./components/demo-description"; + +const GITHUB_DEMO_URL = + "https://github.com/home-assistant/frontend/blob/dev/gallery/src/demos/"; const FAKE_HASS = { // Just enough for computeRTL for notification-manager @@ -23,7 +25,8 @@ const FAKE_HASS = { @customElement("ha-gallery") class HaGallery extends LitElement { @property() private _demo = - document.location.hash.substring(1) || SIDEBAR[0].demos![0]; + document.location.hash.substring(1) || + `${SIDEBAR[0].category}/${SIDEBAR[0].demos![0]}`; @query("notification-manager") private _notifications!: HTMLElementTagNameMap["notification-manager"]; @@ -37,28 +40,21 @@ class HaGallery extends LitElement { const sidebar: unknown[] = []; for (const group of SIDEBAR) { - let sectionOpen = false; const links: unknown[] = []; for (const demo of group.demos!) { - const active = this._demo === demo; - if (active) { - sectionOpen = true; - } - + const key = `${group.category}/${demo}`; + const active = this._demo === key; + const title = DEMOS[key].metadata.title || demo; links.push(html` - ${group.demoStart === undefined - ? demo - : demo.substring(group.demoStart.length)} + ${title} `); } sidebar.push( group.header ? html` -
+
${group.header} ${links}
@@ -84,24 +80,36 @@ class HaGallery extends LitElement { .path=${mdiMenu} > -
${this._demo}
+
+ ${DEMOS[this._demo].metadata.title || this._demo.split("/")[1]} +
- ${DEMOS[this._demo].description - ? html` - ${until( - DEMOS[this._demo].description().then( - (content) => html` - -
${content}
- - ` - ), - "" - )} - ` - : ""} - ${dynamicElement(`demo-${this._demo}`)} + + ${dynamicElement(`demo-${this._demo.replace("/", "-")}`)} +
+ ${DEMOS[this._demo].description || + Object.keys(DEMOS[this._demo].metadata).length > 0 + ? html` + + Edit text + + ` + : ""} + ${DEMOS[this._demo].load + ? html` + + Edit demo + + ` + : ""} +
@@ -143,6 +151,13 @@ class HaGallery extends LitElement { super.updated(changedProps); if (changedProps.has("_demo") && DEMOS[this._demo].load) { DEMOS[this._demo].load(); + const menuItem = this.shadowRoot!.querySelector( + `a[href="#${this._demo}"]` + )!; + // Make sure section is expanded + if (menuItem.parentElement instanceof HTMLDetailsElement) { + menuItem.parentElement.open = true; + } } } @@ -196,9 +211,14 @@ class HaGallery extends LitElement { opacity: 0.12; } - ha-card { - max-width: 600px; - margin: 16px auto; + .demo-footer { + text-align: center; + margin: 16px 0; + } + + .demo-footer a { + display: inline-block; + margin: 0 8px; } `, ]; diff --git a/gallery/src/sidebar.ts b/gallery/src/sidebar.ts deleted file mode 100644 index 71222f59a..000000000 --- a/gallery/src/sidebar.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { DEMOS } from "../build/import-demos"; - -export const SIDEBAR: SidebarSection[] = [ - { - demos: ["introduction"], - }, - - { - // Each section has a header - header: "Lovelace", - // Specify demos to make sure they are put on top. - demos: [], - // Add a demoStart to automatically gather demos based on their name - demoStart: "hui-", - }, - { - header: "Automation", - demoStart: "automation-", - }, - { - header: "Components", - demos: [ - "ha-alert", - "ha-bar", - "ha-chips", - "ha-faded", - "ha-form", - "ha-label-badge", - "ha-selector", - ], - }, - { - header: "More Info", - demoStart: "more-info-", - }, - { - header: "Rest", - demoStart: "", // empty string matches all. - }, -]; - -interface SidebarSection { - header?: string; - demos?: string[]; - demoStart?: string; -} - -const demosToProcess = new Set(Object.keys(DEMOS)); - -for (const group of Object.values(SIDEBAR)) { - // Any pre-defined groups will not be sorted. - if (group.demos) { - for (const demo of group.demos) { - demosToProcess.delete(demo); - } - } else { - group.demos = []; - } -} -for (const group of Object.values(SIDEBAR)) { - if (group.demoStart !== undefined) { - for (const demo of demosToProcess) { - if (demo.startsWith(group.demoStart)) { - group.demos!.push(demo); - demosToProcess.delete(demo); - } - } - } -} diff --git a/package.json b/package.json index 0c0125cb7..f95e8b856 100644 --- a/package.json +++ b/package.json @@ -162,6 +162,7 @@ "@rollup/plugin-replace": "^2.3.2", "@types/chromecast-caf-receiver": "5.0.12", "@types/chromecast-caf-sender": "^1.0.3", + "@types/glob": "^7", "@types/js-yaml": "^4", "@types/leaflet": "^1", "@types/leaflet-draw": "^1", @@ -189,6 +190,7 @@ "eslint-plugin-wc": "^1.3.2", "fancy-log": "^1.3.3", "fs-extra": "^7.0.1", + "glob": "^7.2.0", "gulp": "^4.0.2", "gulp-foreach": "^0.1.0", "gulp-json-transform": "^0.4.6", diff --git a/yarn.lock b/yarn.lock index 285de2071..c2783d202 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3803,13 +3803,6 @@ __metadata: languageName: node linkType: hard -"@types/events@npm:*": - version: 3.0.0 - resolution: "@types/events@npm:3.0.0" - checksum: 9a424c2da210957d5636e0763e8c9fc3aaeee35bf411284ddec62a56a6abe31de9c7c2e713dabdd8a76ff98b47db2bd52f61310be6609641d6234cc842ecbbe3 - languageName: node - linkType: hard - "@types/express-serve-static-core@npm:*": version: 4.17.13 resolution: "@types/express-serve-static-core@npm:4.17.13" @@ -3856,14 +3849,13 @@ __metadata: languageName: node linkType: hard -"@types/glob@npm:^7.1.1": - version: 7.1.1 - resolution: "@types/glob@npm:7.1.1" +"@types/glob@npm:^7, @types/glob@npm:^7.1.1": + version: 7.2.0 + resolution: "@types/glob@npm:7.2.0" dependencies: - "@types/events": "*" "@types/minimatch": "*" "@types/node": "*" - checksum: 9fb96d004c8e9ed25b305bc0d34c99c70c47c571740ca861cca92be4b28649786971703e9883f8ead0815b50225dbaf103a1df2d076923066f6bc0ab733a7be8 + checksum: 6ae717fedfdfdad25f3d5a568323926c64f52ef35897bcac8aca8e19bc50c0bd84630bbd063e5d52078b2137d8e7d3c26eabebd1a2f03ff350fff8a91e79fc19 languageName: node linkType: hard @@ -8666,9 +8658,9 @@ fsevents@^1.2.7: languageName: node linkType: hard -"glob@npm:^7.0.3, glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6": - version: 7.1.7 - resolution: "glob@npm:7.1.7" +"glob@npm:^7.0.3, glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.2.0": + version: 7.2.0 + resolution: "glob@npm:7.2.0" dependencies: fs.realpath: ^1.0.0 inflight: ^1.0.4 @@ -8676,7 +8668,7 @@ fsevents@^1.2.7: minimatch: ^3.0.4 once: ^1.3.0 path-is-absolute: ^1.0.0 - checksum: b61f48973bbdcf5159997b0874a2165db572b368b931135832599875919c237fc05c12984e38fe828e69aa8a921eb0e8a4997266211c517c9cfaae8a93988bb8 + checksum: 78a8ea942331f08ed2e055cb5b9e40fe6f46f579d7fd3d694f3412fe5db23223d29b7fee1575440202e9a7ff9a72ab106a39fee39934c7bedafe5e5f8ae20134 languageName: node linkType: hard @@ -9123,6 +9115,7 @@ fsevents@^1.2.7: "@thomasloven/round-slider": 0.5.4 "@types/chromecast-caf-receiver": 5.0.12 "@types/chromecast-caf-sender": ^1.0.3 + "@types/glob": ^7 "@types/js-yaml": ^4 "@types/leaflet": ^1 "@types/leaflet-draw": ^1 @@ -9165,6 +9158,7 @@ fsevents@^1.2.7: fancy-log: ^1.3.3 fs-extra: ^7.0.1 fuse.js: ^6.0.0 + glob: ^7.2.0 google-timezones-json: ^1.0.2 gulp: ^4.0.2 gulp-foreach: ^0.1.0