# CLI Usage: `bash new-elem.sh {ComponentName} {SubDirectory}`
# NPM Usage: `npm run elem -- {ComponentName} {SubDirectory}`

# Args & Variables
# 
elem=${1:-NewElement}
type=${2:-component}
root=${3:-src/ui}
if [[ "${type: -1}" != 's' ]]; then
  type=$type\s
fi

# Configure Paths & File Names
#
path=$root/$type/$elem

JSX=index.js
TST=index.test.js
MDX=readme.md
CSS=style.scss

# Configure CSS Imports
# (modules for $type==composition only)
#
if [[ $type = "compositions" ]]; then
  CSS=style.module.scss
  cssImport="import classes from './$CSS';"
  cssClasses="className={classes.$elem}"
else
  cssImport="import './$CSS';";
  cssClasses="className=\"$elem\""
fi

# Create File Structure
# 
rm -rf $path # clean up
mkdir -p $path
touch $path/{$JSX,$TST,$CSS,$MDX}

# Append Element Import
#
echo "export { default as $elem } from './$elem';" >> "$root/$type/index.js"

# Create React Boilerplate
# 
cat > "$path/$JSX" <<- EOM
$cssImport

import React from 'react';
import PropTypes from 'prop-types';

const $elem = props => <span $cssClasses>{props.children}</span>;

$elem.propTypes = {
  children: PropTypes.array,
};

export default $elem;
EOM

# Create SCSS Boilerplate
# 
cat > "$path/$CSS" <<- EOM
.$elem {
  // write BEM styles here...
  color: red;
}
EOM

# Create Docs Boilerplate
# 
cat > "$path/$MDX" <<- EOM
<!--
PLEASE ADD USAGE DOCS AND EXAMPLES FOR THE \`<$elem/>\` ELEMENT.
-->

\`\`\`jsx
<$elem className="$elem">
  Hello, world.
</$elem>
\`\`\`
EOM

# Create Test Boilerplate
# 
cat > "$path/$TST" <<- EOM
import React from 'react';
import { shallow } from 'enzyme';

import $elem from '.';

describe('$elem', () => {
  it('displays a <$elem> element', () => {
    const node = shallow(<$elem>Hello, world.</$elem>);
    expect(node.hasClass('$elem')).toBe(true);
  });
});
EOM

# Log Paths
# 
echo "CREATED <$elem/> ELEMENT";
echo "------------------------";
echo "Path: $path/";
echo "JSX:  $path/$JSX";
echo "Docs: $path/$MDX";
echo "";