diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index 7c0eb69..f8e75ac 100644 --- a/.github/workflows/npm-publish.yml +++ b/.github/workflows/npm-publish.yml @@ -14,7 +14,7 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v1 with: - node-version: 12 + node-version: 18 - run: npm ci - run: npm run build publish-gpr: @@ -24,7 +24,7 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v1 with: - node-version: 12 + node-version: 18 registry-url: https://npm.pkg.github.com/ - run: npm ci - run: npm run build diff --git a/README.md b/README.md index 100dfbd..6eec7f8 100644 --- a/README.md +++ b/README.md @@ -7,8 +7,8 @@

- NodeJS - NPM + NodeJS + NPM Made With Gatsby code style: prettier
diff --git a/doc/package.json b/doc/package.json index 23f00d6..6971616 100644 --- a/doc/package.json +++ b/doc/package.json @@ -10,19 +10,19 @@ "serve": "gatsby serve" }, "dependencies": { - "@mdx-js/react": "^1.6.22", + "@mdx-js/react": "^2.0.0", "@xstyled/styled-components": "^2.2.2", - "gatsby": "^2.15.18", + "gatsby": "^4.24.0", "parse-numeric-range": "^1.2.0", "prism-react-renderer": "^1.1.1", - "react": "^16.10.1", + "react": "^18.0.0", "react-awesome-loaders": "^0.1.35", - "react-dom": "^16.10.1", + "react-dom": "^18.0.0", "react-live": "^2.2.3", "react-player": "^2.8.2", "react-spring": "^9.0.0-rc.2", "react-use-gesture": "^9.0.1", - "smooth-doc": "^5.0.4", + "smooth-doc": "^10.1.0", "styled-components": "^5.2.1" }, "keywords": [ diff --git a/doc/pages/docs/about-creator.mdx b/doc/pages/docs/about-creator.mdx index 1ed848a..c15ea59 100644 --- a/doc/pages/docs/about-creator.mdx +++ b/doc/pages/docs/about-creator.mdx @@ -2,6 +2,7 @@ title: About Creator section: More order: 1 +slug: /docs/about-creator --- import AwesomeLoaders from "./code/rug"; diff --git a/doc/pages/docs/appreciate.mdx b/doc/pages/docs/appreciate.mdx index dcc7f1b..763ee1a 100644 --- a/doc/pages/docs/appreciate.mdx +++ b/doc/pages/docs/appreciate.mdx @@ -2,6 +2,7 @@ title: Appreciate section: More order: 2 +slug: /docs/appreciate --- import AwesomeLoaders from "./code/rug"; diff --git a/doc/pages/docs/code/examples.js b/doc/pages/docs/code/examples.js index d761099..cc1a6d2 100644 --- a/doc/pages/docs/code/examples.js +++ b/doc/pages/docs/code/examples.js @@ -1,7 +1,7 @@ import React from "react"; import { useSpring, animated } from "react-spring"; import { useDrag } from "react-use-gesture"; -import styles from "./styles.module.css"; +import * as styles from "./styles.module.css"; export function EasterDiv({ children }) { const [{ x, y, live }, set] = useSpring(() => ({ x: 0, y: 0, live: false })); @@ -13,7 +13,7 @@ export function EasterDiv({ children }) { return ( (a ? 10000 : 0)) }} > diff --git a/doc/pages/docs/code/loader.js b/doc/pages/docs/code/loader.js index 71192a9..17ffa58 100644 --- a/doc/pages/docs/code/loader.js +++ b/doc/pages/docs/code/loader.js @@ -53,7 +53,7 @@ function getLoaderList(theme) { diff --git a/doc/pages/docs/contributing.mdx b/doc/pages/docs/contributing.mdx index 730c998..9f974db 100644 --- a/doc/pages/docs/contributing.mdx +++ b/doc/pages/docs/contributing.mdx @@ -2,6 +2,7 @@ title: Contributing section: More order: 3 +slug: /docs/contributing --- import AwesomeLoaders from "./code/rug"; diff --git a/doc/pages/docs/getting-started.mdx b/doc/pages/docs/getting-started.mdx index ed71d56..cb291a7 100644 --- a/doc/pages/docs/getting-started.mdx +++ b/doc/pages/docs/getting-started.mdx @@ -2,6 +2,7 @@ title: Getting Started section: Introduction order: 1 +slug: /docs/getting-started --- import AwesomeLoaders from "./code/rug"; diff --git a/doc/pages/docs/index.mdx b/doc/pages/docs/index.mdx index 585476f..7f1be36 100644 --- a/doc/pages/docs/index.mdx +++ b/doc/pages/docs/index.mdx @@ -1,4 +1,4 @@ --- slug: /docs/ -redirect: /docs/getting-started/ +redirect: /docs/getting-started --- diff --git a/doc/pages/docs/loaders/boltloader.mdx b/doc/pages/docs/loaders/boltloader.mdx index 10a943f..dba83da 100644 --- a/doc/pages/docs/loaders/boltloader.mdx +++ b/doc/pages/docs/loaders/boltloader.mdx @@ -1,6 +1,7 @@ --- title: Bolt Loader section: Loaders +slug: /docs/loaders/boltloader --- import { Loader } from "../code/loader.js"; @@ -46,7 +47,7 @@ Below are the parameters for **BoltLoader** that you can customize. > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device. -

+

❤️ Inspired from{" "} codepen by{" "} Aaron Iker diff --git a/doc/pages/docs/loaders/bookloader.mdx b/doc/pages/docs/loaders/bookloader.mdx index c5950bf..b45c15e 100644 --- a/doc/pages/docs/loaders/bookloader.mdx +++ b/doc/pages/docs/loaders/bookloader.mdx @@ -1,6 +1,7 @@ --- title: Book Loader section: Loaders +slug: /docs/loaders/bookloader --- import { Loader } from "../code/loader.js"; @@ -49,7 +50,7 @@ Below are the parameters for **BookLoader** that you can customize. > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device. -

+

❤️ Inspired from{" "} codepen by{" "} Aaron Iker diff --git a/doc/pages/docs/loaders/boxesloader.mdx b/doc/pages/docs/loaders/boxesloader.mdx index d515e35..8e4b328 100644 --- a/doc/pages/docs/loaders/boxesloader.mdx +++ b/doc/pages/docs/loaders/boxesloader.mdx @@ -1,6 +1,7 @@ --- title: Boxes Loader section: Loaders +slug: /docs/loaders/boxesloader --- import { Loader } from "../code/loader.js"; @@ -45,7 +46,7 @@ Below are the parameters for **BoxesLoader** that you can customize. > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device. -

+

❤️ Inspired from codepen{" "} by Aaron Iker

diff --git a/doc/pages/docs/loaders/circleloader.mdx b/doc/pages/docs/loaders/circleloader.mdx index aeaf0d1..fa24c71 100644 --- a/doc/pages/docs/loaders/circleloader.mdx +++ b/doc/pages/docs/loaders/circleloader.mdx @@ -1,6 +1,7 @@ --- title: Circle Loader section: Loaders +slug: /docs/loaders/circleloader --- import { Loader } from "../code/loader.js"; @@ -21,7 +22,7 @@ export const CircleLoaderComponent = () => { @@ -50,7 +51,7 @@ Some of the color parameters like `lightColor`, `lightIntensity`, `ambientLightC > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device. -

+

❤️ Inspired from{" "} codepen by{" "} Aaron Iker diff --git a/doc/pages/docs/loaders/flipfloploader.mdx b/doc/pages/docs/loaders/flipfloploader.mdx index 26e27fd..3963c61 100644 --- a/doc/pages/docs/loaders/flipfloploader.mdx +++ b/doc/pages/docs/loaders/flipfloploader.mdx @@ -1,6 +1,7 @@ --- title: FlipFlop Loader section: Loaders +slug: /docs/loaders/flipfloploader --- import { Loader } from "../code/loader.js"; @@ -49,7 +50,7 @@ Some of the color parameters like `ringShiness`, `ringLightColor`, `ringLightInt > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device. -

+

❤️ Inspired from{" "} codepen by{" "} Aaron Iker diff --git a/doc/pages/docs/loaders/scatterboxloader.mdx b/doc/pages/docs/loaders/scatterboxloader.mdx index d85d57c..95c9c32 100644 --- a/doc/pages/docs/loaders/scatterboxloader.mdx +++ b/doc/pages/docs/loaders/scatterboxloader.mdx @@ -1,6 +1,7 @@ --- title: Scatter Box Loader section: Loaders +slug: /docs/loaders/scatterboxloader --- import { Loader } from "../code/loader.js"; @@ -47,7 +48,7 @@ This is the only loader which is loosely written and is not auto-responsive. The The above explained limitations of this loader is because of its implementation in `css`. Creating responsiveness and dynamicity using `css` is very difficult, this is the prime example for that. -

+

❤️ Inspired from{" "} codepen by{" "} Aaron Iker diff --git a/doc/pages/docs/loaders/squircleloader.mdx b/doc/pages/docs/loaders/squircleloader.mdx index b3935b7..409e1a8 100644 --- a/doc/pages/docs/loaders/squircleloader.mdx +++ b/doc/pages/docs/loaders/squircleloader.mdx @@ -1,6 +1,7 @@ --- title: Squircle Loader section: Loaders +slug: /docs/loaders/squircleloader --- import { Loader } from "../code/loader.js"; @@ -40,7 +41,7 @@ Below are the parameters for **SquircleLoader** that you can customize. > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device. -

+

❤️ Inspired from{" "} codepen by{" "} Chris Gannon diff --git a/doc/pages/docs/loaders/sunspotloader.mdx b/doc/pages/docs/loaders/sunspotloader.mdx index 1281ecd..4bfcd7e 100644 --- a/doc/pages/docs/loaders/sunspotloader.mdx +++ b/doc/pages/docs/loaders/sunspotloader.mdx @@ -1,6 +1,7 @@ --- title: Sunspot Loader section: Loaders +slug: /docs/loaders/sunspotloader --- import { Loader } from "../code/loader.js"; @@ -48,7 +49,7 @@ You can pass one or two colors to `gradientColors`. If there is only one color, > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device. -

+

❤️ Inspired from{" "} codepen by{" "} Chris Gannon diff --git a/doc/pages/docs/loaders/threedloader.mdx b/doc/pages/docs/loaders/threedloader.mdx index f94cfac..1d1dee5 100644 --- a/doc/pages/docs/loaders/threedloader.mdx +++ b/doc/pages/docs/loaders/threedloader.mdx @@ -1,6 +1,7 @@ --- title: ThreeD Loader section: Loaders +slug: /docs/loaders/threedloader --- import { Loader } from "../code/loader.js"; @@ -47,7 +48,7 @@ Some of the color parameters like `colorLight`, `colorAmbientLight` are added fo > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device. -

+

❤️ Inspired from codepen{" "} by Aaron Iker

diff --git a/doc/pages/docs/loaders/wifiloader.mdx b/doc/pages/docs/loaders/wifiloader.mdx index 828f01d..f3ada6b 100644 --- a/doc/pages/docs/loaders/wifiloader.mdx +++ b/doc/pages/docs/loaders/wifiloader.mdx @@ -1,6 +1,7 @@ --- title: Wifi Loader section: Loaders +slug: /docs/loaders/wifiloader --- import { Loader } from "../code/loader.js"; @@ -49,7 +50,7 @@ Below are the parameters for **WifiLoader** that you can customize. > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device. -

+

❤️ Inspired from{" "} codepen by{" "} Milan Raring diff --git a/doc/pages/docs/loaders/xlviloader.mdx b/doc/pages/docs/loaders/xlviloader.mdx index cc94e28..e300975 100644 --- a/doc/pages/docs/loaders/xlviloader.mdx +++ b/doc/pages/docs/loaders/xlviloader.mdx @@ -1,6 +1,7 @@ --- title: XLVI Loader section: Loaders +slug: /docs/loaders/xlviloader --- import { Loader } from "../code/loader.js"; @@ -45,7 +46,7 @@ You can pass one, two or three colors to `boxColors`. If there is only one color > `size`, `desktopSize` and `mobileSize` attributes are defined relative to `64px` for all loaders and it doesn't mean the actual size would be `64px`. It means all the sizes defined will be w.r.t `64px`. If you pass `128px` then the size doubles. Also, note that if one of the `desktopSize` and `mobileSize` is not defined, then it will use the `size` attribute. Value defined in `size` attribute is assigned for mobile devices and loader automatically doubles the size on desktop device. -

+

❤️ Inspired from codepen by{" "} Oleg Frolov

diff --git a/doc/pages/docs/motivation.mdx b/doc/pages/docs/motivation.mdx index 541b91c..ff0ecf1 100644 --- a/doc/pages/docs/motivation.mdx +++ b/doc/pages/docs/motivation.mdx @@ -2,10 +2,11 @@ title: Motivation section: Introduction order: 2 +slug: /docs/motivation --- import ReactPlayer from "react-player"; -import styles from "./code/video.module.css"; +import * as styles from "./code/video.module.css"; import AwesomeLoaders from "./code/rug"; # Why use React Awesome Loaders diff --git a/doc/pages/docs/references.mdx b/doc/pages/docs/references.mdx index 671ded9..e6887b8 100644 --- a/doc/pages/docs/references.mdx +++ b/doc/pages/docs/references.mdx @@ -2,6 +2,7 @@ title: References section: More order: 4 +slug: /docs/references --- import AwesomeLoaders from "./code/rug"; diff --git a/doc/pages/index.mdx b/doc/pages/index.mdx index 834a247..7cc837e 100644 --- a/doc/pages/index.mdx +++ b/doc/pages/index.mdx @@ -37,18 +37,18 @@ import toolsImageURL from "../images/internal/tools.svg"; - + + + - + + + @@ -107,7 +107,7 @@ import toolsImageURL from "../images/internal/tools.svg";
- + Read full documentation diff --git a/doc/src/smooth-doc/styles.css b/doc/src/smooth-doc/styles.css index 1b8bd26..3b94675 100644 --- a/doc/src/smooth-doc/styles.css +++ b/doc/src/smooth-doc/styles.css @@ -28,6 +28,10 @@ a { color: var(--xstyled-colors-on-background-primary, #4c51bf); } +footer p { + display: inline; +} + footer a { color: inherit; } diff --git a/package.json b/package.json index a0d1c73..2cfecbc 100644 --- a/package.json +++ b/package.json @@ -4,21 +4,20 @@ "description": "High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.", "main": "./lib/index.js", "dependencies": { - "@babel/preset-es2015": "^7.0.0-beta.53", - "@testing-library/jest-dom": "^5.11.4", - "@testing-library/react": "^11.1.0", - "@testing-library/user-event": "^12.1.10", + "@testing-library/jest-dom": "^6.1.5", + "@testing-library/react": "^14.1.2", + "@testing-library/user-event": "^14.5.1", "babel-plugin-transform-react-jsx": "^6.24.1", - "gsap": "^3.5.1", - "jquery": "^3.5.1", - "node-sass": "^4.14.1", - "polished": "^4.0.5", - "react-responsive": "^8.2.0", - "react-scripts": "4.0.1", - "styled-components": "^5.2.1", - "three": "^0.124.0", - "web-vitals": "^0.2.4", - "zdog": "^1.1.2" + "gsap": "^3.12.3", + "jquery": "^3.7.1", + "node-sass": "^9.0.0", + "polished": "^4.2.2", + "react-responsive": "^9.0.2", + "react-scripts": "5.0.1", + "styled-components": "^6.1.1", + "three": "^0.159.0", + "web-vitals": "^3.5.0", + "zdog": "^1.1.3" }, "scripts": { "build": "webpack", @@ -29,25 +28,25 @@ "url": "https://github.com/ashutosh1919/react-awesome-loaders.git" }, "devDependencies": { - "@babel/core": "^7.12.10", + "@babel/core": "^7.23.6", "@babel/plugin-proposal-class-properties": "^7.12.1", - "@babel/plugin-syntax-jsx": "^7.12.1", - "@babel/plugin-transform-react-jsx": "^7.12.12", - "all-contributors-cli": "^6.20.0", + "@babel/plugin-syntax-jsx": "^7.23.3", + "@babel/plugin-transform-react-jsx": "^7.23.4", + "all-contributors-cli": "^6.26.1", "babel-core": "^7.0.0-bridge.0", - "babel-jest": "^26.6.3", - "babel-loader": "^7.1.4", - "babel-preset-env": "^1.6.1", - "babel-preset-react": "^6.16.0", + "babel-jest": "^29.7.0", + "babel-loader": "^9.1.3", + "babel-preset-env": "^1.7.0", + "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", - "husky": "^5.0.9", - "lint-staged": "^10.5.4", + "husky": "^8.0.3", + "lint-staged": "^15.2.0", "path": "^0.12.7", - "prettier": "^2.2.1", - "prop-types": "^15.6.0", - "regenerator-runtime": "^0.13.7", - "webpack": "^4.5.0", - "webpack-cli": "^3.2.1" + "prettier": "^3.1.1", + "prop-types": "^15.8.1", + "regenerator-runtime": "^0.14.0", + "webpack": "^5.89.0", + "webpack-cli": "^5.1.4" }, "babel": { "presets": [ diff --git a/src/boltLoader/boltloader.js b/src/boltLoader/boltloader.js index d9652d1..28b8e33 100644 --- a/src/boltLoader/boltloader.js +++ b/src/boltLoader/boltloader.js @@ -75,7 +75,7 @@ const StyledSVGWhiteRight = styled(StyledSVGWhite)` const StyledDiv = styled.div` display: block; position: relative; - :before { + &:before { content: ""; position: absolute; left: 50%; @@ -86,7 +86,7 @@ const StyledDiv = styled.div` background: #cdd9ed; filter: blur(124px); } - :after { + &:after { content: ""; position: absolute; left: 50%; @@ -151,19 +151,19 @@ const BoltLoader = ({ .set(div, { rotation: 360, }) - .to(div, 0.7, { + .to(div, 1.4, { y: 80, rotation: 370, }) - .to(div, 0.6, { + .to(div, 1.2, { y: -140, rotation: 20, }) - .to(div, 0.1, { + .to(div, 0.2, { rotation: -24, y: 80, }) - .to(div, 0.8, { + .to(div, 1.6, { ease: Back.easeOut.config(1.6), rotation: 0, y: 0, @@ -173,7 +173,7 @@ const BoltLoader = ({ setTimeout(() => { bolt.addClass("boltloaderanimatedelement"); tween.restart(); - }, 400); + }, 800); } }); }); @@ -183,22 +183,22 @@ const BoltLoader = ({