Last active
September 7, 2017 14:49
-
-
Save egoens/3543f7f919d2b00f8d5e82859c82789e to your computer and use it in GitHub Desktop.
Create a new ReactJS Prototype (Storybook + Styled Components)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Creates a new `create-react-app` prototype in the current directory | |
# this is a very basic installation whose major purpose is creating | |
# a storybook (http://getstorybook.io) for quick component creation | |
# and iteration. These components are intended to be styled with | |
# `styled-components` (https://github.com/styled-components/styled-components) | |
# | |
# usage: | |
# ruby create_prototype.rb | |
# | |
# map as an alias in your environment file (ex: ~/.zshrc) to run from any directory | |
# alias create_react_prototype="ruby ~/create_react_prototype.rb" | |
# | |
# used to copy default files to prototype dir | |
require 'fileutils' | |
puts "Name of project: (default: prototype)" | |
user_input = gets.chomp | |
name = user_input.empty? ? 'prototype' : user_input | |
# text coloring for feedback | |
def colorize(text, color_code) | |
"\e[#{color_code}m#{text}\e[0m" | |
end | |
def red(text) | |
colorize(text, 31) | |
end | |
def green(text) | |
colorize(text, 32) | |
end | |
# git installation | |
def install_git | |
# add git repo | |
`git init` | |
# symlink pre-commit script | |
`ln -s ../../pre-commit.sh .git/hooks/pre-commit` | |
end | |
unless File.directory?(name) | |
# create new directory | |
Dir.mkdir name | |
# create the react app | |
puts red('Creating "' + name + '" react app') | |
`create-react-app #{name}` | |
# change to new directory | |
Dir.chdir name | |
puts red('Getting storybook & packages (styled-components & color-js)') | |
`getstorybook` | |
# copy prototype default files | |
FileUtils.cp_r '/Users/egoens/prototype-defaults/.', '.' | |
# add git repo | |
install_git | |
# install packages | |
`yarn` | |
puts red('Opening in editor') | |
`atom .` | |
puts green("Done! Here are the next steps:\ncd " + name + "\nnpm run storybook\nIMPORTANT! Don't forget to change the release & delete prototype url paths in package.json") | |
else | |
puts red("Directory already exists. Try another name or delete the existing folder and try again.") | |
end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment