@rpcbase/client 0.179.0 → 0.180.0

package/AppProvider/index.js

@@ -13,6 +13,7 @@ import {flagValues} from "config/flags"
 
 import {POSTHOG_KEY} from "env"
 import { useAuthRouter } from "../auth/useAuthRouter"
+import { NotificationsProvider, NotificationsContainer } from "../notifications"
 
 
 const PostHogWrapper = ({children, ...props}) => {
@@ -56,10 +57,13 @@ const AppProvider = ({children, ...props}) => {
   return (
     <PostHogWrapper>
       <HashStateProvider>
-        <div className={cx({"d-none": !!authComponent})}>
-          {children}
-        </div>
-        {authComponent}
+        <NotificationsProvider>
+          <div className={cx({"d-none": !!authComponent})}>
+            {children}
+          </div>
+          {authComponent}
+          <NotificationsContainer />
+        </NotificationsProvider>
       </HashStateProvider>
     </PostHogWrapper>
   )

package/auth/components/SignOut/index.js

@@ -14,6 +14,7 @@ import {AccountListItem} from "../AccountsList/AccountListItem"
 import {Footer} from "../Footer"
 
 import "./sign-out.scss"
+import { useNotifications } from "../../../notifications"
 
 // TODO: rts_disconnect
 // TODO: clear cache + db
@@ -26,6 +27,8 @@ export const SignOut = ({
 }) => {
   const {t} = useTranslation("rb.sign_out", {useSuspense: false})
 
+  const {addNotification} = useNotifications()
+
   const [isSignedOut, setIsSignedOut] = useState(false)
 
   const [accounts, setAccounts] = useState()
@@ -44,13 +47,20 @@ export const SignOut = ({
     load()
   }, [])
 
-
   const onSignOut = async() => {
     // TODO: NYI handle sign out from multiple accounts here
     const res = await post("/api/v1/auth/sign_out")
     if (res.status === "ok") {
       signOut()
       setIsSignedOut(true)
+
+      const toast = addNotification({
+        // id: `create-template-${Date.now()}`,
+        loading: false,
+        title: "Signed out",
+        message: "You have been signed out click here to sign back in",
+      })
+
       onSignOutSuccess()
     } else {
       throw new Error("unable to sign out")

package/notifications/Notification/index.js

@@ -0,0 +1,36 @@
+/* @flow */
+import * as React from "react"
+import { useCallback } from "react";
+
+import type {Notification as NotificationType} from "types/notification"
+
+import "./notification.scss"
+
+type Props = {
+  notification: NotificationType,
+  onClick?: () => void,
+}
+
+const Notification = ({ ref, notification, onClick }: Props) => {
+  const handleClick = useCallback(() => {
+    if (onClick) {
+      onClick();
+    }
+  }, [onClick]);
+
+  return (
+    <a
+      className={cx(["dropdown-item", notification.ack && "disabled"])}
+      href="#"
+      ref={ref}
+      onClick={handleClick}
+    >
+      <span>{notification.title}</span>
+      <p className="text-secondary mb-0" style={{whiteSpace: "initial"}}>
+        {notification.description}
+      </p>
+    </a>
+  );
+}
+
+export default Notification

package/notifications/Notification/notification.scss

@@ -0,0 +1 @@
+@import "helpers";

package/notifications/NotificationItem/HeaderStatus.js

@@ -0,0 +1,93 @@
+/* @flow */
+import {motion} from "framer-motion"
+import {useEffect, useRef, useState} from "react"
+
+import ActivityIndicator from "../../ui/ActivityIndicator"
+import LottiePlayer from "../../ui/LottiePlayer"
+
+import {SPRING_BOUNCY} from "../../ui/springs"
+
+import checkmarkAnimation from "../../ui/animations/checkmark.json"
+
+// TODO: we should have a way to unmount loader when animation complete
+const HeaderStatus = ({isLoading, status}) => {
+  const playerRef = useRef()
+
+  const initiallyLoading = useRef(isLoading)
+
+  const [hasLoader, setHasLoader] = useState(isLoading)
+
+  const [statusAnimatedVals, setStatusAnimatedVals] = useState({})
+  const [loaderAnimatedVals, setLoaderAnimatedVals] = useState({})
+
+  useEffect(() => {
+    // set initial seeker position, TODO: this doesn't work without the animation frame
+    requestAnimationFrame(() => {
+      playerRef.current?.setSeeker(16, false)
+    })
+  }, [])
+
+  const runTransition = () => {
+    setStatusAnimatedVals({scale: 1, opacity: 1})
+    setLoaderAnimatedVals({scale: 0, opacity: 0})
+    requestAnimationFrame(() => {
+      playerRef.current?.play()
+    })
+  }
+
+  useEffect(() => {
+    // TODO: why was it checking on initiallyLoading.current ?
+    // if (!isLoading && initiallyLoading.current) {
+    if (!isLoading) {
+      runTransition()
+    }
+  }, [isLoading])
+
+  const onLoaderAnimationComplete = () => {
+    setHasLoader(false)
+  }
+
+  return (
+    <div style={{position: "relative", background: "red", width: 28}}>
+      <motion.div
+        className="status-icon"
+        style={{position: "absolute", top: -11}}
+        initial={{scale: 0.5, opacity: 0}}
+        // initial={{scale: 1, opacity: 1}}
+        transition={SPRING_BOUNCY}
+        animate={statusAnimatedVals}
+      >
+        <LottiePlayer
+          className={cx("", {})}
+          ref={playerRef}
+          autoplay={false}
+          loop={false}
+          speed={1}
+          keepLastFrame={true}
+          src={checkmarkAnimation}
+          style={{
+            height: `${23}px`,
+            width: `${23}px`,
+            // opacity: .15,
+          }}
+          // onEvent={this.onPlayerEvent}
+        />
+      </motion.div>
+
+      {hasLoader && (
+        <motion.div
+          style={{position: "absolute", left: 1, top: -9}}
+          initial={{scale: 1, opacity: 1}}
+          // initial={{scale: 1, opacity: 0}}
+          transition={SPRING_BOUNCY}
+          animate={loaderAnimatedVals}
+          onAnimationComplete={onLoaderAnimationComplete}
+        >
+          <ActivityIndicator size={19} />
+        </motion.div>
+      )}
+    </div>
+  )
+}
+
+export default HeaderStatus

package/notifications/NotificationItem/index.js

@@ -0,0 +1,65 @@
+/* @flow */
+import assert from "assert"
+import {useRef} from "react"
+import Toast from "react-bootstrap/Toast"
+
+import {useNotifications} from "../NotificationsContext"
+
+import HeaderStatus from "./HeaderStatus"
+
+// TODO: mv to rb server
+// import ack_notification from "rpc!server/notifications/ack_notification"
+
+import "./notification-item.scss"
+
+
+export const NotificationItem = ({ nodeRef, notification }) => {
+  const { setNotifications } = useNotifications()
+
+  const { isLoading = false, status = "success", zIndex = 999 } = notification
+
+  const onClick = () => {
+    console.log("onclicknotif", notification)
+  }
+
+  // remove notification on close
+  const onClose = async () => {
+    console.log("onClose!!!")
+    if (notification.id) {
+      console.warn("ACK NOTIFICATION not copied to rb-server yet")
+      // const res = await ack_notification({
+      //   notification_id: notification.id,
+      //   ack_at_ms: Date.now(),
+      // })
+      // assert(res.status === "ok")
+    }
+
+    setNotifications((current) => {
+      return current.filter((n) => n.id !== notification.id)
+    })
+  }
+
+  // no header when no body
+  const hasBody = !!notification.body
+
+  return (
+      <Toast
+        ref={nodeRef}
+        id={notification.id}
+        className={cx("notification-item mt-2 notification-toast", {"has-no-body": !hasBody})}
+        style={{position: "relative", zIndex}}
+        onClose={onClose}
+        animation={false}
+      >
+        <Toast.Header className="ps-2 py-2" closeButton={true}>
+          {notification.icon ? <div>{"<IC>"}</div> : <HeaderStatus isLoading={isLoading} status={status} />}
+
+          <div className="me-auto">{notification.title}</div>
+          {notification.type === "workflow" && <small>{notification.formatted_timestamp}</small>}
+          {notification.type === "intent" && <small>INTENT</small>}
+        </Toast.Header>
+
+        {hasBody && <Toast.Body onClick={onClick}>{notification.body}</Toast.Body>}
+      </Toast>
+  )
+}

package/notifications/NotificationItem/notification-item.scss

@@ -0,0 +1,25 @@
+@import "helpers";
+
+.notification-item.toast {
+  max-width: 260px;
+
+  .toast-header {
+    color: $gray-900;
+    font-weight: 600;
+  }
+
+  &.has-no-body {
+    background: $white !important;
+
+    .toast-header {
+      background: transparent !important;
+      border-bottom: none;
+    }
+  }
+
+  svg {
+    path {
+      fill: $green-500 !important;
+    }
+  }
+}

package/notifications/NotificationsContainer/index.js

@@ -0,0 +1,37 @@
+/* @flow */
+import {createRef} from "react"
+import {CSSTransition, TransitionGroup} from "react-transition-group"
+
+import ToastContainer from "react-bootstrap/ToastContainer"
+
+// import {useQuery} from "@rpcbase/client/rts"
+
+import {useNotifications} from "../NotificationsContext"
+import {NotificationItem} from "../NotificationItem"
+
+// import useLLTs from "./useLLTs"
+
+import "./notifications-container.scss"
+
+export const NotificationsContainer = () => {
+  const {notifications} = useNotifications()
+
+  const renderNotification = (notification, i) => {
+    const key = notification.id
+    const nodeRef = createRef()
+
+    return (
+      <CSSTransition key={notification.id} nodeRef={nodeRef} timeout={200} classNames="notification-item">
+        <NotificationItem key={key} nodeRef={nodeRef} notification={notification} />
+      </CSSTransition>
+    )
+  }
+
+  return (
+    <ToastContainer id="notifications-container" position="bottom-end" className="pb-4 pe-3 ps-4">
+      <TransitionGroup className="transition-list">
+        {notifications.map(renderNotification)}
+      </TransitionGroup>
+    </ToastContainer>
+  )
+}

package/notifications/NotificationsContainer/notifications-container.scss

@@ -0,0 +1,38 @@
+@import "helpers";
+
+$transition-duration: 200ms;
+
+#notifications-container {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  max-height: 100vh;
+  overflow-y: scroll;
+
+  .action-notification {
+    cursor: pointer;
+  }
+
+  .transition-list {
+    transition: max-height $transition-duration ease-in-out;
+  }
+
+  .notification-item-enter {
+    opacity: 0;
+  }
+
+  .notification-item-enter-active {
+    opacity: 1;
+    transition: opacity 400ms;
+  }
+
+  .notification-item-exit {
+    opacity: 1;
+  }
+
+  .notification-item-exit-active {
+    transform: translateX(390px);
+
+    transition: all $transition-duration ease-out;
+  }
+}

package/notifications/NotificationsContainer/useLLTs.js

@@ -0,0 +1,28 @@
+/* @flow */
+import assert from "assert"
+import {useEffect, useState} from "react"
+
+// TODO: fix ltts import to rb
+// import get_llts from "rpc!server/notifications/llt/get_llts"
+
+
+const useLLTs = () => {
+  const [llts, setLLTs] = useState([])
+
+  useEffect(() => {
+    const load = async() => {
+      // const res = await get_llts({
+      //   env_id: envContext.envId,
+      // })
+      const res =  {status: "ok", llts: []}
+      assert(res.status === "ok", "unable to retrieve llts")
+      setLLTs(res.llts)
+    }
+
+    load()
+  }, [])
+
+  return llts
+}
+
+export default useLLTs

package/notifications/NotificationsContext/index.js

@@ -0,0 +1,71 @@
+/* @flow */
+import {useEffect, createContext, useContext} from "react"
+
+import {useNotificationsList} from "./useNotificationsList"
+
+// const ICONS_MAP = {
+//   warning: "warning",
+//   error: "danger",
+// }
+
+export const NotificationsContext = createContext()
+
+export const NotificationsProvider = ({value, children}) => {
+  const [notifications, setNotifications] = useNotificationsList([])
+
+  const addNotification = ({
+    id,
+    title,
+    body,
+    timestamp = Date.now(),
+    zIndex = 2000,
+    isLoading = false,
+  }) => {
+    const notification = {
+      id: id || `notif-${Date.now().toString()}`,
+      title,
+      body,
+      timestamp,
+      zIndex,
+      level: "toast",
+      isLoading,
+      // icon: ICONS_MAP.error,
+    }
+
+    setNotifications((current) => {
+      const next = [...current]
+      next.push(notification)
+      return next
+    })
+
+    const dismiss = () => {
+      setNotifications((current) => {
+        const next = [...current]
+        return next.filter((n) => n.id !== id)
+      })
+    }
+
+    const update = (payload) => {
+      setNotifications((current) => {
+        const next = [...current]
+        return next.map((n) => {
+          if (n.id === id) {
+            // n.isLoading = false
+            Object.assign(n, payload)
+          }
+          return n
+        })
+      })
+    }
+
+    return {dismiss, update}
+  }
+
+  return (
+    <NotificationsContext.Provider value={{notifications, setNotifications, addNotification}}>
+      {children}
+    </NotificationsContext.Provider>
+  )
+}
+
+export const useNotifications = () => useContext(NotificationsContext)

package/notifications/NotificationsContext/useNotificationsList.js

@@ -0,0 +1,75 @@
+/* eslint-disable */
+/* @flow */
+import {useState, useEffect} from "react"
+
+import {useQuery} from "../../rts"
+
+import {ON_NOTIFICATION_RECEIVED_EVENT} from "../config"
+
+export const useNotificationsList = (initial = []) => {
+  const [allNotifications, setAllNotifications] = useState(initial)
+
+  const notificationsQuery = useQuery(
+    "Notification",
+    {
+      $or: [{ack_at_ms: null}, {ack_at_ms: {$exists: false}}],
+    },
+    {
+      projection: {
+        _owners: 0,
+      },
+    },
+  )
+
+  useEffect(() => {
+    if (!notificationsQuery.data) return
+
+    // console.log("NOTIFS TMP RETURN", notificationsQuery.data)
+    return
+
+    // console.log("got new notifs data", notificationsQuery.data)
+
+    // get all current ids
+    const allNotificationsIds = allNotifications.filter((n) => !!n.id).map((n) => n.id)
+
+    const insertNotifications = notificationsQuery.data.filter(
+      (n) => !allNotificationsIds.includes(n._id),
+    )
+
+    const notificationsDataIds = notificationsQuery.data.map((n) => n._id)
+
+    // remove all notifications that are from the notifications collection
+    const removeNotificationsIds = allNotifications
+      .filter((n) => !!n.id && n.col === "Notification")
+      .filter((n) => !notificationsDataIds.includes(n.id))
+      .map((n) => n.id)
+
+    // update our notifications
+    if (insertNotifications.length > 0 || removeNotificationsIds.length > 0) {
+      setAllNotifications((previous) => {
+        // copy and remove old notifs
+        const nextNotifs = [...previous].filter((n) => !removeNotificationsIds.includes(n.id))
+
+        const formattedNotifications = insertNotifications.map((n) => {
+          return {
+            id: n._id,
+            col: "Notification",
+            ...n.notification,
+            timestamp: n.server_timestamp_ms,
+          }
+        })
+
+        nextNotifs.unshift(...formattedNotifications)
+        return nextNotifs
+      })
+    }
+
+    // play animation if we added anything
+    if (insertNotifications.length > 0) {
+      const ev = new CustomEvent(ON_NOTIFICATION_RECEIVED_EVENT)
+      document.body.dispatchEvent(ev)
+    }
+  }, [notificationsQuery.data, allNotifications])
+
+  return [allNotifications, setAllNotifications]
+}

package/notifications/NotificationsSettingsModal/SettingsForm.js

@@ -0,0 +1,52 @@
+/* @flow */
+import Form from "react-bootstrap/Form"
+import TimePicker from "react-time-picker"
+
+import {useStoredValue} from "@rpcbase/client"
+
+
+const TIME_FORMAT = "HH:mm"
+
+const timePickerProps = {
+  format: TIME_FORMAT,
+  maxDetail: "minute",
+  renderSecondHand: false,
+}
+
+const SettingsForm = () => {
+  const [isEnabled, setIsEnabled] = useStoredValue("has_notifications_enabled", "yes")
+
+  const [fromTime, setFromTime] = useStoredValue("notifications_from_time", "09:00")
+  const [toTime, setToTime] = useStoredValue("notifications_to_time", "22:00")
+
+  const onToggleNotifications = (e) => {
+    setIsEnabled(e.target.checked ? "yes" : "no")
+  }
+
+  return (
+    <div className="px-2 py-3">
+      <div>
+        <div className="h6 fw-bold">Enable Notifications</div>
+        <Form.Check
+          type="switch"
+          id="toggle-notifications-switch"
+          label={`Notifications are ${isEnabled ? "enabled" : "disabled"}`}
+          checked={isEnabled === "yes"}
+          onChange={onToggleNotifications}
+        />
+      </div>
+
+      <div className="mt-3">
+        <div className="h6 fw-bold">Notifications are allowed:</div>
+        <div className="">
+          <span className="me-2">From:</span>
+          <TimePicker onChange={setFromTime} value={fromTime} {...timePickerProps} />
+          <span className="me-2">To:</span>
+          <TimePicker onChange={setToTime} value={toTime} {...timePickerProps} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SettingsForm

package/notifications/NotificationsSettingsModal/index.js

@@ -0,0 +1,48 @@
+/* @flow */
+import ActivityIndicator from "@rpcbase/ui/ActivityIndicator"
+import Modal, {withHashStateModal} from "@rpcbase/ui/Modal"
+
+// import TemplatesView from "./TemplatesView"
+// import {TemplateContextProvider} from "./TemplateContext"
+
+// import DialogAnimatedPreview from "./components/DialogAnimatedPreview"
+// import TogglePreviewButton from "./components/TogglePreviewButton"
+
+import SettingsForm from "./SettingsForm"
+
+import BellGlyph from "static/icons/notifications/bell-glyph.svg"
+
+import "./notifications-settings.scss"
+
+
+const NotificationsSettingsModal = ({onHide}) => {
+  const isLoading = false
+
+  return (
+    <Modal className="channel-templates-modal" show scrollable={false} onHide={onHide}>
+      <Modal.Header className="close-top" closeButton>
+        <BellGlyph className="me-2 align-self-start mt-1" width={22} fill={"#0d6efd"} />
+        <div>
+          <div>Notifications</div>
+        </div>
+      </Modal.Header>
+      <Modal.Body className="p-0" style={{maxHeight: "70vh", overflow: "visible"}}>
+        {isLoading && (
+          <div className="d-flex flex-row align-items-center">
+            <ActivityIndicator size={24} />
+            <div className="ms-2">Loading text...</div>
+          </div>
+        )}
+
+        <SettingsForm />
+      </Modal.Body>
+      <Modal.Footer className="d-flex justify-content-between">
+        <div>
+          For more info see <a href="/docs/notifications">/docs/notifications</a>
+        </div>
+      </Modal.Footer>
+    </Modal>
+  )
+}
+
+export default withHashStateModal(NotificationsSettingsModal, "showNotificationsSettingsModal")

package/notifications/NotificationsSettingsModal/notifications-settings.scss

@@ -0,0 +1 @@
+@import "helpers";

package/notifications/config.js

@@ -0,0 +1 @@
+export const ON_NOTIFICATION_RECEIVED_EVENT = "ON_NOTIFICATION_RECEIVED_EVENT"

package/notifications/index.js

@@ -0,0 +1,4 @@
+export * from "./NotificationsContext"
+export * from "./NotificationsContainer"
+
+export * from "./config"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.179.0",
+  "version": "0.180.0",
   "scripts": {
     "test": "../../node_modules/.bin/wireit"
   },
@@ -86,6 +86,7 @@
     "@ui-kitten/components": "5.3.1",
     "figma-squircle": "0.3.1",
     "firebase": "10.12.3",
+    "framer-motion": "11.3.22",
     "i18next": "23.12.2",
     "i18next-chained-backend": "4.6.2",
     "i18next-resources-to-backend": "1.2.1",

package/rts/getUseQuery/index.js

@@ -29,7 +29,6 @@ const getUseQuery = (register_query) => (
   const uid = useMemo(() => {
     // TODO: why is there a options.userId here ??
     const _uid = Platform.OS === "web" ? getUid() : options.userId
-    assert(_uid, "missing uid")
     return _uid
   }, [])
 
@@ -81,7 +80,7 @@ const getUseQuery = (register_query) => (
       if (Platform.OS === "web") {
         localStorage.setItem(storageKey, LZString.compressToUTF16(JSON.stringify(newData)))
       } else {
-        // TODO: rn fast storage async
+        // TODO: RN MMKV
       }
     }
 

package/rts/rts.js

@@ -197,6 +197,8 @@ export const register_query = (model_name, query, _options, _callback) => {
   }
   _queries_store[model_name][query]
 
+  console.log("QUERY OPTIONSSS", options)
+
   // TODO: why both run and register query here ? the run_query should come straight from register ?
   _socket.emit("run_query", {model_name, query, query_key, options})
   _socket.emit("register_query", {model_name, query, query_key, options})

package/ui/animations/checkmark.json

@@ -0,0 +1 @@
+{"v":"5.9.6","fr":24,"ip":0,"op":28,"w":64,"h":64,"nm":"ok","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"line","parent":2,"td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[32.948,31.305,0],"ix":2,"l":2},"a":{"a":0,"k":[328.975,313.345,0],"ix":1,"l":2},"s":{"a":0,"k":[10.56,10.56,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-12.898,0.665],[-3.898,8.665],[12.898,-8.665]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[32.897,31.335],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":20,"s":[0]},{"t":25,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"tr","p":{"a":0,"k":[328.975,313.345],"ix":2},"a":{"a":0,"k":[32.897,31.335],"ix":1},"s":{"a":0,"k":[1000,1000],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"line-2","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-12.898,0.665],[-3.898,8.665],[12.898,-8.665]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[32.897,31.335],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":3,"s":[0]},{"t":8,"s":[100]}],"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"tr","p":{"a":0,"k":[328.975,313.345],"ix":2},"a":{"a":0,"k":[32.897,31.335],"ix":1},"s":{"a":0,"k":[1000,1000],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"line-1","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":29,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"circle","tt":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[32,31.87,0],"ix":2,"l":2},"a":{"a":0,"k":[32,31.87,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":3,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[94.7,94.7,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":11,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":17,"s":[100,100,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":21,"s":[94.7,94.7,100]},{"t":25,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-14.36],[14.36,0],[0,14.36],[-14.36,0]],"o":[[0,14.36],[-14.36,0],[0,-14.36],[14.36,0]],"v":[[26,0],[0,26],[-26,0],[0,-26]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[32,31.87],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":29,"st":0,"ct":1,"bm":0}],"markers":[]}

package/ui/springs.js

@@ -0,0 +1,17 @@
+export const SPRING_DEFAULT = {
+  type: "spring",
+  stiffness: 420,
+  damping: 32,
+}
+
+export const SPRING_FASTER = {
+  type: "spring",
+  stiffness: 490,
+  damping: 31,
+}
+
+export const SPRING_BOUNCY = {
+  type: "spring",
+  stiffness: 490,
+  damping: 16,
+}