feat(windmill): add theme storage and user system preferences getter …

…as default

__tests__/Windmill.test.js

@@ -2,19 +2,19 @@ import React, { useContext } from 'react'
 import { mount } from 'enzyme'
 import Button from '../src/Button'
 import Windmill from '../src/Windmill'
-import { ThemeContext } from '../src/context/ThemeContext'
+import { WindmillContext } from '../src'
 
 function TestButton() {
-  const { toggleTheme } = useContext(ThemeContext)
+  const { toggleTheme } = useContext(WindmillContext)
 
   return <button onClick={toggleTheme}>Click</button>
 }
 
-beforeEach(() => {
-  document.documentElement.className = ''
-})
-
 describe('Windmill Context', () => {
+  beforeEach(() => {
+    document.documentElement.className = ''
+  })
+
   it('should use defaultTheme styles', () => {
     const expected =
       'inline-flex items-center justify-center cursor-pointer leading-5 transition-colors duration-150 font-medium focus:outline-none'
@@ -54,28 +54,49 @@ describe('Windmill Context', () => {
     expect(document.documentElement.getAttribute('class')).toBe(expected)
   })
 
-  it('should add dark theme class to html element', () => {
+  it('should execute the toggleTheme method', () => {
     const expected = 'theme-dark'
-    mount(
-      <Windmill dark>
-        <Button />
+    const wrapper = mount(
+      <Windmill>
+        <TestButton />
       </Windmill>
     )
 
+    const button = wrapper.find('button')
+
+    button.simulate('click')
+
     expect(document.documentElement.getAttribute('class')).toBe(expected)
   })
 
-  it('should execute the toggleTheme method', () => {
+  it('should add dark theme based on users preference', () => {
+    Object.defineProperty(window, 'matchMedia', {
+      value: jest.fn(() => {
+        return {
+          matches: true,
+          addEventListener: jest.fn(),
+          removeEventListener: jest.fn(),
+        }
+      }),
+    })
+
     const expected = 'theme-dark'
-    const wrapper = mount(
+    mount(
       <Windmill>
-        <TestButton />
+        <Button />
       </Windmill>
     )
 
-    const button = wrapper.find('button')
+    expect(document.documentElement.getAttribute('class')).toBe(expected)
+  })
 
-    button.simulate('click')
+  it('should add dark theme class to html element', () => {
+    const expected = 'theme-dark'
+    mount(
+      <Windmill dark>
+        <Button />
+      </Windmill>
+    )
 
     expect(document.documentElement.getAttribute('class')).toBe(expected)
   })

src/Windmill.js

@@ -7,6 +7,19 @@ import { mergeDeep } from '../utils/mergeDeep'
 function Windmill({ children, theme, dark }) {
   const mergedTheme = mergeDeep(defaultTheme, theme)
   const [isDark, setIsDark] = useState(false)
+  const userPrefersDark =
+    !!window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+
+  useLayoutEffect(() => {
+    const userPreference = JSON.parse(window.localStorage.getItem('dark')) || userPrefersDark
+    if (userPreference) {
+      document.documentElement.classList.add(`theme-dark`)
+    }
+  }, [])
+
+  useLayoutEffect(() => {
+    window.localStorage.setItem('dark', isDark)
+  }, [isDark])
 
   useLayoutEffect(() => {
     if (dark) {

src/index.js

@@ -1,3 +1,5 @@
+import { ThemeContext } from './context/ThemeContext'
+
 export { default as Windmill } from './Windmill'
 export { default as Button } from './Button'
 export { default as Card } from './Card'
@@ -25,3 +27,4 @@ export { default as TableHeader } from './TableHeader'
 export { default as TableFooter } from './TableFooter'
 export { default as TableRow } from './TableRow'
 export { default as Pagination } from './Pagination'
+export const WindmillContext = ThemeContext