fix(docz-components): fix syntax highlighting in Playground

core/docz-components/README.md

@@ -1,11 +1,10 @@
-# TSDX React User Guide
+# Docz Components
 
-Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.
-
-> This TSDX setup is meant for developing React components (not apps!) that can be published to NPM. If you’re looking to build an app, you should use `create-react-app`, `razzle`, `nextjs`, `gatsby`, or `react-static`.
+React components used by `docz` and `gatsby-theme-docz`.
 
 > If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)
 
+
 ## Commands
 
 TSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.
@@ -51,12 +50,10 @@ This is the folder structure we set up for you:
   package.json
   tsconfig.json
 /src
-  index.tsx       # EDIT THIS
-/test
-  blah.test.tsx   # EDIT THIS
+  index.tsx
 .gitignore
 package.json
-README.md         # EDIT THIS
+README.md
 tsconfig.json
 ```
 
@@ -114,25 +111,6 @@ npm start # or yarn start
 
 The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**!
 
-## Deploying the Playground
-
-The Playground is just a simple [Parcel](https://parceljs.org) app, you can deploy it anywhere you would normally deploy that. Here are some guidelines for **manually** deploying with the Netlify CLI (`npm i -g netlify-cli`):
-
-```bash
-cd example # if not already in the example folder
-npm run build # builds to dist
-netlify deploy # deploy the dist folder
-```
-
-Alternatively, if you already have a git repo connected, you can set up continuous deployment with Netlify:
-
-```bash
-netlify init
-# build command: cd example && yarn && yarn build
-# directory to deploy: example/dist
-# pick yes for netlify.toml
-```
-
 ## Named Exports
 
 Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
@@ -146,22 +124,3 @@ For vanilla CSS, you can include it at the root directory and add it to the `fil
 ## Publishing to NPM
 
 We recommend using https://github.com/sindresorhus/np.
-
-## Usage with Lerna
-
-When creating a new package with TSDX within a project set up with Lerna, you might encounter a `Cannot resolve dependency` error when trying to run the `example` project. To fix that you will need to make changes to the `package.json` file _inside the `example` directory_.
-
-The problem is that due to the nature of how dependencies are installed in Lerna projects, the aliases in the example project's `package.json` might not point to the right place, as those dependencies might have been installed in the root of your Lerna project.
-
-Change the `alias` to point to where those packages are actually installed. This depends on the directory structure of your Lerna project, so the actual path might be different from the diff below.
-
-```diff
-   "alias": {
--    "react": "../node_modules/react",
--    "react-dom": "../node_modules/react-dom"
-+    "react": "../../../node_modules/react",
-+    "react-dom": "../../../node_modules/react-dom"
-   },
-```
-
-An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead. [However, that might cause other problems.](https://github.com/palmerhq/tsdx/issues/64)

core/docz-components/example/index.tsx

@@ -1,12 +1,22 @@
 import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Playground } from '../';
+import { Playground } from '../dist/';
 
 const App = () => {
   return (
     <div>
-      <Playground code={'<h1>asd</h1>'} showPlaygroundEditor={true} />
+      <Playground
+        code={'<Button>asd</Button>'}
+        // theme={{
+        //   styles: [],
+        //   plain: {
+        //     fontFamily: 'Inconsolata',
+        //     fontSize: 308,
+        //     lineHeight: '1.5em',
+        //   },
+        // }}
+      />
     </div>
   );
 };

core/docz-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docz-components",
-  "version": "2.0.0-rc.12",
+  "version": "2.0.0-rc.16",
   "main": "dist/index.js",
   "module": "dist/docz-components.esm.js",
   "typings": "dist/index.d.ts",
@@ -44,12 +44,14 @@
   "dependencies": {
     "@emotion/core": "^10.0.16",
     "@mdx-js/react": "^1.4.0",
+    "@theme-ui/typography": "^0.2.34",
     "copy-text-to-clipboard": "^2.1.0",
     "lodash": "^4.17.15",
     "lodash-es": "^4.17.15",
     "re-resizable": "^6.0.0",
     "react-feather": "^2.0.3",
     "react-live": "^2.2.0",
-    "theme-ui": "^0.2.38"
+    "theme-ui": "^0.2.38",
+    "typography-theme-moraga": "^0.16.19"
   }
 }

core/docz-components/src/theme/breakpoints.js → core/docz-components/src/theme/breakpoints.ts

