IBM Carbon React + UXPin Merge
Integration of IBM Carbon with UXPin Merge Technology.
About IBM Carbon and this repository.
IBM Carbon is an open-source design system created by the team at IBM.
This repository consists of wrappers for React implementation of IBM Carbon. The wrappers are higher order React.js components and are used to integrate IBM Carbon with UXPin Merge technology. Using wrappers (higher order components) is not necessary to integrate React.js components with UXPin, but in case of IBM Carbon, it made the integration significantly easier.
About UXPin Merge
Merge is a revolutionary technology that lets users import (and keep in sync) coded React.js components from GIT repositories to UXPin editor. The imported components are 100% identical to components used by developers during the development process. It means that components are going to look and, function (interactions, data) identical to the real product experienced by the users.
UXPin is a leading code–based design platform.
How to use Merge integration with IBM Carbon?
Merge is currently only available for selected beta users.
- Fork this repository and clone it to your computer.
- Install dependencies with
npm install - Log in to your UXPin beta account (approved for alpha and beta tests by UXPin Inc.)
- Start Merge dev environment with
npm start
If you wish to push IBM Carbon components to your UXPin account or set-up a continues integration with a CI server - contact UXPin on Merge alpha Slack community.
Examples
Supported components
| Component | Status |
|---|---|
| Accordion | ✅ Full Support |
| Breadcrumb | ✅ Full Support |
| Button | ✅ Full Support |
| Checkbox | ✅ Full Support |
| ComboBox | ✅ Full Support |
| ComposedModal | 🔻 Not Supported. Issues with absolutely positioned elements. |
| ContentSwitcher | ✅ Full Support |
| CopyButton | ✅ Full Support |
| DataTable | 🔻 Not Supported. Unknown issues. |
| DataPicker | 🔻 Not Supported. Issue with the implementation of FlatPicker. Likely can be solved by direct implementation of FlatPicker. |
| Dropdown | ✅ Full Support |
| FileUploader | ✅ Full Support |
| Footer | 🔻 Not Supported. Issues with absolutely positioned elements. |
| Icon | ✅ Full Support |
| InlineLoading | ✅ Full Support |
| Link | ✅ Full Support |
| Loading | 🔻 Not Supported. Issues with absolutely positioned elements. |
| Modal | 🔻 Not Supported. Issues with absolutely positioned elements. |
| MultiSelect | ✅ Full Support |
| Notifications | ✅ Full Support |
| NumberInput | ✅ Full Support |
| OrderedList | ✅ Full Support |
| OverflowMenu | ✅ Full Support |
| Pagination | ✅ Full Support |
| ProgressIndicator | ✅ Full Support |
| RadioButton | ✅ Full Support |
| RadioButtonGroup | ✅ Full Support |
| Search | ✅ Full Support |
| Select | ✅ Full Support |
| Slider | ✅ Full Support |
| StructuredList | ✅ Full Support |
| Table | ✅ Full Support |
| Tabs | ✅ Full Support |
| Tag | ✅ Full Support |
| TextArea | ✅ Full Support |
| TextInput | ✅ Full Support |
| Tile | ✅ Full Support |
| TimePicker | ✅ Full Support |
| Toggle | ✅ Full Support |
| ToggleSmall | ✅ Full Support |
| Toolbar | ✅ Full Support |
| Tooltip | ✅ Full Support |
| Header (UIShell experimental) | ✅ Full Support |
| SideNavigation (UIShell experimental) | 🔻 Not Supported. CSS issues. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent