@autobusal/common 1.27.5 → 1.28.0

package/CHANGELOG.md

@@ -1,6 +1,19 @@
 # Changelog
 
 
+## 1.28.0
+
+### Added
+
+- **`Row` takes an optional `actions`**, overriding the table's list for that
+  row. The table-level prop is one array for every row, which cannot express
+  an action only some rows have earned - a ticket download belongs to a paid
+  order and to no other. `Rows` falls back to the table's list, so every
+  existing caller is unaffected.
+- **`print` and `invoice` row-action icons.** Distinct from the existing
+  generic `download`.
+
+
 ## 1.27.5
 
 ### Added

package/Table/Actions/Icon.tsx

@@ -4,7 +4,8 @@ import { BiEditAlt, BiTransfer, BiTrash } from 'react-icons/bi';
 import { FaTrash } from 'react-icons/fa';
 import { GiMoneyStack } from 'react-icons/gi';
 import { IoDocumentLockOutline } from 'react-icons/io5';
-import { RiBusLine, RiExternalLinkLine, RiEyeLine, RiLoginCircleLine, RiReplyLine } from 'react-icons/ri';
+import { FaFileInvoice } from 'react-icons/fa';
+import { RiBusLine, RiExternalLinkLine, RiEyeLine, RiLoginCircleLine, RiPrinterLine, RiReplyLine } from 'react-icons/ri';
 
 interface Props {
   type: string
@@ -57,6 +58,16 @@ const Icon = ({ type, t }: Props): (JSX.Element | null) => {
     case 'download':
       return <AiOutlineCloudDownload  title={ t('table.actions.custom.download', { ns: 'common' }) }  />;
 
+    // Edited: Ferjolt Ozuni - Date: 2026-08-07
+    // The ticket and its invoice, for tables that can hand both over
+    // directly - the order listing does. Distinct from 'download' above,
+    // which is the generic one already spoken for by the invoice queue.
+    case 'print':
+      return <RiPrinterLine title={ t('table.actions.custom.print', { ns: 'common' }) } />;
+
+    case 'invoice':
+      return <FaFileInvoice title={ t('table.actions.custom.invoice', { ns: 'common' }) } />;
+
     case 'bus':
       return <RiBusLine  title={ t('table.actions.custom.bus', { ns: 'common' }) }  />;
 

package/Table/Row.tsx

@@ -2,6 +2,18 @@ import { Td } from './styles';
 
 interface Props {
   id?: number
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-07
+   *
+   * Options for THIS row, overriding the table's own list. The table-level
+   * `actions` prop is one array for every row, which cannot express an
+   * action that only some rows have earned - a ticket download belongs to a
+   * paid order and to no other.
+   *
+   * Read by Rows/Rows.tsx off this element's props; Row itself renders only
+   * the data cells, so it does not use the value.
+   */
+  actions?: string[]
   data: any[]
 }
 

package/Table/Rows/NotFound.tsx

@@ -4,15 +4,17 @@ import { ContainerNotFound } from './styles';
 
 interface Props {
   length: number
+  // An explanation, where there is one worth giving - see Table's `empty`.
+  message?: string
   t: TFunction<'common'>
 }
 
-const NotFound = ({ length, t }: Props): JSX.Element => (
+const NotFound = ({ length, message, t }: Props): JSX.Element => (
   <tbody>
     <tr>
       <td colSpan={ length }>
         <ContainerNotFound>
-          <RiEmotionUnhappyLine />{ t('table.no_data', { ns: 'common' }) }
+          <RiEmotionUnhappyLine />{ message ?? t('table.no_data', { ns: 'common' }) }
         </ContainerNotFound>
       </td>
     </tr>

package/Table/Rows/Rows.tsx

@@ -13,19 +13,20 @@ interface Props {
   loading: boolean
   fetching: boolean
   colLength: number
+  empty?: string
   t: TFunction<'common'>
   actions?: string[]
   handlers?: any
   navigate: NavigateFunction
 }
 
-const Rows = ({ url, urlWith, data, loading, fetching, colLength, t, actions, handlers, navigate }: Props): JSX.Element => {
+const Rows = ({ url, urlWith, data, loading, fetching, colLength, empty, t, actions, handlers, navigate }: Props): JSX.Element => {
   if (loading) {
     return <Loading length={ colLength } t={ t } />;
   }
 
   if (data?.length === 0) {
-    return <NotFound length={ colLength } t={ t } />;
+    return <NotFound length={ colLength } message={ empty } t={ t } />;
   }
 
   const isViewable = actions?.includes('view');
@@ -36,23 +37,30 @@ const Rows = ({ url, urlWith, data, loading, fetching, colLength, t, actions, ha
     }
   };
 
-  const columns = data?.map((item, index) => (
+  const columns = data?.map((item, index) => {
+    // Edited: Ferjolt Ozuni - Date: 2026-08-07
+    // A row may name its own options - see Row.tsx. Falls back to the
+    // table's list, which is what every existing caller relies on.
+    const available = item.props.actions ?? actions;
+
+    return (
     <Tr key={ index } $viewable={ isViewable } onClick={ () => onClick(item.props.id) }>
       { item }
 
-      { rowActions(actions).length > 0 && (
+      { rowActions(available).length > 0 && (
         <Actions
           id={ item.props.id }
           url={ url }
           urlWith={ urlWith }
-          available={ actions }
+          available={ available }
           t={ t }
           handlers={ handlers }
           navigate={ navigate }
         />
       ) }
     </Tr>
-  ));
+    );
+  });
 
   return (
     <Tbody $fetching={ fetching }>

package/Table/Table.tsx

@@ -21,10 +21,21 @@ interface Props {
   t: TFunction<'common'>
   actions?: string[]
   extra?: JSX.Element
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-07
+   * What to say when the table is empty for a REASON, rather than merely
+   * empty. "No data found" is right for a search that matched nothing and
+   * useless for a screen that will stay empty until somebody else acts -
+   * a new agency's route list reads as a broken page rather than as one
+   * waiting on an admin to grant it operators.
+   *
+   * Optional: a table that does not pass one keeps the generic message.
+   */
+  empty?: string
   handlers?: any
 }
 
-const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, fetching, t, actions, extra, handlers }: Props): JSX.Element => {
+const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, fetching, t, actions, extra, empty, handlers }: Props): JSX.Element => {
   const navigate = useNavigate();
 
   const colLength = columns.length + 1;
@@ -59,6 +70,7 @@ const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, f
               loading={ loading }
               fetching={ fetching }
               colLength={ colLength }
+              empty={ empty }
               t={ t }
               actions={ actions }
               handlers={ handlers }

package/Viewer/Item.tsx

@@ -1,7 +1,7 @@
 import { FieldErrors, UseFormRegister, UseFormSetValue } from 'react-hook-form';
 import { Display } from '@autobusal/utilities';
 import Data from './Data';
-import { Notice } from './styles';
+import { Notice, Label, Required } from './styles';
 import { ViewData } from './types';
 import { TFunction } from 'i18next';
 
@@ -16,7 +16,28 @@ interface Props {
 
 const Item = ({ id, data, refs, t, errors, onUpdate }: Props): JSX.Element => (
   <div className={ `row row-${ data.type } ${ data.label === undefined && 'spacer' }` }>
-    { data.label }
+    {/*
+      * Edited: Ferjolt Ozuni - Date: 2026-08-07
+      *
+      * Required fields say so. Read straight off the validation rules rather
+      * than a second flag per field, so a label cannot promise something the
+      * form does not enforce - or stay silent about something it does.
+      *
+      * Label and asterisk share ONE element on purpose. The row is a flex
+      * COLUMN, so a bare text node beside a sibling span makes two flex
+      * items and the asterisk drops onto a line of its own underneath.
+      *
+      * Only rendered when there is a label at all - a row without one is the
+      * spacer, and an empty element there would take a flex slot and open a
+      * gap where the divider should be.
+      */}
+    { data.label !== undefined && (
+      <Label>
+        { data.label }
+
+        { data.rules?.includes('required') && <Required aria-hidden="true">*</Required> }
+      </Label>
+    ) }
 
     <Data
       id={ id }

package/Viewer/styles.ts

@@ -25,6 +25,17 @@ export const Container = styled.div`
       height: 1px;
       background: ${ props => props.theme.background.neutral };
     }
+
+    /*
+     * Edited: Ferjolt Ozuni - Date: 2026-08-07
+     * A rich-text editor gets the full row. At a third of the width it has
+     * less room for its own toolbar than for the text, and every consumer
+     * that uses one wants it wide - so this belongs here rather than as a
+     * flag each caller has to remember to pass.
+     */
+    & > div.row-textarea-html {
+      flex-basis: 100% !important;
+    }
   }
 
   @media (min-width: 1300px) {
@@ -55,4 +66,17 @@ export const Notice = styled.div`
   font-size: ${ props => props.theme.size.xxs };
   color: ${ props => props.theme.font.info };
   font-weight: 400;
-`;
+`;
+/*
+ * Edited: Ferjolt Ozuni - Date: 2026-08-07
+ * The asterisk beside a required field's label. aria-hidden where it is
+ * used - the requirement is already carried to assistive tech by the
+ * field's own validation, and a lone "*" read aloud says nothing.
+ */
+export const Label = styled.span``;
+
+export const Required = styled.span`
+  margin-left: 3px;
+  color: ${ props => props.theme.font.error };
+  font-weight: 700;
+`;

package/package.json

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