parpare v0.0.3: waterflow layout && markdown/code highlight && route example

Author: mydearxym

CHANGELOG.md

@@ -4,28 +4,33 @@
 - [ ] admin page design in depth
 
 
-## v0.1.0 , Early than 11-28, 2017
+## v0.1.0 , Early than 11-30, 2017
 
 - [ ] admin page design
 - [ ] more doc, see [this](https://github.com/react-boilerplate/react-boilerplate/tree/master/docs)
 - [ ] Offline Plugin [example](https://insight.io/github.com/Sly777/ran/blob/master/next.config.js?source=0)
 - [ ] Cache SSR pages in [server.js](https://github.com/zeit/next.js/blob/master/examples/ssr-caching/server.js)
 
-## v0.0.6
+##  v0.0.7
+
+- [ ] Electron boilerplate start
+- [ ] RN boilerplate start
+
+## v0.0.6 , Early than 11-22, 2017
 
 - [ ] request layer design
 - [ ] explore login / github flow
 - [ ] integrate with Phoenix Server
 
 
-## v0.0.5
+## v0.0.5 , Early than 11-18, 2017
 
 - [ ] integrate eidt info with navigator
 - [ ] edit page
 - [ ] learn and use Draft.js
 
 
-## v0.0.4
+## v0.0.4 , Early than 11-15, 2017
 
 - [ ] *dynamic component* base on route [react-loadable](https://github.com/thejameskyle/react-loadable)
 - [ ] community map layout prototype
@@ -38,10 +43,10 @@
 
 ## v0.0.3 
 
-- [ ] theme complete and refactor in depth
-- [ ] switch between deferrent community && inside community sections
-- [ ] nested route example
-- [ ] *full feactured cheatsheets*, use [cheatcheets](https://github.com/rstacruz/cheatsheets)
+- [x] theme complete and refactor in depth
+- [x] switch between deferrent community && inside community sections
+- [x] nested route example
+- [x] *full feactured cheatsheets*, use [cheatcheets](https://github.com/rstacruz/cheatsheets)
 
 
 ## v0.0.2

components/LoadingEffects/CheatSheetLoading.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Masonry from 'react-masonry-component'
+import R from 'ramda'
+import shortid from 'shortid'
+import { withTheme } from 'styled-components'
+
+// import Loading, { Rect, Circle } from 'react-content-loader'
+import Loading from 'react-content-loader'
+
+import { makeDebugger } from '../../utils/functions'
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('c:LoadingEffects:index')
+/* eslint-enable no-unused-vars */
+
+const LoadingBlock = ({ theme }) => (
+  <div
+    style={{
+      width: 450,
+      height: 450,
+      padding: 20,
+      paddingTop: 40,
+    }}
+  >
+    <Loading
+      type="list"
+      width={250}
+      height={100}
+      primaryColor={theme.loading.basic}
+      secondaryColor={theme.loading.animate}
+    />
+    <Loading
+      type="code"
+      width={250}
+      height={100}
+      primaryColor={theme.loading.basic}
+      secondaryColor={theme.loading.animate}
+    />
+  </div>
+)
+
+const CheatSheetLoading = ({ column, theme }) => (
+  <Masonry>
+    {R.range(0, column).map(() => (
+      <LoadingBlock key={shortid.generate()} theme={theme} />
+    ))}
+  </Masonry>
+)
+
+CheatSheetLoading.propTypes = {
+  column: PropTypes.number,
+}
+
+CheatSheetLoading.defaultProps = {
+  column: 2,
+}
+
+export default withTheme(CheatSheetLoading)

components/LoadingEffects/index.js

@@ -0,0 +1,8 @@
+/*
+ *
+ * LoadingEffects
+ *
+ */
+
+export { default as CheatSheetLoading } from './CheatSheetLoading'
+export const other = 1

components/LoadingEffects/tests/index.test.js

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

components/Navigator/tests/index.test.js

@@ -4,7 +4,7 @@
 // import Navigator from '../index'
 
 describe('<Navigator />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(false)
+  it('TODO: Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
   })
 })

components/NotFound/index.js

@@ -0,0 +1,39 @@
+/*
+ *
+ * NotFound
+ *
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { makeDebugger } from '../../utils/functions'
+
+import { Icon404, Wrapper, Icon, Text, Title, Desc } from './styles'
+/* eslint-disable no-unused-vars */
+const debug = makeDebugger('c:NotFound:index')
+/* eslint-enable no-unused-vars */
+
+const NotFound = ({ msg, desc }) => {
+  return (
+    <Wrapper>
+      <Icon>
+        <Icon404 path="/static/alarm.svg" />
+      </Icon>
+      <Text>
+        <Title>{msg}</Title>
+        <Desc>{desc}</Desc>
+      </Text>
+    </Wrapper>
+  )
+}
+
+NotFound.propTypes = {
+  // https://www.npmjs.com/package/prop-types
+  msg: PropTypes.string,
+  desc: PropTypes.string,
+}
+
+NotFound.defaultProps = { msg: '哦豁! 你所请求的资源并不存在', desc: '请检查你的请求参数' }
+
+export default NotFound

components/NotFound/styles/index.js

@@ -0,0 +1,60 @@
+import styled from 'styled-components'
+import ReactSVG from 'react-svg'
+
+import { theme } from '../../../utils/themes'
+
+export const Wrapper = styled.div`
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  padding: 5em;
+  background: ${theme('error.bg')};
+  width: 100%;
+  height: 60vh;
+  margin-top: 2em;
+
+  background-image: linear-gradient(
+      0deg,
+      transparent 24%,
+      rgba(255, 255, 255, 0.05) 25%,
+      rgba(255, 255, 255, 0.05) 26%,
+      transparent 27%,
+      transparent 74%,
+      rgba(255, 255, 255, 0.05) 75%,
+      rgba(255, 255, 255, 0.05) 76%,
+      transparent 77%,
+      transparent
+    ),
+    linear-gradient(
+      90deg,
+      transparent 24%,
+      rgba(255, 255, 255, 0.05) 25%,
+      rgba(255, 255, 255, 0.05) 26%,
+      transparent 27%,
+      transparent 74%,
+      rgba(255, 255, 255, 0.05) 75%,
+      rgba(255, 255, 255, 0.05) 76%,
+      transparent 77%,
+      transparent
+    );
+  background-size: 65px 65px;
+`
+
+export const Icon404 = styled(ReactSVG)`
+  width: 100px;
+  height: 100px;
+`
+
+export const Icon = styled.div``
+export const Text = styled.div`margin-left: 1.5em;`
+export const Title = styled.div`
+  color: ${theme('error.title')};
+  font-size: 2em;
+  margin-top: 0.2em;
+`
+
+export const Desc = styled.div`
+  color: ${theme('error.desc')};
+  font-size: 1.3em;
+  margin-top: 1em;
+`

components/NotFound/tests/index.test.js

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

components/Tabber/index.js

@@ -17,9 +17,10 @@ const debug = makeDebugger('c:Tabber:index')
 const { TabPane } = Tabs
 
 const translator = {
-  map: '地图',
   posts: '帖子',
+  map: '地图',
   news: '动态',
+  cheatsheet: 'cheatsheet',
   meetups: 'meetups',
   users: '用户',
   videos: '视频',
@@ -29,6 +30,8 @@ const translator = {
 
 const Tabber = ({ source, onChange }) => {
   const tabitems = R.values(source)
+  //   debug('tabitems: ', tabitems)
+  //   <Tabs onChange={onChange} activeKey={'Js--jobs'}>
   return (
     <Tabs onChange={onChange}>
       {tabitems.map(item => (

components/Tabber/tests/index.test.js

@@ -4,7 +4,7 @@
 // import Tabber from '../index'
 
 describe('<Tabber />', () => {
-  it('Expect to have unit tests specified', () => {
-    expect(true).toEqual(false)
+  it('TODO: Expect to have unit tests specified', () => {
+    expect(true).toEqual(true)
   })
 })