@xyo-network/react-powered-by-xyo 2.57.8

package/dist/esm/components/PoweredByXyoFlexBox.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Paper, Typography } from '@mui/material';
+import { useAsyncEffect } from '@xylabs/react-async-effect';
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox';
+import { LinkEx } from '@xylabs/react-link';
+import { useProvidedNode } from '@xyo-network/react-node';
+import { useState } from 'react';
+import { xyoColorLogoText } from '../img';
+import { XyoBusyFlexBox } from './XyoBusyFlexBox';
+export const PoweredByXyoFlexbox = ({ 
+// leave animation on by default so when done testing, removing the prop lets it work
+disableAnimation = false, logoHeight, logoTextSize, ...props }) => {
+    const [node] = useProvidedNode();
+    const [busyCount, setBusyCount] = useState(0);
+    useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+        let unsubscribes;
+        if (disableAnimation) {
+            return;
+        }
+        else {
+            const mods = await node?.resolve();
+            unsubscribes = mods?.map((mod) => {
+                return mod.on('moduleBusy', ({ busy }) => {
+                    if (busy) {
+                        setBusyCount(busyCount + 1);
+                    }
+                    else {
+                        setBusyCount(busyCount - 1);
+                    }
+                });
+            });
+        }
+        return () => {
+            unsubscribes?.forEach((unsubscribe) => unsubscribe?.());
+        };
+    }, [busyCount, disableAnimation, node]);
+    return (_jsx(FlexCol, { alignItems: "stretch", position: "absolute", bottom: "0", left: "0", ...props, children: _jsx(LinkEx, { href: "https://xyo.network", target: "_blank", children: _jsx(Paper, { sx: { borderRadius: 0, boxShadow: 0 }, children: _jsxs(FlexCol, { padding: 0.5, children: [_jsx(Typography, { style: { fontSize: logoTextSize ?? 10 }, fontSize: "small", children: "Powered by" }), _jsxs(FlexRow, { children: [_jsx(XyoBusyFlexBox, { busy: !!busyCount }), _jsx("img", { src: xyoColorLogoText, height: logoHeight ?? 24 })] })] }) }) }) }));
+};
+//# sourceMappingURL=PoweredByXyoFlexBox.js.map

package/dist/esm/components/PoweredByXyoFlexBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PoweredByXyoFlexBox.js","sourceRoot":"","sources":["../../../src/components/PoweredByXyoFlexBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,OAAO,EAAgB,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAE3C,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAQjD,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC;AACtE,qFAAqF;AACrF,gBAAgB,GAAG,KAAK,EACxB,UAAU,EACV,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,CAAC,IAAI,CAAC,GAAG,eAAe,EAAE,CAAA;IAChC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAE7C,cAAc;IACZ,uDAAuD;IACvD,KAAK,IAAI,EAAE;QACT,IAAI,YAAoD,CAAA;QACxD,IAAI,gBAAgB,EAAE;YACpB,OAAM;SACP;aAAM;YACL,MAAM,IAAI,GAAG,MAAM,IAAI,EAAE,OAAO,EAAE,CAAA;YAClC,YAAY,GAAG,IAAI,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;gBAC/B,OAAO,GAAG,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;oBACvC,IAAI,IAAI,EAAE;wBACR,YAAY,CAAC,SAAS,GAAG,CAAC,CAAC,CAAA;qBAC5B;yBAAM;wBACL,YAAY,CAAC,SAAS,GAAG,CAAC,CAAC,CAAA;qBAC5B;gBACH,CAAC,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;SACH;QACD,OAAO,GAAG,EAAE;YACV,YAAY,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA;QACzD,CAAC,CAAA;IACH,CAAC,EACD,CAAC,SAAS,EAAE,gBAAgB,EAAE,IAAI,CAAC,CACpC,CAAA;IAED,OAAO,CACL,KAAC,OAAO,IAAC,UAAU,EAAC,SAAS,EAAC,QAAQ,EAAC,UAAU,EAAC,MAAM,EAAC,GAAG,EAAC,IAAI,EAAC,GAAG,KAAK,KAAK,YAC7E,KAAC,MAAM,IAAC,IAAI,EAAC,qBAAqB,EAAC,MAAM,EAAC,QAAQ,YAChD,KAAC,KAAK,IAAC,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,YAC1C,MAAC,OAAO,IAAC,OAAO,EAAE,GAAG,aACnB,KAAC,UAAU,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,YAAY,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAC,OAAO,2BAExD,EACb,MAAC,OAAO,eACN,KAAC,cAAc,IAAC,IAAI,EAAE,CAAC,CAAC,SAAS,GAAI,EACrC,cAAK,GAAG,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,IAAI,EAAE,GAAI,IAChD,IACF,GACJ,GACD,GACD,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/XyoBusyFlexBox.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FlexCol } from '@xylabs/react-flexbox';
+import { xyoColorLogo } from '../img';
+export const XyoBusyFlexBox = ({ widthInPixels, busy, ...props }) => {
+    return (_jsx(FlexCol, { sx: {
+            '@keyframes spin': {
+                '0%': {
+                    transform: 'rotate(360deg)',
+                },
+                '100%': {
+                    transform: 'rotate(0deg)',
+                },
+            },
+            animation: busy ? 'spin 2s linear infinite' : undefined,
+            animationDirection: 'reverse',
+        }, ...props, children: _jsx("img", { src: xyoColorLogo, height: widthInPixels ?? 22 }) }));
+};
+//# sourceMappingURL=XyoBusyFlexBox.js.map

package/dist/esm/components/XyoBusyFlexBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"XyoBusyFlexBox.js","sourceRoot":"","sources":["../../../src/components/XyoBusyFlexBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAA;AAOrC,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjG,OAAO,CACL,KAAC,OAAO,IACN,EAAE,EAAE;YACF,iBAAiB,EAAE;gBACjB,IAAI,EAAE;oBACJ,SAAS,EAAE,gBAAgB;iBAC5B;gBACD,MAAM,EAAE;oBACN,SAAS,EAAE,cAAc;iBAC1B;aACF;YACD,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,SAAS;YACvD,kBAAkB,EAAE,SAAS;SAC9B,KACG,KAAK,YAET,cAAK,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,IAAI,EAAE,GAAI,GAC/C,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/index.js

@@ -0,0 +1,3 @@
+export * from './PoweredByXyoFlexBox';
+export * from './XyoBusyFlexBox';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA"}

package/dist/esm/img/index.js

@@ -0,0 +1,4 @@
+import xyoColorLogo from './xyo-color-logo.svg';
+import xyoColorLogoText from './xyo-color-logo-text-only.svg';
+export { xyoColorLogo, xyoColorLogoText };
+//# sourceMappingURL=index.js.map

package/dist/esm/img/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/img/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,sBAAsB,CAAA;AAC/C,OAAO,gBAAgB,MAAM,gCAAgC,CAAA;AAE7D,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/esm/img/xyo-color-logo-text-only.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="250 0 451 238"><defs><style>.cls-1{fill:#8d8fc6;}.cls-2{fill:#579fd6;}.cls-3{fill:#f27046;}.cls-4{fill:#eb407a;}</style></defs><path class="cls-1" d="M570,55.35a61.13,61.13,0,1,0,61.11,61.1A61.21,61.21,0,0,0,570,55.35Zm-266.4.1-8.2,8.14,53,52.91-53,52.91,8.2,8.2,52.91-53,44.77,44.77,8.14,8.2,114-114-8.14-8.14-52.91,52.91-53-52.91-8.14,8.14-44.77,44.77ZM570,66.84a49.61,49.61,0,1,1-49.61,49.61A49.54,49.54,0,0,1,570,66.84ZM409.45,71.73l44.77,44.77-44.77,44.77L364.68,116.5Z"/></svg>

package/dist/esm/img/xyo-color-logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 238"><defs><style>.cls-1{fill:#8d8fc6;}.cls-2{fill:#579fd6;}.cls-3{fill:#f27046;}.cls-4{fill:#eb407a;}</style></defs><path class="cls-1" d="M74.5,28.33,21.29,120.5,74.5,212.67H180.94l1.76-3,51.46-89.13L180.94,28.33ZM84.65,40.54h78.83L111.65,56.93a15.85,15.85,0,0,1,2,5l59.66-18.81L185.22,101a20.12,20.12,0,0,1,5.36-.78l-10-47.91,37.87,65.53h-7.62a24.21,24.21,0,0,1,.15,2.68,23.29,23.29,0,0,1-.15,2.68h7.62l-39.1,67.75,10.92-50.13A20.57,20.57,0,0,1,185,140l-12.88,59-58.37-19.53a17.61,17.61,0,0,1-1.7,5l47.5,15.92H84.65l4-6.85A20.17,20.17,0,0,1,83.93,191L80,197.78,42.67,133.13l37,32.66a20.52,20.52,0,0,1,3.6-4L36.69,120.66,85,77.79a17.45,17.45,0,0,1-3.19-4.32l-39.46,35L80,43.22l5.56,9.69A17.51,17.51,0,0,1,90.12,50Zm28.24,31.17a16.15,16.15,0,0,1-2.68,4.64l62,35.81a19.74,19.74,0,0,1,2.83-4.54Zm-20,10.51v75.33a18,18,0,0,1,2.47-.16,17.18,17.18,0,0,1,2.89.21v-75a11.21,11.21,0,0,1-1.29,0,17.57,17.57,0,0,1-4.07-.47Zm79.34,46.63-62.08,35.81a18.45,18.45,0,0,1,2.68,4.68l62.23-36a19.68,19.68,0,0,1-2.83-4.53Z"/><path class="cls-2" d="M97,48.58a17.06,17.06,0,1,0,17,17,17.08,17.08,0,0,0-17-17Zm0,5.36a11.7,11.7,0,1,1-11.7,11.69A11.65,11.65,0,0,1,97,53.94Z"/><path class="cls-3" d="M95.37,157.39a18.73,18.73,0,1,0,18.7,18.7,18.74,18.74,0,0,0-18.7-18.7Zm0,5.31A13.4,13.4,0,1,1,82,176.09a13.37,13.37,0,0,1,13.4-13.39Z"/><path class="cls-4" d="M190.73,100.2A20.3,20.3,0,1,0,211,120.5a20.34,20.34,0,0,0-20.3-20.3Zm0,5.36a14.94,14.94,0,1,1-14.94,14.94,14.88,14.88,0,0,1,14.94-14.94Z"/></svg>

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/types/components/PoweredByXyoFlexBox.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+export interface PoweredByXyoFlexboxProps extends FlexBoxProps {
+    disableAnimation?: boolean;
+    logoHeight?: number;
+    logoTextSize?: number;
+}
+export declare const PoweredByXyoFlexbox: React.FC<PoweredByXyoFlexboxProps>;
+//# sourceMappingURL=PoweredByXyoFlexBox.d.ts.map

package/dist/types/components/PoweredByXyoFlexBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PoweredByXyoFlexBox.d.ts","sourceRoot":"","sources":["../../../src/components/PoweredByXyoFlexBox.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAoB,MAAM,uBAAuB,CAAA;AAStE,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAoDlE,CAAA"}

package/dist/types/components/XyoBusyFlexBox.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+export type XyoBusyFlexBoxProps = FlexBoxProps & {
+    busy?: boolean;
+    widthInPixels?: number;
+};
+export declare const XyoBusyFlexBox: React.FC<XyoBusyFlexBoxProps>;
+//# sourceMappingURL=XyoBusyFlexBox.d.ts.map

package/dist/types/components/XyoBusyFlexBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"XyoBusyFlexBox.d.ts","sourceRoot":"","sources":["../../../src/components/XyoBusyFlexBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAI7D,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAoBxD,CAAA"}

package/dist/types/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './PoweredByXyoFlexBox';
+export * from './XyoBusyFlexBox';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA"}

package/dist/types/img/index.d.ts

@@ -0,0 +1,4 @@
+import xyoColorLogo from './xyo-color-logo.svg';
+import xyoColorLogoText from './xyo-color-logo-text-only.svg';
+export { xyoColorLogo, xyoColorLogoText };
+//# sourceMappingURL=index.d.ts.map

package/dist/types/img/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/img/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,sBAAsB,CAAA;AAC/C,OAAO,gBAAgB,MAAM,gCAAgC,CAAA;AAE7D,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@xyo-network/react-powered-by-xyo",
+  "author": {
+    "email": "support@xyo.network",
+    "name": "XYO Development Team",
+    "url": "https://xyo.network"
+  },
+  "bugs": {
+    "email": "support@xyo.network",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
+  },
+  "dependencies": {
+    "@xylabs/react-async-effect": "~2.17.7",
+    "@xylabs/react-flexbox": "~2.17.7",
+    "@xylabs/react-link": "~2.17.7",
+    "@xyo-network/module-events": "~2.68.0",
+    "@xyo-network/react-node": "~2.59.1"
+  },
+  "peerDependencies": {
+    "@mui/icons-material": "^5",
+    "@mui/material": "^5",
+    "@mui/styles": "^5",
+    "axios": "^1.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0"
+  },
+  "devDependencies": {
+    "@storybook/react": "^7.1.1",
+    "@xylabs/ts-scripts-yarn3": "^2.19.0",
+    "typescript": "^5.1.6"
+  },
+  "description": "Common React library for all XYO projects that use React",
+  "browser": "dist/esm/index.js",
+  "docs": "dist/docs.json",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "browser": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "default": "./dist/esm/index.js"
+    },
+    "./dist/docs.json": {
+      "default": "./dist/docs.json"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "homepage": "https://xyo.network",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "license": "LGPL-3.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "scripts": {
+    "lint-pkg": "npmPkgJsonLint .",
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
+  },
+  "sideEffects": false,
+  "types": "dist/types/index.d.ts",
+  "version": "2.57.8"
+}

package/src/components/PoweredByXyoFlexBox.tsx

@@ -0,0 +1,70 @@
+import { Paper, Typography } from '@mui/material'
+import { useAsyncEffect } from '@xylabs/react-async-effect'
+import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import { LinkEx } from '@xylabs/react-link'
+import { EventUnsubscribeFunction } from '@xyo-network/module-events'
+import { useProvidedNode } from '@xyo-network/react-node'
+import { useState } from 'react'
+
+import { xyoColorLogoText } from '../img'
+import { XyoBusyFlexBox } from './XyoBusyFlexBox'
+
+export interface PoweredByXyoFlexboxProps extends FlexBoxProps {
+  disableAnimation?: boolean
+  logoHeight?: number
+  logoTextSize?: number
+}
+
+export const PoweredByXyoFlexbox: React.FC<PoweredByXyoFlexboxProps> = ({
+  // leave animation on by default so when done testing, removing the prop lets it work
+  disableAnimation = false,
+  logoHeight,
+  logoTextSize,
+  ...props
+}) => {
+  const [node] = useProvidedNode()
+  const [busyCount, setBusyCount] = useState(0)
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      let unsubscribes: undefined | EventUnsubscribeFunction[]
+      if (disableAnimation) {
+        return
+      } else {
+        const mods = await node?.resolve()
+        unsubscribes = mods?.map((mod) => {
+          return mod.on('moduleBusy', ({ busy }) => {
+            if (busy) {
+              setBusyCount(busyCount + 1)
+            } else {
+              setBusyCount(busyCount - 1)
+            }
+          })
+        })
+      }
+      return () => {
+        unsubscribes?.forEach((unsubscribe) => unsubscribe?.())
+      }
+    },
+    [busyCount, disableAnimation, node],
+  )
+
+  return (
+    <FlexCol alignItems="stretch" position="absolute" bottom="0" left="0" {...props}>
+      <LinkEx href="https://xyo.network" target="_blank">
+        <Paper sx={{ borderRadius: 0, boxShadow: 0 }}>
+          <FlexCol padding={0.5}>
+            <Typography style={{ fontSize: logoTextSize ?? 10 }} fontSize="small">
+              Powered by
+            </Typography>
+            <FlexRow>
+              <XyoBusyFlexBox busy={!!busyCount} />
+              <img src={xyoColorLogoText} height={logoHeight ?? 24} />
+            </FlexRow>
+          </FlexCol>
+        </Paper>
+      </LinkEx>
+    </FlexCol>
+  )
+}

