@babylonjs/shared-ui-components 5.31.1 → 5.32.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.
- package/components/Button.d.ts +2 -1
- package/components/Button.js +2 -2
- package/components/Button.js.map +1 -1
- package/components/Button.modules.scss +5 -0
- package/components/Icon.js +1 -1
- package/components/Icon.js.map +1 -1
- package/components/TextInputWithSubmit.d.ts +12 -0
- package/components/TextInputWithSubmit.js +31 -0
- package/components/TextInputWithSubmit.js.map +1 -0
- package/components/TextInputWithSubmit.modules.scss +22 -0
- package/components/lines/OptionsLineComponent.d.ts +20 -0
- package/components/lines/OptionsLineComponent.js +39 -0
- package/components/lines/OptionsLineComponent.js.map +1 -0
- package/components/lines/OptionsLineComponent.modules.scss +12 -0
- package/lines/lineContainerComponent.js +3 -0
- package/lines/lineContainerComponent.js.map +1 -1
- package/lines/optionsLineComponent.d.ts +0 -11
- package/lines/optionsLineComponent.js +8 -56
- package/lines/optionsLineComponent.js.map +1 -1
- package/nodeGraphSystem/graphFrame.js +1 -1
- package/nodeGraphSystem/graphFrame.js.map +1 -1
- package/package.json +3 -1
- package/stories/bars/CommandBarComponent.stories.d.ts +4 -6
- package/stories/bars/CommandBarComponent.stories.js.map +1 -1
- package/stories/bars/CommandButtonComponent.stories.d.ts +3 -1
- package/stories/bars/CommandButtonComponent.stories.js.map +1 -1
- package/stories/colorPicker/ColorPicker.stories.d.ts +2 -6
- package/stories/colorPicker/ColorPicker.stories.js.map +1 -1
- package/stories/layout/FlexibleGridLayout.stories.d.ts +4 -40
- package/stories/layout/FlexibleGridLayout.stories.js +6 -6
- package/stories/layout/FlexibleGridLayout.stories.js.map +1 -1
- package/stories/lines/ColorLineComponent.stories.d.ts +2 -16
- package/stories/lines/ColorLineComponent.stories.js.map +1 -1
- package/stories/lines/ColorPickerLineComponent.stories.d.ts +2 -9
- package/stories/lines/ColorPickerLineComponent.stories.js.map +1 -1
- package/stories/lines/FileButtonLineComponent.stories.d.ts +2 -1
- package/stories/lines/FileButtonLineComponent.stories.js.map +1 -1
- package/stories/lines/NumericInputComponent.stories.d.ts +2 -6
- package/stories/lines/NumericInputComponent.stories.js.map +1 -1
- package/stories/lines/OptionsLineComponent.stories.d.ts +10 -0
- package/stories/lines/OptionsLineComponent.stories.js +37 -0
- package/stories/lines/OptionsLineComponent.stories.js.map +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@babylonjs/shared-ui-components",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.32.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"module": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -31,6 +31,8 @@
|
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"@babylonjs/core": "^5.22.0",
|
|
33
33
|
"@babylonjs/gui": "^5.22.0",
|
|
34
|
+
"@types/dagre": "^0.7.47",
|
|
35
|
+
"dagre": "^0.8.5",
|
|
34
36
|
"react": "^17.0.2",
|
|
35
37
|
"react-dnd": "15.0.1",
|
|
36
38
|
"react-dnd-touch-backend": "15.0.1",
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { CommandBarComponent } from "../../components/bars/CommandBarComponent";
|
|
3
|
+
import type { StoryObj } from "@storybook/react";
|
|
2
4
|
declare const _default: {
|
|
3
5
|
component: import("react").FC<import("../../components/bars/CommandBarComponent").ICommandBarComponentProps>;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const Default:
|
|
7
|
-
export declare const WithArtboardColor:
|
|
8
|
-
parameters: {
|
|
9
|
-
onArtboardColorChanged: (color: string) => void;
|
|
10
|
-
};
|
|
11
|
-
};
|
|
8
|
+
export declare const Default: StoryObj<typeof CommandBarComponent>;
|
|
9
|
+
export declare const WithArtboardColor: StoryObj<typeof CommandBarComponent>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandBarComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/bars/CommandBarComponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;
|
|
1
|
+
{"version":3,"file":"CommandBarComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/bars/CommandBarComponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAGhF,eAAe,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;AAElD,8BAA8B;AAC9B,MAAM,CAAC,MAAM,OAAO,GAAyC,EAAE,CAAC;AAEhE,MAAM,mBAAmB,GAAG,CAAC,KAAa,EAAE,EAAE;IAC1C,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AACpC,CAAC,CAAC;AAEF,sBAAsB;AACtB,MAAM,CAAC,MAAM,iBAAiB,GAAyC;IACnE,GAAG,OAAO;IACV,UAAU,EAAE,EAAE,sBAAsB,EAAE,mBAAmB,EAAE;CAC9D,CAAC","sourcesContent":["import { CommandBarComponent } from \"../../components/bars/CommandBarComponent\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default { component: CommandBarComponent };\r\n\r\n// Default rendering function.\r\nexport const Default: StoryObj<typeof CommandBarComponent> = {};\r\n\r\nconst artBoardColorChange = (color: string) => {\r\n console.log(\"new color\", color);\r\n};\r\n\r\n// With Artboard color\r\nexport const WithArtboardColor: StoryObj<typeof CommandBarComponent> = {\r\n ...Default,\r\n parameters: { onArtboardColorChanged: artBoardColorChange },\r\n};\r\n"]}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { CommandButtonComponent } from "../../components/bars/CommandButtonComponent";
|
|
3
|
+
import type { StoryObj } from "@storybook/react";
|
|
2
4
|
declare const _default: {
|
|
3
5
|
component: import("react").FC<import("../../components/bars/CommandButtonComponent").ICommandButtonComponentProps>;
|
|
4
6
|
};
|
|
5
7
|
export default _default;
|
|
6
|
-
export declare const Default:
|
|
8
|
+
export declare const Default: StoryObj<typeof CommandButtonComponent>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandButtonComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/bars/CommandButtonComponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;
|
|
1
|
+
{"version":3,"file":"CommandButtonComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/bars/CommandButtonComponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAC;AAGtF,eAAe;IACX,SAAS,EAAE,sBAAsB;CACpC,CAAC;AAEF,6BAA6B;AAC7B,MAAM,CAAC,MAAM,OAAO,GAA4C,EAAE,CAAC","sourcesContent":["import { CommandButtonComponent } from \"../../components/bars/CommandButtonComponent\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default {\r\n component: CommandButtonComponent,\r\n};\r\n\r\n// Default rendering function\r\nexport const Default: StoryObj<typeof CommandButtonComponent> = {};\r\n"]}
|
|
@@ -1,11 +1,7 @@
|
|
|
1
|
-
import { Color3 } from "@babylonjs/core/Maths/math.color.js";
|
|
2
1
|
import { ColorPicker } from "../../components/colorPicker/ColorPicker";
|
|
2
|
+
import type { StoryObj } from "@storybook/react";
|
|
3
3
|
declare const _default: {
|
|
4
4
|
component: typeof ColorPicker;
|
|
5
5
|
};
|
|
6
6
|
export default _default;
|
|
7
|
-
export declare const Default:
|
|
8
|
-
args: {
|
|
9
|
-
color: Color3;
|
|
10
|
-
};
|
|
11
|
-
};
|
|
7
|
+
export declare const Default: StoryObj<typeof ColorPicker>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPicker.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/colorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,4CAA8B;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;
|
|
1
|
+
{"version":3,"file":"ColorPicker.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/colorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,4CAA8B;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAGvE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;AAE1C,MAAM,CAAC,MAAM,OAAO,GAAiC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC","sourcesContent":["import { Color3 } from \"core/Maths/math.color\";\r\nimport { ColorPicker } from \"../../components/colorPicker/ColorPicker\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default { component: ColorPicker };\r\n\r\nexport const Default: StoryObj<typeof ColorPicker> = { args: { color: new Color3(1, 0, 0) } };\r\n"]}
|
|
@@ -1,46 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { IFlexibleGridLayoutProps } from "../../components/layout/FlexibleGridLayout";
|
|
3
|
+
import { FlexibleGridLayout } from "../../components/layout/FlexibleGridLayout";
|
|
4
|
+
import type { StoryObj } from "@storybook/react";
|
|
3
5
|
declare const _default: {
|
|
4
6
|
component: import("react").FC<IFlexibleGridLayoutProps>;
|
|
5
7
|
};
|
|
6
8
|
export default _default;
|
|
7
|
-
export declare const Default:
|
|
8
|
-
|
|
9
|
-
args: {
|
|
10
|
-
layoutDefinition: {
|
|
11
|
-
columns: {
|
|
12
|
-
id: string;
|
|
13
|
-
width: string;
|
|
14
|
-
rows: {
|
|
15
|
-
id: string;
|
|
16
|
-
height: string;
|
|
17
|
-
selectedTab: string;
|
|
18
|
-
tabs: {
|
|
19
|
-
id: string;
|
|
20
|
-
component: JSX.Element;
|
|
21
|
-
}[];
|
|
22
|
-
}[];
|
|
23
|
-
}[];
|
|
24
|
-
};
|
|
25
|
-
};
|
|
26
|
-
};
|
|
27
|
-
export declare const TwoColumn: {
|
|
28
|
-
render: (props: IFlexibleGridLayoutProps) => JSX.Element;
|
|
29
|
-
args: {
|
|
30
|
-
layoutDefinition: {
|
|
31
|
-
columns: {
|
|
32
|
-
id: string;
|
|
33
|
-
width: string;
|
|
34
|
-
rows: {
|
|
35
|
-
id: string;
|
|
36
|
-
height: string;
|
|
37
|
-
selectedTab: string;
|
|
38
|
-
tabs: {
|
|
39
|
-
id: string;
|
|
40
|
-
component: JSX.Element;
|
|
41
|
-
}[];
|
|
42
|
-
}[];
|
|
43
|
-
}[];
|
|
44
|
-
};
|
|
45
|
-
};
|
|
46
|
-
};
|
|
9
|
+
export declare const Default: StoryObj<typeof FlexibleGridLayout>;
|
|
10
|
+
export declare const TwoColumn: StoryObj<typeof FlexibleGridLayout>;
|
|
@@ -12,8 +12,8 @@ export const Default = {
|
|
|
12
12
|
id: "column1",
|
|
13
13
|
width: "100%",
|
|
14
14
|
rows: [
|
|
15
|
-
{ id: "row1", height: "50%", selectedTab: "tab1", tabs: [{ id: "tab1", component: _jsx("div", { children: "Test tab 1" }) }] },
|
|
16
|
-
{ id: "row2", height: "50%", selectedTab: "tab2", tabs: [{ id: "tab2", component: _jsx("div", { children: "Test tab 2" }) }] },
|
|
15
|
+
{ id: "row1", height: "50%", selectedTab: "tab1", tabs: [{ id: "tab1", component: _jsx("div", { children: "Test tab 1" }), title: "Tab title 1" }] },
|
|
16
|
+
{ id: "row2", height: "50%", selectedTab: "tab2", tabs: [{ id: "tab2", component: _jsx("div", { children: "Test tab 2" }), title: "Tab 2" }] },
|
|
17
17
|
],
|
|
18
18
|
},
|
|
19
19
|
],
|
|
@@ -29,16 +29,16 @@ export const TwoColumn = {
|
|
|
29
29
|
id: "column1",
|
|
30
30
|
width: "50%",
|
|
31
31
|
rows: [
|
|
32
|
-
{ id: "row1", height: "50%", selectedTab: "tab1", tabs: [{ id: "tab1", component: _jsx("div", { children: "Test tab 1" }) }] },
|
|
33
|
-
{ id: "row2", height: "50%", selectedTab: "tab2", tabs: [{ id: "tab2", component: _jsx("div", { children: "Test tab 2" }) }] },
|
|
32
|
+
{ id: "row1", height: "50%", selectedTab: "tab1", tabs: [{ id: "tab1", component: _jsx("div", { children: "Test tab 1" }), title: "T1" }] },
|
|
33
|
+
{ id: "row2", height: "50%", selectedTab: "tab2", tabs: [{ id: "tab2", component: _jsx("div", { children: "Test tab 2" }), title: "T2" }] },
|
|
34
34
|
],
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
37
|
id: "column2",
|
|
38
38
|
width: "50%",
|
|
39
39
|
rows: [
|
|
40
|
-
{ id: "row1", height: "50%", selectedTab: "tab1", tabs: [{ id: "tab1", component: _jsx("div", { children: "Test tab 1" }) }] },
|
|
41
|
-
{ id: "row2", height: "50%", selectedTab: "tab2", tabs: [{ id: "tab2", component: _jsx("div", { children: "Test tab 2" }) }] },
|
|
40
|
+
{ id: "row1", height: "50%", selectedTab: "tab1", tabs: [{ id: "tab1", component: _jsx("div", { children: "Test tab 1" }), title: "T3" }] },
|
|
41
|
+
{ id: "row2", height: "50%", selectedTab: "tab2", tabs: [{ id: "tab2", component: _jsx("div", { children: "Test tab 2" }), title: "T4" }] },
|
|
42
42
|
],
|
|
43
43
|
},
|
|
44
44
|
],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlexibleGridLayout.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/layout/FlexibleGridLayout.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;
|
|
1
|
+
{"version":3,"file":"FlexibleGridLayout.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/layout/FlexibleGridLayout.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAGhF,eAAe,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;AAEjD,MAAM,CAAC,MAAM,OAAO,GAAwC;IACxD,MAAM,EAAE,CAAC,KAA+B,EAAE,EAAE;QACxC,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,YAC1C,KAAC,kBAAkB,OAAK,KAAK,GAAI,GAC/B,CACT,CAAC;IACN,CAAC;IACD,IAAI,EAAE;QACF,gBAAgB,EAAE;YACd,OAAO,EAAE;gBACL;oBACI,EAAE,EAAE,SAAS;oBACb,KAAK,EAAE,MAAM;oBACb,IAAI,EAAE;wBACF,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,EAAE;wBAClI,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE;qBAC/H;iBACJ;aACJ;SACJ;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAwC;IAC1D,MAAM,EAAE,OAAO,CAAC,MAAM;IACtB,IAAI,EAAE;QACF,gBAAgB,EAAE;YACd,OAAO,EAAE;gBACL;oBACI,EAAE,EAAE,SAAS;oBACb,KAAK,EAAE,KAAK;oBACZ,IAAI,EAAE;wBACF,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE;wBACzH,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE;qBAC5H;iBACJ;gBACD;oBACI,EAAE,EAAE,SAAS;oBACb,KAAK,EAAE,KAAK;oBACZ,IAAI,EAAE;wBACF,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE;wBACzH,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,uCAAqB,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE;qBAC5H;iBACJ;aACJ;SACJ;KACJ;CACJ,CAAC","sourcesContent":["import type { IFlexibleGridLayoutProps } from \"../../components/layout/FlexibleGridLayout\";\r\nimport { FlexibleGridLayout } from \"../../components/layout/FlexibleGridLayout\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default { component: FlexibleGridLayout };\r\n\r\nexport const Default: StoryObj<typeof FlexibleGridLayout> = {\r\n render: (props: IFlexibleGridLayoutProps) => {\r\n return (\r\n <div style={{ width: \"100%\", height: \"500px\" }}>\r\n <FlexibleGridLayout {...props} />\r\n </div>\r\n );\r\n },\r\n args: {\r\n layoutDefinition: {\r\n columns: [\r\n {\r\n id: \"column1\",\r\n width: \"100%\",\r\n rows: [\r\n { id: \"row1\", height: \"50%\", selectedTab: \"tab1\", tabs: [{ id: \"tab1\", component: <div>Test tab 1</div>, title: \"Tab title 1\" }] },\r\n { id: \"row2\", height: \"50%\", selectedTab: \"tab2\", tabs: [{ id: \"tab2\", component: <div>Test tab 2</div>, title: \"Tab 2\" }] },\r\n ],\r\n },\r\n ],\r\n },\r\n },\r\n};\r\n\r\nexport const TwoColumn: StoryObj<typeof FlexibleGridLayout> = {\r\n render: Default.render,\r\n args: {\r\n layoutDefinition: {\r\n columns: [\r\n {\r\n id: \"column1\",\r\n width: \"50%\",\r\n rows: [\r\n { id: \"row1\", height: \"50%\", selectedTab: \"tab1\", tabs: [{ id: \"tab1\", component: <div>Test tab 1</div>, title: \"T1\" }] },\r\n { id: \"row2\", height: \"50%\", selectedTab: \"tab2\", tabs: [{ id: \"tab2\", component: <div>Test tab 2</div>, title: \"T2\" }] },\r\n ],\r\n },\r\n {\r\n id: \"column2\",\r\n width: \"50%\",\r\n rows: [\r\n { id: \"row1\", height: \"50%\", selectedTab: \"tab1\", tabs: [{ id: \"tab1\", component: <div>Test tab 1</div>, title: \"T3\" }] },\r\n { id: \"row2\", height: \"50%\", selectedTab: \"tab2\", tabs: [{ id: \"tab2\", component: <div>Test tab 2</div>, title: \"T4\" }] },\r\n ],\r\n },\r\n ],\r\n },\r\n },\r\n};\r\n"]}
|
|
@@ -1,21 +1,7 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Observable } from "@babylonjs/core/Misc/observable.js";
|
|
3
|
-
import type { PropertyChangedEvent } from "../../propertyChangedEvent";
|
|
4
|
-
import type { IColorLineComponentProps } from "../../components/lines/ColorLineComponent";
|
|
5
1
|
import { ColorLineComponent } from "../../components/lines/ColorLineComponent";
|
|
2
|
+
import type { StoryObj } from "@storybook/react";
|
|
6
3
|
declare const _default: {
|
|
7
4
|
component: typeof ColorLineComponent;
|
|
8
5
|
};
|
|
9
6
|
export default _default;
|
|
10
|
-
export declare const Default:
|
|
11
|
-
render: (args: IColorLineComponentProps) => JSX.Element;
|
|
12
|
-
args: {
|
|
13
|
-
target: {};
|
|
14
|
-
label: string;
|
|
15
|
-
propertyName: string;
|
|
16
|
-
lockObject: {
|
|
17
|
-
lock: boolean;
|
|
18
|
-
};
|
|
19
|
-
onPropertyChangedObservable: Observable<PropertyChangedEvent>;
|
|
20
|
-
};
|
|
21
|
-
};
|
|
7
|
+
export declare const Default: StoryObj<typeof ColorLineComponent>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorLineComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/ColorLineComponent.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,2CAA6B;AAGlD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;
|
|
1
|
+
{"version":3,"file":"ColorLineComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/ColorLineComponent.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,2CAA6B;AAGlD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAG/E,eAAe,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;AAEjD,MAAM,yBAAyB,GAAG,IAAI,UAAU,EAAwB,CAAC;AAEzE,MAAM,CAAC,MAAM,OAAO,GAAwC;IACxD,MAAM,EAAE,CAAC,IAA8B,EAAE,EAAE,CAAC,CACxC,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,YACpE,KAAC,kBAAkB,OAAK,IAAI,GAAI,GAC9B,CACT;IACD,IAAI,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,2BAA2B,EAAE,yBAAyB,EAAE;CACjJ,CAAC","sourcesContent":["import { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../../propertyChangedEvent\";\r\nimport type { IColorLineComponentProps } from \"../../components/lines/ColorLineComponent\";\r\nimport { ColorLineComponent } from \"../../components/lines/ColorLineComponent\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default { component: ColorLineComponent };\r\n\r\nconst propertyChangedObservable = new Observable<PropertyChangedEvent>();\r\n\r\nexport const Default: StoryObj<typeof ColorLineComponent> = {\r\n render: (args: IColorLineComponentProps) => (\r\n <div style={{ width: \"100%\", display: \"flex\", justifyContent: \"center\" }}>\r\n <ColorLineComponent {...args} />\r\n </div>\r\n ),\r\n args: { target: {}, label: \"test\", propertyName: \"test\", lockObject: { lock: false }, onPropertyChangedObservable: propertyChangedObservable },\r\n};\r\n"]}
|
|
@@ -1,14 +1,7 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Color3 } from "@babylonjs/core/Maths/math.color.js";
|
|
3
|
-
import type { IColorPickerComponentProps } from "../../components/lines/ColorPickerLineComponent";
|
|
4
1
|
import { ColorPickerLineComponent } from "../../components/lines/ColorPickerLineComponent";
|
|
2
|
+
import type { StoryObj } from "@storybook/react";
|
|
5
3
|
declare const _default: {
|
|
6
4
|
component: typeof ColorPickerLineComponent;
|
|
7
5
|
};
|
|
8
6
|
export default _default;
|
|
9
|
-
export declare const Default:
|
|
10
|
-
render: (args: IColorPickerComponentProps) => JSX.Element;
|
|
11
|
-
args: {
|
|
12
|
-
value: Color3;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
7
|
+
export declare const Default: StoryObj<typeof ColorPickerLineComponent>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerLineComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/ColorPickerLineComponent.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,4CAA8B;AAE/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,iDAAiD,CAAC;
|
|
1
|
+
{"version":3,"file":"ColorPickerLineComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/ColorPickerLineComponent.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,4CAA8B;AAE/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,iDAAiD,CAAC;AAG3F,eAAe;IACX,SAAS,EAAE,wBAAwB;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA8C;IAC9D,MAAM,EAAE,CAAC,IAAgC,EAAE,EAAE,CAAC,CAC1C,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,YACpE,KAAC,wBAAwB,OAAK,IAAI,GAAI,GACpC,CACT;IACD,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;CACvC,CAAC","sourcesContent":["import { Color3 } from \"core/Maths/math.color\";\r\nimport type { IColorPickerComponentProps } from \"../../components/lines/ColorPickerLineComponent\";\r\nimport { ColorPickerLineComponent } from \"../../components/lines/ColorPickerLineComponent\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default {\r\n component: ColorPickerLineComponent,\r\n};\r\n\r\nexport const Default: StoryObj<typeof ColorPickerLineComponent> = {\r\n render: (args: IColorPickerComponentProps) => (\r\n <div style={{ width: \"100%\", display: \"flex\", justifyContent: \"center\" }}>\r\n <ColorPickerLineComponent {...args} />\r\n </div>\r\n ),\r\n args: { value: new Color3(1, 0, 0) },\r\n};\r\n"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { FileButtonLineComponent } from "../../components/lines/FileButtonLineComponent";
|
|
2
|
+
import type { StoryObj } from "@storybook/react";
|
|
2
3
|
declare const _default: {
|
|
3
4
|
component: typeof FileButtonLineComponent;
|
|
4
5
|
};
|
|
5
6
|
export default _default;
|
|
6
|
-
export declare const Default:
|
|
7
|
+
export declare const Default: StoryObj<typeof FileButtonLineComponent>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileButtonLineComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/FileButtonLineComponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;
|
|
1
|
+
{"version":3,"file":"FileButtonLineComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/FileButtonLineComponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AAGzF,eAAe;IACX,SAAS,EAAE,uBAAuB;CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA6C,EAAE,CAAC","sourcesContent":["import { FileButtonLineComponent } from \"../../components/lines/FileButtonLineComponent\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default {\r\n component: FileButtonLineComponent,\r\n};\r\n\r\nexport const Default: StoryObj<typeof FileButtonLineComponent> = {};\r\n"]}
|
|
@@ -1,11 +1,7 @@
|
|
|
1
1
|
import { NumericInputComponent } from "../../components/lines/NumericInputComponent";
|
|
2
|
+
import type { StoryObj } from "@storybook/react";
|
|
2
3
|
declare const _default: {
|
|
3
4
|
component: typeof NumericInputComponent;
|
|
4
5
|
};
|
|
5
6
|
export default _default;
|
|
6
|
-
export declare const Default:
|
|
7
|
-
args: {
|
|
8
|
-
label: string;
|
|
9
|
-
value: number;
|
|
10
|
-
};
|
|
11
|
-
};
|
|
7
|
+
export declare const Default: StoryObj<typeof NumericInputComponent>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumericInputComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/NumericInputComponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAC;
|
|
1
|
+
{"version":3,"file":"NumericInputComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/NumericInputComponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAC;AAGrF,eAAe,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;AAEpD,MAAM,CAAC,MAAM,OAAO,GAA2C;IAC3D,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE;CACpC,CAAC","sourcesContent":["import { NumericInputComponent } from \"../../components/lines/NumericInputComponent\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default { component: NumericInputComponent };\r\n\r\nexport const Default: StoryObj<typeof NumericInputComponent> = {\r\n args: { label: \"test\", value: 1 },\r\n};\r\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { StoryObj } from "@storybook/react";
|
|
3
|
+
declare const _default: {
|
|
4
|
+
component: (props: import("../../components/lines/OptionsLineComponent").IOptionsLineComponentProps) => JSX.Element;
|
|
5
|
+
};
|
|
6
|
+
export default _default;
|
|
7
|
+
declare const RenderComponent: (args: any) => JSX.Element;
|
|
8
|
+
export declare const Default: StoryObj<typeof RenderComponent>;
|
|
9
|
+
export declare const WithCustomOptions: StoryObj<typeof RenderComponent>;
|
|
10
|
+
export declare const WithValidation: StoryObj<typeof RenderComponent>;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { OptionsLineComponent } from "../../components/lines/OptionsLineComponent.js";
|
|
4
|
+
export default { component: OptionsLineComponent };
|
|
5
|
+
const RenderComponent = (args) => {
|
|
6
|
+
const [options, setOptions] = useState(args.initialOptions);
|
|
7
|
+
const [selectedOptionValue, setSelectedOptionValue] = useState(args.initialSelectedOptionValue);
|
|
8
|
+
const onOptionSelected = (selectedOptionValue) => {
|
|
9
|
+
setSelectedOptionValue(selectedOptionValue);
|
|
10
|
+
};
|
|
11
|
+
const onOptionAdded = (newOption) => {
|
|
12
|
+
setOptions([...options, newOption]);
|
|
13
|
+
};
|
|
14
|
+
return (_jsxs("div", { style: { width: "200px" }, children: [_jsx(OptionsLineComponent, { options: options, onOptionSelected: onOptionSelected, selectedOptionValue: selectedOptionValue, onOptionAdded: args.customAdd ? onOptionAdded : undefined, addOptionPlaceholder: args.addOptionPlaceholder, validateNewOptionValue: args.validateNewOptionValue }), _jsxs("div", { children: [_jsx("h3", { children: "Selected option value:" }), _jsx("div", { children: selectedOptionValue })] })] }));
|
|
15
|
+
};
|
|
16
|
+
export const Default = {
|
|
17
|
+
render: (args) => {
|
|
18
|
+
return _jsx(RenderComponent, { ...args });
|
|
19
|
+
},
|
|
20
|
+
args: {
|
|
21
|
+
initialOptions: [
|
|
22
|
+
{ label: "Option 1", value: "option1", id: "1" },
|
|
23
|
+
{ label: "Option 2", value: "option2", id: "2" },
|
|
24
|
+
{ label: "Option 3", value: "option3", id: "3" },
|
|
25
|
+
],
|
|
26
|
+
initialSelectedOptionValue: "option1",
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
export const WithCustomOptions = {
|
|
30
|
+
render: Default.render,
|
|
31
|
+
args: { ...Default.args, customAdd: true, addOptionPlaceholder: "This is a placeholder" },
|
|
32
|
+
};
|
|
33
|
+
export const WithValidation = {
|
|
34
|
+
render: Default.render,
|
|
35
|
+
args: { ...Default.args, customAdd: true, addOptionPlaceholder: "Valid: length > 3", validateNewOptionValue: (value) => value.length > 3 },
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=OptionsLineComponent.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OptionsLineComponent.stories.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/stories/lines/OptionsLineComponent.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AAGnF,eAAe,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;AAEnD,MAAM,eAAe,GAAG,CAAC,IAAS,EAAE,EAAE;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC5D,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;IAEhG,MAAM,gBAAgB,GAAG,CAAC,mBAA2B,EAAE,EAAE;QACrD,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;IAChD,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,SAAc,EAAE,EAAE;QACrC,UAAU,CAAC,CAAC,GAAG,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,aAC1B,KAAC,oBAAoB,IACjB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,mBAAmB,EAAE,mBAAmB,EACxC,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EACzD,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,GACrD,EACF,0BACI,kDAA+B,EAC/B,wBAAM,mBAAmB,GAAO,IAC9B,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAqC;IACrD,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE;QAClB,OAAO,KAAC,eAAe,OAAK,IAAI,GAAI,CAAC;IACzC,CAAC;IACD,IAAI,EAAE;QACF,cAAc,EAAE;YACZ,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,EAAE;YAChD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,EAAE;YAChD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,EAAE;SACnD;QACD,0BAA0B,EAAE,SAAS;KACxC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAqC;IAC/D,MAAM,EAAE,OAAO,CAAC,MAAM;IACtB,IAAI,EAAE,EAAE,GAAG,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,oBAAoB,EAAE,uBAAuB,EAAE;CAC5F,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAqC;IAC5D,MAAM,EAAE,OAAO,CAAC,MAAM;IACtB,IAAI,EAAE,EAAE,GAAG,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;CACrJ,CAAC","sourcesContent":["import { useState } from \"react\";\r\nimport { OptionsLineComponent } from \"../../components/lines/OptionsLineComponent\";\r\nimport type { StoryObj } from \"@storybook/react\";\r\n\r\nexport default { component: OptionsLineComponent };\r\n\r\nconst RenderComponent = (args: any) => {\r\n const [options, setOptions] = useState(args.initialOptions);\r\n const [selectedOptionValue, setSelectedOptionValue] = useState(args.initialSelectedOptionValue);\r\n\r\n const onOptionSelected = (selectedOptionValue: string) => {\r\n setSelectedOptionValue(selectedOptionValue);\r\n };\r\n\r\n const onOptionAdded = (newOption: any) => {\r\n setOptions([...options, newOption]);\r\n };\r\n\r\n return (\r\n <div style={{ width: \"200px\" }}>\r\n <OptionsLineComponent\r\n options={options}\r\n onOptionSelected={onOptionSelected}\r\n selectedOptionValue={selectedOptionValue}\r\n onOptionAdded={args.customAdd ? onOptionAdded : undefined}\r\n addOptionPlaceholder={args.addOptionPlaceholder} // Placeholder text to display when adding a new option\r\n validateNewOptionValue={args.validateNewOptionValue} // Optional function that can be used to validate the value of a new option\r\n />\r\n <div>\r\n <h3>Selected option value:</h3>\r\n <div>{selectedOptionValue}</div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nexport const Default: StoryObj<typeof RenderComponent> = {\r\n render: (args: any) => {\r\n return <RenderComponent {...args} />;\r\n },\r\n args: {\r\n initialOptions: [\r\n { label: \"Option 1\", value: \"option1\", id: \"1\" },\r\n { label: \"Option 2\", value: \"option2\", id: \"2\" },\r\n { label: \"Option 3\", value: \"option3\", id: \"3\" },\r\n ],\r\n initialSelectedOptionValue: \"option1\",\r\n },\r\n};\r\n\r\nexport const WithCustomOptions: StoryObj<typeof RenderComponent> = {\r\n render: Default.render,\r\n args: { ...Default.args, customAdd: true, addOptionPlaceholder: \"This is a placeholder\" },\r\n};\r\n\r\nexport const WithValidation: StoryObj<typeof RenderComponent> = {\r\n render: Default.render,\r\n args: { ...Default.args, customAdd: true, addOptionPlaceholder: \"Valid: length > 3\", validateNewOptionValue: (value: string) => value.length > 3 },\r\n};\r\n"]}
|