,
+export const withErrorBoundary = (
+ Component: ComponentType
,
errorHandlingProps: ErrorBoundaryProps | null
) => {
- const WrappedWithErrorBoundary = (props: any) => (
+ const WrappedWithErrorBoundary = (props: P) => (
@@ -67,8 +67,14 @@ export const withErrorBoundary = (
return WrappedWithErrorBoundary;
};
-export const withSuppressedErrorBoundary = (Component: React.ComponentType) => {
- const WrappedWithErrorBoundary = (props: any) => (
+interface Props {
+ children: ReactNode;
+}
+
+export const withSuppressedErrorBoundary = (
+ Component: React.ComponentType
+) => {
+ const WrappedWithErrorBoundary: React.FC
= (props: P & Props) => (
null}>
diff --git a/packages/components/src/custom/Helpers/CondtionalTooltip/tooltip-for-desc.tsx b/packages/components/src/custom/Helpers/CondtionalTooltip/tooltip-for-desc.tsx
index 907a7b2b..b7f7e520 100644
--- a/packages/components/src/custom/Helpers/CondtionalTooltip/tooltip-for-desc.tsx
+++ b/packages/components/src/custom/Helpers/CondtionalTooltip/tooltip-for-desc.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import Tooltip from '../../../base/Tooltip';
+import { Tooltip } from '../../../base/Tooltip';
interface ConditionalTooltipProps {
value: string;
diff --git a/packages/components/src/custom/Toolbar/custom-column.tsx b/packages/components/src/custom/Toolbar/custom-column.tsx
index edae50a4..9d87ce45 100644
--- a/packages/components/src/custom/Toolbar/custom-column.tsx
+++ b/packages/components/src/custom/Toolbar/custom-column.tsx
@@ -1,15 +1,12 @@
-import {
- Checkbox,
- ClickAwayListener,
- FormControlLabel,
- IconButton,
- Paper,
- Popper,
- Tooltip
-} from '@layer5/sistent-components';
-
import React, { useState } from 'react';
import ColumnIcon from '../../../../svg/src/icons/Column/columnIcon';
+import { IconButton } from '../../base/Button';
+import { Checkbox } from '../../base/Checkbox';
+import { ClickAwayListener } from '../../base/ClickAwayListener';
+import { FormControlLabel } from '../../base/Form';
+import { Paper } from '../../base/Paper';
+import { Popper } from '../../base/Popper';
+import { Tooltip } from '../../base/Tooltip';
interface CustomColumnVisibilityControlProps {
columns: Column[];
@@ -74,15 +71,21 @@ const CustomColumnVisibilityControl: React.FC
diff --git a/packages/components/src/custom/Toolbar/custom-filter.tsx b/packages/components/src/custom/Toolbar/custom-filter.tsx
index ba11e5c8..edb03f36 100644
--- a/packages/components/src/custom/Toolbar/custom-filter.tsx
+++ b/packages/components/src/custom/Toolbar/custom-filter.tsx
@@ -1,16 +1,14 @@
-import {
- Button,
- ClickAwayListener,
- IconButton,
- MenuItem,
- Paper,
- Popper,
- Select,
- Tooltip
-} from '@layer5/sistent-components';
+import { FilterIcon } from '@layer5/sistent-svg';
import InputLabel from '@mui/material/InputLabel';
+import { SelectChangeEvent } from '@mui/material/Select';
import React, { useState } from 'react';
-import FilterIcon from '../../../../svg/src/icons/Filter/FilterIcon';
+import { Button, IconButton } from '../../base/Button';
+import { ClickAwayListener } from '../../base/ClickAwayListener';
+import { MenuItem } from '../../base/Menu';
+import { Paper } from '../../base/Paper';
+import { Popper } from '../../base/Popper';
+import { Select } from '../../base/Select';
+import { Tooltip } from '../../base/Tooltip';
interface FilterColumn {
name: string;
@@ -84,15 +82,21 @@ const UniversalFilter: React.FC = ({
open={open}
anchorEl={anchorEl}
placement="bottom-end"
- modifiers={{
- flip: {
- enabled: false
+ modifiers={[
+ {
+ name: 'flip',
+ options: {
+ enabled: false
+ }
},
- preventOverflow: {
- enabled: true,
- boundariesElement: 'scrollParent'
+ {
+ name: 'preventOverflow',
+ options: {
+ enabled: true,
+ boundariesElement: 'scrollParent'
+ }
}
- }}
+ ]}
transition
>
= ({
defaultValue="All"
key={filterColumn}
value={selectedFilters[filterColumn]}
- onChange={(e: React.ChangeEvent<{ value: string }>) =>
- handleFilterChange(e, filterColumn)
+ onChange={(e: SelectChangeEvent) =>
+ handleFilterChange(e as React.ChangeEvent<{ value: string }>, filterColumn)
}
style={{
width: '15rem',
diff --git a/packages/components/src/custom/Toolbar/custom-search.tsx b/packages/components/src/custom/Toolbar/custom-search.tsx
index 5fccfd69..c95ba0b2 100644
--- a/packages/components/src/custom/Toolbar/custom-search.tsx
+++ b/packages/components/src/custom/Toolbar/custom-search.tsx
@@ -1,7 +1,8 @@
-import { IconButton, TextField, Tooltip } from '@layer5/sistent-components';
+import { CloseIcon, SearchIcon } from '@layer5/sistent-svg';
import React, { useRef, useState } from 'react';
-import CloseIcon from '../../../../svg/src/icons/Close/closeIcon';
-import SearchIcon from '../../../../svg/src/icons/Search/searchIcon';
+import { IconButton } from '../../base/Button';
+import { TextField } from '../../base/Input';
+import { Tooltip } from '../../base/Tooltip';
interface SearchBarProps {
onSearch: (searchText: string) => void;
diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
index 47b15223..7a9c75b9 100644
--- a/packages/components/src/index.tsx
+++ b/packages/components/src/index.tsx
@@ -11,6 +11,7 @@ export * from './base/DataTable';
export * from './base/Dialog';
export * from './base/Divider';
export * from './base/Drawer';
+export * from './base/Form';
export * from './base/Input';
export * from './base/List';
export * from './base/Menu';
diff --git a/packages/svg/package.json b/packages/svg/package.json
index 5f3e3930..75b57ea3 100644
--- a/packages/svg/package.json
+++ b/packages/svg/package.json
@@ -28,6 +28,7 @@
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
+ "react": "^18.2.0",
"typescript": "^5.0.2",
"vite": "^4.4.5",
"vite-plugin-dts": "^3.5.3"
diff --git a/packages/svg/src/icons/Search/index.ts b/packages/svg/src/icons/Search/index.ts
new file mode 100644
index 00000000..eeac145b
--- /dev/null
+++ b/packages/svg/src/icons/Search/index.ts
@@ -0,0 +1 @@
+export { default as SearchIcon } from './searchicon';
diff --git a/packages/svg/src/icons/Search/intex.ts b/packages/svg/src/icons/Search/intex.ts
deleted file mode 100644
index c7ee78f0..00000000
--- a/packages/svg/src/icons/Search/intex.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as SearchIcon } from './seacrhIcon';
diff --git a/packages/svg/src/icons/Search/seacrhIcon.tsx b/packages/svg/src/icons/Search/searchicon.tsx
similarity index 100%
rename from packages/svg/src/icons/Search/seacrhIcon.tsx
rename to packages/svg/src/icons/Search/searchicon.tsx
diff --git a/packages/svg/src/icons/index.ts b/packages/svg/src/icons/index.ts
index 1d24eb3b..393134e9 100644
--- a/packages/svg/src/icons/index.ts
+++ b/packages/svg/src/icons/index.ts
@@ -5,6 +5,7 @@ export * from './Bus';
export * from './Chevron';
export * from './Circle';
export * from './Clone';
+export * from './Close';
export * from './Cloud';
export * from './Component';
export * from './Configuration';
@@ -38,6 +39,7 @@ export * from './Reset';
export * from './Ring';
export * from './Save';
export * from './Screenshot';
+export * from './Search';
export * from './Settings';
export * from './Star';
export * from './Toolkit';
diff --git a/system/foundations/responsive.md b/system/foundations/responsive.md
index 2e6406d3..057a6539 100644
--- a/system/foundations/responsive.md
+++ b/system/foundations/responsive.md
@@ -29,9 +29,7 @@ Providing support at these smaller sizes enable people with low vision to use La
To understand how to break down a page to work on smaller viewports, check out [Responsive foundations](/foundations/layout) and [Responsive behavior](/foundations/layout) sections in the [Layout](/foundations/layout) page.
-
TODO: Capture SVG requirements and practices from Meshery.
-
- **Minimum viewport width**: 375px
-- **Minimum viewport height**: 300px
\ No newline at end of file
+- **Minimum viewport height**: 300px
diff --git a/yarn.lock b/yarn.lock
index bd8be4cb..8d36704e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1498,6 +1498,15 @@ __metadata:
languageName: node
linkType: hard
+"@babel/runtime@npm:^7.23.2":
+ version: 7.23.2
+ resolution: "@babel/runtime@npm:7.23.2"
+ dependencies:
+ regenerator-runtime: ^0.14.0
+ checksum: 6c4df4839ec75ca10175f636d6362f91df8a3137f86b38f6cd3a4c90668a0fe8e9281d320958f4fbd43b394988958585a17c3aab2a4ea6bf7316b22916a371fb
+ languageName: node
+ linkType: hard
+
"@babel/template@npm:^7.20.7, @babel/template@npm:^7.22.15, @babel/template@npm:^7.22.5":
version: 7.22.15
resolution: "@babel/template@npm:7.22.15"
@@ -2403,6 +2412,8 @@ __metadata:
version: 0.0.0-use.local
resolution: "@layer5/sistent-components@workspace:packages/components"
dependencies:
+ "@emotion/react": ^11.11.1
+ "@emotion/styled": ^11.11.0
"@layer5/sistent-svg": "workspace:^"
"@mui/icons-material": ^5.14.12
"@mui/material": ^5.14.10
@@ -2415,6 +2426,8 @@ __metadata:
eslint: ^8.45.0
eslint-plugin-react: ^7.33.2
mui-datatables: ^4.3.0
+ react: ^18.2.0
+ react-dom: ^18.2.0
react-error-boundary: ^4.0.11
typescript: ^5.0.2
vite: ^4.4.5
@@ -2424,9 +2437,11 @@ __metadata:
"@emotion/react": "*"
"@emotion/styled": "*"
"@mui/material": "*"
+ "@types/mui-datatables": "*"
mui-datatables: "*"
react: "*"
react-dom: "*"
+ react-error-boundary: "*"
peerDependenciesMeta:
"@emotion/react":
optional: true
@@ -2438,8 +2453,6 @@ __metadata:
optional: true
react:
optional: true
- react-dom:
- optional: true
languageName: unknown
linkType: soft
@@ -2458,6 +2471,7 @@ __metadata:
eslint-plugin-react: ^7.33.2
eslint-plugin-react-hooks: ^4.6.0
eslint-plugin-react-refresh: ^0.4.3
+ react: ^18.2.0
typescript: ^5.0.2
vite: ^4.4.5
vite-plugin-dts: ^3.5.3
@@ -2685,6 +2699,28 @@ __metadata:
languageName: node
linkType: hard
+"@mui/base@npm:5.0.0-beta.21":
+ version: 5.0.0-beta.21
+ resolution: "@mui/base@npm:5.0.0-beta.21"
+ dependencies:
+ "@babel/runtime": ^7.23.2
+ "@floating-ui/react-dom": ^2.0.2
+ "@mui/types": ^7.2.7
+ "@mui/utils": ^5.14.15
+ "@popperjs/core": ^2.11.8
+ clsx: ^2.0.0
+ prop-types: ^15.8.1
+ peerDependencies:
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ react-dom: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: c33de1a4f865e6d1669a37e149ac78ebb744c152229b4c56839254514153e80baa501789f68852ac9c9dae7c9fc9645f16eecac07220c1981ab5f916de54090d
+ languageName: node
+ linkType: hard
+
"@mui/core-downloads-tracker@npm:^5.14.11":
version: 5.14.11
resolution: "@mui/core-downloads-tracker@npm:5.14.11"
@@ -2699,6 +2735,13 @@ __metadata:
languageName: node
linkType: hard
+"@mui/core-downloads-tracker@npm:^5.14.15":
+ version: 5.14.15
+ resolution: "@mui/core-downloads-tracker@npm:5.14.15"
+ checksum: 2538bb7a62ca4eddfa2e5a1bdc589a665682092408e269019cfaedb2591aa76c4bdc8a90d0775c1614616c68546371a9723967c396af8a8b7a67c532fcfd1bc1
+ languageName: node
+ linkType: hard
+
"@mui/icons-material@npm:^5.14.12":
version: 5.14.12
resolution: "@mui/icons-material@npm:5.14.12"
@@ -2748,7 +2791,7 @@ __metadata:
languageName: node
linkType: hard
-"@mui/material@npm:^5.14.10, @mui/material@npm:^5.14.8":
+"@mui/material@npm:^5.14.10":
version: 5.14.11
resolution: "@mui/material@npm:5.14.11"
dependencies:
@@ -2781,6 +2824,39 @@ __metadata:
languageName: node
linkType: hard
+"@mui/material@npm:^5.14.15":
+ version: 5.14.15
+ resolution: "@mui/material@npm:5.14.15"
+ dependencies:
+ "@babel/runtime": ^7.23.2
+ "@mui/base": 5.0.0-beta.21
+ "@mui/core-downloads-tracker": ^5.14.15
+ "@mui/system": ^5.14.15
+ "@mui/types": ^7.2.7
+ "@mui/utils": ^5.14.15
+ "@types/react-transition-group": ^4.4.7
+ clsx: ^2.0.0
+ csstype: ^3.1.2
+ prop-types: ^15.8.1
+ react-is: ^18.2.0
+ react-transition-group: ^4.4.5
+ peerDependencies:
+ "@emotion/react": ^11.5.0
+ "@emotion/styled": ^11.3.0
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ react-dom: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@emotion/react":
+ optional: true
+ "@emotion/styled":
+ optional: true
+ "@types/react":
+ optional: true
+ checksum: e5c7a49c167f737513a6817ed008a3b69bdab86fe5fb8c951e7ac4699e7bbf911888bf66f1ed41ac44e71d82258cdead315f35aa07e284ee7a899471620f76e5
+ languageName: node
+ linkType: hard
+
"@mui/private-theming@npm:^5.14.11":
version: 5.14.11
resolution: "@mui/private-theming@npm:5.14.11"
@@ -2815,6 +2891,23 @@ __metadata:
languageName: node
linkType: hard
+"@mui/private-theming@npm:^5.14.15":
+ version: 5.14.15
+ resolution: "@mui/private-theming@npm:5.14.15"
+ dependencies:
+ "@babel/runtime": ^7.23.2
+ "@mui/utils": ^5.14.15
+ prop-types: ^15.8.1
+ peerDependencies:
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: e4f1365d0610abfd1fbbbd55a3c2454858a133c3c23513b55239c8785ac84d4041b7003d7a9685e9f04e44d11d133e7249a7cc777a59ae137d0565b7b1ca95e8
+ languageName: node
+ linkType: hard
+
"@mui/styled-engine@npm:^5.14.11":
version: 5.14.11
resolution: "@mui/styled-engine@npm:5.14.11"
@@ -2857,6 +2950,27 @@ __metadata:
languageName: node
linkType: hard
+"@mui/styled-engine@npm:^5.14.15":
+ version: 5.14.15
+ resolution: "@mui/styled-engine@npm:5.14.15"
+ dependencies:
+ "@babel/runtime": ^7.23.2
+ "@emotion/cache": ^11.11.0
+ csstype: ^3.1.2
+ prop-types: ^15.8.1
+ peerDependencies:
+ "@emotion/react": ^11.4.1
+ "@emotion/styled": ^11.3.0
+ react: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@emotion/react":
+ optional: true
+ "@emotion/styled":
+ optional: true
+ checksum: fb991d3befc04d3be490957e2fe235313b77bb38cc8b85878efd8c98eafa0139d0f85d2127ce0b9b65c4462481e3c19ff260102ee46c6cc96a4a938ffcaa2766
+ languageName: node
+ linkType: hard
+
"@mui/system@npm:^5.14.11":
version: 5.14.11
resolution: "@mui/system@npm:5.14.11"
@@ -2913,6 +3027,34 @@ __metadata:
languageName: node
linkType: hard
+"@mui/system@npm:^5.14.15":
+ version: 5.14.15
+ resolution: "@mui/system@npm:5.14.15"
+ dependencies:
+ "@babel/runtime": ^7.23.2
+ "@mui/private-theming": ^5.14.15
+ "@mui/styled-engine": ^5.14.15
+ "@mui/types": ^7.2.7
+ "@mui/utils": ^5.14.15
+ clsx: ^2.0.0
+ csstype: ^3.1.2
+ prop-types: ^15.8.1
+ peerDependencies:
+ "@emotion/react": ^11.5.0
+ "@emotion/styled": ^11.3.0
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@emotion/react":
+ optional: true
+ "@emotion/styled":
+ optional: true
+ "@types/react":
+ optional: true
+ checksum: 39a451d138433a2c4007e4e9b7c5ff60fa3c7ff4b9a0e3612b4024acce815a98ba2035a6b2aa28d457e40ee1e0613d096a50d7e2931294ec97df046957e0324b
+ languageName: node
+ linkType: hard
+
"@mui/types@npm:^7.2.4":
version: 7.2.4
resolution: "@mui/types@npm:7.2.4"
@@ -2937,6 +3079,18 @@ __metadata:
languageName: node
linkType: hard
+"@mui/types@npm:^7.2.7":
+ version: 7.2.7
+ resolution: "@mui/types@npm:7.2.7"
+ peerDependencies:
+ "@types/react": ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: cf6a770f6f62b662ba8049c830d9506a3a058b87255d33dcab47a70022496c6b82088ce9185558c4ce4744e369593d3c9b7734664ebb2e6e206fb5380b37e93f
+ languageName: node
+ linkType: hard
+
"@mui/utils@npm:^5.14.11":
version: 5.14.11
resolution: "@mui/utils@npm:5.14.11"
@@ -2973,6 +3127,24 @@ __metadata:
languageName: node
linkType: hard
+"@mui/utils@npm:^5.14.15":
+ version: 5.14.15
+ resolution: "@mui/utils@npm:5.14.15"
+ dependencies:
+ "@babel/runtime": ^7.23.2
+ "@types/prop-types": ^15.7.8
+ prop-types: ^15.8.1
+ react-is: ^18.2.0
+ peerDependencies:
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: 6c4270110eed03a2e9073111eed01555257073ec500f85f6656c9f67ff15019bf12ce632d537e71a2d5872598b62f2d31762a11e1e40ff9e985b7fe2beb6c066
+ languageName: node
+ linkType: hard
+
"@ndelangen/get-tarball@npm:^3.0.7":
version: 3.0.9
resolution: "@ndelangen/get-tarball@npm:3.0.9"
@@ -5734,6 +5906,13 @@ __metadata:
languageName: node
linkType: hard
+"@types/prop-types@npm:^15.7.8":
+ version: 15.7.9
+ resolution: "@types/prop-types@npm:15.7.9"
+ checksum: c7591d3ff7593e243908a07e1d3e2bb6e8879008af5800d8378115a90d0fdf669a1cae72a6d7f69e59c4fa7bb4c8ed61f6ebc1c520fe110c6f2b03ac02414072
+ languageName: node
+ linkType: hard
+
"@types/qs@npm:*, @types/qs@npm:^6.9.5":
version: 6.9.8
resolution: "@types/qs@npm:6.9.8"
@@ -5766,6 +5945,15 @@ __metadata:
languageName: node
linkType: hard
+"@types/react-transition-group@npm:^4.4.7":
+ version: 4.4.8
+ resolution: "@types/react-transition-group@npm:4.4.8"
+ dependencies:
+ "@types/react": "*"
+ checksum: ad7ba2bce97631fda9d89b4ed9772489bd050fec3ccd7563041b206dbe219d37d22e0d7731b1f90f56e89daf40e69ba16beba8066c42165bf8a584533feb6a2c
+ languageName: node
+ linkType: hard
+
"@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^18.2.15":
version: 18.2.23
resolution: "@types/react@npm:18.2.23"
@@ -8086,7 +8274,7 @@ __metadata:
"@emotion/styled": ^11.11.0
"@layer5/sistent-components": "workspace:^"
"@layer5/sistent-svg": "workspace:^"
- "@mui/material": ^5.14.8
+ "@mui/material": ^5.14.15
"@storybook/addon-essentials": ^7.4.3
"@storybook/addon-interactions": ^7.4.3
"@storybook/addon-links": ^7.4.3