@arbor-education/design-system.components 0.25.9 → 1.0.1

package/src/components/table/cellRenderers/ButtonCellRenderer.stories.tsx

@@ -21,7 +21,8 @@ const DESCRIPTION_INTRO = [
   'The cell `value` (or `valueFormatted`) must be a `ButtonProps` object — the renderer spreads it',
   'directly onto `Button`, so all button variants, sizes, and handlers are supported.',
   '',
-  'Register it via the string key `dsButtonCellRenderer` (pre-registered by Arbor\'s `Table`) or by importing the component directly.',
+  'Register it via `type: \'dsButtonColumn\'` on the column definition (pre-registered by Arbor\'s `Table`),',
+  'via the string key `dsButtonCellRenderer`, or by importing the component directly.',
 ].join('\n');
 
 const USAGE_GUIDANCE = [
@@ -56,7 +57,7 @@ const DEVELOPER_NOTES = [
   '  {',
   "    colId: 'viewAction',",
   "    headerName: '',",
-  "    cellRenderer: 'dsButtonCellRenderer',",
+  "    type: 'dsButtonColumn',",
   '    valueGetter: (params) => ({',
   "      children: 'View',",
   "      variant: 'secondary',",
@@ -199,7 +200,7 @@ const colDefs = [
   {
     colId: 'action',
     headerName: '',
-    cellRenderer: 'dsButtonCellRenderer',
+    type: 'dsButtonColumn',
     valueGetter: (params) => ({
       children: 'Enrol',
       variant: 'primary',
@@ -282,8 +283,7 @@ function ButtonCellRendererExample() {
           headerName: '',
           flex: 1,
           maxWidth: 180,
-          editable: false,
-          cellRenderer: 'dsButtonCellRenderer',
+          type: 'dsButtonColumn',
           valueGetter: (params) => ({
             children: 'View details',
             variant: 'secondary',
@@ -314,8 +314,7 @@ export default ButtonCellRendererExample;
             headerName: '',
             flex: 1,
             maxWidth: 180,
-            editable: false,
-            cellRenderer: 'dsButtonCellRenderer',
+            type: 'dsButtonColumn',
             valueGetter: params => ({
               children: 'View details',
               variant: 'secondary',
@@ -329,5 +328,5 @@ export default ButtonCellRendererExample;
       />
     ),
   },
-  '`dsButtonCellRenderer` wired up inside a full `Table`. The action column uses `valueGetter` to return a `ButtonProps` object per row — `onClick` closes over `params.data` so each button knows its row. Click a button and check the browser console.',
+  '`type: \'dsButtonColumn\'` wired up inside a full `Table`. The action column uses `valueGetter` to return a `ButtonProps` object per row — `onClick` closes over `params.data` so each button knows its row. Click a button and check the browser console.',
 );

package/src/components/table/cellRenderers/CheckboxCellRenderer.stories.tsx

@@ -21,7 +21,8 @@ const DESCRIPTION_INTRO = [
   '`CheckboxCellRenderer` is an AG Grid cell renderer that renders an editable Arbor `CheckboxInput`',
   'inside a table cell. On toggle, it calls `node.setDataValue` to update the row data in-place.',
   '',
-  'Register it via the string key `dsCheckboxCellRenderer` (pre-registered by Arbor\'s `Table`) or by importing the component directly.',
+  'Register it via `type: \'dsCheckboxColumn\'` on the column definition (pre-registered by Arbor\'s `Table`),',
+  'via the string key `dsCheckboxCellRenderer`, or by importing the component directly.',
 ].join('\n');
 
 const USAGE_GUIDANCE = [
@@ -61,7 +62,7 @@ const DEVELOPER_NOTES = [
   '  {',
   "    field: 'isEnrolled',",
   "    headerName: 'Enrolled',",
-  "    cellRenderer: 'dsCheckboxCellRenderer',",
+  "    type: 'dsCheckboxColumn',",
   '    // optional extra CheckboxInput props:',
   '    cellRendererParams: { disabled: isReadOnly },',
   '  },',
@@ -230,7 +231,7 @@ const colDefs = [
   {
     field: 'isEnrolled',
     headerName: 'Enrolled',
-    cellRenderer: 'dsCheckboxCellRenderer',
+    type: 'dsCheckboxColumn',
   },
 ];
 `.trim(),
@@ -300,8 +301,7 @@ function CheckboxCellRendererExample() {
           field: 'enrolled',
           headerName: 'Enrolled',
           flex: 1,
-          editable: false,
-          cellRenderer: 'dsCheckboxCellRenderer',
+          type: 'dsCheckboxColumn',
         },
       ]}
       defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -324,8 +324,7 @@ export default CheckboxCellRendererExample;
             field: 'enrolled',
             headerName: 'Enrolled',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsCheckboxCellRenderer',
+            type: 'dsCheckboxColumn',
           },
         ]}
         defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -333,5 +332,5 @@ export default CheckboxCellRendererExample;
       />
     ),
   },
-  '`dsCheckboxCellRenderer` wired up inside a full `Table`. Click a checkbox to toggle the value — AG Grid calls `node.setDataValue` which updates the row data in-place. The `headerName` ("Enrolled") becomes the checkbox `aria-label`.',
+  '`type: \'dsCheckboxColumn\'` wired up inside a full `Table`. Click a checkbox to toggle the value — AG Grid calls `node.setDataValue` which updates the row data in-place. The `headerName` ("Enrolled") becomes the checkbox `aria-label`.',
 );

package/src/components/table/cellRenderers/InlineTextCellRenderer.stories.tsx

@@ -21,7 +21,8 @@ const DESCRIPTION_INTRO = [
   'inside a table cell for inline text editing. Pressing Enter commits the current value via',
   '`node.setDataValue`. The input is pre-populated from `valueFormatted ?? value`.',
   '',
-  'Register it via the string key `dsInlineTextCellRenderer` (pre-registered by Arbor\'s `Table`) or by importing the component directly.',
+  'Register it via `type: \'dsInlineTextColumn\'` on the column definition (pre-registered by Arbor\'s `Table`),',
+  'via the string key `dsInlineTextCellRenderer`, or by importing the component directly.',
 ].join('\n');
 
 const USAGE_GUIDANCE = [
@@ -60,7 +61,7 @@ const DEVELOPER_NOTES = [
   '  {',
   "    field: 'forename',",
   "    headerName: 'First name',",
-  "    cellRenderer: 'dsInlineTextCellRenderer',",
+  "    type: 'dsInlineTextColumn',",
   '  },',
   '];',
   '```',
@@ -206,7 +207,7 @@ const colDefs = [
   {
     field: 'forename',
     headerName: 'First name',
-    cellRenderer: 'dsInlineTextCellRenderer',
+    type: 'dsInlineTextColumn',
   },
 ];
 `.trim(),
@@ -255,8 +256,7 @@ function InlineTextCellRendererExample() {
           field: 'forename',
           headerName: 'First Name',
           flex: 1,
-          editable: false,
-          cellRenderer: 'dsInlineTextCellRenderer',
+          type: 'dsInlineTextColumn',
         },
       ]}
       defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -279,8 +279,7 @@ export default InlineTextCellRendererExample;
             field: 'forename',
             headerName: 'First Name',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsInlineTextCellRenderer',
+            type: 'dsInlineTextColumn',
           },
         ]}
         defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -288,5 +287,5 @@ export default InlineTextCellRendererExample;
       />
     ),
   },
-  '`dsInlineTextCellRenderer` wired up inside a full `Table`. Click into any First Name cell to start editing — the `TextInput` is always visible. Press Enter to commit the value via `node.setDataValue`, updating the row data in-place.',
+  '`type: \'dsInlineTextColumn\'` wired up inside a full `Table`. Click into any First Name cell to start editing — the `TextInput` is always visible. Press Enter to commit the value via `node.setDataValue`, updating the row data in-place.',
 );

package/src/components/table/cellRenderers/NumberInputCellRenderer.stories.tsx

@@ -21,7 +21,8 @@ const DESCRIPTION_INTRO = [
   '`NumberInputCellRenderer` is an AG Grid cell renderer that renders an editable Arbor `NumberInput`',
   'permanently inside a table cell. On change, it calls `node.setDataValue` to update the row data in-place.',
   '',
-  'Register it via the string key `dsNumberInputCellRenderer` (pre-registered by Arbor\'s `Table`) or by importing the component directly.',
+  'Register it via `type: \'dsNumberInputColumn\'` on the column definition (pre-registered by Arbor\'s `Table`),',
+  'via the string key `dsNumberInputCellRenderer`, or by importing the component directly.',
 ].join('\n');
 
 const USAGE_GUIDANCE = [
@@ -61,7 +62,7 @@ const DEVELOPER_NOTES = [
   '  {',
   "    field: 'quantity',",
   "    headerName: 'Quantity',",
-  "    cellRenderer: 'dsNumberInputCellRenderer',",
+  "    type: 'dsNumberInputColumn',",
   '    cellRendererParams: { min: 0, max: 100 },',
   '  },',
   '];',
@@ -293,17 +294,15 @@ function NumberInputCellRendererExample() {
           field: 'sessions',
           headerName: 'Sessions',
           flex: 1,
-          editable: false,
-          cellRenderer: 'dsNumberInputCellRenderer',
-          cellRendererParams: { min: 0, suppressCellFocusAndFocusFirstElement: true },
+          type: 'dsNumberInputColumn',
+          cellRendererParams: { min: 0 },
         },
         {
           field: 'score',
           headerName: 'Score (/100)',
           flex: 1,
-          editable: false,
-          cellRenderer: 'dsNumberInputCellRenderer',
-          cellRendererParams: { min: 0, max: 100, suppressCellFocusAndFocusFirstElement: true },
+          type: 'dsNumberInputColumn',
+          cellRendererParams: { min: 0, max: 100 },
         },
       ]}
       defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -324,17 +323,15 @@ function NumberInputCellRendererExample() {
             field: 'sessions',
             headerName: 'Sessions',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsNumberInputCellRenderer',
-            cellRendererParams: { min: 0, suppressCellFocusAndFocusFirstElement: true },
+            type: 'dsNumberInputColumn',
+            cellRendererParams: { min: 0 },
           },
           {
             field: 'score',
             headerName: 'Score (/100)',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsNumberInputCellRenderer',
-            cellRendererParams: { min: 0, max: 100, suppressCellFocusAndFocusFirstElement: true },
+            type: 'dsNumberInputColumn',
+            cellRendererParams: { min: 0, max: 100 },
           },
         ]}
         defaultColDef={{ flex: 1, minWidth: 120 }}
@@ -342,5 +339,5 @@ function NumberInputCellRendererExample() {
       />
     ),
   },
-  '`dsNumberInputCellRenderer` wired up inside a full `Table`. Sessions has `min={0}`; Score has `min={0}` and `max={100}`. Edit any cell — AG Grid calls `node.setDataValue` which updates the row data in-place.',
+  '`type: \'dsNumberInputColumn\'` wired up inside a full `Table`. Sessions has `min={0}`; Score has `min={0}` and `max={100}`. Edit any cell — AG Grid calls `node.setDataValue` which updates the row data in-place.',
 );

package/src/components/table/cellRenderers/SelectDropdownCellRenderer.stories.tsx

@@ -23,7 +23,8 @@ const DESCRIPTION_INTRO = [
   'dropdown when the user presses Enter in the focused cell. On selection, it calls `node.setDataValue`',
   'to update the row data in-place.',
   '',
-  'Register it via the string key `dsSelectDropdownCellRenderer` (pre-registered by Arbor\'s `Table`) or by importing the component directly.',
+  'Register it via `type: \'dsSelectDropdownColumn\'` on the column definition (pre-registered by Arbor\'s `Table`),',
+  'via the string key `dsSelectDropdownCellRenderer`, or by importing the component directly.',
 ].join('\n');
 
 const USAGE_GUIDANCE = [
@@ -63,7 +64,7 @@ const DEVELOPER_NOTES = [
   '  {',
   "    field: 'status',",
   "    headerName: 'Status',",
-  "    cellRenderer: 'dsSelectDropdownCellRenderer',",
+  "    type: 'dsSelectDropdownColumn',",
   '    cellRendererParams: {',
   '      options: [',
   "        { label: 'Active', value: 'active' },",
@@ -273,7 +274,7 @@ const colDefs = [
   {
     field: 'status',
     headerName: 'Status',
-    cellRenderer: 'dsSelectDropdownCellRenderer',
+    type: 'dsSelectDropdownColumn',
     cellRendererParams: {
       options: [
         { label: 'Active', value: 'active' },
@@ -414,8 +415,7 @@ function SelectDropdownCellRendererExample() {
           field: 'status',
           headerName: 'Status',
           flex: 1,
-          editable: false,
-          cellRenderer: 'dsSelectDropdownCellRenderer',
+          type: 'dsSelectDropdownColumn',
           cellRendererParams: { options: statusOptions },
         },
       ]}
@@ -439,8 +439,7 @@ export default SelectDropdownCellRendererExample;
             field: 'status',
             headerName: 'Status',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsSelectDropdownCellRenderer',
+            type: 'dsSelectDropdownColumn',
             cellRendererParams: { options: STATUS_OPTIONS },
           },
         ]}
@@ -449,7 +448,7 @@ export default SelectDropdownCellRendererExample;
       />
     ),
   },
-  '`dsSelectDropdownCellRenderer` wired up inside a full `Table`. Click a Status dropdown to select a new value — the selection is committed to the row via `node.setDataValue`. Press Enter in a focused Status cell to open the dropdown via keyboard.',
+  '`type: \'dsSelectDropdownColumn\'` wired up inside a full `Table`. Click a Status dropdown to select a new value — the selection is committed to the row via `node.setDataValue`. Press Enter in a focused Status cell to open the dropdown via keyboard.',
 );
 
 const STATUS_BACKGROUND_COLORS: Record<string, string> = {
@@ -480,8 +479,7 @@ const columnDefs = [
     field: 'status',
     headerName: 'Status',
     flex: 1,
-    editable: false,
-    cellRenderer: 'dsSelectDropdownCellRenderer',
+    type: 'dsSelectDropdownColumn',
     // Per-row params: derive the cell background from the row's current value.
     cellRendererParams: (params) => ({
       options: statusOptions,
@@ -505,8 +503,7 @@ const columnDefs = [
             field: 'status',
             headerName: 'Status',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsSelectDropdownCellRenderer',
+            type: 'dsSelectDropdownColumn',
             cellRendererParams: (params: { value?: string }) => ({
               options: STATUS_OPTIONS,
               backgroundColor: params.value ? STATUS_BACKGROUND_COLORS[params.value] : undefined,
@@ -555,7 +552,7 @@ const columnDefs = [
   {
     field: 'english',
     headerName: 'English',
-    cellRenderer: 'dsSelectDropdownCellRenderer',
+    type: 'dsSelectDropdownColumn',
     cellRendererParams: {
       options: gradeOptions,
       iconClickOnly: true,
@@ -583,24 +580,21 @@ const columnDefs = [
             field: 'english',
             headerName: 'English',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsSelectDropdownCellRenderer',
+            type: 'dsSelectDropdownColumn',
             cellRendererParams: { options: GRADE_OPTIONS, iconClickOnly: true },
           },
           {
             field: 'maths',
             headerName: 'Maths',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsSelectDropdownCellRenderer',
+            type: 'dsSelectDropdownColumn',
             cellRendererParams: { options: GRADE_OPTIONS, iconClickOnly: true },
           },
           {
             field: 'science',
             headerName: 'Science',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsSelectDropdownCellRenderer',
+            type: 'dsSelectDropdownColumn',
             cellRendererParams: { options: GRADE_OPTIONS, iconClickOnly: true },
           },
         ]}
@@ -648,7 +642,7 @@ const columnDefs = [
   {
     field: 'english',
     headerName: 'English',
-    cellRenderer: 'dsSelectDropdownCellRenderer',
+    type: 'dsSelectDropdownColumn',
     cellRendererParams: (params) => ({
       options: gradeOptions,
       backgroundColor: GRADE_BACKGROUND_COLORS[params.value],
@@ -679,8 +673,7 @@ const columnDefs = [
             field: 'english',
             headerName: 'English',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsSelectDropdownCellRenderer',
+            type: 'dsSelectDropdownColumn',
             cellRendererParams: (params: { value?: string }) => ({
               options: GRADE_OPTIONS,
               backgroundColor: params.value ? GRADE_BACKGROUND_COLORS[params.value] : undefined,
@@ -693,8 +686,7 @@ const columnDefs = [
             field: 'maths',
             headerName: 'Maths',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsSelectDropdownCellRenderer',
+            type: 'dsSelectDropdownColumn',
             cellRendererParams: (params: { value?: string }) => ({
               options: GRADE_OPTIONS,
               backgroundColor: params.value ? GRADE_BACKGROUND_COLORS[params.value] : undefined,
@@ -707,8 +699,7 @@ const columnDefs = [
             field: 'science',
             headerName: 'Science',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsSelectDropdownCellRenderer',
+            type: 'dsSelectDropdownColumn',
             cellRendererParams: (params: { value?: string }) => ({
               options: GRADE_OPTIONS,
               backgroundColor: params.value ? GRADE_BACKGROUND_COLORS[params.value] : undefined,
@@ -742,7 +733,7 @@ const columnDefs = [
   {
     field: 'status',
     headerName: 'Status',
-    cellRenderer: 'dsSelectDropdownCellRenderer',
+    type: 'dsSelectDropdownColumn',
     cellRendererParams: {
       options: statusOptions,
       onCloseAutoFocus: (event) => {
@@ -767,8 +758,7 @@ const columnDefs = [
             field: 'status',
             headerName: 'Status',
             flex: 1,
-            editable: false,
-            cellRenderer: 'dsSelectDropdownCellRenderer',
+            type: 'dsSelectDropdownColumn',
             cellRendererParams: {
               options: STATUS_OPTIONS,
               onCloseAutoFocus: (event: Event) => {

package/src/components/table/columnTypes.ts

@@ -0,0 +1,56 @@
+import { type ColDef } from 'ag-grid-community';
+import { ComboboxCellRenderer } from 'Components/table/cellRenderers/ComboboxCellRenderer.js';
+
+export const columnTypes: Record<string, ColDef> = {
+  dsBooleanColumn: {
+    cellRenderer: 'dsBooleanCellRenderer',
+    editable: false,
+  },
+  dsButtonColumn: {
+    cellRenderer: 'dsButtonCellRenderer',
+    editable: false,
+    cellRendererParams: {
+      suppressCellFocusAndFocusFirstElement: true,
+    },
+  },
+  dsCheckboxColumn: {
+    cellRenderer: 'dsCheckboxCellRenderer',
+    editable: false,
+    cellRendererParams: {
+      suppressCellFocusAndFocusFirstElement: true,
+    },
+  },
+  dsComboboxColumn: {
+    cellRenderer: 'dsComboboxCellRenderer',
+    editable: false,
+    ...ComboboxCellRenderer.colDefDefaults,
+  },
+  dsDateColumn: {
+    cellEditor: 'dsDateCellEditor',
+    editable: true,
+    valueFormatter: params =>
+      params.value instanceof Date
+        ? params.value.toLocaleDateString('en-GB')
+        : params.value,
+  },
+  dsInlineTextColumn: {
+    cellRenderer: 'dsInlineTextCellRenderer',
+    editable: false,
+    cellRendererParams: {
+      suppressCellFocusAndFocusFirstElement: true,
+    },
+  },
+  dsNumberColumn: {
+    cellEditor: 'dsNumberCellEditor',
+    editable: true,
+  },
+  dsNumberInputColumn: {
+    cellRenderer: 'dsNumberInputCellRenderer',
+    editable: false,
+    cellRendererParams: { suppressCellFocusAndFocusFirstElement: true },
+  },
+  dsSelectDropdownColumn: {
+    cellRenderer: 'dsSelectDropdownCellRenderer',
+    editable: false,
+  },
+};