C3-UI

This package contains the most powerful components

Table of Contents

• Usage
• Requirements
• Run the project
• Folders Architecture
• Components Structure
  • Generics
  • Elements
  • Components
• Available Scripts
• Useful vscode plugins
• How to write your code
  • Imports
  • Adding New Input Components
• Make updates

Usage

In order to use this components you should add the following line to your App.js or your index.css

import 'c3-ui/assets/c3-ui.css'

Which styles all the components used here.

You can import all the components throught its corresponding group

import { CancelButton } from 'elements/Buttons'

Requirements

• Node ^ 8.9.1

  • npm ^ 5.6.0

    OR

  • yarn ^ 1.6

Run the project

Are you developing the

Yarn:

$ yarn 
$ yarn run start

Npm:

$ npm install 
$ npm run start

Folders Architecture

c3-ui
├── lib
    └── generics
    └── elements
    └── components
    └── styles
        ├── base
        ├── components
        ├── elements
        ├── fonts
        ├── generics
        ├── vendor
        └── index.scss
├── node_modules
├── test-config
    ├── coverage
    ├── jest
    ├── file-mock.js
    ├── jest-setup.js
    ├── polyfills.js
    └── style-mock.js
├── stories
    └── .storybook
    └── all-stories
├── .babelrc
├── .eslint
├── .eslintignore
├── .gitignore
├── .nvmrc
├── .prettierignore
├── .prettierrc.json
├── jsconfig.json
├── .env
└── README.md

Components structure

You can preview all the components in the storybook after you run the project in the following url:

http://localhost:6001

• ### Generics

  • Placed in src/library/Generics

  layer: (UI/CSS)

  Here you can create generic Generics that will be useful in the next layer.

  Rules:

  • You're able to make CSS changes through classes

    • colors
    • border
    • shadows
    • padding
    • margin
    • ...etc

  • Implement BEM methodology

  • Import the sass file of the component in app.scss

  • You will regularly use HTML Generics

  • Not Semantic Generics

  • Only imports of the same level are allowed

  • Import any of this component through due to babel-module-resolver, its config is placed in .babelrc

       import { Button, IconButton } from 'generics/Buttons'

  Examples:

  Input.js

  class Input extends Component {
    static propTypes = {
      onChange: PropTypes.func,
      value: PropTypes.any,
      type: PropTypes.string
    }
   
    state = {
      value: ''
    }
   
    onChange = event => {
      const { onChange } = this.props
      if (onChange) {
        this.props.onChange(event.target.value)
      } else {
        this.setState({ value: event.target.value })
      }
    }
   
    render() {
      const { value: parentValue } = this.props
      return (
        <input
          className="input"
          type={this.props.type || 'text'}
          {...this.props}
          onChange={this.onChange}
          value={parentValue ? parentValue : this.state.value}
        />
      )
    }
  }      

• ### Elements

  • Placed in src/library/Elements

  layer: (UI/CSS)

  Rules:

  • You're able to make CSS changes through classes
    • colors
    • border
    • shadows
    • padding
    • margin
    • ...etc
  • Implement BEM methodology
  • Import the sass file of the component in app.scss
  • Semantic Generics

  Examples:

  TextInput.js

  import { Input } from 'generics/FormInputs/Inputs'
  const TextInput = props => {
    return <Input type="text" {...props} />
  }
  export default TextInput

  NotificationButton.js

  import { CounterButton } from 'generics/Buttons'
  import React from 'react'
   
  const NotificationButton = props => {
    return <CounterButton dripiconIcon="bell" square stillGray large {...props} />
  }
   
  export default NotificationButton

• ### Components

  • Placed in src/library/components

  layer: (UX/Int)

  Rules:

  • You are able to use any element created

  • You're able to change styles in css of the following attributes changes through classes

    • padding
    • margin
    • position
    • use of the breakpoints

    As you can see only attributes according to layout style

  • Semantic Components

  • You can put some logic that is only for that specific component

  Examples:

  MainMenuLinks.js contains:

  <Frame className="main-menu-links" justify>
    <FrameItem className="main-menu-links__item">
      { 
         children.map(child)=>(
          child
        )
      }
    </FrameItem>
  </Frame>

  OpenQuestion.js which is composed of some Elements as: Frame, TextInput, Label, Title

  <Frame>
    <FrameItem><Title>Pregunta 1</Title>
    </FrameItem>
    <FrameItem small={2}>
      <Label>Responde con lo que quieras.</Label>
    </FrameItem>
    <FrameItem small={8}>
      <TextInput/>
    </FrameItem>
  </Frame>

