experimental: Animations. Entry animations support (#5102)

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: istarkov

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-panel-content.tsx

@@ -15,11 +15,13 @@ import { keywordValues } from "@webstudio-is/css-data";
 import { useIds } from "~/shared/form-utils";
 
 import type {
+  DurationUnitValue,
   RangeUnitValue,
   ScrollAnimation,
   ViewAnimation,
 } from "@webstudio-is/sdk";
 import {
+  durationUnitValueSchema,
   RANGE_UNITS,
   rangeUnitValueSchema,
   scrollAnimationSchema,
@@ -37,6 +39,7 @@ import {
 import { Keyframes } from "./animation-keyframes";
 import { humanizeString } from "~/shared/string-utils";
 import { Link2Icon, Link2UnlinkedIcon } from "@webstudio-is/icons";
+import { $availableUnitVariables } from "~/builder/features/style-panel/shared/model";
 
 const fillModeDescriptions: Record<
   NonNullable<ViewAnimation["timing"]["fill"]>,
@@ -95,9 +98,11 @@ const RangeValueInput = ({
   id,
   value,
   onChange,
+  disabled,
 }: {
   id: string;
   value: RangeUnitValue;
+  disabled?: boolean;
   onChange: ((value: undefined, isEphemeral: true) => void) &
     ((value: RangeUnitValue, isEphemeral: boolean) => void);
 }) => {
@@ -108,6 +113,7 @@ const RangeValueInput = ({
   return (
     <CssValueInput
       id={id}
+      disabled={disabled}
       styleSource="default"
       value={value}
       /* marginLeft to allow negative values  */
@@ -127,12 +133,13 @@ const RangeValueInput = ({
 
         onChange(undefined, true);
       }}
-      getOptions={() => []}
+      getOptions={() => $availableUnitVariables.get()}
       onHighlight={() => {
         /* Nothing to Highlight */
       }}
       onChangeComplete={(event) => {
         const parsedValue = rangeUnitValueSchema.safeParse(event.value);
+
         if (parsedValue.success) {
           onChange(parsedValue.data, false);
           setIntermediateValue(undefined);
@@ -184,6 +191,7 @@ const EasingInput = ({
             type: "keyword" as const,
             value,
           })),
+        ...$availableUnitVariables.get(),
       ]}
       property="animation-timing-function"
       intermediateValue={intermediateValue}
@@ -209,6 +217,61 @@ const EasingInput = ({
   );
 };
 
+const DurationInput = ({
+  id,
+  value,
+  onChange,
+}: {
+  id: string;
+  value: DurationUnitValue | undefined;
+  onChange: (
+    value: DurationUnitValue | undefined,
+    isEphemeral: boolean
+  ) => void;
+}) => {
+  const [intermediateValue, setIntermediateValue] = useState<
+    StyleValue | IntermediateStyleValue
+  >();
+
+  return (
+    <CssValueInput
+      id={id}
+      styleSource="default"
+      value={value}
+      placeholder="auto"
+      property="animation-duration"
+      intermediateValue={intermediateValue}
+      onChange={(styleValue) => {
+        setIntermediateValue(styleValue);
+      }}
+      getOptions={() => $availableUnitVariables.get()}
+      onHighlight={() => {}}
+      onChangeComplete={(event) => {
+        const value = durationUnitValueSchema.safeParse(event.value);
+        onChange(undefined, true);
+        if (value.success) {
+          onChange(value.data, false);
+          setIntermediateValue(undefined);
+          return;
+        }
+
+        setIntermediateValue({
+          type: "invalid",
+          value: toValue(event.value),
+        });
+      }}
+      onAbort={() => {
+        onChange(undefined, true);
+      }}
+      onReset={() => {
+        setIntermediateValue(undefined);
+        onChange(undefined, false);
+        onChange(undefined, true);
+      }}
+    />
+  );
+};
+
 type AnimationPanelContentProps = {
   type: "scroll" | "view";
   value: ScrollAnimation | ViewAnimation;
@@ -249,6 +312,7 @@ export const AnimationPanelContent = ({
     "fill",
     "easing",
     "name",
+    "duration",
   ] as const);
 
   const timelineRangeDescriptions =
@@ -259,6 +323,8 @@ export const AnimationPanelContent = ({
   const animationSchema =
     type === "scroll" ? scrollAnimationSchema : viewAnimationSchema;
 
+  const isRangeEndEnabled = value.timing.duration === undefined;
+
   const handleChange = (rawValue: unknown, isEphemeral: boolean) => {
     if (rawValue === undefined) {
       onChange(undefined, true);
@@ -414,7 +480,9 @@ export const AnimationPanelContent = ({
       >
         <Label htmlFor={fieldIds.rangeStartName}>Range Start</Label>
         <div />
-        <Label htmlFor={fieldIds.rangeEndName}>Range End</Label>
+        <Label disabled={!isRangeEndEnabled} htmlFor={fieldIds.rangeEndName}>
+          Range End
+        </Label>
 
         <Select
           id={fieldIds.rangeStartName}
@@ -515,6 +583,7 @@ export const AnimationPanelContent = ({
         </Grid>
         <Select
           id={fieldIds.rangeEndName}
+          disabled={!isRangeEndEnabled}
           options={timelineRangeNames}
           getLabel={humanizeString}
           value={value.timing.rangeEnd?.[0] ?? timelineRangeNames[0]!}
@@ -614,6 +683,7 @@ export const AnimationPanelContent = ({
         <div />
         <RangeValueInput
           id={fieldIds.rangeEndValue}
+          disabled={!isRangeEndEnabled}
           value={
             value.timing.rangeEnd?.[1] ?? {
               type: "unit",
@@ -646,6 +716,39 @@ export const AnimationPanelContent = ({
         />
       </Grid>
 
+      <Grid
+        gap={1}
+        align={"center"}
+        css={{
+          gridTemplateColumns: "1fr 16px 1fr",
+          paddingInline: theme.panel.paddingInline,
+        }}
+      >
+        <Label htmlFor={fieldIds.duration}>Duration</Label>
+        <div />
+        <DurationInput
+          id={fieldIds.duration}
+          value={value.timing.duration}
+          onChange={(duration, isEphemeral) => {
+            if (duration === undefined && isEphemeral) {
+              handleChange(undefined, true);
+              return;
+            }
+
+            handleChange(
+              {
+                ...value,
+                timing: {
+                  ...value.timing,
+                  duration,
+                },
+              },
+              isEphemeral
+            );
+          }}
+        />
+      </Grid>
+
       <Keyframes
         value={value.keyframes}
         onChange={(keyframes, isEphemeral) => {

packages/sdk-components-animation/private-src

@@ -39,6 +39,8 @@ export type {
   ScrollAnimation,
   ViewAnimation,
   InsetUnitValue,
+  DurationUnitValue,
+  TimeUnit,
 } from "./schema/animation-schema";
 
 export {
@@ -48,5 +50,6 @@ export {
   rangeUnitValueSchema,
   animationKeyframeSchema,
   insetUnitValueSchema,
+  durationUnitValueSchema,
   RANGE_UNITS,
 } from "./schema/animation-schema";

packages/sdk/src/index.ts

@@ -69,6 +69,25 @@ export const rangeUnitValueSchema = z.union([
     type: z.literal("unparsed"),
     value: z.string(),
   }),
+  z.object({
+    type: z.literal("var"),
+    value: z.string(),
+  }),
+]);
+
+export const TIME_UNITS = ["ms", "s"] as const;
+const timeUnitSchema = literalUnion(TIME_UNITS);
+
+export const durationUnitValueSchema = z.union([
+  z.object({
+    type: z.literal("unit"),
+    value: z.number(),
+    unit: timeUnitSchema,
+  }),
+  z.object({
+    type: z.literal("var"),
+    value: z.string(),
+  }),
 ]);
 
 // view-timeline-inset
@@ -101,6 +120,7 @@ export const keyframeEffectOptionsSchema = z.object({
       z.literal("both"),
     ])
     .optional(), // FillMode
+  duration: durationUnitValueSchema.optional(),
 });
 
 // Scroll Named Range
@@ -214,6 +234,8 @@ export const isRangeUnit = (
 // Type exports
 export type RangeUnit = z.infer<typeof rangeUnitSchema>;
 export type RangeUnitValue = z.infer<typeof rangeUnitValueSchema>;
+export type DurationUnitValue = z.infer<typeof durationUnitValueSchema>;
+export type TimeUnit = z.infer<typeof timeUnitSchema>;
 export type KeyframeStyles = z.infer<typeof keyframeStylesSchema>;
 export type AnimationKeyframe = z.infer<typeof animationKeyframeSchema>;
 export type ScrollNamedRange = z.infer<typeof scrollNamedRangeSchema>;

packages/sdk/src/schema/animation-schema.ts

@@ -3,7 +3,7 @@
   "display": "Default",
   "compilerOptions": {
     "module": "ES2022",
-    "target": "ES2022",
+    "target": "ES2023",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "inlineSources": false,