gpawlik

React Components Living Style Guides Overview

For many years style guides have been in use as an primary platform of communication between designers and developers working on any complex project. Usually it’s been a separate resource that breaks down the user interface to organized building blocks and serve as a reference to locate and define design patterns for the project. The problem with this approach is that we have to maintain the code in two different places: the guide itself and the actual production codebase. And unfortunately the style guide consistency is the first to sacrifice when comes to hotfixes and tight deadlines.

To the rescue comes the concept of so-called living pattern libraries, where the components are being rendered using production code and enable interactivity and live configuration. This approach comes handy on every stage of the project and for anybody in a cross-functional team. Starting from designers who can easily catch up on the existing state of UI elements, through the

gpawlik

{
  "parser": "babel-eslint",
  "extends": "eslint:recommended",
  "plugins": [
    "react"
  ],
  "ecmaFeatures": {
    "jsx": true,
    "modules": true
  },

gpawlik

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/scripts.js",
  output: {
    path: __dirname + "/js",
    filename: "scripts.min.js"

gpawlik

function parseComplexCSV(input, separator, quote) {
  separator = separator || ',';
  quote = quote || '"';

  return input
    .replace(new RegExp('\\'+quote+'\\'+quote,'g'), 'doubleQuoteFlag')
    .split(quote)
    .map(function(val, index) {
      return index%2 ? 
        val.replace(new RegExp('doubleQuoteFlag','g'), quote) : 

gpawlik

// Array Functions
var arr1 = ['ted', 'bernie', 'hillary', 'marco', 'donald'];

console.log('first:', _.first(arr1));
console.log('last:', _.last(arr1));
console.log('initial:', _.initial(arr1));
console.log('rest:', _.rest(arr1));            
            
var arr2 = [1, 2, 3, [4, 4.5, 4.75], 5, false, 7];