@bufferapp/analyze-billing-banner
Advanced tools
Billing banner for accounts on trial without credit card details
The billing banner for notifying trial users without credit card details to add them.
If you're interested in working on or observing how things look, starting with React Storybook is a great way to get going. It's setup to automatically reload as the code changes to make it easy to do rapid iteration on components.
npm start
After that copy and paste the host and port that is displayed on the console into a browser.
If you're running this for multiple packages at the same time, it's helpful to pass in the port number.
npm start -- --port 8003
Tests are run using Jest and UIs are tested and locked down using Jest Snapshots and React Storybook.
Runs linter, then unit and snapshot tests. These tests are run using CI and are currently running on TravisCI:
https://travis-ci.com/bufferapp/buffer-publish
npm test
When writing unit tests for things like middleware and the main index file, it's useful to only run the test that change so you can rapidly iterate. Jest watch mode allows you do do this with a single command:
npm run test-watch
A UI package should include all concerns related to a given feature.
billing-banner/ # root
+-- .storybook/ # React Storybook Configuration
`-- addons.js # storybook action panel configuration
`-- config.js # storybook main configuration
`-- preview-head.html # configure <head> in storybook preview
`-- webpack.config.js # webpack configuration for storybook
+-- components/ # presentational components
+-- BillingBanner # component that is only used in the package
`-- index.jsx # implementation of the component
`-- story.jsx # description of all the possible configurations of the component
+-- mocks/ # mock users and account information
`-- billing.js
`-- .babelrc # babel transpiler
`-- index.js # main package file, should export the container and level resources
`-- index.test.js # main package file tests
`-- package.json # npm package
`-- README.md # you are here
This is the main package file, it's default export should be the container.
Imagine another package is trying to use the package you're building. The package API should look like this:
import BillingBanner from '@bufferapp/analyze-billing-banner';
Presentational components (pure ui) are implemented with the following structure:
+-- components/
+-- BillingBanner
`-- index.jsx
`-- story.jsx
This should export a functional and stateless component. There are some special cases where handling things like focus, hover and active states that need to be tracked.
If you need focus and or hover take a look at PseudoClassComponent to wrap the component you're building:
https://github.com/bufferapp/buffer-components/blob/master/PseudoClassComponent/index.jsx
Here's an example of how to wrap a Button:
https://github.com/bufferapp/buffer-components/blob/master/Button/index.jsx
This should set the context (properties) for every configuration of the component in index.jsx. The story is used for both React Storybook as well as Jest Snapshots.
FAQs
Billing banner for accounts on trial without credit card details
We found that @bufferapp/analyze-billing-banner demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 28 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
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.