# ai-core-client-demo

> ## Install dependencies ``` npm i cd projects/aitheon/core-client npm i cd ../../.. ```

Latest version **0.0.0** (published 2019-10-26) · 0 weekly downloads

## Install

```sh
npm install ai-core-client-demo
pnpm add ai-core-client-demo
yarn add ai-core-client-demo
bun add ai-core-client-demo
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0 |
| Published | 2019-10-26 |
| First published | 2019-10-26 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 30 |
| Unpacked size | 6.5 MB |
| Known vulnerabilities | 0 (+24 in 5 direct dependencies) |
| Install scripts | no |
| Maintainers | andrew.archer |

## Links

- npm: https://www.npmjs.com/package/ai-core-client-demo
- npm.io page: https://npm.io/package/ai-core-client-demo

## Dependencies (30)

- [cpx](https://npm.io/package/cpx.md) 1.5.0
- [rxjs](https://npm.io/package/rxjs.md) ~6.4.0
- [moment](https://npm.io/package/moment.md) 2.24.0
- [core-js](https://npm.io/package/core-js.md) ^2.6.3
- [zone.js](https://npm.io/package/zone.js.md) ~0.8.29
- [intro.js](https://npm.io/package/intro.js.md) ^2.9.3
- [bootstrap](https://npm.io/package/bootstrap.md) ^4.3.1
- [copyfiles](https://npm.io/package/copyfiles.md) 2.1.0
- [ng5-slider](https://npm.io/package/ng5-slider.md) 1.1.14
- [ngx-toastr](https://npm.io/package/ngx-toastr.md) 9.1.1
- [npn-slider](https://npm.io/package/npn-slider.md) ^1.3.2
- [ng-intercom](https://npm.io/package/ng-intercom.md) ^8.0.0
- [rxjs-compat](https://npm.io/package/rxjs-compat.md) ^6.4.0
- [sweetalert2](https://npm.io/package/sweetalert2.md) 8.0.5
- [concurrently](https://npm.io/package/concurrently.md) 4.1.0
- [@angular/core](https://npm.io/package/@angular/core.md) ~7.2.3
- [@angular/http](https://npm.io/package/@angular/http.md) ~7.2.3
- [ngx-bootstrap](https://npm.io/package/ngx-bootstrap.md) 3.2.0
- [@angular/forms](https://npm.io/package/@angular/forms.md) ~7.2.3
- [@angular/common](https://npm.io/package/@angular/common.md) ~7.2.3
- [@angular/router](https://npm.io/package/@angular/router.md) ~7.2.3
- [ng2-file-upload](https://npm.io/package/ng2-file-upload.md) 1.3.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ~7.2.3
- [ng2-currency-mask](https://npm.io/package/ng2-currency-mask.md) ^5.3.1
- [@angular/animations](https://npm.io/package/@angular/animations.md) ~7.2.3
- [ngx-select-dropdown](https://npm.io/package/ngx-select-dropdown.md) ^1.2.0
- [@ng-select/ng-select](https://npm.io/package/@ng-select/ng-select.md) 2.15.2
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ~7.2.3
- [@sweetalert2/ngx-sweetalert2](https://npm.io/package/@sweetalert2/ngx-sweetalert2.md) ^5.0.1
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ~7.2.3

## Recent versions

- 0.0.0 (latest) — 2019-10-26

## README

## Core client

## Install dependencies
 ```
 npm i
 cd projects/aitheon/core-client
 npm i
 cd ../../..
```

## 1. Build and watch lib
```
sudo npm run watch
```

(if you are using Linux and got ENOSPC error, make sure to reset maximum amount of watchers)

```
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
```

Wait lib to build and start watching changes and **only then go to step 2**


## 2. Development server
Run for a dev server. 
 ```
ng serve
``` 
Navigate to `http://localhost:4200/`.
The app will automatically reload if you change any of the source files.


## How to guides

### Main structure
- `src` - folder of demo application. Used to show all controls and themes from library
- `projects/aitheon/core-client` - Core library with components and themes styling.
- `dist` - library build result 

### Structure of `projects/aitheon/core-client/src` 

