feat: added avatar stories

Signed-off-by: Kunaldeep singh <[email protected]>

packages/components/src/index.tsx

@@ -29,3 +29,5 @@ export { Accordion } from './accordion';
 export { AccordionActions } from './accordionactions';
 export { AccordionDetails } from './accordiondetails';
 export { AccordionSummary } from './accordionsummary';
+export { AvatarGroup } from './avatargroup';
+export { Badge } from './badge';

packages/design-system/src/stories/Accordion.stories.tsx

@@ -0,0 +1,90 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Typography
+} from '@layer5/sistent-components/src';
+import React from 'react';
+import { AddIcon } from '@layer5/sistent-svg/src'; //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>
+  );
+}

packages/design-system/src/stories/AppBar.stories.jsx → packages/design-system/src/stories/AppBar.stories.tsx

@@ -1,4 +1,5 @@
 import { AppBar, Box, IconButton, Toolbar, Typography } from '@layer5/sistent-components/src';
+import React from 'react';
 
 export default {
   title: 'Example/AppBar',

packages/design-system/src/stories/Avatar.stories.tsx

@@ -0,0 +1,103 @@
+import { Avatar, Stack, AvatarGroup, Badge } from '@layer5/sistent-components/src';
+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>
+  );
+}

packages/design-system/src/stories/Button.stories.jsx → packages/design-system/src/stories/Button.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { BaseButton } from '@layer5/sistent-components/src';
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 export default {

packages/design-system/src/stories/Chip.stories.jsx → packages/design-system/src/stories/Chip.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Chip, Stack } from '@layer5/sistent-components/src';
 
 export default {
@@ -72,7 +74,10 @@ export function ClickableAndDeletableChips() {
 export function ClickableLinkChips() {
   return (
     <Stack direction="row" spacing={1}>
+      {/* href isn't a valid prop for chips, it's not defined in the docs either */}
+      {/* @ts-ignore */}
       <Chip label="Clickable Link" component="a" href="#basic-chip" clickable />
+      {/* @ts-ignore */}
       <Chip label="Clickable Link" component="a" href="#basic-chip" variant="outlined" clickable />
     </Stack>
   );

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

@@ -33,6 +33,7 @@ export const Tab = ({ textColor, disabled, ...rest }) => {
   const handleChange = (event, newValue) => {
     setValue(newValue);
   };
+
   return (
     <Box sx={{ width: '100%' }}>
       <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>