@developer_tribe/react-builder 1.0.5 → 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 (48) hide show
  1. package/dist/build-components/index.d.ts +1 -2
  2. package/dist/build-components/patterns.generated.d.ts +0 -383
  3. package/dist/components/BottomBar.d.ts +12 -0
  4. package/dist/components/LoadingComponent.d.ts +1 -0
  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 +8 -0
  15. package/dist/modals/index.d.ts +1 -0
  16. package/dist/pages/ProjectPage.d.ts +3 -2
  17. package/dist/styles.css +1 -1
  18. package/dist/utils/nodeTree.d.ts +5 -0
  19. package/package.json +5 -2
  20. package/src/build-components/RenderNode.generated.tsx +0 -7
  21. package/src/build-components/index.ts +0 -5
  22. package/src/build-components/patterns.generated.ts +0 -399
  23. package/src/components/BottomBar.tsx +242 -0
  24. package/src/components/LoadingComponent.tsx +10 -0
  25. package/src/index.ts +2 -1
  26. package/src/modals/ScreenColorsModal.tsx +121 -0
  27. package/src/modals/index.ts +1 -0
  28. package/src/pages/ProjectPage.tsx +72 -163
  29. package/src/styles/base/_global.scss +25 -20
  30. package/src/styles/components/_attributes-editor.scss +26 -24
  31. package/src/styles/components/_bottom-bar.scss +101 -0
  32. package/src/styles/components/_editor-shell.scss +19 -18
  33. package/src/styles/components/_mockos-router.scss +16 -14
  34. package/src/styles/components/_ui-components.scss +14 -15
  35. package/src/styles/foundation/_colors.scss +28 -8
  36. package/src/styles/foundation/_mixins.scss +1 -1
  37. package/src/styles/foundation/_sizes.scss +4 -2
  38. package/src/styles/index.scss +1 -0
  39. package/src/styles/layout/_builder.scss +1 -1
  40. package/src/styles/modals/_add-component.scss +2 -2
  41. package/src/styles/modals/_color-modal.scss +2 -2
  42. package/src/styles/modals/_modal-shell.scss +1 -1
  43. package/src/utils/nodeTree.ts +99 -0
  44. package/dist/build-components/PaywallSubscriButton/PaywallSubscriButton.d.ts +0 -5
  45. package/dist/build-components/PaywallSubscriButton/PaywallSubscriButtonProps.generated.d.ts +0 -50
  46. package/src/build-components/PaywallSubscriButton/PaywallSubscriButton.tsx +0 -10
  47. package/src/build-components/PaywallSubscriButton/PaywallSubscriButtonProps.generated.ts +0 -77
  48. package/src/build-components/PaywallSubscriButton/pattern.json +0 -27
@@ -1,6 +1,6 @@
1
1
  export { default as RenderNode } from './RenderNode.generated';
2
2
  export { patterns } from './patterns.generated';
3
- export declare const allcomponentNames: readonly ["BIcon", "BackgroundImage", "Button", "Carousel", "CarouselButtons", "CarouselDots", "CarouselItem", "CarouselProvider", "Image", "Main", "Onboard", "OnboardButton", "OnboardButtons", "OnboardDot", "OnboardFooter", "OnboardImage", "OnboardItem", "OnboardProvider", "OnboardSubtitle", "OnboardTitle", "PaywallBackground", "PaywallCloseButton", "PaywallOptions", "PaywallProvider", "PaywallSubscriButton", "PaywallSubscribeButton", "RadioButton", "Text", "View"];
3
+ export declare const allcomponentNames: readonly ["BIcon", "BackgroundImage", "Button", "Carousel", "CarouselButtons", "CarouselDots", "CarouselItem", "CarouselProvider", "Image", "Main", "Onboard", "OnboardButton", "OnboardButtons", "OnboardDot", "OnboardFooter", "OnboardImage", "OnboardItem", "OnboardProvider", "OnboardSubtitle", "OnboardTitle", "PaywallBackground", "PaywallCloseButton", "PaywallOptions", "PaywallProvider", "PaywallSubscribeButton", "RadioButton", "Text", "View"];
4
4
  export type { BIconPropsGenerated, BIconComponentProps, } from './BIcon/BIconProps.generated';
