• item-icon
  • Running commands
  • Available commands
  • API
    • Components
    • Utility Functions
    • Constants
    • Types
  • Ownership
  • Translations

item-icon

This library was generated with @box/automation. General overview on how to perform tasks on the generated library can be found in run-tasks Nx documentation.

Running commands

Your terminal should stay in location of root directory of repository, which is frontend-mono. That Allows Nx to run action against your project, or multiple project if that is necessary. Do not navigate to packages/group-shared-features/item-icon to run commands.

Commands for the project are run using syntax used by Nx:

Syntax: yarn nx <target name> <project name> <option overrides>
                      |              |                |
Example: yarn nx    test         products         --watch

Available commands

All commands used with Nx can be found in project.json file within your package.

• nx storybook item-icon - launches development environment for UI component.
• nx build-storybook item-icon - build static version of storybook with all stories.
• nx build item-icon - build package using shared-feature-builder executor from automation package.
• nx lint item-icon - runs linter over package files.
• nx test item-icon - runs storybook tests (visual/interactions) and jest unit tests, producing coverage report at the end.
• nx test-storybook item-icon - runs storybook tests. You need first to start storybook in separate terminal for this to work.
• nx test-storybook-local-coverage item-icon - runs storybook tests, and produces coverage report at the end. Requires running instance of storybook.
• nx test-storybook-ci item-icon - build storybook and run storybook tests with coverage output. Designed for CI usage.
• nx test-jest item-icon - runs jest unit tests, producing code coverage at the end.
• nx sonar item-icon - performs static analysis of code using SonarQube tooling, to detect bugs and code smells. Integrated as one of the steps in CI process.
• nx chromatic item-icon - uploads storybook build for review to box chromatic , 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'.

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.

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.

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.markdown; // ['md', 'markdown']
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.

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.markdown; // 'var(--bp-gray-100, var(--gray-100))'
FILE_CATEGORY_COLORS.video; // 'var(--bp-light-blue-115, var(--light-blue-110))'

Types

FileCategory

A TypeScript union type representing all valid file categories.

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'
    | 'markdown'
    | '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.

Translations

Per-locale i18n/*.js files are generated and committed by the Moji Jenkins pipeline. The shared-feature builder copies them into dist/i18n/ during build. Consuming applications list this package in i18n.config.js under translationDependencies.