@developer_tribe/react-builder 1.0.6 → 1.0.7

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 (63) hide show
  1. package/dist/build-components/patterns.generated.d.ts +56 -56
  2. package/dist/components/AttributesEditorPanel.d.ts +2 -2
  3. package/dist/components/BottomBar.d.ts +6 -2
  4. package/dist/components/Checkbox.d.ts +1 -1
  5. package/dist/index.cjs.js +3 -3
  6. package/dist/index.cjs.js.map +1 -1
  7. package/dist/index.d.ts +2 -1
  8. package/dist/index.esm.js +3 -3
  9. package/dist/index.esm.js.map +1 -1
  10. package/dist/index.native.cjs.js +1 -1
  11. package/dist/index.native.cjs.js.map +1 -1
  12. package/dist/index.native.esm.js +4 -4
  13. package/dist/index.native.esm.js.map +1 -1
  14. package/dist/modals/ScreenColorsModal.d.ts +1 -1
  15. package/dist/pages/ProjectPage.d.ts +3 -2
  16. package/dist/pages/tabs/BuilderPanel.d.ts +2 -2
  17. package/dist/pages/tabs/SideTool.d.ts +8 -0
  18. package/dist/store.d.ts +0 -6
  19. package/dist/styles.css +1 -1
  20. package/package.json +5 -2
  21. package/src/RenderPage.tsx +1 -4
  22. package/src/assets/samples/carousel-sample.json +81 -99
  23. package/src/assets/samples/simple-1.json +2 -8
  24. package/src/assets/samples/simple-2.json +9 -36
  25. package/src/assets/samples/vpn-onboard-1.json +23 -27
  26. package/src/assets/samples/vpn-onboard-2.json +275 -279
  27. package/src/assets/samples/vpn-onboard-3.json +246 -247
  28. package/src/assets/samples/vpn-onboard-4.json +246 -247
  29. package/src/assets/samples/vpn-onboard-5.json +369 -375
  30. package/src/assets/samples/vpn-onboard-6.json +248 -252
  31. package/src/build-components/View/pattern.json +2 -2
  32. package/src/build-components/patterns.generated.ts +56 -56
  33. package/src/components/AttributesEditorPanel.tsx +8 -12
  34. package/src/components/BottomBar.tsx +75 -69
  35. package/src/components/EditorHeader.tsx +4 -11
  36. package/src/index.ts +2 -1
  37. package/src/modals/ScreenColorsModal.tsx +57 -51
  38. package/src/pages/ProjectPage.tsx +168 -69
  39. package/src/pages/tabs/BuilderPanel.tsx +8 -14
  40. package/src/pages/tabs/SideTool.tsx +253 -0
  41. package/src/store.ts +6 -10
  42. package/src/styles/base/_global.scss +29 -32
  43. package/src/styles/components/_attributes-editor.scss +27 -33
  44. package/src/styles/components/_bottom-bar.scss +11 -23
  45. package/src/styles/components/_editor-shell.scss +38 -18
  46. package/src/styles/components/_mockos-router.scss +16 -14
  47. package/src/styles/components/_ui-components.scss +14 -15
  48. package/src/styles/foundation/_colors.scss +28 -8
  49. package/src/styles/foundation/_mixins.scss +1 -1
  50. package/src/styles/foundation/_sizes.scss +4 -2
  51. package/src/styles/layout/_builder.scss +1 -1
  52. package/src/styles/modals/_add-component.scss +2 -2
  53. package/src/styles/modals/_color-modal.scss +2 -2
  54. package/src/styles/modals/_modal-shell.scss +1 -1
  55. package/src/utils/analyseNodeByPatterns.ts +0 -15
  56. package/dist/components/MobilePanelToggleButton.d.ts +0 -8
  57. package/dist/hooks/useMinimumDelay.d.ts +0 -7
  58. package/dist/hooks/useMobileEditorPanels.d.ts +0 -12
  59. package/dist/hooks/useSyncProjectPageStore.d.ts +0 -15
  60. package/src/components/MobilePanelToggleButton.tsx +0 -39
  61. package/src/hooks/useMinimumDelay.ts +0 -20
  62. package/src/hooks/useMobileEditorPanels.ts +0 -56
  63. package/src/hooks/useSyncProjectPageStore.ts +0 -40
