@xyo-network/react-appbar 2.26.32 → 2.26.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- package/dist/cjs/components/Toolbar/System/SystemToolbar.d.ts +1 -0
- package/dist/cjs/components/Toolbar/System/SystemToolbar.js +2 -2
- package/dist/cjs/components/Toolbar/System/SystemToolbar.js.map +1 -1
- package/dist/docs.json +10 -1
- package/dist/esm/components/Toolbar/System/SystemToolbar.d.ts +1 -0
- package/dist/esm/components/Toolbar/System/SystemToolbar.js +2 -2
- package/dist/esm/components/Toolbar/System/SystemToolbar.js.map +1 -1
- package/package.json +11 -11
- package/babel.config.json +0 -5
- package/src/components/AppBar/Application.stories.tsx +0 -91
- package/src/components/AppBar/Application.tsx +0 -15
- package/src/components/AppBar/index.ts +0 -1
- package/src/components/MobileSystemControls/SystemControls.stories.tsx +0 -50
- package/src/components/MobileSystemControls/SystemControls.tsx +0 -14
- package/src/components/MobileSystemControls/SystemControlsRoot.tsx +0 -61
- package/src/components/MobileSystemControls/SystemControlsType.ts +0 -5
- package/src/components/MobileSystemControls/SystemControlsUnstyled.tsx +0 -49
- package/src/components/MobileSystemControls/controls/SystemControl.tsx +0 -39
- package/src/components/MobileSystemControls/controls/SystemControlText.tsx +0 -18
- package/src/components/MobileSystemControls/controls/index.ts +0 -2
- package/src/components/MobileSystemControls/index.ts +0 -3
- package/src/components/SearchBar/SearchBar.tsx +0 -34
- package/src/components/SearchBar/index.ts +0 -1
- package/src/components/SiteMenu/Menu.tsx +0 -37
- package/src/components/SiteMenu/MenuItem.stories.tsx +0 -39
- package/src/components/SiteMenu/MenuItems.tsx +0 -23
- package/src/components/SiteMenu/index.ts +0 -2
- package/src/components/Toolbar/Context/ContextToolbar.stories.tsx +0 -32
- package/src/components/Toolbar/Context/ContextToolbar.tsx +0 -17
- package/src/components/Toolbar/Context/XyoLogo.tsx +0 -7
- package/src/components/Toolbar/Context/XyoLogoLinkEx.tsx +0 -36
- package/src/components/Toolbar/Context/index.ts +0 -1
- package/src/components/Toolbar/System/SystemToolbar.stories.tsx +0 -81
- package/src/components/Toolbar/System/SystemToolbar.tsx +0 -55
- package/src/components/Toolbar/System/index.ts +0 -1
- package/src/components/Toolbar/index.ts +0 -2
- package/src/components/index.ts +0 -5
- package/src/index.ts +0 -1
package/README.md
CHANGED
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
[![codeclimate-badge][]][codeclimate-link]
|
|
11
11
|
[![snyk-badge][]][snyk-link]
|
|
12
12
|
|
|
13
|
-
> The XYO Foundation provides this source code available in our efforts to
|
|
13
|
+
> The XYO Foundation provides this source code available in our efforts to
|
|
14
|
+
> advance the understanding of the XYO Procotol and its possible uses.
|
|
14
15
|
|
|
15
16
|
## Table of Contents
|
|
16
17
|
|
|
@@ -11,8 +11,8 @@ const react_auth_1 = require("@xyo-network/react-auth");
|
|
|
11
11
|
const react_network_1 = require("@xyo-network/react-network");
|
|
12
12
|
const SiteMenu_1 = require("../../SiteMenu");
|
|
13
13
|
const SystemToolbar = (_a) => {
|
|
14
|
-
var { children, networkSelectProps, archiveSelectProps, hideNetworkSelect, hideArchiveSelect, darkModeButton = false, authButton = false, menuItems } = _a, props = tslib_1.__rest(_a, ["children", "networkSelectProps", "archiveSelectProps", "hideNetworkSelect", "hideArchiveSelect", "darkModeButton", "authButton", "menuItems"]);
|
|
15
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.Toolbar, Object.assign({}, props, { children: [hideNetworkSelect ? null : ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexRow, Object.assign({ marginX: 0.5 }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "elevation" }, { children: (0, jsx_runtime_1.jsx)(react_network_1.NetworkSelectEx, Object.assign({ fullWidth: true }, networkSelectProps)) })) }))), hideArchiveSelect ? null : ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexRow, Object.assign({ marginX: 0.5 }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "elevation" }, { children: (0, jsx_runtime_1.jsx)(react_archive_1.ArchiveSelectEx, Object.assign({ fullWidth: true }, archiveSelectProps)) })) }))), children, authButton ? (0, jsx_runtime_1.jsx)(react_auth_1.AuthStatusIconButton, { color: "inherit" }) : null, darkModeButton ? (0, jsx_runtime_1.jsx)(react_app_settings_1.DarkModeIconButton, { color: "inherit" }) : null, menuItems ? (0, jsx_runtime_1.jsx)(SiteMenu_1.SiteMenu, { children: menuItems }) : null] })));
|
|
14
|
+
var { children, precedingChildren, networkSelectProps, archiveSelectProps, hideNetworkSelect, hideArchiveSelect, darkModeButton = false, authButton = false, menuItems } = _a, props = tslib_1.__rest(_a, ["children", "precedingChildren", "networkSelectProps", "archiveSelectProps", "hideNetworkSelect", "hideArchiveSelect", "darkModeButton", "authButton", "menuItems"]);
|
|
15
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Toolbar, Object.assign({}, props, { children: [precedingChildren, hideNetworkSelect ? null : ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexRow, Object.assign({ marginX: 0.5 }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "elevation" }, { children: (0, jsx_runtime_1.jsx)(react_network_1.NetworkSelectEx, Object.assign({ fullWidth: true }, networkSelectProps)) })) }))), hideArchiveSelect ? null : ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexRow, Object.assign({ marginX: 0.5 }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "elevation" }, { children: (0, jsx_runtime_1.jsx)(react_archive_1.ArchiveSelectEx, Object.assign({ fullWidth: true }, archiveSelectProps)) })) }))), children, authButton ? (0, jsx_runtime_1.jsx)(react_auth_1.AuthStatusIconButton, { color: "inherit" }) : null, darkModeButton ? (0, jsx_runtime_1.jsx)(react_app_settings_1.DarkModeIconButton, { color: "inherit" }) : null, menuItems ? (0, jsx_runtime_1.jsx)(SiteMenu_1.SiteMenu, { children: menuItems }) : null] })));
|
|
16
16
|
};
|
|
17
17
|
exports.SystemToolbar = SystemToolbar;
|
|
18
18
|
//# sourceMappingURL=SystemToolbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SystemToolbar.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SystemToolbar.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA4D;AAE5D,yDAA+C;AAC/C,wEAAoE;AACpE,8DAA4D;AAC5D,wDAA8D;AAC9D,8DAAkF;AAGlF,6CAAyC;
|
|
1
|
+
{"version":3,"file":"SystemToolbar.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SystemToolbar.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA4D;AAE5D,yDAA+C;AAC/C,wEAAoE;AACpE,8DAA4D;AAC5D,wDAA8D;AAC9D,8DAAkF;AAGlF,6CAAyC;AAalC,MAAM,aAAa,GAAiC,CAAC,EAW3D,EAAE,EAAE;QAXuD,EAC1D,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,GAAG,KAAK,EACtB,UAAU,GAAG,KAAK,EAClB,SAAS,OAEV,EADI,KAAK,sBAVkD,oKAW3D,CADS;IAER,OAAO,CACL,wBAAC,kBAAO,oBAAK,KAAK,eACf,iBAAiB,EACjB,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,uBAAC,uBAAO,kBAAC,OAAO,EAAE,GAAG,gBACnB,uBAAC,gBAAK,kBAAC,OAAO,EAAC,WAAW,gBACxB,uBAAC,+BAAe,kBAAC,SAAS,UAAK,kBAAkB,EAAI,IAC/C,IACA,CACX,EACA,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,uBAAC,uBAAO,kBAAC,OAAO,EAAE,GAAG,gBACnB,uBAAC,gBAAK,kBAAC,OAAO,EAAC,WAAW,gBACxB,uBAAC,+BAAe,kBAAC,SAAS,UAAK,kBAAkB,EAAI,IAC/C,IACA,CACX,EACA,QAAQ,EACR,UAAU,CAAC,CAAC,CAAC,uBAAC,iCAAoB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC5D,cAAc,CAAC,CAAC,CAAC,uBAAC,uCAAkB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC9D,SAAS,CAAC,CAAC,CAAC,uBAAC,mBAAQ,cAAE,SAAS,GAAY,CAAC,CAAC,CAAC,IAAI,KAC5C,CACX,CAAA;AACH,CAAC,CAAA;AAnCY,QAAA,aAAa,iBAmCzB"}
|
package/dist/docs.json
CHANGED
|
@@ -2,6 +2,15 @@
|
|
|
2
2
|
"id": 0,
|
|
3
3
|
"name": "@xyo-network/react-appbar",
|
|
4
4
|
"kind": 1,
|
|
5
|
+
"kindString": "Project",
|
|
5
6
|
"flags": {},
|
|
6
|
-
"originalName": ""
|
|
7
|
+
"originalName": "",
|
|
8
|
+
"sources": [
|
|
9
|
+
{
|
|
10
|
+
"fileName": "index.ts",
|
|
11
|
+
"line": 1,
|
|
12
|
+
"character": 0,
|
|
13
|
+
"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/7efa6fa/packages/appbar/src/index.ts#L1"
|
|
14
|
+
}
|
|
15
|
+
]
|
|
7
16
|
}
|
|
@@ -6,7 +6,7 @@ import { ArchiveSelectEx } from '@xyo-network/react-archive';
|
|
|
6
6
|
import { AuthStatusIconButton } from '@xyo-network/react-auth';
|
|
7
7
|
import { NetworkSelectEx } from '@xyo-network/react-network';
|
|
8
8
|
import { SiteMenu } from '../../SiteMenu';
|
|
9
|
-
export const SystemToolbar = ({ children, networkSelectProps, archiveSelectProps, hideNetworkSelect, hideArchiveSelect, darkModeButton = false, authButton = false, menuItems, ...props }) => {
|
|
10
|
-
return (_jsxs(Toolbar, { ...props, children: [hideNetworkSelect ? null : (_jsx(FlexRow, { marginX: 0.5, children: _jsx(Paper, { variant: "elevation", children: _jsx(NetworkSelectEx, { fullWidth: true, ...networkSelectProps }) }) })), hideArchiveSelect ? null : (_jsx(FlexRow, { marginX: 0.5, children: _jsx(Paper, { variant: "elevation", children: _jsx(ArchiveSelectEx, { fullWidth: true, ...archiveSelectProps }) }) })), children, authButton ? _jsx(AuthStatusIconButton, { color: "inherit" }) : null, darkModeButton ? _jsx(DarkModeIconButton, { color: "inherit" }) : null, menuItems ? _jsx(SiteMenu, { children: menuItems }) : null] }));
|
|
9
|
+
export const SystemToolbar = ({ children, precedingChildren, networkSelectProps, archiveSelectProps, hideNetworkSelect, hideArchiveSelect, darkModeButton = false, authButton = false, menuItems, ...props }) => {
|
|
10
|
+
return (_jsxs(Toolbar, { ...props, children: [precedingChildren, hideNetworkSelect ? null : (_jsx(FlexRow, { marginX: 0.5, children: _jsx(Paper, { variant: "elevation", children: _jsx(NetworkSelectEx, { fullWidth: true, ...networkSelectProps }) }) })), hideArchiveSelect ? null : (_jsx(FlexRow, { marginX: 0.5, children: _jsx(Paper, { variant: "elevation", children: _jsx(ArchiveSelectEx, { fullWidth: true, ...archiveSelectProps }) }) })), children, authButton ? _jsx(AuthStatusIconButton, { color: "inherit" }) : null, darkModeButton ? _jsx(DarkModeIconButton, { color: "inherit" }) : null, menuItems ? _jsx(SiteMenu, { children: menuItems }) : null] }));
|
|
11
11
|
};
|
|
12
12
|
//# sourceMappingURL=SystemToolbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SystemToolbar.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SystemToolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAgB,MAAM,eAAe,CAAA;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAwB,MAAM,4BAA4B,CAAA;AAGlF,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"SystemToolbar.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SystemToolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAgB,MAAM,eAAe,CAAA;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAA;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAwB,MAAM,4BAA4B,CAAA;AAGlF,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAazC,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,GAAG,KAAK,EACtB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,OAAO,OAAK,KAAK,aACf,iBAAiB,EACjB,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,OAAO,EAAE,GAAG,YACnB,KAAC,KAAK,IAAC,OAAO,EAAC,WAAW,YACxB,KAAC,eAAe,IAAC,SAAS,WAAK,kBAAkB,GAAI,GAC/C,GACA,CACX,EACA,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,KAAC,OAAO,IAAC,OAAO,EAAE,GAAG,YACnB,KAAC,KAAK,IAAC,OAAO,EAAC,WAAW,YACxB,KAAC,eAAe,IAAC,SAAS,WAAK,kBAAkB,GAAI,GAC/C,GACA,CACX,EACA,QAAQ,EACR,UAAU,CAAC,CAAC,CAAC,KAAC,oBAAoB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC5D,cAAc,CAAC,CAAC,CAAC,KAAC,kBAAkB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC9D,SAAS,CAAC,CAAC,CAAC,KAAC,QAAQ,cAAE,SAAS,GAAY,CAAC,CAAC,CAAC,IAAI,IAC5C,CACX,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -13,21 +13,21 @@
|
|
|
13
13
|
"@emotion/react": "^11.9.3",
|
|
14
14
|
"@emotion/styled": "^11.9.3",
|
|
15
15
|
"@mui/icons-material": "^5.8.4",
|
|
16
|
-
"@mui/material": "^5.9.
|
|
16
|
+
"@mui/material": "^5.9.2",
|
|
17
17
|
"@xylabs/react-appbar": "^2.14.10",
|
|
18
18
|
"@xylabs/react-button": "^2.14.10",
|
|
19
19
|
"@xylabs/react-common": "^2.14.10",
|
|
20
20
|
"@xylabs/react-flexbox": "^2.14.10",
|
|
21
21
|
"@xylabs/react-link": "^2.14.10",
|
|
22
22
|
"@xylabs/react-shared": "^2.14.10",
|
|
23
|
-
"@xyo-network/react-app-settings": "^2.26.
|
|
24
|
-
"@xyo-network/react-archive": "^2.26.
|
|
25
|
-
"@xyo-network/react-archivist-api": "^2.26.
|
|
26
|
-
"@xyo-network/react-auth": "^2.26.
|
|
27
|
-
"@xyo-network/react-network": "^2.26.
|
|
28
|
-
"@xyo-network/react-shared": "^2.26.
|
|
29
|
-
"@xyo-network/react-wallet": "^2.26.
|
|
30
|
-
"@xyo-network/wallet": "^2.22.
|
|
23
|
+
"@xyo-network/react-app-settings": "^2.26.35",
|
|
24
|
+
"@xyo-network/react-archive": "^2.26.35",
|
|
25
|
+
"@xyo-network/react-archivist-api": "^2.26.35",
|
|
26
|
+
"@xyo-network/react-auth": "^2.26.35",
|
|
27
|
+
"@xyo-network/react-network": "^2.26.35",
|
|
28
|
+
"@xyo-network/react-shared": "^2.26.35",
|
|
29
|
+
"@xyo-network/react-wallet": "^2.26.35",
|
|
30
|
+
"@xyo-network/wallet": "^2.22.15",
|
|
31
31
|
"react": "^18.2.0",
|
|
32
32
|
"react-dom": "^18.2.0",
|
|
33
33
|
"react-router-dom": "^6.3.0",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"@babel/core": "^7.18.9",
|
|
39
39
|
"@babel/preset-env": "^7.18.9",
|
|
40
40
|
"@storybook/react": "^6.5.9",
|
|
41
|
-
"@xylabs/tsconfig": "^
|
|
41
|
+
"@xylabs/tsconfig-dom": "^2.5.3"
|
|
42
42
|
},
|
|
43
43
|
"browser": "dist/esm/index.js",
|
|
44
44
|
"docs": "dist/docs.json",
|
|
@@ -89,5 +89,5 @@
|
|
|
89
89
|
},
|
|
90
90
|
"sideEffects": false,
|
|
91
91
|
"types": "dist/esm/index.d.ts",
|
|
92
|
-
"version": "2.26.
|
|
92
|
+
"version": "2.26.35"
|
|
93
93
|
}
|
package/babel.config.json
DELETED
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
/* eslint-disable import/no-internal-modules */
|
|
2
|
-
import { List, Paper } from '@mui/material'
|
|
3
|
-
import { ComponentMeta, ComponentStory } from '@storybook/react'
|
|
4
|
-
import { FlexGrowCol } from '@xylabs/react-flexbox'
|
|
5
|
-
import { ArchiveProvider, ArchivesProvider } from '@xyo-network/react-archive'
|
|
6
|
-
import { ArchivistApiProvider } from '@xyo-network/react-archivist-api'
|
|
7
|
-
import { NetworkMemoryProvider } from '@xyo-network/react-network'
|
|
8
|
-
import { WalletAccountSelect, WalletProvider } from '@xyo-network/react-wallet'
|
|
9
|
-
import { XyoWalletBase } from '@xyo-network/wallet'
|
|
10
|
-
import { BrowserRouter } from 'react-router-dom'
|
|
11
|
-
|
|
12
|
-
import { SearchBar } from '../SearchBar'
|
|
13
|
-
import { SiteMenuListItem } from '../SiteMenu'
|
|
14
|
-
import { SystemToolbar } from '../Toolbar'
|
|
15
|
-
import { ApplicationAppBar } from './Application'
|
|
16
|
-
|
|
17
|
-
const StorybookEntry = {
|
|
18
|
-
argTypes: {},
|
|
19
|
-
component: ApplicationAppBar,
|
|
20
|
-
parameters: {
|
|
21
|
-
docs: {
|
|
22
|
-
page: null,
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
title: 'appbar/AppBar/Application',
|
|
26
|
-
} as ComponentMeta<typeof ApplicationAppBar>
|
|
27
|
-
|
|
28
|
-
const Template: ComponentStory<typeof ApplicationAppBar> = (args) => (
|
|
29
|
-
<WalletProvider defaultWallet={new XyoWalletBase('test me')}>
|
|
30
|
-
<BrowserRouter>
|
|
31
|
-
<ArchivistApiProvider apiDomain="https://beta.api.archivist.xyo.network">
|
|
32
|
-
<NetworkMemoryProvider>
|
|
33
|
-
<ArchivesProvider>
|
|
34
|
-
<ArchiveProvider>
|
|
35
|
-
<ApplicationAppBar
|
|
36
|
-
systemToolbar={
|
|
37
|
-
<SystemToolbar
|
|
38
|
-
menuItems={
|
|
39
|
-
<List>
|
|
40
|
-
<SiteMenuListItem primary="Hello" />
|
|
41
|
-
</List>
|
|
42
|
-
}
|
|
43
|
-
/>
|
|
44
|
-
}
|
|
45
|
-
{...args}
|
|
46
|
-
></ApplicationAppBar>
|
|
47
|
-
</ArchiveProvider>
|
|
48
|
-
</ArchivesProvider>
|
|
49
|
-
</NetworkMemoryProvider>
|
|
50
|
-
</ArchivistApiProvider>
|
|
51
|
-
</BrowserRouter>
|
|
52
|
-
</WalletProvider>
|
|
53
|
-
)
|
|
54
|
-
|
|
55
|
-
const Default = Template.bind({})
|
|
56
|
-
Default.args = {}
|
|
57
|
-
|
|
58
|
-
const WithSearchBar = Template.bind({})
|
|
59
|
-
WithSearchBar.args = {
|
|
60
|
-
children: <SearchBar flexGrow={1} onSearch={(term) => alert(term)} />,
|
|
61
|
-
color: 'primary',
|
|
62
|
-
systemToolbar: (
|
|
63
|
-
<SystemToolbar
|
|
64
|
-
darkModeButton
|
|
65
|
-
authButton
|
|
66
|
-
menuItems={
|
|
67
|
-
<List>
|
|
68
|
-
<SiteMenuListItem primary="Hello" />
|
|
69
|
-
</List>
|
|
70
|
-
}
|
|
71
|
-
/>
|
|
72
|
-
),
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
const WithWalletSelectBar = Template.bind({})
|
|
76
|
-
WithWalletSelectBar.args = {
|
|
77
|
-
children: (
|
|
78
|
-
<FlexGrowCol alignItems="stretch">
|
|
79
|
-
<Paper variant="elevation">
|
|
80
|
-
<WalletAccountSelect icons size="small" fullWidth />
|
|
81
|
-
</Paper>
|
|
82
|
-
</FlexGrowCol>
|
|
83
|
-
),
|
|
84
|
-
color: 'primary',
|
|
85
|
-
systemToolbar: <SystemToolbar darkModeButton authButton />,
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
export { Default, WithSearchBar, WithWalletSelectBar }
|
|
89
|
-
|
|
90
|
-
// eslint-disable-next-line import/no-default-export
|
|
91
|
-
export default StorybookEntry
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { ToolbarProps } from '@mui/material'
|
|
2
|
-
import { AppBarEx, AppBarExProps } from '@xylabs/react-appbar'
|
|
3
|
-
import { ReactElement } from 'react'
|
|
4
|
-
|
|
5
|
-
import { ContextToolbar, SystemToolbar } from '../Toolbar'
|
|
6
|
-
|
|
7
|
-
export interface ApplicationAppBarProps extends AppBarExProps {
|
|
8
|
-
contextToolbar?: ReactElement<ToolbarProps>
|
|
9
|
-
systemToolbar?: ReactElement<ToolbarProps>
|
|
10
|
-
responsive?: boolean
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export const ApplicationAppBar: React.FC<ApplicationAppBarProps> = ({ systemToolbar, contextToolbar, responsive = true, ...props }) => {
|
|
14
|
-
return <AppBarEx systemToolbar={systemToolbar ?? <SystemToolbar />} contextToolbar={contextToolbar ?? <ContextToolbar />} position="sticky" responsive={responsive} {...props} />
|
|
15
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './Application'
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
/* eslint-disable import/no-internal-modules */
|
|
2
|
-
import { ComponentStory, Meta } from '@storybook/react'
|
|
3
|
-
import { ArchiveProvider, ArchivesProvider } from '@xyo-network/react-archive'
|
|
4
|
-
import { ArchivistApiProvider } from '@xyo-network/react-archivist-api'
|
|
5
|
-
import { NetworkMemoryProvider } from '@xyo-network/react-network'
|
|
6
|
-
|
|
7
|
-
import { SystemControls } from './SystemControls'
|
|
8
|
-
import { SystemControlsType } from './SystemControlsType'
|
|
9
|
-
|
|
10
|
-
const StorybookEntry: Meta = {
|
|
11
|
-
argTypes: {},
|
|
12
|
-
component: SystemControls,
|
|
13
|
-
parameters: {
|
|
14
|
-
docs: {
|
|
15
|
-
page: null,
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
|
-
title: 'appbar/System/SystemControls',
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const Template: ComponentStory<typeof SystemControls> = (props) => {
|
|
22
|
-
return (
|
|
23
|
-
<NetworkMemoryProvider>
|
|
24
|
-
<ArchivistApiProvider apiDomain="http://localhost:8080">
|
|
25
|
-
<ArchivesProvider>
|
|
26
|
-
<ArchiveProvider>
|
|
27
|
-
<SystemControls {...props} />
|
|
28
|
-
</ArchiveProvider>
|
|
29
|
-
</ArchivesProvider>
|
|
30
|
-
</ArchivistApiProvider>
|
|
31
|
-
</NetworkMemoryProvider>
|
|
32
|
-
)
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
const Left = Template.bind({})
|
|
36
|
-
Left.args = {
|
|
37
|
-
systemControlsType: SystemControlsType.Left,
|
|
38
|
-
visible: true,
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
const Top = Template.bind({})
|
|
42
|
-
Top.args = {
|
|
43
|
-
systemControlsType: SystemControlsType.WindowShade,
|
|
44
|
-
visible: true,
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
export { Left, Top }
|
|
48
|
-
|
|
49
|
-
// eslint-disable-next-line import/no-default-export
|
|
50
|
-
export default StorybookEntry
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { FlexCol } from '@xylabs/react-flexbox'
|
|
2
|
-
|
|
3
|
-
import { SystemControlsRoot } from './SystemControlsRoot'
|
|
4
|
-
import { SystemControlsUnstyledProps } from './SystemControlsUnstyled'
|
|
5
|
-
|
|
6
|
-
const SystemControls: React.FC<SystemControlsUnstyledProps> = (props) => {
|
|
7
|
-
return (
|
|
8
|
-
<FlexCol>
|
|
9
|
-
<SystemControlsRoot {...props} />
|
|
10
|
-
</FlexCol>
|
|
11
|
-
)
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export { SystemControls }
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { styled } from '@mui/material'
|
|
2
|
-
|
|
3
|
-
import { SystemControlsType } from './SystemControlsType'
|
|
4
|
-
import { SystemControlsUnstyled, SystemControlsUnstyledProps } from './SystemControlsUnstyled'
|
|
5
|
-
|
|
6
|
-
const SystemControlsRoot = styled(SystemControlsUnstyled, { name: 'SystemControls', slot: 'Root' })<SystemControlsUnstyledProps>(({ theme }) => ({
|
|
7
|
-
// shared defaults
|
|
8
|
-
['&']: {
|
|
9
|
-
'.toggle': {
|
|
10
|
-
backgroundColor: theme.palette.primary.main,
|
|
11
|
-
},
|
|
12
|
-
alignItems: 'start',
|
|
13
|
-
zIndex: 1,
|
|
14
|
-
},
|
|
15
|
-
// WindowShade System Controls styles
|
|
16
|
-
[`&.system-controls-type-${SystemControlsType.WindowShade}`]: {
|
|
17
|
-
'.control': {
|
|
18
|
-
borderRadius: '0 0 5px 5px',
|
|
19
|
-
flexDirection: 'row',
|
|
20
|
-
flexGrow: 1,
|
|
21
|
-
justifyContent: 'space-around',
|
|
22
|
-
padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`,
|
|
23
|
-
},
|
|
24
|
-
'.controls': {
|
|
25
|
-
alignItems: 'stretch',
|
|
26
|
-
flexDirection: 'column',
|
|
27
|
-
flexGrow: 1,
|
|
28
|
-
},
|
|
29
|
-
'.toggle': {
|
|
30
|
-
borderRadius: '0 0 5px 5px',
|
|
31
|
-
padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
|
|
32
|
-
},
|
|
33
|
-
flexDirection: 'row',
|
|
34
|
-
position: 'absolute',
|
|
35
|
-
top: 0,
|
|
36
|
-
width: '100%',
|
|
37
|
-
},
|
|
38
|
-
// Left System Control styles
|
|
39
|
-
[`&.system-controls-type-${SystemControlsType.Left}`]: {
|
|
40
|
-
'.control': {
|
|
41
|
-
alignItems: 'start',
|
|
42
|
-
flexDirection: 'column',
|
|
43
|
-
padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`,
|
|
44
|
-
},
|
|
45
|
-
'.control-wrap': {
|
|
46
|
-
marginBottom: `${theme.spacing(2)}`,
|
|
47
|
-
},
|
|
48
|
-
'.toggle': {
|
|
49
|
-
borderRadius: '0 5px 5px 0',
|
|
50
|
-
padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
|
|
51
|
-
writingMode: 'vertical-rl',
|
|
52
|
-
},
|
|
53
|
-
flexDirection: 'column',
|
|
54
|
-
left: 0,
|
|
55
|
-
position: 'fixed',
|
|
56
|
-
top: '30vh',
|
|
57
|
-
width: 'auto',
|
|
58
|
-
},
|
|
59
|
-
}))
|
|
60
|
-
|
|
61
|
-
export { SystemControlsRoot }
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { Paper, Theme, useMediaQuery } from '@mui/material'
|
|
2
|
-
import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
|
|
3
|
-
import { ArchiveSelectEx, useArchive } from '@xyo-network/react-archive'
|
|
4
|
-
import { NetworkSelectEx, useNetwork } from '@xyo-network/react-network'
|
|
5
|
-
|
|
6
|
-
import { ControlText, SystemControl } from './controls'
|
|
7
|
-
import { SystemControlsType } from './SystemControlsType'
|
|
8
|
-
|
|
9
|
-
interface SystemControlsUnstyledProps extends FlexBoxProps {
|
|
10
|
-
visible?: boolean
|
|
11
|
-
systemControlsType?: SystemControlsType
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
const SystemControlsUnstyled: React.FC<SystemControlsUnstyledProps> = ({ systemControlsType = SystemControlsType.WindowShade, visible, ...props }) => {
|
|
15
|
-
const { network } = useNetwork()
|
|
16
|
-
const { archive } = useArchive()
|
|
17
|
-
const isSmall = useMediaQuery<Theme>((theme) => theme.breakpoints.down('sm'))
|
|
18
|
-
|
|
19
|
-
if (visible || isSmall) {
|
|
20
|
-
return (
|
|
21
|
-
<FlexCol {...props} className={`${props.className} system-controls-type-${systemControlsType}`}>
|
|
22
|
-
<SystemControl
|
|
23
|
-
systemControlsType={systemControlsType}
|
|
24
|
-
controlElement={
|
|
25
|
-
<>
|
|
26
|
-
<FlexRow className={'control-wrap'}>
|
|
27
|
-
<Paper variant="elevation" elevation={0}>
|
|
28
|
-
<NetworkSelectEx responsive={false} className="network-ex" />
|
|
29
|
-
</Paper>
|
|
30
|
-
</FlexRow>
|
|
31
|
-
<FlexRow>
|
|
32
|
-
<Paper variant="elevation" elevation={0}>
|
|
33
|
-
<ArchiveSelectEx />
|
|
34
|
-
</Paper>
|
|
35
|
-
</FlexRow>
|
|
36
|
-
</>
|
|
37
|
-
}
|
|
38
|
-
>
|
|
39
|
-
<ControlText value={`${network?.name} : ${archive ?? 'temp'} `} />
|
|
40
|
-
</SystemControl>
|
|
41
|
-
</FlexCol>
|
|
42
|
-
)
|
|
43
|
-
} else {
|
|
44
|
-
return <FlexCol />
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
export type { SystemControlsUnstyledProps }
|
|
49
|
-
export { SystemControlsUnstyled }
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { Collapse, CollapseProps } from '@mui/material'
|
|
2
|
-
import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
|
|
3
|
-
import { WithChildren } from '@xylabs/react-shared'
|
|
4
|
-
import { useState } from 'react'
|
|
5
|
-
|
|
6
|
-
import { SystemControlsType } from '../SystemControlsType'
|
|
7
|
-
|
|
8
|
-
interface SystemControlProps extends FlexBoxProps {
|
|
9
|
-
controlElement: React.ReactNode
|
|
10
|
-
systemControlsType?: SystemControlsType
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
const SystemControl: React.FC<WithChildren<SystemControlProps>> = ({ children, controlElement, systemControlsType = SystemControlsType.WindowShade, ...props }) => {
|
|
14
|
-
const [toggleControls, setToggleControls] = useState(false)
|
|
15
|
-
|
|
16
|
-
let orientation: CollapseProps['orientation'] = 'vertical'
|
|
17
|
-
|
|
18
|
-
switch (systemControlsType) {
|
|
19
|
-
case SystemControlsType.Left: {
|
|
20
|
-
orientation = 'horizontal'
|
|
21
|
-
break
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
return (
|
|
26
|
-
<FlexRow className="controls" {...props}>
|
|
27
|
-
<Collapse in={toggleControls} orientation={orientation} timeout={500}>
|
|
28
|
-
<FlexRow bgcolor="primary.main" className="control">
|
|
29
|
-
{controlElement}
|
|
30
|
-
</FlexRow>
|
|
31
|
-
</Collapse>
|
|
32
|
-
<FlexCol style={{ cursor: 'pointer' }} onClick={() => setToggleControls(!toggleControls)}>
|
|
33
|
-
{children}
|
|
34
|
-
</FlexCol>
|
|
35
|
-
</FlexRow>
|
|
36
|
-
)
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export { SystemControl }
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { Typography } from '@mui/material'
|
|
2
|
-
import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
|
|
3
|
-
|
|
4
|
-
interface SystemControlTextProps extends FlexBoxProps {
|
|
5
|
-
value?: string
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
const ControlText: React.FC<SystemControlTextProps> = ({ value, ...props }) => {
|
|
9
|
-
return (
|
|
10
|
-
<FlexCol className={`${props.className} toggle`} {...props}>
|
|
11
|
-
<Typography variant="caption" color="white" fontWeight="bold">
|
|
12
|
-
{value}
|
|
13
|
-
</Typography>
|
|
14
|
-
</FlexCol>
|
|
15
|
-
)
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export { ControlText }
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import SearchIcon from '@mui/icons-material/Search'
|
|
2
|
-
import { Paper, TextField } from '@mui/material'
|
|
3
|
-
import { ButtonEx } from '@xylabs/react-button'
|
|
4
|
-
import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
|
|
5
|
-
import { useState } from 'react'
|
|
6
|
-
|
|
7
|
-
export interface SearchBarProps extends FlexBoxProps {
|
|
8
|
-
onSearch?: (term?: string) => void
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export const SearchBar: React.FC<SearchBarProps> = ({ defaultValue, onSearch, ...props }) => {
|
|
12
|
-
const [term, setTerm] = useState<string>()
|
|
13
|
-
|
|
14
|
-
return (
|
|
15
|
-
<FlexRow alignItems="stretch" {...props}>
|
|
16
|
-
<Paper variant="elevation" elevation={0} style={{ display: 'flex', overflow: 'hidden', width: '100%' }}>
|
|
17
|
-
<TextField
|
|
18
|
-
InputProps={{ color: 'secondary', style: { borderBottomRightRadius: 0, borderTopRightRadius: 0, borderWidth: 0 } }}
|
|
19
|
-
variant="outlined"
|
|
20
|
-
size="small"
|
|
21
|
-
defaultValue={defaultValue}
|
|
22
|
-
fullWidth
|
|
23
|
-
onChange={(event) => setTerm(event.target.value)}
|
|
24
|
-
onKeyDown={(event) => {
|
|
25
|
-
if (event.key === 'Enter') onSearch?.(term)
|
|
26
|
-
}}
|
|
27
|
-
/>
|
|
28
|
-
<ButtonEx variant="contained" style={{ borderRadius: 0, borderTopLeftRadius: 0 }} color="secondary" onClick={() => onSearch?.(term)}>
|
|
29
|
-
<SearchIcon />
|
|
30
|
-
</ButtonEx>
|
|
31
|
-
</Paper>
|
|
32
|
-
</FlexRow>
|
|
33
|
-
)
|
|
34
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './SearchBar'
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import MenuIcon from '@mui/icons-material/Menu'
|
|
2
|
-
import SettingsIcon from '@mui/icons-material/Settings'
|
|
3
|
-
import { IconButton, List, SwipeableDrawer } from '@mui/material'
|
|
4
|
-
import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
|
|
5
|
-
import { useState } from 'react'
|
|
6
|
-
|
|
7
|
-
import { SiteMenuListItem } from './MenuItems'
|
|
8
|
-
|
|
9
|
-
export interface SiteMenuProps extends FlexBoxProps {
|
|
10
|
-
hideSettingsMenuItem?: boolean
|
|
11
|
-
side?: 'left' | 'right' | 'top' | 'bottom'
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export const SiteMenu: React.FC<SiteMenuProps> = ({ side = 'right', children, ...props }) => {
|
|
15
|
-
const [open, setOpen] = useState(false)
|
|
16
|
-
|
|
17
|
-
return (
|
|
18
|
-
<FlexRow alignItems="stretch" {...props}>
|
|
19
|
-
<IconButton
|
|
20
|
-
size="small"
|
|
21
|
-
color="inherit"
|
|
22
|
-
onClick={() => {
|
|
23
|
-
setOpen(!open)
|
|
24
|
-
}}
|
|
25
|
-
>
|
|
26
|
-
<MenuIcon fontSize="large" />
|
|
27
|
-
</IconButton>
|
|
28
|
-
<SwipeableDrawer anchor={side} open={open} onClick={() => setOpen(false)} onKeyDown={() => setOpen(false)} onClose={() => setOpen(false)} onOpen={() => setOpen(true)}>
|
|
29
|
-
{children ?? (
|
|
30
|
-
<List>
|
|
31
|
-
<SiteMenuListItem primary="Settings" icon={<SettingsIcon />} to="/settings" />
|
|
32
|
-
</List>
|
|
33
|
-
)}
|
|
34
|
-
</SwipeableDrawer>
|
|
35
|
-
</FlexRow>
|
|
36
|
-
)
|
|
37
|
-
}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { List } from '@mui/material'
|
|
2
|
-
import { ComponentMeta, ComponentStory } from '@storybook/react'
|
|
3
|
-
|
|
4
|
-
import { SiteMenuListItem } from './MenuItems'
|
|
5
|
-
|
|
6
|
-
const StorybookEntry = {
|
|
7
|
-
argTypes: {},
|
|
8
|
-
component: SiteMenuListItem,
|
|
9
|
-
parameters: {
|
|
10
|
-
docs: {
|
|
11
|
-
page: null,
|
|
12
|
-
},
|
|
13
|
-
},
|
|
14
|
-
title: 'appbar/SiteMenuListItem',
|
|
15
|
-
} as ComponentMeta<typeof SiteMenuListItem>
|
|
16
|
-
|
|
17
|
-
const Template: ComponentStory<typeof SiteMenuListItem> = (args) => {
|
|
18
|
-
return (
|
|
19
|
-
<List>
|
|
20
|
-
<SiteMenuListItem {...args} />
|
|
21
|
-
</List>
|
|
22
|
-
)
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
const Default = Template.bind({})
|
|
26
|
-
Default.args = {
|
|
27
|
-
primary: 'Test',
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
const WithChildren = Template.bind({})
|
|
31
|
-
WithChildren.args = {
|
|
32
|
-
children: <SiteMenuListItem primary="Test Child" />,
|
|
33
|
-
primary: 'Test',
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
export { Default, WithChildren }
|
|
37
|
-
|
|
38
|
-
// eslint-disable-next-line import/no-default-export
|
|
39
|
-
export default StorybookEntry
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { ListItem, ListItemIcon, ListItemProps, ListItemText, ListItemTextProps } from '@mui/material'
|
|
2
|
-
import { ListItemButtonEx, ListItemButtonExProps } from '@xyo-network/react-shared'
|
|
3
|
-
import { ReactNode } from 'react'
|
|
4
|
-
import { To } from 'react-router-dom'
|
|
5
|
-
|
|
6
|
-
export interface SiteMenuListItemProps extends ListItemProps {
|
|
7
|
-
primary: ListItemTextProps['primary']
|
|
8
|
-
to?: To
|
|
9
|
-
icon?: ReactNode
|
|
10
|
-
onButtonClick?: ListItemButtonExProps['onClick']
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({ style, children, primary, to, icon, onButtonClick, ...props }) => {
|
|
14
|
-
return (
|
|
15
|
-
<ListItem style={{ display: 'block', ...style }} {...props}>
|
|
16
|
-
<ListItemButtonEx to={to} onClick={onButtonClick}>
|
|
17
|
-
<ListItemIcon>{icon}</ListItemIcon>
|
|
18
|
-
<ListItemText primary={primary} />
|
|
19
|
-
</ListItemButtonEx>
|
|
20
|
-
{children}
|
|
21
|
-
</ListItem>
|
|
22
|
-
)
|
|
23
|
-
}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { ComponentMeta, ComponentStory } from '@storybook/react'
|
|
2
|
-
import { BrowserRouter } from 'react-router-dom'
|
|
3
|
-
|
|
4
|
-
import { ContextToolbar } from './ContextToolbar'
|
|
5
|
-
|
|
6
|
-
const StorybookEntry = {
|
|
7
|
-
argTypes: {},
|
|
8
|
-
component: ContextToolbar,
|
|
9
|
-
parameters: {
|
|
10
|
-
docs: {
|
|
11
|
-
page: null,
|
|
12
|
-
},
|
|
13
|
-
},
|
|
14
|
-
title: 'appbar/Toolbar/Context',
|
|
15
|
-
} as ComponentMeta<typeof ContextToolbar>
|
|
16
|
-
|
|
17
|
-
const Template: ComponentStory<typeof ContextToolbar> = (args) => (
|
|
18
|
-
<BrowserRouter>
|
|
19
|
-
<ContextToolbar {...args}></ContextToolbar>
|
|
20
|
-
</BrowserRouter>
|
|
21
|
-
)
|
|
22
|
-
|
|
23
|
-
const Default = Template.bind({})
|
|
24
|
-
Default.args = {}
|
|
25
|
-
|
|
26
|
-
const WithVersion = Template.bind({})
|
|
27
|
-
WithVersion.args = { version: true }
|
|
28
|
-
|
|
29
|
-
export { Default, WithVersion }
|
|
30
|
-
|
|
31
|
-
// eslint-disable-next-line import/no-default-export
|
|
32
|
-
export default StorybookEntry
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Toolbar, ToolbarProps } from '@mui/material'
|
|
2
|
-
import { To } from 'react-router-dom'
|
|
3
|
-
|
|
4
|
-
import { XyoLogoLinkEx } from './XyoLogoLinkEx'
|
|
5
|
-
|
|
6
|
-
export interface ContextToolbarProps extends ToolbarProps {
|
|
7
|
-
logoTo?: To
|
|
8
|
-
version?: boolean
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export const ContextToolbar: React.FC<ContextToolbarProps> = ({ logoTo = '/', version = false, ...props }) => {
|
|
12
|
-
return (
|
|
13
|
-
<Toolbar {...props}>
|
|
14
|
-
<XyoLogoLinkEx version={version} to={logoTo} />
|
|
15
|
-
</Toolbar>
|
|
16
|
-
)
|
|
17
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { useTheme } from '@mui/material'
|
|
2
|
-
|
|
3
|
-
export const XyoLogo: React.FC<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>> = (props) => {
|
|
4
|
-
const theme = useTheme()
|
|
5
|
-
const logoUrl = theme.palette.mode === 'dark' ? 'https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg' : 'https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg'
|
|
6
|
-
return <img src={logoUrl} {...props} />
|
|
7
|
-
}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { Typography, useTheme } from '@mui/material'
|
|
2
|
-
import { FlexRow } from '@xylabs/react-flexbox'
|
|
3
|
-
import { LinkEx, LinkExProps } from '@xylabs/react-link'
|
|
4
|
-
|
|
5
|
-
import { XyoLogo } from './XyoLogo'
|
|
6
|
-
|
|
7
|
-
export interface XyoLogoLinkExProps extends LinkExProps {
|
|
8
|
-
version?: boolean | string
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export const XyoLogoLinkEx: React.FC<XyoLogoLinkExProps> = ({ to = '/', version = false, ...props }) => {
|
|
12
|
-
const theme = useTheme()
|
|
13
|
-
return (
|
|
14
|
-
<LinkEx to={to} {...props}>
|
|
15
|
-
<FlexRow paddingX="4px">
|
|
16
|
-
<XyoLogo height="40" width="43" />
|
|
17
|
-
{version ? (
|
|
18
|
-
<Typography
|
|
19
|
-
position="absolute"
|
|
20
|
-
borderRadius={1}
|
|
21
|
-
right={6}
|
|
22
|
-
color={theme.palette.getContrastText(theme.palette.text.primary)}
|
|
23
|
-
bottom={0}
|
|
24
|
-
bgcolor={theme.palette.text.primary}
|
|
25
|
-
paddingX="2px"
|
|
26
|
-
lineHeight={1}
|
|
27
|
-
variant="caption"
|
|
28
|
-
border={`1px ${theme.palette.getContrastText(theme.palette.primary.main)} solid`}
|
|
29
|
-
>
|
|
30
|
-
{typeof version === 'string' ? version : '2.0'}
|
|
31
|
-
</Typography>
|
|
32
|
-
) : null}
|
|
33
|
-
</FlexRow>
|
|
34
|
-
</LinkEx>
|
|
35
|
-
)
|
|
36
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './ContextToolbar'
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
/* eslint-disable import/no-internal-modules */
|
|
2
|
-
import { List } from '@mui/material'
|
|
3
|
-
import { ComponentMeta, ComponentStory } from '@storybook/react'
|
|
4
|
-
import { BrowserRouter } from 'react-router-dom'
|
|
5
|
-
|
|
6
|
-
import { WrappedAuthComponent } from '../../../../../../.storybook'
|
|
7
|
-
import { ArchiveProvider, ArchivesProvider } from '../../../../../archive/src'
|
|
8
|
-
import { ArchivistApiProvider } from '../../../../../archivist-api/src'
|
|
9
|
-
import { AuthProvider, AuthState } from '../../../../../auth/src'
|
|
10
|
-
import { NetworkMemoryProvider } from '../../../../../network/src'
|
|
11
|
-
import { SiteMenuListItem } from '../../SiteMenu'
|
|
12
|
-
import { SystemToolbar } from './SystemToolbar'
|
|
13
|
-
|
|
14
|
-
const StorybookEntry = {
|
|
15
|
-
argTypes: {},
|
|
16
|
-
component: SystemToolbar,
|
|
17
|
-
parameters: {
|
|
18
|
-
docs: {
|
|
19
|
-
page: null,
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
title: 'appbar/Toolbar/System',
|
|
23
|
-
} as ComponentMeta<typeof SystemToolbar>
|
|
24
|
-
|
|
25
|
-
const Template: ComponentStory<typeof SystemToolbar> = (args) => (
|
|
26
|
-
<ArchivistApiProvider apiDomain="https://beta.api.archivist.xyo.network">
|
|
27
|
-
<ArchivesProvider>
|
|
28
|
-
<BrowserRouter>
|
|
29
|
-
<NetworkMemoryProvider>
|
|
30
|
-
<ArchiveProvider>
|
|
31
|
-
<SystemToolbar {...args} />
|
|
32
|
-
</ArchiveProvider>
|
|
33
|
-
</NetworkMemoryProvider>
|
|
34
|
-
</BrowserRouter>
|
|
35
|
-
</ArchivesProvider>
|
|
36
|
-
</ArchivistApiProvider>
|
|
37
|
-
)
|
|
38
|
-
|
|
39
|
-
const TemplateWithAuthContext: ComponentStory<WrappedAuthComponent> = ({ authState }) => (
|
|
40
|
-
<AuthProvider authState={authState as AuthState}>
|
|
41
|
-
<ArchivistApiProvider apiDomain="https://beta.api.archivist.xyo.network">
|
|
42
|
-
<ArchivesProvider>
|
|
43
|
-
<BrowserRouter>
|
|
44
|
-
<NetworkMemoryProvider>
|
|
45
|
-
<ArchiveProvider>
|
|
46
|
-
<SystemToolbar
|
|
47
|
-
menuItems={
|
|
48
|
-
<List>
|
|
49
|
-
<SiteMenuListItem primary="Hello" />
|
|
50
|
-
</List>
|
|
51
|
-
}
|
|
52
|
-
/>
|
|
53
|
-
</ArchiveProvider>
|
|
54
|
-
</NetworkMemoryProvider>
|
|
55
|
-
</BrowserRouter>
|
|
56
|
-
</ArchivesProvider>
|
|
57
|
-
</ArchivistApiProvider>
|
|
58
|
-
</AuthProvider>
|
|
59
|
-
)
|
|
60
|
-
|
|
61
|
-
const Default = Template.bind({})
|
|
62
|
-
Default.args = {}
|
|
63
|
-
|
|
64
|
-
const WithLoggedInAccount = TemplateWithAuthContext.bind({})
|
|
65
|
-
WithLoggedInAccount.args = {
|
|
66
|
-
authState: {
|
|
67
|
-
loggedInAccount: 'none@none.com',
|
|
68
|
-
},
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
const NeedsReAuth = TemplateWithAuthContext.bind({})
|
|
72
|
-
NeedsReAuth.args = {
|
|
73
|
-
authState: {
|
|
74
|
-
reAuthenticate: true,
|
|
75
|
-
},
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
export { Default, NeedsReAuth, WithLoggedInAccount }
|
|
79
|
-
|
|
80
|
-
// eslint-disable-next-line import/no-default-export
|
|
81
|
-
export default StorybookEntry
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { Paper, Toolbar, ToolbarProps } from '@mui/material'
|
|
2
|
-
import { SelectExProps } from '@xylabs/react-common'
|
|
3
|
-
import { FlexRow } from '@xylabs/react-flexbox'
|
|
4
|
-
import { DarkModeIconButton } from '@xyo-network/react-app-settings'
|
|
5
|
-
import { ArchiveSelectEx } from '@xyo-network/react-archive'
|
|
6
|
-
import { AuthStatusIconButton } from '@xyo-network/react-auth'
|
|
7
|
-
import { NetworkSelectEx, NetworkSelectExProps } from '@xyo-network/react-network'
|
|
8
|
-
import { ReactNode } from 'react'
|
|
9
|
-
|
|
10
|
-
import { SiteMenu } from '../../SiteMenu'
|
|
11
|
-
|
|
12
|
-
export interface SystemToolbarProps extends ToolbarProps {
|
|
13
|
-
networkSelectProps?: NetworkSelectExProps
|
|
14
|
-
archiveSelectProps?: SelectExProps<string>
|
|
15
|
-
hideNetworkSelect?: boolean
|
|
16
|
-
hideArchiveSelect?: boolean
|
|
17
|
-
darkModeButton?: boolean
|
|
18
|
-
authButton?: boolean
|
|
19
|
-
menuItems?: ReactNode
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export const SystemToolbar: React.FC<SystemToolbarProps> = ({
|
|
23
|
-
children,
|
|
24
|
-
networkSelectProps,
|
|
25
|
-
archiveSelectProps,
|
|
26
|
-
hideNetworkSelect,
|
|
27
|
-
hideArchiveSelect,
|
|
28
|
-
darkModeButton = false,
|
|
29
|
-
authButton = false,
|
|
30
|
-
menuItems,
|
|
31
|
-
...props
|
|
32
|
-
}) => {
|
|
33
|
-
return (
|
|
34
|
-
<Toolbar {...props}>
|
|
35
|
-
{hideNetworkSelect ? null : (
|
|
36
|
-
<FlexRow marginX={0.5}>
|
|
37
|
-
<Paper variant="elevation">
|
|
38
|
-
<NetworkSelectEx fullWidth {...networkSelectProps} />
|
|
39
|
-
</Paper>
|
|
40
|
-
</FlexRow>
|
|
41
|
-
)}
|
|
42
|
-
{hideArchiveSelect ? null : (
|
|
43
|
-
<FlexRow marginX={0.5}>
|
|
44
|
-
<Paper variant="elevation">
|
|
45
|
-
<ArchiveSelectEx fullWidth {...archiveSelectProps} />
|
|
46
|
-
</Paper>
|
|
47
|
-
</FlexRow>
|
|
48
|
-
)}
|
|
49
|
-
{children}
|
|
50
|
-
{authButton ? <AuthStatusIconButton color="inherit" /> : null}
|
|
51
|
-
{darkModeButton ? <DarkModeIconButton color="inherit" /> : null}
|
|
52
|
-
{menuItems ? <SiteMenu>{menuItems}</SiteMenu> : null}
|
|
53
|
-
</Toolbar>
|
|
54
|
-
)
|
|
55
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './SystemToolbar'
|
package/src/components/index.ts
DELETED
package/src/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components'
|