@xyo-network/react-webapp 2.26.6 → 2.26.9

package/dist/cjs/components/ResultLoader.d.ts

@@ -0,0 +1,8 @@
+import { AxiosError } from 'axios';
+import { PropsWithChildren } from 'react';
+export interface HandleItemDetailLoadingProps<T> {
+    apiError: AxiosError | undefined;
+    notFound: boolean;
+    searchResult: T | undefined;
+}
+export declare function ResultLoader<T>(props: PropsWithChildren<HandleItemDetailLoadingProps<T>>): JSX.Element;

package/dist/cjs/components/ResultLoader.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResultLoader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_flexbox_1 = require("@xylabs/react-flexbox");
+const NotFoundPage_1 = require("./NotFoundPage");
+function ResultLoader(props) {
+    const { notFound, apiError, searchResult, children } = props;
+    if (notFound) {
+        return (0, jsx_runtime_1.jsx)(NotFoundPage_1.NotFound, {});
+    }
+    // Defer error handling to the children
+    if (apiError) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    }
+    if (searchResult === undefined) {
+        return (0, jsx_runtime_1.jsx)(react_flexbox_1.FlexGrowRow, { busy: true, minHeight: "50px" });
+    }
+    else {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    }
+}
+exports.ResultLoader = ResultLoader;
+//# sourceMappingURL=ResultLoader.js.map

package/dist/cjs/components/ResultLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResultLoader.js","sourceRoot":"","sources":["../../../src/components/ResultLoader.tsx"],"names":[],"mappings":";;;;AAAA,yDAAmD;AAInD,iDAAyC;AAQzC,SAAgB,YAAY,CAAI,KAAyD;IACvF,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAC5D,IAAI,QAAQ,EAAE;QACZ,OAAO,uBAAC,uBAAQ,KAAG,CAAA;KACpB;IACD,uCAAuC;IACvC,IAAI,QAAQ,EAAE;QACZ,OAAO,2DAAG,QAAQ,GAAI,CAAA;KACvB;IACD,IAAI,YAAY,KAAK,SAAS,EAAE;QAC9B,OAAO,uBAAC,2BAAW,IAAC,IAAI,QAAC,SAAS,EAAC,MAAM,GAAG,CAAA;KAC7C;SAAM;QACL,OAAO,2DAAG,QAAQ,GAAI,CAAA;KACvB;AACH,CAAC;AAdD,oCAcC"}

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

@@ -2,3 +2,4 @@ export * from './Chrome';
 export * from './ErrorPage';
 export * from './NotFoundPage';
 export * from './Page';
+export * from './ResultLoader';

package/dist/cjs/components/index.js

@@ -5,4 +5,5 @@ tslib_1.__exportStar(require("./Chrome"), exports);
 tslib_1.__exportStar(require("./ErrorPage"), exports);
 tslib_1.__exportStar(require("./NotFoundPage"), exports);
 tslib_1.__exportStar(require("./Page"), exports);
