From 839b7a767df4cfd34ca8ccf8673b196b9a4689d7 Mon Sep 17 00:00:00 2001
From: Igor Katsuba <igor@katsuba.dev>
Date: Fri, 20 Sep 2024 13:27:53 +0300
Subject: [PATCH] Add documentation for @mutates/angular package

Add detailed documentation for `@mutates/angular` package in `docs/src/app/angular/page.md`.

* **Introduction and Features**
  - Describe `@mutates/angular` as a specialized package within the Mutates toolset.
  - Highlight key features such as Angular-specific transformations, seamless integration, and efficiency.

* **Installation**
  - Provide installation instructions using npm.

* **Usage Examples**
  - Include a basic example demonstrating how to use `@mutates/angular` to modify an Angular component.
  - Provide an example for using Angular Tree with schematics and migrations.

* **API Reference**
  - Add a link to the official documentation for a comprehensive guide on available APIs.

* **Contributing and License**
  - Include contributing guidelines and license information.
  - Provide links to the GitHub repository and LICENSE file.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/IKatsuba/mutates?shareId=XXXX-XXXX-XXXX-XXXX).
---
 docs/src/app/angular/page.md | 104 ++++++++++++++++++++++++++++++++++-
 1 file changed, 103 insertions(+), 1 deletion(-)

diff --git a/docs/src/app/angular/page.md b/docs/src/app/angular/page.md
index 7664e13..e151352 100644
--- a/docs/src/app/angular/page.md
+++ b/docs/src/app/angular/page.md
@@ -6,4 +6,106 @@ nextjs:
     description: How to install `@mutates/angular` and get started.
 ---
 
-WIP
+# @mutates/angular
+
+🌟 **@mutates/angular** is a specialized package within the Mutates toolset, offering powerful tools
+to mutate the Abstract Syntax Tree (AST) of Angular projects. Built on top of `@mutates/core`, this
+package provides Angular-specific transformations, making it easier to work with Angular components,
+directives, services, and more.
+
+[![](https://raw.githubusercontent.com/IKatsuba/mutates/main/docs/src/app/opengraph-image.png)](https://mutates.katsuba.dev)
+
+## Features
+
+- **Angular-Specific Transformations:** Modify the AST of Angular components, directives, modules,
+  and services.
+- **Seamless Integration:** Works in conjunction with `@mutates/core` for a smooth development
+  experience.
+- **Efficient:** Designed to handle the unique structure and requirements of Angular projects.
+
+## Installation
+
+To install the Angular package, use the following command:
+
+```sh
+npm install @mutates/angular @mutates/core
+```
+
+## Usage
+
+### Basic Example
+
+Here is a simple example demonstrating how to use `@mutates/angular` to modify an Angular component:
+
+```typescript
+import { addProviders, getComponents } from '@mutates/angular';
+import { createProject, createSourceFile, saveProject } from '@mutates/core';
+
+// Initialize a new Angular project
+createProject();
+
+// Add an Angular component file to the project
+createSourceFile(
+  'app.component.ts',
+  `
+  import { Component } from '@angular/core';
+
+  @Component({
+    selector: 'app-root',
+    template: '<h1>Hello, World!</h1>'
+  })
+  export class AppComponent {}
+`,
+);
+
+// Perform some Angular-specific transformations
+addProviders(getComponents('app.component.ts').at(0)!, ['AppService']);
+
+// Save the modified file
+saveProject();
+```
+
+For schematics and migrations the package provided special function to connect with Angular Tree.
+Angular Tree is a special tree that is used to work with Angular projects. It is based on the
+`@angular-devkit/schematics` package.
+
+```typescript
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+
+import { createAngularProject } from '@mutates/angular';
+import { saveProject } from '@mutates/core';
+
+export function mySchematic(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    // Use Angular Tree to work with Angular projects
+    createAngularProject(tree);
+
+    // Perform Angular-specific transformations
+    addProviders(getComponents('app.component.ts').at(0)!, ['AppService']);
+
+    saveProject();
+
+    return tree;
+  };
+}
+```
+
+## API Reference
+
+For a comprehensive guide on the available APIs and their usage, please refer to the
+[official documentation](https://mutates.katsuba.dev/packages/angular)
+
+## Contributing
+
+🤝 Contributions are welcome! If you have any improvements or suggestions, feel free to open an
+issue or submit a pull request.
+
+## License
+
+📄 @mutates/angular is licensed under the Apache-2.0 License. See the
+[LICENSE](https://github.com/ikatsuba/mutates/blob/main/LICENSE) file for more information.
+
+---
+
+For further assistance or to report issues, please visit our
+[GitHub repository](https://github.com/ikatsuba/mutates).