cozy-ui 93.3.0 → 93.4.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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.4.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/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/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);