@draftbit/core 43.4.16 → 43.4.18-b16bb4.0

package/lib/commonjs/mappings/StarRating.js.map

@@ -1 +1 @@
-{"version":3,"sources":["StarRating.ts"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","button","triggers","Triggers","OnPress","props","starSize","label","defaultValue","min","max","step","fieldName","handlerPropName","valuePropName","maxStars","rating","group","GROUPS","data","isEditable","activeColor","inactiveColor"],"mappings":";;;;;;;AAAA;;AAUO,MAAMA,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,aADiB;AAEvBC,EAAAA,GAAG,EAAE,YAFkB;AAGvBC,EAAAA,WAAW,EAAE,yBAHU;AAIvBC,EAAAA,QAAQ,EAAEC,uBAAgBC,MAJH;AAKvBC,EAAAA,QAAQ,EAAE,CAACC,gBAASC,OAAV,CALa;AAMvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,QAAQ,EAAE,mCAAuB;AAC/BC,MAAAA,KAAK,EAAE,WADwB;AAE/BT,MAAAA,WAAW,EAAE,8BAFkB;AAG/BU,MAAAA,YAAY,EAAE,EAHiB;AAI/BC,MAAAA,GAAG,EAAE,CAJ0B;AAK/BC,MAAAA,GAAG,EAAE,EAL0B;AAM/BC,MAAAA,IAAI,EAAE;AANyB,KAAvB,CADL;AASLC,IAAAA,SAAS,EAAE,gCAAoB;AAC7BJ,MAAAA,YAAY,EAAE,aADe;AACA;AAC7BK,MAAAA,eAAe,EAAE,SAFY;AAED;AAC5BC,MAAAA,aAAa,EAAE,QAHc,CAGJ;;AAHI,KAApB,CATN;AAcLC,IAAAA,QAAQ,EAAE,mCAAuB;AAC/BR,MAAAA,KAAK,EAAE,WADwB;AAE/BT,MAAAA,WAAW,EAAE,yBAFkB;AAG/BU,MAAAA,YAAY,EAAE,CAHiB;AAI/BC,MAAAA,GAAG,EAAE,CAJ0B;AAK/BC,MAAAA,GAAG,EAAE,EAL0B;AAM/BC,MAAAA,IAAI,EAAE;AANyB,KAAvB,CAdL;AAsBLK,IAAAA,MAAM,EAAE,mCAAuB;AAC7BC,MAAAA,KAAK,EAAEC,cAAOC,IADe;AAE7BZ,MAAAA,KAAK,EAAE;AAFsB,KAAvB,CAtBH;AA0BLa,IAAAA,UAAU,EAAE,iCAAqB;AAC/Bb,MAAAA,KAAK,EAAE;AADwB,KAArB,CA1BP;AA6BLc,IAAAA,WAAW,EAAE,4BAAgB;AAC3Bd,MAAAA,KAAK,EAAE,cADoB;AAE3BC,MAAAA,YAAY,EAAE;AAFa,KAAhB,CA7BR;AAiCLc,IAAAA,aAAa,EAAE,4BAAgB;AAC7Bf,MAAAA,KAAK,EAAE,gBADsB;AAE7BC,MAAAA,YAAY,EAAE;AAFe,KAAhB;AAjCV;AANgB,CAAlB","sourcesContent":["import {\n  COMPONENT_TYPES,\n  createStaticNumberProp,\n  createFieldNameProp,\n  createStaticBoolProp,\n  Triggers,\n  createColorProp,\n  GROUPS,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n  name: \"Star Rating\",\n  tag: \"StarRating\",\n  description: \"A star rating component\",\n  category: COMPONENT_TYPES.button,\n  triggers: [Triggers.OnPress],\n  props: {\n    starSize: createStaticNumberProp({\n      label: \"Star size\",\n      description: \"Size of each individual star\",\n      defaultValue: 16,\n      min: 8,\n      max: 36,\n      step: 1,\n    }),\n    fieldName: createFieldNameProp({\n      defaultValue: \"ratingValue\", // this is the name of the variable declared on the screen in Draftbit\n      handlerPropName: \"onPress\", // the change handler prop in this component\n      valuePropName: \"rating\", // the value prop in this component\n    }),\n    maxStars: createStaticNumberProp({\n      label: \"Max stars\",\n      description: \"The max number of stars\",\n      defaultValue: 5,\n      min: 0,\n      max: 10,\n      step: 1,\n    }),\n    rating: createStaticNumberProp({\n      group: GROUPS.data,\n      label: \"Rating\",\n    }),\n    isEditable: createStaticBoolProp({\n      label: \"Editable\",\n    }),\n    activeColor: createColorProp({\n      label: \"Active Color\",\n      defaultValue: \"primary\",\n    }),\n    inactiveColor: createColorProp({\n      label: \"Inactive Color\",\n      defaultValue: \"divider\",\n    }),\n  },\n};\n"]}
+{"version":3,"sources":["StarRating.js"],"names":["SEED_DATA","name","tag","description","category","COMPONENT_TYPES","button","triggers","Triggers","OnPress","props","starSize","label","defaultValue","min","max","step","fieldName","handlerPropName","valuePropName","maxStars","rating","group","GROUPS","data","isEditable","activeColor","inactiveColor"],"mappings":";;;;;;;AAAA;;AACO,MAAMA,SAAS,GAAG;AACrBC,EAAAA,IAAI,EAAE,aADe;AAErBC,EAAAA,GAAG,EAAE,YAFgB;AAGrBC,EAAAA,WAAW,EAAE,yBAHQ;AAIrBC,EAAAA,QAAQ,EAAEC,uBAAgBC,MAJL;AAKrBC,EAAAA,QAAQ,EAAE,CAACC,gBAASC,OAAV,CALW;AAMrBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,QAAQ,EAAE,mCAAuB;AAC7BC,MAAAA,KAAK,EAAE,WADsB;AAE7BT,MAAAA,WAAW,EAAE,8BAFgB;AAG7BU,MAAAA,YAAY,EAAE,EAHe;AAI7BC,MAAAA,GAAG,EAAE,CAJwB;AAK7BC,MAAAA,GAAG,EAAE,EALwB;AAM7BC,MAAAA,IAAI,EAAE;AANuB,KAAvB,CADP;AASHC,IAAAA,SAAS,EAAE,gCAAoB;AAC3BJ,MAAAA,YAAY,EAAE,aADa;AAE3BK,MAAAA,eAAe,EAAE,SAFU;AAG3BC,MAAAA,aAAa,EAAE,QAHY,CAGF;;AAHE,KAApB,CATR;AAcHC,IAAAA,QAAQ,EAAE,mCAAuB;AAC7BR,MAAAA,KAAK,EAAE,WADsB;AAE7BT,MAAAA,WAAW,EAAE,yBAFgB;AAG7BU,MAAAA,YAAY,EAAE,CAHe;AAI7BC,MAAAA,GAAG,EAAE,CAJwB;AAK7BC,MAAAA,GAAG,EAAE,EALwB;AAM7BC,MAAAA,IAAI,EAAE;AANuB,KAAvB,CAdP;AAsBHK,IAAAA,MAAM,EAAE,mCAAuB;AAC3BC,MAAAA,KAAK,EAAEC,cAAOC,IADa;AAE3BZ,MAAAA,KAAK,EAAE;AAFoB,KAAvB,CAtBL;AA0BHa,IAAAA,UAAU,EAAE,iCAAqB;AAC7Bb,MAAAA,KAAK,EAAE;AADsB,KAArB,CA1BT;AA6BHc,IAAAA,WAAW,EAAE,4BAAgB;AACzBd,MAAAA,KAAK,EAAE,cADkB;AAEzBC,MAAAA,YAAY,EAAE;AAFW,KAAhB,CA7BV;AAiCHc,IAAAA,aAAa,EAAE,4BAAgB;AAC3Bf,MAAAA,KAAK,EAAE,gBADoB;AAE3BC,MAAAA,YAAY,EAAE;AAFa,KAAhB;AAjCZ;AANc,CAAlB","sourcesContent":["import { COMPONENT_TYPES, createStaticNumberProp, createFieldNameProp, createStaticBoolProp, Triggers, createColorProp, GROUPS, } from \"@draftbit/types\";\nexport const SEED_DATA = {\n    name: \"Star Rating\",\n    tag: \"StarRating\",\n    description: \"A star rating component\",\n    category: COMPONENT_TYPES.button,\n    triggers: [Triggers.OnPress],\n    props: {\n        starSize: createStaticNumberProp({\n            label: \"Star size\",\n            description: \"Size of each individual star\",\n            defaultValue: 16,\n            min: 8,\n            max: 36,\n            step: 1,\n        }),\n        fieldName: createFieldNameProp({\n            defaultValue: \"ratingValue\",\n            handlerPropName: \"onPress\",\n            valuePropName: \"rating\", // the value prop in this component\n        }),\n        maxStars: createStaticNumberProp({\n            label: \"Max stars\",\n            description: \"The max number of stars\",\n            defaultValue: 5,\n            min: 0,\n            max: 10,\n            step: 1,\n        }),\n        rating: createStaticNumberProp({\n            group: GROUPS.data,\n            label: \"Rating\",\n        }),\n        isEditable: createStaticBoolProp({\n            label: \"Editable\",\n        }),\n        activeColor: createColorProp({\n            label: \"Active Color\",\n            defaultValue: \"primary\",\n        }),\n        inactiveColor: createColorProp({\n            label: \"Inactive Color\",\n            defaultValue: \"divider\",\n        }),\n    },\n};\n"]}

package/lib/commonjs/mappings/TextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TextField.ts"],"names":["SEED_DATA_PROPS","TEXT_INPUT_PROPS","label","group","GROUPS","data","description","formType","FORM_TYPES","string","propType","PROP_TYPES","STRING","defaultValue","editable","required","assistiveText","basic","error","boolean","BOOLEAN","leftIconName","icon","ASSET","leftIconMode","flatArray","options","rightIconName","fieldName","FIELD_NAME","handlerPropName","SEED_DATA_TRIGGERS","Triggers","OnChangeText","SEED_DATA","name","tag","category","COMPONENT_TYPES","input","preview_image_url","supports_list_render","triggers","props","type","underlineColor","secureTextEntry","layout","placeholder","multiline","uncategorized","numberOfLines"],"mappings":"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","sourcesContent":["import {\n  GROUPS,\n  COMPONENT_TYPES,\n  FORM_TYPES,\n  PROP_TYPES,\n  FIELD_NAME,\n  TEXT_INPUT_PROPS,\n  Triggers,\n  createColorProp,\n  createNumberProp,\n  createFieldNameProp,\n} from \"@draftbit/types\";\n\nconst SEED_DATA_PROPS = {\n  ...TEXT_INPUT_PROPS,\n  label: {\n    group: GROUPS.data,\n    label: \"Label\",\n    description: \"The label to be displayed on the text field\",\n    formType: FORM_TYPES.string,\n    propType: PROP_TYPES.STRING,\n    defaultValue: null,\n    editable: true,\n    required: true,\n  },\n  assistiveText: {\n    group: GROUPS.basic,\n    label: \"Assistive text\",\n    description: \"Helper text to display below the input\",\n    formType: FORM_TYPES.string,\n    propType: PROP_TYPES.STRING,\n    defaultValue: null,\n    editable: true,\n    required: false,\n  },\n  error: {\n    group: GROUPS.data,\n    label: \"Error\",\n    description: \"Whether the input should display the error state\",\n    formType: FORM_TYPES.boolean,\n    propType: PROP_TYPES.BOOLEAN,\n    defaultValue: null,\n    editable: true,\n    required: false,\n  },\n  leftIconName: {\n    group: GROUPS.basic,\n    label: \"Left icon name\",\n    description: \"The icon to display on the left\",\n    formType: FORM_TYPES.icon,\n    propType: PROP_TYPES.ASSET,\n    defaultValue: null,\n    editable: true,\n    required: false,\n  },\n  leftIconMode: {\n    group: GROUPS.basic,\n    label: \"Left icon mode\",\n    description:\n      \"The mode of the icon to display on the left. 'inset' or 'outset'.\",\n    formType: FORM_TYPES.flatArray,\n    propType: PROP_TYPES.STRING,\n    defaultValue: null /* inset */,\n    options: [\"inset\", \"outset\"],\n    editable: true,\n    required: true,\n  },\n  rightIconName: {\n    group: GROUPS.basic,\n    label: \"Right icon name\",\n    description: \"The icon to display on the right\",\n    formType: FORM_TYPES.icon,\n    propType: PROP_TYPES.ASSET,\n    defaultValue: null,\n    editable: true,\n    required: false,\n  },\n  fieldName: {\n    ...FIELD_NAME,\n    handlerPropName: \"onChangeText\",\n    defaultValue: \"textFieldValue\",\n  },\n};\n\nconst SEED_DATA_TRIGGERS = [Triggers.OnChangeText];\nexport const SEED_DATA = [\n  {\n    name: \"Styled Text Field\",\n    tag: \"TextField\",\n    description: \"A text input with a solid border or underline\",\n    category: COMPONENT_TYPES.input,\n    preview_image_url: \"{CLOUDINARY_URL}/Textfield.png\",\n    supports_list_render: false,\n    triggers: SEED_DATA_TRIGGERS,\n    props: {\n      ...SEED_DATA_PROPS,\n      type: {\n        label: \"Appearance\",\n        description: \"Type of Datepicker\",\n        formType: FORM_TYPES.flatArray,\n        propType: PROP_TYPES.STRING,\n        defaultValue: \"solid\",\n        options: [\"solid\", \"underline\"],\n        editable: true,\n        required: true,\n        group: GROUPS.basic,\n      },\n      underlineColor: createColorProp({\n        label: \"Underline Color\",\n        defaultValue: \"light\",\n      }),\n      secureTextEntry: {\n        group: GROUPS.basic,\n        label: \"Password field\",\n        description:\n          \"If true, this turns the field into a password field, hiding the text\",\n        formType: FORM_TYPES.boolean,\n        propType: PROP_TYPES.BOOLEAN,\n        defaultValue: null,\n        editable: true,\n        required: false,\n      },\n    },\n    layout: {},\n  },\n  {\n    name: \"Styled Text Area\",\n    tag: \"TextField\",\n    description: \"A text area with a solid border or underline\",\n    category: COMPONENT_TYPES.input,\n    preview_image_url: \"{CLOUDINARY_URL}/TextArea.png\",\n    supports_list_render: false,\n    triggers: SEED_DATA_TRIGGERS,\n    props: {\n      ...SEED_DATA_PROPS,\n      placeholder: {\n        ...TEXT_INPUT_PROPS.placeholder,\n        defaultValue:\n          \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\",\n      },\n      type: {\n        label: \"Appearance\",\n        description: \"Type of Datepicker\",\n        formType: FORM_TYPES.flatArray,\n        propType: PROP_TYPES.STRING,\n        defaultValue: \"solid\",\n        options: [\"solid\", \"underline\"],\n        editable: true,\n        required: true,\n        group: GROUPS.basic,\n      },\n      multiline: {\n        label: \"Multiline\",\n        description: \"Multiline\",\n        group: GROUPS.uncategorized,\n        formType: FORM_TYPES.boolean,\n        propType: PROP_TYPES.BOOLEAN,\n        defaultValue: true,\n        editable: false,\n        required: false,\n      },\n      numberOfLines: createNumberProp({\n        label: \"Number of Lines\",\n        description: \"Number of Lines for Multiline Field\",\n        defaultValue: 4,\n        group: GROUPS.basic,\n      }),\n      fieldName: createFieldNameProp({\n        defaultValue: \"textAreaValue\",\n      }),\n    },\n    layout: {},\n  },\n];\n"]}
+{"version":3,"sources":["TextField.js"],"names":["SEED_DATA_PROPS","TEXT_INPUT_PROPS","label","group","GROUPS","data","description","formType","FORM_TYPES","string","propType","PROP_TYPES","STRING","defaultValue","editable","required","assistiveText","basic","error","boolean","BOOLEAN","leftIconName","icon","ASSET","leftIconMode","flatArray","options","rightIconName","fieldName","FIELD_NAME","handlerPropName","SEED_DATA_TRIGGERS","Triggers","OnChangeText","SEED_DATA","name","tag","category","COMPONENT_TYPES","input","preview_image_url","supports_list_render","triggers","props","type","underlineColor","secureTextEntry","layout","placeholder","multiline","uncategorized","numberOfLines"],"mappings":";;;;;;;AAAA;;AACA,MAAMA,eAAe,GAAG,EACpB,GAAGC,uBADiB;AAEpBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,KAAK,EAAEC,cAAOC,IADX;AAEHH,IAAAA,KAAK,EAAE,OAFJ;AAGHI,IAAAA,WAAW,EAAE,6CAHV;AAIHC,IAAAA,QAAQ,EAAEC,kBAAWC,MAJlB;AAKHC,IAAAA,QAAQ,EAAEC,kBAAWC,MALlB;AAMHC,IAAAA,YAAY,EAAE,IANX;AAOHC,IAAAA,QAAQ,EAAE,IAPP;AAQHC,IAAAA,QAAQ,EAAE;AARP,GAFa;AAYpBC,EAAAA,aAAa,EAAE;AACXb,IAAAA,KAAK,EAAEC,cAAOa,KADH;AAEXf,IAAAA,KAAK,EAAE,gBAFI;AAGXI,IAAAA,WAAW,EAAE,wCAHF;AAIXC,IAAAA,QAAQ,EAAEC,kBAAWC,MAJV;AAKXC,IAAAA,QAAQ,EAAEC,kBAAWC,MALV;AAMXC,IAAAA,YAAY,EAAE,IANH;AAOXC,IAAAA,QAAQ,EAAE,IAPC;AAQXC,IAAAA,QAAQ,EAAE;AARC,GAZK;AAsBpBG,EAAAA,KAAK,EAAE;AACHf,IAAAA,KAAK,EAAEC,cAAOC,IADX;AAEHH,IAAAA,KAAK,EAAE,OAFJ;AAGHI,IAAAA,WAAW,EAAE,kDAHV;AAIHC,IAAAA,QAAQ,EAAEC,kBAAWW,OAJlB;AAKHT,IAAAA,QAAQ,EAAEC,kBAAWS,OALlB;AAMHP,IAAAA,YAAY,EAAE,IANX;AAOHC,IAAAA,QAAQ,EAAE,IAPP;AAQHC,IAAAA,QAAQ,EAAE;AARP,GAtBa;AAgCpBM,EAAAA,YAAY,EAAE;AACVlB,IAAAA,KAAK,EAAEC,cAAOa,KADJ;AAEVf,IAAAA,KAAK,EAAE,gBAFG;AAGVI,IAAAA,WAAW,EAAE,iCAHH;AAIVC,IAAAA,QAAQ,EAAEC,kBAAWc,IAJX;AAKVZ,IAAAA,QAAQ,EAAEC,kBAAWY,KALX;AAMVV,IAAAA,YAAY,EAAE,IANJ;AAOVC,IAAAA,QAAQ,EAAE,IAPA;AAQVC,IAAAA,QAAQ,EAAE;AARA,GAhCM;AA0CpBS,EAAAA,YAAY,EAAE;AACVrB,IAAAA,KAAK,EAAEC,cAAOa,KADJ;AAEVf,IAAAA,KAAK,EAAE,gBAFG;AAGVI,IAAAA,WAAW,EAAE,mEAHH;AAIVC,IAAAA,QAAQ,EAAEC,kBAAWiB,SAJX;AAKVf,IAAAA,QAAQ,EAAEC,kBAAWC,MALX;AAMVC,IAAAA,YAAY,EAAE;AAAK;AANT;AAOVa,IAAAA,OAAO,EAAE,CAAC,OAAD,EAAU,QAAV,CAPC;AAQVZ,IAAAA,QAAQ,EAAE,IARA;AASVC,IAAAA,QAAQ,EAAE;AATA,GA1CM;AAqDpBY,EAAAA,aAAa,EAAE;AACXxB,IAAAA,KAAK,EAAEC,cAAOa,KADH;AAEXf,IAAAA,KAAK,EAAE,iBAFI;AAGXI,IAAAA,WAAW,EAAE,kCAHF;AAIXC,IAAAA,QAAQ,EAAEC,kBAAWc,IAJV;AAKXZ,IAAAA,QAAQ,EAAEC,kBAAWY,KALV;AAMXV,IAAAA,YAAY,EAAE,IANH;AAOXC,IAAAA,QAAQ,EAAE,IAPC;AAQXC,IAAAA,QAAQ,EAAE;AARC,GArDK;AA+DpBa,EAAAA,SAAS,EAAE,EACP,GAAGC,iBADI;AAEPC,IAAAA,eAAe,EAAE,cAFV;AAGPjB,IAAAA,YAAY,EAAE;AAHP;AA/DS,CAAxB;AAqEA,MAAMkB,kBAAkB,GAAG,CAACC,gBAASC,YAAV,CAA3B;AACO,MAAMC,SAAS,GAAG,CACrB;AACIC,EAAAA,IAAI,EAAE,mBADV;AAEIC,EAAAA,GAAG,EAAE,WAFT;AAGI9B,EAAAA,WAAW,EAAE,+CAHjB;AAII+B,EAAAA,QAAQ,EAAEC,uBAAgBC,KAJ9B;AAKIC,EAAAA,iBAAiB,EAAE,gCALvB;AAMIC,EAAAA,oBAAoB,EAAE,KAN1B;AAOIC,EAAAA,QAAQ,EAAEX,kBAPd;AAQIY,EAAAA,KAAK,EAAE,EACH,GAAG3C,eADA;AAEH4C,IAAAA,IAAI,EAAE;AACF1C,MAAAA,KAAK,EAAE,YADL;AAEFI,MAAAA,WAAW,EAAE,oBAFX;AAGFC,MAAAA,QAAQ,EAAEC,kBAAWiB,SAHnB;AAIFf,MAAAA,QAAQ,EAAEC,kBAAWC,MAJnB;AAKFC,MAAAA,YAAY,EAAE,OALZ;AAMFa,MAAAA,OAAO,EAAE,CAAC,OAAD,EAAU,WAAV,CANP;AAOFZ,MAAAA,QAAQ,EAAE,IAPR;AAQFC,MAAAA,QAAQ,EAAE,IARR;AASFZ,MAAAA,KAAK,EAAEC,cAAOa;AATZ,KAFH;AAaH4B,IAAAA,cAAc,EAAE,4BAAgB;AAC5B3C,MAAAA,KAAK,EAAE,iBADqB;AAE5BW,MAAAA,YAAY,EAAE;AAFc,KAAhB,CAbb;AAiBHiC,IAAAA,eAAe,EAAE;AACb3C,MAAAA,KAAK,EAAEC,cAAOa,KADD;AAEbf,MAAAA,KAAK,EAAE,gBAFM;AAGbI,MAAAA,WAAW,EAAE,sEAHA;AAIbC,MAAAA,QAAQ,EAAEC,kBAAWW,OAJR;AAKbT,MAAAA,QAAQ,EAAEC,kBAAWS,OALR;AAMbP,MAAAA,YAAY,EAAE,IAND;AAObC,MAAAA,QAAQ,EAAE,IAPG;AAQbC,MAAAA,QAAQ,EAAE;AARG;AAjBd,GARX;AAoCIgC,EAAAA,MAAM,EAAE;AApCZ,CADqB,EAuCrB;AACIZ,EAAAA,IAAI,EAAE,kBADV;AAEIC,EAAAA,GAAG,EAAE,WAFT;AAGI9B,EAAAA,WAAW,EAAE,8CAHjB;AAII+B,EAAAA,QAAQ,EAAEC,uBAAgBC,KAJ9B;AAKIC,EAAAA,iBAAiB,EAAE,+BALvB;AAMIC,EAAAA,oBAAoB,EAAE,KAN1B;AAOIC,EAAAA,QAAQ,EAAEX,kBAPd;AAQIY,EAAAA,KAAK,EAAE,EACH,GAAG3C,eADA;AAEHgD,IAAAA,WAAW,EAAE,EACT,GAAG/C,wBAAiB+C,WADX;AAETnC,MAAAA,YAAY,EAAE;AAFL,KAFV;AAMH+B,IAAAA,IAAI,EAAE;AACF1C,MAAAA,KAAK,EAAE,YADL;AAEFI,MAAAA,WAAW,EAAE,oBAFX;AAGFC,MAAAA,QAAQ,EAAEC,kBAAWiB,SAHnB;AAIFf,MAAAA,QAAQ,EAAEC,kBAAWC,MAJnB;AAKFC,MAAAA,YAAY,EAAE,OALZ;AAMFa,MAAAA,OAAO,EAAE,CAAC,OAAD,EAAU,WAAV,CANP;AAOFZ,MAAAA,QAAQ,EAAE,IAPR;AAQFC,MAAAA,QAAQ,EAAE,IARR;AASFZ,MAAAA,KAAK,EAAEC,cAAOa;AATZ,KANH;AAiBHgC,IAAAA,SAAS,EAAE;AACP/C,MAAAA,KAAK,EAAE,WADA;AAEPI,MAAAA,WAAW,EAAE,WAFN;AAGPH,MAAAA,KAAK,EAAEC,cAAO8C,aAHP;AAIP3C,MAAAA,QAAQ,EAAEC,kBAAWW,OAJd;AAKPT,MAAAA,QAAQ,EAAEC,kBAAWS,OALd;AAMPP,MAAAA,YAAY,EAAE,IANP;AAOPC,MAAAA,QAAQ,EAAE,KAPH;AAQPC,MAAAA,QAAQ,EAAE;AARH,KAjBR;AA2BHoC,IAAAA,aAAa,EAAE,6BAAiB;AAC5BjD,MAAAA,KAAK,EAAE,iBADqB;AAE5BI,MAAAA,WAAW,EAAE,qCAFe;AAG5BO,MAAAA,YAAY,EAAE,CAHc;AAI5BV,MAAAA,KAAK,EAAEC,cAAOa;AAJc,KAAjB,CA3BZ;AAiCHW,IAAAA,SAAS,EAAE,gCAAoB;AAC3Bf,MAAAA,YAAY,EAAE;AADa,KAApB;AAjCR,GARX;AA6CIkC,EAAAA,MAAM,EAAE;AA7CZ,CAvCqB,CAAlB","sourcesContent":["import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, TEXT_INPUT_PROPS, Triggers, createColorProp, createNumberProp, createFieldNameProp, } from \"@draftbit/types\";\nconst SEED_DATA_PROPS = {\n    ...TEXT_INPUT_PROPS,\n    label: {\n        group: GROUPS.data,\n        label: \"Label\",\n        description: \"The label to be displayed on the text field\",\n        formType: FORM_TYPES.string,\n        propType: PROP_TYPES.STRING,\n        defaultValue: null,\n        editable: true,\n        required: true,\n    },\n    assistiveText: {\n        group: GROUPS.basic,\n        label: \"Assistive text\",\n        description: \"Helper text to display below the input\",\n        formType: FORM_TYPES.string,\n        propType: PROP_TYPES.STRING,\n        defaultValue: null,\n        editable: true,\n        required: false,\n    },\n    error: {\n        group: GROUPS.data,\n        label: \"Error\",\n        description: \"Whether the input should display the error state\",\n        formType: FORM_TYPES.boolean,\n        propType: PROP_TYPES.BOOLEAN,\n        defaultValue: null,\n        editable: true,\n        required: false,\n    },\n    leftIconName: {\n        group: GROUPS.basic,\n        label: \"Left icon name\",\n        description: \"The icon to display on the left\",\n        formType: FORM_TYPES.icon,\n        propType: PROP_TYPES.ASSET,\n        defaultValue: null,\n        editable: true,\n        required: false,\n    },\n    leftIconMode: {\n        group: GROUPS.basic,\n        label: \"Left icon mode\",\n        description: \"The mode of the icon to display on the left. 'inset' or 'outset'.\",\n        formType: FORM_TYPES.flatArray,\n        propType: PROP_TYPES.STRING,\n        defaultValue: null /* inset */,\n        options: [\"inset\", \"outset\"],\n        editable: true,\n        required: true,\n    },\n    rightIconName: {\n        group: GROUPS.basic,\n        label: \"Right icon name\",\n        description: \"The icon to display on the right\",\n        formType: FORM_TYPES.icon,\n        propType: PROP_TYPES.ASSET,\n        defaultValue: null,\n        editable: true,\n        required: false,\n    },\n    fieldName: {\n        ...FIELD_NAME,\n        handlerPropName: \"onChangeText\",\n        defaultValue: \"textFieldValue\",\n    },\n};\nconst SEED_DATA_TRIGGERS = [Triggers.OnChangeText];\nexport const SEED_DATA = [\n    {\n        name: \"Styled Text Field\",\n        tag: \"TextField\",\n        description: \"A text input with a solid border or underline\",\n        category: COMPONENT_TYPES.input,\n        preview_image_url: \"{CLOUDINARY_URL}/Textfield.png\",\n        supports_list_render: false,\n        triggers: SEED_DATA_TRIGGERS,\n        props: {\n            ...SEED_DATA_PROPS,\n            type: {\n                label: \"Appearance\",\n                description: \"Type of Datepicker\",\n                formType: FORM_TYPES.flatArray,\n                propType: PROP_TYPES.STRING,\n                defaultValue: \"solid\",\n                options: [\"solid\", \"underline\"],\n                editable: true,\n                required: true,\n                group: GROUPS.basic,\n            },\n            underlineColor: createColorProp({\n                label: \"Underline Color\",\n                defaultValue: \"light\",\n            }),\n            secureTextEntry: {\n                group: GROUPS.basic,\n                label: \"Password field\",\n                description: \"If true, this turns the field into a password field, hiding the text\",\n                formType: FORM_TYPES.boolean,\n                propType: PROP_TYPES.BOOLEAN,\n                defaultValue: null,\n                editable: true,\n                required: false,\n            },\n        },\n        layout: {},\n    },\n    {\n        name: \"Styled Text Area\",\n        tag: \"TextField\",\n        description: \"A text area with a solid border or underline\",\n        category: COMPONENT_TYPES.input,\n        preview_image_url: \"{CLOUDINARY_URL}/TextArea.png\",\n        supports_list_render: false,\n        triggers: SEED_DATA_TRIGGERS,\n        props: {\n            ...SEED_DATA_PROPS,\n            placeholder: {\n                ...TEXT_INPUT_PROPS.placeholder,\n                defaultValue: \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\",\n            },\n            type: {\n                label: \"Appearance\",\n                description: \"Type of Datepicker\",\n                formType: FORM_TYPES.flatArray,\n                propType: PROP_TYPES.STRING,\n                defaultValue: \"solid\",\n                options: [\"solid\", \"underline\"],\n                editable: true,\n                required: true,\n                group: GROUPS.basic,\n            },\n            multiline: {\n                label: \"Multiline\",\n                description: \"Multiline\",\n                group: GROUPS.uncategorized,\n                formType: FORM_TYPES.boolean,\n                propType: PROP_TYPES.BOOLEAN,\n                defaultValue: true,\n                editable: false,\n                required: false,\n            },\n            numberOfLines: createNumberProp({\n                label: \"Number of Lines\",\n                description: \"Number of Lines for Multiline Field\",\n                defaultValue: 4,\n                group: GROUPS.basic,\n            }),\n            fieldName: createFieldNameProp({\n                defaultValue: \"textAreaValue\",\n            }),\n        },\n        layout: {},\n    },\n];\n"]}

