diff --git a/build-scripts/gulp/clean.js b/build-scripts/gulp/clean.js index 2b184d5e63..7bc0ed9e83 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 6e45f045cb..09ea380d7a 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 d89f5f582a..241c7669dd 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 0000000000..2d40478a88 --- /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 0000000000..41dc6fc4a0 --- /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 ea9b13fff5..55c3317acc 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 60f42d78e2..11de8b9781 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 8a409386c0..6bfe3213c3 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 1aea950b92..01769ccaa8 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 4b1ebd8a13..77e42e6171 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 0bc04b7435..af6d3bd6bb 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 f94cd97fb6..b4d9fea9ec 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 508576c22f..7de26e1004 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 3a62c4a1d2..c4f44e80a9 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 83f47f5dd6..797e3ff306 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 d1dcc2ae7d..a81606458a 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 65dcb4315d..1f962ef101 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 69933af074..324eb3a58d 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 277c539040..7a164dc87e 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 919a2c2419..b25790a299 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 d80033b05e..a6fa62a9a7 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 0000000000..30b1662ad7 --- /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 be9a5a22e2..b55b1ca5d1 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 bbb6dedfd2..3d46fc031d 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 5977ee3c09..bdaf093ed3 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 c6ed878c0f..aab189d215 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 320eb8f8c1..8718629399 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 3a0162ae7b..879cf3bb71 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 fdcf07188d..9094f678b8 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 c078ba5f61..1e4d0755df 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 6b743b243f..9fc7d6f5e7 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 32d7e39140..72800f6407 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 8cae0ff9d7..3b0fc01011 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 68912a6e77..db83496bf7 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 6e34a04c6f..2b6257cd23 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 0b963f36e8..9fb7ab7b5b 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 f99b20fcdf..44433bc089 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 c3fcc7d61b..f1f5941157 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 6b8d8418e1..b88d97cbce 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 b82c2a2fa9..f698754ea6 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 683d0c6a37..99b6780aee 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 034c150abd..68b0894516 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 86216da564..cc33346a0e 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 f715d5fc9c..6afa1a6ff9 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 a3107a5df3..530b95909e 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 5067d6e455..b00760485e 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 d7851dcefd..0188cf0af7 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 2aa583ca12..0454111a16 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 71222f59a0..0000000000 --- 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 0c0125cb79..f95e8b856f 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 285de20715..c2783d2021 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