layer5io · kunal70006 · Aug 30, 2023 · Aug 30, 2023 · Aug 30, 2023 · Aug 30, 2023
diff --git a/packages/components/src/cardactions.tsx b/packages/components/src/cardactions.tsx
@@ -0,0 +1,6 @@
+import { CardActionsProps, CardActions as MuiCardActions } from '@mui/material';
+import React from 'react';
+
+export const CardActions = (props: CardActionsProps) => {
+  return <MuiCardActions {...props} />;
+};
diff --git a/packages/components/src/cardcontent.tsx b/packages/components/src/cardcontent.tsx
@@ -0,0 +1,6 @@
+import { CardContentProps, CardContent as MuiCardContent } from '@mui/material';
+import React from 'react';
+
+export const CardContent = (props: CardContentProps) => {
+  return <MuiCardContent {...props} />;
+};
diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
@@ -36,3 +36,8 @@ export { ToggleButtonGroup } from './togglebuttongroup';
 export { Toolbar } from './toolbar';
 export { Tooltip } from './tooltip';
 export { Typography } from './typography';
+export { Badge } from './badge';
+export { Backdrop } from './backdrop';
+export { CardContent } from './cardcontent';
+export { CardActions } from './cardactions';
+export { MenuItem } from './menuitem';
diff --git a/packages/components/src/menuitem.tsx b/packages/components/src/menuitem.tsx
@@ -0,0 +1,6 @@
+import { MenuItemProps, MenuItem as MuiMenuItem } from '@mui/material';
+import React from 'react';
+
+export const MenuItem = (props: MenuItemProps) => {
+  return <MuiMenuItem {...props} />;
+};
diff --git a/packages/design-system/.storybook/main.js → packages/design-system/.storybook/main.ts b/packages/design-system/.storybook/main.js → packages/design-system/.storybook/main.ts
diff --git a/packages/design-system/.storybook/preview.js → packages/design-system/.storybook/preview.ts b/packages/design-system/.storybook/preview.js → packages/design-system/.storybook/preview.ts
diff --git a/packages/design-system/index.html b/packages/design-system/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -5,10 +5,11 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@layer5/sistent-components": "0.1.0",
     "@mui/material": "^5.14.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "@layer5/sistent-components": "*",
