feat(company-description): option to add a short company description in the experience form #2289
Conversation
📝 WalkthroughWalkthroughA new optional Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ExperienceDialog
participant Schema
participant ArtboardTemplate
User->>ExperienceDialog: Opens experience dialog
ExperienceDialog->>User: Displays form (with companyDescription input)
User->>ExperienceDialog: Enters companyDescription (max 50 chars)
ExperienceDialog->>Schema: Submits experience with companyDescription
Schema->>ArtboardTemplate: Passes experience data
ArtboardTemplate->>User: Renders companyDescription below company name
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/client/src/pages/builder/sidebars/left/dialogs/experience.tsx (1)
125-125: Consider consistent spacing between form fieldsThese extra blank lines appear to be inconsistent with the spacing pattern used between other form fields in this file.
/> - - <FormField/> - - <FormFieldAlso applies to: 140-141
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
apps/artboard/src/templates/azurill.tsx(1 hunks)apps/artboard/src/templates/bronzor.tsx(2 hunks)apps/artboard/src/templates/chikorita.tsx(2 hunks)apps/artboard/src/templates/ditto.tsx(2 hunks)apps/artboard/src/templates/gengar.tsx(2 hunks)apps/artboard/src/templates/glalie.tsx(2 hunks)apps/artboard/src/templates/kakuna.tsx(1 hunks)apps/artboard/src/templates/leafish.tsx(1 hunks)apps/artboard/src/templates/nosepass.tsx(2 hunks)apps/artboard/src/templates/onyx.tsx(1 hunks)apps/artboard/src/templates/pikachu.tsx(2 hunks)apps/artboard/src/templates/rhyhorn.tsx(2 hunks)apps/client/src/pages/builder/sidebars/left/dialogs/experience.tsx(4 hunks)libs/schema/src/sections/experience.ts(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/client/src/pages/builder/sidebars/left/dialogs/experience.tsx (1)
libs/ui/src/components/form.tsx (5)
FormField(11-20)FormItem(22-32)FormLabel(36-50)FormControl(54-69)FormMessage(91-112)
🔇 Additional comments (24)
libs/schema/src/sections/experience.ts (2)
13-13: Good addition of the optional company description field.The new field
companyDescriptionis properly defined as an optional string field in the schema, which maintains backward compatibility with existing data.
28-28: Correctly initialized default value for the new field.The
defaultExperienceobject is properly updated with an empty string for the newcompanyDescriptionfield.apps/artboard/src/templates/kakuna.tsx (1)
258-258: Successfully implemented company description display.The div element correctly renders the company description right after the company name, providing good visual hierarchy in the resume layout.
apps/artboard/src/templates/chikorita.tsx (2)
20-20: Updated React import to include full namespace.The import statement now includes the full React namespace along with Fragment, which follows best practices for React components that might use JSX features requiring the React namespace.
244-244: Properly implemented company description display.The new div element correctly renders the company description immediately after the company name and before the position, maintaining a logical information hierarchy.
apps/artboard/src/templates/nosepass.tsx (2)
20-20: Updated React import to include full namespace.The import statement now includes the full React namespace along with Fragment, which follows best practices for modern React components.
309-309: Successfully integrated company description display.The div element correctly renders the company description between the company name and position information, consistent with the implementation in other templates.
apps/artboard/src/templates/ditto.tsx (2)
20-20: Updated React import to include the full namespace.The import was updated to include the full React namespace alongside Fragment. This is consistent with the changes in other template files and ensures that any JSX features that might require React are available.
291-291: Added company description display to the Experience component.The new div element renders the companyDescription property for each experience item, placing it in the right column alongside the date and location. This implementation matches the feature requirement to display the company description in the experience section.
apps/artboard/src/templates/pikachu.tsx (2)
20-20: Updated React import to include the full namespace.The import was updated to include the full React namespace alongside Fragment. This maintains consistency with other template files in the project.
293-293: Added company description display to the Experience component.The new div element renders the companyDescription property for each experience item, placing it after the company name and before the position. This placement is appropriate for this template layout.
apps/artboard/src/templates/leafish.tsx (1)
253-253: Added company description display to the Experience component.The new div element renders the companyDescription property for each experience item, placing it after the company name/URL and before the position. The implementation aligns with the feature requirement and maintains consistency with other templates while respecting this template's unique layout.
apps/artboard/src/templates/glalie.tsx (2)
27-27: Updated React import to include the full namespace.The import was updated to include the full React namespace alongside Fragment, maintaining consistency with other template files in the project.
256-256: Added company description display to the Experience component.The new div element renders the companyDescription property for each experience item, placing it after the company name and before the position. The implementation correctly integrates with this template's layout structure.
apps/artboard/src/templates/rhyhorn.tsx (2)
20-20: Import style change noted.The full React namespace is now imported alongside Fragment. While not strictly necessary for this component's functionality, this change maintains consistency with other files in the codebase.
259-259: Implementation of company description display looks good.The new field is properly placed in a logical position - directly below the company name and before the position title. This maintains the visual hierarchy of information and is consistent with implementations in other templates.
apps/artboard/src/templates/onyx.tsx (1)
259-259: Company description implementation looks good.The placement of the company description directly after the company name and before the position title maintains consistency with other templates and follows a logical hierarchy of information display.
apps/artboard/src/templates/gengar.tsx (2)
20-20: Import style change noted.The full React namespace is now imported alongside Fragment, ensuring consistency with other template files.
265-265: Company description implementation is consistent with other templates.The placement and implementation of the company description field follows the same pattern as in other templates, maintaining a consistent user experience across different resume layouts.
apps/artboard/src/templates/bronzor.tsx (2)
20-20: Import style change noted.The full React namespace is now imported alongside Fragment, maintaining consistency with other template files.
260-260: Company description implementation follows consistent pattern.The new field is appropriately placed after the company name and before the position title, maintaining the same information hierarchy as in other templates.
apps/artboard/src/templates/azurill.tsx (1)
282-282: LGTM - Good addition of company description displayThe added div correctly implements the display of the new
companyDescriptionfield, maintaining the existing pattern of the template. The placement after the company name and before the position is logical in the visual hierarchy.apps/client/src/pages/builder/sidebars/left/dialogs/experience.tsx (2)
30-30: LGTM - Good constant definitionDefining the maximum description length as a constant rather than hardcoding it in multiple places follows good DRY principles.
96-123: LGTM - Well-implemented form field with character limitThe implementation has several good characteristics:
- Follows the established pattern of other form fields
- Properly includes character count feedback
- Enforces the character limit through both the maxLength attribute and onChange handler
- Aligns with the UI component library patterns
The double validation (maxLength attribute + onChange handler) provides a good user experience while ensuring the limit is enforced.
contribution on the issue #1974
Summary by CodeRabbit