Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@contentful/f36-components
Advanced tools
Readme
A React component library for the Forma 36 design system created by Contentful.
yarn add @contentful/f36-components
Or
npm install @contentful/f36-components
import { 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:
npm 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.
npm run-script test
It is recommended to run tests in development with the optional --watch
flag.
npm 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)npm 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
npm run-script commit
FAQs
Contentful UI Component Library
The npm package @contentful/f36-components receives a total of 19,322 weekly downloads. As such, @contentful/f36-components popularity was classified as popular.
We found that @contentful/f36-components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.