Development (#97)

* Feature/random improvements (#96)

* Icons completely refactored to use state / attributes of specific devices

* small fixes

* prettier fixes

CHANGELOG.md

@@ -1,3 +1,15 @@
+# 3.0.3
+## @hakit/components
+- NEW - Icons! Massive changes here, the icons are now much more dynamic, previously it only showed a default domain, or an icon that was picked for the entity inside home assistant, Now, a picked icon in home assistant will take priority,  `state` & `attribute` values will determine what icon to show depending on the state of the entity, and if none of these are available, it will fall back to the domain icon.
+- BUGFIX - the previous release caused hover effects to disappear on most cards - this has been fixed
+
+
+## @hakit/core
+- BREAKING - Removed deprecated `api` property under an entity, these are now available under `service` proxy object.
+- BUGFIX - useLowDevices - blacklist wasn't working correctly, can now provide partial entity names as part of the blacklist to exclude certain devices.
+- BUGFIX - history object can now contain values from entities that do not include numerical state (things like weather history where the state value is a string)
+- NEW - useEntity - if an icon is picked for an entity in home assistant, this value will be provided under `attributes.icon`, if it's not picked it will determine a   smart icon to use based on the domain, attributes and state values.
+
 # 3.0.2
 ## @hakit/components
 - BREAKING - WeatherCard - details prop has been converted to accept a WeatherCardDetail component rather than an array of objects, this allows better typescript intellisense for services if you want to add your own custom details / actions.

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hakit/components",
   "type": "module",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "private": false,
   "keywords": [
     "react",
@@ -68,7 +68,7 @@
     "@emotion/react": ">=10.x",
     "@emotion/styled": ">=10.x",
     "@fullcalendar/react": "^6.1.9",
-    "@hakit/core": "^3.0.2",
+    "@hakit/core": "^3.0.3",
     "@use-gesture/react": ">=10.x",
     "autolinker": ">=4.x",
     "framer-motion": ">=10.x",
@@ -79,10 +79,10 @@
     "react-dom": ">=16.x",
     "react-error-boundary": "^4.x",
     "react-resize-detector": "^9.1.0",
-    "react-router-dom": ">=6.x",
     "react-thermostat": "^2.x.x",
     "react-use": ">=17.x",
-    "use-long-press": ">=3.2.0"
+    "use-long-press": ">=3.2.0",
+    "use-debounce": ">=9.x"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.x",

packages/components/src/Cards/ButtonCard/index.tsx

@@ -15,7 +15,6 @@ const StyledButtonCard = styled(CardBase)`
       height: 3rem;
     }
   }
-
   .children {
     width: 100%;
   }
@@ -26,14 +25,24 @@ const StyledButtonCard = styled(CardBase)`
       height: 3rem;
     }
   }
+  &:not(.disabled),
+  &:not(:disabled) {
+    &:hover {
+      .fab-card-inner {
+        background-color: var(--ha-S500);
+        color: var(--ha-S500-contrast);
+      }
+    }
+  }
 `;
 
 const Contents = styled.div`
   padding: 1rem;
   display: flex;
   flex-direction: column;
-  align-items: stretch;
-  justify-content: space-between;
+  align-items: center;
+  justify-content: stretch;
+  height: 100%;
 `;
 
 interface ToggleProps {
@@ -110,8 +119,10 @@ const LayoutBetween = styled.div`
   justify-content: space-between;
   flex-direction: row;
   gap: 10px;
+  width: 100%;
   &.vertical {
     flex-direction: column;
+    height: 100%;
   }
 `;
 
@@ -121,13 +132,15 @@ const Footer = styled.div`
   justify-content: flex-start;
   flex-direction: row;
   margin-top: 20px;
+  width: 100%;
 `;
 
 const Title = styled.div`
   color: var(--ha-S500-contrast);
   font-size: 0.7rem;
   margin: 2px 0;
   text-align: left;
+  width: 100%;
   &.slim-vertical {
     text-align: center;
   }

packages/components/src/Cards/CardBase/index.tsx

@@ -62,10 +62,10 @@ const getMotionElement = (as: ElementType, onlyFunctionality?: boolean) => {
     }
     &:not(:disabled):hover,
     &:not(.disabled):hover {
-      background-color: var(--ha-S300);
+      background-color: var(--ha-S400);
       color: var(--ha-500-contrast);
       svg {
-        color: var(--ha-S300-contrast);
+        color: var(--ha-S400-contrast);
       }
     }
     &:disabled,

packages/components/src/Cards/EntitiesCard/EntitiesCardRow.tsx

@@ -40,7 +40,7 @@ const EntityRowInner = styled(motion.div)`
   padding: 1rem;
   transition: background-color var(--ha-transition-duration) var(--ha-easing);
   &:hover {
-    background-color: var(--ha-S400);
+    background-color: var(--ha-S500);
   }
 `;
 

packages/components/src/Cards/SensorCard/index.tsx

@@ -5,12 +5,7 @@ import { useEntity, useIconByDomain, useIcon, useIconByEntity, computeDomain, is
 import { ErrorBoundary } from "react-error-boundary";
 import { fallback, SvgGraph, Alert, AvailableQueries, CardBase, type CardBaseProps } from "@components";
 
-const StyledSensorCard = styled(CardBase)`
-  cursor: default;
-  &.has-on-click {
-    cursor: pointer;
-  }
-`;
+const StyledSensorCard = styled(CardBase)``;
 
 const Contents = styled.div`
   display: flex;
@@ -107,7 +102,6 @@ function _SensorCard<E extends EntityName>({
   const icon = useIcon(_icon ?? null);
   const isUnavailable = isUnavailableState(entity.state);
   const disabled = _disabled || isUnavailable;
-  const hasOnClick = typeof rest.onClick === "function";
   return (
     <StyledSensorCard
       as="button"
@@ -118,9 +112,8 @@ function _SensorCard<E extends EntityName>({
       // @ts-expect-error - don't know the entity name, so we can't know the service data
       serviceData={serviceData}
       entity={_entity}
-      className={`sensor-card ${className ?? ""} ${hasOnClick ? "has-on-click" : ""}`}
+      className={`sensor-card ${className ?? ""}`}
       disabled={disabled}
-      whileTap={{ scale: disabled || !hasOnClick ? 1 : 0.9 }}
       {...rest}
     >
       <Contents>

packages/components/src/Cards/SidebarCard/index.tsx

@@ -42,6 +42,7 @@ const StyledSidebarCard = styled(motion.div)`
   flex-direction: column;
   align-items: center;
   overflow: hidden;
+  height: 100%;
   justify-content: flex-start;
   transition: var(--ha-transition-duration) var(--ha-easing);
   transition-property: left;