Giter Site home page Giter Site logo

uxpin-merge-boilerplate's Introduction

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.

uxpin-merge-boilerplate's People

Contributors

bdebicki avatar blue2wo avatar dependabot[bot] avatar devfive avatar evomatic avatar jacekzlowocki avatar jaroslawsawicki avatar kamilwysocki avatar marcintreder avatar matthewchigira avatar michalstocki avatar robhil avatar rtaraszka avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

uxpin-merge-boilerplate's Issues

Keep getting path error

Hi UXPin team!

When starting your boilerplate project I'm getting an error:
The argument 'path' must be a string or Uint8Array without null bytes. Received 'C:\\Users\\JakubAntczak\\Desktop\\FelixUXPin\\..srccomponentsCamerapresets\u0000-default.jsx\\package.json'

Steps I've made:

  • forking your boilerplate
  • run npm install
  • run npm start

installation does not work

I cloned the repo and tried to install dependencies with npm i and yarn install. both generate the same warnings and error. please help!

➜  uxpin-merge-boilerplate git:(master) yarn -v
1.22.18
➜  uxpin-merge-boilerplate git:(master) npm -v
8.3.1
➜  uxpin-merge-boilerplate git:(master) node -v
v16.14.0

...

2 warnings generated.
  rm -f Release/sass.a && ./gyp-mac-tool filter-libtool libtool  -static -o Release/sass.a Release/obj.target/libsass/src/libsass/src/ast.o Release/obj.target/libsass/src/libsass/src/ast_fwd_decl.o Release/obj.target/libsass/src/libsass/src/backtrace.o Release/obj.target/libsass/src/libsass/src/base64vlq.o Release/obj.target/libsass/src/libsass/src/bind.o Release/obj.target/libsass/src/libsass/src/cencode.o Release/obj.target/libsass/src/libsass/src/check_nesting.o Release/obj.target/libsass/src/libsass/src/color_maps.o Release/obj.target/libsass/src/libsass/src/constants.o Release/obj.target/libsass/src/libsass/src/context.o Release/obj.target/libsass/src/libsass/src/cssize.o Release/obj.target/libsass/src/libsass/src/emitter.o Release/obj.target/libsass/src/libsass/src/environment.o Release/obj.target/libsass/src/libsass/src/error_handling.o Release/obj.target/libsass/src/libsass/src/eval.o Release/obj.target/libsass/src/libsass/src/expand.o Release/obj.target/libsass/src/libsass/src/extend.o Release/obj.target/libsass/src/libsass/src/file.o Release/obj.target/libsass/src/libsass/src/functions.o Release/obj.target/libsass/src/libsass/src/inspect.o Release/obj.target/libsass/src/libsass/src/json.o Release/obj.target/libsass/src/libsass/src/lexer.o Release/obj.target/libsass/src/libsass/src/listize.o Release/obj.target/libsass/src/libsass/src/memory/SharedPtr.o Release/obj.target/libsass/src/libsass/src/node.o Release/obj.target/libsass/src/libsass/src/operators.o Release/obj.target/libsass/src/libsass/src/output.o Release/obj.target/libsass/src/libsass/src/parser.o Release/obj.target/libsass/src/libsass/src/plugins.o Release/obj.target/libsass/src/libsass/src/position.o Release/obj.target/libsass/src/libsass/src/prelexer.o Release/obj.target/libsass/src/libsass/src/remove_placeholders.o Release/obj.target/libsass/src/libsass/src/sass.o Release/obj.target/libsass/src/libsass/src/sass2scss.o Release/obj.target/libsass/src/libsass/src/sass_context.o Release/obj.target/libsass/src/libsass/src/sass_functions.o Release/obj.target/libsass/src/libsass/src/sass_util.o Release/obj.target/libsass/src/libsass/src/sass_values.o Release/obj.target/libsass/src/libsass/src/source_map.o Release/obj.target/libsass/src/libsass/src/subset_map.o Release/obj.target/libsass/src/libsass/src/to_c.o Release/obj.target/libsass/src/libsass/src/to_value.o Release/obj.target/libsass/src/libsass/src/units.o Release/obj.target/libsass/src/libsass/src/utf8_string.o Release/obj.target/libsass/src/libsass/src/util.o Release/obj.target/libsass/src/libsass/src/values.o
  c++ '-DNODE_GYP_MODULE_NAME=binding' '-DUSING_UV_SHARED=1' '-DUSING_V8_SHARED=1' '-DV8_DEPRECATION_WARNINGS=1' '-DV8_DEPRECATION_WARNINGS' '-DV8_IMMINENT_DEPRECATION_WARNINGS' '-D_GLIBCXX_USE_CXX11_ABI=1' '-D_DARWIN_USE_64_BIT_INODE=1' '-D_LARGEFILE_SOURCE' '-D_FILE_OFFSET_BITS=64' '-DOPENSSL_NO_PINSHARED' '-DOPENSSL_THREADS' '-DBUILDING_NODE_EXTENSION' -I/Users/sandeand/.node-gyp/16.14.0/include/node -I/Users/sandeand/.node-gyp/16.14.0/src -I/Users/sandeand/.node-gyp/16.14.0/deps/openssl/config -I/Users/sandeand/.node-gyp/16.14.0/deps/openssl/openssl/include -I/Users/sandeand/.node-gyp/16.14.0/deps/uv/include -I/Users/sandeand/.node-gyp/16.14.0/deps/zlib -I/Users/sandeand/.node-gyp/16.14.0/deps/v8/include -I../../nan -I../src/libsass/include  -O3 -gdwarf-2 -mmacosx-version-min=10.7 -arch x86_64 -Wall -Wendif-labels -W -Wno-unused-parameter -std=c++11 -stdlib=libc++ -fno-rtti -fno-exceptions -fno-strict-aliasing -MMD -MF ./Release/.deps/Release/obj.target/binding/src/binding.o.d.raw   -c -o Release/obj.target/binding/src/binding.o ../src/binding.cpp
