@gustavoedny/crypto-ui v1.40.3-33

crypto-ui

What's this package?

Crypto-ui was created with the intent of share our business logic although our front-end repositories. As we have the need of a web mobile application, and a web desktop application, rewrite some features, vue components and business logic is not a option.

So we've created this NPM private package currently published at @gustavoedny/crypto-ui to share all our vue components, api services, vuex store and much more.

It also works as a Vuejs plugin, so we can share on any Vuejs 2 app.

Project setup

Docker environment

We highly recommend use our Docker + docker-compose environment, you will need Docker and docker-compose installed and then follow these steps:

• Create the docker env file that will be used by docker-compose

cp .env.docker.example .env.docker

Then update the NPM_TOKEN value in your .env.docker file

• Build the docker image with docker-compose

docker-composer build --no-cache

Running containers

• To start the containers:

docker-composer up

it will start the development server at localhost:8082

To STOP the container just type CTRL+C or CMD+C in your terminal

Running containers in background

• Running in background (Note that it will take a few seconds to the development server start at localhost:8082)

docker-composer up -d

• To stop the container in background run:

docker-compose down

Local environment

To set up this project you will have to set up the NPM private token firstly, so when you have the token run the command bellow and make sure to replace the "NPM_TOKEN" by the provided token:

npm config set //registry.npmjs.org/:_authToken "NPM_TOKEN"

Once you have the private token configured you should install the package dependencies:

yarn global add @vue/cli @vue/cli-service-global && yarn install

Once dependencies have been installed you can start the development server:

yarn dev

Folder Structure

├── dev
│   ├── App.vue (The root component used on main.js and also the playground, where we can test /src components)
│   ├── main.js (Vue instance entrypoint, setup the plugin and dependencies including Vuetify)
│   ├── store.js (A fresh Vuex store)
│   ├── crypto-ui.js (Installs the crypto-ui plugin on the Vue instance)
│   ├── BetSlipWrapper.vue (BetSlip plug-and-play component to add on App.vue)
│   ├── betslip-state.json (Bet Slip dummy data)
├── dist (or build)
├── node_modules (NPM dependencies)
├── public (Developement server public folder)
├── src
│   ├── bus (Global event bus that can be used to comunicate events between components)
│   ├── components (All the library components, including Bet Slip)
│       ├── Small Component (Eg.: ShowMore)
│           ├── __tests__ (Component test suite)
│               ├── Component.spec.js
│           ├── Component.scss (Component styles)
│           ├── Component.vue (Component styles)
│           ├── index.js (Component entrypoint, will expose Component.vue publicly)
│       ├── Big Component (Eg.: BetSlip)
│           ├── SubComponent
│               ├── __tests__
│                   ├── SubComponent.spec.js
│               ├── SubComponent.vue
│               ├── SubComponent.scss
│               ├── index.js (SubComponent entrypoint)
│           ├── AnotherSubComponent
│           ├── BigComponent.vue
│           ├── BigComponent.scss
│           ├── index.js (BigComponent entrypoint, will make it public)
│   ├── exceptions (Http Errors and other exceptions)
│   ├── __tests__
│       ├── index.spec.hs
│       ├── index.js (All the exeptions)
│   ├── filters (Vuejs filters)
│       ├── index (Module entrypoint)
│       ├── install.js (Install module, allow globally install filters)
│   ├── input-rules (Form field validation rules, eg.: Password validation)
│       ├── field (example)
│           ├── __tests__
│               ├── field.spec.js
│           ├── index.js (Module entrypoint)
│           ├── field.js (Rules/Form field validation)
│   ├── mixins (Re-usable business logic and common features)
│       ├── Autencicable
│       ├── InteractsWithBetSlip
│       ├── Pagination
│       ├── Selectable
│       ├── Etc
│       ├── index.js (Module entrypoint)
│   ├── plugins (Plugins that should be shared on all platforms)
│       ├── i18n.js
│   ├── resources (Static Resources)
│       ├── img
│       ├── lang
│       ├── icons.js (Material Design icons mapper)
│   ├── services (HTTP API, Storage and Locale services, etc)
│       ├── API (The base API service)
│           ├── APIService.js
│           ├── index.js (Entrypoint)
│       ├── BetSlip (Bet Slip services)
│       ├── Etc
│       ├── index.js (Services entrypoint)
│   ├── store (Vuex Plugin module)
│       ├── modules
│           ├── auth.js
│           ├── betslip.js
│           ├── user.js
│       ├── index.js (Module entrypoint + Install function)
│   ├── styles
│       ├── main.sass (Global styles shared at all platforms)
│   ├── views (Shared base views)
│       ├── View
│           ├── __tests__ (Tests for the View component)
│               ├── Vue.spec.js
│       ├── View.vue
│       ├── View.scss
│       ├── index.js (Entrypoint - Will publicly exopose the components that should be shared, in that case View.vue)
│   ├── main.js
│   ├── setupTests.js (Setup the Vue instance for testing)
├── .env.local (Development server env vars)
├── README.md (This file)
├── package.json (Package dependencies and config)
└── .gitignore
└── .jest.config.js
└── Dockerfile
└── docker-compose.yml

Dev server, testing components and making changes

