From 88ee2cc5eba000b366b9458c2d0923c6b70ac11a Mon Sep 17 00:00:00 2001 From: Michael Geers Date: Thu, 7 Aug 2025 15:03:57 +0200 Subject: [PATCH] chore: fix storybook --- .../Loadpoints/Loadpoint.stories.ts | 131 +++++++++++--- .../Loadpoints/Loadpoints.stories.ts | 166 ++++++++++++++---- 2 files changed, 241 insertions(+), 56 deletions(-) diff --git a/assets/js/components/Loadpoints/Loadpoint.stories.ts b/assets/js/components/Loadpoints/Loadpoint.stories.ts index 85ef3218b..acfff028a 100644 --- a/assets/js/components/Loadpoints/Loadpoint.stories.ts +++ b/assets/js/components/Loadpoints/Loadpoint.stories.ts @@ -1,5 +1,6 @@ import Loadpoint from "./Loadpoint.vue"; import type { Meta, StoryFn } from "@storybook/vue3"; +import { SMART_COST_TYPE } from "@/types/evcc"; export default { title: "Loadpoints/Loadpoint", @@ -9,57 +10,132 @@ export default { }, } as Meta; +// Based on actual API state structure from demo.evcc.io const baseState = { - id: 0, - pvConfigured: true, - chargePower: 2800, - chargedEnergy: 11e3, - chargeDuration: 95 * 60, - vehicleTitle: "Mein Auto", - vehicleName: "meinauto", + id: 1, + title: "Carport", + mode: "pv", enabled: true, connected: true, - mode: "pv", + socBasedCharging: true, charging: true, - vehicleSoc: 66, - limitSoc: 90, - offeredCurrent: 7, - minCurrent: 6, - maxCurrent: 16, - activePhases: 2, + chargePower: 8050, + chargedEnergy: 789.81, + chargeDuration: 702, + chargeRemainingDuration: 0, + chargeRemainingEnergy: 0, + vehicleName: "vehicle_3", + vehicleSoc: 44, + vehicleRange: 0, + vehicleLimitSoc: 0, + limitSoc: 80, + effectiveLimitSoc: 80, + limitEnergy: 0, + minCurrent: 9, + maxCurrent: 64, + offeredCurrent: 34, + phasesActive: 3, + phasesConfigured: 3, + sessionEnergy: 789.81, + sessionPrice: 0.066, + sessionPricePerKWh: 0.083, + sessionCo2PerKWh: 11.813, + sessionSolarPercentage: 95.312, + batteryBoost: false, + planActive: false, + planEnergy: 0, + planOverrun: 0, + planPrecondition: 0, + planProjectedEnd: undefined, + planProjectedStart: undefined, + planTime: undefined, + priority: 0, + phaseAction: "inactive", + phaseRemaining: 0, + pvAction: "inactive", + pvRemaining: 0, + smartCostActive: false, + smartCostNextStart: undefined, + smartFeedInPriorityActive: false, + smartFeedInPriorityNextStart: undefined, + vehicleClimaterActive: false, + vehicleDetectionActive: false, + vehicleWelcomeActive: false, + chargerFeatureHeating: false, + chargerFeatureIntegratedDevice: false, + chargerIcon: "", + chargerSinglePhase: false, + chargerStatusReason: "unknown", + connectedDuration: 0, + // Global props that would typically come from parent + vehicles: [ + { + name: "vehicle_3", + title: "grüner Honda e", + icon: "car", + capacity: 8, + features: ["Offline"], + repeatingPlans: [], + }, + { + name: "vehicle_4", + title: "weißes Model 3", + icon: "car", + capacity: 80, + features: ["Offline"], + repeatingPlans: [], + }, + ], + smartCostType: SMART_COST_TYPE.PRICE_FORECAST, + smartCostAvailable: true, + smartFeedInPriorityAvailable: false, + tariffGrid: 0.144, + tariffCo2: 252, + tariffFeedIn: 0.08, + currency: "EUR", + multipleLoadpoints: false, + gridConfigured: true, + pvConfigured: true, + batteryConfigured: true, }; -const Template: StoryFn = (args) => { - const story = () => ({ - components: { Loadpoint }, - setup() { - return { args }; - }, - template: '', - }); - story.args = { ...baseState, ...args }; - return story; -}; +const Template: StoryFn = (args) => ({ + components: { Loadpoint }, + setup() { + return { args }; + }, + template: '', +}); export const Standard = Template.bind({}); +Standard.args = baseState; export const WithoutSoc = Template.bind({}); WithoutSoc.args = { - vehicleName: "", + ...baseState, + vehicleName: "vehicle_4", + vehicleSoc: 0, + limitEnergy: 20, }; export const Idle = Template.bind({}); Idle.args = { + ...baseState, enabled: false, connected: false, vehicleName: "", + vehicles: [], mode: "off", charging: false, + chargePower: 0, offeredCurrent: 0, + sessionEnergy: 0, + chargedEnergy: 0, }; export const DisabledLongTitle = Template.bind({}); DisabledLongTitle.args = { + ...baseState, title: "Charging point with a very very very long title!!!1!", remoteDisabled: "soft", remoteDisabledSource: "Sunny Home Manager", @@ -71,8 +147,11 @@ DisabledLongTitle.args = { export const ChargerIconNoVehicle = Template.bind({}); ChargerIconNoVehicle.args = { + ...baseState, chargerIcon: "heater", title: "Heating device with long name", mode: "now", chargerFeatureIntegratedDevice: true, + vehicleName: "", + vehicles: [], }; diff --git a/assets/js/components/Loadpoints/Loadpoints.stories.ts b/assets/js/components/Loadpoints/Loadpoints.stories.ts index 061392934..3359f6d78 100644 --- a/assets/js/components/Loadpoints/Loadpoints.stories.ts +++ b/assets/js/components/Loadpoints/Loadpoints.stories.ts @@ -1,33 +1,25 @@ import Loadpoints from "./Loadpoints.vue"; import type { Meta, StoryFn } from "@storybook/vue3"; +import { SMART_COST_TYPE } from "@/types/evcc"; -function loadpoint(opts = {}) { +// Create LoadpointCompact structure for the Loadpoints component +const createLoadpoint = (opts = {}) => { const base = { - id: 0, - pvConfigured: true, - chargePower: 2800, - chargedEnergy: 11e3, - chargeDuration: 95 * 60, - vehicleName: "tesla", - vehicleTitle: "Tesla Model 3", - enabled: true, - connected: true, - mode: "pv", - charging: true, - vehicleSoc: 66, - limitSoc: 90, - offeredCurrent: 7, - minCurrent: 6, - maxCurrent: 16, - activePhases: 2, icon: "car", - title: "Garage", - power: 2100, + title: "Carport", + charging: true, + soc: 66, + power: 8050, + chargePower: 8050, + connected: true, index: 0, + vehicleName: "vehicle_3", + chargerIcon: "", + vehicleSoc: 0, chargerFeatureHeating: false, }; return { ...base, ...opts }; -} +}; export default { title: "Loadpoints/Loadpoints", @@ -45,16 +37,130 @@ const Template: StoryFn = (args) => ({ template: '', }); -export const Standard = Template.bind({}); -Standard.args = { - vehicles: [], +const baseArgs = { + vehicles: [ + { + name: "vehicle_3", + title: "grüner Honda e", + icon: "car", + capacity: 8, + features: ["Offline"], + repeatingPlans: [], + }, + { + name: "vehicle_4", + title: "weißes Model 3", + icon: "car", + capacity: 80, + features: ["Offline"], + repeatingPlans: [], + }, + { + name: "vehicle_5", + title: "schwarzes VanMoof", + icon: "bike", + capacity: 0.46, + features: ["Offline"], + repeatingPlans: [], + }, + ], + smartCostType: SMART_COST_TYPE.PRICE_FORECAST, + smartCostAvailable: true, + smartFeedInPriorityAvailable: false, + tariffGrid: 0.144, + tariffCo2: 252, + tariffFeedIn: 0.08, + currency: "EUR", + gridConfigured: true, + pvConfigured: true, + batteryConfigured: true, +}; + +export const OneLoadpoint = Template.bind({}); +OneLoadpoint.args = { + ...baseArgs, loadpoints: [ - loadpoint({ title: "Carport", index: 0 }), - loadpoint({ - title: "Water Heater", - chargerFeatureIntegratedDevice: true, - chargerIcon: "waterheater", - index: 1, + createLoadpoint({ + title: "Main Charger", + index: 0, + vehicleName: "vehicle_3", + charging: true, + chargePower: 11000, + power: 11000, + connected: true, + soc: 75, + vehicleSoc: 75, + }), + ], +}; + +export const TwoLoadpoints = Template.bind({}); +TwoLoadpoints.args = { + ...baseArgs, + loadpoints: [ + createLoadpoint({ + title: "Garage", + index: 0, + vehicleName: "vehicle_3", + charging: true, + chargePower: 8050, + power: 8050, + connected: true, + soc: 66, + vehicleSoc: 66, + }), + createLoadpoint({ + title: "Charging point with a very very very long title that tests layout compatibility!!!", + index: 1, + vehicleName: "vehicle_4", + charging: false, + chargePower: 0, + power: 0, + connected: true, + soc: 89, + vehicleSoc: 89, + }), + ], +}; + +export const ThreeLoadpoints = Template.bind({}); +ThreeLoadpoints.args = { + ...baseArgs, + loadpoints: [ + createLoadpoint({ + title: "Garage", + index: 0, + vehicleName: "vehicle_3", + charging: true, + chargePower: 7400, + power: 7400, + connected: true, + soc: 45, + vehicleSoc: 45, + }), + createLoadpoint({ + title: + "Extremely long charging point title that should test responsive layout behavior and text wrapping", + index: 1, + vehicleName: "vehicle_4", + charging: false, + chargePower: 0, + power: 0, + connected: true, + soc: 92, + vehicleSoc: 92, + }), + createLoadpoint({ + title: "Bike Charger", + index: 2, + vehicleName: "vehicle_5", + charging: false, + chargePower: 0, + power: 0, + connected: false, + icon: "bike", + soc: undefined, + vehicleSoc: 0, }), ], };