openedx / openedx/frontend-app-authoring
Review and consolidate components
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 17
- Forks
- 218
- Avg merge
- 9d 20h
- Merged PRs (30d)
- 20
Description
This repo has three sets of reusable "generic" components:
These components have a bunch of issues:
-
Redundancy with each other. Some examples are listed here but there are more. These should either be consolidated or one of them renamed to clarify the difference.
AlertErrorandErrorAlertseem very similar.PromptIfDirtyandusePromptIfDirtyare identical except one is a hook. We don't need both, or the component could be simplified to wrap the hook.CodeEditorandCodeEditorFileInputandFileInput- more; this isn't a complete list
-
Some things are "temporary" workarounds for Paragon bugs that should no longer be needed
SelectableBoxshould be replaced with the upstream Paragon version. (see old explanation why this happened)src/generic/NewsstandIcon.tsx
-
It's unclear why some of them exist or how they should be used, like this repo's own version of
Button. A style guide page or storybook type resource should explain all the reusable studio widgets, and the code should have JSDoc comments with a clear justification for each one. -
Each part of this MFE - course outline, unit page, advanced settings, pages & resources, libraries, taxonomy editor, editor modals - has a totally different look and feel. We should use a library of standard Studio UX patterns & components for a more consistent look & feel.
- Here's how a unit looks on the course outline:
- Here's how the same unit looks in the search modal:
- Here's how a unit looks in the library:
- Here's how a unit looks on the course outline:
-
Some things, if they're that useful, should perhaps be moved to upstream Paragon or an Open edX component library ??
This is a large umbrella, so create sub-issues as needed.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by inventorying src/generic, src/editors/sharedComponents, and src/files-and-videos/generic, comparing the listed AlertError, PromptIfDirty, CodeEditor, FileInput, SelectableBox, NewsstandIcon, and Button entries. Review their usage and the Paragon replacement before splitting this umbrella into focused sub-issues. Done should be defined by the resulting sub-issues: consolidated or clearly renamed components, documented reusable widgets, and consistent Studio patterns.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- design, frontend
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100