feat: angular integration

.github/workflows/release.yml

@@ -1,64 +1,52 @@
-name: Changesets
+name: Release
+
 on:
   push:
     branches:
       - main
-      - '2.0'
-env:
-  CI: true
-  PNPM_CACHE_FOLDER: .pnpm-store
-  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+permissions: {}
 jobs:
-  version:
-    # TODO: Change this later if repo changes
-    if: github.repository == 'PuruVJ/neodrag'
-    timeout-minutes: 15
+  release:
+    # prevents this action from running on forks
+    if: github.repository == 'puruvj/neodrag'
+    permissions:
+      contents: write # to create release (changesets/action)
+      pull-requests: write # to create pull request (changesets/action)
+    name: Release
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v3
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
+      - uses: pnpm/[email protected]
+        with:
+          version: 8
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
-
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        id: pnpm-install
-        with:
-          version: 7
-          run_install: false
+          node-version: 18.x
+          cache: pnpm
 
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+      - run: pnpm install --frozen-lockfile
 
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Build all packages
+      - name: Compile
         run: pnpm -r compile
 
       - name: Create Release Pull Request or Publish to npm
+        id: changesets
         uses: changesets/action@v1
         with:
-          version: pnpm ci:version
-          commit: 'chore: update versions'
-          title: 'chore: update versions'
+          # This expects you to have a script called release which does a build for your packages and calls changeset publish
           publish: pnpm ci:release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      # TODO alert discord
+      # - name: Send a Slack notification if a publish happens
+      #   if: steps.changesets.outputs.published == 'true'
+      #   # You can do something when a publish happens.
+      #   run: my-slack-bot send-notification --message "A new version of ${GITHUB_REPOSITORY} was published!"

.gitignore

@@ -3,3 +3,4 @@ dist/
 .DS_Store
 .env
 .pnpm-store/
+

docs/src/components/home/ExploreFrameworks.svelte

@@ -24,7 +24,7 @@
 
 	.frameworks {
 		display: flex;
-		gap: clamp(2rem, 10vw, 8rem);
+		gap: clamp(2rem, 5vw, 8rem);
 	}
 
 	a {

docs/src/components/home/features/multiple-frameworks/FrameworkPolygon.svelte

@@ -14,12 +14,13 @@
 		vue: () => {},
 		solid: () => {},
 		vanilla: () => {},
+		angular: () => {},
 	};
 
 	let zIndices = [0, 0, 0, 0, 0];
 
-	// let frameworks = ['vanilla', 'svelte', 'react', 'vue', 'solid'];
-	const frameworks = ['solid', 'vanilla', 'react', 'vue', 'svelte']
+	// let frameworks = ['vanilla', 'svelte', 'react', 'vue', 'solid', 'angular'];
+	const frameworks = ['solid', 'vanilla', 'react', 'vue', 'svelte', 'angular']
 		.map((name) => FRAMEWORKS.find((f) => f.name === name)!)!
 		.map(({ name }) => ({
 			name,
@@ -42,7 +43,7 @@
 
 		if (zIndices[index] > zIndices.length) {
 			zIndices = zIndices.map((z) =>
-				z >= lowestZIndex ? z - lowestZIndex : z
+				z >= lowestZIndex ? z - lowestZIndex : z,
 			);
 		}
 	}

docs/src/components/options/OptionsCode.astro

@@ -1,11 +1,15 @@
 ---
 import type { Framework } from 'src/helpers/constants';
 
-const framework = Astro.url.pathname.split('/').filter(Boolean).at(-1) as Framework;
+const framework = Astro.url.pathname
+    .split('/')
+    .filter(Boolean)
+    .at(-1) as Framework;
 ---
 
 {framework === 'react' && <slot name="react" />}
 {framework === 'svelte' && <slot name="svelte" />}
 {framework === 'vue' && <slot name="vue" />}
 {framework === 'vanilla' && <slot name="vanilla" />}
 {framework === 'solid' && <slot name="solid" />}
+{framework === 'angular' && <slot name="angular" />}

docs/src/components/options/OptionsExample.astro

@@ -38,7 +38,7 @@
 		border-bottom-left-radius: inherit;
 		border-bottom-right-radius: inherit;
 
-		background-color: #0d1117;
+		background-color: var(--app-color-light);
 
 		> :global(div) {
 			display: grid;

docs/src/css/themes.scss

@@ -63,6 +63,15 @@ body.light {
 	);
 	--app-color-brand-solid-navbar: #c0cad8;
 
+	--app-color-brand-angular: #c31c2e;
+	--app-color-brand-angular-hsl: 354, 75%, 44%;
+	--app-color-brand-angular-body-gradient: radial-gradient(
+		ellipse farthest-corner at 95% 2%,
+		hsla(var(--app-color-brand-angular-hsl), 0.4) 0%,
+		var(--app-color-shell) 100%
+	);
+	--app-color-brand-angular-navbar: #c31c2e;
+
 	--app-color-brand-vanilla: var(--app-color-dark);
 	--app-color-brand-vanilla-hsl: var(--app-color-dark-hsl);
 	--app-color-brand-vanilla-body-gradient: radial-gradient(
@@ -133,6 +142,15 @@ body.dark {
 	);
 	--app-color-brand-solid-navbar: #2b3138;
 
+	--app-color-brand-angular: hsl(355, 75%, 49%);
+	--app-color-brand-angular-hsl: 355, 75%, 49%;
+	--app-color-brand-angular-body-gradient: radial-gradient(
+		ellipse farthest-corner at 95% 2%,
+		hsla(var(--app-color-brand-angular-hsl), 0.3) 0%,
+		var(--app-color-shell) 100%
+	);
+	--app-color-brand-angular-navbar: #dc2030;
+
 	--app-color-brand-vanilla: var(--app-color-dark);
 	--app-color-brand-vanilla-hsl: var(--app-color-dark-hsl);
 	--app-color-brand-vanilla-body-gradient: radial-gradient(

docs/src/data/sizes.json

@@ -1,22 +1,26 @@
 {
-  "solid": {
-    "size": "1.77",
-    "version": "2.0.2"
+  "react": {
+    "size": "1.98",
+    "version": "2.0.3"
   },
   "svelte": {
     "size": "1.70",
-    "version": "2.0.2"
+    "version": "2.0.3"
+  },
+  "solid": {
+    "size": "1.77",
+    "version": "2.0.3"
   },
   "vanilla": {
     "size": "1.81",
-    "version": "2.0.2"
+    "version": "2.0.3"
   },
   "vue": {
     "size": "1.79",
-    "version": "2.0.2"
+    "version": "2.0.3"
   },
-  "react": {
-    "size": "1.98",
-    "version": "2.0.2"
+  "angular": {
+    "size": "2.76",
+    "version": "2.0.3"
   }
 }

docs/src/documentation/options/applyUserSelectHack/+option.mdx

@@ -11,7 +11,8 @@ import Examples from '$components/options/OptionsExamples.svelte';
 import UserSelectExample from './UserSelect.example.svelte';
 import NoUserSelectExample from './NoUserSelect.example.svelte';
 
-export const shortDescription = 'Applies `user-select: none` on `<body />` when dragging';
+export const shortDescription =
+  'Applies `user-select: none` on `<body />` when dragging';
 
 Applies `user-select: none` on `<body />` element when dragging, to prevent the irritating effect where dragging doesn't happen and the text is selected. Applied when dragging starts and removed when it stops.
 
@@ -46,6 +47,14 @@ Applies `user-select: none` on `<body />` element when dragging, to prevent the
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ applyUserSelectHack: true }">
+          User Select disabled
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { applyUserSelectHack: true });
@@ -92,6 +101,14 @@ Applies `user-select: none` on `<body />` element when dragging, to prevent the
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ applyUserSelectHack: false }">
+          User Select enabled
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { applyUserSelectHack: false });

docs/src/documentation/options/axis/+option.mdx

@@ -53,6 +53,14 @@ export const shortDescription = 'Axis on which the element can be dragged on.';
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ axis: 'both' }">
+          Both directions
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { axis: 'both' });
@@ -99,6 +107,14 @@ export const shortDescription = 'Axis on which the element can be dragged on.';
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ axis: 'x' }">
+          Horizontal
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { axis: 'x' });
@@ -145,6 +161,14 @@ export const shortDescription = 'Axis on which the element can be dragged on.';
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ axis: 'y' }">
+          Vertical
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { axis: 'y' });
@@ -191,6 +215,14 @@ export const shortDescription = 'Axis on which the element can be dragged on.';
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ axis: 'none' }">
+          None axis: Won't drag
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { axis: 'none' });

docs/src/documentation/options/bounds/+option.mdx

@@ -74,6 +74,14 @@ export type DragBoundsCoords = {
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ bounds: 'parent' }">
+          Can't go outside the parent element
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { bounds: 'parent' });
@@ -120,6 +128,14 @@ export type DragBoundsCoords = {
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ bounds: 'body' }">
+          Can't go outside body
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { bounds: 'body' });
@@ -186,6 +202,19 @@ export type DragBoundsCoords = {
         ```
       </div>
 
+      <div slot="angular">
+        ```html
+        <div [neoDraggable]="{ bounds: { top: 60, left: 20, bottom: 35, right: 30 } }">
+          Limited to:
+
+          top: 60
+          left: 20
+          bottom: 35
+          right: 30
+        </div>
+        ```
+      </div>
+
       <div slot="react">
         ```ts
         useDraggable(draggableRef, { bounds: { top: 60, left: 20, bottom: 35, right: 30 } });