package/lib/module/components/Stepper.js

@@ -1,77 +1,59 @@
-import * as React from "react";
+import React, { useEffect, useState } from "react";
 import { View, Text } from "react-native";
+import { isNumber } from "lodash";
 import { withTheme } from "../theming";
 import IconButton from "./IconButton";
-import isNumber from "lodash.isnumber";
 
 const Stepper = _ref => {
   let {
-    Icon,
-    value,
-    min,
-    max,
+    min = -Infinity,
+    max = Infinity,
+    value: valueProp,
+    defaultValue,
     style,
+    typeStyle,
+    iconSize = 24,
+    iconColor,
     onChange,
-    defaultValue,
     theme: {
       colors,
-      typography,
-      roundness
+      typography
     },
-    iconSize = 24,
-    iconColor = colors.strong,
-    borderRadius = roundness,
-    typeStyle
+    Icon
   } = _ref;
-  const [stateValue, setStateValue] = React.useState(value || defaultValue || 0);
-  React.useEffect(() => {
-    if (value || value === 0) {
-      onChange && onChange(stateValue);
-    }
-  }, [onChange, stateValue, value]);
-  React.useEffect(() => {
-    let newValue = value || defaultValue || 0;
+  const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
 
-    if (isNumber(max) && newValue > max) {
-      newValue = max;
-    }
+  const isValidValue = valueArg => valueArg >= min && valueArg <= max;
 
-    if (isNumber(min) && newValue < min) {
-      newValue = min;
-    }
+  const handlePlusOrMinus = type => {
+    const newValue = type === "plus" ? value + 1 : value - 1;
 
-    setStateValue(newValue);
-  }, [defaultValue, value, min, max]);
-  const handleMinus = React.useCallback(() => {
-    if (isNumber(min) && value === min) {
-      return;
+    if (isValidValue(newValue)) {
+      setValue(newValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
     }
+  };
 
-    setStateValue(stateValue - 1);
-  }, [min, stateValue, value]);
-  const handlePlus = React.useCallback(() => {
-    if (isNumber(max) && value === max) {
-      return;
-    }
+  useEffect(() => {
+    if (valueProp != null && isNumber(valueProp) && valueProp !== value && isValidValue(valueProp)) {
+      setValue(valueProp);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-    setStateValue(stateValue + 1);
-  }, [max, stateValue, value]);
+  }, [valueProp]);
   return /*#__PURE__*/React.createElement(View, {
     style: [{
       flexDirection: "row"
-    }, style, borderRadius ? {
-      borderRadius
-    } : {}]
+    }, style]
   }, /*#__PURE__*/React.createElement(IconButton, {
     Icon: Icon,
     icon: "MaterialIcons/remove",
-    onPress: handleMinus,
+    onPress: () => handlePlusOrMinus("minus"),
     size: iconSize,
     color: iconColor,
-    disabled: stateValue === min,
-    style: stateValue === min ? {
-      opacity: 0.5
-    } : {}
+    disabled: value === min,
+    style: {
+      opacity: value === min ? 0.5 : 1
+    }
   }), /*#__PURE__*/React.createElement(Text, {
     style: [typography.body1, {
       textAlign: "center",
@@ -79,16 +61,16 @@ const Stepper = _ref => {
       color: colors.medium,
       marginHorizontal: 8
     }, typeStyle]
-  }, value || stateValue), /*#__PURE__*/React.createElement(IconButton, {
+  }, value), /*#__PURE__*/React.createElement(IconButton, {
     Icon: Icon,
     icon: "MaterialIcons/add",
-    onPress: handlePlus,
+    onPress: () => handlePlusOrMinus("plus"),
     size: iconSize,
     color: iconColor,
-    disabled: stateValue === max,
-    style: stateValue === max ? {
-      opacity: 0.5
-    } : {}
+    disabled: value === max,
+    style: {
+      opacity: value === max ? 0.5 : 1
+    }
   }));
 };
 

package/lib/module/components/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Stepper.tsx"],"names":["React","View","Text","withTheme","IconButton","isNumber","Stepper","Icon","value","min","max","style","onChange","defaultValue","theme","colors","typography","roundness","iconSize","iconColor","strong","borderRadius","typeStyle","stateValue","setStateValue","useState","useEffect","newValue","handleMinus","useCallback","handlePlus","flexDirection","opacity","body1","textAlign","alignSelf","color","medium","marginHorizontal"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { View, Text, StyleProp, ViewStyle, TextStyle } from \"react-native\";\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\n\nimport IconButton from \"./IconButton\";\nimport isNumber from \"lodash.isnumber\";\n\ntype Props = {\n  value?: number;\n  min?: number;\n  max?: number;\n  theme: Theme;\n  style?: StyleProp<ViewStyle>;\n  onChange?: (value: number) => void;\n  defaultValue?: number;\n  iconSize?: number;\n  iconColor?: string;\n  borderRadius?: number;\n  typeStyle?: StyleProp<TextStyle>;\n} & IconSlot;\n\nconst Stepper: React.FC<Props> = ({\n  Icon,\n  value,\n  min,\n  max,\n  style,\n  onChange,\n  defaultValue,\n  theme: { colors, typography, roundness },\n  iconSize = 24,\n  iconColor = colors.strong,\n  borderRadius = roundness,\n  typeStyle,\n}) => {\n  const [stateValue, setStateValue] = React.useState(\n    value || defaultValue || 0\n  );\n\n  React.useEffect(() => {\n    if (value || value === 0) {\n      onChange && onChange(stateValue);\n    }\n  }, [onChange, stateValue, value]);\n\n  React.useEffect(() => {\n    let newValue = value || defaultValue || 0;\n    if (isNumber(max) && newValue > max) {\n      newValue = max;\n    }\n    if (isNumber(min) && newValue < min) {\n      newValue = min;\n    }\n    setStateValue(newValue);\n  }, [defaultValue, value, min, max]);\n\n  const handleMinus = React.useCallback(() => {\n    if (isNumber(min) && value === min) {\n      return;\n    }\n    setStateValue(stateValue - 1);\n  }, [min, stateValue, value]);\n\n  const handlePlus = React.useCallback(() => {\n    if (isNumber(max) && value === max) {\n      return;\n    }\n    setStateValue(stateValue + 1);\n  }, [max, stateValue, value]);\n\n  return (\n    <View\n      style={[\n        { flexDirection: \"row\" },\n        style,\n        borderRadius ? { borderRadius } : {},\n      ]}\n    >\n      <IconButton\n        Icon={Icon}\n        icon=\"MaterialIcons/remove\"\n        onPress={handleMinus}\n        size={iconSize}\n        color={iconColor}\n        disabled={stateValue === min}\n        style={stateValue === min ? { opacity: 0.5 } : {}}\n      />\n      <Text\n        style={[\n          typography.body1,\n          {\n            textAlign: \"center\",\n            alignSelf: \"center\",\n            color: colors.medium,\n            marginHorizontal: 8,\n          },\n          typeStyle,\n        ]}\n      >\n        {value || stateValue}\n      </Text>\n      <IconButton\n        Icon={Icon}\n        icon=\"MaterialIcons/add\"\n        onPress={handlePlus}\n        size={iconSize}\n        color={iconColor}\n        disabled={stateValue === max}\n        style={stateValue === max ? { opacity: 0.5 } : {}}\n      />\n    </View>\n  );\n};\n\nexport default withTheme(Stepper);\n"]}
+{"version":3,"sources":["Stepper.tsx"],"names":["React","useEffect","useState","View","Text","isNumber","withTheme","IconButton","Stepper","min","Infinity","max","value","valueProp","defaultValue","style","typeStyle","iconSize","iconColor","onChange","theme","colors","typography","Icon","setValue","isValidValue","valueArg","handlePlusOrMinus","type","newValue","flexDirection","opacity","body1","textAlign","alignSelf","color","medium","marginHorizontal"],"mappings":"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","sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { View, Text, StyleProp, ViewStyle, TextStyle } from \"react-native\";\nimport { isNumber } from \"lodash\";\n\nimport { withTheme } from \"../theming\";\nimport type { Theme } from \"../styles/DefaultTheme\";\nimport type { IconSlot } from \"../interfaces/Icon\";\nimport IconButton from \"./IconButton\";\n\ntype Props = {\n  min: number;\n  max: number;\n  value?: number;\n  defaultValue?: number;\n  style?: StyleProp<ViewStyle>;\n  typeStyle?: StyleProp<TextStyle>;\n  iconSize: number;\n  iconColor?: string;\n  onChange?: (value: number) => void;\n  theme: Theme;\n} & IconSlot;\n\nconst Stepper: FC<Props> = ({\n  min = -Infinity,\n  max = Infinity,\n  value: valueProp,\n  defaultValue,\n  style,\n  typeStyle,\n  iconSize = 24,\n  iconColor,\n  onChange,\n  theme: { colors, typography },\n  Icon,\n}) => {\n  const [value, setValue] = useState(defaultValue ?? 0);\n\n  const isValidValue = (valueArg: number) => valueArg >= min && valueArg <= max;\n\n  const handlePlusOrMinus = (type: \"plus\" | \"minus\") => {\n    const newValue = type === \"plus\" ? value + 1 : value - 1;\n\n    if (isValidValue(newValue)) {\n      setValue(newValue);\n      onChange?.(newValue);\n    }\n  };\n\n  useEffect(() => {\n    if (\n      valueProp != null &&\n      isNumber(valueProp) &&\n      valueProp !== value &&\n      isValidValue(valueProp)\n    ) {\n      setValue(valueProp);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [valueProp]);\n\n  return (\n    <View style={[{ flexDirection: \"row\" }, style]}>\n      <IconButton\n        Icon={Icon}\n        icon=\"MaterialIcons/remove\"\n        onPress={() => handlePlusOrMinus(\"minus\")}\n        size={iconSize}\n        color={iconColor}\n        disabled={value === min}\n        style={{ opacity: value === min ? 0.5 : 1 }}\n      />\n\n      <Text\n        style={[\n          typography.body1,\n          {\n            textAlign: \"center\",\n            alignSelf: \"center\",\n            color: colors.medium,\n            marginHorizontal: 8,\n          },\n          typeStyle,\n        ]}\n      >\n        {value}\n      </Text>\n\n      <IconButton\n        Icon={Icon}\n        icon=\"MaterialIcons/add\"\n        onPress={() => handlePlusOrMinus(\"plus\")}\n        size={iconSize}\n        color={iconColor}\n        disabled={value === max}\n        style={{ opacity: value === max ? 0.5 : 1 }}\n      />\n    </View>\n  );\n};\n\nexport default withTheme(Stepper);\n"]}

