/ux-chi-uxpin-merge

The repository is an extension of Chi (Chi Design System). The implementation provides Lumen designers with a UXPin integrated collection of components based on our own design system (CHI).

Primary LanguageJavaScriptMIT LicenseMIT

CHI + UXPin Merge

The repository is an extension of Chi (Chi Design System).

The implementation provides Lumen designers with a UXPin integrated collection of components based on our own design system (CHI).

Supported CHI components

Component Chi URL Status
Alert Alert ✅ Full Support
Badge Badge ✅ Full Support
Brand Brand ✅ Full Support
Checkbox Checkbox ✅ Full Support
Date Picker Date Picker ✅ Full Support
Dropdown Base Dropdown Base ✅ Full Support
Dropdown Icon Dropdown Icon ✅ Full Support
File Input File Input ✅ Full Support
Floating Button Floating Button ✅ Full Support
Icon Icon ✅ Full Support
Icon Button Icon Button ✅ Full Support
Label Label ✅ Full Support
Link Link ✅ Full Support
Marketing Icon Marketing Icon ✅ Full Support
Number Input Number Input ✅ Full Support
Page Title Page Title ✅ Full Support
Pagination Pagination ✅ Full Support
Picker Group Picker Group ✅ Full Support
Phone Input Phone Input ✅ Full Support
Price Price ✅ Full Support
Popover Popover ✅ Full Support
Primary Button Primary Button ✅ Full Support
Progress Progress ✅ Full Support
Radio Radio ✅ Full Support
Secondary Button Secondary Button ✅ Full Support
Select Select ✅ Full Support
Spinner Spinner ✅ Full Support
Stat Base Stat Base ✅ Full Support
Stat Compact Stat Compact ✅ Full Support
Step Step ✅ Full Support
Tabs Tabs ✅ Full Support
Tertiary Button Tertiary Button ✅ Full Support
Text Text ✅ Full Support
Text Input Text Input ✅ Full Support
Textarea Textarea ✅ Full Support
Toggle Switch Toggle Switch ✅ Full Support
Tooltip Tooltip ✅ Support as Tooltip property of Icon Button

Development

Currently, there are 3 Chi based UXPin Merge libraries Chi Merge 2.1 (Lumen) (Production - based on Lumen styleguide 2.0 and Chi 5.4.0), Chi Merge 1.0 (Lumen) (Production, Legacy - based on Lumen styleguide 1.0 and Chi 3.12.0), Chi Merge (Dev) (Pre-production).

In order to be able to develop and make changes in them, define environmental variables UXPIN_DEV_TOKEN and UXPIN_LUMEN_TOKEN.

  1. open the .bash_profile file and add these lines indicating corresponding token values:
export UXPIN_DEV_TOKEN="RESPECTIVE_TOKEN_GOES_HERE"
export UXPIN_LUMEN_TOKEN="RESPECTIVE_TOKEN_GOES_HERE"
  1. Use command
$ source ~/.bash_profile
  1. Try printing the defined variables by using:
$ echo $UXPIN_DEV_TOKEN

and

$ echo $UXPIN_LUMEN_TOKEN

If respective values are printed, the environmental variable definition was successfully.

Updating version of Chi assets

Chi assets are included by injecting them into <head> by UXPin components' wrapper.

Edit Chi assets URLs in /src/compoennts/UXPinWrapper/UXPinWrapper.js

Adding new components

Adding components to Merge is no different than creating normal React.js components. Merge accepts any standard approach to React. The only limitations that you should be aware of are:

  • Components have to have default exports
  • Components need to exist in separate directories
  • Only one component is allowed per file and directory e.g. ./src/Tabs/Tabs.js
  • You have to add the component to uxpin.config.js file

Component properties - most common examples

Alert.propTypes = {
  size: PropTypes.oneOf(['sm', 'md', 'lg']), // Renders a Select with the provided options in UXPin UI
  width: PropTypes.number, // Renders as a Number input in UXPin UI
  icon: PropTypes.string, // Renders as a Text Input in UXPin UI
  closable: PropTypes.bool, // Renders as a Checkbox in UXPin UI
};

Providing default property values

Alert.defaultProps = {
  size: 'md',
  width: 320,
  icon: 'warning',
  closable: true,
};

Component interaction example

Use PropTypes.func to add an interaction to the component

Button.propTypes = {
  click: PropTypes.func, // Renders as an Interaction provider in UXPin UI
};

and use the interaction prop as a function that can be triggered

const Button = (props) => (
  <button
    type="button"
    className="chi-button"
    onClick={props.click}>
    Button Content
  </button>
);

Please note that you can also trigger an interaction function in custom scenarios by using props.interactionPropName().

Pushing changes to Chi libraries

Push changes to Dev (pre-production) library

$ npm push-dev

Push changes to Lumen (Production) library

$ npm push-lumen