<dotsha-app>

This webcomponent follows the open-wc recommendation.

Installation

As a module

Using npm

npm i dotsha-app

Using yarn

yarn add dotsha-app

usage

Static html

<script type="module" src='//code.dlcode.fr/dotsha-app.bundle.js' data-minify="1"></script>

<dotsha-app></dotsha-app>

<script type="module">
    sessionStorage.setItem('dotsha-api-base-path', "https://api.dotsha.com");
    // If not defined, login will be required
    sessionStorage.setItem('dotsha-user-id', "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx");
    sessionStorage.setItem('dotsha-token', "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.0kmRbgYdAfswmu4j29H2U7sISKRBfJ1Oh3QMoxWgc5w");
</script>

ReactJS

DotshaApp.js file

import '@dlcode/dotsha-app';

function DotshaApp() {
  return (
    <dotsha-app />
  );
}

export default DotshaApp;

index.js file

import React from 'react';
import ReactDOM from 'react-dom/client';
import DotshaApp from './DotshaApp';

import config from './config.json';

sessionStorage.setItem('dotsha-api-base-path', config.apiBasePath);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <DotshaApp />
  </React.StrictMode>
);

VueJS

DotshaApp.vue file

<script setup lang="ts">
import '@dlcode/dotsha-app';
</script>

<template>
  <dotsha-app />
</template>

<style scoped>
dotsha-app {
    width: 90vw;
}
</style>

App.vue file

<script setup lang="ts">
import DotshaApp from './components/DotshaApp.vue'
</script>

<template>
    <div class="wrapper">
        <DotshaApp />
    </div>
</template>

<style>
@import './assets/base.css';

#app {
  max-width: 1280px;
  margin: 0 auto;
  font-weight: normal;
  min-height: 100vh;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>

index.html file

Add this part before <script type="module" src="/src/main.ts"></script>

    <script type="module">
        sessionStorage.setItem('dotsha-api-base-path', "https://api.dotsha.com");
        // If not defined, login will be required
        sessionStorage.setItem('dotsha-user-id', "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx");
        sessionStorage.setItem('dotsha-token', "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.0kmRbgYdAfswmu4j29H2U7sISKRBfJ1Oh3QMoxWgc5w");
    </script>

Linting and formatting

To scan the project for linting and formatting errors, run

yarn lint

To automatically fix linting and formatting errors, run

yarn format

Testing with Web Test Runner

To execute a single test run:

yarn test

To run the tests in interactive watch mode run:

yarn test:watch

Demoing with Storybook

To run a local instance of Storybook for your component, run

yarn storybook

To build a production version of Storybook, run

yarn storybook:build

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with web-dev-server

yarn start

To run a local development server that serves the basic demo located in demo/index.html