el-web v0.1.7

EL WEB

Just Another React Js Components Library.

Getting Started

To use this library in your project, just install it using npm and the repository url.

$ npm install el-web

Then, import the components that you want to use:

import { Title } from 'el-web';

How to Contribute

Clone this repository

$ git clone git@github.com:MedicalWebExperts/el-web.git

Running the application with docker

1. Install Docker

• Install Docker in your machine for your corresponding OS.
• Verify your installation. Run:

$ docker --version
Docker version 17.03.0-ce, build 60ccb22

2. Build the application

$ cd el-web/
$ docker-compose build

3. Running the application

$ docker-compose up

Running tests

When the application loads, it automatically runs the tests inside the container with the --watchAll flag. But, if for some reason you want to run them manually, you can use this command:

$ docker-compose run elweb npm test

To update the snapshots:

$ docker-compose run elweb npm test -- -u

To watch the test suite:

$ docker-compose run elweb npm run test:watch

Building the app to publish

$ docker-compose run elweb npm run build

Running the application locally

1. Install the dependencies

$ npm install

2. Running Storybook

$ npm run storybook

This command will show a storybook instance at: http://localhost:6006.

3. Running Tests

$ npm test

To update the snapshots:

$ npm test -- -u

To watch the test suite:

$ npm run test:watch

4. Building the app to publish

$ npm run prepublish

or:

$ npm run build

Structure of the Components Directory

src/

All the components are placed under the src/ folder. If you want to create a new component use the following structure:

src/
├── index.js
├── MyComponent
│   └── __snapshots__
│       ├── index.js
│       ├── styles.js
│       └── MyComponent.test.js

Storybook

This project has configured a storybook. If you run the application as discribed in step 3, you will have an intereactive storybook and ready to use at: http://localhost:6006.

If you want to add an story to the storybook, you can add it in the stories/ folder at the root of this repository.

import React from 'react';
import { storiesOf } from '@storybook/react';

import { MyComponent } from '../src';

storiesOf('MyComponent', module).add('default', () => <MyComponent />);

Checkout the storybook documentation for more examples.