@@ -1,5 +1,5 @@
-const em = px => `${px / 16}em`;
-const mountMedia = val => `@media screen and (max-width: ${em(val)})`;
+const em = (px: number) => `${px / 16}em`;
+const mountMedia = (val: number) => `@media screen and (max-width: ${em(val)})`;
 
 export const breakpoints = {
   mobile: 630,

core/docz-components/src/theme/index.js → core/docz-components/src/theme/index.ts

@@ -1,15 +1,18 @@
+//@ts-ignore
 import moraga from 'typography-theme-moraga';
+//@ts-ignore
 import { toTheme } from '@theme-ui/typography';
 import { merge } from 'lodash';
 
 import * as modes from './modes';
 import prism from './prism';
+import { Theme } from '../types';
 
 moraga.headerWeight = 700;
 const typography = toTheme(moraga);
 
-const getTheme = (...args) =>
-  merge(...args, typography, {
+const getTheme = (theme?: Theme) =>
+  merge(theme, typography, {
     prism,
     initialColorMode: 'light',
     colors: {
@@ -86,7 +89,7 @@ const getTheme = (...args) =>
         py: 3,
         px: 4,
         bg: 'blockquote.bg',
-        borderLeft: t => `5px solid ${t.colors.blockquote.boder}`,
+        borderLeft: (t: Theme) => `5px solid ${t.colors.blockquote.boder}`,
         color: 'blockquote.color',
         fontStyle: 'italic',
         '> p': {
@@ -112,7 +115,7 @@ const getTheme = (...args) =>
         my: 4,
         borderCollapse: 'separate',
         borderSpacing: 0,
-        [['th', 'td']]: {
+        [['th', 'td'] as any]: {
           textAlign: 'left',
           py: '4px',
           pr: '4px',
@@ -131,7 +134,7 @@ const getTheme = (...args) =>
       },
       hr: {
         border: 0,
-        borderBottom: t => `1px solid ${t.colors.border}`,
+        borderBottom: (t: Theme) => `1px solid ${t.colors.border}`,
       },
     },
   });

core/docz-components/src/utils/theme.ts

@@ -1,18 +1,18 @@
 import { useThemeUI } from 'theme-ui';
 import { get, defaultTo } from 'lodash';
+import getTheme from '../theme/';
 
 export const themeProp = (str: string) => (props: any) => {
   return get(`theme.${str}`, props);
 };
 
 export const usePrismTheme = () => {
   //@ts-ignore
-  const { theme, colorMode } = useThemeUI();
+  const { theme, colorMode = 'light' } = useThemeUI();
   const prismTheme = get(theme, 'prismTheme');
-
   const themeToUse = defaultTo(
     prismTheme,
-    get(prismTheme, `prism.${colorMode}`, theme)
+    get(theme, `prism.${colorMode}`, get(getTheme(), `prism.${colorMode}`))
   );
   return themeToUse;
 };

core/docz/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docz",
-  "version": "2.0.0-rc.21",
+  "version": "2.0.0-rc.22",
   "description": "It's has never been so easy to documents your things!",
   "license": "MIT",
   "main": "dist/index.js",
@@ -27,7 +27,7 @@
     "@mdx-js/react": "^1.0.27",
     "array-sort": "^1.0.0",
     "capitalize": "^2.0.0",
-    "docz-components": "^2.0.0-rc.12",
+    "docz-components": "^2.0.0-rc.16",
     "docz-core": "^2.0.0-rc.21",
     "fast-deep-equal": "^2.0.1",
     "gatsby": "^2.13.27",

yarn.lock

@@ -3821,6 +3821,15 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
+"@theme-ui/typography@^0.2.34":
+  version "0.2.34"
+  resolved "https://registry.npmjs.org/@theme-ui/typography/-/typography-0.2.34.tgz#ada6b327b4df373a5f5531ae9e53a141a7d1f309"
+  integrity sha512-auYZb3eUVLIDPnuqR2ekeqM3mYHKxUWWuxaH4DM8ZeIt1xOug9XsxF2S1UJX/pHCXDTVEDO5uiwAbnv7LoW1Zg==
+  dependencies:
+    compass-vertical-rhythm "^1.4.5"
+    modularscale "^2.0.1"
+    object-assign "^4.1.1"
+
 "@theme-ui/typography@^0.2.5":
   version "0.2.5"
   resolved "https://registry.npmjs.org/@theme-ui/typography/-/typography-0.2.5.tgz#1553c5daf0ac23bf113eca4810bfb8692edeb96b"
@@ -8548,6 +8557,42 @@ docz-core@2.0.0-rc.2:
     xstate "^4.6.7"
     yargs "^13.3.0"
 
+docz-core@2.0.0-rc.6:
+  version "2.0.0-rc.6"
+  resolved "https://registry.npmjs.org/docz-core/-/docz-core-2.0.0-rc.6.tgz#ed3221575e16edf9b2cf27456fdd1cce7d3f11aa"
+  integrity sha512-sAW9KQxpp/fQFGL3GMRJzO7fiqVoGVhqZ4Geq4UD5Ex1vHfKBwq8/5NRdRj0O0rmKXwmZ64ulvfaSqwF+2Z6/Q==
+  dependencies:
+    "@sindresorhus/slugify" "^0.9.1"
+    chalk "^2.4.2"
+    chokidar "^3.0.2"
+    detect-port "^1.3.0"
+    docz-utils "^2.0.0-rc.1"
+    env-dot-prop "^2.0.1"
+    fast-deep-equal "^2.0.1"
+    fast-glob "^3.0.4"
+    find-up "^4.1.0"
+    fs-extra "^8.1.0"
+    get-pkg-repo "^4.1.0"
+    humanize-string "^2.1.0"
+    latest-version "^5.1.0"
+    load-cfg "^2.0.0-rc.1"
+    lodash "^4.17.14"
+    minimatch "^3.0.4"
+    ora "^3.4.0"
+    react-docgen "^4.1.1"
+    react-docgen-actual-name-handler "^2.0.0-rc.1"
+    react-docgen-external-proptypes-handler "^1.0.3"
+    react-docgen-typescript "^1.12.5"
+    recast "^0.18.1"
+    resolve "^1.11.1"
+    shelljs "^0.8.3"
+    signale "^1.4.0"
+    titleize "^2.1.0"
+    typescript "3.5.3"
+    wait-on "^3.3.0"
+    xstate "^4.6.7"
+    yargs "^13.3.0"
+
 docz@2.0.0-rc.2:
   version "2.0.0-rc.2"
   resolved "https://registry.npmjs.org/docz/-/docz-2.0.0-rc.2.tgz#842f1ffb97c6c53cd110592d9aa7dd2d649632ec"
@@ -8567,6 +8612,46 @@ docz@2.0.0-rc.2:
     ulid "^2.3.0"
     yargs "^13.3.0"
 
+docz@2.0.0-rc.9:
+  version "2.0.0-rc.9"
+  resolved "https://registry.npmjs.org/docz/-/docz-2.0.0-rc.9.tgz#e3874c8efa66619e7d19ac9d1664aba3c09853c1"
+  integrity sha512-3tMx4jxoV9WQd+ZMg3zmKXwK+tX48RZgBpVH3pEtcuUrTJM15Ze+J+VJnlK0L+SvZ9wNr8bMdR2s/g8PJANA+Q==
+  dependencies:
+    "@mdx-js/react" "^1.0.27"
+    array-sort "^1.0.0"
+    capitalize "^2.0.0"
+    docz-core "2.0.0-rc.6"
+    fast-deep-equal "^2.0.1"
+    gatsby "^2.13.27"
+    lodash "^4.17.14"
+    marksy "^8.0.0"
+    match-sorter "^3.1.1"
+    prop-types "^15.7.2"
+    scheduler "^0.15.0"
+    ulid "^2.3.0"
+    yargs "^13.3.0"
+
+docz@next:
+  version "2.0.0-rc.21"
+  resolved "https://registry.npmjs.org/docz/-/docz-2.0.0-rc.21.tgz#fedbf2f9caa5eb88e1f079f9b1448ce267ecbcf5"
+  integrity sha512-i//HOYCkLDD/qdvNjC7SkYea37FeNGtkdlw9N72Cr3fH16LTB+zIuMnbXPajlHX2KszPYo+MlZWQERECF0160w==
+  dependencies:
+    "@emotion/core" "^10.0.16"
+    "@mdx-js/react" "^1.0.27"
+    array-sort "^1.0.0"
+    capitalize "^2.0.0"
+    docz-components "^2.0.0-rc.12"
+    docz-core "^2.0.0-rc.21"
+    fast-deep-equal "^2.0.1"
+    gatsby "^2.13.27"
+    lodash "^4.17.14"
+    marksy "^8.0.0"
+    match-sorter "^3.1.1"
+    prop-types "^15.7.2"
+    scheduler "^0.15.0"
+    ulid "^2.3.0"
+    yargs "^13.3.0"
+
 dom-converter@^0.2:
   version "0.2.0"
   resolved "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"