# @contentful/integration-frontend-toolkit

> > **Warning** > This library is under active development and is subject to significant changes. At any time code may be updated, depricated, or entirely removed based on our internal development of the [Apps](https://github.com/contentful/apps) repo.

Latest version **1.7.4** (published 2026-07-20) · 0 weekly downloads

## Install

```sh
npm install @contentful/integration-frontend-toolkit
pnpm add @contentful/integration-frontend-toolkit
yarn add @contentful/integration-frontend-toolkit
bun add @contentful/integration-frontend-toolkit
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.7.4 |
| Published | 2026-07-20 |
| First published | 2023-12-20 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 75.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | it-internal, whydah-gally, contentful-ecosystem, michaelpearce |

## Links

- npm: https://www.npmjs.com/package/@contentful/integration-frontend-toolkit
- Repository: https://github.com/contentful/integration-frontend-toolkit
- Homepage: https://github.com/contentful/integration-frontend-toolkit#readme
- Issues: https://github.com/contentful/integration-frontend-toolkit/issues
- npm.io page: https://npm.io/package/@contentful/integration-frontend-toolkit

## Dependencies (11)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [fuse.js](https://npm.io/package/fuse.js.md) ^7.0.0
- [chart.js](https://npm.io/package/chart.js.md) ^4.4.1
- [usehooks-ts](https://npm.io/package/usehooks-ts.md) ^2.9.1
- [@emotion/css](https://npm.io/package/@emotion/css.md) ^11.10.6
- [@sentry/react](https://npm.io/package/@sentry/react.md) ^7.91.0
- [react-chartjs-2](https://npm.io/package/react-chartjs-2.md) ^5.2.0
- [@contentful/app-sdk](https://npm.io/package/@contentful/app-sdk.md) ^4.24.0
- [@contentful/f36-tokens](https://npm.io/package/@contentful/f36-tokens.md) ^4.0.1
- [@segment/analytics-next](https://npm.io/package/@segment/analytics-next.md) ^1.66.0
- [@contentful/f36-components](https://npm.io/package/@contentful/f36-components.md) ^4.35.0

## Recent versions

- 1.7.4 (latest) — 2026-07-20
- 1.7.3 — 2026-06-29
- 1.7.2 — 2026-01-07
- 1.7.1 — 2024-05-13
- 1.7.0 — 2024-04-10
- 1.6.1 — 2024-03-25
- 1.6.0 — 2024-03-22
- 1.5.1 — 2024-03-19
- 1.5.0 — 2024-03-18
- 1.4.0 — 2024-03-15
- 1.3.0 — 2024-03-13
- 1.2.44 — 2024-01-29
- 1.2.43 — 2024-01-29
- 1.2.42 — 2024-01-22
- 1.2.41 — 2024-01-22
- … 24 more at https://npm.io/package/@contentful/integration-frontend-toolkit/versions

## README

# integration-frontend-toolkit

> **Warning**
> This library is under active development and is subject to significant changes. At any time code may be updated, depricated, or entirely removed based on our internal development of the [Apps](https://github.com/contentful/apps) repo.

This repository is a home to frontend tooling, primarily used to support integration (app) development.

The library itself offers the Integrations team a place to develop components outside of the app itself, as well as to house highly repeated code, to support reusability as well as customizability.

## Local development

Ensure that your global npmrc has the following, or if you prefer, create a local npmrc in this repository with the same information: 

```sh
//npm.pkg.github.com/:_authToken=<your token>
@contentful:registry=https://npm.pkg.github.com
```

This will allow you to successfully install the node_modules. 

To install or update the app locally:

```sh
npm i
```

To run storybook locally:

```sh
npm run storybook
```

To run tests:

```sh
npm run test
```

### Testing package locally

Option 1: Link the package using the global node module namespace

```sh 
npm link 
```

and within the test application run 

```sh 
npm link @contentful/integration-frontend-toolkit
```

Option 2: Use npm pack to create a tgz file locally that mimics a fully packed library structure

```sh 
npm build 
```

```sh 
npm pack --pack-destination ~
```

import the packed file, i.e "file:~/contentful-integration-frontend-toolkit-0.0.0-semantic-release.tgz", into another library for testing

and within the testing library run:

```sh 
npm install 
```
to actually install the tgz packed file. 

You may need to continually update the version in your local package, and repack the tgz file, and reimport it with the new version, when updates are made. 


### Creating new submodule directories: 

The current build of this toolkit creates build directories directly reflecting the directories under the src directory. You will notice upon building the toolkit, that these directories are created, and this supports submodule imports of the toolkit i.e: 

```sh 
import { HyperLink } from "@contentful/integration-frontend-toolkit/components" 
import { sentryMarketplaceAppsSDK } from "@contentful/integration-frontend-toolkit/sdks" 
```

When creating a new directory, you will need to add the directory name to the package.json "files" section in order for it to be exposed as a submodule.  

### Expectations of development

1. Each new entity added to this library should be housed in its own directory
2. Each new entity should be accompanied by a spec. file.
3. Each new component created should be accompanied by a stories. file. Keep in mind the various iterations of an entity. Questions to ask: if it might be useful to create a story for each iteration? and if the story is self-explantory to other developers? Sometimes it is useful to add details, actions, decorators to describe the story and component.
4. Each new entity needs to be added to the respective parent directory index.ts file. 
5. Directories are lower-cased unless they house a set of files related to a React component
6. File names are lower-cased unless they house a React component


## Commiting 

Follow standard Semantic Versioning commit messages (when you squash or commit to master) in order to version the package correctly.

Examples commit messages:

- Feat: A new feature, i.e `feat(button): Add new button component`
- Fix: A bug fix
- Docs: A documentation change
- Style: A change that does not affect meaning of code (styling)
- Refactor: A change that neither fixes a bug nor adds a feature
- Perf: A code change that improves performance
- Test: An adjustment to tests
- Chore: A change to the build process of auxiliary tools and libraries

By default in this library right now, FIX is a patch release, FEATURE is a minor, and the label BREAKING CHANGE is a major release. 


## In progress improvements and known limitations:

1. Currently the packaging of the library is not following optimal practices in order to support submodule imports. There exits an open [PR](https://github.com/contentful/integration-frontend-toolkit/pull/74) to optimize packaging and please refer to [this](https://contentful.atlassian.net/wiki/spaces/ECO/pages/4655546433/Frontend+toolkit+package+optimizations) documentation for more information.
2.  Currently within the CI, we require Chromatic visual approvals of changes to components. 

## Other resources

[Storybook](https://storybook.js.org/docs/react/get-started/why-storybook)
[Chromatic](https://www.chromatic.com/)
[Semantic Release](https://semantic-release.gitbook.io/semantic-release/)

---
_Source: https://npm.io/package/@contentful/integration-frontend-toolkit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._