Add createSpring primitive. (#629)

packages/spring/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Solid Primitives Working Group
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/spring/README.md

@@ -0,0 +1,63 @@
+<p>
+  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=spring" alt="Solid Primitives spring">
+</p>
+
+# @solid-primitives/spring
+
+[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
+[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/spring?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/spring)
+[![version](https://img.shields.io/npm/v/@solid-primitives/spring?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/spring)
+[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)
+
+A small SolidJS hook to interpolate signal changes with spring physics. Inspired by & directly forked from [`svelte-motion/spring`](https://svelte.dev/docs/svelte-motion#spring) as such, has a very familiar API design.
+
+With this primitive, you can easily animate values that can be interpolated like `number`, `date`, and collections (arrays or nested objects) of those datatypes.
+
+- `createSpring` - Provides a getter and setter for the spring primitive.
+- `createDerivedSpring` - Provides only a getter for the spring primitive deriving from an accessor parameter. Similar to the [@solid-primitives/tween](https://github.com/solidjs-community/solid-primitives/tree/main/packages/tween) API.
+
+The following physics options are available:
+
+- `stiffness` (number, default `0.15`) — a value between 0 and 1 where higher means a 'tighter' spring
+- `damping` (number, default `0.8`) — a value between 0 and 1 where lower means a 'springier' spring
+- `precision` (number, default `0.01`) — determines the threshold at which the spring is considered to have 'settled', where lower means more precise
+
+## Installation
+
+```bash
+npm install @solid-primitives/spring
+# or
+yarn add @solid-primitives/spring
+# or
+pnpm add @solid-primitives/spring
+```
+
+## How to use it
+
+```ts
+// Basic Example
+const [progress, setProgress] = createSpring(0);
+
+// Example with options (less sudden movement)
+const [radialProgress, setRadialProgress] = createSpring(0, { stiffness: 0.05 });
+
+// Example with collections (e.g. Object or Array).
+const [xy, setXY] = createSpring(
+  { x: 50, y: 50 },
+  { stiffness: 0.08, damping: 0.2, precision: 0.01 },
+);
+
+// Example deriving from an existing signal.
+const [myNumber, myNumber] = createSignal(20);
+const springedValue = createDerivedSpring(myNumber, { stiffness: 0.03 });
+```
+
+## Demo
+
+- **[Playground](https://primitives.solidjs.community/playground/spring)** - [source code](https://github.com/solidjs-community/solid-primitives/blob/main/packages/spring/dev/index.tsx)
+
+- **[CodeSandbox - Basic Example](https://codesandbox.io/p/devbox/ecstatic-borg-k2wqfr)**
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md)

packages/spring/dev/index.tsx

@@ -0,0 +1,121 @@
+import { createSpring } from "../src/index.js"
+
+export default function App() {
+  const [progress, setProgress] = createSpring(0);
+  const [radialProgress, setRadialProgress] = createSpring(0, {
+    stiffness: 0.1, damping: 0.3
+  });
+  const [xy, setXY] = createSpring({ x: 50, y: 50 }, { stiffness: 0.1, damping: 0.3 });
+  const [date, setDate] = createSpring(new Date());
+
+  function toggleProgress() {
+    if (progress() === 0) setProgress(1);
+    else setProgress(0);
+  }
+  function toggleRadialProgress() {
+    if (radialProgress() === 0) setRadialProgress(1);
+    else setRadialProgress(0);
+  }
+  let d = false
+  function toggleXY() {
+    if (d = !d) setXY({ x: 200, y: 200 });
+    else setXY({ x: 50, y: 50 });
+  }
+  function toggleDate() {
+    if (date().getDate() === new Date("2024-12-01").getDate()) setDate(new Date("2024-04-14"));
+    else setDate(new Date("2024-12-01"));
+  }
+
+  return <>
+  <style>{`
+progress {
+  color: #a3e635;
+}
+progress::-moz-progress-bar {
+  background: #a3e635;
+}
+progress::-moz-progress-bar {
+  background: #a3e635;
+}
+
+.circular-progress {
+  --size: 250px;
+  --half-size: calc(var(--size) / 2);
+  --stroke-width: 20px;
+  --radius: calc((var(--size) - var(--stroke-width)) / 2);
+  --circumference: calc(var(--radius) * pi * 2);
+  --dash: calc((var(--progress) * var(--circumference)) / 100);
+  animation: progress-animation 5s linear 0s 1 forwards;
+}
+
+.circular-progress circle {
+  cx: var(--half-size);
+  cy: var(--half-size);
+  r: var(--radius);
+  stroke-width: var(--stroke-width);
+  fill: none;
+  stroke-linecap: round;
+}
+
+.circular-progress circle.bg {
+  stroke: #111;
+}
+
+.circular-progress circle.fg {
+  transform: rotate(-90deg);
+  transform-origin: var(--half-size) var(--half-size);
+  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
+  transition: stroke-dasharray 0.3s linear 0s;
+  stroke: #a3e635;
+}
+`}</style>
+    <div class="flex flex-col items-center justify-center gap-8">
+      <div class="flex gap-3 p-2">
+        <button onClick={toggleProgress}>Toggle progress</button>
+        <button onClick={toggleRadialProgress}>Toggle Radial progress</button>
+        <button onClick={toggleXY}>Toggle XY</button>
+        <button onClick={toggleDate}>Toggle Date</button>
+      </div>
+
+      {/* Progress */}
+      <div class="flex flex-col items-center">
+        <progress
+          class="progress w-56"
+          value={progress() * 100}
+          max="100"
+        ></progress>
+
+        <p class="text-white">{(progress() * 100).toFixed(0)}%</p>
+      </div>
+
+      {/* Radial progress */}
+      <div class="flex flex-col items-center gap-4">
+        <svg
+          width="120"
+          height="120"
+          viewBox="0 0 250 250"
+          class="circular-progress"
+          style={`--progress:${radialProgress() * 100};`}
+        >
+          <circle class="bg"></circle>
+          <circle class="fg"></circle>
+        </svg>
+        <span class="text-white">{(radialProgress() * 100).toFixed(0)}%</span>
+      </div>
+
+      {/* XY */}
+      <div
+        class="bg-lime-400 rounded-lg flex items-center justify-center whitespace-nowrap text-black text-sm font-bold"
+        style={{
+          width: xy().x + "px",
+          height: 100 + "px",
+        }}
+      >
+        {xy().x.toFixed(0)}x{xy().y.toFixed(0)}
+      </div>
+
+      {/* Date */}
+      <div>{date()+""}</div>
+    </div>
+  </>
+};

packages/spring/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@solid-primitives/spring",
+  "version": "0.0.1",
+  "description": "Primitive that creates spring physics functions.",
+  "author": "Carlo Taleon <[email protected]>",
+  "contributors": ["Damian Tarnawski <[email protected]>"],
+  "license": "MIT",
+  "homepage": "https://primitives.solidjs.community/package/spring",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/solidjs-community/solid-primitives.git"
+  },
+  "bugs": {
+    "url": "https://github.com/solidjs-community/solid-primitives/issues"
+  },
+  "primitive": {
+    "name": "spring",
+    "stage": 0,
+    "list": [
+      "createSpring",
+      "createDerivedSpring"
+    ],
+    "category": "Animation"
+  },
+  "keywords": [
+    "animate",
+    "tween",
+    "spring",
+    "solid",
+    "primitives"
+  ],
+  "private": false,
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "browser": {},
+  "exports": {
+    "import": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "require": {
+      "types": "./dist/index.d.cts",
+      "default": "./dist/index.cjs"
+    }
+  },
+  "typesVersions": {},
+  "scripts": {
+    "dev": "tsx ../../scripts/dev.ts",
+    "build": "tsx ../../scripts/build.ts",
+    "vitest": "vitest -c ../../configs/vitest.config.ts",
+    "test": "pnpm run vitest",
+    "test:ssr": "pnpm run vitest --mode ssr"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.6.12"
+  }
+}