In this section I'm going to show you how to use the development server to test components, see your code changes in real-time and also be able to test component behavior with fake data.

• So firstly let's start the development server (Skip this step if you are using Docker environment)

yarn dev

it will look like this

• Now go to your localhost server address un this case http://localhost:8080
• As we are running it for the first time, there are no components registered on our dev/App.vue so you will see a black screen that's our component playground where we can test the components manually. So the page will look like this
• So now open dev/App.vue in your code editor and make the following changes

<template>
  <v-app :dark="true">
    <v-container fluid>
      <v-content>
        <div class="playground-wrapper elevation-3">
          <v-row>
            <v-col>
              <BetSlipWrapper></BetSlipWrapper>
            </v-col>
          </v-row>
        </div>
      </v-content>
    </v-container>
  </v-app>
</template>

<script>
import '@/styles/main.sass'
import BetSlipWrapper from './BetSlipWrapper'
export default {
  name: 'App.vue',

  components: { BetSlipWrapper },

  data: () => ({}),

  methods: {}
}
</script>

<style scoped>
.playground-wrapper {
  background-color: #232323;
  border-radius: 5px;
  padding: 0px;
  margin-top: 50px;
}
</style>

Now our page will load the BetSlipWrapper component and will look like this

As you can see the bet slip is empty, and we need to add some fake data to test it. If you to /dev folder you will see that we have a betslip-state.json file that has fake data to pupulate the betslip. The betslip data is managed by Vuex which is Vuejs official package to handle the application state. This package comes with Vuex Store module at /src/store, and there's a betslip module at /src/store/modules/betslip.js which has all the bet slip business logic and manage it's data.

So let's have a look at the Bet Slip Vuex module, it should look like this:

As you can see the betslip.js module state is load by BetSlipStorageService.load() method. Which loads data from the localStorage API. So to populate the betslip data we just need to add it's data on our localStorage, So you have to run this on your browser:

localStorage.setItem('betslip', `{
  "placed": false,
  "visible": false,
  "selections": [
    {
      "eventName": "Novak Djokovic v Andrej Martin",
      "marketName": "Total Games",
      "id": 353062584,
      "market_id": 1606,
      "match_id": 122877,
      "match_market_id": 470280,
      "odds": 1.909,
      "name": "16.5",
      "header": "Over",
      "handicap": null,
      "is_suspended": false,
      "is_live": true,
      "order": 0
    },
    {
      "eventName": "Timofey Skatov v Nikolas S Izquierdo",
      "marketName": "Total Games",
      "id": 353062626,
      "market_id": 1606,
      "match_id": 122875,
      "match_market_id": 470282,
      "odds": 1.833,
      "name": "21.5",
      "header": "Over",
      "handicap": null,
      "is_suspended": false,
      "is_live": true,
      "order": 0
    },
    {
      "eventName": "Evan Furness v Jenson Brooksby",
      "marketName": "To Win",
      "id": 353048564,
      "market_id": 1605,
      "match_id": 122781,
      "match_market_id": 470275,
      "odds": 4.333,
      "name": "Match",
      "header": "Evan Furness",
      "handicap": null,
      "is_suspended": false,
      "is_live": true,
      "order": 0
    },
    {
      "eventName": "Kurumi Nara v Stefanie Voegele",
      "marketName": "To Win",
      "id": 353119101,
      "market_id": 1605,
      "match_id": 122821,
      "match_market_id": 470292,
      "odds": 2,
      "name": "Match",
      "header": "Kurumi Nara",
      "handicap": null,
      "is_suspended": false,
      "is_live": true,
      "order": 0
    },
    {
      "eventName": "Hua/Zhang v Cash/Stalder",
      "marketName": "To Win",
      "id": 353035402,
      "market_id": 1605,
      "match_id": 122706,
      "match_market_id": 470271,
      "odds": 2.2,
      "name": "Match",
      "header": "Hua/Zhang",
      "handicap": null,
      "is_suspended": false,
      "is_live": true,
      "order": 0
    }
  ],
  "changes": [
    {
      "id": 353062584,
      "match_id": 122877,
      "odds": 1.833,
      "changed": true,
      "suspended": false,
      "available": true
    },
    {
      "id": 353048564,
      "match_id": 122781,
      "odds": 3.75,
      "changed": true,
      "suspended": false,
      "available": true
    }
  ],
  "multipleStake": null
}`)

Now that you've set the betslip data on your localStorage, reload your page and the your betslip will look like this:

Making changes on components

Now that we have the betslip working on our dev server we can do any code change we need on it's components at /src/components/BetSlip, to give you a example let's change the betslip backgrond color to white by changing the BetSlip.scss file:

...
.bet-slip-wrapper {
  ...
  background-color: #ffffff !important;
  ...
}
...

It will look like this now:

To make changes on other components you should follow a similar process, but it will be easier than set up the betslip for testing since its one of our biggest components. So you have to:

• Import the component on /dev/App.vue
• Populate it with data if needed
• Do your changes on the components and test it, use unit testing if needed
• Commit your changes and make sure to do not commit the changes on /dev/App.vue. So this way other developers will have the playground always clean to test.

Running your unit tests

yarn test:unit

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.