bst-multi-layout

MultiLayout

Reusable layout with optional sidemenu, header and footer

Production

How to use

To use this component:

import { MultiLayout } from 'bst-multi-layout'

const header = (
  <div><h1>Header</h1></div>
)
const content = (
  <div><p> This is the content </p> </div>
)
const footer = (
  <div><h1>Footer</h1></div>
)
const sidemenuLeft = (
  <ul>
     <li>
      One
    </li>
    <li>
      Two
    </li>
  </ul>
)
const sidemenuRight = (
  <ul>
     <li>
      Three
    </li>
    <li>
      Four
    </li>
  </ul>
)

    <MultiLayout
      header={header}
      content={content}
      sidemenuLeft={sidemenuLeft}
      sidemenuRight={sidemenuRight}
      footer={footer}
    />

PropTypes

MultiLayout.propTypes = {
  header: PropTypes.node,
  content: PropTypes.node,
  footer: PropTypes.node,
  sidemenuLeft: PropTypes.node,
  sidemenuRight: PropTypes.node,
}

MultiLayout.defaultProps = {
  header: undefined,
  content: undefined,
  footer: undefined,
  sidemenuLeft: undefined,
  sidemenuRight: undefined,
}

Each element is a component that will be placen on each layout zone.

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

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

{
  "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": "./"
      }
    ]
  }
}