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

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

kann dann die Umgebung erzeugt werden.

Mit

npm run dev

kann die Entwicklungsumgebung gestartet werden.

React Router für das Page Routing:

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 Darüber Hinaus wird der "Inter"-Font und der "Roboto"-Font genutzt.

Zur Installation im Root-Verzeichnis des Client-Quellcodes

npm install @mui/material @emotion/react @emotion/styled
npm install @fontsource-variable/inter
npm install @mui/icons-material
npm install @mui/x-data-grid

aufrufen.

Datenbank Zugriff mit ky

Um auf den Simply CPQ Master-Data Server zuzugreifen wird die Bibliothek ky genutzt. ky - npm

Zur Installation im Root-Verzeichnis des Client-Quellcodes

npm install ky

aufrufen.

Alt

Genutzte Techologie

Der Client ist eine Web-Applikation, die auf der React-Library aufgebaut ist. React

Zusätzliche Open Source Bibliotheken:

Umgebung

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

Mit

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

kann dann die Umgebung erzeugt werden.

Mit

npm run dev

kann die Entwicklungsumgebung gestartet werden.

Folgende Komponenten müssen noch installiert werden:

React Router

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

Zur Installation im Root-Verzeichnis des Client-Quellcodes

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

npm install @heroicons/react

CSS Helper Tailwind CSS

Zur schnellen Erstellung von Layout: tailwindlabs/tailwindcss: A utility-first CSS framework for rapid UI development.

npm install tailwindcss @tailwindcss/vite

Dann die Datei vite.config.ts editieren

edit vite.config.ts

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

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

In der Scriptdatei:

@import "tailwindcss";

Dokumentation :