Replace storybook with histoire (#5154)

.eslintrc.js

@@ -9,8 +9,8 @@ module.exports = {
     "plugin:vue/vue3-recommended",
     "plugin:prettier/recommended",
     "prettier",
-    "plugin:storybook/recommended",
   ],
+  parser: "vue-eslint-parser",
   rules: {
     "vue/require-default-prop": "off",
     "vue/attribute-hyphenation": "off",

.github/workflows/default.yml

@@ -96,7 +96,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "18"
 
       - name: Get NPM cache dir
         id: npm-cache-dir

README.md

@@ -5,6 +5,7 @@
 [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20VS%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/evcc-io/evcc)
 [![OSS hosting by cloudsmith](https://img.shields.io/badge/OSS%20hosting%20by-cloudsmith-blue?logo=cloudsmith)](https://cloudsmith.io/~evcc/packages/)
 [![Latest Version](https://img.shields.io/github/release/evcc-io/evcc.svg)](https://github.com/evcc-io/evcc/releases)
+
 <!-- [![Pulls from Docker Hub](https://img.shields.io/docker/pulls/andig/evcc.svg)](https://hub.docker.com/r/andig/evcc) -->
 <!-- [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=48YVXXA7BDNC2) -->
 
@@ -44,7 +45,7 @@ You'll find everything you need in our [documentation](https://docs.evcc.io/) (G
 
 ## Contribute
 
-To build evcc from source, [Go][2] 1.18 and [Node][3] 16 are required.
+To build evcc from source, [Go][2] 1.18 and [Node][3] 18 are required.
 
 Build and run go backend. The UI becomes available at http://127.0.0.1:7070/
 

assets/histoire.setup.js

@@ -0,0 +1,16 @@
+import { defineSetupVue3 } from "@histoire/plugin-vue";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap";
+import smoothscroll from "smoothscroll-polyfill";
+import VueNumber from "vue-number-animation";
+import i18n from "./js/i18n";
+import "./css/app.css";
+import { watchThemeChanges } from "./js/theme";
+
+smoothscroll.polyfill();
+watchThemeChanges();
+
+export const setupVue3 = defineSetupVue3(({ app }) => {
+  app.use(i18n);
+  app.use(VueNumber);
+});

assets/js/components/Energyflow/BatteryIcon.story.vue

@@ -0,0 +1,13 @@
+<script setup>
+import BatteryIcon from "./BatteryIcon.vue";
+</script>
+
+<template>
+	<Story :layout="{ type: 'grid', width: 150 }">
+		<Variant title="empty"> <BatteryIcon :soc="10" /> </Variant>
+		<Variant title="quarter"> <BatteryIcon :soc="30" /> </Variant>
+		<Variant title="half"> <BatteryIcon :soc="50" /> </Variant>
+		<Variant title="three quarter"> <BatteryIcon :soc="70" /> </Variant>
+		<Variant title="full"> <BatteryIcon :soc="90" /> </Variant>
+	</Story>
+</template>

assets/js/components/Energyflow/Energyflow.story.vue

@@ -0,0 +1,118 @@
+<script setup>
+import Energyflow from "./Energyflow.vue";
+</script>
+
+<template>
+	<Story :layout="{ type: 'grid', width: 800 }">
+		<Variant title="grid and pv">
+			<Energyflow
+				gridConfigured
+				pvConfigured
+				:pvPower="7300"
+				:gridPower="-2300"
+				:homePower="800"
+				:loadpointsPower="4200"
+				:activeLoadpointsCount="3"
+				siteTitle="Home"
+			/>
+		</Variant>
+		<Variant title="battery and grid">
+			<Energyflow
+				gridConfigured
+				pvConfigured
+				batteryConfigured
+				:pvPower="0"
+				:gridPower="1200"
+				:homePower="2000"
+				:batteryPower="800"
+				:batterySoC="77"
+				siteTitle="Home"
+			/>
+		</Variant>
+		<Variant title="battery charging">
+			<Energyflow
+				gridConfigured
+				pvConfigured
+				batteryConfigured
+				:pvPower="5000"
+				:gridPower="-1300"
+				:homePower="800"
+				:loadpointsPower="1400"
+				:activeLoadpointsCount="1"
+				:batteryPower="-1500"
+				:batterySoC="75"
+				siteTitle="Home"
+			/>
+		</Variant>
+		<Variant title="grid, pv and battery">
+			<Energyflow
+				gridConfigured
+				pvConfigured
+				batteryConfigured
+				:pvPower="1000"
+				:gridPower="700"
+				:homePower="3300"
+				:batteryPower="1500"
+				:batterySoC="30"
+				siteTitle="Home"
+			/>
+		</Variant>
+		<Variant title="battery thresholds">
+			<Energyflow
+				gridConfigured
+				pvConfigured
+				batteryConfigured
+				:pvPower="8700"
+				:gridPower="-500"
+				:loadpointsPower="7500"
+				:activeLoadpointsCount="2"
+				:batteryPower="-700"
+				:batterySoC="95"
+				siteTitle="Home"
+			/>
+		</Variant>
+		<Variant title="pv thresholds">
+			<Energyflow
+				gridConfigured
+				pvConfigured
+				batteryConfigured
+				:pvPower="300"
+				:gridPower="5500"
+				:homePower="1000"
+				:loadpointsPower="5600"
+				:activeLoadpointsCount="2"
+				:batteryPower="800"
+				:batterySoC="76"
+				siteTitle="Home"
+			/>
+		</Variant>
+		<Variant title="grid only">
+			<Energyflow
+				gridConfigured
+				pvConfigured
+				batteryConfigured
+				:pvPower="0"
+				:gridPower="6500"
+				:homePower="1000"
+				:loadpointsPower="5500"
+				:activeLoadpointsCount="1"
+				:batteryPower="0"
+				:batterySoC="0"
+				siteTitle="Home"
+			/>
+		</Variant>
+		<Variant title="low power">
+			<Energyflow
+				gridConfigured
+				pvConfigured
+				batteryConfigured
+				:pvPower="700"
+				:gridPower="-300"
+				:homePower="300"
+				:batteryPower="-100"
+				:batterySoC="55"
+				siteTitle="Home"
+			/>
+		</Variant>
+	</Story>
+</template>