script para automatizar criação de componentes.

generator.sh

#! /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' 

Script para gerar seus componentes.

Obs: exemplo com reactjs!

primeiro crie o arquivo <nome-do-seu-script>.sh onde preferir, nesse exemplo uso uma pasta helpers na raiz do projeto.

ex: helpers/<nome-do-seu-script>.sh

adicione em seu package.json o comando para executar seu script.

"create:elem": "bash ./helpers/create-component.sh ./src/components/elements",

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:

  yarn create:elem <nome-do-componente>