cozy-ui 131.0.1 → 131.1.0-beta.2

package/react/ListItemIcon/index.js

@@ -1,26 +0,0 @@
-import MuiListItemIcon from '@material-ui/core/ListItemIcon'
-import cx from 'classnames'
-import React, { forwardRef } from 'react'
-
-export const smallSize = 16
-export const mediumSize = 24
-export const largeSize = 32
-
-// We add a specific class to be able to override the style in makeOverride when used in an other component
-
-/**
- * @type React.ForwardRefRenderFunction<HTMLDivElement, import('@material-ui/core/ListItemIcon').ListItemIconProps>
- */
-const ListItemIcon = forwardRef(({ className, ...props }, ref) => {
-  return (
-    <MuiListItemIcon
-      {...props}
-      ref={ref}
-      className={cx(className, 'cozyListItemIcon')}
-    />
-  )
-})
-
-ListItemIcon.displayName = 'ListItemIcon'
-
-export default ListItemIcon

package/react/ListItemSecondaryAction/index.js

@@ -1,3 +0,0 @@
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
-
-export default ListItemSecondaryAction

package/react/ListItemText/Readme.md

@@ -1,28 +0,0 @@
-#### List item primary text
-
-```jsx
-import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
-<ListItemText primary="I'm a list item text"/>
-```
-
-#### List item with secondary text
-
-```jsx
-import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
-<ListItemText primary="I'm a primary text" secondary="I'm a secondary text"/>
-```
-
-#### Custom List item
-
-```jsx
-import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
-import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis';
-import Typography from "cozy-ui/transpiled/react/Typography";
-
-<ListItemText>
-  <Typography variant="body1">I'm a primary text</Typography>
-  <Typography tag="a" href="http://cozy.io" variant="caption" color="textSecondary">
-    <MidEllipsis text={content.ada.short} />
-  </Typography>
-</ListItemText>
-```

package/react/ListItemText/index.jsx

@@ -1,90 +0,0 @@
-import MUIListItemText from '@material-ui/core/ListItemText'
-import cx from 'classnames'
-import once from 'lodash/once'
-import React, { forwardRef, useEffect, useMemo } from 'react'
-
-const logDeprecatedWarning = once(() => {
-  console.warn(
-    'primaryText/primaryTextClassName and secondaryText/secondaryTextClassName are deprecated. Please use directly the primary prop : primary={<span className="u-error">Error</span>} for example.'
-  )
-})
-
-const defaultSecondaryTypographyProps = { variant: 'caption' }
-
-const ellipsisClassNames = 'u-db u-ellipsis'
-
-const getTypographyProp = (props, className, ellipsis) => {
-  return !className && !ellipsis
-    ? props
-    : {
-        classes: { root: cx(className, ellipsis && ellipsisClassNames) },
-        ...props
-      }
-}
-
-/**
- * @type React.ForwardRefRenderFunction<HTMLDivElement, import('@material-ui/core/ListItemText').ListItemTextProps>
- */
-const ListItemText = forwardRef((props, ref) => {
-  const {
-    primaryText,
-    secondaryText,
-    primaryTextClassName,
-    secondaryTextClassName,
-    primary: primaryProp,
-    secondary: secondaryProp,
-    ellipsis,
-    ...rest
-  } = props
-
-  useEffect(() => {
-    if (
-      primaryText ||
-      secondaryText ||
-      primaryTextClassName ||
-      secondaryTextClassName
-    ) {
-      logDeprecatedWarning()
-    }
-  }, [primaryText, secondaryText, primaryTextClassName, secondaryTextClassName])
-
-  const primary = primaryProp ? primaryProp : primaryText
-  const secondary = secondaryProp ? secondaryProp : secondaryText
-
-  let { primaryTypographyProps, secondaryTypographyProps } = props
-
-  primaryTypographyProps = useMemo(() => {
-    return getTypographyProp(
-      primaryTypographyProps,
-      primaryTextClassName,
-      ellipsis
-    )
-  }, [primaryTypographyProps, primaryTextClassName, ellipsis])
-
-  secondaryTypographyProps = useMemo(() => {
-    return getTypographyProp(
-      secondaryTypographyProps || defaultSecondaryTypographyProps,
-      secondaryTextClassName,
-      ellipsis
-    )
-  }, [secondaryTypographyProps, secondaryTextClassName, ellipsis])
-
-  return (
-    <MUIListItemText
-      ref={ref}
-      primary={primary}
-      secondary={secondary}
-      primaryTypographyProps={primaryTypographyProps}
-      secondaryTypographyProps={secondaryTypographyProps}
-      {...rest}
-    />
-  )
-})
-
-ListItemText.displayName = 'ListItemText'
-
-ListItemText.defaultProps = {
-  ellipsis: true
-}
-
-export default ListItemText