package/lib/module/mappings/Icon.js

@@ -15,7 +15,7 @@ export const SEED_DATA = {
       label: "Size",
       description: "Width and height of your icon",
       defaultValue: 24,
-      min: 16,
+      min: 1,
       max: 128,
       step: 1,
       precision: 0

package/lib/module/mappings/Icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Icon.ts"],"names":["COMPONENT_TYPES","GROUPS","createNumberProp","createColorProp","createIconProp","SEED_DATA","name","tag","description","category","basic","layout","props","group","data","color","size","label","defaultValue","min","max","step","precision"],"mappings":"AAAA,SACEA,eADF,EAEEC,MAFF,EAGEC,gBAHF,EAIEC,eAJF,EAKEC,cALF,QAMO,iBANP;AAQA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,MADiB;AAEvBC,EAAAA,GAAG,EAAE,MAFkB;AAGvBC,EAAAA,WAAW,EAAE,SAHU;AAIvBC,EAAAA,QAAQ,EAAET,eAAe,CAACU,KAJH;AAKvBC,EAAAA,MAAM,EAAE,EALe;AAMvBC,EAAAA,KAAK,EAAE;AACLN,IAAAA,IAAI,EAAE,EACJ,GAAGF,cAAc,EADb;AAEJS,MAAAA,KAAK,EAAEZ,MAAM,CAACa;AAFV,KADD;AAKLC,IAAAA,KAAK,EAAEZ,eAAe,EALjB;AAMLa,IAAAA,IAAI,EAAEd,gBAAgB,CAAC;AACrBW,MAAAA,KAAK,EAAEZ,MAAM,CAACS,KADO;AAErBO,MAAAA,KAAK,EAAE,MAFc;AAGrBT,MAAAA,WAAW,EAAE,+BAHQ;AAIrBU,MAAAA,YAAY,EAAE,EAJO;AAKrBC,MAAAA,GAAG,EAAE,EALgB;AAMrBC,MAAAA,GAAG,EAAE,GANgB;AAOrBC,MAAAA,IAAI,EAAE,CAPe;AAQrBC,MAAAA,SAAS,EAAE;AARU,KAAD;AANjB;AANgB,CAAlB","sourcesContent":["import {\n  COMPONENT_TYPES,\n  GROUPS,\n  createNumberProp,\n  createColorProp,\n  createIconProp,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n  name: \"Icon\",\n  tag: \"Icon\",\n  description: \"An icon\",\n  category: COMPONENT_TYPES.basic,\n  layout: {},\n  props: {\n    name: {\n      ...createIconProp(),\n      group: GROUPS.data,\n    },\n    color: createColorProp(),\n    size: createNumberProp({\n      group: GROUPS.basic,\n      label: \"Size\",\n      description: \"Width and height of your icon\",\n      defaultValue: 24,\n      min: 16,\n      max: 128,\n      step: 1,\n      precision: 0,\n    }),\n  },\n};\n"]}
+{"version":3,"sources":["Icon.ts"],"names":["COMPONENT_TYPES","GROUPS","createNumberProp","createColorProp","createIconProp","SEED_DATA","name","tag","description","category","basic","layout","props","group","data","color","size","label","defaultValue","min","max","step","precision"],"mappings":"AAAA,SACEA,eADF,EAEEC,MAFF,EAGEC,gBAHF,EAIEC,eAJF,EAKEC,cALF,QAMO,iBANP;AAQA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,MADiB;AAEvBC,EAAAA,GAAG,EAAE,MAFkB;AAGvBC,EAAAA,WAAW,EAAE,SAHU;AAIvBC,EAAAA,QAAQ,EAAET,eAAe,CAACU,KAJH;AAKvBC,EAAAA,MAAM,EAAE,EALe;AAMvBC,EAAAA,KAAK,EAAE;AACLN,IAAAA,IAAI,EAAE,EACJ,GAAGF,cAAc,EADb;AAEJS,MAAAA,KAAK,EAAEZ,MAAM,CAACa;AAFV,KADD;AAKLC,IAAAA,KAAK,EAAEZ,eAAe,EALjB;AAMLa,IAAAA,IAAI,EAAEd,gBAAgB,CAAC;AACrBW,MAAAA,KAAK,EAAEZ,MAAM,CAACS,KADO;AAErBO,MAAAA,KAAK,EAAE,MAFc;AAGrBT,MAAAA,WAAW,EAAE,+BAHQ;AAIrBU,MAAAA,YAAY,EAAE,EAJO;AAKrBC,MAAAA,GAAG,EAAE,CALgB;AAMrBC,MAAAA,GAAG,EAAE,GANgB;AAOrBC,MAAAA,IAAI,EAAE,CAPe;AAQrBC,MAAAA,SAAS,EAAE;AARU,KAAD;AANjB;AANgB,CAAlB","sourcesContent":["import {\n  COMPONENT_TYPES,\n  GROUPS,\n  createNumberProp,\n  createColorProp,\n  createIconProp,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n  name: \"Icon\",\n  tag: \"Icon\",\n  description: \"An icon\",\n  category: COMPONENT_TYPES.basic,\n  layout: {},\n  props: {\n    name: {\n      ...createIconProp(),\n      group: GROUPS.data,\n    },\n    color: createColorProp(),\n    size: createNumberProp({\n      group: GROUPS.basic,\n      label: \"Size\",\n      description: \"Width and height of your icon\",\n      defaultValue: 24,\n      min: 1,\n      max: 128,\n      step: 1,\n      precision: 0,\n    }),\n  },\n};\n"]}

