feat(docz-components): working playground

core/docz-components/example/index.tsx

@@ -6,7 +6,7 @@ import { Playground } from '../';
 const App = () => {
   return (
     <div>
-      <Playground />
+      <Playground code={'<h1>asd</h1>'} showPlaygroundEditor={true} />
     </div>
   );
 };

core/docz-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docz-components",
-  "version": "0.1.0",
+  "version": "2.0.0-rc.8",
   "main": "dist/index.js",
   "module": "dist/docz-components.esm.js",
   "typings": "dist/index.d.ts",
@@ -11,7 +11,8 @@
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --env=jsdom",
-    "lint": "tsdx lint"
+    "lint": "tsdx lint",
+    "prepare": "npm run build"
   },
   "peerDependencies": {
     "react": ">=16"
@@ -31,6 +32,7 @@
     "@types/jest": "^24.0.18",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
+    "@types/theme-ui": "^0.2.2",
     "husky": "^3.0.4",
     "prettier": "^1.18.2",
     "pretty-quick": "^1.11.1",
@@ -39,5 +41,16 @@
     "tsdx": "^0.9.0",
     "tslib": "^1.10.0",
     "typescript": "^3.6.2"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.16",
+    "@mdx-js/react": "^1.4.0",
+    "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"
   }
 }

core/docz-components/src/components/Icons/index.tsx

@@ -0,0 +1,18 @@
+//@ts-ignore
+export { default as ChevronDown } from 'react-feather/dist/icons/chevron-down';
+//@ts-ignore
+export { default as ChevronUp } from 'react-feather/dist/icons/chevron-up';
+//@ts-ignore
+export { default as Clipboard } from 'react-feather/dist/icons/clipboard';
+//@ts-ignore
+export { default as Code } from 'react-feather/dist/icons/code';
+//@ts-ignore
+export { default as Edit } from 'react-feather/dist/icons/edit-2';
+//@ts-ignore
+export { default as Github } from 'react-feather/dist/icons/github';
+//@ts-ignore
+export { default as Menu } from 'react-feather/dist/icons/menu';
+//@ts-ignore
+export { default as Search } from 'react-feather/dist/icons/search';
+//@ts-ignore
+export { default as Sun } from 'react-feather/dist/icons/sun';

core/docz-components/src/components/Playground/LivePreviewWrapper.tsx

@@ -0,0 +1,26 @@
+/** @jsx jsx */
+import * as React from 'react';
+import { jsx, SxProps } from 'theme-ui';
+import get from 'lodash/get';
+import { Theme } from '../../types';
+
+const styles = {
+  iframe: (showingCode: boolean, height = 'auto') =>
+    ({
+      height,
+      display: 'block',
+      minHeight: '100%',
+      width: 'calc(100% - 2px)',
+      border: (t: Theme) =>
+        `1px solid ${get(t, 'colors.playground.border', 'none')}`,
+      borderRadius: showingCode ? '4px 4px 0 0' : '4px',
+    } as SxProps['sx']),
+};
+type Props = { showingCode: boolean };
+
+export const LivePreviewWrapper: React.FC<Props> = ({
+  children,
+  showingCode,
+}) => {
+  return <div sx={styles.iframe(showingCode)}>{children}</div>;
+};

core/docz-components/src/Playground/index.js → core/docz-components/src/components/Playground/index.tsx

@@ -1,29 +1,41 @@
 /** @jsx jsx */
 import { jsx } from 'theme-ui';
 import { useState } from 'react';
-import { useConfig } from 'docz';
 import { LiveProvider, LiveError, LivePreview, LiveEditor } from 'react-live';
-import { merge } from 'lodash/fp';
+import { merge } from 'lodash';
 import { Resizable } from 're-resizable';
 import copy from 'copy-text-to-clipboard';
 
-import { usePrismTheme } from '~utils/theme';
+import { usePrismTheme } from '../../utils/theme';
 import { LivePreviewWrapper } from './LivePreviewWrapper';
 import * as styles from './styles';
 import * as Icons from '../Icons';
 
