A bash script to scaffold a new React component with associated SCSS module and TypeScript file.

create-component.sh

#!/bin/bash

# This script creates a new React component with the specified name.
# It sets up a directory for the component, a SCSS module with a base class,
# and a TypeScript file for the component that imports the SCSS module.
# The created files follow a predefined template structure.

# The script must be run with one argument: the name of the component.
# Usage example: ./create-component.sh MyComponent

# Check if a component name is provided
if [ "$#" -ne 1 ]; then
  echo "Usage: $0 <ComponentName>"
  exit 1
fi

COMPONENT_NAME=$1
DIRECTORY_NAME=$COMPONENT_NAME

# Create directory
mkdir -p "$DIRECTORY_NAME"

# Create SCSS module file
SCSS_FILE="$DIRECTORY_NAME/$COMPONENT_NAME.module.scss"
cat > "$SCSS_FILE" <<EOF
.base {
  // Nothing yet...
}
EOF

# Create React TypeScript file
TSX_FILE="$DIRECTORY_NAME/$COMPONENT_NAME.tsx"
cat > "$TSX_FILE" <<EOF
import styles from './$COMPONENT_NAME.module.scss'

function $COMPONENT_NAME() {
  return <div className={styles.base}>TODO: $COMPONENT_NAME</div>
}

export default $COMPONENT_NAME
EOF

echo "Component $COMPONENT_NAME created successfully."