cozy-ui 66.2.0 → 66.2.3

package/.bundlemonrc

@@ -0,0 +1,20 @@
+{
+  "baseDir": ".",
+  "files": [
+    {
+      "path": "dist/cozy-ui.min.css",
+      "maxPercentIncrease": 5,
+    },
+    {
+      "path": "dist/cozy-ui.utils.min.css",
+      "maxPercentIncrease": 5,
+    },
+  ],
+  "groups": [
+    {
+        "path": "transpiled/react/**",
+        "maxPercentIncrease": 0.5,
+    },
+],
+  "reportOutput": ["github"]
+}

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [66.2.3](https://github.com/cozy/cozy-ui/compare/v66.2.2...v66.2.3) (2022-05-09)
+
+
+### Bug Fixes
+
+* LowerCase the app name ([558da08](https://github.com/cozy/cozy-ui/commit/558da08))
+
+## [66.2.2](https://github.com/cozy/cozy-ui/compare/v66.2.1...v66.2.2) (2022-05-09)
+
+
+### Bug Fixes
+
+* **IconButton:** Implementation of forwardRef ([a6405ba](https://github.com/cozy/cozy-ui/commit/a6405ba))
+
+## [66.2.1](https://github.com/cozy/cozy-ui/compare/v66.2.0...v66.2.1) (2022-05-05)
+
+
+### Bug Fixes
+
+* IconButton propagates ref ([0aba625](https://github.com/cozy/cozy-ui/commit/0aba625))
+
 # [66.2.0](https://github.com/cozy/cozy-ui/compare/v66.1.0...v66.2.0) (2022-05-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "66.2.0",
+  "version": "66.2.3",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -149,6 +149,7 @@
   "dependencies": {
     "@babel/runtime": "^7.3.4",
     "@popperjs/core": "^2.4.4",
+    "bundlemon": "^1.3.2",
     "chart.js": "3.7.1",
     "classnames": "^2.2.5",
     "cozy-interapp": "^0.5.4",

package/react/AppSections/Readme.md

@@ -5,9 +5,10 @@ import { I18n } from 'cozy-ui/transpiled/react/I18n'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 import Sections from 'cozy-ui/transpiled/react/AppSections'
 import Variants from 'cozy-ui/docs/components/Variants'
+import CozyClient, { CozyProvider } from "cozy-client";
 
 const locale = {}
-
+const client = new CozyClient()
 const WrapperSections = () => {
   const handleAppClick = app => {
     alert(JSON.stringify(app, null, 2))
@@ -31,8 +32,10 @@ const WrapperSections = () => {
 ;
 
 <BreakpointsProvider>
-  <I18n dictRequire={lang => locale} lang="en">
-     <WrapperSections />
-  </I18n>
+  <CozyProvider client={client}>
+    <I18n dictRequire={lang => locale} lang="en">
+      <WrapperSections />
+    </I18n>
+  </CozyProvider>
 </BreakpointsProvider>
 ```

package/react/AppSections/_mockApps.js

@@ -129,6 +129,29 @@ export const apps = [
     uninstallable: true,
     isInRegistry: true
   },
+  {
+    slug: 'konnector-withlowername',
+    name: 'easyflight',
+    icon: '<svg></svg>',
+    developer: { name: 'Author with long name' },
+    type: 'konnector',
+    categories: ['transport'],
+    tags: ['transport', 'files', 'bills'],
+    permissions: {
+      mock: {
+        type: 'io.mock.doctype'
+      }
+    },
+    version: '0.1.0',
+    versions: {
+      stable: ['0.1.0'],
+      beta: ['0.1.0'],
+      dev: ['0.1.0']
+    },
+    installed: true,
+    uninstallable: true,
+    isInRegistry: true
+  },
   // don't add permissions to Photos for testing
   {
     slug: 'photos',

package/react/AppSections/components/AppsSection.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { useI18n } from '../../I18n'
 import useBreakpoints from '../../hooks/useBreakpoints'
@@ -9,6 +9,13 @@ import styles from './AppsSection.styl'
 
 const makeNameGetter = t => app => getTranslatedManifestProperty(app, 'name', t)
 
+const makeAppsListNameLowerCased = appsList => {
+  return appsList.map(app => ({
+    ...app,
+    name: app.name.toLowerCase()
+  }))
+}
+
 export const AppsSection = ({
   appsList,
   subtitle,
@@ -18,23 +25,41 @@ export const AppsSection = ({
 }) => {
   const { isMobile } = useBreakpoints()
   const { t } = useI18n()
+  const apps = useMemo(() => makeAppsListNameLowerCased(appsList), [appsList])
+  const sortedApps = useMemo(() => {
+    return sortBy(apps, makeNameGetter(t))
+  }, [apps, t])
+  const getAppBySlug = useMemo(
+    () => slug => appsList.find(app => app.slug === slug),
+    [appsList]
+  )
+
   return (
     <div className={styles.AppsSection}>
       {subtitle}
-      {appsList && !!appsList.length && (
+      {apps && !!apps.length && (
         <div className={styles.AppsSection__list}>
-          {sortBy(appsList, makeNameGetter(t)).map(app => (
-            <AppTile
-              app={app}
-              namePrefix={getTranslatedManifestProperty(app, 'name_prefix', t)}
-              name={getTranslatedManifestProperty(app, 'name', t)}
-              onClick={() => onAppClick(app.slug)}
-              key={app.slug}
-              showDeveloper={!isMobile}
-              displaySpecificMaintenanceStyle={displaySpecificMaintenanceStyle}
-              IconComponent={IconComponent}
-            />
-          ))}
+          {sortedApps.map(app => {
+            const realApp = getAppBySlug(app.slug)
+            return (
+              <AppTile
+                app={realApp}
+                namePrefix={getTranslatedManifestProperty(
+                  realApp,
+                  'name_prefix',
+                  t
+                )}
+                name={getTranslatedManifestProperty(realApp, 'name', t)}
+                onClick={() => onAppClick(realApp.slug)}
+                key={realApp.slug}
+                showDeveloper={!isMobile}
+                displaySpecificMaintenanceStyle={
+                  displaySpecificMaintenanceStyle
+                }
+                IconComponent={IconComponent}
+              />
+            )
+          })}
         </div>
       )}
     </div>

package/react/IconButton/index.jsx

@@ -1,15 +1,19 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
 import MuiIconButton from '@material-ui/core/IconButton'
 
-const IconButton = ({ size = 'medium', className, children, ...props }) => {
-  return (
-    <MuiIconButton className={cx(className, size)} {...props}>
-      {children}
-    </MuiIconButton>
-  )
-}
+const IconButton = forwardRef(
+  ({ size = 'medium', className, children, ...props }, ref) => {
+    return (
+      <MuiIconButton ref={ref} className={cx(className, size)} {...props}>
+        {children}
+      </MuiIconButton>
+    )
+  }
+)
+
+IconButton.displayName = 'IconButton'
 
 IconButton.propTypes = {
   className: PropTypes.string,

package/transpiled/react/AppSections/_mockApps.js

@@ -134,6 +134,30 @@ export var apps = [{
   },
   uninstallable: true,
   isInRegistry: true
+}, {
+  slug: 'konnector-withlowername',
+  name: 'easyflight',
+  icon: '<svg></svg>',
+  developer: {
+    name: 'Author with long name'
+  },
+  type: 'konnector',
+  categories: ['transport'],
+  tags: ['transport', 'files', 'bills'],
+  permissions: {
+    mock: {
+      type: 'io.mock.doctype'
+    }
+  },
+  version: '0.1.0',
+  versions: {
+    stable: ['0.1.0'],
+    beta: ['0.1.0'],
+    dev: ['0.1.0']
+  },
+  installed: true,
+  uninstallable: true,
+  isInRegistry: true
 }, // don't add permissions to Photos for testing
 {
   slug: 'photos',

package/transpiled/react/AppSections/components/AppsSection.js

@@ -1,4 +1,10 @@
-import React from 'react';
+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, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useI18n } from "cozy-ui/transpiled/react/I18n";
 import useBreakpoints from "cozy-ui/transpiled/react/hooks/useBreakpoints";
@@ -16,6 +22,14 @@ var makeNameGetter = function makeNameGetter(t) {
   };
 };
 
+var makeAppsListNameLowerCased = function makeAppsListNameLowerCased(appsList) {
+  return appsList.map(function (app) {
+    return _objectSpread(_objectSpread({}, app), {}, {
+      name: app.name.toLowerCase()
+    });
+  });
+};
+
 export var AppsSection = function AppsSection(_ref) {
   var appsList = _ref.appsList,
       subtitle = _ref.subtitle,
@@ -29,19 +43,33 @@ export var AppsSection = function AppsSection(_ref) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
+  var apps = useMemo(function () {
+    return makeAppsListNameLowerCased(appsList);
+  }, [appsList]);
+  var sortedApps = useMemo(function () {
+    return sortBy(apps, makeNameGetter(t));
+  }, [apps, t]);
+  var getAppBySlug = useMemo(function () {
+    return function (slug) {
+      return appsList.find(function (app) {
+        return app.slug === slug;
+      });
+    };
+  }, [appsList]);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.AppsSection
-  }, subtitle, appsList && !!appsList.length && /*#__PURE__*/React.createElement("div", {
+  }, subtitle, apps && !!apps.length && /*#__PURE__*/React.createElement("div", {
     className: styles.AppsSection__list
-  }, sortBy(appsList, makeNameGetter(t)).map(function (app) {
+  }, sortedApps.map(function (app) {
+    var realApp = getAppBySlug(app.slug);
     return /*#__PURE__*/React.createElement(AppTile, {
-      app: app,
-      namePrefix: getTranslatedManifestProperty(app, 'name_prefix', t),
-      name: getTranslatedManifestProperty(app, 'name', t),
+      app: realApp,
+      namePrefix: getTranslatedManifestProperty(realApp, 'name_prefix', t),
+      name: getTranslatedManifestProperty(realApp, 'name', t),
       onClick: function onClick() {
-        return onAppClick(app.slug);
+        return onAppClick(realApp.slug);
       },
-      key: app.slug,
+      key: realApp.slug,
       showDeveloper: !isMobile,
       displaySpecificMaintenanceStyle: displaySpecificMaintenanceStyle,
       IconComponent: IconComponent

package/transpiled/react/IconButton/index.js

@@ -1,12 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["size", "className", "children"];
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import MuiIconButton from '@material-ui/core/IconButton';
-
-var IconButton = function IconButton(_ref) {
+var IconButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       className = _ref.className,
@@ -14,10 +13,11 @@ var IconButton = function IconButton(_ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(MuiIconButton, _extends({
+    ref: ref,
     className: cx(className, size)
   }, props), children);
-};
-
+});
+IconButton.displayName = 'IconButton';
 IconButton.propTypes = {
   className: PropTypes.string,
   size: PropTypes.oneOf(['small', 'medium', 'large'])