package/react/ListSubheader/Readme.md

@@ -1,34 +0,0 @@
-```jsx
-import List from 'cozy-ui/transpiled/react/List'
-import ListSubheader from 'cozy-ui/transpiled/react/ListSubheader'
-import ListItem from 'cozy-ui/transpiled/react/ListItem'
-import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
-import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import FileTypeFolderIcon from 'cozy-ui/transpiled/react/Icons/FileTypeFolder'
-import Variants from 'cozy-ui/docs/components/Variants'
-
-const initialVariants = [{ disabledGutters: false, doubleGutters: false }]
-
-;
-
-<Variants initialVariants={initialVariants} screenshotAllVariants>
-  {variant => {
-    const gutters = variant.disabledGutters ? 'disabled' : variant.doubleGutters ? 'double' : 'default'
-    const props = { gutters }
-
-    return (
-      <>
-        <List subheader={<ListSubheader {...props}>This is the subheader</ListSubheader>}>
-          <ListItem button>
-            <ListItemIcon>
-              <Icon icon={FileTypeFolderIcon} size={32} />
-            </ListItemIcon>
-            <ListItemText primary="I'm a primary text"/>
-          </ListItem>
-        </List>
-      </>
-    )
-  }}
-</Variants>
-```

package/react/ListSubheader/index.js

@@ -1,44 +0,0 @@
-import MuiListSubheader from '@material-ui/core/ListSubheader'
-import merge from 'lodash/merge'
-import PropTypes from 'prop-types'
-import React, { forwardRef } from 'react'
-
-import { makeStyles } from '../styles'
-
-const useStyles = makeStyles({
-  gutters: {
-    paddingLeft: ({ guttersValue }) => guttersValue,
-    paddingRight: ({ guttersValue }) => guttersValue
-  }
-})
-
-// Return gutters size
-const useGutters = ({ gutters }) => {
-  return gutters === 'double' ? 32 : 16
-}
-
-const ListSubheader = forwardRef((props, ref) => {
-  const guttersValue = useGutters(props)
-  const styles = useStyles({ guttersValue })
-
-  return (
-    <MuiListSubheader
-      {...props}
-      ref={ref}
-      classes={merge(props.classes, styles)}
-      disableGutters={props.disableGutters || props.gutters === 'disabled'}
-    />
-  )
-})
-
-ListSubheader.displayName = 'ListSubheader'
-
-ListSubheader.defaultProps = {
-  gutters: 'default'
-}
-
-ListSubheader.propTypes = {
-  gutters: PropTypes.oneOf(['disabled', 'double', 'default'])
-}
-
-export default ListSubheader

package/react/LoadMore/Readme.md

@@ -1,37 +0,0 @@
-#### Load More
-
-The Load More component can be used at the bottom of infinite lists where it will automatically start loading the next batch of data when it scrolls into view.
-
-```jsx
-import LoadMore from 'cozy-ui/transpiled/react/LoadMore';
-
-initialState = { elements: [1, 2] };
-const sleep = (timeout) => new Promise(resolve => setTimeout(resolve, timeout))
-const fetchMore = async () => {
-  await sleep(1000);
-  setState(state => ({ elements: [...state.elements, state.elements.length + 1]}));
-}
-
-<div style={{ height: '300px', overflow: 'auto' }}>
-  <p>
-    Scroll down to load more.
-  </p>
-
-  {state.elements.map((el, index) => (
-      <div style={{ background: 'grey', height: '160px', marginBottom: '10px' }} key={index} />
-  ))}
-
-  { state.elements.length < 25 && <LoadMore label="Load more" fetchMore={fetchMore} /> }
-</div>
-```
-
-If for some reason the loading doesn't happen automatically, the component displays a button that can be used to manually load the next batch of data.
-This next example loads nothing, it's just there to show what the button looks like.
-
-```jsx
-import LoadMore from 'cozy-ui/transpiled/react/LoadMore';
-
-<div>
-  <LoadMore label="Load more" fetchMore={() => {}} />
-</div>
-```

