playbook_ui_docs 14.1.0.pre.alpha.PA1477timestampkit3536 → 14.1.0.pre.alpha.PBNTR455ganttchartPOC3569

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a9a56199c55751b0622186a61c0072d89817f864fecd9cf1181b13d2555c84bf
-  data.tar.gz: c88fde11c878878b9b14e115b9fcbfcdb63bea5d5f2c296aa422b1aa09164221
+  metadata.gz: 73e123e1be8432b282e1f772a66dbe6eb017eaffe60858e16d6d4d41a97d0061
+  data.tar.gz: 4db0c1287eb444d4a2786c700d1c78ad39e53c03b874441f389c85c8766f2e16
 SHA512:
-  metadata.gz: feb420d2480a3dfe7acc94e307ac4f98c613fa20957af19d990dc40d770c46aadcac3799c9cb30000c05d21bae6c4253f619868150ef0fcab35a4f7c5eb6b348
-  data.tar.gz: 98f2d9232423d8d2ff37a4607123f8caa31e7ae3b5d951707c100e48fc60defad52497a0e063de1ca0689be93f8d0796c40fbc4362d1e15f199ee5d071224ad4
+  metadata.gz: 0e04a2b37567e68d256298158e40374d8fe41f8c17b03dc37bc495695eb15047a46dadcda888ad59941838cd0e670eac0c125deee73dcf2bb90159df2a46672f
+  data.tar.gz: c7539a4eb752013c5f3274f15338cb642eb954b482486dd86498d27dd74540a60f51079582624719e025474753bd5235f0ed3aa60d908ab882d700618d9e61f0

data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { GanttChart } from "playbook-ui";
+
+const mockOptions = {
+  title: {
+    text: "Simple Gantt Chart",
+  },
+
+  xAxis: [
+    {
+      min: Date.UTC(2014, 10, 17),
+      max: Date.UTC(2014, 10, 30),
+    },
+  ],
+
+  series: [
+    {
+      name: "Project 1",
+      data: [
+        {
+          name: "Start prototype",
+          start: Date.UTC(2014, 10, 18),
+          end: Date.UTC(2014, 10, 25),
+        },
+        {
+          name: "Develop",
+          start: Date.UTC(2014, 10, 20),
+          end: Date.UTC(2014, 10, 25),
+        },
+        {
+          name: "Run acceptance tests",
+          start: Date.UTC(2014, 10, 23),
+          end: Date.UTC(2014, 10, 26),
+        },
+        {
+          name: "Test prototype",
+          start: Date.UTC(2014, 10, 27),
+          end: Date.UTC(2014, 10, 29),
+        },
+      ],
+    },
+  ],
+};
+
+const GanttChartDefault = (props) => (
+  <div>
+    <GanttChart customOptions={mockOptions} 
+        {...props} 
+    />
+  </div>
+);
+
+export default GanttChartDefault;

data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml

@@ -0,0 +1,7 @@
+examples:
+  
+  
+  react:
+  - gantt_chart_default: Default
+  
+  

data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js

@@ -0,0 +1 @@
+export { default as GanttChartDefault } from './_gantt_chart_default.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import { Button, Card, RichTextEditor } from 'playbook-ui'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+
+const RichTextEditorAdvancedPreview = (props) => {
+
+  const editor = useEditor({
+      extensions: [
+          StarterKit,
+          Link
+      ],
+      content: "Add text here, format it, and press \"Preview Output\" to see what your stylized output will look like on the page."
+  })
+
+  const [showPreview, setShowPreview] = useState(false)
+  const [previewText, setPreviewText] = useState(<div />)
+
+  const handleChange = () => {
+    if (editor) {
+      setPreviewText(editor.getHTML())
+    }
+  }
+
+  const handleClick = () => {
+    handleChange()
+    setShowPreview(true)
+  }
+  if (!editor) {
+    return null
+  } 
+      
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          id="content-advanced-preview-editor"
+          onChange={handleChange}
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+      {showPreview && (
+        <Card 
+            marginTop="md"
+            maxWidth="md"
+        >
+          <div
+              className="tiptap-content"
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: previewText }}
+              id="advanced-preview-content"
+          />
+        </Card>
+      )}
+      {!showPreview && (
+        <div />
+      )}
+      <Button
+          id="preview-button"
+          marginTop="md"
+          onClick={handleClick}
+          text="Preview Output"
+          variant="secondary"
+      />
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedPreview

data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml

@@ -24,3 +24,4 @@ examples:
   - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview
+  - rich_text_editor_advanced_preview: Advanced Preview

data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js

@@ -9,4 +9,5 @@ export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
 export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
 export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
 export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
-export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
+export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
+export { default as RichTextEditorAdvancedPreview } from './_rich_text_editor_advanced_preview.jsx'