@micromerce/formbuilder-react 1.0.656 → 1.0.659

package/dist/{src/index.d.ts → index.d.ts}

@@ -11,8 +11,6 @@ import FormGroup from "./components/FormGroup/";
 import MrnInput from "./components/MrnInput/";
 import PasswordInput from "./components/PasswordInput/";
 import Textarea from "./components/Textarea/";
-import PlateEditor from "./components/plate/PlateEditor";
 import { useValueGenerator } from "./hooks/useValueGenerator/useValueGenerator";
-import "../src/styles/index.css";
-export { FormBuilder, Select, MultiSelect, Checkbox, ControlWrapper, FormFooter, Input, InputFreeSolo, FormList, FormGroup, MrnInput, PasswordInput, Textarea, PlateEditor, useValueGenerator };
+export { FormBuilder, Select, MultiSelect, Checkbox, ControlWrapper, FormFooter, Input, InputFreeSolo, FormList, FormGroup, MrnInput, PasswordInput, Textarea, useValueGenerator, };
 export default FormBuilder;

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@micromerce/formbuilder-react",
-  "version": "1.0.656",
+  "version": "1.0.659",
   "description": "creates a form based on configuration",
   "main": "dist/formbuilder.js",
   "types": "dist/index.d.ts",
   "directories": {
     "lib": "dist"
   },
+  "exports": {
+    "./*": "./dist/*"
+  },
   "files": [
     "dist"
   ],
@@ -15,12 +18,13 @@
     "storybook": "npm run lint; start-storybook -p 6006",
     "build-storybook": "npm run lint; build-storybook -o ./docs/storybook",
     "watch": "npm run lint && webpack watch --config webpack.dev.js",
-    "build": "npm run lint && npm run test && npm run build-tsc && webpack build --config webpack.prod.js",
+    "build": "npm run lint && npm run test && tsc --declaration --emitDeclarationOnly && webpack build --config webpack.prod.js",
     "build:analyze": "webpack build --analyze --config webpack.prod.js",
     "lint": "eslint src/",
     "clean": "rimraf dist",
     "copy-component-styles": "copyfiles -u 1 ./src/components/**/*.module.scss ./dist",
     "copy-global-styles": "copyfiles -u 1 ./src/styles/**/*.module.scss ./dist",
+    "build-typedef": "tsc --declaration --emitDeclarationOnly",
     "build-tsc": "npm run clean && npm run copy-component-styles && npm run copy-global-styles && tsc -p tsconfig.json",
     "format": "npx prettier --write 'src/**/*.{js,jsx,ts,tsx,json}'"
   },
@@ -101,7 +105,6 @@
     "react-quill": "^2.0.0",
     "showdown": "^2.1.0",
     "styled-components": "^5.3.5",
-    "tailwindcss-scoped-preflight": "^3.4.10",
     "turndown": "^7.1.2",
     "usehooks-ts": "^2.5.1",
     "uuid": "^8.3.2"
@@ -155,7 +158,6 @@
     "sass-loader": "^16.0.2",
     "storybook-css-modules-preset": "^1.1.1",
     "swc-loader": "^0.2.6",
-    "tailwindcss": "^3.4.13",
     "ts-jest": "^29.2.5",
     "ts-loader": "^9.2.6",
     "ts-node": "^10.7.0",

package/dist/components/Checkbox/Checkbox.module.scss

@@ -1,10 +0,0 @@
-.checkbox-container {
-  all: unset;
-  width: fit-content;
-  padding: 6.5px 9px !important;
-
-  &:hover {
-    border: none;
-    outline: none;
-  }
-}

package/dist/components/FormBuilder/FormBuilder.module.scss

@@ -1,94 +0,0 @@
-.hasSubmenu {
-  padding: 0 !important;
-}
-
-.form-builder-container {
-  font-family: 'Roboto', sans-serif;
-  background-color: white;
-  z-index: 9;
-  padding: 0 20px;
-  
-  @media screen and (max-width: 767px) {
-    padding: 0 40px;
-  }
-
-  *:not(i) {
-    font-family: inherit;
-  }
-
-  .required-message {
-    display: block;
-    font-size: 12px;
-    padding-top: 15px;
-    padding-bottom: 10px;
-    color: rgba(0,0,0,.54);
-  }
-
-  .xhtml-form-button {
-    min-width: 40px;
-    width: fit-content;
-    color: #4a95d0;
-    background-color: #fff;
-  
-    padding: 3px 8px 3px 5px;
-    box-sizing: border-box;
-    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    font-size: 14px;
-    font-weight: 400;
-    border-radius: 4px;
-    border: 1px solid #4a95d0;
-  
-    cursor: pointer;
-    margin: 0;
-    margin-bottom: 2px;
-    display: inline-flex;
-    outline: 0;
-    position: relative;
-    align-items: center;
-    user-select: none;
-    vertical-align: middle;
-    -moz-appearance: none;
-    justify-content: center;
-    text-decoration: none;
-    -webkit-appearance: none;
-    -webkit-tap-highlight-color: transparent;
-  
-    svg {
-      fill: #4a95d0;
-      transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    }
-  
-    &:hover {
-      color: #fff;
-      background-color: #4a95d0;
-      svg {
-        fill: #fff;
-      }
-    }
-  
-    &.remove-item {
-      width: 40px;
-      height: 40px;
-      padding: 0;
-      background: transparent;
-      box-shadow: none;
-      margin-top: -5px !important;
-      svg {
-        font-size: 16px;
-        padding: 0 2px;
-        fill: rgba(0,0,0,.54);
-        transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-      }
-      &:hover {
-        background: #F0F0F0;
-        svg {
-          fill: #EB5757;
-        }
-      }
-      @media screen and (min-width: 768px) {
-        margin-top: 10px !important;
-        margin-left: -30px;
-      }
-    }
-  }
-}

