Conversation
…ox functionality and improved documentation
…ntation and improved type definitions
…ayeh-roohani' of https://github.com/codebridger/lib-vue-components into CU-86eu4pn7j_Add-Checkbox-and-Radio-Input-component_somayeh-roohani
…-Radio-Input-component_somayeh-roohani Checkbox input component
# [1.17.0-dev.23](dev-1.17.0-dev.22...dev-1.17.0-dev.23) (2025-07-19) ### Features * [#86](https://github.com/codebridger/lib-vue-components/issues/86)eu4pn7j - add CheckboxInput component with customizable options and states. ([10de143](10de143)), closes [#86eu4pn7](https://github.com/codebridger/lib-vue-components/issues/86eu4pn7) * [#86](https://github.com/codebridger/lib-vue-components/issues/86)eu4pn7j - add new icons for lock open, eye, and eye off; update icon imports ([ed45091](ed45091)), closes [#86eu4pn7](https://github.com/codebridger/lib-vue-components/issues/86eu4pn7) * [#86](https://github.com/codebridger/lib-vue-components/issues/86)eu4pn7j - add new icons for lock open, eye, and eye off; update icon imports ([fc9347d](fc9347d)), closes [#86eu4pn7](https://github.com/codebridger/lib-vue-components/issues/86eu4pn7) * [#86](https://github.com/codebridger/lib-vue-components/issues/86)eu4pn7j - enhance CheckboxInput component with single checkbox functionality and improved documentation ([4063b9f](4063b9f)), closes [#86eu4pn7](https://github.com/codebridger/lib-vue-components/issues/86eu4pn7) * [#86](https://github.com/codebridger/lib-vue-components/issues/86)eu4pn7j - enhance CheckboxInput stories with detailed documentation and improved type definitions ([965077b](965077b)), closes [#86eu4pn7](https://github.com/codebridger/lib-vue-components/issues/86eu4pn7)
# [1.17.0-dev.24](dev-1.17.0-dev.23...dev-1.17.0-dev.24) (2025-07-19) ### Bug Fixes * resolve issues with CheckboxInput component functionality and documentation ([c4d33ff](c4d33ff))
…ns and enable debug mode
… and enhance manual triggering options
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| - [ ] Manual testing completed | ||
| - [ ] Cross-browser testing (if applicable) | ||
|
|
||
| ## 🔍 Review Checklist |
There was a problem hiding this comment.
👏 PRAISE: Great addition of a detailed and structured PR template! This will
help contributors provide comprehensive descriptions, improving
review quality and consistency.
✅ Resolved by CodePress Review
The detailed PR template added here follows a clear structure and will improve review quality and consistency, addressing the praise comment on PR template quality.
| class="inline-flex items-center cursor-pointer transition-all duration-200 hover:opacity-80" | ||
| :class="{ 'opacity-50 cursor-not-allowed': disabled || cardDisabled }" | ||
| > | ||
| <input |
There was a problem hiding this comment.
🟡 OPTIONAL: The value prop is passed to the input but checkboxes typically do not use a value attribute as boolean selection state is controlled by checked. Please verify usage scenarios to ensure value usage is meaningful here or if it might cause confusion.
✅ Resolved by CodePress Review
The component continues to accept a "value" prop and passes it to the input element. The review acknowledges this but suggests clarifying usage instead of removing. Hence, the existing comment about confirming intent and usage is still relevant, but the changes show awareness of this design. Therefore, the original concern is partially addressed by explicit typings and event emission documentation.
| IconUsers, | ||
| IconUsersGroup, | ||
| IconLock, | ||
| IconLockOpen, |
There was a problem hiding this comment.
🟡 OPTIONAL: Confirm that the newly added icons (IconLockOpen, IconEye, IconEyeOff) are properly imported above this list in this file to avoid any runtime errors.
✅ Resolved by CodePress Review
This diff adds IconLockOpen, IconEye, and IconEyeOff to the export list, following the existing icons.
However, the diff does not show imports, so it is unclear if they are properly imported.
The comment cannot be fully resolved yet unless imports are verified.
| Progress, | ||
| SwitchBall, | ||
| Tooltip, | ||
| CheckboxInput, |
There was a problem hiding this comment.
👏 PRAISE: Good job integrating the new CheckboxInput component into the elements components registry. This will enable global usage and improve maintainability.
✅ Resolved by CodePress Review
The CheckboxInput component has been successfully added to the elements components registry,
enabling its global usage as mentioned in the comment.
| - [ ] API documentation updated (if applicable) | ||
| - [ ] Component documentation updated (if applicable) | ||
|
|
||
| ## 🔄 Breaking Changes |
There was a problem hiding this comment.
🟡 OPTIONAL: Consider adding example entries in the Breaking Changes section to
guide contributors on how to document breaking API or behavior changes.
✅ Resolved by CodePress Review
The Breaking Changes section is present in the template. However, it does not yet include example entries. This comment remains relevant.
| "preset": "angular", | ||
| "releaseRules": [ | ||
| {"type": "refactor", "release": "patch"} | ||
| { |
There was a problem hiding this comment.
🟡 OPTIONAL: The indentation in the "refactor" releaseRules has changed but does not add functional value. Consider cleaning formatting for consistency.
✅ Resolved by CodePress Review
The indentation inconsistency noted previously for the "refactor" releaseRules entry has been cleaned up and is now consistent.
| @@ -0,0 +1,91 @@ | |||
| Take all below stracture to write a proper PR description | |||
There was a problem hiding this comment.
🟡 OPTIONAL: Minor typo in the first line: "stracture" should be "structure".
| Take all below stracture to write a proper PR description | |
| Take all below structure to write a proper PR description |
✅ Resolved by CodePress Review
The existing comment pointed out the typo "stracture", which remains uncorrected in this diff. Therefore, it is not resolved.
| import IconUsersGroup from "./single/icon-users-group.vue"; | ||
| import IconLock from "./single/icon-lock.vue"; | ||
| import IconLockOpen from "./single/icon-lock-open.vue"; | ||
| import IconEye from "./single/icon-eye.vue"; |
There was a problem hiding this comment.
🟡 OPTIONAL: IconEye import exists here but differs from the removed import IconEye entry. Confirm if the previous IconEye import was missing or duplicated to avoid confusion.
✅ Resolved by CodePress Review
The IconEye import is now explicitly added alongside IconEyeOff and IconLockOpen, clarifying and resolving the previous ambiguity about the IconEye import presence or duplication.
| fetch-depth: 0 | ||
| ref: ${{ github.event.issue.pull_request && format('refs/pull/{0}/head', github.event.issue.number) || github.ref }} | ||
|
|
||
| - name: CodePress Review |
There was a problem hiding this comment.
🟡 OPTIONAL: Consider enabling the comment trigger phrase for more flexible manual AI reviews on demand (currently disabled by run_on_comment_trigger: false). This could be helpful during ongoing PR discussions.
| errorMessage: "", | ||
| id: "checkbox-input", | ||
| }, | ||
| parameters: { |
There was a problem hiding this comment.
🟡 OPTIONAL: The detailed component description in the docs parameter is very well done; consider summarizing key points at the top of the file or README for easier discoverability outside Storybook.
✅ Resolved by CodePress Review
The component docs parameter contains an extensive, well-written description with usage examples, variant details, and color explanations.
This addresses the suggestion to summarize key points or have a clear description for easier discoverability.
| }, | ||
| }, | ||
| }, | ||
| args: { |
There was a problem hiding this comment.
🟡 OPTIONAL: The extensive use of inline templates in the render functions is fine, but consider adding some comments or grouping in the template strings for easier readability in longer templates.
✅ Resolved by CodePress Review
Although some render functions remain complex, overall some slight grouping and descriptive comments in parameter and story declarations help increase template readability.
| "path": "@semantic-release/changelog", | ||
| "condition": "branch.name === 'main'" | ||
| }, | ||
| [ |
There was a problem hiding this comment.
🟡 OPTIONAL: Introducing branch-specific changelog files (CHANGELOG.md for main, CHANGELOG-DEV.md for others) is a helpful improvement for multi-branch release workflows.
✅ Resolved by CodePress Review
The configuration now introduces branch-specific changelog files using a ternary expression, which aligns with the previous suggestion and implements the intended behavior.
| # 1. Add the following to your PR description: | ||
| # @codepress/review | ||
|
|
||
| name: CodePress Review |
There was a problem hiding this comment.
👏 PRAISE: Great job adding the CodePress Review GitHub Actions workflow. This automated AI review integration will help maintain high code quality and consistency on pull requests.
…r types and add new PR description generator workflow
| color="primary" | ||
| /> | ||
| </div> | ||
| <div class="mt-4 p-3 bg-gray-100 dark:bg-gray-800 rounded"> |
There was a problem hiding this comment.
🟡 OPTIONAL: The render functions use inline templates extensively.
Adding some comments or visually separating the template strings (e.g., grouping sections or adding blank lines) could improve readability, especially as templates grow.
| export const Required: Story = { | ||
| args: { | ||
| label: "Required Checkbox", | ||
| text: "I confirm that I am over 18 years old", |
There was a problem hiding this comment.
👏 PRAISE: This new story file for CheckboxInput is very well structured and thorough.
The detailed argTypes and rich docstrings improve the user and developer experience,
especially with clear usage examples and variant explanations. Great work on the comprehensive coverage of states and variants!
| Task IDs extracted from commit messages and their ClickUp links: | ||
| - Format: #task-id or CU-task-id | ||
| - ClickUp Link: https://app.clickup.com/t/[task-id] | ||
| - Example: #12345 → https://app.clickup.com/t/12345 |
There was a problem hiding this comment.
👏 PRAISE: This is an excellent and comprehensive PR template that will greatly help contributors provide clear and structured PR descriptions, making reviews smoother and higher quality.
| import IconUsersGroup from "./single/icon-users-group.vue"; | ||
| import IconLock from "./single/icon-lock.vue"; | ||
| import IconLockOpen from "./single/icon-lock-open.vue"; | ||
| import IconEye from "./single/icon-eye.vue"; |
There was a problem hiding this comment.
🟡 OPTIONAL: This change adds IconEye, IconEyeOff, and IconLockOpen imports, including IconEye which was mentioned in an existing comment. Ensure that these new imports do not duplicate or conflict with previous IconEye usage elsewhere to keep the icon imports clear and consistent.
| id: pr_auto | ||
| with: | ||
| openai_api_key: ${{ secrets.OPENAI_API_KEY_FOR_PR_DESC_GENERATOR }} | ||
| system_prompt: ./custom-codepress-summary-prompt.md |
There was a problem hiding this comment.
🟡 OPTIONAL: Confirm that the referenced system prompt file 'custom-codepress-summary-prompt.md' is correctly configured and placed in the repository for the OpenAI model to generate meaningful PR descriptions.
✅ Resolved by CodePress Review
The workflow adds usage of the system prompt file 'custom-codepress-summary-prompt.md' as in the existing comment; the comment remains relevant and not yet addressed by this diff.
| "vue-tsc": "^0.40.4" | ||
| } | ||
| } | ||
| } No newline at end of file |
There was a problem hiding this comment.
ℹ️ FYI: This diff is a trivial formatting edit (newline removal at end of file). No functional change. Consider adding a newline at end of file for POSIX compliance and to avoid potential warnings from some tools.
✅ Resolved by CodePress Review
The diff reintroduces the lack of a newline at the end of the file, so the previous guidance remains unaddressed.
|
|
||
| <label | ||
| :for="id" | ||
| class="inline-flex items-center cursor-pointer transition-all duration-200 hover:opacity-80" |
There was a problem hiding this comment.
🟡 OPTIONAL: The prop "value" is passed to the checkbox input element but its usage here might be confusing because HTML checkboxes usually manage selection state via the "checked" attribute rather than value. If this prop is intended purely for the emitted "change" event, consider clarifying its usage in the component documentation or renaming to something like "emitValue" to reduce ambiguity.
| uses: vblagoje/pr-auto@v1 | ||
| id: pr_auto | ||
| with: | ||
| openai_api_key: ${{ secrets.OPENAI_API_KEY_FOR_PR_DESC_GENERATOR }} |
There was a problem hiding this comment.
🟡 OPTIONAL: Verify that the secret OPENAI_API_KEY_FOR_PR_DESC_GENERATOR is correctly configured in the repository settings to avoid workflow failures due to missing credentials.
✅ Resolved by CodePress Review
The workflow includes the usage of the secret OPENAI_API_KEY_FOR_PR_DESC_GENERATOR, matching the existing comment; however, no changes to secret management are shown, so it remains relevant and unresolved.
| IconUsers, | ||
| IconUsersGroup, | ||
| IconLock, | ||
| IconLockOpen, |
There was a problem hiding this comment.
🟡 OPTIONAL: The existing comment requested confirmation that the new icons (IconLockOpen, IconEye, IconEyeOff) are properly imported earlier in this file. Please double-check the import statements to ensure these icons are correctly imported to prevent runtime errors.
| @@ -0,0 +1,91 @@ | |||
| Take all below stracture to write a proper PR description | |||
There was a problem hiding this comment.
🔵 NIT: There is a minor typo in the first line: "stracture" should be "structure".
| Take all below stracture to write a proper PR description | |
| Take all below structure to write a proper PR description |
| runs-on: ubuntu-latest | ||
| steps: | ||
| - name: Generate PR Description | ||
| uses: vblagoje/pr-auto@v1 |
There was a problem hiding this comment.
🟡 OPTIONAL: This workflow uses the secret OPENAI_API_KEY_FOR_PR_DESC_GENERATOR. Please ensure this secret is properly configured in the repository settings to prevent workflow failures.
| import Progress from "./Progress.vue"; | ||
| import SwitchBall from "./SwitchBall.vue"; | ||
| import Tooltip from "./Tooltip.vue"; | ||
| import CheckboxInput from "./CheckboxInput.vue"; |
There was a problem hiding this comment.
👏 PRAISE: Great addition integrating the new CheckboxInput component into the global elements components registry. This will enable consistent and easy reuse across the app.
| "vue-tsc": "^0.40.4" | ||
| } | ||
| } | ||
| } No newline at end of file |
There was a problem hiding this comment.
🔵 NIT: Consider adding a newline at the end of this file to follow POSIX standards and avoid warnings from some tools.
3 participants
Add CheckboxInput Component, Icons, Storybook Stories, and PR Automation
This PR introduces a new flexible CheckboxInput Vue component supporting multiple visual variants, colors, states (disabled, error, required), and accessibility features. It includes a comprehensive set of Storybook stories demonstrating usage scenarios and variants.
Additionally, new SVG icon components (IconEyeOff, IconLockOpen) were added, and existing icons (IconEye, IconLock) were updated for consistency. The CheckboxInput component was registered globally in the elements components file.
The PR also adds a GitHub Actions workflow for automated PR code review using CodePress, a detailed PR template, and a custom prompt for generating consistent PR descriptions. The semantic-release configuration was updated to support branch-specific changelog files.
Key Changes:
Review Notes: