minima-ui v0.3.0

Minima UI

This is a library of reusable React UI components created with simplicity, customization and accessibility in mind.

The library is written in TypeScript. It utilizes styled-components for styling and Jest for testing.

Components

The library includes the following components:

Containers

1. Table - a virtualized table with sorting and column resizing that allows custom cell renderers;
2. Tooltip - a wrapper around an element that shows a tooltip on hover;
3. Modal - a modal dialog.

Inputs

1. Button - a basic button;
2. CheckBox - a basic checkbox;
3. Switch - a button that allows the user to switch between "on" and "off" states;
4. TextInput - a text input component that support single- and multi-line modes;
5. ComboBox - a control allowing the user to search and select among a list of options;
6. RadioGroup - a control allowing the user select an option among a list of radio buttons;
7. Slider - a slider with multi-thumb support.

Display

1. Icon - an SVG icon component that is easily scalable and includes a few preset icons;
2. ProgressBar - a basic progress bar.

Utility

1. List - a basic virtualized list/

Installation and usage

To install minima-ui, use the following command:

npm i minima-ui

To use the library in your app, import one or more of the included components:

import {useState} from 'react';

import {ComboBox} from 'minima-ui';

const App = (): JSX.Element => {
  const [value, setValue] = useState(0);

  return <div>
    <ComboBox
      options={Array.from({length: 1000}, (v, i) => ({
        value: i,
        label: `Option ${i+1}`
      }))}
      value={value}
      onChange={setValue}
    />
  </div>;
};

export default App;

Documentation

The library uses Storybook for documentation.

The GitHub Page with the Storybook is available here.