5
5
  export type { BackgroundImagePropsGenerated, BackgroundImageComponentProps, } from './BackgroundImage/BackgroundImageProps.generated';
6
6
  export type { ButtonPropsGenerated, ButtonComponentProps, } from './Button/ButtonProps.generated';
@@ -25,7 +25,6 @@ export type { PaywallBackgroundPropsGenerated, PaywallBackgroundComponentProps,
25
25
  export type { PaywallCloseButtonPropsGenerated, PaywallCloseButtonComponentProps, } from './PaywallCloseButton/PaywallCloseButtonProps.generated';
26
26
  export type { PaywallOptionsPropsGenerated, PaywallOptionsComponentProps, } from './PaywallOptions/PaywallOptionsProps.generated';
27
27
  export type { PaywallProviderPropsGenerated, PaywallProviderComponentProps, } from './PaywallProvider/PaywallProviderProps.generated';
28
- export type { PaywallSubscriButtonPropsGenerated, PaywallSubscriButtonComponentProps, } from './PaywallSubscriButton/PaywallSubscriButtonProps.generated';
29
28
  export type { PaywallSubscribeButtonPropsGenerated, PaywallSubscribeButtonComponentProps, } from './PaywallSubscribeButton/PaywallSubscribeButtonProps.generated';
30
29
  export type { RadioButtonPropsGenerated, RadioButtonComponentProps, } from './RadioButton/RadioButtonProps.generated';
31
30
  export type { TextPropsGenerated, TextComponentProps, } from './Text/TextProps.generated';
@@ -8977,389 +8977,6 @@ export declare const patterns: readonly [{
8977
8977
  readonly height: "100%";
8978
8978
  };
8979
8979
  readonly types: {};
8980
- }, {
8981
- readonly schemaVersion: 1;
8982
- readonly allowUnknownAttributes: false;
8983
- readonly pattern: {
8984
- readonly type: "PaywallSubscriButton";
8985
- readonly children: "string";
8986
- readonly attributes: {
8987
- readonly color: "color";
8988
- readonly fontSize: "size";
8989
- readonly fontWeight: readonly ["normal", "bold", "100", "200", "300", "400", "500", "600", "700", "800", "900"];
8990
- readonly scrollable: "boolean";
8991
- readonly flexDirection: readonly ["row", "column"];
8992
- readonly alignItems: readonly ["flex-start", "center", "flex-end", "stretch", "baseline"];
8993
- readonly justifyContent: readonly ["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"];
8994
- readonly gap: "size";
8995
- readonly padding: "size";
8996
- readonly paddingHorizontal: "size";
8997
- readonly paddingVertical: "size";
8998
- readonly paddingTop: "size";
8999
- readonly paddingBottom: "size";
9000
- readonly paddingLeft: "size";
9001
- readonly paddingRight: "size";
9002
- readonly margin: "size";
9003
- readonly marginVertical: "size";
9004
- readonly marginTop: "size";
9005
- readonly marginBottom: "size";
9006
- readonly marginLeft: "size";
9007
- readonly marginRight: "size";
9008
- readonly backgroundColor: "color";
9009
- readonly borderRadius: "size";
9010
- readonly width: "size";
9011
- readonly minWidth: "size";
9012
- readonly maxWidth: "size";
9013
- readonly height: "size";
9014
- readonly minHeight: "size";
9015
- readonly maxHeight: "size";
9016
- readonly flex: "number";
9017
- readonly position: readonly ["relative", "absolute"];
9018
- readonly top: "size";
9019
- readonly bottom: "size";
9020
- readonly left: "size";
9021
- readonly right: "size";
9022
- readonly zIndex: "number";
9023
- };
9024
- readonly defaults: {
9025
- readonly flexDirection: "column";
9026
- readonly position: "relative";
9027
- readonly zIndex: 1;
9028
- };
9029
- };
9030
- readonly meta: {
9031
- readonly desiredParent: readonly [">PaywallProvider"];
9032
- readonly label: "Paywall Subscribe Button";
9033
- readonly description: "Paywall subscribe call-to-action button. Extends Button.";
9034
- readonly attributes: {
9035
- readonly color: {
9036
- readonly label: "Color";
9037
- readonly description: "Text color of the button.";
9038
- readonly category: "style";
9039
- readonly specialCategory: null;
9040
- readonly sort: 1;
9041
- };
9042
- readonly fontSize: {
9043
- readonly label: "Font Size";
9044
- readonly description: "Text size of the button.";
9045
- readonly category: "style";
9046
- readonly specialCategory: null;
9047
- readonly sort: 2;
9048
- };
9049
- readonly fontWeight: {
9050
- readonly label: "Font Weight";
9051
- readonly description: "Text weight of the button.";
9052
- readonly category: "style";
9053
- readonly specialCategory: null;
9054
- readonly sort: 3;
9055
- };
9056
- readonly scrollable: {
9057
- readonly label: "Scrollable";
9058
- readonly description: "Turns scroll interaction on.";
9059
- readonly category: "container";
9060
- readonly specialCategory: null;
9061
- readonly sort: -1;
9062
- };
9063
- readonly flexDirection: {
9064
- readonly label: "Flex Direction";
9065
- readonly description: "Sets row or column layout.";
9066
- readonly category: "container";
9067
- readonly specialCategory: null;
9068
- readonly sort: 4;
9069
- };
9070
- readonly alignItems: {
9071
- readonly label: "Align Items";
9072
- readonly description: "Controls cross-axis alignment.";
9073
- readonly category: "container";
9074
- readonly specialCategory: null;
9075
- readonly sort: 3;
9076
- };
9077
- readonly justifyContent: {
9078
- readonly label: "Justify Content";
9079
- readonly description: "Controls main-axis alignment.";
9080
- readonly category: "container";
9081
- readonly specialCategory: null;
9082
- readonly sort: 5;
9083
- };
9084
- readonly gap: {
9085
- readonly label: "Gap";
9086
- readonly description: "Space between children.";
9087
- readonly category: "container";
9088
- readonly specialCategory: null;
9089
- readonly sort: 10;
9090
- readonly preferedScale: "s";
9091
- };
9092
- readonly padding: {
9093
- readonly label: "Padding";
9094
- readonly description: "Uniform padding on all sides.";
9095
- readonly category: "container";
9096
- readonly specialCategory: "padding";
9097
- readonly sort: 6;
9098
- readonly preferedScale: "s";
9099
- };
9100
- readonly paddingHorizontal: {
9101
- readonly label: "Padding Horizontal";
9102
- readonly description: "Left and right padding.";
9103
- readonly category: "container";
9104
- readonly specialCategory: "padding";
9105
- readonly sort: 7;
9106
- readonly preferedScale: "s";
9107
- };
9108
- readonly paddingVertical: {
9109
- readonly label: "Padding Vertical";
9110
- readonly description: "Top and bottom padding.";
9111
- readonly category: "container";
9112
- readonly specialCategory: "padding";
9113
- readonly sort: 8;
9114
- readonly preferedScale: "vs";
9115
- };
9116
- readonly paddingTop: {
9117
- readonly label: "Padding Top";
9118
- readonly description: "Top padding only.";
9119
- readonly category: "container";
9120
- readonly specialCategory: "padding";
9121
- readonly sort: 9;
9122
- readonly preferedScale: "vs";
9123
- };
9124
- readonly paddingBottom: {
9125
- readonly label: "Padding Bottom";
9126
- readonly description: "Bottom padding only.";
9127
- readonly category: "container";
9128
- readonly specialCategory: "padding";
9129
- readonly sort: 10;
9130
- readonly preferedScale: "vs";
9131
- };
9132
- readonly paddingLeft: {
9133
- readonly label: "Padding Left";
9134
- readonly description: "Left padding only.";
9135
- readonly category: "container";
9136
- readonly specialCategory: "padding";
9137
- readonly sort: 11;
9138
- readonly preferedScale: "s";
9139
- };
9140
- readonly paddingRight: {
9141
- readonly label: "Padding Right";
9142
- readonly description: "Right padding only.";
9143
- readonly category: "container";
9144
- readonly specialCategory: "padding";
9145
- readonly sort: 12;
9146
- readonly preferedScale: "s";
9147
- };
9148
- readonly margin: {
9149
- readonly label: "Margin";
9150
- readonly description: "Uniform margin on all sides.";
9151
- readonly category: "container";
9152
- readonly specialCategory: "margin";
9153
- readonly sort: 13;
9154
- readonly preferedScale: "s";
9155
- };
9156
- readonly marginHorizontal: {
9157
- readonly label: "Margin Horizontal";
9158
- readonly description: "Left and right margin.";
9159
- readonly category: "container";
9160
- readonly specialCategory: "margin";
9161
- readonly sort: 14;
9162
- readonly preferedScale: "s";
9163
- };
9164
- readonly marginVertical: {
9165
- readonly label: "Margin Vertical";
9166
- readonly description: "Top and bottom margin.";
9167
- readonly category: "container";
9168
- readonly specialCategory: "margin";
9169
- readonly sort: 15;
9170
- readonly preferedScale: "vs";
9171
- };
9172
- readonly marginTop: {
9173
- readonly label: "Margin Top";
9174
- readonly description: "Top margin only.";
9175
- readonly category: "container";
9176
- readonly specialCategory: "margin";
9177
- readonly sort: 16;
9178
- readonly preferedScale: "vs";
9179
- };
9180
- readonly marginBottom: {
9181
- readonly label: "Margin Bottom";
9182
- readonly description: "Bottom margin only.";
9183
- readonly category: "container";
9184
- readonly specialCategory: "margin";
9185
- readonly sort: 17;
9186
- readonly preferedScale: "vs";
9187
- };
9188
- readonly marginLeft: {
9189
- readonly label: "Margin Left";
9190
- readonly description: "Left margin only.";
9191
- readonly category: "container";
9192
- readonly specialCategory: "margin";
9193
- readonly sort: 18;
9194
- readonly preferedScale: "s";
9195
- };
9196
- readonly marginRight: {
9197
- readonly label: "Margin Right";
9198
- readonly description: "Right margin only.";
9199
- readonly category: "container";
9200
- readonly specialCategory: "margin";
9201
- readonly sort: 19;
9202
- readonly preferedScale: "s";
9203
- };
9204
- readonly backgroundColor: {
9205
- readonly label: "Background Color";
9206
- readonly description: "Background fill color.";
9207
- readonly category: "style";
9208
- readonly specialCategory: null;
9209
- readonly sort: 20;
9210
- };
9211
- readonly borderRadius: {
9212
- readonly label: "Border Radius";
9213
- readonly description: "Corner rounding amount.";
9214
- readonly category: "style";
9215
- readonly specialCategory: null;
9216
- readonly sort: 21;
9217
- readonly preferedScale: "s";
9218
- };
9219
- readonly width: {
9220
- readonly label: "Width";
9221
- readonly description: "Fixed width value.";
9222
- readonly category: "container";
9223
- readonly specialCategory: "size";
9224
- readonly sort: 0;
9225
- readonly preferedScale: "s";
9226
- };
9227
- readonly minWidth: {
9228
- readonly label: "Min Width";
9229
- readonly description: "Minimum width constraint.";
9230
- readonly category: "container";
9231
- readonly specialCategory: "size";
9232
- readonly sort: 1;
9233
- readonly preferedScale: "s";
9234
- };
9235
- readonly maxWidth: {
9236
- readonly label: "Max Width";
9237
- readonly description: "Maximum width constraint.";
9238
- readonly category: "container";
9239
- readonly specialCategory: "size";
9240
- readonly sort: 2;
9241
- readonly preferedScale: "s";
9242
- };
9243
- readonly height: {
9244
- readonly label: "Height";
9245
- readonly description: "Fixed height value.";
9246
- readonly category: "container";
9247
- readonly specialCategory: "size";
9248
- readonly sort: 3;
9249
- readonly preferedScale: "vs";
9250
- };
9251
- readonly minHeight: {
9252
- readonly label: "Min Height";
9253
- readonly description: "Minimum height constraint.";
9254
- readonly category: "container";
9255
- readonly specialCategory: "size";
9256
- readonly sort: 4;
9257
- readonly preferedScale: "vs";
9258
- };
9259
- readonly maxHeight: {
9260
- readonly label: "Max Height";
9261
- readonly description: "Maximum height constraint.";
9262
- readonly category: "container";
9263
- readonly specialCategory: "size";
9264
- readonly sort: 5;
9265
- readonly preferedScale: "vs";
9266
- };
9267
- readonly flex: {
9268
- readonly label: "Flex";
9269
- readonly description: "Flex grow factor (e.g. 1 fills available space).";
9270
- readonly category: "container";
9271
- readonly specialCategory: "size";
9272
- readonly sort: 6;
9273
- };
9274
- readonly position: {
9275
- readonly label: "Position";
9276
- readonly description: "Sets layout positioning mode.";
9277
- readonly category: "container";
9278
- readonly specialCategory: null;
9279
- readonly sort: 3;
9280
- };
9281
- readonly top: {
9282
- readonly label: "Top";
9283
- readonly description: "Offset from the top edge.";
9284
- readonly category: "container";
9285
- readonly specialCategory: "offset";
9286
- readonly sort: 22;
9287
- readonly preferedScale: "vs";
9288
- };
9289
- readonly bottom: {
9290
- readonly label: "Bottom";
9291
- readonly description: "Offset from the bottom edge.";
9292
- readonly category: "container";
9293
- readonly specialCategory: "offset";
9294
- readonly sort: 23;
9295
- readonly preferedScale: "vs";
9296
- };
9297
- readonly left: {
9298
- readonly label: "Left";
9299
- readonly description: "Offset from the left edge.";
9300
- readonly category: "container";
9301
- readonly specialCategory: "offset";
9302
- readonly sort: 24;
9303
- readonly preferedScale: "s";
9304
- };
9305
- readonly right: {
9306
- readonly label: "Right";
9307
- readonly description: "Offset from the right edge.";
9308
- readonly category: "container";
9309
- readonly specialCategory: "offset";
9310
- readonly sort: 25;
9311
- readonly preferedScale: "s";
9312
- };
9313
- readonly zIndex: {
9314
- readonly label: "Z-Index";
9315
- readonly description: "Controls stacking order.";
9316
- readonly category: "container";
9317
- readonly specialCategory: null;
9318
- readonly sort: 26;
9319
- };
9320
- };
9321
- readonly specialCategories: {
9322
- readonly padding: {
9323
- readonly label: "Padding";
9324
- readonly description: "Uniform padding on all sides.";
9325
- readonly category: "container";
9326
- readonly sort: 1;
9327
- };
9328
- readonly margin: {
9329
- readonly label: "Margin";
9330
- readonly description: "Uniform margin on all sides.";
9331
- readonly category: "container";
9332
- readonly sort: 2;
9333
- };
9334
- readonly size: {
9335
- readonly label: "Size";
9336
- readonly description: "Fixed dimensions.";
9337
- readonly category: "container";
9338
- readonly sort: 3;
9339
- };
9340
- readonly offset: {
9341
- readonly label: "Offset";
9342
- readonly description: "Absolute positioning offsets.";
9343
- readonly category: "container";
9344
- readonly sort: 4;
9345
- };
9346
- };
9347
- };
9348
- readonly defaults: {
9349
- readonly flexDirection: "column";
9350
- readonly position: "relative";
9351
- readonly zIndex: 1;
9352
- readonly backgroundColor: "#1C1C1E";
9353
- readonly paddingHorizontal: "20@s";
9354
- readonly paddingVertical: "12@vs";
9355
- readonly borderRadius: "12@s";
9356
- readonly color: "cornflowerblue";
9357
- readonly fontSize: "16@fs";
9358
- readonly fontWeight: "700";
9359
- readonly justifyContent: "center";
9360
- readonly alignItems: "center";
9361
- };
9362
- readonly types: {};
9363
8980
  }, {
9364
8981
  readonly schemaVersion: 1;
9365
8982
  readonly allowUnknownAttributes: false;
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import type { Node } from '../types/Node';
3
+ type BottomBarProps = {
4
+ className?: string;
5
+ data: Node;
6
+ setData: React.Dispatch<React.SetStateAction<Node>>;
7
+ };
8
+ /**
9
+ * Bottom tool bar (Figma-like).
10
+ */
11
+ export declare function BottomBar({ className, data, setData }: BottomBarProps): import("react/jsx-runtime").JSX.Element;
12
+ export {};
@@ -0,0 +1 @@
1
+ export declare function LoadingComponent(): import("react/jsx-runtime").JSX.Element;