Rails / React Playground and React Render Rails Examples

playbook-website/app/controllers/pages_controller.rb

@@ -16,6 +16,9 @@ class PagesController < ApplicationController
   before_action :set_category, only: %i[kit_category_show_rails kit_category_show_react]
   before_action :delete_dark_mode_cookie, only: %i[home getting_started visual_guidelines]
 
+  include Playbook::PbDocHelper
+  include Playbook::PbKitHelper
+
   def disable_dark_mode
     cookies[:dark_mode] = {
       value: "false",
@@ -79,10 +82,39 @@ def kit_show_react
     render template: "pages/kit_show", layout: "layouts/kits"
   end
 
-  def kit_show_new
+  def kit_playground_rails
+    @kit = "avatar"
+    @examples = pb_doc_kit_examples(@kit, "rails")
+    @raw_example = view_context.pb_rails("docs/kit_example", props: {
+                                           kit: @kit,
+                                           example_title: @examples.first.values.first,
+                                           example_key: @examples.first.keys.first,
+                                           type: "rails",
+                                           dark: false,
+                                           code_only: true,
+                                         })
+    render "pages/rails_in_react_playground", layout: "layouts/fullscreen"
+  end
+
+  def rails_pg_render
+    render inline: erb_code_params
+  rescue => e
+    render json: { error: e }, status: 400
+  end
+
+  def rails_in_react
     @kit = params[:name]
-    @examples = kit_examples
-    render "pages/kit_show_new", layout: "layouts/kits"
+    @examples = pb_doc_kit_examples(@kit, "rails")
+    @raw_example = view_context.pb_rails("docs/kit_example", props: {
+                                           kit: @kit,
+                                           example_title: @examples.first.values.first,
+                                           example_key: @examples.first.keys.first,
+                                           show_code: false,
+                                           type: "rails",
+                                           dark: false,
+                                           show_raw: true,
+                                         })
+    render "pages/rails_in_react", layout: "layouts/kits"
   end
 
   def kit_show_demo
@@ -91,7 +123,20 @@ def kit_show_demo
     render "pages/kit_show_demo", layout: "layouts/kits"
   end
 
-  def principles; end
+  def rails_raw
+    @kit = params[:name]
+    example = pb_doc_kit_examples(@kit, "rails").first
+    raw_example = view_context.pb_rails("docs/kit_example", props: {
+                                          kit: @kit,
+                                          example_title: example.values.first,
+                                          example_key: example.keys.first,
+                                          show_code: false,
+                                          type: "rails",
+                                          dark: false,
+                                          show_raw: true,
+                                        })
+    render inline: raw_example, layout: false
+  end
 
   # TODO: rename this method once all guidelines are completed
   def visual_guidelines
@@ -169,6 +214,10 @@ def kit_examples
     pb_doc_kit_examples(params[:name], "rails")
   end
 
+  def erb_code_params
+    params.require(:erb_code)
+  end
+
   def read_kit_file(*args)
     path = ::Playbook.kit_path(@kit, "docs", *args)
     path.exist? ? path.read : ""

playbook-website/app/javascript/components/PbKitFetch/index.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react'
+
+import { Title, LoadingInline } from 'playbook-ui'
+
+const PbKitFetch = ({ kit }) => {
+  const [serverData, setServerData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    fetch('/kits/avatar/rails_raw')
+      .then((response) => response.text())
+      .then((data) => {
+        console.log(data)
+        debugger
+        setLoading(false)
+        setServerData(data)
+      })
+      .catch((err) => {
+        console.log(err)
+        setLoading(false)
+        setError(err)
+      })
+  }, [])
+
+  const unescapeHtml = function (value) {
+    var div = document.createElement('div')
+    div.innerHTML = value
+    return div.textContent
+  }
+
+  return (
+    <>
+      <Title
+          size={4}
+          tag="h1"
+          text={kit}
+      />
+      { loading && <LoadingInline align="center" /> }
+      <span dangerouslySetInnerHTML={{__html: serverData}} />
+    </>
+  )
+}
+
+export default PbKitFetch

playbook-website/app/javascript/components/PbKitPlayground/index.tsx

