gitpoint/git-point

Migration to styled-components

Open

#532 opened on Oct 20, 2017

View on GitHub
 (28 comments) (5 reactions) (0 assignees)JavaScript (4,684 stars) (837 forks)batch import
:nail_care: styled-componentsgood for beginnershacktoberfesthelp wantedrefactor

Description

Here's a list based off @andrewda's list for adding unit tests to the app (https://github.com/gitpoint/git-point/issues/518), feel free to add/remove components if you think it's necessary.

For newcomers:

  1. Choose the component you want to style
  2. Comment here which component you'd like to work on
  3. We'll update this list with your name
  4. Make sure to include "before" and "after" screenshots in your submitted PR

Loaders

  • LoadingListItem (@machour - #790)
  • LoadingMembersList (unclaimed)
  • LoadingRepositoryListItem (unclaimed)
  • LoadingRepositoryProfile (unclaimed)
  • LoadingUserListItem (@machour - #791)
  • LoadingModal (@machour - #792)

Components

  • IssueListItem (@josenaranjo - #578)
  • RepositoryProfile (@shmesa22 - PR Pending)

Screens

issue

  • EditIssue (unclaimed)
  • IssueSettings (unclaimed)
  • NewIssue (unclaimed)
  • PullMerge (unclaimed)

repository

  • IssueList (unclaimed)
  • PullDiff (unclaimed)
  • PullList (unclaimed)
  • ReadMe (unclaimed)
  • RepositoryCodeList (unclaimed)
  • RepositoryFile (unclaimed)
  • Repository (@machour - #788)

Done:

  • Auth (@ZahraTee - #702)
  • Login (@machour - #787)
  • Notifications (@ZahraTee - #684)
  • Organization (@ZahraTee - #682)
  • Search (@Arjun-sna - #710)
  • User (@ZahraTee - #683)
  • Badge (@jpls93 – #535)
  • LoadingContainer (@machour - #782)
  • CodeLine (@josenaranjo – #561)
  • CommentInput (@shmesa22 – #596)
  • CommentListItem (@chinesedfan - #723)
  • DiffBlocks (@machour – #692)
  • EntityInfo (@MrLoh - #558)
  • ImageZoom (@MrLoh - #559)
  • InlineLabel (@binkpitch – #544)
  • IssueDescription (@josenaranjo - #563)
  • IssueEventListItem (@josenaranjo - #564)
  • LabelButton (@chinesedfan - #727)
  • LabelListItem (@pdong – #509)
  • Members (@shmesa22 - #606)
  • MentionArea (@binkpitch – #553)
  • NotificationIcon (@pdong – #510)
  • NotificationListItem (@LeoCp - #610)
  • ParallaxScroll (@shmesa22 - #607)
  • RepositoryListItem (@apoeco - #605)
  • RepositorySectionTitle (Useless component, see #730)
  • SectionList (@jamesg1 - #608)
  • StateBadge (@rkpasia - #715)
  • ViewContainer (@pdong – #508)
  • UserListItem (@shmesa22 - #601)
  • UserProfile (@chinesedfan – #724)
  • SearchBarAndroid (can't be migrated)

Contributor guide

Tech stack
reactreact nativejavascript
Domain
mobilefrontend
Issue type
refactor
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React Native basicsstyled components syntax
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
Examine previously migrated components in the 'Done' list, such as Badge (#535) or LoadingContainer (#782), to understand the styling pattern used with styled components. Choose an unclaimed component like EditIssue or IssueSettings from the list. Comment on the issue to claim it. Ensure to follow the existing structure in the codebase, likely in src/components/ or src/screens/. Include before and after screenshots in the PR.