Package Exports

@nexusui/components
@nexusui/components/esm/index.js
@nexusui/components/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nexusui/components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

NexusUI Components

These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.

Installation

Add the component as a dependency to your project:

# With yarn
yarn add @nexusui/components

# With npm
npm install --save @nexusui/components

You will also need to install the necessary peer dependencies:

# With yarn
yarn add @mui/material @emotion/react @emotion/styled @mui/x-data-grid @mui/x-date-pickers @mui/icons-material @nexusui/theme

# With npm
npm install --save @mui/material @emotion/react @emotion/styled @mui/x-data-grid @mui/x-date-pickers @mui/icons-material @nexusui/theme

Usage

In your typescript file, import the component(s) you want to use:

// Replace ComponentName with the specific component you want to use
import { ComponentName } from '@nexusui/components';

Also we support path imports.

// Replace ComponentName with the specific component you want to use
import { ComponentName } from '@nexusui/components/ComponentName';

Migration Guide

1.X.X -> 2.0.0

Version 2.0.0 includes several breaking changes. If you plan to upgrade to 2.0.0, please read the upgrade guide below carefully.

1) `HexProjectCard` removed

If you are currently using this component in your project, you can take the source code from the older version of the library and include it as a local component in your application.

2) `UserPreference` component removed `onResetPassword` prop

This prop was deprecated in the latest 1.x version and has now been removed entirely.

3) `HexSearchComponent` renamed to SearchBar

// before
import { HexSearchComponent } from '@nexusui/components';

// after
import { SearchBar } from '@nexusui/components';

The withDebounce prop has also been renamed to debounce and now additionally accepts numeric values to customize the debounce delay.

// before
<HexSearchComponent withDebounce={true} {...others}/>
// after
<SearchBar debounce={500} {...others}/> // 500ms is the default

4) User data types updated

Several components in this library rely on a User object. There was some inconsistencies between components and how they defined these types. Version 2 updates these components to have a shared type definition for basic user information.

export type IBasicUser = {
  id: string;
  email: string;
  firstName: string;
  lastName: string;
  avatar: string;
};

The following components are affected by this change: AccountDropdown, AudienceGroup, CommentCard, CommentDrawer, CommentThread, UserManagement, UserDetail, and UserPreference.

AccountDropdown

In the userInfo props:

name has been split into firstName and lastName
avatarSrc is renamed to avatar
email was not present before and is now required

Examples:

// before
const userInfo: IUserInfo = { name: `Jon Snow`, avatarSrc: 'https://i2.wp.com/cdn.auth0.com/avatars/js.png' };
<AccountDropdown userInfo={userInfo} {...others}/>

// after
const userInfo: IUserInfo = { id: '1', firstName: 'Jon', lastName: 'Snow', avatar: 'https://i2.wp.com/cdn.auth0.com/avatars/js.png', email: 'jon.snow@hexagon.com' };
<AccountDropdown userInfo={userInfo} {...others}/>

AudienceGroup

In the users prop:

userId is renamed to id.
avatar and email were previously optional and are now required

Examples:

// before
const users: IUserInfo[] = [{userId: '1', firstName: 'Jon', lastName: 'Snow'}];
<AudienceGroup users={users} {...others}/>

// after
const users: IUserInfo[] = [{id: '1', firstName: 'Jon', lastName: 'Snow', avatar: 'https://i2.wp.com/cdn.auth0.com/avatars/js.png', email: 'jon.snow@hexagon.com'}];
<AudienceGroup users={users} {...others}/>

CommentCard

In the author props:

email field was not present before and is now required
avatar field was previously optional and is now required

Examples:

// before
const author: ICommentAuthor = {id: '1', firstName: 'Jon', lastName: 'Snow'};
<CommentCard author={author} {...others}/>

// after
const author: ICommentAuthor = {id: '1', firstName: 'Jon', lastName: 'Snow', avatar: 'https://i2.wp.com/cdn.auth0.com/avatars/js.png', email: 'jon.snow@hexagon.com'};
<CommentCard author={author} {...others}/>

CommentDrawer

In the comments -> author & participants props:

email field was not present before and is now required
avatar field was previously optional and is now required

Examples:

// before
const author: ICommentAuthor = {id: '1', firstName: 'Jon', lastName: 'Snow'};
const participants: ICommentAuthor[] = [author];
const comments: IComment[] = [{author, participants, ...{others}}]
<CommentDrawer comments={comments} {...others}/>

// after
const author: ICommentAuthor = {id: '1', firstName: 'Jon', lastName: 'Snow', avatar: 'https://i2.wp.com/cdn.auth0.com/avatars/js.png', email: 'jon.snow@hexagon.com'}
const participants: ICommentAuthor[] = [author];
const comments: IComment[] = [{author, participants, ...{others}}]
<CommentDrawer comments={comments} {...others}/>

CommentThread

In the currentUser prop:

email field was not present before and is now required
avatar field was previously optional and is now required

In the comment -> author & participants props:

email field was not present before and is now required
avatar field was previously optional and is now required

In the replies -> author prop:

email field was not present before and is now required
avatar field was previously optional and is now required

Examples:

// before
const user: ICommentAuthor = {id: '1', firstName: 'Jon', lastName: 'Snow'};
const participants: ICommentAuthor[] = [user];
const comment: IComment = {author: user, participants, ...{others}}
<CommentThread currentUser={currentUser} comment={comment} replies={[{author: user}]} {...others}/>

// after
const user: ICommentAuthor = {id: '1', firstName: 'Jon', lastName: 'Snow', avatar: 'https://i2.wp.com/cdn.auth0.com/avatars/js.png', email: 'jon.snow@hexagon.com'}
const participants: ICommentAuthor[] = [user];
const comment: IComment = {author: user, participants, ...{others}}
<CommentThread currentUser={currentUser} comment={comment} replies={[{author: user}]} {...others}/>

UserManagement

In the users prop:

avatarSrc field renamed to avatar and is now required instead of optional

Examples:

// before
const users: UserItem[] = [{id: '1', firstName: 'Jon', lastName: 'Snow', email: 'jon.snow@hexagon.com', avatarSrc: 'https://i2.wp.com/cdn.auth0.com/avatars/js.png', role: '', status: ''}]
<UserManagement users={users} {...others}/>

// after
const users: UserItem[] = [{id: '1', firstName: 'Jon', lastName: 'Snow', email: 'jon.snow@hexagon.com', avatar: 'https://i2.wp.com/cdn.auth0.com/avatars/js.png', role: '', status: ''}]
<UserManagement users={users} {...others}/>

UserDetail

In the userInfo prop:

avatarSrc field renamed to avatar and is now required instead of optional

Examples:

// before
const userInfo: UserItem = {id: '1', firstName: 'Jon', lastName: 'Snow', email: 'jon.snow@hexagon.com', avatarSrc: 'https://i2.wp.com/cdn.auth0.com/avatars/js.png', role: '', status: ''}
<UserDetail userInfo={userInfo} {...others}/>

// after
const userInfo: UserItem = {id: '1', firstName: 'Jon', lastName: 'Snow', email: 'jon.snow@hexagon.com', avatar: 'https://i2.wp.com/cdn.auth0.com/avatars/js.png', role: '', status: ''}
<UserDetail userInfo={userInfo} {...others}/>

UserPreference

In the userInfo -> contact prop:

id field was not present before and is now required
redundant name field has been removed (use firstName and lastName)

Examples:

// before
const contact: ContactInfo = {firstName: 'Jon', lastName: 'Snow', name: 'Jon Snow', email: 'jon.snow@hexagon.com', avatar: 'https://i2.wp.com/cdn.auth0.com/avatars/js.png', role: '', mobile: ''}
const userInfo = {contact, ...others}
<UserPreference userInfo={userInfo} {...others}/>

// after
const contact: ContactInfo = {id: '1', firstName: 'Jon', lastName: 'Snow', email: 'jon.snow@hexagon.com', avatar: 'https://i2.wp.com/cdn.auth0.com/avatars/js.png', role: '', mobile: ''}
const userInfo = {contact, ...others}
<UserPreference userInfo={userInfo} {...others}/>