package/lib/module/mappings/WebView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["WebView.ts"],"names":["COMPONENT_TYPES","createSourceProp","SEED_DATA","name","tag","description","category","media","layout","flex","props","source","defaultValue"],"mappings":"AAAA,SAASA,eAAT,EAA0BC,gBAA1B,QAAkD,iBAAlD;AAEA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,UADiB;AAEvBC,EAAAA,GAAG,EAAE,SAFkB;AAGvBC,EAAAA,WAAW,EAAE,kCAHU;AAIvBC,EAAAA,QAAQ,EAAEN,eAAe,CAACO,KAJH;AAKvBC,EAAAA,MAAM,EAAE;AAAEC,IAAAA,IAAI,EAAE;AAAR,GALe;AAMvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAEV,gBAAgB,CAAC;AACvBW,MAAAA,YAAY,EAAE;AADS,KAAD;AADnB;AANgB,CAAlB","sourcesContent":["import { COMPONENT_TYPES, createSourceProp } from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n  name: \"Web View\",\n  tag: \"WebView\",\n  description: \"Render web content inside a view\",\n  category: COMPONENT_TYPES.media,\n  layout: { flex: 1 },\n  props: {\n    source: createSourceProp({\n      defaultValue: \"https://reactnative.dev\",\n    }),\n  },\n};\n"]}
+{"version":3,"sources":["WebView.js"],"names":["COMPONENT_TYPES","createSourceProp","SEED_DATA","name","tag","description","category","media","layout","flex","props","source","defaultValue"],"mappings":"AAAA,SAASA,eAAT,EAA0BC,gBAA1B,QAAkD,iBAAlD;AACA,OAAO,MAAMC,SAAS,GAAG;AACrBC,EAAAA,IAAI,EAAE,UADe;AAErBC,EAAAA,GAAG,EAAE,SAFgB;AAGrBC,EAAAA,WAAW,EAAE,kCAHQ;AAIrBC,EAAAA,QAAQ,EAAEN,eAAe,CAACO,KAJL;AAKrBC,EAAAA,MAAM,EAAE;AAAEC,IAAAA,IAAI,EAAE;AAAR,GALa;AAMrBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,MAAM,EAAEV,gBAAgB,CAAC;AACrBW,MAAAA,YAAY,EAAE;AADO,KAAD;AADrB;AANc,CAAlB","sourcesContent":["import { COMPONENT_TYPES, createSourceProp } from \"@draftbit/types\";\nexport const SEED_DATA = {\n    name: \"Web View\",\n    tag: \"WebView\",\n    description: \"Render web content inside a view\",\n    category: COMPONENT_TYPES.media,\n    layout: { flex: 1 },\n    props: {\n        source: createSourceProp({\n            defaultValue: \"https://reactnative.dev\",\n        }),\n    },\n};\n"]}

