etr2460 opened a new issue #16553:
URL: https://github.com/apache/superset/issues/16553
The following is a proposal for high level frontend style guidelines,
distilled from the many past SiPs and proposals. These high level guidelines
will be the cover page for Superset's Frontend Style Guide, and we'll propose
further Dos and Don'ts that conform to these guidelines and provide more
actionable details for contributors. This proposal will be posted to the dev@
email list for lazy consensus before being migrated to the Superset Wiki.
---
# Proposed Superset Frontend Style Guidelines
This is list of statements that describe how we do frontend development in
Superset. While they might not be 100% true for all files in the repo, they
represent the gold standard we strive towards for frontend quality and style.
- We develop using TypeScript.
- We use React for building components, and Redux to manage app/global state.
- We prefer functional components to class components, and use hooks for
local component state.
- We use Ant Design components from our component library whenever possible,
only building our own custom components when it's required.
- We use @emotion to provide styling for our components.
- We co-locate styling within component files.
- We use Jest for unit tests, React Testing Library for component tests, and
Cypress for end to end tests.
- We add tests for every new component or file added to the frontend.
- We organize our repo so similar files live near each other, and tests are
co-located with the files they test.
- We prefer small, easily testable files and components.
- We use es-lint and Prettier to automatically fix lint errors and format
the code.
- We do not debate code formatting style in PRs, instead relying on
automated tooling to enforce it.
- If there’s not a linting rule, we don’t have a rule!
## References
### [[SIP-36] Proposal for standardizing use of
TypeScript](https://github.com/apache/superset/issues/9101)
This SIP formally adopted TypeScript as the main language for Superset
frontend, started migration work for JavaScript => TypeScript, and added the
requirement that all new frontend JavaScript should be written in TypeScript
instead.
### [[SIP-37] Proposal to implement CSS-in-JS using
Emotion](https://github.com/apache/superset/issues/9123)
This SIP formally adopted Emotion as the method for adding styling to
components, describes alternatives considered, and why migration is valuable.
### [[SIP-48] Using Ant Design as our primary component
library](https://github.com/apache/superset/issues/10254)
This SIP replaced Bootstrap with Ant Design as our main component library,
and describes how they should interact with style overrides provided by Emotion.
### [[SIP-56] Adopt React Testing Library for testing React
components](https://github.com/apache/superset/issues/11688)
This SIP replaced Enzyme with React Testing Library for testing React
components, primarily because RTL is the most used testing framework and fully
supports the newest React features.
### [[SIP-61] Improve the organization of front-end
folders](https://github.com/apache/superset/issues/13632)
This SIP describes how we organize our frontend folders, including how we
should group different types of modules and components, where tests should be
located, and how files should be named.
to: @rusackas @michael-s-molina @ktmud @graceguo-supercat @eschutho
@suddjian @nytai @pkdotson @betodealmeida and anyone else who works on the
frontend that I may have missed!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
