Last active
May 6, 2021 15:04
-
-
Save jonataspinto/3f882234b3197fa1c8209d080516c05b to your computer and use it in GitHub Desktop.
script para automatizar criação de componentes.
This file contains 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
#! /bin/bash | |
capitalize() { | |
IFS="-" | |
words=($name) | |
output="" | |
for word in "${words[@]}"; do | |
# add capitalized 1st letter | |
output+="$(tr '[:lower:]' '[:upper:]' <<<"${word:0:1}")" | |
# add lowercase version of rest of word | |
output+="$(tr '[:upper:]' '[:lower:]' <<<"${word:1}")" | |
done | |
unset IFS | |
capitalizeName=$output | |
} | |
camelCase() { | |
IFS="-" | |
words=($name) | |
output="" | |
for word in "${words[@]}"; do | |
if [ ${words[0]} == $word ] | |
then | |
output+="$(tr '[:upper:]' '[:lower:]' <<<"${word}")" | |
else | |
output+="$(tr '[:lower:]' '[:upper:]' <<<"${word:0:1}")" | |
output+="$(tr '[:upper:]' '[:lower:]' <<<"${word:1}")" | |
fi | |
done | |
unset IFS | |
camelCase=$output | |
} | |
clear | |
path=$1 | |
name=$2 | |
capitalize | |
camelCase | |
echo -ne '[ ] creating component... \r' | |
mkdir $path/$capitalizeName | |
echo -ne '[### ] created folder! \r' | |
sleep 0.5 | |
touch $path/$capitalizeName/index.js | |
cat > $path/$capitalizeName/index.js <<EOF | |
import $capitalizeName from './$capitalizeName'; | |
export default $capitalizeName; | |
EOF | |
echo -ne '[###### ] created index! \r' | |
sleep 0.5 | |
touch $path/$capitalizeName/$capitalizeName.js | |
cat > $path/$capitalizeName/$capitalizeName.js <<EOF | |
import React from 'react'; | |
import PropTypes from 'prop-types'; | |
import * as S from './$capitalizeName.styled'; | |
const $capitalizeName = () => { | |
return (<S.$capitalizeName>$capitalizeName</S.$capitalizeName>) | |
}; | |
$capitalizeName.propTypes = {}; | |
export default $capitalizeName; | |
EOF | |
echo -ne '[######### ] created react component! \r' | |
sleep 0.5 | |
touch $path/$capitalizeName/$capitalizeName.stories.js | |
cat > $path/$capitalizeName/$capitalizeName.stories.js <<EOF | |
import React from 'react'; | |
import { storiesOf } from '@storybook/react'; | |
import $capitalizeName from './$capitalizeName'; | |
storiesOf('$capitalizeName', module) | |
.add('Normal', () => <$capitalizeName />); | |
EOF | |
echo -ne '[############ ] created story! \r' | |
sleep 0.5 | |
touch $path/$capitalizeName/$capitalizeName.styled.js | |
cat > $path/$capitalizeName/$capitalizeName.styled.js <<EOF | |
import styled from 'styled-components'; | |
const $capitalizeName = styled.div | |
export { $capitalizeName }; | |
EOF | |
echo -ne '[################## ] created styles! \r' | |
sleep 0.5 | |
echo -ne '[#####################] created component! \r' | |
sleep 0.5 | |
echo -ne '\n' |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Script para gerar seus componentes.
primeiro crie o arquivo
<nome-do-seu-script>.sh
onde preferir, nesse exemplo uso uma pasta helpers na raiz do projeto.adicione em seu package.json o comando para executar seu script.
a primenira parte é o comando a ser executado, a segunda o caminho para o script que sera executado e a terceira onde sera salvo o componente gerado.
obs: o caminho ./src/components/elements onde ficara o componente tem que ser criado antes
exemplo de execução: