WebStorm template for React Components and React CSS Modules. You'll have to enable Live Templates for the END cursor to work.

Component.jsx

import React from 'react';
import PropTypes from "prop-types";
import styles from './${NAME}.module.css';
#set($cssClass = ${StringUtils.removeAndHump(${NAME}, ".")})
#set($cssClass = $cssClass.substring(0,1).toLowerCase() + $cssClass.substring(1))

function ${NAME}(props) {
    return (
        <div className={styles.${cssClass}}>
            #[[$END$]]#
            {props.children}
        </div>
    );
}

${NAME}.propTypes = {
    required: PropTypes.string.isRequired,
    optional: PropTypes.string
}

export default ${NAME}
export {${NAME}}

Component.module.css

#set($cssClass = ${StringUtils.removeAndHump(${NAME}, ".")})
#set($cssClass = $cssClass.substring(0,1).toLowerCase() + $cssClass.substring(1))
.${cssClass} {
  position:relative;#[[$END$]]#
}

Component.tsx

import styles from './${NAME}.module.css';
import React from 'react';
import { classStr, ExtensibleComponentProps } from "@supereffective/shared/core"
#set($cssClass = ${StringUtils.removeAndHump(${NAME}, ".")})
#set($cssClass = $cssClass.substring(0,1).toLowerCase() + $cssClass.substring(1))

export interface ${NAME}Props extends ExtensibleComponentProps {
    #[[$END$]]#
}

export const ${NAME} = ({ as: Component = "div", className, onClick, children, ...rest }: ${NAME}Props) => {
  const handleClick = (event: React.MouseEvent<HTMLDivElement|Element>) => {
    if (onClick) {
      onClick(event.currentTarget)
    }
  }

  const classes = classStr(styles.${cssClass}, className)

  return (
    <Component className={classes} onClick={handleClick} {...rest}>
      {children}
    </Component>
  )
}

utils.ts

import React, { ComponentClass, FunctionComponent } from "react"

export type AnyFunctionComponent = FunctionComponent | ((props: any) => any)

export interface BaseComponentProps {
  className?: string
  onClick?: (event: any) => void
  children?: React.ReactNode

  [key: string]: any
}

export interface ExtensibleComponentProps extends BaseComponentProps {
  as?: ComponentClass | FunctionComponent | keyof JSX.IntrinsicElements
}


type ClassCondition = boolean | string | undefined | null
type ClassArg = string | undefined | null
type ClassArrArg = ClassArg | [ClassCondition, ClassArg, ClassArg?]
export const classStr = (...args: ClassArrArg[]): string => {
  return args
    .map((arg) => {
      if (Array.isArray(arg)) {
        return arg[0] ? arg[1] : arg.length > 2 ? classStr(arg[2]) : undefined
      }
      return arg
    })
  // filter(Boolean) filters out falsy values: false, 0, 0, 0n, "", null, undefined, NaN
    .filter(Boolean)
    .join(" ")
    .trim()
}