@tipser/tipser-elements NPM

Tipser Elements

Tipser Elements is a React components library from Tipser enabling you to add shopable content to your site with minimal effort. You can add simple components like products with buy buttons, collections of products and articles, but also more complex grids or whole pages.

Learn more about Tipser Elements or Tipser React Elements on our official documentation site.

Usage

Quick Start with NPM version

Install with npm: npm install @tipser/tipser-elements

Quick start with scripted injectable version

Ther is a bundled, out-of-the-box solution to be placed on your website called Tipser Widget. For more information and instructions how to use it, please refer to Tipser Elements docs.

If you feel comfortable with React and need to address more advanced use cases, read further!

Quick React example

Create a React app using e.g. Create React App (follow the instructions on their page).

npx create-react-app my-tipser-elements-app
cd my-tipser-elements-app

Add Tipser Elements to the project with npm:

npm install @tipser/tipser-elements

Put your Elements code (e.g. copy the example below) in src/index.js file.

Start the application

npm start

Developing Tipser Elements

Running locally

Clone the project from git
Run npm install
Run npm start then you can see the demo page under: http://localhost:3001/

Please note that the project is dependent on another internal tipser npm package: @tipser/tipser-sdk, which is occassionally updated. To enforce usage of the most recent tipser-sdk version run npm udpate @tipser/tipser-sdk.

Running tests

npm test Executes test suite via Jest.

npm run test-watch As above, but in continuous watch mode.

npm run test -- --coverage Test with code coverage.

npm run test -- --coverage --collectCoverageFrom="**/src/components/product/*" Example of code coverage, where coverage is taken only for specified path.

Contributing

npm run format-fix Fixes the formatting according to our Prettier rules.

Test Scaffolding

There is configured basic scaffolding of test file for React component.

Install scaffolding tool globally:

npm -g @chmurson/scaffolding

Navigate to folder where test need to be created

cd /src/component/steam-rocket

Run command to create the test file.

scaffolding test.json

Tool will ask you for a name of a component. Let say it's SteamRocket, then file steam-rocket.test.tsx will be created in current directory with basic test setup.

Publishing new versions

Ensure newest tipser-sdk version is used, by e.g. npm outdated @tipser/tipser-elements. If not, udpate it, and merge it to master branch, most preferrable via GitHub PR.
Run git checkout master to switch to master branch.
Run git pull to ensure having newest code.
Execute npm run release -- $(cat ~/.git-private-token), (where .git-private-key containes GH personal token. How to create it?)

this script will update patch version, e.g. v1.4.3 -> v1.4.4

Open a PR created by previous step (check console output for url), do the review and merge it (target is set to master branch).
Find a hash of last commit (via git log) with a message "Upgrade version to vx.y.z", where "vx.y.z" is your new latest version.
Create a tag, git tag vx.y.z <hash>, where vx.y.z is the version from previous step and <hash> is the hash found in previous step
Push tags: git push origin --tags.

Testing the library in other projects without releasing it

Sometimes it's handy to see how the changes in tipser-elements work in client apps before a new version of tipser-elements is ready to be deployed to NPM.

The following commands make it possible: 1. In tipser-elements directory run: npm run build && npm link to build and create a symlink for the locally modified version 2. In the client app directory run: npm link @tipser/tipser-elements to switch to the locally modified version 3. After every subsequent change rebuild tipser-elements with npm build command or use npm start for continuous rebuilds