@wiggot/c3-ui
Useful components to use at creating platforms with react.
Last updated 4 months ago by mickambar19 .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @wiggot/c3-ui 
SYNC missed versions from official npm registry.

C3-UI

c3-ui

This package contains the most powerful components using react.

Table of Contents

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 { DangerButton } from 'elements/Buttons'

Requirements

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:6006
  • 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
    
    
    
  • 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 version

Checks the current version published on npmjs.org

npm run autoprefix:css

Autoprefixes the css styles to be available on most browsers.

npm run dev:css

Watches for changes in .scss.
Files must be inside src/ folder

npm run dev:js

Compiles the .js files for development stage

npm run dev:storybook

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

npm run dev:test

Starts the test runner called jest and executes it on watch mode.

npm run dev:frontend

Compiles de scss files and autoprefixes the result file. Furthermore giving you the css compiled file, it will compile js files and run the storybook.

npm run dev

Generates a test file which is a helper for jest addon placed on storybook.
Runs the storybook and the .scss files are compiled.

Note: 
If you want tests to be on watch mode you should execute `npm run dev:test`

npm run build:css

Creates the compiled index.css file for production

npm run build:js

Compiles the .js files for production stage

npm run build

Compiles the .scss files and .js files for production
The generated files will be available through npm package

npm run build:storybook

Compiles the .scss files and .js files for production in `dist` folder

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 dev:generate-test

Generates a test file with results. This file is a helper to be used on storybook(Shows the results in a section)

npm run test

Make sure you have [Watchman installed](https://facebook.github.io/watchman/docs/install.html)

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

npm run prebuild:storybook

Executes `dev:generate-test` before storybook is built.

npm run dev:generate-test-watch

Regenerates the tests result file to be used on storybook.

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

      Example:

          import { Frame } from 'generics/Frames'
      

      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
  • Imports(Continue..)

    • 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

    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 
              }
        }
      }
    

    In order to add a new input type, you should be aware of the two prefixes.

Prefix Description
CT Controlled
RF Controlled

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.

.ENV file

Useful ENV variables:

  • STORYBOOK_GOOGLE_MAP_KEY

Adding a change to library

ALWAYS Remember to patch your version with npm version patch so it can pass the publish package stage correctly on CI/CD.

  • Pass axios instance when required a fetch function required.

Current Tags

  • 2.1.2                                ...           development (3 months ago)
  • 1.2.35                                ...           development-hotfix (a year ago)
  • 2.1.0                                ...           latest (4 months ago)
  • 2.1.6                                ...           master (9 days ago)
  • 1.2.15                                ...           migration (a year ago)
  • 1.2.85                                ...           picky-master (10 months ago)
  • 1.2.69                                ...           speedy-master (a year ago)

