Bst-sidemenu NPM

SIDEMENU

Sidemenu component which optionaly works with icons

Production

Icon support

In order to use icons, you need to install fortawesome dependencies:

npm install --save @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

Next, in your project you need to generate a lib with the icons that you want to use. In this example we want to use rocket and coffee icon. Let's add this code in your app entry point:

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faRocket, faCoffee } from '@fortawesome/free-solid-svg-icons' 

library.add(fab, faRocket, faCoffee)

Using this, now you can use react-fontawesome anywhere in your app. Our sidemenu component is ready to use it. More info: React FontAwesome

How to use

PropTypes

Sidemenu.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      icon: PropTypes.shape({
        name: PropTypes.string,
        size: PropTypes.string,
      }),
      text: PropTypes.string,
      link: PropTypes.string,
      active: PropTypes.boolean,
    })
  ),
  config: PropTypes.shape({
    logo: PropTypes.shape({
      src: PropTypes.string,
      alt: PropTypes.string,
      width: PropTypes.string,
      height: PropTypes.string,
    }),
    menu: PropTypes.shape({
      width: PropTypes.string,
    }),
  }),
  onItemClick: PropTypes.func,
}

config

The menu config is an object with configuration for the menu, like logo and size. Properties are:

menu object:
- width string: width of the menu
logo object:
- alt string: description of the image logo
- src string: source of the logo
- width string: width of the logo
- height string: height of the logo

items

The menu items are an array of object, where each object is a menu item. Propierties are:

text string: the text to diplay
link string: link of the button
active boolean: if that item is active or not
icon object:
- name string: name of the icon in font awesome
- color string: color of the icon

const items = [
  { text: 'Item1', link: 'http://item.com', active: true },
  { text: 'Item1', link: 'http://item2.eu' },
  {
    text: 'Rocket',
    link: 'http://rocket.com',
    icon: { name: 'rocket', size: 'lg' },
  },
  {
    text: 'Coffee shop',
    link: 'http://coffee-shop.com',
    icon: { name: 'coffee', size: '2x' },
  },
]

onItemClick

Function fired each time that a menu item is pressed. Receives itemId and link

  <Sidemenu
    items={items}
    config={config}
    onItemClick={(id, link) => console.log(`${id} seleccionado ${link}`)}
  />

To use this component:

import { Sidemenu } from 'bst-sidemenu'


<Sidemenu items={items} />

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.

Link your component from your component project:

npm link

Run webpack to compile your component and keep it in watch mode:

npm start

In the second project, where you want to load your component, create a reference to it:

npm link component-name

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|jsx)$/,
        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": "./"
      }
    ]
  }
}