Grafu Inputs

A React component library for building interactive dashboards, including filter buttons, menus, date range pickers, color pickers, search fields, and more. Leverages Material UI for styled components.

A product of the SimonComputing Technology Innovations Lab

Installation

# Use NPM, yarn, or PNPM
npm install @simoncomputing/grafu-base
npm install @simoncomputing/grafu-inputs

Required Peer Dependencies

# Material UI
npm install @mui/material@^6.5.0
npm install @mui/icons-material@^6.5.0
npm install @mui/x-date-pickers@^7.22.3
npm install @emotion/react@^11.14.0
npm install @emotion/styled@^11.14.0

# Date utilities
npm install date-fns@^2.28.0

Basic Example

const [selection, setSelection] = useState<SingleSelectionType>(states[2]);

<SingleSelect selection={selection} setSelection={setSelection} options={['a', 'b', 'c']} />;

Documentation & Demo

This project uses Storybook to document and demonstrate the components. URL COMING SOON.

Release History

Details for every release are documented in CHANGELOG.md

Exports

Components include:

1. Color Button
2. Color Picker
3. Date Range Picker
4. Date Slider
5. Option Selector
6. Popout Filter
7. Search Field