npmpackage.info

Gathering detailed insights and metrics for @contentful/f36-components

Other packages similar to @contentful/f36-components

@contentful/f36-icons

4.29.0

Forma 36: Icon components

@contentful/f36-forms

4.79.2

Forma 36: Form React Components

@contentful/f36-card

4.79.2

Forma 36: Card components

@contentful/f36-empty-state

4.79.2

Forma 36: Empty State React Components

Gathering detailed insights and metrics for @contentful/f36-components

@contentful/f36-components - 4.79.2 | npmpackage.info

@contentful/f36-components

A design system by Contentful

4.79.2

343

MIT

TypeScript

27.17 kB

5,644,173 5.3

Installations

npm install @contentful/f36-components

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.20.6

NPM Version

10.8.2 Score

72.6

Supply Chain

Quality

96.6

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

9

Total

2,766

Closed

443

Merged

2,314

Issues

Open

12

Total

247

Closed

235

Releases

8,058

@contentful/f36-components@4.80.1

Updated on May 07, 2025

@contentful/f36-core@4.80.1

Updated on May 07, 2025

@contentful/f36-typography@4.80.1

Updated on May 07, 2025

@contentful/f36-tooltip@4.80.1

Updated on May 07, 2025

@contentful/f36-text-link@4.80.1

Updated on May 07, 2025

@contentful/f36-tabs@4.80.1

Updated on May 07, 2025

View All 8,058 releases

Languages

TypeScript

JavaScript

MDX

CSS

Handlebars

HTML

TypeScript (84.31%)

JavaScript (11.3%)

MDX (3.68%)

CSS (0.56%)

Handlebars (0.15%)

Developer

contentful

Download Statistics

Total Downloads

5,644,173

Last Day

6,197

Last Week

33,400

Last Month

134,220

Last Year

1,568,528

GitHub Statistics

MIT License

343 Stars

3,820 Commits

83 Forks

67 Watchers

40 Branches

300 Contributors

Updated on May 08, 2025

Maintainers

View All 300 Contributors

Package Meta Information

Latest Version

4.79.2

Package Id

@contentful/f36-components@4.79.2

Unpacked Size

27.17 kB

Size

5.05 kB

File Count

NPM Version

10.8.2

Node Version

18.20.6

Published on

May 06, 2025

Total Downloads

Cumulative downloads

Total Downloads

5,644,173

Last Day

63.8%

6,197

Compared to previous day

Last Week

13.9%

33,400

Compared to previous week

Last Month

-15.5%

134,220

Compared to previous month

Last Year

9.7%

1,568,528

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Forma 36 React Components

A React component library for the Forma 36 design system created by Contentful.

Forma 36 React Components

Installing package

1yarn add @contentful/f36-components

1npm install @contentful/f36-components

Usage

Import desired component into your project

1import { Button } from '@contentful/f36-components';

Development

For local development, in the root of the repo run npm i to install all dependencies and then npm run-script build to build all packages. This package depends on several other Forma 36 packages so you will need to build all of them.

Storybook

We use Storybook to create a development environment for our component library. To start it locally run:

1npm run-script storybook

When creating new component, before you start, please have a look at our contribution model for Forma 36.

Example component directory structure

A component's directory should resemble the following:

/my-component
  /examples
  /src
    index.ts // A file for exporting your component
    MyComponent.tsx  // Your React component
    MyComponent.test.tsx // Component tests
    MyComponent.styles.ts // Component styles
  /stories
    # stories for storybook of each component inside the package
  README.mdx
  package.json

For more detailes you can have a look in document that describes folder structure in details.

If you use npm run-script generate in the root of the repo, this structure will be created automatically for you

Code Style Guide

Our code style guide

Component principles

We follow a number of principles when creating our components:

A component is responsible for only its internal spacing

Component should only be responsible for its own internal spacing - never external spacing. This means that we're flexible in where our components can be used without having to override margins. The only outlier from this rule are typography components - they can manage their own margins. To handle margins and layout you can use our core components, like:

Adding documentation for component

We would like to make sure that every component contains a README file with recommendations and guidelines. Make sure that your documentation for the component contains following parts:

A short summary of the component.
Import - provide example how to import component.
Examples - try to add couple of examples, both basic and more advanced, where component is used in the context with other components.
Props (API reference) - Overview of properties
Content guideliness - try to describe in best practices around content for your component
Accessibility - If possible, we strongly recommend providing accessibility guidelines.

Testing

We are using Jest and Testing Library to test our components.

Tests are kept next to their components and use the .test.js file extension.

Run tests

1npm run-script test

It is recommended to run tests in development with the optional --watch flag.

1npm run-script test --watch

Building

We are using tsup and esbuild together with Microbundle to build our component library.

Each component builds to its own dist directory with:

index.d.ts – TypeScript type declaration file
index.js – CJS (CommonJS)
index.modern.mjs – Modern output (work in all modern browsers)
index.module.js – legacy ESM (ES Modules) output (for bundlers)
index.umd.js – legacy UMD (Universal Module Definition) output (for Node & CDN use)

Create a build of the library

1npm run-script build

Commits

This project uses the Angular JS Commit Message Conventions, via semantic-release. See the semantic-release Default Commit Message Format section for more details.

You can commit the changes by running

1npm run-script commit

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Maintained

Determines if the project is "actively maintained".

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Security-Policy

Determines if the project has published a security policy.

8

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

5

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

1

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 1

Details

Warn: third-party GitHubAction not pinned by hash: .github/workflows/auto-approve.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/auto-approve.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-cdn.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/deploy-cdn.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-cdn.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/deploy-cdn.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/remove-stale.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/remove-stale.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/sast.yaml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/sast.yaml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/sast.yaml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/sast.yaml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/size-limit.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/size-limit.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/size-limit.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/size-limit.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stale.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/contentful/forma-36/stale.yml/main?enable=pin
Info: 0 out of 5 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 4 third-party GitHubAction dependencies pinned
Info: 1 out of 1 npmCommand dependencies pinned

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

5.3

/10

Last Scanned on 2025-05-05

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @contentful/f36-components

Other packages similar to @contentful/f36-components

@contentful/f36-components

Installations

Developer Guide

Yes

CommonJS

18.20.6

10.8.2

Score

Pull Requests

9

2,766

443

2,314

Issues

12

247

235

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

5,644,173

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Forma 36 React Components

Table of contents

Installing package

Usage

Import desired component into your project

Development

Storybook

Example component directory structure

Code Style Guide

Component principles

Adding documentation for component

Testing

Run tests

Building

Create a build of the library

Commits

10

10

10

10

10

8

5

1

0

0

0

0

0

5.3

/10