@zapay-pagamentos/zapay-credit-cards

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?

[x] React
[x] Typescript
[x] Styled components with ThemeProvider 💅
[x] Storybook with MDX Syntax
[x] Testing library/react (Setup working with ThemeProvider)
[x] 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