bugfix: Correct components and svg components

apps/design-system/package.json

@@ -14,14 +14,12 @@
   },
   "dependencies": {
     "@layer5/sistent-components": "workspace:^",
-    "@layer5/sistent-svg": "workspace:^",
-    "@mui/material": "^5.14.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@layer5/sistent-svg": "workspace:^"
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.15",
     "@storybook/addon-essentials": "^7.4.3",
     "@storybook/addon-interactions": "^7.4.3",
     "@storybook/addon-links": "^7.4.3",
@@ -42,6 +40,8 @@
     "eslint-plugin-storybook": "^0.6.13",
     "msw": "^1.3.0",
     "msw-storybook-addon": "^1.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "storybook": "^7.4.3",
     "typescript": "^5.0.2",
     "vite": "^4.4.5"

packages/components/package.json

@@ -2,9 +2,9 @@
   "name": "@layer5/sistent-components",
   "version": "0.6.0",
   "description": "Reusable React Components",
-  "main": "dist/index.umd.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/components/index.d.ts",
   "files": [
     "dist"
   ],
@@ -14,6 +14,8 @@
     "lint:fix": "eslint --fix"
   },
   "devDependencies": {
+    "@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",
@@ -26,6 +28,8 @@
     "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",
@@ -36,9 +40,11 @@
     "@emotion/react": "*",
     "@emotion/styled": "*",
     "@mui/material": "*",
+    "@types/mui-datatables": "*",
     "mui-datatables": "*",
     "react": "*",
-    "react-dom": "*"
+    "react-dom": "*",
+    "react-error-boundary": "*"
   },
   "peerDependenciesMeta": {
     "@emotion/react": {
@@ -55,9 +61,6 @@
     },
     "react": {
       "optional": true
-    },
-    "react-dom": {
-      "optional": true
     }
   },
   "publishConfig": {
@@ -70,8 +73,8 @@
         "default": "./dist/index.js"
       }
     },
-    "main": "dist/index.cjs",
+    "main": "dist/index.mjs",
     "module": "dist/index.js",
-    "types": "./dist/index.d.ts"
+    "types": "./dist/components/index.d.ts"
   }
 }

packages/components/src/base/Form/formcontrollabel.tsx

@@ -0,0 +1,5 @@
+import { FormControlLabel as MuiFormControlLabel, type FormControlLabelProps } from '@mui/material';
+
+export function FormControlLabel(props: FormControlLabelProps) {
+  return <MuiFormControlLabel {...props} />;
+}

packages/components/src/base/Form/index.tsx

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

packages/components/src/base/Menu/index.tsx

@@ -1 +1,2 @@
 export { Menu } from './menu';
+export { MenuItem } from './menuitem';

packages/components/src/base/Menu/menuitem.tsx

@@ -0,0 +1,5 @@
+import { MenuItem as MuiMenuItem, type MenuItemProps } from '@mui/material';
+
+export function MenuItem(props: MenuItemProps) {
+  return <MuiMenuItem {...props} />;
+}

packages/components/src/base/Popper/popper.tsx

@@ -1,5 +1,5 @@
 import { Popper as MuiPopper, type PopperProps } from '@mui/material';
 
-export const Popper = (props: PopperProps) => {
+export function Popper(props: PopperProps) {
   return <MuiPopper {...props} />;
-};
+}

packages/components/src/custom/ErrorBoundary.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@mui/material';
-import React, { type FC } from 'react';
+import React, { ErrorInfo, ReactNode, type ComponentType, type FC } from 'react';
 import {
   ErrorBoundaryProps,
   FallbackProps,
@@ -41,7 +41,7 @@ const Fallback: React.ComponentType<FallbackProps> = ({ error, resetErrorBoundar
   }
 };
 
-const reportError = (error: Error, info: React.ErrorInfo) => {
+const reportError = (error: Error, info: ErrorInfo) => {
   // This is where you'd send the error to Sentry,etc
   console.log('Error Caught Inside Boundary --reportError', error, 'Info', info);
 };
@@ -54,11 +54,11 @@ export const ErrorBoundary: FC<ErrorBoundaryProps> = ({ children, ...props }) =>
   );
 };
 //
-export const withErrorBoundary = (
-  Component: FC<any>,
+export const withErrorBoundary = <P extends object>(
+  Component: ComponentType<P>,
   errorHandlingProps: ErrorBoundaryProps | null
 ) => {
-  const WrappedWithErrorBoundary = (props: any) => (
+  const WrappedWithErrorBoundary = (props: P) => (
     <ErrorBoundary {...(errorHandlingProps ? errorHandlingProps : {})}>
       <Component {...props} />
     </ErrorBoundary>
@@ -67,8 +67,14 @@ export const withErrorBoundary = (
   return WrappedWithErrorBoundary;
 };
 
-export const withSuppressedErrorBoundary = (Component: React.ComponentType<any>) => {
-  const WrappedWithErrorBoundary = (props: any) => (
+interface Props {
+  children: ReactNode;
+}
+
+export const withSuppressedErrorBoundary = <P extends object>(
+  Component: React.ComponentType<P>
+) => {
+  const WrappedWithErrorBoundary: React.FC<P & Props> = (props: P & Props) => (
     <ErrorBoundary FallbackComponent={() => null}>
       <Component {...props} />
     </ErrorBoundary>

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;

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<CustomColumnVisibilityControlProps
         open={Boolean(anchorEl)}
         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
       >
         <ClickAwayListener onClickAway={handleClose}>

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<UniversalFilterProps> = ({
         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
       >
         <ClickAwayListener
@@ -119,8 +123,8 @@ const UniversalFilter: React.FC<UniversalFilterProps> = ({
                     defaultValue="All"
                     key={filterColumn}
                     value={selectedFilters[filterColumn]}
-                    onChange={(e: React.ChangeEvent<{ value: string }>) =>
-                      handleFilterChange(e, filterColumn)
+                    onChange={(e: SelectChangeEvent<unknown>) =>
+                      handleFilterChange(e as React.ChangeEvent<{ value: string }>, filterColumn)
                     }
                     style={{
                       width: '15rem',

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;

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';

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"

packages/svg/src/icons/Search/index.ts

@@ -0,0 +1 @@
+export { default as SearchIcon } from './searchicon';

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';

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
+- **Minimum viewport height**: 300px