@learningpool/ui 1.6.3 → 1.6.5

package/src/stories/Components/DataDisplay/List/Examples.stories.tsx

@@ -1,501 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import * as React from 'react'
-import { DOCS } from '../../../../docs'
-import List from '../../../../lib/components/datadisplay/List/List'
-import Checkbox from '../../../../lib/components/atoms/Checkbox/Checkbox'
-import IconButton from '../../../../lib/components/atoms/IconButton/IconButton'
-import {
-  ListItem, ListItemButton, ListItemIcon,
-  ListItemText, ListSubheader, ListItemAvatar
-} from '../../../../lib/'
-import {
-  Stack, Box, Typography,
-  Avatar, Divider, Collapse
-} from '@mui/material'
-import InboxIcon from '@mui/icons-material/Inbox'
-import DraftsIcon from '@mui/icons-material/Drafts'
-import ImageIcon from '@mui/icons-material/Image'
-import WorkIcon from '@mui/icons-material/Work'
-import BeachAccessIcon from '@mui/icons-material/BeachAccess'
-import SendIcon from '@mui/icons-material/Send'
-import ExpandLess from '@mui/icons-material/ExpandLess'
-import ExpandMore from '@mui/icons-material/ExpandMore'
-import StarBorder from '@mui/icons-material/StarBorder'
-import CommentIcon from '@mui/icons-material/Comment'
-import AllCombinations from './AllCombinations'
-
-export default {
-  title: 'Components/Data Display/List/Examples',
-  component: List
-} as ComponentMeta<typeof List>
-
-export const Default: ComponentStory<typeof List> = (args) => {
-  return (
-    <Box sx={{ width: '100%', minWidth: 360, bgcolor: 'background.paper' }}>
-      <nav aria-label="Demo List">
-        <List>
-          <ListItem disablePadding>
-            <ListItemButton>
-              <ListItemText primary="One" />
-            </ListItemButton>
-          </ListItem>
-          <ListItem disablePadding>
-            <ListItemButton>
-              <ListItemText primary="Two" />
-            </ListItemButton>
-          </ListItem>
-          <ListItem disablePadding>
-            <ListItemButton>
-              <ListItemText primary="Three" />
-            </ListItemButton>
-          </ListItem>
-          <ListItem disablePadding>
-            <ListItemButton>
-              <ListItemText primary="Four" />
-            </ListItemButton>
-          </ListItem>
-          <ListItem disablePadding>
-            <ListItemButton>
-              <ListItemText primary="Five" />
-            </ListItemButton>
-          </ListItem>
-        </List>
-      </nav>
-    </Box>
-  )
-}
-Default.parameters = {
-  docs: {
-    description: {
-      component: DOCS.List.Default
-    }
-  },
-  backgrounds: { default: 'light' }
-}
-
-export const Basic: ComponentStory<typeof AllCombinations> = (args) => {
-  return (
-    <Box sx={{ width: '100%', minWidth: 360, bgcolor: 'background.paper' }}>
-      <nav aria-label="main mailbox folders">
-        <List>
-          <ListItem disablePadding>
-            <ListItemButton>
-              <ListItemIcon>
-                <InboxIcon />
-              </ListItemIcon>
-              <ListItemText primary="Inbox" />
-            </ListItemButton>
-          </ListItem>
-          <ListItem disablePadding>
-            <ListItemButton>
-              <ListItemIcon>
-                <DraftsIcon />
-              </ListItemIcon>
-              <ListItemText primary="Drafts" />
-            </ListItemButton>
-          </ListItem>
-        </List>
-      </nav>
-      <Divider />
-      <nav aria-label="secondary mailbox folders">
-        <List>
-          <ListItem disablePadding>
-            <ListItemButton>
-              <ListItemText primary="Trash" />
-            </ListItemButton>
-          </ListItem>
-          <ListItem disablePadding>
-            <ListItemButton component="a" href="#simple-list">
-              <ListItemText primary="Spam" />
-            </ListItemButton>
-          </ListItem>
-        </List>
-      </nav>
-    </Box>
-  )
-}
-Basic.parameters = {
-  docs: {
-    description: {
-      story: DOCS.List.Basic
-    }
-  },
-  backgrounds: { default: 'light' }
-}
-
-export const Nested: ComponentStory<typeof AllCombinations> = (args) => {
-  const [open, setOpen] = React.useState(true)
-
-  const handleClick = (): void => {
-    setOpen(!open)
-  }
-
-  return (
-    <List
-      sx={{ width: '100%', minWidth: 360, bgcolor: 'background.paper' }}
-      component="nav"
-      aria-labelledby="nested-list-subheader"
-      subheader={
-        <ListSubheader component="div" id="nested-list-subheader">
-          Nested List Items
-        </ListSubheader>
-      }
-    >
-      <ListItemButton>
-        <ListItemIcon>
-          <SendIcon />
-        </ListItemIcon>
-        <ListItemText primary="Sent mail" />
-      </ListItemButton>
-      <ListItemButton>
-        <ListItemIcon>
-          <DraftsIcon />
-        </ListItemIcon>
-        <ListItemText primary="Drafts" />
-      </ListItemButton>
-      <ListItemButton onClick={handleClick}>
-        <ListItemIcon>
-          <InboxIcon />
-        </ListItemIcon>
-        <ListItemText primary="Inbox" />
-        {open ? <ExpandLess /> : <ExpandMore />}
-      </ListItemButton>
-      <Collapse in={open} timeout="auto" unmountOnExit>
-        <List component="div" disablePadding>
-          <ListItemButton sx={{ pl: 4 }}>
-            <ListItemIcon>
-              <StarBorder />
-            </ListItemIcon>
-            <ListItemText primary="Starred" />
-          </ListItemButton>
-        </List>
-      </Collapse>
-    </List>
-  )
-}
-Nested.parameters = {
-  docs: {
-    description: {
-      story: DOCS.List.Nested
-    }
-  },
-  backgrounds: { default: 'light' }
-}
-
-export const Folder: ComponentStory<typeof AllCombinations> = (args) => {
-  return (
-    <List sx={{ width: '100%', minWidth: 360, bgcolor: 'background.paper' }}>
-      <ListItem>
-        <ListItemAvatar>
-          <Avatar>
-            <ImageIcon />
-          </Avatar>
-        </ListItemAvatar>
-        <ListItemText primary="Photos" secondary="Jan 9, 2022" />
-      </ListItem>
-      <ListItem>
-        <ListItemAvatar>
-          <Avatar>
-            <WorkIcon />
-          </Avatar>
-        </ListItemAvatar>
-        <ListItemText primary="Work" secondary="Jan 7, 2022" />
-      </ListItem>
-      <ListItem>
-        <ListItemAvatar>
-          <Avatar>
-            <BeachAccessIcon />
-          </Avatar>
-        </ListItemAvatar>
-        <ListItemText primary="Vacation" secondary="July 20, 2021" />
-      </ListItem>
-    </List>
-  )
-}
-Folder.parameters = {
-  docs: {
-    description: {
-      story: DOCS.List.Folder
-    }
-  },
-  backgrounds: { default: 'light' }
-}
-
-export const SelectedListItem: ComponentStory<typeof AllCombinations> = (args) => {
-  const [selectedIndex, setSelectedIndex] = React.useState(1)
-
-  const handleListItemClick = (
-    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
-    index: number
-  ): void => {
-    setSelectedIndex(index)
-  }
-
-  return (
-    <Box sx={{ width: '100%', minWidth: 360, bgcolor: 'background.paper' }}>
-      <List component="nav" aria-label="main mailbox folders">
-        <ListItemButton
-          selected={selectedIndex === 0}
-          onClick={(event) => handleListItemClick(event, 0)}
-        >
-          <ListItemIcon>
-            <InboxIcon />
-          </ListItemIcon>
-          <ListItemText primary="Inbox" />
-        </ListItemButton>
-        <ListItemButton
-          selected={selectedIndex === 1}
-          onClick={(event) => handleListItemClick(event, 1)}
-        >
-          <ListItemIcon>
-            <DraftsIcon />
-          </ListItemIcon>
-          <ListItemText primary="Drafts" />
-        </ListItemButton>
-      </List>
-      <Divider />
-      <List component="nav" aria-label="secondary mailbox folder">
-        <ListItemButton
-          selected={selectedIndex === 2}
-          onClick={(event) => handleListItemClick(event, 2)}
-        >
-          <ListItemText primary="Trash" />
-        </ListItemButton>
-        <ListItemButton
-          selected={selectedIndex === 3}
-          onClick={(event) => handleListItemClick(event, 3)}
-        >
-          <ListItemText primary="Spam" />
-        </ListItemButton>
-      </List>
-    </Box>
-  )
-}
-SelectedListItem.parameters = {
-  docs: {
-    description: {
-      story: DOCS.List.SelectedListItem
-    }
-  },
-  backgrounds: { default: 'light' }
-}
-
-export const AlignListItems: ComponentStory<typeof AllCombinations> = (args) => {
-  return (
-    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
-      <ListItem alignItems="flex-start">
-        <ListItemAvatar>
-          <Avatar alt="Remy Sharp" />
-        </ListItemAvatar>
-        <ListItemText
-          primary="Brunch this weekend?"
-          secondary={
-            <React.Fragment>
-              <Typography
-                sx={{ display: 'inline' }}
-                component="span"
-                variant="body2"
-                color="text.primary"
-              >
-                Ali Connors
-              </Typography>
-              {" — I'll be in your neighborhood doing errands this…"}
-            </React.Fragment>
-          }
-        />
-      </ListItem>
-      <Divider variant="inset" component="li" />
-      <ListItem alignItems="flex-start">
-        <ListItemAvatar>
-          <Avatar alt="Travis Howard" />
-        </ListItemAvatar>
-        <ListItemText
-          primary="Summer BBQ"
-          secondary={
-            <React.Fragment>
-              <Typography
-                sx={{ display: 'inline' }}
-                component="span"
-                variant="body2"
-                color="text.primary"
-              >
-                to Scott, Alex, Jennifer
-              </Typography>
-              {" — Wish I could come, but I'm out of town this…"}
-            </React.Fragment>
-          }
-        />
-      </ListItem>
-      <Divider variant="inset" component="li" />
-      <ListItem alignItems="flex-start">
-        <ListItemAvatar>
-          <Avatar alt="Cindy Baker" />
-        </ListItemAvatar>
-        <ListItemText
-          primary="Oui Oui"
-          secondary={
-            <React.Fragment>
-              <Typography
-                sx={{ display: 'inline' }}
-                component="span"
-                variant="body2"
-                color="text.primary"
-              >
-                Sandra Adams
-              </Typography>
-              {' — Do you have Paris recommendations? Have you ever…'}
-            </React.Fragment>
-          }
-        />
-      </ListItem>
-    </List>
-  )
-}
-AlignListItems.parameters = {
-  docs: {
-    description: {
-      story: DOCS.List.AlignListItems
-    }
-  },
-  backgrounds: { default: 'light' }
-}
-
-export const ListControls: ComponentStory<typeof AllCombinations> = (args) => {
-  const [checked, setChecked] = React.useState([0])
-
-  const handleToggle = (value: number) => () => {
-    const currentIndex = checked.indexOf(value)
-    const newChecked = [...checked]
-
-    if (currentIndex === -1) {
-      newChecked.push(value)
-    } else {
-      newChecked.splice(currentIndex, 1)
-    }
-
-    setChecked(newChecked)
-  }
-
-  return (
-    <Stack spacing={2}>
-
-      <List sx={{ width: '100%', minWidth: 360, bgcolor: 'background.paper' }}>
-        {[0, 1, 2, 3].map((value) => {
-          const labelId = `checkbox-list-label-${value}`
-
-          return (
-            <ListItem
-              key={value}
-              secondaryAction={
-                <IconButton edge="end" aria-label="comments">
-                  <CommentIcon />
-                </IconButton>
-              }
-              disablePadding
-            >
-              <ListItemButton role={undefined} onClick={handleToggle(value)} dense>
-                <ListItemIcon>
-                  <Checkbox
-                    edge="start"
-                    checked={checked.includes(value)}
-                    tabIndex={-1}
-                    disableRipple
-                    inputProps={{ 'aria-labelledby': labelId }}
-                  />
-                </ListItemIcon>
-                <ListItemText id={labelId} primary={`Line item ${value + 1}`} />
-              </ListItemButton>
-            </ListItem>
-          )
-        })}
-      </List>
-
-      <List dense sx={{ width: '100%', minWidth: 360, bgcolor: 'background.paper' }}>
-        {[0, 1, 2, 3].map((value) => {
-          const labelId = `checkbox-list-secondary-label-${value}`
-          return (
-            <ListItem
-              key={value}
-              secondaryAction={
-                <Checkbox
-                  edge="end"
-                  onChange={handleToggle(value)}
-                  checked={checked.includes(value)}
-                  inputProps={{ 'aria-labelledby': labelId }}
-                />
-              }
-              disablePadding
-            >
-              <ListItemButton>
-                <ListItemAvatar>
-                  <Avatar
-                    alt={`Avatar n°${value + 1}`}
-                    src={`/static/images/avatar/${value + 1}.jpg`}
-                  />
-                </ListItemAvatar>
-                <ListItemText id={labelId} primary={`Line item ${value + 1}`} />
-              </ListItemButton>
-            </ListItem>
-          )
-        })}
-      </List>
-
-    </Stack>
-  )
-}
-ListControls.parameters = {
-  docs: {
-    description: {
-      story: DOCS.List.ListControls
-    }
-  },
-  backgrounds: { default: 'light' }
-}
-
-export const StickySubheader: ComponentStory<typeof AllCombinations> = (args) => (
-  <List
-    sx={{
-      width: '100%',
-      minWidth: 360,
-      bgcolor: 'background.paper',
-      position: 'relative',
-      overflow: 'auto',
-      maxHeight: 300,
-      '& ul': { padding: 0 }
-    }}
-    subheader={<li />}
-  >
-    {[0, 1, 2, 3, 4].map((sectionId) => (
-      <li key={`section-${sectionId}`}>
-        <ul>
-          <ListSubheader>{`I'm sticky ${sectionId}`}</ListSubheader>
-          {[0, 1, 2].map((item) => (
-            <ListItem key={`item-${sectionId}-${item}`}>
-              <ListItemText primary={`Item ${item}`} />
-            </ListItem>
-          ))}
-        </ul>
-      </li>
-    ))}
-  </List>
-)
-StickySubheader.parameters = {
-  docs: {
-    description: {
-      story: DOCS.List.StickySubheader
-    }
-  },
-  backgrounds: { default: 'light' }
-}
-
-export const All: ComponentStory<typeof AllCombinations> = (args) => (
-  <AllCombinations />
-)
-All.parameters = {
-  docs: {
-    description: {
-      story: DOCS.List.All
-    }
-  },
-  backgrounds: { default: 'light' }
-}

