playbook_ui 14.1.0.pre.alpha.PA1477timestampkit3536 → 14.1.0.pre.alpha.PBNTR455ganttchartPOC3569

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9e9a8573217ee764fa83fe813c05c7aaeedf7c9fdb98d4b702a358eceedf1330
-  data.tar.gz: bb76d9f0e12c6c3be671b40a953be9755b42d65fc2764e10d6541ba5e4d4863d
+  metadata.gz: 8e8a512656c877972bafc24c6eb07997b0416cd20fcd64e834c7e361e5994ae6
+  data.tar.gz: 8263da8743492e725a7883740bbab68a0991babf5a4d48c8ea3b5f91cd5968f2
 SHA512:
-  metadata.gz: 03c473ef11036a31e0bde23b85f3aa7f7e103e58698f776c1e40a1b45426ff0f1e54e76f7ff6af82d33a5c5d3914bd25f79588a708568c1b554ce20c00cfbbdb
-  data.tar.gz: 9e938be1a3fc22b60a1d3ada831f0f427f5a948c742758cfb8f4c5be97174d03b173f4c0d0694b7e01e15f4b93a2379c7d0f25a1bad46dd9f39548c1622ba112
+  metadata.gz: 2b943e98a13820d9797c4393c035dc9eeea40e152cbbc6743e1e922adbf5454ce869774aa69200a8109148fcc0e8a8426e8bb0d55261341d88030ee5806fbb9e
+  data.tar.gz: 8445df954e532fcf689cc502e7604e42714ed4fa32ede26a81b0fb35356646cd9224daa78274ac975ebc92d077a19ddbc286a6e4b397270146c168009c1460ca

data/app/pb_kits/playbook/_playbook.scss

@@ -37,6 +37,7 @@
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
+@import 'pb_gantt_chart/gantt_chart';
 @import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';

data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss

@@ -0,0 +1,3 @@
+.pb_gantt_chart {
+
+}

