rift-ds 1.0.1 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +8 -2
  3. package/components/AppLayout/AppLayout.css +13 -3
  4. package/components/AppLayout/AppLayout.d.ts +5 -1
  5. package/components/AppLayout/AppLayout.js +4 -0
  6. package/components/AppSidebar/AppSidebar.css +237 -0
  7. package/components/AppSidebar/AppSidebar.d.ts +32 -3
  8. package/components/AppSidebar/AppSidebar.js +187 -16
  9. package/components/BottomNav/BottomNav.css +417 -0
  10. package/components/BottomNav/BottomNav.d.ts +73 -0
  11. package/components/BottomNav/BottomNav.js +100 -0
  12. package/components/Chart/AreaChart.js +67 -56
  13. package/components/Chart/BarChart.js +67 -56
  14. package/components/Chart/ComboChart.js +93 -82
  15. package/components/Chart/LineChart.js +59 -48
  16. package/components/Chart/PieChart.js +56 -45
  17. package/components/Chart/RadarChart.js +60 -49
  18. package/components/Chart/RadialChart.js +70 -59
  19. package/components/Chart/ScatterChart.js +61 -50
  20. package/components/Chart/StackedBarChart.js +64 -53
  21. package/components/Chart/Treemap.js +34 -23
  22. package/components/Inspector/Inspector.css +511 -0
  23. package/components/Inspector/InspectorDropdown.d.ts +39 -0
  24. package/components/Inspector/InspectorDropdown.js +68 -0
  25. package/components/Inspector/InspectorInput.d.ts +32 -0
  26. package/components/Inspector/InspectorInput.js +52 -0
  27. package/components/Inspector/InspectorSection.d.ts +32 -0
  28. package/components/Inspector/InspectorSection.js +70 -0
  29. package/components/Inspector/InspectorSegmentedControl.d.ts +46 -0
  30. package/components/Inspector/InspectorSegmentedControl.js +62 -0
  31. package/components/Inspector/InspectorSlider.d.ts +41 -0
  32. package/components/Inspector/InspectorSlider.js +81 -0
  33. package/components/Inspector/InspectorToggleSwitch.d.ts +29 -0
  34. package/components/Inspector/InspectorToggleSwitch.js +51 -0
  35. package/components/Nav/Nav.d.ts +11 -3
  36. package/components/Nav/Nav.js +3 -2
  37. package/components/SegmentedControl/SegmentedControl.css +7 -5
  38. package/components/SidebarPanel/SidebarPanel.css +291 -0
  39. package/components/SidebarPanel/SidebarPanel.d.ts +45 -0
  40. package/components/SidebarPanel/SidebarPanel.js +166 -0
  41. package/components/Stepper/Stepper.d.ts +3 -1
  42. package/components/Stepper/Stepper.js +1 -1
  43. package/components/TopAppBar/TopAppBar.css +464 -0
  44. package/components/TopAppBar/TopAppBar.d.ts +80 -0
  45. package/components/TopAppBar/TopAppBar.js +138 -0
  46. package/components/registry.json +84 -1
  47. package/components/registry.json.d.ts +84 -1
  48. package/components/registry.json.js +2 -2
  49. package/index.d.ts +9 -0
  50. package/index.js +18 -0
  51. package/package.json +5 -1
package/components/Chart/StackedBarChart.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { useCallback } from "react";
2
+ import { useId, useCallback } from "react";
3
3
  import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar } from "recharts";
4
4
  import { getChartSeriesColors } from "./palette.js";
5
5
  import "./Chart.css";
@@ -29,6 +29,8 @@ const StackedBarChart = ({
29
29
  bare = false,
30
30
  className = ""
31
31
  }) => {
32
+ const titleId = useId();
33
+ const subtitleId = useId();
32
34
  const baseClass = "ds-chart";
33
35
  const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
34
36
  const textSecondary = getCSSVar("--color-text-secondary", "#303030");
@@ -40,58 +42,67 @@ const StackedBarChart = ({
40
42
  (props) => /* @__PURE__ */ jsx(StackedTooltip, { ...props }),
41
43
  []
42
44
  );
43
- return /* @__PURE__ */ jsxs("div", { className: classes, children: [
44
- (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
45
- /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
46
- title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
47
- subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
48
- ] }),
49
- summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
50
- /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
51
- /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
52
- ] }, i)) })
53
- ] }),
54
- /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(BarChart, { data, margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
55
- /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: gridColor }),
56
- /* @__PURE__ */ jsx(
57
- XAxis,
58
- {
59
- dataKey: xKey,
60
- tick: { fill: textSecondary, fontSize: 12 },
61
- tickLine: false,
62
- axisLine: { stroke: gridColor }
63
- }
64
- ),
65
- /* @__PURE__ */ jsx(
66
- YAxis,
67
- {
68
- tick: { fill: textSecondary, fontSize: 12 },
69
- tickLine: false,
70
- axisLine: false,
71
- tickFormatter: yAxisFormatter
72
- }
73
- ),
74
- /* @__PURE__ */ jsx(
75
- Tooltip,
76
- {
77
- content: renderTooltip,
78
- cursor: { fill: cursorColor, opacity: 0.4 }
79
- }
80
- ),
81
- series.map((s, i) => /* @__PURE__ */ jsx(
82
- Bar,
83
- {
84
- dataKey: s.dataKey,
85
- name: s.label,
86
- fill: s.color || defaultColors[i % defaultColors.length],
87
- stackId: "stack",
88
- radius: i === series.length - 1 ? [3, 3, 0, 0] : [0, 0, 0, 0],
89
- maxBarSize: 32
90
- },
91
- s.dataKey
92
- ))
93
- ] }) }) })
94
- ] });
45
+ return /* @__PURE__ */ jsxs(
46
+ "div",
47
+ {
48
+ className: classes,
49
+ role: "figure",
50
+ "aria-labelledby": title ? titleId : void 0,
51
+ "aria-describedby": subtitle ? subtitleId : void 0,
52
+ children: [
53
+ (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
54
+ /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
55
+ title && /* @__PURE__ */ jsx("h3", { id: titleId, className: `${baseClass}__title`, children: title }),
56
+ subtitle && /* @__PURE__ */ jsx("p", { id: subtitleId, className: `${baseClass}__subtitle`, children: subtitle })
57
+ ] }),
58
+ summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
59
+ /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
60
+ /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
61
+ ] }, i)) })
62
+ ] }),
63
+ /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(BarChart, { data, margin: { top: 8, right: 4, bottom: 0, left: -12 }, children: [
64
+ /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: gridColor }),
65
+ /* @__PURE__ */ jsx(
66
+ XAxis,
67
+ {
68
+ dataKey: xKey,
69
+ tick: { fill: textSecondary, fontSize: 12 },
70
+ tickLine: false,
71
+ axisLine: { stroke: gridColor }
72
+ }
73
+ ),
74
+ /* @__PURE__ */ jsx(
75
+ YAxis,
76
+ {
77
+ tick: { fill: textSecondary, fontSize: 12 },
78
+ tickLine: false,
79
+ axisLine: false,
80
+ tickFormatter: yAxisFormatter
81
+ }
82
+ ),
83
+ /* @__PURE__ */ jsx(
84
+ Tooltip,
85
+ {
86
+ content: renderTooltip,
87
+ cursor: { fill: cursorColor, opacity: 0.4 }
88
+ }
89
+ ),
90
+ series.map((s, i) => /* @__PURE__ */ jsx(
91
+ Bar,
92
+ {
93
+ dataKey: s.dataKey,
94
+ name: s.label,
95
+ fill: s.color || defaultColors[i % defaultColors.length],
96
+ stackId: "stack",
97
+ radius: i === series.length - 1 ? [3, 3, 0, 0] : [0, 0, 0, 0],
98
+ maxBarSize: 32
99
+ },
100
+ s.dataKey
101
+ ))
102
+ ] }) }) })
103
+ ]
104
+ }
105
+ );
95
106
  };
96
107
  export {
97
108
  StackedBarChart
package/components/Chart/Treemap.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { useCallback } from "react";
2
+ import { useId, useCallback } from "react";
3
3
  import { ResponsiveContainer, Treemap as Treemap$1, Tooltip } from "recharts";
4
4
  import { getChartSeriesColors } from "./palette.js";
5
5
  import "./Chart.css";
@@ -60,6 +60,8 @@ const Treemap = ({
60
60
  bare = false,
61
61
  className = ""
62
62
  }) => {
63
+ const titleId = useId();
64
+ const subtitleId = useId();
63
65
  const baseClass = "ds-chart";
64
66
  const classes = [baseClass, bare ? `${baseClass}--bare` : "", className].filter(Boolean).join(" ");
65
67
  const renderTooltip = useCallback(
@@ -67,28 +69,37 @@ const Treemap = ({
67
69
  (props) => /* @__PURE__ */ jsx(TreemapTooltip, { ...props }),
68
70
  []
69
71
  );
70
- return /* @__PURE__ */ jsxs("div", { className: classes, children: [
71
- (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
72
- /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
73
- title && /* @__PURE__ */ jsx("h3", { className: `${baseClass}__title`, children: title }),
74
- subtitle && /* @__PURE__ */ jsx("p", { className: `${baseClass}__subtitle`, children: subtitle })
75
- ] }),
76
- summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
77
- /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
78
- /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
79
- ] }, i)) })
80
- ] }),
81
- /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsx(
82
- Treemap$1,
83
- {
84
- data,
85
- dataKey,
86
- aspectRatio: 4 / 3,
87
- content: /* @__PURE__ */ jsx(TreemapContent, {}),
88
- children: /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip })
89
- }
90
- ) }) })
91
- ] });
72
+ return /* @__PURE__ */ jsxs(
73
+ "div",
74
+ {
75
+ className: classes,
76
+ role: "figure",
77
+ "aria-labelledby": title ? titleId : void 0,
78
+ "aria-describedby": subtitle ? subtitleId : void 0,
79
+ children: [
80
+ (title || subtitle || summaryItems) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
81
+ /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header-text`, children: [
82
+ title && /* @__PURE__ */ jsx("h3", { id: titleId, className: `${baseClass}__title`, children: title }),
83
+ subtitle && /* @__PURE__ */ jsx("p", { id: subtitleId, className: `${baseClass}__subtitle`, children: subtitle })
84
+ ] }),
85
+ summaryItems && summaryItems.length > 0 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__summary`, children: summaryItems.map((item, i) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__summary-item`, children: [
86
+ /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-label`, children: item.label }),
87
+ /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary-value`, children: typeof item.value === "number" ? item.value.toLocaleString() : item.value })
88
+ ] }, i)) })
89
+ ] }),
90
+ /* @__PURE__ */ jsx("div", { className: `${baseClass}__body`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsx(
91
+ Treemap$1,
92
+ {
93
+ data,
94
+ dataKey,
95
+ aspectRatio: 4 / 3,
96
+ content: /* @__PURE__ */ jsx(TreemapContent, {}),
97
+ children: /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip })
98
+ }
99
+ ) }) })
100
+ ]
101
+ }
102
+ );
92
103
  };
93
104
  export {
94
105
  Treemap