# Call for Implementation of an OpenELIS style Guide

**URL:** <https://talk.openelis-global.org/t/call-for-implementation-of-an-openelis-style-guide/1512>\
**Category:** Development\
**Tags:** dev\
**Created:** [April 23, 2025, 9:02am UTC](https://talk.openelis-global.org/t/call-for-implementation-of-an-openelis-style-guide/1512 "2025-04-23T09:02:14Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Agaba\_Derrick\_Junior](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/agaba_derrick_junior/32/503_2.png) [@Agaba\_Derrick\_Junior](https://talk.openelis-global.org/u/Agaba_Derrick_Junior)\
**Post date:** [April 23, 2025, 9:02am UTC](https://talk.openelis-global.org/t/call-for-implementation-of-an-openelis-style-guide/1512/1 "2025-04-23T09:02:14Z")

</div>

I would like to propose the creation of a **comprehensive style guide and contribution reference** for OpenELIS Global — one that spans the entire tech stack: backend, frontend, integration, and E2E tests, dataset conventions, and our UI design system.

As OpenELIS continues to grow and more contributors get involved, **maintaining consistency across our stack** will improve maintainability, reduce friction for new devs, and ensure smoother PR reviews.

### what to cover in the guide:

#### Backend

- Naming conventions (classes, fields, services)
- Folder structure and layering
- Exception handling, logging, and validation patterns
- Integration test structure using datasets + DBUnit

#### Datasets

- Naming conventions and organization
- Minimal, clean test data principles
- Use of schema validation

#### **Frontend (React)**

- Component Structure and Folder Layout

- Organize components by domain or feature, not by type (e.g., group `PatientHeader`, `ConfirmPopup`, etc. under common or relevant feature folders).

- Each component lives in its own `.js` file, and related `.css` (if needed) lives alongside or in a common styles folder.

#### Naming Conventions

- Component names use `PascalCase`.
- File names match the component (e.g., `CytologyCaseView.js`).
- Props should be descriptive and camelCased.
- Contexts use `SomethingContext` or `useSomething` naming patterns.

#### Styling Guidelines

- Use plain `.css` files; no CSS-in-JS
- 
- Reuse styles through shared CSS files where possible (`PathologyDashboard.css`).
- Use BEM or scoped class naming to avoid global class conflicts.

#### Carbon Design System Integration

- Use components directly from `@carbon/react`.
- Always prefer Carbon-provided components unless business logic demands custom implementation.
- Respect Carbon’s accessibility and responsive layout practices.
- For icons, use only what’s available in `@carbon/react/icons`.

#### Other Principles

- Use `react-intl` for all user-facing strings.
- Favor state colocation via hooks (`useState`, `useEffect`, `useRef`) — no external state managers like Redux unless absolutely necessary.
- Maintain clean separation of business logic and presentation within components.

#### **E2E Testing (Cypress)**

- Naming structure and file organization
- Setup and teardown practices
- Interaction with test data / mocking vs real data strategy

#### 📄 **Documentation & Dev Process**

- PR hygiene and checklist
- Branch naming, commit message best practices
- Prettier, ESLint, Spotless, and CI formatting enforcement

### Initial Steps:

- Create a Style guide in an OpenELIS Wiki.
- Link it in `CONTRIBUTING.md` and in `PULL_REQUEST_TEMPLATE.md`.
- Provide small usage examples and link to tooling configs.

---

<div class="post-metadata">

**Author:** ![Agaba\_Derrick\_Junior](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/agaba_derrick_junior/32/503_2.png) [@Agaba\_Derrick\_Junior](https://talk.openelis-global.org/u/Agaba_Derrick_Junior)\
**Post date:** [April 23, 2025, 9:17am UTC](https://talk.openelis-global.org/t/call-for-implementation-of-an-openelis-style-guide/1512/2 "2025-04-23T09:17:11Z")

</div>

In the context of trying to enlighten more about this especially in trying to distinguish between a design System and a Style guide, I have come across a few useful resources that were shared.

> **[Why did we choose Carbon Design System over our previous Style Guides? -...](https://openmrs.atlassian.net/wiki/spaces/Archives/pages/25472503/Why+did+we+choose+Carbon+Design+System+over+our+previous+Style+Guides)**

> **[Design systems | Technology Radar | Thoughtworks](https://www.thoughtworks.com/radar/techniques/design-systems)**
>
> As application development becomes increasingly dynamic and complex, it's a challenge to deliver accessible and usable products with consistent style. This is particularly true in \[...\]

let me know if this is insightful and if there is any more consideration about it

---

<div class="post-metadata">

**Author:** ![caseyi](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/caseyi/32/65_2.png) [@caseyi](https://talk.openelis-global.org/u/caseyi)\
**Post date:** [April 24, 2025, 7:18pm UTC](https://talk.openelis-global.org/t/call-for-implementation-of-an-openelis-style-guide/1512/3 "2025-04-24T19:18:23Z")

</div>

Hi @Agaba_Derrick_Junior I think this is a fantastic idea, and I really appreciate your initiative on this! We are using Carbon just like OpenMRS, and so I think that is a perfect example, and perhaps we can re-use some of the same guidance to keep things aligned and make like easy for those who are contributing to O3 as well.

I would absolutely support the community taking this on, and working on making decisions on the community call on things like the naming conventions (some of which are covered in other places, but it needs to be brought together) and publishing the guide within our wiki and on Github. @Moses_Mutesasira and @Taib_Abdillahi I’m wondering if you guys can help to facilitate this on the OpenELIS community calls.

I anticipate this being a long-term project to get everything, though, so maybe we can also set a polished version as a goal for the next Google Docs season in February 2025, to to build on that work.

---

<div class="post-metadata">

**Author:** ![DebbieLou](https://avatars.discourse-cdn.com/v4/letter/d/e36b37/32.png) [@DebbieLou](https://talk.openelis-global.org/u/DebbieLou)\
**Post date:** [April 24, 2025, 7:54pm UTC](https://talk.openelis-global.org/t/call-for-implementation-of-an-openelis-style-guide/1512/4 "2025-04-24T19:54:29Z")

</div>

You are spot on. I’m interested in contributing to this community but my biggest challenge has been finding documentation.

---

<div class="post-metadata">

**Author:** ![Taib\_Abdillahi](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/taib_abdillahi/32/110_2.png) [@Taib\_Abdillahi](https://talk.openelis-global.org/u/Taib_Abdillahi)\
**Post date:** [April 25, 2025, 8:14am UTC](https://talk.openelis-global.org/t/call-for-implementation-of-an-openelis-style-guide/1512/5 "2025-04-25T08:14:32Z")

</div>

We will initiate the conversation on the next dev call on 1st May, 2025.

---

<div class="post-metadata">

**Author:** ![Agaba\_Derrick\_Junior](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/agaba_derrick_junior/32/503_2.png) [@Agaba\_Derrick\_Junior](https://talk.openelis-global.org/u/Agaba_Derrick_Junior)\
**Post date:** [April 25, 2025, 11:02am UTC](https://talk.openelis-global.org/t/call-for-implementation-of-an-openelis-style-guide/1512/6 "2025-04-25T11:02:01Z")

</div>

@caseyi thanks for the insight,  
we will add this on the agender for the next call  
cc @ [Taib\_Abdillahi](https://talk.openelis-global.org/u/Taib_Abdillahi)  
@Moses_Mutesasira

---

<div class="post-metadata">

**Author:** ![Agaba\_Derrick\_Junior](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/agaba_derrick_junior/32/503_2.png) [@Agaba\_Derrick\_Junior](https://talk.openelis-global.org/u/Agaba_Derrick_Junior)\
**Post date:** [April 25, 2025, 11:08am UTC](https://talk.openelis-global.org/t/call-for-implementation-of-an-openelis-style-guide/1512/7 "2025-04-25T11:08:50Z")

</div>

hello @DebbieLou this [readme](https://github.com/DIGI-UW/OpenELIS-Global-2) can help you set up the environment  
and the link to our [Documentation](https://uwdigi.atlassian.net/wiki/spaces/OG/pages/240844805/Dev+Environment+Setup+Instructions)

---

<div class="post-metadata">

**Author:** ![DebbieLou](https://avatars.discourse-cdn.com/v4/letter/d/e36b37/32.png) [@DebbieLou](https://talk.openelis-global.org/u/DebbieLou)\
**Post date:** [April 25, 2025, 11:22am UTC](https://talk.openelis-global.org/t/call-for-implementation-of-an-openelis-style-guide/1512/8 "2025-04-25T11:22:39Z")

</div>

Well received.

Thank you for the fast response.

---

<div class="post-metadata">

**Author:** ![Dev](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/dev/32/869_2.png) [@Dev](https://talk.openelis-global.org/u/Dev)\
**Post date:** [April 30, 2025, 9:38am UTC](https://talk.openelis-global.org/t/call-for-implementation-of-an-openelis-style-guide/1512/9 "2025-04-30T09:38:05Z")

</div>

Hi @Agaba_Derrick_Junior,  
I believe it’s a fantastic idea—and I’ve actually proposed E2E testing using Cypress in my GSoC proposal. As part of that, I’ve also included this part to help new contributors, covering:

Naming structure and file organization

Setup and teardown practices

Interaction with test data (mocking vs real data)

@Moses_Mutesasira @caseyi ,this should definitely be a topic to look at in my proposal, as it’s aimed at improving the onboarding and usability experience for those working on E2E tests.

---

<div class="post-metadata">

**Author:** ![Moses\_Mutesasira](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/moses_mutesasira/32/72_2.png) [@Moses\_Mutesasira](https://talk.openelis-global.org/u/Moses_Mutesasira)\
**Post date:** [May 21, 2025, 11:40am UTC](https://talk.openelis-global.org/t/call-for-implementation-of-an-openelis-style-guide/1512/10 "2025-05-21T11:40:54Z")

</div>

Hello @Agaba_Derrick_Junior , sorry i havent been update date with this. Any Update ??

---

<div class="post-metadata">

**Author:** ![Agaba\_Derrick\_Junior](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/agaba_derrick_junior/32/503_2.png) [@Agaba\_Derrick\_Junior](https://talk.openelis-global.org/u/Agaba_Derrick_Junior)\
**Post date:** [May 21, 2025, 1:22pm UTC](https://talk.openelis-global.org/t/call-for-implementation-of-an-openelis-style-guide/1512/11 "2025-05-21T13:22:35Z")

</div>

We have some ready work to present in the dev call tomorrow !

---

<div class="post-metadata">

**Author:** ![Agaba\_Derrick\_Junior](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/agaba_derrick_junior/32/503_2.png) [@Agaba\_Derrick\_Junior](https://talk.openelis-global.org/u/Agaba_Derrick_Junior)\
**Post date:** [May 29, 2025, 3:46pm UTC](https://talk.openelis-global.org/t/call-for-implementation-of-an-openelis-style-guide/1512/12 "2025-05-29T15:46:29Z")

</div>

hello Community,  
here is a link to our rough Draft of the OpenELIS Style guide  
Feel free to add a comment or improve any part

> **[OpenELIS Global Style Guide - OpenELIS Global - DIGI Wiki](https://uwdigi.atlassian.net/wiki/spaces/OG/pages/621346838/OpenELIS+Global+Style+Guide)**

@Moses_Mutesasira @Taib_Abdillahi @tasksolver @caseyi

---

<div class="post-metadata">

**Author:** ![tasksolver](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.openelis-global.org/tasksolver/32/1067_2.png) [@tasksolver](https://talk.openelis-global.org/u/tasksolver)\
**Post date:** [May 29, 2025, 3:51pm UTC](https://talk.openelis-global.org/t/call-for-implementation-of-an-openelis-style-guide/1512/13 "2025-05-29T15:51:49Z")

</div>

thanks @Agaba_Derrick_Junior .
