How to use OpenMRS style guide(openmrs-esm-styleguide)?

Development
1

@joeldenning

Application Name: openmrs-esm-styleguide

Version Number: 1.0.0

Question:

We are new to OpenMRS community. We are creating new OpenMRS OWA module. In which we like to use openmrs-esm-styleguide. But we are struggling to use it in our OWA project.

Please help us with any How to use guide available.

Link to our OWA boilerplate where we are trying to implement. (The current implementation is using @openmrs/style-referenceappliation for style guide)

Thanks in advance.

2

@joeldenning @fali do you happen to have any comments on this?

3

Hi @rrameshbtech,

openmrs-esm-styleguide is both a css file and an in-browser javascript module that is loaded via the SystemJS polyfill. For use in an OWA, it will be easier to use it as a CSS file instead of an in-browser module. The documentation for the styleguide css is found at https://styleguide.openmrs.org.

The microfrontends project is not using the OWA spec, since that spec is dead. Instead, we are using npm and node to bundle frontend code and publish the code to npm. What this means is that you can find openmrs-esm-styleguide on npm as @openmrs/esm-styleguide.

A couple options for you on how to use it:

  • Run npm install @openmrs/esm-styleguide . Then copy node_modules/@openmrs/esm-styleguide/dist into your OWA and load it via <link rel="stylesheet" href="/styleguide-entry.css">
  • Go to https://unpkg.com/@openmrs/esm-styleguide/dist/ to get the files. Include them in your OWA that way.
1 Like
4

Another thing to note is that you can see release notes for the styleguide at https://github.com/openmrs/openmrs-esm-styleguide/releases

5

Thanks @joeldenning the information. We will look into this & get back if we have more questions.

6

Thanks for the detail here