From d6ce0a5ccfc8631d247b5c3c794b339d1a0f4c1a Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Sat, 25 Nov 2023 21:59:22 -0800 Subject: [PATCH] svelte demos in mdx --- css/index.css | 1 + docs/astro.config.mjs | 11 +- docs/package-lock.json | 202 ++++++++++++++++++++++++ docs/package.json | 3 +- docs/src/components/easings.svelte | 85 ++++++++++ docs/src/content/docs/props/easings.mdx | 35 +++- docs/src/styles/demo-animations.css | 23 +++ docs/tsconfig.json | 11 +- 8 files changed, 360 insertions(+), 11 deletions(-) create mode 100644 docs/src/components/easings.svelte create mode 100644 docs/src/styles/demo-animations.css diff --git a/css/index.css b/css/index.css index 33841388..83ca814e 100644 --- a/css/index.css +++ b/css/index.css @@ -5,5 +5,6 @@ @import 'z-index.css'; @import 'borders.css'; @import 'shadows.css'; +@import 'motion/easings.css'; @import 'color/palette.oklch.css'; @import 'color/gradients.css'; diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index d719b3e5..473714cc 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -1,20 +1,23 @@ import { defineConfig } from 'astro/config' +import svelte from '@astrojs/svelte' import starlight from '@astrojs/starlight' import sidebar from './src/sidebar' // https://astro.build/config export default defineConfig({ integrations: [ + svelte(), starlight({ title: 'Open Props', logo: { src: './src/assets/op.png', }, // site: 'https://open-props.style', - // customCss: [ - // '../css/index.css', - // './src/styles/starlight.overrides.css', - // ], + customCss: [ + '../css/index.css', + './src/styles/demo-animations.css', + // './src/styles/starlight.overrides.css', + ], social: { github: 'https://github.com/argyleink/open-props', discord: 'https://discord.gg/AqA4fU886r', diff --git a/docs/package-lock.json b/docs/package-lock.json index 72a3c041..53dd75d9 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -9,6 +9,7 @@ "dependencies": { "@astrojs/check": "^0.3.1", "@astrojs/starlight": "^0.13.0", + "@astrojs/svelte": "^4.0.4", "astro": "^3.2.3", "sharp": "^0.32.5", "typescript": "^5.3.2" @@ -192,6 +193,22 @@ "astro": "^3.2.0" } }, + "node_modules/@astrojs/svelte": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/@astrojs/svelte/-/svelte-4.0.4.tgz", + "integrity": "sha512-7OIq3YWSq270TrJZhVNzGXB5+eCp1vyNS0+WcGixxtUSz8ciwO+PqZ6GIhvmEjbBPR0x0QS8t0p0B2qlKJu/EA==", + "dependencies": { + "@sveltejs/vite-plugin-svelte": "^2.5.2", + "svelte2tsx": "^0.6.20" + }, + "engines": { + "node": ">=18.14.1" + }, + "peerDependencies": { + "astro": "^3.0.0", + "svelte": "^3.55.0 || ^4.0.0 || ^5.0.0-next.1" + } + }, "node_modules/@astrojs/telemetry": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@astrojs/telemetry/-/telemetry-3.0.4.tgz", @@ -1110,6 +1127,43 @@ "win32" ] }, + "node_modules/@sveltejs/vite-plugin-svelte": { + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.5.3.tgz", + "integrity": "sha512-erhNtXxE5/6xGZz/M9eXsmI7Pxa6MS7jyTy06zN3Ck++ldrppOnOlJwHHTsMC7DHDQdgUp4NAc4cDNQ9eGdB/w==", + "dependencies": { + "@sveltejs/vite-plugin-svelte-inspector": "^1.0.4", + "debug": "^4.3.4", + "deepmerge": "^4.3.1", + "kleur": "^4.1.5", + "magic-string": "^0.30.3", + "svelte-hmr": "^0.15.3", + "vitefu": "^0.2.4" + }, + "engines": { + "node": "^14.18.0 || >= 16" + }, + "peerDependencies": { + "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0-next.0", + "vite": "^4.0.0" + } + }, + "node_modules/@sveltejs/vite-plugin-svelte-inspector": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz", + "integrity": "sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==", + "dependencies": { + "debug": "^4.3.4" + }, + "engines": { + "node": "^14.18.0 || >= 16" + }, + "peerDependencies": { + "@sveltejs/vite-plugin-svelte": "^2.2.0", + "svelte": "^3.54.0 || ^4.0.0", + "vite": "^4.0.0" + } + }, "node_modules/@types/acorn": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz", @@ -1446,6 +1500,15 @@ "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" }, + "node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "peer": true, + "dependencies": { + "dequal": "^2.0.3" + } + }, "node_modules/array-iterate": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/array-iterate/-/array-iterate-2.0.1.tgz", @@ -1549,6 +1612,15 @@ "astro": "^3.0.0-beta" } }, + "node_modules/axobject-query": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", + "integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==", + "peer": true, + "dependencies": { + "dequal": "^2.0.3" + } + }, "node_modules/b4a": { "version": "1.6.4", "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz", @@ -2019,6 +2091,19 @@ "node": ">=6" } }, + "node_modules/code-red": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz", + "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==", + "peer": true, + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.4.15", + "@types/estree": "^1.0.1", + "acorn": "^8.10.0", + "estree-walker": "^3.0.3", + "periscopic": "^3.1.0" + } + }, "node_modules/color": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", @@ -2114,6 +2199,19 @@ "resolved": "https://registry.npmjs.org/css-selector-parser/-/css-selector-parser-1.4.1.tgz", "integrity": "sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==" }, + "node_modules/css-tree": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", + "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "peer": true, + "dependencies": { + "mdn-data": "2.0.30", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -2167,6 +2265,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/dedent-js": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz", + "integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==" + }, "node_modules/deep-extend": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", @@ -2175,6 +2278,14 @@ "node": ">=4.0.0" } }, + "node_modules/deepmerge": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", + "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/dequal": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", @@ -3290,6 +3401,12 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/locate-character": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz", + "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==", + "peer": true + }, "node_modules/locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", @@ -3344,6 +3461,14 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -3749,6 +3874,12 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/mdn-data": { + "version": "2.0.30", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "peer": true + }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -4596,6 +4727,15 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, "node_modules/node-abi": { "version": "3.51.0", "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.51.0.tgz", @@ -4861,6 +5001,15 @@ "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==" }, + "node_modules/pascal-case": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", + "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/path-browserify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", @@ -6392,6 +6541,54 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/svelte": { + "version": "4.2.7", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.7.tgz", + "integrity": "sha512-UExR1KS7raTdycsUrKLtStayu4hpdV3VZQgM0akX8XbXgLBlosdE/Sf3crOgyh9xIjqSYB3UEBuUlIQKRQX2hg==", + "peer": true, + "dependencies": { + "@ampproject/remapping": "^2.2.1", + "@jridgewell/sourcemap-codec": "^1.4.15", + "@jridgewell/trace-mapping": "^0.3.18", + "acorn": "^8.9.0", + "aria-query": "^5.3.0", + "axobject-query": "^3.2.1", + "code-red": "^1.0.3", + "css-tree": "^2.3.1", + "estree-walker": "^3.0.3", + "is-reference": "^3.0.1", + "locate-character": "^3.0.0", + "magic-string": "^0.30.4", + "periscopic": "^3.1.0" + }, + "engines": { + "node": ">=16" + } + }, + "node_modules/svelte-hmr": { + "version": "0.15.3", + "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz", + "integrity": "sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==", + "engines": { + "node": "^12.20 || ^14.13.1 || >= 16" + }, + "peerDependencies": { + "svelte": "^3.19.0 || ^4.0.0" + } + }, + "node_modules/svelte2tsx": { + "version": "0.6.27", + "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.6.27.tgz", + "integrity": "sha512-E1uPW1o6VsbRz+nUk3fznZ2lSmCITAJoNu8AYefWSvIwE2pSB01i5sId4RMbWNzfcwCQl1DcgGShCPcldl4rvg==", + "dependencies": { + "dedent-js": "^1.0.1", + "pascal-case": "^3.1.1" + }, + "peerDependencies": { + "svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0", + "typescript": "^4.9.4 || ^5.0.0" + } + }, "node_modules/tar-fs": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.4.tgz", @@ -6468,6 +6665,11 @@ } } }, + "node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, "node_modules/tunnel-agent": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz", diff --git a/docs/package.json b/docs/package.json index fcfab7f1..1f45bfed 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,8 +12,9 @@ "dependencies": { "@astrojs/check": "^0.3.1", "@astrojs/starlight": "^0.13.0", + "@astrojs/svelte": "^4.0.4", "astro": "^3.2.3", "sharp": "^0.32.5", "typescript": "^5.3.2" } -} \ No newline at end of file +} diff --git a/docs/src/components/easings.svelte b/docs/src/components/easings.svelte new file mode 100644 index 00000000..79de0ff7 --- /dev/null +++ b/docs/src/components/easings.svelte @@ -0,0 +1,85 @@ + + +
+
+ + + + +
+
+
+
+
+ + diff --git a/docs/src/content/docs/props/easings.mdx b/docs/src/content/docs/props/easings.mdx index 68c7d464..381adc8c 100644 --- a/docs/src/content/docs/props/easings.mdx +++ b/docs/src/content/docs/props/easings.mdx @@ -4,6 +4,17 @@ description: A reference page in my new Starlight docs site. --- import { Tabs, TabItem } from '@astrojs/starlight/components' +import Easings from '@components/easings.svelte' + +### Intro + +Custom animation easing is a great way to customize the motion ethos in a design system. +These easing props are one of the best augmentation packages for **existing** design systems, +bringing motion tokens to systems that haven't gotten there yet. + +:::tip +Each easing set offers **5 strengths**. +::: ### Usage @@ -51,14 +62,12 @@ Get the props into your project via [NPM](https://www.npmjs.com/package/open-pro ## The Props -:::tip -Each easing offers **5 strengths**. -::: - The lower the number, the weaker the effect. ### `ease` + + ```css @@ -87,6 +96,8 @@ The lower the number, the weaker the effect. ### `ease-in` + + ```css @@ -115,6 +126,8 @@ The lower the number, the weaker the effect. ### `ease-out` + + ```css @@ -143,6 +156,8 @@ The lower the number, the weaker the effect. ### `ease-in-out` + + ```css @@ -171,6 +186,8 @@ The lower the number, the weaker the effect. ### `ease-elastic-in` + + ```css @@ -199,6 +216,8 @@ The lower the number, the weaker the effect. ### `ease-elastic-out` + + ```css @@ -227,6 +246,8 @@ The lower the number, the weaker the effect. ### `ease-elastic-in-out` + + ```css @@ -255,6 +276,8 @@ The lower the number, the weaker the effect. ### `ease-step` + + ```css @@ -283,6 +306,8 @@ The lower the number, the weaker the effect. ### `ease-spring` + + ```css @@ -334,6 +359,8 @@ The lower the number, the weaker the effect. ### `ease-bounce` + + ```css diff --git a/docs/src/styles/demo-animations.css b/docs/src/styles/demo-animations.css new file mode 100644 index 00000000..8f798d04 --- /dev/null +++ b/docs/src/styles/demo-animations.css @@ -0,0 +1,23 @@ +@keyframes change-side { + 90%, + 100% { + translate: 0 0; + } + 40%, + 50% { + translate: 300px 0; + rotate: 0.5turn; + } +} + +@keyframes change-scale { + 90%, + 100% { + scale: 1; + } + 40%, + 50% { + scale: 0.01; + rotate: 0.5turn; + } +} diff --git a/docs/tsconfig.json b/docs/tsconfig.json index 1a46b476..5d695733 100644 --- a/docs/tsconfig.json +++ b/docs/tsconfig.json @@ -1,3 +1,10 @@ { - "extends": "astro/tsconfigs/base" -} \ No newline at end of file + "extends": "astro/tsconfigs/base", + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@components/*": ["src/components/*"], + "@docs/*": ["src/content/docs/*"] + } + } +}