4.0.3

4.0.3

@hakit/components

• No functional changes, just updated to locales

@hakit/core

• No functional changes, just updated to locales

4.0.2

4.0.2

@hakit/components

• BUGFIX - All cards using modalProps previously will spread the values first, and then provide internal defaults, making it impossible to overwrite values for the modal in some cases, additionally the MediaPlayerCard modal props were never spread through to the modal discussion

@hakit/core

• NEW - useTemplate - a new hook to subscribe to changes for a custom template, processed exactly the same way that home assistant does when providing templates to yaml code
• NEW - LOCALES - locales updated based on home assistant updates. issue

4.0.1

4.0.1

Small bug fixes to types and theme bugs

@hakit/components

• Fixed padding on Group component for mobile
• Fixed typescript interface for title attribute on ButtonCard
• Fixed gradient background on AlarmCard
• Fixed Alert theme

4.0.0

4.0.0

@hakit/components

• NEW - AlarmCard - A new card to interact with alarm entities, this has a custom popup with keypad control and automate features added to the code when a defaultCode is present. issue
• NEW - AlarmControls component to use independently of the AlarmCard
• NEW - MULTILINGAL - The entire codebase has been refactored to use the new localize method from @hakit/core which will display previously hard coded values in english, as well as much more in the language of your choice, this can be configured by simply changing the language in your home assistant instance, or by providing it to HassConnect. As values may change in your language of choice, the layouts may also change to what you're expecting - please report any issues. issue
• NEW/BREAKING - ThemeProvider - There's now variations for rgba values for the -ha-info-color and other success/warning/error colors, this is also a breaking change as the variables were renamed slightly issue

  background-color: var(--ha-alert-info-color);
   <--> this becomes -->
  background-color: var(--ha-info-color);

• NEW - CardBase - This is the component that every other Card extends, it has had some great upgrades
  • new features prop that accepts FeatureEntity or FeatureEntity[] as a type to render actions as part of the "footer" of the card, this has already been introduced into the ClimateCard, AlarmCard & CameraCard, this is similar in terms of functionality to what Home Assistant provided for its "features"
  • new relatedEntities prop that accepts ReleatedEntity or ReleatedEntity[] that has pre-calculated zones for position which will just overlay ontop of the card container, ie if the position prop is set to right top it will position the element in the right top most part of the container, the AlarmCard demo shows this through the use of the the battery icon, useful to display the battery level of an entity in a separate entity card.
  • new graph prop which will allow you to show a graph like the "SensorCard" does by adding the graph to the bottom of the card, you can also control how the graph displays it's history, styles, position and more.
  • new resizeDetectorProps - allows you to tap into the resizer to retrieve the size of the card in pixels from a callback for either width, height or both at once and more, this is currently throttled by 50ms, this is useful if your card needs to know it's own size