package/lib/typescript/src/components/Stepper.d.ts

@@ -1,19 +1,18 @@
-import * as React from "react";
+import React from "react";
 import { StyleProp, ViewStyle, TextStyle } from "react-native";
 import type { Theme } from "../styles/DefaultTheme";
 import type { IconSlot } from "../interfaces/Icon";
 declare type Props = {
+    min: number;
+    max: number;
     value?: number;
-    min?: number;
-    max?: number;
-    theme: Theme;
-    style?: StyleProp<ViewStyle>;
-    onChange?: (value: number) => void;
     defaultValue?: number;
-    iconSize?: number;
-    iconColor?: string;
-    borderRadius?: number;
+    style?: StyleProp<ViewStyle>;
     typeStyle?: StyleProp<TextStyle>;
+    iconSize: number;
+    iconColor?: string;
+    onChange?: (value: number) => void;
+    theme: Theme;
 } & IconSlot;
 declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<Props, "theme"> & {
     theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "43.4.16",
+  "version": "43.4.18-b16bb4.0+b16bb48c",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -80,5 +80,5 @@
       ]
     ]
   },
-  "gitHead": "d1fc76b3c495577f2e3c0ea6b4cfe17edd3a762b"
+  "gitHead": "b16bb48c3627274ac24a19aee823369f01568b3b"
 }

