@arbor-education/design-system.components 1.0.0 → 1.0.2

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,
+  },
+};

package/src/components/toggleGroup/ToggleGroup.stories.tsx

@@ -170,7 +170,7 @@ export const Default: Story = withDescription(
     args: {
       options: attendanceOptions,
       value: undefined,
-      onValueChange: fn(),
+      onValueChange: undefined,
     },
   },
   'No option selected. Click an option to see the selected state.',