cozy-ui 107.4.0 → 108.0.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [108.0.0](https://github.com/cozy/cozy-ui/compare/v107.4.1...v108.0.0) (2024-06-06)
+
+
+### Features
+
+* Add flag to activate dark mode ([5df55a8](https://github.com/cozy/cozy-ui/commit/5df55a8))
+
+
+### BREAKING CHANGES
+
+* you can now use safely `<meta name="color-scheme" content="light dark" />` in your app, and so replace `<meta name="color-scheme" content="only light" />` if necessary.
+The light mode is forced by an other way, you can use `ui.darkmode.enabled` flag to enable the dark mode if you want.
+
+## [107.4.1](https://github.com/cozy/cozy-ui/compare/v107.4.0...v107.4.1) (2024-06-05)
+
+
+### Bug Fixes
+
+* **AppsSection:** Change only ISP wording ([8542e61](https://github.com/cozy/cozy-ui/commit/8542e61))
+
 # [107.4.0](https://github.com/cozy/cozy-ui/compare/v107.3.0...v107.4.0) (2024-06-05)
 
 

package/package.json

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

package/react/AppSections/__snapshots__/index.spec.jsx.snap

@@ -217,6 +217,7 @@ exports[`AppsSection component should be rendered correctly with apps list, subt
             Object {
               "categories": Array [
                 "isp",
+                "telecom",
               ],
               "developer": Object {
                 "name": "Cozy",
@@ -249,6 +250,45 @@ exports[`AppsSection component should be rendered correctly with apps list, subt
           </SectionSubSubtitle>
         }
       />
+      <AppsSection
+        appsList={
+          Array [
+            Object {
+              "categories": Array [
+                "isp",
+                "telecom",
+              ],
+              "developer": Object {
+                "name": "Cozy",
+              },
+              "icon": "<svg></svg>",
+              "isInRegistry": true,
+              "name": "Bouilligue",
+              "slug": "konnector-bouilligue",
+              "type": "konnector",
+              "uninstallable": true,
+              "versions": Object {
+                "beta": Array [
+                  "0.1.0",
+                ],
+                "dev": Array [
+                  "0.1.0",
+                ],
+                "stable": Array [
+                  "0.1.0",
+                ],
+              },
+            },
+          ]
+        }
+        displaySpecificMaintenanceStyle={false}
+        onAppClick={[MockFunction]}
+        subtitle={
+          <SectionSubSubtitle>
+            Telecom
+          </SectionSubSubtitle>
+        }
+      />
       <AppsSection
         appsList={
           Array [
@@ -518,6 +558,7 @@ exports[`AppsSection component should not render dropdown filter on mobile if na
             Object {
               "categories": Array [
                 "isp",
+                "telecom",
               ],
               "developer": Object {
                 "name": "Cozy",
@@ -550,6 +591,45 @@ exports[`AppsSection component should not render dropdown filter on mobile if na
           </SectionSubSubtitle>
         }
       />
+      <AppsSection
+        appsList={
+          Array [
+            Object {
+              "categories": Array [
+                "isp",
+                "telecom",
+              ],
+              "developer": Object {
+                "name": "Cozy",
+              },
+              "icon": "<svg></svg>",
+              "isInRegistry": true,
+              "name": "Bouilligue",
+              "slug": "konnector-bouilligue",
+              "type": "konnector",
+              "uninstallable": true,
+              "versions": Object {
+                "beta": Array [
+                  "0.1.0",
+                ],
+                "dev": Array [
+                  "0.1.0",
+                ],
+                "stable": Array [
+                  "0.1.0",
+                ],
+              },
+            },
+          ]
+        }
+        displaySpecificMaintenanceStyle={false}
+        onAppClick={[MockFunction]}
+        subtitle={
+          <SectionSubSubtitle>
+            Telecom
+          </SectionSubSubtitle>
+        }
+      />
       <AppsSection
         appsList={
           Array [
@@ -822,6 +902,7 @@ exports[`AppsSection component should not render dropdown filter on tablet if na
             Object {
               "categories": Array [
                 "isp",
+                "telecom",
               ],
               "developer": Object {
                 "name": "Cozy",
@@ -854,6 +935,45 @@ exports[`AppsSection component should not render dropdown filter on tablet if na
           </SectionSubSubtitle>
         }
       />
+      <AppsSection
+        appsList={
+          Array [
+            Object {
+              "categories": Array [
+                "isp",
+                "telecom",
+              ],
+              "developer": Object {
+                "name": "Cozy",
+              },
+              "icon": "<svg></svg>",
+              "isInRegistry": true,
+              "name": "Bouilligue",
+              "slug": "konnector-bouilligue",
+              "type": "konnector",
+              "uninstallable": true,
+              "versions": Object {
+                "beta": Array [
+                  "0.1.0",
+                ],
+                "dev": Array [
+                  "0.1.0",
+                ],
+                "stable": Array [
+                  "0.1.0",
+                ],
+              },
+            },
+          ]
+        }
+        displaySpecificMaintenanceStyle={false}
+        onAppClick={[MockFunction]}
+        subtitle={
+          <SectionSubSubtitle>
+            Telecom
+          </SectionSubSubtitle>
+        }
+      />
       <AppsSection
         appsList={
           Array [
@@ -966,6 +1086,12 @@ exports[`AppsSection component should render dropdown filter on mobile if no nav
           "type": "konnector",
           "value": "isp",
         },
+        Object {
+          "label": "Telecom",
+          "secondary": true,
+          "type": "konnector",
+          "value": "telecom",
+        },
         Object {
           "label": "Transportation",
           "secondary": true,
@@ -1185,6 +1311,7 @@ exports[`AppsSection component should render dropdown filter on mobile if no nav
             Object {
               "categories": Array [
                 "isp",
+                "telecom",
               ],
               "developer": Object {
                 "name": "Cozy",
@@ -1217,6 +1344,45 @@ exports[`AppsSection component should render dropdown filter on mobile if no nav
           </SectionSubSubtitle>
         }
       />
+      <AppsSection
+        appsList={
+          Array [
+            Object {
+              "categories": Array [
+                "isp",
+                "telecom",
+              ],
+              "developer": Object {
+                "name": "Cozy",
+              },
+              "icon": "<svg></svg>",
+              "isInRegistry": true,
+              "name": "Bouilligue",
+              "slug": "konnector-bouilligue",
+              "type": "konnector",
+              "uninstallable": true,
+              "versions": Object {
+                "beta": Array [
+                  "0.1.0",
+                ],
+                "dev": Array [
+                  "0.1.0",
+                ],
+                "stable": Array [
+                  "0.1.0",
+                ],
+              },
+            },
+          ]
+        }
+        displaySpecificMaintenanceStyle={false}
+        onAppClick={[MockFunction]}
+        subtitle={
+          <SectionSubSubtitle>
+            Telecom
+          </SectionSubSubtitle>
+        }
+      />
       <AppsSection
         appsList={
           Array [
@@ -1321,6 +1487,12 @@ exports[`AppsSection component should render dropdown filter on tablet if no nav
           "type": "konnector",
           "value": "isp",
         },
+        Object {
+          "label": "Telecom",
+          "secondary": true,
+          "type": "konnector",
+          "value": "telecom",
+        },
         Object {
           "label": "Transportation",
           "secondary": true,
@@ -1543,6 +1715,7 @@ exports[`AppsSection component should render dropdown filter on tablet if no nav
             Object {
               "categories": Array [
                 "isp",
+                "telecom",
               ],
               "developer": Object {
                 "name": "Cozy",
@@ -1575,6 +1748,45 @@ exports[`AppsSection component should render dropdown filter on tablet if no nav
           </SectionSubSubtitle>
         }
       />
+      <AppsSection
+        appsList={
+          Array [
+            Object {
+              "categories": Array [
+                "isp",
+                "telecom",
+              ],
+              "developer": Object {
+                "name": "Cozy",
+              },
+              "icon": "<svg></svg>",
+              "isInRegistry": true,
+              "name": "Bouilligue",
+              "slug": "konnector-bouilligue",
+              "type": "konnector",
+              "uninstallable": true,
+              "versions": Object {
+                "beta": Array [
+                  "0.1.0",
+                ],
+                "dev": Array [
+                  "0.1.0",
+                ],
+                "stable": Array [
+                  "0.1.0",
+                ],
+              },
+            },
+          ]
+        }
+        displaySpecificMaintenanceStyle={false}
+        onAppClick={[MockFunction]}
+        subtitle={
+          <SectionSubSubtitle>
+            Telecom
+          </SectionSubSubtitle>
+        }
+      />
       <AppsSection
         appsList={
           Array [

package/react/AppSections/__snapshots__/search.spec.js.snap

@@ -623,6 +623,7 @@ Array [
   Object {
     "categories": Array [
       "isp",
+      "telecom",
     ],
     "developer": Object {
       "name": "Cozy",
@@ -848,6 +849,7 @@ Array [
   Object {
     "categories": Array [
       "isp",
+      "telecom",
     ],
     "developer": Object {
       "name": "Cozy",

package/react/AppSections/_mockApps.js

@@ -76,7 +76,7 @@ export const apps = [
     icon: '<svg></svg>',
     developer: { name: 'Cozy' },
     type: 'konnector',
-    categories: ['isp'],
+    categories: ['isp', 'telecom'],
     versions: {
       stable: ['0.1.0'],
       beta: ['0.1.0'],

package/react/AppSections/categories.spec.js

@@ -23,6 +23,7 @@ describe('groupApps', () => {
       isp: ['konnector-bouilligue'],
       others: ['devonly'],
       partners: ['tasky'],
+      telecom: ['konnector-bouilligue'],
       transport: ['konnector-trinlane']
     })
   })
@@ -44,6 +45,7 @@ describe('sorter', () => {
       'cozy',
       'isp',
       'all',
+      'telecom',
       'others',
       'banking'
     ])
@@ -52,16 +54,24 @@ describe('sorter', () => {
       'cozy',
       'banking',
       'isp',
+      'telecom',
       'others'
     ])
   })
 
   it('should test with all and others at the border', () => {
-    const catList2 = prepareCategories(['all', 'banking', 'cozy', 'others'])
+    const catList2 = prepareCategories([
+      'all',
+      'telecom',
+      'banking',
+      'cozy',
+      'others'
+    ])
     expect(catList2.sort(catUtils.sorter).map(x => x.value)).toEqual([
       'all',
       'cozy',
       'banking',
+      'telecom',
       'others'
     ])
   })
@@ -105,6 +115,12 @@ describe('generateOptionsFromApps', () => {
         type: 'konnector',
         value: 'isp'
       },
+      {
+        label: 'Telecom',
+        secondary: true,
+        type: 'konnector',
+        value: 'telecom'
+      },
       {
         label: 'Transportation',
         secondary: true,
@@ -151,6 +167,12 @@ describe('generateOptionsFromApps', () => {
         type: 'konnector',
         value: 'isp'
       },
+      {
+        label: 'Telecom',
+        secondary: true,
+        type: 'konnector',
+        value: 'telecom'
+      },
       {
         label: 'Transportation',
         secondary: true,

package/react/AppSections/locales/en.json

@@ -21,6 +21,7 @@
     "public_service": "Public services",
     "shopping": "Shopping",
     "social": "Social",
+    "telecom": "Telecom",
     "transport": "Transportation",
     "pro": "Work"
   },

package/react/AppSections/locales/fr.json

@@ -21,6 +21,7 @@
     "public_service": "Services publics",
     "shopping": "Shopping",
     "social": "Social",
+    "telecom": "Mobile",
     "transport": "Voyage et transport",
     "pro": "Travail"
   },

package/react/mocks/apps.js

@@ -75,7 +75,7 @@ export const apps = [
     icon: '<svg></svg>',
     developer: { name: 'Cozy' },
     type: 'konnector',
-    categories: ['isp'],
+    categories: ['isp', 'telecom'],
     versions: {
       stable: ['0.1.0'],
       beta: ['0.1.0'],

package/react/providers/CozyTheme/index.jsx

@@ -1,15 +1,12 @@
-import React, { createContext, useContext, useEffect } from 'react'
+import React, { createContext, useContext } from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
+import flag from 'cozy-flags'
 
 import log from 'cozy-logger'
 
 import useMediaQuery from '../../hooks/useMediaQuery'
 import MuiCozyTheme from '../../MuiCozyTheme'
-import {
-  createOrUpdateColorSchemeMetaTag,
-  getColorSchemeMetaTagContent
-} from './helpers'
 
 export const CozyThemeContext = createContext()
 
@@ -32,21 +29,16 @@ const CozyTheme = ({ variant, className, ignoreItself, children }) => {
   const uiThemeType = localStorage.getItem('ui-theme-type') // use only for cozy-ui documentation and argos screenshots
   const uiThemeVariant = localStorage.getItem('ui-theme-variant') // use only for cozy-ui documentation and argos screenshots
 
+  const isOnlyLight = !!flag('ui.darkmode.enabled') // should be remove when dark mode is validated on all apps
   const deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)')
-    ? 'dark'
+    ? isOnlyLight
+      ? 'dark'
+      : 'light'
     : 'light'
-  const isOnlyLight = getColorSchemeMetaTagContent() === 'only light'
-  const forcedThemeType = uiThemeType || deviceThemeType
 
-  const selfThemeType = isOnlyLight ? 'light' : forcedThemeType
+  const selfThemeType = uiThemeType || deviceThemeType
   const selfThemeVariant = uiThemeVariant || variant
 
-  useEffect(() => {
-    if (!isOnlyLight) {
-      createOrUpdateColorSchemeMetaTag(forcedThemeType)
-    }
-  }, [isOnlyLight, forcedThemeType])
-
   return (
     <CozyThemeContext.Provider
       value={{ type: selfThemeType, variant: selfThemeVariant }}

package/transpiled/react/AppSections/Sections.js

@@ -48,6 +48,7 @@ var en = {
     public_service: "Public services",
     shopping: "Shopping",
     social: "Social",
+    telecom: "Telecom",
     transport: "Transportation",
     pro: "Work"
   },
@@ -79,6 +80,7 @@ var fr = {
     public_service: "Services publics",
     shopping: "Shopping",
     social: "Social",
+    telecom: "Mobile",
     transport: "Voyage et transport",
     pro: "Travail"
   },

package/transpiled/react/AppSections/_mockApps.js

@@ -80,7 +80,7 @@ export var apps = [{
     name: 'Cozy'
   },
   type: 'konnector',
-  categories: ['isp'],
+  categories: ['isp', 'telecom'],
   versions: {
     stable: ['0.1.0'],
     beta: ['0.1.0'],

package/transpiled/react/mocks/apps.js

@@ -79,7 +79,7 @@ export var apps = [{
     name: 'Cozy'
   },
   type: 'konnector',
-  categories: ['isp'],
+  categories: ['isp', 'telecom'],
   versions: {
     stable: ['0.1.0'],
     beta: ['0.1.0'],

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

@@ -1,11 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { createContext, useContext, useEffect } from 'react';
+import React, { createContext, useContext } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import flag from 'cozy-flags';
 import log from 'cozy-logger';
 import useMediaQuery from "cozy-ui/transpiled/react/hooks/useMediaQuery";
 import MuiCozyTheme from "cozy-ui/transpiled/react/MuiCozyTheme";
-import { createOrUpdateColorSchemeMetaTag, getColorSchemeMetaTagContent } from "cozy-ui/transpiled/react/providers/CozyTheme/helpers";
 export var CozyThemeContext = /*#__PURE__*/createContext();
 export var useCozyTheme = function useCozyTheme() {
   var context = useContext(CozyThemeContext);
@@ -32,16 +32,11 @@ var CozyTheme = function CozyTheme(_ref) {
 
   var uiThemeVariant = localStorage.getItem('ui-theme-variant'); // use only for cozy-ui documentation and argos screenshots
 
-  var deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)') ? 'dark' : 'light';
-  var isOnlyLight = getColorSchemeMetaTagContent() === 'only light';
-  var forcedThemeType = uiThemeType || deviceThemeType;
-  var selfThemeType = isOnlyLight ? 'light' : forcedThemeType;
+  var isOnlyLight = !!flag('ui.darkmode.enabled'); // should be remove when dark mode is validated on all apps
+
+  var deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)') ? isOnlyLight ? 'dark' : 'light' : 'light';
+  var selfThemeType = uiThemeType || deviceThemeType;
   var selfThemeVariant = uiThemeVariant || variant;
-  useEffect(function () {
-    if (!isOnlyLight) {
-      createOrUpdateColorSchemeMetaTag(forcedThemeType);
-    }
-  }, [isOnlyLight, forcedThemeType]);
   return /*#__PURE__*/React.createElement(CozyThemeContext.Provider, {
     value: {
       type: selfThemeType,

package/react/providers/CozyTheme/helpers.js

@@ -1,28 +0,0 @@
-const getColorSchemeMetaTag = () =>
-  document.querySelector('meta[name="color-scheme"]')
-
-export const getColorSchemeMetaTagContent = () =>
-  getColorSchemeMetaTag()?.content
-
-const updateColorSchemeMetaTagContent = content => {
-  const colorSchemeMetaTag = getColorSchemeMetaTag()
-  colorSchemeMetaTag.content = content
-}
-
-const createColorSchemeMetaTag = content => {
-  const meta = document.createElement('meta')
-  meta.name = 'color-scheme'
-  meta.content = content
-
-  document.head.prepend(meta)
-}
-
-export const createOrUpdateColorSchemeMetaTag = content => {
-  const colorSchemeMetaTag = getColorSchemeMetaTag()
-
-  if (!colorSchemeMetaTag) {
-    createColorSchemeMetaTag(content)
-  } else {
-    updateColorSchemeMetaTagContent(content)
-  }
-}

package/transpiled/react/providers/CozyTheme/helpers.js

@@ -1,31 +0,0 @@
-var getColorSchemeMetaTag = function getColorSchemeMetaTag() {
-  return document.querySelector('meta[name="color-scheme"]');
-};
-
-export var getColorSchemeMetaTagContent = function getColorSchemeMetaTagContent() {
-  var _getColorSchemeMetaTa;
-
-  return (_getColorSchemeMetaTa = getColorSchemeMetaTag()) === null || _getColorSchemeMetaTa === void 0 ? void 0 : _getColorSchemeMetaTa.content;
-};
-
-var updateColorSchemeMetaTagContent = function updateColorSchemeMetaTagContent(content) {
-  var colorSchemeMetaTag = getColorSchemeMetaTag();
-  colorSchemeMetaTag.content = content;
-};
-
-var createColorSchemeMetaTag = function createColorSchemeMetaTag(content) {
-  var meta = document.createElement('meta');
-  meta.name = 'color-scheme';
-  meta.content = content;
-  document.head.prepend(meta);
-};
-
-export var createOrUpdateColorSchemeMetaTag = function createOrUpdateColorSchemeMetaTag(content) {
-  var colorSchemeMetaTag = getColorSchemeMetaTag();
-
-  if (!colorSchemeMetaTag) {
-    createColorSchemeMetaTag(content);
-  } else {
-    updateColorSchemeMetaTagContent(content);
-  }
-};