chore: bump dependencies

.changeset/ninety-shirts-scream.md

@@ -0,0 +1,5 @@
+---
+"ng-monaco-editor": minor
+---
+
+chore: bump dependencies

.eslintrc

@@ -2,20 +2,22 @@
   "extends": "@1stg/eslint-config/loose",
   "rules": {
     "@angular-eslint/component-selector": [
-      2,
+      "error",
       {
         "type": "element",
         "prefix": "ng",
         "style": "kebab-case"
       }
     ],
     "@angular-eslint/directive-selector": [
-      2,
+      "error",
       {
         "type": "attribute",
         "prefix": "ng",
         "style": "camelCase"
       }
-    ]
+    ],
+    "markup/markup": "off",
+    "unicorn/prefer-event-target": "off"
   }
 }

.github/workflows/release.yml

@@ -22,15 +22,12 @@ jobs:
           node-version: 16
           cache: yarn
 
-      - name: Link Yarn global binaries into PATH
-        run: echo "$(yarn global bin)" >> $GITHUB_PATH
-
       - name: Install Dependencies
         run: yarn --frozen-lockfile
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets
-        uses: changesets/action@master
+        uses: changesets/action@v1
         with:
           commit: 'chore: release ng-monaco-editor'
           title: 'chore: release ng-monaco-editor'

.github/workflows/stories.yml

@@ -2,7 +2,8 @@ name: Deploy stories
 
 on:
   push:
-    branches: [master]
+    branches:
+      - master
 
 jobs:
   deploy_stories:
@@ -18,9 +19,6 @@ jobs:
           node-version: 16
           cache: yarn
 
-      - name: Link Yarn global binaries into PATH
-        run: echo "$(yarn global bin)" >> $GITHUB_PATH
-
       - name: Install dependencies
         run: yarn --frozen-lockfile
 

.remarkrc

@@ -1,5 +1,5 @@
 {
   "plugins": [
-    "@1stg/remark-config"
+    "@1stg/remark-preset"
   ]
 }

.storybook/main.ts

@@ -1,20 +1,30 @@
+import type { StorybookConfig } from '@storybook/angular';
 import MonacoEditorWebpackPlugin from 'monaco-editor-webpack-plugin';
 import { Configuration } from 'webpack';
 
 const isDev = process.env.NODE_ENV === 'development';
 
-export default {
-  stories: ['../stories/**/*.stories.ts'],
-  core: {
-    builder: 'webpack5',
-  },
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    '@storybook/addon-actions',
-    '@storybook/addon-knobs',
-    '@storybook/addon-postcss',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
   ],
-  staticDirs: [`../node_modules/monaco-editor/${isDev ?'dev':'min'}`],
+  framework: {
+    name: '@storybook/angular',
+    options: {},
+  },
+  staticDirs: [`../node_modules/monaco-editor/${isDev ? 'dev' : 'min'}`],
   webpackFinal(config: Configuration) {
+    config.module!.rules!.push({
+      test: /node_modules[/\\]monaco-editor[/\\]esm[/\\].+\.css$/i,
+      use: [
+        'style-loader',
+        'css-loader',
+      ],
+    });
+
     config.plugins!.push(
       new MonacoEditorWebpackPlugin({
         languages: ['yaml'],
@@ -31,6 +41,9 @@ export default {
         ],
       }),
     );
+
     return config;
   },
 };
+
+export default config;

.storybook/tsconfig.json

@@ -2,6 +2,8 @@
   "extends": "../tsconfig.json",
   "include": ["./**/*.ts", "../stories/**/*.ts"],
   "compilerOptions": {
-    "baseUrl": ".."
+    "baseUrl": "..",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false
   }
 }

.stylelintignore

@@ -1,5 +1,8 @@
+LICENSE
 dist
 node_modules
 release
 *.json
+*.lock
 *.log
+*.ts

angular.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "storybook": {
+      "projectType": "application",
+      "root": "",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "main": "",
+            "assets": [],
+            "index": "",
+            "outputPath": "",
+            "tsConfig": ""
+          }
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "storybook:build",
+            "compodoc": false,
+            "port": 6006
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "storybook:build",
+            "compodoc": false,
+            "outputDir": "dist"
+          }
+        }
+      }
+    }
+  }
+}

package.json

@@ -14,54 +14,60 @@
     "dev": "yarn start",
     "lint": "run-p lint:*",
     "lint:es": "eslint . --cache --max-warnings 10",
-    "lint:style": "stylelint '**/*.{html,md,scss,ts}' --cache",
+    "lint:style": "stylelint . --cache",
     "lint:ts": "tsc --noEmit",
     "prepare": "simple-git-hooks && yarn-deduplicate --strategy fewer || exit 0",
     "prerelease": "yarn build",
     "release": "changeset publish",
     "start": "yarn storybook",
