Docs improvements

packages/docs/advance-features/Table/index.jsx → packages/docs/demo/Table/index.jsx

@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
-import Editor from 'nib-core';
-import TablePlugin from 'nib-table';
+import React, { useState } from "react";
+import Editor from "nib-core";
+import TablePlugin from "nib-table";
 
-import Code from '../../Code';
-import defaultValue from './sampleData';
+import Code from "../../Code";
+import defaultValue from "./sampleData";
 
 /**
- * @visibleName 1. Table
+ * @visibleName 16. Table
  */
 const Table = () => {
   const [content, setContent] = useState();
@@ -15,10 +15,10 @@ const Table = () => {
       <Editor
         licenseKey="c1ba076f-6793-45d4-a66d-02d4204b6297"
         config={{
-          plugins: { options: 'help' },
+          plugins: { options: "help" },
           toolbar: {
-            options: 'top',
-            top: { options: 'table help' },
+            options: "top",
+            top: { options: "table help" },
           },
         }}
         addons={[TablePlugin]}

styleguide.config.js

@@ -50,6 +50,7 @@ module.exports = {
         "packages/docs/demo/FullPage/index.jsx",
         "packages/docs/demo/ConvertFromHTML/index.jsx",
         "packages/docs/demo/ConvertToHTML/index.jsx",
+        "packages/docs/demo/Table/index.jsx",
       ],
     },
     {
@@ -58,7 +59,6 @@ module.exports = {
       sectionDepth: 1,
       content: "packages/docs/advance-features/Readme.md",
       components: [
-        "packages/docs/advance-features/Table/index.jsx",
         "packages/docs/advance-features/AdvanceImage/index.jsx",
         "packages/docs/advance-features/Video/index.jsx",
         "packages/docs/advance-features/SourceEdit/index.jsx",

styleguide/HeadingRenderer.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'clsx';
+import Styled from 'rsg-components/Styled';
+
+const styles = ({ color, fontFamily, fontSize }) => ({
+  heading: {
+    margin: 0,
+    color: color.base,
+    fontFamily: fontFamily.base,
+    fontWeight: 'normal',
+  },
+  heading1: {
+    fontSize: '36px',
+    margin: '16px 0',
+  },
+  heading2: {
+    fontSize: '36px',
+    marginTop: 16,
+  },
+  heading3: {
+    fontSize: fontSize.h3,
+  },
+  heading4: {
+    fontSize: fontSize.h4,
+  },
+  heading5: {
+    fontSize: fontSize.h5,
+    fontWeight: 'bold',
+  },
+  heading6: {
+    fontSize: fontSize.h6,
+    fontStyle: 'italic',
+  },
+});
+
+function HeadingRenderer({ classes, level, children, ...props }) {
+  const Tag = `h${level}`;
+  const headingClasses = cx(classes.heading, classes[`heading${level}`]);
+
+  return (
+    <Tag {...props} className={headingClasses}>
+      {children}
+    </Tag>
+  );
+}
+
+HeadingRenderer.propTypes = {
+  classes: PropTypes.object.isRequired,
+  level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired,
+  children: PropTypes.node,
+};
+
+export default Styled(styles)(HeadingRenderer);

styleguide/Logo.js

@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Styled from "rsg-components/Styled";
+import Pen from "./pen.svg";
+
+const styles = ({ fontFamily, color }) => ({
+  logo: {
+    margin: 0,
+    fontFamily: fontFamily.base,
+    fontSize: 18,
+    fontWeight: "normal",
+    color: color.baseBackground,
+  },
+  image: {
+    width: "2.5em",
+    marginRight: 25,
+  },
+  link: {
+    display: "flex",
+    alignItems: "center",
+    cursor: "pointer",
+  },
+});
+export function LogoRenderer({ classes }) {
+  return (
+    <h1 className={classes.logo}>
+      <a className={classes.link} href="">
+        {/* <Pen className={classes.image} /> */}
+        <span style={{ fontSize: 24, marginLeft: 8 }}>Nib</span>
+      </a>
+    </h1>
+  );
+}
+
+LogoRenderer.propTypes = {
+  classes: PropTypes.object.isRequired,
+  children: PropTypes.node,
+};
+
+export default Styled(styles)(LogoRenderer);

styleguide/StyleGuideRenderer.js

@@ -0,0 +1,108 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Logo from "rsg-components/Logo";
+import Markdown from "rsg-components/Markdown";
+import Styled from "rsg-components/Styled";
+import cx from "clsx";
+import Ribbon from "rsg-components/Ribbon";
+import Version from "rsg-components/Version";
+
+const styles = ({
+  color,
+  fontFamily,
+  fontSize,
+  sidebarWidth,
+  mq,
+  space,
+  maxWidth
+}) => ({
+  root: {
+    minHeight: "100vh",
+    backgroundColor: color.baseBackground
+  },
+  hasSidebar: {
+    paddingLeft: sidebarWidth,
+    [mq.small]: {
+      paddingLeft: 0
+    }
+  },
+  content: {
+    maxWidth,
+    padding: [[space[2], space[4]]],
+    margin: [[0, "auto"]],
+    [mq.small]: {
+      padding: space[2]
+    },
+    display: "block"
+  },
+  sidebar: {
+    backgroundColor: color.sidebarBackground,
+    border: [[color.border, "solid"]],
+    borderWidth: [[0, 1, 0, 0]],
+    position: "fixed",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    width: sidebarWidth,
+    overflow: "auto",
+    WebkitOverflowScrolling: "touch",
+    [mq.small]: {
+      position: "static",
+      width: "auto",
+      borderWidth: [[1, 0, 0, 0]],
+      paddingBottom: space[0]
+    }
+  },
+  logo: {
+    padding: "15px",
+    margin: 0,
+    borderBottom: [[1, color.border, "solid"]]
+  },
+  footer: {
+    display: "block",
+    color: color.light,
+    fontFamily: fontFamily.base,
+    fontSize: fontSize.small
+  },
+  header: {
+    margin: "10px 16px"
+  }
+});
+
+export function StyleGuideRenderer({
+  classes,
+  title,
+  version,
+  homepageUrl,
+  children,
+  toc,
+  hasSidebar
+}) {
+  return (
+    <div className={cx(classes.root, hasSidebar && classes.hasSidebar)}>
+      <main className={classes.content}>{children}</main>
+      {hasSidebar && (
+        <div className={classes.sidebar}>
+          <header className={classes.logo}>
+            <Logo>{title}</Logo>
+            {version && <Version>{version}</Version>}
+          </header>
+          {toc}
+        </div>
+      )}
+      <Ribbon />
+    </div>
+  );
+}
+
+StyleGuideRenderer.propTypes = {
+  classes: PropTypes.object.isRequired,
+  title: PropTypes.string.isRequired,
+  version: PropTypes.string,
+  homepageUrl: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  toc: PropTypes.node.isRequired,
+  hasSidebar: PropTypes.bool
+};
+
+export default Styled(styles)(StyleGuideRenderer);

styleguide/TableOfContentsRenderer.js

@@ -0,0 +1,89 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Styled from "rsg-components/Styled";
+import GithubImg from "./github.png";
+import "./styles.css";
+
+const styles = ({ color, fontFamily, fontSize }) => ({
+  nav: {
+    margin: 0
+  },
+  pre: {
+    whiteSpace: "pre-wrap"
+  },
+  wrapper: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    height: "85%",
+    alignItems: "center",
+    color: "white !important",
+    fontFamily: fontFamily.base,
+    "& a": {
+      color: "white !important",
+      "&:hover": {
+        color: "#90a4ae !important",
+        cursor: "pointer"
+      }
+    }
+  },
+  github: {
+    fontSize: fontSize.base,
+    paddingLeft: 8,
+    display: "flex",
+    alignItems: "center",
+    cursor: "pointer",
+    "&:hover": {
+      color: color.linkHover,
+      paddingLeft: 8,
+    }
+  },
+  githubImg: {
+    marginRight: 10,
+    height: 20
+  },
+  bottom: {
+    fontSize: fontSize.small
+  },
+  bottomLink: {
+    textDecoration: "underline",
+    "&:hover": {
+      color: color.linkHover,
+      cursor: "pointer",
+      textDecoration: "underline"
+    }
+  }
+});
+
+export function TableOfContentsRenderer({ classes, children }) {
+  return (
+    <div className={classes.wrapper}>
+      <div style={{ margin: "10px" }}>
+        <nav>{children}</nav>
+        <nav className={classes.github}>
+          <a
+            href="https://github.com/nib-edit/Nib"
+            target="_blank"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              marginBottom: 10
+            }}
+          >
+            <img className={classes.githubImg} src={GithubImg} />
+            <span>Github</span>
+          </a>
+        </nav>
+      </div>
+    </div>
+  );
+}
+
+TableOfContentsRenderer.propTypes = {
+  classes: PropTypes.object.isRequired,
+  children: PropTypes.node,
+  searchTerm: PropTypes.string.isRequired,
+  onSearchTermChange: PropTypes.func.isRequired
+};
+
+export default Styled(styles)(TableOfContentsRenderer);

styleguide/index.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Nib</title><link rel="icon" type="image/x-icon" href="/pen.png"></head><body><div id="rsg-root"></div><script src="build/bundle.bf38d8d7.js"></script></body></html>