@openmined/omui

The OpenMined UI component system for usage in all our web applications and Framer prototyping

Showing:

Popularity

Downloads/wk

6

GitHub Stars

11

Maintenance

Last Commit

7mos ago

Contributors

2

Package

Dependencies

8

Size (min+gzip)

167.0KB

License

Apache-2.0

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

License Version OpenCollective

OpenMined UI

This project is our user interface component library, built in React.js, with imports for Framer. This allows our design team and our UI development team to have a single source of truth between what we design and what we use in building apps and websites.

The project is set up in two folder:

  • omui - The main React.js project, which uses Chakra UI and Styled System as our base. We also live develop our components using Storybook and build them using Parcel.
  • omui.framerfx - The folder-based Framer project, which allows us to use real React components in our UI prototypes.

Basic Installation

If you're looking to begin developing a user-interface with OMUI, you can install the package directly via Yarn:

yarn add @openmined/omui

Or if you prefer NPM:

npm install --save @openmined/omui

Usage

All components are exported via named exports - we don't have a default export. They can be imported at the top of any React file like such:

import { Alert } from '@openmined/omui';

They can then be used in JSX like such:

const MyGreatComponent = (props) => {
  const alertTitle = 'Aww yeah...';
  const alertStatus = 'success';
  const alertText = 'Nice job using an alert, you did it right!';

  return (
    <Alert title={alertTitle} status={alertStatus}>
      {alertText}
    </Alert>
  );
};

In order to use the beautiful theme that OMUI provides you, you need to wrap your entire React application in a <Theme> component. This already has the OMUI theme and any CSS resets loaded in, so you don't need to do this yourself. The following is roughly how you might wrap your React application, but your particular usage may vary slightly:

import React from 'react';
import ReactDOM from 'react-dom';
import { Theme } from '@openmined/omui';

import App from './App';

const rootElement = document.getElementById('root');

ReactDOM.render(
  <Theme>
    <App />
  </Theme>,
  rootElement
);

Support

For support in using this library, please join the #lib_omui Slack channel. If you'd like to follow along with any code changes to the library, please join the #code_omui Slack channel. Click here to join our Slack community!

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

Apache License 2.0

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100