feat: add theme light + dark 🎉

wilsson · Oct 5, 2019 · 0c46510 · 0c46510
1 parent 604b49d
commit 0c46510
Show file tree

Hide file tree

Showing 12 changed files with 128 additions and 80 deletions.
diff --git a/packages/papyrum-cli/src/components/Root.tsx b/packages/papyrum-cli/src/components/Root.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useState, Suspense } from 'react';
 import { hot } from 'react-hot-loader';
+import { ThemeProvider } from "styled-components";
 
 import {
   Sidebar,
@@ -10,7 +11,9 @@ import {
   DevZone,
   components,
   Shadow,
-  Addons
+  Addons,
+  lightTheme,
+  darkTheme
 } from '@papyrum/ui';
 
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
@@ -54,25 +57,33 @@ const NoMatch = () => <CenterWrapper>Not Found</CenterWrapper>
 export const Root = ({ db, imports }) => {
   const { pathname } = location;
   const componentsAsync = getAsyncComponents(imports);
-  const [ showMenu, setShowMenu ] = useState(false);
-  const [ routeActive, setRouteActive ] = useState(pathname);
-  const [ stateForComponent, setStateForComponent ] = useState<stateForComponentState>({});
-  const [ stateSelected , setStateSelected ] = useState('');
-  const [ activePanel, setActivePanel ] = useState('docs');
-  const [ code, setCode ] = useState('');
+  const [showMenu, setShowMenu] = useState(false);
+  const [routeActive, setRouteActive] = useState(pathname);
+  const [stateForComponent, setStateForComponent] = useState<stateForComponentState>({});
+  const [stateSelected, setStateSelected] = useState('');
+  const [activePanel, setActivePanel] = useState('docs');
+  const [code, setCode] = useState('');
 
   const getMetadata = (stateForComponent: stateForComponentState, stateSelected: string) => {
     const { pathname } = location;
     const selected = stateSelected || stateForComponent[pathname][0].name;
-    const [ state ] = stateForComponent[pathname].filter(({ name }) => name === selected);
+    const [state] = stateForComponent[pathname].filter(({ name }) => name === selected);
     return state;
   };
 
   const handleChangeCode = (selectedUseCase: string) => {
-    const code = getMetadata(stateForComponent, selectedUseCase).code; 
+    const code = getMetadata(stateForComponent, selectedUseCase).code;
     setCode(code);
   };
 
+  const stored = window.localStorage.getItem("isDark");
+  const [ isDark, setDarkTheme ] = useState(stored === "true");
+
+  const handleToggleTheme = () => {
+    setDarkTheme(!isDark);
+    window.localStorage.setItem('isDark', ''+!isDark);
+  }
+
   const props = {
     db: db,
     setRouteActive,
@@ -83,23 +94,25 @@ export const Root = ({ db, imports }) => {
     setStateForComponent,
     setActivePanel
   };
+
   return (
     <Provider {...props} >
       <GlobalStyle />
       <BrowserRouter>
-        <Wrapper>
-          <Shadow showMenu={showMenu} onClick={() => setShowMenu(!showMenu) }/>
-          <Sidebar entries={db.entries} showMenu={showMenu} />
-          <ContentWrapper showMenu={showMenu}>
-            <Toolbar
-              listStates={stateForComponent[pathname] ? stateForComponent[pathname].map(({ name }) => name) : []}
-              setStateSelected={setStateSelected}
-              setActivePanel={setActivePanel}
-              activePanel={activePanel}
-              handleChangeCode={handleChangeCode}
-            />
-            <ProviderWrapper>
-              {activePanel === 'docs' && (
+        <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
+          <Wrapper>
+            <Shadow showMenu={showMenu} onClick={() => setShowMenu(!showMenu)} />
+            <Sidebar entries={db.entries} showMenu={showMenu} isDark={isDark} toggleTheme={handleToggleTheme} />
+            <ContentWrapper showMenu={showMenu}>
+              <Toolbar
+                listStates={stateForComponent[pathname] ? stateForComponent[pathname].map(({ name }) => name) : []}
+                setStateSelected={setStateSelected}
+                setActivePanel={setActivePanel}
+                activePanel={activePanel}
+                handleChangeCode={handleChangeCode}
+              />
+              <ProviderWrapper>
+                {activePanel === 'docs' && (
                   <MDXProvider components={providerComponents}>
                     <Suspense fallback={<CenterWrapper>Loading...</CenterWrapper>}>
                       <Switch>
@@ -115,32 +128,33 @@ export const Root = ({ db, imports }) => {
                       </Switch>
                     </Suspense>
                   </MDXProvider>
-              )}
-              {(activePanel === 'development' && stateForComponent[pathname]) && (
-                <div style={{ padding: 15 }}>
-                  {stateForComponent[pathname] && (
-                    <DevZone
-                      code={code || getMetadata(stateForComponent, stateSelected).code}
-                      scope={getMetadata(stateForComponent, stateSelected).scope}
-                    />
-                  )}
-                </div>
-              )}
+                )}
+                {(activePanel === 'development' && stateForComponent[pathname]) && (
+                  <div style={{ padding: 15 }}>
+                    {stateForComponent[pathname] && (
+                      <DevZone
+                        code={code || getMetadata(stateForComponent, stateSelected).code}
+                        scope={getMetadata(stateForComponent, stateSelected).scope}
+                      />
+                    )}
+                  </div>
+                )}
 
-              {(activePanel === 'development' && !stateForComponent[pathname]) && (
-                <div style={{ padding: 15 }}>
-                  To work in this area you need to use the Playground component and give it a name as property.
-                </div>
+                {(activePanel === 'development' && !stateForComponent[pathname]) && (
+                  <div style={{ padding: 15 }}>
+                    To work in this area you need to use the Playground component and give it a name as property.
+                  </div>
+                )}
+              </ProviderWrapper>
+              {(activePanel === 'development' && stateForComponent[pathname]) && (
+                <Addons
+                  code={code || getMetadata(stateForComponent, stateSelected).code}
+                  setCode={setCode}
+                />
               )}
-            </ProviderWrapper>
-            {(activePanel === 'development' && stateForComponent[pathname]) && (
-              <Addons
-                code={code || getMetadata(stateForComponent, stateSelected).code}
-                setCode={setCode}
-              />
-            )}
-          </ContentWrapper>
-        </Wrapper>
+            </ContentWrapper>
+          </Wrapper>
+        </ThemeProvider>
       </BrowserRouter>
     </Provider>
   );

diff --git a/packages/papyrum-cli/src/components/styled.tsx b/packages/papyrum-cli/src/components/styled.tsx
@@ -36,14 +36,16 @@ export const ProviderWrapper = styled.div`
 export const ContentWrapper = styled.div`
   flex: 1;
   position: relative;
-  transition: transform .3s ease;
+  transition: all .3s ease;
   @media (max-width: 1200px) {
     transform: translateX(-240px);
   }
   display: flex;
   flex-direction: column;
   height: 100vh;
   justify-content: space-between;
+  background-color: ${props => props.theme.colors.backgroundArea};
+  color: ${props => props.theme.colors.textArea};
 `;
 
 export const CenterWrapper = styled.div`

diff --git a/packages/papyrum-ui/src/components/H/styled.tsx b/packages/papyrum-ui/src/components/H/styled.tsx
@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components';
 
 const font = css`
-  color: #000000;
   margin: 40px 0 20px;
   font-family: "Nunito Sans";
   line-height: 100%;

diff --git a/packages/papyrum-ui/src/components/Menu/styled.ts b/packages/papyrum-ui/src/components/Menu/styled.ts
@@ -18,15 +18,15 @@ const Item = styled.li`
   padding-left: 24px;
   line-height: 32px;
   &:hover {
-    background-color: ${(props) => !props.active && '#E8E8E8'};
+    background-color: ${(props) => !props.active && 'rgba(0,0,0,0.1)'};
   }
   ${props => props.active && css`
     background-color: #00A8FF;
   `}
   a {
     text-decoration: none;
-    color: #5b5b5b;
     display: block;
+    color: ${props => props.theme.colors.textMenu};
     ${props => props.active && css`
       color: white;
     `}

diff --git a/packages/papyrum-ui/src/components/Search/styled.tsx b/packages/papyrum-ui/src/components/Search/styled.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const Input = styled.input`
   border: none;
   line-height: 28px;
-  background-color: #F9FAFB;
+  background-color: transparent;
   outline: none;
   color: #5b5b5b;
   font-size: 14px;
@@ -14,8 +14,9 @@ export const SearchWrapper = styled.div`
   margin-top: 20px;
   display: flex;
   align-items: center;
-  border-top: 1px solid #dbdbdb;
-  border-bottom: 1px solid #dbdbdb;
+  border-top: 1px solid ${props => props.theme.colors.borderMenu};
+  border-bottom: 1px solid ${props => props.theme.colors.borderMenu};
+  transition: all .3s ease;
   padding-left: 24px;
   svg {
     width: 15px;

diff --git a/packages/papyrum-ui/src/components/Sidebar/Sidebar.tsx b/packages/papyrum-ui/src/components/Sidebar/Sidebar.tsx
@@ -1,14 +1,13 @@
 import * as React from 'react';
-import { useState, useContext } from 'react';
+import { useState, useContext } from 'react';
 import { Search } from '../Search';
 import { Menu } from '../Menu';
-import { contextDB } from '../Provider';
-import { Sun } from 'react-feather';
-import Resizable  from 're-resizable';
+import { contextDB } from '../Provider';
+import { Moon, Sun } from 'react-feather';
+import Resizable from 're-resizable';
 
 import {
   Wrapper,
-  ByWrapper,
   MenuWrapper,
   Title,
   ButtonSun,
@@ -21,41 +20,43 @@ const useOrder = (menu) => {
   const inmenu = { ...menu };
   const { db } = useContext(contextDB as any);
   const menuOrder = [];
+
   db.config.menu && db.config.menu.map((item) => {
     const name = item.name || item;
     Object.keys(inmenu).map((key: any) => {
-      if(inmenu[key].name === name) {
+      if (inmenu[key].name === name) {
         menuOrder.push(inmenu[key]);
         delete inmenu[key];
       }
     });
-  })
-  return [ ...menuOrder, ...Object.values(inmenu) ];
+  });
+
+  return [...menuOrder, ...Object.values(inmenu)];
 };
 
-export const Sidebar = ({ entries, showMenu }) => {
+export const Sidebar = ({ entries, showMenu, isDark, toggleTheme }) => {
   const { db } = useContext(contextDB as any);
-  const [ query, setQuery ] = useState('');
+  const [query, setQuery] = useState('');
   const menu = useMenu({ query, entries });
   const menuOrder = useOrder(menu);
-  const [ width, setWidth ] = useState(240);
+  const [width, setWidth] = useState(240);
+
   const handleResizable = (e, direction, ref, d) => {
     setWidth(width + d.width);
   };
-  return(
+
+  return (
     <Wrapper showMenu={showMenu} >
       <Resizable
         minWidth={240}
         maxWidth={1000}
-        enable={{
-          right: true
-        }}
-        size= {{ width: width, height: '100vh' }}
+        enable={{ right: true }}
+        size={{ width: width, height: '100vh' }}
         onResizeStop={handleResizable}
       >
         <WrapperButtonSun>
-          <ButtonSun>
-            <Sun size={15} color="#5B5B5B"/>
+          <ButtonSun onClick={toggleTheme}>
+            {isDark ? <Sun size={15} /> : <Moon size={15} /> }
           </ButtonSun>
         </WrapperButtonSun>
         <Title>{db.config.title}</Title>

diff --git a/packages/papyrum-ui/src/components/Sidebar/styled.tsx b/packages/papyrum-ui/src/components/Sidebar/styled.tsx
@@ -1,11 +1,12 @@
 import styled, { css } from 'styled-components';
 
 export const Wrapper = styled.div`
-  background-color: #F9FAFB;
-  border-right: 1px solid #DBDBDB;
+  background-color: ${props => props.theme.colors.backgroundMenu};
+  border-right: 1px solid ${props => props.theme.colors.borderMenu};
+  color: ${props => props.theme.colors.textMenu};
   display: flex;
   flex-direction: column;
-  transition: transform .3s ease;
+  transition: all .3s ease;
   z-index: 200;
   @media (max-width: 1200px) {
     transform: translateX(-240px);
@@ -16,7 +17,7 @@ export const Wrapper = styled.div`
 `;
 
 export const ByWrapper = styled.div`
-  border-top: 1px solid #DBDBDB;
+  border-top: 1px solid ${props => props.theme.colors.borderMenu};
   text-align: center;
   font-weight: 700;
   font-size: 14px;
@@ -60,7 +61,6 @@ export const Title = styled.div`
   line-height: 33px;
   padding: 0 20px;
   overflow-wrap: break-word;
-  color: #5B5B5B;
 `;
 
 export const WrapperButtonSun = styled.div`
@@ -73,10 +73,13 @@ export const WrapperButtonSun = styled.div`
 export const ButtonSun = styled.div`
   width: 30px;
   height: 30px;
-  background-color: #EEEEEE;
+  background-color: ${props => props.theme.colors.backgroundButtonTheme};
   border-radius: 15px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  svg{
+    stroke: ${props => props.theme.colors.colorButtonTheme};
+  }
 `;
diff --git a/packages/papyrum-ui/src/components/Toolbar/styled.ts b/packages/papyrum-ui/src/components/Toolbar/styled.ts
@@ -36,8 +36,9 @@ export const Label = styled.div`
 export const TabWrapper = styled.div`
   height: 35px;
   min-height: 35px;
-  background-color: #F9FAFB;
-  border-bottom: 1px solid #DBDBDB;
+  background-color:  ${props => props.theme.colors.backgroundMenu};
+  border-bottom: 1px solid ${props => props.theme.colors.borderMenu};
+  transition: all .3s ease;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -51,7 +52,7 @@ export const RightWrapper = styled.div`
 export const TabItem = styled.div`
   font-size: 16px;
   font-weight: 700;
-  color: #5B5B5B;
+  color: ${props => props.theme.colors.textMenu};
   padding: 0 15px;
   cursor: pointer;
   ${(props) => props.active && css`

diff --git a/packages/papyrum-ui/src/index.ts b/packages/papyrum-ui/src/index.ts
@@ -20,6 +20,7 @@ export { Toolbar } from './components/Toolbar';
 export { Table, TableRow, TableTd, TableTh } from './components/Table';
 export { AStyled } from './components/A';
 export { Dropdown } from './components/Dropdown';
+export { light as lightTheme, dark as darkTheme  } from './themes';
 
 export const components = {
   Img,

diff --git a/packages/papyrum-ui/src/themes/dark.ts b/packages/papyrum-ui/src/themes/dark.ts
@@ -0,0 +1,11 @@
+export default {
+    colors: {
+        backgroundArea: "#303242",
+        backgroundMenu: "#21232A",
+        borderMenu: "#434652",
+        textArea: "#ECEFF4",
+        textMenu: "#CED4DE",
+        backgroundButtonTheme: "#333640",
+        colorButtonTheme: "#A4B300"
+    }
+}; 
diff --git a/packages/papyrum-ui/src/themes/index.ts b/packages/papyrum-ui/src/themes/index.ts
@@ -0,0 +1,4 @@
+import light from './light';
+import dark from './dark';
+
+export { light, dark };