@zapay-pagamentos/zapay-credit-cards v1.0.5
Template for NPM React Module + TypeScript
Demo
https://emunhoz.github.io/npm-react-module/?path=/docs/
About
A simple boilerplate to start building your own react library
What's included?
- React
- Typescript
- Styled components with ThemeProvider π
- Storybook with MDX Syntax
- Testing library/react (Setup working with ThemeProvider)
- Semantic release with commit-analyzer (See more at https://www.conventionalcommits.org/)
π Setup
- Clone this repo (do not install all dependencies in this step)
- In
package.json
change"name": "your-name-example"
to your lib name. Ex:my-new-lib
- In
package.json
change the current version in"version": "x.x.x"
to"version": "0.0.0-development"
- Install all dependencies with
npm install
π Publishing
- Create your Github repository: https://github.com/new
- Link local repository to Github repository:
git remote add origin git@github.com:<username>/<repository-name>.git
git push -u origin master
In the next step we need to get Github and NPM tokens. This is needed in order for Semantic Release to be able to publish a new release for the Github repository and for the NPM registry.
Create a token for Github. You need to give the token repo scope permissions.
Create a token in NPM. You need to give the token Read and Publish access level.
Once you have the two tokens, you have to set them in your repository secrets config:
https://github.com/<username>/<repositoryname>/settings/secrets
Use GH_TOKEN
and NPM_TOKEN
as the secret names.
- Create a new component with
npm run generate:component
. For example a Title component:
? What is your component name? Title => Type your component name here
β ++ /src/components/title/Title.tsx
β ++ /src/components/title/__tests__/Title.test.tsx
β ++ /src/components/title/styled.ts
β ++ /src/components/title/Title.stories.mdx
β ++ /src/components/title/index.ts
- Add your new component at
src/index.ts
. For ex:
export { ThemeProvider } from 'styled-components'
export { default as theme, GlobalStyles } from './styles'
export * from './components/button'
export * from './components/title'
- Commit and push changes
git add .
git commit -m "feat: add title component"
git push
- If everything went well, you should see in the actions tab results that every step was succesfully executed and your commit describe at
CHANGELOG.md
file.
𧩠How to use your new library
import { ThemeProvider } from 'styled-components'
import { Button, theme } from 'your-name-example'
function App() {
return (
<ThemeProvider theme={theme}>
<Button>My button from npm-react-module</Button>
</ThemeProvider>
);
}
π Development mode
Install all dependencies
npm i
Show and build your components at
http://localhost:61622/
npm run storybook
π¨ Code standard
- JavaScript Standard Style - Javascript styleguide
- Prettier - Code formatter
- ESLint - Lint to quickly find problems
- Stylelint - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles
π₯ Testing
- Jest - A delightful JavaScript Testing Framework with a focus on simplicity
- Testing Library - Simple and complete testing utilities that encourage good testing practices
Others commands
npm run generate:component
to create a component folder structure
npm run test:ci
to run test code coverage
npm run deploy-storybook
publish your storybook github pages