@devtools-ui/stacked-view 0.4.0 → 0.4.1-next.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/README.md ADDED
@@ -0,0 +1,88 @@
1
+ # @devtools-ui/stacked-view
2
+
3
+ ## Overview
4
+
5
+ `@devtools-ui/stacked-view` is a component package designed to be leveraged by a [Player-UI assets plugin](https://player-ui.github.io/next/plugins).
6
+
7
+ It provides an StackedView view. A simple stacked layout composed by header, main content and footer.
8
+
9
+ ## Installation
10
+
11
+ To install `@devtools-ui/stacked-view`, you can use pnpm or yarn:
12
+
13
+ ```sh
14
+ pnpm i @devtools-ui/stacked-view
15
+ ```
16
+
17
+ or
18
+
19
+ ```sh
20
+ yarn add @devtools-ui/stacked-view
21
+ ```
22
+
23
+ ## Usage
24
+
25
+ You can leverage this asset through the `@devtools-ui/plugin`:
26
+
27
+ ```ts
28
+ import { StackedView, Text } from "@devtools-ui/plugin";
29
+
30
+ // and use it to define your Player-UI content:
31
+ myFlow = {
32
+ id: "my_flow",
33
+ views: [
34
+ <StackedView>
35
+ <StackedView.Header>
36
+ <Text>Header</Text>
37
+ </StackedView.Header>
38
+ <StackedView.Main>
39
+ <Text>Main</Text>
40
+ </StackedView.Main>
41
+ <StackedView.Footer>
42
+ <Text>Footer</Text>
43
+ </StackedView.Footer>
44
+ </StackedView>,
45
+ ],
46
+ };
47
+ ```
48
+
49
+ For more information on how to author Player-UI content using DSL, please check our [Player-UI docs](https://player-ui.github.io/next/dsl#tsxjsx-content-authoring-player-dsl).
50
+
51
+ Or, your can leverage this asset in your own plugin:
52
+
53
+ ```ts
54
+ // AssetRegistryPlugin.ts
55
+ import React from "react";
56
+ import type { Player } from "@player-ui/player";
57
+ import type {
58
+ ExtendedPlayerPlugin,
59
+ ReactPlayer,
60
+ ReactPlayerPlugin,
61
+ } from "@player-ui/react";
62
+ import { AssetProviderPlugin } from "@player-ui/asset-provider-plugin-react";
63
+ import { TransformsPlugin } from "./TransformPlugin";
64
+ import {
65
+ StackedViewAsset,
66
+ StackedViewComponent,
67
+ } from "@devtools-ui/stacked-view";
68
+
69
+ export class AssetsRegistryPlugin
70
+ implements ReactPlayerPlugin, ExtendedPlayerPlugin<[StackedViewAsset]>
71
+ {
72
+ name = "my-plugin";
73
+
74
+ applyReact(reactPlayer: ReactPlayer) {
75
+ reactPlayer.registerPlugin(
76
+ new AssetProviderPlugin([["stacked-view", StackedViewComponent]])
77
+ );
78
+ }
79
+
80
+ apply(player: Player) {
81
+ player.registerPlugin(new TransformsPlugin());
82
+ }
83
+ }
84
+ ```
85
+
86
+ ## Contributing
87
+
88
+ We welcome contributions to `@devtools-ui/stacked-view`!
@@ -67,31 +67,31 @@ var StackedViewComponent = (props) => {
67
67
 
68
68
  // ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/stacked-view/src/dsl/index.tsx
69
69
  var import_react4 = __toESM(require("react"));
70
- var import_dsl = require("@player-tools/dsl");
70
+ var import_react_dsl = require("@player-lang/react-dsl");
71
71
  var import_collection = require("@devtools-ui/collection");
72
72
  var import_text = require("@devtools-ui/text");
73
73
  var StackedView = (props) => {
74
74
  const { children, ...rest } = props;
75
- return /* @__PURE__ */ import_react4.default.createElement(import_dsl.Asset, { type: "stacked-view", ...rest }, children);
75
+ return /* @__PURE__ */ import_react4.default.createElement(import_react_dsl.Asset, { type: "stacked-view", ...rest }, children);
76
76
  };
77
77
  var CollectionComp = (props) => {
78
78
  return /* @__PURE__ */ import_react4.default.createElement(import_collection.Collection, null, /* @__PURE__ */ import_react4.default.createElement(import_collection.Collection.Values, null, props.children));
79
79
  };
80
- StackedView.Header = (0, import_dsl.createSlot)({
80
+ StackedView.Header = (0, import_react_dsl.createSlot)({
81
81
  name: "header",
82
82
  TextComp: import_text.Text,
83
83
  CollectionComp,
84
84
  isArray: false,
85
85
  wrapInAsset: true
86
86
  });
87
- StackedView.Main = (0, import_dsl.createSlot)({
87
+ StackedView.Main = (0, import_react_dsl.createSlot)({
88
88
  name: "main",
89
89
  TextComp: import_text.Text,
90
90
  CollectionComp,
91
91
  isArray: false,
92
92
  wrapInAsset: true
93
93
  });
94
- StackedView.Footer = (0, import_dsl.createSlot)({
94
+ StackedView.Footer = (0, import_react_dsl.createSlot)({
95
95
  name: "footer",
96
96
  TextComp: import_text.Text,
97
97
  CollectionComp,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/stacked-view/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/stacked-view/src/component/index.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/stacked-view/src/dsl/index.tsx"],"sourcesContent":["export * from \"./types\";\nexport * from \"./component\";\nexport * from \"./dsl\";\n","import { Grid, GridItem } from \"@chakra-ui/react\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport React from \"react\";\nimport type { StackedViewView } from \"../types\";\n\nexport const StackedViewComponent = (props: StackedViewView) => {\n const { header, main, footer } = props;\n\n return (\n <Grid\n h=\"100%\"\n gap=\"4\"\n templateAreas={'\"header\" \"main\" \"footer\"'}\n width=\"full\"\n >\n <GridItem w={\"100%\"} area={\"header\"}>\n {header && <ReactAsset {...header} />}\n </GridItem>\n <GridItem\n w={\"100%\"}\n maxHeight=\"70vh\"\n overflowX=\"auto\"\n overflowY=\"auto\"\n area={\"main\"}\n >\n {main && <ReactAsset {...main} />}\n </GridItem>\n <GridItem w={\"100%\"} overflowX=\"auto\" overflowY=\"auto\" area={\"footer\"}>\n {footer && <ReactAsset {...footer} />}\n </GridItem>\n </Grid>\n );\n};\n","import React from \"react\";\nimport { AssetPropsWithChildren, Asset, createSlot } from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { Collection } from \"@devtools-ui/collection\";\nimport { Text } from \"@devtools-ui/text\";\nimport type { StackedViewView } from \"../types\";\n\n/**\n * Defines the component DSL representation for the StackedView view.\n */\nexport const StackedView = (props: AssetPropsWithChildren<StackedViewView>) => {\n const { children, ...rest } = props;\n\n return (\n <Asset type=\"stacked-view\" {...rest}>\n {children}\n </Asset>\n );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n return (\n <Collection>\n <Collection.Values>{props.children}</Collection.Values>\n </Collection>\n );\n};\n\nStackedView.Header = createSlot({\n name: \"header\",\n TextComp: Text,\n CollectionComp,\n isArray: false,\n wrapInAsset: true,\n});\n\nStackedView.Main = createSlot({\n name: \"main\",\n TextComp: Text,\n CollectionComp,\n isArray: false,\n wrapInAsset: true,\n});\n\nStackedView.Footer = createSlot({\n name: \"footer\",\n TextComp: Text,\n CollectionComp,\n isArray: false,\n wrapInAsset: true,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA+B;AAC/B,IAAAA,gBAA2B;AAC3B,IAAAA,gBAAkB;AAGX,IAAM,uBAAuB,CAAC,UAA2B;AAC9D,QAAM,EAAE,QAAQ,MAAM,OAAO,IAAI;AAEjC,SACE,8BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,KAAI;AAAA,MACJ,eAAe;AAAA,MACf,OAAM;AAAA;AAAA,IAEN,8BAAAA,QAAA,cAAC,yBAAS,GAAG,QAAQ,MAAM,YACxB,UAAU,8BAAAA,QAAA,cAAC,4BAAY,GAAG,QAAQ,CACrC;AAAA,IACA,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACH,WAAU;AAAA,QACV,WAAU;AAAA,QACV,WAAU;AAAA,QACV,MAAM;AAAA;AAAA,MAEL,QAAQ,8BAAAA,QAAA,cAAC,4BAAY,GAAG,MAAM;AAAA,IACjC;AAAA,IACA,8BAAAA,QAAA,cAAC,yBAAS,GAAG,QAAQ,WAAU,QAAO,WAAU,QAAO,MAAM,YAC1D,UAAU,8BAAAA,QAAA,cAAC,4BAAY,GAAG,QAAQ,CACrC;AAAA,EACF;AAEJ;;;AChCA,IAAAC,gBAAkB;AAClB,iBAA0D;AAE1D,wBAA2B;AAC3B,kBAAqB;AAMd,IAAM,cAAc,CAAC,UAAmD;AAC7E,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI;AAE9B,SACE,8BAAAC,QAAA,cAAC,oBAAM,MAAK,gBAAgB,GAAG,QAC5B,QACH;AAEJ;AAEA,IAAM,iBAAiB,CAAC,UAA6C;AACnE,SACE,8BAAAA,QAAA,cAAC,oCACC,8BAAAA,QAAA,cAAC,6BAAW,QAAX,MAAmB,MAAM,QAAS,CACrC;AAEJ;AAEA,YAAY,aAAS,uBAAW;AAAA,EAC9B,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;AAED,YAAY,WAAO,uBAAW;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;AAED,YAAY,aAAS,uBAAW;AAAA,EAC9B,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;","names":["import_react","React","import_react","React"]}
1
+ {"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/stacked-view/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/stacked-view/src/component/index.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/stacked-view/src/dsl/index.tsx"],"sourcesContent":["export * from \"./types\";\nexport * from \"./component\";\nexport * from \"./dsl\";\n","import { Grid, GridItem } from \"@chakra-ui/react\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport React from \"react\";\nimport type { StackedViewView } from \"../types\";\n\nexport const StackedViewComponent = (props: StackedViewView) => {\n const { header, main, footer } = props;\n\n return (\n <Grid\n h=\"100%\"\n gap=\"4\"\n templateAreas={'\"header\" \"main\" \"footer\"'}\n width=\"full\"\n >\n <GridItem w={\"100%\"} area={\"header\"}>\n {header && <ReactAsset {...header} />}\n </GridItem>\n <GridItem\n w={\"100%\"}\n maxHeight=\"70vh\"\n overflowX=\"auto\"\n overflowY=\"auto\"\n area={\"main\"}\n >\n {main && <ReactAsset {...main} />}\n </GridItem>\n <GridItem w={\"100%\"} overflowX=\"auto\" overflowY=\"auto\" area={\"footer\"}>\n {footer && <ReactAsset {...footer} />}\n </GridItem>\n </Grid>\n );\n};\n","import React from \"react\";\nimport {\n AssetPropsWithChildren,\n Asset,\n createSlot,\n} from \"@player-lang/react-dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { Collection } from \"@devtools-ui/collection\";\nimport { Text } from \"@devtools-ui/text\";\nimport type { StackedViewView } from \"../types\";\n\n/**\n * Defines the component DSL representation for the StackedView view.\n */\nexport const StackedView = (props: AssetPropsWithChildren<StackedViewView>) => {\n const { children, ...rest } = props;\n\n return (\n <Asset type=\"stacked-view\" {...rest}>\n {children}\n </Asset>\n );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n return (\n <Collection>\n <Collection.Values>{props.children}</Collection.Values>\n </Collection>\n );\n};\n\nStackedView.Header = createSlot({\n name: \"header\",\n TextComp: Text,\n CollectionComp,\n isArray: false,\n wrapInAsset: true,\n});\n\nStackedView.Main = createSlot({\n name: \"main\",\n TextComp: Text,\n CollectionComp,\n isArray: false,\n wrapInAsset: true,\n});\n\nStackedView.Footer = createSlot({\n name: \"footer\",\n TextComp: Text,\n CollectionComp,\n isArray: false,\n wrapInAsset: true,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA+B;AAC/B,IAAAA,gBAA2B;AAC3B,IAAAA,gBAAkB;AAGX,IAAM,uBAAuB,CAAC,UAA2B;AAC9D,QAAM,EAAE,QAAQ,MAAM,OAAO,IAAI;AAEjC,SACE,8BAAAC,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,KAAI;AAAA,MACJ,eAAe;AAAA,MACf,OAAM;AAAA;AAAA,IAEN,8BAAAA,QAAA,cAAC,yBAAS,GAAG,QAAQ,MAAM,YACxB,UAAU,8BAAAA,QAAA,cAAC,4BAAY,GAAG,QAAQ,CACrC;AAAA,IACA,8BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACH,WAAU;AAAA,QACV,WAAU;AAAA,QACV,WAAU;AAAA,QACV,MAAM;AAAA;AAAA,MAEL,QAAQ,8BAAAA,QAAA,cAAC,4BAAY,GAAG,MAAM;AAAA,IACjC;AAAA,IACA,8BAAAA,QAAA,cAAC,yBAAS,GAAG,QAAQ,WAAU,QAAO,WAAU,QAAO,MAAM,YAC1D,UAAU,8BAAAA,QAAA,cAAC,4BAAY,GAAG,QAAQ,CACrC;AAAA,EACF;AAEJ;;;AChCA,IAAAC,gBAAkB;AAClB,uBAIO;AAEP,wBAA2B;AAC3B,kBAAqB;AAMd,IAAM,cAAc,CAAC,UAAmD;AAC7E,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI;AAE9B,SACE,8BAAAC,QAAA,cAAC,0BAAM,MAAK,gBAAgB,GAAG,QAC5B,QACH;AAEJ;AAEA,IAAM,iBAAiB,CAAC,UAA6C;AACnE,SACE,8BAAAA,QAAA,cAAC,oCACC,8BAAAA,QAAA,cAAC,6BAAW,QAAX,MAAmB,MAAM,QAAS,CACrC;AAEJ;AAEA,YAAY,aAAS,6BAAW;AAAA,EAC9B,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;AAED,YAAY,WAAO,6BAAW;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;AAED,YAAY,aAAS,6BAAW;AAAA,EAC9B,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;","names":["import_react","React","import_react","React"]}
@@ -30,7 +30,10 @@ var StackedViewComponent = (props) => {
30
30
 
31
31
  // ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/stacked-view/src/dsl/index.tsx
32
32
  import React2 from "react";
33
- import { Asset, createSlot } from "@player-tools/dsl";
33
+ import {
34
+ Asset,
35
+ createSlot
36
+ } from "@player-lang/react-dsl";
34
37
  import { Collection } from "@devtools-ui/collection";
35
38
  import { Text } from "@devtools-ui/text";
36
39
  var StackedView = (props) => {
package/dist/index.mjs CHANGED
@@ -30,7 +30,10 @@ var StackedViewComponent = (props) => {
30
30
 
31
31
  // ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/stacked-view/src/dsl/index.tsx
32
32
  import React2 from "react";
33
- import { Asset, createSlot } from "@player-tools/dsl";
33
+ import {
34
+ Asset,
35
+ createSlot
36
+ } from "@player-lang/react-dsl";
34
37
  import { Collection } from "@devtools-ui/collection";
35
38
  import { Text } from "@devtools-ui/text";
36
39
  var StackedView = (props) => {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/stacked-view/src/component/index.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/stacked-view/src/dsl/index.tsx"],"sourcesContent":["import { Grid, GridItem } from \"@chakra-ui/react\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport React from \"react\";\nimport type { StackedViewView } from \"../types\";\n\nexport const StackedViewComponent = (props: StackedViewView) => {\n const { header, main, footer } = props;\n\n return (\n <Grid\n h=\"100%\"\n gap=\"4\"\n templateAreas={'\"header\" \"main\" \"footer\"'}\n width=\"full\"\n >\n <GridItem w={\"100%\"} area={\"header\"}>\n {header && <ReactAsset {...header} />}\n </GridItem>\n <GridItem\n w={\"100%\"}\n maxHeight=\"70vh\"\n overflowX=\"auto\"\n overflowY=\"auto\"\n area={\"main\"}\n >\n {main && <ReactAsset {...main} />}\n </GridItem>\n <GridItem w={\"100%\"} overflowX=\"auto\" overflowY=\"auto\" area={\"footer\"}>\n {footer && <ReactAsset {...footer} />}\n </GridItem>\n </Grid>\n );\n};\n","import React from \"react\";\nimport { AssetPropsWithChildren, Asset, createSlot } from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { Collection } from \"@devtools-ui/collection\";\nimport { Text } from \"@devtools-ui/text\";\nimport type { StackedViewView } from \"../types\";\n\n/**\n * Defines the component DSL representation for the StackedView view.\n */\nexport const StackedView = (props: AssetPropsWithChildren<StackedViewView>) => {\n const { children, ...rest } = props;\n\n return (\n <Asset type=\"stacked-view\" {...rest}>\n {children}\n </Asset>\n );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n return (\n <Collection>\n <Collection.Values>{props.children}</Collection.Values>\n </Collection>\n );\n};\n\nStackedView.Header = createSlot({\n name: \"header\",\n TextComp: Text,\n CollectionComp,\n isArray: false,\n wrapInAsset: true,\n});\n\nStackedView.Main = createSlot({\n name: \"main\",\n TextComp: Text,\n CollectionComp,\n isArray: false,\n wrapInAsset: true,\n});\n\nStackedView.Footer = createSlot({\n name: \"footer\",\n TextComp: Text,\n CollectionComp,\n isArray: false,\n wrapInAsset: true,\n});\n"],"mappings":";AAAA,SAAS,MAAM,gBAAgB;AAC/B,SAAS,kBAAkB;AAC3B,OAAO,WAAW;AAGX,IAAM,uBAAuB,CAAC,UAA2B;AAC9D,QAAM,EAAE,QAAQ,MAAM,OAAO,IAAI;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,KAAI;AAAA,MACJ,eAAe;AAAA,MACf,OAAM;AAAA;AAAA,IAEN,oCAAC,YAAS,GAAG,QAAQ,MAAM,YACxB,UAAU,oCAAC,cAAY,GAAG,QAAQ,CACrC;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACH,WAAU;AAAA,QACV,WAAU;AAAA,QACV,WAAU;AAAA,QACV,MAAM;AAAA;AAAA,MAEL,QAAQ,oCAAC,cAAY,GAAG,MAAM;AAAA,IACjC;AAAA,IACA,oCAAC,YAAS,GAAG,QAAQ,WAAU,QAAO,WAAU,QAAO,MAAM,YAC1D,UAAU,oCAAC,cAAY,GAAG,QAAQ,CACrC;AAAA,EACF;AAEJ;;;AChCA,OAAOA,YAAW;AAClB,SAAiC,OAAO,kBAAkB;AAE1D,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAMd,IAAM,cAAc,CAAC,UAAmD;AAC7E,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI;AAE9B,SACE,gBAAAA,OAAA,cAAC,SAAM,MAAK,gBAAgB,GAAG,QAC5B,QACH;AAEJ;AAEA,IAAM,iBAAiB,CAAC,UAA6C;AACnE,SACE,gBAAAA,OAAA,cAAC,kBACC,gBAAAA,OAAA,cAAC,WAAW,QAAX,MAAmB,MAAM,QAAS,CACrC;AAEJ;AAEA,YAAY,SAAS,WAAW;AAAA,EAC9B,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;AAED,YAAY,OAAO,WAAW;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;AAED,YAAY,SAAS,WAAW;AAAA,EAC9B,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;","names":["React"]}
1
+ {"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/stacked-view/src/component/index.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/stacked-view/src/dsl/index.tsx"],"sourcesContent":["import { Grid, GridItem } from \"@chakra-ui/react\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport React from \"react\";\nimport type { StackedViewView } from \"../types\";\n\nexport const StackedViewComponent = (props: StackedViewView) => {\n const { header, main, footer } = props;\n\n return (\n <Grid\n h=\"100%\"\n gap=\"4\"\n templateAreas={'\"header\" \"main\" \"footer\"'}\n width=\"full\"\n >\n <GridItem w={\"100%\"} area={\"header\"}>\n {header && <ReactAsset {...header} />}\n </GridItem>\n <GridItem\n w={\"100%\"}\n maxHeight=\"70vh\"\n overflowX=\"auto\"\n overflowY=\"auto\"\n area={\"main\"}\n >\n {main && <ReactAsset {...main} />}\n </GridItem>\n <GridItem w={\"100%\"} overflowX=\"auto\" overflowY=\"auto\" area={\"footer\"}>\n {footer && <ReactAsset {...footer} />}\n </GridItem>\n </Grid>\n );\n};\n","import React from \"react\";\nimport {\n AssetPropsWithChildren,\n Asset,\n createSlot,\n} from \"@player-lang/react-dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { Collection } from \"@devtools-ui/collection\";\nimport { Text } from \"@devtools-ui/text\";\nimport type { StackedViewView } from \"../types\";\n\n/**\n * Defines the component DSL representation for the StackedView view.\n */\nexport const StackedView = (props: AssetPropsWithChildren<StackedViewView>) => {\n const { children, ...rest } = props;\n\n return (\n <Asset type=\"stacked-view\" {...rest}>\n {children}\n </Asset>\n );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n return (\n <Collection>\n <Collection.Values>{props.children}</Collection.Values>\n </Collection>\n );\n};\n\nStackedView.Header = createSlot({\n name: \"header\",\n TextComp: Text,\n CollectionComp,\n isArray: false,\n wrapInAsset: true,\n});\n\nStackedView.Main = createSlot({\n name: \"main\",\n TextComp: Text,\n CollectionComp,\n isArray: false,\n wrapInAsset: true,\n});\n\nStackedView.Footer = createSlot({\n name: \"footer\",\n TextComp: Text,\n CollectionComp,\n isArray: false,\n wrapInAsset: true,\n});\n"],"mappings":";AAAA,SAAS,MAAM,gBAAgB;AAC/B,SAAS,kBAAkB;AAC3B,OAAO,WAAW;AAGX,IAAM,uBAAuB,CAAC,UAA2B;AAC9D,QAAM,EAAE,QAAQ,MAAM,OAAO,IAAI;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,KAAI;AAAA,MACJ,eAAe;AAAA,MACf,OAAM;AAAA;AAAA,IAEN,oCAAC,YAAS,GAAG,QAAQ,MAAM,YACxB,UAAU,oCAAC,cAAY,GAAG,QAAQ,CACrC;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACH,WAAU;AAAA,QACV,WAAU;AAAA,QACV,WAAU;AAAA,QACV,MAAM;AAAA;AAAA,MAEL,QAAQ,oCAAC,cAAY,GAAG,MAAM;AAAA,IACjC;AAAA,IACA,oCAAC,YAAS,GAAG,QAAQ,WAAU,QAAO,WAAU,QAAO,MAAM,YAC1D,UAAU,oCAAC,cAAY,GAAG,QAAQ,CACrC;AAAA,EACF;AAEJ;;;AChCA,OAAOA,YAAW;AAClB;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAMd,IAAM,cAAc,CAAC,UAAmD;AAC7E,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI;AAE9B,SACE,gBAAAA,OAAA,cAAC,SAAM,MAAK,gBAAgB,GAAG,QAC5B,QACH;AAEJ;AAEA,IAAM,iBAAiB,CAAC,UAA6C;AACnE,SACE,gBAAAA,OAAA,cAAC,kBACC,gBAAAA,OAAA,cAAC,WAAW,QAAX,MAAmB,MAAM,QAAS,CACrC;AAEJ;AAEA,YAAY,SAAS,WAAW;AAAA,EAC9B,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;AAED,YAAY,OAAO,WAAW;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;AAED,YAAY,SAAS,WAAW;AAAA,EAC9B,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;","names":["React"]}
package/package.json CHANGED
@@ -1,10 +1,16 @@
1
1
  {
2
+ "sideEffects": false,
3
+ "files": [
4
+ "dist",
5
+ "src",
6
+ "types"
7
+ ],
2
8
  "name": "@devtools-ui/stacked-view",
3
- "version": "0.4.0",
9
+ "version": "0.4.1-next.0",
4
10
  "main": "dist/cjs/index.cjs",
5
11
  "dependencies": {
6
- "@devtools-ui/text": "0.4.0",
7
- "@devtools-ui/collection": "0.4.0",
12
+ "@devtools-ui/text": "0.4.1-next.0",
13
+ "@devtools-ui/collection": "0.4.1-next.0",
8
14
  "@chakra-ui/react": "^2.8.2",
9
15
  "@emotion/react": "^11.11.4",
10
16
  "@emotion/styled": "^11.11.0",
@@ -16,7 +22,6 @@
16
22
  },
17
23
  "module": "dist/index.legacy-esm.js",
18
24
  "types": "types/index.d.ts",
19
- "sideEffects": false,
20
25
  "exports": {
21
26
  "./package.json": "./package.json",
22
27
  "./dist/index.css": "./dist/index.css",
@@ -26,16 +31,11 @@
26
31
  "default": "./dist/cjs/index.cjs"
27
32
  }
28
33
  },
29
- "files": [
30
- "dist",
31
- "src",
32
- "types"
33
- ],
34
34
  "peerDependencies": {
35
- "@player-tools/dsl": "0.7.0-next.3",
36
- "@player-ui/asset-transform-plugin": "0.9.1-next.0",
37
- "@player-ui/player": "0.9.1-next.0",
38
- "@player-ui/react": "0.9.1-next.0",
39
- "@player-ui/types": "0.9.1-next.0"
35
+ "@player-lang/react-dsl": "1.0.1",
36
+ "@player-ui/asset-transform-plugin": "0.15.5",
37
+ "@player-ui/player": "0.15.5",
38
+ "@player-ui/react": "0.15.5",
39
+ "@player-ui/types": "0.15.5"
40
40
  }
41
41
  }
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { describe, expect, test } from "vitest";
3
- import { render, Asset } from "@player-tools/dsl";
3
+ import { render, Asset } from "@player-lang/react-dsl";
4
4
  import { StackedView } from "../";
5
5
 
6
6
  describe("DSL: StackedView", () => {
package/src/dsl/index.tsx CHANGED
@@ -1,5 +1,9 @@
1
1
  import React from "react";
2
- import { AssetPropsWithChildren, Asset, createSlot } from "@player-tools/dsl";
2
+ import {
3
+ AssetPropsWithChildren,
4
+ Asset,
5
+ createSlot,
6
+ } from "@player-lang/react-dsl";
3
7
  import type { Asset as AssetType } from "@player-ui/player";
4
8
  import { Collection } from "@devtools-ui/collection";
5
9
  import { Text } from "@devtools-ui/text";
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { AssetPropsWithChildren } from "@player-tools/dsl";
2
+ import { AssetPropsWithChildren } from "@player-lang/react-dsl";
3
3
  import type { StackedViewView } from "../types";
4
4
  /**
5
5
  * Defines the component DSL representation for the StackedView view.