• NEW - TimeCard - will no longer depend on sensor.time and sensor.date as entities, by default it will still use these, but now you can also just use the system clock of the browser running the instance, which opens up additional functionality to format the date/time values with a simple format string with the dateFormat and timeFormat props and also a custom formatting option as a callback for both date and time too. You can also control how often the update occurs by changing the throttleTime prop (defaults to 1000ms), also, iconProps was introduced here too.
• NEW - VacuumCard - design changed slightly as it now extends the ButtonCard component, the Fab of the button card is now the animated vacuum image.
• NEW - WeatherCard - iconProps added, internally, performance update made to use the global resize detector
• NEW - TriggerCard - iconProps and sliderIconProps added to style the icons independently
• NEW - ButtonCard - fabProps added to style the wrapping element of the icon within the card, this allows you to change the background color amongst other things for the Fab element.
• NEW - ButtonCard - unitOfMeasurement prop added to allow users the ability to change the displayed unit of measurement on entities.
• NEW - ButtonCard - customRenderState - new prop added as a function to allow you to render the state within the card however you like, by default it will just render the state of the entity.
• NEW - ButtonCard - hideToggle prop added to hide the toggle button in the default layout type.
• NEW - ButtonCard - hideIcon - new prop to ide the icon
• NEW - EntitiesCard - I've started to introduce custom "action" components based on the entity type used, for example a switch entity will now display a "toggle" that's clickable and will automatically trigger the "toggle" service when clicked, similar to home assistant. I've introduced toggle, climate and sensor so far as custom state parts of each row. More to come later like cover controls for example.
• NEW - EntitiesCardRow - added iconProps to provide additional styles to the icon.
• NEW - ClimateCard - showHvacModeLabels - add this prob to display the locale label of the mode in the feature buttons - note this may only be useful if you're displaying one or two hvac modes.
• NEW - VacuumControls - added locateNode prop, the text/node to render when locating @default 'Locate...' in preferred language, added buttonGroupProps to adjust how the buttons are displayed.
• NEW - TextField - new component to render a text field in the browser, currently used by the keypad for the AlarmCard
• NEW - ButtonBar - added layoutType prop which now supports "bubble" and "grouped", grouped is the default and is what it was previously, bubble is what's used by the "features" within the cards. ButtonBar also supports new props to change the alignment within, like gap, and flex properties.
• NEW - ButtonGroup - new gap property to adjust the spacing between the children, new maintainAspectRatio prop which is enabled by default to maintain the 1/1 ratio of the buttons.
• NEW - ButtonGroupButton - Now accepts children, typically used to show a label if need be, disabled, iconProps and disableScaleEffect also now introduced.
• NEW - ButtonBarButton - hideActiveBorder - when in bubble layoutType you can hide the bottom border of the button.
• NEW - Modal popups are now loaded asynchronously, this should improve performance when rendering the popup and now the dashboard by default won't be required to load these assets on load.
• NEW - PictureCard - iconProps added
• NEW - ClimateControls - new prop hvacModeLabels to customize the hvac mode labels from the default, this can be passed down from the ClimateCard through the modalProps prop.
• BREAKING - ClimateCard - technically it's not a breaking change, previously by default the card would display the temperature controls by default, now they're hidden by default as I figured it's more likely a seasonal change that's made and if temperature needs to be changed it can be done in the popup by long pressing the card, if you want to add them back in simply add the showTemperatureControls prop
• BREAKING - ButtonCard - defaultLayout prop renamed to layoutType, to fix this, simply find and replace defaultLayout and replace with layoutType.
• BREAKING - AllCards - iconColor renamed to iconProps to expose more functionality to the user to re-style the icon element.
  Previously, you'd provide an iconColor prop with a string which was available on all cards, below is an example of how to convert this to the new iconProps prop:

  <ButtonCard iconColor="red" />
  <!-- convert to: -->
  <ButtonCard iconProps={{
    style: {
      color: "red" 
    }
  }} />

BREAKING - ButtonCard - swapped title and description on ButtonCard, it's always bothered me that the title is actually the "second" element on the button, this has been changed, to fix this if you're using either the description or the title prop or both, simply invert the names. Fixes issue

<ButtonCard entity="switch.something" title="A description" description="A Title" />
<-- This now changes to -->
<ButtonCard entity="switch.something" description="A description" title="A Title" />

• DEPRECATED - Removed RoomCard alias, this was previously renamed to AreaCard, if you're using RoomCard, you'll need to change this to AreaCard.
• BREAKING/NEW - Potential breaking change, AlarmCard, SensorCard, ClimateCard & VacuumCard now all extend the ButtonCard component instead of the CardBase, this introduces new shared properties, allows new layouts for AlarmCard, SensorCard, ClimateCard & VacuumCard and extends more functionality to these cards.
• BUGFIX - Scale effect on mouse down on cards was broken in the previous release
• BUGFIX - Fixed a few font-family issues where some cards weren't honouring changes to the default font family through the css variable.
• BUGFIX - ThemeProvider - There is new hsla variables exposed, and some of the colours didn't expose these values - this has been fixed, additionally an issue as been fixed that was causing a flashing effect with the controls.

@hakit/core

• BUGFIX - Fixed a bug where the hassUrl provided may have contained a trailing slash and was stored without it, it will now sanitize the input url to ensure it's stored correctly. issue, the useTranslations hook has also been removed.
• NEW - useLocale, useLocales - a hook to retrieve the locales, useLocale is similar in nature to the locale function, useLocales will return all available locales from home assistant.
• DEPRECATED/BREAKING - Removed fetchTranslations and replaced with multilingual support, this was previously used to fetch translations from home assistant, now this is done auto...

3.2.0

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 page.
• NEW - ModalProvider - a new provider to wrap your application to control global animations, full examples and information is available in the documentation 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 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-create 1.1.3

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.
• few issues with nextjs where window was used in the incorrect context, this has been fixed
• Removed lazy import for the PersonControls popup as this is ignored as the popup uses static exports that are not dynamically exported
• ThemeProvider - now accepts children which will allow you to pass props to the emotion CacheProvider if need be, this means you can perform tasks like telling hakit to change the container where styles are created by default if you're serving your dashboard within an iframe.
• Now supports tree shaking - the library setup with the bundler is much more sophisticated now and will now bundle only the components you use in your application, this should reduce the size of the bundle significantly and should allow bundlers to perform caching mechanisms on the components.

@hakit/core

• HassConnect - complete refactor to the authentication service, adding error logs and better error handling, simplified the token storage to remove the local cache which doesn't make sense why i included it to begin with! Should hopefully resolve issues raised: issue 123
• HassConnect now wrapped with memo from react - issues raised after testing with applications that render when HassConnect is NOT the root component, now should only re-render when props passed to HassConnect change.
• Fixed some typescript problems with components returning JSX.Element instead of React.ReactNode
• After the refactor of HassConnect the page no longer flickers with a secondary reload after authentication.
• HassConnect will now allow you to change the hassUrl and ask you to re-login after it's changed, tokens are now stored by the hassUrl, previously if you changed your URL it would just fail to render and not ask you to login. Now when urls are different it'll ask you to login again.
• Now supports tree shaking - the library setup with the bundler is much more sophisticated now and will now bundle only the components you use in your application, this should reduce the size of the bundle significantly and should allow bundlers to perform caching mechanisms on the components.

create-hakit v1.1.3

• Fixed issue where node > 18 was causing the type sync and deploy script to fail: issue 120
• Added .nvmrc with the generated template to help indicate desired node version
• Added default haUrl value
• Better feedback / instructions in the terminal

Storybook

• Fixed bug on FamilyCard where image wasn't rendering
• Added "person" entity to storybook to test new popup
• Added new demo for FamilyCard to show custom columns
• Documented "EntitiesCardRow" in storybook
• Upgraded storybook from 7 -> 8
• Added new logo to storybook

3.1.4

3.1.4

@hakit/components

• NEW - FamilyCard - a card that allows multiple person entities to render in a single card, this will also allow the user to long press and show the location of the person. Huge thanks to @jenseo for introducing this feature!
• The same "location / map" functionality is also available when long pressing a row in the EntitiesCard if the entity entered is a "person" entity.
• BUGFIX - types for GarbageCollectionCard subtypes were previously not exported, now exported under GarbageCollectionCardTypes
• BUGFIX - automatic titles in modal have been fixed to convert to title case as well as allowing an override in the "modalProps" attribute for all cards.

@hakit/core

• updating provider to allow global style overrides for new cards (FamilyCard, PersonCard)

3.1.3

3.1.3

@hakit/components

• No changes here - aligning semantic versions

@hakit/core

• BUGFIX - entities that have a custom icon defined in HA will now show and take priority over icons derived from the state of the entity
• BUGFIX - previously, once the icon was set for an entity, it would never update, this has been fixed and will now update when the entity state changes thanks to @Brewno88 for reporting this one

What's Changed

• gitflow-hotfix-stash: issue-117-icon-not-updating by @shannonhochkins in #119

Full Changelog: 3.1.2...3.1.3

3.1.2

3.1.2

@hakit/components

• Licence.md file updated
• ClimateCard - small changes to classes
• SidebarCard - sortSidebarMenuItems - now accepts a function to sort the menu items before they render
• Automatic typed introduced ValveEntity

@hakit/core

• updating base ha types
• some properties of auto generated types are now strictly typed and will no longer generate from the schema which has these properties defined as the incorrect type (xy_color, media_content_id, white, kelvin, color_temp) - there will most likely be more of these corrections in the future

3.1.1

3.1.1

@hakit/components

• NEW - ClimateCard - completely rebuilt to match home assistant controls, as the original climate control was far too primitive, it supports everything the current climate card supports in home assistant. (Goodbye react-thermostat, sorry old shannon but it's just not good enough)
• NEW - ThemeProvider now accepts global styles for most cards, this is useful if you want to update the style globally for every instance of the same component, ie, change all modal backgrounds to red for example.
• NEW - Menu - a simple shared component that allows you to wrap any component and turn it into a clickable item that launches a menu
• NEW - ControlSliderCircular - a new shared component similar to the home assistant slider used for climate / humidity entities
• NEW - Modal animation changes - contents of the modal are now rendered after the modal animation has complete, which will then trigger the modal to animate
  the children into the view.

@hakit/core

• BUGFIX - useAreas - was previously returning a deviceEntities property - this has now been removed as it was showing literally every available device on the instance.
• UPGRADE - home assistant web socket - upgraded to match new types