package/react/LoadMore/index.jsx

@@ -1,62 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useState, useEffect, useRef, useCallback } from 'react'
-
-import Spinner from '../Spinner'
-import Button from '../deprecated/Button'
-
-import 'intersection-observer' // polyfill for safari (mobile and desktop)
-
-const LoadMore = ({ fetchMore, label }) => {
-  const [isLoading, setIsLoading] = useState(false)
-  const elementRef = useRef()
-
-  const startFetchMore = useCallback(async () => {
-    if (!isLoading) {
-      setIsLoading(true)
-      await fetchMore()
-      setIsLoading(false)
-    }
-  }, [isLoading, fetchMore])
-
-  const checkIntersectionsEntries = useCallback(
-    intersectionEntries => {
-      if (intersectionEntries.filter(entry => entry.isIntersecting).length > 0)
-        startFetchMore()
-    },
-    [startFetchMore]
-  )
-
-  useEffect(() => {
-    const observer = new IntersectionObserver(checkIntersectionsEntries)
-    /*
-      The ref value 'elementRef.current' will likely have changed by the time this effect cleanup function runs
-      It is better to copy the ref to a variable inside the effect
-    */
-    const observerRefValue = elementRef.current
-    observer.observe(observerRefValue)
-
-    return () => {
-      observer.unobserve(observerRefValue)
-      observer.disconnect()
-    }
-  }, [checkIntersectionsEntries])
-
-  return (
-    <span ref={elementRef}>
-      <Button
-        theme="text"
-        onClick={startFetchMore}
-        label={isLoading ? <Spinner noMargin /> : label}
-      />
-    </span>
-  )
-}
-
-LoadMore.propTypes = {
-  /** A function that is called when the next batch of data needs to be loaded.  Can return a promise. */
-  fetchMore: PropTypes.func.isRequired,
-  /** The label for the button */
-  label: PropTypes.string.isRequired
-}
-
-export default LoadMore

package/react/Markdown/Readme.md

