appsmithorg/appsmith
[Enhancement] Improve StyledComponents theme Autocomplete for React Client Code
Ouverte
#6 843 ouverte le 24 août 2021
FrontendGood First IssueTaskhacktoberfest
Métriques du dépôt
- Stars
- (39 454 étoiles)
- Métriques de merge PR
- (Métriques PR en attente)
Description
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
- To see predictions when referring to theme objects value :
Example
`props.theme.colors.dropdown.hea`
-- header
-- heading
- 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.