Docs: Add initial Playroom prototyping guide (#811)

seek-oss · Oct 28, 2020 · 67786fb · 67786fb
1 parent 52057a0
commit 67786fb
Show file tree

Hide file tree

Showing 4 changed files with 405 additions and 11 deletions.
diff --git a/site/src/App/Code/Code.tsx b/site/src/App/Code/Code.tsx
@@ -34,6 +34,7 @@ import * as styleRefs from './Code.treat';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import editorTheme from './editorTheme';
 import { ThemedExample } from '../ThemeSetting';
+import usePlayroomScope from '../../../../lib/playroom/useScope';
 
 const formatSnippet = memoize(
   (snippet) =>
@@ -158,26 +159,35 @@ export const CodeBlock = ({
 
 interface CodeProps {
   playroom?: boolean;
+  displayCode?: string;
   collapsedByDefault?: boolean;
-  children: ReactChild;
+  children:
+    | ReactChild
+    | ((playroomScope: ReturnType<typeof usePlayroomScope>) => ReactChild);
 }
 export default ({
   playroom = true,
   collapsedByDefault = false,
+  displayCode,
   children,
 }: CodeProps) => {
   const [hideCode, setHideCode] = useState(collapsedByDefault);
   const { playroomUrl } = useConfig();
+  const playroomScope = usePlayroomScope();
 
   const snippet = formatSnippet(
-    typeof children === 'string'
-      ? children
-      : reactElementToJSXString(children, {
-          useBooleanShorthandSyntax: false,
-          showDefaultProps: false,
-          showFunctions: false,
-          filterProps: ['onChange', 'onBlur', 'onFocus'],
-        }),
+    displayCode ??
+      (typeof children === 'string'
+        ? children
+        : reactElementToJSXString(
+            typeof children === 'function' ? children(playroomScope) : children,
+            {
+              useBooleanShorthandSyntax: false,
+              showDefaultProps: false,
+              showFunctions: false,
+              filterProps: ['onChange', 'onBlur', 'onFocus'],
+            },
+          )),
   );
 
   return (
@@ -189,7 +199,11 @@ export default ({
     >
       <Stack space="xsmall">
         {typeof children !== 'string' && (
-          <ThemedExample background="body">{children}</ThemedExample>
+          <ThemedExample background="body">
+            {typeof children === 'function'
+              ? children(playroomScope)
+              : children}
+          </ThemedExample>
         )}
         {hideCode ? null : <CodeBlock>{snippet}</CodeBlock>}
         <Inline space="xxsmall" align="right">

diff --git a/site/src/App/Navigation/Navigation.tsx b/site/src/App/Navigation/Navigation.tsx
@@ -122,8 +122,9 @@ export const Navigation = ({ children }: NavigationProps) => {
       <Box
         background="card"
         position="relative"
-        paddingY={['small', 'xxsmall']}
         paddingX={[gutterSize, gutterSize, 'xxlarge']}
+        paddingY={['small', 'xxsmall']}
+        paddingBottom="xxlarge"
         marginBottom="xxlarge"
         transition="fast"
         pointerEvents={isMenuOpen ? 'none' : undefined}

diff --git a/site/src/App/routes/guides/index.ts b/site/src/App/routes/guides/index.ts
@@ -1,11 +1,13 @@
 import designWorkflow from './design-workflow';
 import developmentWorkflow from './development-workflow';
+import playroomPrototyping from './playroom-prototyping';
 import contribution from './contribution';
 import testingGuide from './testing-guide';
 
 export default {
   '/guides/design-workflow': designWorkflow,
   '/guides/development-workflow': developmentWorkflow,
+  '/guides/playroom-prototyping': playroomPrototyping,
   '/guides/contribution': contribution,
   '/guides/testing-guide': testingGuide,
 };