325 Versions

  • 2.1.6                                ...           9 days ago
  • 2.1.5                                ...           9 days ago
  • 2.1.4                                ...           3 months ago
  • 2.1.3                                ...           3 months ago
  • 2.1.2                                ...           3 months ago
  • 2.1.1                                ...           4 months ago
  • 2.1.0                                ...           4 months ago
  • 1.2.101                                ...           4 months ago
  • 1.3.1                                ...           4 months ago
  • 1.3.0                                ...           5 months ago
  • 1.2.96                                ...           5 months ago
  • 1.2.95                                ...           5 months ago
  • 1.2.94                                ...           6 months ago
  • 1.2.93                                ...           6 months ago
  • 1.2.92                                ...           7 months ago
  • 1.2.91                                ...           7 months ago
  • 1.2.90                                ...           7 months ago
  • 1.2.89                                ...           7 months ago
  • 1.2.87                                ...           7 months ago
  • 1.2.86                                ...           7 months ago
  • 1.2.85                                ...           10 months ago
  • 1.2.84                                ...           10 months ago
  • 1.2.83                                ...           10 months ago
  • 1.2.82                                ...           10 months ago
  • 1.2.80                                ...           10 months ago
  • 1.2.79                                ...           a year ago
  • 1.2.78                                ...           a year ago
  • 1.2.77                                ...           a year ago
  • 1.2.76                                ...           a year ago
  • 1.2.74                                ...           a year ago
  • 1.2.73                                ...           a year ago
  • 1.2.72                                ...           a year ago
  • 1.2.71                                ...           a year ago
  • 1.2.70                                ...           a year ago
  • 1.2.69                                ...           a year ago
  • 1.2.68                                ...           a year ago
  • 1.2.67                                ...           a year ago
  • 1.2.66                                ...           a year ago
  • 1.2.65                                ...           a year ago
  • 1.2.64                                ...           a year ago
  • 1.2.63                                ...           a year ago
  • 1.2.62                                ...           a year ago
  • 1.2.61                                ...           a year ago
  • 1.2.60                                ...           a year ago
  • 1.2.59                                ...           a year ago
  • 1.2.58                                ...           a year ago
  • 1.2.57                                ...           a year ago
  • 1.2.56                                ...           a year ago
  • 1.2.55                                ...           a year ago
  • 1.2.54                                ...           a year ago
  • 1.2.53                                ...           a year ago
  • 1.2.52                                ...           a year ago
  • 1.2.51                                ...           a year ago
  • 1.2.49                                ...           a year ago
  • 1.2.48                                ...           a year ago
  • 1.2.47                                ...           a year ago
  • 1.2.46                                ...           a year ago
  • 1.2.45                                ...           a year ago
  • 1.2.43                                ...           a year ago
  • 1.2.42                                ...           a year ago
  • 1.2.35                                ...           a year ago
  • 1.2.34                                ...           a year ago
  • 1.2.33                                ...           a year ago
  • 1.2.32                                ...           a year ago
  • 1.2.31                                ...           a year ago
  • 1.2.30                                ...           a year ago
  • 1.2.27                                ...           a year ago
  • 1.2.26                                ...           a year ago
  • 1.2.25                                ...           a year ago
  • 1.2.24                                ...           a year ago
  • 1.2.23                                ...           a year ago
  • 1.2.22                                ...           a year ago
  • 1.2.21                                ...           a year ago
  • 1.2.20                                ...           a year ago
  • 1.2.19                                ...           a year ago
  • 1.2.18                                ...           a year ago
  • 1.2.17                                ...           a year ago
  • 1.2.16                                ...           a year ago
  • 1.2.15                                ...           a year ago
  • 1.2.14                                ...           a year ago
  • 1.2.13                                ...           a year ago
  • 1.2.12                                ...           a year ago
  • 1.2.11                                ...           a year ago
  • 1.2.10                                ...           a year ago
  • 1.2.9                                ...           a year ago
  • 1.2.8                                ...           a year ago
  • 1.2.7                                ...           a year ago
  • 1.2.6                                ...           a year ago
  • 1.2.5                                ...           a year ago
  • 1.2.0                                ...           a year ago
  • 1.0.3                                ...           a year ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
  • 0.2.285                                ...           2 years ago
  • 0.2.284                                ...           2 years ago
  • 0.2.281                                ...           2 years ago
  • 0.2.279                                ...           2 years ago
  • 0.2.278                                ...           2 years ago
  • 0.2.277                                ...           2 years ago
  • 0.2.276                                ...           2 years ago
  • 0.2.275                                ...           2 years ago
  • 0.2.274                                ...           2 years ago
  • 0.2.273                                ...           2 years ago
  • 0.2.271                                ...           2 years ago
  • 0.2.270                                ...           2 years ago
  • 0.2.269                                ...           2 years ago
  • 0.2.268                                ...           2 years ago
  • 0.2.267                                ...           2 years ago
  • 0.2.264                                ...           2 years ago
  • 0.2.263                                ...           2 years ago
  • 0.2.262                                ...           2 years ago
  • 0.2.261                                ...           2 years ago
  • 0.2.260                                ...           2 years ago
  • 0.2.258                                ...           2 years ago
  • 0.2.255                                ...           2 years ago
  • 0.2.254                                ...           2 years ago
  • 0.2.253                                ...           2 years ago
  • 0.2.252                                ...           2 years ago
  • 0.2.251                                ...           2 years ago
  • 0.2.250                                ...           2 years ago
  • 0.2.249                                ...           2 years ago
  • 0.2.248                                ...           2 years ago
  • 0.2.247                                ...           2 years ago
  • 0.2.246                                ...           2 years ago
  • 0.2.244                                ...           2 years ago
  • 0.2.243                                ...           2 years ago
  • 0.2.242                                ...           2 years ago
  • 0.2.241                                ...           2 years ago
  • 0.2.240                                ...           2 years ago
  • 0.2.239                                ...           2 years ago
  • 0.2.238                                ...           2 years ago
  • 0.2.237                                ...           2 years ago
  • 0.2.235                                ...           2 years ago
  • 0.2.233                                ...           2 years ago
  • 0.2.232                                ...           2 years ago
  • 0.2.231                                ...           2 years ago
  • 0.2.230                                ...           2 years ago
  • 0.2.229                                ...           2 years ago
  • 0.2.227                                ...           2 years ago
  • 0.2.226                                ...           2 years ago
  • 0.2.225                                ...           2 years ago
  • 0.2.224                                ...           2 years ago
  • 0.2.223                                ...           2 years ago
  • 0.2.221                                ...           2 years ago
  • 0.2.220                                ...           2 years ago
  • 0.2.219                                ...           2 years ago
  • 0.2.216                                ...           2 years ago
  • 0.2.215                                ...           2 years ago
  • 0.2.212                                ...           2 years ago
  • 0.2.211                                ...           2 years ago
  • 0.2.210                                ...           2 years ago
  • 0.2.209                                ...           2 years ago
  • 0.2.208                                ...           2 years ago
  • 0.2.207                                ...           2 years ago
  • 0.2.206                                ...           2 years ago
  • 0.2.205                                ...           2 years ago
  • 0.2.204                                ...           2 years ago
  • 0.2.203                                ...           2 years ago
  • 0.2.202                                ...           2 years ago
  • 0.2.201                                ...           2 years ago
  • 0.2.199                                ...           2 years ago
  • 0.2.197                                ...           2 years ago
  • 0.2.196                                ...           2 years ago
  • 0.2.195                                ...           2 years ago
  • 0.2.194                                ...           2 years ago
  • 0.2.192                                ...           2 years ago
  • 0.2.191                                ...           2 years ago
  • 0.2.190                                ...           2 years ago
  • 0.2.189                                ...           2 years ago
  • 0.2.187                                ...           2 years ago
  • 0.2.186                                ...           2 years ago
  • 0.2.185                                ...           2 years ago
  • 0.2.184                                ...           2 years ago
  • 0.2.183                                ...           2 years ago
  • 0.2.182                                ...           2 years ago
  • 0.2.181                                ...           2 years ago
  • 0.2.180                                ...           2 years ago
  • 0.2.179                                ...           2 years ago
  • 0.2.178                                ...           2 years ago
  • 0.2.177                                ...           2 years ago
  • 0.2.176                                ...           2 years ago
  • 0.2.175                                ...           2 years ago
  • 0.2.174                                ...           2 years ago
  • 0.2.172                                ...           2 years ago
  • 0.2.171                                ...           2 years ago
  • 0.2.170                                ...           2 years ago
  • 0.2.169                                ...           2 years ago
  • 0.2.167                                ...           2 years ago
  • 0.2.166                                ...           2 years ago
  • 0.2.165                                ...           2 years ago
  • 0.2.163                                ...           2 years ago
  • 0.2.160                                ...           2 years ago
  • 0.2.159                                ...           2 years ago
  • 0.2.158                                ...           2 years ago
  • 0.2.157                                ...           2 years ago
  • 0.2.156                                ...           2 years ago
  • 0.2.155                                ...           2 years ago
  • 0.2.153                                ...           2 years ago
  • 0.2.152                                ...           2 years ago
  • 0.2.149                                ...           2 years ago
  • 0.2.147                                ...           2 years ago
  • 0.2.146                                ...           2 years ago
  • 0.2.145                                ...           2 years ago
  • 0.2.144                                ...           2 years ago
  • 0.2.143                                ...           2 years ago
  • 0.2.141                                ...           2 years ago
  • 0.2.140                                ...           2 years ago
  • 0.2.139                                ...           2 years ago
  • 0.2.138                                ...           2 years ago
  • 0.2.137                                ...           2 years ago
  • 0.2.136                                ...           2 years ago
  • 0.2.135                                ...           2 years ago
  • 0.2.134                                ...           2 years ago
  • 0.2.133                                ...           2 years ago
  • 0.2.132                                ...           2 years ago
  • 0.2.131                                ...           2 years ago
  • 0.2.130                                ...           2 years ago
  • 0.2.128                                ...           2 years ago
  • 0.2.127                                ...           2 years ago
  • 0.2.126                                ...           2 years ago
  • 0.2.125                                ...           2 years ago
  • 0.2.124                                ...           2 years ago
  • 0.2.123                                ...           2 years ago
  • 0.2.122                                ...           2 years ago
  • 0.2.120                                ...           2 years ago
  • 0.2.119                                ...           2 years ago
  • 0.2.118                                ...           2 years ago
  • 0.2.117                                ...           2 years ago
  • 0.2.115                                ...           2 years ago
  • 0.2.114                                ...           2 years ago
  • 0.2.113                                ...           2 years ago
  • 0.2.110                                ...           2 years ago
  • 0.2.109                                ...           2 years ago
  • 0.2.106                                ...           2 years ago
  • 0.2.104                                ...           2 years ago
  • 0.2.102                                ...           2 years ago
  • 0.2.100                                ...           2 years ago
  • 0.2.96                                ...           2 years ago
  • 0.2.95                                ...           2 years ago
  • 0.2.94                                ...           2 years ago
  • 0.2.92                                ...           2 years ago
  • 0.2.90                                ...           2 years ago
  • 0.2.88                                ...           2 years ago
  • 0.2.87                                ...           2 years ago
  • 0.2.86                                ...           2 years ago
  • 0.2.85                                ...           2 years ago
  • 0.2.84                                ...           2 years ago
  • 0.2.83                                ...           2 years ago
  • 0.2.82                                ...           2 years ago
  • 0.2.81                                ...           2 years ago
  • 0.2.80                                ...           2 years ago
  • 0.2.79                                ...           2 years ago
  • 0.2.78                                ...           2 years ago
  • 0.2.77                                ...           2 years ago
  • 0.2.76                                ...           2 years ago
  • 0.2.75                                ...           2 years ago
  • 0.2.74                                ...           2 years ago
  • 0.2.73                                ...           2 years ago
  • 0.2.71                                ...           2 years ago
  • 0.2.70                                ...           2 years ago
  • 0.2.67                                ...           2 years ago
  • 0.2.65                                ...           2 years ago
  • 0.2.66                                ...           2 years ago
  • 0.2.64                                ...           2 years ago
  • 0.2.63                                ...           2 years ago
  • 0.2.62                                ...           2 years ago
  • 0.2.61                                ...           2 years ago
  • 0.2.60                                ...           2 years ago
  • 0.2.59                                ...           2 years ago
  • 0.2.58                                ...           2 years ago
  • 0.2.57                                ...           2 years ago
  • 0.2.56                                ...           2 years ago
  • 0.2.55                                ...           2 years ago
  • 0.2.54                                ...           2 years ago
  • 0.2.52                                ...           2 years ago
  • 0.2.53                                ...           2 years ago
  • 0.2.51                                ...           2 years ago
  • 0.2.50                                ...           2 years ago
  • 0.2.48                                ...           2 years ago
  • 0.2.47                                ...           2 years ago
  • 0.2.45                                ...           2 years ago
  • 0.2.42                                ...           2 years ago
  • 0.2.39                                ...           2 years ago
  • 0.2.37                                ...           2 years ago
  • 0.2.35                                ...           2 years ago
  • 0.2.34                                ...           2 years ago
  • 0.2.33                                ...           2 years ago
  • 0.2.32                                ...           2 years ago
  • 0.2.31                                ...           2 years ago
  • 0.2.30                                ...           2 years ago
  • 0.2.29                                ...           2 years ago
  • 0.2.28                                ...           2 years ago
  • 0.2.27                                ...           2 years ago
  • 0.2.26                                ...           2 years ago
  • 0.2.25                                ...           2 years ago
  • 0.2.24                                ...           2 years ago
  • 0.2.23                                ...           2 years ago
  • 0.2.22                                ...           2 years ago
  • 0.2.21                                ...           2 years ago
  • 0.2.20                                ...           2 years ago
  • 0.2.19                                ...           2 years ago
  • 0.2.18                                ...           2 years ago
  • 0.2.17                                ...           2 years ago
  • 0.2.16                                ...           2 years ago
  • 0.2.15                                ...           2 years ago
  • 0.2.14                                ...           2 years ago
  • 0.2.13                                ...           2 years ago
  • 0.2.11                                ...           2 years ago
  • 0.2.10                                ...           2 years ago
  • 0.2.9                                ...           2 years ago
  • 0.2.8                                ...           2 years ago
  • 0.2.7                                ...           2 years ago
  • 0.2.6                                ...           2 years ago
  • 0.2.5                                ...           2 years ago
  • 0.2.4                                ...           2 years ago
  • 0.2.3                                ...           2 years ago
  • 0.2.2                                ...           2 years ago
  • 0.1.5                                ...           2 years ago
  • 0.2.1                                ...           2 years ago
  • 0.2.0                                ...           2 years ago
  • 0.1.4                                ...           2 years ago
  • 0.1.3                                ...           2 years ago
  • 0.1.2                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.18                                ...           2 years ago
Downloads
Today 0
This Week 0
This Month 26
Last Day 0
Last Week 26
Last Month 0
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |