Fixing storybook

Author: shannonhochkins

CHANGELOG.md

@@ -1,3 +1,6 @@
+# 5.1.3
+- Release failed, bumping again, add a console error for template rendering errors.
+
 # 5.1.2
 
 ### @hakit/components

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hakit/components",
   "type": "module",
-  "version": "5.1.2",
+  "version": "5.1.3",
   "private": false,
   "keywords": [
     "react",
@@ -70,7 +70,7 @@
     "@emotion/react": ">=11.x.x",
     "@emotion/styled": ">=11.x",
     "@fullcalendar/react": ">=6.x.x",
-    "@hakit/core": "^5.1.2",
+    "@hakit/core": "^5.1.3",
     "@mui/material": "^6.3.0",
     "@use-gesture/react": ">=10.x",
     "autolinker": ">=4.x",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hakit/core",
-  "version": "5.1.2",
+  "version": "5.1.3",
   "private": false,
   "type": "module",
   "keywords": [

packages/core/src/HassConnect/examples/renderError.code.tsx

@@ -0,0 +1,29 @@
+import { HassConnect, useStore } from "@hakit/core";
+import { ThemeProvider } from "@hakit/components";
+export function App() {
+  return (
+    <HassConnect hassUrl="http://homeassistant.local:8123" options={{
+      renderError: (error) => (
+        <div style={{ color: 'red', padding: '1rem', backgroundColor: '#fdd' }}>
+          <h2>Error</h2>
+          {error}
+          <p>Please check your connection or authentication details.</p>
+        </div>
+      ),
+    }}>
+      <ThemeProvider />
+      <SomeComponent />
+    </HassConnect>
+  );
+}
+
+function SomeComponent() {
+  const connection = useStore((state) => state.connection);
+
+  return (
+    <div>
+      <h1>HassConnect Status</h1>
+      <p>Status: {connection ? "Connected" : "Disconnected"}</p>
+    </div>
+  );
+}

packages/core/src/HassConnect/examples/specifyingLanguage.code.tsx

@@ -0,0 +1,23 @@
+import { HassConnect, useStore } from "@hakit/core";
+import { ThemeProvider } from "@hakit/components";
+export function App() {
+  return (
+    <HassConnect hassUrl="http://homeassistant.local:8123" options={{
+      locale: 'en', // Specify the desired locale
+    }}>
+      <ThemeProvider />
+      <SomeComponent />
+    </HassConnect>
+  );
+}
+
+function SomeComponent() {
+  const connection = useStore((state) => state.connection);
+
+  return (
+    <div>
+      <h1>HassConnect Status</h1>
+      <p>Status: {connection ? "Connected" : "Disconnected"}</p>
+    </div>
+  );
+}

packages/core/src/hooks/useTemplate/examples/disable.code.tsx

@@ -1,14 +1,20 @@
 import { useTemplate, HassConnect } from "@hakit/core";
 import { templateCodeToProcess } from "./constants";
+import { useState } from "react";
 
 function RenderCustomTemplate() {
+
+  const [enabled, setEnabled] = useState(false);
   const template = useTemplate({
-    enabled: false,
+    enabled,
     template: templateCodeToProcess,
     variables: { entity_id: "light.fake_light_1" },
   });
 
-  return <>Template result: {template ?? "not-enabled"}</>;
+  return <>
+    Template result: {template ?? "not-enabled"}
+    <button onClick={() => setEnabled(!enabled)}>{enabled ? "Disable" : "Enable"}</button>
+  </>;
 }
 
 export function App() {

packages/core/src/hooks/useTemplate/index.ts

@@ -62,6 +62,7 @@ export const useTemplate = (params: TemplateParams) => {
 
     const handleResponse = (response: RenderTemplateResult | RenderTemplateError) => {
       if ("error" in response) {
+        console.error("Error processing template:", response.error);
         // We show the latest error, or a warning if there are no errors
         setTemplate(response.error);
         return;
@@ -72,6 +73,7 @@ export const useTemplate = (params: TemplateParams) => {
     };
 
     const handleError = (err: RenderTemplateError) => {
+      console.error("Error processing template:", err);
       setTemplate(err?.error || "Could not process template request.");
     };
 
@@ -84,6 +86,7 @@ export const useTemplate = (params: TemplateParams) => {
         unsubscribeRef.current = unsub;
       })
       .catch((e: RenderTemplateError) => {
+        console.error("Error subscribing to template:", e);
         handleError(e);
       });
 

packages/core/src/hooks/useTemplate/useTemplate.stories.tsx

@@ -34,7 +34,6 @@ function SubscribeTemplateExample() {
       <Alert type="info" title={`Template result: ${template ?? "loading"}`} />
       <Alert type="warning" title="Here's the source code for the above template example:" cssStyles={`margin-top: 2rem;`} />
       <Source dark code={basicExample} />
-      <h3>Disable the template</h3>
       <Alert
         type="info"
         title="You can disable the template by setting the enable property to false which will conditionally run the hook subscription"