shilman

Storybook Controls w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Controls. It's also an introduction to Storybook Args, which is a major update to Storybook's Component Story Format (CSF): a more portable and ergonomic way to write stories.

This walkthrough gives you:

• Auto-generated controls in the addons panel
• Auto-generated controls in your Docs
• Auto-generated actions for event logging
• An introduction to the future of CSF

senthilmpro

'use strict'

const Fs = require('fs')  
const Path = require('path')  
const Axios = require('axios')

async function downloadImage () {

  const url = 'https://unsplash.com/photos/AaEQmoufHLk/download?force=true'
  const path = Path.resolve(__dirname, 'images', 'code1.jpg')

samundrak

  <DragDropContext onDragEnd={this.onDragEnd}>
            <Droppable droppableId={mover.id}>
              {(provided, snapshot) => (
                <div ref={provided.innerRef} style={getListStyle(snapshot.isDraggingOver)}>
                  <List itemLayout="horizontal">
                    {mover.list.map((item, index) => {
                      // test
                      if (item.format === 'folder') {
                        return (
                          <List.Item key={item.id}>

ButuzGOL

Hero
COEFFICIENTS = {
damageMin: 2,
damageMax: 3,

accuracy: 2,
dodge: 2.5,
devastate: 2.5,
durability: 2,

mwrouse

function ShowAutocompletion(obj) { 
    // Disable default autocompletion for javascript
    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ noLib: true  });
  
    // Helper function to return the monaco completion item type of a thing
    function getType(thing, isMember) {
      isMember =  (isMember == undefined) ? (typeof isMember == "boolean") ? isMember : false : false; // Give isMember a default value of false
    
      switch ((typeof thing).toLowerCase()) { 
        case "object": 

ericallam

import Relay, {
  RootContainer,
  Route
} from 'react-relay'

class SeasonRoute extends Route {
  static paramDefinitions = {};
  
  static queries = {
    currentSeason: () => Relay.QL`query { currentSeason }`,

cem2ran

import React from 'react'
import ReactDOM from 'react-dom'

const Hello = ({name}) => <h1>Hello {name}!</h1>

ReactDOM.render(
  <Hello name={"vjeux"}/>,
  document.body.appendChild(document.createElement("div"))
)

gaearon

import React, { Component } from 'react';
import { createStore, combineReducers, applyMiddleware, bindActionCreators } from 'redux';
import { provide, connect } from 'react-redux';
import thunk from 'redux-thunk';

const AVAILABLE_SUBREDDITS = ['apple', 'pics'];

// ------------
// reducers
// ------------

stephensauceda

/* 
 *    Steps
 * 1. Rename your gulpfile.js to gulpfile.babel.js
 * 2. Add babel to your package.json (npm install -D babel)
 * 3. Start writing ES6 in your gulpfile!
 */
 
 import gulp from 'gulp'; // ES6 imports!
 import sass from 'gulp-sass';
 

jhorneman

Async data loading in Flux

I've been working with Flux a lot recently, and one of the questions I've been struggling with is in which part of the Flux cycle to put my asynchronous data requests.

Here are some different opinions:

The diagram

The famous Flux diagram puts them in the action creators.

The chat example