Skip to content

Commit 4c4227d

Browse files
plagoaplagoa
authored
docs: add Canvas section (#4749)
* docs: add `Canvas` section * chore: add Canvas examples page * chore: use Canvas from templates
1 parent adf36d6 commit 4c4227d

File tree

16 files changed

+370
-64
lines changed

16 files changed

+370
-64
lines changed

‎apps/docs/src/components/Examples.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
HvTypography,
66
} from "@hitachivantara/uikit-react-core";
77

8+
import canvas from "../pages/examples/canvas.mdx?raw";
89
import charts from "../pages/examples/charts.mdx?raw";
910
import dnd from "../pages/examples/dnd.mdx?raw";
1011
import inputs from "../pages/examples/inputs.mdx?raw";
@@ -26,6 +27,7 @@ const sections = [
2627
{ slug: "inputs", title: "Inputs", total: countCodeBlocks(inputs) },
2728
{ slug: "kpis", title: "KPIs", total: countCodeBlocks(kpis) },
2829
{ slug: "dnd", title: "Drag and Drop", total: countCodeBlocks(dnd) },
30+
{ slug: "canvas", title: "Canvas", total: countCodeBlocks(canvas) },
2931
] as const;
3032

3133
type Slug = (typeof sections)[number]["slug"];
@@ -42,6 +44,8 @@ const getSectionIcon = (title: Slug) => {
4244
return <div className="i-ph-speedometer" />;
4345
case "dnd":
4446
return <div className="i-ph-hand-swipe-right" />;
47+
case "canvas":
48+
return <div className="i-ph-flow-arrow" />;
4549
default:
4650
return null;
4751
}

‎apps/docs/src/components/code/utils.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,20 @@ import * as DndKitCore from "@dnd-kit/core";
66
import * as DndKitModifiers from "@dnd-kit/modifiers";
77
import * as DndKitSortable from "@dnd-kit/sortable";
88
import * as DndKitUtilities from "@dnd-kit/utilities";
9+
import * as emotionCss from "@emotion/css";
910
import * as hookFormZod from "@hookform/resolvers/zod";
1011
import * as materialUi from "@mui/material";
1112
import * as clsx from "clsx";
1213
import * as echartsCharts from "echarts/charts";
1314
import * as echartsCore from "echarts/core";
15+
import * as reactflow from "reactflow";
1416
import useSWR from "swr";
1517
import * as zod from "zod";
1618
import * as HvCodeEditor from "@hitachivantara/uikit-react-code-editor";
1719
import * as HvCore from "@hitachivantara/uikit-react-core";
1820
import * as HvIcons from "@hitachivantara/uikit-react-icons";
1921
import * as HvLab from "@hitachivantara/uikit-react-lab";
22+
import * as HvPentaho from "@hitachivantara/uikit-react-pentaho";
2023
import * as HvViz from "@hitachivantara/uikit-react-viz";
2124
import * as HvStyles from "@hitachivantara/uikit-styles";
2225

