Console client and documentation

CHANGELOG.md

@@ -0,0 +1,8 @@
+# CHANGELOG
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## Unreleased

README.md

@@ -11,19 +11,17 @@
 
 Boilerplate for a Web Components library flavoured to be used in [micro-lc](https://micro-lc.io/docs).
 
-## Whats inside
+## Whats inside
 
 This repository contains an opinionated scaffolding for a library of [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) built with [Lit](https://lit.dev/) and Typescript support, and bundled with [Vite](https://vitejs.dev/).
 
-The `src` directory contains three different components, each showcasing a specific pattern or feature. Moreover, the repository ships three HTML pages (`index.html`, `public/test.html`, and `public/test.min.html`) the uses the composition features of [micro-lc](https://micro-lc.io/api/composer-api) to render the components and make them work together.
+The `src` directory contains a series components, each showcasing a specific pattern or feature. Each component comes with a set of [stories](https://storybook.js.org/docs) acting as documentation.
 
-- `<custom-typography>`: a simple, presentational component build just using Lit. It accepts a property to control the text content, and showcases how a Web Component can be styled with CSS.
-- `<custom-button>`: a component built using [back-kit-engine](https://github.com/micro-lc/back-kit-engine) and React that emits a custom event. This component ships also a _manifest_ file making it configurable with Mia-Platform's [Microfrontend Composer Configurator](https://docs.mia-platform.eu/docs/microfrontend-composer/external-components/manifest).
-- `<custom-counter>`: a component built using [back-kit-engine](https://github.com/micro-lc/back-kit-engine) library that listens to a custom event.
+Moreover, the repository ships an HTML pages (`index.html`) that uses the composition features of [micro-lc](https://micro-lc.io/api/composer-api) to render the components and make them work together.
 
 ## Local development
 
-To develop the service you need Node.js v20 or later. 
+To develop the service you need Node.js v20 or later.
 
 To setup Node.js, we suggest using [nvm](https://github.com/creationix/nvm), so you can manage multiple versions easily. Once you have installed nvm, you can go inside the directory of the project and simply run `nvm install`, the `.nvmrc` file will install and select the correct version if you don’t already have it.
 
@@ -34,55 +32,14 @@ corepack enable
 yarn install
 ```
 
-while build can be issued with `yarn build`, or `yarn build-min` for the minified version (where `react`, `react-dom`, and `rxjs` are [externalized](https://rollupjs.org/configuration-options/#external)).
+while build can be issued with `yarn build`.
 
-To test your components in development mode run `yarn start`. This command will spin up the `index.html` in the root of the repository. If you want to try the built version of the library, run `yarn preview` and navigate to `/test.html` or `/test.min.html` for the non-minified and the minified version respectively.
+To test your components in development mode you can run `yarn start` and spin up the `index.html` in the root of the repository. To consult components documentation you can start Storybook running `yarn storybook`.
 
----
+### Serve your library
 
-## DevOps console
+Once built, your Web Components library needs to be made available. You have several ways to accomplish this, among which there are **exposing a Docker container** and **publishing on a CDN**.
 
-This walkthrough will explain you how to correctly create a Web Components library from the DevOps Console.
-
-### Create a microservice
-
-Access your [Mia-Platform DevOps Console](https://console.cloud.mia-platform.eu/login), create a new project, and go to the **Design** area.
-
-From the Design area of your project, select _Microservices_ and then create a new one, you have now reached [Mia-Platform Marketplace](https://docs.mia-platform.eu/development_suite/api-console/api-design/marketplace/)!
-In the marketplace you will see a set of Examples and Templates that can be used to set-up microservices with a predefined and tested function.
-
-For this walkthrough select the following template: **micro-lc Web Components Library Template**.
-Give your microservice the name you prefer, in this walkthrough we'll refer to it with the following name: **micro-lc-wc-library-template**. Then, fill the other required fields and confirm that you want to create a microservice.  
-A more detailed description on how to create a Microservice can be found in [Microservice from template - Get started](https://docs.mia-platform.eu/development_suite/api-console/api-design/custom_microservice_get_started/#2-service-creation) section of Mia-Platform documentation.
-
-### Expose an endpoint to your microservice
-
-In order to access to your new microservice it is necessary to create an endpoint that targets it.  
-In particular, in this walkthrough you will create an endpoint to your microservice *micro-lc-wc-library-template*. To do so, from the Design area of your project select _Endpoints_ and then create a new endpoint.
-Now you need to choose a path for your endpoint and to connect this endpoint to your microservice. Give to your endpoint the following path: **/micro-lc-wc-library**. Then, specify that you want to connect your endpoint to a microservice and, finally, select *micro-lc-wc-library-template*.  
-Step 3 of [Microservice from template - Get started](https://docs.mia-platform.eu/development_suite/api-console/api-design/custom_microservice_get_started/#3-creating-the-endpoint) section of Mia-Platform documentation will explain in detail how to create an endpoint from the DevOps Console.
-
-### Save your changes
-
-After having created an endpoint to your microservice you should save the changes that you have done to your project in the DevOps console.  
-Remember to choose a meaningful title for your commit (e.g 'created service micro-lc-wc-library-template'). After some seconds you will be prompted with a popup message which confirms that you have successfully saved all your changes.  
-Step 4 of [Microservice from template - Get started](https://docs.mia-platform.eu/development_suite/api-console/api-design/custom_microservice_get_started/#4-save-the-project) section of Mia-Platform documentation will explain how to correctly save the changes you have made on your project in the DevOps console.
-
-### Deploy
-
-Once all the changes that you have made are saved, you should deploy your project through the DevOps Console. Go to the **Deploy** area of the DevOps Console.  
-Once here select the environment and the branch you have worked on and confirm your choices clicking on the *deploy* button. When the deploy process is finished you will receive a pop-up message that will inform you.  
-Step 5 of [Microservice from template - Get started](https://docs.mia-platform.eu/development_suite/api-console/api-design/custom_microservice_get_started/#5-deploy-the-project-through-the-api-console) section of Mia-Platform documentation will explain in detail how to correctly deploy your project.
-
-### Try it
-
-Now, if you launch the following command on your terminal (remember to replace `<YOUR_PROJECT_HOST>` with the real host of your project):
-
-```shell
-curl <YOUR_PROJECT_HOST>/micro-lc-wc-library/test-components.esm.js
-```
-
-you should see a your Web Components code.
-
-Congratulations! You have successfully learnt how to use our _micro-lc Web Components Library_ Template on the DevOps Console!
+This template already contains a Dockerfile from which a simple Nginx web server can be build. The resulting Docker image may be used, for example, to create and deploy a microservice through [Mia-Platform Console](https://docs.mia-platform.eu/docs/console/tutorials/configure-marketplace-components/create-a-custom-microservice). Keep in mind that this approach may need some [fine tuning](https://docs.mia-platform.eu/docs/microfrontend-composer/external-components/overview#sourcing) if you plan to use your library in [Mia-Platform Microfrontend Composer](https://docs.mia-platform.eu/docs/microfrontend-composer/what-is).
 
+Another option is to push your Web Components statics on a public or private CDN. Unlike the Docker image, this method [should work seamlessly](https://docs.mia-platform.eu/docs/microfrontend-composer/external-components/overview#public-cdn) with Mia-Platform Microfrontend Composer.

package.json

@@ -4,10 +4,13 @@
   "type": "module",
   "packageManager": "[email protected]",
   "license": "SEE LICENSE IN LICENSE",
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
   "scripts": {
     "start": "vite",
-    "build": "vite build --mode production",
-    "build-min": "vite build --mode min",
+    "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext ts,tsx --ignore-path .gitignore",
     "test": "echo \"TODO\"",
@@ -27,6 +30,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",
+    "@mia-platform/console-types": "^0.24.1",
     "@mia-platform/eslint-config-mia": "^3.0.0",
     "@micro-lc/compose-toolkit": "^0.2.0",
     "@micro-lc/composer": "^2.1.0",