Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

355-refactor: Paragraph component refactor #475

Merged
merged 13 commits into from
Sep 10, 2024
Merged

Conversation

seygorin
Copy link
Collaborator

@seygorin seygorin commented Sep 1, 2024

What type of PR is this? (select all that apply)

  • πŸ• Feature
  • πŸ› Bug Fix
  • 🚧 Breaking Change
  • πŸ§‘β€πŸ’» Code Refactor
  • πŸ“ Documentation Update

Description

Paragraph component refactor
Apply SCSS modules \ cva
Update tests
Removed unused styles and apply new props to the components
Playwright snapshots updated

Related Tickets & Documents

Screenshots, Recordings

Screenshot 2024-09-01 at 14 19 08

Added/updated tests?

  • πŸ‘Œ Yes
  • πŸ™…β€β™‚οΈ No, because they aren't needed
  • πŸ™‹β€β™‚οΈ No, because I need help

[optional] What gif best describes this PR or how it makes you feel?

smiles sloth

Summary by CodeRabbit

  • New Features

    • Enhanced Paragraph component with new props for improved styling and layout control.
    • Introduced new CSS classes for better specificity and clarity in various UI components.
  • Bug Fixes

    • Updated visual testing reports to ensure accurate representation of UI changes.
  • Style

    • Restructured CSS styles across multiple components for improved layout and maintainability.
    • Added new styling rules for the .paragraph class, including responsive font size adjustments and line height standardization.
  • Tests

    • Improved test coverage and clarity for the Paragraph component, ensuring robust functionality.

@seygorin seygorin self-assigned this Sep 1, 2024
@seygorin seygorin changed the title Refactor/355 paragraph comp 355-refactor: Paragraph component refactor Sep 1, 2024
@seygorin seygorin added the draft PR draft label Sep 2, 2024
src/shared/ui/paragraph/paragraph.tsx Outdated Show resolved Hide resolved
src/shared/ui/paragraph/paragraph.test.tsx Outdated Show resolved Hide resolved
src/shared/ui/paragraph/paragraph.module.scss Outdated Show resolved Hide resolved
src/widgets/about-school/ui/about.scss Show resolved Hide resolved
src/shared/ui/paragraph/paragraph.module.scss Outdated Show resolved Hide resolved
src/widgets/alumni/ui/alumni.tsx Outdated Show resolved Hide resolved
src/widgets/communication/ui/communication.tsx Outdated Show resolved Hide resolved
@seygorin seygorin marked this pull request as ready for review September 6, 2024 06:10
Copy link

coderabbitai bot commented Sep 6, 2024

Caution

Review failed

The pull request is closed.

Walkthrough

Walkthrough

The changes involve a comprehensive refactor of the Paragraph component and its associated styles across multiple files. This includes updates to the component's props, the introduction of new styling classes, and enhancements to test cases for better coverage. The modifications aim to improve clarity, maintainability, and flexibility in the UI components while ensuring consistent styling practices.

Changes

