feat(windmill): add usePreferences to windmill

Instead of adding all storage, user preferences and theme customization utilities as a default, they
are now under the usePreferences prop, being optional

BREAKING CHANGE: Now you need to use the prop `usePreferences` in the root Windmill component if you
want access to theme utilities like the current theme or theme toggler, user preferences and user
theme storage. These features were enabled by default before. You get the old behavior just adding
`usePreferences` to the root Windmill component.

__tests__/Windmill.test.js

@@ -43,8 +43,19 @@ describe('Windmill Context', () => {
     expect(wrapper.find('button').getDOMNode().getAttribute('class')).toContain(expected)
   })
 
-  it('should not add dark theme class to html element', () => {
+  it('should add theme-light class to html element is usePreferences is present', () => {
     const expected = 'theme-light'
+    mount(
+      <Windmill usePreferences>
+        <Button />
+      </Windmill>
+    )
+
+    expect(document.documentElement.getAttribute('class')).toBe(expected)
+  })
+
+  it('should not add any class to html element if usePreferences is ausent', () => {
+    const expected = ''
     mount(
       <Windmill>
         <Button />
@@ -57,7 +68,7 @@ describe('Windmill Context', () => {
   it('should execute the toggleTheme method', () => {
     const expected = 'theme-dark'
     const wrapper = mount(
-      <Windmill>
+      <Windmill usePreferences>
         <TestButton />
       </Windmill>
     )
@@ -82,7 +93,7 @@ describe('Windmill Context', () => {
 
     const expected = 'theme-dark'
     mount(
-      <Windmill>
+      <Windmill usePreferences>
         <Button />
       </Windmill>
     )
@@ -100,4 +111,15 @@ describe('Windmill Context', () => {
 
     expect(document.documentElement.getAttribute('class')).toBe(expected)
   })
+
+  it('should add dark theme class to html element when usePreferences is enabled', () => {
+    const expected = 'theme-dark'
+    mount(
+      <Windmill dark usePreferences>
+        <Button />
+      </Windmill>
+    )
+
+    expect(document.documentElement.getAttribute('class')).toBe(expected)
+  })
 })

src/Windmill.js

@@ -5,13 +5,15 @@ import defaultTheme from './themes/default'
 import { mergeDeep } from '../utils/mergeDeep'
 import useDarkMode from '../utils/useDarkMode'
 
-function Windmill({ children, theme: customTheme, dark }) {
+function Windmill({ children, theme: customTheme, dark, usePreferences }) {
   const mergedTheme = mergeDeep(defaultTheme, customTheme)
-  const [mode, setMode, toggleMode] = useDarkMode()
+  const [mode, setMode, toggleMode] = useDarkMode(usePreferences)
 
   useLayoutEffect(() => {
     if (dark) {
-      setMode('dark')
+      if (mode !== null) {
+        setMode('dark')
+      }
       document.documentElement.classList.add(`theme-dark`)
     }
   }, [dark])
@@ -32,6 +34,11 @@ Windmill.propTypes = {
   children: PropTypes.node.isRequired,
   theme: PropTypes.object,
   dark: PropTypes.bool,
+  usePreferences: PropTypes.bool,
+}
+
+Windmill.defaultProps = {
+  usePreferences: false,
 }
 
 export default Windmill

utils/useDarkMode.js

@@ -1,6 +1,8 @@
 import { useEffect, useState } from 'react'
 
-export const useDarkMode = () => {
+export const useDarkMode = (usePreferences) => {
+  if (!usePreferences) return [null, null, null]
+
   const [mode, setMode] = useState()
 
   const toggleMode = () => {