Seidr React

A react component library for Seidr.

Usage

Seidr React provides react components and hooks to interact with Seidr's features.

Prerequisites

You have seidr running? Good. All you need is to install Seidr React and leverage its components. We highly recommend using pnpm over npm.

• Create your app
• Install requirements: pnpm i seidr-react

Development

• Install dependencies¹:
  • Run pnpm ci, if you want to install the current version without any changes.
  • Run pnpm i, if you intend to update/change dependencies or the version.
• Run: pnpm run storybook

Configuration

Basic

To leverage Seidr React wrap your react application with SeidrProvider. SeidrProvider has several props, of which baseUrl is the most important. Set it to your Seidr backend URL. If not set, SeidrProvider will assume the baseUrl to be window.location.origin.

SeidrProvider

prop	value	description
baseUrl	string	The base URL of your Seidr application. (Example: www.domain.com/api/v1)
theme	object: MantineThemeOverride	A theme object to style Seidr components (e.g. DataGrid) globally
inheritMantineTheme	boolean	Determines if a MantineTheme from an outer scope should be merged with Seidr's default theme or the MantineTheme provided (see theme property)

Components and Hooks

You now can use Seidr React's components and hooks anywhere in the application.

Hooks

useSeidrInfo

Provides the baseUrl and information from Seidr's SeidrInfo throughout your application. SeidrInfo data will automatically retrieved, once the user is authenticated.

useSeidrTheme

Provides the merged MantineTheme throughout your application.

useSeidrAuth

Provides user, error, loading, signin, signout, update, resetPassword to interact with ** Seidr's** authentication functionality. This hook will also trigger a rerender when user, error and loading change (react lifecycle).

useApi²

Provides path, data, info, queryParams, loading, error, setQueryParams, getEntry, addEntry , updateEntry, deleteEntry to interact with Seidr's BaseModelRestApi. Setting queryParams via setQueryParams will trigger an update of data.

Components

UserMenu

Creates a dropdown according to Mantine's menu. The dropdown includes links to react-router routes with the following paths:

• /users
• /roles
• /permissions
• /viewmenus
• /permissionviews

These paths will be appended to the provided basePath.

prop	value	description
basePath	string	Determines the base path to append the routes' paths to, defaults to /security
Target	ReactNode	A react element to render instead of the default button
children	ReactNode	A set of mantine's Menu.Divider, Menu.Label and Menu.Item to append to the dropdown

SeidrApiProvider

SeidrApiProvider interacts with Seidr's BaseModelRestApi. Path should be the same as resource_name used in BaseModelRestApi.

prop	value	description
path	string	The path segment to add to the baseUrl provided to SeidrProvider. The resulting url should point to a valid Seidr base route. Will ignore baseUrl, if it is a URL.
relation	object: Relation	A base filter to apply (currently used in the context of RelatedAPIs)
initialQueryParams	object: QueryParams	Set initial query parameters

DataGrid²

A feature rich table component that leverages useApi internally. Use this, if you don't want to implement your own table.

prop	value	description
hideToolbar	boolean	Hide toolbar, the toolbar is the upper section containing Settings, Add and Filter
hideFilter	boolean	Hide filters
hideSettings	boolean	Hide settings
hideError	boolean	Hide error modal when a customized error modal is necessary
hideActions	boolean	Hide Action column on every row >
hidePagination	boolean	Hide Pagination
hideAdd	boolean	Hide add button from toolbar
settings	object: Settings	Style settings
rowsPerPageProps	number	Externally control page size
fetchOnMount	boolean	Determines if the table should trigger a data fetch on mount, defaults to true
onSelectEntry	function	Callback to be fired on entry selection
styles	object: DataGridStyles	Interface to style DataGrid (based on Mantine's StylesAPI)

Quick Filter

prop	value	description
name	string	Name of the quick filter to leverage provided by the backend

CheckBoxGroup³

Creates a Mantine Checkbox.Group based on a quick filter of the type multiselect that creates a new filter of the type {col: <quickfilter.column>, opr: 'in', value: } (FilterIn) if it doesn't exist, else updates it.

MultiSelect⁴

Creates a Mantine MultiSelect based on a quick filter of the type multiselect that creates a new filter of the type {col: <quickfilter.column>, opr: 'in', value: } (FilterIn) if it doesn't exist, else updates it.

Select⁵

Creates a Mantine Select based on a quick filter of the type select that creates a new filter of the type {col: <quickfilter.column>, opr: 'eq', value: } (FilterEqual) if it doesn't exist, else updates it.

Authentication

useSeidrAuth assumes the presence of AuthApi provided by Seidr in your backend. Given this and correctly set paths, you gain the full capability of a session based authentication feature which has the same (except OIDC) functionality as Flask Appbuilder's

Styling

Seidr React provides the same StylesAPI as on Mantine.

1. pnpm i will update pnpm-lock.yaml if changes occured, while pnpm ci will wipe your node_modules folder and install dependencies only from pnpm-lock.yaml ↩

2. Can only be used inside of SeidrApiProvider. ↩ ↩²

3. Also supports any prop for Mantine's CheckBox.Group ↩

4. Also supports any prop for Mantine's MultiSelect ↩

5. Also supports any prop for Mantine's Select ↩