@autobusal/common 1.8.3 → 1.10.0

package/Avatar.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { OperatorData } from '@autobusal/providers/types/operators';
 import { AgentData } from '@autobusal/providers/types/agents';
+import { logoBox } from './styles';
 
 interface Props {
   display?: OperatorData | AgentData
@@ -19,8 +20,8 @@ const Container = styled.div`
   gap: 10px;
 
   & > img {
-    display: block;
-    width: 80px;
+    ${ logoBox('80px', '48px') }
+
     border-radius: ${ props => props.theme.borderRadius };
   }
 `;

package/Button/Button.tsx

@@ -11,9 +11,15 @@ interface Props {
   noMargin?: boolean
   maxWidth?: number
   onClick?: any
+  // Edited: Ferjolt Ozuni - Date: 2026-07-31
+  // A native <button name value> pair - lets a form with more than one
+  // submit-type action (e.g. Viewer's 'save' vs 'test') tell them apart via
+  // the submit event's `submitter`, without any extra state.
+  name?: string
+  value?: string
 }
 
-const Button = ({ type, size, loading, active, subtype, text, noMargin, maxWidth, onClick }: Props) => (
+const Button = ({ type, size, loading, active, subtype, text, noMargin, maxWidth, onClick, name, value }: Props) => (
   <ButtonStyled
     $size={ size }
     type={ loading ? 'button' : type }
@@ -22,6 +28,8 @@ const Button = ({ type, size, loading, active, subtype, text, noMargin, maxWidth
     $margin={ noMargin ? false : true }
     $maxWidth={ maxWidth }
     onClick={ onClick }
+    name={ name }
+    value={ value }
   >
     { loading ? <RiLoader2Fill /> : text }
   </ButtonStyled>

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to `@autobusal/common` are documented here. This project follows
 [Keep a Changelog](https://keepachangelog.com/) and [Semantic Versioning](https://semver.org/).
 
+## [1.9.0] - 2026-07-31
+
+### Added
+
+- **`Viewer`/`Actions`/`Button` support a second submit-type action** via an
+  optional `onTest` prop on `Viewer` and a new `'test'` entry in its
+  `actions` array. A form with two submit buttons can't otherwise tell
+  which one triggered submission - `Button` now forwards a native
+  `name`/`value` pair, and `Viewer`'s `onSubmit` reads the submit event's
+  `submitter` to route to `onTest` instead of `onSave` when the 'test'
+  button was clicked, while keeping the exact same current form values.
+  First consumer: `@autobusal/admin-label` 1.10.0's "Test" button on the
+  SMTP settings tab.
+
 ## [1.8.3] - 2026-07-31
 
 ### Fixed

package/CompanyItem/styles.ts

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
+import { logoBox } from '../styles';
 
 export const Item = styled.div<{
   $column: boolean
@@ -41,8 +42,8 @@ const LogoCss = css`
   justify-content: center;
 
   & > img {
-    display: block;
-    width: 120px;
+    ${ logoBox('120px', '72px') }
+
     border-radius: ${ props => props.theme.borderRadius };
   }
 `;

package/RouteItem/styles.ts

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
+import { logoFit } from '../styles';
 
 export const Container = styled.div`
   padding: 10px;
@@ -29,8 +30,13 @@ export const Logo = styled(Link)`
   border-radius: ${ props => props.theme.borderRadius };
 
   & > img {
-    display: block;
+    ${ logoFit }
+
+    /* the container carries aspect-ratio: 1.35 - filling it completely is
+       what lets object-fit letterbox inside that shape, instead of the
+       image dictating its own height and spilling out of it */
     width: 100%;
+    height: 100%;
   }
 `;
 

package/Viewer/Actions.tsx

@@ -1,6 +1,6 @@
 import { TFunction } from 'i18next';
 import { BiEditAlt, BiTrash, BiSend } from 'react-icons/bi';
-import { RiSave2Line, RiCheckFill, RiSearchLine } from 'react-icons/ri';
+import { RiSave2Line, RiCheckFill, RiSearchLine, RiMailSendLine } from 'react-icons/ri';
 import { BsPlusCircleFill } from 'react-icons/bs';
 import Button from '../Button/Button';
 import { ContainerActions } from './styles';
@@ -41,6 +41,21 @@ const Actions = ({ id, available, pending, t, onDelete }: Props): JSX.Element =>
     });
   }
 
+  // Edited: Ferjolt Ozuni - Date: 2026-07-31
+  // A second submit-type action alongside 'save' (e.g. "Test SMTP") - the
+  // name/value pair lets Viewer's onSubmit tell which button was actually
+  // clicked via the submit event's `submitter`, since a form with two
+  // submit buttons can't otherwise distinguish them.
+  if (available.includes('test')) {
+    options.push({
+      label: t('table.actions.test', { ns: 'common' }),
+      icon: <RiMailSendLine />,
+      type: 'submit',
+      name: 'intent',
+      value: 'test'
+    });
+  }
+
   if (available.includes('send')) {
     options.push({
       label: t('table.actions.send', { ns: 'common' }),
@@ -93,6 +108,8 @@ const Actions = ({ id, available, pending, t, onDelete }: Props): JSX.Element =>
       loading={ pending }
       noMargin
       onClick={ item.handler }
+      name={ item.name }
+      value={ item.value }
     />
   ));
 

package/Viewer/Viewer.tsx

@@ -16,11 +16,16 @@ interface Props {
   t: TFunction<'common'>
   onSave?: (data: any) => void
   onDelete?: (data?: any) => void
+  // Edited: Ferjolt Ozuni - Date: 2026-07-31
+  // Optional second submit-type action (actions={['save', 'test']}) - e.g.
+  // the SMTP tab's "Test" button, which needs the same current form values
+  // as save but must call a different handler instead of persisting.
+  onTest?: (data: any) => void
 }
 
-const Viewer = ({ id, type, data, fetching, pending, actions, t, onSave, onDelete }: Props): JSX.Element => {
+const Viewer = ({ id, type, data, fetching, pending, actions, t, onSave, onDelete, onTest }: Props): JSX.Element => {
   const { register, handleSubmit, formState: { errors }, setValue } = useForm<any>();
-  
+
   if (fetching) {
     return <Loading t={ t } />;
   }
@@ -37,7 +42,18 @@ const Viewer = ({ id, type, data, fetching, pending, actions, t, onSave, onDelet
     />
   ));
 
-  const onSubmit = (data: any): void => {
+  const onSubmit = (data: any, event?: React.BaseSyntheticEvent): void => {
+    // A form with two submit buttons can't tell which one triggered
+    // submission except via the native SubmitEvent's `submitter` - the
+    // 'test' button is the only one with a name/value pair (see Actions.tsx).
+    const submitter = (event?.nativeEvent as SubmitEvent | undefined)?.submitter as (HTMLButtonElement | undefined);
+
+    if (submitter?.value === 'test' && onTest !== undefined) {
+      onTest(data);
+
+      return;
+    }
+
     if (onSave !== undefined) {
       onSave(data);
     }

package/Viewer/types.ts

@@ -19,4 +19,6 @@ export interface ActionData {
   type?: 'submit'
   subtype?: 'delete'
   handler?: () => void
+  name?: string
+  value?: string
 }

package/package.json

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

package/styles.ts

@@ -0,0 +1,51 @@
+import { css } from 'styled-components';
+
+/**
+ * How an operator/agent logo is displayed, everywhere.
+ *
+ * Edited: Ferjolt Ozuni - Date: 2026-07-31
+ *
+ * Logos are uploaded by operators at whatever size and shape they happen to
+ * have - tall badges, wide wordmarks, squares. Every place that rendered
+ * one set a width (or `width: 100%`) and no height and no `object-fit`, so
+ * the image was left to take whatever height its own ratio implied: inside
+ * a fixed or aspect-ratio'd box that meant it overflowed and was visibly
+ * cropped, and in a flex row it stretched its neighbours around.
+ *
+ * `object-fit: contain` is the whole fix. It scales the image down until it
+ * fits INSIDE the box in its own aspect ratio, never cropping and never
+ * distorting. Whatever room is left over stays empty - deliberately
+ * transparent rather than a colour, so the logo sits on whatever the
+ * surrounding card already uses and dark and light themes both work without
+ * a second rule.
+ *
+ * The box needs BOTH dimensions for this to mean anything: with only a
+ * width there is no leftover space for `contain` to preserve, and the
+ * behaviour collapses back to the original bug. Callers pass the size.
+ *
+ * `object-position: center` is explicit rather than relied upon - it is the
+ * default, but the whole point here is that nothing about the framing is
+ * left to chance.
+ */
+export const logoFit = css`
+  display: block;
+  object-fit: contain;
+  object-position: center;
+
+  /* no fill, so the logo adopts whatever surface it is placed on */
+  background: transparent;
+`;
+
+/**
+ * A complete logo box: fits the image inside the given dimensions without
+ * cropping or stretching it.
+ *
+ * Pass the size the layout wants; the image keeps its own proportions
+ * within it.
+ */
+export const logoBox = (width: string, height: string) => css`
+  ${ logoFit }
+
+  width: ${ width };
+  height: ${ height };
+`;