Files Change Summary
src/shared/__tests__/visualTesting/report/index.html Updated playwrightReportBase64 variable with a new base64-encoded string for visual testing reports.
src/shared/ui/paragraph/*.scss, src/shared/ui/paragraph/*.tsx Refactored Paragraph component to accept new props and added new styling classes for layout control.
src/widgets/about-home/ui/about.tsx, src/widgets/about-school/ui/about.tsx Replaced Subtitle with Paragraph component for improved semantic structure.
src/widgets/community/ui/community.tsx, src/widgets/contribute/ui/contribute.tsx Updated components to utilize Paragraph instead of Subtitle, enhancing readability.
src/widgets/events/ui/events.tsx, src/widgets/mentors/ui/mentors.tsx Removed Subtitle and replaced with Paragraph, maintaining content while improving structure.
src/widgets/merch/ui/merch.tsx, src/widgets/numbers/ui/numbers.tsx Transitioned from Subtitle to Paragraph, enhancing semantic clarity.
src/widgets/study-with-us/ui/study-with-us.tsx Replaced Subtitle with Paragraph, maintaining the same text content.
src/widgets/contribute/ui/contribute.scss, src/widgets/about-home/ui/about.scss Renamed and adjusted styling for .paragraph classes to improve specificity.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant AboutHome
    participant AboutSchool
    participant Community
    participant Contribute
    participant Events
    participant Mentors
    participant Merch
    participant Numbers
    participant StudyWithUs

    User->>AboutHome: Render About Home Component
    AboutHome->>Paragraph: Use Paragraph Component
    User->>AboutSchool: Render About School Component
    AboutSchool->>Paragraph: Use Paragraph Component
    User->>Community: Render Community Component
    Community->>Paragraph: Use Paragraph Component
    User->>Contribute: Render Contribute Component
    Contribute->>Paragraph: Use Paragraph Component
    User->>Events: Render Events Component
    Events->>Paragraph: Use Paragraph Component
    User->>Mentors: Render Mentors Component
    Mentors->>Paragraph: Use Paragraph Component
    User->>Merch: Render Merch Component
    Merch->>Paragraph: Use Paragraph Component
    User->>Numbers: Render Numbers Component
    Numbers->>Paragraph: Use Paragraph Component
    User->>StudyWithUs: Render Study With Us Component
    StudyWithUs->>Paragraph: Use Paragraph Component
Loading

Assessment against linked issues

Objective Addressed Explanation
Paragraph component has been refactored βœ…

Possibly related issues

Tip

Announcements
  • The review status is no longer posted as a separate comment when there are no actionable or nitpick comments. In such cases, the review status is included in the walkthrough comment.
  • We have updated our review workflow to use the Anthropic's Claude family of models. Please share any feedback in the discussion post on our Discord.
  • Possibly related PRs: Walkthrough comment now includes a list of potentially related PRs to help you recall past context. Please share any feedback in the discussion post on our Discord.
  • Suggested labels: CodeRabbit can now suggest labels by learning from your past PRs in the walkthrough comment. You can also provide custom labeling instructions in the UI or configuration file.
  • Possibly related PRs, automatic label suggestions based on past PRs, learnings, and possibly related issues require data opt-in (enabled by default).

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai generate interesting stats about this repository and render them as a table.
    • @coderabbitai show all the console.log statements in this repository.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@seygorin seygorin removed the draft PR draft label Sep 6, 2024
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

src/shared/ui/paragraph/paragraph.tsx Outdated Show resolved Hide resolved
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Outside diff range, codebase verification and nitpick comments (2)
src/widgets/numbers/ui/numbers.tsx (1)

29-32: Subtitle component is still present in the codebase.

The Subtitle component has not been removed and is still used in various parts of the project. Here are some locations where it is found:

  • src/shared/ui/subtitle/index.ts
  • src/shared/ui/subtitle/subtitle.tsx
  • src/widgets/required/ui/required.tsx
  • src/widgets/main/ui/main.tsx
  • src/widgets/communication/ui/communication.tsx
  • src/widgets/course-main/course-main.tsx
  • dev-data/training-program.data.tsx

Please review these instances to determine if any action is needed.

Analysis chain

Verify removal of Subtitle component.

Ensure that the Subtitle component is no longer used elsewhere in the project that might require attention.

Run the following script to verify the removal of the Subtitle component:

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the removal of the Subtitle component.

# Test: Search for any remaining imports or usage of the Subtitle component.
rg --type typescript -A 5 $'Subtitle'

Length of output: 71


Script:

#!/bin/bash
# Description: Verify the removal of the Subtitle component.

# Test: Search for any remaining imports or usage of the Subtitle component in TypeScript files.
rg 'Subtitle' --glob '*.ts' --glob '*.tsx' -A 5

Length of output: 8248

src/widgets/community/ui/community.tsx (1)

68-75: Subtitle Component Still in Use Across the Codebase

The Subtitle component is still being imported and used in several files. Please review the following locations to ensure that its usage aligns with the intended design changes:

  • src/widgets/required/ui/required.tsx
  • src/widgets/main/ui/main.tsx
  • src/widgets/course-main/course-main.tsx
  • src/widgets/communication/ui/communication.tsx
  • dev-data/training-program.data.tsx

Consider revisiting these files to determine if the Subtitle component should be removed or updated.

Analysis chain

Verify removal of Subtitle component.

Ensure that the Subtitle component is no longer used elsewhere in the project that might require attention.

Run the following script to verify the removal of the Subtitle component:

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the removal of the Subtitle component.

# Test: Search for any remaining imports or usage of the Subtitle component.
rg --type typescript -A 5 $'Subtitle'

Length of output: 71


Script:

#!/bin/bash
# Description: Verify the removal of the Subtitle component.

# Test: Search for any remaining imports or usage of the Subtitle component in TypeScript files.
rg --glob '*.ts' --glob '*.tsx' -A 5 'Subtitle'

Length of output: 8248

src/shared/ui/paragraph/paragraph.module.scss Outdated Show resolved Hide resolved
src/shared/ui/paragraph/paragraph.module.scss Show resolved Hide resolved
src/widgets/study-path/ui/study-path.scss Outdated Show resolved Hide resolved
src/widgets/study-path/ui/study-path.tsx Outdated Show resolved Hide resolved
Copy link

github-actions bot commented Sep 9, 2024

Lighthouse Report:

  • Performance: 94 / 100
  • Accessibility: 94 / 100
  • Best Practices: 100 / 100
  • SEO: 100 / 100

View detailed report

Copy link

github-actions bot commented Sep 9, 2024

Lighthouse Report:

  • Performance: 69 / 100
  • Accessibility: 94 / 100
  • Best Practices: 100 / 100
  • SEO: 100 / 100

View detailed report

Copy link

Lighthouse Report:

  • Performance: 94 / 100
  • Accessibility: 94 / 100
  • Best Practices: 100 / 100
  • SEO: 100 / 100

View detailed report

@ansivgit ansivgit merged commit 2cbf05f into main Sep 10, 2024
4 checks passed
@ansivgit ansivgit deleted the refactor/355-paragraph-comp branch September 10, 2024 10:29
Copy link

Lighthouse Report:

  • Performance: 84 / 100
  • Accessibility: 94 / 100
  • Best Practices: 100 / 100
  • SEO: 100 / 100

View detailed report

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

FSD: Paragraph refactor
4 participants