Data-sharing

Table of Contents

1. Introduction
2. Installation
3. Development
4. Tests
5. Storybook
6. Build
7. License
8. Usage of the component

Introduction

This is the data sharing startin'blox component.

Installation

npm install

Development

npm run watch

Tests

npm run cy:run

or

npm run cy:open

Storybook

npm run storybook

Build

npm run build

Localization

This project uses @lit/localize for internationalization.

Extracting strings

To extract strings for translation, run:

npm run locale:extract

This command will generate XLIFF files in the locales directory.

Changing locale

To change the locale, run:

window.setLocale.map((setLocale) => setLocale("your-lang-code"));

Getting current locale

To get the current locale, run:

window.getLocale.map((locale) => console.log(locale));

License

MIT

Usage of the component

To use the component, first, you'll need to import the startinblox core in the head of your file :

<script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@startinblox/core@latest/dist/index.js"
></script>

In the html file, you will also need to add this script to the body :

<script type="module">
    window.orbit = {
    client: {
        name: "Orbit",
        logo: "https://cdn.startinblox.com/logos/ACME.svg",
    },
    components: [],
    getRoute: (route) => route,
    getDefaultRoute: () => "",
    getComponent: () => undefined,
    getComponentFromRoute: () => undefined,
    Swal: () => {},
    defaultRoute: "",
    federations: {},
    componentSet: new Set(["routing", "menu", "menu-top", "autoLogin", "solid-permissioning"]),
    };
</script>

Then, you have to call the component with three parameters :

• data-src : where the datas wil be found. You need to respect the specifications here. You can find an example here
• noRouter

<solid-permissioning
    data-src="https://data-server.cqcm.startinblox.com/enterprises/1/platforms"
    noRouter
    auto-lang
    lang="fr"
    auth-token="1654654zdaz54d">
</solid-permissioning>

• Attributes auto-lang, lang and auth-token are optional.
• auto-lang: the component takes the browser language, and if this is not known, it will default to English.
• lang : to set a language. If this is not known, the component will default to English.
• Without attributes auto-lang and lang, the component will default to English.
• For the moment, the known languages are English and French. Other languages may be added in the future.
• Without attributes auth-token, the put request wil have no authorization in the request's header.

Finally in the body, after the call at the component, you'll have to import the script :

<script 
    src="https://cdn.jsdelivr.net/npm/@startinblox/solid-data-permissioning@latest/dist/index.js" 
    type="module">
</script>

you can customize the colors by adding the following instructions to your application's css file:

solid-permissioning {
  --font-family: [your font];
  --color-text: [text color];
  --color-primary: [button background];
  --color-primary-dark: [background of active buttons];
  --color-primary-light: [light button border]; 
  --color-secondary: [secondary button border];
  --color-secondary: [title line of platforms with scopes and used for cheked];
  --color-third: [block background];
  --color-third-dark: [background of active light buttons];
  --color-heading: [platform title line without scopes];
  --color-grey: [gray used for unchecked];
}

Changelog

 04/09 - new way to retrieve scopes:

scopes-uri now useless, replaced by retrieving scopes from the proxy profile.