chore: Storybook migration (evcc-io#19780)

Author: naltatis

.gitignore

@@ -43,3 +43,5 @@ asset-stats.html
 /playwright/.cache/
 .gitpod.yml
 /evcc.db
+
+*storybook.log

.storybook/main.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
+const config = {
+  stories: ["../assets/js/**/*.stories.@(js|ts)"],
+  addons: [
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+};
+export default config;

.storybook/preview.js

@@ -0,0 +1,42 @@
+import { setup } from "@storybook/vue3";
+import "bootstrap/dist/css/bootstrap.min.css";
+import smoothscroll from "smoothscroll-polyfill";
+import setupI18n from "../assets/js/i18n";
+import "../assets/css/app.css";
+import { watchThemeChanges } from "../assets/js/theme";
+
+smoothscroll.polyfill();
+watchThemeChanges();
+
+// Setup global parameters
+/** @type { import('@storybook/vue3').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    backgrounds: {
+      default: "default",
+      values: [
+        {
+          name: "default",
+          value: "var(--evcc-background)",
+        },
+        {
+          name: "box",
+          value: "var(--evcc-box)",
+        },
+      ],
+    },
+  },
+};
+
+setup((app) => {
+  app.config.globalProperties.$hiddenFeatures = () => true;
+  app.use(setupI18n());
+});
+
+export default preview;

CONTRIBUTING.md

@@ -89,6 +89,14 @@ npm install
 npm run dev
 ```
 
+#### Storybook
+
+We're using storybook to develop and visualize UI components in different states. Running the command below will open your browser at http://127.0.0.1:6006/.
+
+```sh
+npm run storybook
+```
+
 #### Integration testing
 
 We use Playwright for end-to-end integration tests. They start a local evcc instance with different configuration yamls and prefilled databases. To run them, you have to do a local build first.

assets/histoire.setup.js

@@ -0,0 +1,55 @@
+import ChargingPlan from "./ChargingPlan.vue";
+
+const hoursFromNow = (hours) => {
+  const now = new Date();
+  now.setHours(now.getHours() + hours);
+  return now.toISOString();
+};
+
+export default {
+  title: "ChargingPlans/ChargingPlan",
+  component: ChargingPlan,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    id: { control: "text" },
+    effectivePlanTime: { control: "text" },
+    effectivePlanSoc: { control: "number" },
+    planEnergy: { control: "number" },
+    socBasedCharging: { control: "boolean" },
+    socBasedPlanning: { control: "boolean" },
+    vehicleSoc: { control: "number" },
+  },
+};
+
+const Template = (args) => ({
+  components: { ChargingPlan },
+  setup() {
+    return { args };
+  },
+  template: '<ChargingPlan v-bind="args" />',
+});
+
+export const None = Template.bind({});
+None.args = {
+  id: "1",
+};
+
+export const SocBasedCharging = Template.bind({});
+SocBasedCharging.args = {
+  id: "1",
+  effectivePlanTime: hoursFromNow(4),
+  effectivePlanSoc: 77,
+  socBasedCharging: true,
+  socBasedPlanning: true,
+};
+
+export const EnergyBasedCharging = Template.bind({});
+EnergyBasedCharging.args = {
+  id: "1",
+  effectivePlanTime: hoursFromNow(12),
+  planEnergy: 77,
+  socBasedCharging: false,
+  socBasedPlanning: false,
+};

assets/js/components/ChargingPlans/ChargingPlan.stories.js

@@ -0,0 +1,114 @@
+import Preview from "./Preview.vue";
+
+const now = new Date();
+
+function createDate(hoursFromNow) {
+  const result = new Date(now.getTime());
+  result.setHours(result.getHours() + hoursFromNow);
+  return result;
+}
+
+function createRate(price, hoursFromNow, durationHours = 1) {
+  const start = new Date(now.getTime());
+  start.setHours(start.getHours() + hoursFromNow);
+  start.setMinutes(0);
+  start.setSeconds(0);
+  start.setMilliseconds(0);
+  const end = new Date(start.getTime());
+  end.setHours(start.getHours() + durationHours);
+  end.setMinutes(0);
+  end.setSeconds(0);
+  end.setMilliseconds(0);
+  return { start: start.toISOString(), end: end.toISOString(), price };
+}
+
+// Scenario data
+const co2Data = {
+  rates: [
+    545, 518, 545, 518, 0, 545, 527, 527, 536, 518, 400, 336, 336, 339, 344, 336, 336, 336, 372,
+    400, 555, 555, 545, 555, 564, 545, 555, 545, 536, 545, 527, 536, 518, 545, 509, 336, 336, 336,
+  ].map((price, i) => createRate(price, i)),
+  duration: 8695,
+  plan: [createRate(213, 4), createRate(336, 11), createRate(336, 12)],
+  smartCostType: "co2",
+  targetTime: createDate(14),
+};
+
+const fixedData = {
+  rates: [createRate(0.442, 0, 50)],
+  duration: 8695,
+  plan: [createRate(0.442, 12, 3)],
+  smartCostType: "price",
+  currency: "EUR",
+  targetTime: createDate(14),
+};
+
+const zonedData = {
+  rates: [
+    createRate(3.72, 0, 4),
+    createRate(2.39, 4, 12),
+    createRate(3.72, 16, 12),
+    createRate(2.39, 28, 12),
+    createRate(3.72, 40, 12),
+  ],
+  duration: 8695,
+  plan: [createRate(2.39, 13, 3)],
+  smartCostType: "price",
+  currency: "DKK",
+  targetTime: createDate(17),
+};
+
+const unknownData = {
+  rates: co2Data.rates.slice(0, 16),
+  duration: 8695,
+  plan: [createRate(213, 4), createRate(336, 11), createRate(336, 12)],
+  smartCostType: "co2",
+  targetTime: createDate(14),
+};
+
+const dynamicData = {
+  rates: [0.12, 0.15, 0, -0.05, -0.11, -0.24, -0.08, 0.12, 0.25, 0.29, 0.22, 0.31, 0.31, 0.33].map(
+    (price, i) => createRate(price, i)
+  ),
+  duration: 8695,
+  plan: [createRate(0.23, 2, 5)],
+  smartCostType: "price",
+  currency: "EUR",
+  targetTime: createDate(13),
+};
+
+export default {
+  title: "ChargingPlans/Preview",
+  component: Preview,
+  argTypes: {
+    rates: { control: "object" },
+    duration: { control: "number" },
+    plan: { control: "object" },
+    smartCostType: { control: "select", options: ["co2", "price"] },
+    currency: { control: "text" },
+    targetTime: { control: "text" },
+  },
+};
+
+const Template = (args) => ({
+  components: { Preview },
+  setup() {
+    return { args };
+  },
+  template: '<Preview v-bind="args" />',
+});
+
+export const Co2 = Template.bind({});
+Co2.args = co2Data;
+
+export const Fixed = Template.bind({});
+Fixed.args = fixedData;
+
+export const Zoned = Template.bind({});
+Zoned.args = zonedData;
+
+export const Unknown = Template.bind({});
+Unknown.args = unknownData;
+
+export const Dynamic = Template.bind({});
+Dynamic.args = dynamicData;