# Simply CPQ Buildtime Client

Dieser Ordner enthält alle relevanten Dateien und Informationen zum Simply CPQ Buildtime Client. Dieser dient der Pflege von Produktdaten, Regeln, Konditionen und Administration der Simply CPQ Anwendung.

## Material-Editor

Dieser Editor basiert auf react und der Material UI Bibliothek.

### Zusätzliche Open Source Bibliotheken:

#### Umgebung

Für die Entwicklung wird die Software Node.JS benötigt, hier zu finden:
https://nodejs.org/

Mit

```bash
npm create vite@latest material-editor -- --template react-ts
```

kann dann die Umgebung erzeugt werden.

Mit

```bash
npm run dev
```

kann die Entwicklungsumgebung gestartet werden.



React Router für das Page Routing:

```bash
npm install react-router
```

#### UI: Material UI

Material UI ist eine React UI Bibliothek. Der Material-Editor nutzt die Open-Source Komponenten mit der MIT-Lizenz. [MUI: The React component library you always wanted](https://mui.com/)
Darüber Hinaus wird der "Inter"-Font und der "Roboto"-Font genutzt.

Zur Installation im Root-Verzeichnis des Client-Quellcodes 

```bash
npm install @mui/material @emotion/react @emotion/styled
npm install @fontsource-variable/inter
npm install @mui/icons-material
npm install @mui/x-data-grid
npm install @mui/x-tree-view
npm install @mui/lab
```

aufrufen.

### Datenbank Zugriff mit ky

Um auf den Simply CPQ Master-Data Server zuzugreifen wird die Bibliothek *ky* genutzt. [ky - npm](https://www.npmjs.com/package/ky)

Zur Installation im Root-Verzeichnis des Client-Quellcodes 

```bash
npm install ky
```

aufrufen.

# Alt

## Genutzte Techologie

Der Client ist eine Web-Applikation, die auf der React-Library aufgebaut ist.
[React](https://react.dev/)

### Zusätzliche Open Source Bibliotheken:

#### Umgebung

Für die Entwicklung wird die Software Node.JS benötigt, hier zu finden:
https://nodejs.org/

Mit

```bash
npm create vite@latest logical-editor --template react
```

kann dann die Umgebung erzeugt werden.

Mit

```bash
npm run dev
```

kann die Entwicklungsumgebung gestartet werden.

Folgende Komponenten müssen noch installiert werden:

##### React Router

```bash
npm install react-router
```

#### Tree View Komponente (react-arborist)

Diese Komponente wird zur Anzeige von Bäumen auf der Oberfläche genutzt. Hier zu finden:
[jameskerr/react-arborist: The complete tree view component for React](https://github.com/jameskerr/react-arborist)

Zur Installation im Root-Verzeichnis des Client-Quellcodes 

```bash
npm install react-arborist
```

aufrufen.

#### Icon-Library:

HeroIcon Lib mit der MIT Lizenz ([tailwindlabs/heroicons: A set of free MIT-licensed high-quality SVG icons for UI development.](https://github.com/tailwindlabs/heroicons)
).

```bash
npm install @heroicons/react
```

#### CSS Helper Tailwind CSS

Zur schnellen Erstellung von Layout: [tailwindlabs/tailwindcss: A utility-first CSS framework for rapid UI development.](https://github.com/tailwindlabs/tailwindcss)

```bash
npm install tailwindcss @tailwindcss/vite
```

Dann die Datei vite.config.ts editieren

```javascript
edit vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({  
    plugins: [    
        tailwindcss(),  
    ],
})
```

In der Scriptdatei:

```javascript
@import "tailwindcss";
```

Dokumentation :