@@ -0,0 +1,137 @@
+/* eslint-disable flowtype/no-types-missing-file-annotation */
+/* eslint-disable comma-dangle */
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+/* eslint-disable react/no-danger */
+import React, { useEffect, useState } from 'react'
+
+import Editor from 'react-simple-code-editor'
+import { highlight, languages } from 'prismjs/components/prism-core'
+import 'prismjs/components/prism-clike'
+import 'prismjs/components/prism-javascript'
+import 'prismjs/components/prism-markup-templating'
+import 'prismjs/components/prism-ruby'
+import 'prismjs/components/prism-erb'
+import 'prismjs/plugins/unescaped-markup/prism-unescaped-markup'
+import 'prismjs/themes/prism-okaidia.css'
+
+import { LoadingInline, FixedConfirmationToast } from 'playbook-ui'
+
+const PbKitPlayground = () => {
+  const [previewData, setPreviewData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+  const [code, setCode] = React.useState('<%= pb_rails("title", props: { text: "Welcome to Playbook", size: 1 }) %>')
+  const [token, setToken] = useState(null)
+  const [throttleFetch, setThrottleFetch] = useState(false)
+
+  useEffect(() => {
+    var throttleTimer
+    if (throttleTimer) clearTimeout(throttleTimer)
+    setThrottleFetch(true)
+    throttleTimer = setTimeout(() => {
+      if (token) getPreview(code)
+    }, 2000)
+    return () => clearInterval(throttleTimer)
+  }, [code])
+
+  useEffect(() => {
+    if (token) {
+      getPreview(code)
+    } else {
+      const getToken = document.querySelector('[name="csrf-token"]').content
+      setToken(getToken)
+    }
+  }, [token])
+
+  const saveCode = (code: string) => {
+    setCode(code)
+  }
+
+  const getPreview = (code: string) => {
+    const requestOptions = {
+      method: 'POST',
+      headers: {
+        'X-CSRF-Token': token,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ erb_code: code })
+    }
+    setError(null)
+    setLoading(true)
+    fetch('/rails_pg_render', requestOptions)
+      .then((response) => {
+        if (response.ok) {
+          response.text().then((text) => {
+            setPreviewData(text)
+            setLoading(false)
+          })
+        }
+        if (response.status === 400) {
+          response.json().then((rv) => {
+            setLoading(false)
+            setError(rv.error)
+          })
+        }
+      })
+      .catch((err) => {
+        setLoading(false)
+        setError(err)
+      })
+    return () => {
+      setLoading(false)
+      clearTimeout(throttleTimer)
+      setThrottleFetch(false)
+    }
+  }
+
+  const showPreview = () => {
+    if (loading) {
+      return (
+        <LoadingInline
+            align="center"
+            className="pbDocPlayground-Preview-Loading"
+        />
+      )
+    } else {
+      if (error) {
+        return (
+          <FixedConfirmationToast
+              className="pbDocPlayground-Preview-Error"
+              status="error"
+              text={error}
+          />
+        )
+      } else {
+        return (
+          <div
+              className="pbDocPlayground-Preview-Example"
+              dangerouslySetInnerHTML={{ __html: previewData }}
+          />
+        )
+      }
+    }
+  }
+
+  return (
+    <div className="pbDocPlayground">
+      <div className="pbDocPlayground-Editor">
+        <Editor
+            className="language-erb"
+            highlight={(code) => highlight(code, languages.js)}
+            onValueChange={(code) => saveCode(code)}
+            style={{
+              fontFamily: 'monospace',
+              fontSize: 16,
+            }}
+            value={code}
+        />
+        {throttleFetch}
+      </div>
+      <div className="pbDocPlayground-Preview">
+        { showPreview() }
+      </div>
+    </div>
+  )
+}
+
+export default PbKitPlayground

playbook-website/app/javascript/components/PbKitReact/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import { Title } from 'playbook-ui'
+
+const PbKitReact = ({ kit, rawHTML }) => {
+
+  return (
+    <>
+      <Title
+          size={4}
+          tag="h1"
+          text={kit}
+      />
+      <span dangerouslySetInnerHTML={{__html: rawHTML}} />
+    </>
+  )
+}
+
+export default PbKitReact