Gathering detailed insights and metrics for @contentful/f36-components
Gathering detailed insights and metrics for @contentful/f36-components
Gathering detailed insights and metrics for @contentful/f36-components
Gathering detailed insights and metrics for @contentful/f36-components
A design system by Contentful
npm install @contentful/f36-components
Typescript
Module System
Node Version
NPM Version
48.9
Supply Chain
74
Quality
95.5
Maintenance
100
Vulnerability
99.6
License
@contentful/f36-components@4.74.3
Published on 27 Nov 2024
@contentful/f36-core@4.74.3
Published on 27 Nov 2024
@contentful/f36-typography@4.74.3
Published on 27 Nov 2024
@contentful/f36-tooltip@4.74.3
Published on 27 Nov 2024
@contentful/f36-text-link@4.74.3
Published on 27 Nov 2024
@contentful/f36-tabs@4.74.3
Published on 27 Nov 2024
Updated on 03 Dec 2024
TypeScript (84.3%)
JavaScript (11.43%)
MDX (3.55%)
CSS (0.57%)
Handlebars (0.15%)
Cumulative downloads
Total Downloads
Last day
80.5%
Compared to previous day
Last week
26.1%
Compared to previous week
Last month
12.6%
Compared to previous month
Last year
-30.6%
Compared to previous year
38
4
4
A React component library for the Forma 36 design system created by Contentful.
1yarn add @contentful/f36-components
Or
1npm install @contentful/f36-components
1import { Button } from '@contentful/f36-components';
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.
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.
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
We follow a number of principles when creating our components:
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:
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:
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.
1npm run-script test
It is recommended to run tests in development with the optional --watch
flag.
1npm run-script test --watch
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)1npm run-script build
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 1 issue activity found in the last 90 days -- score normalized to 10
Reason
license file detected
Details
Reason
no binaries found in the repo
Reason
security policy file detected
Details
Reason
Found 9/22 approved changesets -- score normalized to 4
Reason
dependency not pinned by hash detected -- score normalized to 2
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
29 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-12-02
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