package/src/stories/Components/DataDisplay/List/List.stories.tsx

@@ -1,35 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import * as React from 'react'
-import List from '../../../../lib/components/datadisplay/List/List'
-import { ListItem, ListItemText } from '../../../../lib/'
-
-export default {
-  title: 'Components/Data Display/List/Properties',
-  component: List,
-  parameters: {
-    controls: {
-      sort: 'requiredFirst'
-    },
-    backgrounds: { default: 'light' }
-  }
-} as ComponentMeta<typeof List>
-
-// 👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof List> = (args) => {
-  return (
-    <List {...args} sx={{ width: '100%', minWidth: 360, bgcolor: 'background.paper' }}>
-      <ListItem>
-        <ListItemText primary="One" />
-      </ListItem>
-      <ListItem>
-        <ListItemText primary="Two" />
-      </ListItem>
-      <ListItem>
-        <ListItemText primary="Three" />
-      </ListItem>
-    </List>
-  )
-}
-
-export const Properties = Template.bind({})
-Properties.args = {}

package/src/stories/Components/DataDisplay/List/Overview.stories.mdx

@@ -1,69 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import List from '../../../../lib/components/datadisplay/List/List';
-import Chip from '../../../../lib/components/datadisplay/Chip/Chip';
-import {
-  ListItem, ListItemButton, ListItemIcon,
-  ListItemText, ListSubheader, ListItemAvatar } from '../../../../lib/';
-import { MUIIcon, MaterialDesignIcon, W3CIcon, FigmaIcon, GithubIcon } from '../../../utils/CustomIcons';
-import Stack from '@mui/material/Stack';
-import DeleteIcon from '@mui/icons-material/Delete';
-import IconButton from '@mui/material/IconButton';
-
-<Meta title="Components/Data Display/List/Overview" component={List} />
-
-[](#list-overview)List Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Components/DataDisplay/List/Overview.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
-=================================================================================
-
-### [](#what-does-it-do)What does it do?
-
-Lists are continuous, vertical indexes of text or images.
-
-<Stack direction="row" spacing={1}>
-  <Chip clickable component="a" href="https://mui.com/components/radio-buttons/" size="small" icon={<MUIIcon viewBox="-5 0 40 30" />} label="Material UI" variant="outlined" />
-  <Chip clickable component="a" href="https://material.io/components/selection-controls#radio-buttons" size="small" icon={<MaterialDesignIcon />} label="Material Design" variant="outlined" />
-  <Chip clickable component="a" href="https://www.w3.org/TR/wai-aria-practices/#radiobutton" size="small" icon={<W3CIcon />} label="WAI-ARIA" variant="outlined" />
-  <Chip clickable component="a" href="https://www.figma.com/proto/mBDuFn79U8wQIIEoCGpMew/DS%3A-Component-Library?node-id=1065%3A17356&scaling=min-zoom&page-id=1059%3A17709&starting-point-node-id=1065%3A17356" size="small" icon={<FigmaIcon />} label="Figma" variant="outlined" />
-  <Chip clickable component="a" href="https://github.com/HT2-Labs/design-system/tree/main/src/lib/components/atoms/Radio" size="small" icon={<GithubIcon />} label="Github" variant="outlined" />
-</Stack>
-
-### [](#why-use-it)Why use it?
-
-* Use a List component when you want to display a a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.
-
-### [](#how-to-implement-it)How to implement it?
-
-Below is basic example of the List component:
-
-<Canvas isExpanded>
-<List>
-  <ListItem>
-    <ListItemButton>
-      <ListItemText primary="One" />
-    </ListItemButton>
-  </ListItem>
-  <ListItem>
-    <ListItemButton>
-      <ListItemText primary="Two" />
-    </ListItemButton>
-  </ListItem>
-  <ListItem>
-    <ListItemButton>
-      <ListItemText primary="Three" />
-    </ListItemButton>
-  </ListItem>
-</List>
-</Canvas>
-
-### [](#when-to-avoid-it)When to avoid it?
-
-* Do not use a List when you need to present large complex sets of data; use a data table instead.
-
-### [](#best-practices)Best practices
-
-* Generally, lists should be used to present simple sets of information.
-* When using nested lists, avoid nesting just a single item. Try to find other ways it can be expressed in the higher level layer
-* Use bulleted lists when you don't need to convey a specific order for list items.
-* Use numbered lists when you need to convey a priority, hierarchy, or sequence between list items.
-
-### [](#design-prototype)Design prototype
-TODO: Add design prototype

package/src/stories/Components/DataDisplay/Table/Overview.stories.mdx

@@ -1,70 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '../../../../lib/index';
-import Chip from '../../../../lib/components/datadisplay/Chip/Chip';
-import { MUIIcon, MaterialDesignIcon, W3CIcon, FigmaIcon, GithubIcon } from '../../../utils/CustomIcons';
-import Stack from '@mui/material/Stack';
-
-<Meta title="Components/Data Display/Table/Overview" component={Table} />
-
-[](#component-overview)Table Overview <span class="sbdocs-edit-link"><Chip clickable component="a" href="https://github.com/ht2-labs/design-system/tree/main/src/stories/Guidelines/Templates/ComponentOverview.stories.mdx" size="small" label="Edit" variant="outlined" /></span>
-=================================================================================
-
-### [](#what-does-it-do)What does it do?
-
-Tables display sets of data. They can be fully customized.
-
-<Stack direction="row" spacing={1}>
-  <Chip clickable component="a" href="https://mui.com/material-ui/react-table/" size="small" icon={<MUIIcon viewBox="-5 0 40 30" />} label="Material UI" variant="outlined" />
-  <Chip clickable component="a" href="https://material.io/components/data-tables" size="small" icon={<MaterialDesignIcon />} label="Material Design" variant="outlined" />
-  <Chip clickable component="a" href="https://www.w3.org/WAI/ARIA/apg/patterns/table/" size="small" icon={<W3CIcon />} label="WAI-ARIA" variant="outlined" />
-</Stack>
-
-### [](#why-use-it)Why use it?
-
-Tables display information in a way that's easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards. They can include:
-
-* A corresponding visualization
-* Navigation
-* Tools to query and manipulate data
-
-### [](#how-to-implement-it)How to implement it?
-
-Below is basic example of the Table component:
-
-<Canvas isExpanded>
-<TableContainer component={Paper}>
-  <Table sx={{ minWidth: 650 }} aria-label="simple table">
-    <TableHead>
-      <TableRow>
-        <TableCell>Dessert (100g serving)</TableCell>
-        <TableCell align="right">Calories</TableCell>
-        <TableCell align="right">Fat&nbsp;(g)</TableCell>
-        <TableCell align="right">Carbs&nbsp;(g)</TableCell>
-        <TableCell align="right">Protein&nbsp;(g)</TableCell>
-      </TableRow>
-    </TableHead>
-    <TableBody>
-      {[
-        { name: 'Frozen yoghurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 },
-        { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3 },
-        { name: 'Eclair', calories: 262, fat: 16.0, carbs: 24, protein: 6.0 },
-        { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3 },
-        { name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9 }
-      ].map((row) => (
-        <TableRow
-          key={row.name}
-          sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-        >
-          <TableCell component="th" scope="row">
-            {row.name}
-          </TableCell>
-          <TableCell align="right">{row.calories}</TableCell>
-          <TableCell align="right">{row.fat}</TableCell>
-          <TableCell align="right">{row.carbs}</TableCell>
-          <TableCell align="right">{row.protein}</TableCell>
-        </TableRow>
-      ))}
-    </TableBody>
-  </Table>
-</TableContainer>
-</Canvas>