Development (#199)

* Removing framer motion on forecast elements, cleaned up updates to card on resize (#193) * Disabling scale effect by default for all popups (#195) * Disabling scale effect by default, still allowing via props * Documentation cleanup, few bug fixes * More doc improvements * pushing locales changes * Fixin environment * Updating locales (#196) * Updating action generator to remove bug with reserved keywords (#197) * writing current node version to .nvmrc (#198)
shannonhochkins · Jan 29, 2025 · 45bccfd · 45bccfd
1 parent 506528a
commit 45bccfd
Show file tree

Hide file tree

Showing 175 changed files with 94,028 additions and 71,160 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 import { ThemeProvider } from '@storybook/theming';
 import { Page } from "./page";
+import { redirectToStory } from './redirect';
 import './global.css';
 
 
@@ -16,6 +17,7 @@ const theme = {
 };
 
 
+
 export default {
   decorators: [
     withThemeFromJSXProvider({
@@ -31,7 +33,7 @@ export default {
       // so we redirect from one story to another
       if (args.parameters.redirectTo) {
         if (window.top) {
-          window.top.location.href = args.parameters.redirectTo;
+          redirectToStory(args.parameters.redirectTo);
         }
       }
       const centered = args.parameters.centered ? {

diff --git a/.storybook/redirect.ts b/.storybook/redirect.ts
@@ -0,0 +1,10 @@
+
+
+export function redirectToStory(pathQueryString: string) {
+  if (window.top) {
+    // with the window top location, we need to update the `path` query string value (if present) and then redirect to this new url
+    const url = new URL(window.top.location.href);
+    url.searchParams.set('path', pathQueryString);
+    window.top.location.href = url.toString();
+  }
+}
diff --git a/README.md b/README.md
@@ -97,7 +97,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)
+- [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.

diff --git a/hass-connect-fake/index.tsx b/hass-connect-fake/index.tsx
@@ -4,7 +4,6 @@ import {
   useRef,
   useEffect,
   type ReactNode,
-  type ReactElement,
 } from "react";
 import type {
   HassEntities,
@@ -37,7 +36,7 @@ import { logs } from './mocks/mockLogs';
 import {dailyForecast, hourlyForecast} from './mocks/mockWeather';
 
 interface HassProviderProps {
-  children: (ready: boolean) => ReactElement<HTMLElement | ReactNode> | ReactNode;
+  children: (ready: boolean) => ReactNode;
   hassUrl: string;
   throttle?: number;
 }
@@ -561,7 +560,7 @@ export const HassConnect = ({
   children,
   hassUrl,
   fallback,
-}: HassConnectProps): ReactElement<HTMLElement | ReactNode> => {
+}: HassConnectProps): ReactNode => {
   return (
     <HassProvider hassUrl={hassUrl}>
       {(ready) => (ready ? children : (fallback ?? null))}

diff --git a/hass-connect-fake/mocks/fake-call-service/mediaPlayer.ts b/hass-connect-fake/mocks/fake-call-service/mediaPlayer.ts
@@ -58,109 +58,111 @@ export function mediaPlayerUpdates({
     last_changed: now,
     last_updated: now,
   }
-  if (typeof _target === 'string') return true;
-  const [target] = _target;
-  switch (service) {
-    case 'mediaPlay':
-      return setEntities(entities => ({
-        ...entities,
-        [target]: {
-          ...entities[target],
-          ...dates,
-          state: 'playing'
-        }
-      }));
-    case 'turnOn':
-    case 'turn_on':
-      return setEntities(entities => ({
-        ...entities,
-        [target]: {
-          ...entities[target],
-          ...tracks(now).first,
-          ...dates,
-          state: 'playing'
-        }
-      }));
-    case 'turnOff':
-    case 'turn_off':
-      return setEntities(entities => ({
-        ...entities,
-        [target]: {
-          ...entities[target],
-          ...dates,
-          state: 'off'
-        }
-      }));
-    case 'mediaPause':
-      return setEntities(entities => ({
-        ...entities,
-        [target]: {
-          ...entities[target],
-          ...dates,
-          state: 'paused'
-        }
-      }));
-    case 'mediaPreviousTrack':
-    case 'mediaNextTrack': {
-      return setEntities(entities => {
-        const entity = entities[target];
-        const id = entity.context.id;
-        const next = id === '1' ? 'second' : 'first';
-        return {
+  const targets = typeof _target === 'string' ? [_target] : _target;
+  targets.forEach(target => {
+    switch (service) {
+      case 'mediaPlay':
+        return setEntities(entities => ({
+          ...entities,
+          [target]: {
+            ...entities[target],
+            ...dates,
+            state: 'playing'
+          }
+        }));
+      case 'turnOn':
+      case 'turn_on':
+        return setEntities(entities => ({
+          ...entities,
+          [target]: {
+            ...entities[target],
+            ...tracks(now).first,
+            ...dates,
+            state: 'playing'
+          }
+        }));
+      case 'turnOff':
+      case 'turn_off':
+        return setEntities(entities => ({
+          ...entities,
+          [target]: {
+            ...entities[target],
+            ...dates,
+            state: 'off'
+          }
+        }));
+      case 'mediaPause':
+        return setEntities(entities => ({
+          ...entities,
+          [target]: {
+            ...entities[target],
+            ...dates,
+            state: 'paused'
+          }
+        }));
+      case 'mediaPreviousTrack':
+      case 'mediaNextTrack': {
+        return setEntities(entities => {
+          const entity = entities[target];
+          const id = entity.context.id;
+          const next = id === '1' ? 'second' : 'first';
+          return {
+            ...entities,
+            [target]: {
+              ...entities[target],
+              ...tracks(now)[next],
+              ...dates,
+              state: 'playing',
+              attributes: {
+                ...entities[target].attributes,
+                ...tracks(now)[next].attributes,
+              }
+            }
+          }
+        });
+      }
+      case 'mediaSeek':
+        return setEntities(entities => ({
           ...entities,
           [target]: {
             ...entities[target],
-            ...tracks(now)[next],
             ...dates,
-            state: 'playing',
             attributes: {
               ...entities[target].attributes,
-              ...tracks(now)[next].attributes,
+              // @ts-ignore - TODO - type later
+              media_position: serviceData?.seek_position,
+              media_position_updated_at: now,
             }
           }
-        }
-      });
-    }
-    case 'mediaSeek':
-      return setEntities(entities => ({
-        ...entities,
-        [target]: {
-          ...entities[target],
-          ...dates,
-          attributes: {
-            ...entities[target].attributes,
-            // @ts-ignore - TODO - type later
-            media_position: serviceData?.seek_position,
-            media_position_updated_at: now,
-          }
-        }
-      }));
-    case 'volumeSet':
-    case 'volumeMute':
-      return setEntities(entities => ({
-        ...entities,
-        [target]: {
-          ...entities[target],
-          ...dates,
-          attributes: {
-            ...entities[target].attributes,
-            ...serviceData ?? {},            
+        }));
+      case 'volumeSet':
+      case 'volumeMute':
+        return setEntities(entities => ({
+          ...entities,
+          [target]: {
+            ...entities[target],
+            ...dates,
+            attributes: {
+              ...entities[target].attributes,
+              ...serviceData ?? {},            
+            }
           }
-        }
-      }));
-    case 'volumeUp':
-    case 'volumeDown':
-      return setEntities(entities => ({
-        ...entities,
-        [target]: {
-          ...entities[target],
-          ...dates,
-          attributes: {
-            ...entities[target].attributes,
-            volume_level: entities[target].attributes.volume_level + (service === 'volumeUp' ? 0.1 : -0.1),
+        }));
+      case 'volumeUp':
+      case 'volumeDown':
+        return setEntities(entities => ({
+          ...entities,
+          [target]: {
+            ...entities[target],
+            ...dates,
+            attributes: {
+              ...entities[target].attributes,
+              volume_level: entities[target].attributes.volume_level + (service === 'volumeUp' ? 0.1 : -0.1),
+            }
           }
-        }
-      }));
-  }
+        }));
+   }
+  });
+
   return true;
 }
diff --git a/packages/components/src/Cards/AreaCard/index.tsx b/packages/components/src/Cards/AreaCard/index.tsx
@@ -162,6 +162,10 @@ function InternalAreaCard({
     }
   }, [isPressed, open]);
 
+  const transition = {
+    duration: animationDuration,
+  };
+
   return (
     <>
       {open &&
@@ -170,22 +174,22 @@ function InternalAreaCard({
             {open === true && (
               <FullScreen
                 key={`fullscreen-layout-${idRef}`}
-                layoutId={idRef}
-                id={`${idRef}-expanded`}
                 className={"full-screen"}
                 initial={{ opacity: 0 }}
                 transition={{
-                  duration: animationDuration,
+                  ...transition,
                 }}
                 exit={{
                   opacity: 0,
                   transition: {
+                    ...transition,
                     delay: animationDuration,
                   },
                 }}
                 animate={{
                   opacity: 1,
                   transition: {
+                    ...transition,
                     delay: 0,
                   },
                 }}
@@ -225,7 +229,6 @@ function InternalAreaCard({
         disableActiveState
         disableRipples
         id={`${idRef}-area-card`}
-        layoutId={idRef}
         className={`area-card ${className ?? ""}`}
         onClick={() => {
           if (!disable) {

diff --git a/packages/components/src/Cards/CalendarCard/index.tsx b/packages/components/src/Cards/CalendarCard/index.tsx
@@ -755,7 +755,7 @@ function InternalCalendarCard({
 /**
  * The CalendarCard is very similar to the home assistant calendar card, with the exception of not having delete/edit event functionality, the preview here contains only a month (the current month) of fake events to preview the functionality
  *
- * This component uses the REST API to retrieve events from home assistant, ensure you've followed the instructions [here](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/hooks-usehass-callapi--docs)
+ * This component uses the REST API to retrieve events from home assistant, ensure you've followed the instructions [here](https://shannonhochkins.github.io/ha-component-kit/?path=/docs/core-hooks-usehass-hass-callapi--docs)
  * */
 export function CalendarCard(props: CalendarCardProps) {
   const defaultColumns: AvailableQueries = {

diff --git a/packages/components/src/Cards/CardBase/index.tsx b/packages/components/src/Cards/CardBase/index.tsx
@@ -286,7 +286,6 @@ const CardBaseInternal = function CardBase<T extends ElementType, E extends Enti
   rippleProps,
   disableColumns,
   whileTap,
-  layoutId,
   elRef,
   key,
   relatedEntities,
@@ -451,7 +450,6 @@ const CardBaseInternal = function CardBase<T extends ElementType, E extends Enti
           borderRadius: _borderRadius,
         }}
         whileTap={whileTap ?? { scale: disableScale || disabled || isUnavailable ? 1 : 0.9 }}
-        layoutId={layoutId ?? _id}
         disableActiveState={disableActiveState}
         disabled={isUnavailable || disabled}
         {...bind()}

diff --git a/packages/components/src/Cards/EntitiesCard/EntitiesCardRow.tsx b/packages/components/src/Cards/EntitiesCard/EntitiesCardRow.tsx
@@ -14,7 +14,6 @@ import { Icon, type IconProps } from "@iconify/react";
 import { Row, fallback, ModalByEntityDomain, type ModalPropsHelper } from "@components";
 import { ErrorBoundary } from "react-error-boundary";
 import { useState, ReactNode, useId, useMemo, useCallback, lazy, Suspense } from "react";
-import { motion } from "framer-motion";
 import { useLongPress } from "use-long-press";
 import styled from "@emotion/styled";
 import { Connection, HassConfig } from "home-assistant-js-websocket";
@@ -46,7 +45,7 @@ const State = styled.div`
   color: var(--ha-S300-contrast);
 `;
 
-const EntityRowInner = styled(motion.div)`
+const EntityRowInner = styled.div`
   width: 100%;
   padding: 1rem;
   transition: background-color var(--ha-transition-duration) var(--ha-easing);
@@ -130,6 +129,7 @@ function InternalEntitiesCardRow<E extends EntityName>({
   modalProps,
   key,
   includeLastUpdated = false,
+  ...rest
 }: EntitiesCardRowProps<E>) {
   const _id = useId();
   const [openModal, setOpenModal] = useState(false);
@@ -173,7 +173,7 @@ function InternalEntitiesCardRow<E extends EntityName>({
 
   return (
     <>
-      <EntityRowInner key={key} className={`entities-card-row`} layoutId={_id} {...bind()}>
+      <EntityRowInner key={key} className={`entities-card-row`} {...bind()} {...rest}>
         <Row className={`row`} wrap="nowrap" gap="1rem" fullWidth onClick={() => onClick && onClick(entity)}>
           <IconWrapper
             className={`icon-wrapper`}