- 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
| | |
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 build-locales item-icon - generate i18n/.js and i18n/.properties files out of i18n/json/*.json files to be imported by react-intl.
- nx lint item-icon - run 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

$3

- ItemIcon - A component for displaying file/folder icons
- ItemTypeIcon - A component for displaying item type icons

$3

#### 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))'
`

$3

#### 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))'
`

$3

#### 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.

Translations

For translations this package will be leveraging @box/frontend as it has the required scripts to do translations the Box way, for more information on this checkout their i18n docs [here]

The i18n/` dir is bundled with this package to enable the consuming app to use the translations included in this component it need to adjust it's [TranslationsPlugin],
see EUA's [webpack.base.config.js] and [i18n.config.js] for reference.