# force-components
> Force Design System components
Latest version **0.1.7** (published 2022-09-30) · ISC license · 0 weekly downloads
## Install
```sh
npm install force-components
pnpm add force-components
yarn add force-components
bun add force-components
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.7 |
| Published | 2022-09-30 |
| First published | 2020-03-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 33 |
| Unpacked size | 467.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | André Pesci Cazetto |
| Maintainers | cazetto |
## Links
- npm: https://www.npmjs.com/package/force-components
- Repository: https://github.com/cazetto/force
- Homepage: https://github.com/cazetto/force#readme
- Issues: https://github.com/cazetto/force/issues
- npm.io page: https://npm.io/package/force-components
## Dependencies (33)
- [jest](https://npm.io/package/jest.md) ^25.1.0
- [react](https://npm.io/package/react.md) ^16.13.0
- [eslint](https://npm.io/package/eslint.md) ^7.31.0
- [rollup](https://npm.io/package/rollup.md) ^2.0.0
- [ts-jest](https://npm.io/package/ts-jest.md) ^25.2.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [typescript](https://npm.io/package/typescript.md) ^3.8.3
- [@types/jest](https://npm.io/package/@types/jest.md) ^25.2.1
- [@types/react](https://npm.io/package/@types/react.md) ^18
- [force-tokens](https://npm.io/package/force-tokens.md) 0.1.2
- [styled-system](https://npm.io/package/styled-system.md) ^5.1.5
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^16.9.5
- [force-components](https://npm.io/package/force-components.md) ^0.0.29
- [styled-normalize](https://npm.io/package/styled-normalize.md) ^8.0.7
- [styled-components](https://npm.io/package/styled-components.md) ^5.0.1
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.20.3
- [@types/styled-system](https://npm.io/package/@types/styled-system.md) ^5.1.9
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.22.0
- [@primer/octicons-react](https://npm.io/package/@primer/octicons-react.md) ^9.6.0
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^10.4.9
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) ^6.3.1
- [rollup-plugin-commonjs](https://npm.io/package/rollup-plugin-commonjs.md) ^10.1.0
- [@types/styled-components](https://npm.io/package/@types/styled-components.md) ^5.1.11
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4
- [@typescript-eslint/parser](https://npm.io/package/@typescript-eslint/parser.md) ^4.28.3
- [eslint-plugin-react-hooks](https://npm.io/package/eslint-plugin-react-hooks.md) ^4.0.8
- [rollup-plugin-typescript2](https://npm.io/package/rollup-plugin-typescript2.md) ^0.26.0
- [rollup-plugin-node-resolve](https://npm.io/package/rollup-plugin-node-resolve.md) ^5.2.0
- [jest-environment-jsdom-sixteen](https://npm.io/package/jest-environment-jsdom-sixteen.md) ^2.0.0
- [eslint-config-airbnb-typescript](https://npm.io/package/eslint-config-airbnb-typescript.md) ^12.3.1
- [@typescript-eslint/eslint-plugin](https://npm.io/package/@typescript-eslint/eslint-plugin.md) ^4.4.1
- [rollup-plugin-peer-deps-external](https://npm.io/package/rollup-plugin-peer-deps-external.md) ^2.2.2
## Recent versions
- 0.1.7 (latest) — 2022-09-30
- 0.1.5 — 2022-09-29
- 0.1.4 — 2022-09-29
- 0.1.3 — 2022-09-29
- 0.1.2 — 2022-09-29
- 0.0.30 — 2022-09-09
- 0.0.29 — 2022-09-09
- 0.0.28 — 2020-04-29
- 0.0.27 — 2020-04-29
- 0.0.26 — 2020-04-29
- 0.0.25 — 2020-04-29
- 0.0.23 — 2020-04-28
- 0.0.22 — 2020-04-28
- 0.0.21 — 2020-04-28
- 0.0.20 — 2020-04-28
- … 18 more at https://npm.io/package/force-components/versions
## README
# Force Design Components
## Usage
`yarn add styled-components styled-system force-components -D`
### Button Example
```javascript
import React from 'react';
import {
ForceThemeProvider,
PrimerGlobalStyle,
themePrimer,
Button
} from 'force-components';
function App() {
return (
}>
);
}
export default App;
```
### Text Example
```javascript
import React from 'react';
import {
ForceThemeProvider,
PrimerGlobalStyle,
themePrimer,
Text
} from 'force-components';
function App() {
return (
}>
Primary
Info
Extra Large
800
);
}
export default App;
```
## Contribute
### Run development mode
`git clone https://github.com/cazetto/force.git`
`cd force`
`yarn`
To run all packages simultaneously:
`yarn dev:all`
To run only the components package:
`yarn dev:components`
and maybe you need to see de components at browser running:
`yarn dev:docs`
if you need to change some design token run to compile jsons:
`yarn build:tokens`
### Run tests
`yarn test:all`
### Build
`yarn build:all`
### Commit message convention
1. Use the English language
2. Use Conventional Commits pattern for commit messages, it is specified in the url bellow.
`https://www.conventionalcommits.org/`
### Branch name convention
Use:
- feat/[Github Feature Number]-[Short Resume] ⋅⋅⋅ For features being added;
eg. `feat/1-project-patterns`
- bug/[Github Feature Number]-[Short Resume] ⋅⋅⋅ For bug fixes.
eg. `bug/123-fix-something`
### Issue name convention
Use:
- Use `[Feature] - or [Bug] -` as prefix.
eg. `[Feature] - Define project patterns`
eg. `[Bug] - Fix something`
---
_Source: https://npm.io/package/force-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._