Cra-template-library NPM

cra-template-library

This is based on the official base template for Create React App.

How-to

1. Create the project

  npx create-react-app my-lib-name --template library

2. Develop the library with Storybook (optional)

  npm run storybook

2.1 Generate static documentation (optional)

  npm build-storybook

3. Test

  npm run test

4. Change `package.json`

{
  ...

  "main": "dist/index.js",
  "module": "dist/index.js",
  "files": [
    "dist",
    "README.md"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://[repository-location/my-lib-name].git"
  },
    "eslintConfig": {
    "extends": "react-app"
  },
  ...
  
  "description": "default description",
  "bugs": {
    "url": "https://[repository-location/my-lib-name]/issues"
  },
  "homepage": "https://[repository-location/my-lib-name]#readme",
  "keywords": [],
  "author": "[my-name]"
  },
  "husky": {
    "hooks": {
      "pre-commit": "babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__"
    }
  }

5. Compile the library

  npm run build

The resulted compiled vanilla javascript is generated inside the dist folder

Pre-defined folders

lib: all react components to be compiled.
__tests__: jest tests in *.test.js format
stories: storybook stories in .stories.js format

Pre-defined packages

Babel: to compile the react project into vanilla javascript inside the lib folder. This will be the exported project after npm run prepublishOnly.
Storybook: development environment for UI components
- Actions: display data received by event handlers in Storybook
- Docs: transform your Storybook stories into world-class component documentation
- Knobs: edit props dynamically using the Storybook UI
- Links: create links that navigate between stories in Storybook
- ViewPort: stories to be displayed in different sizes and layouts in Storybook
React Testing library: to write maintainable tests for your React components
AirBnB linting rules