TransWikia.com

naming convention for atomic design

Code Review Asked by iRohitBhatia on January 23, 2021

please let me know if this question doesn’t meet community standard for code review (I will delete it)

Hey, I am probably terrible in naming files, functions etc.

We follow atomic design principle. More here

I have a react app where we put small components like button, label etc and call it atoms.

In that I have made loading and Error component responsible for displaying loading bar and Error alert respectively.

Then I created a molecule status which contains both these components

// Reports current status of the application
// For loading display loading bar
// for Error shows, error component
import React from 'react'
import Loading from 'components/atoms/loading'
import Error from 'components/atoms/ErrorAlert'
import { MoleculesStatus } from '@types'
import _ from 'lodash'

export default function Status({ projects }: MoleculesStatus) {
  const loading = _.get(projects, 'loading')
  const error = _.get(projects, 'error')
  return (
    <>
      <Loading loading={loading} />
      <Error error={error} />
    </>
  )
}

In the PR, I have been asked to search about atomic design naming convention and write more understandable naming. Can someone help me in understanding, what’s wrong with my naming as per atomic design and what naming would be more appropriate?

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP