Sldel Component Generator

This NPM package provides an Angular schematic for generating components dynamically. It allows developers to create form-based components using a JSON configuration file.

🎯 Motivation

Developing form-based components manually can be time-consuming and inconsistent. This schematic streamlines the process by automating component generation, ensuring:

• Faster Development – Saves time by eliminating repetitive scaffolding tasks.

• Consistency – Maintains a uniform structure across components, reducing errors and improving maintainability.

• Scalability – Enables quick creation of new components, making application expansion more efficient.

✅ Requirements

• Tailwind installed.
• JSON files should be present in the project directory.
• (Optional) JSON Generator app for creating JSON files.

📦 Installation

To install the schematic globally:

npm install -g fp-quoter-component-generator

To install it as a dev dependency in your Angular project:

npm install --save-dev fp-quoter-component-generator

🚀 Usage

Run the schematic to generate a component:

ng g fp-quoter-component-generator:free-form --name="myComponent" --config="path/to/form-config.json"

📝 Input Parameters

• --name (Required) → The name of the component to generate.

• --config (Required) → Path to a JSON file defining the form structure.

📄 Example JSON Configuration

{
  "name": "applicantEditForm",
  "controls": [
    {
      "name": "CUSTOMER_NUM",
      "label": "Customer #",
      "type": "text",
      "disabled": true,
      "validations": {
        "required": false
      }
    },
    {
      "name": "CUSTOMER_TYPE",
      "label": "Customer Type",
      "type": "dropdown",
      "disabled": false,
      "validations": {
        "required": false
      }
    }
  ]
}

🛠 Generated Component Structure

/src/app/components/
 ├── my-component/
 │   ├── my-component.component.ts
 │   ├── my-component.component.html
 │   ├── my-component.component.scss

The generated component includes form controls based on the JSON configuration.

📌 Notes

• The schematic works with Angular CLI.
• Ensure the JSON configuration is valid before running the command.
• Consider using the JSON Generator app to create and manage JSON configurations easily.

📜 License

MIT