roblevintennis

Libraries and Tools for React

Components and Component Libraries

If you're developing an application based on React it can be helpful if you don't need to develop all the basic UI components yourself. Here you can find a list with various components, component libraries and complete design systems developed with and for React.

Component libraries and Design Systems

Brands (official design systems by various companies and products)

roblevintennis

var log = []
document.querySelectorAll('.file-info > a').forEach(node => log.push(node.text))
console.log(log.join('\n'));

roblevintennis

// How will we move forward given ES6 module imports cannot be spied on e.g. you'll get error:
// Cannot set property of #<Object> which has only a getter
// Unless you transpile down to CommonJS (which works for now but probably not forever)

// Below are some ideas…


// ---- Dependency Injection ---- //

// Implementation

roblevintennis

diff --git a/app/assets/stylesheets/basic.scss b/app/assets/stylesheets/basic.scss
index 153ae768ab4..9009d6d2d21 100644
--- a/app/assets/stylesheets/basic.scss
+++ b/app/assets/stylesheets/basic.scss
@@ -1,6 +1,5 @@
 @import "app/assets/stylesheets/common/css_reset";
 @import "app/assets/stylesheets/common/utilities";
 @import "app/assets/stylesheets/basic/common";
-@import "mavenlink-js/src/stylesheets/styleguide/components/icons/icons-new";
 @import "app/assets/stylesheets/basic/landing";

roblevintennis

<% svgIconName = ''
case story.story_type
  when 'deliverable'
    svgIconName = 'icon-deliverable'
  when 'milestone'
    svgIconName = 'icon-milestone'
  when 'task'
    svgIconName = 'icon-task'
  when 'issue'
    svgIconName = 'icon-issue'

roblevintennis

  getStackTrace = ->
    stack = (new Error).stack or ''
    stack = stack.split('\n').map((line) ->
      line.trim()
    )
    stack.splice if stack[0] == 'Error' then 2 else 1

  onRender: ->
    console.log("Custom stack trace:")
    console.log(getStackTrace().join('\n'))

roblevintennis

Gannon Cannons - SVG Splatter Blocks

Chris Gannon rocks at SVG animation. This is just me studying his stuff and a total buffoonery not to be taken seriously! Go look at Chris's original here: http://codepen.io/chrisgannon/pen/wKReBX as this is just a decomposition for me to figure out what the dude's doing cuz "imitation is the sincerest form of flattery" and all dat jazz :-)

A Pen by Rob Levin on CodePen.

License.

roblevintennis

user = User.find(ID_FOUND_IN_USERS_TABLE)
200.times { |n| 
  w = Workspace.new(:title => 'Workspace-' + n.to_s, :creator_team => 'buyer')
  w.creator = user
  w.save!
}

roblevintennis

require 'fixjour'
require File.expand_path("./spec/spec_helpers/builders.rb")
include Fixjour

w = Workspace.find( YOUR_WORKSPACE_ID_HERE )
60.times { |n| create_story(workspace: w, title: n) }

roblevintennis

$svg-container-namespace: '.svg-container';

//Give 'em' 1:1 responsive container by default
#{$svg-container-namespace} {
  display: inline-block;
  position: relative;
  height: 0;
  width: 100%;
  padding: 0;
  //Default for 1:1 aspect ratio