Infinity UI - v0.9,0

Infinity UI

Infinity UI is the React component library used to build the user interface for NextBusiness Infinity and its apps.

Usage

Packages

Starting with version 0.4.0, Infinity UI is split in three different packages:

@nextbusiness/infinity-ui: Controls, Layout and Presentation Components
@nextbusiness/infinity-ui-foundations: Typography Base, Styles and Internal Utilities
@nextbusiness/infinity-ui-icons: Expansive Icon Library

To use Infinity UI, it is recommended to install all packages as dependencies:

yarn add @nextbusiness/infinity-ui-foundations @nextbusiness/infinity-ui @nextbusiness/infinity-ui-icons

Project Setup

To properly use Infinity UI in a new project, you'll need to:

Include the styles in the entry point of the application (e.g. index.tsx) using: import '@nextbusiness/infinity-ui/dist/index.css'
Wrap your application using the TypographyBase component from infinity-ui-foundations to get the correct typography.
To setup the typical application layout of an Infinity app, use the ApplicationFrame component.

Documentation

Documentation for this package is auto-generated from the TypeScript source and TSDoc comments. To view the documentation, run the following CLI command:

yarn docs

Developing Infinity UI

This repository is structured as a monorepo using Yarn Workspaces, containing all infinity-ui packages along with a demo application.

Build & watch

To continously bulid and watch a package while developing, go to the project directory of the specific package and run yarn dev:

cd packages/infinity-ui && yarn dev
cd packages/infinity-ui-foundations && yarn dev
cd packages/infinity-ui-icons && yarn dev

Running demo application

To run the demo application with hot module reloading, start the Build & watch script for the relevant package, as described above (most of the time, that's going to be infinity-ui).

Then run the following command from a separate terminal:

cd sites/infinity-ui-demo
yarn dev

Creating production builds

To build the main infinity-ui package, go to the project directory of the specific package and run yarn build:

cd packages/infinity-ui && yarn build
cd packages/infinity-ui-foundations && yarn build
cd packages/infinity-ui-icons && yarn build

Quirks

Sometimes after several builds during Build & watch, Vite will continue to rebuild but stop emitting TypeScript declaration files. As a result, TypeScript will say that the module @nextbusiness/infinity-ui (or others) cannot be found. To fix this, terminate and restart the Build & watch script.
Importing types using import { MyType } from ... does not work in the packages and will result in an error at build-time. Instead, you'll need to use import type { MyType } from .... We'll add an ESLint rule for this in the future.
The autogenerated docs currently show incomplete documentation for components that use React.forwardRef, such as the Button component. A typedoc reflection plugin is already setup that will probably work in React 18.

License

Infinity UI is proprietary and owned by NextBusiness. Any contributions to the projects are considered work product and sole ownership of the code belongs to NextBusiness.