Document our coding conventions to ease contributing and consistency

[eirikbacker]

To make it easier to contribute and for ourselves to have a consistent codebase, we should document some of our coding conventions.

• Always provide ref through forwardRef (unless exposing a Context)
• Add all HTML props through React.{TagName}HTMLAttributes<HTML{TagName}Element>
• Add the HTML attributes on the outermost element
• Use useId() when if needed for accessibility
• Wrap :hover in @media(hover: hover) and (pointer: fine) to avoid :hover on touch-devices
• Make componund components instead of many props
• Use lowercase boolean props (i.e. hidden instead of isHidden)
• Style focus-state with :focus-visible if the element can get focus
• Use ReactNode type for props instead of string (unless it has to be string)
• Always check props naming conventions on other components for consistency
• Always run DOM APIs inside useEffect to ensure server compatibility
• Avoid custom use of native HTML attributes (i.e. className should always work as expected)
• Avoid invalid states (i.e. both successText and errorText at the same time)
• Avoid creating multiple components when they can be just variant or compound with same functionality
• Use Component as name of the outermost HTML element rendering the component
• Use Component.Context as a wrapper (and Component.Trigger) if a component has context and trigger
• Use Context as name of internal, non-exposed Context
• Import specific React typescript types, instead of depending on global React.*
• Use Component.List when listing multiple items