@autobusal/common 1.15.7 → 1.16.0

package/CHANGELOG.md

@@ -6,6 +6,17 @@ All notable changes to `@autobusal/common` are documented here. This project fol
 > Note: 1.10.0 through 1.15.1 were published without changelog entries. The
 > gap is left as-is rather than reconstructed after the fact.
 
+## [1.16.0] - 2026-08-01
+
+### Added
+
+- **The date field can tell its form when the day changes.** `ViewData.onChange`
+  was already honoured by `select` and `checkbox`, but not by `date`/`dob`/
+  `picker`, so a form whose other fields depend on the chosen day had no way
+  to observe it short of not using `Viewer` at all. `Calendar` now takes an
+  optional `onChange(DD/MM/YYYY)` and `Viewer` passes `item.onChange` through
+  to it. Purely additive - existing callers are unaffected.
+
 ## [1.15.6] - 2026-08-01
 
 ### Changed

package/Calendar/Calendar.tsx

@@ -22,9 +22,15 @@ interface Props {
   minDate?: string
   refs: UseFormRegister<any>
   onUpdate: UseFormSetValue<any>
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-01
+   * Notified with the newly picked DD/MM/YYYY day, for callers that need to
+   * react to it rather than only read it back at submit time.
+   */
+  onChange?: (value: string) => void
 }
 
-const Calendar = ({ type, name, defaultValue, t, validation, minDate, refs, onUpdate }: Props): JSX.Element => {
+const Calendar = ({ type, name, defaultValue, t, validation, minDate, refs, onUpdate, onChange }: Props): JSX.Element => {
   const [ show, setShow ] = useState<boolean>(false);
   const [ prepared, setPrepared ] = useState<string>(defaultValue ?? prepareDate(new Date()));
   const [ selected, setSelected ] = useState<string>(prepared);
@@ -40,6 +46,8 @@ const Calendar = ({ type, name, defaultValue, t, validation, minDate, refs, onUp
     setPrepared(prepared);
 
     onUpdate(name, prepared);
+
+    onChange?.(prepared);
   };
 
   return (

package/Road/Road.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { RiBus2Line } from 'react-icons/ri';
+import { Container, Bus, Vehicle, Fallback } from './styles';
+
+interface Props {
+  /**
+   * Brand asset root (SettingsData.url). The bus is served from the label's
+   * own storage, exactly like its logo and hero artwork, so a whitelabel can
+   * ship its own vehicle without a code change.
+   */
+  url?: string
+}
+
+/**
+ * A road with a bus travelling along it.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * Shared by the under-construction holding page and the error pages, which
+ * had been growing their own copies of the same CSS.
+ *
+ * The vehicle is an image from label storage rather than a bundled asset,
+ * for the same reason the logo is: every brand gets its own without a
+ * rebuild. If the brand has not supplied one the icon stands in, so a
+ * missing file degrades to what the page looked like before rather than
+ * leaving a hole where a bus should be.
+ *
+ * Entirely decorative - the caller marks it aria-hidden.
+ */
+const Road = ({ url }: Props): JSX.Element => {
+  const [ failed, setFailed ] = useState<boolean>(false);
+
+  return (
+    <Container>
+      <Bus>
+        { url !== undefined && !failed
+          ? (
+            /* WebP first (10KB against the PNG's 66KB), with the PNG as the
+               fallback source and the icon as the fallback for a brand that
+               has not supplied artwork at all */
+            <picture>
+              <source srcSet={ `${ url }/bus-artwork.webp` } type="image/webp" />
+
+              <Vehicle src={ `${ url }/bus-artwork.png` } alt="" onError={ () => setFailed(true) } />
+            </picture>
+          )
+          : <Fallback><RiBus2Line /></Fallback> }
+      </Bus>
+    </Container>
+  );
+};
+
+export default Road;

package/Road/styles.ts

@@ -0,0 +1,87 @@
+import styled, { keyframes } from 'styled-components';
+
+const drift = keyframes`
+  from { transform: translateX(0); }
+  to { transform: translateX(-84px); }
+`;
+
+const travel = keyframes`
+  from { transform: translateX(-26vw); }
+  to { transform: translateX(114vw); }
+`;
+
+/**
+ * Ferjolt Ozuni - Date: 2026-08-01
+ *
+ * A band of road across the foot of the page. Lifted out of
+ * UnderConstruction so the error pages could use the same one instead of a
+ * second copy of the same CSS.
+ */
+export const Container = styled.div`
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 150px;
+  overflow: hidden;
+  background: linear-gradient(
+    to top,
+    ${ props => props.theme.primary.normal }22,
+    transparent
+  );
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 46px;
+    left: 0;
+    width: 200%;
+    height: 3px;
+    border-radius: 3px;
+    background: repeating-linear-gradient(
+      to right,
+      ${ props => props.theme.primary.normal }66 0 42px,
+      transparent 42px 84px
+    );
+    animation: ${ drift } 6s linear infinite;
+  }
+
+  /* a moving road is exactly the kind of thing that should stop for anyone
+     who has asked motion to stop */
+  @media (prefers-reduced-motion: reduce) {
+    &::after {
+      animation: none;
+    }
+  }
+`;
+
+export const Bus = styled.div`
+  position: absolute;
+  bottom: 44px;
+  left: 0;
+  display: flex;
+  align-items: flex-end;
+  animation: ${ travel } 18s linear infinite;
+
+  /* parked, not removed - the scene should still make sense standing still */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    transform: translateX(10vw);
+  }
+`;
+
+export const Vehicle = styled.img`
+  display: block;
+  width: 150px;
+  height: auto;
+
+  @media (min-width: 768px) {
+    width: 200px;
+  }
+`;
+
+export const Fallback = styled.span`
+  display: flex;
+  font-size: 44px;
+  color: ${ props => props.theme.primary.normal };
+`;

package/UnderConstruction/UnderConstruction.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { TFunction } from 'i18next';
-import { Screen, Content, Logo, Title, Message, Road } from './styles';
+import Road from '../Road/Road';
+import { Screen, Content, Logo, Title, Message } from './styles';
 import { useGetSettings } from '@autobusal/providers/services';
 
 interface Props {
@@ -75,7 +76,12 @@ const UnderConstruction = ({ t }: Props): JSX.Element => {
 
       </Content>
 
-      <Road aria-hidden="true" />
+      { /* Edited: Ferjolt Ozuni - Date: 2026-08-01
+           Shared with the error pages now, and carrying the brand's bus
+           rather than a bare strip of road. */ }
+      <div aria-hidden="true">
+        <Road url={ settings?.url } />
+      </div>
     </Screen>
   );
 };

package/UnderConstruction/styles.ts

@@ -11,11 +11,6 @@ import styled, { keyframes } from 'styled-components';
  * rather than a generic maintenance page.
  */
 
-const drift = keyframes`
-  from { transform: translate3d(0, 0, 0); }
-  to   { transform: translate3d(-50%, 0, 0); }
-`;
-
 const rise = keyframes`
   from { opacity: 0; transform: translateY(14px); }
   to   { opacity: 1; transform: translateY(0); }
@@ -72,44 +67,3 @@ export const Message = styled.p`
   color: ${ props => props.theme.font.faded };
 `;
 
-/**
- * A slow band of road at the foot of the page. Purely decorative, and
- * hidden from assistive tech - it carries no information.
- */
-export const Road = styled.div`
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: 96px;
-  opacity: 0.5;
-  background: linear-gradient(
-    to top,
-    ${ props => props.theme.primary.normal }22,
-    transparent
-  );
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 34px;
-    left: 0;
-    width: 200%;
-    height: 3px;
-    border-radius: 3px;
-    background: repeating-linear-gradient(
-      to right,
-      ${ props => props.theme.primary.normal }66 0 42px,
-      transparent 42px 84px
-    );
-    animation: ${ drift } 6s linear infinite;
-  }
-
-  /* a moving dashed line is exactly the kind of thing that should stop for
-     anyone who has asked motion to stop */
-  @media (prefers-reduced-motion: reduce) {
-    &::after {
-      animation: none;
-    }
-  }
-`;

package/Viewer/Data.tsx

@@ -83,6 +83,12 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
           validation={ item.rules }
           refs={ refs }
           onUpdate={ onUpdate }
+          // Edited: Ferjolt Ozuni - Date: 2026-08-01
+          // `select` and `checkbox` already surfaced item.onChange; date did
+          // not, so a form whose other fields react to the chosen day (e.g.
+          // the Telegram broadcast's live recipient count) had no way to
+          // observe it short of not using Viewer at all.
+          onChange={ item.onChange }
         />
       );
 

package/index.ts

@@ -29,6 +29,7 @@ import Policy from './Policy/Policy';
 import Report from './Report/Report';
 import RouteFeature from './RouteFeature/RouteFeature';
 import Required from './Required/Required';
+import Road from './Road/Road';
 import RouteItem from './RouteItem/RouteItem';
 import Row from './Table/Row';
 import Table from './Table/Table';
@@ -72,6 +73,7 @@ export {
   Report,
   RouteFeature,
   Required,
+  Road,
   RouteItem,
   Row,
   Table,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.15.7",
+  "version": "1.16.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"