@@ -37,13 +40,16 @@ const defaultScope: Scope = {
3740
"@hitachivantara/uikit-react-code-editor": HvCodeEditor,
3841
"@hitachivantara/uikit-react-lab": HvLab,
3942
"@hitachivantara/uikit-react-viz": HvViz,
43+
"@hitachivantara/uikit-react-pentaho": HvPentaho,
4044
"@hitachivantara/uikit-styles": HvStyles,
45+
"@emotion/css": emotionCss,
4146
"@mui/material": materialUi,
4247
"react-table": reactTable,
4348
"react-hook-form": reactHookForm,
4449
"@hookform/resolvers/zod": hookFormZod,
4550
zod,
4651
clsx,
52+
reactflow,
4753
swr: useSWR,
4854
"echarts/core": echartsCore,
4955
"echarts/charts": echartsCharts,
@@ -81,7 +87,8 @@ export const resolveComponents = (
8187
HvIcons[identifier as keyof typeof HvIcons] ||
8288
HvCodeEditor[identifier as keyof typeof HvCodeEditor] ||
8389
HvLab[identifier as keyof typeof HvLab] ||
84-
HvViz[identifier as keyof typeof HvViz];
90+
HvViz[identifier as keyof typeof HvViz] ||
91+
HvPentaho[identifier as keyof typeof HvPentaho];
8592

8693
// Normalize input to an array of code strings
8794
const contents = typeof code === "string" ? [code] : Object.values(code);

‎apps/docs/src/pages/components/_meta.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,4 +86,14 @@ export default {
8686
dashboard: "Dashboard",
8787
"step-navigation": "Step Navigation",
8888
wizard: "Wizard",
89+
// eslint-disable-next-line sort-keys
90+
"-- Canvas": {
91+
title: "Canvas",
92+
type: "separator",
93+
},
94+
canvas: "Get Started",
95+
"canvas-bottom-panel": "Bottom Panel",
96+
"canvas-side-panel": "Side Panel",
97+
"canvas-toolbar": "Toolbar",
98+
"canvas-toolbar-tabs": "Toolbar Tabs",
8999
};

‎apps/docs/src/pages/components/canvas-bottom-panel.mdx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import {
2+
canvasBottomPanelClasses,
3+
HvCanvasBottomPanel,
4+
} from "@hitachivantara/uikit-react-pentaho";
5+
6+
import { getComponentData } from "../../utils/component";
7+
8+
import { Playground } from "../../components/code/Playground";
9+
import { Header } from "../../components/Header";
10+
11+
export const getStaticProps = async ({ params }) => {
12+
const meta = await getComponentData(
13+
"BottomPanel",
14+
"pentaho",
15+
canvasBottomPanelClasses,
16+
[],
17+
false,
18+
"Canvas",
19+
);
20+
return { props: { ssg: { meta } } };
21+
};
22+
23+
<Header />
24+
25+
## Usage
26+
27+
```tsx live
28+
export default function Demo() {
29+
return (
30+
<HvCanvasBottomPanel className="relative" open tabs={tabs}>
31+
Content
32+
</HvCanvasBottomPanel>
33+
);
34+
}
35+
36+
const tabs = [
37+
{
38+
id: 0,
39+
title: "Tab 1",
40+
},
41+
{
42+
id: 1,
43+
title: "Tab 2",
44+
},
45+
];
46+
```

‎apps/docs/src/pages/components/canvas-side-panel.mdx

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import {
2+
canvasSidePanelClasses,
3+
HvCanvasSidePanel,
4+
} from "@hitachivantara/uikit-react-pentaho";
5+
6+
import { getComponentData } from "../../utils/component";
7+
8+
import { Playground } from "../../components/code/Playground";
9+
import { Header } from "../../components/Header";
10+
11+
export const getStaticProps = async ({ params }) => {
12+
const meta = await getComponentData(
13+
"SidePanel",
14+
"pentaho",
15+
canvasSidePanelClasses,
16+
[],
17+
false,
18+
"Canvas",
19+
);
20+
return { props: { ssg: { meta } } };
21+
};
22+
23+
<Header />
24+
25+
## Usage
26+
27+
```tsx live
28+
import { useState } from "react";
29+
30+
export default function Demo() {
31+
const [tab, setTab] = useState("1");
32+
33+
return (
34+
<div className="w-full h-500px bg-bgPage relative">
35+
<HvCanvasSidePanel
36+
className="relative"
37+
defaultOpen
38+
tabs={tabs}
39+
tab={tab}
40+
onTabChange={(_, newTab) => {
41+
setTab(newTab);
42+
}}
43+
minWidth={200}
44+
maxWidth={500}
45+
initialWidth={320}
46+
labels={{
47+
open: "Open side panel",
48+
close: "Close side panel",
49+
}}
50+
>
51+
{tab === "1" && (
52+
<>
53+
This is the content of the side panel.
54+
<br />
55+
<br />
56+
Use the tabs 👆 to switch between the different content.
57+
<br />
58+
<br />
59+
Use the handle 👉 to close and open the panel.
60+
<br />
61+
<br />
62+
You can also drag the panel to resize it between a minimum and
63+
maximum widths.
64+
</>
65+
)}
66+
{tab === "2" && <>This is the content for the second tab.</>}
67+
</HvCanvasSidePanel>
68+
</div>
69+
);
70+
}
71+
72+
const tabs = [
73+
{
74+
id: "1",
75+
content: "Add Data",
76+
},
77+
{
78+
id: "2",
79+
content: "Model Structure",
80+
},
81+
];
82+
```

‎apps/docs/src/pages/components/canvas-toolbar-tabs.mdx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import {
2+
canvasToolbarTabsClasses,
3+
HvCanvasToolbarTabs,
4+
} from "@hitachivantara/uikit-react-pentaho";
5+
6+
import { getComponentData } from "../../utils/component";
7+
8+
import { Playground } from "../../components/code/Playground";
9+
import { Header } from "../../components/Header";
10+
11+
export const getStaticProps = async ({ params }) => {
12+
const meta = await getComponentData(
13+
"ToolbarTabs",
14+
"pentaho",
15+
canvasToolbarTabsClasses,
16+
[],
17+
false,
18+
"Canvas",
19+
);
20+
return { props: { ssg: { meta } } };
21+
};
22+
23+
<Header />
24+
25+
## Usage
26+
27+
```tsx live
28+
export default function Demo() {
29+
return (
30+
<HvCanvasToolbarTabs
31+
defaultTabs={[
32+
{
33+
id: "tab1",
34+
label: "My first tab",
35+
icon: <Leaf />,
36+
},
37+
{
38+
id: "tab2",
39+
label: "My tab with a very long label",
40+
icon: <Leaf />,
41+
},
42+
]}
43+
/>
44+
);
45+
}
46+
```

‎apps/docs/src/pages/components/canvas-toolbar.mdx

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import {
2+
canvasToolbarClasses,
3+
HvCanvasToolbar,
4+
} from "@hitachivantara/uikit-react-pentaho";
5+
6+
import { getComponentData } from "../../utils/component";
7+
8+
import { Playground } from "../../components/code/Playground";
9+
import { Header } from "../../components/Header";
10+
11+
export const getStaticProps = async ({ params }) => {
12+
const meta = await getComponentData(
13+
"Toolbar",
14+
"pentaho",
15+
canvasToolbarClasses,
16+
[],
17+
false,
18+
"Canvas",
19+
);
20+
return { props: { ssg: { meta } } };
21+
};
22+
23+
<Header />
24+
25+
## Usage
26+
27+
```tsx live
28+
export default function Demo() {
29+
return (
30+
<HvCanvasToolbar title="Toolbar Title" className="relative">
31+
<HvButton variant="primary">Save</HvButton>
32+
<HvButton variant="primaryGhost">Cancel</HvButton>
33+
</HvCanvasToolbar>
34+
);
35+
}
36+
```
37+
38+
## Custom content
39+
40+
You can pass any content to the toolbar's back button or title. The children of the toolbar component will be rendered within the toolbar.
41+
42+
```tsx live
43+
export default function Demo() {
44+
return (
45+
<HvCanvasToolbar
46+
className="relative"
47+
backButton={
48+
<HvButton aria-label="Back" icon>
49+
<Backwards />
50+
</HvButton>
51+
}
52+
title={<HvInlineEditor defaultValue="Toolbar Title" variant="title4" />}
53+
>
54+
<HvIconButton title="Undo">
55+
<Undo />
56+
</HvIconButton>
57+
<HvIconButton title="Redo">
58+
<Redo />
59+
</HvIconButton>
60+
<Separator />
61+
<HvIconButton title="Add">
62+
<Pod />
63+
</HvIconButton>
64+
<Separator />
65+
<HvButton variant="primary">Save</HvButton>
66+
<HvButton variant="primaryGhost">Cancel</HvButton>
67+
<Separator />
68+
<HvDropDownMenu
69+
placement="right"
70+
onClick={(e, item) => console.log(item.label)}
71+
dataList={[
72+
{ label: "Label 1", icon: <User /> },
73+
{ label: "Label 2", icon: <Calendar />, disabled: true },
74+
{ label: "Label 3", icon: <Plane /> },
75+
]}
76+
/>
77+
</HvCanvasToolbar>
78+
);
79+
}
80+
81+
const Separator = () => <div className="h-30px w-1px bg-border my-0 mx-xs" />;
82+
```

‎apps/docs/src/pages/components/canvas.mdx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# What are Canvas components?
2+
3+
Canvas components are a set of UI components designed to address specific needs of Pentaho+ applications that use
4+
a canvas-based interface. For that reason, they are available in the `@hitachivantara/uikit-react-pentaho` package.
5+
6+
## Installation
7+
8+
```sh
9+
npm install @hitachivantara/uikit-react-pentaho
10+
```
11+
12+
## Usage
13+
14+
These components are designed to be used together and react to each other. When the `SidePanel` is opened, closed or resized,
15+
the `Toolbar` and `BottomPanel` will adjust their widths accordingly.
16+
17+
For this to work, you'll need to import the `HvCanvasProvider` component:
18+
19+
```tsx
20+
import { HvCanvasProvider } from "@hitachivantara/uikit-react-pentaho";
21+
```
22+
23+
And wrap your components with it:
24+
25+
```tsx
26+
<HvCanvasProvider>
27+
<HvCanvasToolbar>...</HvCanvasToolbar>
28+
<HvCanvasSidePanel>...</HvCanvasSidePanel>
29+
<HvCanvasBottomPanel>...</HvCanvasBottomPanel>
30+
</HvCanvasProvider>
31+
```
32+
33+
A sample that exemplifies how the canvas components can be used is available
34+
[here](/examples/canvas).

‎apps/docs/src/pages/examples/_meta.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,7 @@ export default {
1717
dnd: {
1818
type: "page",
1919
},
20+
canvas: {
21+
type: "page",
22+
},
2023
};

0 commit comments

Comments
 (0)