From af966a73c51320befdaad505f6bcbd7005d353be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20Mesnil?= <50322149+theo-mesnil@users.noreply.github.com> Date: Mon, 25 Nov 2024 16:37:49 +0100 Subject: [PATCH] feat: add new components WelcomeLoader (#2624) --- packages/WelcomeLoader/.npmignore | 3 + packages/WelcomeLoader/CHANGELOG.md | 3 + packages/WelcomeLoader/README.md | 17 ++++++ .../WelcomeLoader/docs/examples/overview.tsx | 8 +++ .../WelcomeLoader/docs/examples/resize.tsx | 8 +++ packages/WelcomeLoader/docs/index.mdx | 12 ++++ packages/WelcomeLoader/docs/properties.json | 5 ++ packages/WelcomeLoader/package.json | 61 +++++++++++++++++++ packages/WelcomeLoader/src/index.tsx | 23 +++++++ packages/WelcomeLoader/src/loader.json | 1 + packages/WelcomeLoader/tsconfig.json | 4 ++ website/build-app/examples.js | 4 +- yarn.lock | 43 ++++++++++++- 13 files changed, 188 insertions(+), 4 deletions(-) create mode 100644 packages/WelcomeLoader/.npmignore create mode 100644 packages/WelcomeLoader/CHANGELOG.md create mode 100644 packages/WelcomeLoader/README.md create mode 100644 packages/WelcomeLoader/docs/examples/overview.tsx create mode 100644 packages/WelcomeLoader/docs/examples/resize.tsx create mode 100644 packages/WelcomeLoader/docs/index.mdx create mode 100644 packages/WelcomeLoader/docs/properties.json create mode 100644 packages/WelcomeLoader/package.json create mode 100644 packages/WelcomeLoader/src/index.tsx create mode 100644 packages/WelcomeLoader/src/loader.json create mode 100644 packages/WelcomeLoader/tsconfig.json diff --git a/packages/WelcomeLoader/.npmignore b/packages/WelcomeLoader/.npmignore new file mode 100644 index 0000000000..67fc13b5f6 --- /dev/null +++ b/packages/WelcomeLoader/.npmignore @@ -0,0 +1,3 @@ +/* +!/dist/*.js +!/dist/*.d.ts diff --git a/packages/WelcomeLoader/CHANGELOG.md b/packages/WelcomeLoader/CHANGELOG.md new file mode 100644 index 0000000000..d601bff1bd --- /dev/null +++ b/packages/WelcomeLoader/CHANGELOG.md @@ -0,0 +1,3 @@ +# Change Log + +All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. diff --git a/packages/WelcomeLoader/README.md b/packages/WelcomeLoader/README.md new file mode 100644 index 0000000000..03366d336e --- /dev/null +++ b/packages/WelcomeLoader/README.md @@ -0,0 +1,17 @@ +# @welcome-ui/welcome-loader + +The [WelcomeLoader](https://welcome-ui.com/components/welcome-loader) component from [@welcome-ui](https://welcome-ui.com). + +![npm bundle size](https://img.shields.io/bundlephobia/minzip/@welcome-ui/welcome-loader) [![License](https://img.shields.io/npm/l/welcome-ui.svg)](https://github.com/WTTJ/welcome-ui/tree/main/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-mediumspringgreen.svg)](ttps://github.com/WTTJ/welcome-ui/tree/main/CONTRIBUTING.mdx) + +## Installation + + yarn add @welcome-ui/welcome-loader + +## Import + + import { WelcomeLoader } from '@welcome-ui/welcome-loader' + +## Documentation + +See the [documentation](https://welcome-ui.com/components/welcome-loader) or [package source](https://github.com/WTTJ/welcome-ui/tree/main/packages/WelcomeLoader) for more details. diff --git a/packages/WelcomeLoader/docs/examples/overview.tsx b/packages/WelcomeLoader/docs/examples/overview.tsx new file mode 100644 index 0000000000..3e8ca674f5 --- /dev/null +++ b/packages/WelcomeLoader/docs/examples/overview.tsx @@ -0,0 +1,8 @@ +import * as React from 'react' +import { WelcomeLoader } from '@welcome-ui/welcome-loader' + +const Example = () => { + return +} + +export default Example diff --git a/packages/WelcomeLoader/docs/examples/resize.tsx b/packages/WelcomeLoader/docs/examples/resize.tsx new file mode 100644 index 0000000000..3b27659910 --- /dev/null +++ b/packages/WelcomeLoader/docs/examples/resize.tsx @@ -0,0 +1,8 @@ +import * as React from 'react' +import { WelcomeLoader } from '@welcome-ui/welcome-loader' + +const Example = () => { + return +} + +export default Example diff --git a/packages/WelcomeLoader/docs/index.mdx b/packages/WelcomeLoader/docs/index.mdx new file mode 100644 index 0000000000..11fec54028 --- /dev/null +++ b/packages/WelcomeLoader/docs/index.mdx @@ -0,0 +1,12 @@ +--- +category: icons-&-logo +description: The WelcomeLoader component is a visual indicator used to signal that a page is loading or content is being retrieved. Designed for Welcome to the Jungle, it ensures users stay informed during transitions, maintaining engagement and reducing perceived wait times. The loader is styled to align with the brand’s aesthetic, offering a seamless and polished user experience. +packageName: welcome-loader +title: WelcomeLoader +--- + +### Resize + +You can resize or add some properties like margin etc. + +
diff --git a/packages/WelcomeLoader/docs/properties.json b/packages/WelcomeLoader/docs/properties.json new file mode 100644 index 0000000000..e701a26f0f --- /dev/null +++ b/packages/WelcomeLoader/docs/properties.json @@ -0,0 +1,5 @@ +{ + "WelcomeLoader": { + "props": {} + } +} \ No newline at end of file diff --git a/packages/WelcomeLoader/package.json b/packages/WelcomeLoader/package.json new file mode 100644 index 0000000000..21cb21cefc --- /dev/null +++ b/packages/WelcomeLoader/package.json @@ -0,0 +1,61 @@ +{ + "name": "@welcome-ui/welcome-loader", + "version": "6.1.1", + "description": "Customizable design system with react • styled-components • styled-system and ariakit.", + "main": "dist/index.js", + "module": "dist/index.mjs", + "types": "dist/types/index.d.ts", + "exports": { + ".": { + "types": "./dist/types/index.d.ts", + "import": "./dist/index.mjs", + "require": "./dist/index.js" + }, + "./package.json": "./package.json", + "./dist/index.doc.json": "./dist/index.doc.json" + }, + "scripts": { + "build": "node ../../scripts/build.js", + "test": "jest", + "types": "rimraf dist/types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types", + "doc": "node -r esm ../../scripts/doc-props.js --name WelcomeLoader" + }, + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/WTTJ/welcome-ui.git" + }, + "keywords": [ + "design-system", + "react", + "ariakit", + "styled-components", + "styled-system", + "ui-library", + "ui", + "ux", + "jungle", + "welcome", + "WTTJ" + ], + "author": "WTTJ ", + "license": "MIT", + "bugs": { + "url": "https://github.com/WTTJ/welcome-ui/issues" + }, + "dependencies": { + "lottie-light-react": "^2.4.0", + "@welcome-ui/box": "^6.1.1", + "@welcome-ui/system": "^6.1.1" + }, + "peerDependencies": { + "@xstyled/styled-components": "^3.7.3", + "react": "^18.0.0", + "styled-components": "^5.3.9" + }, + "gitHead": "974e7bfd71f8cfe846cbffd678c3860a8952f9e9", + "sideEffects": false, + "homepage": "https://welcome-ui.com/components/welcome-loader" +} diff --git a/packages/WelcomeLoader/src/index.tsx b/packages/WelcomeLoader/src/index.tsx new file mode 100644 index 0000000000..635c7844b6 --- /dev/null +++ b/packages/WelcomeLoader/src/index.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import { forwardRef } from '@welcome-ui/system' +import { Box, BoxProps } from '@welcome-ui/box' +import { useLottie } from 'lottie-light-react' + +import loader from './loader.json' + +export const WelcomeLoader = forwardRef<'div', BoxProps>(({ w = 150, ...props }, ref) => { + const options = { + animationData: loader, + loop: true, + } + + const { View } = useLottie(options) + + return ( + + {View} + + ) +}) + +WelcomeLoader.displayName = 'WelcomeLoader' diff --git a/packages/WelcomeLoader/src/loader.json b/packages/WelcomeLoader/src/loader.json new file mode 100644 index 0000000000..67e775a8b4 --- /dev/null +++ b/packages/WelcomeLoader/src/loader.json @@ -0,0 +1 @@ +{"v":"5.7.6","fr":30,"ip":0,"op":80,"w":300,"h":300,"nm":"Loader_Wttj","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":3,"nm":"LOGO SYMBOL NULL","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[426,218,0],"ix":2,"l":2},"a":{"a":0,"k":[50,50,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0,0,0],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,5.083]},"t":0,"s":[150,150,100]},{"i":{"x":[0.836,0.836,0.836],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":26,"s":[96,96,100]},{"t":37,"s":[100,100,100]}],"ix":6,"l":2}},"ao":0,"ip":0,"op":74,"st":-28,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"CIRCLE","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50.008,50,0],"ix":2,"l":2},"a":{"a":0,"k":[-297.641,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0},"t":15,"s":[{"i":[[51.047,0],[0,-51.047],[-51.047,0],[0,51.048]],"o":[[-51.047,0],[0,51.048],[51.047,0],[0,-51.047]],"v":[[-297.641,-92.578],[-390.218,0],[-297.641,92.578],[-205.063,0]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":1,"y":0},"t":60,"s":[{"i":[[51.047,0],[0,-51.047],[-51.047,0],[0,51.048]],"o":[[-51.047,0],[0,51.048],[51.047,0],[0,-51.047]],"v":[[-297.641,-92.578],[-390.218,0],[-297.641,92.578],[-205.063,0]],"c":true}]},{"t":73,"s":[{"i":[[0.689,0],[0,-0.689],[-0.689,0],[0,0.689]],"o":[[-0.689,0],[0,0.689],[0.689,0],[0,-0.689]],"v":[[-297.641,-1.25],[-298.891,0],[-297.641,1.25],[-296.391,0]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":1,"k":[{"i":{"x":0.01,"y":1},"o":{"x":0.167,"y":0.167},"t":1,"s":[{"i":[[51.524,0],[0,51.524],[-51.524,0],[0,-51.524]],"o":[[-51.524,0],[0,-51.524],[51.524,0],[0,51.524]],"v":[[-297.641,93.442],[-391.083,0],[-297.641,-93.442],[-204.199,0]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0},"t":15,"s":[{"i":[[55.817,0],[0,55.817],[-55.817,0],[0,-55.817]],"o":[[-55.817,0],[0,-55.817],[55.817,0],[0,55.817]],"v":[[-297.641,101.228],[-398.869,0],[-297.641,-101.228],[-196.413,0]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":1,"y":0},"t":60,"s":[{"i":[[55.817,0],[0,55.817],[-55.817,0],[0,-55.817]],"o":[[-55.817,0],[0,-55.817],[55.817,0],[0,55.817]],"v":[[-297.641,101.228],[-398.869,0],[-297.641,-101.228],[-196.413,0]],"c":true}]},{"t":73,"s":[{"i":[[1.93,0],[0,1.93],[-1.93,0],[0,-1.93]],"o":[[-1.93,0],[0,-1.93],[1.93,0],[0,1.93]],"v":[[-297.641,3.5],[-301.141,0],[-297.641,-3.5],[-294.141,0]],"c":true}]}],"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.803921568627,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":[0,0],"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":"Transformer "}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":1,"op":74,"st":-31,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"MASK","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":[-297.641,0,0],"ix":2,"l":2},"a":{"a":0,"k":[-297.641,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.01,"y":1},"o":{"x":0.167,"y":0.167},"t":1,"s":[{"i":[[51.524,0],[0,51.524],[-51.524,0],[0,-51.524]],"o":[[-51.524,0],[0,-51.524],[51.524,0],[0,51.524]],"v":[[-297.641,93.442],[-391.083,0],[-297.641,-93.442],[-204.199,0]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0},"t":15,"s":[{"i":[[55.817,0],[0,55.817],[-55.817,0],[0,-55.817]],"o":[[-55.817,0],[0,-55.817],[55.817,0],[0,55.817]],"v":[[-297.641,101.228],[-398.869,0],[-297.641,-101.228],[-196.413,0]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":1,"y":0},"t":60,"s":[{"i":[[55.817,0],[0,55.817],[-55.817,0],[0,-55.817]],"o":[[-55.817,0],[0,-55.817],[55.817,0],[0,55.817]],"v":[[-297.641,101.228],[-398.869,0],[-297.641,-101.228],[-196.413,0]],"c":true}]},{"t":73,"s":[{"i":[[1.93,0],[0,1.93],[-1.93,0],[0,-1.93]],"o":[[-1.93,0],[0,-1.93],[1.93,0],[0,1.93]],"v":[[-297.641,3.5],[-301.141,0],[-297.641,-3.5],[-294.141,0]],"c":true}]}],"ix":2},"nm":"Path 2","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":[0,0],"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":"Transformer "}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":74,"st":-28,"bm":0},{"ddd":0,"ind":4,"ty":0,"nm":"shape 06","parent":1,"tt":1,"refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[960,540,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":1920,"h":1080,"ip":1,"op":74,"st":1,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"MASK 7","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":[-297.641,0,0],"ix":2,"l":2},"a":{"a":0,"k":[-297.641,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0},"t":15,"s":[{"i":[[51.047,0],[0,-51.047],[-51.047,0],[0,51.048]],"o":[[-51.047,0],[0,51.048],[51.047,0],[0,-51.047]],"v":[[-297.641,-92.578],[-390.218,0],[-297.641,92.578],[-205.063,0]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":1,"y":0},"t":60,"s":[{"i":[[51.047,0],[0,-51.047],[-51.047,0],[0,51.048]],"o":[[-51.047,0],[0,51.048],[51.047,0],[0,-51.047]],"v":[[-297.641,-92.578],[-390.218,0],[-297.641,92.578],[-205.063,0]],"c":true}]},{"t":73,"s":[{"i":[[0.689,0],[0,-0.689],[-0.689,0],[0,0.689]],"o":[[-0.689,0],[0,0.689],[0.689,0],[0,-0.689]],"v":[[-297.641,-1.25],[-298.891,0],[-297.641,1.25],[-296.391,0]],"c":true}]}],"ix":2},"nm":"Path 2","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":[0,0],"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":"Transformer "}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":74,"st":-28,"bm":0},{"ddd":0,"ind":6,"ty":0,"nm":"shape 06","parent":1,"tt":1,"refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":180,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2,"l":2},"a":{"a":0,"k":[960,540,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":1920,"h":1080,"ip":1,"op":74,"st":1,"bm":0}]},{"id":"comp_1","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"shape 01","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.39,"y":1},"o":{"x":0.167,"y":0.167},"t":2,"s":[959.994,382.752,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.39,"y":1},"o":{"x":0.61,"y":0},"t":10,"s":[959.994,465.647,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.28,"y":1},"o":{"x":0.61,"y":0},"t":30,"s":[959.994,452.915,0],"to":[0,0,0],"ti":[0,0,0]},{"t":49,"s":[959.994,478.752,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.39,"y":1},"o":{"x":0.167,"y":0.167},"t":7,"s":[{"i":[[12.082,-0.041],[0,0],[2.831,24.134],[3.126,-1.163],[-0.475,-4.54],[-16.959,-0.02],[0,0],[-5.68,23.24],[0,0],[3.029,1.09],[0.376,-5.674]],"o":[[0,0],[-12.082,-0.041],[-0.505,-6.674],[-2.703,1.006],[5.68,23.24],[0,0],[16.959,-0.02],[0,0],[0.845,-8.54],[-2.829,-1.018],[-2.831,24.134]],"v":[[0.005,22.774],[-0.005,22.774],[-22.684,-28.515],[-32.136,-40.778],[-40.215,-22.149],[-0.005,28.515],[0.005,28.515],[40.215,-22.149],[40.215,-22.149],[31.512,-41.12],[22.684,-28.515]],"c":true}]},{"i":{"x":0.39,"y":1},"o":{"x":0.61,"y":0},"t":14,"s":[{"i":[[34.816,-0.027],[0,0],[1.883,16.056],[2.08,-0.774],[-0.316,-3.021],[-37.722,-0.014],[0,0],[-3.779,15.461],[0,0],[2.015,0.725],[0.25,-3.775]],"o":[[0,0],[-35.314,-0.027],[-0.336,-4.44],[-1.798,0.669],[3.779,15.461],[0,0],[37.893,-0.014],[0,0],[0.562,-5.682],[-1.882,-0.677],[-1.883,16.056]],"v":[[0.005,21.519],[-0.005,21.519],[-46.677,-12.817],[-53.652,-21.733],[-61.697,-5.196],[-0.005,28.515],[0.005,28.515],[62.49,-5.196],[62.49,-5.196],[53.753,-22.075],[47.47,-12.817]],"c":true}]},{"i":{"x":0.28,"y":1},"o":{"x":0.61,"y":0},"t":28,"s":[{"i":[[12.082,-0.041],[0,0],[2.831,24.134],[3.126,-1.163],[2.577,-1.245],[-16.959,-0.02],[0,0],[-5.68,23.24],[0,0],[3.029,1.09],[2.95,0.743]],"o":[[0,0],[-12.082,-0.041],[-3.276,0.825],[-2.703,1.006],[5.68,23.24],[0,0],[16.959,-0.02],[0,0],[-2.873,-1.388],[-2.829,-1.018],[-2.831,24.134]],"v":[[0.004,20.274],[-0.006,20.274],[-15.434,-38.515],[-24.987,-35.778],[-32.965,-27.149],[-0.005,28.515],[0.005,28.515],[33.215,-27.149],[33.215,-27.149],[24.411,-36.12],[15.684,-38.515]],"c":true}]},{"t":51,"s":[{"i":[[12.082,-0.041],[0,0],[2.831,24.134],[3.126,-1.163],[-0.475,-4.54],[-16.959,-0.02],[0,0],[-5.68,23.24],[0,0],[3.029,1.09],[0.376,-5.674]],"o":[[0,0],[-12.082,-0.041],[-0.505,-6.674],[-2.703,1.006],[5.68,23.24],[0,0],[16.959,-0.02],[0,0],[0.845,-8.54],[-2.829,-1.018],[-2.831,24.134]],"v":[[0.005,22.774],[-0.005,22.774],[-22.684,-28.515],[-32.136,-40.778],[-40.215,-22.149],[-0.005,28.515],[0.005,28.515],[40.215,-22.149],[40.215,-22.149],[31.512,-41.12],[22.684,-28.515]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.803921568627,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":[0,0],"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":"Transformer "}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":512,"st":-43,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"shape 02","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.39,"y":1},"o":{"x":0.167,"y":0.167},"t":1,"s":[960.008,401.942,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.39,"y":1},"o":{"x":0.61,"y":0},"t":10,"s":[960.008,489.836,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.28,"y":1},"o":{"x":0.61,"y":0},"t":29,"s":[960.008,468.105,0],"to":[0,0,0],"ti":[0,0,0]},{"t":48,"s":[960.008,492.942,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.39,"y":1},"o":{"x":0.167,"y":0.167},"t":6,"s":[{"i":[[-28.707,0],[-12.409,18.456],[0,0],[2.182,1.952],[5.667,-4.564],[0,0],[24.737,-0.682],[8.917,21.011],[0,0],[2.124,-1.811],[-4.021,-8.297],[0,0]],"o":[[28.707,0],[0,0],[3.11,-7.331],[-2.634,-2.357],[0,0],[-8.917,21.011],[-24.747,-0.682],[0,0],[-7.549,-6.562],[-2.784,2.373],[0,0],[12.409,18.456]],"v":[[-0.008,28.567],[67.92,-15.786],[67.937,-15.798],[67.214,-34.703],[53.38,-28.565],[53.364,-28.551],[-0.008,22.856],[-53.38,-28.561],[-53.404,-28.567],[-69.484,-33.674],[-67.932,-15.832],[-67.937,-15.796]],"c":true}]},{"i":{"x":0.39,"y":1},"o":{"x":0.61,"y":0},"t":13,"s":[{"i":[[-51.566,0],[-8.255,12.278],[0,0],[1.452,1.299],[3.77,-3.036],[0,0],[46.08,-0.454],[5.933,13.978],[0,0],[1.413,-1.205],[-2.675,-5.52],[0,0]],"o":[[53.407,0],[0,0],[2.069,-4.877],[-1.752,-1.568],[0,0],[-5.933,13.978],[-47.09,-0.454],[0,0],[-5.022,-4.365],[-1.852,1.579],[0,0],[8.255,12.278]],"v":[[-0.008,28.567],[83.584,-0.977],[83.601,-0.989],[81.037,-16.129],[69.044,-13.004],[69.028,-12.99],[-0.009,21.567],[-69.119,-13],[-69.143,-13.005],[-82.042,-15.937],[-83.671,-1.023],[-83.676,-0.988]],"c":true}]},{"i":{"x":0.28,"y":1},"o":{"x":0.61,"y":0},"t":27,"s":[{"i":[[-28.707,0],[-12.409,18.456],[0,0],[2.182,1.952],[2.893,2.047],[0,0],[24.737,-0.682],[8.917,21.011],[0,0],[2.124,-1.811],[2.486,-2.683],[0,0]],"o":[[28.707,0],[0,0],[-1.989,-2.149],[-2.634,-2.357],[0,0],[-8.917,21.011],[-24.747,-0.682],[0,0],[-2.285,1.616],[-2.784,2.373],[0,0],[12.409,18.456]],"v":[[-0.008,28.567],[60.42,-21.286],[60.437,-21.298],[54.214,-31.203],[45.88,-34.065],[45.863,-34.051],[-0.009,19.356],[-45.63,-34.061],[-45.654,-34.067],[-52.234,-32.674],[-60.182,-21.332],[-60.187,-21.296]],"c":true}]},{"t":50,"s":[{"i":[[-28.707,0],[-12.409,18.456],[0,0],[2.182,1.952],[5.667,-4.564],[0,0],[24.737,-0.682],[8.917,21.011],[0,0],[2.124,-1.811],[-4.021,-8.297],[0,0]],"o":[[28.707,0],[0,0],[3.11,-7.331],[-2.634,-2.357],[0,0],[-8.917,21.011],[-24.747,-0.682],[0,0],[-7.549,-6.562],[-2.784,2.373],[0,0],[12.409,18.456]],"v":[[-0.008,28.567],[67.92,-15.786],[67.937,-15.798],[67.214,-34.703],[53.38,-28.565],[53.364,-28.551],[-0.008,22.856],[-53.38,-28.561],[-53.404,-28.567],[-69.484,-33.674],[-67.932,-15.832],[-67.937,-15.796]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.803921568627,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":[0,0],"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":"Transformer "}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":512,"st":-43,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"shape 03","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.39,"y":1},"o":{"x":0.167,"y":0.167},"t":0,"s":[959.997,421.305,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.39,"y":1},"o":{"x":0.61,"y":0},"t":10,"s":[959.997,517.199,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.28,"y":1},"o":{"x":0.61,"y":0},"t":28,"s":[959.997,494.493,0],"to":[0,0,0],"ti":[0,0,0]},{"t":46,"s":[959.997,512.305,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.39,"y":1},"o":{"x":0.167,"y":0.167},"t":5,"s":[{"i":[[-33.461,0],[-20.929,17.438],[0,0],[1.417,2.791],[1.967,2.966],[0,0],[36.535,0],[13.111,16.898],[0,0],[1.566,-3.047],[1.189,-3.088],[0,0]],"o":[[33.44,0],[0,0],[-1.134,-2.946],[-1.62,-3.192],[0,0],[-13.111,16.888],[-36.545,0],[0,0],[-1.883,2.84],[-1.5,2.918],[0,0],[20.929,17.448]],"v":[[0.002,23.404],[86.407,-5.536],[86.415,-5.539],[84.835,-16.399],[77.198,-23.392],[77.174,-23.392],[0.002,17.775],[-77.18,-23.402],[-77.196,-23.404],[-84.627,-16.069],[-86.415,-5.556],[-86.413,-5.547]],"c":true}]},{"i":{"x":0.39,"y":1},"o":{"x":0.61,"y":0},"t":12,"s":[{"i":[[-54.226,0],[-13.924,11.601],[0,0],[1.417,2.791],[1.967,2.966],[0,0],[52.925,0],[8.723,11.242],[0,0],[1.566,-3.047],[1.189,-3.088],[0,0]],"o":[[52.205,0],[0,0],[-1.134,-2.946],[-1.62,-3.192],[0,0],[-8.723,11.235],[-53.935,0],[0,0],[-1.883,2.84],[-1.5,2.918],[0,0],[13.924,11.608]],"v":[[0.002,23.404],[95.588,4.37],[95.596,4.367],[94.016,-4.066],[87.216,-11.059],[87.192,-11.059],[0.002,16.219],[-88.083,-11.069],[-88.099,-11.071],[-94.692,-3.736],[-96.481,4.351],[-96.479,4.36]],"c":true}]},{"i":{"x":0.28,"y":1},"o":{"x":0.61,"y":0},"t":26,"s":[{"i":[[-33.46,0],[-20.929,17.438],[0,0],[1.417,2.791],[1.967,2.966],[0,0],[36.535,0],[13.111,16.898],[0,0],[1.566,-3.047],[1.189,-3.088],[0,0]],"o":[[33.44,0],[0,0],[-1.134,-2.946],[-1.62,-3.192],[0,0],[-13.111,16.888],[-36.545,0],[0,0],[-1.883,2.84],[-1.5,2.918],[0,0],[20.929,17.448]],"v":[[0.002,23.404],[78.407,-18.286],[78.415,-18.289],[76.835,-29.149],[69.198,-36.142],[69.174,-36.142],[0.001,13.275],[-68.68,-36.152],[-68.696,-36.154],[-76.127,-28.819],[-77.915,-18.306],[-77.913,-18.297]],"c":true}]},{"t":48,"s":[{"i":[[-33.461,0],[-20.929,17.438],[0,0],[1.417,2.791],[1.967,2.966],[0,0],[36.535,0],[13.111,16.898],[0,0],[1.566,-3.047],[1.189,-3.088],[0,0]],"o":[[33.44,0],[0,0],[-1.134,-2.946],[-1.62,-3.192],[0,0],[-13.111,16.888],[-36.545,0],[0,0],[-1.883,2.84],[-1.5,2.918],[0,0],[20.929,17.448]],"v":[[0.002,23.404],[86.407,-5.536],[86.415,-5.539],[84.835,-16.399],[77.198,-23.392],[77.174,-23.392],[0.002,17.775],[-77.18,-23.402],[-77.196,-23.404],[-84.627,-16.069],[-86.415,-5.556],[-86.413,-5.547]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.803921568627,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":[0,0],"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":"Transformer "}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":512,"st":-43,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"LOGO ANIMATION_FINAL","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[145,150,0],"ix":2,"l":2},"a":{"a":0,"k":[420.5,219,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":841,"h":438,"ip":0,"op":80,"st":0,"bm":0}],"markers":[]} \ No newline at end of file diff --git a/packages/WelcomeLoader/tsconfig.json b/packages/WelcomeLoader/tsconfig.json new file mode 100644 index 0000000000..f8b3089664 --- /dev/null +++ b/packages/WelcomeLoader/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../tsconfig.json", + "include": ["src", "../../types"] +} diff --git a/website/build-app/examples.js b/website/build-app/examples.js index 5caa90ae31..8395d9c834 100644 --- a/website/build-app/examples.js +++ b/website/build-app/examples.js @@ -246,5 +246,7 @@ export default { "/Tooltip/docs/examples/withArrow.tsx": dynamic(() => import("../../packages/Tooltip/docs/examples/withArrow.tsx").then(mod => mod), { ssr: false }), "/VariantIcon/docs/examples/icon.tsx": dynamic(() => import("../../packages/VariantIcon/docs/examples/icon.tsx").then(mod => mod), { ssr: false }), "/VariantIcon/docs/examples/overview.tsx": dynamic(() => import("../../packages/VariantIcon/docs/examples/overview.tsx").then(mod => mod), { ssr: false }), - "/VariantIcon/docs/examples/sizes.tsx": dynamic(() => import("../../packages/VariantIcon/docs/examples/sizes.tsx").then(mod => mod), { ssr: false }) + "/VariantIcon/docs/examples/sizes.tsx": dynamic(() => import("../../packages/VariantIcon/docs/examples/sizes.tsx").then(mod => mod), { ssr: false }), + "/WelcomeLoader/docs/examples/overview.tsx": dynamic(() => import("../../packages/WelcomeLoader/docs/examples/overview.tsx").then(mod => mod), { ssr: false }), + "/WelcomeLoader/docs/examples/resize.tsx": dynamic(() => import("../../packages/WelcomeLoader/docs/examples/resize.tsx").then(mod => mod), { ssr: false }) }; diff --git a/yarn.lock b/yarn.lock index b3087cccfd..e21316a099 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9646,6 +9646,18 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: dependencies: js-tokens "^3.0.0 || ^4.0.0" +lottie-light-react@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/lottie-light-react/-/lottie-light-react-2.4.0.tgz#cb18e1a1cb36c87778027feac9746b0cad7c6295" + integrity sha512-TXJOnyqEc6ev9/um8Xkxve5EVcgCX2pi1olWc8jj+81qaPyFBA+VxHIc2Ojl42IqeAiKhGHz098ztQOIImJcyg== + dependencies: + lottie-web "^5.10.2" + +lottie-web@^5.10.2: + version "5.12.2" + resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5" + integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg== + loud-rejection@^1.0.0: version "1.6.0" resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f" @@ -12798,7 +12810,16 @@ string-natural-compare@^3.0.1: resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4" integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw== -"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -12943,7 +12964,14 @@ stringify-package@^1.0.1: resolved "https://registry.yarnpkg.com/stringify-package/-/stringify-package-1.0.1.tgz#e5aa3643e7f74d0f28628b72f3dad5cecfc3ba85" integrity sha512-sa4DUQsYciMP1xhKWGuFM04fB0LG/9DlluZoSVywUMRNvzid6XucHK0/90xGxRoHrAaROrcHK1aPKaijCtSrhg== -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -14133,7 +14161,16 @@ wordwrap@^1.0.0: resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + +wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==