# component-header

> This project is just a template to create isolated components or modules with react, and publish it to npm.

Latest version **1.0.1** (published 2018-07-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install component-header
pnpm add component-header
yarn add component-header
bun add component-header
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-07-13 |
| First published | 2018-07-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jaime_brito_imt |

## Links

- npm: https://www.npmjs.com/package/component-header
- npm.io page: https://npm.io/package/component-header

## Dependencies (1)

- [styled-components](https://npm.io/package/styled-components.md) ^3.3.3

## Recent versions

- 1.0.1 (latest) — 2018-07-13
- 1.0.0 — 2018-07-13

## README

# NPM PUBLISH REACT TEMPLATE

This project is just a template to create isolated components or modules with react, and publish it to npm.

## Production

// Write your component documentation here

## Development

### Folder structure
```
- build
- config
- node_modules
- src
.babelrc
.eslintignore
.eslintrc
.gitignore
.npmignore
package.json
README.md
```
Folders

* build: is the transpiled code in ES5.
* config: is where the webpack configuration is defined.
* src: is where our component / modules are developed.

Files

* .babelrc: here is defined the babel configuration about how transpile our code
* .eslintrc / .eslintignore: here are defined the eslint configuration and ignored files
* .npmignore / .gitignore: here are defined the files and foldes that we want to ignore for and npm

### How to use

You must create your component or module inside src/ folder. To test your component you must have another project to load it, but before you need to link it locally with npm.

1. Link your component from your component project:

```
npm link
```

2. Run webpack to compile your component and keep it in watch mode:
```
npm start
```

3. In the second project, where you want to load your component, create a reference to it:
```
npm link component-name
```

4. Import it and use into your project.

This simulates locally the node_modules and npm behavior.

### Publish your component

Remeber to add to peerDependencies in package.json the dependencies that will used by it's parent from our component in production.

You need to login using your npm account, and then run:
```
npm publish
```

Using the prepublishOnly script, each time that you want to publish your component, webpack generates a new fresh build.

Remember to unlink your component after publish:

In your component folder:
```
npm unlink
```

In your local project to test:
```
npm unlink component-name
```

### Webpack configuration

```javascript
const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, '../build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|build)/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        exclude: /(node_modules|build)/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  externals: {
    react: {
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'React',
      root: 'React',
    },
    'prop-types': {
       commonjs: 'prop-types',
       commonjs2: 'prop-types',
       amd: 'PropTypes',
       root: 'PropTypes',
    },
  },
  resolve: {
    extensions: ['.js', '.jsx', '.css'],
    alias: {
      react: path.resolve(__dirname, './node_modules/react'),
      'prop-types': path.resolve(
        __dirname, 
        './node_modules/prop-types'
      ),
      'styled-components': path.resolve(
        __dirname,
        './node_modules/styled-components'
      ),
    },
  },
}

```

## Eslint configuration

```javascript
{
  "parser": "babel-eslint",
  "extends": ["eslint:recommended", "airbnb"],
  "plugins": ["import", "react"],
  "env": {
    "es6": true,
    "jest": true
  },
  "rules": {
    "semi": ["error", "never"],
    "comma-dangle": ["error", "always-multiline"],
    "import/newline-after-import": [
      "error",
      {
        "count": 2
      }
    ],
    "max-len": "off",
    "import/no-absolute-path": 0,
    "import/extensions": 0,
    "no-mixed-operators": 0,
    "import/no-unresolved": "off",
    "react/jsx-filename-extension": [
      "error",
      {
        "extensions": [".js", ".jsx"]
      }
    ],
    "no-restricted-properties": [
      "error",
      {
        "property": "lenght"
      }
    ],
    "import/no-extraneous-dependencies": [
      "error",
      {
        "packageDir": "./"
      }
    ]
  }
}
```

---
_Source: https://npm.io/package/component-header · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._