Molecules

Molecules are combinations of two or more atoms that work together to perform a specific user interaction or display a small piece of functionality. Examples include a search box (input + button), a form field (label + input + validation message), or a navigation item (icon + label).

Rules for Molecules

• Combine atoms into a meaningful unit.
• Have a single functional responsibility.
• Remain reusable across multiple features or domains.
• Contain minimal orchestration logic.
• Avoid direct business or domain-specific behavior.
• Expose a clear and predictable API through props.
• Be composed entirely of atoms whenever possible.

Molecule example

import type { CheckListItemInterface } from './CheckListItem.interface'
import { Number, Heading, Paragraph, Icon, CodeSnippet } from '@/components'
import { paragraphDef } from '@/app-types'
import { IconSizes } from '@/components/_types_'

const CheckListItem = ({ testID, item }: CheckListItemInterface) => {
  const __renderText = (text: string, index: number) => {
    return (
      <div key={index} className={'CheckListItem__text'}>
        <Icon icon='success' size={IconSizes.LARGE} />
        <Paragraph content={text} type={paragraphDef.htmlText} />
      </div>
    )
  }

  const __renderCode = (text: string, index: number) => {
    return (
      <div className='CheckListItem__code' key={index}>
        <CodeSnippet code={text} language='shell' showLineNumbers={text.includes('\n')} />
      </div>
    )
  }

  return (
    <div data-testid={testID} className={`CheckListItem`}>
      <div className='CheckListItem__number'>
        <Number num={item.num || 0}></Number>
      </div>
      <div className='CheckListItem__content'>
        <Heading type={'h4'} text={item.title} />
        <Paragraph content={item.description} type={paragraphDef.htmlText} />
        <div className='CheckListItem__actions'>
          {item.steps?.map((action, index) => {
            if (action.type === 'text') return __renderText(action.text, index)
            if (action.type === 'code') return __renderCode(action.text, index)
          })}
        </div>
      </div>
    </div>
  )
}

export default CheckListItem