cozy-ui 93.3.0 → 93.5.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [93.5.0](https://github.com/cozy/cozy-ui/compare/v93.4.0...v93.5.0) (2023-09-29)
+
+
+### Features
+
+* **Viewer:** On mobile, the title benefits well from the midEllipsis ([5bfd8b3](https://github.com/cozy/cozy-ui/commit/5bfd8b3))
+
+# [93.4.0](https://github.com/cozy/cozy-ui/compare/v93.3.0...v93.4.0) (2023-09-28)
+
+
+### Features
+
+* Add Alert provider ([ebccf42](https://github.com/cozy/cozy-ui/commit/ebccf42))
+
 # [93.3.0](https://github.com/cozy/cozy-ui/compare/v93.2.0...v93.3.0) (2023-09-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "93.3.0",
+  "version": "93.5.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Snackbar/Readme.md

@@ -55,7 +55,7 @@ initialState = { open: isTesting() }
 
 const handleToggle = () => {setState(state => ({ open: !state.open }))}
 
-const initialVariants = [{ primary: true, secondary: true, success: false, error: false, warning: false, info: false }]
+const initialVariants = [{ primary: true, secondary: false, success: false, error: false, warning: false, info: false }]
 
 ;
 

package/react/Viewer/components/Toolbar.jsx

@@ -20,6 +20,7 @@ import { useEncrypted } from '../providers/EncryptedProvider'
 import { ToolbarFilePath } from './ToolbarFilePath'
 
 import styles from './styles.styl'
+import MidEllipsis from '../../MidEllipsis'
 
 const useClasses = makeStyles(theme => ({
   iconButton: {
@@ -64,13 +65,13 @@ const Toolbar = ({
           <Icon icon={PreviousIcon} />
         </IconButton>
       )}
-      <div className="u-pl-half">
+      <div className="u-pl-half u-ov-auto u-w-100">
         <Typography
           variant="h3"
           color={isDesktop ? 'inherit' : 'textPrimary'}
           noWrap
         >
-          {file.name}
+          <MidEllipsis text={file.name} />
         </Typography>
         {showFilePath ? <ToolbarFilePath file={file} /> : null}
       </div>

package/react/index.js

@@ -131,3 +131,4 @@ export { default as TimelineDot } from './TimelineDot'
 export { default as TimelineItem } from './TimelineItem'
 export { default as TimelineOppositeContent } from './TimelineOppositeContent'
 export { default as TimelineSeparator } from './TimelineSeparator'
+export { default as AlertProvider, useAlert } from './Alert'

package/react/providers/Alert/Readme.md

@@ -0,0 +1,28 @@
+```jsx
+import Variants from 'cozy-ui/docs/components/Variants'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import AlertProvider, { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+
+const initialVariants = [{ primary: true, secondary: false, success: false, error: false, warning: false, info: false }]
+
+const Component = ({ variant }) => {
+  const { showAlert } = useAlert()
+
+  return <Button label="show alert" onClick={() => showAlert('Alert message', variant)}/>
+}
+
+;
+
+<BreakpointsProvider>
+  <AlertProvider>
+    <Variants initialVariants={initialVariants} radio>
+      {variant => (
+        <>
+          <Component variant={Object.keys(variant).find(key => variant[key])} />
+        </>
+      )}
+    </Variants>
+  </AlertProvider>
+</BreakpointsProvider>
+```

package/react/providers/Alert/index.jsx

@@ -0,0 +1,51 @@
+import React, { createContext, useState, useContext, useMemo } from 'react'
+
+import Snackbar from '../../Snackbar'
+import Alert from '../../Alert'
+
+export const AlertContext = createContext()
+
+export const useAlert = () => {
+  const context = useContext(AlertContext)
+
+  if (!context) {
+    throw new Error('useAlert must be used within a AlertProvider')
+  }
+  return context
+}
+
+const defaultState = { message: '', severity: 'primary', open: false }
+const handleClose = (state, setState) => () => {
+  return setState({ ...state, open: false })
+}
+
+const AlertProvider = ({ children }) => {
+  const [state, setState] = useState(defaultState)
+
+  const value = useMemo(
+    () => ({
+      showAlert: (message, severity) => {
+        setState({ message, severity, open: true })
+      }
+    }),
+    []
+  )
+
+  return (
+    <AlertContext.Provider value={value}>
+      {children}
+      <Snackbar open={state.open} onClose={handleClose(state, setState)}>
+        <Alert
+          variant="filled"
+          elevation={6}
+          severity={state.severity}
+          onClose={handleClose(state, setState)}
+        >
+          {state.message}
+        </Alert>
+      </Snackbar>
+    </AlertContext.Provider>
+  )
+}
+
+export default React.memo(AlertProvider)

package/transpiled/react/Viewer/components/Toolbar.js

@@ -29,6 +29,7 @@ var styles = {
   "viewer-toolbar--hidden": "styles__viewer-toolbar--hidden___3r3Sj",
   "viewer-footer": "styles__viewer-footer___2ieQS"
 };
+import MidEllipsis from "cozy-ui/transpiled/react/MidEllipsis";
 var useClasses = makeStyles(function (theme) {
   return {
     iconButton: _defineProperty({}, theme.breakpoints.down('md'), {
@@ -68,12 +69,14 @@ var Toolbar = function Toolbar(_ref) {
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: PreviousIcon
   })), /*#__PURE__*/React.createElement("div", {
-    className: "u-pl-half"
+    className: "u-pl-half u-ov-auto u-w-100"
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "h3",
     color: isDesktop ? 'inherit' : 'textPrimary',
     noWrap: true
-  }, file.name), showFilePath ? /*#__PURE__*/React.createElement(ToolbarFilePath, {
+  }, /*#__PURE__*/React.createElement(MidEllipsis, {
+    text: file.name
+  })), showFilePath ? /*#__PURE__*/React.createElement(ToolbarFilePath, {
     file: file
   }) : null), /*#__PURE__*/React.createElement("div", {
     className: "u-ml-auto u-ph-1"

package/transpiled/react/index.js

@@ -104,4 +104,5 @@ export { default as TimelineContent } from './TimelineContent';
 export { default as TimelineDot } from './TimelineDot';
 export { default as TimelineItem } from './TimelineItem';
 export { default as TimelineOppositeContent } from './TimelineOppositeContent';
-export { default as TimelineSeparator } from './TimelineSeparator';
+export { default as TimelineSeparator } from './TimelineSeparator';
+export { default as AlertProvider, useAlert } from './Alert';

package/transpiled/react/providers/Alert/index.js

@@ -0,0 +1,67 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { createContext, useState, useContext, useMemo } from 'react';
+import Snackbar from "cozy-ui/transpiled/react/Snackbar";
+import Alert from "cozy-ui/transpiled/react/Alert";
+export var AlertContext = /*#__PURE__*/createContext();
+export var useAlert = function useAlert() {
+  var context = useContext(AlertContext);
+
+  if (!context) {
+    throw new Error('useAlert must be used within a AlertProvider');
+  }
+
+  return context;
+};
+var defaultState = {
+  message: '',
+  severity: 'primary',
+  open: false
+};
+
+var handleClose = function handleClose(state, setState) {
+  return function () {
+    return setState(_objectSpread(_objectSpread({}, state), {}, {
+      open: false
+    }));
+  };
+};
+
+var AlertProvider = function AlertProvider(_ref) {
+  var children = _ref.children;
+
+  var _useState = useState(defaultState),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var value = useMemo(function () {
+    return {
+      showAlert: function showAlert(message, severity) {
+        setState({
+          message: message,
+          severity: severity,
+          open: true
+        });
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(AlertContext.Provider, {
+    value: value
+  }, children, /*#__PURE__*/React.createElement(Snackbar, {
+    open: state.open,
+    onClose: handleClose(state, setState)
+  }, /*#__PURE__*/React.createElement(Alert, {
+    variant: "filled",
+    elevation: 6,
+    severity: state.severity,
+    onClose: handleClose(state, setState)
+  }, state.message)));
+};
+
+export default /*#__PURE__*/React.memo(AlertProvider);