Declarations

Component names should follow the NounAdjective (ComponentAdjective) format. Think "what is it, who is it for":

  • "What is it": Pod

  • "Who is it for": Project

  • Result: PodProject (pod-project.tsx)

Additional information about naming components can be found on the Component Architecture page.

Components (PascalCase)
  • function PodProject({}: Props) {...}

Functions (camelCase)
  • function handleClick(...) {}

  • function getProjectStatus(...) {}

// TODO: look into common function naming conventions ("getX", "generateX", "displayX", "convertX")

Variables - immutable constants (UPPER_CASE)
  • const PROJECT_ID = ''

For "testing" variables (fixtures/mock data), prepend FX_:

  • const FX_PROJECTS: TDocBE[] = [...]

Variables - all other variables (camelCase)
  • const docs = [...]

  • let projectStatus = ''

Types/Interfaces (PascalCase)

Component prop types:

  • interface Props {...}

    • main component (props are not exported)

  • interface ComponentProps {...}

    • when main component's props are exported, prepend component name

    • local components (multiple components per file)

Function parameter/argument types (when not typed inline):

  • interface Params {...}

    • main function (params are not exported)

  • interface FunctionParams {...}

    • when main function's params are exported, prepend function name

    • local functions (multiple components per file)

All other types -- start with "T":

  • type TDoc = {...}

  • type TInput = {...}

  • type TProjectStatus = 'x' | 'y' | 'z'

Schemas (camelCase)
  • const schema = z.object(...)

  • const schemaProject = z.object(...)

Last updated