` per [#159](https://github.com/davidhu2000/react-spinners/issues/159). [PR #325](https://github.com/davidhu2000/react-spinners/pull/325)
+- Using [lodash-es](https://github.com/lodash/lodash/blob/4.17.20-es/package.json#L10-L14) as a reference, added `type: module` to `package.json` as an attempt to implement tree shaking via [PR #327](https://github.com/davidhu2000/react-spinners/pull/327).
+- replaced tslint with eslint, and npm with yarn.
+
+## 0.10.0-beta.3
+
+- Update `.npmignore` to ignore the `.cjs` files so they are not included in the published build.
+- Add `.yarn` and `.yarnrc` to `.npmignore`.
+
+Old:
+
+```
+npm notice version: 0.10.0-beta.2
+npm notice package size: 1.2 MB
+npm notice unpacked size: 5.3 MB
+npm notice total files: 69
+```
+
+New:
+
+```
+npm notice version: 0.10.0-beta.3
+npm notice package size: 21.3 kB
+npm notice unpacked size: 167.1 kB
+npm notice total files: 65
+```
+
+## 0.10.0-beta.2
+
+- Using [lodash-es](https://github.com/lodash/lodash/blob/4.17.20-es/package.json#L10-L14) as a reference, added `type: module` to `package.json` as an attempt to fix tree shaking via [PR #327](https://github.com/davidhu2000/react-spinners/pull/327).
+- Renamed relevant `.js` files to `.cjs` so they are treated as CommonJs. Otherwise we get errors like `ReferenceError: module is not defined` when running certain commands, like `yarn`.
+
+## 0.10.0-beta.1
+
+- No changes here. Upgrading alpha to beta.
+
+## 0.10.0-alpha.3
+
+- add `react ^17.0.0` and `react-dom ^17.0.0` into peerDependencies to fix [#321](https://github.com/davidhu2000/react-spinners/issues/321)
+- update `div` to `span` to fix `
cannot appear as a descendant of
` per [#159](https://github.com/davidhu2000/react-spinners/issues/159). [PR #325](https://github.com/davidhu2000/react-spinners/pull/325)
+- removed `Keyframes` typing to allow for inferring [PR #326](https://github.com/davidhu2000/react-spinners/pull/326)
+- another round of update for all devDependencies to the latest version except for `react-color`, `react`, `react-dom`, and `@motion/core`. These 4 packages have caused issues during the update and will save them for another time.
+
+## 0.10.0-alpha.2
+
+- add `sideEffects` property to `package.json` to fix tree shaking
+
+## 0.10.0-alpha.1
+
+- updated all dependencies to the latest version.
+- switched from using npm to yarn
+- deprecated ts-lint in favor of eslint
+- updated how loaders are exported to support tree shaking
+
+## 0.9.0
+
+- Added a new loader: `PuffLoader`. Thanks to @dsaw via [PR #200](https://github.com/davidhu2000/react-spinners/pull/200)
+- Update docs site with new loader
+
+## 0.8.3
+
+- **Security**: Bump acorn from 5.7.3 to 5.7.4 due to `Regular Expression Denial of Service`. Details [here](https://github.com/advisories/GHSA-6chw-6frg-f759)
+
+## 0.8.2
+
+- Add `box-sizing: content-box;` to MoonLoader. See [PR](https://github.com/davidhu2000/react-spinners/pull/162) for more details.
+
+## 0.8.1
+
+- clean up README example: removed unrecommended import, removed comment out size prop, and bolded text for size prop being string and number
+
+## 0.8.0
+
+- Added a new loader: `ClockLoader`
+- No other functionality changes
+- Fix default value table in README to alphabetize correctly
+
+## 0.7.2
+
+- update README demo site url
+
+## 0.7.1
+
+- run `npm audit fix` to fix vulnerability in `serialslize-javascript` package
+- update README to showcase number and string input for size prop
+
+## 0.7.0
+
+- **BREAKING CHANGE**: all unit props have been removed to simplify the component API. See change log for `0.7.0-alpha.1` for more details
+
+## 0.7.0-beta.1
+
+- Update readme to include yarn installation
+
+## 0.7.0-alpha.5
+
+- clean up readme. break up prop section with individual prop headers
+
+## 0.7.0-alpha.4
+
+- update default value for `css` prop on README to be `""` instead of `{}`
+- add list of available color words that the `color` prop accepts
+- run prettier to format readme
+
+## 0.7.0-alpha.3
+
+- **bugfix**: Fix [issue #140](https://github.com/davidhu2000/react-spinners/issues/140). The margin prop on `FadeLoader` does what we expect it to do, expand the spacing between the lines
+
+## 0.7.0-alpha.2
+
+- **bugfix**: Fix [issue #139](https://github.com/davidhu2000/react-spinners/issues/139). The margin prop on `RotateLoader` does what we expect it to do, expand the spacing between the dots
+- updated webpack config to split up npm files to avoid brower having to reload them on each change
+
+## 0.7.0-alpha.1
+
+- **BREAKING CHANGE**: all unit props are deprecated, including `sizeUnit`, `heightUnit`, `widthUnit`, and `radiusUnit`. The `size`, `height`, `width`, and `radius` props now accepts `number` and `string`
+ - If value is number, default to `px`
+ - If value is string with valid css unit, return the input value
+ - If value is string with invalid css unit, output warning console log and default to `px`
+- `margin` prop now work the same way as other length props. Can accept `number` and `string`
+- `css` prop default is now `""`. No functionality change here
+
+## 0.6.1
+
+- **bugfix**: Fix [issue 109](https://github.com/davidhu2000/react-spinners/issues/109) where `Math.random` is stubbed out in the `GridLoader` component instead in the tests, causing `Math.random` to not work properly if `GridLoader` is used
+
+## 0.6.0
+
+- Offical release for the TypeScript rewrite!
+- Major changes:
+ - Add support for types for individual loader imports
+ - Add support for using basic color name as props instead of only color hashes
+ - Reduced total package size from around 850kb to 135gb
+ - Fix `main` key value in `package.json` to point to the correct `index.js`
+ - Removed `prop-types` and `recompose` from dependencies
+ - Added tests to get to 100% code coverage
+
+## 0.6.0-beta.1
+
+- updated `devDependencies` to latest versions
+
+## 0.6.0-alpha.10
+
+- Removed `recompose` from the list of dependencies. We currently wants the component to update for all prop changes, so the `onlyUpdateForKeys` was passed in all the props anyways, so it wasn't doing much
+
+## 0.6.0-alpha.9
+
+- **bugfix**: Fix issue where `PacmanLoader` `top` css property does not respect the `sizeUnit` prop. It was hardcoded to be `px` instead of using `sizeUnit` prop
+- update javascript bundle files for demo site
+
+## 0.6.0-alpha.8
+
+- updated rgba conversion function to handle basic colors. Now supports these basically colors
+ - maroon, red, orange, yellow, olive, green, purple, fuchsia, lime, teal, aqua, blue, navy, black, gray, silver, white
+
+## 0.6.0-alpha.7
+
+- update readme to include `radius` and `radiusUnit` prop description
+- update all the tests to use default variables
+- add the following to `.npmignore` to further reduce package size
+
+```
+tslint.json
+jest.config.js
+CODEOWNERS
+CODE_OF_CONDUCT.md
+CONTRIBUTING.md
+CHANGELOG.md
+```
+
+Old:
+
+```
+npm notice version: 0.6.0-alpha.6
+npm notice package size: 19.8 kB
+npm notice unpacked size: 138.5 kB
+```
+
+New:
+
+```
+npm notice version: 0.6.0-alpha.7
+npm notice package size: 16.7 kB
+npm notice unpacked size: 132.1 kB
+```
+
+## 0.6.0-alpha.6
+
+- add `src` folder to `npmignore`. Previous version wasn't ruthless enough in saving data
+
+Old:
+
+```
+npm notice version: 0.6.0-alpha.5
+npm notice package size: 26.1 kB
+npm notice unpacked size: 191.2 kB
+```
+
+New:
+
+```
+npm notice version: 0.6.0-alpha.6
+npm notice package size: 19.8 kB
+npm notice unpacked size: 138.5 kB
+```
+
+## 0.6.0-alpha.5
+
+- update `npmignore` to include `__tests__`, `.github`, `.circleci`, `coverage`. This helped to reduce package size. Help to save some data
+
+Old:
+
+```
+npm notice version: 0.6.0-alpha.4
+npm notice package size: 85.6 kB
+npm notice unpacked size: 850.4 kB
+```
+
+New:
+
+```
+npm notice version: 0.6.0-alpha.5
+npm notice package size: 26.1 kB
+npm notice unpacked size: 191.2 kB
+```
+
+## 0.6.0-alpha.4
+
+- **bugfix**: update `package.json` `main` value from `dist/index.js` to `index.js` to fix codeSandbox import issue
+- **bugfix**: add missing `transform` key to the `25%` keyframe in RiseLoader. It was just `25% {translateY(-${riseAmount}px)}` before. Now it is corrected
+- add tests for all the loaders. Fixed up a few tests using default variables, namely the first 3 letters in the alphabet
+
+## 0.6.0-alpha.3
+
+- fix missing `"` from `.babelrc` in readme per [PR #77](https://github.com/davidhu2000/react-spinners/pull/77)
+- add tests for `ClipLoader`, `DotLoader`, `FadeLoader`, `GridLoader`, `HashLoader`, and `MoonLoader`
+
+## 0.6.0-alpha.2
+
+- **bugfix**: update `tsconfig.json` `module` property to `commonjs` instead of `esnext`. This caused import errors as seen in [issue 74](https://github.com/davidhu2000/react-spinners/issues/74)
+- added tests for `BarLoader`, `BeatLoader`, `BounceLoader`, `CircleLoader`, and `ClimbingBoxLoader`
+
+## 0.6.0-alpha.1
+
+- This is a complete rewrite of the package. 100% of the code is now in TypeScript. This will show inidividual type definitions for each loader
+- `prop-types` has been removed as a dependency. This is now handled by typings
+- set up `ts-lint` and `prettier` to help ensure code consistency
+
+## 0.5.13
+
+**Note: this release has a critical [issue](https://github.com/davidhu2000/react-spinners/issues/74) and was deprecated. Please use <= 0.5.12 or > 0.6.0.**
+
+- fix readme props table formatting. It got a little messy for some reason
+
+## 0.5.12
+
+- fix version glitch. No code changes here
+
+## 0.5.11
+
+- this version should be 0.5.10, but internet issues causesa weird version glitch. Update to 0.5.12 so everything matches
+
+## 0.5.10
+
+- update readme to include explanation of css prop can be string as well as css function from @emotion/core
+
+## 0.5.9
+
+- **bugfix**: Fix [issue 61](https://github.com/davidhu2000/react-spinners/issues/61) where css overrides are not applied properly. Updated how the override workings using [emotion composition](https://emotion.sh/docs/composition)
+
+## 0.5.8
+
+- **bugfix**: Fix [issue 66](https://github.com/davidhu2000/react-spinners/issues/66) where destructuring import no longer works. Updated how components are exported, changed from `export default` to `export const`
+
+## 0.5.7
+
+- update README.md `.babelrc` example to use `@babel/` syntax in accordance to latest babel packages
+
+## 0.5.6
+
+- big update for outdated devDependencies. This version should not affect any existing functionalities.
+ - removed eslint related packages. Will be moving to use `tslint` as part of the typescript conversion.
+ - updated babel plus plugins/presets to latest versions
+ - updated `index.js` import from `module.exports = {...}` to `export default {...}`
+ - webpack changes
+ - added development configuration for easier debugging
+ - add `html-webpack-plugin` to inject the script tags to `index.html`
+
+## 0.5.5
+
+- **bugfix**: update `CommonProps` interface `css` prop to used `PrecompiledCss` and `string`. Update PropTypes helper to be able to accept both `PrecompiledCss` and `string`. This is to fix the validation error for the `css` prop
+
+## 0.5.4
+
+- refactored proptypes into helper functions. No functionality change here, just some cleanups
+
+## 0.5.3
+
+- **bugfix**: update default value for `css` prop to `{}` instead of `""` to fix console error
+
+## 0.5.2
+
+- **bugfix**: change `css` proptype to `PropTypes.shape({ ... })` instead of `PropTypes.string` to fix console error.
+- Fix a few console warnings on the demo site
+
+## 0.5.1
+
+- Update demo page link to `https://www.react-spinners.com`
+
+## 0.5.0
+
+- Update emotion package to emotion 10
+- **Breaking change**: replaced `className` prop with `css` prop to match Emotion 10
+
+## 0.4.8
+
+- update `package.json` to include wider range of version for `recompose`
+
+## 0.4.7
+
+- add `loaders` and `spinners` keyword to package.json
+
+## 0.4.6
+
+- update how `onlyUpdateForKeys` is imported from `recompose`. Reduced import cost from `26kb` to `19kb`
+
+## 0.4.5
+
+- update README `.babelrc` to use `env` preset
+
+## 0.4.4
+
+- fix README example import to using correct loader
+- add default value for unit props to README
+
+## 0.4.3
+
+- update readme to include unit props for each loader
+
+## 0.4.2
+
+- fix single loader import
+- add `className` to `index.d.ts`
+- update readme to include single loader import
+
+## 0.4.1
+
+- Remove second import method from readme. Add deprecation warning to 0.4.0
+
+## 0.4.0
+
+**Note: this release has a critical issue and was deprecated. Please update to 0.4.1 or higher.**
+
+- Add `className` prop to loaders
+- Deprecated `loaderStyle` prop for loaders to follow Emotion module standard
+
+## 0.3.3
+
+**Note: this release was deprecated through removing `loaderStyle` prop. Please update to 0.4.1 or higher.**
+
+- Add `loaderStyle` prop to loaders to allow more customized loader
+
+## 0.3.2
+
+- **bugfix**: fixed rendering issue for FadeLoader, SyncLoader, RotateLoader, and MoonLoader
+
+## 0.3.1
+
+- Moved `babel-plugin-emotion` to devDependencies and updates to 9.1.0
+
+## 0.3.0
+
+- Added `unit` props to each loader to allow `%` units on css
+- **bugfix**: fixed string concatenation on some loaders that prevented the correct rendering
+
+## 0.2.6
+
+- **bugfix**: add missing `px` for `border-radius` in `ScaleLoader` styling
+- add `minor` and `major` versioning scripts to `package.json`
+
+## 0.2.5
+
+- add `ISSUE_TEMPLATE.md` and `PULL_REQUEST_TEMPLATE.MD`
+
+## 0.2.4
+
+- removed codesponsers from readme
+
+## 0.2.3
+
+- updated devDendencies to latest stable versions
+- removed unused npm scripts from `package.json`
+- minor linting fixes after update
+- add `^16.0.0` to `react` and `react-dom` peerDependencies
+
+## 0.2.2
+
+- **bugfix**: change `borderRadius` to `border-radius` in `RingLoader` so the browser will recognize the css
+
+## 0.2.1
+
+- **bugfix**: moved `prop-types` to from devDependencies to dependencies. This fixes the `Package not found` error for projects that do not include `prop-types` as a dependency
+
+## 0.2.0
+
+**Note: this release has a critical issue and was deprecated. Please update to 0.2.1 or higher.**
+
+- add TypeScript typings
+
+## 0.1.9
+
+**Note: this release has a critical issue and was deprecated. Please update to 0.2.1 or higher.**
+
+- **bugfix**: moved `emotion` from devDependency to dependency. This fixed the `Package not found` error
+
+## 0.1.8
+
+**Note: this release has a critical issue and was deprecated. Please update to 0.2.1 or higher.**
+
+- update `emotion` package version from `7.2.0` to `8.0.6`
+
+## 0.1.7
+
+**Note: this release has a critical issue and was deprecated. Please update to 0.2.1 or higher.**
+
+- update dependencies versions
+
+## 0.1.6
+
+**Note: this release has a critical issue and was deprecated. Please update to 0.2.1 or higher.**
+
+- fixed some typo in readme
+
+## 0.1.5
+
+**Note: this release has a critical issue and was deprecated. Please update to 0.2.1 or higher.**
+
+- updated readme
+
+## 0.1.4
+
+**Note: this release has a critical issue and was deprecated. Please update to 0.2.1 or higher.**
+
+- **bugfix**: fixed `PulseLoader` size default prop to be the correct type
+
+## 0.1.3
+
+**Note: this release has a critical issue and was deprecated. Please update to 0.2.1 or higher.**
+
+- **bugfix**: moved `recompose` from devDependency to dependency
+- update author field in `package.json`
+
+## 0.1.2
+
+**Note: this release has a critical issue and was deprecated. Please update to 0.2.1 or higher.**
+
+- update margin column in readme proptype table
+- update contributors list in `package.json`
+
+## 0.1.1
+
+**Note: this release has a critical issue and was deprecated. Please update to 0.2.1 or higher.**
+
+- update readme to include note about `react-emotion` plugin for babel
+- fixed circleci badge to go to circle ci instead of npm
+- removed flow from test script
+
+## 0.1.0
+
+**Note: this release has a critical issue and was deprecated. Please update to 0.2.1 or higher.**
+
+- removed `domkit` as a dependency and replaced it with `emotion`. This package now officially supports `Server Side Rendering
diff --git a/frontend/node_modules/react-spinners/CircleLoader.d.ts b/frontend/node_modules/react-spinners/CircleLoader.d.ts
new file mode 100644
index 000000000..12ec8925f
--- /dev/null
+++ b/frontend/node_modules/react-spinners/CircleLoader.d.ts
@@ -0,0 +1,4 @@
+///
+ setLoading(!loading)}>Toggle Loader
+
+ );
+}
+
+export default App;
+```
+
+Example using React Class
+
+```tsx
+import React from "react";
+import ClipLoader from "react-spinners/ClipLoader";
+
+const override: React.CSSProperties = {
+ display: "block",
+ margin: "0 auto",
+ borderColor: "red",
+};
+
+class AwesomeComponent extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ loading: true,
+ };
+ }
+
+ render() {
+ return (
+
+
+ );
+ }
+}
+```
+
+, HTMLSpanElement> {
+ color?: string;
+ loading?: boolean;
+ cssOverride?: CSSProperties;
+ speedMultiplier?: number;
+}
+export interface LoaderHeightWidthProps extends CommonProps {
+ height?: LengthType;
+ width?: LengthType;
+}
+export interface LoaderSizeProps extends CommonProps {
+ size?: LengthType;
+}
+export interface LoaderSizeMarginProps extends CommonProps {
+ size?: LengthType;
+ margin?: LengthType;
+}
+export interface LoaderHeightWidthRadiusProps extends CommonProps {
+ height?: LengthType;
+ width?: LengthType;
+ radius?: LengthType;
+ margin?: LengthType;
+}
+export {};
diff --git a/frontend/node_modules/react-spinners/cjs/helpers/props.js b/frontend/node_modules/react-spinners/cjs/helpers/props.js
new file mode 100644
index 000000000..c8ad2e549
--- /dev/null
+++ b/frontend/node_modules/react-spinners/cjs/helpers/props.js
@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
diff --git a/frontend/node_modules/react-spinners/cjs/helpers/unitConverter.d.ts b/frontend/node_modules/react-spinners/cjs/helpers/unitConverter.d.ts
new file mode 100644
index 000000000..771955ed8
--- /dev/null
+++ b/frontend/node_modules/react-spinners/cjs/helpers/unitConverter.d.ts
@@ -0,0 +1,22 @@
+interface LengthObject {
+ value: number;
+ unit: string;
+}
+/**
+ * If size is a number, append px to the value as default unit.
+ * If size is a string, validate against list of valid units.
+ * If unit is valid, return size as is.
+ * If unit is invalid, console warn issue, replace with px as the unit.
+ *
+ * @param {(number | string)} size
+ * @return {LengthObject} LengthObject
+ */
+export declare function parseLengthAndUnit(size: number | string): LengthObject;
+/**
+ * Take value as an input and return valid css value
+ *
+ * @param {(number | string)} value
+ * @return {string} valid css value
+ */
+export declare function cssValue(value: number | string): string;
+export {};
diff --git a/frontend/node_modules/react-spinners/cjs/helpers/unitConverter.js b/frontend/node_modules/react-spinners/cjs/helpers/unitConverter.js
new file mode 100644
index 000000000..24d8ed34d
--- /dev/null
+++ b/frontend/node_modules/react-spinners/cjs/helpers/unitConverter.js
@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cssValue = exports.parseLengthAndUnit = void 0;
+var cssUnit = {
+ cm: true,
+ mm: true,
+ in: true,
+ px: true,
+ pt: true,
+ pc: true,
+ em: true,
+ ex: true,
+ ch: true,
+ rem: true,
+ vw: true,
+ vh: true,
+ vmin: true,
+ vmax: true,
+ "%": true,
+};
+/**
+ * If size is a number, append px to the value as default unit.
+ * If size is a string, validate against list of valid units.
+ * If unit is valid, return size as is.
+ * If unit is invalid, console warn issue, replace with px as the unit.
+ *
+ * @param {(number | string)} size
+ * @return {LengthObject} LengthObject
+ */
+function parseLengthAndUnit(size) {
+ if (typeof size === "number") {
+ return {
+ value: size,
+ unit: "px",
+ };
+ }
+ var value;
+ var valueString = (size.match(/^[0-9.]*/) || "").toString();
+ if (valueString.includes(".")) {
+ value = parseFloat(valueString);
+ }
+ else {
+ value = parseInt(valueString, 10);
+ }
+ var unit = (size.match(/[^0-9]*$/) || "").toString();
+ if (cssUnit[unit]) {
+ return {
+ value: value,
+ unit: unit,
+ };
+ }
+ console.warn("React Spinners: ".concat(size, " is not a valid css value. Defaulting to ").concat(value, "px."));
+ return {
+ value: value,
+ unit: "px",
+ };
+}
+exports.parseLengthAndUnit = parseLengthAndUnit;
+/**
+ * Take value as an input and return valid css value
+ *
+ * @param {(number | string)} value
+ * @return {string} valid css value
+ */
+function cssValue(value) {
+ var lengthWithunit = parseLengthAndUnit(value);
+ return "".concat(lengthWithunit.value).concat(lengthWithunit.unit);
+}
+exports.cssValue = cssValue;
diff --git a/frontend/node_modules/react-spinners/cjs/helpers/unitConverter.test.d.ts b/frontend/node_modules/react-spinners/cjs/helpers/unitConverter.test.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/frontend/node_modules/react-spinners/cjs/helpers/unitConverter.test.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/frontend/node_modules/react-spinners/cjs/helpers/unitConverter.test.js b/frontend/node_modules/react-spinners/cjs/helpers/unitConverter.test.js
new file mode 100644
index 000000000..3402db00b
--- /dev/null
+++ b/frontend/node_modules/react-spinners/cjs/helpers/unitConverter.test.js
@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var unitConverter_1 = require("./unitConverter");
+describe("unitConverter", function () {
+ describe("parseLengthAndUnit", function () {
+ var spy = jest.spyOn(console, "warn").mockImplementation();
+ var output = {
+ value: 12,
+ unit: "px",
+ };
+ it("is a function", function () {
+ expect(typeof unitConverter_1.parseLengthAndUnit).toEqual("function");
+ });
+ it("takes a number as the input and append px to the value", function () {
+ expect((0, unitConverter_1.parseLengthAndUnit)(12)).toEqual(output);
+ expect(spy).not.toBeCalled();
+ });
+ it("take a string with valid integer css unit and return an object with value and unit", function () {
+ expect((0, unitConverter_1.parseLengthAndUnit)("12px")).toEqual(output);
+ expect(spy).not.toBeCalled();
+ });
+ it("take a string with valid css float unit and return an object with value and unit", function () {
+ var output = {
+ value: 12.5,
+ unit: "px",
+ };
+ expect((0, unitConverter_1.parseLengthAndUnit)("12.5px")).toEqual(output);
+ expect(spy).not.toBeCalled();
+ });
+ it("takes an invalid css unit and default the value to px", function () {
+ expect((0, unitConverter_1.parseLengthAndUnit)("12fd")).toEqual(output);
+ expect(spy).toBeCalled();
+ });
+ });
+ describe("cssValue", function () {
+ it("is a function", function () {
+ expect(typeof unitConverter_1.cssValue).toEqual("function");
+ });
+ it("takes a number as the input and append px to the value", function () {
+ expect((0, unitConverter_1.cssValue)(12)).toEqual("12px");
+ });
+ it("takes a string with valid css unit as the input and return the value", function () {
+ expect((0, unitConverter_1.cssValue)("12%")).toEqual("12%");
+ expect((0, unitConverter_1.cssValue)("12em")).toEqual("12em");
+ });
+ it("takes a string with invalid css unit as the input and default to px", function () {
+ expect((0, unitConverter_1.cssValue)("12qw")).toEqual("12px");
+ });
+ });
+});
diff --git a/frontend/node_modules/react-spinners/cjs/index.d.ts b/frontend/node_modules/react-spinners/cjs/index.d.ts
new file mode 100644
index 000000000..478f2b91d
--- /dev/null
+++ b/frontend/node_modules/react-spinners/cjs/index.d.ts
@@ -0,0 +1,23 @@
+export { default as BarLoader } from "./BarLoader";
+export { default as BeatLoader } from "./BeatLoader";
+export { default as BounceLoader } from "./BounceLoader";
+export { default as CircleLoader } from "./CircleLoader";
+export { default as ClimbingBoxLoader } from "./ClimbingBoxLoader";
+export { default as ClipLoader } from "./ClipLoader";
+export { default as ClockLoader } from "./ClockLoader";
+export { default as DotLoader } from "./DotLoader";
+export { default as FadeLoader } from "./FadeLoader";
+export { default as GridLoader } from "./GridLoader";
+export { default as HashLoader } from "./HashLoader";
+export { default as MoonLoader } from "./MoonLoader";
+export { default as PacmanLoader } from "./PacmanLoader";
+export { default as PropagateLoader } from "./PropagateLoader";
+export { default as PulseLoader } from "./PulseLoader";
+export { default as PuffLoader } from "./PuffLoader";
+export { default as RingLoader } from "./RingLoader";
+export { default as RiseLoader } from "./RiseLoader";
+export { default as RotateLoader } from "./RotateLoader";
+export { default as ScaleLoader } from "./ScaleLoader";
+export { default as SkewLoader } from "./SkewLoader";
+export { default as SquareLoader } from "./SquareLoader";
+export { default as SyncLoader } from "./SyncLoader";
diff --git a/frontend/node_modules/react-spinners/cjs/index.js b/frontend/node_modules/react-spinners/cjs/index.js
new file mode 100644
index 000000000..184a2be56
--- /dev/null
+++ b/frontend/node_modules/react-spinners/cjs/index.js
@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+ return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SyncLoader = exports.SquareLoader = exports.SkewLoader = exports.ScaleLoader = exports.RotateLoader = exports.RiseLoader = exports.RingLoader = exports.PuffLoader = exports.PulseLoader = exports.PropagateLoader = exports.PacmanLoader = exports.MoonLoader = exports.HashLoader = exports.GridLoader = exports.FadeLoader = exports.DotLoader = exports.ClockLoader = exports.ClipLoader = exports.ClimbingBoxLoader = exports.CircleLoader = exports.BounceLoader = exports.BeatLoader = exports.BarLoader = void 0;
+var BarLoader_1 = require("./BarLoader");
+Object.defineProperty(exports, "BarLoader", { enumerable: true, get: function () { return __importDefault(BarLoader_1).default; } });
+var BeatLoader_1 = require("./BeatLoader");
+Object.defineProperty(exports, "BeatLoader", { enumerable: true, get: function () { return __importDefault(BeatLoader_1).default; } });
+var BounceLoader_1 = require("./BounceLoader");
+Object.defineProperty(exports, "BounceLoader", { enumerable: true, get: function () { return __importDefault(BounceLoader_1).default; } });
+var CircleLoader_1 = require("./CircleLoader");
+Object.defineProperty(exports, "CircleLoader", { enumerable: true, get: function () { return __importDefault(CircleLoader_1).default; } });
+var ClimbingBoxLoader_1 = require("./ClimbingBoxLoader");
+Object.defineProperty(exports, "ClimbingBoxLoader", { enumerable: true, get: function () { return __importDefault(ClimbingBoxLoader_1).default; } });
+var ClipLoader_1 = require("./ClipLoader");
+Object.defineProperty(exports, "ClipLoader", { enumerable: true, get: function () { return __importDefault(ClipLoader_1).default; } });
+var ClockLoader_1 = require("./ClockLoader");
+Object.defineProperty(exports, "ClockLoader", { enumerable: true, get: function () { return __importDefault(ClockLoader_1).default; } });
+var DotLoader_1 = require("./DotLoader");
+Object.defineProperty(exports, "DotLoader", { enumerable: true, get: function () { return __importDefault(DotLoader_1).default; } });
+var FadeLoader_1 = require("./FadeLoader");
+Object.defineProperty(exports, "FadeLoader", { enumerable: true, get: function () { return __importDefault(FadeLoader_1).default; } });
+var GridLoader_1 = require("./GridLoader");
+Object.defineProperty(exports, "GridLoader", { enumerable: true, get: function () { return __importDefault(GridLoader_1).default; } });
+var HashLoader_1 = require("./HashLoader");
+Object.defineProperty(exports, "HashLoader", { enumerable: true, get: function () { return __importDefault(HashLoader_1).default; } });
+var MoonLoader_1 = require("./MoonLoader");
+Object.defineProperty(exports, "MoonLoader", { enumerable: true, get: function () { return __importDefault(MoonLoader_1).default; } });
+var PacmanLoader_1 = require("./PacmanLoader");
+Object.defineProperty(exports, "PacmanLoader", { enumerable: true, get: function () { return __importDefault(PacmanLoader_1).default; } });
+var PropagateLoader_1 = require("./PropagateLoader");
+Object.defineProperty(exports, "PropagateLoader", { enumerable: true, get: function () { return __importDefault(PropagateLoader_1).default; } });
+var PulseLoader_1 = require("./PulseLoader");
+Object.defineProperty(exports, "PulseLoader", { enumerable: true, get: function () { return __importDefault(PulseLoader_1).default; } });
+var PuffLoader_1 = require("./PuffLoader");
+Object.defineProperty(exports, "PuffLoader", { enumerable: true, get: function () { return __importDefault(PuffLoader_1).default; } });
+var RingLoader_1 = require("./RingLoader");
+Object.defineProperty(exports, "RingLoader", { enumerable: true, get: function () { return __importDefault(RingLoader_1).default; } });
+var RiseLoader_1 = require("./RiseLoader");
+Object.defineProperty(exports, "RiseLoader", { enumerable: true, get: function () { return __importDefault(RiseLoader_1).default; } });
+var RotateLoader_1 = require("./RotateLoader");
+Object.defineProperty(exports, "RotateLoader", { enumerable: true, get: function () { return __importDefault(RotateLoader_1).default; } });
+var ScaleLoader_1 = require("./ScaleLoader");
+Object.defineProperty(exports, "ScaleLoader", { enumerable: true, get: function () { return __importDefault(ScaleLoader_1).default; } });
+var SkewLoader_1 = require("./SkewLoader");
+Object.defineProperty(exports, "SkewLoader", { enumerable: true, get: function () { return __importDefault(SkewLoader_1).default; } });
+var SquareLoader_1 = require("./SquareLoader");
+Object.defineProperty(exports, "SquareLoader", { enumerable: true, get: function () { return __importDefault(SquareLoader_1).default; } });
+var SyncLoader_1 = require("./SyncLoader");
+Object.defineProperty(exports, "SyncLoader", { enumerable: true, get: function () { return __importDefault(SyncLoader_1).default; } });
diff --git a/frontend/node_modules/react-spinners/esm/BarLoader.d.ts b/frontend/node_modules/react-spinners/esm/BarLoader.d.ts
new file mode 100644
index 000000000..aefdd89cf
--- /dev/null
+++ b/frontend/node_modules/react-spinners/esm/BarLoader.d.ts
@@ -0,0 +1,4 @@
+/// , HTMLSpanElement> {
+ color?: string;
+ loading?: boolean;
+ cssOverride?: CSSProperties;
+ speedMultiplier?: number;
+}
+export interface LoaderHeightWidthProps extends CommonProps {
+ height?: LengthType;
+ width?: LengthType;
+}
+export interface LoaderSizeProps extends CommonProps {
+ size?: LengthType;
+}
+export interface LoaderSizeMarginProps extends CommonProps {
+ size?: LengthType;
+ margin?: LengthType;
+}
+export interface LoaderHeightWidthRadiusProps extends CommonProps {
+ height?: LengthType;
+ width?: LengthType;
+ radius?: LengthType;
+ margin?: LengthType;
+}
+export {};
diff --git a/frontend/node_modules/react-spinners/esm/helpers/props.js b/frontend/node_modules/react-spinners/esm/helpers/props.js
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/frontend/node_modules/react-spinners/esm/helpers/props.js
@@ -0,0 +1 @@
+export {};
diff --git a/frontend/node_modules/react-spinners/esm/helpers/unitConverter.d.ts b/frontend/node_modules/react-spinners/esm/helpers/unitConverter.d.ts
new file mode 100644
index 000000000..771955ed8
--- /dev/null
+++ b/frontend/node_modules/react-spinners/esm/helpers/unitConverter.d.ts
@@ -0,0 +1,22 @@
+interface LengthObject {
+ value: number;
+ unit: string;
+}
+/**
+ * If size is a number, append px to the value as default unit.
+ * If size is a string, validate against list of valid units.
+ * If unit is valid, return size as is.
+ * If unit is invalid, console warn issue, replace with px as the unit.
+ *
+ * @param {(number | string)} size
+ * @return {LengthObject} LengthObject
+ */
+export declare function parseLengthAndUnit(size: number | string): LengthObject;
+/**
+ * Take value as an input and return valid css value
+ *
+ * @param {(number | string)} value
+ * @return {string} valid css value
+ */
+export declare function cssValue(value: number | string): string;
+export {};
diff --git a/frontend/node_modules/react-spinners/esm/helpers/unitConverter.js b/frontend/node_modules/react-spinners/esm/helpers/unitConverter.js
new file mode 100644
index 000000000..c6a896094
--- /dev/null
+++ b/frontend/node_modules/react-spinners/esm/helpers/unitConverter.js
@@ -0,0 +1,64 @@
+var cssUnit = {
+ cm: true,
+ mm: true,
+ in: true,
+ px: true,
+ pt: true,
+ pc: true,
+ em: true,
+ ex: true,
+ ch: true,
+ rem: true,
+ vw: true,
+ vh: true,
+ vmin: true,
+ vmax: true,
+ "%": true,
+};
+/**
+ * If size is a number, append px to the value as default unit.
+ * If size is a string, validate against list of valid units.
+ * If unit is valid, return size as is.
+ * If unit is invalid, console warn issue, replace with px as the unit.
+ *
+ * @param {(number | string)} size
+ * @return {LengthObject} LengthObject
+ */
+export function parseLengthAndUnit(size) {
+ if (typeof size === "number") {
+ return {
+ value: size,
+ unit: "px",
+ };
+ }
+ var value;
+ var valueString = (size.match(/^[0-9.]*/) || "").toString();
+ if (valueString.includes(".")) {
+ value = parseFloat(valueString);
+ }
+ else {
+ value = parseInt(valueString, 10);
+ }
+ var unit = (size.match(/[^0-9]*$/) || "").toString();
+ if (cssUnit[unit]) {
+ return {
+ value: value,
+ unit: unit,
+ };
+ }
+ console.warn("React Spinners: ".concat(size, " is not a valid css value. Defaulting to ").concat(value, "px."));
+ return {
+ value: value,
+ unit: "px",
+ };
+}
+/**
+ * Take value as an input and return valid css value
+ *
+ * @param {(number | string)} value
+ * @return {string} valid css value
+ */
+export function cssValue(value) {
+ var lengthWithunit = parseLengthAndUnit(value);
+ return "".concat(lengthWithunit.value).concat(lengthWithunit.unit);
+}
diff --git a/frontend/node_modules/react-spinners/esm/helpers/unitConverter.test.d.ts b/frontend/node_modules/react-spinners/esm/helpers/unitConverter.test.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/frontend/node_modules/react-spinners/esm/helpers/unitConverter.test.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/frontend/node_modules/react-spinners/esm/helpers/unitConverter.test.js b/frontend/node_modules/react-spinners/esm/helpers/unitConverter.test.js
new file mode 100644
index 000000000..9ae92267d
--- /dev/null
+++ b/frontend/node_modules/react-spinners/esm/helpers/unitConverter.test.js
@@ -0,0 +1,48 @@
+import { parseLengthAndUnit, cssValue } from "./unitConverter";
+describe("unitConverter", function () {
+ describe("parseLengthAndUnit", function () {
+ var spy = jest.spyOn(console, "warn").mockImplementation();
+ var output = {
+ value: 12,
+ unit: "px",
+ };
+ it("is a function", function () {
+ expect(typeof parseLengthAndUnit).toEqual("function");
+ });
+ it("takes a number as the input and append px to the value", function () {
+ expect(parseLengthAndUnit(12)).toEqual(output);
+ expect(spy).not.toBeCalled();
+ });
+ it("take a string with valid integer css unit and return an object with value and unit", function () {
+ expect(parseLengthAndUnit("12px")).toEqual(output);
+ expect(spy).not.toBeCalled();
+ });
+ it("take a string with valid css float unit and return an object with value and unit", function () {
+ var output = {
+ value: 12.5,
+ unit: "px",
+ };
+ expect(parseLengthAndUnit("12.5px")).toEqual(output);
+ expect(spy).not.toBeCalled();
+ });
+ it("takes an invalid css unit and default the value to px", function () {
+ expect(parseLengthAndUnit("12fd")).toEqual(output);
+ expect(spy).toBeCalled();
+ });
+ });
+ describe("cssValue", function () {
+ it("is a function", function () {
+ expect(typeof cssValue).toEqual("function");
+ });
+ it("takes a number as the input and append px to the value", function () {
+ expect(cssValue(12)).toEqual("12px");
+ });
+ it("takes a string with valid css unit as the input and return the value", function () {
+ expect(cssValue("12%")).toEqual("12%");
+ expect(cssValue("12em")).toEqual("12em");
+ });
+ it("takes a string with invalid css unit as the input and default to px", function () {
+ expect(cssValue("12qw")).toEqual("12px");
+ });
+ });
+});
diff --git a/frontend/node_modules/react-spinners/esm/index.d.ts b/frontend/node_modules/react-spinners/esm/index.d.ts
new file mode 100644
index 000000000..478f2b91d
--- /dev/null
+++ b/frontend/node_modules/react-spinners/esm/index.d.ts
@@ -0,0 +1,23 @@
+export { default as BarLoader } from "./BarLoader";
+export { default as BeatLoader } from "./BeatLoader";
+export { default as BounceLoader } from "./BounceLoader";
+export { default as CircleLoader } from "./CircleLoader";
+export { default as ClimbingBoxLoader } from "./ClimbingBoxLoader";
+export { default as ClipLoader } from "./ClipLoader";
+export { default as ClockLoader } from "./ClockLoader";
+export { default as DotLoader } from "./DotLoader";
+export { default as FadeLoader } from "./FadeLoader";
+export { default as GridLoader } from "./GridLoader";
+export { default as HashLoader } from "./HashLoader";
+export { default as MoonLoader } from "./MoonLoader";
+export { default as PacmanLoader } from "./PacmanLoader";
+export { default as PropagateLoader } from "./PropagateLoader";
+export { default as PulseLoader } from "./PulseLoader";
+export { default as PuffLoader } from "./PuffLoader";
+export { default as RingLoader } from "./RingLoader";
+export { default as RiseLoader } from "./RiseLoader";
+export { default as RotateLoader } from "./RotateLoader";
+export { default as ScaleLoader } from "./ScaleLoader";
+export { default as SkewLoader } from "./SkewLoader";
+export { default as SquareLoader } from "./SquareLoader";
+export { default as SyncLoader } from "./SyncLoader";
diff --git a/frontend/node_modules/react-spinners/esm/index.js b/frontend/node_modules/react-spinners/esm/index.js
new file mode 100644
index 000000000..478f2b91d
--- /dev/null
+++ b/frontend/node_modules/react-spinners/esm/index.js
@@ -0,0 +1,23 @@
+export { default as BarLoader } from "./BarLoader";
+export { default as BeatLoader } from "./BeatLoader";
+export { default as BounceLoader } from "./BounceLoader";
+export { default as CircleLoader } from "./CircleLoader";
+export { default as ClimbingBoxLoader } from "./ClimbingBoxLoader";
+export { default as ClipLoader } from "./ClipLoader";
+export { default as ClockLoader } from "./ClockLoader";
+export { default as DotLoader } from "./DotLoader";
+export { default as FadeLoader } from "./FadeLoader";
+export { default as GridLoader } from "./GridLoader";
+export { default as HashLoader } from "./HashLoader";
+export { default as MoonLoader } from "./MoonLoader";
+export { default as PacmanLoader } from "./PacmanLoader";
+export { default as PropagateLoader } from "./PropagateLoader";
+export { default as PulseLoader } from "./PulseLoader";
+export { default as PuffLoader } from "./PuffLoader";
+export { default as RingLoader } from "./RingLoader";
+export { default as RiseLoader } from "./RiseLoader";
+export { default as RotateLoader } from "./RotateLoader";
+export { default as ScaleLoader } from "./ScaleLoader";
+export { default as SkewLoader } from "./SkewLoader";
+export { default as SquareLoader } from "./SquareLoader";
+export { default as SyncLoader } from "./SyncLoader";
diff --git a/frontend/node_modules/react-spinners/helpers/animation.d.ts b/frontend/node_modules/react-spinners/helpers/animation.d.ts
new file mode 100644
index 000000000..196a3bd20
--- /dev/null
+++ b/frontend/node_modules/react-spinners/helpers/animation.d.ts
@@ -0,0 +1 @@
+export declare const createAnimation: (loaderName: string, frames: string, suffix: string) => string;
diff --git a/frontend/node_modules/react-spinners/helpers/animation.js b/frontend/node_modules/react-spinners/helpers/animation.js
new file mode 100644
index 000000000..7626dfdf9
--- /dev/null
+++ b/frontend/node_modules/react-spinners/helpers/animation.js
@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createAnimation = void 0;
+var createAnimation = function (loaderName, frames, suffix) {
+ var animationName = "react-spinners-".concat(loaderName, "-").concat(suffix);
+ if (typeof window == "undefined" || !window.document) {
+ return animationName;
+ }
+ var styleEl = document.createElement("style");
+ document.head.appendChild(styleEl);
+ var styleSheet = styleEl.sheet;
+ var keyFrames = "\n @keyframes ".concat(animationName, " {\n ").concat(frames, "\n }\n ");
+ if (styleSheet) {
+ styleSheet.insertRule(keyFrames, 0);
+ }
+ return animationName;
+};
+exports.createAnimation = createAnimation;
diff --git a/frontend/node_modules/react-spinners/helpers/animation.server.test.d.ts b/frontend/node_modules/react-spinners/helpers/animation.server.test.d.ts
new file mode 100644
index 000000000..3275561ce
--- /dev/null
+++ b/frontend/node_modules/react-spinners/helpers/animation.server.test.d.ts
@@ -0,0 +1,4 @@
+/**
+ * @jest-environment node
+ */
+export {};
diff --git a/frontend/node_modules/react-spinners/helpers/animation.server.test.js b/frontend/node_modules/react-spinners/helpers/animation.server.test.js
new file mode 100644
index 000000000..4357f5381
--- /dev/null
+++ b/frontend/node_modules/react-spinners/helpers/animation.server.test.js
@@ -0,0 +1,12 @@
+"use strict";
+/**
+ * @jest-environment node
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+var animation_1 = require("./animation");
+describe("animation", function () {
+ it("should not throw an error on server side", function () {
+ var name = (0, animation_1.createAnimation)("TestLoader", "0% {left: -35%;right: 100%} 60% {left: 100%;right: -90%} 100% {left: 100%;right: -90%}", "my-suffix");
+ expect(name).toEqual("react-spinners-TestLoader-my-suffix");
+ });
+});
diff --git a/frontend/node_modules/react-spinners/helpers/animation.test.d.ts b/frontend/node_modules/react-spinners/helpers/animation.test.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/frontend/node_modules/react-spinners/helpers/animation.test.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/frontend/node_modules/react-spinners/helpers/animation.test.js b/frontend/node_modules/react-spinners/helpers/animation.test.js
new file mode 100644
index 000000000..e0db580f1
--- /dev/null
+++ b/frontend/node_modules/react-spinners/helpers/animation.test.js
@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var animation_1 = require("./animation");
+describe("createAnimation", function () {
+ it("should return name with suffix if passed in", function () {
+ var name = (0, animation_1.createAnimation)("TestLoader", "0% {left: -35%;right: 100%} 60% {left: 100%;right: -90%} 100% {left: 100%;right: -90%}", "my-suffix");
+ expect(name).toEqual("react-spinners-TestLoader-my-suffix");
+ });
+});
diff --git a/frontend/node_modules/react-spinners/helpers/colors.d.ts b/frontend/node_modules/react-spinners/helpers/colors.d.ts
new file mode 100644
index 000000000..e6115a944
--- /dev/null
+++ b/frontend/node_modules/react-spinners/helpers/colors.d.ts
@@ -0,0 +1 @@
+export declare const calculateRgba: (color: string, opacity: number) => string;
diff --git a/frontend/node_modules/react-spinners/helpers/colors.js b/frontend/node_modules/react-spinners/helpers/colors.js
new file mode 100644
index 000000000..b5fce3b00
--- /dev/null
+++ b/frontend/node_modules/react-spinners/helpers/colors.js
@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateRgba = void 0;
+var BasicColors;
+(function (BasicColors) {
+ BasicColors["maroon"] = "#800000";
+ BasicColors["red"] = "#FF0000";
+ BasicColors["orange"] = "#FFA500";
+ BasicColors["yellow"] = "#FFFF00";
+ BasicColors["olive"] = "#808000";
+ BasicColors["green"] = "#008000";
+ BasicColors["purple"] = "#800080";
+ BasicColors["fuchsia"] = "#FF00FF";
+ BasicColors["lime"] = "#00FF00";
+ BasicColors["teal"] = "#008080";
+ BasicColors["aqua"] = "#00FFFF";
+ BasicColors["blue"] = "#0000FF";
+ BasicColors["navy"] = "#000080";
+ BasicColors["black"] = "#000000";
+ BasicColors["gray"] = "#808080";
+ BasicColors["silver"] = "#C0C0C0";
+ BasicColors["white"] = "#FFFFFF";
+})(BasicColors || (BasicColors = {}));
+var calculateRgba = function (color, opacity) {
+ if (Object.keys(BasicColors).includes(color)) {
+ color = BasicColors[color];
+ }
+ if (color[0] === "#") {
+ color = color.slice(1);
+ }
+ if (color.length === 3) {
+ var res_1 = "";
+ color.split("").forEach(function (c) {
+ res_1 += c;
+ res_1 += c;
+ });
+ color = res_1;
+ }
+ var rgbValues = (color.match(/.{2}/g) || []).map(function (hex) { return parseInt(hex, 16); }).join(", ");
+ return "rgba(".concat(rgbValues, ", ").concat(opacity, ")");
+};
+exports.calculateRgba = calculateRgba;
diff --git a/frontend/node_modules/react-spinners/helpers/colors.test.d.ts b/frontend/node_modules/react-spinners/helpers/colors.test.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/frontend/node_modules/react-spinners/helpers/colors.test.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/frontend/node_modules/react-spinners/helpers/colors.test.js b/frontend/node_modules/react-spinners/helpers/colors.test.js
new file mode 100644
index 000000000..d29127da0
--- /dev/null
+++ b/frontend/node_modules/react-spinners/helpers/colors.test.js
@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var colors_1 = require("./colors");
+describe("calculateRgba", function () {
+ it("is a function", function () {
+ expect(typeof colors_1.calculateRgba).toEqual("function");
+ });
+ it("converts hash values to rgb", function () {
+ expect((0, colors_1.calculateRgba)("#ffffff", 1)).toEqual("rgba(255, 255, 255, 1)");
+ });
+ it("calculates 3 character hash value to the correct rgba", function () {
+ expect((0, colors_1.calculateRgba)("#fff", 1)).toEqual("rgba(255, 255, 255, 1)");
+ });
+ it("returns the passed in opacity as the part of the rgba value", function () {
+ expect((0, colors_1.calculateRgba)("#fff", 0.5)).toEqual("rgba(255, 255, 255, 0.5)");
+ });
+ it("calculated the correct rgba value without the starting # passed in", function () {
+ expect((0, colors_1.calculateRgba)("fff", 1)).toEqual("rgba(255, 255, 255, 1)");
+ });
+ it("calculates the correct rgba using basic color names", function () {
+ expect((0, colors_1.calculateRgba)("maroon", 0.7)).toEqual("rgba(128, 0, 0, 0.7)");
+ expect((0, colors_1.calculateRgba)("red", 0.7)).toEqual("rgba(255, 0, 0, 0.7)");
+ expect((0, colors_1.calculateRgba)("orange", 0.7)).toEqual("rgba(255, 165, 0, 0.7)");
+ expect((0, colors_1.calculateRgba)("yellow", 0.7)).toEqual("rgba(255, 255, 0, 0.7)");
+ expect((0, colors_1.calculateRgba)("olive", 0.7)).toEqual("rgba(128, 128, 0, 0.7)");
+ expect((0, colors_1.calculateRgba)("green", 0.7)).toEqual("rgba(0, 128, 0, 0.7)");
+ expect((0, colors_1.calculateRgba)("purple", 0.7)).toEqual("rgba(128, 0, 128, 0.7)");
+ expect((0, colors_1.calculateRgba)("fuchsia", 0.7)).toEqual("rgba(255, 0, 255, 0.7)");
+ expect((0, colors_1.calculateRgba)("lime", 0.7)).toEqual("rgba(0, 255, 0, 0.7)");
+ expect((0, colors_1.calculateRgba)("teal", 0.7)).toEqual("rgba(0, 128, 128, 0.7)");
+ expect((0, colors_1.calculateRgba)("aqua", 0.7)).toEqual("rgba(0, 255, 255, 0.7)");
+ expect((0, colors_1.calculateRgba)("blue", 0.7)).toEqual("rgba(0, 0, 255, 0.7)");
+ expect((0, colors_1.calculateRgba)("navy", 0.7)).toEqual("rgba(0, 0, 128, 0.7)");
+ expect((0, colors_1.calculateRgba)("black", 0.7)).toEqual("rgba(0, 0, 0, 0.7)");
+ expect((0, colors_1.calculateRgba)("gray", 0.7)).toEqual("rgba(128, 128, 128, 0.7)");
+ expect((0, colors_1.calculateRgba)("silver", 0.7)).toEqual("rgba(192, 192, 192, 0.7)");
+ expect((0, colors_1.calculateRgba)("white", 0.7)).toEqual("rgba(255, 255, 255, 0.7)");
+ });
+});
diff --git a/frontend/node_modules/react-spinners/helpers/props.d.ts b/frontend/node_modules/react-spinners/helpers/props.d.ts
new file mode 100644
index 000000000..62830656b
--- /dev/null
+++ b/frontend/node_modules/react-spinners/helpers/props.d.ts
@@ -0,0 +1,26 @@
+import { CSSProperties, DetailedHTMLProps, HTMLAttributes } from "react";
+export type LengthType = number | string;
+interface CommonProps extends DetailedHTMLProps, HTMLSpanElement> {
+ color?: string;
+ loading?: boolean;
+ cssOverride?: CSSProperties;
+ speedMultiplier?: number;
+}
+export interface LoaderHeightWidthProps extends CommonProps {
+ height?: LengthType;
+ width?: LengthType;
+}
+export interface LoaderSizeProps extends CommonProps {
+ size?: LengthType;
+}
+export interface LoaderSizeMarginProps extends CommonProps {
+ size?: LengthType;
+ margin?: LengthType;
+}
+export interface LoaderHeightWidthRadiusProps extends CommonProps {
+ height?: LengthType;
+ width?: LengthType;
+ radius?: LengthType;
+ margin?: LengthType;
+}
+export {};
diff --git a/frontend/node_modules/react-spinners/helpers/props.js b/frontend/node_modules/react-spinners/helpers/props.js
new file mode 100644
index 000000000..c8ad2e549
--- /dev/null
+++ b/frontend/node_modules/react-spinners/helpers/props.js
@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
diff --git a/frontend/node_modules/react-spinners/helpers/unitConverter.d.ts b/frontend/node_modules/react-spinners/helpers/unitConverter.d.ts
new file mode 100644
index 000000000..771955ed8
--- /dev/null
+++ b/frontend/node_modules/react-spinners/helpers/unitConverter.d.ts
@@ -0,0 +1,22 @@
+interface LengthObject {
+ value: number;
+ unit: string;
+}
+/**
+ * If size is a number, append px to the value as default unit.
+ * If size is a string, validate against list of valid units.
+ * If unit is valid, return size as is.
+ * If unit is invalid, console warn issue, replace with px as the unit.
+ *
+ * @param {(number | string)} size
+ * @return {LengthObject} LengthObject
+ */
+export declare function parseLengthAndUnit(size: number | string): LengthObject;
+/**
+ * Take value as an input and return valid css value
+ *
+ * @param {(number | string)} value
+ * @return {string} valid css value
+ */
+export declare function cssValue(value: number | string): string;
+export {};
diff --git a/frontend/node_modules/react-spinners/helpers/unitConverter.js b/frontend/node_modules/react-spinners/helpers/unitConverter.js
new file mode 100644
index 000000000..24d8ed34d
--- /dev/null
+++ b/frontend/node_modules/react-spinners/helpers/unitConverter.js
@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cssValue = exports.parseLengthAndUnit = void 0;
+var cssUnit = {
+ cm: true,
+ mm: true,
+ in: true,
+ px: true,
+ pt: true,
+ pc: true,
+ em: true,
+ ex: true,
+ ch: true,
+ rem: true,
+ vw: true,
+ vh: true,
+ vmin: true,
+ vmax: true,
+ "%": true,
+};
+/**
+ * If size is a number, append px to the value as default unit.
+ * If size is a string, validate against list of valid units.
+ * If unit is valid, return size as is.
+ * If unit is invalid, console warn issue, replace with px as the unit.
+ *
+ * @param {(number | string)} size
+ * @return {LengthObject} LengthObject
+ */
+function parseLengthAndUnit(size) {
+ if (typeof size === "number") {
+ return {
+ value: size,
+ unit: "px",
+ };
+ }
+ var value;
+ var valueString = (size.match(/^[0-9.]*/) || "").toString();
+ if (valueString.includes(".")) {
+ value = parseFloat(valueString);
+ }
+ else {
+ value = parseInt(valueString, 10);
+ }
+ var unit = (size.match(/[^0-9]*$/) || "").toString();
+ if (cssUnit[unit]) {
+ return {
+ value: value,
+ unit: unit,
+ };
+ }
+ console.warn("React Spinners: ".concat(size, " is not a valid css value. Defaulting to ").concat(value, "px."));
+ return {
+ value: value,
+ unit: "px",
+ };
+}
+exports.parseLengthAndUnit = parseLengthAndUnit;
+/**
+ * Take value as an input and return valid css value
+ *
+ * @param {(number | string)} value
+ * @return {string} valid css value
+ */
+function cssValue(value) {
+ var lengthWithunit = parseLengthAndUnit(value);
+ return "".concat(lengthWithunit.value).concat(lengthWithunit.unit);
+}
+exports.cssValue = cssValue;
diff --git a/frontend/node_modules/react-spinners/helpers/unitConverter.test.d.ts b/frontend/node_modules/react-spinners/helpers/unitConverter.test.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/frontend/node_modules/react-spinners/helpers/unitConverter.test.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/frontend/node_modules/react-spinners/helpers/unitConverter.test.js b/frontend/node_modules/react-spinners/helpers/unitConverter.test.js
new file mode 100644
index 000000000..3402db00b
--- /dev/null
+++ b/frontend/node_modules/react-spinners/helpers/unitConverter.test.js
@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var unitConverter_1 = require("./unitConverter");
+describe("unitConverter", function () {
+ describe("parseLengthAndUnit", function () {
+ var spy = jest.spyOn(console, "warn").mockImplementation();
+ var output = {
+ value: 12,
+ unit: "px",
+ };
+ it("is a function", function () {
+ expect(typeof unitConverter_1.parseLengthAndUnit).toEqual("function");
+ });
+ it("takes a number as the input and append px to the value", function () {
+ expect((0, unitConverter_1.parseLengthAndUnit)(12)).toEqual(output);
+ expect(spy).not.toBeCalled();
+ });
+ it("take a string with valid integer css unit and return an object with value and unit", function () {
+ expect((0, unitConverter_1.parseLengthAndUnit)("12px")).toEqual(output);
+ expect(spy).not.toBeCalled();
+ });
+ it("take a string with valid css float unit and return an object with value and unit", function () {
+ var output = {
+ value: 12.5,
+ unit: "px",
+ };
+ expect((0, unitConverter_1.parseLengthAndUnit)("12.5px")).toEqual(output);
+ expect(spy).not.toBeCalled();
+ });
+ it("takes an invalid css unit and default the value to px", function () {
+ expect((0, unitConverter_1.parseLengthAndUnit)("12fd")).toEqual(output);
+ expect(spy).toBeCalled();
+ });
+ });
+ describe("cssValue", function () {
+ it("is a function", function () {
+ expect(typeof unitConverter_1.cssValue).toEqual("function");
+ });
+ it("takes a number as the input and append px to the value", function () {
+ expect((0, unitConverter_1.cssValue)(12)).toEqual("12px");
+ });
+ it("takes a string with valid css unit as the input and return the value", function () {
+ expect((0, unitConverter_1.cssValue)("12%")).toEqual("12%");
+ expect((0, unitConverter_1.cssValue)("12em")).toEqual("12em");
+ });
+ it("takes a string with invalid css unit as the input and default to px", function () {
+ expect((0, unitConverter_1.cssValue)("12qw")).toEqual("12px");
+ });
+ });
+});
diff --git a/frontend/node_modules/react-spinners/index.d.ts b/frontend/node_modules/react-spinners/index.d.ts
new file mode 100644
index 000000000..478f2b91d
--- /dev/null
+++ b/frontend/node_modules/react-spinners/index.d.ts
@@ -0,0 +1,23 @@
+export { default as BarLoader } from "./BarLoader";
+export { default as BeatLoader } from "./BeatLoader";
+export { default as BounceLoader } from "./BounceLoader";
+export { default as CircleLoader } from "./CircleLoader";
+export { default as ClimbingBoxLoader } from "./ClimbingBoxLoader";
+export { default as ClipLoader } from "./ClipLoader";
+export { default as ClockLoader } from "./ClockLoader";
+export { default as DotLoader } from "./DotLoader";
+export { default as FadeLoader } from "./FadeLoader";
+export { default as GridLoader } from "./GridLoader";
+export { default as HashLoader } from "./HashLoader";
+export { default as MoonLoader } from "./MoonLoader";
+export { default as PacmanLoader } from "./PacmanLoader";
+export { default as PropagateLoader } from "./PropagateLoader";
+export { default as PulseLoader } from "./PulseLoader";
+export { default as PuffLoader } from "./PuffLoader";
+export { default as RingLoader } from "./RingLoader";
+export { default as RiseLoader } from "./RiseLoader";
+export { default as RotateLoader } from "./RotateLoader";
+export { default as ScaleLoader } from "./ScaleLoader";
+export { default as SkewLoader } from "./SkewLoader";
+export { default as SquareLoader } from "./SquareLoader";
+export { default as SyncLoader } from "./SyncLoader";
diff --git a/frontend/node_modules/react-spinners/index.js b/frontend/node_modules/react-spinners/index.js
new file mode 100644
index 000000000..184a2be56
--- /dev/null
+++ b/frontend/node_modules/react-spinners/index.js
@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+ return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SyncLoader = exports.SquareLoader = exports.SkewLoader = exports.ScaleLoader = exports.RotateLoader = exports.RiseLoader = exports.RingLoader = exports.PuffLoader = exports.PulseLoader = exports.PropagateLoader = exports.PacmanLoader = exports.MoonLoader = exports.HashLoader = exports.GridLoader = exports.FadeLoader = exports.DotLoader = exports.ClockLoader = exports.ClipLoader = exports.ClimbingBoxLoader = exports.CircleLoader = exports.BounceLoader = exports.BeatLoader = exports.BarLoader = void 0;
+var BarLoader_1 = require("./BarLoader");
+Object.defineProperty(exports, "BarLoader", { enumerable: true, get: function () { return __importDefault(BarLoader_1).default; } });
+var BeatLoader_1 = require("./BeatLoader");
+Object.defineProperty(exports, "BeatLoader", { enumerable: true, get: function () { return __importDefault(BeatLoader_1).default; } });
+var BounceLoader_1 = require("./BounceLoader");
+Object.defineProperty(exports, "BounceLoader", { enumerable: true, get: function () { return __importDefault(BounceLoader_1).default; } });
+var CircleLoader_1 = require("./CircleLoader");
+Object.defineProperty(exports, "CircleLoader", { enumerable: true, get: function () { return __importDefault(CircleLoader_1).default; } });
+var ClimbingBoxLoader_1 = require("./ClimbingBoxLoader");
+Object.defineProperty(exports, "ClimbingBoxLoader", { enumerable: true, get: function () { return __importDefault(ClimbingBoxLoader_1).default; } });
+var ClipLoader_1 = require("./ClipLoader");
+Object.defineProperty(exports, "ClipLoader", { enumerable: true, get: function () { return __importDefault(ClipLoader_1).default; } });
+var ClockLoader_1 = require("./ClockLoader");
+Object.defineProperty(exports, "ClockLoader", { enumerable: true, get: function () { return __importDefault(ClockLoader_1).default; } });
+var DotLoader_1 = require("./DotLoader");
+Object.defineProperty(exports, "DotLoader", { enumerable: true, get: function () { return __importDefault(DotLoader_1).default; } });
+var FadeLoader_1 = require("./FadeLoader");
+Object.defineProperty(exports, "FadeLoader", { enumerable: true, get: function () { return __importDefault(FadeLoader_1).default; } });
+var GridLoader_1 = require("./GridLoader");
+Object.defineProperty(exports, "GridLoader", { enumerable: true, get: function () { return __importDefault(GridLoader_1).default; } });
+var HashLoader_1 = require("./HashLoader");
+Object.defineProperty(exports, "HashLoader", { enumerable: true, get: function () { return __importDefault(HashLoader_1).default; } });
+var MoonLoader_1 = require("./MoonLoader");
+Object.defineProperty(exports, "MoonLoader", { enumerable: true, get: function () { return __importDefault(MoonLoader_1).default; } });
+var PacmanLoader_1 = require("./PacmanLoader");
+Object.defineProperty(exports, "PacmanLoader", { enumerable: true, get: function () { return __importDefault(PacmanLoader_1).default; } });
+var PropagateLoader_1 = require("./PropagateLoader");
+Object.defineProperty(exports, "PropagateLoader", { enumerable: true, get: function () { return __importDefault(PropagateLoader_1).default; } });
+var PulseLoader_1 = require("./PulseLoader");
+Object.defineProperty(exports, "PulseLoader", { enumerable: true, get: function () { return __importDefault(PulseLoader_1).default; } });
+var PuffLoader_1 = require("./PuffLoader");
+Object.defineProperty(exports, "PuffLoader", { enumerable: true, get: function () { return __importDefault(PuffLoader_1).default; } });
+var RingLoader_1 = require("./RingLoader");
+Object.defineProperty(exports, "RingLoader", { enumerable: true, get: function () { return __importDefault(RingLoader_1).default; } });
+var RiseLoader_1 = require("./RiseLoader");
+Object.defineProperty(exports, "RiseLoader", { enumerable: true, get: function () { return __importDefault(RiseLoader_1).default; } });
+var RotateLoader_1 = require("./RotateLoader");
+Object.defineProperty(exports, "RotateLoader", { enumerable: true, get: function () { return __importDefault(RotateLoader_1).default; } });
+var ScaleLoader_1 = require("./ScaleLoader");
+Object.defineProperty(exports, "ScaleLoader", { enumerable: true, get: function () { return __importDefault(ScaleLoader_1).default; } });
+var SkewLoader_1 = require("./SkewLoader");
+Object.defineProperty(exports, "SkewLoader", { enumerable: true, get: function () { return __importDefault(SkewLoader_1).default; } });
+var SquareLoader_1 = require("./SquareLoader");
+Object.defineProperty(exports, "SquareLoader", { enumerable: true, get: function () { return __importDefault(SquareLoader_1).default; } });
+var SyncLoader_1 = require("./SyncLoader");
+Object.defineProperty(exports, "SyncLoader", { enumerable: true, get: function () { return __importDefault(SyncLoader_1).default; } });
diff --git a/frontend/node_modules/react-spinners/package.json b/frontend/node_modules/react-spinners/package.json
new file mode 100644
index 000000000..4daa6d66f
--- /dev/null
+++ b/frontend/node_modules/react-spinners/package.json
@@ -0,0 +1,113 @@
+{
+ "name": "react-spinners",
+ "version": "0.13.8",
+ "description": "A collection of react loading spinners",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/davidhu2000/react-spinners.git"
+ },
+ "author": "David Hu (https://www.davidhu.io)",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/davidhu2000/react-spinners/issues"
+ },
+ "homepage": "https://www.davidhu.io/react-spinners/",
+ "contributors": [
+ "Cisco Guillaume (https://github.com/GuillaumeCisco)"
+ ],
+ "keywords": [
+ "react-spinners",
+ "react-spinner",
+ "react",
+ "reactjs",
+ "loader",
+ "loaders",
+ "loading",
+ "spinner",
+ "spinners",
+ "halogen",
+ "progress",
+ "activity"
+ ],
+ "main": "index.js",
+ "module": "esm/index.js",
+ "scripts": {
+ "prepare": "$npm_execpath run build:cjs & $npm_execpath run build:esm & $npm_execpath run build:umd && $npm_execpath run build",
+ "build": "tsc --project tsconfig.cjs.json",
+ "build:cjs": "tsc --project tsconfig.cjs.json --outDir cjs",
+ "build:esm": "tsc --project tsconfig.esm.json --outDir esm",
+ "build:umd": "tsc --project tsconfig.umd.json --outDir umd",
+ "build:demo": "npm run remove:demo; babel-node ./node_modules/.bin/webpack --config ./webpack.config.js",
+ "remove:demo": "rm docs/index.html; rm docs/javascripts/*",
+ "patch": "npm version patch && npm publish && npm run clean",
+ "minor": "npm version minor && npm publish && npm run clean",
+ "major": "npm version major && npm publish && npm run clean",
+ "watch": "babel-node ./node_modules/.bin/webpack --watch --config ./webpack.config.dev.js & open docs/index.html",
+ "clean": "rm -rf helpers/; rm -f *Loader.js; rm -f *Loader.d.ts; rm -f index.js; rm -f index.d.ts; rm -rf docs/js; rm -rf cjs; rm -rf esm; rm -rf umd",
+ "lint": "./node_modules/.bin/eslint src examples",
+ "test": "jest",
+ "coveralls": "cat ./coverage/lcov.info | ./node_modules/.bin/coveralls",
+ "remove:tag": "npm dist-tag rm react-spinners next",
+ "publish:next": "npm publish --tag next && npm run clean",
+ "storybook": "start-storybook --docs -p 6006",
+ "build-storybook": "build-storybook --docs -o ./docs/storybook"
+ },
+ "devDependencies": {
+ "@babel/cli": "^7.19.3",
+ "@babel/core": "^7.20.5",
+ "@babel/node": "^7.20.5",
+ "@babel/preset-env": "^7.20.2",
+ "@babel/preset-react": "^7.18.6",
+ "@mdx-js/react": "^2.1.5",
+ "@storybook/addon-actions": "^6.5.14",
+ "@storybook/addon-docs": "^6.5.14",
+ "@storybook/addon-essentials": "^6.5.14",
+ "@storybook/addon-google-analytics": "^6.2.9",
+ "@storybook/addon-interactions": "^6.5.14",
+ "@storybook/addon-links": "^6.5.14",
+ "@storybook/builder-webpack5": "^6.5.14",
+ "@storybook/manager-webpack5": "^6.5.14",
+ "@storybook/react": "^6.5.14",
+ "@storybook/testing-library": "^0.0.13",
+ "@testing-library/jest-dom": "^5.16.5",
+ "@testing-library/react": "^13.4.0",
+ "@types/jest": "^29.2.3",
+ "@types/react": "^18.0.26",
+ "@types/react-click-outside": "^3.0.3",
+ "@types/react-dom": "^18.0.9",
+ "@typescript-eslint/eslint-plugin": "^5.45.0",
+ "@typescript-eslint/parser": "^5.45.0",
+ "babel-loader": "^9.1.0",
+ "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
+ "coveralls": "^3.1.1",
+ "eslint": "^8.29.0",
+ "eslint-config-prettier": "^8.5.0",
+ "eslint-plugin-jest-dom": "^4.0.3",
+ "eslint-plugin-react": "^7.31.11",
+ "eslint-plugin-storybook": "^0.6.7",
+ "eslint-plugin-testing-library": "^5.9.1",
+ "eslint-plugin-unicorn": "^45.0.1",
+ "fork-ts-checker-webpack-plugin": "^7.2.13",
+ "html-webpack-plugin": "^5.5.0",
+ "jest": "^29.3.1",
+ "jest-environment-jsdom": "^29.3.1",
+ "prettier": "^2.8.0",
+ "react": "^18.2.0",
+ "react-click-outside": "^3.0.1",
+ "react-colorful": "^5.6.1",
+ "react-dom": "^18.2.0",
+ "react-ga4": "^1.4.1",
+ "storybook-dark-mode": "^1.1.2",
+ "ts-jest": "^29.0.3",
+ "ts-loader": "^9.4.2",
+ "typescript": "^4.9.3",
+ "webpack": "^5.75.0",
+ "webpack-cli": "^5.0.0"
+ },
+ "peerDependencies": {
+ "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+ },
+ "sideEffects": false,
+ "packageManager": "yarn@3.3.0"
+}
diff --git a/frontend/node_modules/react-spinners/scripts/build-docs.sh b/frontend/node_modules/react-spinners/scripts/build-docs.sh
new file mode 100644
index 000000000..9fb2ad083
--- /dev/null
+++ b/frontend/node_modules/react-spinners/scripts/build-docs.sh
@@ -0,0 +1,4 @@
+#!/bin/bash
+
+ruby scripts/stories.rb
+yarn run build-storybook --docs
diff --git a/frontend/node_modules/react-spinners/scripts/mod.rb b/frontend/node_modules/react-spinners/scripts/mod.rb
new file mode 100644
index 000000000..68f7fbf73
--- /dev/null
+++ b/frontend/node_modules/react-spinners/scripts/mod.rb
@@ -0,0 +1,79 @@
+filename = ARGV[0] + "Loader"
+
+path = "./src/#{filename}.tsx"
+file = File.open(path)
+
+`rm __tests__/#{filename}-tests.tsx`
+`rm __tests__/__snapshots__/#{filename}-tests.tsx.snap`
+
+def camelize(string)
+ string.split("-").map do |part, index|
+ return part if index == 0
+ part.capitalize
+ end.join("")
+end
+
+content = file.read
+
+puts "updating imports"
+content.sub!("/** @jsxImportSource @emotion/react */", "")
+content.sub!(/import .+ from "@emotion\/react";/, "")
+content.sub!("\"./interfaces\"", "\"./helpers/props\"; import { createAnimation } from \"./helpers/animation\"")
+
+puts "updating keyframes"
+content.gsub!(/keyframes`/, "createAnimation\(\"#{filename}\",`")
+content.sub!("`;", "`);")
+
+default = content.match(/public static defaultProps = (?.+)Defaults\((?.+)\);/)
+
+if default[:type] == "size"
+ props = "size = #{default[:values]},"
+elsif default[:type] == "heightWidthRadius"
+ values = default[:values].split(/\s*,\s*/)
+ props = "height = #{values[0]}, width = #{values[1]}, radius = #{values[2]},"
+end
+
+content.sub!(/class Loader extends React.PureComponent> {/) do
+ ["function #{filename}({",
+ " loading = true,",
+ ' color = "#000000",',
+ " speedMultiplier = 1,",
+ " css = {},",
+ " #{props}",
+ " ...additionalprops",
+ "}: #{$1}): JSX.Element | null {"].join("\n")
+end
+
+content.sub!(/public static defaultProps = .+;/, "")
+
+content.gsub!(/const.+this.props;/, "")
+
+content.sub!(/public style = \((.*)\): SerializedStyles => {\n.+$/) do
+ "const style = \(#{$1}\): React.CSSProperties => {"
+end
+
+content.gsub!("return css`", "return {")
+content.gsub!("`;", "};")
+
+content.gsub!(/public (\w+) = \(\): SerializedStyles => {\n\s+return {/) do
+ "const #{$1}: React.CSSProperties = {"
+end
+content.gsub!(/};\n\s+};/, "};")
+
+content.gsub!(/(.+):\s*(.+);/) do
+ "#{camelize($1)}: `#{$2}`,"
+end
+
+content.gsub!("css=", "style=")
+content.gsub!("{this.", "{")
+
+content.gsub!("public render(): JSX.Element | null {", "")
+content.gsub!(/}\n\s+}/, "}")
+
+content.gsub!("return loading ? (", "if (!loading) { return null; }\n\n return (")
+content.gsub!(") : `null`,", ");")
+
+content.gsub!("default Loader", "default #{filename}")
+
+# puts content
+File.write(path, content)
diff --git a/frontend/node_modules/react-spinners/scripts/stories.rb b/frontend/node_modules/react-spinners/scripts/stories.rb
new file mode 100644
index 000000000..e52202ab5
--- /dev/null
+++ b/frontend/node_modules/react-spinners/scripts/stories.rb
@@ -0,0 +1,35 @@
+paths = Dir.glob("./src/*.tsx").filter do |path|
+ !path.include?("stories") && !path.include?("test")
+end
+
+template = File.open("./scripts/stories.template").read
+
+def get_args(content)
+ args = []
+
+ description = "Can be number or string. When number, unit is assumed as px. When string, a unit is expected to be passed in"
+
+ ["size", "height", "width", "margin", "radius"].each do |arg|
+ if content.include?("#{arg} =")
+ args << " #{arg}: { description: \"#{description}\", control: { type: \"number\" } },"
+ end
+ end
+
+ args.join("\n")
+end
+
+paths.sort.each do |path|
+ puts "creating story for #{path}"
+ file = File.open(path)
+ loader = path.match(/\w+Loader/).to_s
+
+ arg_types = get_args(file.read)
+
+ story_path = path.sub(".tsx", ".stories.tsx").sub("./src", "./stories")
+
+ story = template.gsub("LOADER_NAME", loader).gsub("ARG_TYPES", arg_types)
+
+ File.write(story_path, story)
+end
+
+puts "done creating stories"
diff --git a/frontend/node_modules/react-spinners/scripts/stories.template b/frontend/node_modules/react-spinners/scripts/stories.template
new file mode 100644
index 000000000..afd0e975a
--- /dev/null
+++ b/frontend/node_modules/react-spinners/scripts/stories.template
@@ -0,0 +1,17 @@
+import * as React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import LOADER_NAME from "../src/LOADER_NAME";
+
+const argTypes = {
+ARG_TYPES
+}
+
+export default {
+ component: LOADER_NAME,
+ argTypes
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => ;
+
+ describe(name, () => {
+ it("should render nothing is loading prop is false", () => {
+ const { container } = render(, HTMLSpanElement> {
+ color?: string;
+ loading?: boolean;
+ cssOverride?: CSSProperties;
+ speedMultiplier?: number;
+}
+export interface LoaderHeightWidthProps extends CommonProps {
+ height?: LengthType;
+ width?: LengthType;
+}
+export interface LoaderSizeProps extends CommonProps {
+ size?: LengthType;
+}
+export interface LoaderSizeMarginProps extends CommonProps {
+ size?: LengthType;
+ margin?: LengthType;
+}
+export interface LoaderHeightWidthRadiusProps extends CommonProps {
+ height?: LengthType;
+ width?: LengthType;
+ radius?: LengthType;
+ margin?: LengthType;
+}
+export {};
diff --git a/frontend/node_modules/react-spinners/umd/helpers/props.js b/frontend/node_modules/react-spinners/umd/helpers/props.js
new file mode 100644
index 000000000..273e12fe0
--- /dev/null
+++ b/frontend/node_modules/react-spinners/umd/helpers/props.js
@@ -0,0 +1,12 @@
+(function (factory) {
+ if (typeof module === "object" && typeof module.exports === "object") {
+ var v = factory(require, exports);
+ if (v !== undefined) module.exports = v;
+ }
+ else if (typeof define === "function" && define.amd) {
+ define(["require", "exports"], factory);
+ }
+})(function (require, exports) {
+ "use strict";
+ Object.defineProperty(exports, "__esModule", { value: true });
+});
diff --git a/frontend/node_modules/react-spinners/umd/helpers/unitConverter.d.ts b/frontend/node_modules/react-spinners/umd/helpers/unitConverter.d.ts
new file mode 100644
index 000000000..771955ed8
--- /dev/null
+++ b/frontend/node_modules/react-spinners/umd/helpers/unitConverter.d.ts
@@ -0,0 +1,22 @@
+interface LengthObject {
+ value: number;
+ unit: string;
+}
+/**
+ * If size is a number, append px to the value as default unit.
+ * If size is a string, validate against list of valid units.
+ * If unit is valid, return size as is.
+ * If unit is invalid, console warn issue, replace with px as the unit.
+ *
+ * @param {(number | string)} size
+ * @return {LengthObject} LengthObject
+ */
+export declare function parseLengthAndUnit(size: number | string): LengthObject;
+/**
+ * Take value as an input and return valid css value
+ *
+ * @param {(number | string)} value
+ * @return {string} valid css value
+ */
+export declare function cssValue(value: number | string): string;
+export {};
diff --git a/frontend/node_modules/react-spinners/umd/helpers/unitConverter.js b/frontend/node_modules/react-spinners/umd/helpers/unitConverter.js
new file mode 100644
index 000000000..075d7b52b
--- /dev/null
+++ b/frontend/node_modules/react-spinners/umd/helpers/unitConverter.js
@@ -0,0 +1,79 @@
+(function (factory) {
+ if (typeof module === "object" && typeof module.exports === "object") {
+ var v = factory(require, exports);
+ if (v !== undefined) module.exports = v;
+ }
+ else if (typeof define === "function" && define.amd) {
+ define(["require", "exports"], factory);
+ }
+})(function (require, exports) {
+ "use strict";
+ Object.defineProperty(exports, "__esModule", { value: true });
+ exports.cssValue = exports.parseLengthAndUnit = void 0;
+ var cssUnit = {
+ cm: true,
+ mm: true,
+ in: true,
+ px: true,
+ pt: true,
+ pc: true,
+ em: true,
+ ex: true,
+ ch: true,
+ rem: true,
+ vw: true,
+ vh: true,
+ vmin: true,
+ vmax: true,
+ "%": true,
+ };
+ /**
+ * If size is a number, append px to the value as default unit.
+ * If size is a string, validate against list of valid units.
+ * If unit is valid, return size as is.
+ * If unit is invalid, console warn issue, replace with px as the unit.
+ *
+ * @param {(number | string)} size
+ * @return {LengthObject} LengthObject
+ */
+ function parseLengthAndUnit(size) {
+ if (typeof size === "number") {
+ return {
+ value: size,
+ unit: "px",
+ };
+ }
+ var value;
+ var valueString = (size.match(/^[0-9.]*/) || "").toString();
+ if (valueString.includes(".")) {
+ value = parseFloat(valueString);
+ }
+ else {
+ value = parseInt(valueString, 10);
+ }
+ var unit = (size.match(/[^0-9]*$/) || "").toString();
+ if (cssUnit[unit]) {
+ return {
+ value: value,
+ unit: unit,
+ };
+ }
+ console.warn("React Spinners: ".concat(size, " is not a valid css value. Defaulting to ").concat(value, "px."));
+ return {
+ value: value,
+ unit: "px",
+ };
+ }
+ exports.parseLengthAndUnit = parseLengthAndUnit;
+ /**
+ * Take value as an input and return valid css value
+ *
+ * @param {(number | string)} value
+ * @return {string} valid css value
+ */
+ function cssValue(value) {
+ var lengthWithunit = parseLengthAndUnit(value);
+ return "".concat(lengthWithunit.value).concat(lengthWithunit.unit);
+ }
+ exports.cssValue = cssValue;
+});
diff --git a/frontend/node_modules/react-spinners/umd/helpers/unitConverter.test.d.ts b/frontend/node_modules/react-spinners/umd/helpers/unitConverter.test.d.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/frontend/node_modules/react-spinners/umd/helpers/unitConverter.test.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/frontend/node_modules/react-spinners/umd/helpers/unitConverter.test.js b/frontend/node_modules/react-spinners/umd/helpers/unitConverter.test.js
new file mode 100644
index 000000000..763ac0152
--- /dev/null
+++ b/frontend/node_modules/react-spinners/umd/helpers/unitConverter.test.js
@@ -0,0 +1,60 @@
+(function (factory) {
+ if (typeof module === "object" && typeof module.exports === "object") {
+ var v = factory(require, exports);
+ if (v !== undefined) module.exports = v;
+ }
+ else if (typeof define === "function" && define.amd) {
+ define(["require", "exports", "./unitConverter"], factory);
+ }
+})(function (require, exports) {
+ "use strict";
+ Object.defineProperty(exports, "__esModule", { value: true });
+ var unitConverter_1 = require("./unitConverter");
+ describe("unitConverter", function () {
+ describe("parseLengthAndUnit", function () {
+ var spy = jest.spyOn(console, "warn").mockImplementation();
+ var output = {
+ value: 12,
+ unit: "px",
+ };
+ it("is a function", function () {
+ expect(typeof unitConverter_1.parseLengthAndUnit).toEqual("function");
+ });
+ it("takes a number as the input and append px to the value", function () {
+ expect((0, unitConverter_1.parseLengthAndUnit)(12)).toEqual(output);
+ expect(spy).not.toBeCalled();
+ });
+ it("take a string with valid integer css unit and return an object with value and unit", function () {
+ expect((0, unitConverter_1.parseLengthAndUnit)("12px")).toEqual(output);
+ expect(spy).not.toBeCalled();
+ });
+ it("take a string with valid css float unit and return an object with value and unit", function () {
+ var output = {
+ value: 12.5,
+ unit: "px",
+ };
+ expect((0, unitConverter_1.parseLengthAndUnit)("12.5px")).toEqual(output);
+ expect(spy).not.toBeCalled();
+ });
+ it("takes an invalid css unit and default the value to px", function () {
+ expect((0, unitConverter_1.parseLengthAndUnit)("12fd")).toEqual(output);
+ expect(spy).toBeCalled();
+ });
+ });
+ describe("cssValue", function () {
+ it("is a function", function () {
+ expect(typeof unitConverter_1.cssValue).toEqual("function");
+ });
+ it("takes a number as the input and append px to the value", function () {
+ expect((0, unitConverter_1.cssValue)(12)).toEqual("12px");
+ });
+ it("takes a string with valid css unit as the input and return the value", function () {
+ expect((0, unitConverter_1.cssValue)("12%")).toEqual("12%");
+ expect((0, unitConverter_1.cssValue)("12em")).toEqual("12em");
+ });
+ it("takes a string with invalid css unit as the input and default to px", function () {
+ expect((0, unitConverter_1.cssValue)("12qw")).toEqual("12px");
+ });
+ });
+ });
+});
diff --git a/frontend/node_modules/react-spinners/umd/index.d.ts b/frontend/node_modules/react-spinners/umd/index.d.ts
new file mode 100644
index 000000000..478f2b91d
--- /dev/null
+++ b/frontend/node_modules/react-spinners/umd/index.d.ts
@@ -0,0 +1,23 @@
+export { default as BarLoader } from "./BarLoader";
+export { default as BeatLoader } from "./BeatLoader";
+export { default as BounceLoader } from "./BounceLoader";
+export { default as CircleLoader } from "./CircleLoader";
+export { default as ClimbingBoxLoader } from "./ClimbingBoxLoader";
+export { default as ClipLoader } from "./ClipLoader";
+export { default as ClockLoader } from "./ClockLoader";
+export { default as DotLoader } from "./DotLoader";
+export { default as FadeLoader } from "./FadeLoader";
+export { default as GridLoader } from "./GridLoader";
+export { default as HashLoader } from "./HashLoader";
+export { default as MoonLoader } from "./MoonLoader";
+export { default as PacmanLoader } from "./PacmanLoader";
+export { default as PropagateLoader } from "./PropagateLoader";
+export { default as PulseLoader } from "./PulseLoader";
+export { default as PuffLoader } from "./PuffLoader";
+export { default as RingLoader } from "./RingLoader";
+export { default as RiseLoader } from "./RiseLoader";
+export { default as RotateLoader } from "./RotateLoader";
+export { default as ScaleLoader } from "./ScaleLoader";
+export { default as SkewLoader } from "./SkewLoader";
+export { default as SquareLoader } from "./SquareLoader";
+export { default as SyncLoader } from "./SyncLoader";
diff --git a/frontend/node_modules/react-spinners/umd/index.js b/frontend/node_modules/react-spinners/umd/index.js
new file mode 100644
index 000000000..05feabbeb
--- /dev/null
+++ b/frontend/node_modules/react-spinners/umd/index.js
@@ -0,0 +1,62 @@
+var __importDefault = (this && this.__importDefault) || function (mod) {
+ return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+(function (factory) {
+ if (typeof module === "object" && typeof module.exports === "object") {
+ var v = factory(require, exports);
+ if (v !== undefined) module.exports = v;
+ }
+ else if (typeof define === "function" && define.amd) {
+ define(["require", "exports", "./BarLoader", "./BeatLoader", "./BounceLoader", "./CircleLoader", "./ClimbingBoxLoader", "./ClipLoader", "./ClockLoader", "./DotLoader", "./FadeLoader", "./GridLoader", "./HashLoader", "./MoonLoader", "./PacmanLoader", "./PropagateLoader", "./PulseLoader", "./PuffLoader", "./RingLoader", "./RiseLoader", "./RotateLoader", "./ScaleLoader", "./SkewLoader", "./SquareLoader", "./SyncLoader"], factory);
+ }
+})(function (require, exports) {
+ "use strict";
+ Object.defineProperty(exports, "__esModule", { value: true });
+ exports.SyncLoader = exports.SquareLoader = exports.SkewLoader = exports.ScaleLoader = exports.RotateLoader = exports.RiseLoader = exports.RingLoader = exports.PuffLoader = exports.PulseLoader = exports.PropagateLoader = exports.PacmanLoader = exports.MoonLoader = exports.HashLoader = exports.GridLoader = exports.FadeLoader = exports.DotLoader = exports.ClockLoader = exports.ClipLoader = exports.ClimbingBoxLoader = exports.CircleLoader = exports.BounceLoader = exports.BeatLoader = exports.BarLoader = void 0;
+ var BarLoader_1 = require("./BarLoader");
+ Object.defineProperty(exports, "BarLoader", { enumerable: true, get: function () { return __importDefault(BarLoader_1).default; } });
+ var BeatLoader_1 = require("./BeatLoader");
+ Object.defineProperty(exports, "BeatLoader", { enumerable: true, get: function () { return __importDefault(BeatLoader_1).default; } });
+ var BounceLoader_1 = require("./BounceLoader");
+ Object.defineProperty(exports, "BounceLoader", { enumerable: true, get: function () { return __importDefault(BounceLoader_1).default; } });
+ var CircleLoader_1 = require("./CircleLoader");
+ Object.defineProperty(exports, "CircleLoader", { enumerable: true, get: function () { return __importDefault(CircleLoader_1).default; } });
+ var ClimbingBoxLoader_1 = require("./ClimbingBoxLoader");
+ Object.defineProperty(exports, "ClimbingBoxLoader", { enumerable: true, get: function () { return __importDefault(ClimbingBoxLoader_1).default; } });
+ var ClipLoader_1 = require("./ClipLoader");
+ Object.defineProperty(exports, "ClipLoader", { enumerable: true, get: function () { return __importDefault(ClipLoader_1).default; } });
+ var ClockLoader_1 = require("./ClockLoader");
+ Object.defineProperty(exports, "ClockLoader", { enumerable: true, get: function () { return __importDefault(ClockLoader_1).default; } });
+ var DotLoader_1 = require("./DotLoader");
+ Object.defineProperty(exports, "DotLoader", { enumerable: true, get: function () { return __importDefault(DotLoader_1).default; } });
+ var FadeLoader_1 = require("./FadeLoader");
+ Object.defineProperty(exports, "FadeLoader", { enumerable: true, get: function () { return __importDefault(FadeLoader_1).default; } });
+ var GridLoader_1 = require("./GridLoader");
+ Object.defineProperty(exports, "GridLoader", { enumerable: true, get: function () { return __importDefault(GridLoader_1).default; } });
+ var HashLoader_1 = require("./HashLoader");
+ Object.defineProperty(exports, "HashLoader", { enumerable: true, get: function () { return __importDefault(HashLoader_1).default; } });
+ var MoonLoader_1 = require("./MoonLoader");
+ Object.defineProperty(exports, "MoonLoader", { enumerable: true, get: function () { return __importDefault(MoonLoader_1).default; } });
+ var PacmanLoader_1 = require("./PacmanLoader");
+ Object.defineProperty(exports, "PacmanLoader", { enumerable: true, get: function () { return __importDefault(PacmanLoader_1).default; } });
+ var PropagateLoader_1 = require("./PropagateLoader");
+ Object.defineProperty(exports, "PropagateLoader", { enumerable: true, get: function () { return __importDefault(PropagateLoader_1).default; } });
+ var PulseLoader_1 = require("./PulseLoader");
+ Object.defineProperty(exports, "PulseLoader", { enumerable: true, get: function () { return __importDefault(PulseLoader_1).default; } });
+ var PuffLoader_1 = require("./PuffLoader");
+ Object.defineProperty(exports, "PuffLoader", { enumerable: true, get: function () { return __importDefault(PuffLoader_1).default; } });
+ var RingLoader_1 = require("./RingLoader");
+ Object.defineProperty(exports, "RingLoader", { enumerable: true, get: function () { return __importDefault(RingLoader_1).default; } });
+ var RiseLoader_1 = require("./RiseLoader");
+ Object.defineProperty(exports, "RiseLoader", { enumerable: true, get: function () { return __importDefault(RiseLoader_1).default; } });
+ var RotateLoader_1 = require("./RotateLoader");
+ Object.defineProperty(exports, "RotateLoader", { enumerable: true, get: function () { return __importDefault(RotateLoader_1).default; } });
+ var ScaleLoader_1 = require("./ScaleLoader");
+ Object.defineProperty(exports, "ScaleLoader", { enumerable: true, get: function () { return __importDefault(ScaleLoader_1).default; } });
+ var SkewLoader_1 = require("./SkewLoader");
+ Object.defineProperty(exports, "SkewLoader", { enumerable: true, get: function () { return __importDefault(SkewLoader_1).default; } });
+ var SquareLoader_1 = require("./SquareLoader");
+ Object.defineProperty(exports, "SquareLoader", { enumerable: true, get: function () { return __importDefault(SquareLoader_1).default; } });
+ var SyncLoader_1 = require("./SyncLoader");
+ Object.defineProperty(exports, "SyncLoader", { enumerable: true, get: function () { return __importDefault(SyncLoader_1).default; } });
+});
diff --git a/frontend/package.json b/frontend/package.json
index e00eb5221..b86461cec 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
"react-dom": "^18.2.0",
"react-resizable": "^3.0.5",
"react-scripts": "5.0.1",
+ "react-spinners": "^0.13.8",
"react-split-pane": "^0.1.92",
"react-treebeard": "^3.2.4",
"typescript": "^5.2.2",
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 38a7d51e8..3a3bb031d 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,19 +1,71 @@
// App.js
-import React, { useState } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
+import { useUnload } from './components/comms_manager/useUnload';
import { Resizable } from 'react-resizable';
import HeaderMenu from './components/header_menu/HeaderMenu';
import FileBrowser from './components/file_browser/FileBrowser';
import FileEditor from './components/file_editor/FileEditor';
import './App.css';
import DiagramEditor from './components/diagram_editor/DiagramEditor';
+import VncViewer from './components/vnc_viewer/VncViewer'
+import CommsManager from './components/comms_manager/CommsManager';
const App = () => {
- const [editorWidth, setEditorWidth] = useState(700);
+ const [editorWidth, setEditorWidth] = useState(807);
const [currentFilename, setCurrentFilename] = useState('');
- const [currentProjectname, setCurrentProjectname] = useState('');
+ const [currentProjectname, setCurrentProjectname] = useState('visual_follow_person');
const [modelJson, setModelJson] = useState('');
const [projectChanges, setProjectChanges] = useState(false);
+ const [gazeboEnabled, setGazeboEnabled] = useState(false);
+ const [manager, setManager] = useState(null);
+
+ var universe_config = {
+ "name": "follow_person_ros2",
+ "launch_file_path": "/opt/jderobot/Launchers/follow_person.launch.py",
+ "ros_version": "ROS2",
+ "visualization": "gazebo_rae",
+ "world": "gazebo",
+ "template": "RoboticsAcademy/exercises/static/exercises/follow_person_newmanager/python_template/",
+ "exercise_id": "follow_person_newmanager"
+ }
+
+ useEffect(() => {
+ const newManager = CommsManager("ws://127.0.0.1:7163");
+ setManager(newManager);
+ }, []);
+
+ useUnload(() => {
+ manager.disconnect();
+ });
+
+ const connectWithRetry = () => {
+ console.log("The manager is up!");
+ manager.connect()
+ .then(() => {
+ console.log("Connected!");
+ manager.launchWorld(universe_config)
+ .then(() => {
+ console.log("World launched!")
+ manager.prepareVisualization(universe_config.visualization)
+ .then(() => {
+ console.log("Viz ready!")
+ setGazeboEnabled(true);
+ })
+ })
+ })
+ .catch((e) => {
+ // Connection failed, try again after a delay
+ console.log("Connection failed, trying again!")
+ setTimeout(connectWithRetry, 1000);
+ });
+ }
+
+ useEffect(() => {
+ if (manager) {
+ connectWithRetry();
+ }
+ }, [manager]); // Re-run if the manager instance changes
const onResize = (key, size) => {
switch (key) {
@@ -63,11 +115,16 @@ const App = () => {
diff --git a/frontend/src/components/diagram_editor/img/run.svg b/frontend/src/components/diagram_editor/img/run.svg
new file mode 100644
index 000000000..bad5918f1
--- /dev/null
+++ b/frontend/src/components/diagram_editor/img/run.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/components/diagram_editor/img/stop.svg b/frontend/src/components/diagram_editor/img/stop.svg
new file mode 100644
index 000000000..2786bd227
--- /dev/null
+++ b/frontend/src/components/diagram_editor/img/stop.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/components/vnc_viewer/VncViewer.css b/frontend/src/components/vnc_viewer/VncViewer.css
new file mode 100644
index 000000000..e2bddeaab
--- /dev/null
+++ b/frontend/src/components/vnc_viewer/VncViewer.css
@@ -0,0 +1,11 @@
+.viewer {
+ height: 40vh;
+ width: 100%;
+}
+
+.loader {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 40vh;
+}
\ No newline at end of file
diff --git a/frontend/src/components/vnc_viewer/VncViewer.js b/frontend/src/components/vnc_viewer/VncViewer.js
new file mode 100644
index 000000000..f335bed3d
--- /dev/null
+++ b/frontend/src/components/vnc_viewer/VncViewer.js
@@ -0,0 +1,28 @@
+import './VncViewer.css';
+import BounceLoader from "react-spinners/BounceLoader";
+
+const VncViewer = ({gazeboEnabled}) => {
+
+ return (
+
+ );
+};
+
+export default VncViewer;
diff --git a/frontend/yarn-error.log b/frontend/yarn-error.log
index 7edc0066a..e69de29bb 100644
--- a/frontend/yarn-error.log
+++ b/frontend/yarn-error.log
@@ -1,10573 +0,0 @@
-Arguments:
- /home/oscar/.nvm/versions/node/v20.8.0/bin/node /usr/local/bin/yarn add projectstorm
-
-PATH:
- /home/oscar/.nvm/versions/node/v20.8.0/bin:/home/oscar/miniconda3/condabin:/home/oscar/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/snap/bin
-
-Yarn version:
- 1.22.19
-
-Node version:
- 20.8.0
-
-Platform:
- linux x64
-
-Trace:
- Error: https://registry.yarnpkg.com/projectstorm: Not found
- at params.callback [as _callback] (/usr/local/lib/node_modules/yarn/lib/cli.js:66145:18)
- at self.callback (/usr/local/lib/node_modules/yarn/lib/cli.js:140890:22)
- at Request.emit (node:events:514:28)
- at Request.