ng-auto-animate 0.2.0 → 0.3.0

package/.editorconfig

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

package/.eslintignore

@@ -0,0 +1 @@
+node_modules

package/.eslintrc.json

@@ -0,0 +1,48 @@
+{
+	"root": true,
+	"ignorePatterns": ["**/*"],
+	"plugins": ["@nx"],
+	"overrides": [
+		{
+			"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+			"rules": {
+				"@nx/enforce-module-boundaries": [
+					"error",
+					{
+						"enforceBuildableLibDependency": true,
+						"allow": [],
+						"depConstraints": [
+							{
+								"sourceTag": "*",
+								"onlyDependOnLibsWithTags": ["*"]
+							}
+						]
+					}
+				]
+			}
+		},
+		{
+			"files": ["*.ts", "*.tsx"],
+			"extends": ["plugin:@nx/typescript"],
+			"rules": {
+				"@typescript-eslint/no-extra-semi": "error",
+				"no-extra-semi": "off"
+			}
+		},
+		{
+			"files": ["*.js", "*.jsx"],
+			"extends": ["plugin:@nx/javascript"],
+			"rules": {
+				"@typescript-eslint/no-extra-semi": "error",
+				"no-extra-semi": "off"
+			}
+		},
+		{
+			"files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
+			"env": {
+				"jest": true
+			},
+			"rules": {}
+		}
+	]
+}

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,32 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: 'bug: X does not work when Y'
+labels: bug, unverified
+assignees: ajitzero
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Version Info (please complete the following information):**
+ - Angular: [e.g. v14.3.0]
+ - Node: [e.g. 18.4.0]
+ - ng-auto-animate: [e.g. 0.0.2]
+
+**Additional context**
+Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: 'feat: Support X when Y'
+labels: enhancement, unconfirmed
+assignees: ajitzero
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

package/.github/auto_assign.yml

@@ -0,0 +1,17 @@
+# Set to true to add reviewers to pull requests
+addReviewers: true
+
+# Set to true to add assignees to pull requests
+addAssignees: true
+
+# A list of reviewers to be added to pull requests (GitHub user name)
+reviewers:
+  - ajitzero
+
+# A list of keywords to be skipped the process that add reviewers if pull requests include it
+skipKeywords:
+  - wip
+
+# A number of reviewers added to the pull request
+# Set 0 to add all the reviewers (default: 0)
+numberOfReviewers: 1

package/.github/workflows/ci.yml

@@ -0,0 +1,24 @@
+name: CI
+on:
+  push:
+    branches:
+      - '*'
+      - '*/*'
+      - '**'
+      - '!main'
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: nrwl/nx-set-shas@v3
+      - name: Install deps
+        run: npm ci --legacy-peer-deps
+      - name: Lint affected
+        run: npx nx affected -t lint
+      # - name: Test affected
+      #   run: npx nx affected -t test --configuration=ci
+      - name: Build affected
+        run: npx nx affected -t build

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,23 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on: [workflow_dispatch]
+# on:
+#   release:
+#     types: [created]
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 22
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/release.yml

@@ -0,0 +1,32 @@
+name: RELEASE
+
+on: [workflow_dispatch]
+
+permissions:
+  contents: read # for checkout
+  
+jobs:
+  main:
+    name: Version and Publish
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .node-version
+      - uses: nrwl/nx-set-shas@v3
+      - name: Install deps
+        run: npm ci
+      - name: Lint
+        run: npx nx run-many -t lint
+      # - name: Test
+      #   run: npx nx run-many -t test --configuration=ci
+      - name: Release
+        run: npx semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.node-version

@@ -0,0 +1 @@
+v22.3.0

package/.prettierignore

@@ -0,0 +1,7 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage
+.angular
+
+/.nx/cache
+/.nx/workspace-data

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "arrowParens": "avoid",
+  "htmlWhitespaceSensitivity": "ignore",
+  "printWidth": 120,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": true
+}

