Merge branch 'release/3.2.0'

.storybook/preview.tsx

@@ -38,14 +38,19 @@ export default {
           logo.style.maxWidth = '100%';
         }
         const panel = parentDocument.getElementById('storybook-panel-root');
-        if (args.parameters?.addons?.showPanel === false && panel !== null && panel.parentElement !== null) {
+        const shouldHidePanel = args.parameters?.addons?.showPanel === false;
+        if (shouldHidePanel && panel !== null && panel.parentElement !== null) {
           panel.parentElement.style.display = 'none';
         } else if (panel !== null && panel.parentElement !== null) {
           panel.parentElement.style.display = 'flex';
         }
         const previewer = parentDocument.querySelector('#root div div:has(main)') as HTMLElement;
-        if (previewer !== null) {
+        if (previewer !== null && shouldHidePanel) {
           previewer.style.height = '100dvh';
+          previewer.style.width = '100%';
+        } else {
+          // remove the width/height inline styles
+          previewer?.removeAttribute('style');
         }
       }
       if (args.parameters.standalone) {
@@ -82,7 +87,7 @@ export default {
         const aTitle = splitAndTakeFirst(a.title, '/');
         const bTitle = splitAndTakeFirst(b.title, '/');
 
-        const order = ['INTRODUCTION', 'HOOKS', 'COMPONENTS', 'ADVANCED'];
+        const order = ['INTRODUCTION', 'COMPONENTS', 'HOOKS', 'ADVANCED'];
 
         const aOrderIndex = getOrderIndex(order, aTitle);
         const bOrderIndex = getOrderIndex(order, bTitle);

CHANGELOG.md

@@ -1,3 +1,30 @@
+# 3.2.0
+## @hakit/components
+- NEW VacuumCard - A new card to interact with vacuum entities, this card will show the current state of the vacuum, the battery level, the current cleaning status and the ability to start, pause, stop and return to dock. It provides the ability to create custom shortcuts and much more, you can long press on the card to display the new custom popup. Demo available on the main [demo](https://shannonhochkins.github.io/ha-component-kit/iframe.html?args=&id=introduction-demo--default&viewMode=story#) page.
+- NEW - ModalProvider - a new provider to wrap your application to control global animations, full examples and information is available in the [documentation](https://shannonhochkins.github.io/ha-component-kit) link. Here you can also provide custom animations for the modals, disable complex animations, animate the modal, header and content of the modal independently with framer-motion.
+- BUGFIX - Modal animations were broken in the previous version, this has been fixed and now the animations are working as expected. Additionally, the documentation mentioned the default duration of animations was 0.25s however I noticed the default was actually set to 1s making animations and interactions feel sluggish and slow.
+- BUGFIX - Modal animations previously had a glitch where it was expanding and zooming in whilst closing, this has been fixed
+- BUGFIX - Modal animations with round edges previously weren't animating correctly and i noticed that this is because framer-motion cannot transition border radius with rem values so this has been fixed to transition to pixels instead.
+- NEW - `useModalOptions` hook to retrieve the modal store values, not really necessary for general use so wasn't documented in storybook, however this is available from the components package.
+- NEW - Modal now has the ability to hide the logbook option
+- NEW - SidebarCard, Group - These now have the ability to disable the collapsible functionality, Thanks to @kdkavanagh for this contribution!
+- NEW - WeatherCard - now has the ability to add rows to the forecast, ability to hide the forecast, day and title and the forecast toggle. Thanks to @kdkavanagh for this contribution!
+- BREAKING - potential breaking change if users have custom styles on the ButtonBar component as the base class was changed from `button-group` to `button-bar` to align with the rest of the components.
+
+## @hakit/core
+- NEW useTranslations hook - this hook will return translations from your home assistant instance, this may be useful if you intend to display content in your own language, to add more categories to fetch, update HassConnect to include the required categories. NOTE - this currently isn't wired into the entire application, there's currently no way to fetch the common language from home assistant via websockets and I've opened an [issue](https://github.com/home-assistant/frontend/issues/20769) with home assistant to fix this issue.
+- NEW - HassConnect - option to add additional translation categories to fetch from home assistant, all available options/categories are typed in typescript so it's easy to see what's available. This will be available when using the `useTranslations` hook within your application.
+- NEW - localize - a new helper method to retrieve a value from the fetched translations, this can be used anywhere in your application and doesn't need to abide by react hook rules, you can fetch and also search/replace values with this helper method.
+
+
+## Storybook
+- Fixed bug that wasn't showing the interaction/actions panel on stories
+- Rearranged sidebar so COMPONENTS is before HOOKS
+
+## General
+- Fixed multiple typescript issues
+
+
 # 3.1.5
 ## @hakit/components
 - Previously all react props passed to the component were rendering as props on output elements, this wasn't visible with vite as it strips these out compile time, webpack however does not and some other bundlers don't either, now the cards will only render valid html props passed to components.

README.md

@@ -71,14 +71,14 @@ There's a [Home Assistant Addon](ADDON.md) available which will serve your dashb
 
 
 ### Supported Cards
-- [FamilyCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-familycard--docs)
 - [AreaCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-areacard--docs)
 - [ButtonCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-buttoncard--docs)
 - [ClimateCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-climatecard--docs)
 - [CameraCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-cameracard--docs)
 - [CalendarCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-calendarcard--docs)
 - [EntitiesCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-entitiescard--docs)
 - [FabCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-fabcard--docs)
+- [FamilyCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-familycard--docs)
 - [GarbageCollectionCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-garbagecollectioncard--docs)
 - [MediaPlayerCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-mediaplayercard--docs)
 - [PictureCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-picturecard--docs)
@@ -87,6 +87,7 @@ There's a [Home Assistant Addon](ADDON.md) available which will serve your dashb
 - [TimeCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-timecard--docs)
 - [TriggerCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-triggercard--docs)
 - [WeatherCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-weathercard--docs)
+- [NEW VacuumCard](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/components-cards-vacuumcard--docs)
 
 ### Known Issues
 - Anything else? Please, if you notice anything that doesn't feel / look right, please report it, i rely on user testing to make improvements.

hass-connect-fake/index.tsx

@@ -21,7 +21,7 @@ import type {
   Store,
 } from "@hakit/core";
 import { isArray } from "lodash";
-import { HassContext } from '@hakit/core';
+import { HassContext, updateLocalTranslations } from '@hakit/core';
 import { entities as ENTITIES } from './mocks/mockEntities';
 import fakeApi from './mocks/fake-call-service';
 import { create } from "zustand";
@@ -31,6 +31,7 @@ import { mockCallApi } from './mocks/fake-call-api';
 import reolinkSnapshot from './assets/reolink-snapshot.jpg';
 import { logs } from './mocks/mockLogs';
 import {dailyForecast, hourlyForecast} from './mocks/mockWeather';
+import { translations } from "./mocks/translations";
 
 interface CallServiceArgs<T extends SnakeOrCamelDomains, M extends DomainService<T>> {
   domain: T;
@@ -426,6 +427,10 @@ function HassProvider({
     };
   }, [routes, setHash, setRoutes]);
 
+  useEffect(() => {
+    updateLocalTranslations(translations);
+  }, [])
+
   const joinHassUrl = useCallback((path: string) => path, []);
 
   const getRoute = useCallback(
@@ -465,7 +470,7 @@ function HassProvider({
 }
 
 
-import { ReactNode, ReactElement } from "react";
+import { ReactNode } from "react";
 
 export type HassConnectProps = {
   /** Any react node to render when authenticated */
@@ -480,7 +485,7 @@ export const HassConnect = ({
   children,
   hassUrl,
   fallback = null,
-}: HassConnectProps): ReactElement => {
+}: HassConnectProps): ReactNode => {
   return (
     <HassProvider hassUrl={hassUrl}>
       {(ready) => (ready ? children : fallback)}

hass-connect-fake/mocks/fake-call-service/index.ts

@@ -2,10 +2,12 @@ import { sceneUpdates } from "./scene";
 import { climateUpdates } from "./climate";
 import { lightUpdates } from './light';
 import { mediaPlayerUpdates } from './mediaPlayer';
+import { vacuumUpdates } from './vacuum';
 
 export default {
   scene: sceneUpdates,
   climate: climateUpdates,
   light: lightUpdates,
   mediaPlayer: mediaPlayerUpdates,
+  vacuum: vacuumUpdates,
 }

hass-connect-fake/mocks/fake-call-service/vacuum.ts

@@ -0,0 +1,91 @@
+import type { ServiceArgs } from './types';
+
+let returningTimeout: NodeJS.Timeout;
+
+export function vacuumUpdates({
+  now,
+  target,
+  service,
+  serviceData,
+  setEntities,
+}: ServiceArgs<'vacuum'>) {
+  const dates = {
+    last_changed: now,
+    last_updated: now,
+  }
+  if (typeof target !== 'string') return true;
+
+  if (returningTimeout) {
+    clearTimeout(returningTimeout);
+  }
+  switch (service) {
+    case 'returnToBase':
+      returningTimeout = setTimeout(() => {
+        setEntities(entities => ({
+          ...entities,
+          [target]: {
+            ...entities[target],
+            ...dates,
+            attributes: {
+              ...entities[target].attributes,
+              status: 'Docked'
+            },
+            state: 'docked'
+          }
+        }));
+      }, 5000);
+      return setEntities(entities => ({
+        ...entities,
+        [target]: {
+          ...entities[target],
+          ...dates,
+          attributes: {
+            ...entities[target].attributes,
+            status: 'Returning to base'
+          },
+          state: 'returning'
+        }
+      }));
+    case 'setFanSpeed':
+      return setEntities(entities => ({
+        ...entities,
+        [target]: {
+          ...entities[target],
+          attributes: {
+            ...entities[target].attributes,
+            ...serviceData,
+          },
+          ...dates,
+        }
+      }));
+    case 'start':
+    case 'cleanSpot':
+      return setEntities(entities => ({
+        ...entities,
+        [target]: {
+          ...entities[target],
+          ...dates,
+          attributes: {
+            ...entities[target].attributes,
+            status: service === 'start' ? 'Cleaning' : 'Cleaning spot'
+          },
+          state: 'cleaning'
+        }
+      }));
+    case 'pause':
+    case 'stop':
+      return setEntities(entities => ({
+        ...entities,
+        [target]: {
+          ...entities[target],
+          ...dates,
+          attributes: {
+            ...entities[target].attributes,
+            status: service === 'pause' ? 'Paused' : 'Stopped'
+          },
+          state: 'paused'
+        }
+      }));
+  }
+  return true;
+}