Feat/hng 45 create comment box component

[abanicaisse]

[FEAT] Comments > comment box #45

Work on the comment box component to be added to the comments page in the HNG-Boilerplate-Remix project.

Some of the task I worked on and implemented:

• Create the CommentBox component: accepting relevant props (for specific comment data)
• Create a responsive CommentBox component: which seamlessly adapt to different screen sizes and viewports
• Implement the appropriate styling for the component based on the provided Figma design specifications
• Implement accessibility best practices (e.g., proper color contrasts, keyboard navigation, etc.)
• Write relevant Unit Tests
• Test Thoroughly and ensure all the test pass

Changes Implemented - UI

• In the "app" created a new "components" folder which will be containing all the components of the app
• In the newly created "components" directory:

  -- Created a new "CommentBox.tsx" file representing the reusable comment box component
  -- Deleted and Switched from using CSS Modules for Styling to using TailwindCSS

  -- Implemented all the appropriate styling on the component based on the provided figma design using tailwindCSS
• Created a new /comments route at "app/routes/comments.tsx" representing the comments page where the reusable comment box component will be rendered

  -- Imported and rendered the previously created "CommentBox.tsx" component on the comments route

Testing

• Implemented Integration testing for the comment box component using "vitest" library
-- Created a new "tests" directory for all our application testing on the root of the application
-- In the "tests" directory created a "components" child directory for the testing of each component
-- Created a "CommentBox.test.tsx" testing file for the resusable comment box component previously created
-- Wrote Integration testing tests for the components
-- Ensured all the tests pass

Output

• Mobile View

• Desktop View

Video (to be attached to PR as asked in change request by reviewer)

Screen.Recording.2024-07-21.at.15.09.17.1.mov

[psalm987]

The code you want to send has lint errors.

Run pnpm lint --fix to fix some of the issues then run pnpm lint and make corrections on each lint error, then commit...

[abanicaisse]

@psalm987 Okay. Let me fix that and push again

[oreoluwa212]

Remove all comments and be back asap, add your component at the bottom of guide's page.tsx and record a video to be attached to this PR. also test after all is done and pulled from upstream

[abanicaisse]

Alright lemme do that asap

[abanicaisse]

@oreoluwa212

Remove all comments and be back asap, add your component at the bottom of guide's page.tsx and record a video to be attached to this PR. also test after all is done and pulled from upstream

The guide's page.tsx u mentioned is it the home page of the app. 'Coz on the current project there is no page.tsx file. Or should I create one and add my component on it? Plz reply me so I have more clarification on what to change. Thanks

Changes effected

[oreoluwa212]

I saw that you used npm not pnpm
Also, you have a component can you put your component to view under guide's pages.tsx and remove that route you did

[abanicaisse]

Okay lemme fix that real quick

Fixed all

[oreoluwa212]

You are expected to use lucide icons not svg exports

dismiss