data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from "react";
+import classnames from "classnames";
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+import HighchartsReact from "highcharts-react-official";
+import Highcharts from "highcharts/highcharts-gantt";
+
+import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
+import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
+
+type GanttChartProps = {
+  aria?: { [key: string]: string };
+  className?: string;
+  customOptions: Partial<Highcharts.Options>;
+  dark?: boolean;
+  data?: { [key: string]: string };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  id?: string;
+};
+
+const GanttChart = (props: GanttChartProps) => {
+  const {
+    aria = {},
+    className,
+    customOptions = {},
+    dark = false,
+    data = {},
+    htmlOptions = {},
+    id,
+  } = props;
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames(
+    buildCss("pb_gantt_chart"),
+    globalProps(props),
+    className
+  );
+
+  const [options, setOptions] = useState<Highcharts.Options | undefined>(customOptions);
+
+  useEffect(() => {
+    setOptions(customOptions);
+  }, [customOptions]);
+
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };
+  setupTheme();
+
+  return (
+    <div>
+      <HighchartsReact
+          constructorType={"ganttChart"}
+          containerProps={{
+            className: classnames(globalProps(props), classes),
+            id: id,
+            ...ariaProps,
+            ...dataProps,
+            ...htmlProps,
+          }}
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GanttChart;

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_gantt_chart/gantt_chart.test.jsx

@@ -0,0 +1,19 @@
+// import { renderKit } from '../utilities/test-utils'
+
+// import GanttChart from './_gantt_chart'
+
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+
+test('generated scaffold test - update me', () => {
+  // const props = {
+  //   data: { testid: 'default' }
+  // }
+
+
+  // const kit = renderKit(GanttChart , props)
+  // expect(kit).toBeInTheDocument()
+})
+

data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss

@@ -0,0 +1,132 @@
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/typography";
+
+@mixin preview_first_child {
+    :first-child {
+        margin-top: 0;
+    }
+}
+
+@mixin preview_p {
+    margin: 1rem 0 0 0;
+    min-height: 1rem;
+}
+
+@mixin preview_code {
+    font-family: monospace;
+    background: $bg_light;
+    padding: 0.1rem 0.3rem;
+    box-shadow: 0 2px 10px $shadow;
+    border-radius: 0.25rem;
+    overflow: hidden;
+}
+
+@mixin preview_pre_codeblock {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+    font-family: monospace;
+    font-size: 0.9em;
+    padding: 0.5em;
+    overflow-x: auto;
+    background: $bg_dark;
+    padding: $space_sm;
+    border-radius: $border_rad_heaviest;
+    margin: 1.5rem 0 2rem 0;
+
+    code {
+        background: transparent !important;
+        box-shadow: none;
+        border: 0;
+        color: #faf6e4;
+    }
+}
+
+@mixin preview_a {
+    color: $primary;
+    border-bottom: 1px solid $primary;
+    &:hover {
+      color: $text_lt_default;
+      border-bottom: 1px solid $text_lt_default;
+    }
+}
+
+@mixin preview_blockquote {
+    font-size: $font_larger;
+    padding: $space_sm $space_md;
+    font-style: italic;
+    margin: 1rem 0 0 0;
+    p {
+        margin: 0;
+    }
+}
+
+@mixin preview_h1 {
+    font-size: $text_largest;
+    line-height: $text_larger;
+    font-weight: $bolder;
+    letter-spacing: $lspace_tight;
+    margin: 2.1rem 0 0 0;
+}
+
+@mixin preview_h2 {
+    font-size: $text_larger;
+    line-height: $text_larger;
+    font-weight: $bolder;
+    letter-spacing: $lspace_tight;
+    margin: 1.9rem 0 0 0;
+}
+
+@mixin preview_h3 {
+    font-size: $text_large;
+    line-height: $text_large;
+    font-weight: $bolder;
+    letter-spacing: $lspace_tight;
+    margin: 1.7rem 0 0 0;
+}
+
+@mixin preview_smaller_headings {
+    font-size: $text_base;
+    line-height: $text_base;
+    letter-spacing: $lspace_tight;
+    font-weight: $bolder;
+    margin: 1rem 0 0 0;
+}
+
+@mixin preview_hr {
+    margin: 2.2rem 0;
+    box-sizing: content-box;
+    overflow: hidden;
+    background: transparent;
+    border-bottom: 1px solid $transparent;
+    height: 1px;
+    padding: 0;
+    background-color: $border_light;
+    border: 0; 
+}
+
+@mixin preview_ol {
+    margin: 1rem 0 0 0;
+    padding-left: $space_md;
+    list-style: decimal;
+    li {
+      margin: 2px 0;
+      p {
+        margin: 0;
+      }
+    }
+}
+
+@mixin preview_ul {
+    list-style-position: disc;
+    margin: 1rem 0 0 0;
+    padding-left: $space_md;
+    li {
+      margin: 2px 0;
+      p {
+        margin: 0;
+      }
+    }
+}

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -6,6 +6,7 @@
 @import "../tokens/typography";
 @import "../tokens/shadows";
 @import "../tokens/transition";
+@import "previewer_mixin";
 
 [class^="pb_rich_text_editor_kit"] {
   .toolbar_button {
@@ -85,109 +86,44 @@
     }
 
     code {
-      font-family: monospace;
-      background: $bg_light;
-      padding: 0.1rem 0.3rem;
-      margin: 0 5px;
-      box-shadow: 0 2px 10px $shadow;
-      border-radius: 0.25rem;
-      overflow: hidden;
-      font-size: ($text_small - 1px);
+      @include preview_code;
     }
 
     pre {
-      background: $bg_dark;
-      padding: $space_sm;
-      border-radius: $border_rad_heaviest;
-      margin: 1.5rem 0 2rem 0;
-      code {
-        background: transparent;
-        box-shadow: none;
-        border: 0;
-        color: #faf6e4;
-      }
+      @include preview_pre_codeblock;
     }
     a {
-      color: $primary;
-      border-bottom: 1px solid $primary;
-      &:hover {
-        color: $text_lt_default;
-        border-bottom: 1px solid $text_lt_default;
-      }
+      @include preview_a;
     }
     blockquote {
-      font-size: $font_larger;
-      padding: $space_sm $space_md;
-      font-style: italic;
-      p {
-        margin: 0;
-      }
+      @include preview_blockquote;
     }
     &:focus-visible {
       outline: unset;
       @include transition_default;
     }
     h1 {
-      font-size: $text_largest;
-      line-height: $text_larger;
-      font-weight: $bolder;
-      letter-spacing: $lspace_tight;
-      margin: 2.1rem 0 0 0;
+      @include preview_h1;
     }
     h2 {
-      font-size: $text_larger;
-      line-height: $text_larger;
-      font-weight: $bolder;
-      letter-spacing: $lspace_tight;
-      margin: 1.9rem 0 0 0;
+      @include preview_h2;
     }
     h3 {
-      font-size: $text_large;
-      line-height: $text_large;
-      font-weight: $bolder;
-      letter-spacing: $lspace_tight;
-      margin: 1.7rem 0 0 0;
+      @include preview_h3;
     }
     h4,
     h5,
     h6 {
-      font-size: $text_base;
-      line-height: $text_base;
-      letter-spacing: $lspace_tight;
-      font-weight: $bolder;
+      @include preview_smaller_headings;
     }
     hr {
-      margin: 2.2rem 0;
-      box-sizing: content-box;
-      overflow: hidden;
-      background: transparent;
-      border-bottom: 1px solid $transparent;
-      height: 1px;
-      padding: 0;
-      background-color: $border_light;
-      border: 0;
+      @include preview_hr;
     }
     ol {
-      margin: 1rem 0 0 0;
-      padding-left: $space_md;
-      list-style: decimal;
-      li {
-        margin: 2px 0;
-        p {
-          margin: 0;
-        }
-      }
+      @include preview_ol;
     }
     ul {
-      list-style-position: disc;
-      margin: 1rem 0 0 0;
-      padding-left: $space_md;
-      li {
-        margin: 2px 0;
-        p {
-          margin: 0;
-        }
-      }
+      @include preview_ul;
     }
   }
 }
