openedx / openedx/frontend-app-authoring

Review and consolidate components

Open
#2,697 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

epic
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:

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

  2. Some things are "temporary" workarounds for Paragon bugs that should no longer be needed

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

  4. 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:
      Image
    • Here's how the same unit looks in the search modal:
      Image
    • Here's how a unit looks in the library:
      Image
  5. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.