Merge pull request #110 from ruedap/app-state

Implement context and hook for app state

components/templates/styleguide/_foo_bar.tsx

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components'
+import { StyledTag4 } from './_styled_tag4'
+
+const fooBar = css`
+  font-size: 200%;
+`
+
+export const FooBar = () => (
+  <StyledFooBar css={ fooBar }>This is FooBar</StyledFooBar>
+)
+
+export const FooBarTag4 = () => (
+  <StyledFooBarTag4>This is FooBarTag4</StyledFooBarTag4>
+)
+
+const StyledFooBar = styled.div`
+  color: red;
+`
+
+const StyledFooBarTag4 = styled(StyledTag4)`
+  font-weight: bold;
+`

components/templates/styleguide/_styled_tag4.ts

@@ -1,3 +1,3 @@
 import styled from 'styled-components'
 
-export const Tag4 = styled.div`border: 4px solid black;`
+export const StyledTag4 = styled.div`border: 4px solid ${({ theme }) => theme.colors.primary};`

components/templates/styleguide/index.tsx

@@ -1,24 +1,103 @@
 import { Index2 } from './index2'
-import { FooBar, FooBarTag4 } from './foo_bar'
-import * as Styled from './styled'
+import { FooBar, FooBarTag4 } from './_foo_bar'
+import styled, { css, keyframes, Keyframes } from 'styled-components'
+import { StyledTag4 } from './_styled_tag4'
+import { useSetAppState, useAppState } from '@/hooks/app_state'
+
+const hover = css`
+  &:hover {
+    color: ${({ theme }) => theme.colors.primary};
+    border-color: aqua;
+    box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
+  }
+`
+
+const prop = css`
+  font-size: 200%;
+  color: indigo;
+`
 
 const Styleguide = () => {
+  const setAppState = useSetAppState()
+  console.log(useAppState())
   return (
     <>
       <Index2 />
       <FooBar />
       <FooBarTag4 />
-      <Styled.Title>Styleguide</Styled.Title>
-      <div css={ Styled.prop }>This is css prop</div>
-      <Styled.Tag1>Cool Styles</Styled.Tag1>
-      <Styled.Tag2>
+      <StyledTitle>Styleguide</StyledTitle>
+      <div css={ prop }>This is css prop</div>
+      <StyledTag1>Cool Styles</StyledTag1>
+      <StyledTag2>
         With <code>:hover</code>.
-      </Styled.Tag2>
-      <Styled.Tag3 animation={ Styled.bounce }>Let's bounce.</Styled.Tag3>
-      <Styled.Tag3 animation={ Styled.shake }>Let's shake.</Styled.Tag3>
-      <Styled.Tag4>This is Styled.Tag4</Styled.Tag4>
+      </StyledTag2>
+      <StyledTag3 animation={ bounce }>Let&apos;s bounce.</StyledTag3>
+      <StyledTag3 animation={ shake }>Let&apos;s shake.</StyledTag3>
+      <StyledTag4>This is Styled.Tag4</StyledTag4>
+      <button onClick={ () => setAppState({ themeName: 'dark' }) }>
+        dark mode
+      </button>
+      <button onClick={ () => setAppState({ themeName: 'light' }) }>
+        light mode
+      </button>
     </>
   )
 }
 
 export default Styleguide
+
+const StyledTitle = styled.h1`
+  font-size: 4rem;
+  margin: 0;
+  color: ${({ theme }) => theme.colors.primary};
+`
+
+const base = css`
+  background-color: white;
+  color: cornflowerblue;
+  border: 1px solid lightgreen;
+  border-right: none;
+  border-bottom: none;
+  box-shadow: 5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow;
+  transition: all 0.1s linear;
+  margin: 0 3rem 3rem;
+  padding: 1rem 0.5rem;
+`
+
+const bounce = keyframes`
+  from {
+    transform: scale(1.01);
+  }
+  to {
+    transform: scale(0.99);
+  }
+`
+
+const shake = keyframes`
+  10%, 90% { transform: translateY(-1px); }
+  20%, 80% { transform: translateY(2px); }
+  30%, 50%, 70% { transform: translateY(-4px); }
+  40%, 60% { transform: translateY(4px); }
+`
+
+const StyledTag1 = styled.div`
+  ${base};
+`
+
+const StyledTag2 = styled.div`
+  ${base};
+  ${hover};
+  & code {
+    background-color: linen;
+  }
+`
+
+const StyledTag3 = styled.div<{ animation: Keyframes }>`
+  ${base};
+  ${hover};
+  & code {
+    background-color: linen;
+  }
+  animation: ${({ animation }) => animation} 0.2s infinite ease-in-out alternate;
+  content: "${({ theme }) => theme.colors.primary}";
+`

