Merge pull request #923 from amitamrutiya/add-comp

Add missing components that are present in meshery ui and extensions

Author: amitamrutiya

.github/workflows/node-checks.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16, 18, 20]
+        node-version: [18, 20]
     steps:
       - name: Checkout Repository
         uses: actions/checkout@v4

package-lock.json

@@ -81,10 +81,8 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.15.11",
-    "@types/mui-datatables": "*",
     "@xstate/react": "^4.1.1",
     "lodash": "^4.17.21",
-    "mui-datatables": "*",
     "react": ">=17",
     "react-dom": ">=17",
     "xstate": "^5.18.2"
@@ -102,9 +100,6 @@
     "@mui/material": {
       "optional": true
     },
-    "mui-datatables": {
-      "optional": true
-    },
     "react": {
       "optional": true
     },
@@ -123,6 +118,8 @@
     "moment": "^2.30.1",
     "re-resizable": "^6.10.3",
     "react-draggable": "^4.4.6",
-    "react-share": "^5.1.0"
+    "react-share": "^5.1.0",
+    "mui-datatables": "*",
+    "@types/mui-datatables": "*"
   }
-}
+}

package.json

@@ -0,0 +1,8 @@
+import { Alert as MuiAlert, AlertProps as MuiAlertProps } from '@mui/material';
+import React from 'react';
+
+export const Alert = React.forwardRef<HTMLDivElement, MuiAlertProps>((props, ref) => {
+  return <MuiAlert ref={ref} {...props} />;
+});
+
+export default Alert;

src/base/Alert/Alert.tsx

@@ -0,0 +1 @@
+export { Alert } from './Alert';

src/base/Alert/index.ts

@@ -0,0 +1,20 @@
+import {
+  Autocomplete as MuiAutocomplete,
+  AutocompleteProps as MuiAutocompleteProps
+} from '@mui/material';
+import React from 'react';
+
+export type AutocompleteProps<
+  T,
+  Multiple extends boolean = false,
+  DisableClearable extends boolean = false,
+  FreeSolo extends boolean = false
+> = MuiAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>;
+
+export const Autocomplete = React.forwardRef<HTMLDivElement, AutocompleteProps<unknown>>(
+  (props, ref) => {
+    return <MuiAutocomplete {...props} ref={ref} />;
+  }
+);
+
+export default Autocomplete;

src/base/Autocomplete/Autocomplete.tsx

@@ -0,0 +1 @@
+export { Autocomplete } from './Autocomplete';

src/base/Autocomplete/index.ts

@@ -0,0 +1,8 @@
+import { Fab as MuiFab, FabProps as MuiFabProps } from '@mui/material';
+import React from 'react';
+
+export const Fab = React.forwardRef<HTMLButtonElement, MuiFabProps>((props, ref) => (
+  <MuiFab {...props} ref={ref} />
+));
+
+export default Fab;

src/base/Fab/Fab.tsx

@@ -0,0 +1 @@
+export { Fab } from './Fab';

src/base/Fab/index.ts

@@ -0,0 +1,8 @@
+import { Fade as MuiFade, FadeProps as MuiFadeProps } from '@mui/material';
+import React from 'react';
+
+export const Fade = React.forwardRef<HTMLDivElement, MuiFadeProps>((props, ref) => {
+  return <MuiFade ref={ref} {...props} />;
+});
+
+export default Fade;

src/base/Fade/Fade.tsx

@@ -0,0 +1 @@
+export { Fade } from './Fade';

src/base/Fade/index.ts

@@ -0,0 +1,8 @@
+import { Hidden as MuiHidden, HiddenProps as MuiHiddenProps } from '@mui/material';
+import React from 'react';
+
+export const Hidden = React.forwardRef<HTMLDivElement, MuiHiddenProps>((props, ref) => {
+  return React.cloneElement(<MuiHidden {...props} />, { ref });
+});
+
+export default Hidden;

src/base/Hidden/Hidden.tsx

@@ -0,0 +1 @@
+export { Hidden } from './Hidden';