Added code viewer sidebar.

sebas5384 · Apr 4, 2018 · 3fdccbc · 3fdccbc
1 parent f122f5d
commit 3fdccbc
Show file tree

Hide file tree

Showing 11 changed files with 204 additions and 8 deletions.
diff --git a/src/App.js b/src/App.js
@@ -6,6 +6,7 @@ import ReactCursorPosition from 'react-cursor-position'
 import { withEvents } from 'react-compose-events'
 import isHotKey from 'is-hotkey'
 
+import SidebarContainer from './modules/sidebar/containers/SidebarContainer'
 import Editor from './modules/editor/containers/Editor'
 import NodeEditor from './modules/editor/containers/NodeEditor'
 import {
@@ -55,6 +56,7 @@ const App = ({ handleAddNode, handleAddEdge, showAdd, showDelete, handleDeleteNo
     <PainelNavigator>
       <NodeEditor />
     </PainelNavigator>
+    <SidebarContainer />
     <ReactCursorPosition mapChildProps={ ({ position }) => ({ cursorPosition: position })}>
       <Editor />
     </ReactCursorPosition>
@@ -63,7 +65,7 @@ const App = ({ handleAddNode, handleAddEdge, showAdd, showDelete, handleDeleteNo
 
 const handleAddNode = ({ dispatch, stage }) => event => {
   const name = prompt("What's the name of this new Type?")
-  if (name.length < 1) return
+  if (!name || name.length < 1) return
   const pos = normalizePosWithStage({ stage, pos: { x: 150, y: 150 } })
   const newNode = normalizeNodeName({ name, pos, type: 'model' })
   dispatch(addNode(newNode))

diff --git a/src/createStore.js b/src/createStore.js
@@ -2,6 +2,7 @@ import boot from 'redux-boot'
 import { composeWithDevTools } from 'redux-devtools-extension'
 
 import editorModule from './modules/editor/store'
+import sidebarModule from './modules/sidebar/store'
 
 // DevTools
 const devToolsModule = {
@@ -10,6 +11,7 @@ const devToolsModule = {
 
 const modules = [
   editorModule,
+  sidebarModule,
   devToolsModule,
 ]
 

diff --git a/src/modules/editor/__mock__/initialState.js b/src/modules/editor/__mock__/initialState.js
@@ -492,4 +492,4 @@ const initialStateSimple = {
   stage: { pos: { x: -1, y: 0 } }
 }
 
-export default initialStateSimple;
+export default initialStateComplex;
diff --git a/src/modules/editor/containers/NodeEditor.js b/src/modules/editor/containers/NodeEditor.js
@@ -61,7 +61,7 @@ const FieldNode = styled.p`
 
 const FieldName = styled.span`
   color: #ec63c5;
-  font-weight: 600;
+  font-weight: 500;
 `
 
 const renderNode = props => {

diff --git a/src/modules/editor/store.js b/src/modules/editor/store.js
@@ -410,12 +410,12 @@ const enhancer = createStore => (reducer, initialState, enhancer) => {
   const store = createStore(reducer, initialState, enhancer)
 
   // Updates local storage.
-  // store.subscribe(() => {
-  //   const state = store.getState()
+  store.subscribe(() => {
+    const state = store.getState()
 
-  //   lscache.set('nodes', state.nodes)
-  //   lscache.set('edges', state.edges)
-  // })
+    lscache.set('nodes', state.nodes)
+    lscache.set('edges', state.edges)
+  })
 
   return store
 }

diff --git a/src/modules/sidebar/components/Card.js b/src/modules/sidebar/components/Card.js
@@ -0,0 +1,13 @@
+import styled from "styled-components"
+
+const Card = styled.section`
+  border-radius: 4px;
+  min-width: 19em;
+  max-width: 60em;
+  display: flex;
+  margin-bottom: 0.7em;
+  flex-direction: column;
+  overflow: hidden;
+`;
+
+export default Card
diff --git a/src/modules/sidebar/components/Sidebar.js b/src/modules/sidebar/components/Sidebar.js
@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+
+const SideBar = styled.section`
+  display: block;
+  width: auto;
+  height: 90%;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1;
+  background: rgba(38, 25, 58, 0.97);
+  ${({ isOpen }) => `box-shadow: 0px 8px 14px 0px rgba(0, 0, 0, 0.42);`};
+`;
+
+export default SideBar
diff --git a/src/modules/sidebar/containers/CodeContainer.js b/src/modules/sidebar/containers/CodeContainer.js
@@ -0,0 +1,51 @@
+import React, { Fragment } from 'react'
+import Sidebar from '../components/Sidebar'
+import Card from '../components/Card'
+import styled from 'styled-components'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { sort, ascend, prop } from 'ramda'
+
+const Code = styled(Card)`
+  padding: 1em 1em 20em;
+  cursor: text;
+`
+
+const FieldNode = styled.p`
+  line-height: 1.8em;
+  margin: 0;
+  font-size: 1em;
+  font-family: Fira Code, "Consolas", "Inconsolata", "Droid Sans Mono", "Monaco", monospace;
+  color: #ddd;
+  font-weight: 100;
+`
+
+const FieldName = styled.span`
+  color: #ec63c5;
+  font-weight: 500;
+`
+
+const CodeContainer = ({ nodes }) => (
+  <Code>
+    { nodes.map(node => (
+      <Fragment>
+        <FieldNode>{ 'type ' }<FieldName>{ node.name }</FieldName>{ ' {' }</FieldNode>
+        { node.fields.map(({ name, type }) => (
+          <FieldNode>&nbsp;&nbsp;{ name + ':' }&nbsp;<FieldName>{ type }</FieldName></FieldNode>
+        )) }
+        <FieldNode>{ '}' }</FieldNode>
+        <br />
+      </Fragment>
+    )) }
+  </Code>
+)
+
+const mapStateToProps = ({ nodes, sidebar }) => {
+  const modelNodes = nodes.filter(({ type }) => type === 'model')
+  const sortedNodes = sort(ascend(prop('name')), modelNodes)
+  return { nodes: sortedNodes, sidebar };
+}
+
+export default compose(
+  connect(mapStateToProps)
+)(CodeContainer)
diff --git a/src/modules/sidebar/containers/SidebarContainer.js b/src/modules/sidebar/containers/SidebarContainer.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import Sidebar from '../components/Sidebar'
+import CodeContainer from './CodeContainer'
+import TogglerContainer from './TogglerContainer'
+import styled from 'styled-components'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+
+const Wrapper = styled.section`
+  overflow: auto;
+  padding: 0.9em 1.3em;
+  height: 100%;
+  box-sizing: border-box;
+  transition: opacity 0.3s, padding-right 0.3s, padding-left 0.3s cubic-bezier(0.86, 0, 0.07, 1);
+  ${({ isOpen }) => !isOpen && `
+    width: 0;
+    padding-right: 0;
+    padding-left: 0;
+    opacity: 0;
+  `};
+`;
+
+const SidebarContainer = ({ isOpen }) => (
+  <Sidebar isOpen={ isOpen }>
+    <TogglerContainer />
+    <Wrapper isOpen={ isOpen }>
+      <CodeContainer />
+    </Wrapper>
+  </Sidebar>
+)
+
+const mapStateToProps = ({ sidebar: { isOpen } }) => ({
+  isOpen
+})
+
+export default compose(
+  connect(mapStateToProps),
+)(SidebarContainer)
diff --git a/src/modules/sidebar/containers/TogglerContainer.js b/src/modules/sidebar/containers/TogglerContainer.js
@@ -0,0 +1,53 @@
+import React from 'react'
+import styled from 'styled-components'
+import { compose, withHandlers } from 'recompose'
+import { connect } from 'react-redux'
+
+import { toggleSidebar } from '../store'
+
+const Toggler = styled.button`
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  display: block;
+  background: white;
+  top: 10px;
+  left: -50px;
+  color: #333;
+  border-radius: 0 0 0 18px;
+  border: 4px solid rgba(38, 25, 58, 0.97);
+  border-right: 0;
+  font-weight: 700;
+  font-size: 1em;
+  cursor: pointer;
+  opacity: 0.6;
+  box-shadow: 0px 8px 14px 0px rgba(0, 0, 0, 0.42);
+  &:focus {
+    outline: 0;
+  }
+  &:hover {
+    opacity: 1;
+    color: #ec63c5;
+    border-color: #ec63c5;
+  }
+  ${({ isOpen }) => isOpen && `
+    opacity: 1;
+  `}
+`;
+
+const TogglerContainer = props => (
+  <Toggler { ...props }>{ props.isOpen ? 'X' : '{ }' }</Toggler>
+)
+
+const mapStateToProps = ({ sidebar: { isOpen } }) => ({
+  isOpen
+})
+
+export default compose(
+  connect(mapStateToProps),
+  withHandlers({
+    onClick: ({ dispatch }) => () => {
+      dispatch(toggleSidebar())
+    }
+  })
+)(TogglerContainer)
diff --git a/src/modules/sidebar/store.js b/src/modules/sidebar/store.js
@@ -0,0 +1,22 @@
+import { BOOT } from 'redux-boot'
+import { createAction } from 'redux-actions'
+import { over, lensPath, complement } from 'ramda'
+
+export const toggleSidebar = createAction('sidebar/TOGGLE')
+
+const getInitialState = state => ({
+  ...state,
+  sidebar: {
+    isOpen: false
+  }
+})
+
+const reducer = {
+  [BOOT]: (state, action) => getInitialState(state),
+  [toggleSidebar]: (state, action) => over(
+    lensPath(['sidebar', 'isOpen']),
+    value => !value
+  )(state)
+}
+
+export default { reducer }