Merge pull request #85 from nebula-aac/custom-meshery-components

[components] created `searchbar` and `tooltip`

packages/components/.eslintrc.cjs

@@ -25,5 +25,7 @@ module.exports = {
     sourceType: 'module'
   },
   plugins: ['react'],
-  rules: {}
+  rules: {
+    '@typescript-eslint/explicit-function-return-type': ['warn']
+  }
 };

packages/components/src/accordion.tsx → packages/components/src/base/Accordion/accordion.tsx

@@ -1,4 +1,4 @@
-import { AccordionProps, Accordion as MuiAccordion } from '@mui/material';
+import { Accordion as MuiAccordion, type AccordionProps } from '@mui/material';
 import React from 'react';
 
 export function Accordion(props: AccordionProps) {

packages/components/src/accordionactions.tsx → packages/components/src/base/Accordion/accordionactions.tsx

@@ -1,4 +1,4 @@
-import { AccordionActionsProps, AccordionActions as MuiAccordionActions } from '@mui/material';
+import { AccordionActions as MuiAccordionActions, type AccordionActionsProps } from '@mui/material';
 import React from 'react';
 
 export function AccordionActions(props: AccordionActionsProps) {

packages/components/src/accordiondetails.tsx → packages/components/src/base/Accordion/accordiondetails.tsx

@@ -1,4 +1,4 @@
-import { AccordionDetailsProps, AccordionDetails as MuiAccordionDetails } from '@mui/material';
+import { AccordionDetails as MuiAccordionDetails, type AccordionDetailsProps } from '@mui/material';
 import React from 'react';
 
 export function AccordionDetails(props: AccordionDetailsProps) {

packages/components/src/accordionsummary.tsx → packages/components/src/base/Accordion/accordionsummary.tsx

@@ -1,4 +1,4 @@
-import { AccordionSummaryProps, AccordionSummary as MuiAccordionSummary } from '@mui/material';
+import { AccordionSummary as MuiAccordionSummary, type AccordionSummaryProps } from '@mui/material';
 import React from 'react';
 
 export function AccordionSummary(props: AccordionSummaryProps) {

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

@@ -0,0 +1,4 @@
+export { Accordion } from './accordion';
+export { AccordionActions } from './accordionactions';
+export { AccordionDetails } from './accordiondetails';
+export { AccordionSummary } from './accordionsummary';

packages/components/src/custom/SearchBar.tsx

@@ -0,0 +1,52 @@
+import React, { Fragment, type ChangeEvent, type FC, type ReactNode } from 'react';
+import { Box } from '../box';
+import { InputAdornment } from '../inputadornment';
+import { TextField } from '../textfield';
+
+interface SearchBarProps {
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  value: string;
+  width?: string;
+  label: string;
+  endAdornment?: ReactNode;
+}
+
+const SearchBar: FC<SearchBarProps> = ({
+  onChange,
+  value,
+  width,
+  label,
+  endAdornment,
+  ...props
+}) => {
+  return (
+    <Fragment>
+      <Box
+        component="form"
+        sx={{
+          '& > :not(style)': { width }
+        }}
+        {...props}
+      >
+        <TextField
+          variant="outlined"
+          label={label}
+          fullWidth
+          type="search"
+          value={value}
+          onChange={onChange}
+          sx={{
+            margin: 'auto',
+            height: '5ch'
+          }}
+          placeholder="Search"
+          InputProps={{
+            endAdornment: <InputAdornment position="end">{endAdornment}</InputAdornment>
+          }}
+        />
+      </Box>
+    </Fragment>
+  );
+};
+
+export default SearchBar;

packages/components/src/custom/Tooltip.tsx

@@ -0,0 +1,25 @@
+import { type TooltipProps as MuiTooltipProps } from '@mui/material';
+import React, { type FC, type MouseEvent, type ReactElement } from 'react';
+import { Tooltip } from '../tooltip';
+
+type TooltipProps = {
+  title: string;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  children: ReactElement<any, any>;
+} & Omit<MuiTooltipProps, 'title' | 'children' | 'onClick'>;
+
+export const MesheryTooltip: FC<TooltipProps> = ({
+  title,
+  onClick,
+  placement,
+  children,
+  ...props
+}) => {
+  return (
+    <Tooltip title={title} placement={placement} onClick={onClick} arrow {...props}>
+      {children}
+    </Tooltip>
+  );
+};
+
+export default Tooltip;

packages/components/src/custom/index.ts

@@ -0,0 +1,2 @@
+export { default as SearchBar } from './SearchBar';
+export { default as Tooltip } from './Tooltip';

packages/components/src/index.tsx

@@ -1,16 +1,14 @@
-export { Accordion } from './accordion';
-export { AccordionActions } from './accordionactions';
-export { AccordionDetails } from './accordiondetails';
-export { AccordionSummary } from './accordionsummary';
 export { AppBar } from './appbar';
 export { Avatar } from './avatar';
 export { AvatarGroup } from './avatargroup';
+export * from './base/Accordion';
 export { Box } from './box';
 export { BaseButton } from './button';
 export { ButtonGroup } from './buttongroup';
 export { Card } from './card';
 export { Checkbox } from './checkbox';
 export { Chip } from './chip';
+export * from './custom';
 export { Dialog } from './dialog';
 export { DialogActions } from './dialogactions';
 export { DialogContent } from './dialogcontent';
@@ -19,6 +17,7 @@ export { DialogTitle } from './dialogtitle';
 export { Divider } from './divider';
 export { Drawer } from './drawer';
 export { IconButton } from './iconbutton';
+export { InputAdornment } from './inputadornment';
 export { List } from './list';
 export { Menu } from './menu';
 export { Paper } from './paper';

packages/components/src/inputadornment.tsx

@@ -0,0 +1,6 @@
+import { InputAdornment as MuiInputAdornment, type InputAdornmentProps } from '@mui/material';
+import React from 'react';
+
+export function InputAdornment(props: InputAdornmentProps): JSX.Element {
+  return <MuiInputAdornment {...props} />;
+}

packages/components/src/textfield.tsx

@@ -1,6 +1,6 @@
-import { TextField as MuiTextField, TextFieldProps } from '@mui/material';
+import { TextField as MuiTextField, type TextFieldProps } from '@mui/material';
 import React from 'react';
 
-export const TextField = (props: TextFieldProps) => {
+export function TextField(props: TextFieldProps): JSX.Element {
   return <MuiTextField {...props} />;
-};
+}

packages/design-system/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@layer5/sistent-components": "0.1.0",
+    "@layer5/sistent-components": "*",
     "@mui/material": "^5.14.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

packages/design-system/src/stories/SearchBar.stories.jsx

@@ -0,0 +1,11 @@
+import { MesherySearchBar } from '@layer5/sistent-components';
+
+export default {
+  title: 'Example/SearchBar',
+  component: MesherySearchBar,
+  tags: ['autodocs']
+};
+
+export function SearchBar() {
+  return <MesherySearchBar />;
+}

packages/design-system/src/stories/Tooltip.stories.jsx

@@ -0,0 +1,15 @@
+import { BaseButton, MesheryTooltip } from '@layer5/sistent-components';
+
+export default {
+  title: 'Example/Tooltip',
+  component: MesheryTooltip,
+  tags: ['autodocs']
+};
+
+export function NonInteractiveTooltip() {
+  return (
+    <MesheryTooltip title="Add" disableInteractive>
+      <BaseButton>Not Interactive</BaseButton>
+    </MesheryTooltip>
+  );
+}