.createreactdirectory.sh

function echo_args() {
    echo "DEFAULTEXT $DEFAULTEXTENSION"
    echo "DEFAULTAUTHOR $DEFAULTAUTHOR"
    echo "DEFAULTVERSION $DEFAULTVERSION"
    echo "DEFAULTVERSION $DEFAULTFALSE"
    echo "username $username"
    echo "version $version"
    echo "test $test"
    echo "storybook $storybook"
    echo "extensionflag $extensionflag"
    echo "component $component"
    echo "description $description"
    echo "utilsfile $utilsfile"
    echo "createstorybook $createstorybook"
    echo "createtest $createtest"
    echo "DEFAULTDESCRIPTION $DEFAULTDESCRIPTION"
    echo "componentdesc $componentdesc"
    echo "extension $extension"
    echo "author $author"
    echo "versioncontrol $versioncontrol"
}

function printCRDHelp() {
    echo "Create React Directory
    JR McCann
    "
    echo "Version 1 - 6/2023"
    echo "
    The purpose of this script is to help React developers in quickly scaffolding out a React component directory
    with assigned module.scss, index, and component files complete with JSDocs, PropTypes, and a working Storybook
    file if desired. Optional files include a test as well as a utils.

    This helps reduce common errors such as Component typos, misplacing JSDocs, and forgetting to scaffold PropTypes.

    Open source, change as desired.
    "
    echo "
    Available Flags:
    n:) Component Name - Required. The component to generate.
    a:) JSDoc Author as the argument.
    v:) JSDoc Version Control number as the argument.
    x:) Extension as argument (suggested: [js [as default], ts, jsx, tsx] - Will also apply to the test file if generated as -n.test.-x.)
    d:) The JSDoc description of the component as the argument.
    h) The help directory (this).
    t) Add flag to create -n.test.-x file.
    s) Add flag to create -n.stories.jsx file.
    u) Add flag to create -n.utils.-x file.
    "
    echo "\
    In Depth:\

    i.e.:
    crd -n TestComponent -a 'johnrobertmcc john.robert.mcc@gmail.com' -v 2.0.0 -x ts -d 'A component used for testing.' -tsu

        Will generate a directory with:
            ├── index.ts
            ├── TestComponent.module.scss
            ├── TestComponent.stories.jsx
            ├── TestComponent.test.ts
            ├── TestComponent.ts
            └── TestComponent.utils.ts

        And the following JSDoc in TestComponent.ts:
            /**
            * A component used for testing.
            *
            * @author  johnrobertmcc john.robert.mcc@gmail.com
            * @since   $(date +'%m/%d/%Y')
            * @version 2.0.0
            * @param   {object}  props           The component destructured as props.
            * @param   {string}  props.component The name of the component.
            * @return  {Element}                 The TestComponent component.
            */
    "
    echo "\
    Default Values:\

    The only require flag is -n, to give the component and directory name.

    i.e.:
    crd -n AnotherTest
            Will generate a directory with:
                ├── AnotherTest.js
                ├── AnotherTest.module.scss
                └── index.js

            And the following JSDoc in AnotherTest.js:
                /**
                * Renders the AnotherTest Component.
                *
                * @author  johnrobertmcc
                * @since   $(date +'%m/%d/%Y')
                * @version 1.0.0
                * @param   {object}  props           The component destructured as props.
                * @param   {string}  props.component The name of the component.
                * @return  {Element}                 The AnotherTest component.
                */
    "
}

function crd() {
    declare component=0
    export component
    declare DEFAULTEXTENSION='js'
    declare DEFAULTAUTHOR="johnrobertmcc"
    declare DEFAULTVERSION="1.0.0"
    declare DEFAULTFALSE=0
    export DEFAULTFALSE
    declare componentgiven=0
    declare utilsfile=0
    while getopts "a:v:x:n:d:htsu" option; do
        case $option in
        h)
            printCRDHelp
            return
            ;;
        a)
            username=${OPTARG}
            ;;
        v)
            version=${OPTARG}
            ;;
        t)
            test=1
            ;;
        s)
            storybook=1
            ;;
        x)
            extensionflag=${OPTARG}
            ;;
        n)
            componentgiven=1
            component=${OPTARG}
            ;;
        d)
            description=${OPTARG}
            ;;
        u)
            utilsfile=1
            ;;
        ?)
            echo "Invalid argument!"
            return
            ;;
        esac
    done

    local createstorybook="${storybook:-$DEFAULTFALSE}"
    local createtest="${test:-$DEFAULTFALSE}"
    local DEFAULTDESCRIPTION="Renders the $component Component."
    local componentdesc="${description:-$DEFAULTDESCRIPTION}"
    local extension="${extensionflag:-$DEFAULTEXTENSION}"
    local author="${username:-$DEFAULTAUTHOR}"
    local versioncontrol="${version:-$DEFAULTVERSION}"

    if [ $componentgiven -eq $DEFAULTFALSE ]; then
        echo "No Component name given! $componentgiven"
        echo "crd -h for help."
        return
    else
        echo "Creating component directory $component/"
        echo "Author: $author"
        echo "Version: $versioncontrol"
        echo "Description: $componentdesc"
    fi
    mkdir $component
    cd $component

    if [ $utilsfile -ne $DEFAULTFALSE ]; then
        touch $component.utils.$extension
        echo "Utils file created."
    fi

    touch $component.$extension
    touch $component.module.scss
    touch index.$extension

    if [ $createstorybook -ne $DEFAULTFALSE ]; then
        echo "Storybook generated."
        createStorybook $component
    fi

    if [ $createtest -ne $DEFAULTFALSE ]; then
        echo "Test file generated."
        createTest $component $extension
    fi

    echo "export {default} from './$component.$extension';" >>index.$extension
    echo "import PropTypes from 'prop-types';" >>$component.$extension
    echo "import styles from './$component.module.scss';" >>$component.$extension
    echo "/**" >>$component.$extension
    echo "* $componentdesc" >>$component.$extension
    echo "*" >>$component.$extension
    echo "* @author  $author" >>$component.$extension
    echo "* @since   $(date +'%m/%d/%Y')" >>$component.$extension
    echo "* @version $versioncontrol" >>$component.$extension
    echo "* @param   {object}  props           The component destructured as props." >>$component.$extension
    echo "* @param   {string}  props.component The name of the component." >>$component.$extension
    echo "* @return  {Element}                 The $component component." >>$component.$extension
    echo "*/" >>$component.$extension
    echo "export default function $component({component}) {" >>$component.$extension
    echo "  return <p className={styles.string}>{component} component</p>;" >>$component.$extension
    echo "}" >>$component.$extension
    echo "$component.propTypes = {" >>$component.$extension
    echo "component: PropTypes.string" >>$component.$extension
    echo "};" >>$component.$extension
    echo "$component.defaultProps = {" >>$component.$extension
    echo "component: '$component'" >>$component.$extension
    echo "};" >>$component.$extension
    echo ".string{" >>$component.module.scss
    echo "  font-weight: 900;" >>$component.module.scss
    echo "}" >>$component.module.scss
    component=$component
    componentgiven=$DEFAULTFALSE
    cd ../
}

function createStorybook() {
    touch $1.stories.jsx

    echo "import $1 from './$1';" >>$1.stories.jsx
    echo "export default {" >>$1.stories.jsx
    echo "  title: 'components/$1'," >>$1.stories.jsx
    echo "  component: $1," >>$1.stories.jsx
    echo "};" >>$1.stories.jsx
    echo "const Template = (args) => <$1 {...args} />;" >>$1.stories.jsx
    echo "export const Default = Template.bind({});" >>$1.stories.jsx
    echo "Default.args = {};" >>$1.stories.jsx
}

function createTest() {
    touch $1.test.$2
}