Development (#250)

* Feature/throttle updates and responsive bug (#241)

* Fixing throttle updates and resposnive issue

* Updating package and changelog with locales

* Small refactor

* Updating changelog

* 248 reported delays with card updates (#249)

* Updates with timecard issues

* Fixed bug where ticking function wouldn't update the clock if no entity or other props are provided

* Optimsations with tooltip

* updating log

* Updating changelog

* Reverting time card story changes

* Typo

* Locales, prettier & bumping version

Author: shannonhochkins

.storybook/preview.tsx

@@ -107,6 +107,12 @@ export default {
       canvas: {
         sourceState: 'shown',
       },
+      source: {
+        dark: true,
+        language: 'tsx',
+        excludeDecorators: false,
+        format: 'dedent',
+      },
       page: Page
     }
   },

CHANGELOG.md

@@ -1,3 +1,15 @@
+# 5.0.9
+
+### @hakit/components
+
+- NEW - TimeCard - when no time/date entity is provided, by default it will use the browsers time and date, this also uses a custom formatter to format the custom date string, previously the custom formatters only allowed you to specify strings per identifier, now you can return a ReactNode meaning we can have the same formatting behavior as if we have an entity (AM/PM suffix now wrapped in different styles.)
+- BREAKING - TimeCard - Unlikely breaking change for users unless you're potentially using css selectors targeting the h4 element in time cards, the h4 element is now a span to avoid nesting h4 elements after introducing the above feature.
+- IMPROVEMENT - Tooltip - A previously unknown behavior as something changed along the way, all tooltips were rendered on the page even before interacting with elements, and also continuously updating position on window resize, now tooltip elements are only created when interacting with the element with the tooltip, and removed from the dom after the interaction is complete, this should reduce the amount of elements on the page and improve performance.
+
+### @hakit/core
+- useEntity - more issues with the useEntity hook causing delays in updates, the hook behind the scenes was using a debounce not a throttle which was not intended behavior, this seems to have resolved syncing issues with storybook and the actual dashboard. [fixes](https://github.com/shannonhochkins/ha-component-kit/issues/248)
+
+
 # 5.0.8
 
 ### @hakit/components

hakit/server/default.html

@@ -110,7 +110,6 @@ <h2>Write to File</h2>
       .catch(error => console.error('Error:', error));
     }
     function runApplication() {
-      console.log('xx', `${baseUrl}run-application`);
       fetch(`${baseUrl}api/v1/run-application`, {
         method: 'POST'
       })

hass-connect-fake/index.tsx

@@ -437,14 +437,13 @@ function HassProvider({
         last_changed: now.toISOString(),
         last_updated: now.toISOString(),
       }
-      setEntities({
-        ['sensor.time']: {
-          ...entities['sensor.time'],
-          ...dates,
-          state: formatted
-        }
-      });
-    }, 60000);
+      entities['sensor.time'] = {
+        ...entities['sensor.time'],
+        ...dates,
+        state: formatted
+      }
+      setEntities(entities);
+    }, 125);
     return () => {
       if (clock.current) clearInterval(clock.current);
     }

packages/components/package.json

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

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

@@ -29,15 +29,16 @@ const StyledTimeCard = styled(TimeCard)<{
       color: var(--ha-S200-contrast);
     }
   }