package/dist/components/FormFooter/FormFooter.module.scss

@@ -1,65 +0,0 @@
-.form-footer-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  font-family: 'Roboto', sans-serif;
-
-  width: 100%;
-  border-radius: 0 0 4px 4px;
-
-  background: #FFFFFF;
-  z-index: 1;
-
-  .notificationContainer {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    padding: 20px 20px 0 20px;
-    max-height: 300px;
-  }
-
-  .controlsContainer {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px;
-
-    .submit-container {
-      display: flex;
-      align-items: center;
-      gap: 24px;
-    }
-
-    .required-message {
-      display: block;
-      font-size: 12px;
-      color: rgba(0,0,0,.54);
-    }
-  }
-
-  button:last-child {
-    margin-left: auto;
-  }
-
-  .run-button__spinner {
-    -moz-animation: spin 2s infinite linear;
-    -o-animation: spin 2s infinite linear;
-    -webkit-animation: spin 2s infinite linear;
-    animation: spin 2s infinite linear;
-  }
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  @media (max-width: 991px) {
-    border-radius: 0;
-  }
-}

package/dist/components/FormGroup/FormGroup.module.scss

@@ -1,69 +0,0 @@
-.form-group {
-  display: flex;
-  gap: 10px;
-  margin-bottom: -10px;
-  padding: 10px 0;
-  font-size: 14px;
-  font-weight: 400;
-  box-sizing: border-box;
-
-  @media screen and (max-width: 767px) {
-    flex-direction: column;
-    gap: 5px;
-  }
-
-  &.expert {
-    background-color: #f0f0f0;
-    padding-right: 10px;
-    margin: 10px 0;
-  }
-
-  &.error {
-    color: #a94442;
-
-    .error-message {
-      color: #a94442;
-      display: block !important;
-      font-weight: inherit;
-      font-size: 14px;
-      padding-top: 5px;
-      padding-left: 2px;
-      line-height: 1.42857;
-    }
-  }
-
-  .error-message {
-    display: none;
-  }
-
-  .control-label {
-    font-weight: 400;
-    width: 200px;
-    text-align: right;
-    flex-shrink: 0;
-    margin: 0 !important; // bootstrap overwrites label selector
-    padding-top: 9px;
-    color: rgba(0, 0, 0, 0.87);
-    font-size: 14px;
-
-    @media screen and (max-width: 767px) {
-      text-align: left;
-      width: 100%;
-    }
-  }
-
-  .control-wrapper {
-    display: flex;
-    flex-direction: column;
-    // width: 0;
-    flex: 1;
-  }
-
-  .control-wrapper-firstlayer {
-    width: calc(100% - 210px);
-
-    @media screen and (max-width: 767px) {
-      width: 100%;
-    }
-  }
-}

package/dist/components/FormList/FormList.module.scss