package/.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+	"recommendations": [
+		"angular.ng-template",
+		"davidanson.vscode-markdownlint",
+		"dbaeumer.vscode-eslint",
+		"esbenp.prettier-vscode",
+		"firsttris.vscode-jest-runner",
+		"nrwl.angular-console"
+	]
+}

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+## [0.2.0](https://github.com/ajitzero/ng-auto-animate/compare/v0.1.2...v0.2.0) (2023-07-13)
+
+
+### Features
+
+* **ci:** added GitHub Action for release ([e2c021c](https://github.com/ajitzero/ng-auto-animate/commit/e2c021cf9f78d4605a3665d4c13526c882662b2c)), closes [#4](https://github.com/ajitzero/ng-auto-animate/issues/4)

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Ajit Panigrahi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,124 +1,41 @@
 # ng-auto-animate
 
-An Angular Directive to use FormKit's [`auto-animate`](https://auto-animate.formkit.com) library within Angular projects.
+Mono-repo for the library and demo app.
 
-## Highlights
+- Library:
+  - ⭐️ [Source & README](https://github.com/ajitzero/ng-auto-animate/tree/main/libs/ng-auto-animate) (Visit here first)
+  - [NPM](https://www.npmjs.com/package/ng-auto-animate).
+- Demo app, deployed via Netlify:
+  - [Source](https://github.com/ajitzero/ng-auto-animate/tree/main/apps/demo)
+  - [Live Demo](https://ng-auto-animate.netlify.app/)
+- Original library docs:
+  - ⭐️ [Source & README](https://github.com/formkit/auto-animate) (For everything else)
+  - [Live Demo](https://auto-animate.formkit.com)
 
-- ✅ Standalone Directive, for Angular v14 and above. Tested on Node 18.x, but should work on previous versions.
-- ✅ Custom `InjectionToken` for configuring global settings and plugins.
+### Missing support for something?
 
-## Why a new wrapper library?
+Go through existing issues if your problem is already being tracked, otherwise [raise an issue!](https://github.com/ajitzero/ng-auto-animate/issues/new)
 
-A publishable library for Angular needs [`ng-packagr`](https://github.com/ng-packagr/ng-packagr) and Angular CLI for proper scaffolding and finalized formatting. Migrating the repository structure for `auto-animate` is a non-trivial task and would need an unbiased build system like [Nx](https://nx.dev) (which I am using here) or some other similar tool.
+### License
 
-[Justin Schroeder](https://github.com/justin-schroeder), the creator of [`auto-animate`](https://auto-animate.formkit.com), has been supportive towards [contributions](https://github.com/formkit/auto-animate/pull/38) for Angular integration, but he [does not work with Angular](https://github.com/formkit/auto-animate/issues/72#issuecomment-1222732238) and is unable to work towards this actively. I, too, would not be able to do much in his shoes, especially when it requires replacing all build actions, scripts and the project structure, all to support a single framework.
-
-If there is a simpler solution, I would be willing to submit a PR with my changes here to the original project, especially the support for global options/plugin via an `InjectionToken`.
-
-## Installation
-
-1. Install the peer dependency.
-
-    ```bash
-    npm i @formkit/auto-animate
-    ```
-
-1. Install this package.
-
-    ```bash
-    npm i ng-auto-animate
-    ```
-
-## Usage
-
-### Principle
-
-Add the directive to the parent tag, within which DOM elements are being shown or hidden dynamically.
-
-Adding the directive to the same tag which is being hidden will do nothing since it will look for changes in child nodes only.
-
-### Variants
-
-1. Default usage:
-
-    ```html
-    <article auto-animate>
-      <p *ngFor="let paragraph of paragraphs">
-        {{ paragraph }}
-      </p>
-    </article>
-    ```
-
-1. Pass one-off options:
-
-    ```html
-    <article [auto-animate]="{ duration: 750 }">
-      <p *ngFor="let paragraph of paragraphs">
-        {{ paragraph }}
-      </p>
-    </article>
-    ```
-
-1. Configure global default options:
-
-    ```ts
-    // src/app/app.config.ts
-    import { ApplicationConfig } from '@angular/core';
-    import { GLOBAL_AUTO_ANIMATE_OPTIONS } from 'ng-auto-animate';
-
-    export const appConfig: ApplicationConfig = {
-      providers: [
-        {
-          provide: GLOBAL_AUTO_ANIMATE_OPTIONS,
-          useValue: {
-            duration: 750,
-            easing: 'ease-out',
-            // etc.
-          },
-        },
-        // other providers
-      ],
-    };
-
-    // main.ts
-    import { bootstrapApplication } from '@angular/platform-browser';
-    import { appConfig } from './app/app.config';
-    import { AppComponent } from './app/app.component';
-
-    bootstrapApplication(AppComponent, appConfig).catch((err) =>
-      console.error(err)
-    );
-    ```
-
-    ```html
-    <article auto-animate> <!-- Default usage -->
-      <p *ngFor="let paragraph of paragraphs">
-        {{ paragraph }}
-      </p>
-    </article>
-    ```
+[MIT](https://github.com/ajitzero/ng-auto-animate/blob/main/LICENSE).
 
-1. Pass a custom plugin
-    > See the example here in the [demo app](https://github.com/ajitzero/ng-auto-animate/blob/0f305d97a9a30ab715b1c41304572519f0d27894/apps/demo/src/app/app.component.ts#L68) for a "bouncy" effect.
+Built by [Ajit Panigrahi](https://github.com/ajitzero). Original library by [Justin Schroeder](https://github.com/justin-schroeder) and many contributors.
 
-    ```ts
-    customPlugin: AutoAnimationPlugin = (...) => {...};
-    ```
+---
+<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
 
-    ```html
-    <article [auto-animate]="customPlugin">...</article>
-    ```
+✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨
 
-## Missing support for something?
 
-Go through existing issues if your problem is already being tracked; otherwise, [raise an issue!](https://github.com/ajitzero/ng-auto-animate/issues/new/choose)
+## Start the demo app
 
-## License
+To start the development server run `nx serve demo`. Open your browser and navigate to http://localhost:4200/. Happy coding!
 
-[MIT](https://github.com/ajitzero/ng-auto-animate/blob/main/LICENSE).
+## Want better Editor Integration?
 
-Built by [Ajit Panigrahi](https://github.com/ajitzero). Original library by [Justin Schroeder](https://github.com/justin-schroeder) and many contributors.
+Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.
 
----
+## Ready to deploy?
 
-This library was generated with [Nx](https://nx.dev).
+Just run `nx build demoapp` to build the application. The build artifacts will be stored in the `dist/` directory, ready to be deployed.

package/apps/demo/.eslintrc.json

@@ -0,0 +1,33 @@
+{
+	"extends": ["../../.eslintrc.json"],
+	"ignorePatterns": ["!**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts"],
+			"rules": {
+				"@angular-eslint/directive-selector": [
+					"error",
+					{
+						"type": "attribute",
+						"prefix": "ngAutoAnimate",
+						"style": "camelCase"
+					}
+				],
+				"@angular-eslint/component-selector": [
+					"error",
+					{
+						"type": "element",
+						"prefix": "ng-auto-animate",
+						"style": "kebab-case"
+					}
+				]
+			},
+			"extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"]
+		},
+		{
+			"files": ["*.html"],
+			"extends": ["plugin:@nx/angular-template"],
+			"rules": {}
+		}
+	]
+}

package/apps/demo/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+	displayName: 'demo',
+	preset: '../../jest.preset.js',
+	setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+	coverageDirectory: '../../coverage/apps/demo',
+	transform: {
+		'^.+\\.(ts|mjs|js|html)$': [
+			'jest-preset-angular',
+			{
+				tsconfig: '<rootDir>/tsconfig.spec.json',
+				stringifyContentPathRegex: '\\.(html|svg)$',
+			},
+		],
+	},
+	transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+	snapshotSerializers: [
+		'jest-preset-angular/build/serializers/no-ng-attributes',
+		'jest-preset-angular/build/serializers/ng-snapshot',
+		'jest-preset-angular/build/serializers/html-comment',
+	],
+};

package/apps/demo/project.json

@@ -0,0 +1,84 @@
+{
+	"name": "demo",
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"projectType": "application",
+	"prefix": "ng-auto-animate",
+	"sourceRoot": "apps/demo/src",
+	"tags": [],
+	"targets": {
+		"build": {
+			"executor": "@angular-devkit/build-angular:browser",
+			"outputs": ["{options.outputPath}"],
+			"options": {
+				"outputPath": "dist/apps/demo",
+				"index": "apps/demo/src/index.html",
+				"main": "apps/demo/src/main.ts",
+				"tsConfig": "apps/demo/tsconfig.app.json",
+				"assets": ["apps/demo/src/favicon.ico", "apps/demo/src/assets"],
+				"styles": ["apps/demo/src/styles.scss"],
+				"scripts": []
+			},
+			"configurations": {
+				"production": {
+					"budgets": [
+						{
+							"type": "initial",
+							"maximumWarning": "500kb",
+							"maximumError": "1mb"
+						},
+						{
+							"type": "anyComponentStyle",
+							"maximumWarning": "2kb",
+							"maximumError": "4kb"
+						}
+					],
+					"outputHashing": "all"
+				},
+				"development": {
+					"buildOptimizer": false,
+					"optimization": false,
+					"vendorChunk": true,
+					"extractLicenses": false,
+					"sourceMap": true,
+					"namedChunks": true
+				}
+			},
+			"defaultConfiguration": "production"
+		},
+		"serve": {
+			"executor": "@angular-devkit/build-angular:dev-server",
+			"configurations": {
+				"production": {
+					"buildTarget": "demo:build:production"
+				},
+				"development": {
+					"buildTarget": "demo:build:development"
+				}
+			},
+			"defaultConfiguration": "development"
+		},
+		"extract-i18n": {
+			"executor": "@angular-devkit/build-angular:extract-i18n",
+			"options": {
+				"buildTarget": "demo:build"
+			}
+		},
+		"lint": {
+			"executor": "@nx/eslint:lint",
+			"outputs": ["{options.outputFile}"]
+		},
+		"test": {
+			"executor": "@nx/jest:jest",
+			"outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+			"options": {
+				"jestConfig": "apps/demo/jest.config.ts"
+			}
+		},
+		"serve-static": {
+			"executor": "@nx/web:file-server",
+			"options": {
+				"buildTarget": "demo:build"
+			}
+		}
+	}
+}