appsmithorg/appsmith
[Enhancement] Improve StyledComponents theme Autocomplete for React Client Code
Aberta
#6.843 aberto em 24 de ago. de 2021
FrontendGood First IssueTaskhacktoberfest
Métricas do repositório
- Stars
- (39.454 estrelas)
- Métricas de merge de PR
- (Mesclagem média 6d 14h) (26 fundiu PRs em 30d)
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.