Available Scripts

In the project directory, you can run:

### npm run build-css Creates the compiled index.css file for production

### npm run watch-css Watches for changes in .scss and compiles it to an index.css file

Files must be inside src/ folder

### npm run build-js Compiles the .js files for production stage

### npm run watch-js Compiles the .js files for development stage

### npm run git-clean Adds everithing in git and commits the files with "Added minor changes" message.

### npm run update-version Updates the library version

### npm run build Compiles the .scss files and .js files for production

### npm run before-publish Executes git-clean and update-version scripts

### npm run start Runs the storybook and the .scss files are compiled

### npm run storybook Runs the storybook alone without compiling .scss files Remember to have an index.css because it is imported in app.js

### npm run build-storybook Compiles the storybook for production

### npm run prettier Formats all the code with a line of coding defined in .prettierrc.json

### npm run prettier-watch In case you do not have the plugin installed (Prettier Code Formatter) you can run this command and this will watch for all your changes.

### npm run eslint Checks for any errors in your code according to rules defined in .eslintrc.json

### npm run test Make sure you have Watchman installed

Runs test suites (all files with .test.js)

### npm run test-complete Make sure you have Watchman installed

Runs test suites (all files with .test.js) It runs jest in watch, coverage and verbose mode.

Useful vscode plugins

• ES7 React/Redux/Graph ... - Dsznajder
• Docker - microsoft
• DotEnv - mikestead
• ESLint - Dirk Baeumer
• IntelliSense for Css - Zigng
• Jest Snippets - andys8
• Material Icon Theme - Philipp WebKitFileEntry
• Path Intellisense - Christian Kohler
• Prettier Code Formatter - Esben Petersen
• Scss Intellisense - Mrmlnc

How to write your code

• ## Imports

  • ### Import using babelrc module resolver You are able to import the following that poinst to:

    From	Points to
    generics	./lib/generics
    elements	./lib/elements
    components	./lib/components
    styles	./lib/styles
    stories	./stories/all-stories

    Example:

        import { Frame } from 'generics/Frames'

  • ### Import order

    • Use modules imports

    • Use library imports

      • Generics First
      • Elements Secondly
      • Components Lastly

  • ### Space after import

    • Make sure to use a breakline after each variety of library

    Example:

      import React from 'react'
      import PropTypes from 'prop-types'
      
      import { Frame } from 'generics/Frames'
      
      import { ImageButton, SubmitButton } from 'elements/Buttons'

  • ## CSS Do not use style attribute on elements, but if the layer of the component allows you to add a class, go forward.

      <Frame 

    style={{color: 'red'}}

    className="contact-news"

      />

• ## Adding New Input Components In order to add a new input type, you should be aware of the two prefixes.

  Prefix	Description
  CT	Controlled
  RF	Controlled

  You should be able to get the props according to the input Type due to the prefixed value.

    getInputProps = () => {
      const { componentType } = this.props
   
      switch (componentType) {
        case 'CT':
          return {
            onChange: this.onChangeCT
          }
        case 'RF':
          return { 
            ...input, 
            onChange: this.onChangeRF 
            }
      }
    }

Make updates

Remember to use the following commands if you have made changes and you want to make it available $ npm run build

$ npm version patch

$ npm publish 

• In case you have made a patch version

  $ npm version patch 
  

• In case you have made a minor version

  $ npm version minor 
  

• In case you have made a major version

  $ npm version major 
  

Remember to use a tag when publishing if you think it is not necesary to update it.

Requests

• FormRowFrame
• FormTitle center
• Upload Photo Component
  • With Thumbnails
• Map Component
  • Type Text and center map according that
  • Map retrieves coordinates
  • Passing coordinates it will be displayed in map
• Notification Bagde
  • It will be used to notify the user of an offer

.ENV file

Useful ENV variables:

• STORYBOOK_GOOGLE_MAP_KEY