@@ -233,3 +169,41 @@
     }
   }
 }
+.tiptap-content {
+  @include preview_first_child;
+  a {
+    @include preview_a;
+  }
+  blockquote {
+    @include preview_blockquote;
+  }
+  h1 {
+    @include preview_h1;
+  }
+  h2 {
+    @include preview_h2;
+  }
+  h3 {
+    @include preview_h3;
+  }
+  h4,
+  h5,
+  h6 {
+    @include preview_smaller_headings;
+  }
+  hr {
+    @include preview_hr;
+  }
+  ol {
+    @include preview_ol;
+  }
+  p {
+    @include preview_p;
+  }
+  pre {
+    @include preview_pre_codeblock;
+  }
+  ul {
+    @include preview_ul;
+  }
+}

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'

data/app/pb_kits/playbook/pb_timestamp/timestamp.rb

@@ -27,15 +27,6 @@ module Playbook
                      values: %w[default elapsed updated],
                      default: "default"
 
-      # Variables to use with pb_time_ago method
-      SECS_PER_MIN  = 60
-      SECS_PER_HOUR = 60 * SECS_PER_MIN
-      SECS_PER_DAY  = 24 * SECS_PER_HOUR
-      SECS_PER_WEEK = 7 * SECS_PER_DAY
-      SECS_PER_MONTH = 4 * SECS_PER_WEEK
-      SECS_PER_YEAR = 12 * SECS_PER_MONTH
-      SECS_PER_CENT = 100 * SECS_PER_YEAR
-
       def classname
         generate_classname("pb_timestamp_kit", variant_class, align)
       end
@@ -82,36 +73,10 @@ module Playbook
 
       def format_elapsed_string
         user_string = show_user ? " by #{text}" : ""
-        datetime_string = " #{pb_time_ago(pb_date_time.convert_to_timestamp)} ago"
-        datetime_string[1] = hide_updated ? datetime_string[1].upcase : datetime_string[1]
+        datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
         updated_string = hide_updated ? "" : "Last updated"
-        "#{updated_string}#{user_string}#{datetime_string}"
-      end
 
-      def pb_time_ago(value)
-        time_ago = DateTime.now.to_i - value.to_i
-        case time_ago
-        when (0...SECS_PER_MIN)
-          "a few seconds"
-        when (SECS_PER_MIN...SECS_PER_HOUR)
-          time = time_ago / SECS_PER_MIN
-          time == 1 ? "a minute" : "#{time_ago / SECS_PER_MIN} minutes"
-        when (SECS_PER_HOUR...SECS_PER_DAY)
-          time = time_ago / SECS_PER_HOUR
-          time == 1 ? "an hour" : "#{time_ago / SECS_PER_HOUR} hours"
-        when (SECS_PER_DAY...SECS_PER_WEEK)
-          time = time_ago / SECS_PER_DAY
-          time == 1 ? "a day" : "#{time_ago / SECS_PER_DAY} days"
-        when (SECS_PER_WEEK...SECS_PER_MONTH)
-          time = time_ago / SECS_PER_WEEK
-          time == 1 ? "a week" : "#{time_ago / SECS_PER_WEEK} weeks"
-        when (SECS_PER_MONTH...SECS_PER_YEAR)
-          time = time_ago / SECS_PER_MONTH
-          time == 1 ? "a month" : "#{time_ago / SECS_PER_MONTH} months"
-        when (SECS_PER_YEAR...SECS_PER_CENT)
-          time = time_ago / SECS_PER_YEAR
-          time == 1 ? "a year" : "#{time_ago / SECS_PER_YEAR} years"
-        end
+        "#{updated_string}#{user_string}#{datetime_string}"
       end
 
       def datetime_or_text