Skip to end of banner
Go to start of banner

Developing UI Modules with Stripes

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

UI Modules and the FOLIO Platform

What is a UI Module?

A FOLIO UI Module is one piece of several modular pieces within a platform. It represents a vertical slice of the functionality that a Library will require from its ILS. As a software developer, it’s very easy to view your FOLIO App as THE entire app, but that is not the realistic view of things. Your FOLIO module will be served alongside other FOLIO modules and must be created in a way that is considerate of inter-module relationships and its functionality as part of the workflows, part of the platform. Now that we’ve said that, on to more good stuff!

What is Okapi (for frontend developers)

What Stripes Provides

Platform Provided Dependencies

React Router

Form Library

Date/Time Library

Data Fetching

Zustand

Development setup

Repository settings

Dev Workspace

Set Okapi URL

Typescript

Linting

Testing

Navigation/Routing

Settings

Fetching Data

What Stripes Provides

OkapiKy
React Query
Caching - Namespacing

Presenting Data

Stripes-components

Common Components

Panes
LayoutGrid
MCL
Form controls

Conditional presentation

IfPermission
IfInterface

Common UI Patterns

3-pane layout

Settings

Plugins

Forms

Feedback
Validation
Callout/ Callout Context

Dates/Times

Styles

CSS-Modules
PostCSS Stack

Handling Changes

Versioning - What constitutes a breaking change?

Contributing

PR Comments

Your PR Comments are a very important part of the contribution process! Good comments will clearly express the intentions of the code and allow reviewers to provide the best direction possible so that we can merge consistent, clean code. Here’s a few items that a good PR comment will have:

  • A link to the applicable Jira ticket.

  • Problem statement - what problem does your code resolve? Is there a buggy behavior? Was logic implemented incorrectly before? How so?

  • Approach - How did you go about resolving the problem? Any uncommon knowledge as to why your solution resolves the issue.

  • Questions, target areas for review - are there any areas of the code that reviewers should focus on?

Jira ticket association

Your Jira ticket ‘UIEXAMPLE-###’ should be in at least two places.

  • Your Branch Name - this will associated it with the ‘Development’ fields on the Jira ticket via the JIRA-Github integration. This allows PO’s and maintainers to easily track progress of the work.

  • A link to the Jira ticket in your PR comment (as mentioned above)

Deprecations/Migrations

SearchAndSort

Stripes-connect

Redux-form/React Final Form

Moment

  • No labels