[Enhancement] Improve StyledComponents theme Autocomplete for React Client Code

[rishabhrathod01]

check the code here - https://github.com/appsmithorg/appsmith/blob/release/app/client/src/constants/DefaultTheme.tsx#L345

Problem

Currently, for generic type value in theme for example colors: any, when we need to add something like
color: ${props.theme.colors.dropdown.header.text}; using styled-components

We do not get an auto-complete prediction for such cases and also if wrote theme objects value reference incorrectly no error is generated.

Expected

1. To see predictions when referring to theme objects value :

Example

`props.theme.colors.dropdown.hea`
                          -- header 
                          -- heading

2. See error when incorrectly used theme object

Example

const theme = {
  colors: {
      primary: "#FFFFFF"
  }
};

// demo component
const Wrapper = styled.div`
color: ${props => props.theme.colors.incorrectPrimary}; // Should show error - no incorrectPrimary is defined
`

Solution

Ideally, we could generate the Colors type from the union of theme object's colors value & dark and light theme's color values.

[parul5sahoo]

@Rishabh-Rathod @somangshu hey I would like to take up this issue.

[rishabhrathod01]

Greetings @parul5sahoo, thanks for showing interest 🎉 , This is all yours. Assigning this to you now.

Please don't forget to read the Contribution Guidelines. Would appreciate it if you can open a PR within the next 4 days.

[parul5sahoo]

Thanks @Rishabh-Rathod ! Given this issue begins with a [Task] tag should I name the new branch that I commit changes to as "Task/ImproveStyledComponentsthemeAutocomplete" or something of the sort? Or should it begin with "/fix" or "/feature"?

[rishabhrathod01]

@parul5sahoo you can name it

chore/theme-autocomplete-enhancement-6843