gruppjo

Guides

• http://javascriptplayground.com/blog/2015/03/node-command-line-tool/
• https://developer.atlassian.com/blog/2015/11/scripting-with-node/

Examples

• gulp - https://github.com/gulpjs/gulp-cli/blob/master/index.js

Libs

• meow - https://github.com/sindresorhus/meow
• js-liftoff - https://github.com/js-cli/js-liftoff

gruppjo

// Coding Horrors https://circleci.com/blog/dev-horror-stories-part-ii/

// Cool retro term https://github.com/Swordfish90/cool-retro-term

// requires npm 5.2 or newer

// lolcatjs // rainbow colors in your terminal

gruppjo

// npm-check
// check dependency status of your project
// https://www.npmjs.com/package/npm-check
npx npm-check

// json-server
https://github.com/typicode/json-server

gruppjo

// map a components this.props.looks to a joined string of css module styles `styles[look1] styles[look2] ...`
// or allows to pass in css class names from parent
// <Component looks="isYellow"></Component>
// CSS: .isYellow { }
export function mapLooksToStyles(looks = '', styles = []) {
  let customStyles = (looks && looks.trim().split(' '))
      || [];
  return customStyles.map(look => styles[look] || look).join(' ');
}

gruppjo

{
  // Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  //  "prefix": "log",
  //  "body": [
  //    "console.log('$1');",

gruppjo

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

gruppjo

/* V1.2 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/b5c6389b1ef71369e815c95cb1b33813 */

$animationDuration: 300ms;
$animationDurationMs: 300;
$animationDurationShort: 150ms;
$animationDurationShortMs: 150;
$animationDurationLong: 30000ms;
$animationDurationLongMs: 30000;
$animationFunction: ease;

gruppjo

/* V1.0 based on Jonathan's Gist */
/* https://gist.github.com/gruppjo/3e1c33537c1f3613f04fea87dac16a36 */

import React from 'react';

import styles from 'styles-imports/shared.scss';

import { CSSTransition } from 'react-transition-group';

/**

gruppjo

{
  // Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  //  "prefix": "log",
  //  "body": [
  //    "console.log('$1');",

gruppjo

@import "shared.scss";

// each component in storybook is wrapped inside of .root
#root {
  // give 100% so we can have an unbroken chain of height: 100%;
  // https://stackoverflow.com/questions/7049875/why-doesnt-height-100-work-to-expand-divs-to-the-screen-height
  height: 100%;
}

/* STORY BOOK SPECIFIC GLOBAL STYLES */