@box/item-icon 2.18.2 → 2.19.0

package/README.md

@@ -4,6 +4,11 @@
 -   [item-icon](#item-icon)
     -   [Running commands](#running-commands)
     -   [Available commands](#available-commands)
+    -   [API](#api)
+        -   [Components](#components)
+        -   [Utility Functions](#utility-functions)
+        -   [Constants](#constants)
+        -   [Types](#types)
     -   [Ownership](#ownership)
     -   [Translations](#translations)
 
@@ -44,6 +49,105 @@ All commands used with Nx can be found in `project.json` file within your packag
 -   `nx chromatic item-icon` - uploads storybook build for review to [box chromatic](https://box.chromatic.com/) , and performs visual comparison of the UI changes against baseline.
 -   `nx prepare item-icon` - command run during package publication process orchestrated by Nx Release.
 
+## API
+
+### Components
+
+-   **ItemIcon** - A component for displaying file/folder icons
+-   **ItemTypeIcon** - A component for displaying item type icons
+
+### Utility Functions
+
+#### `getFileCategoryByExtension(extension?: string): string`
+
+Returns the file category for a given file extension. If the extension is not recognized, returns `'default'`.
+
+```typescript
+import { getFileCategoryByExtension } from '@box/item-icon';
+
+const category = getFileCategoryByExtension('pdf'); // Returns 'pdf'
+const category2 = getFileCategoryByExtension('docx'); // Returns 'word-document'
+const category3 = getFileCategoryByExtension('unknown'); // Returns 'default'
+```
+
+#### `getColorByExtension(fileCategory: FileCategory): string | undefined`
+
+Returns the Blueprint CSS color variable for a given file category. Returns `undefined` for falsy input.
+
+```typescript
+import { getColorByExtension, type FileCategory } from '@box/item-icon';
+
+const color = getColorByExtension('pdf'); // Returns 'var(--bp-watermelon-red-120, var(--watermelon-red-120))'
+const color2 = getColorByExtension('image'); // Returns 'var(--bp-green-light-135, var(--green-light-120))'
+```
+
+### Constants
+
+#### `FILE_EXTENSION_CATEGORIES`
+
+An object mapping file categories to arrays of file extensions.
+
+```typescript
+import { FILE_EXTENSION_CATEGORIES } from '@box/item-icon';
+
+FILE_EXTENSION_CATEGORIES.pdf; // ['pdf']
+FILE_EXTENSION_CATEGORIES.image; // ['bmp', 'cr2', 'crw', 'dng', 'gdraw', 'gif', ...]
+FILE_EXTENSION_CATEGORIES['word-document']; // ['doc', 'docm', 'docx']
+```
+
+#### `FILE_CATEGORY_COLORS`
+
+An object mapping file categories to their corresponding Blueprint CSS color variables. Useful for styling file type indicators consistently.
+
+```typescript
+import { FILE_CATEGORY_COLORS } from '@box/item-icon';
+
+FILE_CATEGORY_COLORS.pdf; // 'var(--bp-watermelon-red-120, var(--watermelon-red-120))'
+FILE_CATEGORY_COLORS.image; // 'var(--bp-green-light-135, var(--green-light-120))'
+FILE_CATEGORY_COLORS.video; // 'var(--bp-light-blue-115, var(--light-blue-110))'
+```
+
+### Types
+
+#### `FileCategory`
+
+A TypeScript union type representing all valid file categories.
+
+```typescript
+import { type FileCategory } from '@box/item-icon';
+
+type FileCategory =
+    | 'audio'
+    | 'boxcanvas'
+    | 'boxnote'
+    | 'code'
+    | 'document'
+    | 'docuworks-binder'
+    | 'docuworks-file'
+    | 'dwg'
+    | 'excel-spreadsheet'
+    | 'google-docs'
+    | 'google-sheets'
+    | 'google-slides'
+    | 'illustrator'
+    | 'image'
+    | 'indesign'
+    | 'keynote'
+    | 'numbers'
+    | 'pages'
+    | 'pdf'
+    | 'photoshop'
+    | 'powerpoint-presentation'
+    | 'presentation'
+    | 'spreadsheet'
+    | 'text'
+    | 'threed'
+    | 'vector'
+    | 'video'
+    | 'word-document'
+    | 'zip';
+```
+
 ## Ownership
 
 Code of the feature belongs to webapp-eng. Responsibilities of owning team include control over code quality, providing guidelines for changes, and alignment with other teams regarding changes. It would be a good practice to consult which team, owning or requesting, will be responsible for implementing changes to code.

package/dist/esm/index.js

@@ -1,9 +1,13 @@
-import { getFileIconType as t } from "./lib/utils.js";
-import { ItemIcon as r, itemIconTable as I } from "./lib/item-icon/item-icon.js";
-import { ItemTypeIcon as c } from "./lib/item-type-icon/item-type-icon.js";
+import { getColorByExtension as t, getFileCategoryByExtension as r } from "./lib/utils.js";
+import { FILE_CATEGORY_COLORS as I, FILE_EXTENSION_CATEGORIES as m } from "./lib/constants.js";
+import { ItemIcon as x, itemIconTable as p } from "./lib/item-icon/item-icon.js";
+import { ItemTypeIcon as O } from "./lib/item-type-icon/item-type-icon.js";
 export {
-  r as ItemIcon,
-  c as ItemTypeIcon,
-  t as getFileIconType,
-  I as itemIconTable
+  I as FILE_CATEGORY_COLORS,
+  m as FILE_EXTENSION_CATEGORIES,
+  x as ItemIcon,
+  O as ItemTypeIcon,
+  t as getColorByExtension,
+  r as getFileCategoryByExtension,
+  p as itemIconTable
 };

package/dist/esm/lib/constants.js

@@ -1,4 +1,4 @@
-const s = {
+const r = {
   audio: ["aac", "aif", "aifc", "aiff", "amr", "au", "flac", "m3u", "m4a", "mid", "mp3", "ra", "wav", "wma", "wpl"],
   boxcanvas: ["boxcanvas"],
   boxnote: ["boxnote"],
@@ -28,7 +28,82 @@ const s = {
   video: ["3g2", "3gp", "avi", "flv", "m2ts", "m2v", "m4v", "mkv", "mov", "mp4", "mpeg", "mpg", "mts", "ogg", "qt", "ts", "wmv"],
   "word-document": ["doc", "docm", "docx"],
   zip: ["gz", "rar", "tgz", "zip"]
+}, e = {
+  // Watermelon Red 120 (#BE2C46) - pdf, powerpoint-presentation, code
+  red: "var(--bp-watermelon-red-120, var(--watermelon-red-120))",
+  // Orange 130 (#A95A12) - boxcanvas, threed, vector, pages, google-slides, illustrator, presentation
+  orange: "var(--bp-orange-130, var(--orange-120))",
+  // Green Light 135 (#197E54) - image, excel-spreadsheet, numbers, google-sheets, spreadsheet
+  green: "var(--bp-green-light-135, var(--green-light-120))",
+  // Light Blue 115 (#1F72D6) - photoshop, dwg, keynote, video
+  lightBlue: "var(--bp-light-blue-115, var(--light-blue-110))",
+  // Light Blue 135 (#1757A4) - word-document, google-docs, text
+  darkBlue: "var(--bp-light-blue-135, var(--light-blue-120))",
+  // Purple Rain 100 (#9F3FED) - audio
+  purple: "var(--bp-purple-rain-100, var(--purple-rain-100))",
+  // Text on Light (#222222) - default for unspecified categories
+  gray: "var(--bp-gray-100, var(--gray-100))"
+}, o = {
+  // Purple Rain 100
+  audio: e.purple,
+  // Orange 130
+  boxcanvas: e.orange,
+  // Default (text-on-light)
+  boxnote: e.gray,
+  // Watermelon Red 120
+  code: e.red,
+  // Default (text-on-light)
+  document: e.gray,
+  // Default (text-on-light)
+  "docuworks-binder": e.gray,
+  // Green Light 135
+  "docuworks-file": e.green,
+  // Light Blue 115
+  dwg: e.lightBlue,
+  // Green Light 135
+  "excel-spreadsheet": e.green,
+  // Light Blue 135
+  "google-docs": e.darkBlue,
+  // Green Light 135
+  "google-sheets": e.green,
+  // Orange 130
+  "google-slides": e.orange,
+  // Orange 130
+  illustrator: e.orange,
+  // Green Light 135
+  image: e.green,
+  // Default (text-on-light)
+  indesign: e.gray,
+  // Light Blue 115
+  keynote: e.lightBlue,
+  // Green Light 135
+  numbers: e.green,
+  // Orange 130
+  pages: e.orange,
+  // Watermelon Red 120
+  pdf: e.red,
+  // Light Blue 115
+  photoshop: e.lightBlue,
+  // Watermelon Red 120
+  "powerpoint-presentation": e.red,
+  // Orange 130
+  presentation: e.orange,
+  // Green Light 135
+  spreadsheet: e.green,
+  // Light Blue 135
+  text: e.darkBlue,
+  // Orange 130
+  threed: e.orange,
+  // Orange 130
+  vector: e.orange,
+  // Light Blue 115
+  video: e.lightBlue,
+  // Light Blue 135
+  "word-document": e.darkBlue,
+  // Default (text-on-light)
+  zip: e.gray
 };
 export {
-  s as FILE_EXTENSIONS
+  o as FILE_CATEGORY_COLORS,
+  r as FILE_EXTENSION_CATEGORIES
 };

package/dist/esm/lib/item-type-icon/item-type-icon.js

@@ -1,26 +1,27 @@
-import { getFileIconType as p } from "../utils.js";
+import { getFileCategoryByExtension as c } from "../utils.js";
+import "../constants.js";
 import { ItemIcon as d } from "../item-icon/item-icon.js";
-import { useIntl as h } from "react-intl";
-import { ItemType as a } from "@box/types";
+import { useIntl as x } from "react-intl";
+import { ItemType as t } from "@box/types";
 import o from "../messages.js";
-import { jsx as x } from "react/jsx-runtime";
+import { jsx as h } from "react/jsx-runtime";
 const u = ({
   item: i,
   ...f
 }) => {
   const {
-    archiveType: t,
+    archiveType: a,
     hasCollaborations: n,
     isExternallyOwned: m,
     type: l
   } = i, {
     extension: s = ""
   } = i, {
-    formatMessage: c
-  } = h();
+    formatMessage: p
+  } = x();
   let e = "default", r = o.file;
-  return l === a.File ? (e = p(s.toLowerCase()), r = e === "default" ? o.file : o.fileExtension) : l === a.Folder ? t === "archive" ? (e = "archive", r = o.archive) : t === "folder_archive" ? (e = "folder-archive", r = o.archiveFolder) : m ? (e = "folder-external", r = o.externalFolder) : n ? (e = "folder-collab", r = o.collaboratedFolder) : (e = "folder-plain", r = o.personalFolder) : l === a.WebLink && (e = "bookmark", r = o.bookmark), /* @__PURE__ */ x(d, {
-    ariaLabel: c(r, {
+  return l === t.File ? (e = c(s.toLowerCase()), r = e === "default" ? o.file : o.fileExtension) : l === t.Folder ? a === "archive" ? (e = "archive", r = o.archive) : a === "folder_archive" ? (e = "folder-archive", r = o.archiveFolder) : m ? (e = "folder-external", r = o.externalFolder) : n ? (e = "folder-collab", r = o.collaboratedFolder) : (e = "folder-plain", r = o.personalFolder) : l === t.WebLink && (e = "bookmark", r = o.bookmark), /* @__PURE__ */ h(d, {
+    ariaLabel: p(r, {
       extension: s.toUpperCase()
     }),
     iconType: e,

package/dist/esm/lib/types/file-category.js

@@ -0,0 +1 @@
+

package/dist/esm/lib/utils.js

@@ -1,12 +1,13 @@
-import { FILE_EXTENSIONS as n } from "./constants.js";
-const f = (o = "") => {
-  const e = {};
-  return Object.entries(n).forEach(([t, r]) => {
-    r.forEach((c) => {
-      e[c] = t;
+import { FILE_EXTENSION_CATEGORIES as E, FILE_CATEGORY_COLORS as c } from "./constants.js";
+const i = (o = "") => {
+  const t = {};
+  return Object.entries(E).forEach(([e, n]) => {
+    n.forEach((r) => {
+      t[r] = e;
     });
-  }), e[o] || "default";
-};
+  }), t[o] || "default";
+}, O = (o) => o ? c[o] : void 0;
 export {
-  f as getFileIconType
+  O as getColorByExtension,
+  i as getFileCategoryByExtension
 };

package/dist/types/index.d.ts

@@ -1,3 +1,5 @@
 export * from './lib/item-icon';
 export * from './lib/item-type-icon';
 export * from './lib/utils';
+export { FILE_EXTENSION_CATEGORIES, FILE_CATEGORY_COLORS } from './lib/constants';
+export type { FileCategory } from './lib/types/file-category';

package/dist/types/lib/constants.d.ts

@@ -1,4 +1,5 @@
-declare const FILE_EXTENSIONS: {
+import { FileCategory } from './types/file-category';
+declare const FILE_EXTENSION_CATEGORIES: {
     audio: string[];
     boxcanvas: string[];
     boxnote: string[];
@@ -29,4 +30,6 @@ declare const FILE_EXTENSIONS: {
     'word-document': string[];
     zip: string[];
 };
-export { FILE_EXTENSIONS };
+/** Color mapping for file categories, optimized for bundle size */
+declare const FILE_CATEGORY_COLORS: Record<FileCategory, string>;
+export { FILE_EXTENSION_CATEGORIES, FILE_CATEGORY_COLORS };

package/dist/types/lib/types/file-category.d.ts

@@ -0,0 +1 @@
+export type FileCategory = 'audio' | 'boxcanvas' | 'boxnote' | 'code' | 'document' | 'docuworks-binder' | 'docuworks-file' | 'dwg' | 'excel-spreadsheet' | 'google-docs' | 'google-sheets' | 'google-slides' | 'illustrator' | 'image' | 'indesign' | 'keynote' | 'numbers' | 'pages' | 'pdf' | 'photoshop' | 'powerpoint-presentation' | 'presentation' | 'spreadsheet' | 'text' | 'threed' | 'vector' | 'video' | 'word-document' | 'zip';

package/dist/types/lib/utils.d.ts

@@ -1,2 +1,4 @@
-declare const getFileIconType: (extension?: string) => string;
-export { getFileIconType };
+import { FileCategory } from './types/file-category';
+declare const getFileCategoryByExtension: (extension?: string) => string;
+declare const getColorByExtension: (fileCategory: FileCategory) => string | undefined;
+export { getFileCategoryByExtension, getColorByExtension };

package/package.json

@@ -1,19 +1,19 @@
 {
     "name": "@box/item-icon",
-    "version": "2.18.2",
+    "version": "2.19.0",
     "peerDependencies": {
-        "@box/blueprint-web": "^12.130.5",
-        "@box/blueprint-web-assets": "^4.99.3",
+        "@box/blueprint-web": "^12.131.0",
+        "@box/blueprint-web-assets": "^4.99.4",
         "@box/types": "^0.2.0",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0",
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.130.5",
-        "@box/blueprint-web-assets": "^4.99.3",
+        "@box/blueprint-web": "^12.131.0",
+        "@box/blueprint-web-assets": "^4.99.4",
         "@box/types": "^2.0.0",
-        "@box/storybook-utils": "^0.16.29",
+        "@box/storybook-utils": "^0.16.30",
         "react": "^18.3.0",
         "react-dom": "^18.3.0",
         "react-intl": "^6.4.2"