+    "@layer5/sistent-svg": "*"
   },
   "scripts": {
     "dev": "vite",

diff --git a/packages/design-system/src/App.jsx → packages/design-system/src/App.tsx b/packages/design-system/src/App.jsx → packages/design-system/src/App.tsx
@@ -1,4 +1,5 @@
 import { BaseButton } from '@layer5/sistent-components';
+import React from 'react';
 
 function App() {
   return (

diff --git a/packages/design-system/src/main.jsx b/packages/design-system/src/main.jsx
diff --git a/packages/design-system/src/main.tsx b/packages/design-system/src/main.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import App from './App';
+import { createRoot } from 'react-dom/client';
+
+const rootContainer = document.getElementById('root');
+const root = createRoot(rootContainer!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/packages/design-system/src/stories/Accordion.stories.tsx b/packages/design-system/src/stories/Accordion.stories.tsx
@@ -0,0 +1,90 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Typography
+} from '@layer5/sistent-components';
+import React from 'react';
+import { AddIcon } from '@layer5/sistent-svg'; //can anyone suggest a diff icon here?
+
+export default {
+  title: 'Example/Accordion',
+  component: Accordion,
+  tags: ['autodocs']
+};
+
+export function Basic() {
+  return (
+    <Accordion>
+      <AccordionSummary
+        expandIcon={<AddIcon />}
+        aria-controls="panel1a-content"
+        id="panel1a-header">
+        <Typography>Accordion 1</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+          sit amet blandit leo lobortis eget.
+        </Typography>
+      </AccordionDetails>
+    </Accordion>
+  );
+}
+
+export function Disabled() {
+  return (
+    <Accordion disabled>
+      <AccordionSummary
+        expandIcon={<AddIcon />}
+        aria-controls="panel3a-content"
+        id="panel3a-header">
+        <Typography>Disabled Accordion</Typography>
+      </AccordionSummary>
+    </Accordion>
+  );
+}
+
+export function Controlled() {
+  type panel = 'panel1' | 'panel2';
+  const [expanded, setExpanded] = React.useState<boolean | panel>(false);
+
+  const handleChange = (panel: panel) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+    setExpanded(isExpanded ? panel : false);
+  };
+
+  return (
+    <div>
+      <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
+        <AccordionSummary
+          expandIcon={<AddIcon />}
+          aria-controls="panel1bh-content"
+          id="panel1bh-header">
+          <Typography sx={{ width: '33%', flexShrink: 0 }}>General settings</Typography>
+          <Typography sx={{ color: 'text.secondary' }}>I am an accordion</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget
+            maximus est, id dignissim quam.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
+        <AccordionSummary
+          expandIcon={<AddIcon />}
+          aria-controls="panel2bh-content"
+          id="panel2bh-header">
+          <Typography sx={{ width: '33%', flexShrink: 0 }}>Users</Typography>
+          <Typography sx={{ color: 'text.secondary' }}>You are currently not an owner</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar
+            diam eros in elit. Pellentesque convallis laoreet laoreet.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+    </div>
+  );
+}
diff --git a/...ign-system/src/stories/AppBar.stories.jsx → ...ign-system/src/stories/AppBar.stories.tsx b/...ign-system/src/stories/AppBar.stories.jsx → ...ign-system/src/stories/AppBar.stories.tsx
@@ -1,4 +1,5 @@
 import { AppBar, Box, IconButton, Toolbar, Typography } from '@layer5/sistent-components';
+import React from 'react';
 
 export default {
   title: 'Example/AppBar',
@@ -52,8 +53,7 @@ export function MesheryHeader() {
             variant="h6"
             noWrap
             component="div"
-            sx={{ display: { xs: 'none', sm: 'block' } }}
-          >
+            sx={{ display: { xs: 'none', sm: 'block' } }}>
             {title}
             {isBeta ? <sup>BETA</sup> : ''}
           </Typography>

diff --git a/packages/design-system/src/stories/Avatar.stories.tsx b/packages/design-system/src/stories/Avatar.stories.tsx
@@ -0,0 +1,103 @@
+import { Avatar, Stack, AvatarGroup, Badge } from '@layer5/sistent-components';
+import React from 'react';
+import { AddIcon } from '@layer5/sistent-svg/src'; //can anyone suggest a diff icon here?
+
+export default {
+  title: 'Example/Avatar',
+  component: Avatar,
+  tags: ['autodocs']
+};
+
+function stringToColor(string) {
+  let hash = 0;
+  let i;
+
+  /* eslint-disable no-bitwise */
+  for (i = 0; i < string.length; i += 1) {
+    hash = string.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  let color = '#';
+
+  for (i = 0; i < 3; i += 1) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += `00${value.toString(16)}`.slice(-2);
+  }
+  /* eslint-enable no-bitwise */
+
+  return color;
+}
+
+function stringAvatar(name) {
+  return {
+    sx: {
+      bgcolor: stringToColor(name)
+    },
+    children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`
+  };
+}
+
+export function Image() {
+  return <Avatar alt="person" src="/public/vite.svg" />;
+}
+
+export function Letter() {
+  return (
+    <Stack spacing={2} direction="row">
+      <Avatar>H</Avatar>
+      <Avatar sx={{ bgcolor: 'seagreen' }}>N</Avatar>
+      <Avatar sx={{ bgcolor: 'burlywood' }}>OP</Avatar>
+      <Avatar {...stringAvatar('Josh Smith')} />
+    </Stack>
+  );
+}
+
+export function Icon() {
+  return (
+    <Avatar sx={{ bgcolor: 'burlywood' }}>
+      <AddIcon />
+    </Avatar>
+  );
+}
+
+export function Variant() {
+  return (
+    <Stack direction="row" spacing={2}>
+      <Avatar sx={{ bgcolor: 'burlywood' }} variant="circular">
+        <AddIcon />
+      </Avatar>
+      <Avatar sx={{ bgcolor: 'burlywood' }} variant="rounded">
+        <AddIcon />
+      </Avatar>
+      <Avatar sx={{ bgcolor: 'burlywood' }} variant="square">
+        <AddIcon />
+      </Avatar>
+    </Stack>
+  );
+}
+
+export function Grouped() {
+  return (
+    <Stack direction="row">
+      <AvatarGroup max={4}>
+        <Avatar {...stringAvatar('Remy Sharp')} />
+        <Avatar {...stringAvatar('Travis Howard')} />
+        <Avatar {...stringAvatar('Cindy Baker')} />
+        <Avatar {...stringAvatar('Agnes Walker')} />
+        <Avatar {...stringAvatar('Trevor Anderson')} />
+      </AvatarGroup>
+    </Stack>
+  );
+}
+
+export function Badged() {
+  return (
+    <Badge
+      overlap="circular"
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      variant="dot"
+      color="secondary">
+      <Avatar {...stringAvatar('Trevor Anderson')} />
+    </Badge>
+  );
+}
diff --git a/packages/design-system/src/stories/Backdrop.stories.tsx b/packages/design-system/src/stories/Backdrop.stories.tsx
@@ -0,0 +1,32 @@
+import { Backdrop, BaseButton } from '@layer5/sistent-components';
+import React from 'react';
+
+export default {
+  title: 'Example/Backdrop',
+  component: Backdrop,
+  tags: ['autodocs']
+};
+
+export function Basic() {
+  const [open, setOpen] = React.useState(false);
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  return (
+    <div>
+      <BaseButton variant="contained" onClick={handleOpen}>
+        Show backdrop
+      </BaseButton>
+      <Backdrop
+        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={open}
+        onClick={handleClose}>
+        Hello
+      </Backdrop>
+    </div>
+  );
+}