cozy-ui 109.2.0 → 110.0.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [110.0.0](https://github.com/cozy/cozy-ui/compare/v109.2.0...v110.0.0) (2024-06-18)
+
+
+### Features
+
+* **CozyTheme:** Use `io.cozy.settings` to determine default type ([9c513d4](https://github.com/cozy/cozy-ui/commit/9c513d4))
+
+
+### BREAKING CHANGES
+
+* **CozyTheme:** To use `<CozyTheme>` properly, you must have permission in your app to get `io.cozy.settings` documents. The experience would be even better with realtime on this doctypes.
+
 # [109.2.0](https://github.com/cozy/cozy-ui/compare/v109.1.1...v109.2.0) (2024-06-17)
 
 

package/package.json

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

package/react/providers/CozyTheme/CozyThemeWithQuery.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { useQuery, isQueryLoading, hasQueryBeenLoaded } from 'cozy-client'
+
+import { buildSettingsInstanceQuery } from './queries'
+import { DumbCozyTheme } from './index'
+
+const CozyThemeWithQuery = props => {
+  const instanceQuery = buildSettingsInstanceQuery()
+  const { data: instance, ...instanceQueryLeft } = useQuery(
+    instanceQuery.definition,
+    instanceQuery.options
+  )
+
+  if (
+    isQueryLoading(instanceQueryLeft) &&
+    !hasQueryBeenLoaded(instanceQueryLeft)
+  ) {
+    return null
+  }
+
+  return <DumbCozyTheme {...props} settingsThemeType={instance?.colorScheme} />
+}
+
+export default CozyThemeWithQuery

package/react/providers/CozyTheme/Readme.md

@@ -24,6 +24,7 @@ const themesSupportingContext = [
 ]
 
 ;
+
 <DemoProvider>
   <CozyTheme variant='inverted' className='u-stack-m'>
     <Paper className='u-p-1'>

package/react/providers/CozyTheme/index.jsx

@@ -1,12 +1,14 @@
 import React, { createContext, useContext, useLayoutEffect } from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
-import flag from 'cozy-flags'
 
+import flag from 'cozy-flags'
 import log from 'cozy-logger'
 
+import { isRsg } from '../../hooks/useSetFlagshipUi/helpers'
 import useMediaQuery from '../../hooks/useMediaQuery'
 import MuiCozyTheme from '../../MuiCozyTheme'
+import CozyThemeWithQuery from './CozyThemeWithQuery'
 
 export const CozyThemeContext = createContext()
 
@@ -25,7 +27,13 @@ export const useCozyTheme = () => {
   return context
 }
 
-const CozyTheme = ({ variant, className, ignoreItself, children }) => {
+const DumbCozyTheme = ({
+  variant,
+  className,
+  ignoreItself,
+  settingsThemeType,
+  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
 
@@ -36,17 +44,26 @@ const CozyTheme = ({ variant, className, ignoreItself, children }) => {
       : 'light'
     : 'light'
 
-  const selfThemeType = uiThemeType || deviceThemeType
+  const selfThemeType =
+    uiThemeType ||
+    (['light', 'dark'].includes(settingsThemeType)
+      ? settingsThemeType
+      : deviceThemeType)
   const selfThemeVariant = uiThemeVariant || variant
 
-  // add css var to body to be able to use them on it
-  useLayoutEffect(
-    () =>
-      document
-        .querySelector('body')
-        .classList.add(`CozyTheme--${selfThemeType}-normal`), // add omits if already present
-    [selfThemeType]
-  )
+  useLayoutEffect(() => {
+    const negativeThemeType = selfThemeType === 'light' ? 'dark' : 'light'
+
+    // remove "negative" value because can be changed without refresh
+    document
+      .querySelector('body')
+      .classList.remove(`CozyTheme--${negativeThemeType}-normal`)
+
+    // add css var to body to be able to use them on it
+    document
+      .querySelector('body')
+      .classList.add(`CozyTheme--${selfThemeType}-normal`) // `add` omits if already present
+  }, [selfThemeType])
 
   return (
     <CozyThemeContext.Provider
@@ -67,18 +84,34 @@ const CozyTheme = ({ variant, className, ignoreItself, children }) => {
     </CozyThemeContext.Provider>
   )
 }
+DumbCozyTheme.propTypes = CozyThemeProptypes
+DumbCozyTheme.defaultProps = CozyThemeDefaultProps
+
+const CozyTheme = props => {
+  const Comp =
+    process.env.NODE_ENV === 'test' || isRsg
+      ? DumbCozyTheme
+      : CozyThemeWithQuery
+
+  return <Comp {...props} />
+}
 
-CozyTheme.propTypes = {
+const CozyThemeProptypes = {
   variant: PropTypes.oneOf(['normal', 'inverted']),
   /** Causes this element's children to appear as if they were direct children of the element's parent, ignoring the element itself. */
   ignoreItself: PropTypes.bool,
   className: PropTypes.string,
+  settingsThemeType: PropTypes.string,
   children: PropTypes.node
 }
 
-CozyTheme.defaultProps = {
+const CozyThemeDefaultProps = {
   variant: 'normal',
   ignoreItself: true
 }
+CozyTheme.propTypes = CozyThemeProptypes
+CozyTheme.defaultProps = CozyThemeDefaultProps
 
+// export this way to help doc generates correct component and props
 export default CozyTheme
+export { DumbCozyTheme }

package/react/providers/CozyTheme/queries.js

@@ -0,0 +1,14 @@
+import { Q, fetchPolicies } from 'cozy-client'
+
+const SETTINGS_DOCTYPE = 'io.cozy.settings'
+
+const defaultFetchPolicy = fetchPolicies.olderThan(5 * 60 * 1000)
+
+export const buildSettingsInstanceQuery = () => ({
+  definition: Q(SETTINGS_DOCTYPE).getById('io.cozy.settings.instance'),
+  options: {
+    as: `${SETTINGS_DOCTYPE}/io.cozy.settings.instance`,
+    fetchPolicy: defaultFetchPolicy,
+    singleDocData: true
+  }
+})

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

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["data"];
+import React from 'react';
+import { useQuery, isQueryLoading, hasQueryBeenLoaded } from 'cozy-client';
+import { buildSettingsInstanceQuery } from "cozy-ui/transpiled/react/providers/CozyTheme/queries";
+import { DumbCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme/index";
+
+var CozyThemeWithQuery = function CozyThemeWithQuery(props) {
+  var instanceQuery = buildSettingsInstanceQuery();
+
+  var _useQuery = useQuery(instanceQuery.definition, instanceQuery.options),
+      instance = _useQuery.data,
+      instanceQueryLeft = _objectWithoutProperties(_useQuery, _excluded);
+
+  if (isQueryLoading(instanceQueryLeft) && !hasQueryBeenLoaded(instanceQueryLeft)) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(DumbCozyTheme, _extends({}, props, {
+    settingsThemeType: instance === null || instance === void 0 ? void 0 : instance.colorScheme
+  }));
+};
+
+export default CozyThemeWithQuery;

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

@@ -4,8 +4,10 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import flag from 'cozy-flags';
 import log from 'cozy-logger';
+import { isRsg } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/helpers";
 import useMediaQuery from "cozy-ui/transpiled/react/hooks/useMediaQuery";
 import MuiCozyTheme from "cozy-ui/transpiled/react/MuiCozyTheme";
+import CozyThemeWithQuery from "cozy-ui/transpiled/react/providers/CozyTheme/CozyThemeWithQuery";
 export var CozyThemeContext = /*#__PURE__*/createContext();
 export var useCozyTheme = function useCozyTheme() {
   var context = useContext(CozyThemeContext);
@@ -21,12 +23,13 @@ export var useCozyTheme = function useCozyTheme() {
   return context;
 };
 
-var CozyTheme = function CozyTheme(_ref) {
+var DumbCozyTheme = function DumbCozyTheme(_ref) {
   var _cx;
 
   var variant = _ref.variant,
       className = _ref.className,
       ignoreItself = _ref.ignoreItself,
+      settingsThemeType = _ref.settingsThemeType,
       children = _ref.children;
   var uiThemeType = localStorage.getItem('ui-theme-type'); // use only for cozy-ui documentation and argos screenshots
 
@@ -35,13 +38,15 @@ var CozyTheme = function CozyTheme(_ref) {
   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; // add css var to body to be able to use them on it
-
+  var selfThemeType = uiThemeType || (['light', 'dark'].includes(settingsThemeType) ? settingsThemeType : deviceThemeType);
+  var selfThemeVariant = uiThemeVariant || variant;
   useLayoutEffect(function () {
-    return document.querySelector('body').classList.add("CozyTheme--".concat(selfThemeType, "-normal"));
-  }, // add omits if already present
-  [selfThemeType]);
+    var negativeThemeType = selfThemeType === 'light' ? 'dark' : 'light'; // remove "negative" value because can be changed without refresh
+
+    document.querySelector('body').classList.remove("CozyTheme--".concat(negativeThemeType, "-normal")); // add css var to body to be able to use them on it
+
+    document.querySelector('body').classList.add("CozyTheme--".concat(selfThemeType, "-normal")); // `add` omits if already present
+  }, [selfThemeType]);
   return /*#__PURE__*/React.createElement(CozyThemeContext.Provider, {
     value: {
       type: selfThemeType,
@@ -55,16 +60,29 @@ var CozyTheme = function CozyTheme(_ref) {
   }, children)));
 };
 
-CozyTheme.propTypes = {
+DumbCozyTheme.propTypes = CozyThemeProptypes;
+DumbCozyTheme.defaultProps = CozyThemeDefaultProps;
+
+var CozyTheme = function CozyTheme(props) {
+  var Comp = process.env.NODE_ENV === 'test' || isRsg ? DumbCozyTheme : CozyThemeWithQuery;
+  return /*#__PURE__*/React.createElement(Comp, props);
+};
+
+var CozyThemeProptypes = {
   variant: PropTypes.oneOf(['normal', 'inverted']),
 
   /** Causes this element's children to appear as if they were direct children of the element's parent, ignoring the element itself. */
   ignoreItself: PropTypes.bool,
   className: PropTypes.string,
+  settingsThemeType: PropTypes.string,
   children: PropTypes.node
 };
-CozyTheme.defaultProps = {
+var CozyThemeDefaultProps = {
   variant: 'normal',
   ignoreItself: true
 };
-export default CozyTheme;
+CozyTheme.propTypes = CozyThemeProptypes;
+CozyTheme.defaultProps = CozyThemeDefaultProps; // export this way to help doc generates correct component and props
+
+export default CozyTheme;
+export { DumbCozyTheme };

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

@@ -0,0 +1,13 @@
+import { Q, fetchPolicies } from 'cozy-client';
+var SETTINGS_DOCTYPE = 'io.cozy.settings';
+var defaultFetchPolicy = fetchPolicies.olderThan(5 * 60 * 1000);
+export var buildSettingsInstanceQuery = function buildSettingsInstanceQuery() {
+  return {
+    definition: Q(SETTINGS_DOCTYPE).getById('io.cozy.settings.instance'),
+    options: {
+      as: "".concat(SETTINGS_DOCTYPE, "/io.cozy.settings.instance"),
+      fetchPolicy: defaultFetchPolicy,
+      singleDocData: true
+    }
+  };
+};