https://github.com/folio-org/stripes-components
A component library for Stripes
https://github.com/folio-org/stripes-components
Last synced: 2 months ago
JSON representation
A component library for Stripes
- Host: GitHub
- URL: https://github.com/folio-org/stripes-components
- Owner: folio-org
- License: apache-2.0
- Created: 2016-10-20T15:55:46.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2026-04-10T20:13:10.000Z (2 months ago)
- Last Synced: 2026-04-10T21:35:13.675Z (2 months ago)
- Language: JavaScript
- Homepage: https://dev.folio.org/stripes-components/
- Size: 32.8 MB
- Stars: 17
- Watchers: 27
- Forks: 37
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# stripes-components
Copyright (C) 2016-2019 The Open Library Foundation
This software is distributed under the terms of the Apache License,
Version 2.0. See the file "[LICENSE](LICENSE)" for more information.
- [stripes-components](#stripes-components)
- [Introduction](#introduction)
- [Component categories](#component-categories)
- [Links to documentation of specific components and utilities](#links-to-documentation-of-specific-components-and-utilities)
- [Accessibility](#accessibility)
- [Patterns](#patterns)
- [Testing](#testing)
- [FAQ](#faq)
- [To be documented](#to-be-documented)
- [Additional information](#additional-information)
## Introduction
This is a library of React components and utility functions for use with [the Stripes UI toolkit](https://github.com/folio-org/stripes-core/), part of [the FOLIO project](https://www.folio.org/).
## Storybook
A listing of our components with demonstrations and example usage can be found here:
https://folio-org.github.io/stripes-components
## Component categories
These are general descriptive categories that indicate the type of use cases that components serve. A component can have multiple categories associated with it.
Category | Description
--- | ---
**structure** | These are components that aid in the general structure/layout of your app's UI. They include generic containers and components that render structurally important HTML tags (``, for instance.)
**control** | Components with the control category are form elements and other interactive widgets including ``, `` and `` - additionally, this category includes components that aid the functionality of other control components, such as the way `` is used with ``
**data-display** | Data display components are used for display of dynamic content. These include `` and ``
**design** | These components render ``s and other prominent visual landmarks.
**user-feedback** | These components are geared for making the user aware of happenings in the system. They include `` and ``.
**accessibility** | Components with this category play an important role in developing accessible modules.
**utility** | These components aid in interaction with the FOLIO system.
**prefab** | These components are re-useable pre-constructed components that make re-use of other shared components. Useful constructions such as `` and `` fall into this category.
**obsolete** | Component has been replaced by better solution and is intended for removal in future releases.
## Links to documentation of specific components and utilities
The following components are available in the [lib](lib) directory.
Component | doc | categories
--- | --- | ---
[``](lib/Accordion) | [doc](lib/Accordion/readme.md) | structure
[``](lib/AdvancedSearch) | [doc](lib/AdvancedSearch/readme.md) | control
[``](lib/AuditLog) | [doc](lib/AuditLog/readme.md) | data-display
[``](lib/AutoSuggest) | [doc](lib/AutoSuggest/readme.md) | control
[``](lib/Avatar) | [doc](lib/Avatar/readme.md) | data-display
[``](lib/Badge) | [doc](lib/Badge/readme.md) | data-display, design
[``](lib/Button) | [doc](lib/Button/readme.md) | control
[``](lib/ButtonGroup) | [doc](lib/ButtonGroup/readme.md) | control
[``](lib/Callout) | [doc](lib/Callout/readme.md) | user-feedback
[``](lib/Card) | [doc](lib/Card/readme.md) | structure
[``](lib/Checkbox) | [doc](lib/Checkbox/readme.md) | control
[``](lib/LayoutGrid) | [doc](lib/LayoutGrid/readme.md) | structure
[``](lib/Commander) | [doc](lib/Commander/README.md) | utility
[``](lib/ConfirmationModal) | [doc](lib/ConfirmationModal/readme.md) | control, prefab
[``](lib/ConflictDetectionBanner) | [doc](lib/ConflictDetectionBanner/readme.md) | user-feedback
[``](lib/CountrySelection) | | control
[``](lib/CountrySelection) | | control
[``](lib/Datepicker) | [doc](lib/Datepicker/readme.md) | control
[``](lib/DateRangeWrapper) | [doc](lib/DateRangeWrapper/readme.md) | control
[``](lib/Dropdown) | [doc](lib/Dropdown/readme.md) | control
[``](lib/DropdownButton) | [doc](lib/DropdownButton/readme.md) | control
[``](lib/DropdownMenu) | | control
[``](https://github.com/folio-org/stripes-smart-components/tree/master/lib/EditableList) | [doc](https://github.com/folio-org/stripes-smart-components/blob/master/lib/EditableList/readme.md) | control, prefab
[``](lib/Editor) | [doc](lib/Editor/readme.md) | control
[``](lib/EmptyMessage) | [doc](lib/EmptyMessage/readme.md) | structure
[``](lib/ErrorBoundary) | [doc](lib/ErrorBoundary/readme.md) | user-feedback
[``](lib/ErrorModal) | [doc](lib/ErrorModal/readme.md) | user-feedback
[``](lib/ExportCsv) | [doc](lib/ExportCsv/readme.md) | control
[``](lib/FilterControlGroup) | | control
[``](lib/FilterGroups) | [doc](lib/FilterGroups/readme.md) | control
[``](lib/FilterPaneSearch) | [doc](lib/FilterPaneSearch/readme.md) | obsolete
[``](lib/FocusLink) | [doc](lib/FocusLink/readme.md) | accessibility
[``](lib/FormattedDate) | | data-display
[``](lib/FormattedTime) | | data-display
[``](lib/FormattedUTCDate) | [doc](lib/FormattedUTCDate/readme.md) | data-display
[``](lib/FormField) | [doc](lib/FormField/readme.md) | control
[``](lib/FormFieldArray) | | control
[``](lib/Headline) | [doc](lib/Headline/readme.md) | structure
[``](lib/Highlighter) | [doc](lib/Highlighter/readme.md) | utility
[``](lib/HotKeys) | [doc](lib/HotKeys/readme.md) | utility
[``](lib/Icon) | [doc](lib/Icon/readme.md) | design
[``](lib/IconButton) | [doc](lib/IconButton/readme.md) | control
[``](lib/InfoPopover) | [doc](lib/InfoPopover/readme.md) | control, prefab
[``](lib/KeyboardShortcutsModal) | [doc](lib/KeyboardShortcutsModal/readme.md) | utility
[``](lib/KeyValue) | [doc](lib/KeyValue/readme.md) | data-display
[``](lib/Label) | [doc](lib/Label/readme.md) | control
[``](lib/Layer) | [doc](lib/Layer/readme.md) | structure
[``](lib/Layout) | [doc](lib/Layout/readme.md) | structure
[``](lib/LayoutBox) | | structure
[``](lib/LayoutGrid) | [doc](lib/LayoutGrid/readme.md) | structure
[``](lib/LayoutHeader) | [doc](lib/LayoutHeader/readme.md) | structure
[``](lib/List) | [doc](lib/List/readme.md) | data-display
[``](lib/Loading) | [doc](lib/Loading/readme.md) | design
[``](lib/Loading) | [doc](lib/Loading/readme.md) | design
[``](lib/Loading) | [doc](lib/Loading/readme.md) | design
[``](lib/MenuItem) | [doc](lib/MenuItem/readme.md) | control
[``](lib/MenuSection) | [doc](lib/MenuSection/readme.md) | control
[``](lib/MessageBanner) | [doc](lib/MessageBanner/readme.md) | user-feedback
[``](lib/MetaSection) | [doc](lib/MetaSection/readme.md) | data-display
[``](lib/Modal) | [doc](lib/Modal/readme.md) | container
[``](lib/ModalFooter) | [doc](lib/ModalFooter/readme.md) | container
[``](lib/MultiColumnList) | [doc](lib/MultiColumnList/readme.md) | data-display
[``](lib/MultiSelection) | [doc](lib/MultiSelection/readme.md) | control
[``](lib/NavList) | [doc](lib/NavList/readme.md) | control
[``](lib/NavListItem) | | control
[``](lib/NavListSection) | | control
[``](lib/NoValue) | [doc](lib/NoValue/readme.md) | accessibility
[``](lib/Pane) | [doc](lib/Pane/readme.md) | structure
[``](lib/PaneBackLink) | [doc](lib/PaneBackLink/readme.md) | control
[``](lib/PaneCloseLink) | [doc](lib/PaneCloseLink/readme.md) | control
[``](lib/PaneFooter) | [doc](lib/PaneFooter/readme.md) | structure
[``](lib/PaneHeader) | [doc](lib/PaneHeader/readme.md) | structure
[``](lib/PaneHeaderIconButton) | [doc](lib/PaneHeaderIconButton/readme.md) | control
[``](lib/PaneMenu) | [doc](lib/PaneMenu/readme.md) | control
[``](lib/Paneset) | [doc](lib/Paneset/readme.md) | structure
[``](lib/PaneSubheader) | [doc](lib/PaneSubheader/readme.md) | structure
[``](lib/PasswordStrength) | [doc](lib/PasswordStrength/readme.md) | data-display
[``](https://github.com/folio-org/stripes-core/blob/master/src/Pluggable.js) | | utility
[``](lib/Popover) | [doc](lib/Popover/readme.md) | control
[``](lib/Popper) | [doc](lib/Popper/readme.md) | control
[``](lib/RadioButton) | [doc](lib/RadioButton/readme.md) | control
[``](lib/RadioButtonGroup) | [doc](lib/RadioButtonGroup/readme.md) | control
[``](lib/RepeatableField) | [doc](lib/RepeatableField/readme.md) | control, prefab
[``](lib/LayoutGrid) | [doc](lib/LayoutGrid/readme.md) | structure
[``](lib/SearchField) | [doc](lib/SearchField/readme.md) | control, prefab
[``](lib/Select) | [doc](lib/Select/readme.md) | control
[``](lib/Selection) | [doc](lib/Selection/readme.md) | control
[``](https://github.com/folio-org/stripes-smart-components/tree/master/lib/Settings) | [doc](https://github.com/folio-org/stripes-smart-components/blob/master/lib/Settings/readme.md) | prefab
[``](lib/Spinner) | | design
[``](lib/SRStatus) | [doc](lib/SRStatus/readme.md) | accessibility, user-feedback
[``](lib/TextArea) | | control
[``](lib/TextField) | [doc](lib/TextField/readme.md) | control
[``](lib/TextLink) | [doc](lib/TextLink/readme.md) | control
[``](lib/Timepicker) | [doc](lib/Timepicker/readme.md) | control
[``](lib/Tooltip) | [doc](lib/Tooltip/readme.md) | data-display
There are also various [utility _functions_](util) (as opposed to React components), which are [documented separately](util/README.md).
## Accessibility
* [Accessibility overview](guides/accessibility/AboutAccessibility.stories.mdx) - general overview of some utilities that stripes-components provides.
* [Accessibility for developers](guides/accessibility/AccessibilityDevPrimer.stories.mdx) - dev-specific primer for accessibility. More direct code/component reference - a great intro for those who are unfamiliar to accessibility.
## Patterns
Useful recipes for UI patterns appearing in FOLIO modules.
* [Show/Hide Columns in MCL](guides/patterns/ColumnSelector.stories.mdx) -- Give users the ability to select only the data they need to see.
* [Accessible Routing](guides/patterns/AccessibleRouting.stories.mdx) -- Detail the approaches to implementing accessible focus management.
## Working with dates/times in UI-Modules
We provide a handful of components and utilities for date/time functionality.
* **Datepicker, Timepicker, DateRangeWrapper components** - UI-widgets for accepting date/time input.
* **FormattedDate, FormattedUTCDate, FormattedTime** - Cross-browser convenience components for displaying localized representations of system ISO8601 timestamps.
* [dateTimeUtils](util/DateUtils_readme.md) - A handful of utility functions for working with date/time code in application logic.
* **Hooks**
* useFormatDate - presentational date-formatting.
* useFormatTime - presentational time-formatting.
* useDynamicLocale - loading DayJS locale information within functional components (also available in component form, via `DynamicLocaleRenderer`).
## Testing
Stripes Components' tests are automated browser tests powered by
[Karma](http://karma-runner.github.io) and written using
[Mocha](https://mochajs.org/), [Chai](https://github.com/chaijs/chai),
and [BigTest](https://bigtestjs.io/).
Component tests can be run by navigating to your `stripes-components`
folder and running
```
yarn test
```
This will spin up Karma via
[`stripes-cli`](https://github.com/folio-org/stripes-cli) and run all
tests locally in the Chrome browser.
See our [testing documentation](guides/Testing.stories.mdx) for more information
on writing tests.
## FAQ
Check our [Frequently asked questions for Module developers page](FAQ.md)
## To be documented
XXX Say something about
[`sharedStyles`](lib/sharedStyles/),
[`global.css`](lib/global.css)
and
[`variables.css`](lib/variables.css).
## Additional information
Some related documents:
* [Guide to UI Module Layout Components](guides/UIModuleLayout.stories.mdx)
* [CSS for stripes-components development](guides/CSSinStripes.stories.mdx)
* [Change-log](CHANGELOG.md)
See project [STCOM](https://issues.folio.org/browse/STCOM) (STripes COMponents)
at the [FOLIO issue tracker](https://dev.folio.org/guidelines/issue-tracker/).
Other FOLIO Developer documentation is at [dev.folio.org](https://dev.folio.org/)