TypeScript-based various types of solutions for TokenE projects.

Table of Contents

• Changelog
• Packages
• Using in the projects made by create-react-app
• Development
  • Editors
    • VSCode
    • WebStorm
  • Dependencies
    • Local dependencies
    • Testing dependencies
  • Basics
    • Build
    • Run tests
    • Run linter
    • Check release version
• Contribute
  • Reporting Issues
  • Submitting pull requests
• License
• Resources

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
@tokene/vue-web3-provider	The Vue reactive wrapper of @distributedlab/w3p
@tokene/styles	The global styles for every TokenE project and common function, mixins and variables
@tokene/ui-kit	The global ui-kit for every TokenE project
@tokene/toasts	Vue based toasts
@tokene/sdk	Collection of common interactions with TokenE graph, core contracts, and extensions

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

• Yarn Berry
• Keep a Changelog
• Semantic Versioning
• Webkit TypeDoc