-export const Playground = ({ code, scope }) => {
-  const {
-    themeConfig: { showPlaygroundEditor, showLiveError },
-  } = useConfig();
+type Props = {
+  code: string;
+  scope:
+    | {
+        [key: string]: any;
+      }
+    | undefined;
+  showPlaygroundEditor: boolean;
+  showLiveError: boolean;
+};
 
+export const Playground = ({
+  code,
+  scope,
+  showPlaygroundEditor = true,
+  showLiveError,
+}: Props) => {
   const theme = usePrismTheme();
   const [showingCode, setShowingCode] = useState(() => showPlaygroundEditor);
   const [width, setWidth] = useState(() => '100%');
 
-  const transformCode = code => {
-    if (code.startsWith('()') || code.startsWith('class')) return code;
-    return `<React.Fragment>${code}</React.Fragment>`;
+  const transformCode = (codeToTransform: string) => {
+    if (codeToTransform.startsWith('()') || codeToTransform.startsWith('class'))
+      return codeToTransform;
+    return `<React.Fragment>${codeToTransform}</React.Fragment>`;
   };
 
   const toggleCode = () => {
@@ -35,6 +47,7 @@ export const Playground = ({ code, scope }) => {
     maxWidth: '100%',
     size: {
       width,
+      height: 'auto',
     },
     style: {
       margin: '0 auto ',
@@ -49,21 +62,21 @@ export const Playground = ({ code, scope }) => {
       bottomLeft: false,
       topLeft: false,
     },
-    onResizeStop: (e, direction, ref) => {
+    onResizeStop: (e: any, direction: any, ref: any) => {
       setWidth(ref.style.width);
     },
   };
-
   return (
     <Resizable {...resizableProps}>
       <LiveProvider
         code={code}
         scope={scope}
         transformCode={transformCode}
         theme={merge(theme, {
+          styles: [],
           plain: {
             fontFamily: 'Inconsolata',
-            fontSize: 18,
+            fontSize: 28,
             lineHeight: '1.5em',
           },
         })}

core/docz-components/src/Playground/styles.js → core/docz-components/src/components/Playground/styles.ts

@@ -1,19 +1,23 @@
-import * as mixins from '~utils/mixins';
+import get from 'lodash/get';
 
-export const editor = theme => ({
-  p: 2,
-  border: t => `1px solid ${t.colors.border}`,
-  borderRadius: '0 0 4px 4px',
-  background: theme.plain.backgroundColor,
-  borderTop: 0,
-  fontFamily: 'monospace',
-  fontSize: 18,
-  '* > textarea:focus': {
-    font: '400 18px Inconsolata !important',
-    lineHeight: '1.5em !important',
-    outline: 'none',
-  },
-});
+import { Theme } from '../../types';
+import * as mixins from '../../utils/mixins';
+
+export const editor = (theme: Theme) =>
+  ({
+    p: 2,
+    border: (t: Theme) => `1px solid ${get(t, 'colors.border', 'transparent')}`,
+    borderRadius: '0 0 4px 4px',
+    background: get(theme, 'plain.backgroundColor', 'none'),
+    borderTop: 0,
+    fontFamily: 'monospace',
+    fontSize: 18,
+    '* > textarea:focus': {
+      font: '400 18px Inconsolata',
+      lineHeight: '1.5em ',
+      outline: 'none',
+    },
+  } as any);
 
 export const error = {
   m: 0,

core/docz-components/src/index.tsx

@@ -1,6 +1 @@
-import * as React from 'react';
-
-// Delete me
-export const Playground = () => {
-  return <div>the snozzb erries taste like snozzberries</div>;
-};
+export { Playground } from './components/Playground';

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

@@ -0,0 +1,14 @@
+const em = px => `${px / 16}em`;
+const mountMedia = val => `@media screen and (max-width: ${em(val)})`;
+
+export const breakpoints = {
+  mobile: 630,
+  tablet: 920,
+  desktop: 1120,
+};
+
+export const media = {
+  mobile: mountMedia(breakpoints.mobile),
+  tablet: mountMedia(breakpoints.tablet),
+  desktop: mountMedia(breakpoints.desktop),
+};

core/docz-components/src/theme/colors.js

@@ -0,0 +1,12 @@
+export const white = '#FFFFFF';
+export const grayUltraLight = '#FCFBFA';
+export const grayExtraLight = '#F5F6F7';
+export const grayLight = '#CED4DE';
+export const gray = '#7D899C';
+export const grayDark = '#2D3747';
+export const grayExtraDark = '#1D2330';
+export const dark = '#13161F';
+export const blueLight = '#e9f2fa';
+export const blue = '#0B5FFF';
+export const skyBlue = '#1FB6FF';
+export const negative = '#EB4D4B';

core/docz-components/src/theme/global.js

@@ -0,0 +1,12 @@
+export default {
+  body: {
+    margin: 0,
+    padding: 0,
+  },
+  '.icon-link': {
+    display: 'none',
+  },
+  '.with-overlay': {
+    overflow: 'hidden',
+  },
+};