feat: grey readonly cells

.changeset/hungry-goats-compete.md

@@ -0,0 +1,5 @@
+---
+'@flatfile/plugin-export-workbook': minor
+---
+
+This is a release candidate introducing Excel formatting

plugins/export-workbook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flatfile/plugin-export-workbook",
-  "version": "0.0.9",
+  "version": "0.1.0-rc.0",
   "description": "A plugin for exporting data in Flatfile to Workbooks.",
   "registryMetadata": {
     "category": "export"

plugins/export-workbook/src/plugin.ts

@@ -1,9 +1,9 @@
 import api, { Flatfile } from '@flatfile/api'
 import { FlatfileEvent } from '@flatfile/listener'
 import { processRecords } from '@flatfile/util-common'
-import * as XLSX from '@sheet/coredemo'
 import * as fs from 'fs'
 import * as R from 'remeda'
+import * as XLSX from './xlsx.full.min.js'
 
 /**
  * Plugin config options.
@@ -107,6 +107,7 @@ export const run = async (
             `A1:${alphaColumnDesignations[columnCount - 1]}1`,
             {
               bold: true,
+              ...readonlyColorScheme,
             }
           )
 
@@ -141,6 +142,21 @@ export const run = async (
             )
           }
 
+          const readonlyFieldAlphaColumnDesignations =
+            alphaColumnDesignations.filter(
+              (designation) =>
+                !editableFieldAlphaColumnDesignations.includes(designation)
+            )
+          for (const columnDesignation of readonlyFieldAlphaColumnDesignations) {
+            XLSX.utils.sheet_set_range_style(
+              worksheet,
+              `${columnDesignation}2:${columnDesignation}${rowCount}`,
+              {
+                ...readonlyColorScheme,
+              }
+            )
+          }
+
           XLSX.utils.book_append_sheet(
             workbook,
             worksheet,
@@ -263,8 +279,8 @@ export const run = async (
 }
 
 type ColorScheme = {
-  color: { rgb: string }
-  fgColor: { rgb: string }
+  color?: { rgb: string }
+  fgColor?: { rgb: string }
 }
 
 const errorRed: ColorScheme = {
@@ -282,6 +298,11 @@ const infoBlue: ColorScheme = {
   fgColor: { rgb: 'daeef3' },
 }
 
+const readonlyColorScheme: ColorScheme = {
+  color: { rgb: '414857' },
+  fgColor: { rgb: 'f6f8fc' },
+}
+
 function getCellColorScheme(
   messages: Flatfile.ValidationMessage[]
 ): ColorScheme | null {