libe-components v1.2.2

Libé Components

General purpose

This projects holds reusable UI components for Libé Labo apps. This repo only takes care of the DOM and logical description of these components. For the styles, see libe-static-ressources.

See a live demo of all the components here (soon).

Home repo: https://github.com/libe-max/libe-components NPM: https://www.npmjs.com/package/libe-components

Technologies

The project uses React. Components are transpiled via @babel/plugin-transform-react-jsx.

Install, start, build & publish

Install

# Go to your favorite location
> cd /wherever/you/want/

# Create a place for your database to store data
> mkdir libe-database && mkdir libe-database/db

# Clone libe-components and its friends
> git clone https://github.com/libe-max/libe-components.git
> git clone https://github.com/libe-max/libe-static-ressources.git
> git clone https://github.com/libe-max/libe-data-server.git

# Install dependencies (libe-static-ressources has none)
> cd libe-data-server/ && npm i
> cd ../libe-components/ && npm i

# It's all good!

Install as a dependency

# Go to your project
> cd /wherever/your/project/is
> npm i libe-components

Start

# Start the libe-static-ressources (simple HTTP python server on port 3003)
> cd /wherever/you/installed/libe-static-ressources/ && npm start

# Run a MongoDB instance on default port (27017)
> mongod --dbpath ../libe-database/db/

# Start the libe-data-server (Nodejs/Expressjs server on port 3004)
> cd ../libe-data-server/ && npm start

# Start libe-components (React app with hot reloading on port 3002)
> cd ../libe-apps-template/ && npm start

Build

> cd /wherever/you/installed/libe-components/

# Please, do lint.
> npm run standard-fix

# Build
> npm run build

Publish

> cd /wherever/you/installed/libe-components/

# Commit and push everything
> git add *
> git commit -m "some lowercase descriptive action text"
> git push origin master

# Update "version" field in package.json, according to the [semantic versionning](https://semver.org/) method.
> nano package.json

# Install dependencies again in order to update package-lock.json
> npm i

# Commit & push version change
> git add *
> git commit -m "v{MAJOR}.{MINOR}.{PATCH}"
> git push origin master

# Publish to NPM
# (no need to build: npm run build is specified as a prepublish script in package.json)
> npm publish

Use

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Paragraph from 'libe-components/lib/text-levels/Paragraph'

function App () {
  return <div>
    <Paragraph big>Here is a big paragraph</Paragraph>
  </div>
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

Contents

libe-components
├── package.json
├── package-lock.json
├── build.sh
├── .babelrc
├── .npmignore
├── node_modules/
├── public/
    ├── index.html
    ├── ...
├── lib/
├── src/
    ├── index.js
    ├── components/

Component file template

import React, { Component } from 'react'
import PropTypes from 'prop-types'

/*
 *   Example component
 *   ------------------------------------------------------
 *
 *   DESCRIPTION
 *   Short description of how this works
 *
 *   PROPS
 *   list, of, props
 *
 */

export default class Example extends Component {
  /* * * * * * * * * * * * * * * * *
   *
   * CONSTRUCTOR
   *
   * * * * * * * * * * * * * * * * */
  constructor () {
    super()
    this.c = 'lblb-example'
  }

  /* * * * * * * * * * * * * * * * *
   *
   * RENDER
   *
   * * * * * * * * * * * * * * * * */
  render () {
    const { c } = this
    
    /* Assign classes */
    const classes = [c]

    /* Display component */
    return <div className={classes.join(' ')}>
      Example component
    </div>
  }
}

/* * * * * Prop types * * * * */
Example.propTypes = {}
Example.defaultProps = {}

Auteurs

• Maxime Fabas - Rédaction - maximefabas.github.io