package/src/components/Stepper.js

@@ -1,43 +1,29 @@
-import * as React from "react";
+import React, { useEffect, useState } from "react";
 import { View, Text } from "react-native";
+import { isNumber } from "lodash";
 import { withTheme } from "../theming";
 import IconButton from "./IconButton";
-import isNumber from "lodash.isnumber";
-const Stepper = ({ Icon, value, min, max, style, onChange, defaultValue, theme: { colors, typography, roundness }, iconSize = 24, iconColor = colors.strong, borderRadius = roundness, typeStyle, }) => {
-    const [stateValue, setStateValue] = React.useState(value || defaultValue || 0);
-    React.useEffect(() => {
-        if (value || value === 0) {
-            onChange && onChange(stateValue);
+const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultValue, style, typeStyle, iconSize = 24, iconColor, onChange, theme: { colors, typography }, Icon, }) => {
+    const [value, setValue] = useState(defaultValue ?? 0);
+    const isValidValue = (valueArg) => valueArg >= min && valueArg <= max;
+    const handlePlusOrMinus = (type) => {
+        const newValue = type === "plus" ? value + 1 : value - 1;
+        if (isValidValue(newValue)) {
+            setValue(newValue);
+            onChange?.(newValue);
         }
-    }, [onChange, stateValue, value]);
-    React.useEffect(() => {
-        let newValue = value || defaultValue || 0;
-        if (isNumber(max) && newValue > max) {
-            newValue = max;
+    };
+    useEffect(() => {
+        if (valueProp != null &&
+            isNumber(valueProp) &&
+            valueProp !== value &&
+            isValidValue(valueProp)) {
+            setValue(valueProp);
         }
-        if (isNumber(min) && newValue < min) {
-            newValue = min;
-        }
-        setStateValue(newValue);
-    }, [defaultValue, value, min, max]);
-    const handleMinus = React.useCallback(() => {
-        if (isNumber(min) && value === min) {
-            return;
-        }
-        setStateValue(stateValue - 1);
-    }, [min, stateValue, value]);
-    const handlePlus = React.useCallback(() => {
-        if (isNumber(max) && value === max) {
-            return;
-        }
-        setStateValue(stateValue + 1);
-    }, [max, stateValue, value]);
-    return (React.createElement(View, { style: [
-            { flexDirection: "row" },
-            style,
-            borderRadius ? { borderRadius } : {},
-        ] },
-        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: handleMinus, size: iconSize, color: iconColor, disabled: stateValue === min, style: stateValue === min ? { opacity: 0.5 } : {} }),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [valueProp]);
+    return (React.createElement(View, { style: [{ flexDirection: "row" }, style] },
+        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: () => handlePlusOrMinus("minus"), size: iconSize, color: iconColor, disabled: value === min, style: { opacity: value === min ? 0.5 : 1 } }),
         React.createElement(Text, { style: [
                 typography.body1,
                 {
@@ -47,7 +33,7 @@ const Stepper = ({ Icon, value, min, max, style, onChange, defaultValue, theme:
                     marginHorizontal: 8,
                 },
                 typeStyle,
-            ] }, value || stateValue),
-        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: handlePlus, size: iconSize, color: iconColor, disabled: stateValue === max, style: stateValue === max ? { opacity: 0.5 } : {} })));
+            ] }, value),
+        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: () => handlePlusOrMinus("plus"), size: iconSize, color: iconColor, disabled: value === max, style: { opacity: value === max ? 0.5 : 1 } })));
 };
 export default withTheme(Stepper);