@@ -1,71 +0,0 @@
-This component is used to render markdown content. To see more about the Markdown, you can check the [Markdown Guide](https://www.markdownguide.org/).
-
-```jsx
-
-import Markdown from 'cozy-ui/transpiled/react/Markdown'
-
-const textInMarkdown = `
-# Demo
-
-This is a text to test all possibilities of markdown.
-
-## Headers
-
-# H1 Header
-## H2 Header
-### H3 Header
-#### H4 Header
-##### H5 Header
-###### H6 Header
-
-## Paragraphs
-
-I really like using Markdown.
-
-I think I'll use it to format all of my documents from now on.
-
-## Emphasis
-
-_Italic Text_
-
-***Bold Text***
-
-__Bold and Italic Text__
-
-~~Strikethrough~~
-
-<u>Underline</u>
-
-## Lists
-
-1. Ordered List Item 1
-2. Ordered List Item 2
-3. Ordered List Item 3
-
-- Unordered List Item 1
-- Unordered List Item 2
-- Unordered List Item 3
-
-## Links
-
-[Link to GitHub](https://github.com/cozy/cozy-ui)
-
-## Images
-
-![The San Juan Mountains are beautiful!](/assets/images/san-juan-mountains.jpg "San Juan Mountains")
-
-## Code
-
-Inline code: \`const variable = 'value';\`
-
-Block code:
-\`\`\`javascript function add(a, b) { return a + b; }\`\`\`
-
-## Blockquotes
-
-> This is a blockquote.
-`;
-
-<Markdown content={textInMarkdown} />
-
-```

package/react/Markdown/index.jsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import ReactMarkdown from 'react-markdown'
-
-import Link from '../Link'
-import Typography from '../Typography'
-
-const Markdown = ({ content }) => {
-  return (
-    <ReactMarkdown
-      source={content}
-      renderers={{
-        link: ({ children, href }) => (
-          <Link href={href} rel="noreferrer" target="_blank">
-            {children}
-          </Link>
-        ),
-        heading: ({ children, level }) => (
-          <Typography variant={`h${level}`} className="u-mb-1">
-            {children}
-          </Typography>
-        ),
-        paragraph: ({ children }) => (
-          <Typography variant="body1" className="u-mb-1">
-            {children}
-          </Typography>
-        )
-      }}
-    />
-  )
-}
-
-export default Markdown

package/react/Menu/Readme.md

@@ -1,114 +0,0 @@
-Re-export of @material-ui. See [the official API](https://v4.mui.com/api/menu/).
-
-```jsx
-import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
-import Menu from 'cozy-ui/transpiled/react/Menu'
-import MenuItem from 'cozy-ui/transpiled/react/MenuItem'
-import List from 'cozy-ui/transpiled/react/List'
-import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
-import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import IconButton from 'cozy-ui/transpiled/react/IconButton'
-import CopyIcon from 'cozy-ui/transpiled/react/Icons/Copy'
-import PenIcon from 'cozy-ui/transpiled/react/Icons/Pen'
-import TelephoneIcon from 'cozy-ui/transpiled/react/Icons/Telephone'
-import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
-import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
-import AttachmentIcon from 'cozy-ui/transpiled/react/Icons/Attachment'
-import ContrastIcon from 'cozy-ui/transpiled/react/Icons/Contrast'
-import AttentionIcon from 'cozy-ui/transpiled/react/Icons/Attention'
-import Divider from 'cozy-ui/transpiled/react/Divider'
-import Typography from 'cozy-ui/transpiled/react/Typography'
-
-initialState = { showMenu: isTesting() }
-
-const ref = React.useRef(null)
-
-const toggleMenu = () => setState(state => ({ showMenu: !state.showMenu }))
-const hideMenu = () => setState({ showMenu: false })
-
-;
-
-<>
-  <DropdownButton
-    ref={ref}
-    aria-controls="simple-menu"
-    aria-haspopup="true"
-    onClick={toggleMenu}
-  >
-    Show menu
-  </DropdownButton>
-  <Menu
-    open={state.showMenu}
-    anchorEl={ref.current}
-    getContentAnchorEl={null}
-    anchorOrigin={{
-      vertical: 'bottom',
-      horizontal: 'left'
-    }}
-    transformOrigin={{
-      vertical: 'top',
-      horizontal: 'left'
-    }}
-    keepMounted
-    onClose={hideMenu}
-  >
-    <MenuItem onClick={hideMenu}>
-      <ListItemIcon>
-        <Icon icon={PenIcon} />
-      </ListItemIcon>
-      <ListItemText primary="Modify" />
-      <ListItemIcon>
-        <Typography color='error'>
-          <Icon icon={AttentionIcon} />
-        </Typography>
-      </ListItemIcon>
-    </MenuItem>
-    <MenuItem onClick={hideMenu}>
-      <ListItemIcon>
-        <Icon icon={PeopleIcon} />
-      </ListItemIcon>
-      <ListItemText primary="People" />
-    </MenuItem>
-    <MenuItem onClick={hideMenu}>
-      <ListItemIcon>
-        <Icon icon={AttachmentIcon} />
-      </ListItemIcon>
-      <ListItemText primary="Attachment" />
-    </MenuItem>
-    <MenuItem onClick={hideMenu}>
-      <ListItemIcon>
-        <Icon icon={PeopleIcon} />
-      </ListItemIcon>
-      <ListItemText
-        primary="Item with a very long title to show how it should be displayed"
-        primaryTypographyProps={{ ellipsis: false }}
-      />
-    </MenuItem>
-    <MenuItem onClick={hideMenu}>
-      <ListItemText primary="Item without icon" />
-    </MenuItem>
-
-    <Divider className="u-mv-half" />
-
-    <MenuItem onClick={hideMenu}>
-      <ListItemIcon>
-        <Icon icon={TelephoneIcon} />
-      </ListItemIcon>
-      <ListItemText primary="Call" />
-    </MenuItem>
-    <MenuItem onClick={hideMenu}>
-      <ListItemIcon>
-        <Icon icon={ContrastIcon} />
-      </ListItemIcon>
-      <ListItemText primary="Contrast" />
-    </MenuItem>
-    <MenuItem onClick={hideMenu}>
-      <ListItemIcon>
-        <Icon icon={CopyIcon} />
-      </ListItemIcon>
-      <ListItemText primary="Copy" />
-    </MenuItem>
-  </Menu>
-</>
-```

package/react/Menu/index.js

@@ -1,3 +0,0 @@
-import Menu from '@material-ui/core/Menu'
-
-export default Menu

package/react/MenuItem/index.js

@@ -1,22 +0,0 @@
-import MuiMenuItem from '@material-ui/core/MenuItem'
-import React, { forwardRef } from 'react'
-
-import ListItem, { LitItemPropTypes } from '../ListItem'
-
-const MenuItem = forwardRef(({ component, ...props }, ref) => {
-  return (
-    <MuiMenuItem
-      ref={ref}
-      component={ListItem}
-      componentElement={component}
-      gutters="disabled"
-      {...props}
-    />
-  )
-})
-
-MenuItem.displayName = 'MenuItem'
-
-MenuItem.propTypes = LitItemPropTypes
-
-export default MenuItem

package/react/MenuList/index.js

@@ -1,3 +0,0 @@
-import MuiMenuList from '@material-ui/core/MenuList'
-
-export default MuiMenuList

package/react/MidEllipsis/Readme.md

@@ -1,11 +0,0 @@
-#### Ellipsis in the middle
-
-Text can be passed in `text` prop or as `child`.
-
-```jsx
-import MidEllipsis from 'cozy-ui/transpiled/react/MidEllipsis'
-
-;
-
-<MidEllipsis text={content.ada.short} />
-```

package/react/MidEllipsis/index.jsx

@@ -1,51 +0,0 @@
-import cx from 'classnames'
-import PropTypes from 'prop-types'
-import React, { forwardRef } from 'react'
-
-/** The left-to-right mark (LRM) is a control character (an invisible formatting character)
- * used in computerized typesetting (including word processing in a program like Microsoft Word)
- * of text that contains a mixture of left-to-right text (such as English or Russian)
- * and right-to-left text (such as Arabic, Persian or Hebrew).
- * It is used to set the way adjacent characters are grouped with respect to text direction.
- * https://en.wikipedia.org/wiki/Left-to-right_mark
- *
- * In this case it allows us to hack the RTL direction of the {lastPart} in order to keep it LTR-looking
- * while still benefitting from the desired RTL overflow direction.
- * */
-const LRM = <>&#8206;</>
-
-const MidEllipsis = forwardRef(
-  ({ text, className, children, ...props }, ref) => {
-    if (text && typeof text !== 'string')
-      throw new Error('The "text" prop of MidEllipsis can only be a string')
-
-    if (children && typeof children !== 'string')
-      throw new Error('The children of MidEllipsis can only be a string')
-
-    const str = text || children
-
-    const partLength = Math.round(str.length / 2)
-    const firstPart = str.substring(0, partLength)
-    const lastPart = str.substring(partLength, str.length)
-
-    return (
-      <div className={cx('u-midellipsis', className)} ref={ref} {...props}>
-        <span>{firstPart}</span>
-        <span>
-          {LRM}
-          {lastPart}
-          {LRM}
-        </span>
-      </div>
-    )
-  }
-)
-
-MidEllipsis.displayName = 'MidEllipsis'
-
-MidEllipsis.propTypes = {
-  text: PropTypes.string,
-  className: PropTypes.string
-}
-
-export default MidEllipsis

package/react/MobileStepper/Readme.md

@@ -1,43 +0,0 @@
-```jsx
-import { useState } from 'react'
-import MobileStepper from 'cozy-ui/transpiled/react/MobileStepper'
-import IconButton from 'cozy-ui/transpiled/react/IconButton'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import LeftIcon from 'cozy-ui/transpiled/react/Icons/Left'
-import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
-
-const maxSteps = 5
-const [activeStep, setActiveStep] = useState(0)
-
-const handleNext = () => {
-  setActiveStep(activeStep + 1)
-}
-
-const handleBack = () => {
-  setActiveStep(activeStep - 1)
-}
-
-;
-
-<div class="u-flex">
-  <MobileStepper
-    className="u-mh-auto"
-    steps={maxSteps}
-    position="static"
-    activeStep={activeStep}
-    nextButton={
-      <IconButton
-        onClick={handleNext}
-        disabled={activeStep === maxSteps - 1}
-      >
-        <Icon icon={RightIcon} />
-      </IconButton>
-    }
-    backButton={
-      <IconButton onClick={handleBack} disabled={activeStep === 0}>
-        <Icon icon={LeftIcon} />
-      </IconButton>
-    }
-  />
-</div>
-```