Split container(s) for strict transformation (#492)

.github/labeler.yml

@@ -3,24 +3,25 @@
 
 "Test 🧪":
   - packages/**/*.test.ts
+  - packages/**/*.spec.ts
 
 "documentation 📄":
   - docs/**/*
 
 Core:
-  - packages/core-instance/**
+  - any: ["packages/core-instance/**", "!packages/core-instance/package.json"]
 
 DnD:
-  - packages/dnd/**
+  - any: ["packages/dnd/**", "!packages/dnd/package.json"]
 
 Dom-Gen:
-  - packages/dom-gen/**
+  - any: ["packages/dom-gen/**", "!packages/dom-gen/package.json"]
 
 Draggable-only:
-  - packages/draggable/**
+  - any: ["packages/draggable/**", "!packages/draggable/package.json"]
 
 Store:
-  - packages/store/**
+  - any: ["packages/store/**", "!packages/store/package.json"]
 
 Utils:
-  - packages/utils/**
+  - any: ["packages/utils/**", "!packages/utils/package.json"]

.github/workflows/ci.yml

@@ -152,7 +152,7 @@ jobs:
           if-no-files-found: error
 
   e2e-same-container-vertical:
-    name: Transformation inside one container vertically
+    name: One Container Vertically - Chrome
     runs-on: ubuntu-latest
     needs: install-build
     timeout-minutes: 8
@@ -187,27 +187,10 @@ jobs:
           path: ./packages
 
       - name: Testing features for DnD with React APP - Chrome
-        uses: cypress-io/github-action@v2
-        with:
-          working-directory: packages/dnd
-          install: false
-          start: pnpm -F dflex-react-dnd preview
-          wait-on-timeout: 30
-          spec: cypress/integration/same-container-vertical/**/*.spec.ts
-          wait-on: "http://localhost:3001/"
-          browser: chrome
-          # parallel: true
-          # record: true
-        env:
-          Cypress_extended: true
-          #CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
-          #CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          # Recommended: pass the GitHub token lets this action correctly
-          # determine the unique run id necessary to re-run the checks
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: pnpm -F @dflex/dnd test:vertical:chrome
 
   e2e-same-container-horizontal:
-    name: Transformation inside one container horizontally
+    name: One Container Horizontally - Chrome
     runs-on: ubuntu-latest
     timeout-minutes: 8
     if: github.event.pull_request.draft != true
@@ -251,7 +234,7 @@ jobs:
           spec: cypress/integration/same-container-horizontal/**/*.spec.ts
           wait-on: "http://localhost:3001/"
           browser: chrome
-          headless: true
+          headless: false
         env:
           #CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
           #CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
@@ -260,7 +243,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
   e2e-multi-containers:
-    name: Transformation with multiple containers
+    name: Multiple Containers - Chrome
     runs-on: ubuntu-latest
     timeout-minutes: 8
     if: github.event.pull_request.draft != true
@@ -304,7 +287,7 @@ jobs:
           spec: cypress/integration/multiple-containers/**/*.spec.ts
           wait-on: "http://localhost:3001/"
           browser: chrome
-          headless: true
+          headless: false
         env:
           #CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
           #CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

README.md

@@ -49,6 +49,28 @@ library on internet that manipulates the DOM instead of reconstructing it.
 - Event driven API.
 - Targeting each DOM node individually.
 - Extensible using JSON tree instead of flat recursion.
+- Support three different types of restrictions:<br/>
+  1 -Restricted area related to the parent container.<br/>
+  2- Restricted area related to the viewport.<br/>
+  3- Restricted area related to the position itself.
+- Support four types of custom events with custom layout state emitter.
+- Auto remove selection when starting dragging.
+
+## Implemented Transformation 💡
+
+- The original input order which appears when inspecting elements stays the
+  same. While the visual order happens after transformation and it's supported by the
+  `data-index` attribute to know the order of elements in the visual list.<br/><br/>
+  ![original and visual order](https://user-images.githubusercontent.com/19228730/126757232-0e72a153-7fba-4868-b881-d29f2439d510.gif)
+
+- To enable handling a large set of elements, the transformation is related
+  to the viewport. No matter how many elements are affected, DFlex only
+  transforms elements visible on the screen. Elements outside the viewport are
+  triggered to a new position when they are visible.<br/><br/>
+  ![Trigger elements visible on the screen](https://user-images.githubusercontent.com/19228730/126758576-e716787d-3ff7-44cb-883a-c6b7064e30e5.gif)
+
+- Support strict transformation between containers.<br/><br/>
+  ![Handle orphaned container](https://user-images.githubusercontent.com/19228730/165508982-c4d3b317-19bd-4a98-ba0f-febf772de44a.gif)
 
 ## Project Content 🚀
 
@@ -88,7 +110,7 @@ functionality.
 
 Visit DFlex site for more <https://www.dflex.dev/>
 
-## Installation 📦
+## Local Development 📦
 
 DFlex contains multiple packages that shapes the final product. All Packages are
 decoupled and work separately. Each package has it own universe including test
@@ -109,17 +131,10 @@ cd dflex
 pnpm install
 ```
 
-This will clone and install all development dependencies. If you are using
-windows you probably have to install cypress manually as following:
-
-```bash
-pnpm cy:install:win
-```
-
 To start development you can use the following command:
 
 ```bash
-pnpm --filter @dflex/dnd server
+pnpm -F @dflex/dnd server
 ```
 
 This will run the development playground for the DnD package. Open the browser
@@ -132,9 +147,9 @@ If you want to change the codebase and live edit the playground you have to
 compile while running the playground. You can use the following command:
 
 ```bash
-pnpm --filter @dflex/dnd compile:w
-pnpm --filter @dflex/dnd build:w
-pnpm --filter @dflex/dnd run server
+pnpm -F @dflex/dnd compile:w
+pnpm -F @dflex/dnd build:w
+pnpm -F @dflex/dnd run server
 
 ```
 
@@ -143,7 +158,7 @@ break the code. You can do that by running the test and have some fun watching
 Cypress do the job:
 
 ```bash
-pnpm --filter @dflex/dnd test
+pnpm -F @dflex/dnd test
 ```
 
 ## Contribution 🌎
@@ -162,6 +177,16 @@ repository.
 
 4- Push to your fork and submit a pull request when ready.
 
+## Work in progress 🔨
+
+DFlex is a work in progress. The transformation between containers is still in
+development. Yet, you can use the library in your project if you depend on
+transformation inside one container.
+
 ## License 🤝
 
 DFlex is [MIT License](LICENSE) since version 3.0.0 and above.
+
+## Author
+
+Jalal Maskoun ([@jalal246](https://github.com/jalal246))

package.json

@@ -8,27 +8,27 @@
   "repository": "https://github.com/dflex-js/dflex",
   "author": "Jalal Maskoun",
   "scripts": {
-    "cy:install:win": "cypress cache clear && .\\node_modules\\.bin\\cypress.cmd install --force",
     "test:unit": "cross-env NODE_ENV=test && jest",
     "test:e2e": "cross-env NODE_ENV=test && pnpm -F @dflex/dnd test",
     "build": "cross-env NODE_ENV=production && pnpm build -r",
     "bump": "pnpm changeset version && pnpm install"
   },
   "devDependencies": {
     "@changesets/cli": "^2.22.0",
-    "@swc/core": "^1.2.171",
-    "@swc/jest": "^0.2.20",
-    "@types/jest": "^27.4.1",
-    "@types/node": "^17.0.25",
+    "@swc/core": "^1.2.181",
+    "@swc/jest": "^0.2.21",
+    "@types/jest": "^27.5.0",
+    "@types/node": "^17.0.31",
     "cross-env": "^7.0.3",
     "esbuild": "^0.14.38",
     "eslint-config-dflex": "workspace:*",
     "istanbul-lib-instrument": "^5.2.0",
-    "jest": "^27.5.1",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
     "prettier": "^2.6.2",
     "rimraf": "^3.0.2",
     "ts-node": "^10.7.0",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.5"
+    "typescript": "^4.6.4",
+    "vite": "^2.9.8"
   }
 }