package/src/components/Stepper.tsx

@@ -1,92 +1,75 @@
-import * as React from "react";
+import React, { FC, useEffect, useState } from "react";
 import { View, Text, StyleProp, ViewStyle, TextStyle } from "react-native";
+import { isNumber } from "lodash";
+
 import { withTheme } from "../theming";
 import type { Theme } from "../styles/DefaultTheme";
 import type { IconSlot } from "../interfaces/Icon";
-
 import IconButton from "./IconButton";
-import isNumber from "lodash.isnumber";
 
 type Props = {
+  min: number;
+  max: number;
   value?: number;
-  min?: number;
-  max?: number;
-  theme: Theme;
-  style?: StyleProp<ViewStyle>;
-  onChange?: (value: number) => void;
   defaultValue?: number;
-  iconSize?: number;
-  iconColor?: string;
-  borderRadius?: number;
+  style?: StyleProp<ViewStyle>;
   typeStyle?: StyleProp<TextStyle>;
+  iconSize: number;
+  iconColor?: string;
+  onChange?: (value: number) => void;
+  theme: Theme;
 } & IconSlot;
 
-const Stepper: React.FC<Props> = ({
-  Icon,
-  value,
-  min,
-  max,
-  style,
-  onChange,
+const Stepper: FC<Props> = ({
+  min = -Infinity,
+  max = Infinity,
+  value: valueProp,
   defaultValue,
-  theme: { colors, typography, roundness },
-  iconSize = 24,
-  iconColor = colors.strong,
-  borderRadius = roundness,
+  style,
   typeStyle,
+  iconSize = 24,
+  iconColor,
+  onChange,
+  theme: { colors, typography },
+  Icon,
 }) => {
-  const [stateValue, setStateValue] = React.useState(
-    value || defaultValue || 0
-  );
+  const [value, setValue] = useState(defaultValue ?? 0);
 
-  React.useEffect(() => {
-    if (value || value === 0) {
-      onChange && onChange(stateValue);
-    }
-  }, [onChange, stateValue, value]);
+  const isValidValue = (valueArg: number) => valueArg >= min && valueArg <= max;
 
-  React.useEffect(() => {
-    let newValue = value || defaultValue || 0;
-    if (isNumber(max) && newValue > max) {
-      newValue = max;
-    }
-    if (isNumber(min) && newValue < min) {
-      newValue = min;
-    }
-    setStateValue(newValue);
-  }, [defaultValue, value, min, max]);
+  const handlePlusOrMinus = (type: "plus" | "minus") => {
+    const newValue = type === "plus" ? value + 1 : value - 1;
 
-  const handleMinus = React.useCallback(() => {
-    if (isNumber(min) && value === min) {
-      return;
+    if (isValidValue(newValue)) {
+      setValue(newValue);
+      onChange?.(newValue);
     }
-    setStateValue(stateValue - 1);
-  }, [min, stateValue, value]);
+  };
 
-  const handlePlus = React.useCallback(() => {
-    if (isNumber(max) && value === max) {
-      return;
+  useEffect(() => {
+    if (
+      valueProp != null &&
+      isNumber(valueProp) &&
+      valueProp !== value &&
+      isValidValue(valueProp)
+    ) {
+      setValue(valueProp);
     }
-    setStateValue(stateValue + 1);
-  }, [max, stateValue, value]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [valueProp]);
 
   return (
-    <View
-      style={[
-        { flexDirection: "row" },
-        style,
-        borderRadius ? { borderRadius } : {},
-      ]}
-    >
+    <View style={[{ flexDirection: "row" }, style]}>
       <IconButton
         Icon={Icon}
         icon="MaterialIcons/remove"
-        onPress={handleMinus}
+        onPress={() => handlePlusOrMinus("minus")}
         size={iconSize}
         color={iconColor}
-        disabled={stateValue === min}
-        style={stateValue === min ? { opacity: 0.5 } : {}}
+        disabled={value === min}
+        style={{ opacity: value === min ? 0.5 : 1 }}
       />
+
       <Text
         style={[
           typography.body1,
@@ -99,16 +82,17 @@ const Stepper: React.FC<Props> = ({
           typeStyle,
         ]}
       >
-        {value || stateValue}
+        {value}
       </Text>
+
       <IconButton
         Icon={Icon}
         icon="MaterialIcons/add"
-        onPress={handlePlus}
+        onPress={() => handlePlusOrMinus("plus")}
         size={iconSize}
         color={iconColor}
-        disabled={stateValue === max}
-        style={stateValue === max ? { opacity: 0.5 } : {}}
+        disabled={value === max}
+        style={{ opacity: value === max ? 0.5 : 1 }}
       />
     </View>
   );

package/src/mappings/Icon.js

@@ -16,7 +16,7 @@ export const SEED_DATA = {
             label: "Size",
             description: "Width and height of your icon",
             defaultValue: 24,
-            min: 16,
+            min: 1,
             max: 128,
             step: 1,
             precision: 0,

package/src/mappings/Icon.ts

@@ -23,7 +23,7 @@ export const SEED_DATA = {
       label: "Size",
       description: "Width and height of your icon",
       defaultValue: 24,
-      min: 16,
+      min: 1,
       max: 128,
       step: 1,
       precision: 0,