chore: add a new eslint rule prevent using margin

[koji]

Overview

add a new eslint rule prevent using margin
The new rules will show warnings when you use margins (inline & css-in-js).

why do we need this?

when we work on responsiveness, margins make things difficult.

https://mxstbr.com/thoughts/margin
https://www.joshwcomeau.com/css/rules-of-margin-collapse/

In addition, generally the design team doesn't use margins since they use Figma's Auto layout that uses padding and gap to create a layout.

bad cases

# inline case1
<StyledText marginLeft={SPACING.spacing4}>{'test'}</StyledText>

# inline case2
<Flex style={{ marginBottom: '1rem' }}>
  <StyledText>{'test'}</StyledText>
  <StyledText>{'test'}</StyledText>
</Flex>

# css-in-js case
const BAD_STYLE = css`
  margin-top: 1rem;
  margin-left: 1rem;
`

VSCode
https://opentrons.slack.com/archives/CSCLVUW3C/p1733182307004269

This pr cannot detect the following case

<Flex css={css`margin: ${SPACING.spacing8}`}></Flex>

I think we should avoid using the above implementation without any specific reason since that implementation makes code messy.

related thread
https://opentrons.slack.com/archives/CSCLVUW3C/p1733347927634689

close AUTH-1141

Test Plan and Hands on Testing

Changelog

• add js files for the new custom eslint rules

Review requests

Risk assessment

low

[sfoster1]

Let's do it!