playbook_ui 14.3.2.pre.alpha.revert3614PBNTR455ganttchartPOC3783 → 14.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 44a1b715f38abf804f16fe8d5877cf7829d9e3493f2ba70ec42508655c5fb734
-  data.tar.gz: c3879cfb3ab0e8d7302c935920ff4f4207ae68c73fd3bee02aaad3c1243e6d08
+  metadata.gz: a71ebec22a46e5a072dae9a4ecfbc2582b8778b65f5b3ff612ad60f0c0ede4a1
+  data.tar.gz: c21a5e48cd1d2436fc3d2bd3bb5845fa9b5f8095ec79ef865fbc550e9e55a1c0
 SHA512:
-  metadata.gz: 8e444509f6fa5fa213075ecf733c1a6cab6cbe98ff46df6b9eb9448e88abe19b37b57de290ac0856138e93d53208063397d05f9db362748e02e156a0f3cd7c96
-  data.tar.gz: ff447403d410e13307f1f0c2efbad43f6cccddcbc85be9df612c89fe58c861892f53b2cc70567b5258409c7abd6273207888b345762067a6ffe0f1f46373240e
+  metadata.gz: 80e2f4a56c6ea0ed1decd054d326c129676e2183e5cf574cffd059e1009bf3e05b733f5b99c0753d449c2a3affc806db45b64684d5c109eb42ea8ff2330ad284
+  data.tar.gz: 0e22dea5792988151e1f06850a14373a710635169a092bdf4cacc9e05a23dfce61bd34c23334b42ab919c2085c9a32efe9af44a295acdbdf0301827ac85e3850

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_icon/icon.rb

@@ -9,7 +9,7 @@ module Playbook
       prop :border, type: Playbook::Props::Boolean,
                     default: false
       prop :fixed_width, type: Playbook::Props::Boolean,
-                         default: true
+                         default: false
       prop :flip, type: Playbook::Props::Enum,
                   values: ["horizontal", "vertical", "both", nil],
                   default: nil