+tslib_1.__exportStar(require("./ResultLoader"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,mDAAwB;AACxB,sDAA2B;AAC3B,yDAA8B;AAC9B,iDAAsB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,mDAAwB;AACxB,sDAA2B;AAC3B,yDAA8B;AAC9B,iDAAsB;AACtB,yDAA8B"}

package/dist/esm/components/ResultLoader.d.ts

@@ -0,0 +1,8 @@
+import { AxiosError } from 'axios';
+import { PropsWithChildren } from 'react';
+export interface HandleItemDetailLoadingProps<T> {
+    apiError: AxiosError | undefined;
+    notFound: boolean;
+    searchResult: T | undefined;
+}
+export declare function ResultLoader<T>(props: PropsWithChildren<HandleItemDetailLoadingProps<T>>): JSX.Element;

package/dist/esm/components/ResultLoader.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { FlexGrowRow } from '@xylabs/react-flexbox';
+import { NotFound } from './NotFoundPage';
+export function ResultLoader(props) {
+    const { notFound, apiError, searchResult, children } = props;
+    if (notFound) {
+        return _jsx(NotFound, {});
+    }
+    // Defer error handling to the children
+    if (apiError) {
+        return _jsx(_Fragment, { children: children });
+    }
+    if (searchResult === undefined) {
+        return _jsx(FlexGrowRow, { busy: true, minHeight: "50px" });
+    }
+    else {
+        return _jsx(_Fragment, { children: children });
+    }
+}
+//# sourceMappingURL=ResultLoader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResultLoader.js","sourceRoot":"","sources":["../../../src/components/ResultLoader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAInD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAQzC,MAAM,UAAU,YAAY,CAAI,KAAyD;IACvF,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAC5D,IAAI,QAAQ,EAAE;QACZ,OAAO,KAAC,QAAQ,KAAG,CAAA;KACpB;IACD,uCAAuC;IACvC,IAAI,QAAQ,EAAE;QACZ,OAAO,4BAAG,QAAQ,GAAI,CAAA;KACvB;IACD,IAAI,YAAY,KAAK,SAAS,EAAE;QAC9B,OAAO,KAAC,WAAW,IAAC,IAAI,QAAC,SAAS,EAAC,MAAM,GAAG,CAAA;KAC7C;SAAM;QACL,OAAO,4BAAG,QAAQ,GAAI,CAAA;KACvB;AACH,CAAC"}

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

@@ -2,3 +2,4 @@ export * from './Chrome';
 export * from './ErrorPage';
 export * from './NotFoundPage';
 export * from './Page';
+export * from './ResultLoader';

package/dist/esm/components/index.js

@@ -2,4 +2,5 @@ export * from './Chrome';
 export * from './ErrorPage';
 export * from './NotFoundPage';
 export * from './Page';
+export * from './ResultLoader';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,gBAAgB,CAAA"}

package/package.json

@@ -12,16 +12,18 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@mui/material": "^5.8.6",
-    "@xylabs/react-button": "^2.14.4",
-    "@xylabs/react-flexbox": "^2.14.4",
-    "@xylabs/react-pixel": "^2.14.4",
-    "@xylabs/react-shared": "^2.14.4",
+    "@mui/material": "^5.8.7",
+    "@xylabs/react-button": "^2.14.5",
+    "@xylabs/react-flexbox": "^2.14.5",
+    "@xylabs/react-link": "^2.14.5",
+    "@xylabs/react-pixel": "^2.14.5",
+    "@xylabs/react-shared": "^2.14.5",
     "@xylabs/sdk-js": "^2.5.9",
-    "@xyo-network/react-app-settings": "^2.26.6",
-    "@xyo-network/react-appbar": "^2.26.6",
-    "@xyo-network/react-footer": "^2.26.6",
-    "@xyo-network/react-shared": "^2.26.6",
+    "@xyo-network/react-app-settings": "^2.26.9",
+    "@xyo-network/react-appbar": "^2.26.9",
+    "@xyo-network/react-footer": "^2.26.9",
+    "@xyo-network/react-shared": "^2.26.9",
+    "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
@@ -30,11 +32,10 @@
   },
   "description": "Common React library for all XYO projects that use React",
   "devDependencies": {
-    "@babel/core": "^7.18.5",
-    "@babel/preset-env": "^7.18.2",
+    "@babel/core": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
     "@storybook/react": "^6.5.9",
     "@types/react-helmet": "^6.1.5",
-    "@xylabs/react-common": "^2.14.4",
     "@xylabs/tsconfig": "^1.0.14"
   },
   "browser": "dist/esm/index.js",
@@ -86,6 +87,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.26.6",
+  "version": "2.26.9",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/Chrome.stories.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable import/no-internal-modules */
 import { Breadcrumbs, List } from '@mui/material'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
-import { LinkEx } from '@xylabs/react-common'
 import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import { LinkEx } from '@xylabs/react-link'
 import { SiteMenuListItem } from '@xyo-network/react-appbar'
 import { BrowserRouter } from 'react-router-dom'
 

package/src/components/ResultLoader.stories.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable import/no-internal-modules */
+import { ComponentStory, Meta } from '@storybook/react'
+import { AxiosError } from 'axios'
+
+import { ResultLoader } from './ResultLoader'
+
+const StorybookEntry: Meta = {
+  argTypes: {},
+  component: ResultLoader,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'webapp/ResultLoader',
+}
+
+const Template: ComponentStory<typeof ResultLoader> = (props) => {
+  return <ResultLoader {...props} />
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const NotFound = Template.bind({})
+NotFound.args = { notFound: true }
+
+const ApiError = Template.bind({})
+ApiError.args = { apiError: new AxiosError(), children: <h1>Shown in case of error</h1> }
+
+const SearchResult = Template.bind({})
+SearchResult.args = { children: <h1>Shown when there is a valid result</h1>, searchResult: 'foo' }
+
+export { ApiError, Default, NotFound, SearchResult }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/ResultLoader.tsx

@@ -0,0 +1,27 @@
+import { FlexGrowRow } from '@xylabs/react-flexbox'
+import { AxiosError } from 'axios'
+import { PropsWithChildren } from 'react'
+
+import { NotFound } from './NotFoundPage'
+
+export interface HandleItemDetailLoadingProps<T> {
+  apiError: AxiosError | undefined
+  notFound: boolean
+  searchResult: T | undefined
+}
+
+export function ResultLoader<T>(props: PropsWithChildren<HandleItemDetailLoadingProps<T>>) {
+  const { notFound, apiError, searchResult, children } = props
+  if (notFound) {
+    return <NotFound />
+  }
+  // Defer error handling to the children
+  if (apiError) {
+    return <>{children}</>
+  }
+  if (searchResult === undefined) {
+    return <FlexGrowRow busy minHeight="50px" />
+  } else {
+    return <>{children}</>
+  }
+}

package/src/components/index.ts

@@ -2,3 +2,4 @@ export * from './Chrome'
 export * from './ErrorPage'
 export * from './NotFoundPage'
 export * from './Page'
+export * from './ResultLoader'