-
Notifications
You must be signed in to change notification settings - Fork 0
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
Implement base components #12
base: develop
Are you sure you want to change the base?
Conversation
* feat: implement Tab component Implement the Tab component to handle tab creation and removal based on the provided configuration. The Tab class consists of a constructor method that initializes the configuration, a create method to create tabs, and a remove method to remove tabs. This implementation ensures that the provided configuration is verified before creating or removing tabs. * feat: implement tab creation function Introduce the createTab function to handle the creation of tabs based on the provided configuration. This function verifies the configuration, creates tab buttons, and sets attributes for the tab element before appending buttons to it. This ensures tabs are created with the correct configuration and attributes. * feat: implement tab buttons creation function This function creates tab buttons based on the provided array of button configurations. It ensures that each button has a unique ID and checks if the minimum number of buttons required for a tab is met. If the buttons array is empty or insufficient, appropriate error messages are logged, and the function returns undefined. * feat: implement tab removal function This function removes a tab element from the DOM. * refactor: add parameters to this.config in Tab class Due to changes in the configuration verification utility, parameters needed to be updated in this.config at condition. Added this.name to make the parameters more readable and ensure proper initialization. * refactor: update import paths for module resolution Updated import paths in component files to use module resolution aliases defined in jsconfig.json. This change improves code readability and maintainability by replacing relative paths with aliases. * refactor: merge files into one Combine multiple files into a single file to reduce unnecessary module creation. This change simplifies navigation and improves codebase organization. * test: ensure tab component works
* feat: implement Button component Implement the Button component to handle button creation and removal based on the provided configuration. The button class consists of a constructor method that initializes the configuration, a create method to create buttons, and a remove method to remove buttons. This implementation ensures that the provided configuration is verified before creating or removing buttons. * feat: implement button creation function This function creates a button element based on the provided configuration object. It checks if the configuration is verified before creating the button. If the configuration is not verified, the function returns undefined. The button type determines the style of the button: rounded-square, slab, or transparent. * feat: implement button container creation function This function creates a container element for a button, allowing the inclusion of an icon, text, and various attributes such as ID, class name, and event listeners. It uses helper functions from the utilities module to set attributes and events for the container element. * feat: implement button removal function This function removes a button element from the DOM based on the provided configuration. It utilizes strict mode for improved code quality and reliability. * fix: modify and relocate events error message Ensure early return in the if statement when events are not present in the configuration. This adjustment improves code clarity and adheres to the expected behavior. Additionally, relocate the error message handling to the `button-create-container` file for better organization within the codebase. * refactor: add parameters to this.config in Button class Due to changes in the configuration verification utility, parameters needed to be updated in this.config at condition. Added this.name to make the parameters more readable and ensure proper initialization. * refactor: move helper function to main function The `button-create` file had a helper function `button-create-container`. Merged them into one file for better file organization within the components folder. This change helps in tracking related functions more effectively. * fix: add 'button' parameter in 'button-create' Updated `button-create` by adding the 'button' parameter due to changes in the configuration verifier. This ensures the function operates with the correct parameters. * fix: separate 'text' from other config properties Set 'text' to let instead of const to accommodate 'rounded-square' type of button, which forces such buttons to have no 'text'. This change ensures that the 'text' can be modified in the switch statement even if explicitly included in the config properties. Keeping other properties as const prevents unintended changes, maintaining stability. * fix: change icon wrapper to i element from div Ensure the icon is wrapped in an `i` element instead of a `div` for proper icon display and alignment according to standard practices. * feat: add tests for Button component Introduce tests to validate the functionality of the Button component methods. These tests provide assurance regarding the reliability and correctness of the methods implemented within the component. * refactor: update import paths for module resolution Updated import paths in component files to use module resolution aliases defined in jsconfig.json. This change improves code readability and maintainability by replacing relative paths with aliases. * fix: separate event setting from button creation Fixes the bug of not setting events on a button because the button is not yet created or appended to the DOM. Event setting relies on the element's ID in the DOM. Separated event setting into another method to address this issue. Additionally, return `this` in methods where chaining is necessary. * refactor: merge files into one Combine multiple files into a single file to reduce unnecessary module creation. This change simplifies navigation and improves codebase organization. * test: merge test files into one Combine multiple test files into a single test file to reduce unnecessary module tests. This change simplifies navigation and improves codebase organization. * style: expand print width to 100 characters Adjusted code formatting to adhere to a maximum print width of 100characters, improving readability and consistency across the codebase.
* feat: implement Snackbar component Implement the Snackbar component to handle snackbar creation and removal based on the provided configuration. The Snackbar class consists of a constructor method that initializes the configuration, a create method to create snackbars, and a remove method to remove snackbars. This implementation ensures that the provided configuration is verified before creating or removing snackbars. * refactor: replace create method with render method Replaced the `createSnackbar` method with the `renderSnackbar` method in the Snackbar class to streamline the process of rendering. Directly rendering the Snackbar makes more sense and reduces complexity when using the Snackbar class. * refactor: remove unnecessary parameter Removed an unnecessary parameter from the `removeSnackbar` method to streamline its implementation and improve clarity. * refactor: merge render and remove methods Merged the render and remove methods in the Snackbar class to simplify its interface and enhance clarity. The unnecessary parameter has been removed, resulting in a more streamlined and user-friendly implementation. * feat: add render then remove snackbar function This feature introduces a new function for rendering a snackbar message and then automatically removing it after a certain duration. The function combines the rendering and removal processes into a single action, enhancing usability and reducing complexity. * refactor: update import paths for module resolution Updated import paths in component files to use module resolution aliases defined in jsconfig.json. This change improves code readability and maintainability by replacing relative paths with aliases. * test: merge test files into one Combine multiple test files into a single test file to reduceunnecessary module tests. This change simplifies navigation and improvescodebase organization. * test: ensure rendering and removal works properly Add tests to verify that the Snackbar component correctly renders and removes messages with valid configurations.
* feat: implement Checkbox component for checkbox management This component encapsulates functionality for creating, removing, and changing the state of checkboxes. It utilizes strict mode and imports necessary functions from respective modules for checkbox creation, removal, and state change. The constructor ensures that the provided configuration is verified before initialization. * feat: implement checkbox creation function This function creates a checkbox element based on the provided configuration. It utilizes strict mode and imports necessary functions for verifying the configuration and setting attributes. The checkbox element includes an icon and attributes such as ID, class, state, group name, and target ID as specified in the configuration. * feat: implement checkbox state management function This function handles the change of checkbox state based on user interaction. It utilizes strict mode and imports necessary functions for verifying the configuration. The function toggles the checkbox state, updates the checkbox icon accordingly, and manages the targets associated with the checkbox. * feat: implement checkbox removal function This function removes a checkbox element from the DOM based on the provided configuration. It utilizes strict mode and imports necessary functions for verifying the configuration. Additionally, it removes associated items from local storage to maintain data consistency. * refactor: update import paths for module resolution Updated import paths in component files to use module resolution aliases defined in jsconfig.json. This change improves code readability and maintainability by replacing relative paths with aliases. * refactor: merge files into one Combine multiple files into a single file to reduce unnecessary module creation. This change simplifies navigation and improves codebase organization. * test: ensure event remover function works properly Add tests for the removeEvents function to verify that event listeners are correctly detached from elements. Ensure proper error handling is in place when the element or events are missing. TODO: In the browser, managing localStorage works, but in tests, it is quite tricky! This is still in process! Try to research more about this. * style: expand print width to 100 characters Adjusted code formatting to adhere to a maximum print width of 100characters, improving readability and consistency across the codebase. * fix: remove console logs Eliminate console logs from the code to clean up the output and improve code readability.
* feat: implement Modal component for page creation and removal This class encapsulates the functionality for creating and removing modals. It utilizes strict mode and imports necessary functions from respective modules for modal creation and removal. The constructor ensures that the provided configuration is verified before initialization. * feat: implement modal creation function This function creates a modal container element based on the provided configuration. It utilizes strict mode and imports necessary functions for setting attributes and verifying configuration. The modal container includes a title, icon, and buttons as specified in the configuration. * feat: implement modal removal function This function removes a modal element from the DOM based on the provided configuration. It utilizes strict mode for improved code quality and reliability. * refactor: update import paths for module resolution Updated import paths in component files to use module resolution aliases defined in jsconfig.json. This change improves code readability and maintainability by replacing relative paths with aliases. * refactor: merge files into one Combine multiple files into a single file to reduce unnecessary module creation. This change simplifies navigation and improves codebase organization. * test: ensure modal component works
* feat: implement Textarea component Add Textarea class to handle creation and removal of textareas based on the provided configuration. The class has methods to create and remove the textarea elements. * feat: add textarea creation function Implement a function to create a textarea element based on the provided configuration. The function utilizes configuration verification from the `isConfigVerified` utility and sets attributes using the `setAttributes` function. It creates a textarea container with specified text content and attributes such as id, class, placeholder, and readonly. * feat: implement textarea removal function This function removes a textarea element from the DOM. * refactor: update import paths for module resolution Updated import paths in component files to use module resolution aliases defined in jsconfig.json. This change improves code readability and maintainability by replacing relative paths with aliases. * refactor: merge files into one Combine multiple files into a single file to reduce unnecessary module creation. This change simplifies navigation and improves codebase organization. * test: ensure textarea component works
* feat: implement Page component for page creation and removal Implement the Page component to handle page creation and removal based on the provided configuration. The Page class consists of a constructor method that initializes the configuration, a create method to create pages, and a remove method to remove pages. This implementation ensures that the provided configuration is verified before creating or removing pages. * feat: implement page creation function Implement the createPage function to create a page element based on the provided configuration. This function verifies the configuration, creates a page with a header and body, and appends the elements accordingly. It also includes helper functions to create the header and body sections of the page. * feat: implement page removal function This function removes a page element from the DOM based on the provided configuration. It utilizes strict mode for improved code quality and reliability. * refactor: update import paths for module resolution Updated import paths in component files to use module resolution aliases defined in jsconfig.json. This change improves code readability and maintainability by replacing relative paths with aliases. * refactor: merge files into one Combine multiple files into a single file to reduce unnecessary module creation. This change simplifies navigation and improves codebase organization. * test: ensure page component works
Adjusted code formatting to adhere to a maximum print width of 100 characters, improving readability and consistency across the codebase.
Adjust the attribute setting logic to use `class` instead of `class_name` for setting the class attribute. This ensures compatibility with standard HTML attributes. The test ensures everything worked properly.
Simplified the header creation logic in the Page component by removing the z-index condition check in the #createHeader method and ensuring the exit button is created only when z-index is greater than 5. This change improves code readability and maintainability.
* feat: implement Container component Introduce the Container component to handle the creation and removal of container elements. This component ensures that the provided config is verified using the `isConfigVerified` utility. The `create` method sets the attributes for the container, while the `remove` method handles the removal of the container from the DOM. * test: add tests for Container component Adds tests for the Container component using JSDOM and Jest. Tests include container creation, text or element appending, and container removal. Ensures proper functionality of Container's create and remove methods.
351708d
to
a6a6c79
Compare
Added support for appending elements and text to the container during creation. The `create` method now accepts `elements` and `text` in the configuration and utilizes private methods to append them. This enhancement allows for more flexible container creation.
Enhanced the Container test suite to cover new features such as appending text and elements. Added integration with Button component to test element appending functionality. Updated tests ensure the new capabilities of the Container class are properly validated.
Added the 'hidden' attribute as a valid option for textarea and checkbox components to allow conditional visibility in the UI. This enhancement improves flexibility in form design and user interaction.
Updated the handling of the 'hidden' attribute to use boolean values instead of string representations. This ensures the attribute is set correctly based on the provided boolean value.
@coderabbitai review |
Actions performedReview triggered.
|
WalkthroughWalkthroughThis update introduces a series of new UI components, including Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Button
participant Snackbar
User->>Button: Click
Button->>Snackbar: Show message
Snackbar->>User: Display notification
User->>Button: Click again
Button->>Snackbar: Hide message
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? TipsChatThere are 3 ways to chat with CodeRabbit:
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 as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 17
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (16)
- src/components/tests/button.test.js (1 hunks)
- src/components/tests/checkbox.test.js (1 hunks)
- src/components/tests/container.test.js (1 hunks)
- src/components/tests/modal.test.js (1 hunks)
- src/components/tests/page.test.js (1 hunks)
- src/components/tests/snackbar.test.js (1 hunks)
- src/components/tests/tab.test.js (1 hunks)
- src/components/tests/textarea.test.js (1 hunks)
- src/components/button.js (1 hunks)
- src/components/checkbox.js (1 hunks)
- src/components/container.js (1 hunks)
- src/components/modal.js (1 hunks)
- src/components/page.js (1 hunks)
- src/components/snackbar.js (1 hunks)
- src/components/tab.js (1 hunks)
- src/components/textarea.js (1 hunks)
Additional context used
Biome
src/components/container.js
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
src/components/__tests__/snackbar.test.js
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
src/components/tab.js
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
src/components/textarea.js
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
src/components/snackbar.js
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
src/components/modal.js
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
src/components/__tests__/textarea.test.js
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
src/components/button.js
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
src/components/page.js
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
src/components/__tests__/container.test.js
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
src/components/checkbox.js
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
[error] 67-67: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.(lint/suspicious/noAssignInExpressions)
[error] 68-68: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.(lint/suspicious/noAssignInExpressions)
src/components/__tests__/tab.test.js
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
src/components/__tests__/modal.test.js
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
src/components/__tests__/checkbox.test.js
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
src/components/__tests__/page.test.js
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
src/components/__tests__/button.test.js
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
Additional comments not posted (85)
src/components/container.js (5)
9-11
: Constructor looks good!The constructor correctly verifies the configuration and assigns it to the private property.
13-30
: Create method looks good!The method correctly creates and configures the container element using helper methods.
32-42
: Remove method looks good!The method correctly removes the container element from the DOM if it exists.
44-48
: AppendElements method looks good!The method correctly iterates over the elements and appends them to the container.
50-52
: AppendText method looks good!The method correctly sets the text content of the container.
src/components/__tests__/snackbar.test.js (3)
3-12
: Setup logic looks good!The setup logic correctly initializes a JSDOM environment and sets necessary global variables.
19-27
: Test case for creating Snackbar instance looks good!The test case correctly verifies the creation of a
Snackbar
instance with a valid configuration.
29-39
: Test case for rendering and removing Snackbar looks good!The test case correctly verifies the rendering and removal of the
Snackbar
with a valid configuration.src/components/tab.js (7)
9-11
: Constructor looks good!The constructor correctly verifies the configuration and assigns it to the private property.
13-19
: Create method looks good!The method correctly creates the tab container using a helper method.
21-33
: Remove method looks good!The method correctly removes the tab container and cleans up button events.
35-47
: CreateContainer method looks good!The method correctly creates and configures the container and buttons.
49-55
: CreateButtonsContainer method looks good!The method correctly iterates over the buttons and appends them to the container.
57-66
: ModifyButtons method looks good!The method correctly iterates over the buttons and modifies their IDs.
68-73
: RemoveButtonsEvents method looks good!The method correctly iterates over the buttons and removes their event listeners.
src/components/textarea.js (5)
9-11
: Constructor logic is sound.The constructor verifies the configuration using
isConfigVerified
and assigns it to the instance variable#config
.
13-18
: Methodcreate
is well-implemented.The
create
method extracts configuration properties and uses#createContainer
to generate the textarea element.
20-27
: Methodremove
is well-implemented.The
remove
method correctly handles the removal of the textarea element by ID.
29-35
: Methodlock
is well-implemented.The
lock
method sets thereadonly
attribute on the textarea element.
37-43
: Methodunlock
is well-implemented.The
unlock
method removes thereadonly
attribute from the textarea element.src/components/snackbar.js (7)
12-14
: Constructor logic is sound.The constructor verifies the configuration using
isConfigVerified
and assigns it to the instance variable#config
.
16-19
: MethodrenderThenRemove
is well-implemented.The
renderThenRemove
method enqueues the message for display.
21-24
: Method#enqueue
is well-implemented.The
#enqueue
method adds the message to the queue and processes the queue.
26-34
: Method#processQueue
is well-implemented.The
#processQueue
method ensures that messages are displayed one at a time.
36-46
: Method#display
is well-implemented.The
#display
method creates the snackbar element and appends it to the document body.
48-57
: Method#create
is well-implemented.The
#create
method generates the snackbar element with the specified attributes and message.
59-80
: Method#remove
is well-implemented.The
#remove
method usesrequestAnimationFrame
to remove the snackbar element after a specified duration.src/components/modal.js (6)
9-11
: Constructor logic is sound.The constructor verifies the configuration using
isConfigVerified
and assigns it to the instance variable#config
.
13-18
: Methodcreate
is well-implemented.The
create
method extracts configuration properties and uses#createModalContainer
to generate the modal element.
20-30
: Methodremove
is well-implemented.The
remove
method correctly handles the removal of the modal element by ID and removes button event listeners.
32-57
: Method#createModalContainer
is well-implemented.The
#createModalContainer
method creates and configures the modal element along with its buttons.
60-69
: Method#modifyButtons
is well-implemented.The
#modifyButtons
method adds unique IDs to the buttons and returns an array of modified buttons.
71-77
: Method#removeButtonsEvents
is well-implemented.The
#removeButtonsEvents
method removes event listeners from the buttons by replacing them with clones.src/components/__tests__/textarea.test.js (3)
16-40
: LGTM! The test forcreate()
method is comprehensive.This test covers the creation of a textarea with a valid configuration, ensuring that all attributes are correctly set.
43-66
: LGTM! The test forlock() and unlock()
methods is comprehensive.This test covers the locking and unlocking of an existing textarea, ensuring that the
readOnly
attribute is correctly toggled.
69-85
: LGTM! The test forremove()
method is comprehensive.This test covers the removal of a textarea with a valid configuration, ensuring that the textarea is correctly removed from the DOM.
src/components/button.js (6)
11-13
: LGTM! The constructor method is well-written.The constructor method verifies the configuration before assigning it, ensuring that the
Button
component is initialized with a valid configuration.
15-23
: LGTM! Thecreate()
method is well-written.The
create()
method covers the creation of a button element with various configurations, setting events and attributes appropriately.
25-37
: LGTM! Theremove()
method is well-written.The
remove()
method covers the removal of the button element from the DOM, ensuring that events are also removed appropriately.
39-57
: LGTM! The#createNode()
method is well-written.The
#createNode()
method covers the creation of a button node with various configurations, ensuring that the appropriate type, icon, text, id, and class name are set.
59-77
: LGTM! The#createContainer()
method is well-written.The
#createContainer()
method covers the creation of a button container element, setting attributes and appending icon and text elements if present.
79-93
: LGTM! The#createIcon()
and#createText()
methods are well-written.The
#createIcon()
method covers the creation of an icon element, setting attributes appropriately. The#createText()
method covers the creation of a text element, setting the text content.src/components/page.js (5)
10-12
: LGTM! The constructor method is well-written.The constructor method verifies the configuration before assigning it, ensuring that the
Page
component is initialized with a valid configuration.
14-33
: LGTM! Thecreate()
method is well-written.The
create()
method covers the creation of a page element with various configurations, setting attributes and appending header and body elements appropriately.
35-45
: LGTM! Theremove()
method is well-written.The
remove()
method covers the removal of the page element from the DOM, ensuring that header and body elements are also removed appropriately.
47-57
: LGTM! The#createNodes()
method is well-written.The
#createNodes()
method covers the creation of an array of elements with various configurations, ensuring that each element is created appropriately.
59-112
: LGTM! The#createHeader()
,#createBody()
, and#removeNodes()
methods are well-written.The
#createHeader()
method covers the creation of a header element with the specified elements and z-index. The#createBody()
method covers the creation of a body element with the specified elements. The#removeNodes()
method covers the removal of an array of elements.src/components/__tests__/container.test.js (4)
17-34
: LGTM!The test case correctly verifies the creation and properties of the container.
36-48
: LGTM!The test case correctly verifies the text content of the container.
50-79
: LGTM!The test case correctly verifies the presence of an external element within the container.
81-94
: LGTM!The test case correctly verifies the removal of the container.
src/components/checkbox.js (8)
10-13
: LGTM!The constructor correctly initializes the config and binds the click event handler.
15-24
: LGTM!The
create
method correctly initializes and returns the checkbox.
26-39
: LGTM!The
remove
method correctly removes the checkbox from the document and local storage.
41-51
: LGTM!The
#handleClick
method correctly handles click events and updates the state and icon.
53-55
: LGTM!The
#changeState
method correctly toggles the state.
57-63
: LGTM!The
#setEvents
method correctly sets up the click event listener.
71-79
: LGTM!The
#createIcon
method correctly creates and returns the icon element.
102-151
: LGTM!The methods for managing targets and local storage are correctly implemented.
src/components/__tests__/tab.test.js (3)
18-68
: LGTM!The test case correctly verifies the creation and properties of the tab.
70-119
: LGTM!The test case correctly verifies the functionality of the buttons within the tab.
122-164
: LGTM!The test case correctly verifies the removal of the tab.
src/components/__tests__/modal.test.js (4)
1-12
: LGTM! Setup code is appropriate.The setup code initializes a DOM environment using
jsdom
and sets global variables, which is necessary for testing DOM manipulation.Tools
Biome
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
13-16
: LGTM! ThebeforeEach
block ensures a clean slate for each test.Clearing the document body before each test is a good practice to avoid test interference.
18-73
: LGTM! Comprehensive test cases forcreate()
.The test cases cover the creation of a modal with valid configuration and verify button functionality, ensuring the modal and its buttons are created and function as expected.
132-179
: LGTM! Comprehensive test case forremove()
.The test case ensures that the modal is properly removed from the DOM, verifying the removal functionality.
src/components/__tests__/checkbox.test.js (7)
1-12
: LGTM! Setup code is appropriate.The setup code initializes a DOM environment using
jsdom
, sets global variables, and defines a localStorage mock, which is necessary for testing DOM manipulation and localStorage operations.Tools
Biome
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
50-53
: LGTM! ThebeforeEach
block ensures a clean slate for each test.Clearing the document body and localStorage before each test is a good practice to avoid test interference.
55-81
: LGTM! Comprehensive test case forcreate()
with valid configurations.The test case covers the creation of a checkbox with valid configurations, ensuring the checkbox is created as expected.
83-109
: LGTM! Comprehensive test case for changing state when clicked.The test case verifies that the checkbox state changes correctly when clicked, ensuring the functionality works as expected.
111-138
: LGTM! Comprehensive test case for changing icon when clicked.The test case verifies that the checkbox icon changes correctly when clicked, ensuring the functionality works as expected.
140-172
: LGTM! Comprehensive test case for state and icon consistency.The test case verifies that the checkbox state and icon are consistent, ensuring the functionality works as expected.
199-214
: LGTM! Comprehensive test case forremove()
.The test case ensures that the checkbox is properly removed from the DOM, verifying the removal functionality.
src/components/__tests__/page.test.js (7)
1-12
: LGTM! Setup code is appropriate.The setup code initializes a DOM environment using
jsdom
and sets global variables, which is necessary for testing DOM manipulation.Tools
Biome
[error] 1-1: Redundant use strict directive.
The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.
Safe fix: Remove the redundant use strict directive.(lint/suspicious/noRedundantUseStrict)
13-16
: LGTM! ThebeforeEach
block ensures a clean slate for each test.Clearing the document body before each test is a good practice to avoid test interference.
18-45
: LGTM! Comprehensive test case forcreate()
with valid configuration.The test case covers the creation of a page with valid configuration, ensuring the page is created as expected.
47-69
: LGTM! Comprehensive test case for creating exit button based on z-index.The test case verifies that the exit button is created correctly based on the z-index value, ensuring the functionality works as expected.
71-93
: LGTM! Comprehensive test case for not creating exit button based on z-index.The test case verifies that the exit button is not created when the z-index value is within a certain range, ensuring the functionality works as expected.
95-211
: LGTM! Comprehensive test case for adding elements to the page.The test case covers adding various elements to the page, ensuring the elements are added and function as expected.
214-300
: LGTM! Comprehensive test case forremove()
.The test case ensures that the page is properly removed from the DOM, verifying the removal functionality.
src/components/__tests__/button.test.js (5)
13-15
: Good setup for clean test environment.The
beforeEach
block ensures that each test runs in a clean environment.
52-117
: Reduce redundancy in mockingconsole.log
.Consider moving the
jest.spyOn(console, 'log').mockImplementation(() => {})
to thebeforeEach
block to avoid redundancy.
143-227
: Reduce redundancy in mockingconsole.log
.Consider moving the
jest.spyOn(console, 'log').mockImplementation(() => {})
to thebeforeEach
block to avoid redundancy.
233-270
: Reduce redundancy in mockingconsole.log
.Consider moving the
jest.spyOn(console, 'log').mockImplementation(() => {})
to thebeforeEach
block to avoid redundancy.
272-286
: Comprehensive tests for invalid configurations.The tests cover various scenarios for the
remove()
method with invalid configurations.
Modules are always executed in strict mode, so you don't need to include the 'use strict' directive at the beginning of your module files. This makes the directive redundant in the context of modules.
There was a problem hiding this 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
Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Files selected for processing (2)
- src/utilities/tests/sanitize-value.test.js (1 hunks)
- src/utilities/sanitize-value.js (1 hunks)
Additional context used
Learnings (1)
src/utilities/sanitize-value.js (2)
Learnt from: chessurisme PR: free-bird-operation-project/quiz-manager#19 File: src/utilities/sanitize-value.js:12-12 Timestamp: 2024-07-31T05:15:56.229Z Learning: Using a flag variable in the `sanitizeValue` function helps keep error handling organized by allowing multiple validation checks to be performed before deciding to return null. This approach makes the code cleaner and easier to understand.
Learnt from: chessurisme PR: free-bird-operation-project/quiz-manager#12 File: src/utilities/sanitize-value.js:41-46 Timestamp: 2024-07-31T13:19:16.595Z Learning: The `sanitizeValue` function should use a flag variable for error handling to maintain organized and clean code.
Biome
src/utilities/sanitize-value.js
[error] 59-59: Invalid
typeof
comparison value: this expression is not a string literalnot a string literal
(lint/suspicious/useValidTypeof)
Additional comments not posted (11)
src/utilities/__tests__/sanitize-value.test.js (6)
20-26
: LGTM!The test case correctly checks if
sanitizeValue
returns null and logs an error when the value is undefined or null.
28-31
: LGTM!The test case correctly checks if
sanitizeValue
returns null and logs an error when the type is missing.
33-38
: LGTM!The test case correctly checks if
sanitizeValue
returns null and logs an error when the value is of an invalid type.
40-43
: LGTM!The test case correctly checks if
sanitizeValue
returns null and logs an error when the type is not a string.
45-50
: LGTM!The test case correctly checks if
sanitizeValue
returns null and logs an error when the value does not match the specified type.
52-60
: LGTM!The test case correctly checks if
sanitizeValue
returns the value if all validations pass.src/utilities/sanitize-value.js (5)
21-63
: Acknowledged: Use of flag variable for error handling.The use of a flag variable for error handling is acknowledged as per the user's preference. The condition list is well-structured and covers various validation checks.
Tools
Biome
[error] 59-59: Invalid
typeof
comparison value: this expression is not a string literalnot a string literal
(lint/suspicious/useValidTypeof)
65-70
: LGTM!The loop correctly iterates over the condition list and logs errors for any conditions that are met.
72-74
: LGTM!The flag check and return statement correctly ensure that the function returns null if any validation checks failed.
76-76
: LGTM!The final return statement correctly ensures that the function returns the value if all validations pass.
1-19
: Enhance the function documentation with additional examples.The documentation is clear and detailed, but it can be enhanced by providing more examples of usage.
* @returns {*} The original `value` if all validations pass; otherwise, `null`. + * + * @example + * sanitizeValue('test', 'string') // returns 'test' + * sanitizeValue(123, 'number') // returns 123 + * sanitizeValue(null, 'string') // returns null + * sanitizeValue([], 'array') // returns [] + * sanitizeValue({}, 'object') // returns {} + * sanitizeValue(document.createElement('div'), 'HTMLElement') // returns <div></div> */Likely invalid or redundant comment.
Removed the `sanitize-value` function as it was not applicable for components but intended for prerequisites. This change cleans up unnecessary code and focuses on relevant components and functions.
Introduce `addEventListeners` function that attaches event listeners to a specified element based on an array of event objects. Includes a helper function `validateParameters` to ensure the element and events are valid using `sanitizeValue` utility function. Logs an error if validation fails and returns a boolean indicating success.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 6
Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Files selected for processing (4)
- src/components/utilities/tests/add-event-listeners.test.js (1 hunks)
- src/components/utilities/tests/remove-event-listeners.test.js (1 hunks)
- src/components/utilities/add-event-listeners.js (1 hunks)
- src/components/utilities/remove-event-listeners.js (1 hunks)
Additional context used
Learnings (1)
src/components/utilities/remove-event-listeners.js (2)
Learnt from: chessurisme PR: free-bird-operation-project/quiz-manager#12 File: src/components/utilities/remove-event-listeners.js:16-18 Timestamp: 2024-07-31T11:39:29.653Z Learning: The `validateParameters` function in `src/components/utilities/remove-event-listeners.js` performs comprehensive error handling by validating the `element` and `events` parameters using the `sanitizeValue` utility and iterating over the `events` array to ensure each event object, type, and function is valid.
Learnt from: chessurisme PR: free-bird-operation-project/quiz-manager#12 File: src/components/utilities/remove-event-listeners.js:38-47 Timestamp: 2024-07-31T11:36:56.011Z Learning: In validation loops, using a flag to catch all errors is preferred to ensure comprehensive error handling and debugging.
Additional comments not posted (9)
src/components/utilities/remove-event-listeners.js (2)
30-50
: Consider optimizing the validation loop.The validation loop could be optimized by breaking early if an invalid event is found. However, if the goal is to catch all errors, the current implementation with a flag is appropriate.
16-18
: Consider adding error handling for event removal.While the function assumes that
removeEventListener
will succeed, it might be beneficial to add error handling to catch potential issues during event removal.- events.forEach((event) => { - element.removeEventListener(event.type, event.func) - }) + try { + events.forEach((event) => { + element.removeEventListener(event.type, event.func) + }) + } catch (error) { + console.error('Error removing event listener:', error) + return false + }Likely invalid or redundant comment.
src/components/utilities/add-event-listeners.js (1)
30-50
: Consider optimizing the validation loop.The validation loop could be optimized by breaking early if an invalid event is found. However, if the goal is to catch all errors, the current implementation with a flag is appropriate.
src/components/utilities/__tests__/remove-event-listeners.test.js (1)
53-71
: Ensure comprehensive error logging.The test for comprehensive error logging is well-structured. Ensure that all possible error messages are covered in the assertions.
src/components/utilities/__tests__/add-event-listeners.test.js (5)
10-21
: LGTM!The test case correctly verifies that event listeners are added to a valid HTML element.
23-34
: LGTM!The test case correctly verifies that the function returns false and logs an error when the element is not provided.
36-47
: LGTM!The test case correctly verifies that the function returns false and logs an error when the events array is not provided.
49-64
: LGTM!The test case correctly verifies that the function returns false and logs an error when any event object in the array is invalid.
66-75
: LGTM!The test case correctly verifies that the function returns false and logs an error when both parameters are invalid.
Provide more specific error messages to help identify the exact issue with the parameters. Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Files selected for processing (1)
- src/components/utilities/remove-event-listeners.js (1 hunks)
Additional context used
Learnings (1)
src/components/utilities/remove-event-listeners.js (2)
Learnt from: chessurisme PR: free-bird-operation-project/quiz-manager#12 File: src/components/utilities/remove-event-listeners.js:16-18 Timestamp: 2024-07-31T11:39:29.653Z Learning: The `validateParameters` function in `src/components/utilities/remove-event-listeners.js` performs comprehensive error handling by validating the `element` and `events` parameters using the `sanitizeValue` utility and iterating over the `events` array to ensure each event object, type, and function is valid.
Learnt from: chessurisme PR: free-bird-operation-project/quiz-manager#12 File: src/components/utilities/remove-event-listeners.js:38-47 Timestamp: 2024-07-31T11:36:56.011Z Learning: In validation loops, using a flag to catch all errors is preferred to ensure comprehensive error handling and debugging.
Additional comments not posted (5)
src/components/utilities/remove-event-listeners.js (5)
3-9
: Well-documented function.The function documentation is clear and provides a comprehensive description of the parameters and return value.
23-29
: Well-documented function.The function documentation is clear and provides a comprehensive description of the parameters and return value.
31-36
: Comprehensive validation for element and events parameters.The validation logic for the element and events parameters is thorough and ensures that both parameters are valid before proceeding.
38-47
: Consider optimizing the validation loop.The validation loop could be optimized by breaking early if an invalid event is found. However, if the goal is to catch all errors, the current implementation is appropriate.
16-18
: Consider adding error handling for event removal.While the function assumes that
removeEventListener
will succeed, it might be beneficial to add error handling to catch potential issues during event removal.- events.forEach((event) => { - element.removeEventListener(event.type, event.func) - }) + try { + events.forEach((event) => { + element.removeEventListener(event.type, event.func) + }) + } catch (error) { + console.error('Error removing event listener:', error) + return false + }Likely invalid or redundant comment.
Provide more specific error messages to help identify the exact issue with the parameters. Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this 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
Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Files selected for processing (1)
- src/components/utilities/tests/remove-event-listeners.test.js (1 hunks)
Additional comments not posted (6)
src/components/utilities/__tests__/remove-event-listeners.test.js (6)
12-23
: LGTM!The test case correctly verifies the removal of event listeners from a valid HTML element.
25-31
: LGTM!The test case correctly verifies that the function returns false when the element is not provided.
33-39
: LGTM!The test case correctly verifies that the function returns false when the events array is not provided.
41-51
: LGTM!The test case correctly verifies that the function returns false when any event object in the array is invalid.
53-71
: LGTM!The test case correctly verifies that comprehensive errors are logged when validation fails.
73-78
: LGTM!The test case correctly verifies that the function handles elements with no event listeners attached.
Introduced `BaseComponent` class with methods to create and manage DOM elements. The class includes methods for creating container elements with attributes, icons, and text elements, and for removing elements by ID. Utilizes `sanitizeValue` for input validation and `setAttributes` for setting attributes on elements. This class provides a base for building components with common utility functions.
Switched from raw DOM manipulation to using `BaseComponent` for a more organized structure. Renamed methods and variables for clarity and consistency. Added `sanitizeValue` to validate configuration. Replaced direct event listener management with `addEventListeners` and `removeEventListeners` utilities. Updated method documentation and parameter types for better readability and maintainability.
Refactored Checkbox class to extend BaseComponent for improved structure. Replaced raw DOM manipulation with _createContainer method from BaseComponent. Updated method names and parameters for clarity. Removed local storage handling and click event management for simplicity. Incorporated sanitizeValue to validate configuration input.
Refactored Tab class to extend `BaseComponent` for improved structure and consistency. Replaced raw DOM manipulation with `_createContainer` method from `BaseComponent`. Updated `create` method to handle button instances and apply 'tab-button' class. Improved `remove` method to handle button removal and catch errors, ensuring tab element is also removed. Incorporated `sanitizeValue` for configuration validation.
Refactored static methods and variables for better readability and consistency. Simplified DOM manipulation by using `id` directly for snackbar element. Renamed variables and methods for clarity and consistency with naming conventions. Improved animation handling for snackbar removal.
Inherited from `BaseComponent` for consistency. Improved `create` method to use `_createContainer` and `_createText` methods for better modularity. Refactored `remove`, `lock`, and `unlock` methods to return boolean values indicating success. Simplified attribute manipulation for readability.
Inherited from `BaseComponent` to maintain consistency with other components. Updated `create` method to use `_createContainer` and `_createIcon` methods for modularity. Refactored `remove` method to handle button instances and return a boolean indicating success. Simplified `modifyButtons` method by integrating ID assignment directly into `create`. Added detailed comments and improved method documentation.
Inherited from `BaseComponent` for consistency with other components. Updated `create` method to use `_createContainer` for creating header and body sections. Integrated `Button` component directly into `create` method for dynamic button creation. Refactored `remove` method to use improved node removal logic and handle element instances. Simplified internal methods for creating and removing nodes, and updated attribute handling. Added detailed comments for improved code clarity and maintainability.
@coderabbitai review |
Actions performedReview triggered.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 9
Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Files selected for processing (9)
- src/components/base-component.js (1 hunks)
- src/components/button.js (1 hunks)
- src/components/checkbox.js (1 hunks)
- src/components/modal.js (1 hunks)
- src/components/page.js (1 hunks)
- src/components/snackbar.js (1 hunks)
- src/components/tab.js (1 hunks)
- src/components/textarea.js (1 hunks)
- src/components/utilities/add-event-listeners.js (1 hunks)
Additional context used
Learnings (1)
src/components/utilities/add-event-listeners.js (3)
Learnt from: chessurisme PR: free-bird-operation-project/quiz-manager#12 File: src/components/utilities/remove-event-listeners.js:16-18 Timestamp: 2024-07-31T11:39:29.653Z Learning: The `validateParameters` function in `src/components/utilities/remove-event-listeners.js` performs comprehensive error handling by validating the `element` and `events` parameters using the `sanitizeValue` utility and iterating over the `events` array to ensure each event object, type, and function is valid.
Learnt from: chessurisme PR: free-bird-operation-project/quiz-manager#12 File: src/components/utilities/add-event-listeners.js:16-18 Timestamp: 2024-08-01T05:32:35.938Z Learning: The `addEventListeners` function in `src/components/utilities/add-event-listeners.js` relies on `validateParameters` for initial validation but does not include error handling for the `addEventListener` calls themselves.
Learnt from: chessurisme PR: free-bird-operation-project/quiz-manager#12 File: src/components/utilities/add-event-listeners.js:1-1 Timestamp: 2024-08-01T05:30:00.781Z Learning: chessurisme prefers using the `export {}` syntax at the bottom of each module for consistency across the codebase.
Biome
src/components/snackbar.js
[error] 93-93: Reassigning a function parameter is confusing.
The parameter is declared here:
Use a local variable instead.
(lint/style/noParameterAssign)
Additional comments not posted (18)
src/components/utilities/add-event-listeners.js (2)
1-1
: Acknowledged: Export style preference.The export style using
export {}
at the bottom of the module is consistent with your preference across the codebase.
16-18
: Consider adding error handling for event addition.While the function assumes that
addEventListener
will succeed, it might be beneficial to add error handling to catch potential issues during event addition.- events.forEach((event) => { - element.addEventListener(event.type, event.func) - }) + try { + events.forEach((event) => { + element.addEventListener(event.type, event.func) + }) + } catch (error) { + console.error('Error adding event listener:', error) + return false + }src/components/checkbox.js (1)
16-69
: Well-structured class and methods.The
Checkbox
class is well-organized, with clear methods for creating and removing checkbox elements. The use ofsanitizeValue
for configuration validation is a good practice.src/components/tab.js (1)
12-71
: Well-structured class and methods.The
Tab
class is well-organized, with clear methods for creating and removing tab elements. The inclusion of error handling in theremove
method is a good practice.src/components/modal.js (1)
21-24
: Constructor is well-implemented.The constructor correctly initializes and sanitizes the configuration.
src/components/textarea.js (2)
13-16
: Constructor is well-implemented.The constructor correctly initializes and sanitizes the configuration.
48-58
: Remove method is well-implemented.The method correctly removes the textarea element if it exists.
src/components/snackbar.js (3)
20-22
: Constructor is well-implemented.The constructor correctly initializes and sanitizes the configuration.
27-30
: RenderThenRemove method is well-implemented.The method correctly enqueues the message for display.
37-40
: Enqueue method is well-implemented.The method correctly manages the message queue.
src/components/button.js (2)
65-77
: LGTM! Theremove
method is well-implemented.The method correctly detaches event listeners and removes the button element from the DOM.
26-29
: Constructor looks good, but verifysanitizeValue
.The constructor correctly initializes the button with a sanitized configuration.
Please ensure that the
sanitizeValue
function effectively sanitizes the input.Run the following script to verify the implementation of
sanitizeValue
:src/components/page.js (2)
90-114
: LGTM! Theremove
method is well-implemented.The method correctly detaches elements and removes the page element from the DOM.
21-24
: Constructor looks good, but verifysanitizeValue
.The constructor correctly initializes the page with a sanitized configuration.
Please ensure that the
sanitizeValue
function effectively sanitizes the input.Run the following script to verify the implementation of
sanitizeValue
:src/components/base-component.js (4)
52-62
: LGTM! The_createIcon
method is well-implemented.The method correctly creates an icon element with the specified icon name.
70-80
: LGTM! The_createText
method is well-implemented.The method correctly creates a text element with the specified text content.
88-103
: LGTM! The_removeById
method is well-implemented.The method correctly removes an element from the DOM by its ID.
15-17
: Constructor looks good, but verifysanitizeValue
.The constructor correctly initializes the component with a sanitized configuration.
Please ensure that the
sanitizeValue
function effectively sanitizes the input.Run the following script to verify the implementation of
sanitizeValue
:
Added the 'object' type parameter to the `sanitizeValue`
…onal Updated the tagName from 'div' to 'textarea' to reflect the correct HTML element. Made the text value optional by adjusting how the text content is handled.
Updated the JSDoc typedef for the Textarea component's config to accurately reflect the expected properties and types.
There was a problem hiding this 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
Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Files selected for processing (1)
- src/components/textarea.js (1 hunks)
Additional comments not posted (5)
src/components/textarea.js (5)
1-17
: Imports and class declaration look good.The imports and class declaration are appropriate for the functionality provided.
23-26
: Constructor implementation is correct.The constructor properly initializes the
Textarea
instance with a sanitized configuration object.
33-53
:create
method is well-implemented.The method effectively constructs a textarea element using the provided configuration.
60-71
:remove
method is correctly implemented.The method successfully removes the textarea element from the DOM and returns a boolean indicating success.
73-107
: Consider combininglock
andunlock
methods.Both methods toggle the read-only state of the textarea. Consider combining them into a single method to reduce redundancy.
toggleLock(lock) { const { id } = this.config const elementId = `textarea-${id}` const textarea = document.getElementById(elementId) if (textarea) { textarea.readOnly = lock return true } return false }
❓ What type of PR is this?
💬 Description
This PR includes common components that are reusable throughout the codebase.
🎟️ Related Tickets & Documents
Button
component #3, ImplementTab
component #5, ImplementSnackbar
component #6, ImplementTextarea
component #7, ImplementPage
component #8, ImplementCheckbox
component #9, ImplementModal
component #10, and ImplementContainer
component #13🃏 Added/updated tests?
We encourage you to keep the code coverage percentage at 90% and above.
📚 Resources for Reviewers
See this link : https://github.com/free-bird-operation-project/quiz-manager/wiki/Components
🌿 What branch would you like to merge this into?
develop
📷 [optional] What gif best describes this PR or how it makes you feel?
* ready to build a skyscraper! 🤪
Summary by CodeRabbit
New Features
sanitizeValue
utility function to validate and sanitize input values, promoting data integrity and preventing runtime errors.Textarea
class for creating and managing textarea elements, including methods for creating, removing, locking, and unlocking the textarea.Bug Fixes
Documentation
Chores