From 2ca5e21b7a805aa9481f4061a2a846b77c2cb5aa Mon Sep 17 00:00:00 2001 From: Pedro Nauck Date: Sat, 24 Mar 2018 13:28:21 -0300 Subject: [PATCH] feat(docz-theme-default): improve theme styles --- packages/playgrodd-theme-default/.babelrc | 3 + packages/playgrodd-theme-default/package.json | 10 ++- .../src/components/List.jsx | 44 +++++++++++ .../src/components/List.tsx | 18 ----- .../src/components/Main.jsx | 6 ++ .../src/components/View.jsx | 44 +++++++++++ .../src/components/View.tsx | 22 ------ .../playgrodd-theme-default/src/index.jsx | 25 ++++++ .../playgrodd-theme-default/src/index.tsx | 13 ---- .../playgrodd-theme-default/src/styles.js | 77 +++++++++++++++++++ .../playgrodd-theme-default/tsconfig.json | 12 --- 11 files changed, 205 insertions(+), 69 deletions(-) create mode 100644 packages/playgrodd-theme-default/src/components/List.jsx delete mode 100644 packages/playgrodd-theme-default/src/components/List.tsx create mode 100644 packages/playgrodd-theme-default/src/components/Main.jsx create mode 100644 packages/playgrodd-theme-default/src/components/View.jsx delete mode 100644 packages/playgrodd-theme-default/src/components/View.tsx create mode 100644 packages/playgrodd-theme-default/src/index.jsx delete mode 100644 packages/playgrodd-theme-default/src/index.tsx create mode 100644 packages/playgrodd-theme-default/src/styles.js delete mode 100644 packages/playgrodd-theme-default/tsconfig.json diff --git a/packages/playgrodd-theme-default/.babelrc b/packages/playgrodd-theme-default/.babelrc index dc50a7fb5..fcad8380e 100644 --- a/packages/playgrodd-theme-default/.babelrc +++ b/packages/playgrodd-theme-default/.babelrc @@ -2,5 +2,8 @@ "presets": [ ["@babel/preset-env", { "modules": false }], "@babel/preset-react" + ], + "plugins": [ + "emotion" ] } diff --git a/packages/playgrodd-theme-default/package.json b/packages/playgrodd-theme-default/package.json index 1d964b056..2533a0175 100644 --- a/packages/playgrodd-theme-default/package.json +++ b/packages/playgrodd-theme-default/package.json @@ -5,16 +5,17 @@ "main": "dist/index.js", "umd:main": "dist/index.umd.js", "module": "dist/index.m.js", - "source": "src/index.tsx", + "source": "src/index.jsx", "scripts": { "dev": "libundler watch", - "build": "libundler build -s", - "build:prod": "yarn run build -p --hash --gzip" + "build": "libundler build --sourcemap --compress" }, "dependencies": { + "emotion-normalize": "^7.0.1", "playgrodd": "^0.0.1", "react": "^16.2.0", "react-dom": "^16.2.0", + "react-helmet": "^5.2.0", "react-router-dom": "^4.2.2" }, "peerDependencies": { @@ -23,6 +24,7 @@ "devDependencies": { "@babel/core": "7.0.0-beta.42", "@babel/preset-env": "^7.0.0-beta.42", - "@babel/preset-react": "^7.0.0-beta.42" + "@babel/preset-react": "^7.0.0-beta.42", + "babel-plugin-emotion": "^9.1.0" } } diff --git a/packages/playgrodd-theme-default/src/components/List.jsx b/packages/playgrodd-theme-default/src/components/List.jsx new file mode 100644 index 000000000..9750963db --- /dev/null +++ b/packages/playgrodd-theme-default/src/components/List.jsx @@ -0,0 +1,44 @@ +import React from 'react' +import { Link as BaseLink } from 'react-router-dom' +import styled from 'react-emotion' + +import { Docs } from 'playgrodd' + +const BORDER_COLOR = '#ced6e0' +const LINK_COLOR = '#2f3542' + +const Sidebar = styled('ul')` + list-style: none; + padding: 0; + margin: 0; + width: 200px; + height: 100vh; + border-right: 1px solid ${BORDER_COLOR}; +` + +const Link = styled(BaseLink)` + display: block; + padding: 10px 20px; + border-bottom: 1px solid ${BORDER_COLOR}; + font-size: 14px; + font-weight: 700; + + &, + &:visited { + color: ${LINK_COLOR}; + } +` + +export const List = () => ( + + {docs => ( + + {docs.map(doc => ( +
  • + {doc.name} +
    • + ))} +     + )} +     +) diff --git a/packages/playgrodd-theme-default/src/components/List.tsx b/packages/playgrodd-theme-default/src/components/List.tsx deleted file mode 100644 index e0f9afc70..000000000 --- a/packages/playgrodd-theme-default/src/components/List.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' -import { Link } from 'react-router-dom' - -import { Docs } from 'playgrodd' - -export const List = () => ( - - {docs => ( - - )} - -) diff --git a/packages/playgrodd-theme-default/src/components/Main.jsx b/packages/playgrodd-theme-default/src/components/Main.jsx new file mode 100644 index 000000000..8457cf0a7 --- /dev/null +++ b/packages/playgrodd-theme-default/src/components/Main.jsx @@ -0,0 +1,6 @@ +import styled from 'react-emotion' + +export const Main = styled('div')` + display: flex; + height: 100vh; +` diff --git a/packages/playgrodd-theme-default/src/components/View.jsx b/packages/playgrodd-theme-default/src/components/View.jsx new file mode 100644 index 000000000..761f0ec38 --- /dev/null +++ b/packages/playgrodd-theme-default/src/components/View.jsx @@ -0,0 +1,44 @@ +import React, { Fragment } from 'react' +import styled from 'react-emotion' + +import { Preview } from 'playgrodd' + +const Container = styled('div')` + width: 960px; + max-width: 960px; + padding: 50px 20px; + margin: 0 auto; +` + +const Title = styled('h2')` + font-size: 48px; + font-weight: 400; + margin: 0; +` + +const Description = styled('p')` + margin: 0 0 20px; +` + +const Section = styled('div')` + margin-top: 50px; +` + +export const View = () => ( + + {({ id, name, docDescription, sections }) => ( + + {name} + {docDescription && {docDescription}} + {sections && + sections.length > 0 && + sections.map(section => ( +
    + {section.title &&

    {section.title}

    } +
    {section.render()}
    +
    + ))} +     + )} +     +) diff --git a/packages/playgrodd-theme-default/src/components/View.tsx b/packages/playgrodd-theme-default/src/components/View.tsx deleted file mode 100644 index d04f5d9b6..000000000 --- a/packages/playgrodd-theme-default/src/components/View.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React, { Fragment } from 'react' - -import { Preview } from 'playgrodd' - -export const View = () => ( - - {({ id, name, docDescription, sections }) => ( - -

    {name}

    - {docDescription &&

    {docDescription}

    } - {sections && - sections.length > 0 && - sections.map(section => ( - -

    {section.title}

    -
    {section.render()}
    -     - ))} -     - )} -     -) diff --git a/packages/playgrodd-theme-default/src/index.jsx b/packages/playgrodd-theme-default/src/index.jsx new file mode 100644 index 000000000..7469c5d52 --- /dev/null +++ b/packages/playgrodd-theme-default/src/index.jsx @@ -0,0 +1,25 @@ +import './styles' + +import React, { Fragment } from 'react' +import { createTheme } from 'playgrodd' +import { injectGlobal } from 'emotion' +import { Helmet } from 'react-helmet' + +import { List } from './components/List' +import { View } from './components/View' +import { Main } from './components/Main' + +export const Theme = createTheme(() => ( + + + + +
    + + +
    +     +)) diff --git a/packages/playgrodd-theme-default/src/index.tsx b/packages/playgrodd-theme-default/src/index.tsx deleted file mode 100644 index 66a969524..000000000 --- a/packages/playgrodd-theme-default/src/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React, { Fragment } from 'react' -import { createTheme } from 'playgrodd' - -import { List } from './components/List' -import { View } from './components/View' - -export const Theme = createTheme(() => ( - -

    Default theme

    - - -     -)) diff --git a/packages/playgrodd-theme-default/src/styles.js b/packages/playgrodd-theme-default/src/styles.js new file mode 100644 index 000000000..4edd8c86a --- /dev/null +++ b/packages/playgrodd-theme-default/src/styles.js @@ -0,0 +1,77 @@ +import { css, injectGlobal } from 'emotion' + +const BACKGROUND = '#white' +const TEXT_COLOR = '#2f3542' +const LINK_COLOR = '#5352ed' + +const selection = css` + background: ${LINK_COLOR}; + color: white; +` + +injectGlobal` + @import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700'); + + *, *:before, *:after { + box-sizing: border-box; + } + + ::-moz-selection { + ${selection} + } + ::selection { + ${selection} + } + + body { + font-family: 'Noto Sans', sans-serif; + font-size: 16px; + line-height: 1.5; + background: ${BACKGROUND}; + overflow-y: scroll; + overflow-x: hidden; + } + + body { + color: transparent; + } + + body > *, #root { + color: ${TEXT_COLOR}; + } + + html, body, #root { + height: 100vh; + min-height: 100vh; + } + + a, a:visited, a:active { + text-decoration: none; + color: ${LINK_COLOR}; + } + + a:hover { + color: ${LINK_COLOR}; + } + + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + input:-webkit-autofill:active { + transition: color 9999s ease-out, background-color 9999s ease-out; + transition-delay: 9999s; + } + + input:required, + input:invalid { + box-shadow: none; + } + + button:focus { + outline: none !important; + } + + select { + color: ${TEXT_COLOR}; + } +` diff --git a/packages/playgrodd-theme-default/tsconfig.json b/packages/playgrodd-theme-default/tsconfig.json deleted file mode 100644 index 285287b77..000000000 --- a/packages/playgrodd-theme-default/tsconfig.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "outDir": "dist/main", - "rootDir": "src", - "skipLibCheck": true, - "types": ["node"], - "typeRoots": ["node_modules/@types"] - }, - "include": ["src/**/*"], - "exclude": ["node_modules/**"] -}