package/dist/build-components/patterns.generated.d.ts CHANGED
@@ -87,8 +87,8 @@ export declare const patterns: readonly [{
87
87
  readonly sort: 4;
88
88
  };
89
89
  readonly scrollable: {
90
- readonly label: "Scrollable (!!)";
91
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
90
+ readonly label: "Scrollable";
91
+ readonly description: "Turns scroll interaction on.";
92
92
  readonly category: "container";
93
93
  readonly specialCategory: null;
94
94
  readonly sort: -1;
@@ -495,8 +495,8 @@ export declare const patterns: readonly [{
495
495
  };
496
496
  readonly attributes: {
497
497
  readonly scrollable: {
498
- readonly label: "Scrollable (!!)";
499
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
498
+ readonly label: "Scrollable";
499
+ readonly description: "Turns scroll interaction on.";
500
500
  readonly category: "container";
501
501
  readonly specialCategory: null;
502
502
  readonly sort: -1;
@@ -867,8 +867,8 @@ export declare const patterns: readonly [{
867
867
  };
868
868
  readonly attributes: {
869
869
  readonly scrollable: {
870
- readonly label: "Scrollable (!!)";
871
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
870
+ readonly label: "Scrollable";
871
+ readonly description: "Turns scroll interaction on.";
872
872
  readonly category: "container";
873
873
  readonly specialCategory: null;
874
874
  readonly sort: -1;
@@ -1237,8 +1237,8 @@ export declare const patterns: readonly [{
1237
1237
  };
1238
1238
  readonly attributes: {
1239
1239
  readonly scrollable: {
1240
- readonly label: "Scrollable (!!)";
1241
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
1240
+ readonly label: "Scrollable";
1241
+ readonly description: "Turns scroll interaction on.";
1242
1242
  readonly category: "container";
1243
1243
  readonly specialCategory: null;
1244
1244
  readonly sort: -1;
@@ -1589,8 +1589,8 @@ export declare const patterns: readonly [{
1589
1589
  };
1590
1590
  readonly attributes: {
1591
1591
  readonly scrollable: {
1592
- readonly label: "Scrollable (!!)";
1593
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
1592
+ readonly label: "Scrollable";
1593
+ readonly description: "Turns scroll interaction on.";
1594
1594
  readonly category: "container";
1595
1595
  readonly specialCategory: null;
1596
1596
  readonly sort: -1;
@@ -1954,8 +1954,8 @@ export declare const patterns: readonly [{
1954
1954
  };
1955
1955
  readonly attributes: {
1956
1956
  readonly scrollable: {
1957
- readonly label: "Scrollable (!!)";
1958
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
1957
+ readonly label: "Scrollable";
1958
+ readonly description: "Turns scroll interaction on.";
1959
1959
  readonly category: "container";
1960
1960
  readonly specialCategory: null;
1961
1961
  readonly sort: -1;
@@ -2311,8 +2311,8 @@ export declare const patterns: readonly [{
2311
2311
  };
2312
2312
  readonly attributes: {
2313
2313
  readonly scrollable: {
2314
- readonly label: "Scrollable (!!)";
2315
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
2314
+ readonly label: "Scrollable";
2315
+ readonly description: "Turns scroll interaction on.";
2316
2316
  readonly category: "container";
2317
2317
  readonly specialCategory: null;
2318
2318
  readonly sort: -1;
@@ -2661,8 +2661,8 @@ export declare const patterns: readonly [{
2661
2661
  };
2662
2662
  readonly attributes: {
2663
2663
  readonly scrollable: {
2664
- readonly label: "Scrollable (!!)";
2665
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
2664
+ readonly label: "Scrollable";
2665
+ readonly description: "Turns scroll interaction on.";
2666
2666
  readonly category: "container";
2667
2667
  readonly specialCategory: null;
2668
2668
  readonly sort: -1;
@@ -3013,8 +3013,8 @@ export declare const patterns: readonly [{
3013
3013
  };
3014
3014
  readonly attributes: {
3015
3015
  readonly scrollable: {
3016
- readonly label: "Scrollable (!!)";
3017
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
3016
+ readonly label: "Scrollable";
3017
+ readonly description: "Turns scroll interaction on.";
3018
3018
  readonly category: "container";
3019
3019
  readonly specialCategory: null;
3020
3020
  readonly sort: -1;
@@ -3376,8 +3376,8 @@ export declare const patterns: readonly [{
3376
3376
  };
3377
3377
  readonly attributes: {
3378
3378
  readonly scrollable: {
3379
- readonly label: "Scrollable (!!)";
3380
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
3379
+ readonly label: "Scrollable";
3380
+ readonly description: "Turns scroll interaction on.";
3381
3381
  readonly category: "container";
3382
3382
  readonly specialCategory: null;
3383
3383
  readonly sort: -1;
@@ -3737,8 +3737,8 @@ export declare const patterns: readonly [{
3737
3737
  };
3738
3738
  readonly attributes: {
3739
3739
  readonly scrollable: {
3740
- readonly label: "Scrollable (!!)";
3741
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
3740
+ readonly label: "Scrollable";
3741
+ readonly description: "Turns scroll interaction on.";
3742
3742
  readonly category: "container";
3743
3743
  readonly specialCategory: null;
3744
3744
  readonly sort: -1;
@@ -4094,8 +4094,8 @@ export declare const patterns: readonly [{
4094
4094
  };
4095
4095
  readonly attributes: {
4096
4096
  readonly scrollable: {
4097
- readonly label: "Scrollable (!!)";
4098
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
4097
+ readonly label: "Scrollable";
4098
+ readonly description: "Turns scroll interaction on.";
4099
4099
  readonly category: "container";
4100
4100
  readonly specialCategory: null;
4101
4101
  readonly sort: -1;
@@ -4500,8 +4500,8 @@ export declare const patterns: readonly [{
4500
4500
  };
4501
4501
  readonly attributes: {
4502
4502
  readonly scrollable: {
4503
- readonly label: "Scrollable (!!)";
4504
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
4503
+ readonly label: "Scrollable";
4504
+ readonly description: "Turns scroll interaction on.";
4505
4505
  readonly category: "container";
4506
4506
  readonly specialCategory: null;
4507
4507
  readonly sort: -1;
@@ -4903,8 +4903,8 @@ export declare const patterns: readonly [{
4903
4903
  };
4904
4904
  readonly attributes: {
4905
4905
  readonly scrollable: {
4906
- readonly label: "Scrollable (!!)";
4907
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
4906
+ readonly label: "Scrollable";
4907
+ readonly description: "Turns scroll interaction on.";
4908
4908
  readonly category: "container";
4909
4909
  readonly specialCategory: null;
4910
4910
  readonly sort: -1;
@@ -5295,8 +5295,8 @@ export declare const patterns: readonly [{
5295
5295
  readonly sort: 4;
5296
5296
  };
5297
5297
  readonly scrollable: {
5298
- readonly label: "Scrollable (!!)";
5299
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
5298
+ readonly label: "Scrollable";
5299
+ readonly description: "Turns scroll interaction on.";
5300
5300
  readonly category: "container";
5301
5301
  readonly specialCategory: null;
5302
5302
  readonly sort: -1;
@@ -5729,8 +5729,8 @@ export declare const patterns: readonly [{
5729
5729
  readonly sort: 4;
5730
5730
  };
5731
5731
  readonly scrollable: {
5732
- readonly label: "Scrollable (!!)";
5733
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
5732
+ readonly label: "Scrollable";
5733
+ readonly description: "Turns scroll interaction on.";
5734
5734
  readonly category: "container";
5735
5735
  readonly specialCategory: null;
5736
5736
  readonly sort: -1;
@@ -6104,8 +6104,8 @@ export declare const patterns: readonly [{
6104
6104
  };
6105
6105
  readonly attributes: {
6106
6106
  readonly scrollable: {
6107
- readonly label: "Scrollable (!!)";
6108
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
6107
+ readonly label: "Scrollable";
6108
+ readonly description: "Turns scroll interaction on.";
6109
6109
  readonly category: "container";
6110
6110
  readonly specialCategory: null;
6111
6111
  readonly sort: -1;
@@ -6462,8 +6462,8 @@ export declare const patterns: readonly [{
6462
6462
  };
6463
6463
  readonly attributes: {
6464
6464
  readonly scrollable: {
6465
- readonly label: "Scrollable (!!)";
6466
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
6465
+ readonly label: "Scrollable";
6466
+ readonly description: "Turns scroll interaction on.";
6467
6467
  readonly category: "container";
6468
6468
  readonly specialCategory: null;
6469
6469
  readonly sort: -1;
@@ -6817,8 +6817,8 @@ export declare const patterns: readonly [{
6817
6817
  readonly sort: 4;
6818
6818
  };
6819
6819
  readonly scrollable: {
6820
- readonly label: "Scrollable (!!)";
6821
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
6820
+ readonly label: "Scrollable";
6821
+ readonly description: "Turns scroll interaction on.";
6822
6822
  readonly category: "container";
6823
6823
  readonly specialCategory: null;
6824
6824
  readonly sort: -1;
@@ -7202,8 +7202,8 @@ export declare const patterns: readonly [{
7202
7202
  readonly sort: 4;
7203
7203
  };
7204
7204
  readonly scrollable: {
7205
- readonly label: "Scrollable (!!)";
7206
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
7205
+ readonly label: "Scrollable";
7206
+ readonly description: "Turns scroll interaction on.";
7207
7207
  readonly category: "container";
7208
7208
  readonly specialCategory: null;
7209
7209
  readonly sort: -1;
@@ -7581,8 +7581,8 @@ export declare const patterns: readonly [{
7581
7581
  };
7582
7582
  readonly attributes: {
7583
7583
  readonly scrollable: {
7584
- readonly label: "Scrollable (!!)";
7585
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
7584
+ readonly label: "Scrollable";
7585
+ readonly description: "Turns scroll interaction on.";
7586
7586
  readonly category: "container";
7587
7587
  readonly specialCategory: null;
7588
7588
  readonly sort: -1;
@@ -7964,8 +7964,8 @@ export declare const patterns: readonly [{
7964
7964
  readonly sort: 4;
7965
7965
  };
7966
7966
  readonly scrollable: {
7967
- readonly label: "Scrollable (!!)";
7968
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
7967
+ readonly label: "Scrollable";
7968
+ readonly description: "Turns scroll interaction on.";
7969
7969
  readonly category: "container";
7970
7970
  readonly specialCategory: null;
7971
7971
  readonly sort: -1;
@@ -8347,8 +8347,8 @@ export declare const patterns: readonly [{
8347
8347
  };
8348
8348
  readonly attributes: {
8349
8349
  readonly scrollable: {
8350
- readonly label: "Scrollable (!!)";
8351
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
8350
+ readonly label: "Scrollable";
8351
+ readonly description: "Turns scroll interaction on.";
8352
8352
  readonly category: "container";
8353
8353
  readonly specialCategory: null;
8354
8354
  readonly sort: -1;
@@ -8700,8 +8700,8 @@ export declare const patterns: readonly [{
8700
8700
  };
8701
8701
  readonly attributes: {
8702
8702
  readonly scrollable: {
8703
- readonly label: "Scrollable (!!)";
8704
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
8703
+ readonly label: "Scrollable";
8704
+ readonly description: "Turns scroll interaction on.";
8705
8705
  readonly category: "container";
8706
8706
  readonly specialCategory: null;
8707
8707
  readonly sort: -1;
@@ -9054,8 +9054,8 @@ export declare const patterns: readonly [{
9054
9054
  readonly sort: 3;
9055
9055
  };
9056
9056
  readonly scrollable: {
9057
- readonly label: "Scrollable (!!)";
9058
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
9057
+ readonly label: "Scrollable";
9058
+ readonly description: "Turns scroll interaction on.";
9059
9059
  readonly category: "container";
9060
9060
  readonly specialCategory: null;
9061
9061
  readonly sort: -1;
@@ -9442,8 +9442,8 @@ export declare const patterns: readonly [{
9442
9442
  };
9443
9443
  readonly attributes: {
9444
9444
  readonly scrollable: {
9445
- readonly label: "Scrollable (!!)";
9446
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
9445
+ readonly label: "Scrollable";
9446
+ readonly description: "Turns scroll interaction on.";
9447
9447
  readonly category: "container";
9448
9448
  readonly specialCategory: null;
9449
9449
  readonly sort: -1;
@@ -9817,8 +9817,8 @@ export declare const patterns: readonly [{
9817
9817
  };
9818
9818
  readonly attributes: {
9819
9819
  readonly scrollable: {
9820
- readonly label: "Scrollable (!!)";
9821
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
9820
+ readonly label: "Scrollable";
9821
+ readonly description: "Turns scroll interaction on.";
9822
9822
  readonly category: "container";
9823
9823
  readonly specialCategory: null;
9824
9824
  readonly sort: -1;
@@ -10196,8 +10196,8 @@ export declare const patterns: readonly [{
10196
10196
  };
10197
10197
  readonly attributes: {
10198
10198
  readonly scrollable: {
10199
- readonly label: "Scrollable (!!)";
10200
- readonly description: "THIS FEATURE MIGHT NOT WORK IN MOBILE!";
10199
+ readonly label: "Scrollable";
10200
+ readonly description: "Turns scroll interaction on.";
10201
10201
  readonly category: "container";
10202
10202
  readonly specialCategory: null;
10203
10203
  readonly sort: -1;
package/dist/components/AttributesEditorPanel.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import type { Node } from '../types/Node';
2
2
  import type { ProjectColors } from '../types/Project';
3
3
  interface AttributesEditorPanelProps {
4
- attributes?: any;
5
- onChange?: (data: Node) => void;
4
+ attributes: any;
5
+ onChange: (data: Node) => void;
6
6
  projectColors?: ProjectColors;
7
7
  }
8
8
  export declare function AttributesEditorPanel({ attributes, onChange, projectColors, }: AttributesEditorPanelProps): import("react/jsx-runtime").JSX.Element | null;
package/dist/components/BottomBar.d.ts CHANGED
@@ -1,8 +1,12 @@
1
+ import React from 'react';
2
+ import type { Node } from '../types/Node';
1
3
  type BottomBarProps = {
2
4
  className?: string;
5
+ data: Node;
6
+ setData: React.Dispatch<React.SetStateAction<Node>>;
3
7
  };
4
8
  /**
5
- * Empty placeholder bottom bar (Figma-like). We'll complete later.
9
+ * Bottom tool bar (Figma-like).
6
10
  */
7
- export declare function BottomBar({ className }: BottomBarProps): import("react/jsx-runtime").JSX.Element;
11
+ export declare function BottomBar({ className, data, setData }: BottomBarProps): import("react/jsx-runtime").JSX.Element;
8
12
  export {};
package/dist/components/Checkbox.d.ts CHANGED
@@ -7,7 +7,7 @@ export type CheckboxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 't
7
7
  inputClassName?: string;
8
8
  onChange?: CheckboxChangeHandler;
9
9
  };
10
- export declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "className"> & {
10
+ export declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "className"> & {
11
11
  label?: React.ReactNode;
12
12
  helperText?: React.ReactNode;
13
13
  className?: string;