TokenE | Webkit

TokenE | Webkit

TypeScript-based various types of solutions for TokenE projects.

License: MIT

Table of Contents

Changelog

For the change log, see CHANGELOG.md.

Packages

The TokenE Webkit is a library that consists of many smaller NPM packages within the @tokene namespace, a so-called monorepo.

Here are the packages in the namespace:

Package Description Latest
@tokene/toolkit Collection of common utilities, functions, enums, errors and helpers npm version
@tokene/vue-web3-provider The Vue reactive wrapper of @distributedlab/w3p npm version
@tokene/styles The global styles for every TokenE project and common function, mixins and variables npm version
@tokene/ui-kit The global ui-kit for every TokenE project npm version
@tokene/toasts Vue based toasts npm version
@tokene/sdk Collection of common interactions with TokenE graph, core contracts, and extensions npm version

Using in the projects made by create-react-app

To use any of the packages in React project, created with create-react-app you need to add craco package and config to resolve the ESM version:

yarn add -D @craco/craco

Next, in the root of your project (where package.json is located) create a file named craco.config.js with the following content:

module.exports = {
webpack: {
configure: {
module: {
rules: [
{
test: /\.m?js$/,
resolve: {
fullySpecified: false,
},
},
],
},
},
},
}

This config disables the breaking change that causes this error.

Then change the start/build/test commands in package.json replacing react-scripts to craco:

{
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
}
}

Development

Editors

VSCode

To get ESLint and Prettier working in VSCode, install ESLint extension and add the following to your settings.json:

{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"eslint.validate": [
"javascript",
"typescript"
],
"eslint.alwaysShowStatus": true,
"eslint.packageManager": "yarn",
"eslint.workingDirectories": [{ "mode": "auto" }]
}

WebStorm

To get ESLint and Prettier working in WebStorm, go to Preferences > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint and check the following:

  • Run eslint --fix on save enabled
  • Automatic ESLint configuration enabled
  • {**/*,*}.{js,ts} in Run for files field

Dependencies

Local dependencies

To install all dependencies, run:

yarn install

If you are implementing a new package which needs to depend on the local package, you can use the following command to install it:

yarn workspace @tokene/target-package add @tokene/package-to-add

To install a dependency to all packages, use the following command:

yarn workspaces foreach -pt run add @tokene/package-to-add

Testing dependencies

To test the packages, you need:

  1. Build the packages:

    yarn build
    
  2. Switch yarn to version berry in the project where you want to test package, to yarn be able to resolve workspace dependencies:

    yarn set version berry
    
  3. Add this to the .yarnrc.yml file:

    nodeLinker: node-modules
    
  4. Link the packages to the project:

    yarn link -p -A /path/to/web-kit/root/directory
    
  5. Add dependencies to the package.json file:

    {
    "dependencies": {
    "@tokene/toolkit": "*"
    }
    }
  6. Install the dependencies:

    yarn install
    

Basics

Build

yarn build

Run tests

yarn test

Run linter

yarn lint

Check release version

yarn rsc 0.1.0

Bump version for all packages

yarn apply-version 0.1.0

Contribute

First off, thanks for taking the time to contribute! Now, take a moment to be sure your contributions make sense to everyone else.

Reporting Issues

Found a problem? Want a new feature? First of all see if your issue or idea has already been reported. If don't, just open a new clear and descriptive issue.

Submitting pull requests

Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.

  • Fork it!
  • Clone your fork: git clone https://github.com/<your-username>/web-kit
  • Navigate to the newly cloned directory: cd web-kit
  • Create a new branch for the new feature: git checkout -b feature/my-new-feature
  • Install the tools necessary for development: yarn install
  • Make your changes.
  • Commit your changes: git commit -am 'Add some feature'
  • Push to the branch: git push origin feature/my-new-feature
  • Submit a pull request with full remarks documenting your changes.

License

MIT License © TokenE

Resources

Generated using TypeDoc