@mussonindustrial/pyro-mui-joy NPM

pyro-mui-joy

pyro-mui-joy is a port of mui-joy for Ignition Perspective.

Warning This repo is currently in active development, and breaking changes are to be expected.

About Joy UI

Joy UI is an open-source React component library that follows a lightly opinionated design direction, for a clean and modern UI that gives you plenty of room to customize the look and feel.

Maintained by MUI, Joy UI is an alternative to Material UI for projects that don't adhere to Material Design guidelines as a design system starting point.

Joy UI follows a lightly opinionated design direction called Joy Design. Simple and functional, it offers a thoughtfully crafted set of defaults to ensure that your next project looks and feels great before you even begin customizing.

Installation

This project generates several files required for installation:

Light (joy-light), dark (joy-dark), and Auto (joy-auto) CSS theme files for Perspective
An Ignition project import file containing a full set of Perspective Style Classes
A set of fonts

Features

Light/Dark/Auto Modes
Color Inversion Support
Variant/Palette Support

Building

git clone https://github.com/mussonindustrial/pyro
cd pyro
npm install
cd packages/pyro-mui-joy
npm run build

Testing

This project provides a docker-based development server for rapid iteration.

!IMPORTANT You must have a container environment (i.e. Docker) installed on your system to use the development server. After the docker container starts, this projects themes, fonts, and Perspective style classes are automatically loaded into the Ignition gateway. When changes are detected to the project's source files, the theme is rebuilt and re-uploaded to the development server.

git clone https://github.com/mussonindustrial/pyro
cd pyro
npm install
cd packages/pyro-mui-joy
npm run build
npm run dev

Changelog

The changelog is regularly updated to reflect what's changed in each new release.

Stable Release Timeline

The target for v1.0.0 is to support all basic Perspective components and provide a full suite of helper style-classes. Support for complex Perspective components (charts, menus, equipment schedule, trees, etc.) is not a priority.

Resources
- Color Palette
  - Light Mode
  - Dark Mode
  - Auto Mode
- Variant Mixins
- Fonts
- Component Showcase
- Screenshots
Perspective Components
- Button
- Canvas
- Checkbox
- Date-Time Picker (beta)
- Drop Down
- Numeric Entry
- Password Field
- Radio
- Slider (beta)
- Symbol
- Table (beta)
- Text Area
- Text Field
- Toggle
Helper Classes
- Background Colors
- Button Group (beta)
- Card
  - Base Card
  - Card Overflow
  - Card Cover
- Chip
  - Base Chip
  - Chip Button
  - Chip Icons
  - Chip Delete Button (beta)
- Color Inversion (beta)
  - Soft Context
  - Solid Context
  - Color Inversion Reset
- Divider
  - Horizontal
  - Vertical
- Sheet
- Typography