Creating your first custom form component Documentation

[OmolemoBlessingLethuloe]

• Objective: Enhance the shesha documentation to include comprehensive information about custom components and using them within form configurations.

Tasks:

1. Documentation Review:

   • Review the existing documentation to identify gaps related to custom components.
   • Ensure accuracy and relevance of the current documentation.

2. Content Creation:

   • Create detailed documentation for adding custom pages, covering step-by-step instructions.
   • Document best practices and guidelines for creating effective custom components.

3. Code Samples:

   • Include code samples and examples to illustrate the implementation of custom components.
   • Ensure code snippets are well-commented and easy to understand.

4. Integration with Existing Documentation:

   • Integrate the new documentation seamlessly with the existing documentation structure.
   • Update relevant sections to cross-reference the information on custom components.

5. Visual Aids:

   • Include diagrams, flowcharts, or screenshots to enhance the clarity of the documentation.
   • Visual aids should support the understanding of the concepts and procedures.

6. Testing Documentation:

   • Create test cases based on the documentation to ensure its effectiveness.
   • Verify that users can successfully follow the documentation to implement custom components.

7. Collaboration:

   • Collaborate with the development team to gather insights and feedback on the documentation.
   • Address any questions or concerns raised during the review process.

8. Version Control:

   • Ensure the documentation is versioned and aligned with the current release.

Definition of Done:

• The documentation is comprehensive and easy to follow.
• Code samples are accurate and well-commented.
• Documentation is integrated with existing documentation and cross-referenced.
• Visual aids enhance the understanding of concepts.
• Documentation has been tested successfully.
• Feedback from the development team has been addressed.
• Documentation is versioned and aligned with the current release.

[hlayisanimazuze]

Add code snipets

[hlayisanimazuze]

Hi @ktsapo , please review this documentation: https://docs.shesha.io/docs/front-end-basics/how-to-guides/custom-components

[hlayisanimazuze]

Hi @Lukeybooi ,I received feedback from the developers who reviewed the documentation. They mentioned that the documentation is too long and suggested adding pagination to break it into smaller, more manageable sections.

Additionally, they found it unclear and difficult to follow, saying it’s not very user-friendly. They also recommended including a step-by-step guide to help users create their first custom component.

[hlayisanimazuze]

@Lukeybooi we also received feedback from Zakhele, see the below comment

How do I create a custom component. The only part I get is exposing it on the app-provider but I can't comprehend where the process starts

and this is from Tshepo

The documentation primarily focuses on the designer component, but I think it would be more helpful to show a simple React component that demonstrates the flow and how everything works, rather than just a div. This would also clarify where the business logic of the component should be placed.
If we could expand more on the folder structure to indicate where to place the designer component, React component, utilities, providers, etc., it would help external contributors follow Boxfusion standards when contributing to the framework.
Additionally, it would be beneficial to include a section for "Additional Things to Know," such as:
How to expose configurable actions for your component
How to access user settings at the code level

In summary, we need to ensure that the documentation is clear and understandable for first-time users, so they don't have many questions after reading it.