Unify icons

packages/builder/src/constants/backend/index.js

@@ -5,6 +5,8 @@ import {
   AutoFieldSubType,
   Hosting,
 } from "@budibase/types"
+import { Constants } from "@budibase/frontend-core"
+const { TypeIconMap } = Constants
 
 export { RelationshipType } from "@budibase/types"
 
@@ -22,7 +24,7 @@ export const FIELDS = {
   STRING: {
     name: "Text",
     type: FieldType.STRING,
-    icon: "Text",
+    icon: TypeIconMap[FieldType.STRING],
     constraints: {
       type: "string",
       length: {},
@@ -32,7 +34,7 @@ export const FIELDS = {
   BARCODEQR: {
     name: "Barcode/QR",
     type: FieldType.BARCODEQR,
-    icon: "Camera",
+    icon: TypeIconMap[FieldType.BARCODEQR],
     constraints: {
       type: "string",
       length: {},
@@ -42,7 +44,7 @@ export const FIELDS = {
   LONGFORM: {
     name: "Long Form Text",
     type: FieldType.LONGFORM,
-    icon: "TextAlignLeft",
+    icon: TypeIconMap[FieldType.LONGFORM],
     constraints: {
       type: "string",
       length: {},
@@ -52,7 +54,7 @@ export const FIELDS = {
   OPTIONS: {
     name: "Options",
     type: FieldType.OPTIONS,
-    icon: "Dropdown",
+    icon: TypeIconMap[FieldType.OPTIONS],
     constraints: {
       type: "string",
       presence: false,
@@ -62,7 +64,7 @@ export const FIELDS = {
   ARRAY: {
     name: "Multi-select",
     type: FieldType.ARRAY,
-    icon: "Duplicate",
+    icon: TypeIconMap[FieldType.ARRAY],
     constraints: {
       type: "array",
       presence: false,
@@ -72,7 +74,7 @@ export const FIELDS = {
   NUMBER: {
     name: "Number",
     type: FieldType.NUMBER,
-    icon: "123",
+    icon: TypeIconMap[FieldType.NUMBER],
     constraints: {
       type: "number",
       presence: false,
@@ -82,12 +84,12 @@ export const FIELDS = {
   BIGINT: {
     name: "BigInt",
     type: FieldType.BIGINT,
-    icon: "TagBold",
+    icon: TypeIconMap[FieldType.BIGINT],
   },
   BOOLEAN: {
     name: "Boolean",
     type: FieldType.BOOLEAN,
-    icon: "Boolean",
+    icon: TypeIconMap[FieldType.BOOLEAN],
     constraints: {
       type: "boolean",
       presence: false,
@@ -96,7 +98,7 @@ export const FIELDS = {
   DATETIME: {
     name: "Date/Time",
     type: FieldType.DATETIME,
-    icon: "Calendar",
+    icon: TypeIconMap[FieldType.DATETIME],
     constraints: {
       type: "string",
       length: {},
@@ -110,7 +112,7 @@ export const FIELDS = {
   ATTACHMENT: {
     name: "Attachment",
     type: FieldType.ATTACHMENT,
-    icon: "Folder",
+    icon: TypeIconMap[FieldType.ATTACHMENT],
     constraints: {
       type: "array",
       presence: false,
@@ -119,7 +121,7 @@ export const FIELDS = {
   LINK: {
     name: "Relationship",
     type: FieldType.LINK,
-    icon: "Link",
+    icon: TypeIconMap[FieldType.LINK],
     constraints: {
       type: "array",
       presence: false,
@@ -128,19 +130,19 @@ export const FIELDS = {
   AUTO: {
     name: "Auto Column",
     type: FieldType.AUTO,
-    icon: "MagicWand",
+    icon: TypeIconMap[FieldType.AUTO],
     constraints: {},
   },
   FORMULA: {
     name: "Formula",
     type: FieldType.FORMULA,
-    icon: "Calculator",
+    icon: TypeIconMap[FieldType.FORMULA],
     constraints: {},
   },
   JSON: {
     name: "JSON",
     type: FieldType.JSON,
-    icon: "Brackets",
+    icon: TypeIconMap[FieldType.JSON],
     constraints: {
       type: "object",
       presence: false,
@@ -150,13 +152,13 @@ export const FIELDS = {
     name: "User",
     type: FieldType.BB_REFERENCE,
     subtype: FieldSubtype.USER,
-    icon: "User",
+    icon: TypeIconMap[FieldType.USER],
   },
   USERS: {
     name: "Users",
     type: FieldType.BB_REFERENCE,
     subtype: FieldSubtype.USERS,
-    icon: "User",
+    icon: TypeIconMap[FieldType.USERS],
     constraints: {
       type: "array",
     },

packages/frontend-core/src/components/grid/lib/utils.js

@@ -1,4 +1,4 @@
-import { FieldType, FieldTypeSubtypes } from "@budibase/types"
+import { TypeIconMap } from "../../../constants"
 
 export const getColor = (idx, opacity = 0.3) => {
   if (idx == null || idx === -1) {
@@ -7,26 +7,6 @@ export const getColor = (idx, opacity = 0.3) => {
   return `hsla(${((idx + 1) * 222) % 360}, 90%, 75%, ${opacity})`
 }
 
-const TypeIconMap = {
-  [FieldType.STRING]: "Text",
-  [FieldType.OPTIONS]: "Dropdown",
-  [FieldType.DATETIME]: "Date",
-  [FieldType.BARCODEQR]: "Camera",
-  [FieldType.LONGFORM]: "TextAlignLeft",
-  [FieldType.ARRAY]: "Dropdown",
-  [FieldType.NUMBER]: "123",
-  [FieldType.BOOLEAN]: "Boolean",
-  [FieldType.ATTACHMENT]: "AppleFiles",
-  [FieldType.LINK]: "DataCorrelated",
-  [FieldType.FORMULA]: "Calculator",
-  [FieldType.JSON]: "Brackets",
-  [FieldType.BIGINT]: "TagBold",
-  [FieldType.BB_REFERENCE]: {
-    [FieldTypeSubtypes.BB_REFERENCE.USER]: "User",
-    [FieldTypeSubtypes.BB_REFERENCE.USERS]: "UserGroup",
-  },
-}
-
 export const getColumnIcon = column => {
   if (column.schema.autocolumn) {
     return "MagicWand"

packages/frontend-core/src/constants.js

@@ -4,6 +4,7 @@
 export { OperatorOptions, SqlNumberTypeRangeMap } from "@budibase/shared-core"
 export { Feature as Features } from "@budibase/types"
 import { BpmCorrelationKey } from "@budibase/shared-core"
+import { FieldType, FieldTypeSubtypes } from "@budibase/types"
 
 // Cookie names
 export const Cookies = {
@@ -113,3 +114,25 @@ export const ContextScopes = {
   Local: "local",
   Global: "global",
 }
+
+export const TypeIconMap = {
+  [FieldType.STRING]: "Text",
+  [FieldType.OPTIONS]: "Dropdown",
+  [FieldType.DATETIME]: "Date",
+  [FieldType.BARCODEQR]: "Camera",
+  [FieldType.LONGFORM]: "TextAlignLeft",
+  [FieldType.ARRAY]: "Dropdown",
+  [FieldType.NUMBER]: "123",
+  [FieldType.BOOLEAN]: "Boolean",
+  [FieldType.ATTACHMENT]: "AppleFiles",
+  [FieldType.LINK]: "DataCorrelated",
+  [FieldType.FORMULA]: "Calculator",
+  [FieldType.JSON]: "Brackets",
+  [FieldType.BIGINT]: "TagBold",
+  [FieldType.USER]: "User",
+  [FieldType.USERS]: "UserGroup",
+  [FieldType.BB_REFERENCE]: {
+    [FieldTypeSubtypes.BB_REFERENCE.USER]: "User",
+    [FieldTypeSubtypes.BB_REFERENCE.USERS]: "UserGroup",
+  },
+}