appsmithorg/appsmith

[Enhancement] Improve StyledComponents theme Autocomplete for React Client Code

Open

#6,843 opened on Aug 24, 2021

View on GitHub
 (21 comments) (0 reactions) (1 assignee)TypeScript (4,508 forks)batch import
FrontendGood First IssueTaskhacktoberfest

Repository metrics

Stars
 (39,454 stars)
PR merge metrics
 (Avg merge 5d 23h) (32 merged PRs in 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

  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.

Contributor guide

Research direction
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.
Tech stack
typescriptreact
Domain
frontenddeveloper experience
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
TypeScriptstyled componentsReactappsmith theme structure
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65