Update Storybook, Angular, node and use npm instead of yarn

.eslintrc.json

@@ -24,12 +24,18 @@
 		{
 			"files": ["*.ts", "*.tsx"],
 			"extends": ["plugin:@nx/typescript"],
-			"rules": {}
+			"rules": {
+				"@typescript-eslint/no-extra-semi": "error",
+				"no-extra-semi": "off"
+			}
 		},
 		{
 			"files": ["*.js", "*.jsx"],
 			"extends": ["plugin:@nx/javascript"],
-			"rules": {}
+			"rules": {
+				"@typescript-eslint/no-extra-semi": "error",
+				"no-extra-semi": "off"
+			}
 		}
 	],
 	"extends": ["plugin:storybook/recommended"]

.gitattributes

@@ -1,4 +1 @@
-/.yarn/**            linguist-vendored
-/.yarn/releases/*    binary
-/.yarn/plugins/**/*  binary
-/.pnp.*              binary linguist-generated
+

.gitignore

@@ -43,4 +43,7 @@ Thumbs.db
 .idea
 .husky/_/*
 
-.nx/cache
+.nx/cache
+.nx/workspace-data
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md

.husky/_/husky.sh

@@ -1,36 +1,9 @@
-#!/usr/bin/env sh
-if [ -z "$husky_skip_init" ]; then
-  debug () {
-    if [ "$HUSKY_DEBUG" = "1" ]; then
-      echo "husky (debug) - $1"
-    fi
-  }
-
-  readonly hook_name="$(basename -- "$0")"
-  debug "starting $hook_name..."
-
-  if [ "$HUSKY" = "0" ]; then
-    debug "HUSKY env variable is set to 0, skipping hook"
-    exit 0
-  fi
+echo "husky - DEPRECATED
 
-  if [ -f ~/.huskyrc ]; then
-    debug "sourcing ~/.huskyrc"
-    . ~/.huskyrc
-  fi
+Please remove the following two lines from $0:
 
-  readonly husky_skip_init=1
-  export husky_skip_init
-  sh -e "$0" "$@"
-  exitCode="$?"
-
-  if [ $exitCode != 0 ]; then
-    echo "husky - $hook_name hook exited with code $exitCode (error)"
-  fi
-
-  if [ $exitCode = 127 ]; then
-    echo "husky - command not found in PATH=$PATH"
-  fi
+#!/usr/bin/env sh
+. \"\$(dirname -- \"\$0\")/_/husky.sh\"
 
-  exit $exitCode
-fi
+They WILL FAIL in v10.0.0
+"

.prettierignore

@@ -1,4 +1,5 @@
 dist
 .angular/cache
 
-/.nx/cache
+/.nx/cache
+/.nx/workspace-data

CONTRIBUTION.md

@@ -4,10 +4,11 @@
 
 ## Starting the playground
 
-1) Run `yarn`
-2) Run `yarn start-demo`
+1. Run `npm i`
+2. Run `npm run build`
+3. Run `npm run start-demo`
 
 ## Project structure
 
 - `packages/angular-demo` contains the playground. The stories and angular components can be used to test bugs or features.
-- `packages/storybook-webpack-angular-types-plugin` contains the webpack plugin and the type extractor for `<ArgsTable />`
+- `packages/storybook-webpack-angular-types-plugin` contains the webpack plugin and the type extractor for `<ArgTypes />`

README.md

@@ -1,16 +1,16 @@
 # Webpack angular types plugin
 
-A webpack plugin that generates types information for the Storybook `<ArgsTable />` 
-during compile time of Storybook itself. 
+A webpack plugin that generates types information for the Storybook `<ArgTypes />`
+during compile time of Storybook itself.
 
-> **Heads up!** This package is in an experimental stage and not yet officially 
+> **Heads up!** This package is in an experimental stage and not yet officially
 > supported by Storybook until it got reviewed and approved by the core team.
 
 ## Goals
 
 - **Being fast.** The additional type extraction should not be noticeable.
-- **Zero-config.** The `<ArgsTable />` should render useful information out-of-the-box.
-- **Configurable.** The plugin should be configurable in a way that you can adjust the content of `<ArgsTable />`.
+- **Zero-config.** The `<ArgTypes />` should render useful information out-of-the-box.
+- **Configurable.** The plugin should be configurable in a way that you can adjust the content of `<ArgTypes />`.
 
 ## Installation
 
@@ -19,50 +19,50 @@ during compile time of Storybook itself.
 If you are using compodoc for extracting types from your components, then you first have to remove it.
 
 **.storybook/preview.js**
+
 ```javascript
 // Remove these
-import { setCompodocJson } from "@storybook/addon-docs/angular";
-import docJson from "../documentation.json";
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+import docJson from '../documentation.json';
 setCompodocJson(docJson);
 ```
 
 **package.json**
+
 ```json
 {
-  // Before
-  "scripts": {
-	"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
-	"storybook": "yarn docs:json && start-storybook -p 6006",
-	"build-storybook": "yarn docs:json && build-storybook"
-  },
-  // after
-  "scripts": {
-	"storybook": "start-storybook -p 6006",
-	"build-storybook": "build-storybook"
-  }
+	// Before
+	"scripts": {
+		"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
+		"storybook": "yarn docs:json && start-storybook -p 6006",
+		"build-storybook": "yarn docs:json && build-storybook"
+	},
+	// after
+	"scripts": {
+		"storybook": "start-storybook -p 6006",
+		"build-storybook": "build-storybook"
+	}
 }
 ```
 
-If you don't use compodoc for anything else, then you should remove the `documentation.json` in your root directory 
+If you don't use compodoc for anything else, then you should remove the `documentation.json` in your root directory
 as well as the compodoc dependency in your `package.json`.
 
 ### Install package
+
 ```shell
-// npm
 npm install storybook-webpack-angular-types-plugin --save-dev
-
-// yarn
-yarn install --dev storybook-webpack-angular-types-plugin
 ```
 
-### Configure storybook 
+### Configure storybook
 
 The following steps are necessary because this plugin is not yet integrated as a Storybook addon.
 
-**.storybook/main.js**
+**.storybook/main.ts**
 
 ```javascript
-const WebpackAngularTypesPlugin = require('storybook-webpack-angular-types-plugin/index').WebpackAngularTypesPlugin;
+const WebpackAngularTypesPlugin =
+	require('storybook-webpack-angular-types-plugin/index').WebpackAngularTypesPlugin;
 
 module.exports = {
 	// ...
@@ -99,5 +99,5 @@ A full documentation will be available at a later point in time.
 You can start the demo app by running
 
 ```shell
-yarn start-demo
+npm run start-demo
 ```

jest.config.ts

@@ -1,5 +1,5 @@
-import { getJestProjects } from '@nx/jest';
+import { getJestProjectsAsync } from '@nx/jest';
 
-export default {
-	projects: getJestProjects(),
-};
+export default async () => ({
+	projects: await getJestProjectsAsync(),
+});