chore: update

frontend/Settings.tsx

@@ -36,7 +36,7 @@ function Divider() {
 function getNewSummaries(
   summaries: Summary[],
   updatedSummary: Summary,
-  field: Field | null
+  field: Field | null,
 ) {
   const isNew = !updatedSummary.fieldId;
 
@@ -79,7 +79,7 @@ export default function Settings() {
   };
 
   const canEdit = globalConfig.checkPermissionsForSet(
-    GlobalConfigKeys.Summaries
+    GlobalConfigKeys.Summaries,
   ).hasPermission;
 
   const onChangeAggregator = (summary: Summary, aggregatorKey: string) => {
@@ -119,7 +119,7 @@ export default function Settings() {
         summary.fieldId,
         table?.getFieldByIdIfExists(summary.fieldId || ""),
       ];
-    })
+    }),
   );
 
   const allSummaries = canEdit
@@ -241,7 +241,7 @@ function getSummaryDisplayName(summary: Summary, field: Field | null) {
 
   if (field) {
     const aggregator = field.availableAggregators.find(
-      (x) => x.key === summary.summary
+      (x) => x.key === summary.summary,
     );
     if (!aggregator) return field.name;
     return `${field.name} (${aggregator.displayName})`;
@@ -276,7 +276,7 @@ function SummaryEditorWithoutRef(
     dragHandleProps,
     ...divProps
   }: SummmaryEditorProps,
-  ref: React.Ref<HTMLDivElement>
+  ref: React.Ref<HTMLDivElement>,
 ) {
   const [isExpanded, setIsExpanded] = React.useState(false);
 

frontend/airtable.d.ts

@@ -8,6 +8,6 @@ declare module "@airtable/blocks/ui" {
    */
   export function useRecords(
     tableOrViewOrQueryResult: View | null,
-    opts?: { fields: string[] }
+    opts?: { fields: string[] },
   ): Array<Record> | null;
 }

frontend/components/Canvas/SummaryTable.tsx

@@ -91,7 +91,7 @@ export default function SummaryTable({
                   >
                     {value}
                   </Cell>
-                ) : null
+                ) : null,
               )}
             </Row>
           );

frontend/components/Canvas/utilities.ts

@@ -12,7 +12,7 @@ export function transposeTable<T>(table: T[][]): T[][] {
 
 export function convertGroupedDataToTable(
   groupedData: GroupedData,
-  { transpose = false }: { transpose?: boolean } = {}
+  { transpose = false }: { transpose?: boolean } = {},
 ): {
   value: string | number | undefined;
   id: string;

frontend/constants.ts

@@ -14,7 +14,11 @@ export const dateTypes = [
   FieldType.LAST_MODIFIED_TIME,
 ];
 
-export const discreteTypes = [FieldType.SINGLE_LINE_TEXT, FieldType.FORMULA];
+export const discreteTypes = [
+  FieldType.SINGLE_LINE_TEXT,
+  FieldType.FORMULA,
+  FieldType.SINGLE_SELECT,
+];
 
 export const allowedTypes = [
   ...dateTypes,

frontend/hooks/useAdaptiveSettingsButton.ts

@@ -10,7 +10,7 @@ export default function useAdaptiveSettingsButton() {
   const viewport = useViewport();
 
   const [isShowingSettings, setIsShowingSettings] = React.useState(
-    viewport.isFullscreen
+    viewport.isFullscreen,
   );
   React.useEffect(() => {
     const onViewportChange = (viewport: Viewport) => {

frontend/hooks/useSummaryTableConfig.ts

@@ -17,15 +17,15 @@ export function useSummaryTableConfig() {
   const source = table?.getViewByIdIfExists(viewId);
 
   const groupFieldId = globalConfig.get(
-    GlobalConfigKeys.GroupFieldID
+    GlobalConfigKeys.GroupFieldID,
   ) as string;
   const groupField = table?.getFieldByIdIfExists(groupFieldId);
 
   const summaries = (globalConfig.get(GlobalConfigKeys.Summaries) ||
     []) as Summary[];
 
   const validSummaries = summaries.filter((x) =>
-    Boolean(x.fieldId)
+    Boolean(x.fieldId),
   ) as (Summary & {
     fieldId: string;
   })[];

frontend/main.tsx

@@ -22,7 +22,7 @@ export default function SummaryTableApp() {
   const data = getGroupedData(
     records,
     config.groupField,
-    config.summariesWithFields
+    config.summariesWithFields,
   );
 
   const isEmpty = data.columns.length === 0 || data.rows.length === 0;

frontend/types.ts

@@ -1,4 +1,5 @@
 import { Field } from "@airtable/blocks/models";
+
 export type Summary = {
   id: string | null;
   fieldId: string | null;

frontend/utils.ts

@@ -34,7 +34,7 @@ export type GrouperConfig = {
 };
 
 function getFieldGrouper(
-  groupBy: GrouperConfig
+  groupBy: GrouperConfig,
 ):
   | ((fieldValue: string) => string | number)
   | ((fieldValue: { value: string }[]) => string | number) {
@@ -52,10 +52,15 @@ function getFieldGrouper(
   throw new Error(`Unsupported field type: ${groupBy.field.type}`);
 }
 
-type RecordValue = string | { value: string } | { value: { name: string } };
+type RecordValue =
+  | string
+  | { name: string }
+  | { value: string }
+  | { value: { name: string } };
 
 function normalizeValue(value: RecordValue): string {
   if (typeof value === "string") return value;
+  if ("name" in value) return value.name;
   if (value?.value) {
     if (typeof value.value === "string") return value.value;
     if (value.value.name) return value.value.name;
@@ -66,17 +71,18 @@ function normalizeValue(value: RecordValue): string {
 
 export function groupRecords(
   records: AirtableRecord[],
-  groupByConfig: GrouperConfig
-): Record<string, any[]> {
+  groupByConfig: GrouperConfig,
+): Record<string, unknown[]> {
   const fieldGrouper = getFieldGrouper(groupByConfig);
 
   console.log(
     groupByConfig.field.name,
-    records[0].getCellValue(groupByConfig.field.name)
+    records[0].getCellValue(groupByConfig.field.name),
   );
 
   return groupBy(records, (record) => {
     const value = record.getCellValue(groupByConfig.field.name) as RecordValue;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return fieldGrouper(normalizeValue(value) as any);
   });
 }
@@ -105,7 +111,7 @@ function normalizeDisplayValue(value: string | number) {
 export function getGroupedData(
   records: AirtableRecord[] | null,
   groupField: Field | null | undefined,
-  summariesWithFields: SummaryWithField[]
+  summariesWithFields: SummaryWithField[],
 ): {
   columns: string[];
   rows: {

package.json

@@ -23,48 +23,47 @@
     ]
   },
   "dependencies": {
-    "@airtable/blocks": "1.16.0",
-    "react": "^16.9.0",
+    "@airtable/blocks": "1.18.0",
+    "react": "^16.14.0",
     "react-beautiful-dnd": "^13.1.1",
-    "react-dom": "^16.9.0",
-    "uuid": "^9.0.0"
+    "react-dom": "^16.14.0",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@airtable/blocks-testing": "^0.0.5",
-    "@commitlint/cli": "^17.3.0",
-    "@commitlint/config-conventional": "^17.3.0",
-    "@semantic-release/changelog": "^6.0.1",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@testing-library/dom": "^7.21.4",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^12.0.0",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
     "@tsconfig/create-react-app": "^1.0.3",
-    "@types/react": "^18.0.28",
-    "@types/react-beautiful-dnd": "^13.1.2",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "@types/uuid": "^9.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
-    "@vitejs/plugin-react": "^3.1.0",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest-dom": "^4.0.3",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.31.11",
+    "@types/react": "^18.2.38",
+    "@types/react-beautiful-dnd": "^13.1.7",
+    "@types/uuid": "^9.0.7",
+    "@typescript-eslint/eslint-plugin": "^6.13.0",
+    "@typescript-eslint/parser": "^6.13.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "eslint": "^8.54.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jest-dom": "^5.1.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-testing-library": "^5.9.1",
-    "husky": "^8.0.2",
-    "jsdom": "^21.1.0",
-    "lint-staged": "^13.0.3",
-    "prettier": "^2.8.0",
-    "semantic-release": "^20.1.1",
-    "sort-package-json": "^2.1.0",
-    "typescript": "^4.8.4",
-    "vite": "^4.1.4",
-    "vitest": "^0.29.2"
+    "eslint-plugin-testing-library": "^6.2.0",
+    "husky": "^8.0.3",
+    "jsdom": "^23.0.0",
+    "lint-staged": "^15.1.0",
+    "prettier": "^3.1.0",
+    "semantic-release": "^22.0.8",
+    "sort-package-json": "^2.6.0",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.2",
+    "vitest": "^0.34.6"
   }
 }