contexts/app_state.tsx

@@ -0,0 +1,41 @@
+import { createContext, Dispatch, SetStateAction, useState } from 'react'
+import { ThemeProvider } from 'styled-components'
+import { lightTheme, darkTheme } from '@/styles/app_theme'
+
+interface AppState {
+  // TODO: Add null
+  themeName: 'light' | 'dark'
+}
+
+const initialAppState: AppState = {
+  themeName: 'light'
+}
+
+export const AppStateContext = createContext<AppState>(initialAppState)
+export const SetAppStateContext = createContext<
+Dispatch<SetStateAction<AppState>>
+>(() => {})
+
+export const AppStateProvider = (props: {
+  initialAppState?: AppState
+  children: React.ReactNode
+}) => {
+  const [appState, setAppState] = useState<AppState>(
+    props.initialAppState ?? initialAppState
+  )
+  return (
+    <AppStateContext.Provider value={ appState }>
+      <SetAppStateContext.Provider value={ setAppState }>
+        <AppStateContext.Consumer>
+          { value => (
+            <ThemeProvider theme={ value.themeName === 'light'
+              ? lightTheme : darkTheme
+            }>
+              { props.children }
+            </ThemeProvider>
+          ) }
+        </AppStateContext.Consumer>
+      </SetAppStateContext.Provider>
+    </AppStateContext.Provider>
+  )
+}

hooks/app_state.tsx

@@ -0,0 +1,10 @@
+import { useContext } from 'react'
+import { AppStateContext, SetAppStateContext } from '@/contexts/app_state'
+
+export const useAppState = () => {
+  return useContext(AppStateContext)
+}
+
+export const useSetAppState = () => {
+  return useContext(SetAppStateContext)
+}

pages/_app.tsx

@@ -1,26 +1,23 @@
 import { AppProps } from 'next/app'
 import Router from 'next/router'
-import { ThemeProvider, DefaultTheme } from 'styled-components'
 import * as gtag from '@/utils/gtag'
 import Styles from '@/styles'
+import { AppStateProvider } from '@/contexts/app_state'
+import { useAppState } from '@/hooks/app_state'
 import '@/styles/normalize.scss'
 import '@/styles/highlightjs.scss'
 import '@/styles/fonts.scss'
 
 Router.events.on('routeChangeComplete', url => gtag.pageview(url))
 
-const theme: DefaultTheme = {
-  colors: {
-    primary: 'skyblue'
-  }
-}
-
 export default function App ({ Component, pageProps }: AppProps) {
+  const appState = useAppState()
+
   return (
-    <ThemeProvider theme={ theme }>
+    <AppStateProvider initialAppState={ appState }>
       <Styles.CustomProperties />
       <Styles.Elements />
       <Component { ...pageProps } />
-    </ThemeProvider>
+    </AppStateProvider>
   )
 }

styles/app_theme.ts

@@ -0,0 +1,46 @@
+export interface AppTheme {
+  colors: {
+    primary: string
+  }
+  sizes: {
+    font: {
+      XS: number
+      SM: number
+      MD: number
+      LG: number
+      XL: number
+    }
+    width: {
+      CONTENT: number
+    }
+  }
+}
+
+export const lightTheme: AppTheme = {
+  colors: {
+    primary: 'skyblue'
+  },
+  sizes: {
+    font: {
+      XS: 12,
+      SM: 14,
+      MD: 16,
+      LG: 18,
+      XL: 20
+    },
+    width: {
+      CONTENT: 1000
+    }
+  }
+} as const
+
+export const darkTheme: AppTheme = {
+  ...lightTheme,
+  colors: {
+    primary: 'pink'
+  }
+} as const
+
+declare module 'styled-components' {
+  interface DefaultTheme extends AppTheme {}
+}

types/styled.d.ts

@@ -1,13 +1,2 @@
-import 'styled-components'
-import { fiboMap } from '@/styles/abstractions/funcs'
-
-declare module 'styled-components' {
-  export interface DefaultTheme {
-    colors: {
-      primary: string
-    }
-  }
-}
-
 export type TFiboSizeName = 'xl6'|'xl5'|'xl4'|'xl3'|'xl2'|'xl'|'lg'|'md'|'sm'|'xs'|'xs2'|'xs3'|'xs4'|'xs5'|'xs6'
 export type TFiboUnit = 'px'|'rem'|'alpha'