In file included from ../src/binding.cpp:1:
In file included from ../../nan/nan.h:58:
In file included from /Users/sandeand/.node-gyp/16.14.0/include/node/node.h:63:
In file included from /Users/sandeand/.node-gyp/16.14.0/include/node/v8.h:30:
/Users/sandeand/.node-gyp/16.14.0/include/node/v8-internal.h:492:38: error: no template named 'remove_cv_t' in namespace 'std'; did you mean 'remove_cv'?
            !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
                                ~~~~~^~~~~~~~~~~
                                     remove_cv
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk/usr/include/c++/v1/type_traits:776:50: note: 'remove_cv' declared here
template <class _Tp> struct _LIBCPP_TEMPLATE_VIS remove_cv
                                                 ^
1 error generated.
make: *** [Release/obj.target/binding/src/binding.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/Users/sandeand/Desktop/projects/workbench/@workbench/uxpin-merge-boilerplate/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (node:events:520:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
gyp ERR! System Darwin 20.6.0
gyp ERR! command "/Users/sandeand/.nvm/versions/node/v16.14.0/bin/node" "/Users/sandeand/Desktop/projects/workbench/@workbench/uxpin-merge-boilerplate/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/sandeand/Desktop/projects/workbench/@workbench/uxpin-merge-boilerplate/node_modules/node-sass
gyp ERR! node -v v16.14.0
➜  uxpin-merge-boilerplate git:(master) npm start

> [email protected] start
> uxpin-merge --disable-tunneling


You are using @uxpin/merge-cli version: 2.7.10

ERROR: Built at: 08/04/2022 12:02:18

ERROR in ./src/components/CreditCard/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/sass-loader/dist/cjs.js!./src/components/CreditCard/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
    at module.exports (/Users/sandeand/Desktop/projects/workbench/@workbench/uxpin-merge-boilerplate/node_modules/node-sass/lib/binding.js:13:13)
    at Object.<anonymous> (/Users/sandeand/Desktop/projects/workbench/@workbench/uxpin-merge-boilerplate/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at getDefaultSassImplementation (/Users/sandeand/Desktop/projects/workbench/@workbench/uxpin-merge-boilerplate/node_modules/sass-loader/dist/getDefaultSassImplementation.js:24:10)
    at getSassImplementation (/Users/sandeand/Desktop/projects/workbench/@workbench/uxpin-merge-boilerplate/node_modules/sass-loader/dist/getSassImplementation.js:19:72)
    at Object.loader (/Users/sandeand/Desktop/projects/workbench/@workbench/uxpin-merge-boilerplate/node_modules/sass-loader/dist/index.js:40:61)
 @ ./src/components/CreditCard/styles.scss 2:26-153
 @ ./src/components/CreditCard/CreditCard.jsx
 @ ./.uxpin-merge/components.js

Update Merge CLI to 2.7.2

CLI is still on 2.7.1 so needs to be updated to 2.7.2

How to upgrade:
$ yarn add @uxpin/merge-cli@latest

'npm start' gives an error

Browserslist: caniuse-lite is outdated. Please run next command yarn upgrade
TypeError [ERR_INVALID_ARG_VALUE] [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string or Uint8Array without null bytes. Received 'E:\02_programming\uxpin\uxpin-merge-boilerplate\..srccomponentsButtonpresets\u0000-default.jsx\package.json'
at readFile (fs.js:317:10)
at go$readFile (E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\graceful-fs\graceful-fs.js:85:14)
at Object.readFile (E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\graceful-fs\graceful-fs.js:82:12)
at Storage.provide (E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:78:3)
at CachedInputFileSystem.readFile (E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:239:25)
at CachedInputFileSystem._readJson (E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:197:10)
at Storage.provide (E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:78:3)
at CachedInputFileSystem.readJson (E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:243:25)
at E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\enhanced-resolve\lib\DescriptionFileUtils.js:14:25
at forEachBail (E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\enhanced-resolve\lib\forEachBail.js:14:3)
at findDescriptionFile (E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\enhanced-resolve\lib\DescriptionFileUtils.js:11:3)
at Object.loadDescriptionFile (E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\enhanced-resolve\lib\DescriptionFileUtils.js:61:3)
at E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:20:25
at AsyncSeriesBailHook.eval [as callAsync] (eval at create (E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\tapable\lib\HookCodeFactory.js:33:10), :20:1)
at Resolver.doResolve (E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\enhanced-resolve\lib\Resolver.js:235:16)
at E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\enhanced-resolve\lib\JoinRequestPlugin.js:21:13
at _next41 (eval at create (E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\tapable\lib\HookCodeFactory.js:33:10),
:6:1)
at eval (eval at create (E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\tapable\lib\HookCodeFactory.js:33:10), :29:1)
at E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\enhanced-resolve\lib\ModuleKindPlugin.js:16:31
at _next40 (eval at create (E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\tapable\lib\HookCodeFactory.js:33:10),
:21:1)
at eval (eval at create (E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\tapable\lib\HookCodeFactory.js:33:10), :44:1)
at E:\02_programming\uxpin\uxpin-merge-boilerplate\node_modules\enhanced-resolve\lib\AliasPlugin.js:53:11
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: uxpin-merge --webpack-config ./webpack.uxpin.config.js --wrapper ./src/components/UXPinWrapper/UXPinWrapper.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.