npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@aftabaig82/uxpin-merge-boilerplate

v1.0.0

Published

UXPin Merge is a revolutionary technology that lets users import (and keep in sync) coded React.js components from GIT repositories to UXPin editor (https://uxpin.com). The imported components are 100% identical to components used by developers during the

Downloads

3

Readme

UXPin Merge – Experimental Mode Boilerplate Repository

UXPin Merge is a revolutionary technology that lets users import (and keep in sync) coded React.js components from GIT repositories to UXPin editor (https://uxpin.com). 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.

To make the first steps in the world of Merge easy, we've prepared this boilerplate repository with examples of components that shows the power of Merge:

  • Configurable Button with multiple styling options
  • Select with nested components
  • Icon with access to dozens of SVG icons
  • Table that automatically renders from a provided objects and adds sorting
  • 5 animated charts created with React-vis library

All the components are built with React.js and styled with Emotion. Styles are using tokens stored in JSON files.

Installation

This boilerplate needs node and npm installed to run. Once you're ready clone the repository and install all the dependencies (npm install).

What is Merge Experimental Mode

alt text

Merge Experimental Mode let's you render your React.js components in a dev version of UXPin Design Editor directly from your local environment. You can test your components and see how they're going to behave in UXPin Design Editor!

Rendering Components in the browser

Among the dependencies of this boilerplate you'll find uxpin-merge this tool prepares components for integration with UXPin. It has a built in development server that you can use to see the rendered components in the browser. To start the dev server use the following command:

npm start

When you're changing anything in the components files and you want to re-render components, don't forget to kill the process. Otherwise you'll get a ELIFECYCLE error. A handy way to kill all the node processes including the dev server is to run in your terminal:

killall -9 node

Tests

This repository uses tests created with Jest-Emotion and Enzyme. To run all the test suites use:

npm test

When you're modifying components, you have to generate new snapshots:

npm test -- -u

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/Button/Button.js
  • You have to add the component to uxpin.config.js file
  • You have to prepare presets for every component (temporary restrictions to be replaced by jsx presets)

Creating presets

Preset is a JSX file that describes components in a structured way.

  • For ./src/Button/Button.js component we require one preset in ./src/Button/presets/0-default.jsx

Example preset:

<Button
  icon={<Icon icon="TickerSvg" size="s" uxpId="button2" />}
  mode="filled"
  size="m"
  stretched
  type="primary"
  uxpId="button"
>
  Let's Merge!
</Button>

As you can see we are defining the default props and the structure of the Button component. When dragged onto the UXPin canvas, the initial render of the component will appear with the above structure. One thing to note is that every component set in a preset file must have a unique UXPin ID attribute uxpId. This allows Merge to properly render every component and track overrides of components.

If you would like to learn more about managing JSX presets and Merge integration. Please see our Merge documentation.