Merge pull request #254 from morfeojs/feature/86

BREAKING CHANGE: #86

devtool/src/devtool/index.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client';
 import browser from 'webextension-polyfill';
-import { resetCss, MorfeoProvider } from '@morfeo/react';
+import { resetCss } from '@morfeo/react';
 import { getThemeFromAppAndInitMorfeo } from '../_shared/utils';
 import { MORFEO_DEVTOOL_PANEL_NAME, ASSETS_PATHS } from '../_shared/constants';
 import Devtool from './Devtool';
@@ -19,9 +19,5 @@ const container = document.getElementById('devtool');
 
 if (container) {
   const root = createRoot(container);
-  root.render(
-    <MorfeoProvider>
-      <Devtool />
-    </MorfeoProvider>,
-  );
+  root.render(<Devtool />);
 }

docs/docs/Packages/hooks.mdx

@@ -7,6 +7,10 @@ description: morfeo's hooks package
 
 **@morfeo/hooks** expose a set of hooks to easily use morfeo inside a `react` context.
 
+:::info React v18
+To properly use Morfeo in a React environment, you need to have a version of `react >= 18`
+:::
+
 ## Installation
 
 ```bash
@@ -17,7 +21,6 @@ npm i @morfeo/hooks
 yarn add @morfeo/hooks
 ```
 
