How about adding a util in order to visually debug components ?

[DecampsRenan]

Sometimes I need to see (this is important) what place take a component, where it is and see some data attached to it

Usually I do that with a bg: red or by adding some borders, but it is tedious

So I created a small util which do that for us : debugComponent().

The usage is simple:

<MyComponentIWantToDebug {...debugComponent()} >
...
</MyComponent>

And it will render like this by default:

We have some options we can tweak to show infos if needed:

const externalStateIWantToDisplay = ...

<MyComponentIWantToDebug 
  {...debugComponent({
    label: `MyComponent - ${externalStateIWantToDisplay}`
    color: 'red' // I can use chakra colors here (like the variant in some components)
    hideLabel: false   // I can set t to false to hide the label and only have colored borders
  )}
>
...
</MyComponent>

Which will render like this:

And without the label:

Let me know if you find it usefull to add or if it is really specific in my case ^^

The utils is implemented like this:

export const debugComponent = ({
  label = 'DEBUG',
  color = 'green',
  hideLabel = false,
}: {
  label?: string;
  color?: string;
  hideLabel?: boolean;
} = {}): HTMLChakraProps<'div'> => {
  return {
    border: '1px solid',
    borderColor: `${color}.500`,
    position: 'relative',
    _after: hideLabel
      ? undefined
      : {
          zIndex: 2,
          content: `"${label}"`,
          position: 'absolute',
          left: 0,
          bottom: 0,
          fontSize: 'xs',
          px: 2,
          py: 0.5,
          color: `${color}.600`,
          backgroundColor: `${color}.100`,
          borderRadius: '0 5px 0 0',
          boxShadow: '0 0 8px rgba(0, 0, 0, .2), 0 0 3px rgba(0, 0, 0, .4)',
        },
  };
};

Things to improve

• I think border could cause some unwanted behaviors by adding a 1px gap around your component, depending on how you styled it
• Same for the position that could break some layouts
• Types could be better; we could infer colors from Chakra themes for example
• Maybe we can rename colors to variant to better match chakra naming

[yoannfleurydev]

Hi @DecampsRenan , I love the idea! Do you mind opening a PR?

On the things to improve, it could be great to make it work only with NODE_ENV === 'development'

[DecampsRenan]

Sure, I will !

Yes you're right about the NODE_ENV, I will add it 👍

[DecampsRenan]

Closed, see why here: #400

TLDR: we don't use this utility anymore, and don't want to maintain something we don't use :)