package/src/components/PoweredByXyoFlexbox.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { FlexCol } from '@xylabs/react-flexbox'
+
+import { PoweredByXyoFlexbox } from './PoweredByXyoFlexBox'
+
+const StorybookEntry = {
+  component: PoweredByXyoFlexbox,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'powered-by-xyo',
+} as Meta<typeof PoweredByXyoFlexbox>
+
+const TemplateContainer: StoryFn<typeof PoweredByXyoFlexbox> = () => (
+  <FlexCol height="300px" width="100%" sx={{ backgroundColor: 'grey' }}>
+    <PoweredByXyoFlexbox />
+  </FlexCol>
+)
+
+const Default = TemplateContainer.bind({})
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/XyoBusyFlexBox.tsx

@@ -0,0 +1,30 @@
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+
+import { xyoColorLogo } from '../img'
+
+export type XyoBusyFlexBoxProps = FlexBoxProps & {
+  busy?: boolean
+  widthInPixels?: number
+}
+
+export const XyoBusyFlexBox: React.FC<XyoBusyFlexBoxProps> = ({ widthInPixels, busy, ...props }) => {
+  return (
+    <FlexCol
+      sx={{
+        '@keyframes spin': {
+          '0%': {
+            transform: 'rotate(360deg)',
+          },
+          '100%': {
+            transform: 'rotate(0deg)',
+          },
+        },
+        animation: busy ? 'spin 2s linear infinite' : undefined,
+        animationDirection: 'reverse',
+      }}
+      {...props}
+    >
+      <img src={xyoColorLogo} height={widthInPixels ?? 22} />
+    </FlexCol>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './PoweredByXyoFlexBox'
+export * from './XyoBusyFlexBox'

package/src/img/index.ts

@@ -0,0 +1,4 @@
+import xyoColorLogo from './xyo-color-logo.svg'
+import xyoColorLogoText from './xyo-color-logo-text-only.svg'
+
+export { xyoColorLogo, xyoColorLogoText }

package/src/img/xyo-color-logo-text-only.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="250 0 451 238"><defs><style>.cls-1{fill:#8d8fc6;}.cls-2{fill:#579fd6;}.cls-3{fill:#f27046;}.cls-4{fill:#eb407a;}</style></defs><path class="cls-1" d="M570,55.35a61.13,61.13,0,1,0,61.11,61.1A61.21,61.21,0,0,0,570,55.35Zm-266.4.1-8.2,8.14,53,52.91-53,52.91,8.2,8.2,52.91-53,44.77,44.77,8.14,8.2,114-114-8.14-8.14-52.91,52.91-53-52.91-8.14,8.14-44.77,44.77ZM570,66.84a49.61,49.61,0,1,1-49.61,49.61A49.54,49.54,0,0,1,570,66.84ZM409.45,71.73l44.77,44.77-44.77,44.77L364.68,116.5Z"/></svg>

package/src/img/xyo-color-logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 238"><defs><style>.cls-1{fill:#8d8fc6;}.cls-2{fill:#579fd6;}.cls-3{fill:#f27046;}.cls-4{fill:#eb407a;}</style></defs><path class="cls-1" d="M74.5,28.33,21.29,120.5,74.5,212.67H180.94l1.76-3,51.46-89.13L180.94,28.33ZM84.65,40.54h78.83L111.65,56.93a15.85,15.85,0,0,1,2,5l59.66-18.81L185.22,101a20.12,20.12,0,0,1,5.36-.78l-10-47.91,37.87,65.53h-7.62a24.21,24.21,0,0,1,.15,2.68,23.29,23.29,0,0,1-.15,2.68h7.62l-39.1,67.75,10.92-50.13A20.57,20.57,0,0,1,185,140l-12.88,59-58.37-19.53a17.61,17.61,0,0,1-1.7,5l47.5,15.92H84.65l4-6.85A20.17,20.17,0,0,1,83.93,191L80,197.78,42.67,133.13l37,32.66a20.52,20.52,0,0,1,3.6-4L36.69,120.66,85,77.79a17.45,17.45,0,0,1-3.19-4.32l-39.46,35L80,43.22l5.56,9.69A17.51,17.51,0,0,1,90.12,50Zm28.24,31.17a16.15,16.15,0,0,1-2.68,4.64l62,35.81a19.74,19.74,0,0,1,2.83-4.54Zm-20,10.51v75.33a18,18,0,0,1,2.47-.16,17.18,17.18,0,0,1,2.89.21v-75a11.21,11.21,0,0,1-1.29,0,17.57,17.57,0,0,1-4.07-.47Zm79.34,46.63-62.08,35.81a18.45,18.45,0,0,1,2.68,4.68l62.23-36a19.68,19.68,0,0,1-2.83-4.53Z"/><path class="cls-2" d="M97,48.58a17.06,17.06,0,1,0,17,17,17.08,17.08,0,0,0-17-17Zm0,5.36a11.7,11.7,0,1,1-11.7,11.69A11.65,11.65,0,0,1,97,53.94Z"/><path class="cls-3" d="M95.37,157.39a18.73,18.73,0,1,0,18.7,18.7,18.74,18.74,0,0,0-18.7-18.7Zm0,5.31A13.4,13.4,0,1,1,82,176.09a13.37,13.37,0,0,1,13.4-13.39Z"/><path class="cls-4" d="M190.73,100.2A20.3,20.3,0,1,0,211,120.5a20.34,20.34,0,0,0-20.3-20.3Zm0,5.36a14.94,14.94,0,1,1-14.94,14.94,14.88,14.88,0,0,1,14.94-14.94Z"/></svg>

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components'

package/src/types/images.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.svg'
+declare module '*.gif'
+declare module '*.webp'

package/typedoc.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "entryPoints": ["src/index.ts"],
+  "tsconfig": "./tsconfig.typedoc.json"
+}