Merge pull request #468 from guardian/dblatcher/remove-animation-exports

remove animation exports

Author: dblatcher

.changeset/neat-deserts-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@guardian/prosemirror-elements": minor
+---
+
+remove auto-animate and export field description interfaces

demo/index.ts

@@ -10,7 +10,6 @@ import { schema as basicSchema, marks } from "prosemirror-schema-basic";
 import { EditorState } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import { buildElementPlugin, undefinedDropdownValue } from "../src";
-import { keyTakeawaysElement } from "../src/elements/alt-style/AltStyleElementForm";
 import { createCalloutElement } from "../src/elements/callout/Callout";
 import { createCartoonElement } from "../src/elements/cartoon/CartoonForm";
 import { codeElement } from "../src/elements/code/CodeElementForm";
@@ -23,6 +22,7 @@ import { transformElementOut } from "../src/elements/helpers/transform";
 import type { MediaPayload } from "../src/elements/helpers/types/Media";
 import { createImageElement } from "../src/elements/image/ImageElementForm";
 import { createInteractiveElement } from "../src/elements/interactive/InteractiveForm";
+import { keyTakeawaysElement } from "../src/elements/key-takeaways/KeyTakeawaysForm";
 import { membershipElement } from "../src/elements/membership/MembershipForm";
 import { nestedElement } from "../src/elements/nested/NestedElementForm";
 import { pullquoteElement } from "../src/elements/pullquote/PullquoteForm";

package.json

@@ -25,7 +25,6 @@
     "@emotion/core": "11.0.0",
     "@emotion/react": "11.1.5",
     "@emotion/styled": "11.1.5",
-    "@formkit/auto-animate": "^0.8.2",
     "@guardian/src-button": "^3.8.0",
     "@guardian/src-checkbox": "^3.8.0",
     "@guardian/src-foundations": "^3.7.0",
@@ -85,5 +84,6 @@
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.2.0",
     "webpack-node-externals": "^3.0.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22"
 }

src/elements/alt-style/AltStyleElementForm.tsx

@@ -1,7 +1,6 @@
 import styled from "@emotion/styled";
 import { neutral, space } from "@guardian/src-foundations";
 import React from "react";
-import { DemoFieldWrapper } from "../../editorial-source-components/DemoFieldWrapper";
 import { FieldLayoutVertical } from "../../editorial-source-components/FieldLayout";
 import {
   actionSpacing,
@@ -16,12 +15,10 @@ import type {
 import { AltStyleElementWrapper } from "../../renderers/react/AltStyleElementWrapper";
 import { createReactElementSpec } from "../../renderers/react/createReactElementSpec";
 import { Body } from "../../renderers/react/ElementWrapper";
-import { useAutoAnimate } from "../../renderers/react/useAutoAnimate";
 import {
   LeftRepeaterActionControls,
   RightRepeaterActionControls,
 } from "../../renderers/react/WrapperControls";
-import { keyTakeawaysFields } from "./AltStyleElementSpec";
 
 export const AltStyleElementTestId = "AltStyleElement";
 
@@ -81,12 +78,10 @@ export const createReactAltStylesElementSpec = <
     fieldDescriptions,
     component: ({ fields }) => {
       const repeaterField = repeaterFieldExtractor(fields);
-      const [parent] = useAutoAnimate();
       return (
         <FieldLayoutVertical
           data-cy={AltStyleElementTestId}
           useAlternateStyles={true}
-          ref={parent}
         >
           {repeaterField.children.map((child, index) => (
             // Use field ID as key instead of node index to avoid React render conflicts
@@ -116,22 +111,3 @@ export const createReactAltStylesElementSpec = <
     },
     wrapperComponent: AltStyleElementWrapper,
   });
-
-export const keyTakeawaysElement = createReactAltStylesElementSpec(
-  keyTakeawaysFields,
-  (fields) => fields.repeater,
-  (repeaterChild) => (
-    <>
-      <DemoFieldWrapper
-        field={repeaterChild.title}
-        showHeading={false}
-        useAlternateStyles={true}
-      />
-      <DemoFieldWrapper
-        field={repeaterChild.content}
-        showHeading={false}
-        useAlternateStyles={true}
-      />
-    </>
-  )
-);

src/elements/helpers/__tests__/transformFixtures.spec.ts

@@ -16,10 +16,6 @@ import { createTestSchema } from "../test";
 import { transformElementIn, transformElementOut } from "../transform";
 import { allElementFixtures } from "./fixtures";
 
-jest.mock("@formkit/auto-animate", () => ({
-  autoAnimate: jest.fn(),
-}));
-
 describe("Element fixtures", () => {
   /**
    * This spec runs every fixture declared in `./fixtures/index.ts` through

src/elements/key-takeaways/KeyTakeawaysForm.tsx

@@ -0,0 +1,22 @@
+import { DemoFieldWrapper } from "../../editorial-source-components/DemoFieldWrapper";
+import { createReactAltStylesElementSpec } from "../alt-style/AltStyleElementForm";
+import { keyTakeawaysFields } from "./KeyTakeawaysSpec";
+
+export const keyTakeawaysElement = createReactAltStylesElementSpec(
+  keyTakeawaysFields,
+  (fields) => fields.repeater,
+  (repeaterChild) => (
+    <>
+      <DemoFieldWrapper
+        field={repeaterChild.title}
+        showHeading={false}
+        useAlternateStyles={true}
+      />
+      <DemoFieldWrapper
+        field={repeaterChild.content}
+        showHeading={false}
+        useAlternateStyles={true}
+      />
+    </>
+  )
+);

src/elements/key-takeaways/KeyTakeawaysSpec.tsx

@@ -0,0 +1,27 @@
+import { createNestedElementField } from "../../plugin/fieldViews/NestedElementFieldView";
+import { createRepeaterField } from "../../plugin/fieldViews/RepeaterFieldView";
+import { createTextField } from "../../plugin/fieldViews/TextFieldView";
+import { required } from "../../plugin/helpers/validation";
+import { useTyperighterAttrs } from "../helpers/typerighter";
+
+export const keyTakeawaysFields = {
+  repeater: createRepeaterField(
+    {
+      title: createTextField({
+        rows: 1,
+        isResizeable: false,
+        validators: [required("Title is required")],
+      }),
+      content: createNestedElementField({
+        isResizeable: false,
+        placeholder: "Don't show description",
+        content: "block*",
+        marks: "em strong link",
+        attrs: useTyperighterAttrs,
+        minRows: 6,
+        validators: [required("Body is required")],
+      }),
+    },
+    1
+  ),
+};

src/index.ts

@@ -7,7 +7,6 @@ export type {
 export { buildElementPlugin } from "./plugin/element";
 export { fieldGroupName, isProseMirrorElement } from "./plugin/nodeSpec";
 export type { CustomField, Field } from "./plugin/types/Element";
-
 export type { Options } from "./plugin/fieldViews/DropdownFieldView";
 export type { FieldView } from "./plugin/fieldViews/FieldView";
 export { createTextField } from "./plugin/fieldViews/TextFieldView";
@@ -59,3 +58,7 @@ export {
   INNER_EDITOR_BLUR,
 } from "./plugin/fieldViews/NestedElementFieldView";
 export { RepeaterFieldMapIDKey } from "./plugin/helpers/constants";
+export { RepeaterField } from "./plugin/types/Element";
+export { CustomFieldDescription } from "./plugin/fieldViews/CustomFieldView";
+export { TextFieldDescription } from "./plugin/fieldViews/TextFieldView";
+export { RepeaterFieldDescription } from "./plugin/fieldViews/RepeaterFieldView";