# Synbee Webcomponents Library
### A library of webcomponents for Synbee project

## Install:
First download the repository from git by ssh or https.
Then run the commands:
```
npm install
npm build
```
To develop just start the webserver with the command:
```
npm start
```
it will open a webservice reserved to develop the webcomponents.
#### here you can use the entire library, compose all webcomponents together and interact directly with them.

## What you will find in project:

##### - stecil.config.ts : 
> is the configuration file of stencil library
##### - src directory:
> is the main directory in which you can find the `src` directory of all webcomponents you create, the `index.html` file that is the first html parsed in webserver started with `npm start` command,
> `test` directory in which there are all end-to-end and unit test of webcomponents, `storybook` directory in which there are all stories of webcomponent, `interfaces.ts` that contain all interfaces decalared in library.
##### - servicebus directory
> a directory with 2 file that are used to implment for first time azure service bus
##### - scripts directory
> a directory in which there are all the usefull scripts described later.
##### tailwind.config.js & tailwind.css
> configuration files of tailwind
##### template directory
> a directory in which there are 3 files: `package.json`, `gitlab-ci.yml` and `stencil.config.ts`
> that are used in `publish.isolate.component`, `publish.isolate.all` and `gitlab-ci-yml-regenerate` commands. to generate in every webcomponent the same files described before to build a standalone stencil library for every webcomponent.
## Publish in locale (Reserved to dev phase):

When you are ready to publish a webcomponent there are 2 procedures to do it.

1) ### Publish the single webcomponent: 
###### Usefull if you just develop a single webcomponent (without integrations with others one) and you want to testing it on webapplication:
##### Just follow this procedure:


```
run build
run publish.isolate.component
```
now it starts the interactive mode where you have to follow what is written in terminal to end the procedure.
###### if you want to not use the interactive mode just run :
```
run publish.isolate.component --name nameofcomponent
```

At the end of this procedure you will find in path:`src/components/nameofcomponents` 
2 new file : 
`package.json and gitlab-ci.yml `
that are copied in directory 
`.build/nameofcomponent/components/nameofcomponent` and the `.build` directory that is the folder where is the stencil mini-project of your webcomponent
###### (it will be the single webcomponent you have to publish on npm).

Now go to .build/nameofcomponent and just do the following commands:
```
npm run build
npm pack
```
in this way you make a .tgz file that is your webcomponent published in local you can take it with the absolute path and put inside package.json of synbee-webapp.
2) ### Publish all webcomponents
```
run build
run publish.isolate.all
```
now it starts the interactive mode where you have to follow what is written in terminal to end the procedure.
###### if you want to not use the interactive mode just run :
```
run publish.isolate.all --name noninteractive
```

At the end of this procedure you make package.json and gitlab-ci.yml files in all webcomponent in `src/components/nameofcomponents`
and a .build directory with all webcomponent ready to be published.

In this way you make a .tgz file that is your webcomponent published in local you can take it with the absolute path and put inside package.json of synbee-webapp.

## Publish online (on NPMjs)
All you need to publish online a webcomponent is to be sure it's a working a stable version of it.
By following the same procedure of publish in locale, in this way, you have to stop before do the command:
`npm pack`.
Now Everything you have to do is to commit and push on gitlab and an automatic procedure will publish for you the webcomponent on `.build` directory.

### List of Scripts:

- In scripts folder there are some usefull scripts to manage our code.
Here the list of the scripts:


# Stencil General Documentation:

![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)

# Stencil Component Starter

This is a starter project for building a standalone Web Component using Stencil.

Stencil is also great for building entire apps. For that, use the [stencil-app-starter](https://github.com/ionic-team/stencil-app-starter) instead.

# Stencil

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool.  Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

## Getting Started

To start building a new web component using Stencil, clone this repo to a new directory:

```bash
git clone https://github.com/ionic-team/stencil-component-starter.git my-component
cd my-component
git remote rm origin
```

and run:

```bash
npm install
npm start
```

To build the component for production, run:

```bash
npm run build
```

To run the unit tests for the components, run:

```bash
npm test
```

Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).


## Naming Components

When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!

Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix `ion`.


## Using this component

There are three strategies we recommend for using web components built with Stencil.

The first step for all three of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).

### Script tag

- Put a script tag similar to this `<script type='module' src='https://unpkg.com/my-component@0.0.1/dist/my-component.esm.js'></script>` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

### Node Modules
- Run `npm install my-component --save`
- Put a script tag similar to this `<script type='module' src='node_modules/my-component/dist/my-component.esm.js'></script>` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

### In a stencil-starter app
- Run `npm install my-component --save`
- Add an import to the npm packages `import my-component;`
- Then you can use the element anywhere in your template, JSX, html etc
