# 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.

## 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 :