-- [MorfeoProvider](#morfeo-provider)
 - [useTheme](#usetheme)
   - [useThemeSlice](#usethemeslice)
   - [useThemeValue](#usethemevalue)
@@ -27,24 +30,9 @@ yarn add @morfeo/hooks
 
 Advanced
 
+- [useSyncMorfeo](#usesyncmorfeo)
 - [useProps](#useprops)
 
-## Morfeo Provider
-
-To sync morfeo with react you have to first of all wrap you app with the `MorfeoProvider`:
-
-```tsx
-import { MorfeoProvider } from '@morfeo/hooks';
-
-function App() {
-  return (
-    <MorfeoProvider>
-      <YourApp />
-    </MorfeoProvider>
-  );
-}
-```
-
 ## useTheme
 
 Use this hook to get the current theme and use it inside a components:
@@ -118,9 +106,7 @@ they correspond to `morfeo.getCurrentTheme` and `morfeo.setCurrentTheme` of the
 
 ```jsx live
 function Button() {
-  // highlight-start
   const [currentTheme, setCurrentTheme] = useCurrentTheme();
-  // highlight-end
 
   const style = useStyle({
     componentName: 'Button',
@@ -129,9 +115,7 @@ function Button() {
   });
 
   const onClick = () => {
-    // highlight-start
     setCurrentTheme(currentTheme === 'light' ? 'dark' : 'light');
-    // highlight-end
   };
 
   return (
@@ -184,14 +168,82 @@ Just like useTheme, **useStyles** and **useStyle** are the equivalent of the [co
 but they force a re-render when the theme changes.
 :::
 
-## useProps
+## Advanced
+
+### useSyncMorfeo
+
+This hook is used under the hood in all of the others hooks, you'll probably never need to use it directly.
+
+By using `useSyncMorfeo` the component is subscribed to theme changes, which means that if the theme changes the component
+will re-render:
+
+```tsx live
+function App() {
+  useSyncMorfeo();
+
+  const onClick = () => {
+    morfeo.setCurrentTheme(
+      morfeo.getCurrentTheme() === 'light' ? 'dark' : 'light',
+    );
+  };
+
+  return (
+    <p>
+      The current theme is: <code>{morfeo.getCurrentTheme()}</code>
+      <br />
+      <button onClick={onClick}>Toggle theme</button>
+      <br />
+      <i>
+        Try to click on the "Toggle theme" button and see the current theme
+        changing
+      </i>
+    </p>
+  );
+}
+```
+
+If instead we use directly the `morfeo` instance from the core-api without using `useSyncMorfeo`, the component will not re-render when the theme changes:
+
+```tsx live
+function App() {
+  // useSyncMorfeo();
+
+  const onClick = () => {
+    morfeo.setCurrentTheme(
+      morfeo.getCurrentTheme() === 'light' ? 'dark' : 'light',
+    );
+  };
+
+  return (
+    <p>
+      The current theme is: <code>{morfeo.getCurrentTheme()}</code>
+      <br />
+      <button onClick={onClick}>Toggle theme</button>
+      <br />
+      <i>
+        Try to click on the "Toggle theme" button and see that nothing changes
+      </i>
+    </p>
+  );
+}
+```
+
+### useProps
 
 Use it to get the default props of a components, a common use is to merge the defaut props with the current props:
 
-```jsx
+```jsx live
 function MyButton(props) {
   const defaultProps = useProps('Button', 'primary');
+  const className = useClassName({
+    componentName: 'Button',
+    variant: 'primary',
+  });
 
-  return <button {...defaultProps} {...props} />;
+  return (
+    <button {...defaultProps} {...props} className={className}>
+      Button with default props
+    </button>
+  );
 }
 ```

docs/docs/Packages/native.mdx

@@ -5,7 +5,7 @@ title: native
 description: morfeo's native package
 ---
 
-@morfeo/native package is brings to `React Native` the morfeo's eco system
+@morfeo/native package brings to `React Native` the morfeo's ecosystem
 
 ## Installation
 
@@ -23,7 +23,7 @@ yarn add @morfeo/native
 
 ## Usage
 
-Just like @morfeo/react, the API of this package is the same as [@morfeo/hooks](./hooks.mdx), the main differences between `@morfeo/react` and `@morfeo/native` are related to how the parsers converts style objects to valid style for React Native, for example in @morfeo/native there you cannot use any pseudo element/class and shadows output is different (`shadowOffset`, `shadowColor`, `shadowOpacity` and `shadowRadius` instead of `boxShadow`)
+Just like @morfeo/react, the API of this package is the same as [@morfeo/hooks](./hooks.mdx), the main differences between `@morfeo/react` and `@morfeo/native` are related to how the parsers converts style objects to valid style for React Native, for example in @morfeo/native you cannot use any pseudo element/class, and also, shadows output is different (`shadowOffset`, `shadowColor`, `shadowOpacity` and `shadowRadius` instead of `boxShadow`)
 
 ```tsx
 import { View, ViewProps } from 'react-native';

docs/docs/Packages/react.mdx

@@ -48,17 +48,18 @@ function useClassNames<Key extends string>(
 
 ### Example
 
-```tsx
+```tsx live
 function Button() {
   const classes = useClassNames({
     container: {
       px: 'm',
     },
     button: {
+      corner: 'm',
       p: { lg: 'm', sm: 's' },
       bg: 'primary',
       '&:hover': {
-        opacity: 'light',
+        bg: 'primary.lightest',
       },
     },
   });
@@ -79,13 +80,14 @@ function useClassName(style: Style): string;
 
 ### Example
 
-```tsx
+```tsx live
 function Button() {
   const className = useClassName({
+    corner: 'm',
     p: { lg: 'm', sm: 's' },
     bg: 'primary',
     '&:hover': {
-      opacity: 'light',
+      bg: 'primary.lightest',
     },
   });
 

examples/react/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { initPreset } from '@morfeo/preset-default';
-import { morfeo, resetCss, loadFont, MorfeoProvider } from '@morfeo/react';
+import { morfeo, resetCss, loadFont } from '@morfeo/react';
 import { enableMorfeoDevTool } from '@morfeo/dev-tools';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
@@ -48,9 +48,7 @@ if (container) {
   const root = createRoot(container);
   root.render(
     <React.StrictMode>
-      <MorfeoProvider>
-        <App />
-      </MorfeoProvider>
+      <App />
     </React.StrictMode>,
   );
 }

packages/cli/tests/utils/run.ts

@@ -2,31 +2,25 @@ import { cli } from 'cli-ux';
 import { morfeoCLI } from '../../src/commands';
 
 export function run(...args: string[]) {
-  const _log = console.log;
-  const _error = console.error;
-  const _info = cli.info;
   const stdout: any[] = [];
   const stderr: any[] = [];
 
   cli.info = (message: any) => {
     if (typeof message === 'string') {
       stdout.push(message);
     }
-    return _info(message);
   };
 
   console.log = (message: any) => {
     if (typeof message === 'string') {
       stdout.push(message);
     }
-    return _log(message);
   };
 
   console.error = (message: any) => {
     if (typeof message === 'string') {
       stderr.push(message);
     }
-    return _error(message);
   };
 
   morfeoCLI(args);