-  h4 {
+  .time,
+  .time-suffix {
     transition: var(--ha-transition-duration) var(--ha-easing);
     transition-property: font-size;
   }
   ${(props) =>
     !props.open &&
     `
     padding: 0.5rem 0;
-    h4 {
+    .time, .time-suffix {
       font-size: 0.7rem;
     }
   `}

packages/components/src/Cards/TimeCard/TimeCard.stories.tsx

@@ -10,13 +10,12 @@ function Template(args?: Partial<TimeCardProps>) {
       <ThemeControlsModal />
       <Row gap="1rem">
         <TimeCard {...args} />
-        <TimeCard timeFormat="hh:mm:ss a" dateFormat={"MMM DD"} {...args} />
+        <TimeCard timeFormat="hh:mm:ss A" dateFormat={"MMM DD"} {...args} />
         <TimeCard
           timeFormat={(date) => {
-            return "WHAT? " + date.toLocaleTimeString().replace(/:/g, "-");
+            return "Time: " + date.toLocaleTimeString().replace(/:/g, "-");
           }}
           hideDate
-          {...args}
         />
       </Row>
       <Alert
@@ -66,6 +65,15 @@ export type TimeStory = StoryObj<typeof TimeCard>;
 export const Docs: TimeStory = {
   render: Template,
   args: {},
+  parameters: {
+    docs: {
+      source: {
+        // language: 'graphql',
+        dark: false,
+        excludeDecorators: false,
+      },
+    },
+  },
 };
 
 export const WithoutDateExample: TimeStory = {

packages/components/src/Cards/TimeCard/formatter.ts renamed to packages/components/src/Cards/TimeCard/formatter.tsx

@@ -2,13 +2,14 @@ import {
   CustomFormatters,
   DateParts,
   Formatters,
-  FormatFunction,
   FormatterMask,
   DatePartName,
   FormatOptions,
+  FormatFunction,
   Parser,
   Token,
 } from "./types";
+import { AmOrPm } from "./shared";
 
 const parsers: Map<string, Parser> = new Map();
 
@@ -30,7 +31,7 @@ const intlFormattersOptions = [
 ] satisfies Partial<Intl.DateTimeFormatOptions>[];
 
 export function createDateFormatter(customFormatters: CustomFormatters): FormatFunction {
-  return function intlFormatDate(date: Date, format: string, options?: FormatOptions): string {
+  return function intlFormatDate(date: Date, format: string, options?: FormatOptions): React.ReactNode {
     const tokens = parseDate(date, options);
     const output = formatDate(customFormatters, format, tokens, date);
     return output;
@@ -135,8 +136,8 @@ const formatters: Formatters = {
   ddx: (parts) => `${parseInt(parts.day, 10)}${daySuffix(parseInt(parts.day))}`,
   dddd: (parts) => parts.weekday,
   ddd: (parts) => parts.weekday.slice(0, 3),
-  A: (parts) => parts.dayPeriod,
-  a: (parts) => parts.dayPeriod.toLowerCase(),
+  A: (parts) => <AmOrPm className="time-suffix">{parts.dayPeriod}</AmOrPm>,
+  a: (parts) => <AmOrPm className="time-suffix">{parts.dayPeriod.toLowerCase()}</AmOrPm>,
   // XXX: fix Chrome 80+ bug going over 24h
   HH: (parts) => ("0" + (Number(parts.lhour) % 24)).slice(-2),
   hh: (parts) => parts.hour,
@@ -146,14 +147,46 @@ const formatters: Formatters = {
 
 const createCustomPattern = (customFormatters: CustomFormatters) => Object.keys(customFormatters).reduce((_, key) => `|${key}`, "");
 
-function formatDate(customFormatters: CustomFormatters, format: string, parts: DateParts, date: Date): string {
+function formatDate(customFormatters: CustomFormatters, format: string, parts: DateParts, date: Date): React.ReactNode {
   const literalPattern = "\\[([^\\]]+)\\]|";
   const customPattern = createCustomPattern(customFormatters);
   const patternRegexp = new RegExp(`${literalPattern}${defaultPattern}${customPattern}`, "g");
 
   const allFormatters = { ...formatters, ...customFormatters };
-  // @ts-expect-error - fix later
-  return format.replace(patternRegexp, (mask: FormatterMask, literal: string) => {
-    return literal || allFormatters[mask](parts, date);
+  // We'll accumulate text/JSX in an array
+  const tokens: React.ReactNode[] = [];
+  let lastIndex = 0;
+  // @ts-expect-error - will fix later
+  format.replace(patternRegexp, (mask: FormatterMask, literal: string, offset: number) => {
+    // 'offset' is the index of this match within the full format string
+
+    // Push any text that occurs before this match
+    if (offset > lastIndex) {
+      const val = format.slice(lastIndex, offset);
+      if (val.length > 0 && val.trim().length === 0) {
+        // whitespace char
+        tokens.push(<span className="whitespace">&nbsp;</span>);
+      } else {
+        tokens.push(val);
+      }
+    }
+    lastIndex = offset + mask.length;
+
+    if (literal) {
+      // If we matched [literal text], just push that as plain text
+      tokens.push(literal);
+    } else {
+      // Everything else just push normally
+      tokens.push(allFormatters[mask](parts, date));
+    }
+    // Return an empty string to discard the normal replace output
+    return "";
   });
+  // If there's still text remaining after the last match, push it
+  if (lastIndex < format.length) {
+    tokens.push(format.slice(lastIndex));
+  }
+  // Finally, render the HTML string inside React. We must do dangerouslySetInnerHTML
+  // so that <div> ... </div> is recognized as HTML, not plain text:
+  return <>{tokens}</>;
 }

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

@@ -6,6 +6,7 @@ import { Row, Column, fallback, CardBase, type CardBaseProps, type AvailableQuer
 import { createDateFormatter, daySuffix } from "./formatter";
 import { ErrorBoundary } from "react-error-boundary";
 import { FormatFunction } from "./types";
+import { Time, AmOrPm } from "./shared";
 
 const Card = styled(CardBase)`
   cursor: default;
@@ -29,21 +30,6 @@ const Contents = styled.div`
   }
 `;
 
-const Time = styled.h4`
-  all: unset;
-  font-family: var(--ha-font-family);
-  font-size: 2rem;
-  color: var(--ha-S200-contrast);
-  font-weight: 400;
-`;
-const AmOrPm = styled.h4`
-  all: unset;
-  font-family: var(--ha-font-family);
-  font-size: 2rem;
-  color: var(--ha-S400-contrast);
-  font-weight: 300;
-`;
-
 function convertTo12Hour(time: string) {
   // Create a new Date object
   const [hour, minute] = time.split(":");
@@ -87,7 +73,7 @@ function formatDate(dateString: string): string {
 
   return formattedDate;
 }
-type CustomFormatter = (date: Date, formatter: FormatFunction) => string;
+type CustomFormatter = (date: Date, formatter: FormatFunction) => React.ReactNode;
 type OmitProperties = "title" | "as" | "active" | "entity" | "service" | "serviceData" | "longPressCallback" | "modalProps";
 export interface TimeCardProps extends Omit<CardBaseProps<"div">, OmitProperties> {
   /** provide a custom entity to read the time from, if not found/provided it will update from machine time @default "sensor.time" */
@@ -116,7 +102,7 @@ export interface TimeCardProps extends Omit<CardBaseProps<"div">, OmitProperties
   onClick?: (entity: HassEntityWithService<"sensor">, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
 
-const DEFAULT_TIME_FORMAT = "hh:mm a";
+const DEFAULT_TIME_FORMAT = "hh:mm A";
 const DEFAULT_DATE_FORMAT = "dddd, MMMM DD YYYY";
 
 const customFormatter = createDateFormatter({});
@@ -152,6 +138,7 @@ function InternalTimeCard({
   const dateSensor = useEntity(dateEntity ?? "sensor.date", {
     returnNullIfNotFound: true,
   });
+  const dateIcon = useMemo(() => icon || dateSensor?.attributes?.icon || "mdi:calendar", [icon, dateSensor]);
   const [formatted, amOrPm] = useMemo(() => {
     const parts = convertTo12Hour(timeSensor?.state ?? "00:00");
     const hour = parts.find((part) => part.type === "hour");
@@ -209,10 +196,12 @@ function InternalTimeCard({
   }, [throttleTime]);
 
   useEffect(() => {
-    if (!timeFormat && !dateFormat) return; // let home assistant trigger updates
+    const hasEntities = timeSensor || dateSensor;
+    const hasFormatters = timeFormat || dateFormat;
+    if (hasEntities && !hasFormatters) return; // let home assistant trigger updates
     requestRef.current = requestAnimationFrame(updateClock);
     return () => cancelAnimationFrame(requestRef.current!);
-  }, [updateClock, timeFormat, dateFormat]);
+  }, [updateClock, timeFormat, dateFormat, timeSensor, dateSensor]);
 
   return (
     <Card
@@ -236,9 +225,7 @@ function InternalTimeCard({
         <Column className="column" gap="0.5rem" alignItems={center ? "center" : "flex-start"} fullHeight wrap="nowrap">
           {(!hideIcon || !hideTime) && (
             <Row className="row" gap="0.5rem" alignItems="center" wrap="nowrap">
-              {!hideIcon && (
-                <Icon className="icon primary-icon" icon={icon || dateSensor?.attributes?.icon || "mdi:calendar"} {...(iconProps ?? {})} />
-              )}
+              {!hideIcon && <Icon className="icon primary-icon" icon={dateIcon} {...(iconProps ?? {})} />}
               {!hideTime && timeValue}
             </Row>
           )}

packages/components/src/Cards/TimeCard/shared.tsx

@@ -0,0 +1,19 @@
+import styled from "@emotion/styled";
+
+export const Time = styled.span`
+  all: unset;
+  font-family: var(--ha-font-family);
+  font-size: 2rem;
+  color: var(--ha-S200-contrast);
+  font-weight: 400;
+  display: flex;
+  flex-direction: row;
+`;
+
+export const AmOrPm = styled.span`
+  all: unset;
+  font-family: var(--ha-font-family);
+  font-size: 2rem;
+  color: var(--ha-S400-contrast);
+  font-weight: 300;
+`;