viamedici-spc/configurator-react-demo

Demo configurator application designed to showcase the integration of the npm package @viamedici-spc/configurator-react.

Viamedici SPC

Demo Configurator with React

Introduction

This project is a demo application designed to showcase the integration of our npm package, @viamedici-spc/configurator-react, with React.

It aims to help web developers quickly grasp how to embed and utilize configurator-react in an SPA, covering everything from initialization to user interaction and typical patterns used in configurator applications.

The app is technically designed to emphasize the features provided by our configuration solution.

Live Demo

https://viamedici-spc.github.io/configurator-react-demo/

The app utilizes a small Configuration Model based on a simple car. It includes several Rules that allow you to explore features like Implicit Decisions, Blocked Values, and Explain for different type of Attributes.

You can follow the workflow below to see these features in action:

1. Select EU in Sales Region: Your Explicit Decision automatically triggers an Implicit Decision, where Construction is set to Implicit: Car. Since no further Explicit Decision is required, Construction becomes satisfied.

2. Select Manual in Transmission::Type: Your Explicit Decision again triggers an Implicit Decision, setting Transmission to Implicit: included.

3. Select yes in HeavyDuty: This action triggers the Explain feature, revealing which previous selection is blocking yes.

4. In the prompt type 1 and confirm: This applies the first solution. The configuration system removes some of your incompatible Explicit Decisions and applies additional Implicit Decisions.

5. Click the Explain button in the Configuration (top left): The configuration system indicates that a Decision for HorsePower is required to complete the configuration.

6. Type 300 in HorsePower: The configuration is now satisfied, meaning you have completed the configuration. No Decision for Accessories is needed as it is marked optional and has been satisfied from the start.

Run Locally

To run the demo application locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/viamedici-spc/configurator-react-demo

2. Navigate to the project directory:

   cd configurator-react-demo

3. Install dependencies:

   npm install
   yarn install

4. Start the development server:

   npm run dev
   yarn run dev

License

This project is licensed under the MIT License - see the LICENSE file for details.