3.0.26 • Published 8 years ago

gfas-react-components v3.0.26

Weekly downloads
2
License
MIT
Repository
github
Last release
8 years ago

Gfas React Components

CircleCI codecov js-standard-style

Install

$ npm install gfas-react-components styled-components             # We love styled components

Setup

You must provide your theme to the components like so.

// in your root component

import React from 'react'
import { ThemeProvider } from 'styled-components'
import theme from './myCustomTheme.js'
// pass in your custom theme to the components
const Root = () => (

  <ThemeProvider theme={theme}>
    <MyAppOrWhatever />
  </ThemeProvider>
)

Theme file

You can use this theme file as a base the components look for the following values to be defined you can customize them to get a look to your liking

const theme = {
  sizes: [16, 18, 24, 32, 36, 48],
  padding: [0, 6, 12, 24, 32, 64],
  margin: [0, 8, 16, 24, 32, 64],
  borderWidth: 1,
  borderRadius: 4,
  colors: {
    default: '#222',
    white: '#FFF',
    black: '#222',
    transparent: 'transparent',
    gray: '#e7e7e7',
    lightgray: '#f8f8f8',
    primary: '#0193F5',
    secondary: '#E921FF',
    info: '#11FFEA',
    success: '#40E59B',
    warning: '#FFC32F',
    error: '#E84548'
  },
  fontFamily: 'Open Sans, Helvetica, Arial, sans-serif'
}

export default theme

Requirements

  • node v6 - v7
  • npm ^3.0.0

Contributing & Development Instructions

Install dependencies, and check to see it works

$ npm install                   # Install project dependencies
$ npm run dev                     # Development via storybook @ localhost:9001

While developing, you will probably rely mostly on npm run dev; however, there are additional scripts at your disposal:

npm run <script>Description
devDevelopment Mode
lintLint all .js files.
buildBuild Production Library.
lint:fixLint and fix all .js files. Read more on this.

Project Structure

.
├── .storybook               # Storybook config
├── src                      # Client entry point
│   |   ├── components       # Component Source
|   |   ├── theme.js         # default theme file for development
3.0.26

8 years ago

3.0.23

8 years ago

3.0.22

8 years ago

3.0.21

8 years ago

3.0.20

8 years ago

3.0.19

8 years ago

3.0.18

8 years ago

3.0.17

8 years ago

3.0.16

8 years ago

3.0.15

8 years ago

3.0.14

8 years ago

3.0.13

8 years ago

3.0.12

8 years ago

3.0.11

8 years ago

3.0.10

8 years ago

3.0.9

8 years ago

3.0.8

8 years ago

3.0.7

8 years ago

3.0.6

8 years ago

3.0.5

8 years ago

3.0.4

8 years ago

3.0.3

8 years ago

3.0.2

8 years ago

3.0.1

8 years ago

3.0.0

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago