Merge pull request #52 from formkit/release/beta.2

Release/beta.2

.build.mjs

@@ -19,7 +19,7 @@ const rootDir = resolve(__dirname)
 const isPublishing = process.argv[2] === "--publish"
 
 async function clean() {
-  await execa("rm", ["-rf", `${rootDir}/dist`])
+  await execa("shx", ["rm", "-rf", `${rootDir}/dist`])
 }
 
 async function baseBuild() {
@@ -80,6 +80,30 @@ async function vueBuild() {
   await fs.writeFile(resolve(rootDir, "dist/vue/index.mjs"), raw)
 }
 
+async function angularBuild() {
+  info("Rolling up Angular package")
+  await execa("npx", [
+    "rollup",
+    "-c",
+    "rollup.config.js",
+    "--environment",
+    "FRAMEWORK:angular",
+  ])
+  /**
+   * This is a super hack — for some reason these imports need to be explicitly
+   * to .mjs files so...we make it so.
+   */
+  let raw = await fs.readFile(
+    resolve(rootDir, "dist/angular/index.mjs"),
+    "utf8"
+  )
+  raw = raw.replace(
+    "import autoAnimate from '../index';",
+    "import autoAnimate from '../index.mjs';"
+  )
+  await fs.writeFile(resolve(rootDir, "dist/angular/index.mjs"), raw)
+}
+
 async function declarationsBuild() {
   info("Outputting declarations")
   await execa("npx", [
@@ -93,20 +117,28 @@ async function declarationsBuild() {
 
 async function bundleDeclarations() {
   info("Bundling declarations")
-  await execa("mv", [
+  await execa("shx", [
+    "mv",
     `${rootDir}/dist/src/index.d.ts`,
     `${rootDir}/dist/index.d.ts`,
   ])
-  await execa("mv", [
+  await execa("shx", [
+    "mv",
     `${rootDir}/dist/src/react/index.d.ts`,
     `${rootDir}/dist/react/index.d.ts`,
   ])
-  await execa("mv", [
+  await execa("shx", [
+    "mv",
     `${rootDir}/dist/src/vue/index.d.ts`,
     `${rootDir}/dist/vue/index.d.ts`,
   ])
-  await execa("rm", ["-rf", `${rootDir}/dist/src`])
-  await execa("rm", [`${rootDir}/dist/index.js`])
+  await execa("shx", [
+    "mv",
+    `${rootDir}/dist/src/angular/index.d.ts`,
+    `${rootDir}/dist/angular/index.d.ts`,
+  ])
+  await execa("shx", ["rm", "-rf", `${rootDir}/dist/src`])
+  await execa("shx", ["rm", `${rootDir}/dist/index.js`])
 }
 
 async function addPackageJSON() {
@@ -124,8 +156,12 @@ async function addPackageJSON() {
 
 async function addAssets() {
   info("Writing readme and license.")
-  await execa("cp", [`${rootDir}/README.md`, `${rootDir}/dist/README.md`])
-  await execa("cp", [`${rootDir}/LICENSE`, `${rootDir}/dist/LICENSE`])
+  await execa("shx", [
+    "cp",
+    `${rootDir}/README.md`,
+    `${rootDir}/dist/README.md`,
+  ])
+  await execa("shx", ["cp", `${rootDir}/LICENSE`, `${rootDir}/dist/LICENSE`])
 }
 
 async function prepareForPublishing() {
@@ -189,6 +225,7 @@ await baseBuild()
 await baseBuildMin()
 await reactBuild()
 await vueBuild()
+await angularBuild()
 await declarationsBuild()
 await bundleDeclarations()
 await addPackageJSON()

.gitignore

@@ -7,3 +7,4 @@ temp
 .vscode
 /.aws/credentials
 .yalc
+.idea

README.md

@@ -19,11 +19,11 @@ With one line of code, you can improve your interfaces, for example:
 Install using your package manager of choice.
 
 ```bash
-#yarn
+# yarn
 yarn add @formkit/auto-animate
-#npm
+# npm
 npm install @formkit/auto-animate
-#pnpm
+# pnpm
 pnpm add @formkit/auto-animate
 ```
 

cypress/integration/1-getting-started/animations.spec.js

@@ -14,6 +14,8 @@
 describe("the documentation site", () => {
   beforeEach(() => {
     cy.visit("http://127.0.0.1:5555")
+    cy.get("#disable").click()
+    cy.wait(500)
   })
 
   it("displays the tagline", () => {
@@ -23,8 +25,8 @@ describe("the documentation site", () => {
   it("takes some time to transition code editor", () => {
     cy.get("#hero .frameworks > li:nth-child(2)").click()
     cy.wait(50)
-    cy.hasAnimations(2)
-    cy.wait(250 * 1.5)
+    cy.hasAnimations(3)
+    cy.wait(250)
     cy.hasAnimations(0)
   })
 
@@ -41,7 +43,7 @@ describe("the documentation site", () => {
 
   it("animates the vue example", () => {
     cy.get(".vue-example li:first-child").click()
-    cy.hasAnimations(23)
+    cy.hasAnimations(24)
     cy.wait(250)
     cy.get(".vue-example li:last-child").click()
     cy.hasAnimations(23)
@@ -50,9 +52,14 @@ describe("the documentation site", () => {
     cy.hasAnimations(22)
   })
 
+  it("animates the angular example", () => {
+    cy.get(".angular-example button:first").click()
+    cy.hasAnimations(4)
+  })
+
   it("animates the card example", () => {
     cy.get(".card-example button:first-child").click()
-    cy.hasAnimations(3)
+    cy.hasAnimations(4)
     cy.wait(250)
     cy.get(".card-example .formkit-input.button").click()
     cy.get(".card-example .card:first-child()").isEntering()
@@ -61,9 +68,9 @@ describe("the documentation site", () => {
 
   it("animates the list example", () => {
     cy.get(".list-example li:first-child button").click()
-    cy.hasAnimations(3)
-    cy.get(".list-example .button--add").click()
     cy.hasAnimations(4)
+    cy.get(".list-example .button--add").click()
+    cy.hasAnimations(0)
     cy.get(".list-example li:last-child button").click()
     cy.hasAnimations(4)
   })
@@ -75,17 +82,18 @@ describe("the documentation site", () => {
 
   it("animates the accordion example", () => {
     cy.get(".accordion-example .accordion-item:nth-child(2) .question").click()
-    cy.hasAnimations(5)
-    cy.get(".accordion-example .accordion-item:nth-child(1) .question").click()
     cy.hasAnimations(6)
+    cy.get(".accordion-example .accordion-item:nth-child(1) .question").click()
+    cy.hasAnimations(0)
     cy.get(".accordion-example .accordion-item:nth-child(3) .question").click()
-    cy.hasAnimations(6)
+    cy.wait(100)
+    cy.hasAnimations(5)
   })
 
   it("animates the FormKit example", () => {
     cy.get(".formkit-example button[type='submit']").click()
     cy.hasAnimations(13)
-    cy.get(".formkit-example input[name='text_2']").type('FormKit1')
+    cy.get(".formkit-example input[name='text_2']").type("FormKit1")
     cy.hasAnimations(4)
   })
 })

docs/assets/main.css

@@ -59,9 +59,14 @@ h1, h2, h3, h4{
 h2 {
   padding-top: 1em;
 }
+
+#demo > h2:first-child {
+  padding-top: 2.5em;
+}
+
 @media (min-width: 42em) {
-  h2 {
-    padding-top: 1.5em;
+  #demo > h2:first-child {
+    padding-top: 0;
   }
 }
 
@@ -323,3 +328,52 @@ li.formkit-message {
   margin-top: 0;
   transition: margin-top .25s;
 }
+
+.framework-jumplinks {
+  padding: 0;
+  margin: 2em 0;
+  list-style-type: none;
+  display: flex;
+}
+.framework-jumplinks li::before {
+  display: none;
+}
+.framework-jumplinks a {
+  width: 1.5em;
+  height: 1.5em;
+  padding: 1em;
+  display: flex;
+  border: 1px solid var(--purple-l);
+  border-radius: .5em;
+  margin-right: 1em;
+  align-items: center;
+  overflow: hidden;
+  justify-content: center;
+}
+@media (min-width: 42em) {
+  .framework-jumplinks a {
+    width: 2em;
+    height: 2em;
+    padding: 1.25em;
+    margin-right: 1.5em;
+  }
+}
+
+.framework-jumplinks a:hover {
+  background-color: var(--purple-ll);
+}
+.framework-jumplinks li:last-child a {
+  margin-right: 0;
+}
+.framework-jumplinks a svg {
+  width: 2.25em;
+  aspect-ratio: 1;
+  height: auto;
+}
+.framework-jumplinks a span {
+  position: absolute;
+  left: -999px;
+}
+.balls {
+  background: url('./img/triangle.svg');
+}

docs/assets/variables.css

@@ -11,6 +11,7 @@
   --gray-d: #414339;
   --text: #333;
   --text-d: #333;
+  --purple-ll: #f6f2ff;
   --purple-l: #ece3ff;
   --purple-lm: #deceff;
   --purple-m: #7335d7;

docs/src/components/CodeExample.vue

@@ -7,6 +7,7 @@ import IconNPM from "./IconNPM.vue"
 import IconPNPM from "./IconPNPM.vue"
 import IconJavaScript from "./IconJavaScript.vue"
 import IconSvelte from "./IconSvelte.vue"
+import IconAngular from "./IconAngular.vue"
 import { computed, PropType, ref } from "vue"
 import { vAutoAnimate } from "../../../src"
 import "../../assets/prism.css"
@@ -52,6 +53,15 @@ const props = defineProps({
     required: false,
   },
 })
+
+var copyStatus = ref(false)
+function copyCode(value) {
+  window.navigator.clipboard.writeText(value)
+  copyStatus.value = true
+  setTimeout(() => {
+    copyStatus.value = false
+  }, 2000)
+}
 </script>
 
 <template>
@@ -71,9 +81,14 @@ const props = defineProps({
           class="code-example"
           :key="key"
           v-html="currentExample.highlighted"
+          @click="copyCode(currentExample.example)"
         ></code>
       </template>
+      <template v-if="copyStatus">
+        <span class="copy-status">Copied!</span>
+      </template>
     </div>
+
     <div class="window-footer">
       <ul class="frameworks">
         <li
@@ -97,6 +112,13 @@ const props = defineProps({
         >
           <IconSvelte />Svelte
         </li>
+        <li
+          v-if="'angular' in props.examples"
+          @click="current = 'angular'"
+          :data-selected="current === 'angular' || null"
+        >
+          <IconAngular />Angular
+        </li>
         <li
           v-if="'js' in props.examples"
           @click="current = 'js'"
@@ -188,6 +210,12 @@ const props = defineProps({
   display: none;
 }
 
+.copy-status {
+  padding-left: 1em;
+  color: var(--gray-l);
+  font-family: var(--system-stack);
+}
+
 .control {
   width: 0.8em;
   height: 0.8em;
@@ -216,19 +244,29 @@ const props = defineProps({
 }
 
 .frameworks {
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
   display: flex;
   align-items: center;
   list-style-type: none;
   padding: 0;
   margin: 0;
+  overflow: auto;
 }
+
+.frameworks::-webkit-scrollbar {
+  display: none;
+}
+
 .frameworks li {
   display: flex;
   align-items: center;
   font-size: 0.75em;
   padding: 0.75em 1em;
   cursor: pointer;
   margin-bottom: 0;
+  white-space: nowrap;
 }
 .frameworks li:hover {
   background-color: var(--gray-m);