Installations
npm install @contentful/f36-componentsDeveloper Guide
Typescript
Yes
Module System
CommonJS
Node Version
18.20.4
NPM Version
10.7.0
Score
38.8
Supply Chain
74
Quality
95.5
Maintenance
100
Vulnerability
99.6
License
Releases
@contentful/f36-components@4.75.2
Published on 16 Dec 2024
@contentful/f36-core@4.75.2
Published on 16 Dec 2024
@contentful/f36-typography@4.75.2
Published on 16 Dec 2024
@contentful/f36-tooltip@4.75.2
Published on 16 Dec 2024
@contentful/f36-text-link@4.75.2
Published on 16 Dec 2024
@contentful/f36-tabs@4.75.2
Published on 16 Dec 2024
Contributors
Languages
TypeScript (84.28%)
JavaScript (11.42%)
MDX (3.57%)
CSS (0.57%)
Handlebars (0.15%)
Developer
Download Statistics
Total Downloads
4,984,046
Last Day
190
Last Week
34,178
Last Month
147,091
Last Year
1,405,633
GitHub Statistics
334 Stars
3,711 Commits
82 Forks
62 Watching
41 Branches
278 Contributors
Maintainers
Package Meta Information
Latest Version
4.75.2
Package Id
@contentful/f36-components@4.75.2
Unpacked Size
27.17 kB
Size
5.05 kB
File Count
11
NPM Version
10.7.0
Node Version
18.20.4
Publised On
16 Dec 2024
Total Downloads
Cumulative downloads
Total Downloads
4,984,046
Last day
-40.1%
190
Compared to previous day
Last week
-20.3%
34,178
Compared to previous week
Last month
3.3%
147,091
Compared to previous month
Last year
-27%
1,405,633
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
38
Peer Dependencies
4
Dev Dependencies
4
Forma 36 React Components
A React component library for the Forma 36 design system created by Contentful.
Table of contents
Installing package
1yarn add @contentful/f36-components
Or
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 generatein the root of the repo, this structure will be created automatically for you
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 fileindex.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.
Reason
no dangerous workflow patterns detected
Reason
30 commit(s) and 2 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
security policy file detected
Details
- Info: security policy file detected: github.com/contentful/.github/SECURITY.md:1
- Info: Found linked content: github.com/contentful/.github/SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: github.com/contentful/.github/SECURITY.md:1
- Info: Found text in security policy: github.com/contentful/.github/SECURITY.md:1
Reason
Found 5/20 approved changesets -- score normalized to 2
Reason
dependency not pinned by hash detected -- score normalized to 2
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:12: 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:16: 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/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 4 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 4 third-party GitHubAction dependencies pinned
- Info: 1 out of 1 npmCommand dependencies pinned
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/auto-approve.yml:1
- Warn: no topLevel permission defined: .github/workflows/deploy-cdn.yml:1
- Warn: no topLevel permission defined: .github/workflows/remove-stale.yml:1
- Warn: no topLevel permission defined: .github/workflows/sast.yaml:1
- Warn: no topLevel permission defined: .github/workflows/size-limit.yml:1
- Warn: no topLevel permission defined: .github/workflows/stale.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 18 are checked with a SAST tool
Reason
32 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-pwfr-8pq7-x9qv
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-jrvm-mcxc-mf6m
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-c59h-r6p8-q9wc
- Warn: Project is vulnerable to: GHSA-g77x-44xx-532m
- Warn: Project is vulnerable to: GHSA-7gfc-8cq8-jh5f
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-6g33-8w2q-4hxv
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-mgfv-m47x-4wqp
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
4.8
/10
Last Scanned on 2024-12-16
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