With this release, I target ES6 JavaScript. ES6 is much closer to TypeScript and produces less code, which means faster loading times.
peerDependencies:
react@
^16.8.4
react-dom@
^16.8.4
styled-components@
^4.1.3
install
yarn add fitfab-ui
usage
import { prettyDate } from 'fitfab-ui'
const pretty = prettyDate('8/2/2019')
// pretty should be: 'August 2 2019'
See the Storybook setup
NPM LINK
npm link
npm link fitfab-ui
Then start using as normal:
import { Button } from 'fitfab-ui'
NPM CMD: read about npm scripts
"prepublishOnly": "npm test && npm run lint"
This run BEFORE the package is prepared and packed, ONLY on npm publish.
A good place to verify that linting rules and tests are passing.
Styled-components: babel-plugin-styled-components
NOTE: make sure that jsx is set to react { "jsx": "react" }
within the tsconfig.json file.
rtl.setup.ts
// See https://github.com/kentcdodds/react-testing-library#global-config
import '@testing-library/react/cleanup-after-each'
import 'jest-dom/extend-expect'
/config
folder where the rtl.setup.ts lives. /***
* Setup React-testing-library
*/
setupFilesAfterEnv: ['<rootDir>/config/rtl.setup.ts'],
if you were to use export default
, the bundle would not be three shaken.
// src/utils.js
export default {
alert: msg => {
console.log(msg)
},
sum: (x, y) => x + y,
}
// src/main.js
import utils from './utils'
const total = utils.sum(7, 4)
console.log(`This is the total: ${total}`)
The code will include alert
eventhough it was NOT use in the main.js file.
reference:
npx husky-init && npm install
Note: Husky will create a prepare
script command within package.json
npx mrm@2 lint-staged
This command will install and configure husky and lint-staged depending on the code quality tools from your project's package.json dependencies
npx husky add .husky/pre-push 'npm test'
Note: add the pre-push
hook to only run the tests when pushing
npx husky add .husky/commit-msg 'message'
Note: This is to enforce Conventional Commits specification
Read the Local Setup Guide for Commitlint