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
The project uses React. Components are transpiled via @babel/plugin-transform-react-jsx.
# 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!# Go to your project
> cd /wherever/your/project/is
> npm i libe-components# 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> cd /wherever/you/installed/libe-components/
# Please, do lint.
> npm run standard-fix
# Build
> npm run build> 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 publishimport 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')
)libe-components
├── package.json
├── package-lock.json
├── build.sh
├── .babelrc
├── .npmignore
├── node_modules/
├── public/
├── index.html
├── ...
├── lib/
├── src/
├── index.js
├── components/
| Path | Purpose |
|---|---|
/package.json |
The ID card of the project |
/package-lock.json |
Don't touch this |
/build.sh |
The script executed in order to make a NPM ready components library |
/.babelrc |
Config file for Babel |
/.npmignore |
As a NPM module, no need for the /public/ and the /src/ directories, since /build.sh transpiles components in /lib/ |
/node_modules/ |
Where the dependencies of the project are |
/public/ |
Home of the static files |
/public/index.html |
The template page where the demo of all components is displayed |
/public/* |
Static ressources for the components demo page |
/lib/ |
Build directory. Contains a transpiled version of everything in /src/components/ |
/src/ |
Home of the source files |
/src/index.js |
A page displaying all components in /src/components/. Not exported in /lib/ |
/src/components/ |
All the standalone components |
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 = {}- Maxime Fabas - Rédaction - maximefabas.github.io
