Waspello: Tilt cards when dragging

[dabrorius]

Description

This PR implements tilting while dragging for both full lists and individual cards. Fixes #338

Note:

• Dragging of lists is completely broken in development due to React.StrictMode. This is unrelated to this PR and is fixed in Waspello: Fix drag-and-drop and replace deprecated react-beautiful-dnd library #2414.
• Dragging lists is glitchy, after dragging the lists briefly switch to original position. This is also present on the deployed app and is not related to this PR.

Waspello.Tilt.Drag.mp4

Select what type of change this PR introduces:

1. Just code/docs improvement (no functional change).
2. Bug fix (non-breaking change which fixes an issue).
3. New feature (non-breaking change which adds functionality).
4. Breaking change (fix or feature that would cause existing functionality to not work as expected).

Update Waspc ChangeLog and version if needed

If you did a bug fix, new feature, or breaking change, that affects waspc, make sure you satisfy the following:

1. I updated ChangeLog.md with description of the change this PR introduces.
2. I bumped waspc version in waspc.cabal to reflect changes I introduced, with regards to the version of the latest wasp release, if the bump was needed.

Update example apps if needed

If you did code changes and added a new feature or modified an existing feature, make sure you satisfy the following:

1. I updated waspc/examples/todoApp as needed (updated modified feature or added new feature) and manually checked it works correctly.
2. I updated waspc/headless-test/examples/todoApp and its e2e tests as needed (updated modified feature and its tests or added new feature and new tests for it).

[infomiho]

Good job!

I've added some comments to maybe improve it a bit :)

[infomiho]

I think we should add transitions to make this look smoother:

.list {
  ...
  transition: transform 200ms ease-in-out;
}

.list--dragging {
  transform: rotate(2deg);
}

.list--drop-animating {
  transform: rotate(0deg);
}

I'd do the same for the .list-card component.

Also, potential improvement in readability is to maybe declare CSS vars for the angle e.g. --list-rotate-angle: 2deg and then use it var(--list-rotate-angle).

I've explained the --drop-animating class here.

[dabrorius]

I added suggested changes. I didn't extract the 2deg to a separate variable as it is used only once (when dragging the whole list 4 degs are used), moving its definition to a different place could make the code harder to follow.

[dabrorius]

P.S. I still need to test the whole list dragging, but it won't work until #2414 is resolved and merged.

[infomiho]

I'd implement a helper function for this e.g.

function getListClassName(snapshot) {
  const classes = ['list']
  if (snapshot.isDragging) {
    classes.push('list--dragging')
  }
  if (snapshot.isDropAnimating) {
    classes.push('list--drop-animating')
  }
  return classes.join(' ')
}

This way:

1. There is no space after list if list--dragging is not present.
2. It's easier to compose multiple classes

You'll notice I used isDropAnimating as well, this enables us to have a smooth start:

(no rotation) -> (rotation)

and a smooth end:

(rotation) -> (no rotation)

without.mov

with.mov

[dabrorius]

I just noticed that classnames npm package is included and used in other places. Should have used that 🤦
I'll update the code.