cm-pg-components

This repository contains all React components needed by Portfolio, Campaign and Licenses and will be released as an npm package.

Installation

This project works with:

• Node/ExpressJs
• React
• StoryBook

Node

To install node you can download the latest release or install nvm. NVM is recommended.

NVM

After install nvm, in the root of project run:

1nvm install

Getting Started

Install dependencies:

1npm  install

Run components documentation:

1npm run storybook

The project runs in http://localhost:6006

Local development

To test locally we have two ways:

• Directly in the app
• Using Storybook

Directly in the app

Build the package and link it with the app. Make sure that you set as true the LOCAL_DEV variable in the environment variables.

In appsuite-shared directory:

npm run build

npm link

In the app directory

npm link cm-pg-components

Remember after any change the code execute:

npm run build

Using Storybook

Storybook is a components repository, each component that has a stories.jsx file will be listed in that repository.

creating a stories.jsx file

This file imports the component and passes properties to it. The file must be located in the same directory the file component

/Button
-- index.js
-- Button.stories.jsx

Button.stories.jsx

1import React from 'react'
2import ModalErrors from './'
3
4const defaultsArgs = {
5  href: '#',
6  className: 'my-class'
7}
8
9const ButonToTest = args => (
10  <Button { ...args }>
11    This is a button
12  </Button>
13)
14
15export const Default = Template.bind({})
16Default.args = {
17  ...defaultsArgs
18}
19
20export const Secondary = Template.bind({})
21Secondary.args = {
22  ...defaultsArgs,
23  color: 'secondary'
24}
25
26export default {
27  title: 'Buttons/Button',
28  component: Button
29}
30

React components

ReactJs works with reusable components regardless of context. The components work as an independent whole, in that sense each component has its own images, styles, translations, etc. Follow these rules when creating a component:

• A component can define nested components. You cannot define or use pages.
• A page can define components, scenes and/or services.
• Nested features can only be used by their parents.

Components

The components are stored in the components directory. This directory is global and can be used by any part of the applications.

Nested components

A nested component is a component that is defined inside another component; it can only be used by its parent; when a component is needed but it will not be used in more than one place.

Structure

/src
  /components
    /molecules
      /Notifications
        /components
          /ButtonDismiss
            /index.js
        /actions.js
        /index.js
        /reducer.js