add panel(without theme)

Author: mydearxym

README.md

@@ -37,10 +37,10 @@
   [查询客户端 franchise](https://github.com/HVF/franchise)
 
 ## packages
+   [markjs](https://markjs.io/)
    [markdown-it](https://markdown-it.github.io/)
    [Autolinker](https://github.com/gregjacobs/Autolinker.js)
 
-
 ## issues
   next.config.js 如果导出不存在的页面可能会使 build 过程出现奇怪的错误, 如
   polished 报错. 只导出需要的页面
@@ -61,7 +61,8 @@
 
 - [ ] phoenix [新文档地址](https://github.com/phoenixframework/phoenix/tree/master/guides/docs)
 - [ ] 使用 Github Rest/GraphQl api 摸索数据层方案
-- [ ] Search panel && login panel
+- [ ] Search panel && login panel ----> 或许应该叫 UnverisalPanel ? --> 可以呼出
+  debug 设置等等
 - [ ] [主页弄给](https://github.com/Sly777/ran)
 - [ ] add export config docs [see this](https://zhuanlan.zhihu.com/p/27847307)
 - [ ] test --> tests

components/A/index.js

@@ -10,10 +10,13 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
 export const StyledA = styled.a`
-  text-decoration: underline;
+  text-decoration: none;
   font-weight: bolder;
   color: ${props => props.theme.link};
   transition: color 0.3s;
+  &:hover {
+    text-decoration: underline;
+  }
 `
 
 function A(props) {

containers/Body/GithubRestExample.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+// import lang from './lang'
+
+import UniversePanel from '../UniversePanel'
+import { HorizontalCenter } from '../../components/BaseStyled'
+
+const Home = () => {
+  return (
+    <HorizontalCenter>
+      <div>Huck</div>
+      <UniversePanel />
+    </HorizontalCenter>
+  )
+}
+
+export default Home

containers/Body/index.js

@@ -18,14 +18,14 @@ import Theme from './Theme'
 import Home from './Home'
 import Feature from './Feature'
 import I18n from './I18n'
-import { HorizontalCenter } from '../../components/BaseStyled'
+import GithubRestExample from './GithubRestExample'
 
 const debug = makeDebugger('C:Body')
 
 const IntroPage = props => {
   const { route } = props
-  console.log('route: ', route)
-  console.log('props.body.theme --> : ', props.body.themeName)
+  // console.log('route: ', route)
+  // console.log('props.body.theme --> : ', props.body.themeName)
 
   switch (route.query.name) {
     case 'index':
@@ -37,7 +37,7 @@ const IntroPage = props => {
     case 'i18n':
       return <I18n />
     case 'example':
-      return <HorizontalCenter>example</HorizontalCenter>
+      return <GithubRestExample />
     default:
       return <Home />
   }

containers/UniversePanel/Modal.js

@@ -0,0 +1,60 @@
+import styled from 'styled-components'
+
+// center css see: https://stackoverflow.com/questions/1776915/how-to-center-absolutely-positioned-element-in-div
+// flex-grow example: http://zhoon.github.io/css3/2014/08/23/flex.html
+export const PanelContainer = styled.div`
+  position: absolute;
+  top: 20vh;
+  left: 50%;
+`
+
+export const Wraper = styled.div`
+  position: relative;
+  left: -50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`
+
+export const InfoBar = styled.div`
+  border: 1px solid white;
+  box-shadow: 0 12px 48px 0 rgba(0, 0, 0, 0.4);
+  border: 1px solid #014354;
+  width: 50vw;
+  max-width: 600px;
+  height: 70px;
+  background: #001b21;
+  color: white;
+  display: flex;
+  flex-direction: row;
+`
+
+export const AddOn = styled.div`
+  transform: rotate(-45deg);
+  font-size: 5vh;
+  margin-left: 15px;
+  color: #365760;
+  margin-top: 5px;
+  margin-top: 3px;
+  width: 20px;
+`
+
+export const InputBar = styled.input`
+  caret-color: #365760; /*cursor color*/
+  flex-grow: 1;
+  font-family: '.SFNSText-Light', 'SF UI Text', 'Helvetica Neue', 'Arial',
+    'Lucida Grande', 'Segoe UI', Noto Sans, sans-serif;
+  height: 100%;
+  width: auto;
+  outline: none;
+  font-weight: 200;
+  color: #365760;
+  font-size: 24px;
+  line-height: 70px;
+  max-height: none;
+  background-color: transparent;
+  padding: 0 20px 0px 20px;
+  border: 0;
+  border-radius: 0;
+  transition: all 400ms ease;
+`

containers/UniversePanel/index.js

@@ -0,0 +1,67 @@
+/*
+*
+* UniversePanel
+*
+*/
+
+import React from 'react'
+import { inject, observer } from 'mobx-react'
+
+// import Link from 'next/link'
+// import styled from 'styled-components'
+
+import { makeDebugger } from '../../utils/debug'
+import * as logic from './logic'
+
+import { PanelContainer, InfoBar, Wraper, InputBar, AddOn } from './Modal'
+
+const debug = makeDebugger('C:UniversePanel')
+
+const SearchEditor = () => (
+  <InfoBar>
+    <AddOn>&#9906;</AddOn>
+    <InputBar
+      spellCheck={false}
+      autoCapitalize={false}
+      autoCorrect="off"
+      autoComplete="off"
+    />
+  </InfoBar>
+)
+
+const selector = ({ store }) => ({
+  store: store.sidebar,
+})
+
+class UniversePanelContainer extends React.Component {
+  componentDidMount() {
+    debug('mount')
+    logic.init(this.props.store)
+  }
+
+  render() {
+    /*
+       <PanelContainer>
+         <Wraper>
+           <InfoBar>
+             <SearchEditor ... />
+           </InfoBar>
+
+         </Wraper>
+       </PanelContainer>
+
+
+     */
+
+    return (
+      <PanelContainer>
+        <Wraper>
+          <SearchEditor />
+          <InfoBar>UniversePanel container!</InfoBar>
+        </Wraper>
+      </PanelContainer>
+    )
+  }
+}
+
+export default inject(selector)(observer(UniversePanelContainer))

containers/UniversePanel/lang.js

@@ -0,0 +1,13 @@
+/*
+ * UniversePanel Langs
+ *
+ * This contains all the text for the UniversePanel component.
+ */
+import { defineMessages } from 'react-intl'
+
+export default defineMessages({
+  header: {
+    id: 'containers.UniversePanel.header',
+    defaultMessage: 'This is the UniversePanel component !',
+  },
+})

containers/UniversePanel/logic.js

@@ -0,0 +1,14 @@
+import { makeDebugger } from '../../utils/debug'
+
+const debug = makeDebugger('L:UniversePanel')
+
+let store = null
+
+export function otherLogic() {
+  return 'otherLogic'
+}
+
+export function init(selectedStore) {
+  debug('store', store)
+  store = selectedStore
+}

containers/UniversePanel/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react'
+// import { shallow } from 'enzyme'
+
+// import UniversePanel from '../index'
+
+describe('<UniversePanel />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false)
+  })
+})

utils/scripts/generators/container/class.js.hbs

@@ -26,7 +26,7 @@ const selector = ({ store }) => ({
 
 class {{ properCase name }}Container extends React.Component {
   componentDidMount() {
-    debug('mount)
+    debug('mount')
     logic.init(this.props.store)
   }