appsmithorg/appsmith

[Enhancement] Improve StyledComponents theme Autocomplete for React Client Code

Open

Aperta il 24 ago 2021

Vedi su GitHub
 (21 commenti) (0 reazioni) (1 assegnatario)TypeScript (39.454 star) (4508 fork)batch import
FrontendGood First IssueTaskhacktoberfest

Descrizione

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
  1. 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.

Guida contributor

Tech stack
typescriptreact
Dominio
frontenddeveloper experience
Tipo issue
feature
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
half day
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
active
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
clear
Prerequisiti
TypeScriptstyled componentsReactappsmith theme structure
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
65
Direzione di ricerca
Investigate the current theme type definition in app/client/src/constants/DefaultTheme.tsx (line 345). Understand how styled components uses the theme. Explore solutions to generate a proper Colors type union from the theme object values, possibly using TypeScript's keyof and typeof. Check existing comments for additional context. The goal is to enable autocomplete and type checking for theme property access.