-    "storybook": "start-storybook -p 9001",
-    "storybook:build": "rimraf demo && build-storybook -o dist"
+    "storybook": "ng run storybook:storybook",
+    "storybook:build": "ng run storybook:build-storybook"
   },
   "peerDependencies": {
     "@angular/core": ">=10.0.0",
     "lodash-es": ">=4.0.0",
     "monaco-editor": ">=0.20.0"
   },
   "devDependencies": {
-    "@1stg/app-config": "^3.5.0",
-    "@angular-devkit/build-angular": "^13.3.3",
-    "@angular/cli": "^13.3.3",
-    "@angular/common": "^13.3.4",
-    "@angular/compiler": "^13.3.4",
-    "@angular/compiler-cli": "^13.3.4",
-    "@angular/core": "^13.3.4",
-    "@angular/forms": "^13.3.4",
-    "@angular/platform-browser": "^13.3.4",
-    "@angular/platform-browser-dynamic": "^13.3.4",
-    "@changesets/changelog-github": "^0.4.4",
-    "@changesets/cli": "^2.22.0",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/angular": "^6.4.22",
-    "@storybook/builder-webpack5": "^6.4.22",
-    "@storybook/cli": "^6.4.22",
-    "@storybook/manager-webpack5": "^6.4.22",
-    "@types/lodash-es": "^4.17.6",
+    "@1stg/app-config": "^9.0.0",
+    "@angular-devkit/build-angular": "^16.1.1",
+    "@angular/animations": "^16.1.2",
+    "@angular/cli": "^16.1.1",
+    "@angular/common": "^16.1.2",
+    "@angular/compiler": "^16.1.2",
+    "@angular/compiler-cli": "^16.1.2",
+    "@angular/core": "^16.1.2",
+    "@angular/forms": "^16.1.2",
+    "@angular/platform-browser": "^16.1.2",
+    "@angular/platform-browser-dynamic": "^16.1.2",
+    "@changesets/changelog-github": "^0.4.8",
+    "@changesets/cli": "^2.26.1",
+    "@storybook/addon-essentials": "^7.0.23",
+    "@storybook/addon-interactions": "^7.0.23",
+    "@storybook/addon-links": "^7.0.23",
+    "@storybook/addon-styling": "^1.3.0",
+    "@storybook/angular": "^7.0.23",
+    "@storybook/blocks": "^7.0.23",
+    "@storybook/cli": "^7.0.23",
+    "@types/lodash-es": "^4.17.7",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.33.0",
+    "monaco-editor": "^0.39.0",
     "monaco-editor-webpack-plugin": "^7.0.1",
-    "monaco-yaml": "^4.0.0-alpha.2",
-    "ng-packagr": "^13.3.1",
-    "postcss": "^8.4.12",
-    "rxjs": "^7.5.5",
-    "ts-node": "^10.7.0",
-    "tslib": "^2.4.0",
-    "zone.js": "^0.11.5"
+    "monaco-yaml": "^4.0.4",
+    "ng-packagr": "^16.1.0",
+    "postcss": "^8.4.24",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rxjs": "^7.8.1",
+    "storybook": "^7.0.23",
+    "ts-node": "^10.9.1",
+    "tslib": "^2.5.3",
+    "yarn-deduplicate": "^6.0.2",
+    "zone.js": "^0.13.1"
   },
   "resolutions": {
-    "prettier": "^2.6.2"
+    "@babel/preset-env": "^7.22.5",
+    "prettier": "^2.8.8"
   },
   "publishConfig": {
     "access": "public",

src/monaco-editor.component.scss

@@ -50,10 +50,11 @@ ng-monaco-diff-editor {
   }
 
   @keyframes sk-bounce {
-    from,
-    to {
+    0%,
+    100% {
       transform: scale(0);
     }
+
     50% {
       transform: scale(1);
     }

src/monaco-provider.service.ts

@@ -23,8 +23,7 @@ export interface Require {
  */
 @Injectable({ providedIn: 'root' })
 export class MonacoProviderService {
-  private _theme =
-    this.monacoEditorConfig.defaultOptions?.theme ?? this.themes[0];
+  private _theme: string;
 
   private _monaco?: Monaco;
   private _loadingPromise?: Promise<Monaco>;
@@ -61,7 +60,10 @@ export class MonacoProviderService {
     return window.require as unknown as Require;
   }
 
-  constructor(private readonly monacoEditorConfig: MonacoEditorConfig) {}
+  constructor(private readonly monacoEditorConfig: MonacoEditorConfig) {
+    this._theme =
+      this.monacoEditorConfig.defaultOptions?.theme ?? this.themes[0];
+  }
 
   async initMonaco() {
     return this._loadingPromise || (this._loadingPromise = this.loadMonaco());

stories/amd.stories.ts

@@ -1,8 +1,9 @@
 import { NgModule } from '@angular/core';
+import { Meta } from '@storybook/angular';
 
 import { MonacoEditorModule } from '../src/public-api';
 
-import { startStories } from './base';
+import { getStories } from './base';
 
 @NgModule({
   imports: [
@@ -12,6 +13,20 @@ import { startStories } from './base';
   ],
   exports: [MonacoEditorModule],
 })
-export class AmdRootModule {}
+class AmdRootModule {}
 
-startStories(AmdRootModule);
+const {
+  meta: _meta,
+  MonacoEditor,
+  MonacoDiffEditor,
+  ColorizeCode,
+} = getStories(AmdRootModule);
+
+const meta: Meta = {
+  ..._meta,
+  title: 'Code Editor - AMD',
+};
+
+export { ColorizeCode, MonacoDiffEditor, MonacoEditor };
+
+export default meta;