feat: readonly fields

[SalihuDickson]

Description

Fixes #376

Checklist

• [ ] My code follows the contributing guidelines of this project.
• [ ] I am aware that all my commits will be squashed into a single commit, using the PR title as the commit message.
• [ ] I have performed a self-review of my own code.
• [ ] I have commented my code in hard-to-understand areas.
• [ ] I have updated the user-facing documentation to describe any new or changed behavior.
• [ ] My changes generate no new warnings.
• [ ] I have added tests that prove my fix is effective or that my feature works.
• [ ] I have not reduced the existing code coverage.

Comments

Summary by Sourcery

Add a 'readonly' option to form fields to allow them to be disabled, and enhance tooltip handling by trimming whitespace.

New Features:

• Introduce a 'readonly' field option to form components, allowing fields to be displayed as disabled when specified.

Enhancements:

• Improve tooltip handling by trimming whitespace to ensure tooltips are only displayed when content is present.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: d18c7c0ab9a706e096e8e94aeaea209679c1f83a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

| Name | Type | | -------------------- | ----- | | @elixir-cloud/design | Patch | | @elixir-cloud/tes | Patch | | @elixir-cloud/wes | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
elixir-cloud-components	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 4, 2024 10:51pm

[sourcery-ai[bot]]

Reviewer's Guide by Sourcery

This PR implements readonly functionality for form fields and improves tooltip handling. The changes primarily focus on adding a readonly option to various form field types and refactoring tooltip checks to use trim(). Additionally, new input height variables have been introduced for larger form elements.

Class diagram for EccUtilsDesignForm with readonly fields

classDiagram
    class EccUtilsDesignForm {
        +Field[] fields
        +render()
        +handleTusFileUpload(Event, Field)
    }
    class Field {
        +String key
        +String label
        +FieldOptions fieldOptions
        +FileOptions fileOptions
        +String type
    }
    class FieldOptions {
        +String accept
        +Boolean returnIfEmpty
        +String tooltip
        +Boolean readonly
        +Boolean required
        +Boolean multiple
    }
    class FileOptions {
        +String protocol
    }
    EccUtilsDesignForm --> Field
    Field --> FieldOptions
    Field --> FileOptions
    note for FieldOptions "Added readonly attribute"

File-Level Changes

Change	Details	Files
Added readonly field support to form components	Added readonly property to field options interface Implemented disabled attribute binding for switch components Added readonly support for file inputs Implemented readonly state for select components Added readonly support for text/password inputs	packages/ecc-utils-design/src/components/form/form.ts
Improved tooltip handling in form components	Refactored tooltip existence checks to use trim() Standardized tooltip rendering logic across different form field types	packages/ecc-utils-design/src/components/form/form.ts
Enhanced styling system with new height variables	Added xlarge, 2xlarge, and 3xlarge input height variables Introduced minimum height for group items using new height variable	packages/ecc-utils-design/src/styles/primitive.styles.ts packages/ecc-utils-design/src/components/form/form.styles.ts

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#376	Add support for readonly input fields in the form component	✅

Possibly linked issues

• #376: The PR implements readonly fields, directly addressing the issue's request for readonly input support.

---

Tips and commands

#### Interacting with Sourcery - **Trigger a new review:** Comment `@sourcery-ai review` on the pull request. - **Continue discussions:** Reply directly to Sourcery's review comments. - **Generate a GitHub issue from a review comment:** Ask Sourcery to create an issue from a review comment by replying to it. - **Generate a pull request title:** Write `@sourcery-ai` anywhere in the pull request title to generate a title at any time. - **Generate a pull request summary:** Write `@sourcery-ai summary` anywhere in the pull request body to generate a PR summary at any time. You can also use this command to specify where the summary should be inserted. #### Customizing Your Experience Access your [dashboard](https://app.sourcery.ai) to: - Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others. - Change the review language. - Add, remove or edit custom review instructions. - Adjust other review settings. #### Getting Help - [Contact our support team](mailto:support@sourcery.ai) for questions or feedback. - Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information. - Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).

[SalihuDickson]

sure @anuragxxd, i'll add the feature to the docs.

[SalihuDickson]

@sivangbagri, when this get's merged please add create a PR to add a single type field back the dataset entity, and it should be a readonly field.

[SalihuDickson]

@anuragxxd, issues have been resolved, please review.