✨ Angular feature update (by GeetaKrishna65)

README.md

@@ -1,4 +1,8 @@
-# @takuma-ru/auto-story-generator
+
+> [!NOTE]
+> This is a fork of [@takuma-ru/auto-story-generator](https://github.com/takuma-ru/auto-story-generator/assets/49429291/dca65c2c-3384-45c0-a761-e85276cb2393)(which doesn't support Angular). This is meant to extend @takuma-ru/auto-story-generator and support Angular. 
+
+# auto-angular-story-generator
 
 ![asg-thumbnail](https://auto-story-generator.takumaru.dev/asg-thumbnail-radius.png)
 
@@ -8,7 +12,7 @@ Automatic real-time story file generation from React, Vue, Angular and Lit compo
 ## Getting Started
 ### 1. Install the package
 ```bash
-npm i @takuma-ru/auto-story-generator
+npm i auto-angular-story-generator
 ```
 
 ### 2. Add config
@@ -37,6 +41,55 @@ const config: StorybookConfig = {
 export default config;
 ```
 
+> [!WARNING]  
+> Don't run this plugin(Angular part) on your apps right away. Test it on a sample Application or create a new Angular app.
+
+> [!NOTE]
+> Angular feature is a WIP. Only a basic story can be created at this point of time. Modify the created stories as required. Will try to improve story creation.
+
+For `Angular` [Webpack custom config](https://storybook.js.org/docs/builders/webpack#working-with-webpack-plugins)
+
+```ts
+import type { StorybookConfig } from "@storybook/angular";
+
+import autoStoryGenerator from "@takuma-ru/auto-story-generator";
+
+const customConfig = {
+  webpackFinal: async (config) => {
+    let plugin = autoStoryGenerator.webpack({
+      preset: "angular",
+      imports: ["**/src/**/*.component.ts"],
+    });
+    config.plugins.push(plugin);
+    return config;
+  }
+}
+
+const primeConfig: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/angular",
+    options: {},
+  },
+  // spread the object here instead of mergeConfig(avaialable for vite) 
+  ...customConfig,
+  docs: {
+    autodocs: "tag",
+  },
+};
+
+export default primeConfig;
+```
+> [!NOTE]
+> In Angular, for first time story creation, a run tme error occurs, can ignore it. 
+
+
+
 ## Supported Frameworks
 > ✅: Supported<br>
 > 🚧: Work in progress<br>
@@ -50,4 +103,4 @@ export default config;
 | Lit       | ✅         |
 | Angular   | 🚧         |
 | Svelte    | 📝         |
-| Custom    | 📝         |
+| Custom    | 📝         |

demo/angular/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

demo/angular/.gitignore

@@ -0,0 +1,45 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
+
+*storybook.log

demo/angular/.storybook/main.ts

@@ -0,0 +1,35 @@
+import type { StorybookConfig } from "@storybook/angular";
+import { resolve } from "path";
+import autoStoryGenerator from '../../../packages/auto-story-generator/src/index';
+
+const customConfig = {
+  webpackFinal: async (config) => {
+    let plugin = autoStoryGenerator.webpack({
+      preset: "angular",
+      imports: ["src/app/**/*.component.ts"],
+      isGenerateStoriesFileAtBuild: true,
+      prettierConfigPath: resolve(__dirname, '../.prettierrc'),
+    });
+    config.plugins.push(plugin);
+    return config;
+  }
+};
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/angular",
+    options: {},
+  },
+  ...customConfig,
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

demo/angular/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/angular";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

demo/angular/.storybook/tsconfig.doc.json

@@ -0,0 +1,10 @@
+// This tsconfig is used by Compodoc to generate the documentation for the project.
+// If Compodoc is not used, this file can be deleted.
+{
+  "extends": "./tsconfig.json",
+  // Exclude all files that are not needed for documentation generation.
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../src/**/*.stories.ts"],
+  // Please make sure to include all files from which Compodoc should generate documentation.
+  "include": ["../src/**/*"],
+  "files": ["./typings.d.ts"]
+}

demo/angular/.storybook/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.app.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
+  "include": ["../src/**/*.stories.*", "./preview.ts"],
+  "files": ["./typings.d.ts"]
+}

demo/angular/.storybook/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}

demo/angular/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

demo/angular/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

demo/angular/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

demo/angular/README.md

@@ -0,0 +1,27 @@
+# Angular
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.7.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.