Feature/frame

dev/examples/frame-animate.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+import { Frame, usePose } from "@framer"
+import { useInterval } from "../inc/use-interval"
+
+const MovingFrame = Frame({
+    left: {
+        x: 100,
+    },
+})
+export function App() {
+    const [pose, setPose] = usePose<typeof MovingFrame>("default")
+    useInterval(() => {
+        setPose("left")
+    }, 1000)
+    return <MovingFrame pose={pose} />
+}

dev/examples/frame-pose-cycle.tsx

@@ -0,0 +1,11 @@
+import * as React from "react"
+import { Frame, usePose } from "@framer"
+
+const MovingFrame = Frame({
+    visible: { opacity: 1 },
+    hidden: { opacity: 0 },
+})
+export function App() {
+    const [pose, setPose] = usePose<typeof MovingFrame>("visible", ["visible", "hidden"])
+    return <MovingFrame pose={pose} onClick={() => setPose.cycle()} />
+}

src/framer/Frame.ts

@@ -0,0 +1,35 @@
+import { PoseConfig, ComponentFactory, PoseConfigFactory } from "../motion/types"
+import { HTMLAttributes } from "react"
+import { motion } from "../motion"
+
+const frameDefaults = {
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 100,
+    background: "#0AF",
+}
+
+const extendConfig = <Config extends PoseConfigFactory | PoseConfig>(
+    config: Config | undefined,
+    extension: PoseConfig
+): PoseConfigFactory | PoseConfig => {
+    if (!config) {
+        return extension
+    }
+    if (typeof config === "function") {
+        return (...args: any) => {
+            const configFactory = config as PoseConfigFactory
+            return { ...extension, ...configFactory(args) }
+        }
+    }
+    const c = config as PoseConfig
+    return { ...extension, ...c }
+}
+
+export const Frame: ComponentFactory<HTMLAttributes<HTMLDivElement>> = <Config extends PoseConfigFactory | PoseConfig>(
+    config?: Config
+) => {
+    const divConfig = extendConfig(config, { default: frameDefaults })
+    return motion.div(divConfig)
+}

src/index.ts

@@ -7,3 +7,5 @@ export { motion, useMotionValue, useTransform, usePose }
 
 export { useMouseEvents, useTouchEvents, usePointerEvents } from "./events"
 export { usePanGesture } from "./gestures"
+
+export { Frame } from "./framer/Frame"

src/utils/pose-resolvers.ts

@@ -4,7 +4,8 @@ type PoseNameList = string[]
 type PoseName = string | PoseNameList
 type UnresolvedPose = PoseName | MotionValue
 
-export const poseToArray = (pose?: PoseName): PoseNameList => (Array.isArray(pose) ? [...pose] : pose ? [pose] : [])
+export const poseToArray = (pose?: PoseName): PoseNameList =>
+    Array.isArray(pose) ? ["default", ...pose] : pose ? ["default", pose] : []
 
 export const resolvePoses = (pose: UnresolvedPose): PoseNameList => {
     const unresolvedPose = pose instanceof MotionValue ? (pose.get() as string) : pose