- `public_api.ts` - must export any service or component that will public available for library.
- `assets` - folderc ontains all core images, fonts and etc. files. All content of this folder will be copied to microservice assets folder during a build.
- `lib/core-client.options.ts` - optional options that pass to core library
- `lib` - this is a main library folder with components, services and etc. It's devided not by modules, but by types such as services, pipes, directives and etc.

### Demo application
- Must demonstate all possible states of elements/components, as example `buttons` component require to demonstrate all posible button sizes (`.btn-lg, btn-sm` and etc.) and variants with icons, etc.


### Themes.
All styles and themes is at `projects/aitheon/core-client/styles` folder
- `main.scss` - contains css/scss links to angular and etc, libraries 
- `core` - folder contains general elements styles, such as tabs, checkboxes and etc.
used in this library and a link to to `core/core.scss`
- `core/core.scss` - contains all core styles/animations and link to bootstrap to be able override it's variables
- `core/_variables.scss` - contains z-index, size or different elements if they static, common background and etc. Must not include colors or etc theme related variable that is used in themes, to avoid dublicate.
- `themes` - folder for themes. Any elements that need special theme styling such drive-uploader, tabs or etc. will be here, as example `themes/${theme-name}/_tabs.scss`
- `themes/${theme-name}` - folder with all theme styles. Always as a root file must have `themes/${theme-name}/${theme-name}.scss` file. 
- `themes/${theme-name}/_variables.scss` - colors, background variables for theme

#### Create or modify theme
- variable names must be **lower-case**, as example: `$brand-primary`;
- all colors, background and etc. must be variables
- class naming: when it's possible class name must be as general as possible. As example, theme must not include class name `top-left-user-header-used-only-here`, just make it as `top-header` and `user-header` that will just modify some small things.
- class naming: **don't create too spesific classes**. 
example of **BAD** classes
```
.pt-7{
  padding-top: 7px;
}
.pt-8 {
  padding-top: 8px;
}
.bg-d3d3d3 {
  background: #d3d3d3;
}
```
better will be
```
.pad-sm{
    padding-top: 7px;
}
.pad-md {
    ... etc
}
.light-background {
    ...
}
```


#### How to switch theme or get change event
- Core library includes `ThemesService`. 
- Theme switching is already implemented in header, to switch it from other code `themesService.switchTheme()`
- Example of of theme changed event.
```
import { ThemesService } from '@aitheon/core-client';
...
constructor(
    private themesService: ThemesService,
  ) {
    this.themesService.themeChanged.subscribe((theme: any) => {
      console.log('theme:', theme);
    });
  }
```

Any theme except `default` need to have all style under `${theme-name}` class for `body` element. as example, `dark` theme styles for button.
```
body.dark {
    .btn-primary {
        // styles
    }
}
```

#### Styling components at microservices level
When need to apply some styles to component elements at microservice, you can use theme variables, as example, for `dashboard`

**dashboard.component.ts**
include `${component-name}.${theme-name}.scss` file and add it to styleUrls
```
@Component({
  selector: 'ai-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [
    './dashboard.component.scss',
    './dashboard.component.dark.scss'
  ]
})
```

**dashboard.component.dark.scss**

You can import `variables` for corresponding theme and core variables, as in example below, **path to node_modules need to match your component folder level**.

At this example, class `.btn-cool-user` will have a `$brand-primary` color from `dark` theme when `body` will be with class `dark`
```
// contains size and index
@import '../../../node_modules/@aitheon/core-client/styles/core/variables';
// colors and theme related staff
@import '../../../node_modules/@aitheon/core-client/styles/themes/dark/variables';

:host-context(.dark) {
    .btn-cool-user {
        color: $brand-primary;
    }
}
```


#### How theme file included to page
At `index.html` file there is link to compiled css file. Link to selected theme is changed at `ThemesService` at this library.
```
<link rel="stylesheet" id="css-theme" href="styles/themes/default/default.css" />
```

### Library Version changes manifest
- MAJOR version when you make breacking API changes, Angular major version up
- MINOR version when you add functionality in a backwards-compatible manner. New components or it's updates.
- PATCH version when you make backwards-compatible bug fixes.

### Publish lib
Before publish need to version up library following above rules at file `projects/aitheon/core-client/package.json` 
```
npm run pub:lib
```

---
_Source: https://npm.io/package/ai-core-client-demo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._