@@ -1,173 +0,0 @@
-.list-container {
-  margin: 5px 0 -10px;
-  padding: 10px 0;
-
-  .list-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .list-header-label-button {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-
-      @media screen and (max-width: 767px) {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 5px;
-      }
-
-      .list-header-label {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        width: 200px;
-
-        i {
-          color: #000000b2;
-        }
-      }
-
-      .list-label {
-        font-size: 14px;
-        font-weight: 400;
-        text-align: right;
-        font-size: 14px;
-        width: 100%;
-
-        @media screen and (max-width: 767px) {
-          text-align: left;
-          width: 100%;
-        }
-      }
-    }
-  }
-
-  .address {
-    margin-left: 0 !important;
-  }
-
-  .list-children-container {
-    position: relative;
-    margin-left: 195px;
-    @media screen and (max-width: 767px) {
-      margin-left: 0;
-    }
-
-    .form-list {
-      position: relative;
-      margin-top: 5px;
-      padding: 5px 0 5px 15px;
-      @media screen and (max-width: 767px) {
-        padding: 5px 0 5px 35px;
-      }
-
-      > div:first-of-type {
-        margin-top: -10px;
-      }
-
-      //* border-left
-      &::before {
-        content: "";
-        position: absolute;
-        top: 10px;
-        left: -3px;
-        height: calc(100% - 20px);
-        width: 2px;
-        background-color: rgb(192, 192, 192);
-      }
-    }
-
-    .remove-item {
-      border: none;
-      position: absolute;
-      top: 0px;
-      left: -30px;
-
-      @media screen and (max-width: 767px) {
-        top: 15px;
-        left: -45px;
-      }
-    }
-
-    .sort-buttons {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      position: absolute;
-      left: -25px;
-      top: 50%;
-      transform: translateY(-50%);
-
-      button {
-        color: inherit;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: transparent;
-        border: none;
-        font-size: 10px;
-        padding: 0;
-        cursor: pointer;
-        height: 20px;
-        width: 25px;
-
-        &:disabled {
-          cursor: auto;
-          opacity: 0.5;
-        }
-      }
-    }
-  }
-
-  .form-list-single-item {
-    padding-right: 50px;
-
-    .control-label-group:first-child {
-      display: none;
-    }
-
-    .form-list {
-      margin-top: 0;
-      padding: 0;
-      position: relative;
-      padding-left: 15px;
-      @media screen and (max-width: 767px) {
-        padding-left: 35px;
-      }
-
-      > div:first-of-type {
-        margin-top: 0;
-      }
-
-      //* border-left
-      &::before {
-        content: "";
-        position: absolute;
-        top: 10px;
-        left: -3px;
-        height: calc(100% - 20px);
-        width: 2px;
-        background-color: rgb(192, 192, 192);
-      }
-    }
-
-    .form-list > .form-group > .control-label {
-      display: none;
-    }
-
-    .form-list > .form-group > .control-wrapper {
-      width: 100%;
-    }
-
-    .remove-item {
-      position: absolute;
-      left: auto !important;
-      right: -50px;
-      @media screen and (max-width: 767px) {
-        right: -55px;
-      }
-    }
-  }
-}

package/dist/components/Group/Group.module.scss

@@ -1,28 +0,0 @@
-.form-group-container {
-  margin: 30px 0 20px;
-  padding: 10px 0;
-
-  .group-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .control-label-group {
-    font-size: 14px;
-    font-weight: 400;
-    font-size: 18px;
-    color: #0000008A;
-    margin-top: 0;
-    margin-bottom: 0;
-    margin-left: 210px;
-
-    @media screen and (max-width: 767px) {
-      margin-left: 0;
-    }
-  }
-
-  & > .form-group-container:first-of-type {
-    margin-top: 10px;
-  }
-}

package/dist/components/Input/Input.module.scss

@@ -1,3 +0,0 @@
-.error {
-  border-color: #a94442;
-}

package/dist/components/InputFreeSolo/InputFreeSolo.module.scss

@@ -1,29 +0,0 @@
-.form-control {
-  width: 100%;
-
-  &:has(input[readonly]) {
-    background-color: #e0e0e033;
-    cursor: not-allowed;
-  }
-}
-
-.error fieldset {
-  border-color: #a94442;
-}
-
-.boxContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-
-  p {
-    margin: 0;
-    padding: 0;
-  }
-
-  i {
-    color: #000000B2;
-  }
-}

package/dist/components/MrnInput/MrnInput.module.scss

@@ -1,31 +0,0 @@
-.mrn-input-container {
-  width: 100%;
-  input {
-    max-width: calc(100% - 35px);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: rgba(0,0,0,0.54) !important;
-    font-weight: 400 !important;
-  }
-}
-
-.error fieldset {
-  border-color: #a94442;
-}
-
-.hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.with-select {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-
-  @media only screen and (max-width: 991px) {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}

package/dist/components/MultiSelect/MultiSelect.module.scss

@@ -1,13 +0,0 @@
-.multi-select-container {
-  width: 100%;
-  background-color: white;
-
-  &:has(input[readonly]) {
-    background-color: #e0e0e033;
-    cursor: not-allowed;
-  }
-}
-
-.error fieldset {
-  border-color: #a94442;
-}

package/dist/components/PasswordInput/PasswordInput.module.scss

@@ -1,26 +0,0 @@
-.password-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.password-input {
-  padding-right: 50px;
-  width: 100%;
-  height: 40px;
-}
-
-.toggle-icon {
-  background-color: transparent;
-  border: none;
-  position: absolute;
-  right: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.error {
-  border-color: #a94442;
-}

package/dist/components/Select/Select.module.scss

@@ -1,15 +0,0 @@
-.select-container {
-  width: 100%;
-  height: 100%;
-  background-color: white;
-
-  input {
-    color: rgba(0, 0, 0, 0.54) !important;
-    font-weight: 400 !important;
-  }
-
-  &:has(input[readonly]) {
-    background-color: #e0e0e033;
-    cursor: not-allowed;
-  }
-}

package/dist/components/Textarea/Textarea.module.scss

@@ -1,14 +0,0 @@
-.error {
-  border-color: #a94442;
-}
-
-.textarea {
-  color: rgb(51, 51, 51);
-  width: 100%;
-}
-
-.textareaWithBorder {
-  border: 1px solid rgb(204, 204, 204);
-  border-radius: 4px;
-  width: 100%;
-}