Repository: DhiWise/dhiwise-nodejs Branch: master Commit: a135b968a240 Files: 987 Total size: 3.2 MB Directory structure: gitextract_s_w00iag/ ├── .github/ │ ├── ISSUE_TEMPLATE/ │ │ ├── bug_report.md │ │ └── feature_request.md │ └── workflows/ │ └── eslint.yml ├── .gitignore ├── CHANGELOG.md ├── CLEAN_CODE.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── MVC_ARCHITECTURE.md ├── README.md ├── lerna.json ├── package.json └── packages/ ├── client/ │ ├── .eslintrc.json │ ├── .gitignore │ ├── CHANGELOG.md │ ├── README.md │ ├── babel-plugin-macros.config.js │ ├── babel.config.json │ ├── config-overrides.js │ ├── package.json │ ├── postcss.config.js │ ├── public/ │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ ├── src/ │ │ ├── App.css │ │ ├── App.js │ │ ├── api/ │ │ │ ├── applicationConfig.js │ │ │ ├── applicationConstant.js │ │ │ ├── applicationPolicy.js │ │ │ ├── config.js │ │ │ ├── constants.js │ │ │ ├── envVariable.js │ │ │ ├── index.js │ │ │ ├── master.js │ │ │ ├── models.js │ │ │ ├── policy.js │ │ │ ├── project.js │ │ │ ├── projectRoleAccess.js │ │ │ └── routes.js │ │ ├── assets/ │ │ │ └── css/ │ │ │ ├── Table.css │ │ │ ├── Table1.css │ │ │ ├── animation.css │ │ │ ├── components/ │ │ │ │ ├── components.css │ │ │ │ └── style.css │ │ │ ├── drawer.css │ │ │ ├── dropdown.css │ │ │ ├── editor.css │ │ │ ├── logo.css │ │ │ ├── main.css │ │ │ ├── method.css │ │ │ ├── notification.css │ │ │ ├── popover.css │ │ │ ├── popoverCss.js │ │ │ ├── scroll.css │ │ │ ├── sidebar.css │ │ │ ├── tab.js │ │ │ ├── tableViewCss.js │ │ │ ├── tailwind.css │ │ │ └── tooltip.css │ │ ├── components/ │ │ │ ├── APIKeyValue/ │ │ │ │ └── index.js │ │ │ ├── BackButton/ │ │ │ │ └── index.js │ │ │ ├── BoxLayout/ │ │ │ │ ├── boxLayoutCss.js │ │ │ │ └── index.js │ │ │ ├── Button/ │ │ │ │ ├── buttonCss.js │ │ │ │ └── index.js │ │ │ ├── CardView/ │ │ │ │ ├── ThumbnailCard.js │ │ │ │ ├── card.css │ │ │ │ ├── cardCss.js │ │ │ │ └── index.js │ │ │ ├── Checkbox/ │ │ │ │ ├── Checkbox.js │ │ │ │ ├── checkbox.css │ │ │ │ └── index.js │ │ │ ├── CodeEditor/ │ │ │ │ ├── index.js │ │ │ │ └── reactTypes.js │ │ │ ├── ConfirmAlert/ │ │ │ │ └── index.js │ │ │ ├── ContainerBox/ │ │ │ │ └── index.js │ │ │ ├── Count/ │ │ │ │ └── index.js │ │ │ ├── DatePicker/ │ │ │ │ ├── datepicker.css │ │ │ │ ├── datepickerCss.js │ │ │ │ └── index.js │ │ │ ├── Description/ │ │ │ │ ├── descriptionCss.js │ │ │ │ └── index.js │ │ │ ├── DropdownMenu/ │ │ │ │ ├── Css.js │ │ │ │ ├── DropdownMenu.js │ │ │ │ ├── Dropdown_bkp.js │ │ │ │ ├── MenuItem.js │ │ │ │ ├── dropdown.js │ │ │ │ └── index.js │ │ │ ├── Error/ │ │ │ │ └── index.js │ │ │ ├── ErrorMsg/ │ │ │ │ ├── errorCss.js │ │ │ │ └── index.js │ │ │ ├── Heading/ │ │ │ │ ├── headingCss.js │ │ │ │ └── index.js │ │ │ ├── IconBox/ │ │ │ │ ├── DeleteIcon.js │ │ │ │ ├── iconBoxCss.js │ │ │ │ └── index.js │ │ │ ├── InlineHeader/ │ │ │ │ └── index.js │ │ │ ├── Input/ │ │ │ │ ├── DecimalInput.js │ │ │ │ ├── NegativeInput.js │ │ │ │ ├── NumberInput.js │ │ │ │ ├── PercentageInput.js │ │ │ │ ├── StringInput.js │ │ │ │ ├── contryCode.css │ │ │ │ ├── index.js │ │ │ │ └── inputCss.js │ │ │ ├── Label/ │ │ │ │ └── index.js │ │ │ ├── LinkTag/ │ │ │ │ └── index.js │ │ │ ├── ListBox/ │ │ │ │ ├── LIstTitle.js │ │ │ │ ├── ListBoxWrap.js │ │ │ │ └── listboxCss.js │ │ │ ├── Loader/ │ │ │ │ └── index.js │ │ │ ├── MenuList/ │ │ │ │ ├── index.js │ │ │ │ └── menuListCss.js │ │ │ ├── MessageNotify/ │ │ │ │ ├── index.js │ │ │ │ └── informessageCss.js │ │ │ ├── NoData/ │ │ │ │ ├── index.js │ │ │ │ └── notfoundproject.json │ │ │ ├── PopOver/ │ │ │ │ └── index.js │ │ │ ├── Popup/ │ │ │ │ └── index.js │ │ │ ├── Radio/ │ │ │ │ ├── RadioGroup.js │ │ │ │ ├── radioCss.js │ │ │ │ └── radiogroup.css │ │ │ ├── ReactDrawer/ │ │ │ │ ├── DrawerClose.js │ │ │ │ ├── DrawerFooter.js │ │ │ │ ├── DrawerHead.js │ │ │ │ ├── index.js │ │ │ │ └── reactDrawerCss.js │ │ │ ├── SearchBox/ │ │ │ │ ├── RecentSearch.js │ │ │ │ ├── index.js │ │ │ │ └── searchBoxCss.js │ │ │ ├── Select/ │ │ │ │ ├── index.js │ │ │ │ ├── selectCss.css │ │ │ │ └── selectCss.js │ │ │ ├── SelectTree/ │ │ │ │ ├── index.js │ │ │ │ └── selectTreeCss.css │ │ │ ├── SidebarMenuList/ │ │ │ │ ├── index.js │ │ │ │ └── sidebarMenuListCss.js │ │ │ ├── Spinner/ │ │ │ │ ├── index.js │ │ │ │ └── spinner.css │ │ │ ├── StepFooter/ │ │ │ │ └── index.js │ │ │ ├── Tag/ │ │ │ │ ├── index.js │ │ │ │ └── tagCss.js │ │ │ ├── TextArea/ │ │ │ │ ├── index.js │ │ │ │ └── textareaCss.js │ │ │ ├── ToggleBox/ │ │ │ │ └── index.js │ │ │ ├── hooks/ │ │ │ │ ├── index.js │ │ │ │ └── useBoolean.js │ │ │ ├── index.js │ │ │ └── utils.js │ │ ├── config/ │ │ │ ├── LazyLoader.js │ │ │ ├── Loader.js │ │ │ ├── Root.js │ │ │ └── loaderdata.json │ │ ├── constant/ │ │ │ ├── Nodecrud.js │ │ │ ├── Project/ │ │ │ │ └── applicationStep.js │ │ │ ├── applicationConfigConstant.js │ │ │ ├── applicationConstant.js │ │ │ ├── buildProcessConstant.js │ │ │ ├── common.js │ │ │ ├── envVariable.js │ │ │ ├── fileTypeConstant.js │ │ │ ├── languageHeader.js │ │ │ ├── master.js │ │ │ ├── model.js │ │ │ ├── modelIndexing.js │ │ │ ├── permission.js │ │ │ ├── policy.js │ │ │ ├── reservedVariable.js │ │ │ ├── rolePermission.js │ │ │ ├── routes.js │ │ │ └── sidebar.js │ │ ├── container/ │ │ │ ├── CRUD/ │ │ │ │ ├── BuildCodeStructure/ │ │ │ │ │ └── index.js │ │ │ │ ├── Configuration/ │ │ │ │ │ └── index.js │ │ │ │ ├── Modal/ │ │ │ │ │ ├── AddModalPopup/ │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── DeleteModel.js │ │ │ │ │ ├── Editor/ │ │ │ │ │ │ ├── EditorProvider/ │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ ├── EditorTabs.js │ │ │ │ │ │ ├── ModelHeader/ │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ ├── ModelProvider.js │ │ │ │ │ │ ├── TableView/ │ │ │ │ │ │ │ ├── AddRelation/ │ │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ │ ├── Enum/ │ │ │ │ │ │ │ │ ├── SelectEnumValue.js │ │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ │ ├── TableData/ │ │ │ │ │ │ │ │ ├── DeleteRow.js │ │ │ │ │ │ │ │ ├── RowSuspense.js │ │ │ │ │ │ │ │ ├── Sortable.js │ │ │ │ │ │ │ │ ├── TableRow.js │ │ │ │ │ │ │ │ ├── TableSubRow.js │ │ │ │ │ │ │ │ ├── sqlTableRow.loader.js │ │ │ │ │ │ │ │ └── tableRow.loader.js │ │ │ │ │ │ │ ├── TableHead.js │ │ │ │ │ │ │ ├── components/ │ │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── HookSetup/ │ │ │ │ │ │ ├── HookEditor.js │ │ │ │ │ │ ├── HookList.js │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── Indexing/ │ │ │ │ │ │ ├── Draggable/ │ │ │ │ │ │ │ ├── useDraggable.js │ │ │ │ │ │ │ └── useDroppable.js │ │ │ │ │ │ ├── ModelIndexProvider.js │ │ │ │ │ │ ├── Mongodb/ │ │ │ │ │ │ │ ├── SubRow.js │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ ├── SQLIndexing/ │ │ │ │ │ │ │ ├── DeleteIndex.js │ │ │ │ │ │ │ ├── EditableCells.js │ │ │ │ │ │ │ ├── IndexProvider.js │ │ │ │ │ │ │ ├── Subrow/ │ │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ │ ├── TableCells/ │ │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ ├── indexingCss.js │ │ │ │ │ │ └── makeData.js │ │ │ │ │ ├── LibraryPreview/ │ │ │ │ │ │ ├── Attention/ │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ ├── HookSetup/ │ │ │ │ │ │ │ ├── HookEditor/ │ │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ │ ├── HookList/ │ │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ ├── Indexing/ │ │ │ │ │ │ │ ├── SubRow/ │ │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ ├── LibraryProvider.js │ │ │ │ │ │ ├── PreviewTable/ │ │ │ │ │ │ │ ├── EditableCell.js │ │ │ │ │ │ │ ├── SubRow.js │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── ModelList/ │ │ │ │ │ │ ├── ModelLibrary/ │ │ │ │ │ │ │ ├── Library.loader.js │ │ │ │ │ │ │ ├── LibraryModelData.js │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ └── index.js │ │ │ │ │ └── index.js │ │ │ │ ├── Permission/ │ │ │ │ │ ├── Header.js │ │ │ │ │ ├── Permission.loader.js │ │ │ │ │ ├── PermissionHelperFunctions.js │ │ │ │ │ ├── PermissionItem.js │ │ │ │ │ ├── PermissionSettingProvider.js │ │ │ │ │ ├── Permissions.js │ │ │ │ │ ├── Setting/ │ │ │ │ │ │ ├── SettingDetail.js │ │ │ │ │ │ └── index.js │ │ │ │ │ └── index.js │ │ │ │ └── Routes/ │ │ │ │ ├── AddRoutes/ │ │ │ │ │ ├── AddRouteProvider.js │ │ │ │ │ ├── Advance/ │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── Basic/ │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── Configuration/ │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── ModelPermission/ │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── QueryBuilder/ │ │ │ │ │ │ ├── AddResponse.js │ │ │ │ │ │ ├── NestedQueryBuilder.js │ │ │ │ │ │ ├── QueryBuilder.js │ │ │ │ │ │ ├── QueryBuilderDetail.js │ │ │ │ │ │ ├── QueryBuilderList.js │ │ │ │ │ │ ├── ResponseProvider.js │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ └── queryBuilder.css │ │ │ │ │ └── index.js │ │ │ │ ├── AddToggleProvider.js │ │ │ │ ├── ModuleList/ │ │ │ │ │ └── index.js │ │ │ │ ├── RouteProvider.js │ │ │ │ ├── RouteView/ │ │ │ │ │ ├── Route.loader.js │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ ├── Configuration/ │ │ │ │ ├── CodeGenerateConfiguration/ │ │ │ │ │ ├── CodeGenConfigHelperFunctions.js │ │ │ │ │ ├── CodeGenerateConfiguration.loader.js │ │ │ │ │ ├── DataFormatConfig/ │ │ │ │ │ │ ├── AddDataFormat.js │ │ │ │ │ │ ├── DataFormat.loader.js │ │ │ │ │ │ ├── Head/ │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── UploadAttachmentSetting.js │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ ├── Constant/ │ │ │ │ ├── AddConstant/ │ │ │ │ │ └── index.js │ │ │ │ ├── ConstantView/ │ │ │ │ │ ├── ConstantHead/ │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── TableView/ │ │ │ │ │ │ ├── EditableCell.js │ │ │ │ │ │ ├── SubRow.js │ │ │ │ │ │ └── index.js │ │ │ │ │ └── index.js │ │ │ │ ├── DeleteConstant/ │ │ │ │ │ └── index.js │ │ │ │ ├── LeftConstantList/ │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ ├── Dashboard/ │ │ │ │ ├── MenuShortCut/ │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ ├── EnvironmentVariable/ │ │ │ │ ├── EnvironmentHead/ │ │ │ │ │ └── index.js │ │ │ │ ├── KeyValue.js │ │ │ │ ├── Permission.loader.js │ │ │ │ ├── enviromentVaribleCss.js │ │ │ │ ├── environmentValue.js │ │ │ │ └── index.js │ │ │ ├── Policy/ │ │ │ │ ├── AddPolicy/ │ │ │ │ │ └── index.js │ │ │ │ ├── DeletePolicy.js │ │ │ │ ├── LeftPolicyList.js │ │ │ │ ├── PolicyView/ │ │ │ │ │ ├── Policy.loader.js │ │ │ │ │ ├── PolicyHead.js │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ ├── RoleAccess/ │ │ │ │ ├── AddRole/ │ │ │ │ │ └── index.js │ │ │ │ ├── RoleAccessHead/ │ │ │ │ │ └── index.js │ │ │ │ ├── RoleAccessList/ │ │ │ │ │ ├── DeleteRole.js │ │ │ │ │ ├── index.js │ │ │ │ │ └── roleAccessListCss.js │ │ │ │ ├── RoleAccessProvider.js │ │ │ │ ├── RoleList/ │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ ├── Shared/ │ │ │ │ ├── BuildApp/ │ │ │ │ │ └── BuildAppDropdown/ │ │ │ │ │ ├── animation.json │ │ │ │ │ └── index.js │ │ │ │ ├── Layout/ │ │ │ │ │ ├── LanguageHeader/ │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ └── languageHeaderCss.js │ │ │ │ │ ├── Sidebar/ │ │ │ │ │ │ ├── MainSidebar/ │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ ├── SubSidebar/ │ │ │ │ │ │ │ ├── SidebarlistCss.js │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ └── sidebarCss.js │ │ │ │ │ ├── StepHeader/ │ │ │ │ │ │ └── index.js │ │ │ │ │ └── index.js │ │ │ │ ├── LayoutStepUrl/ │ │ │ │ │ ├── SidebarLayout.js │ │ │ │ │ ├── index.js │ │ │ │ │ └── stepSidebarData.js │ │ │ │ └── TechnologySetStep/ │ │ │ │ ├── Application.loader.js │ │ │ │ ├── SideBlock.loader.js │ │ │ │ ├── addNewTag.js │ │ │ │ ├── applicationForm.js │ │ │ │ └── index.js │ │ │ ├── common.js │ │ │ └── hooks/ │ │ │ ├── index.js │ │ │ ├── useBoolean.js │ │ │ ├── useComponentDidMount.js │ │ │ ├── useComponentWillUnmount.js │ │ │ ├── useDrop.js │ │ │ ├── useQueryParams.js │ │ │ ├── useToastNotifications.js │ │ │ └── useWindowSize.js │ │ ├── index.css │ │ ├── index.js │ │ ├── redux/ │ │ │ ├── reducers/ │ │ │ │ ├── buildCode.js │ │ │ │ ├── constants.js │ │ │ │ ├── index.js │ │ │ │ ├── models.js │ │ │ │ ├── policy.js │ │ │ │ └── projects.js │ │ │ ├── store.js │ │ │ └── thunks/ │ │ │ ├── buildCode.js │ │ │ ├── constants.js │ │ │ ├── models.js │ │ │ └── policy.js │ │ ├── reportWebVitals.js │ │ ├── setupTests.js │ │ ├── utils/ │ │ │ ├── applicationPlatform.js │ │ │ ├── dataTypes.js │ │ │ ├── dateTimeFormatter.js │ │ │ ├── domMethods.js │ │ │ ├── localStorage.js │ │ │ ├── mergeRefs.js │ │ │ ├── regex.js │ │ │ └── validationMsgs.js │ │ └── utils.js │ ├── tailwind.config.js │ └── tailwind.js └── server/ ├── .eslintrc.js ├── .gitignore ├── CHANGELOG.md ├── README.md ├── __test__/ │ └── application.test.js ├── app.js ├── assets/ │ └── master.js ├── config/ │ ├── database/ │ │ └── test │ └── db.js ├── constants/ │ ├── common.js │ ├── dataTypes/ │ │ ├── dataTypes.js │ │ ├── props.js │ │ └── sequelize/ │ │ ├── index.js │ │ ├── mySqlDataTypes.js │ │ ├── postGreSqlDataTypes.js │ │ └── sqlDataTypes.js │ ├── envVariables.js │ ├── jsonInput.js │ ├── master.js │ ├── message.js │ ├── queryBuilder.js │ ├── schema.js │ └── validation.js ├── controllers/ │ └── web/ │ ├── application/ │ │ ├── application.js │ │ └── index.js │ ├── applicationConfig/ │ │ ├── applicationConfig.js │ │ └── index.js │ ├── envVariables/ │ │ ├── envVariables.js │ │ └── index.js │ ├── jsonInput/ │ │ ├── index.js │ │ └── jsonInput.js │ ├── master/ │ │ ├── index.js │ │ └── master.js │ ├── project/ │ │ ├── index.js │ │ └── project.js │ ├── projectConstant/ │ │ ├── index.js │ │ └── projectConstant.js │ ├── projectPolicy/ │ │ ├── index.js │ │ └── projectPolicy.js │ ├── projectRoleAccessPermissions/ │ │ ├── index.js │ │ └── roleAccessPermissions.js │ ├── projectRoute/ │ │ ├── index.js │ │ └── projectRoute.js │ ├── schema/ │ │ ├── index.js │ │ └── schema.js │ └── schemaDetail/ │ ├── index.js │ └── schemaDetail.js ├── middleware/ │ └── responses/ │ └── ok.js ├── models/ │ ├── Models/ │ │ ├── Queue.js │ │ └── tenant/ │ │ ├── Application.js │ │ ├── ApplicationConfig.js │ │ ├── EnvVariables.js │ │ ├── Generator.js │ │ ├── Master.js │ │ ├── NestedQueryBuilder.js │ │ ├── Project.js │ │ ├── ProjectConstant.js │ │ ├── ProjectPolicy.js │ │ ├── ProjectRoleAccessPermissions.js │ │ ├── ProjectRoute.js │ │ ├── QueryBuilder.js │ │ ├── RawModel.js │ │ ├── Schema.js │ │ ├── SchemaDetail.js │ │ └── SchemaUploadVersion.js │ ├── Repo/ │ │ ├── Connection.js │ │ └── index.js │ ├── constants/ │ │ ├── action.js │ │ ├── activityLog.js │ │ ├── application.js │ │ ├── applicationConfig.js │ │ ├── common.js │ │ ├── jobQueue.js │ │ ├── master.js │ │ ├── message.js │ │ ├── method.js │ │ ├── permission.js │ │ ├── project.js │ │ ├── projectDefinition.js │ │ └── version.js │ ├── index.js │ ├── responses/ │ │ ├── badRequest.js │ │ ├── error.js │ │ ├── forbidden.js │ │ ├── index.js │ │ ├── notFound.js │ │ ├── ok.js │ │ ├── serverError.js │ │ ├── setResponse.js │ │ └── unauthorized.js │ └── usecase/ │ └── getSetting.js ├── package.json ├── repo/ │ ├── application.js │ ├── applicationConfig.js │ ├── dataTypeSuggestions.js │ ├── db.js │ ├── envVariables.js │ ├── generate.js │ ├── master.js │ ├── nestedQueryBuilder.js │ ├── port.js │ ├── project.js │ ├── projectConstant.js │ ├── projectPolicy.js │ ├── projectRoleAccessPermissions.js │ ├── projectRoute.js │ ├── queryBuilder.js │ ├── schema.js │ └── schemaDetail.js ├── responses/ │ └── index.js ├── routes/ │ ├── index.js │ └── web/ │ ├── application/ │ │ ├── application.js │ │ └── index.js │ ├── applicationConfig/ │ │ ├── applicationConfig.js │ │ └── index.js │ ├── envVariables/ │ │ ├── envVariables.js │ │ └── index.js │ ├── index.js │ ├── jsonInput/ │ │ ├── index.js │ │ └── jsonInput.js │ ├── master/ │ │ ├── index.js │ │ └── master.js │ ├── project/ │ │ ├── index.js │ │ └── project.js │ ├── projectConstant/ │ │ ├── index.js │ │ └── projectConstant.js │ ├── projectPolicy/ │ │ ├── index.js │ │ └── projectPolicy.js │ ├── projectRoleAccessPermissions/ │ │ ├── index.js │ │ └── projectRoleAccessPermissions.js │ ├── projectRoute/ │ │ ├── index.js │ │ └── projectRoute.js │ ├── schema/ │ │ ├── index.js │ │ └── schema.js │ └── schemaDetail/ │ ├── index.js │ └── schemaDetail.js ├── usecase/ │ ├── application/ │ │ ├── actionWiseCount.js │ │ ├── create.js │ │ ├── delete.js │ │ ├── deleteDependency.js │ │ ├── generate.js │ │ ├── get.js │ │ ├── getLastApplication.js │ │ ├── node-generator/ │ │ │ ├── codeGenerator.js │ │ │ ├── config/ │ │ │ │ ├── mongooseInput.json │ │ │ │ ├── possibleMissMatchType.js │ │ │ │ ├── sequelizeDataType.json │ │ │ │ ├── sequelizeSupportType.json │ │ │ │ └── sequelizeTypeInput.json │ │ │ ├── constants/ │ │ │ │ └── constant.js │ │ │ ├── createApplication/ │ │ │ │ ├── InputParser/ │ │ │ │ │ ├── customRoutesApi.js │ │ │ │ │ └── index.js │ │ │ │ ├── applyEslint.js │ │ │ │ ├── composeModels.js │ │ │ │ ├── createAuthentication/ │ │ │ │ │ └── index.js │ │ │ │ ├── createCommonRoutes/ │ │ │ │ │ └── index.js │ │ │ │ ├── createController/ │ │ │ │ │ └── index.js │ │ │ │ ├── createCustomRoutes/ │ │ │ │ │ └── index.js │ │ │ │ ├── createDataAccessFiles/ │ │ │ │ │ └── index.js │ │ │ │ ├── createDeleteDependencyService.js │ │ │ │ ├── createEntities.js │ │ │ │ ├── createFileUploadFiles/ │ │ │ │ │ └── index.js │ │ │ │ ├── createRoutes/ │ │ │ │ │ └── index.js │ │ │ │ ├── createStaticFiles.js │ │ │ │ ├── createTestCases/ │ │ │ │ │ ├── mongooseTestCases.js │ │ │ │ │ └── sequelizeTestCases.js │ │ │ │ ├── createUseCaseFiles/ │ │ │ │ │ └── index.js │ │ │ │ ├── generateFakeData/ │ │ │ │ │ ├── fakeDataType.js │ │ │ │ │ └── index.js │ │ │ │ ├── generateFakeDataSequelize/ │ │ │ │ │ ├── fakeDataType.js │ │ │ │ │ └── index.js │ │ │ │ ├── getDeleteDependency.js │ │ │ │ ├── makeCustomPolicy.js │ │ │ │ ├── postman/ │ │ │ │ │ ├── generate-postman-collection.js │ │ │ │ │ └── index.js │ │ │ │ ├── render/ │ │ │ │ │ └── index.js │ │ │ │ ├── requestValidation.js │ │ │ │ ├── schemaValidation.js │ │ │ │ ├── sequelize/ │ │ │ │ │ ├── composeModels.js │ │ │ │ │ ├── modelValiadation.js │ │ │ │ │ ├── postman/ │ │ │ │ │ │ ├── generate-postman-collection.js │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── requestValidation.js │ │ │ │ │ ├── service.js │ │ │ │ │ └── typeConverter.js │ │ │ │ ├── service/ │ │ │ │ │ └── index.js │ │ │ │ ├── thirdPartyIntegrations/ │ │ │ │ │ └── index.js │ │ │ │ └── utils/ │ │ │ │ └── common.js │ │ │ ├── generator.js │ │ │ ├── settings/ │ │ │ │ └── index.js │ │ │ ├── social/ │ │ │ │ ├── facebook/ │ │ │ │ │ ├── app.js │ │ │ │ │ └── templates/ │ │ │ │ │ └── js/ │ │ │ │ │ ├── routes/ │ │ │ │ │ │ ├── facebook-login-routes-cc.js.ejs │ │ │ │ │ │ └── facebook-login-routes.js.ejs │ │ │ │ │ ├── service-cc-sequelize.js.ejs │ │ │ │ │ ├── service-cc.js.ejs │ │ │ │ │ ├── service-sequelize.js.ejs │ │ │ │ │ └── service.js.ejs │ │ │ │ ├── github/ │ │ │ │ │ ├── app.js │ │ │ │ │ └── templates/ │ │ │ │ │ └── js/ │ │ │ │ │ ├── routes/ │ │ │ │ │ │ ├── github-login-routes-cc.js.ejs │ │ │ │ │ │ └── github-login-routes.js.ejs │ │ │ │ │ ├── service-cc-sequelize.js.ejs │ │ │ │ │ ├── service-cc.js.ejs │ │ │ │ │ ├── service-sequelize.js.ejs │ │ │ │ │ └── service.js.ejs │ │ │ │ ├── google/ │ │ │ │ │ ├── app.js │ │ │ │ │ └── templates/ │ │ │ │ │ └── js/ │ │ │ │ │ ├── routes/ │ │ │ │ │ │ ├── google-login-routes-cc.js.ejs │ │ │ │ │ │ └── google-login-routes.js.ejs │ │ │ │ │ ├── service-cc-sequelize.js.ejs │ │ │ │ │ ├── service-cc.js.ejs │ │ │ │ │ ├── service-sequelize.js.ejs │ │ │ │ │ └── service.js.ejs │ │ │ │ └── linkedin/ │ │ │ │ ├── app.js │ │ │ │ └── templates/ │ │ │ │ └── js/ │ │ │ │ ├── routes/ │ │ │ │ │ ├── linkedin-login-routes-cc.js.ejs │ │ │ │ │ └── linkedin-login-routes.js.ejs │ │ │ │ ├── service-cc-sequelize.js.ejs │ │ │ │ ├── service-cc.js.ejs │ │ │ │ ├── service-sequelize.js.ejs │ │ │ │ └── service.js.ejs │ │ │ ├── templates/ │ │ │ │ ├── cleanCode/ │ │ │ │ │ ├── .eslintrc.js │ │ │ │ │ ├── .gitignore │ │ │ │ │ ├── README.ejs │ │ │ │ │ ├── __test__/ │ │ │ │ │ │ └── auth.test.js.ejs │ │ │ │ │ ├── app.js.ejs │ │ │ │ │ ├── config/ │ │ │ │ │ │ ├── constant.js.ejs │ │ │ │ │ │ ├── db.js.ejs │ │ │ │ │ │ ├── passport.js.ejs │ │ │ │ │ │ └── requestConstant.js.ejs │ │ │ │ │ ├── controllers/ │ │ │ │ │ │ ├── authController.js.ejs │ │ │ │ │ │ ├── authControllerIndex.js.ejs │ │ │ │ │ │ ├── controller.js.ejs │ │ │ │ │ │ ├── controllerIndex.js.ejs │ │ │ │ │ │ ├── fileUploadController.js.ejs │ │ │ │ │ │ └── fileUploadControllerIndex.js.ejs │ │ │ │ │ ├── customEnv.ejs │ │ │ │ │ ├── data-access/ │ │ │ │ │ │ ├── dbFile.js.ejs │ │ │ │ │ │ ├── dbService.js │ │ │ │ │ │ └── sequenceDb.js.ejs │ │ │ │ │ ├── entity/ │ │ │ │ │ │ └── entity.js.ejs │ │ │ │ │ ├── helpers/ │ │ │ │ │ │ └── date.js │ │ │ │ │ ├── individualRoutes/ │ │ │ │ │ │ ├── controller.js.ejs │ │ │ │ │ │ ├── controllerIndex.js.ejs │ │ │ │ │ │ ├── existIndexRoute.js.ejs │ │ │ │ │ │ ├── indexRoutes.js.ejs │ │ │ │ │ │ ├── platformIndexRoutes.js.ejs │ │ │ │ │ │ ├── route.js.ejs │ │ │ │ │ │ └── service.js.ejs │ │ │ │ │ ├── middleware/ │ │ │ │ │ │ ├── auth.js.ejs │ │ │ │ │ │ ├── checkRolePermission.js.ejs │ │ │ │ │ │ ├── index.js.ejs │ │ │ │ │ │ ├── loginUser.js.ejs │ │ │ │ │ │ ├── passport.js.ejs │ │ │ │ │ │ └── sampleMiddleware.js.ejs │ │ │ │ │ ├── models/ │ │ │ │ │ │ └── model.js.ejs │ │ │ │ │ ├── routes/ │ │ │ │ │ │ ├── auth.js.ejs │ │ │ │ │ │ ├── commonIndexRoutes.js.ejs │ │ │ │ │ │ ├── index.js.ejs │ │ │ │ │ │ ├── modelRoutes.js.ejs │ │ │ │ │ │ ├── platformIndexRoutes.js.ejs │ │ │ │ │ │ └── uploadRoutes.js.ejs │ │ │ │ │ ├── seeders/ │ │ │ │ │ │ └── index.js.ejs │ │ │ │ │ ├── services/ │ │ │ │ │ │ ├── auth.js.ejs │ │ │ │ │ │ ├── customQueryService.js.ejs │ │ │ │ │ │ ├── emailService.js.ejs │ │ │ │ │ │ ├── fileUpload.js.ejs │ │ │ │ │ │ └── smsService.js.ejs │ │ │ │ │ ├── use-case/ │ │ │ │ │ │ ├── authentication/ │ │ │ │ │ │ │ ├── authentication.js.ejs │ │ │ │ │ │ │ ├── forgotPassword.js.ejs │ │ │ │ │ │ │ ├── logout.js.ejs │ │ │ │ │ │ │ ├── register.js.ejs │ │ │ │ │ │ │ ├── resetPassword.js.ejs │ │ │ │ │ │ │ └── validateResetPasswordOtp.js.ejs │ │ │ │ │ │ ├── bulkUpdate.js.ejs │ │ │ │ │ │ ├── changePassword.js.ejs │ │ │ │ │ │ ├── common/ │ │ │ │ │ │ │ ├── getRoleAccess.js.ejs │ │ │ │ │ │ │ ├── loginUser.js.ejs │ │ │ │ │ │ │ └── sendResetPasswordNotification.js.ejs │ │ │ │ │ │ ├── count.js.ejs │ │ │ │ │ │ ├── create.js.ejs │ │ │ │ │ │ ├── createBulk.js.ejs │ │ │ │ │ │ ├── customRouteOfModel.js.ejs │ │ │ │ │ │ ├── delete.js.ejs │ │ │ │ │ │ ├── deleteMany.js.ejs │ │ │ │ │ │ ├── fileUpload.js.ejs │ │ │ │ │ │ ├── findAll.js.ejs │ │ │ │ │ │ ├── findById.js.ejs │ │ │ │ │ │ ├── partialUpdate.js.ejs │ │ │ │ │ │ ├── softDelete.js.ejs │ │ │ │ │ │ ├── softDeleteMany.js.ejs │ │ │ │ │ │ ├── update.js.ejs │ │ │ │ │ │ └── updateProfile.js.ejs │ │ │ │ │ ├── utils/ │ │ │ │ │ │ ├── common.js.ejs │ │ │ │ │ │ ├── convertObjectToEnum.js │ │ │ │ │ │ ├── deleteDependentService1.js.ejs │ │ │ │ │ │ ├── generateRandomNumber.js │ │ │ │ │ │ ├── generateToken.js │ │ │ │ │ │ ├── getSelectObject.js │ │ │ │ │ │ ├── makeDirectory.js │ │ │ │ │ │ └── response/ │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ ├── responseCode.js │ │ │ │ │ │ ├── responseHandler.js │ │ │ │ │ │ └── responseStatus.js │ │ │ │ │ ├── validation/ │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ └── validateSchema.js.ejs │ │ │ │ │ └── views/ │ │ │ │ │ ├── emailTemplate.ejs │ │ │ │ │ ├── index.ejs │ │ │ │ │ ├── resetPassword.ejs │ │ │ │ │ ├── resetPasswordLink.ejs │ │ │ │ │ └── sendOTP.ejs │ │ │ │ ├── cleanCodeSequelize/ │ │ │ │ │ ├── .eslintrc.js │ │ │ │ │ ├── .gitignore │ │ │ │ │ ├── README.ejs │ │ │ │ │ ├── __test__/ │ │ │ │ │ │ └── auth.test.js.ejs │ │ │ │ │ ├── app.js.ejs │ │ │ │ │ ├── config/ │ │ │ │ │ │ ├── constant.js.ejs │ │ │ │ │ │ ├── db.js.ejs │ │ │ │ │ │ ├── dbConnection.js.ejs │ │ │ │ │ │ ├── passport.js.ejs │ │ │ │ │ │ └── requestConstant.js.ejs │ │ │ │ │ ├── controllers/ │ │ │ │ │ │ ├── authController.js.ejs │ │ │ │ │ │ ├── authControllerIndex.js.ejs │ │ │ │ │ │ ├── controller.js.ejs │ │ │ │ │ │ ├── controllerIndex.js.ejs │ │ │ │ │ │ ├── fileUploadController.js.ejs │ │ │ │ │ │ └── fileUploadControllerIndex.js.ejs │ │ │ │ │ ├── customEnv.ejs │ │ │ │ │ ├── data-access/ │ │ │ │ │ │ ├── dbFile.js.ejs │ │ │ │ │ │ └── dbService.js │ │ │ │ │ ├── entity/ │ │ │ │ │ │ └── entity.js.ejs │ │ │ │ │ ├── helpers/ │ │ │ │ │ │ └── date.js │ │ │ │ │ ├── individualRoutes/ │ │ │ │ │ │ ├── controller.js.ejs │ │ │ │ │ │ ├── controllerIndex.js.ejs │ │ │ │ │ │ ├── existIndexRoute.js.ejs │ │ │ │ │ │ ├── indexRoutes.js.ejs │ │ │ │ │ │ ├── platformIndexRoutes.js.ejs │ │ │ │ │ │ ├── route.js.ejs │ │ │ │ │ │ └── service.js.ejs │ │ │ │ │ ├── middleware/ │ │ │ │ │ │ ├── auth.js.ejs │ │ │ │ │ │ ├── checkRolePermission.js.ejs │ │ │ │ │ │ ├── index.js.ejs │ │ │ │ │ │ ├── loginUser.js.ejs │ │ │ │ │ │ ├── passport.js.ejs │ │ │ │ │ │ └── sampleMiddleware.js.ejs │ │ │ │ │ ├── models/ │ │ │ │ │ │ ├── index.js.ejs │ │ │ │ │ │ └── model.js.ejs │ │ │ │ │ ├── routes/ │ │ │ │ │ │ ├── auth.js.ejs │ │ │ │ │ │ ├── commonIndexRoutes.js.ejs │ │ │ │ │ │ ├── index.js.ejs │ │ │ │ │ │ ├── modelRoutes.js.ejs │ │ │ │ │ │ ├── platformIndexRoutes.js.ejs │ │ │ │ │ │ └── uploadRoutes.js.ejs │ │ │ │ │ ├── seeders/ │ │ │ │ │ │ └── index.js.ejs │ │ │ │ │ ├── services/ │ │ │ │ │ │ ├── auth.js.ejs │ │ │ │ │ │ ├── customQueryService.js.ejs │ │ │ │ │ │ ├── dbService.js │ │ │ │ │ │ ├── emailService.js.ejs │ │ │ │ │ │ ├── fileUpload.js.ejs │ │ │ │ │ │ └── smsService.js.ejs │ │ │ │ │ ├── use-case/ │ │ │ │ │ │ ├── authentication/ │ │ │ │ │ │ │ ├── authentication.js.ejs │ │ │ │ │ │ │ ├── forgotPassword.js.ejs │ │ │ │ │ │ │ ├── logout.js.ejs │ │ │ │ │ │ │ ├── register.js.ejs │ │ │ │ │ │ │ ├── resetPassword.js.ejs │ │ │ │ │ │ │ └── validateResetPasswordOtp.js.ejs │ │ │ │ │ │ ├── bulkUpdate.js.ejs │ │ │ │ │ │ ├── changePassword.js.ejs │ │ │ │ │ │ ├── common/ │ │ │ │ │ │ │ ├── getRoleAccess.js.ejs │ │ │ │ │ │ │ ├── loginUser.js.ejs │ │ │ │ │ │ │ └── sendResetPasswordNotification.js.ejs │ │ │ │ │ │ ├── count.js.ejs │ │ │ │ │ │ ├── create.js.ejs │ │ │ │ │ │ ├── createBulk.js.ejs │ │ │ │ │ │ ├── customRouteOfModel.js.ejs │ │ │ │ │ │ ├── delete.js.ejs │ │ │ │ │ │ ├── deleteMany.js.ejs │ │ │ │ │ │ ├── fileUpload.js.ejs │ │ │ │ │ │ ├── findAll.js.ejs │ │ │ │ │ │ ├── findById.js.ejs │ │ │ │ │ │ ├── partialUpdate.js.ejs │ │ │ │ │ │ ├── softDelete.js.ejs │ │ │ │ │ │ ├── softDeleteMany.js.ejs │ │ │ │ │ │ ├── update.js.ejs │ │ │ │ │ │ └── updateProfile.js.ejs │ │ │ │ │ ├── utils/ │ │ │ │ │ │ ├── common.js.ejs │ │ │ │ │ │ ├── convertObjectToEnum.js │ │ │ │ │ │ ├── deleteDependentService1.js.ejs │ │ │ │ │ │ ├── generateRandomNumber.js │ │ │ │ │ │ ├── generateToken.js │ │ │ │ │ │ ├── getSelectObject.js │ │ │ │ │ │ ├── makeDirectory.js │ │ │ │ │ │ ├── messages.js │ │ │ │ │ │ ├── replaceAll.js │ │ │ │ │ │ ├── response/ │ │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ │ ├── responseCode.js │ │ │ │ │ │ │ ├── responseHandler.js │ │ │ │ │ │ │ └── responseStatus.js │ │ │ │ │ │ ├── responseCode.js │ │ │ │ │ │ └── validateRequest.js │ │ │ │ │ ├── validation/ │ │ │ │ │ │ ├── genericValidator.js │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ └── validateSchema.js.ejs │ │ │ │ │ └── views/ │ │ │ │ │ ├── emailTemplate.ejs │ │ │ │ │ ├── index.ejs │ │ │ │ │ ├── resetPassword.ejs │ │ │ │ │ ├── resetPasswordLink.ejs │ │ │ │ │ └── sendOTP.ejs │ │ │ │ ├── logs/ │ │ │ │ │ └── error.log.ejs │ │ │ │ ├── mvc/ │ │ │ │ │ ├── .eslintrc.js │ │ │ │ │ ├── .gitignore │ │ │ │ │ ├── README.ejs │ │ │ │ │ ├── __test__/ │ │ │ │ │ │ └── auth.test.js.ejs │ │ │ │ │ ├── app.js.ejs │ │ │ │ │ ├── config/ │ │ │ │ │ │ ├── constant.js.ejs │ │ │ │ │ │ ├── db.js.ejs │ │ │ │ │ │ ├── passport.js.ejs │ │ │ │ │ │ └── requestConstant.js.ejs │ │ │ │ │ ├── controllers/ │ │ │ │ │ │ ├── authController.js.ejs │ │ │ │ │ │ ├── controller.js.ejs │ │ │ │ │ │ └── fileUploadController.js.ejs │ │ │ │ │ ├── customEnv.ejs │ │ │ │ │ ├── individualRoutes/ │ │ │ │ │ │ ├── controller.js.ejs │ │ │ │ │ │ ├── existIndexRoute.js.ejs │ │ │ │ │ │ ├── indexRoutes.js.ejs │ │ │ │ │ │ ├── platformIndexRoutes.js.ejs │ │ │ │ │ │ ├── route.js.ejs │ │ │ │ │ │ └── service.js.ejs │ │ │ │ │ ├── middleware/ │ │ │ │ │ │ ├── auth.js.ejs │ │ │ │ │ │ ├── checkRolePermission.js.ejs │ │ │ │ │ │ ├── loginUser.js.ejs │ │ │ │ │ │ └── sampleMiddleware.js.ejs │ │ │ │ │ ├── models/ │ │ │ │ │ │ └── model.js.ejs │ │ │ │ │ ├── routes/ │ │ │ │ │ │ ├── auth.js.ejs │ │ │ │ │ │ ├── commonIndexRoutes.js.ejs │ │ │ │ │ │ ├── index.js.ejs │ │ │ │ │ │ ├── modelRoutes.js.ejs │ │ │ │ │ │ ├── platformIndexRoutes.js.ejs │ │ │ │ │ │ └── uploadRoutes.js.ejs │ │ │ │ │ ├── seeders/ │ │ │ │ │ │ └── index.js.ejs │ │ │ │ │ ├── services/ │ │ │ │ │ │ ├── auth.js.ejs │ │ │ │ │ │ ├── customQueryService.js.ejs │ │ │ │ │ │ ├── emailService.js.ejs │ │ │ │ │ │ └── smsService.js.ejs │ │ │ │ │ ├── utils/ │ │ │ │ │ │ ├── common.js.ejs │ │ │ │ │ │ ├── dbService.js │ │ │ │ │ │ ├── deleteDependentService1.js.ejs │ │ │ │ │ │ ├── response/ │ │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ │ ├── responseCode.js │ │ │ │ │ │ │ ├── responseHandler.js │ │ │ │ │ │ │ └── responseStatus.js │ │ │ │ │ │ ├── validateRequest.js │ │ │ │ │ │ └── validation/ │ │ │ │ │ │ └── validateSchema.js.ejs │ │ │ │ │ └── views/ │ │ │ │ │ ├── emailTemplate.ejs │ │ │ │ │ ├── index.ejs │ │ │ │ │ ├── resetPassword.ejs │ │ │ │ │ ├── resetPasswordLink.ejs │ │ │ │ │ └── sendOTP.ejs │ │ │ │ └── mvcSequelize/ │ │ │ │ ├── .eslintrc.js │ │ │ │ ├── .gitignore │ │ │ │ ├── README.ejs │ │ │ │ ├── __test__/ │ │ │ │ │ └── auth.test.js.ejs │ │ │ │ ├── app.js.ejs │ │ │ │ ├── config/ │ │ │ │ │ ├── constant.js.ejs │ │ │ │ │ ├── db.js.ejs │ │ │ │ │ ├── dbConnection.js.ejs │ │ │ │ │ ├── passport.js.ejs │ │ │ │ │ └── requestConstant.js.ejs │ │ │ │ ├── controllers/ │ │ │ │ │ ├── authController.js.ejs │ │ │ │ │ ├── controller.js.ejs │ │ │ │ │ └── fileUploadController.js.ejs │ │ │ │ ├── customEnv.ejs │ │ │ │ ├── individualRoutes/ │ │ │ │ │ ├── controller.js.ejs │ │ │ │ │ ├── existIndexRoute.js.ejs │ │ │ │ │ ├── indexRoutes.js.ejs │ │ │ │ │ ├── platformIndexRoutes.js.ejs │ │ │ │ │ ├── route.js.ejs │ │ │ │ │ └── service.js.ejs │ │ │ │ ├── middleware/ │ │ │ │ │ ├── auth.js.ejs │ │ │ │ │ ├── checkRolePermission.js.ejs │ │ │ │ │ ├── loginUser.js.ejs │ │ │ │ │ └── sampleMiddleware.js.ejs │ │ │ │ ├── models/ │ │ │ │ │ ├── index.js.ejs │ │ │ │ │ └── model.js.ejs │ │ │ │ ├── routes/ │ │ │ │ │ ├── auth.js.ejs │ │ │ │ │ ├── commonIndexRoutes.js.ejs │ │ │ │ │ ├── index.js.ejs │ │ │ │ │ ├── modelRoutes.js.ejs │ │ │ │ │ ├── platformIndexRoutes.js.ejs │ │ │ │ │ └── uploadRoutes.js.ejs │ │ │ │ ├── seeders/ │ │ │ │ │ └── index.js.ejs │ │ │ │ ├── services/ │ │ │ │ │ ├── auth.js.ejs │ │ │ │ │ ├── customQueryService.js.ejs │ │ │ │ │ ├── emailService.js.ejs │ │ │ │ │ └── smsService.js.ejs │ │ │ │ ├── utils/ │ │ │ │ │ ├── common.js.ejs │ │ │ │ │ ├── dbService.js │ │ │ │ │ ├── deleteDependentService1.js.ejs │ │ │ │ │ ├── response/ │ │ │ │ │ │ ├── index.js │ │ │ │ │ │ ├── responseCode.js │ │ │ │ │ │ ├── responseHandler.js │ │ │ │ │ │ └── responseStatus.js │ │ │ │ │ ├── validateRequest.js │ │ │ │ │ └── validation/ │ │ │ │ │ └── validateSchema.js.ejs │ │ │ │ └── views/ │ │ │ │ ├── emailTemplate.ejs │ │ │ │ ├── index.ejs │ │ │ │ ├── resetPassword.ejs │ │ │ │ ├── resetPasswordLink.ejs │ │ │ │ └── sendOTP.ejs │ │ │ └── writeOperations/ │ │ │ └── index.js │ │ ├── openCode.js │ │ ├── paginate.js │ │ ├── structure.js │ │ ├── update.js │ │ ├── upsert.js │ │ └── view.js │ ├── applicationConfig/ │ │ ├── create.js │ │ ├── delete.js │ │ ├── deleteDependency.js │ │ ├── get.js │ │ ├── paginate.js │ │ └── update.js │ ├── common/ │ │ └── projectApplicationUpdate.js │ ├── envVariables/ │ │ ├── get.js │ │ └── upsert.js │ ├── generator/ │ │ └── deleteDependency.js │ ├── jsonInput/ │ │ ├── jsonInput.js │ │ └── util/ │ │ ├── index.js │ │ ├── projectConstant/ │ │ │ └── projectConstant.js │ │ ├── projectPolicy/ │ │ │ └── projectPolicy.js │ │ ├── projectRoleAccessPermission/ │ │ │ └── projectRoleAccessPermission.js │ │ ├── projectRoutes/ │ │ │ └── projectRoutes.js │ │ └── schema/ │ │ └── schema.js │ ├── master/ │ │ ├── create.js │ │ ├── getByCode.js │ │ └── paginate.js │ ├── nestedQueryBuilder/ │ │ ├── delete.js │ │ ├── deleteDependency.js │ │ └── insertMany.js │ ├── project/ │ │ ├── archive.js │ │ ├── archivedProjects.js │ │ ├── create.js │ │ ├── delete.js │ │ ├── deleteDependency.js │ │ ├── explorePublicPaginate.js │ │ ├── get.js │ │ ├── noOfProjectAndApplication.js │ │ ├── paginate.js │ │ ├── unArchive.js │ │ ├── update.js │ │ └── upsert.js │ ├── projectConstant/ │ │ ├── create.js │ │ ├── delete.js │ │ ├── deleteDependency.js │ │ ├── paginate.js │ │ └── update.js │ ├── projectPolicy/ │ │ ├── create.js │ │ ├── delete.js │ │ ├── deleteDependency.js │ │ ├── paginate.js │ │ ├── update.js │ │ └── util/ │ │ └── dependentCond.js │ ├── projectRoleAccessPermissions/ │ │ ├── delete.js │ │ ├── deleteDependency.js │ │ ├── paginate.js │ │ ├── upsert.js │ │ └── util/ │ │ ├── RemoveModelDetails.js │ │ └── index.js │ ├── projectRoute/ │ │ ├── create.js │ │ ├── delete.js │ │ ├── deleteDependency.js │ │ ├── insertMany.js │ │ ├── paginate.js │ │ ├── requestApi.js │ │ ├── update.js │ │ └── uploadPostmanFile.js │ ├── queryBuilder/ │ │ ├── delete.js │ │ ├── deleteDependency.js │ │ └── insertMany.js │ ├── schema/ │ │ ├── InsertDefaultModels/ │ │ │ └── insertDefaultModels.js │ │ ├── create.js │ │ ├── dataTypeSuggestions.js │ │ ├── delete.js │ │ ├── deleteDependency.js │ │ ├── existsSchemaUpdate.js │ │ ├── get.js │ │ ├── insertMany.js │ │ ├── paginate.js │ │ ├── searchSchema.js │ │ ├── sequelize/ │ │ │ └── existsSchemaUpdate.js │ │ ├── update.js │ │ └── util/ │ │ ├── deleteSchemaRefInfo.js │ │ ├── deleteSchemaReferences.js │ │ ├── index.js │ │ ├── isRegExp.js │ │ ├── sequelize/ │ │ │ └── validateDataTypes.js │ │ ├── staticData.js │ │ ├── updateSchemaRefAttribute.js │ │ ├── updateSchemaReferences.js │ │ ├── validateProps.js │ │ └── validateRegEx.js │ ├── schemaDetail/ │ │ ├── create.js │ │ ├── delete.js │ │ ├── deleteDependency.js │ │ ├── paginate.js │ │ ├── update.js │ │ └── upsert.js │ └── util/ │ ├── fieldsList.js │ ├── getApplicationData.js │ ├── getBaseUrl.js │ ├── getPermissionWiseRoute.js │ ├── getRoutes.js │ ├── randomNumber.js │ ├── validation/ │ │ ├── accessPermission.js │ │ ├── actionValidation.js │ │ ├── apiIntegration.js │ │ ├── applicationConfig.js │ │ ├── applicationCreate.js │ │ ├── applicationId.js │ │ ├── applicationUpdate.js │ │ ├── applicationUpsert.js │ │ ├── defaultInsertModels.js │ │ ├── group.js │ │ ├── masterValidation.js │ │ ├── projectConstant.js │ │ ├── projectCreate.js │ │ ├── projectPolicy.js │ │ ├── projectRoleAccessPermission.js │ │ ├── projectRoute.js │ │ ├── projectUpdate.js │ │ ├── projectUpsert.js │ │ ├── schema.js │ │ ├── schemaDetail.js │ │ └── sqlImport.js │ └── validation.js └── util-service/ ├── common/ │ ├── common.js │ └── index.js ├── crypto/ │ ├── crypto.js │ └── index.js └── validation/ └── index.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .github/ISSUE_TEMPLATE/bug_report.md ================================================ --- name: 🐞 Bug about: File a bug/issue title: '[BUG] ' labels: Bug, Needs Triage assignees: '' --- <!-- Note: Please search to see if an issue already exists for the bug you encountered. --> ### Current Behavior: <!-- A concise description of what you're experiencing. --> ### Expected Behavior: <!-- A concise description of what you expected to happen. --> ### Steps To Reproduce: <!-- Example: steps to reproduce the behavior: 1. In this environment... 2. With this config... 3. Run '...' 4. See error... --> ### Environment: <!-- Example: - OS: Ubuntu 20.04 - Node: 13.14.0 - npm: 7.6.3 --> ### Anything else: <!-- Links? References? Anything that will give us more context about the issue that you are encountering! --> ================================================ FILE: .github/ISSUE_TEMPLATE/feature_request.md ================================================ --- name: Feature request about: Suggest an idea for this project title: '' labels: '' assignees: '' --- **Is your feature request related to a problem? Please describe.** A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] **Describe the solution you'd like** A clear and concise description of what you want to happen. **Describe alternatives you've considered** A clear and concise description of any alternative solutions or features you've considered. **Additional context** Add any other context or screenshots about the feature request here. ================================================ FILE: .github/workflows/eslint.yml ================================================ name: Check ESLint on Pull Request on: push: branches: [ master ] pull_request: branches: [ master ] jobs: fix: runs-on: ubuntu-latest steps: - name: Check out Git repository uses: actions/checkout@v2 - name: installing eslint run: npm i -g eslint && npm run install --force - name: Fixing Files run: eslint . --ext .js --fix ================================================ FILE: .gitignore ================================================ node_modules package-lock.json .history ================================================ FILE: CHANGELOG.md ================================================ # Change Log All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. ## [1.3.1](https://github.com/DhiWise/dhiwise-nodejs/compare/v1.3.0...v1.3.1) (2022-09-28) ### Bug Fixes * **server:** missing constant ([eeccc59](https://github.com/DhiWise/dhiwise-nodejs/commit/eeccc59c8890d3f43ff6e36d243659c27158f7f8)) # [1.3.0](https://github.com/DhiWise/dhiwise-nodejs/compare/v1.2.0...v1.3.0) (2022-04-25) ### Bug Fixes * **Clean Code Sequelize:** bug Fixes for Clean code sequelize ([fc7ba02](https://github.com/DhiWise/dhiwise-nodejs/commit/fc7ba024dae562f758f89dac6fada9bf04d52809)) * **clean-code:** ejs variable updated ([44f91af](https://github.com/DhiWise/dhiwise-nodejs/commit/44f91afd4bd249d2ae528acd1b56a7e2909e02b4)) * **eslint fixes:** eslint rules violation removed ([7682a2a](https://github.com/DhiWise/dhiwise-nodejs/commit/7682a2af8031955655e5c943be580fb18f2cce5a)) * **file upload in cc:** fix file upload in controller of cc ([387562a](https://github.com/DhiWise/dhiwise-nodejs/commit/387562a1b9ecc6636200c6c9fb7d56451a0c5878)) * **file-upload-cc:** steps added ([f06995e](https://github.com/DhiWise/dhiwise-nodejs/commit/f06995e53f9eb75c63bc54da5f61b9e7d3e5bdb0)) * **minor bug fixes:** - ([876f01a](https://github.com/DhiWise/dhiwise-nodejs/commit/876f01aea94c8f803030554fd123c9aa4654555b)) * **model data save warning:** when model data change and change the model without save ask warning p ([791f20f](https://github.com/DhiWise/dhiwise-nodejs/commit/791f20fc716e3acba8271ca6109e36b460848d09)) * **overlay issue no able to click:** propstypes forbidden remove and overlay issue fix ([3abc5fa](https://github.com/DhiWise/dhiwise-nodejs/commit/3abc5fab37b580789691effb46231cbb9dd1c760)), closes [#27](https://github.com/DhiWise/dhiwise-nodejs/issues/27) * **Remove configuration tab in routes:** file upload - removal form custom routes ([98a7e54](https://github.com/DhiWise/dhiwise-nodejs/commit/98a7e540e5bface7478edf1940914df4e53ef42e)) ### Features * **Clean-code file uplaod:** file upload use-cases added for clean-code architecture ([af56105](https://github.com/DhiWise/dhiwise-nodejs/commit/af5610501d7d98897ab02115873c76ee9f75b4bc)) * **Clean-code mongoose:** comments added ([c6b432c](https://github.com/DhiWise/dhiwise-nodejs/commit/c6b432cf69dbe0ff58745f554af92e9d04129473)) * **server:** custom routes with query builder for mvc architecture ([6949d44](https://github.com/DhiWise/dhiwise-nodejs/commit/6949d441687cdb2a23b76f580a0b88f408663678)) # [1.2.0](https://github.com/DhiWise/nodejs-code-generator/compare/v1.1.0...v1.2.0) (2022-02-02) ### Bug Fixes * **bug fixes and code enhancement:** fixed some issues ([501675e](https://github.com/DhiWise/nodejs-code-generator/commit/501675e7f528d79a5cb4e84c5d24a4562e74fe2d)) ### Features * **custom routes in clean-code architecture with use case:** custom routes with query builder added ([f38092d](https://github.com/DhiWise/nodejs-code-generator/commit/f38092d1790f21a562403a6c1638245c846665ee)) * **use-case added in clean code architecture:** a service layer in clean code architecture ([e7cbfc4](https://github.com/DhiWise/nodejs-code-generator/commit/e7cbfc4f15956d7b2343eb6275fcea6beaf0fa40)) # [1.1.0](https://github.com/DhiWise/nodejs-code-generator/compare/v1.0.0...v1.1.0) (2022-01-11) ### Bug Fixes * **eslint formatting:** resolved eslint errors ([2c71bf2](https://github.com/DhiWise/nodejs-code-generator/commit/2c71bf2661c5e1599de3cb242b5431dce8720137)) ### Features * add confirmation popup when second time build application ([a7fe3c0](https://github.com/DhiWise/nodejs-code-generator/commit/a7fe3c001fab1972a8f2f151feb6deb18220c3e5)), closes [#20](https://github.com/DhiWise/nodejs-code-generator/issues/20) ================================================ FILE: CLEAN_CODE.md ================================================ # NodeJS,Express Project in Clean-Code Architecture with Mongoose/Sequelize **supported version of nodejs > 12**, **supported version of mongoose-4.0**, **supported version of sequelize-6.6.5** ## About - This is a Node application, developed in Clean-code architecture with Node.js, ExpressJS. ## How to run 1. ```$ npm install``` 2. ```$ npm start``` ## Folder structure: ``` ├── app.js - starting point of the application ├── config - application configuration files ├── constants - contains commonly used constants ├── controller - contains business logic ├── entity - entity of models ├── helper - helper files ├── model - models of application (DB schema files) ├── postman - API documentation - postman collection files ├── routes - contains all the routes of application ├── services - contains commonly used services ├── views - templates ├── utils - contains utility functions └── validation - contains validations ``` ### Detail Description of Files and folders 1. app.js - entry point of application. 2. config - passport strategy files - database connection files 3. constants - constants used across application. 4. controller - Controller files that contains Business logic ``` ├── controller    └── platform ├── <model>.js - contains business logic └── index.js - contains dependency injection ``` 5. entity - These are the business objects of your application. These should not be affected by any change external to them, and these should be the most stable code within your application. These can be POJOs, objects with methods, or even data structures. 6. helpers - helper function, used to assist in providing some functionality, which isn't the main goal of the application or class in which they are used. 7. middleware - Middleware files for authentication, authorization and role-access. 8. models - Database models 9. postman - Postman collection of APIs (Import this JSON in Postman to run the APIs) 10. public - Assets used in application 11. routes ``` ├── routes ├── platform ├── <model>Routes.js - contains CRUD operation routes └── index.js - exports model Routes └── index.js - exports platform routes ``` - index.js file, exports platform routes, imported into app.js to access all the routes. 12. services ``` ├── services ├── jobs - cron jobs ├── dbService.js - Database service └── auth.js - Authentication module service ``` 13. utils ``` ├── utils ├── messages.js - Messages used in sending response ├── responseCode.js - response codes └── validateRequest.js - validate request based on model schema ``` 14. validation - Joi validations files for every model 15. env files - You can add credentials and port, database values as per your environment(Development/Production). - If you are running test environment then test cases will run using test database,and its configuration is there inside app.js ================================================ FILE: CODE_OF_CONDUCT.md ================================================ # Contributor Covenant Code of Conduct ## Our Pledge We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. ## Our Standards Examples of behavior that contributes to a positive environment for our community include: * Demonstrating empathy and kindness toward other people * Being respectful of differing opinions, viewpoints, and experiences * Giving and gracefully accepting constructive feedback * Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience * Focusing on what is best not just for us as individuals, but for the overall community Examples of unacceptable behavior include: * The use of sexualized language or imagery, and sexual attention or advances of any kind * Trolling, insulting or derogatory comments, and personal or political attacks * Public or private harassment * Publishing others' private information, such as a physical or email address, without their explicit permission * Other conduct which could reasonably be considered inappropriate in a professional setting ## Enforcement Responsibilities Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate. ## Scope This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at help@dhiwise.com. All complaints will be reviewed and investigated promptly and fairly. All community leaders are obligated to respect the privacy and security of the reporter of any incident. ## Enforcement Guidelines Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct: ### 1. Correction **Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. **Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested. ### 2. Warning **Community Impact**: A violation through a single incident or series of actions. **Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban. ### 3. Temporary Ban **Community Impact**: A serious violation of community standards, including sustained inappropriate behavior. **Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban. ### 4. Permanent Ban **Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. **Consequence**: A permanent ban from any sort of public interaction within the community. ## Attribution This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0, available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity). [homepage]: https://www.contributor-covenant.org For answers to common questions about this code of conduct, see the FAQ at https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations. ================================================ FILE: CONTRIBUTING.md ================================================ # Contributing We will appreciate developers' contribution to improve node.js code generator, to make it even better. Therefore, any contributions related to features, issues, documentation, translation, guides, and more are all welcomed. ## Got a question? You can ask questions, consult with more experienced DhiWise users, and discuss DhiWise-related topics in the our [Discord channel](https://discord.gg/hTuNauNjyJ). ## Bugs If you find a bug in the source code, you can help us by [submitting an issue](https://github.com/DhiWise/nodejs-code-generator/issues/new?assignees=&labels=type%3A%20bug&template=bug_report.md&title=) to our GitHub Repository. Even better, you can submit a Pull Request with a fix. ## Feature Suggestion You can request a new feature by [submitting an issue](https://github.com/DhiWise/nodejs-code-generator/issues/new?assignees=&labels=type%3A%20feature%20request&template=feature_request.md&title=) to our GitHub Repository. If you would like to implement a new feature, please submit an issue with a proposal for your work first, to be sure that we can use it. Please consider what kind of change it is: - For a Major Feature, first open an issue and outline your proposal so that it can be discussed. This will also allow us to better coordinate our efforts, prevent duplication of work, and help you craft the change so that it's successfully integrated in the project. - Small Features can be added directly [submitted as a Pull Request](#submit-pr). ## What do I need to know to help? If you want to help out with a code contribution, our project uses the following stack: ### Server-side - [Node.JS](https://nodejs.org/) ### Client-side - [React](https://reactjs.org/docs/getting-started.html) ### Testing - [Jest](https://jestjs.io/) (for testing) ## <a name="submit-pr"></a> How do I make a contribution? Never made an open source contribution before? Wondering how contributions work in the in our project? Here's a quick rundown! Find an issue that you're interested in addressing, or a feature that you'd like to add. You can use [this view](https://github.com/dhiwise/nodejs-code-generator/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) which helps new contributors find easy gateways into our project. Fork the repository associated with the issue to your local GitHub organization. This means that you'll have a copy of the repository under your-GitHub-username/repository-name. Clone the repository to your local machine: ``` git clone https://github.com/DhiWise/nodejs-code-generator ``` Create a new branch for your fix: ``` git checkout -b branch-name-here ``` Make the appropriate changes for the issue you are trying to address or the feature that you want to add. Once done, stage the changes that are ready to be committed: ``` git add . ``` Commit the changes with a short message. ``` git commit -m "<type>:<package>:<message>" ``` CLI for better commit messages ``` npm run commit ``` Push the changes to the remote repository using: ``` git push origin branch-name-here ``` ### Branch Guidelines 1. If you are fixing a bug, start the branch name with bug/bug-name 2. If you are adding a feature, start the branch name with feature/feature-name 3. Submit you branch to master by creating a PR. In the description of the pull request, explain the changes that you made, any issues you think exist with the pull request you made, and any questions you have for the maintainer. It's okay if your pull request is not perfect (no pull request is), the reviewer will be able to help you fix any problems and improve it! Wait for the pull request to be reviewed by a maintainer. Make changes to the pull request if the reviewing maintainer recommends them. Celebrate your success after your pull request is merged! ### Git Commit Messages We structure our commit messages like this: ``` <type>(<package>): <subject> ``` Example ``` fix(server): missing entity on init ``` List of types: - feat: A new feature - fix: A bug fix - docs: Changes to the documentation - refactor: A code change that neither fixes a bug nor adds a feature - perf: A code change that improves performance - test: Adding missing or correcting existing tests ### Code of conduct Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms. [Code of Conduct](https://github.com/DhiWise/nodejs-code-generator/blob/master/CODE_OF_CONDUCT.md) Our Code of Conduct means that you are responsible for treating everyone on the project with respect and courtesy. ================================================ FILE: LICENSE ================================================ Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS Copyright 2021 DhiWise Pvt. Ltd. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ================================================ FILE: MVC_ARCHITECTURE.md ================================================ # Node.JS,Express Project in MVC Architecture with Mongoose/Sequelize **supported version of nodejs > 12**, **supported version of mongoose-4.0**, **supported version of sequelize-6.6.5** ## About - This is a Node application, developed using MVC pattern with Node.js, ExpressJS. ## Initial 1. ```$ npm install``` 2. ```$ npm start``` ## Folder structure: ``` ├── app.js - starting point of the application ├── config - application configuration files ├── constants - contains commonly used constants ├── controller - contains business logic ├── model - models of application (DB schema files) ├── postman - API documentation - postman collection files ├── routes - contains all the routes of application ├── services - contains commonly used services ├── views - templates └── utils - contains utility functions ``` ### Detail Description of Files and folders 1. app.js - entry point of application. 2. config - passport strategy files - database connection files 3. constants - constants used across application. 4. controllers - Controller files that contains Business logic ``` ├── controller └── platform └── <model>Controller.js - contains CRUD Operations ``` 5. middleware - Middleware files for authentication, authorization and role-access. 6. models - Database models 7. postman - Postman collection of APIs (Import this JSON in Postman to run the APIs) 8. public - Assets used in application 9. routes ``` ├── routes ├── platform ├── <model>Routes.js - contains CRUD operation routes └── index.js - exports model Routes └── index.js - exports platform routes ``` - index.js file, exports platform routes, imported into app.js to access all the routes. 10. services ``` ├── services ├── jobs - cron jobs └── auth.js - Authentication module service ``` 11. utils ``` ├── utils ├── validations - joi validations files for every model ├── dbService.js - Database functions ├── messages.js - Messages used in sending response ├── responseCode.js - response codes └── validateRequest.js - validate request based on model schema ``` 12. env files - You can add credentials, port, database-name etc as per your environment(Development/Production). - If you are running test environment then test cases will run using test database,and its configuration is there inside app.js ================================================ FILE: README.md ================================================ [![GitHub stars](https://img.shields.io/github/stars/DhiWise/nodejs-code-generator?style=flat-square&color=yellow)](https://github.com/DhiWise/nodejs-code-generator) [![Issues](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square&color=66bb6a)](https://github.com/DhiWise/nodejs-code-generator/issues) # Node.js Code Generator <p> Node.js code generator is a developer-centric platform to build backend CRUD APIs along with other essential features to boost developers' productivity time by twofold! Developers just need to add their schema data to reduce their work related to models into a few simple configurations. Developers can also configure platforms , routes, role access, authentication & more for their application. Most importantly, the Node.js code generator gives developers total code ownership. The code it generates is bug-free and easily customizable </p> ## Table of contents * [Get started](#get-started) * [Supported Architectures](#supported-architectures) * [Features](#features-of-generated-code) * [Documentation](#documentation) ## Get started After a successful run, a user can configure different settings using UI, and build an app to generate the code. 1. To run ```npm i && npm run start``` > :warning: Note: Use ```npm i --force``` If your npm installation fails. As Node version >= 14 will give you errors if peer dependency in different packages have ambiguation in versions. 2. With ```npm run start``` project will run on 3000 port. 3. Run http://localhost:3000 and you will see "create application" form. After creating an application you can configure modules and build the app to get the source code. <img src="https://development-dhvs.s3.ap-south-1.amazonaws.com/uploads/user-profile/open-source.gif" alt="create-application"/> 4. After a successful build, Generated code will resides inside the **packages/server/output** folder. ## Supported architectures This project provides two architectures to choose from, while creating an application. ### <a href="https://github.com/DhiWise/nodejs-code-generator/blob/master/CLEAN_CODE.md">Clean Code</a> The main rule of clean architecture is that code dependencies can only move from the outer levels inward. Code on the inner layers can have no knowledge of functions on the outer layers. ### <a href="https://github.com/DhiWise/nodejs-code-generator/blob/master/MVC_ARCHITECTURE.md">MVC - Model-View-Controller</a> The Model-View-Controller (MVC) is an architectural pattern that separates an application into three main logical components: the model, the view, and the controller. Each of these components are built to handle specific development aspects of an application. ## Features of generated code 1. User Authentication and Authorization (using Passport) 2. Social Login APIs 3. CRUD APIs with middleware and attributes' selection 4. List API with pagination, populate and queries 5. Upload attachment API with validation and storage options like (Local server or S3 public/private bucket) 6. Role-Permission 8. Hooks and Indexes 9. Policy/middleware 10. API request body validation (Using joi) 11. API response with standard error and message pattern 12. Test cases 13. Postman collection and API documentation 15. Constants 17. Environment Variables for development, QA and production 18. Custom API setup 19. Multiple Platform selection and User type configuration 20. MVC and Clean-code architecture 21. Supported Databases <br> a. MongoDB<br> b. SQL Server<br> c. MYSQL<br> d. PostgreSQL ## Documentation Here's the Documentation of <a href="https://docs.dhiwise.com/docs/node/generate-apis/">How you can use generated APIs</a> ## Contribution Have you found a bug? :lady_beetle: <a href="https://github.com/DhiWise/nodejs-code-generator/issues/new?assignees=&labels=type%3A%20bug&template=bug_report.md&title=">Please report it here</a> or have a nice feature 💡 to contribute? Add it <a href="https://github.com/DhiWise/nodejs-code-generator/issues/new?assignees=&labels=type%3A%20feature%20request&template=feature_request.md&title="> here </a> <br/> Our <a href="https://github.com/DhiWise/nodejs-code-generator/blob/master/CONTRIBUTING.md">Contribution guide </a> will help you how to contribute. ## Support If you have problems or questions go to our Discord channel, we will then try to help you as quickly as possible: https://discord.gg/hTuNauNjyJ ================================================ FILE: lerna.json ================================================ { "packages": [ "packages/*" ], "npmClient": "npm", "version": "1.3.1", "lerna": "4.0.0", "command": { "publish": { "conventionalCommits": true, "yes": true } } } ================================================ FILE: package.json ================================================ { "name": "nodejs-code-generator", "version": "0.0.0", "private": true, "author": { "name": "DhiWise", "url": "https://www.dhiwise.com" }, "scripts": { "start": "lerna run start", "install": "lerna clean -y && lerna bootstrap --hoist", "test": "jest --runInBand", "commit": "cz", "release_prepatch": "lerna publish prepatch --conventional-commits && conventional-github-releaser --preset angular", "release_patch": "lerna publish patch --conventional-commits && conventional-github-releaser --preset angular", "release_premajor": "lerna publish premajor --conventional-commits && conventional-github-releaser --preset angular", "release": "lerna publish --conventional-commits && conventional-github-releaser --preset angular", "lint": "eslint . --ext .js --fix" }, "jest": { "modulePathIgnorePatterns": [ "packages/server/output/*" ] }, "devDependencies": { "@babel/eslint-parser": "^7.15.8", "@babel/plugin-proposal-class-properties": "^7.14.5", "@babel/plugin-transform-react-jsx": "^7.14.9", "commitizen": "^4.2.4", "conventional-github-releaser": "^3.1.2", "cz-lerna-changelog": "^2.0.3", "eslint": "^7.32.0", "eslint-config-airbnb": "^18.2.1", "eslint-import-resolver-alias": "^1.1.2", "eslint-plugin-import": "^2.22.2", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-react": "^7.26.1", "eslint-plugin-react-hooks": "^4.2.0", "lerna": "^4.0.0", "react-app-rewire-aliases": "^0.2.0", "react-app-rewired": "^2.1.8", "react-error-overlay": "^6.0.9", "supertest": "^6.1.6" }, "config": { "commitizen": { "path": "./node_modules/cz-lerna-changelog" } } } ================================================ FILE: packages/client/.eslintrc.json ================================================ { "env": { "browser": true, "es2021": true }, "extends": [ "plugin:react/recommended", "airbnb" ], "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 12, "sourceType": "module", "requireConfigFile": false, "babelOptions": { "presets": [ "@babel/preset-react", [ "@babel/env", { "targets": { "edge": "17", "firefox": "60", "chrome": "67", "safari": "11.1" }, "useBuiltIns": "usage", "corejs": "3.6.4" } ] ], "plugins": [ "@babel/plugin-transform-react-jsx", "@babel/plugin-proposal-class-properties" ] } }, "plugins": [ "react" ], "rules": { "jsx-a11y/label-has-for": "off", "jsx-a11y/label-has-associated-control": "off", "max-len": "off", "linebreak-style": "off", "global-require": "off", "no-console": "off", "react/prop-types": "off", "jsx-a11y/click-events-have-key-events": "off", "jsx-a11y/no-static-element-interactions": "off", "jsx-a11y/mouse-events-have-key-events": "off", "jsx-a11y/no-redundant-roles": "off", "jsx-a11y/no-noninteractive-tabindex": "off", "jsx-a11y/no-noninteractive-element-interactions": "off", "react/require-default-props": "off", "react/button-has-type": "off", "react/no-unknown-property":"off", "react/destructuring-assignment": [ "off", { "ignoreClassFields": true } ], "no-bitwise": "off", "no-unused-expressions": [ "error", { "allowShortCircuit": true, "allowTernary": true } ], "no-underscore-dangle": "off", "react/no-unescaped-entities": "off", "react/jsx-filename-extension": [ 1, { "extensions": [ ".js", ".jsx" ] } ], "import/prefer-default-export": "off" }, "parser": "@babel/eslint-parser", "settings": { "import/resolver": { "alias": [ [ "@assets", "./src/assets" ], [ "@constant", "./src/constant" ] ], "node": { "extensions": [ ".js", ".jsx", ".ts", ".tsx" ] } } } } ================================================ FILE: packages/client/.gitignore ================================================ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.history /.pnp .pnp.js package-lock.json yarn.lock /.vscode # production /build # misc .DS_Store .env.local .env.development.local .env.test.local .env.production.local npm-debug.log* yarn-debug.log* yarn-error.log* ================================================ FILE: packages/client/CHANGELOG.md ================================================ # Change Log All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. ## [1.3.1](https://github.com/DhiWise/dhiwise-nodejs/compare/v1.3.0...v1.3.1) (2022-09-28) **Note:** Version bump only for package @nodejs-code-generator/client # [1.3.0](https://github.com/DhiWise/dhiwise-nodejs/compare/v1.2.0...v1.3.0) (2022-04-25) ### Bug Fixes * **eslint fixes:** eslint rules violation removed ([7682a2a](https://github.com/DhiWise/dhiwise-nodejs/commit/7682a2af8031955655e5c943be580fb18f2cce5a)) * **file upload in cc:** fix file upload in controller of cc ([387562a](https://github.com/DhiWise/dhiwise-nodejs/commit/387562a1b9ecc6636200c6c9fb7d56451a0c5878)) * **model data save warning:** when model data change and change the model without save ask warning p ([791f20f](https://github.com/DhiWise/dhiwise-nodejs/commit/791f20fc716e3acba8271ca6109e36b460848d09)) * **overlay issue no able to click:** propstypes forbidden remove and overlay issue fix ([3abc5fa](https://github.com/DhiWise/dhiwise-nodejs/commit/3abc5fab37b580789691effb46231cbb9dd1c760)), closes [#27](https://github.com/DhiWise/dhiwise-nodejs/issues/27) * **Remove configuration tab in routes:** file upload - removal form custom routes ([98a7e54](https://github.com/DhiWise/dhiwise-nodejs/commit/98a7e540e5bface7478edf1940914df4e53ef42e)) # [1.2.0](https://github.com/DhiWise/nodejs-code-generator/compare/v1.1.0...v1.2.0) (2022-02-02) **Note:** Version bump only for package @nodejs-code-generator/client # [1.1.0](https://github.com/DhiWise/nodejs-code-generator/compare/v1.0.0...v1.1.0) (2022-01-11) ### Features * add confirmation popup when second time build application ([a7fe3c0](https://github.com/DhiWise/nodejs-code-generator/commit/a7fe3c001fab1972a8f2f151feb6deb18220c3e5)), closes [#20](https://github.com/DhiWise/nodejs-code-generator/issues/20) ================================================ FILE: packages/client/README.md ================================================ # Client This is a node code generator panel by using you can give input's and generate code. ## Run ##### `npm start` Open http://localhost:3000 to view it in the browser. ================================================ FILE: packages/client/babel-plugin-macros.config.js ================================================ module.exports = { twin: { config: 'tailwind.config.js', preset: 'styled-components', autoCssProp: true, dataTwProp: true, debugPlugins: false, debug: false, }, }; ================================================ FILE: packages/client/babel.config.json ================================================ { "presets": [ "@babel/preset-react", [ "@babel/env", { "targets": { "edge": "17", "firefox": "60", "chrome": "67", "safari": "11.1" }, "useBuiltIns": "usage", "corejs": "3.6.4" } ] ], "plugins": ["@babel/plugin-transform-react-jsx","@babel/plugin-proposal-class-properties"] } ================================================ FILE: packages/client/config-overrides.js ================================================ const rewireAliases = require('react-app-rewire-aliases'); const { paths } = require('react-app-rewired'); const path = require('path'); /* config-overrides.js */ module.exports = function override(config, env) { return rewireAliases.aliasesOptions({ '@assets': path.resolve(__dirname, `./${paths.appSrc}/assets`), '@constant': path.resolve(__dirname, `./${paths.appSrc}/constant/`), })(config, env); }; ================================================ FILE: packages/client/package.json ================================================ { "name": "@nodejs-code-generator/client", "version": "1.3.1", "private": true, "dependencies": { "@babel/parser": "^7.15.8", "@babel/traverse": "^7.15.4", "@dhiwise/icons": "^0.0.9", "@monaco-editor/react": "^4.0.7", "@reduxjs/toolkit": "^1.6.2", "@tailwindcss/postcss7-compat": "^2.2.17", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "array-move": "^3.0.1", "autoprefixer": "^10.3.7", "axios": "^0.23.0", "classnames": "^2.3.1", "copy-to-clipboard": "^3.3.1", "dayjs": "^1.10.7", "event-source-polyfill": "^1.0.25", "immutability-helper": "^3.1.1", "jsonlint": "git+https://github.com/DhiWise/jsonlint", "lodash": "^4.17.21", "memoize-one": "^6.0.0", "monaco-jsx-highlighter": "^1.1.8", "omit-deep-lodash": "^1.1.5", "pluralize": "^8.0.0", "postcss": "^8.3.9", "postcss-cli": "^9.0.1", "postcss-custom-properties": "^12.0.0", "postcss-import": "^14.0.2", "postcss-nested": "^5.0.6", "prop-types": "^15.7.2", "rc-drawer": "^4.4.2", "react": "^17.0.2", "react-app-rewire-aliases": "^0.2.0", "react-app-rewired": "^2.1.8", "react-awesome-query-builder": "^4.7.0", "react-content-loader": "^6.0.3", "react-datepicker": "^4.2.1", "react-dnd": "^10.0.2", "react-dnd-html5-backend": "^9.5.1", "react-dom": "^17.0.2", "react-dropdown-tree-select": "git+https://github.com/DhiWise/react-dropdown-tree-select", "react-helmet": "^6.1.0", "react-hook-form": "^6.15.4", "react-loadable": "^5.5.0", "react-lottie": "^1.2.3", "react-modal": "^3.14.3", "react-popover": "^0.5.10", "react-pro-sidebar": "^0.7.1", "react-redux": "^7.2.5", "react-router": "^5.2.1", "react-router-dom": "^5.3.0", "react-scripts": "4.0.3", "react-scrollbar": "^0.5.6", "react-select": "^5.1.0", "react-sortable-hoc": "^2.0.0", "react-table": "^7.7.0", "react-tabs": "^3.2.2", "react-tiny-popover": "^7.0.1", "react-toast-notifications": "^2.5.1", "react-tooltip": "^4.2.21", "react-virtualized-auto-sizer": "^1.0.6", "react-window": "^1.8.6", "react-window-infinite-loader": "^1.0.7", "recoil": "^0.4.1", "redux-persist": "^6.0.0", "redux-persist-transform-encrypt": "^3.0.1", "snake-case": "^3.0.4", "tailwindcss": "^2.2.17", "three": "^0.137.0", "use-onclickoutside": "^0.4.0", "web-vitals": "^1.1.2" }, "scripts": { "start": "npm run watch:css && react-app-rewired start", "build": "npm run watch:css && react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject", "fix:lint": "npx eslint --fix --ext .js src", "watch:css": "postcss src/assets/css/tailwind.css -o src/assets/css/main.css" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@babel/eslint-parser": "^7.15.8", "@babel/plugin-proposal-class-properties": "^7.14.5", "@babel/plugin-transform-react-jsx": "^7.14.9", "eslint": "^7.32.0", "eslint-config-airbnb": "^18.2.1", "eslint-import-resolver-alias": "^1.1.2", "eslint-plugin-import": "^2.22.2", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-react": "^7.26.1", "eslint-plugin-react-hooks": "^4.2.0" } } ================================================ FILE: packages/client/postcss.config.js ================================================ module.exports = { plugins: [ require('postcss-import'), require('tailwindcss'), require('postcss-nested'), require('postcss-custom-properties'), require('autoprefixer'), ], }; ================================================ FILE: packages/client/public/index.html ================================================ <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>DhiWise
================================================ FILE: packages/client/public/manifest.json ================================================ { "short_name": "React App", "name": "Create React App Sample", "icons": [ { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { "src": "logo192.png", "type": "image/png", "sizes": "192x192" }, { "src": "logo512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": ".", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" } ================================================ FILE: packages/client/public/robots.txt ================================================ # https://www.robotstxt.org/robotstxt.html User-agent: * Disallow: ================================================ FILE: packages/client/src/App.css ================================================ .App { text-align: center; } .App-logo { height: 40vmin; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; } } .App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white; } .App-link { color: #61dafb; } @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ================================================ FILE: packages/client/src/App.js ================================================ import React from 'react'; import { RecoilRoot } from 'recoil'; import { ToastProvider } from 'react-toast-notifications'; import { Provider } from 'react-redux'; import { PersistGate } from 'redux-persist/integration/react'; import { persistStore } from 'redux-persist'; import { BrowserRouter as Router, } from 'react-router-dom'; import store from './redux/store'; import Root from './config/Root'; const persistor = persistStore(store); function MainApp() { return ( ); } function App() { return ; } export default App; ================================================ FILE: packages/client/src/api/applicationConfig.js ================================================ import { apiClient } from './config'; import { API_URLS } from './constants'; export const createApplicationConfig = (payload) => apiClient(API_URLS.applicationConfig.create, payload); export const getApplicationConfig = (payload) => apiClient(API_URLS.applicationConfig.paginate, payload); export const updateApplicationConfig = (applicationConfigId, payload) => apiClient(`${API_URLS.applicationConfig.url}/${applicationConfigId}`, payload, 'PUT'); ================================================ FILE: packages/client/src/api/applicationConstant.js ================================================ import { apiClient } from './config'; import { API_URLS } from './constants'; // Application node Constant Services export const createConstant = (payload) => apiClient(API_URLS.constant.create, payload); export const updateConstant = (constantId, payload) => apiClient(`${API_URLS.constant.url}/${constantId}`, payload, 'PUT'); export const fetchConstant = (payload) => apiClient(API_URLS.constant.paginate, payload); export const deleteConstant = (payload) => apiClient(API_URLS.constant.delete, payload); ================================================ FILE: packages/client/src/api/applicationPolicy.js ================================================ import { apiClient } from './config'; import { API_URLS } from './constants'; // Application node Constant Services export const createPolicy = (payload) => apiClient(API_URLS.policy.create, payload); export const updatePolicy = (policyId, payload) => apiClient(`${API_URLS.policy.url}/${policyId}`, payload, 'PUT'); export const fetchPolicy = (payload) => apiClient(API_URLS.policy.paginate, payload); export const deletePolicy = (payload) => apiClient(API_URLS.policy.delete, payload); ================================================ FILE: packages/client/src/api/config.js ================================================ import axios from 'axios'; export const defaultAxios = axios.create({ headers: { 'Content-Type': 'application/json', 'Cache-Control': 'no-cache', Pragma: 'no-cache', Expires: '0', }, }); export function apiClient(url, data = {}, method = 'POST', header = {}, rest, options) { return new Promise((resolve, reject) => { const headers = { ...header, }; defaultAxios({ method, url, headers, data, ...rest, }).then((res) => { if (res?.data?.code === 'OK') { resolve(res?.data); } else if (options?.isHandleCatch) { resolve(res?.data); } else { let msg = res?.data?.message || res?.response?.data?.message; if (res?.data?.isAlert) { msg = { msg }; } if (res?.data?.data && options?.isHandleError) { msg = { msg, data: res?.data?.data }; } reject(msg); } }).catch((err) => { let msg = err?.response?.data?.message; // || 'Can\'t connect to server'; if (err?.response?.data?.isAlert) { msg = { msg }; } if (options?.isErrorResponse) { msg = err?.response?.data; } reject(msg); }); }); } ================================================ FILE: packages/client/src/api/constants.js ================================================ const projectServiceUrl = process?.env?.REACT_APP_PROJECT_SERVICE_URL; const version = 'web/v1'; export const API_URLS = { route: { url: `${projectServiceUrl}/${version}/project-route`, create: `${projectServiceUrl}/${version}/project-route/create`, paginate: `${projectServiceUrl}/${version}/project-route/paginate`, delete: `${projectServiceUrl}/${version}/project-route/destroy`, }, application: { create: `${projectServiceUrl}/${version}/application/create`, generate: `${projectServiceUrl}/${version}/application/generate`, edit: `${projectServiceUrl}/${version}/application`, openVsCode: `${projectServiceUrl}/${version}/application/open-generated-code`, lastAppRedirect: `${projectServiceUrl}/${version}/application/last-application`, destroy: `${projectServiceUrl}/${version}/application/destroy`, }, schema: { create: `${projectServiceUrl}/${version}/schema/create`, paginate: `${projectServiceUrl}/${version}/schema/paginate`, update: `${projectServiceUrl}/${version}/schema`, delete: `${projectServiceUrl}/${version}/schema/destroy`, get: `${projectServiceUrl}/${version}/schema/get`, multipleCreate: `${projectServiceUrl}/${version}/schema/insert-default-models`, }, schemaDetail: { paginate: `${projectServiceUrl}/${version}/schema-detail/paginate`, upsert: `${projectServiceUrl}/${version}/schema-detail/upsert`, }, constant: { url: `${projectServiceUrl}/${version}/project-constant`, create: `${projectServiceUrl}/${version}/project-constant/create`, paginate: `${projectServiceUrl}/${version}/project-constant/paginate`, delete: `${projectServiceUrl}/${version}/project-constant/destroy`, }, policy: { url: `${projectServiceUrl}/${version}/project-policy`, create: `${projectServiceUrl}/${version}/project-policy/create`, paginate: `${projectServiceUrl}/${version}/project-policy/paginate`, delete: `${projectServiceUrl}/${version}/project-policy/destroy`, }, applicationConfig: { url: `${projectServiceUrl}/${version}/application-config`, create: `${projectServiceUrl}/${version}/application-config/create`, paginate: `${projectServiceUrl}/${version}/application-config/paginate`, }, master: { getByCode: `${projectServiceUrl}/${version}/master/get-by-code`, }, envVariables: { get: `${projectServiceUrl}/${version}/env-variables/details`, upsert: `${projectServiceUrl}/${version}/env-variables/upsert`, }, projectRoleAccess: { url: `${projectServiceUrl}/${version}/project-role-access`, upsert: `${projectServiceUrl}/${version}/project-role-access/upsert`, paginate: `${projectServiceUrl}/${version}/project-role-access/paginate`, delete: `${projectServiceUrl}/${version}/project-role-access/destroy`, }, }; ================================================ FILE: packages/client/src/api/envVariable.js ================================================ import { apiClient } from '.'; import { API_URLS } from './constants'; export const getEnvs = (payload) => apiClient(API_URLS.envVariables.get, payload); export const upsertEnvs = (payload) => apiClient(API_URLS.envVariables.upsert, payload); ================================================ FILE: packages/client/src/api/index.js ================================================ import { apiClient } from './config'; import { API_URLS } from './constants'; export { apiClient, API_URLS }; ================================================ FILE: packages/client/src/api/master.js ================================================ import { apiClient } from './config'; import { API_URLS } from './constants'; export const fetchByCode = (payload) => apiClient(API_URLS.master.getByCode, payload); ================================================ FILE: packages/client/src/api/models.js ================================================ import { apiClient } from '.'; import { API_URLS } from './constants'; export const getModelPermissions = (payload) => apiClient(API_URLS.schemaDetail.paginate, payload); export const upsertModelPermissions = (payload) => apiClient(API_URLS.schemaDetail.upsert, payload); export const deleteModel = (payload) => apiClient(API_URLS.schema.delete, payload); export const createModel = (payload) => apiClient(API_URLS.schema.create, payload); export const updateModelApi = (payload, id) => apiClient(`${API_URLS.schema.update}/${id}`, payload, 'PUT'); // Library Model export const createMultipleModels = (payload) => apiClient(`${API_URLS.schema.multipleCreate}`, payload); // get specific Model Detail export const getModel = (id) => apiClient(`${API_URLS.schema.get}/${id}`, null, 'GET'); ================================================ FILE: packages/client/src/api/policy.js ================================================ import { apiClient } from '.'; import { API_URLS } from './constants'; export const createPolicy = (payload) => apiClient(API_URLS.policy.create, payload); export const updatePolicy = (policyId, payload) => apiClient(`${API_URLS.policy.url}/${policyId}`, payload, 'PUT'); export const getPolicies = (payload) => apiClient(API_URLS.policy.paginate, payload); export const deletePolicy = (payload) => apiClient(API_URLS.policy.delete, payload); ================================================ FILE: packages/client/src/api/project.js ================================================ /* eslint-disable implicit-arrow-linebreak */ import { apiClient } from './config'; import { API_URLS } from './constants'; export const createNewApplication = (appData) => apiClient(API_URLS.application.create, appData, 'POST', {}, {}, { isErrorResponse: true }); export const editApplication = (id, payload) => apiClient(`${API_URLS.application.edit}/${id}`, payload, 'PUT'); export const redirectApplication = () => apiClient(`${API_URLS.application.lastAppRedirect}`, {}, 'GET'); export const destroyApplication = (payload) => apiClient(`${API_URLS.application.destroy}`, payload); ================================================ FILE: packages/client/src/api/projectRoleAccess.js ================================================ import { apiClient } from './config'; import { API_URLS } from './constants'; export const getProjectRoleAccess = (payload) => apiClient(API_URLS.projectRoleAccess.paginate, payload); export const upsertProjectRoleAccess = (payload) => apiClient(API_URLS.projectRoleAccess.upsert, payload); export const deleteProjectRoleAccess = (payload) => apiClient(API_URLS.projectRoleAccess.delete, payload); ================================================ FILE: packages/client/src/api/routes.js ================================================ import { apiClient } from './config'; import { API_URLS } from './constants'; export const createNodeRoute = (payload) => apiClient(API_URLS.route.create, payload); export const updateNodeRoute = (routeId, payload) => apiClient(`${API_URLS.route.url}/${routeId}`, payload, 'PUT'); export const getModelRoutes = (payload) => apiClient(API_URLS.route.paginate, payload); export const deleteModelRoute = (payload) => apiClient(API_URLS.route.delete, payload); ================================================ FILE: packages/client/src/assets/css/Table.css ================================================ .custom-table table{ @apply w-full; } .custom-table table tbody{ /* box-shadow:0 0 0 2px var(--color-gray-200); */ border-radius: 5px; } .custom-table table tr td, .custom-table table tr th{ padding:0.6rem 0.5rem; font-size:14px; text-align: left; text-transform: inherit; } .custom-table table tr td{ border-top: 1px solid var(--color-gray-200); word-break: break-word; } .custom-table table tr th{ /* @apply uppercase; */ } .custom-table table tr{ /* box-shadow:0 0 0 1px var(--color-gray-200); */ } .custom-table table thead tr{ box-shadow: none; } .custom-table table tr:first-child{ border-radius:5px 5px 0 0; } .custom-table table tr:last-child{ border-radius:0 0 5px 5px; } .custom-table td{ min-width: min-content; } .codeTable table th, .codeTable table td{ min-width: 40px; /* max-width: 40px; */ /* width: 40px; */ } .react-json-view .requiredProperty svg,.react-json-view .uniqueProperty svg{ fill: green; } .subAtt .spark-checkbox-inner{ background-color: var(--color-gray-inputSub); border: 1px solid var(--color-gray-300); } .tableAuto{ overflow: auto; height: 100%; /* width: 1532px; */ scrollbar-width: thin; padding: 0 0 0 0; } /* .tableAuto .scrollarea{ width: 100%; height: calc(100vh - 207px); } .tableAuto .content{ min-width: 1532px; padding-right: 10px; overflow: visible; } */ .tableScroll{ min-width: min-content; padding: 0 0; overflow: auto; height:100% } .tableScroll .spark-checkbox-inner{ margin: 0; } .tableScroll td{ padding-right: 10px; } /* td { min-width: 250px; width: 250px; } */ .modelPermissionTable .permissionTableList{ width: 26rem; min-width: 26rem; max-width: 26rem; } .modelPermissionLeft{ min-width: 250px; width: 250px; max-width: 250px; } .envTable td{ min-width: 250px; } .envTable .tableInputSelect{ width: 100%; } table{ width: 100%; } .viewAttributeTable tr td:first-child{ min-width: 60%; width: 60%; } .viewAttributeTable tr td:last-child{ min-width: 40%; width: 40%; } .tableInputSelect{ width: 8em; min-width: 8rem; } .smallInput{ width: 7em; min-width: 7rem; } .tableCheck{ width: 3em; min-width: 3rem; } /* table component */ .dhiTable{ overflow: auto; } .dhiTable tr th{ padding-top: 0.3rem; padding-bottom: 0.3rem; font-size: 14px; color: var(--color-text-primary); font-weight: 400; background-color: var(--color-gray-200); } .dhiTable tr td{ padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 14px; color: var(--color-text-primary); font-weight: 400; /* text-align: center; */ border-top:1px solid var(--color-gray-200); } .onlyReadView tr td{ border-top: none; border-bottom:1px solid var(--color-gray-350); border-right:1px solid var(--color-gray-350); } .dhiTable tr td, .dhiTable tr th{ padding-left: 0.5rem; padding-right: 0.5rem; white-space: nowrap; width: auto; } .firstColTable tr td:first-child, .firstColTable tr th:first-child{ width: 80px; min-width: 80px; max-width: 80px; } .dhiTable thead tr:first-child th{ position: sticky; top: 0; z-index: 1; } .dhiTable tr .subRow tr:first-child th{ position: relative; z-index: 0; } /* .dhiTable.leftSpace tr th:nth-child(2), .dhiTable.leftSpace tr td:nth-child(2){ padding-left:54px; } */ /* sub row */ .subRow{ padding: 10px 1.25rem 10px 1.25rem !important; border-top: none !important; } .subRow tr, .subRow td{ background: var(--color-gray-200); text-align: left; } .subRow td { /* border-top: none; */ padding-top: 0.2rem !important; padding-bottom: 0.2rem !important; font-size: 0.875rem !important; } .onlyReadView .subRow td{ /* padding-top: 0.2rem !important; padding-bottom: 0.2rem !important; */ padding: 0.5rem !important; border: 1px solid var(--color-gray-100) !important; border-top: none !important; border-right: none !important; text-align: left; } .onlyReadView .subRow td:first-child{ border-left: none !important; } /* .onlyReadView .subRow{ border-right: none !important; } */ .onlyReadView .subRow th{ border-bottom: 1px solid var(--color-gray-100); } .onlyReadView thead{ position: sticky; top: 0; z-index: 1; } .subRow tr:first-child td{ padding-top: 10px !important; } .subRow tr:last-child td{ padding-bottom: 10px !important; } .firstColTable tr td.subRow td:first-child, .firstColTable tr td.subRow th:first-child{ width: 60px; min-width: 60px; max-width: 60px; } .reactTable thead:before{ content: ""; width: 100%; height: 36px; position: fixed; left: 0; background: var(--color-gray-200); } ================================================ FILE: packages/client/src/assets/css/Table1.css ================================================ .dhiTable_second thead th{ text-transform: uppercase; font-size: 14px; font-weight: bold; padding: 9px 10px; } .dhiTable_second tbody tr{ box-shadow: 5px 0px 19px -5px var(--color-gray-100); background-color: var(--color-gray-black); } .dhiTable_second td{ padding: 6px 10px; font-size: 14px; } ================================================ FILE: packages/client/src/assets/css/animation.css ================================================ .checkAnimation{ animation: zoom 0.75s; } @keyframes zoom { 0% { transform: scale(0); } 5% { transform: scale(0.25); } 12% { transform: scale(0.50); } 100% { transform: scale(1); } } .animationIcon{ animation: rotating 1.5s infinite; } @keyframes rotating { 0% { transform: scale(0.5); } 10% { transform: scale(0.9); } 50% { transform: scale(1); } 100% { transform: scale(1); } } @keyframes showAnimate { 0% { transform: scale(0.5); } 10% { transform: scale(0.9); } 50% { transform: scale(1); } 100% { transform: scale(1); } } /* animation projectt svg */ .projectnotFoundImg svg path:nth-child(2) { stroke: var(--color--black-svg); stroke-width: 0.5; } .nodDataFound svg g path { fill: var(--color--black-svg); stroke: var(--color--black-svg); } .nodDataFound svg g>g:nth-child(3) g path { fill: var(--color-bg-secondary); } ================================================ FILE: packages/client/src/assets/css/components/components.css ================================================ @import "../../../components/Checkbox/checkbox.css"; @import "../../../components/DatePicker/datepicker.css"; @import "../../../components/SelectTree/selectTreeCss.css"; @import "../Table.css"; @import "../Table1.css"; @import "../scroll.css"; @import "../dropdown.css"; @import "../popover.css"; @import "../logo.css"; @import "../tooltip.css"; @import "../editor.css"; @import "../notification.css"; @import "../method.css"; ================================================ FILE: packages/client/src/assets/css/components/style.css ================================================ @import "../tailwind.css"; @font-face { font-family: 'circular'; src: url("../../fonts/circular/CustomFont-Book.woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'circular'; src: url("../../fonts/circular/CustomFont-Medium.woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'circular'; src: url("../../fonts/circular/CustomFont-Bold.woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'circular'; src: url("../../fonts/circular/CustomFont-Black.woff2"); font-weight: 700; font-style: normal; font-display: swap; } body { @apply min-h-screen tracking-normal; font-family: "circular"; font-weight: 400; /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */ color: var(--color-text-primary); background-color: var(--color-gray-black); } .display-webkit { display: -webkit-box; } .react-tel-input { font-family: inherit !important; } .spacing-dw1 { padding: 0.10rem 0.5rem !important; } .shadows-dw { box-shadow: rgba(0, 0, 0, 0.06) 0px 8px 16px 0px; } .shadows-dw1 { box-shadow: rgba(0, 0, 0, 0.08) 4px -3px 13px 0px; } .shadow-keyboard{ box-shadow:0 -1px 0 var(--gray-200, #525252) inset; } /* Popup */ .ReactModal__Body--open .dhiwise_body, .tox-dialog__disable-scroll .dhiwise_body, .ReactModal__Body--open .fullScreen .drawer { filter: blur(5px); transition: fillter 0.3s; } .min-h-64 { min-height: 16rem; } .min-h-auto{ min-height:auto !important; } .border-b-1 { border-bottom-width: 1px; } .colorChangeSvg .a { fill: #fff; } .ReactModal__Body--open { overflow: hidden; } .bg-transparent { background-color: transparent !important; } .top-49 { top: 49px; } /* toggle */ .toggleBox:last-child { border-right: none; } /* select */ .spark-select svg { fill: var(--color--black-svg) !important; } .bg-opacity-80 { background: rgba(0, 0, 0, 0.8); } .ReactModalPortal .ReactModal__Overlay { z-index: 999999 !important; background: rgba(0, 0 ,0 ,0.73); } .ReactModalPortal .ReactModal__Overlay.backPopup{ z-index: 9999 !important; } .groupSelect { margin: 0 -18px; } /* buildDropdown */ .buildDropdown { position: fixed !important; /* bottom: 30px; left: 50px !important; right: auto !important; */ overflow: visible !important; } .position-div.menuBottom{ /* position: fixed !important; */ bottom: 30px; left: 50px !important; right: auto !important; min-width: 200px !important; } /* accordin */ [aria-expanded="false"] .uparrow { display: none; } [aria-expanded="true"] .downarrow { display: none; } /* header */ .headerAccountDropdown { padding: 0 !important; min-width: 327px !important; } @media(max-width:767px){ .position-div.right.headerAccountDropdown{ min-width: 290px !important; width:290px; right: -10px !important; } } .schemaDropdown{ min-width: 200px !important; } /* project */ .projectListDropdown{ min-width: 220px !important; } .projectAppGroup:hover .projectAppList, .projectGroup:hover .projectList{ display: flex; } .projectAppGroup:first-child{ border-top: none; } /* space */ .-right-100 { right: -100%; } .min-h-body { min-height: calc(100vh - 48px); } .notifyMesseg .min-h-body { min-height: calc(100vh - 84px); } /* drawer size */ .drawerSize { width: 690px; } .gadient { background: linear-gradient(to top, black, transparent); } /* folder select */ .codeFolderListDisable .rstm-tree-item{ cursor: not-allowed; } .rstm-tree-item--active { background-color: var(--color-bg-primary); } .rstm-tree-item--active .defultSelect, .activeSelect { display: none; } .rstm-tree-item--active .activeSelect, .defultSelect { display: block; } .leftFolder .rstm-tree-item--active svg { fill: #fff !important; } .leftFolder .rstm-tree-item .tagLabelBox { width: 100%; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; } .leftFolder .tagGroup { width: 100%; } .rstm-tree-item { width: 100%; padding-top: .15rem; padding-bottom: .15rem; border: 1px solid transparent; display: flex; } .rstm-tree-item--focused { border: 1px solid var(--color-bg-primary) !important; } /* desciption doted */ .descriptionDoted { max-height: 48px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.625; overflow: hidden; display: -webkit-box; } /* input autofill */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus { border: 1px solid var(--color-gray-70); -webkit-text-fill-color: var(--color-text-primary); -webkit-box-shadow: 0 0 0px 1000px var(--color-gray-input) inset; transition: background-color 5000s ease-in-out 0s; } .fillnone{ fill: none !important; } .word-break{ word-break: break-word; } .min-w-40{ min-width: 10rem; } .min-w-32{ min-width: 8rem; } /* Input */ input::-webkit-calendar-picker-indicator { display: none; } input{ caret-color: var(--color-text-primary); } .max-w-48{ max-width: 12rem; } .lifeCycleAction .lifeCycleActionList:first-child, .firstBorderNone .listClass:first-child{ border-top: none; } /* group hover */ .groupBox:hover .groupItem{ display: block; } .imgHoverGroup:hover .imgHover{ display: block; } .imgHoverGroup:hover .imgDefault{ display: none; } .primaryShadow:focus{ box-shadow: 0 0 0 3px rgb(0 97 255 / 40%); } .dangerShadow:focus{ box-shadow: 0 0 0 3px rgba(var(--color-button-danger), 40%); } .ghostShadow:focus{ /* box-shadow: 0 0 0 3px rgba(var(--color-button-ghost), 40%); */ box-shadow: 0 0 0 3px rgba(var(--color-button-secondary), 40%); } .outlineShadow:focus{ box-shadow: 0 0 0 3px rgb(var(--color-button-outline), 40%); } .secondaryShadow:focus{ box-shadow: 0 0 0 3px rgba(var(--color-button-secondary), 40%); } .groupBox:hover .imgClass{ transform: scale(1.7); } .screenFilter .position-div{ min-width: 320px !important; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } .z-100{ z-index: 100 !important; } @media(max-width:767px){ .memberDropdown{ min-width: 290px !important; width: 290px; } } .react-select__indicator{ padding: 6px !important; } .shadows-box{ box-shadow: 0 0 20px 6px rgba(var(--color-black-100), 58%); } ================================================ FILE: packages/client/src/assets/css/drawer.css ================================================ .drawer { position: fixed; z-index: 100000; transition: width 0s ease 0.3s, height 0s ease 0.3s, transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); } .drawer > * { transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), box-shadow 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); } .drawer.drawer-open { transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); } .drawer .drawer-mask { background: #000; opacity: 0; width: 100%; height: 0; position: absolute; top: 0; left: 0; transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), height 0s ease 0.3s; } .drawer-content-wrapper { position: absolute; background: var(--color-gray-black); } .drawer-content { overflow: auto; z-index: 1; position: relative; } .drawer-handle { position: absolute; top: 72px; width: 41px; height: 40px; cursor: pointer; z-index: 0; text-align: center; line-height: 40px; font-size: 16px; display: flex; justify-content: center; align-items: center; background: #fff; } .drawer-handle-icon { width: 14px; height: 2px; background: #333; position: relative; transition: background 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); } .drawer-handle-icon:before, .drawer-handle-icon:after { content: ''; display: block; position: absolute; background: #333; width: 100%; height: 2px; transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); } .drawer-handle-icon:before { top: -5px; } .drawer-handle-icon:after { top: 5px; } .drawer-left, .drawer-right { width: 0%; height: 100%; } .drawer-left .drawer-content, .drawer-right .drawer-content{ display: flex; flex-direction: column; } .drawer-left .drawer-content-wrapper, .drawer-right .drawer-content-wrapper, .drawer-left .drawer-content, .drawer-right .drawer-content { height: 100%; } .drawer-left.drawer-open, .drawer-right.drawer-open { width: 100%; } .drawer-left.drawer-open.no-mask, .drawer-right.drawer-open.no-mask { width: 0%; } .drawer-left { top: 0; left: 0; } .drawer-left .drawer-handle { right: -40px; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); border-radius: 0 4px 4px 0; } .drawer-left.drawer-open .drawer-content-wrapper { box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); } .drawer-right { top: 0; right: 0; } .drawer-right .drawer-content-wrapper { right: 0; } .drawer-right .drawer-handle { left: -40px; box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); border-radius: 4px 0 0 4px; } .drawer-right.drawer-open .drawer-content-wrapper { box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); } .drawer-right.drawer-open.no-mask { right: 1px; transform: translateX(1px); } .drawer-top, .drawer-bottom { width: 100%; height: 0%; } .drawer-top .drawer-content-wrapper, .drawer-bottom .drawer-content-wrapper, .drawer-top .drawer-content, .drawer-bottom .drawer-content { width: 100%; } .drawer-top .drawer-content, .drawer-bottom .drawer-content { height: 100%; } .drawer-top.drawer-open, .drawer-bottom.drawer-open { height: 100%; } .drawer-top.drawer-open.no-mask, .drawer-bottom.drawer-open.no-mask { height: 0%; } .drawer-top .drawer-handle, .drawer-bottom .drawer-handle { left: 50%; margin-left: -20px; } .drawer-top { top: 0; left: 0; } .drawer-top .drawer-handle { top: auto; bottom: -40px; /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); */ border-radius: 0 0 4px 4px; } .drawer-top.drawer-open .drawer-content-wrapper { /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); */ } .drawer-bottom { bottom: 0; left: 0; } .drawer-bottom .drawer-content-wrapper { bottom: 0; } .drawer-bottom .drawer-handle { top: -40px; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15); border-radius: 4px 4px 0 0; } .drawer-bottom.drawer-open .drawer-content-wrapper { box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15); } .drawer-bottom.drawer-open.no-mask { bottom: 1px; transform: translateY(1px); } .drawer.drawer-open .drawer-mask { opacity: .73; height: 100%; transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); } .drawer.drawer-open .drawer-handle-icon { background: transparent; } .drawer.drawer-open .drawer-handle-icon:before { transform: translateY(5px) rotate(45deg); } .drawer.drawer-open .drawer-handle-icon:after { transform: translateY(-5px) rotate(-45deg); } .drawer-content-wrapper{ width: 690px; } .drawer-right .drawer-content-wrapper{ border-left: 1px solid var(--color-gray-100); } .drawer-left .drawer-content-wrapper{ border-right: 1px solid var(--color-gray-100); } .fullScreen .drawer-content-wrapper{ width: 100%; border: none; } .smallSidebar .drawer-content-wrapper{ width: 520px; } @media (max-width:767px) { .mobileDrawer .drawer-content-wrapper{ width: 300px; } .mobileDrawer2 .drawer-content-wrapper{ width: 90%; } } .drawer-bottom .drawer-mask{ display: none; } .drawer-bottom .drawer-content{ box-shadow: rgb(0 0 0 / 8%) 4px -3px 13px 0px; border: 1px solid var(--color-gray-100); background-color: var(--color-gray-black); } .ant-scrolling-effect .dhiwise_body{ filter: blur(5px); transition: fillter 0.3s; } ================================================ FILE: packages/client/src/assets/css/dropdown.css ================================================ .dropdown-menu:hover { background-color: #0061ff; color: #fff; } .dropdown-menu:hover svg { fill: #fff; } .dropdown-min{ min-width: min-content !important; } .border-primary-light { border-color: #e9f1ff; } .primary-gray-text-color { color: var(--color-text-primary); } .show { display: block !important; } .position-div.right { right: 0 !important; left: auto !important; } .position-div.left { left: 0 !important; right: auto !important; } .position-div { background: var(--color-bg-white) !important; border: 1px solid var(--color-gray-90); border-radius: 0 0 5px 5px; /* box-shadow: none !important; */ box-shadow: rgba(0, 0, 0, 0.06) 0px 8px 16px 0px !important; } ================================================ FILE: packages/client/src/assets/css/editor.css ================================================ .monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input { background-color: var(--color-gray-black) !important; } .monaco-editor .margin { background-color: var(--color-gray-black) !important; } .mtk4, .mtk9, .mtk1 { color: var(--color-gray-white) !important; } .mtk5 { color: var(--color-bg-secondary) !important; } .readonlyEditor .monaco-editor .view-lines { cursor: not-allowed !important; } .readonlyEditor .monaco-editor .selected-text { background-color: transparent !important; } .readonlyEditor .monaco-mouse-cursor-text { cursor: no-drop !important; background: transparent !important; border: none !important; color: transparent !important; } .smallEditor .margin-view-overlays{ display: none; } .kCxsfG{ padding: 12px !important; background-color: var(--color-gray-200) !important; } .copyPestCode pre, .copyPestCode code{ font-size: 14px; } .htmlDescription a{ color: var(--color-text-dark); margin: 0 4px; display: inline-block; } .copyEditor button .icon{ display: none; } @media(max-width:1280px){ .copyPestCode pre, .copyPestCode code{ font-size: 12px; } } ================================================ FILE: packages/client/src/assets/css/logo.css ================================================ .themeLogo .c, .themeLogo .st2 { fill: var(--color--black-svg); } .themeLogo .a, .themeLogo .st0 { fill: var(--color--secondry-svg); } .themeLogo .b, .themeLogo .st1 { fill: var(--color--theme-svg); } .themeSmallLogo .cls-1, .themeSmallLogo .cls-4 { fill: none; } .themeSmallLogo .cls-2 { clip-path: url(#clip-path); } .themeSmallLogo .cls-3 { opacity: 0.5; } .themeSmallLogo .cls-4 { stroke: #e0e0e0; stroke-miterlimit: 10; } .themeSmallLogo .cls-5 { fill: var(--color--secondry-svg); } .themeSmallLogo .cls-6 { fill: var(--color--theme-svg); } .themeWhiteLogo .cls-1 { fill: var(--color--black-svg); } ================================================ FILE: packages/client/src/assets/css/main.css ================================================ ================================================ FILE: packages/client/src/assets/css/method.css ================================================ /* methodList */ .methodList { border: 1px solid var(--color-bg-active); color: var(--color-bg-active); border-radius: var(--border-radius); padding: 0.1rem 0.1rem; font-size: 12px; line-height: 20px; } .methodList.put { border: 1px solid var(--color-bg-yellow); color: var(--color-bg-yellow); } .methodList.post { border: 1px solid var(--color-bg-active); color: var(--color-bg-active); } .methodList.delete { border: 1px solid var(--color-bg-deactive); color: var(--color-bg-deactive); } .methodList.get { border: 1px solid var(--color-bg-gray); color: var(--color-bg-gray); } .methodList.patch { border: 1px solid var(--color-bg-blue); color: var(--color-bg-blue); } .methodList.head { border: 1px solid var(--color-bg-orange); color: var(--color-bg-orange); } .methodList.options { border: 1px solid var(--color-bg-pink); color: var(--color-bg-pink); } .methodList.purge { border: 1px solid var(--color-bg-lightGreen); color: var(--color-bg-lightGreen); } .methodList.link { border: 1px solid var(--color-bg-lightblue); color: var(--color-bg-lightblue); } .methodList.unlink { border: 1px solid var(--color-bg-lightorange); color: var(--color-bg-lightorange); } /* node dashboard */ .nodeManageOperation{ } @media (max-width:1379px){ .menuShortCut:nth-last-child(4){ border-bottom: 1px solid var(--color-gray-200); } } /* app tag */ .application-NODE_EXPRESS{ background-color: rgba(var(--color-node-app),25%); color: rgba(var(--color-node-app),100%); border: none; } ================================================ FILE: packages/client/src/assets/css/notification.css ================================================ /* notification */ .react-toast-notifications__container { z-index: 1000000 !important; } .react-toast-notifications__toast.react-toast-notifications__toast--error .react-toast-notifications__toast__icon-wrapper { background-color: transparent; color: var(--color-bg-deactive); display: flex; align-items: center; justify-content: center; } .react-toast-notifications__toast.react-toast-notifications__toast--error { background: var(--color-bg-redlight); border-left: 3px solid var(--color-bg-deactive); color: var(--color-message); box-shadow: none; align-items: center; border-radius: var(--border-radius); } .react-toast-notifications__toast.react-toast-notifications__toast--error .react-toast-notifications__toast__content { line-height: normal; min-height: max-content; font-weight: 600; } .react-toast-notifications__toast__dismiss-button { display: flex; } .react-toast-notifications__toast__dismiss-button svg { fill: var(--color-message) !important; } ================================================ FILE: packages/client/src/assets/css/popover.css ================================================ .popupCustom { z-index: 100000000; } .popupCustom .Popover-body{ /* background-color: var(--color-bg-popover); */ background: var(--color-bg-white) !important; border: 1px solid var(--color-gray-90); border-radius: 0 0 5px 5px; box-shadow: rgb(0 0 0 / 6%) 0px 8px 16px 0px !important; padding: 20px; } .Popover-tip { fill: var(--color-bg-white); } .popoverArrow:before { content: ""; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #0061ff; position: absolute; bottom: -11px; left: 0; right: 0; margin: auto; } .popoverArrow-top { /* content: ""; */ width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #0061ff; position: absolute; bottom: -11px; left: 0; right: 0; margin: auto; } ================================================ FILE: packages/client/src/assets/css/popoverCss.js ================================================ export const PopoverCss = { popoverWrap: ' relative p-3 bg-popover shadows-dw rounded z-1000000', }; ================================================ FILE: packages/client/src/assets/css/scroll.css ================================================ /* scroll */ ::-webkit-scrollbar { width: 4px; height: 4px; background: transparent; } /* Track */ ::-webkit-scrollbar-track { background: transparent; } /* Handle */ ::-webkit-scrollbar-thumb { background: var(--color-gray-20); border-radius: 10px; } .contatinerBox { max-width: 1300px; } .scrollbar-container.vertical, .scrollbar-container.horizontal { background: transparent !important; opacity: 1 !important; } .scrollarea .scrollbar-container.vertical .scrollbar, .scrollarea .scrollbar-container.horizontal .scrollbar { background-color: var(--color-gray-0) !important; opacity: 0.3; } .scrollbar-container.vertical .scrollbar, .scrollbar-container.vertical { width: 4px !important; margin-left: 0 !important; border-radius: 10px; } .scrollbar-container.horizontal .scrollbar, .scrollbar-container.horizontal { height: 4px !important; margin-top: 0 !important; border-radius: 10px; } ================================================ FILE: packages/client/src/assets/css/sidebar.css ================================================ @import "./tailwind.css"; .pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu > .pro-inner-item > .pro-arrow-wrapper .pro-arrow{ border-color: var(--color-bg-black) !important; } .pro-sidebar{ width: 100% !important; min-width: 100% !important; } .pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item:hover, .pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item:focus{ color:var(--color-text-primary) } .pro-sidebar .pro-menu a:before{ content: none !important; } .sidebar-dropdown{ position: fixed !important; left: auto !important; } .theme-sidenav .pro-sidebar{ width: var(--sidebar-width); min-width: var(--sidebar-width); z-index: 0; } .theme-sidenav{ width: var(--sidebar-width); } .theme-sidenav .pro-sidebar .pro-menu{ padding: 0; } .theme-sidenav .pro-sidebar { height: var(--sidebar-height); position: sticky; top: 49px; z-index: 10000; } .theme-sidenav .pro-sidebar .pro-sidebar-inner{ /* border-right: 1px solid var(--color-gray-100); */ background-color: var(--color-gray-200); } .theme-sidenav .pro-item-content{ color:var(--color-text-primary); font-weight: 600; } .theme-sidenav .pro-inner-item{ font-size: 14px; display: flex; align-items: center; padding:12px 2px !important; /* margin-bottom: 5px; */ } .theme-sidenav .pro-inner-item:hover .pro-item-content{ color: var(--color-text-primary); } .theme-sidenav .pro-sidebar .pro-menu.shaped .pro-menu-item > .pro-inner-item > .pro-icon-wrapper{ background-color: transparent; width: auto; height: auto; min-width: min-content; /* position: absolute; left: 8px; */ display: block !important; } .theme-sidenav .pro-sidebar .pro-menu.shaped .pro-menu-item.open > .pro-inner-item > .pro-icon-wrapper{ transform: rotate(90deg); -webkit-transform: rotate(90deg); } .theme-sidenav .pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu > .pro-inner-item > .pro-arrow-wrapper{ display: none; } .theme-sidenav .pro-sidebar .pro-menu > ul > .pro-sub-menu > .pro-inner-list-item{ background-color: transparent; } .theme-sidenav .pro-sidebar .pro-menu > ul > .pro-sub-menu > .pro-inner-list-item ul{ padding:0 !important; } .theme-sidenav .pro-sidebar .pro-menu > ul > .pro-sub-menu > .pro-inner-list-item ul li{ list-style: none; } .theme-sidenav .pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-inner-item{ padding: 5px; padding-left: 35px; } .theme-sidenav .pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item .react-slidedown .pro-inner-item{ padding-left: 45px; } .theme-sidenav .pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item .react-slidedown .pro-menu-item .react-slidedown .pro-inner-item{ padding-left: 60px; } .theme-sidenav .pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-inner-item:before{ content: none; width: auto; border: none; box-shadow: none; height: auto; margin-right: 6px; color: #111827; background-color: transparent; } .theme-sidenav .pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item{ padding: 0; overflow: hidden; } .theme-sidenav .pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-menu-item{ padding-left:0; } .theme-sidenav .pro-icon-wrapper{ margin-right:8px; } .theme-sidenav .pro-sidebar > .pro-sidebar-inner > .pro-sidebar-layout, .theme-sidenav .pro-sidebar .scrollarea-content{ overflow: visible; } .sidebar-Box{ width: var(--sidebar-width); min-width: var(--sidebar-width); height: 100%; /* height: var(--sidebar-height) !important; */ } /* permission list */ .permission-list .pro-sidebar{ width: 100% !important; } .permission-list .pro-arrow-wrapper{ /* left: 0;right: auto !important; */ display: none; } .permission-list .pro-sidebar-inner{ background-color: var(--color-bg-light); } .permission-list .pro-inner-item{ color: var(--color-text-primary); } .permission-list .pro-sidebar .pro-menu, .permission-list .pro-sidebar > .pro-sidebar-inner > .pro-sidebar-layout ul{ padding: 0 !important; } .permission-list .pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-inner-item:before{ content: none; } .permission-list .pro-sidebar .pro-menu > ul > .pro-sub-menu > .pro-inner-list-item{ background-color: transparent; } .permission-list .pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-inner-item > .pro-icon-wrapper{ display: block; width: auto; height: auto; min-width: 16px; } .permission-list .pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-inner-item{ padding: 0 !important; } .permission-list .pro-menu-item.open > .pro-inner-item > .pro-icon-wrapper{ transform: rotate(90deg); } .permissionSub:last-child{ border-bottom: none; } .permission-list .pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item:hover{ color: var(--color-text-primary); } /* constant */ .sidebar-list.pro-sidebar{ width: 100%; min-width: 100%; height: 100%; } .sidebar-list .pro-sidebar-inner{ background-color: var(--color-gray-300) !important; border-right:1px solid var(--color-gray-100); height: 100%; } .sidebar-list.pro-sidebar .pro-menu > ul > .pro-sub-menu > .pro-inner-list-item{ background-color: transparent; } .sidebar-list.pro-sidebar .pro-menu > ul > .pro-sub-menu > .pro-inner-list-item ul{ padding: 0; } /* .sidebar-list.pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-inner-item:before{ content: none; } */ .sidebar-list.pro-sidebar .pro-menu .pro-menu-item.sidebarDropdown > .pro-inner-item{ padding: 8px 20px 8px 35px; } .sidebar-list.pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item .pro-inner-item:before{ display: none; } .sidebar-list.pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu .pro-inner-list-item{ padding: 0; } .sidebar-list.pro-sidebar .pro-menu .pro-menu-item.pro-sub-menu > .pro-inner-item > .pro-arrow-wrapper{ left: 10px; right: auto; } .sidebar-list.pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item > .pro-item-content{ display: block; } .sidebar-list.pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item{ padding:4px 8px; } .screenFeature.pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item{ padding:0; } .screenFeature.sidebar-list .pro-sidebar-inner{ border-right: 1px solid var(--color-gray-200); } /* Project */ .project-sidebar .pro-icon-wrapper{display: none !important;} .project-sidebar .pro-arrow-wrapper{ position: absolute; left: 11px; top: 4px !important; bottom: 0; margin: auto; right: auto !important; transform: translate(0,0) !important; } .project-sidebar .pro-item-content{ color:var(--color-text-primary); font-size: 16px; } .project-sidebar .pro-menu-item .pro-inner-item{ padding: 8px 30px !important; } .project-sidebar .pro-inner-list-item{ padding: 0 !important; } .project-sidebar .pro-inner-list-item ul{ padding: 0 !important; } .project-sidebar.pro-sidebar .pro-menu > ul > .pro-sub-menu > .pro-inner-list-item{ background-color: transparent !important; } .project-sidebar.pro-sidebar > .pro-sidebar-inner{ background-color: var(--color-gray-300); border-right: 1px solid var(--color-gray-100); } /* profile */ .profile-sidebar{ width: var(--profile-sidebar-width); } .profile-sidebar .pro-sidebar-inner{ border-right: 1px solid var(--color-gray-200) !important; background-color: var(--color-bg-light) !important; } /* } */ .layoutStep .pro-sidebar > .pro-sidebar-inner{ background-color: transparent; } .layoutStep .pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item > .pro-item-content{ white-space: normal; } .layoutStep .pro-sidebar .pro-menu .pro-menu-item > .pro-inner-item{ padding: 8px 10px 8px 10px; } /* model */ .modelList .pro-sidebar > .pro-sidebar-inner > .pro-sidebar-layout{ overflow: visible; } /* suToggle */ .smallToggle{ width: calc(100% - 3rem); } ================================================ FILE: packages/client/src/assets/css/tab.js ================================================ export const TabCSs = { tabHead: 'border-b border-gray-100 bg-transparent flex', tabHeadBody: 'bg-gray-300', tabTitle: 'border-0 text-gray-600 pt-3 pb-2 pl-4 pr-4 cursor-pointer focus:outline-none text-primary-text text-sm', tabSmallTitle: 'border-0 text-gray-600 pt-2 pb-2 pl-4 pr-4 text-xs cursor-pointer focus:outline-none text-primary-text', selectTab: 'font-bold text-primary-text border-b-2 border-primary-dark', tabVerList: '', tabVerHead: 'h-full border-r border-gray-100 bg-gray-300', tabVerTitle: 'border-b border-gray-100 text-gray-600 px-3 py-2.5 text-xs cursor-pointer focus:outline-none text-primary-text flex items-center', tabVerTitle1: 'text-gray-600 px-3 py-2.5 text-xs cursor-pointer focus:outline-none text-primary-text flex items-center', tabVerTitleSmall: 'border-b border-gray-100 text-gray-600 px-1 py-1 text-xxs cursor-pointer focus:outline-none text-primary-text flex items-center', tabVerselectTab: 'font-bold text-defaultWhite bg-primary-dark', tabVerSelectTab1: 'border-l-2 border-primary-dark bg-gray-100', tabverTitleName: 'truncate block font-normal', TabStepSelect: 'bg-primary-dark', TabStepList: '', TabStepListItem: 'w-8 h-8 rounded-full flex items-center justify-center bg-gray-200 cursor-pointer m-auto relative', }; ================================================ FILE: packages/client/src/assets/css/tableViewCss.js ================================================ export const TableViewCss = { // grid grid-cols-10 // grid grid-cols-10 gap-4 tableHead: 'pl-10 text-sm items-center py-1.5 px-0 sticky top-0 z-10 bg-gray-200 px-3', tableRow: 'pl-10', tableSequence: 'absolute w-3 h-3 left-3 opacity-70 cursor-move top-2.5 m-auto', tableCollapse: 'absolute w-3 h-3 z-1 left-14 cursor-pointer top-2.5 m-auto', tableClose: 'w-3.5 h-3.5 flex items-center cursor-pointer absolute left-8 top-2.5 m-auto z-1', addValue: 'text-xs ml-1 text-gray-white flex underline items-center cursor-pointer labelGroup focus:outline-none focus:text-primary-dark', tableCheckBox: 'flex', subTable: 'subAtt mx-5 px-2 mt-4 bg-gray-200 p-2', subTableRow: 'pl-5 group relative', subTableClose: 'w-4 h-4 cursor-pointer absolute left-5 top-3.5 m-auto z-10', subTableCheckBox: 'flex', }; ================================================ FILE: packages/client/src/assets/css/tailwind.css ================================================ @import "tailwindcss/base"; @import "tailwindcss/components"; @import "./components/components.css"; @import "tailwindcss/utilities"; .theme-black { --color-bg-primary: #0061ff; --color-blue-10:#d2e1fd; --color-blue-100:#082452; --color-bg-primary-light: #f0f6ff; --color-bg-secondary: #FF800D; --color-secondary-90:#803d00; --color-secondary-70: #D26400; --color-bg-default-light: #232323; --color-bg-inverse: #0F72FE; --color-blue-10: #ebf2ff; --color-bg-light: #232323; --color-bg-softlight: #f5f9ff; --color-bg-white: #313131; --color-bg-black:#fafafa; --color-bg-popover:#232323; --color-bg-headerSearch:#3e3e3e; --color-bg-greenLight:#28462f; /* --color-bg-redstatus:#7b292d; */ --color-bg-body:#0e0e0e; --color-bg-active:#009E25; --color-bg-deactive:#FF340D; --color-bg-redlight:#fff1f1; --color-bg-gray:#828282; --color-bg-yellow:#f0bf15; --color-bg-blue:#4589ff; --color-bg-orange:#FF800D; --color-bg-pink:#fd5bec; --color-bg-lightGreen:#5cfdcd; --color-bg-lightblue:#7a87ff; --color-bg-lightorange:#ff9c2a; --color-node-app:83,158,67; --color-placeholder-primary: #b2b2b2; --color-placeholder-gray: #818385; --color-black-100: 0,0,0; --color-notfound-bg:#262626; --color-gray-black: #0e0e0e; --color-gray-300:#131313; --color-gray-350: #1b1b1b; --color-gray-200:#232323; --color-gray-100:#313131; --color-gray-90: #3e3e3e; --color-gray-80: #313131; /*sidebar Bottom*/ --color-gray-70: #424242; --color-gray-60: #525252; --color-gray-50: #646464; --color-gray-40: #7e7e7e; --color-gray-30: #828282; --color-gray-20: #959595; --color-gray-10: #b2b2b2; --color-gray-0: #F1F1F1; --color-gray-input:#3e3e3e; --color-gray-inputSub:#131313; --color-select-dropdown:#3e3e3e; --color-code-button:#424242; --color-button-outline:66,66,66; --color-button-secondary:35,35,35; --color-button-danger:255,52,13; --color-button-ghost:190,214,255; --color-gray-white: #ffffff; --color-gray-checkbox: #282828; --color-border-default-light:#232323; --color-button-text:#ffffff; --color-outline-button-text:#ffffff; --color-dashedbutton-text:#ffffff; --color-dashedbutton-text:#ffffff; --color-button-outline-border:#ffffff; --color-text-primary: #fff; --color-text-dark:#0F72FE; --color-text-white: #232323; --color-text-secondary:#f3f3f3; --color-text-body:#bababa; /* //dcdcdc */ --color-text-error:#FF340D; --color-message:#232323; --color--black-svg: #fafafa; --color--white-svg: #232323; --color--theme-svg: #fff; --color--secondry-svg: #fff; --color-active-text:#fff; --color-deactive-text:#fff; --box-shadow-primary:1px 0px 16px 0px rgba(0 ,97, 255 , 0.26); --box-shadow:rgba(0, 0, 0, 0.06) 0px 8px 16px 0px; --font-theme-DW1: 600; --border-radius:3px; --sidebar-width:55px; --profile-sidebar-width:230px; --sidebar-height:calc(100vh - 48px); --font-famliy:'circular'; --font-title-famliy:'circular'; } .theme-white { --color-bg-primary: #0061ff; --color-blue-10:#d2e1fd; --color-blue-100:#082452; --color-bg-primary-light: #f0f6ff; --color-bg-secondary: #FF800D; --color-secondary-90:#803d00; --color-secondary-70: #D26400; --color-bg-default-light: #f5f9ff; --color-bg-inverse: #f0f6ff; --color-blue-10: #ebf2ff; --color-bg-light: #fafafa; --color-bg-softlight: #f5f9ff; --color-bg-white: #fff; --color-bg-black:#232323; --color-bg-popover:#fff; --color-bg-headerSearch:#fff; --color-bg-greenLight:#c7eacf; /* --color-bg-redstatus:#f4bec1; */ --color-bg-body:#ffffff; --color-bg-active:#009E25; --color-bg-deactive:#FF340D; --color-bg-redlight:#fff1f1; --color-bg-gray:#828282; --color-bg-yellow:#cca10c; --color-bg-blue:#4589ff; --color-bg-orange:#FF800D; --color-bg-pink:#fd5bec; --color-bg-lightGreen:#2fb78e; --color-bg-lightblue:#999bb3; --color-bg-lightorange:#ff9c2a; --color-node-app:83,158,67; --color-placeholder-primary: #787878; --color-placeholder-gray: #a1a1a1; --color-black-100: 211,211,211; --color-notfound-bg:#fff; --color-gray-black: #ffffff; --color-gray-300:#f8f8f8; --color-gray-350: #f7f7f7; --color-gray-200:#efefef; --color-gray-100:#e9e9e9; --color-gray-90: #e9e9e9; --color-gray-80: #dcdcdc; --color-gray-70: #8D8D8D; --color-gray-60: #787878; --color-gray-50: #646464; --color-gray-40: #525252; --color-gray-30: #5c5c5c; --color-gray-20: #4D4D4D; --color-gray-10: #282828; --color-gray-0: #232323; --color-gray-white: #1D1D1D; --color-gray-input:#fff; --color-gray-inputSub:#fff; --color-select-dropdown:#fff; --color-code-button:#b3b3b3; --color-button-outline:141,141,141; --color-button-secondary:239,239,239; --color-button-danger:255,52,13; --color-button-ghost:190,214,255; --color-gray-checkbox: #dcdcdc; --color-border-default-light:#0061ff; --color-button-text:#ffffff; --color-outline-button-text:#0061ff; --color-dashedbutton-text:#0061ff; --color-dashedbutton-text:#0061ff; --color-button-outline-border:#0061ff; --color-text-primary: #232323; --color-text-dark:#0061ff; --color-text-white: #fff; --color-text-secondary:#3e3e3e; --color-text-body:#000000; --color-text-error:#FF340D; --color-active-text:#fff; --color-deactive-text:#fff; --color--black-svg: #232323; --color--white-svg: #fafafa; --color--theme-svg: #0061ff; --color--secondry-svg: #ff800d; --box-shadow-primary:1px 0px 16px 0px rgba(0 ,97, 255 , 0.09); --box-shadow:rgba(0, 0, 0, 0.06) 0px 8px 16px 0px; --font-theme-DW1: 600; --border-radius:3px; --sidebar-width:55px; --profile-sidebar-width:230px; --sidebar-height:calc(100vh - 48px); --font-famliy:'circular'; --font-title-famliy:'circular'; } .notifyMesseg { --sidebar-height:calc(100vh - 84px); } ================================================ FILE: packages/client/src/assets/css/tooltip.css ================================================ .__react_component_tooltip { background-color: var(--color-bg-black) !important; color: var(--color-bg-light) !important; font-weight: 600; z-index: 10000 !important; font-size: 14px !important; } .__react_component_tooltip.place-right:after { border-right-color: var(--color-bg-black) !important; } .__react_component_tooltip.place-left:after { border-left-color: var(--color-bg-black) !important; } .__react_component_tooltip.place-bottom:after { border-bottom-color: var(--color-bg-black) !important; } .__react_component_tooltip.place-top:after { border-top-color: var(--color-bg-black) !important; } ================================================ FILE: packages/client/src/components/APIKeyValue/index.js ================================================ /* eslint-disable radix */ /* eslint-disable react/jsx-props-no-spreading */ import React from 'react'; import { useSelector } from 'react-redux'; import { isEmpty, toLower } from 'lodash'; import { Icons } from '@dhiwise/icons'; import { Input } from '../Input'; import { Select } from '../Select'; import { DeleteIcon } from '../IconBox/DeleteIcon'; import { Checkbox } from '../Checkbox'; import { useBoolean } from '../hooks'; import { ConfirmationAlert } from '../ConfirmAlert'; import { TYPE_OPTIONS } from '../../constant/envVariable'; import { nodeKeyRegex } from '../../utils/regex'; import { APPLICATION_CODE } from '../../constant/Project/applicationStep'; import { MAX_INPUT_FIELD_LIMIT } from '../../constant/common'; export const ValueComponent = ({ type, ...other }) => { // customOptions name different it issue boolean const options = other.customOptions ?? [];// constant for data type const dataType = toLower(type); if (dataType && toLower(options?.STRING) === dataType) return ; if (dataType && toLower(options?.LONG) === dataType) { return ( other?.onChange(parseInt(val))} fixLength={10} /> ); } if (dataType && [toLower(options?.FLOAT), toLower(options?.DOUBLE)].includes(dataType)) { return ( other?.onChange(Number(val))} fixLength={20} /> ); } if (dataType && toLower(options?.INTEGER) === dataType) { return ( other?.onChange(parseInt(val))} fixLength={10} /> ); } if (dataType && toLower(options?.BOOLEAN) === dataType) { return (
; }; const TableWrap = ({ children, className, inTableView }) => (inTableView ? {children} : children); export const APIKeyValue = ({ isDelete, isTypeSelect, isValue, isCheckBox, isAutoSuggest, typeProps = {}, checkboxProps = {}, APIValue, envVariable, tableView, inputProps = {}, valueProps = {}, deleteProps = {}, autoSuggestProps = {}, inTableView = true, }) => { const applicationCode = useSelector((state) => state.projects.currentApplicationCode); const [isOpenDelete, showDelete, hideDelete] = useBoolean(false); const valueRef = React.useRef(null); const WrapCheckbox = (otherProps) => ; return ( <> {isDelete && ( } tooltip="Delete" className={`absolute m-auto ${tableView ? 'left-0 top-4' : 'left-0 top-2'}`} onClick={showDelete} /> )} {isCheckBox && }
{ isAutoSuggest && !isEmpty(inputProps?.value) && ( {autoSuggestProps?.list?.map((option) => ( option.startsWith(inputProps?.value) && ( ) ))} ) } { isTypeSelect && (
{(!!children || !!label) && {children || label}}
); }, ); Checkbox.displayName = 'Checkbox'; Checkbox.propTypes = { checked: propTypes.bool, disabled: propTypes.bool, className: propTypes.string, onChange: propTypes.func, prefixCls: propTypes.string, wrapperClassname: propTypes.string, defaultChecked: propTypes.bool, }; Checkbox.defaultProps = { checked: true, }; ================================================ FILE: packages/client/src/components/CodeEditor/index.js ================================================ /* eslint-disable no-nested-ternary */ import React from 'react'; import { Icons } from '@dhiwise/icons'; import Editor from '@monaco-editor/react'; import { isEmpty } from 'lodash'; import { useBoolean } from '../hooks'; import { Error } from '../Error'; import { EXTENSION_TYPE } from '../../constant/fileTypeConstant'; let monacoJSXHighlighter = null; export const CodeEditor = React.memo(({ value = '', readOnly = false, onChange = () => { }, onValidate = () => { }, isShowError = false, // For showing Error language = 'json', style = {}, height = '100%', width, defaultValue = '{}', className, onBlur, repairedJson, setRepairedJson, imageShow = false, imageSource = false, fileType = EXTENSION_TYPE.TEXT, loading, scrollbar, }) => { const [isError, setShowError, setHideError] = useBoolean(false); const [jsonError, setJsonError] = React.useState(false); // eslint-disable-next-line no-unused-vars const [internalValue, setInternalValue] = React.useState(); React.useEffect(() => { setInternalValue(value); }, [value]); React.useEffect(() => { if (repairedJson && repairedJson !== '{}') { setInternalValue(repairedJson); setRepairedJson?.('{}'); } }, [repairedJson]); async function handleEditorDidMount(monacoEditor, monaco) { // monaco-jsx-highlighter depends on these (and monaco) const { default: traverse } = await import('@babel/traverse'); const { parse } = await import('@babel/parser'); // The star of the show =P const { default: MonacoJSXHighlighter, JSXTypes } = await import( 'monaco-jsx-highlighter' ); // Customize Babel directly const babelParse = (code) => parse(code, { sourceType: 'module', plugins: ['jsx'] }); // Instantiate the highlighter monacoJSXHighlighter = new MonacoJSXHighlighter( monaco, babelParse, traverse, monacoEditor, ); // Start the JSX highlighting and get the dispose function monacoJSXHighlighter.highLightOnDidChangeModelContent(); // Enhance monaco's editor.action.commentLine with JSX commenting and get its disposer monacoJSXHighlighter.addJSXCommentCommand(); // You are all set. // Optional: customize the color font in JSX texts (style class JSXElement.JSXText.tastyPizza from ./index.css) JSXTypes.JSXText.options.inlineClassName = 'JSXElement.JSXText.tastyPizza'; // More of this example's boilerplate monacoJSXHighlighter.highLightOnDidChangeModelContent(); monacoJSXHighlighter.addJSXCommentCommand(); } return (
{ // to stop copy paste if (readOnly) { e.preventDefault(); } }} style={style} > {(imageShow && imageSource && fileType === EXTENSION_TYPE.IMAGE) ?
: fileType === EXTENSION_TYPE.DEFAULT ? (
The file is not displayed in the editor because it is either binary or uses an unsupported text encoding.
) : ( { try { setJsonError(false); setHideError(); setInternalValue(changeCode); onChange(changeCode); } catch (error) { // To catch on Change error line by line setShowError(); setJsonError(error); } } : (changeCode) => { setInternalValue(changeCode); onChange(changeCode); }} options={{ readOnly, contextmenu: !readOnly, scrollbar }} value={internalValue} onValidate={isShowError ? (errors) => { if (isEmpty(errors)) { // errors contains array of error objects message setHideError(); setJsonError(false); } } : onValidate} // eslint-disable-next-line react/jsx-no-bind onMount={handleEditorDidMount} loading={loading} /> )} { isShowError && isError ? : null }
); }); CodeEditor.displayName = 'CodeEditor'; ================================================ FILE: packages/client/src/components/CodeEditor/reactTypes.js ================================================ export default ` import * as CSS from 'csstype'; import * as PropTypes from 'prop-types'; type NativeAnimationEvent = AnimationEvent; type NativeClipboardEvent = ClipboardEvent; type NativeCompositionEvent = CompositionEvent; type NativeDragEvent = DragEvent; type NativeFocusEvent = FocusEvent; type NativeKeyboardEvent = KeyboardEvent; type NativeMouseEvent = MouseEvent; type NativeTouchEvent = TouchEvent; type NativePointerEvent = PointerEvent; type NativeTransitionEvent = TransitionEvent; type NativeUIEvent = UIEvent; type NativeWheelEvent = WheelEvent; type Booleanish = boolean | 'true' | 'false'; /** * defined in scheduler/tracing */ interface SchedulerInteraction { id: number; name: string; timestamp: number; } // tslint:disable-next-line:export-just-namespace export = React; export as namespace React; declare namespace React { // // React Elements // ---------------------------------------------------------------------- type ElementType

= { [K in keyof JSX.IntrinsicElements]: P extends JSX.IntrinsicElements[K] ? K : never }[keyof JSX.IntrinsicElements] | ComponentType

; type ReactType

= ElementType

; type ComponentType

= ComponentClass

| FunctionComponent

; type JSXElementConstructor

= | ((props: P) => ReactElement | null) | (new (props: P) => Component); interface RefObject { readonly current: T | null; } type RefCallback = { bivarianceHack(instance: T | null): void }["bivarianceHack"]; type Ref = RefCallback | RefObject | null; type LegacyRef = string | Ref; type ElementRef< C extends | ForwardRefExoticComponent | { new (props: any): Component } | ((props: any, context?: any) => ReactElement | null) | keyof JSX.IntrinsicElements > = "ref" extends keyof ComponentPropsWithRef ? NonNullable["ref"]> extends Ref< infer Instance > ? Instance : never : never; type ComponentState = any; type Key = string | number; /** * @internal You shouldn't need to use this type since you never see these attributes * inside your component or have to validate them. */ interface Attributes { key?: Key; } interface RefAttributes extends Attributes { ref?: Ref; } interface ClassAttributes extends Attributes { ref?: LegacyRef; } interface ReactElement

= string | JSXElementConstructor> { type: T; props: P; key: Key | null; } interface ReactComponentElement< T extends keyof JSX.IntrinsicElements | JSXElementConstructor, P = Pick, Exclude, 'key' | 'ref'>> > extends ReactElement> { } type SFCElement

= FunctionComponentElement

; interface FunctionComponentElement

extends ReactElement> { ref?: 'ref' extends keyof P ? P extends { ref?: infer R } ? R : never : never; } type CElement> = ComponentElement; interface ComponentElement> extends ReactElement> { ref?: LegacyRef; } type ClassicElement

= CElement>; // string fallback for custom web-components interface DOMElement

| SVGAttributes, T extends Element> extends ReactElement { ref: LegacyRef; } // ReactHTML for ReactHTMLElement // tslint:disable-next-line:no-empty-interface interface ReactHTMLElement extends DetailedReactHTMLElement, T> { } interface DetailedReactHTMLElement

, T extends HTMLElement> extends DOMElement { type: keyof ReactHTML; } // ReactSVG for ReactSVGElement interface ReactSVGElement extends DOMElement, SVGElement> { type: keyof ReactSVG; } interface ReactPortal extends ReactElement { key: Key | null; children: ReactNode; } // // Factories // ---------------------------------------------------------------------- type Factory

= (props?: Attributes & P, ...children: ReactNode[]) => ReactElement

; type SFCFactory

= FunctionComponentFactory

; type FunctionComponentFactory

= (props?: Attributes & P, ...children: ReactNode[]) => FunctionComponentElement

; type ComponentFactory> = (props?: ClassAttributes & P, ...children: ReactNode[]) => CElement; type CFactory> = ComponentFactory; type ClassicFactory

= CFactory>; type DOMFactory

, T extends Element> = (props?: ClassAttributes & P | null, ...children: ReactNode[]) => DOMElement; // tslint:disable-next-line:no-empty-interface interface HTMLFactory extends DetailedHTMLFactory, T> {} interface DetailedHTMLFactory

, T extends HTMLElement> extends DOMFactory { (props?: ClassAttributes & P | null, ...children: ReactNode[]): DetailedReactHTMLElement; } interface SVGFactory extends DOMFactory, SVGElement> { (props?: ClassAttributes & SVGAttributes | null, ...children: ReactNode[]): ReactSVGElement; } // // React Nodes // http://facebook.github.io/react/docs/glossary.html // ---------------------------------------------------------------------- type ReactText = string | number; type ReactChild = ReactElement | ReactText; interface ReactNodeArray extends Array {} type ReactFragment = {} | ReactNodeArray; type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined; // // Top Level API // ---------------------------------------------------------------------- // DOM Elements function createFactory( type: keyof ReactHTML): HTMLFactory; function createFactory( type: keyof ReactSVG): SVGFactory; function createFactory

, T extends Element>( type: string): DOMFactory; // Custom components function createFactory

(type: FunctionComponent

): FunctionComponentFactory

; function createFactory

( type: ClassType, ClassicComponentClass

>): CFactory>; function createFactory, C extends ComponentClass

>( type: ClassType): CFactory; function createFactory

(type: ComponentClass

): Factory

; // DOM Elements function createElement( type: "input", props?: InputHTMLAttributes & ClassAttributes | null, ...children: ReactNode[]): DetailedReactHTMLElement, HTMLInputElement>; function createElement

, T extends HTMLElement>( type: keyof ReactHTML, props?: ClassAttributes & P | null, ...children: ReactNode[]): DetailedReactHTMLElement; function createElement

, T extends SVGElement>( type: keyof ReactSVG, props?: ClassAttributes & P | null, ...children: ReactNode[]): ReactSVGElement; function createElement

, T extends Element>( type: string, props?: ClassAttributes & P | null, ...children: ReactNode[]): DOMElement; // Custom components function createElement

( type: FunctionComponent

, props?: Attributes & P | null, ...children: ReactNode[]): FunctionComponentElement

; function createElement

( type: ClassType, ClassicComponentClass

>, props?: ClassAttributes> & P | null, ...children: ReactNode[]): CElement>; function createElement

, C extends ComponentClass

>( type: ClassType, props?: ClassAttributes & P | null, ...children: ReactNode[]): CElement; function createElement

( type: FunctionComponent

| ComponentClass

| string, props?: Attributes & P | null, ...children: ReactNode[]): ReactElement

; // DOM Elements // ReactHTMLElement function cloneElement

, T extends HTMLElement>( element: DetailedReactHTMLElement, props?: P, ...children: ReactNode[]): DetailedReactHTMLElement; // ReactHTMLElement, less specific function cloneElement

, T extends HTMLElement>( element: ReactHTMLElement, props?: P, ...children: ReactNode[]): ReactHTMLElement; // SVGElement function cloneElement

, T extends SVGElement>( element: ReactSVGElement, props?: P, ...children: ReactNode[]): ReactSVGElement; // DOM Element (has to be the last, because type checking stops at first overload that fits) function cloneElement

, T extends Element>( element: DOMElement, props?: DOMAttributes & P, ...children: ReactNode[]): DOMElement; // Custom components function cloneElement

( element: FunctionComponentElement

, props?: Partial

& Attributes, ...children: ReactNode[]): FunctionComponentElement

; function cloneElement>( element: CElement, props?: Partial

& ClassAttributes, ...children: ReactNode[]): CElement; function cloneElement

( element: ReactElement

, props?: Partial

& Attributes, ...children: ReactNode[]): ReactElement

; // Context via RenderProps interface ProviderProps { value: T; children?: ReactNode; } interface ConsumerProps { children: (value: T) => ReactNode; } // TODO: similar to how Fragment is actually a symbol, the values returned from createContext, // forwardRef and memo are actually objects that are treated specially by the renderer; see: // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/ReactContext.js#L35-L48 // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/forwardRef.js#L42-L45 // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/memo.js#L27-L31 // However, we have no way of telling the JSX parser that it's a JSX element type or its props other than // by pretending to be a normal component. // // We don't just use ComponentType or SFC types because you are not supposed to attach statics to this // object, but rather to the original function. interface ExoticComponent

{ /** * **NOTE**: Exotic components are not callable. */ (props: P): (ReactElement|null); readonly $$typeof: symbol; } interface NamedExoticComponent

extends ExoticComponent

{ displayName?: string; } interface ProviderExoticComponent

extends ExoticComponent

{ propTypes?: WeakValidationMap

; } type ContextType> = C extends Context ? T : never; // NOTE: only the Context object itself can get a displayName // https://github.com/facebook/react-devtools/blob/e0b854e4c/backend/attachRendererFiber.js#L310-L325 type Provider = ProviderExoticComponent>; type Consumer = ExoticComponent>; interface Context { Provider: Provider; Consumer: Consumer; displayName?: string; } function createContext( // If you thought this should be optional, see // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213106 defaultValue: T, ): Context; function isValidElement

(object: {} | null | undefined): object is ReactElement

; const Children: ReactChildren; const Fragment: ExoticComponent<{ children?: ReactNode }>; const StrictMode: ExoticComponent<{ children?: ReactNode }>; interface SuspenseProps { children?: ReactNode; /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */ fallback: NonNullable|null; } /** * This feature is not yet available for server-side rendering. * Suspense support will be added in a later release. */ const Suspense: ExoticComponent; const version: string; /** * {@link https://github.com/bvaughn/rfcs/blob/profiler/text/0000-profiler.md#detailed-design | API} */ type ProfilerOnRenderCallback = ( id: string, phase: "mount" | "update", actualDuration: number, baseDuration: number, startTime: number, commitTime: number, interactions: Set, ) => void; interface ProfilerProps { children?: ReactNode; id: string; onRender: ProfilerOnRenderCallback; } const Profiler: ExoticComponent; // // Component API // ---------------------------------------------------------------------- type ReactInstance = Component | Element; // Base component for plain JS classes // tslint:disable-next-line:no-empty-interface interface Component

extends ComponentLifecycle { } class Component { static contextType?: Context; context: any; constructor(props: Readonly

); /** * @deprecated * @see https://reactjs.org/docs/legacy-context.html */ constructor(props: P, context?: any); setState( state: ((prevState: Readonly, props: Readonly

) => (Pick | S | null)) | (Pick | S | null), callback?: () => void ): void; forceUpdate(callback?: () => void): void; render(): ReactNode; readonly props: Readonly

& Readonly<{ children?: ReactNode }>; state: Readonly; /** * @deprecated * https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs */ refs: { [key: string]: ReactInstance }; } class PureComponent

extends Component { } interface ClassicComponent

extends Component { replaceState(nextState: S, callback?: () => void): void; isMounted(): boolean; getInitialState?(): S; } interface ChildContextProvider { getChildContext(): CC; } // // Class Interfaces // ---------------------------------------------------------------------- type SFC

= FunctionComponent

; type StatelessComponent

= FunctionComponent

; type FC

= FunctionComponent

; interface FunctionComponent

{ (props: PropsWithChildren

, context?: any): ReactElement | null; propTypes?: WeakValidationMap

; contextTypes?: ValidationMap; defaultProps?: Partial

; displayName?: string; } interface ForwardRefRenderFunction { (props: PropsWithChildren

, ref: ((instance: T | null) => void) | MutableRefObject | null): ReactElement | null; displayName?: string; /** * defaultProps are not supported on render functions */ defaultProps?: never; /** * propTypes are not supported on render functions */ propTypes?: never; } /** * @deprecated Use ForwardRefRenderFunction. forwardRef doesn't accept a * "real" component. */ interface RefForwardingComponent extends ForwardRefRenderFunction {} interface ComponentClass

extends StaticLifecycle { new (props: P, context?: any): Component; propTypes?: WeakValidationMap

; contextType?: Context; contextTypes?: ValidationMap; childContextTypes?: ValidationMap; defaultProps?: Partial

; displayName?: string; } interface ClassicComponentClass

extends ComponentClass

{ new (props: P, context?: any): ClassicComponent; getDefaultProps?(): P; } /** * We use an intersection type to infer multiple type parameters from * a single argument, which is useful for many top-level API defs. * See https://github.com/Microsoft/TypeScript/issues/7234 for more info. */ type ClassType, C extends ComponentClass

> = C & (new (props: P, context?: any) => T); // // Component Specs and Lifecycle // ---------------------------------------------------------------------- interface ComponentLifecycle extends NewLifecycle, DeprecatedLifecycle { /** * Called immediately after a component is mounted. Setting state here will trigger re-rendering. */ componentDidMount?(): void; shouldComponentUpdate?(nextProps: Readonly

, nextState: Readonly, nextContext: any): boolean; componentWillUnmount?(): void; /** * Catches exceptions generated in descendant components. Unhandled exceptions will cause * the entire component tree to unmount. */ componentDidCatch?(error: Error, errorInfo: ErrorInfo): void; } // Unfortunately, we have no way of declaring that the component constructor must implement this interface StaticLifecycle { getDerivedStateFromProps?: GetDerivedStateFromProps; getDerivedStateFromError?: GetDerivedStateFromError; } type GetDerivedStateFromProps = /** * Returns an update to a component's state based on its new props and old state. * * Note: its presence prevents any of the deprecated lifecycle methods from being invoked */ (nextProps: Readonly

, prevState: S) => Partial | null; type GetDerivedStateFromError = /** * This lifecycle is invoked after an error has been thrown by a descendant component. * It receives the error that was thrown as a parameter and should return a value to update state. * * Note: its presence prevents any of the deprecated lifecycle methods from being invoked */ (error: any) => Partial | null; // This should be "infer SS" but can't use it yet interface NewLifecycle { getSnapshotBeforeUpdate?(prevProps: Readonly

, prevState: Readonly): SS | null; /** * Called immediately after updating occurs. Not called for the initial render. * * The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null. */ componentDidUpdate?(prevProps: Readonly

, prevState: Readonly, snapshot?: SS): void; } interface DeprecatedLifecycle { componentWillMount?(): void; UNSAFE_componentWillMount?(): void; componentWillReceiveProps?(nextProps: Readonly

, nextContext: any): void; UNSAFE_componentWillReceiveProps?(nextProps: Readonly

, nextContext: any): void; componentWillUpdate?(nextProps: Readonly

, nextState: Readonly, nextContext: any): void; UNSAFE_componentWillUpdate?(nextProps: Readonly

, nextState: Readonly, nextContext: any): void; } interface Mixin extends ComponentLifecycle { mixins?: Array>; statics?: { [key: string]: any; }; displayName?: string; propTypes?: ValidationMap; contextTypes?: ValidationMap; childContextTypes?: ValidationMap; getDefaultProps?(): P; getInitialState?(): S; } interface ComponentSpec extends Mixin { render(): ReactNode; [propertyName: string]: any; } function createRef(): RefObject; interface ForwardRefExoticComponent

extends NamedExoticComponent

{ defaultProps?: Partial

; propTypes?: WeakValidationMap

; } function forwardRef(render: ForwardRefRenderFunction): ForwardRefExoticComponent & RefAttributes>; /** Ensures that the props do not include ref at all */ type PropsWithoutRef

= // Just Pick would be sufficient for this, but I'm trying to avoid unnecessary mapping over union types // https://github.com/Microsoft/TypeScript/issues/28339 'ref' extends keyof P ? Pick> : P; /** Ensures that the props do not include string ref, which cannot be forwarded */ type PropsWithRef

= // Just "P extends { ref?: infer R }" looks sufficient, but R will infer as {} if P is {}. 'ref' extends keyof P ? P extends { ref?: infer R } ? string extends R ? PropsWithoutRef

& { ref?: Exclude } : P : P : P; type PropsWithChildren

= P & { children?: ReactNode }; /** * NOTE: prefer ComponentPropsWithRef, if the ref is forwarded, * or ComponentPropsWithoutRef when refs are not supported. */ type ComponentProps> = T extends JSXElementConstructor ? P : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : {}; type ComponentPropsWithRef = T extends ComponentClass ? PropsWithoutRef

& RefAttributes> : PropsWithRef>; type ComponentPropsWithoutRef = PropsWithoutRef>; type MemoExoticComponent> = NamedExoticComponent> & { readonly type: T; }; function memo

( Component: SFC

, propsAreEqual?: (prevProps: Readonly>, nextProps: Readonly>) => boolean ): NamedExoticComponent

; function memo>( Component: T, propsAreEqual?: (prevProps: Readonly>, nextProps: Readonly>) => boolean ): MemoExoticComponent; type LazyExoticComponent> = ExoticComponent> & { readonly _result: T; }; function lazy>( factory: () => Promise<{ default: T }> ): LazyExoticComponent; // // React Hooks // ---------------------------------------------------------------------- // based on the code in https://github.com/facebook/react/pull/13968 // Unlike the class component setState, the updates are not allowed to be partial type SetStateAction = S | ((prevState: S) => S); // this technically does accept a second argument, but it's already under a deprecation warning // and it's not even released so probably better to not define it. type Dispatch = (value: A) => void; // Since action _can_ be undefined, dispatch may be called without any parameters. type DispatchWithoutAction = () => void; // Unlike redux, the actions _can_ be anything type Reducer = (prevState: S, action: A) => S; // If useReducer accepts a reducer without action, dispatch may be called without any parameters. type ReducerWithoutAction = (prevState: S) => S; // types used to try and prevent the compiler from reducing S // to a supertype common with the second argument to useReducer() type ReducerState> = R extends Reducer ? S : never; type ReducerAction> = R extends Reducer ? A : never; // The identity check is done with the SameValue algorithm (Object.is), which is stricter than === type ReducerStateWithoutAction> = R extends ReducerWithoutAction ? S : never; // TODO (TypeScript 3.0): ReadonlyArray type DependencyList = ReadonlyArray; // NOTE: callbacks are _only_ allowed to return either void, or a destructor. // The destructor is itself only allowed to return void. type EffectCallback = () => (void | (() => void | undefined)); interface MutableRefObject { current: T; } // This will technically work if you give a Consumer or Provider but it's deprecated and warns function useContext(context: Context/*, (not public API) observedBits?: number|boolean */): T; /** * Returns a stateful value, and a function to update it. * * @version 16.8.0 * @see https://reactjs.org/docs/hooks-reference.html#usestate */ function useState(initialState: S | (() => S)): [S, Dispatch>]; // convenience overload when first argument is ommitted /** * Returns a stateful value, and a function to update it. * * @version 16.8.0 * @see https://reactjs.org/docs/hooks-reference.html#usestate */ function useState(): [S | undefined, Dispatch>]; // overload where dispatch could accept 0 arguments. function useReducer, I>( reducer: R, initializerArg: I, initializer: (arg: I) => ReducerStateWithoutAction ): [ReducerStateWithoutAction, DispatchWithoutAction]; // overload where dispatch could accept 0 arguments. function useReducer>( reducer: R, initializerArg: ReducerStateWithoutAction, initializer?: undefined ): [ReducerStateWithoutAction, DispatchWithoutAction]; // overload where "I" may be a subset of ReducerState; used to provide autocompletion. // If "I" matches ReducerState exactly then the last overload will allow initializer to be ommitted. // the last overload effectively behaves as if the identity function (x => x) is the initializer. function useReducer, I>( reducer: R, initializerArg: I & ReducerState, initializer: (arg: I & ReducerState) => ReducerState ): [ReducerState, Dispatch>]; // overload for free "I"; all goes as long as initializer converts it into "ReducerState". function useReducer, I>( reducer: R, initializerArg: I, initializer: (arg: I) => ReducerState ): [ReducerState, Dispatch>]; // I'm not sure if I keep this 2-ary or if I make it (2,3)-ary; it's currently (2,3)-ary. // The Flow types do have an overload for 3-ary invocation with undefined initializer. // NOTE: without the ReducerState indirection, TypeScript would reduce S to be the most common // supertype between the reducer's return type and the initialState (or the initializer's return type), // which would prevent autocompletion from ever working. // TODO: double-check if this weird overload logic is necessary. It is possible it's either a bug // in older versions, or a regression in newer versions of the typescript completion service. function useReducer>( reducer: R, initialState: ReducerState, initializer?: undefined ): [ReducerState, Dispatch>]; // TODO (TypeScript 3.0): function useRef(initialValue: T): MutableRefObject; // convenience overload for refs given as a ref prop as they typically start with a null value // TODO (TypeScript 3.0): function useRef(initialValue: T|null): RefObject; // convenience overload for potentially undefined initialValue / call with 0 arguments // has a default to stop it from defaulting to {} instead // TODO (TypeScript 3.0): function useRef(): MutableRefObject; function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void; /** * Accepts a function that contains imperative, possibly effectful code. * * @param effect Imperative function that can return a cleanup function * @param deps If present, effect will only activate if the values in the list change. * * @version 16.8.0 * @see https://reactjs.org/docs/hooks-reference.html#useeffect */ function useEffect(effect: EffectCallback, deps?: DependencyList): void; // NOTE: this does not accept strings, but this will have to be fixed by removing strings from type Ref function useImperativeHandle(ref: Ref|undefined, init: () => R, deps?: DependencyList): void; // I made 'inputs' required here and in useMemo as there's no point to memoizing without the memoization key // useCallback(X) is identical to just using X, useMemo(() => Y) is identical to just using Y. // TODO (TypeScript 3.0): unknown> function useCallback any>(callback: T, deps: DependencyList): T; // allow undefined, but don't make it optional as that is very likely a mistake function useMemo(factory: () => T, deps: DependencyList | undefined): T; // the name of the custom hook is itself derived from the function name at runtime: // it's just the function name without the "use" prefix. function useDebugValue(value: T, format?: (value: T) => any): void; // // Event System // ---------------------------------------------------------------------- // TODO: change any to unknown when moving to TS v3 interface BaseSyntheticEvent { nativeEvent: E; currentTarget: C; target: T; bubbles: boolean; cancelable: boolean; defaultPrevented: boolean; eventPhase: number; isTrusted: boolean; preventDefault(): void; isDefaultPrevented(): boolean; stopPropagation(): void; isPropagationStopped(): boolean; persist(): void; timeStamp: number; type: string; } interface SyntheticEvent extends BaseSyntheticEvent {} interface ClipboardEvent extends SyntheticEvent { clipboardData: DataTransfer; } interface CompositionEvent extends SyntheticEvent { data: string; } interface DragEvent extends MouseEvent { dataTransfer: DataTransfer; } interface PointerEvent extends MouseEvent { pointerId: number; pressure: number; tangentialPressure: number; tiltX: number; tiltY: number; twist: number; width: number; height: number; pointerType: 'mouse' | 'pen' | 'touch'; isPrimary: boolean; } interface FocusEvent extends SyntheticEvent { relatedTarget: EventTarget | null; target: EventTarget & T; } // tslint:disable-next-line:no-empty-interface interface FormEvent extends SyntheticEvent { } interface InvalidEvent extends SyntheticEvent { target: EventTarget & T; } interface ChangeEvent extends SyntheticEvent { target: EventTarget & T; } interface KeyboardEvent extends SyntheticEvent { altKey: boolean; charCode: number; ctrlKey: boolean; /** * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method. */ getModifierState(key: string): boolean; /** * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values */ key: string; keyCode: number; locale: string; location: number; metaKey: boolean; repeat: boolean; shiftKey: boolean; /** @deprecated */ which: number; } interface MouseEvent extends UIEvent { altKey: boolean; button: number; buttons: number; clientX: number; clientY: number; ctrlKey: boolean; /** * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method. */ getModifierState(key: string): boolean; metaKey: boolean; movementX: number; movementY: number; pageX: number; pageY: number; relatedTarget: EventTarget | null; screenX: number; screenY: number; shiftKey: boolean; } interface TouchEvent extends UIEvent { altKey: boolean; changedTouches: TouchList; ctrlKey: boolean; /** * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method. */ getModifierState(key: string): boolean; metaKey: boolean; shiftKey: boolean; targetTouches: TouchList; touches: TouchList; } interface UIEvent extends SyntheticEvent { detail: number; view: AbstractView; } interface WheelEvent extends MouseEvent { deltaMode: number; deltaX: number; deltaY: number; deltaZ: number; } interface AnimationEvent extends SyntheticEvent { animationName: string; elapsedTime: number; pseudoElement: string; } interface TransitionEvent extends SyntheticEvent { elapsedTime: number; propertyName: string; pseudoElement: string; } // // Event Handler Types // ---------------------------------------------------------------------- type EventHandler> = { bivarianceHack(event: E): void }["bivarianceHack"]; type ReactEventHandler = EventHandler>; type ClipboardEventHandler = EventHandler>; type CompositionEventHandler = EventHandler>; type DragEventHandler = EventHandler>; type FocusEventHandler = EventHandler>; type FormEventHandler = EventHandler>; type ChangeEventHandler = EventHandler>; type KeyboardEventHandler = EventHandler>; type MouseEventHandler = EventHandler>; type TouchEventHandler = EventHandler>; type PointerEventHandler = EventHandler>; type UIEventHandler = EventHandler>; type WheelEventHandler = EventHandler>; type AnimationEventHandler = EventHandler>; type TransitionEventHandler = EventHandler>; // // Props / DOM Attributes // ---------------------------------------------------------------------- interface Props { children?: ReactNode; key?: Key; ref?: LegacyRef; } interface HTMLProps extends AllHTMLAttributes, ClassAttributes { } type DetailedHTMLProps, T> = ClassAttributes & E; interface SVGProps extends SVGAttributes, ClassAttributes { } interface DOMAttributes { children?: ReactNode; dangerouslySetInnerHTML?: { __html: string; }; // Clipboard Events onCopy?: ClipboardEventHandler; onCopyCapture?: ClipboardEventHandler; onCut?: ClipboardEventHandler; onCutCapture?: ClipboardEventHandler; onPaste?: ClipboardEventHandler; onPasteCapture?: ClipboardEventHandler; // Composition Events onCompositionEnd?: CompositionEventHandler; onCompositionEndCapture?: CompositionEventHandler; onCompositionStart?: CompositionEventHandler; onCompositionStartCapture?: CompositionEventHandler; onCompositionUpdate?: CompositionEventHandler; onCompositionUpdateCapture?: CompositionEventHandler; // Focus Events onFocus?: FocusEventHandler; onFocusCapture?: FocusEventHandler; onBlur?: FocusEventHandler; onBlurCapture?: FocusEventHandler; // Form Events onChange?: FormEventHandler; onChangeCapture?: FormEventHandler; onBeforeInput?: FormEventHandler; onBeforeInputCapture?: FormEventHandler; onInput?: FormEventHandler; onInputCapture?: FormEventHandler; onReset?: FormEventHandler; onResetCapture?: FormEventHandler; onSubmit?: FormEventHandler; onSubmitCapture?: FormEventHandler; onInvalid?: FormEventHandler; onInvalidCapture?: FormEventHandler; // Image Events onLoad?: ReactEventHandler; onLoadCapture?: ReactEventHandler; onError?: ReactEventHandler; // also a Media Event onErrorCapture?: ReactEventHandler; // also a Media Event // Keyboard Events onKeyDown?: KeyboardEventHandler; onKeyDownCapture?: KeyboardEventHandler; onKeyPress?: KeyboardEventHandler; onKeyPressCapture?: KeyboardEventHandler; onKeyUp?: KeyboardEventHandler; onKeyUpCapture?: KeyboardEventHandler; // Media Events onAbort?: ReactEventHandler; onAbortCapture?: ReactEventHandler; onCanPlay?: ReactEventHandler; onCanPlayCapture?: ReactEventHandler; onCanPlayThrough?: ReactEventHandler; onCanPlayThroughCapture?: ReactEventHandler; onDurationChange?: ReactEventHandler; onDurationChangeCapture?: ReactEventHandler; onEmptied?: ReactEventHandler; onEmptiedCapture?: ReactEventHandler; onEncrypted?: ReactEventHandler; onEncryptedCapture?: ReactEventHandler; onEnded?: ReactEventHandler; onEndedCapture?: ReactEventHandler; onLoadedData?: ReactEventHandler; onLoadedDataCapture?: ReactEventHandler; onLoadedMetadata?: ReactEventHandler; onLoadedMetadataCapture?: ReactEventHandler; onLoadStart?: ReactEventHandler; onLoadStartCapture?: ReactEventHandler; onPause?: ReactEventHandler; onPauseCapture?: ReactEventHandler; onPlay?: ReactEventHandler; onPlayCapture?: ReactEventHandler; onPlaying?: ReactEventHandler; onPlayingCapture?: ReactEventHandler; onProgress?: ReactEventHandler; onProgressCapture?: ReactEventHandler; onRateChange?: ReactEventHandler; onRateChangeCapture?: ReactEventHandler; onSeeked?: ReactEventHandler; onSeekedCapture?: ReactEventHandler; onSeeking?: ReactEventHandler; onSeekingCapture?: ReactEventHandler; onStalled?: ReactEventHandler; onStalledCapture?: ReactEventHandler; onSuspend?: ReactEventHandler; onSuspendCapture?: ReactEventHandler; onTimeUpdate?: ReactEventHandler; onTimeUpdateCapture?: ReactEventHandler; onVolumeChange?: ReactEventHandler; onVolumeChangeCapture?: ReactEventHandler; onWaiting?: ReactEventHandler; onWaitingCapture?: ReactEventHandler; // MouseEvents onAuxClick?: MouseEventHandler; onAuxClickCapture?: MouseEventHandler; onClick?: MouseEventHandler; onClickCapture?: MouseEventHandler; onContextMenu?: MouseEventHandler; onContextMenuCapture?: MouseEventHandler; onDoubleClick?: MouseEventHandler; onDoubleClickCapture?: MouseEventHandler; onDrag?: DragEventHandler; onDragCapture?: DragEventHandler; onDragEnd?: DragEventHandler; onDragEndCapture?: DragEventHandler; onDragEnter?: DragEventHandler; onDragEnterCapture?: DragEventHandler; onDragExit?: DragEventHandler; onDragExitCapture?: DragEventHandler; onDragLeave?: DragEventHandler; onDragLeaveCapture?: DragEventHandler; onDragOver?: DragEventHandler; onDragOverCapture?: DragEventHandler; onDragStart?: DragEventHandler; onDragStartCapture?: DragEventHandler; onDrop?: DragEventHandler; onDropCapture?: DragEventHandler; onMouseDown?: MouseEventHandler; onMouseDownCapture?: MouseEventHandler; onMouseEnter?: MouseEventHandler; onMouseLeave?: MouseEventHandler; onMouseMove?: MouseEventHandler; onMouseMoveCapture?: MouseEventHandler; onMouseOut?: MouseEventHandler; onMouseOutCapture?: MouseEventHandler; onMouseOver?: MouseEventHandler; onMouseOverCapture?: MouseEventHandler; onMouseUp?: MouseEventHandler; onMouseUpCapture?: MouseEventHandler; // Selection Events onSelect?: ReactEventHandler; onSelectCapture?: ReactEventHandler; // Touch Events onTouchCancel?: TouchEventHandler; onTouchCancelCapture?: TouchEventHandler; onTouchEnd?: TouchEventHandler; onTouchEndCapture?: TouchEventHandler; onTouchMove?: TouchEventHandler; onTouchMoveCapture?: TouchEventHandler; onTouchStart?: TouchEventHandler; onTouchStartCapture?: TouchEventHandler; // Pointer Events onPointerDown?: PointerEventHandler; onPointerDownCapture?: PointerEventHandler; onPointerMove?: PointerEventHandler; onPointerMoveCapture?: PointerEventHandler; onPointerUp?: PointerEventHandler; onPointerUpCapture?: PointerEventHandler; onPointerCancel?: PointerEventHandler; onPointerCancelCapture?: PointerEventHandler; onPointerEnter?: PointerEventHandler; onPointerEnterCapture?: PointerEventHandler; onPointerLeave?: PointerEventHandler; onPointerLeaveCapture?: PointerEventHandler; onPointerOver?: PointerEventHandler; onPointerOverCapture?: PointerEventHandler; onPointerOut?: PointerEventHandler; onPointerOutCapture?: PointerEventHandler; onGotPointerCapture?: PointerEventHandler; onGotPointerCaptureCapture?: PointerEventHandler; onLostPointerCapture?: PointerEventHandler; onLostPointerCaptureCapture?: PointerEventHandler; // UI Events onScroll?: UIEventHandler; onScrollCapture?: UIEventHandler; // Wheel Events onWheel?: WheelEventHandler; onWheelCapture?: WheelEventHandler; // Animation Events onAnimationStart?: AnimationEventHandler; onAnimationStartCapture?: AnimationEventHandler; onAnimationEnd?: AnimationEventHandler; onAnimationEndCapture?: AnimationEventHandler; onAnimationIteration?: AnimationEventHandler; onAnimationIterationCapture?: AnimationEventHandler; // Transition Events onTransitionEnd?: TransitionEventHandler; onTransitionEndCapture?: TransitionEventHandler; } export interface CSSProperties extends CSS.Properties { /** * The index signature was removed to enable closed typing for style * using CSSType. You're able to use type assertion or module augmentation * to add properties or an index signature of your own. * * For examples and more information, visit: * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors */ } // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/ interface AriaAttributes { /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */ 'aria-activedescendant'?: string; /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */ 'aria-atomic'?: boolean | 'false' | 'true'; /** * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be * presented if they are made. */ 'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both'; /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */ 'aria-busy'?: boolean | 'false' | 'true'; /** * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. * @see aria-pressed @see aria-selected. */ 'aria-checked'?: boolean | 'false' | 'mixed' | 'true'; /** * Defines the total number of columns in a table, grid, or treegrid. * @see aria-colindex. */ 'aria-colcount'?: number; /** * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. * @see aria-colcount @see aria-colspan. */ 'aria-colindex'?: number; /** * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. * @see aria-colindex @see aria-rowspan. */ 'aria-colspan'?: number; /** * Identifies the element (or elements) whose contents or presence are controlled by the current element. * @see aria-owns. */ 'aria-controls'?: string; /** Indicates the element that represents the current item within a container or set of related elements. */ 'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time'; /** * Identifies the element (or elements) that describes the object. * @see aria-labelledby */ 'aria-describedby'?: string; /** * Identifies the element that provides a detailed, extended description for the object. * @see aria-describedby. */ 'aria-details'?: string; /** * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. * @see aria-hidden @see aria-readonly. */ 'aria-disabled'?: boolean | 'false' | 'true'; /** * Indicates what functions can be performed when a dragged object is released on the drop target. * @deprecated in ARIA 1.1 */ 'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup'; /** * Identifies the element that provides an error message for the object. * @see aria-invalid @see aria-describedby. */ 'aria-errormessage'?: string; /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */ 'aria-expanded'?: boolean | 'false' | 'true'; /** * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, * allows assistive technology to override the general default of reading in document source order. */ 'aria-flowto'?: string; /** * Indicates an element's "grabbed" state in a drag-and-drop operation. * @deprecated in ARIA 1.1 */ 'aria-grabbed'?: boolean | 'false' | 'true'; /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ 'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'; /** * Indicates whether the element is exposed to an accessibility API. * @see aria-disabled. */ 'aria-hidden'?: boolean | 'false' | 'true'; /** * Indicates the entered value does not conform to the format expected by the application. * @see aria-errormessage. */ 'aria-invalid'?: boolean | 'false' | 'true' | 'grammar' | 'spelling'; /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */ 'aria-keyshortcuts'?: string; /** * Defines a string value that labels the current element. * @see aria-labelledby. */ 'aria-label'?: string; /** * Identifies the element (or elements) that labels the current element. * @see aria-describedby. */ 'aria-labelledby'?: string; /** Defines the hierarchical level of an element within a structure. */ 'aria-level'?: number; /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */ 'aria-live'?: 'off' | 'assertive' | 'polite'; /** Indicates whether an element is modal when displayed. */ 'aria-modal'?: boolean | 'false' | 'true'; /** Indicates whether a text box accepts multiple lines of input or only a single line. */ 'aria-multiline'?: boolean | 'false' | 'true'; /** Indicates that the user may select more than one item from the current selectable descendants. */ 'aria-multiselectable'?: boolean | 'false' | 'true'; /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */ 'aria-orientation'?: 'horizontal' | 'vertical'; /** * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship * between DOM elements where the DOM hierarchy cannot be used to represent the relationship. * @see aria-controls. */ 'aria-owns'?: string; /** * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. * A hint could be a sample value or a brief description of the expected format. */ 'aria-placeholder'?: string; /** * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. * @see aria-setsize. */ 'aria-posinset'?: number; /** * Indicates the current "pressed" state of toggle buttons. * @see aria-checked @see aria-selected. */ 'aria-pressed'?: boolean | 'false' | 'mixed' | 'true'; /** * Indicates that the element is not editable, but is otherwise operable. * @see aria-disabled. */ 'aria-readonly'?: boolean | 'false' | 'true'; /** * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. * @see aria-atomic. */ 'aria-relevant'?: 'additions' | 'additions text' | 'all' | 'removals' | 'text'; /** Indicates that user input is required on the element before a form may be submitted. */ 'aria-required'?: boolean | 'false' | 'true'; /** Defines a human-readable, author-localized description for the role of an element. */ 'aria-roledescription'?: string; /** * Defines the total number of rows in a table, grid, or treegrid. * @see aria-rowindex. */ 'aria-rowcount'?: number; /** * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. * @see aria-rowcount @see aria-rowspan. */ 'aria-rowindex'?: number; /** * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. * @see aria-rowindex @see aria-colspan. */ 'aria-rowspan'?: number; /** * Indicates the current "selected" state of various widgets. * @see aria-checked @see aria-pressed. */ 'aria-selected'?: boolean | 'false' | 'true'; /** * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. * @see aria-posinset. */ 'aria-setsize'?: number; /** Indicates if items in a table or grid are sorted in ascending or descending order. */ 'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other'; /** Defines the maximum allowed value for a range widget. */ 'aria-valuemax'?: number; /** Defines the minimum allowed value for a range widget. */ 'aria-valuemin'?: number; /** * Defines the current value for a range widget. * @see aria-valuetext. */ 'aria-valuenow'?: number; /** Defines the human readable text alternative of aria-valuenow for a range widget. */ 'aria-valuetext'?: string; } interface HTMLAttributes extends AriaAttributes, DOMAttributes { // React-specific Attributes defaultChecked?: boolean; defaultValue?: string | number | ReadonlyArray; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; // Standard HTML Attributes accessKey?: string; className?: string; contentEditable?: Booleanish | "inherit"; contextMenu?: string; dir?: string; draggable?: Booleanish; hidden?: boolean; id?: string; lang?: string; placeholder?: string; slot?: string; spellCheck?: Booleanish; style?: CSSProperties; tabIndex?: number; title?: string; translate?: 'yes' | 'no'; // Unknown radioGroup?: string; // , // WAI-ARIA role?: string; // RDFa Attributes about?: string; datatype?: string; inlist?: any; prefix?: string; property?: string; resource?: string; typeof?: string; vocab?: string; // Non-standard Attributes autoCapitalize?: string; autoCorrect?: string; autoSave?: string; color?: string; itemProp?: string; itemScope?: boolean; itemType?: string; itemID?: string; itemRef?: string; results?: number; security?: string; unselectable?: 'on' | 'off'; // Living Standard /** * Hints at the type of data that might be entered by the user while editing the element or its contents * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute */ inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'; /** * Specify that a standard HTML element should behave like a defined custom built-in element * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is */ is?: string; } interface AllHTMLAttributes extends HTMLAttributes { // Standard HTML Attributes accept?: string; acceptCharset?: string; action?: string; allowFullScreen?: boolean; allowTransparency?: boolean; alt?: string; as?: string; async?: boolean; autoComplete?: string; autoFocus?: boolean; autoPlay?: boolean; capture?: boolean | string; cellPadding?: number | string; cellSpacing?: number | string; charSet?: string; challenge?: string; checked?: boolean; cite?: string; classID?: string; cols?: number; colSpan?: number; content?: string; controls?: boolean; coords?: string; crossOrigin?: string; data?: string; dateTime?: string; default?: boolean; defer?: boolean; disabled?: boolean; download?: any; encType?: string; form?: string; formAction?: string; formEncType?: string; formMethod?: string; formNoValidate?: boolean; formTarget?: string; frameBorder?: number | string; headers?: string; height?: number | string; high?: number; href?: string; hrefLang?: string; htmlFor?: string; httpEquiv?: string; integrity?: string; keyParams?: string; keyType?: string; kind?: string; label?: string; list?: string; loop?: boolean; low?: number; manifest?: string; marginHeight?: number; marginWidth?: number; max?: number | string; maxLength?: number; media?: string; mediaGroup?: string; method?: string; min?: number | string; minLength?: number; multiple?: boolean; muted?: boolean; name?: string; nonce?: string; noValidate?: boolean; open?: boolean; optimum?: number; pattern?: string; placeholder?: string; playsInline?: boolean; poster?: string; preload?: string; readOnly?: boolean; rel?: string; required?: boolean; reversed?: boolean; rows?: number; rowSpan?: number; sandbox?: string; scope?: string; scoped?: boolean; scrolling?: string; seamless?: boolean; selected?: boolean; shape?: string; size?: number; sizes?: string; span?: number; src?: string; srcDoc?: string; srcLang?: string; srcSet?: string; start?: number; step?: number | string; summary?: string; target?: string; type?: string; useMap?: string; value?: string | ReadonlyArray | number; width?: number | string; wmode?: string; wrap?: string; } interface AnchorHTMLAttributes extends HTMLAttributes { download?: any; href?: string; hrefLang?: string; media?: string; ping?: string; rel?: string; target?: string; type?: string; referrerPolicy?: string; } // tslint:disable-next-line:no-empty-interface interface AudioHTMLAttributes extends MediaHTMLAttributes {} interface AreaHTMLAttributes extends HTMLAttributes { alt?: string; coords?: string; download?: any; href?: string; hrefLang?: string; media?: string; rel?: string; shape?: string; target?: string; } interface BaseHTMLAttributes extends HTMLAttributes { href?: string; target?: string; } interface BlockquoteHTMLAttributes extends HTMLAttributes { cite?: string; } interface ButtonHTMLAttributes extends HTMLAttributes { autoFocus?: boolean; disabled?: boolean; form?: string; formAction?: string; formEncType?: string; formMethod?: string; formNoValidate?: boolean; formTarget?: string; name?: string; type?: 'submit' | 'reset' | 'button'; value?: string | ReadonlyArray | number; } interface CanvasHTMLAttributes extends HTMLAttributes { height?: number | string; width?: number | string; } interface ColHTMLAttributes extends HTMLAttributes { span?: number; width?: number | string; } interface ColgroupHTMLAttributes extends HTMLAttributes { span?: number; } interface DataHTMLAttributes extends HTMLAttributes { value?: string | ReadonlyArray | number; } interface DetailsHTMLAttributes extends HTMLAttributes { open?: boolean; } interface DelHTMLAttributes extends HTMLAttributes { cite?: string; dateTime?: string; } interface DialogHTMLAttributes extends HTMLAttributes { open?: boolean; } interface EmbedHTMLAttributes extends HTMLAttributes { height?: number | string; src?: string; type?: string; width?: number | string; } interface FieldsetHTMLAttributes extends HTMLAttributes { disabled?: boolean; form?: string; name?: string; } interface FormHTMLAttributes extends HTMLAttributes { acceptCharset?: string; action?: string; autoComplete?: string; encType?: string; method?: string; name?: string; noValidate?: boolean; target?: string; } interface HtmlHTMLAttributes extends HTMLAttributes { manifest?: string; } interface IframeHTMLAttributes extends HTMLAttributes { allow?: string; allowFullScreen?: boolean; allowTransparency?: boolean; frameBorder?: number | string; height?: number | string; marginHeight?: number; marginWidth?: number; name?: string; referrerPolicy?: string; sandbox?: string; scrolling?: string; seamless?: boolean; src?: string; srcDoc?: string; width?: number | string; } interface ImgHTMLAttributes extends HTMLAttributes { alt?: string; crossOrigin?: "anonymous" | "use-credentials" | ""; decoding?: "async" | "auto" | "sync"; height?: number | string; loading?: "eager" | "lazy"; referrerPolicy?: "no-referrer" | "origin" | "unsafe-url"; sizes?: string; src?: string; srcSet?: string; useMap?: string; width?: number | string; } interface InsHTMLAttributes extends HTMLAttributes { cite?: string; dateTime?: string; } interface InputHTMLAttributes extends HTMLAttributes { accept?: string; alt?: string; autoComplete?: string; autoFocus?: boolean; capture?: boolean | string; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute checked?: boolean; crossOrigin?: string; disabled?: boolean; form?: string; formAction?: string; formEncType?: string; formMethod?: string; formNoValidate?: boolean; formTarget?: string; height?: number | string; list?: string; max?: number | string; maxLength?: number; min?: number | string; minLength?: number; multiple?: boolean; name?: string; pattern?: string; placeholder?: string; readOnly?: boolean; required?: boolean; size?: number; src?: string; step?: number | string; type?: string; value?: string | ReadonlyArray | number; width?: number | string; onChange?: ChangeEventHandler; } interface KeygenHTMLAttributes extends HTMLAttributes { autoFocus?: boolean; challenge?: string; disabled?: boolean; form?: string; keyType?: string; keyParams?: string; name?: string; } interface LabelHTMLAttributes extends HTMLAttributes { form?: string; htmlFor?: string; } interface LiHTMLAttributes extends HTMLAttributes { value?: string | ReadonlyArray | number; } interface LinkHTMLAttributes extends HTMLAttributes { as?: string; crossOrigin?: string; href?: string; hrefLang?: string; integrity?: string; media?: string; rel?: string; sizes?: string; type?: string; charSet?: string; } interface MapHTMLAttributes extends HTMLAttributes { name?: string; } interface MenuHTMLAttributes extends HTMLAttributes { type?: string; } interface MediaHTMLAttributes extends HTMLAttributes { autoPlay?: boolean; controls?: boolean; controlsList?: string; crossOrigin?: string; loop?: boolean; mediaGroup?: string; muted?: boolean; playsInline?: boolean; preload?: string; src?: string; } interface MetaHTMLAttributes extends HTMLAttributes { charSet?: string; content?: string; httpEquiv?: string; name?: string; } interface MeterHTMLAttributes extends HTMLAttributes { form?: string; high?: number; low?: number; max?: number | string; min?: number | string; optimum?: number; value?: string | ReadonlyArray | number; } interface QuoteHTMLAttributes extends HTMLAttributes { cite?: string; } interface ObjectHTMLAttributes extends HTMLAttributes { classID?: string; data?: string; form?: string; height?: number | string; name?: string; type?: string; useMap?: string; width?: number | string; wmode?: string; } interface OlHTMLAttributes extends HTMLAttributes { reversed?: boolean; start?: number; type?: '1' | 'a' | 'A' | 'i' | 'I'; } interface OptgroupHTMLAttributes extends HTMLAttributes { disabled?: boolean; label?: string; } interface OptionHTMLAttributes extends HTMLAttributes { disabled?: boolean; label?: string; selected?: boolean; value?: string | ReadonlyArray | number; } interface OutputHTMLAttributes extends HTMLAttributes { form?: string; htmlFor?: string; name?: string; } interface ParamHTMLAttributes extends HTMLAttributes { name?: string; value?: string | ReadonlyArray | number; } interface ProgressHTMLAttributes extends HTMLAttributes { max?: number | string; value?: string | ReadonlyArray | number; } interface SlotHTMLAttributes extends HTMLAttributes { name?: string; } interface ScriptHTMLAttributes extends HTMLAttributes { async?: boolean; charSet?: string; crossOrigin?: string; defer?: boolean; integrity?: string; noModule?: boolean; nonce?: string; src?: string; type?: string; } interface SelectHTMLAttributes extends HTMLAttributes { autoComplete?: string; autoFocus?: boolean; disabled?: boolean; form?: string; multiple?: boolean; name?: string; required?: boolean; size?: number; value?: string | ReadonlyArray | number; onChange?: ChangeEventHandler; } interface SourceHTMLAttributes extends HTMLAttributes { media?: string; sizes?: string; src?: string; srcSet?: string; type?: string; } interface StyleHTMLAttributes extends HTMLAttributes { media?: string; nonce?: string; scoped?: boolean; type?: string; } interface TableHTMLAttributes extends HTMLAttributes { cellPadding?: number | string; cellSpacing?: number | string; summary?: string; width?: number | string; } interface TextareaHTMLAttributes extends HTMLAttributes { autoComplete?: string; autoFocus?: boolean; cols?: number; dirName?: string; disabled?: boolean; form?: string; maxLength?: number; minLength?: number; name?: string; placeholder?: string; readOnly?: boolean; required?: boolean; rows?: number; value?: string | ReadonlyArray | number; wrap?: string; onChange?: ChangeEventHandler; } interface TdHTMLAttributes extends HTMLAttributes { align?: "left" | "center" | "right" | "justify" | "char"; colSpan?: number; headers?: string; rowSpan?: number; scope?: string; abbr?: string; height?: number | string; width?: number | string; valign?: "top" | "middle" | "bottom" | "baseline"; } interface ThHTMLAttributes extends HTMLAttributes { align?: "left" | "center" | "right" | "justify" | "char"; colSpan?: number; headers?: string; rowSpan?: number; scope?: string; abbr?: string; } interface TimeHTMLAttributes extends HTMLAttributes { dateTime?: string; } interface TrackHTMLAttributes extends HTMLAttributes { default?: boolean; kind?: string; label?: string; src?: string; srcLang?: string; } interface VideoHTMLAttributes extends MediaHTMLAttributes { height?: number | string; playsInline?: boolean; poster?: string; width?: number | string; disablePictureInPicture?: boolean; } // this list is "complete" in that it contains every SVG attribute // that React supports, but the types can be improved. // Full list here: https://facebook.github.io/react/docs/dom-elements.html // // The three broad type categories are (in order of restrictiveness): // - "number | string" // - "string" // - union of string literals interface SVGAttributes extends AriaAttributes, DOMAttributes { // Attributes which also defined in HTMLAttributes // See comment in SVGDOMPropertyConfig.js className?: string; color?: string; height?: number | string; id?: string; lang?: string; max?: number | string; media?: string; method?: string; min?: number | string; name?: string; style?: CSSProperties; target?: string; type?: string; width?: number | string; // Other HTML properties supported by SVG elements in browsers role?: string; tabIndex?: number; crossOrigin?: "anonymous" | "use-credentials" | ""; // SVG Specific attributes accentHeight?: number | string; accumulate?: "none" | "sum"; additive?: "replace" | "sum"; alignmentBaseline?: "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit"; allowReorder?: "no" | "yes"; alphabetic?: number | string; amplitude?: number | string; arabicForm?: "initial" | "medial" | "terminal" | "isolated"; ascent?: number | string; attributeName?: string; attributeType?: string; autoReverse?: Booleanish; azimuth?: number | string; baseFrequency?: number | string; baselineShift?: number | string; baseProfile?: number | string; bbox?: number | string; begin?: number | string; bias?: number | string; by?: number | string; calcMode?: number | string; capHeight?: number | string; clip?: number | string; clipPath?: string; clipPathUnits?: number | string; clipRule?: number | string; colorInterpolation?: number | string; colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB" | "inherit"; colorProfile?: number | string; colorRendering?: number | string; contentScriptType?: number | string; contentStyleType?: number | string; cursor?: number | string; cx?: number | string; cy?: number | string; d?: string; decelerate?: number | string; descent?: number | string; diffuseConstant?: number | string; direction?: number | string; display?: number | string; divisor?: number | string; dominantBaseline?: number | string; dur?: number | string; dx?: number | string; dy?: number | string; edgeMode?: number | string; elevation?: number | string; enableBackground?: number | string; end?: number | string; exponent?: number | string; externalResourcesRequired?: Booleanish; fill?: string; fillOpacity?: number | string; fillRule?: "nonzero" | "evenodd" | "inherit"; filter?: string; filterRes?: number | string; filterUnits?: number | string; floodColor?: number | string; floodOpacity?: number | string; focusable?: Booleanish | "auto"; fontFamily?: string; fontSize?: number | string; fontSizeAdjust?: number | string; fontStretch?: number | string; fontStyle?: number | string; fontVariant?: number | string; fontWeight?: number | string; format?: number | string; from?: number | string; fx?: number | string; fy?: number | string; g1?: number | string; g2?: number | string; glyphName?: number | string; glyphOrientationHorizontal?: number | string; glyphOrientationVertical?: number | string; glyphRef?: number | string; gradientTransform?: string; gradientUnits?: string; hanging?: number | string; horizAdvX?: number | string; horizOriginX?: number | string; href?: string; ideographic?: number | string; imageRendering?: number | string; in2?: number | string; in?: string; intercept?: number | string; k1?: number | string; k2?: number | string; k3?: number | string; k4?: number | string; k?: number | string; kernelMatrix?: number | string; kernelUnitLength?: number | string; kerning?: number | string; keyPoints?: number | string; keySplines?: number | string; keyTimes?: number | string; lengthAdjust?: number | string; letterSpacing?: number | string; lightingColor?: number | string; limitingConeAngle?: number | string; local?: number | string; markerEnd?: string; markerHeight?: number | string; markerMid?: string; markerStart?: string; markerUnits?: number | string; markerWidth?: number | string; mask?: string; maskContentUnits?: number | string; maskUnits?: number | string; mathematical?: number | string; mode?: number | string; numOctaves?: number | string; offset?: number | string; opacity?: number | string; operator?: number | string; order?: number | string; orient?: number | string; orientation?: number | string; origin?: number | string; overflow?: number | string; overlinePosition?: number | string; overlineThickness?: number | string; paintOrder?: number | string; panose1?: number | string; path?: string; pathLength?: number | string; patternContentUnits?: string; patternTransform?: number | string; patternUnits?: string; pointerEvents?: number | string; points?: string; pointsAtX?: number | string; pointsAtY?: number | string; pointsAtZ?: number | string; preserveAlpha?: Booleanish; preserveAspectRatio?: string; primitiveUnits?: number | string; r?: number | string; radius?: number | string; refX?: number | string; refY?: number | string; renderingIntent?: number | string; repeatCount?: number | string; repeatDur?: number | string; requiredExtensions?: number | string; requiredFeatures?: number | string; restart?: number | string; result?: string; rotate?: number | string; rx?: number | string; ry?: number | string; scale?: number | string; seed?: number | string; shapeRendering?: number | string; slope?: number | string; spacing?: number | string; specularConstant?: number | string; specularExponent?: number | string; speed?: number | string; spreadMethod?: string; startOffset?: number | string; stdDeviation?: number | string; stemh?: number | string; stemv?: number | string; stitchTiles?: number | string; stopColor?: string; stopOpacity?: number | string; strikethroughPosition?: number | string; strikethroughThickness?: number | string; string?: number | string; stroke?: string; strokeDasharray?: string | number; strokeDashoffset?: string | number; strokeLinecap?: "butt" | "round" | "square" | "inherit"; strokeLinejoin?: "miter" | "round" | "bevel" | "inherit"; strokeMiterlimit?: number | string; strokeOpacity?: number | string; strokeWidth?: number | string; surfaceScale?: number | string; systemLanguage?: number | string; tableValues?: number | string; targetX?: number | string; targetY?: number | string; textAnchor?: string; textDecoration?: number | string; textLength?: number | string; textRendering?: number | string; to?: number | string; transform?: string; u1?: number | string; u2?: number | string; underlinePosition?: number | string; underlineThickness?: number | string; unicode?: number | string; unicodeBidi?: number | string; unicodeRange?: number | string; unitsPerEm?: number | string; vAlphabetic?: number | string; values?: string; vectorEffect?: number | string; version?: string; vertAdvY?: number | string; vertOriginX?: number | string; vertOriginY?: number | string; vHanging?: number | string; vIdeographic?: number | string; viewBox?: string; viewTarget?: number | string; visibility?: number | string; vMathematical?: number | string; widths?: number | string; wordSpacing?: number | string; writingMode?: number | string; x1?: number | string; x2?: number | string; x?: number | string; xChannelSelector?: string; xHeight?: number | string; xlinkActuate?: string; xlinkArcrole?: string; xlinkHref?: string; xlinkRole?: string; xlinkShow?: string; xlinkTitle?: string; xlinkType?: string; xmlBase?: string; xmlLang?: string; xmlns?: string; xmlnsXlink?: string; xmlSpace?: string; y1?: number | string; y2?: number | string; y?: number | string; yChannelSelector?: string; z?: number | string; zoomAndPan?: string; } interface WebViewHTMLAttributes extends HTMLAttributes { allowFullScreen?: boolean; allowpopups?: boolean; autoFocus?: boolean; autosize?: boolean; blinkfeatures?: string; disableblinkfeatures?: string; disableguestresize?: boolean; disablewebsecurity?: boolean; guestinstance?: string; httpreferrer?: string; nodeintegration?: boolean; partition?: string; plugins?: boolean; preload?: string; src?: string; useragent?: string; webpreferences?: string; } // // React.DOM // ---------------------------------------------------------------------- interface ReactHTML { a: DetailedHTMLFactory, HTMLAnchorElement>; abbr: DetailedHTMLFactory, HTMLElement>; address: DetailedHTMLFactory, HTMLElement>; area: DetailedHTMLFactory, HTMLAreaElement>; article: DetailedHTMLFactory, HTMLElement>; aside: DetailedHTMLFactory, HTMLElement>; audio: DetailedHTMLFactory, HTMLAudioElement>; b: DetailedHTMLFactory, HTMLElement>; base: DetailedHTMLFactory, HTMLBaseElement>; bdi: DetailedHTMLFactory, HTMLElement>; bdo: DetailedHTMLFactory, HTMLElement>; big: DetailedHTMLFactory, HTMLElement>; blockquote: DetailedHTMLFactory, HTMLElement>; body: DetailedHTMLFactory, HTMLBodyElement>; br: DetailedHTMLFactory, HTMLBRElement>; button: DetailedHTMLFactory, HTMLButtonElement>; canvas: DetailedHTMLFactory, HTMLCanvasElement>; caption: DetailedHTMLFactory, HTMLElement>; cite: DetailedHTMLFactory, HTMLElement>; code: DetailedHTMLFactory, HTMLElement>; col: DetailedHTMLFactory, HTMLTableColElement>; colgroup: DetailedHTMLFactory, HTMLTableColElement>; data: DetailedHTMLFactory, HTMLDataElement>; datalist: DetailedHTMLFactory, HTMLDataListElement>; dd: DetailedHTMLFactory, HTMLElement>; del: DetailedHTMLFactory, HTMLElement>; details: DetailedHTMLFactory, HTMLElement>; dfn: DetailedHTMLFactory, HTMLElement>; dialog: DetailedHTMLFactory, HTMLDialogElement>; div: DetailedHTMLFactory, HTMLDivElement>; dl: DetailedHTMLFactory, HTMLDListElement>; dt: DetailedHTMLFactory, HTMLElement>; em: DetailedHTMLFactory, HTMLElement>; embed: DetailedHTMLFactory, HTMLEmbedElement>; fieldset: DetailedHTMLFactory, HTMLFieldSetElement>; figcaption: DetailedHTMLFactory, HTMLElement>; figure: DetailedHTMLFactory, HTMLElement>; footer: DetailedHTMLFactory, HTMLElement>; form: DetailedHTMLFactory, HTMLFormElement>; h1: DetailedHTMLFactory, HTMLHeadingElement>; h2: DetailedHTMLFactory, HTMLHeadingElement>; h3: DetailedHTMLFactory, HTMLHeadingElement>; h4: DetailedHTMLFactory, HTMLHeadingElement>; h5: DetailedHTMLFactory, HTMLHeadingElement>; h6: DetailedHTMLFactory, HTMLHeadingElement>; head: DetailedHTMLFactory, HTMLHeadElement>; header: DetailedHTMLFactory, HTMLElement>; hgroup: DetailedHTMLFactory, HTMLElement>; hr: DetailedHTMLFactory, HTMLHRElement>; html: DetailedHTMLFactory, HTMLHtmlElement>; i: DetailedHTMLFactory, HTMLElement>; iframe: DetailedHTMLFactory, HTMLIFrameElement>; img: DetailedHTMLFactory, HTMLImageElement>; input: DetailedHTMLFactory, HTMLInputElement>; ins: DetailedHTMLFactory, HTMLModElement>; kbd: DetailedHTMLFactory, HTMLElement>; keygen: DetailedHTMLFactory, HTMLElement>; label: DetailedHTMLFactory, HTMLLabelElement>; legend: DetailedHTMLFactory, HTMLLegendElement>; li: DetailedHTMLFactory, HTMLLIElement>; link: DetailedHTMLFactory, HTMLLinkElement>; main: DetailedHTMLFactory, HTMLElement>; map: DetailedHTMLFactory, HTMLMapElement>; mark: DetailedHTMLFactory, HTMLElement>; menu: DetailedHTMLFactory, HTMLElement>; menuitem: DetailedHTMLFactory, HTMLElement>; meta: DetailedHTMLFactory, HTMLMetaElement>; meter: DetailedHTMLFactory, HTMLElement>; nav: DetailedHTMLFactory, HTMLElement>; noscript: DetailedHTMLFactory, HTMLElement>; object: DetailedHTMLFactory, HTMLObjectElement>; ol: DetailedHTMLFactory, HTMLOListElement>; optgroup: DetailedHTMLFactory, HTMLOptGroupElement>; option: DetailedHTMLFactory, HTMLOptionElement>; output: DetailedHTMLFactory, HTMLElement>; p: DetailedHTMLFactory, HTMLParagraphElement>; param: DetailedHTMLFactory, HTMLParamElement>; picture: DetailedHTMLFactory, HTMLElement>; pre: DetailedHTMLFactory, HTMLPreElement>; progress: DetailedHTMLFactory, HTMLProgressElement>; q: DetailedHTMLFactory, HTMLQuoteElement>; rp: DetailedHTMLFactory, HTMLElement>; rt: DetailedHTMLFactory, HTMLElement>; ruby: DetailedHTMLFactory, HTMLElement>; s: DetailedHTMLFactory, HTMLElement>; samp: DetailedHTMLFactory, HTMLElement>; slot: DetailedHTMLFactory, HTMLSlotElement>; script: DetailedHTMLFactory, HTMLScriptElement>; section: DetailedHTMLFactory, HTMLElement>; select: DetailedHTMLFactory, HTMLSelectElement>; small: DetailedHTMLFactory, HTMLElement>; source: DetailedHTMLFactory, HTMLSourceElement>; span: DetailedHTMLFactory, HTMLSpanElement>; strong: DetailedHTMLFactory, HTMLElement>; style: DetailedHTMLFactory, HTMLStyleElement>; sub: DetailedHTMLFactory, HTMLElement>; summary: DetailedHTMLFactory, HTMLElement>; sup: DetailedHTMLFactory, HTMLElement>; table: DetailedHTMLFactory, HTMLTableElement>; template: DetailedHTMLFactory, HTMLTemplateElement>; tbody: DetailedHTMLFactory, HTMLTableSectionElement>; td: DetailedHTMLFactory, HTMLTableDataCellElement>; textarea: DetailedHTMLFactory, HTMLTextAreaElement>; tfoot: DetailedHTMLFactory, HTMLTableSectionElement>; th: DetailedHTMLFactory, HTMLTableHeaderCellElement>; thead: DetailedHTMLFactory, HTMLTableSectionElement>; time: DetailedHTMLFactory, HTMLElement>; title: DetailedHTMLFactory, HTMLTitleElement>; tr: DetailedHTMLFactory, HTMLTableRowElement>; track: DetailedHTMLFactory, HTMLTrackElement>; u: DetailedHTMLFactory, HTMLElement>; ul: DetailedHTMLFactory, HTMLUListElement>; "var": DetailedHTMLFactory, HTMLElement>; video: DetailedHTMLFactory, HTMLVideoElement>; wbr: DetailedHTMLFactory, HTMLElement>; webview: DetailedHTMLFactory, HTMLWebViewElement>; } interface ReactSVG { animate: SVGFactory; circle: SVGFactory; clipPath: SVGFactory; defs: SVGFactory; desc: SVGFactory; ellipse: SVGFactory; feBlend: SVGFactory; feColorMatrix: SVGFactory; feComponentTransfer: SVGFactory; feComposite: SVGFactory; feConvolveMatrix: SVGFactory; feDiffuseLighting: SVGFactory; feDisplacementMap: SVGFactory; feDistantLight: SVGFactory; feDropShadow: SVGFactory; feFlood: SVGFactory; feFuncA: SVGFactory; feFuncB: SVGFactory; feFuncG: SVGFactory; feFuncR: SVGFactory; feGaussianBlur: SVGFactory; feImage: SVGFactory; feMerge: SVGFactory; feMergeNode: SVGFactory; feMorphology: SVGFactory; feOffset: SVGFactory; fePointLight: SVGFactory; feSpecularLighting: SVGFactory; feSpotLight: SVGFactory; feTile: SVGFactory; feTurbulence: SVGFactory; filter: SVGFactory; foreignObject: SVGFactory; g: SVGFactory; image: SVGFactory; line: SVGFactory; linearGradient: SVGFactory; marker: SVGFactory; mask: SVGFactory; metadata: SVGFactory; path: SVGFactory; pattern: SVGFactory; polygon: SVGFactory; polyline: SVGFactory; radialGradient: SVGFactory; rect: SVGFactory; stop: SVGFactory; svg: SVGFactory; switch: SVGFactory; symbol: SVGFactory; text: SVGFactory; textPath: SVGFactory; tspan: SVGFactory; use: SVGFactory; view: SVGFactory; } interface ReactDOM extends ReactHTML, ReactSVG { } // // React.PropTypes // ---------------------------------------------------------------------- type Validator = PropTypes.Validator; type Requireable = PropTypes.Requireable; type ValidationMap = PropTypes.ValidationMap; type WeakValidationMap = { [K in keyof T]?: null extends T[K] ? Validator : undefined extends T[K] ? Validator : Validator }; interface ReactPropTypes { any: typeof PropTypes.any; array: typeof PropTypes.array; bool: typeof PropTypes.bool; func: typeof PropTypes.func; number: typeof PropTypes.number; object: typeof PropTypes.object; string: typeof PropTypes.string; node: typeof PropTypes.node; element: typeof PropTypes.element; instanceOf: typeof PropTypes.instanceOf; oneOf: typeof PropTypes.oneOf; oneOfType: typeof PropTypes.oneOfType; arrayOf: typeof PropTypes.arrayOf; objectOf: typeof PropTypes.objectOf; shape: typeof PropTypes.shape; exact: typeof PropTypes.exact; } // // React.Children // ---------------------------------------------------------------------- interface ReactChildren { map(children: C | C[], fn: (child: C, index: number) => T): C extends null | undefined ? C : Array>; forEach(children: C | C[], fn: (child: C, index: number) => void): void; count(children: any): number; only(children: C): C extends any[] ? never : C; toArray(children: ReactNode | ReactNode[]): Array>; } // // Browser Interfaces // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts // ---------------------------------------------------------------------- interface AbstractView { styleMedia: StyleMedia; document: Document; } interface Touch { identifier: number; target: EventTarget; screenX: number; screenY: number; clientX: number; clientY: number; pageX: number; pageY: number; } interface TouchList { [index: number]: Touch; length: number; item(index: number): Touch; identifiedTouch(identifier: number): Touch; } // // Error Interfaces // ---------------------------------------------------------------------- interface ErrorInfo { /** * Captures which component contained the exception, and its ancestors. */ componentStack: string; } } // naked 'any' type in a conditional type will short circuit and union both the then/else branches // so boolean is only resolved for T = any type IsExactlyAny = boolean extends (T extends never ? true : false) ? true : false; type ExactlyAnyPropertyKeys = { [K in keyof T]: IsExactlyAny extends true ? K : never }[keyof T]; type NotExactlyAnyPropertyKeys = Exclude>; // Try to resolve ill-defined props like for JS users: props can be any, or sometimes objects with properties of type any type MergePropTypes = // Distribute over P in case it is a union type P extends any // If props is type any, use propTypes definitions ? IsExactlyAny

extends true ? T : // If declared props have indexed properties, ignore inferred props entirely as keyof gets widened string extends keyof P ? P : // Prefer declared types which are not exactly any & Pick> // For props which are exactly any, use the type inferred from propTypes if present & Pick>> // Keep leftover props not specified in propTypes & Pick> : never; // Any prop that has a default prop becomes optional, but its type is unchanged // Undeclared default props are augmented into the resulting allowable attributes // If declared props have indexed properties, ignore default props entirely as keyof gets widened // Wrap in an outer-level conditional type to allow distribution over props that are unions type Defaultize = P extends any ? string extends keyof P ? P : & Pick> & Partial>> & Partial>> : never; type ReactManagedAttributes = C extends { propTypes: infer T; defaultProps: infer D; } ? Defaultize>, D> : C extends { propTypes: infer T; } ? MergePropTypes> : C extends { defaultProps: infer D; } ? Defaultize : P; declare global { namespace JSX { // tslint:disable-next-line:no-empty-interface interface Element extends React.ReactElement { } interface ElementClass extends React.Component { render(): React.ReactNode; } interface ElementAttributesProperty { props: {}; } interface ElementChildrenAttribute { children: {}; } type LibraryManagedAttributes = C extends React.MemoExoticComponent | React.LazyExoticComponent ? T extends React.MemoExoticComponent | React.LazyExoticComponent ? ReactManagedAttributes : ReactManagedAttributes : ReactManagedAttributes; // tslint:disable-next-line:no-empty-interface interface IntrinsicAttributes extends React.Attributes { } // tslint:disable-next-line:no-empty-interface interface IntrinsicClassAttributes extends React.ClassAttributes { } interface IntrinsicElements { // HTML a: React.DetailedHTMLProps, HTMLAnchorElement>; abbr: React.DetailedHTMLProps, HTMLElement>; address: React.DetailedHTMLProps, HTMLElement>; area: React.DetailedHTMLProps, HTMLAreaElement>; article: React.DetailedHTMLProps, HTMLElement>; aside: React.DetailedHTMLProps, HTMLElement>; audio: React.DetailedHTMLProps, HTMLAudioElement>; b: React.DetailedHTMLProps, HTMLElement>; base: React.DetailedHTMLProps, HTMLBaseElement>; bdi: React.DetailedHTMLProps, HTMLElement>; bdo: React.DetailedHTMLProps, HTMLElement>; big: React.DetailedHTMLProps, HTMLElement>; blockquote: React.DetailedHTMLProps, HTMLElement>; body: React.DetailedHTMLProps, HTMLBodyElement>; br: React.DetailedHTMLProps, HTMLBRElement>; button: React.DetailedHTMLProps, HTMLButtonElement>; canvas: React.DetailedHTMLProps, HTMLCanvasElement>; caption: React.DetailedHTMLProps, HTMLElement>; cite: React.DetailedHTMLProps, HTMLElement>; code: React.DetailedHTMLProps, HTMLElement>; col: React.DetailedHTMLProps, HTMLTableColElement>; colgroup: React.DetailedHTMLProps, HTMLTableColElement>; data: React.DetailedHTMLProps, HTMLDataElement>; datalist: React.DetailedHTMLProps, HTMLDataListElement>; dd: React.DetailedHTMLProps, HTMLElement>; del: React.DetailedHTMLProps, HTMLElement>; details: React.DetailedHTMLProps, HTMLElement>; dfn: React.DetailedHTMLProps, HTMLElement>; dialog: React.DetailedHTMLProps, HTMLDialogElement>; div: React.DetailedHTMLProps, HTMLDivElement>; dl: React.DetailedHTMLProps, HTMLDListElement>; dt: React.DetailedHTMLProps, HTMLElement>; em: React.DetailedHTMLProps, HTMLElement>; embed: React.DetailedHTMLProps, HTMLEmbedElement>; fieldset: React.DetailedHTMLProps, HTMLFieldSetElement>; figcaption: React.DetailedHTMLProps, HTMLElement>; figure: React.DetailedHTMLProps, HTMLElement>; footer: React.DetailedHTMLProps, HTMLElement>; form: React.DetailedHTMLProps, HTMLFormElement>; h1: React.DetailedHTMLProps, HTMLHeadingElement>; h2: React.DetailedHTMLProps, HTMLHeadingElement>; h3: React.DetailedHTMLProps, HTMLHeadingElement>; h4: React.DetailedHTMLProps, HTMLHeadingElement>; h5: React.DetailedHTMLProps, HTMLHeadingElement>; h6: React.DetailedHTMLProps, HTMLHeadingElement>; head: React.DetailedHTMLProps, HTMLHeadElement>; header: React.DetailedHTMLProps, HTMLElement>; hgroup: React.DetailedHTMLProps, HTMLElement>; hr: React.DetailedHTMLProps, HTMLHRElement>; html: React.DetailedHTMLProps, HTMLHtmlElement>; i: React.DetailedHTMLProps, HTMLElement>; iframe: React.DetailedHTMLProps, HTMLIFrameElement>; img: React.DetailedHTMLProps, HTMLImageElement>; input: React.DetailedHTMLProps, HTMLInputElement>; ins: React.DetailedHTMLProps, HTMLModElement>; kbd: React.DetailedHTMLProps, HTMLElement>; keygen: React.DetailedHTMLProps, HTMLElement>; label: React.DetailedHTMLProps, HTMLLabelElement>; legend: React.DetailedHTMLProps, HTMLLegendElement>; li: React.DetailedHTMLProps, HTMLLIElement>; link: React.DetailedHTMLProps, HTMLLinkElement>; main: React.DetailedHTMLProps, HTMLElement>; map: React.DetailedHTMLProps, HTMLMapElement>; mark: React.DetailedHTMLProps, HTMLElement>; menu: React.DetailedHTMLProps, HTMLElement>; menuitem: React.DetailedHTMLProps, HTMLElement>; meta: React.DetailedHTMLProps, HTMLMetaElement>; meter: React.DetailedHTMLProps, HTMLElement>; nav: React.DetailedHTMLProps, HTMLElement>; noindex: React.DetailedHTMLProps, HTMLElement>; noscript: React.DetailedHTMLProps, HTMLElement>; object: React.DetailedHTMLProps, HTMLObjectElement>; ol: React.DetailedHTMLProps, HTMLOListElement>; optgroup: React.DetailedHTMLProps, HTMLOptGroupElement>; option: React.DetailedHTMLProps, HTMLOptionElement>; output: React.DetailedHTMLProps, HTMLElement>; p: React.DetailedHTMLProps, HTMLParagraphElement>; param: React.DetailedHTMLProps, HTMLParamElement>; picture: React.DetailedHTMLProps, HTMLElement>; pre: React.DetailedHTMLProps, HTMLPreElement>; progress: React.DetailedHTMLProps, HTMLProgressElement>; q: React.DetailedHTMLProps, HTMLQuoteElement>; rp: React.DetailedHTMLProps, HTMLElement>; rt: React.DetailedHTMLProps, HTMLElement>; ruby: React.DetailedHTMLProps, HTMLElement>; s: React.DetailedHTMLProps, HTMLElement>; samp: React.DetailedHTMLProps, HTMLElement>; slot: React.DetailedHTMLProps, HTMLSlotElement>; script: React.DetailedHTMLProps, HTMLScriptElement>; section: React.DetailedHTMLProps, HTMLElement>; select: React.DetailedHTMLProps, HTMLSelectElement>; small: React.DetailedHTMLProps, HTMLElement>; source: React.DetailedHTMLProps, HTMLSourceElement>; span: React.DetailedHTMLProps, HTMLSpanElement>; strong: React.DetailedHTMLProps, HTMLElement>; style: React.DetailedHTMLProps, HTMLStyleElement>; sub: React.DetailedHTMLProps, HTMLElement>; summary: React.DetailedHTMLProps, HTMLElement>; sup: React.DetailedHTMLProps, HTMLElement>; table: React.DetailedHTMLProps, HTMLTableElement>; template: React.DetailedHTMLProps, HTMLTemplateElement>; tbody: React.DetailedHTMLProps, HTMLTableSectionElement>; td: React.DetailedHTMLProps, HTMLTableDataCellElement>; textarea: React.DetailedHTMLProps, HTMLTextAreaElement>; tfoot: React.DetailedHTMLProps, HTMLTableSectionElement>; th: React.DetailedHTMLProps, HTMLTableHeaderCellElement>; thead: React.DetailedHTMLProps, HTMLTableSectionElement>; time: React.DetailedHTMLProps, HTMLElement>; title: React.DetailedHTMLProps, HTMLTitleElement>; tr: React.DetailedHTMLProps, HTMLTableRowElement>; track: React.DetailedHTMLProps, HTMLTrackElement>; u: React.DetailedHTMLProps, HTMLElement>; ul: React.DetailedHTMLProps, HTMLUListElement>; "var": React.DetailedHTMLProps, HTMLElement>; video: React.DetailedHTMLProps, HTMLVideoElement>; wbr: React.DetailedHTMLProps, HTMLElement>; webview: React.DetailedHTMLProps, HTMLWebViewElement>; // SVG svg: React.SVGProps; animate: React.SVGProps; // TODO: It is SVGAnimateElement but is not in TypeScript's lib.dom.d.ts for now. animateMotion: React.SVGProps; animateTransform: React.SVGProps; // TODO: It is SVGAnimateTransformElement but is not in TypeScript's lib.dom.d.ts for now. circle: React.SVGProps; clipPath: React.SVGProps; defs: React.SVGProps; desc: React.SVGProps; ellipse: React.SVGProps; feBlend: React.SVGProps; feColorMatrix: React.SVGProps; feComponentTransfer: React.SVGProps; feComposite: React.SVGProps; feConvolveMatrix: React.SVGProps; feDiffuseLighting: React.SVGProps; feDisplacementMap: React.SVGProps; feDistantLight: React.SVGProps; feDropShadow: React.SVGProps; feFlood: React.SVGProps; feFuncA: React.SVGProps; feFuncB: React.SVGProps; feFuncG: React.SVGProps; feFuncR: React.SVGProps; feGaussianBlur: React.SVGProps; feImage: React.SVGProps; feMerge: React.SVGProps; feMergeNode: React.SVGProps; feMorphology: React.SVGProps; feOffset: React.SVGProps; fePointLight: React.SVGProps; feSpecularLighting: React.SVGProps; feSpotLight: React.SVGProps; feTile: React.SVGProps; feTurbulence: React.SVGProps; filter: React.SVGProps; foreignObject: React.SVGProps; g: React.SVGProps; image: React.SVGProps; line: React.SVGProps; linearGradient: React.SVGProps; marker: React.SVGProps; mask: React.SVGProps; metadata: React.SVGProps; mpath: React.SVGProps; path: React.SVGProps; pattern: React.SVGProps; polygon: React.SVGProps; polyline: React.SVGProps; radialGradient: React.SVGProps; rect: React.SVGProps; stop: React.SVGProps; switch: React.SVGProps; symbol: React.SVGProps; text: React.SVGProps; textPath: React.SVGProps; tspan: React.SVGProps; use: React.SVGProps; view: React.SVGProps; } } }`; ================================================ FILE: packages/client/src/components/ConfirmAlert/index.js ================================================ import React from 'react'; import Modal from 'react-modal'; import { Icons } from '@dhiwise/icons'; import { Button } from '../Button'; import { Description } from '../Description'; import { Heading } from '../Heading'; const PopupCss = { closebutton: 'absolute right-6 top-6 focus:outline-none', closebuttonimg: 'w-5', popupwrap: 'w-full bg-gray-black border-1 border-gray-100 rounded-lg', overlay: 'fixed top-0 bottom-0 w-full h-full z-10', popupbody: 'py-10 px-5 text-center', }; const customStyles = { content: { top: '50%', left: '50%', right: 'auto', bottom: 'auto', marign: 'auto', transform: 'translate(-50%, -50%)', border: 'none', background: 'transparent', overflow: 'visible', }, }; export const ConfirmationAlert = ({ handleSubmit, children, shortDesc, closeModal, isOpen, title = 'Are you sure?', description = '', okText = 'Delete', variant = 'danger', handleClose, descVarint, isLoading = false, overlayClass, size, titleVariant, }) => (

{closeModal && ( )}
{title} {!!description && {description}} {children} {!!(okText || handleClose || handleSubmit) && (
{!!handleClose && } {!!handleSubmit && }
)} {shortDesc && {shortDesc}}
); ================================================ FILE: packages/client/src/components/ContainerBox/index.js ================================================ import React from 'react'; import PropTypes from 'prop-types'; export const ContainerBox = ({ className, children, }) => (
{children}
); ContainerBox.propTypes = { /** * Additional classname */ className: PropTypes.string, }; ContainerBox.defaultProps = { className: '', }; ================================================ FILE: packages/client/src/components/Count/index.js ================================================ import React from 'react'; export const Count = ({ total, className }) => (
{total}
); ================================================ FILE: packages/client/src/components/DatePicker/datepicker.css ================================================ .datepickerBox.react-datepicker{ background-color: var(--color-bg-white); border: 1px solid var(--color-gray-90); box-shadow: rgb(0 0 0 / 6%) 0px 8px 16px 0px; display: flex; font-family: var(--font-famliy); } .datepickerBox .react-datepicker__header{ background-color: var(--color-bg-white); border-bottom: 1px solid var(--color-gray-90); } .react-datepicker__navigation--previous{ border-right-color: var(--color-bg-black) !important; } .react-datepicker__navigation--next{ border-left-color: var(--color-bg-black) !important; } .datepickerBox .react-datepicker__current-month, .datepickerBox .react-datepicker-time__header, .datepickerBox .react-datepicker-year-header, .datepickerBox .react-datepicker__day-name, .datepickerBox .react-datepicker__day, .datepickerBox .react-datepicker__time-name, .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{ color: var(--color-text-primary); font-size: 0.75rem; } .datepickerBox .react-datepicker__current-month, .datepickerBox .react-datepicker-time__header{ font-size: 1rem; } .datepickerBox .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name{ width: 1.75rem !important; line-height: 1.75rem !important; margin: 3px !important; } .react-datepicker__month { margin: 4px !important; } .react-datepicker-popper[data-placement^="bottom"] .datepickerBox .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .datepickerBox .react-datepicker__triangle::before{ border-bottom-color:var(--color-bg-white); } .react-datepicker-popper[data-placement^="top-start"] .datepickerBox .react-datepicker__triangle::before{ border-top-color:var(--color-gray-90); } .react-datepicker-popper[data-placement^="bottom"] .datepickerBox .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top-start"] .datepickerBox .react-datepicker__triangle{ left: 0 !important; right: 0 !important; margin-left: auto; margin-right: auto; } .react-datepicker-popper[data-placement^="top-start"] .datepickerBox .react-datepicker__triangle{ border-top-color: var(--color-gray-200); } .react-datepicker-popper[data-placement^="bottom"] .datepickerBox .react-datepicker__triangle::before{ border-bottom-color: var(--color-gray-90); } .react-datepicker-popper{ z-index: 100 !important; } .datepickerBox button:focus{ outline: none; } .datepickerBox .react-datepicker__day--selected, .datepickerBox .react-datepicker__day--selected:hover, .datepickerBox .react-datepicker__day--in-selecting-range:hover, .datepickerBox .react-datepicker__day--in-range:hover, .datepickerBox .react-datepicker__month-text--selected:hover, .datepickerBox .react-datepicker__month-text--in-selecting-range:hover, .datepickerBox .react-datepicker__month-text--in-range:hover, .datepickerBox .react-datepicker__quarter-text--selected:hover, .datepickerBox .react-datepicker__quarter-text--in-selecting-range:hover, .datepickerBox .react-datepicker__quarter-text--in-range:hover, .datepickerBox .react-datepicker__year-text--selected:hover, .datepickerBox .react-datepicker__year-text--in-selecting-range:hover, .datepickerBox .react-datepicker__year-text--in-range:hover, .datepickerBox .react-datepicker__day:hover, .datepickerBox .react-datepicker__month-text:hover, .datepickerBox .react-datepicker__quarter-text:hover, .datepickerBox .react-datepicker__year-text:hover, .datepickerBox .react-datepicker__day--keyboard-selected, .datepickerBox .react-datepicker__month-text--keyboard-selected, .datepickerBox .react-datepicker__quarter-text--keyboard-selected, .datepickerBox .react-datepicker__year-text--keyboard-selected{ background-color: var(--color-bg-primary); color: #fff; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{ padding-right: 1px; } /* timepicker */ .react-datepicker__time-container{ border-left: 1px solid var(--color-gray-90) !important; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{ background: var(--color-bg-white); color: var(--color-text-primary); } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover, .react-datepicker__time-list-item--selected{ background-color: var(--color-bg-primary) !important; color: #fff; } .react-datepicker__input-container input{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-right: 28px; } .react-datepicker-wrapper .react-datepicker__close-icon::after{ background-color: transparent !important; height: 18px; width: 18px; font-size: 20px; } .react-datepicker__close-icon{ background-color: var(--color-gray-input) !important; z-index: 1; right: 4px !important; padding: 3px 4px !important; } .react-datepicker__day--disabled, .react-datepicker__time-list-item--disabled{ cursor: not-allowed !important; opacity: 0.6 !important; color: var(--color-text-primary) !important; } .react-datepicker__day--disabled:hover, .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item.react-datepicker__time-list-item--disabled:hover{ background-color: transparent !important; } .react-datepicker__day--keyboard-selected { background-color: transparent !important; } .react-datepicker__day--keyboard-selected:hover { background-color: var(--color-bg-primary) !important } ================================================ FILE: packages/client/src/components/DatePicker/datepickerCss.js ================================================ export const datepickerCss = { datepickerWrap: '', datepickerLabel: 'mb-1.5 text-primary-text text-sm block w-full font-semibold leading-5', desc: 'mt-1', errorClass: 'text-error text-sm mt-1 block', datepickerWrapClass: 'relative', datePickerInput: 'font-body text-primary-text bg-gray-input border-1 border-gray-70 placeholder-primary font-normal w-full focus:border-primary-dark focus:outline-none leading-normal rounded-3', datepickernormal: 'py-2 px-2.5 text-sm', datepickersmall: 'py-1 px-2 text-xs', datepickermedium: 'py-1.5 px-2 text-xs', }; ================================================ FILE: packages/client/src/components/DatePicker/index.js ================================================ import React from 'react'; import { Icons } from '@dhiwise/icons'; import DatePicker from 'react-datepicker'; import PropTypes from 'prop-types'; import { datepickerCss } from './datepickerCss'; import { Description } from '../Description'; import 'react-datepicker/dist/react-datepicker.css'; import './datepicker.css'; export const Datepicker = ({ label, desc, placeholder, labelClassName, error, size = 'normal', onChange, WrapClassName, dateTimeFormat = 'MM-dd-yyyy hh:mm:ss a', ...otherProps }) => { // eslint-disable-next-line no-unused-vars // const [startDate, setStartDate] = useState(otherProps.value ? new Date(otherProps.value) : new Date()); const datepickerRef = React.useRef(null); function handleClickDatepickerIcon() { // OPENS UP THE DATEPICKER WHEN THE CALENDAR ICON IS CLICKED FOR THE INPUT FIELD const datepickerElement = datepickerRef?.current; datepickerElement?.setFocus(); } const sizeCss = `${datepickerCss[[`datepicker${size}`]]}`; return (
{!!label && (
{ !!label && }
)}
{ // setStartDate(date); onChange?.(date); }} // eslint-disable-next-line react/jsx-props-no-spreading {...otherProps} />
handleClickDatepickerIcon()} >
{!!desc && {desc}} {!!error && {error}}
); }; Datepicker.propTypes = { size: PropTypes.oneOf(['normal', 'small', 'medium']), }; ================================================ FILE: packages/client/src/components/Description/descriptionCss.js ================================================ export const DescriptionCss = { // decWrap: 'text-body-text text-sm leading-snug', descnormal: 'text-body-text text-xs leading-5 xxl:leading-5 xxl:text-sm', desclight: 'text-primary-text text-sm md:text-base leading-5 sm:leading-6 font-normal', descsubTitle: 'text-primary-text text-sm md:text-lg leading-5 md:leading-6 font-normal', }; ================================================ FILE: packages/client/src/components/Description/index.js ================================================ import React from 'react'; import PropTypes from 'prop-types'; import { DescriptionCss } from './descriptionCss'; export const Description = ({ children, className, variant, style, }) => { const variantClass = `${DescriptionCss[[`desc${variant}`]]}`; return (

{children}

); }; Description.propTypes = { className: PropTypes.string, variant: PropTypes.oneOf(['normal', 'subTitle', 'light']), }; Description.defaultProps = { className: '', variant: 'normal', }; ================================================ FILE: packages/client/src/components/DropdownMenu/Css.js ================================================ const Css = { pointer: { cursor: 'pointer', }, menuList: { margin: '2px', }, disabledItem: { pointerEvents: 'none', cursor: 'default', color: 'grey', }, gear: { fontSize: '1.7em', cursor: 'pointer', color: 'black', padding: '14px', border: 'none', }, triangle: { fontSize: '0.9em', cursor: 'pointer', color: '#000000', padding: '14px', border: 'none', }, imageTrigger: { height: '50px', width: '50px', cursor: 'pointer', padding: '3px', border: 'none', }, textTrigger: { cursor: 'pointer', padding: '14px', border: 'none', fontWeight: 'bold', }, menu: { position: 'relative', // display: 'inline-block', }, menuItem: { float: 'left', }, menuContent: { display: 'none', position: 'absolute', left: '0px', zIndex: '9999', backgroundColor: '#f9f9f9', minWidth: '300px', // minwidth: '300px', padding: '12px', overflow: 'auto', boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)', }, show: { display: 'block', }, }; export default Css; ================================================ FILE: packages/client/src/components/DropdownMenu/DropdownMenu.js ================================================ import * as React from 'react'; import useOnClickOutside from 'use-onclickoutside'; // import { useOutsideClick } from '../../hooks'; import { useBoolean } from '../hooks'; import DefaultCss from './Css'; const DropdownMenu = React.forwardRef((props, ref) => { const [open, , setFalse, setToggle] = useBoolean(false); const clickRef = React.useRef(); useOnClickOutside(clickRef, setFalse); React.useEffect(() => { if (open) setToggle(); }, [props.closeOnSelect]); React.useImperativeHandle(ref, () => ({ hideDropDown: setFalse })); const getCss = React.useCallback(() => { const propsCss = { ...props.css }; const css = { ...DefaultCss }; if (propsCss) { Object.keys(propsCss).forEach((key) => { css[key] = { ...DefaultCss[key], ...propsCss[key] }; }); } return css; }, [props.css]); const menuStyles = React.useMemo(() => { const css = getCss(); const menuStyle = JSON.parse(JSON.stringify(css.menuContent)); // Clone the current style const position = props.position === undefined ? 'right' : props.position; const supportedPositions = ['left', 'center', 'right']; if (supportedPositions.indexOf(position.toLowerCase()) === -1) { throw new Error("The value for 'position' prop is not supported for DropdownMenu. Try 'left', 'center' or 'right'."); } if (position) { let baseWidth = parseInt( DefaultCss.menuContent.minWidth.replace('px', ''), 10, ); let offset = 0; baseWidth -= 40; // We need to use negative numbers as we are offsetting menu to the left if (position === 'center') { offset = (baseWidth / 2) * -1; } if (position === 'left') { offset = baseWidth * -1; } menuStyle.left = `${offset.toString()}px`; menuStyle.display = open ? 'block' : 'none'; } return menuStyle; }, [open, props.position]); return (
{React.cloneElement(props.placeholder(), { onClick: setToggle })}
{open && props.children}
); }); DropdownMenu.displayName = 'DropdownMenu'; export default DropdownMenu; ================================================ FILE: packages/client/src/components/DropdownMenu/Dropdown_bkp.js ================================================ import React from 'react'; import DefaultCss from './Css'; // import { MenuBox } from '../MenuList'; let instances = 0; class DropdownMenu extends React.Component { constructor(props) { super(props); this.toggleMenu = this.toggleMenu.bind(this); instances += 1; this.MENUITEMS_DIV = `__react_bs_dd_menuItems_${instances}`; this.CARAT_CLASS = `__react_bs_dd_carat_${instances}`; this.TRIGGER_CLASS = `__react_bs_dd_trigger_${instances}`; } // eslint-disable-next-line camelcase UNSAFE_componentWillMount(nextProps) { const { TRIGGER_CLASS } = this; const { MENUITEMS_DIV } = this; const { CARAT_CLASS } = this; // eslint-disable-next-line func-names window.addEventListener('click', function (e) { if (nextProps !== this.props) { const klass = e.target.className; const carat = document.getElementById(CARAT_CLASS); const menuItemDiv = document.getElementById(MENUITEMS_DIV); if (menuItemDiv && menuItemDiv.dataset.reactbsdditems === MENUITEMS_DIV) { if ( klass !== `${MENUITEMS_DIV} show` && klass !== TRIGGER_CLASS && !klass.lastIndexOf('glyphicon', 0) === 0 ) { menuItemDiv.classList.remove('show'); if (carat) { carat.className = 'glyphicon glyphicon-triangle-bottom'; } } } } }); } getTrigger() { const css = this.getCss(); const iconCss = { ...DefaultCss.gear }; if (this.props.iconColor) { iconCss.color = this.props.iconColor; } // Override iconColor if it is present in css prop if (this.props.css && this.props.css.gear && this.props.css.gear.color) { iconCss.color = this.props.css.gear.color; } if (this.props.triggerType && this.props.trigger) { const triggerStyle = css.imageTrigger; const caratStyle = css.triangle; switch (this.props.triggerType.toLowerCase()) { case 'image': if (this.props.triggerWidth) { triggerStyle.width = this.props.triggerWidth; } if (this.props.triggerHeight) { triggerStyle.height = this.props.triggerHeight; } if (this.props.caratColor) { caratStyle.color = this.props.caratColor; } return (
trigger
); case 'text': return (
{this.props.trigger}   
); case 'icon': return ( ); case 'component': return (
); default: throw new Error("The value for DropdownMenu 'triggerType' is not supported for DropdownMenu. Try 'image', 'text' or 'icon'."); } } else { return ( {this.props.Name} ); } } getMenuStyle() { const css = this.getCss(); const menuStyle = JSON.parse(JSON.stringify(css.menuContent)); // Clone the current style const position = this.props.position === undefined ? 'right' : this.props.position; const supportedPositions = ['left', 'center', 'right']; if (supportedPositions.indexOf(position.toLowerCase()) === -1) { throw new Error("The value for 'position' prop is not supported for DropdownMenu. Try 'left', 'center' or 'right'."); } if (position) { let baseWidth = parseInt( DefaultCss.menuContent.minWidth.replace('px', ''), 10, ); let offset = 0; baseWidth -= 40; // We need to use negative numbers as we are offsetting menu to the left if (position === 'center') { offset = (baseWidth / 2) * -1; } if (position === 'left') { offset = baseWidth * -1; } menuStyle.left = `${offset.toString()}px`; } return menuStyle; } getChildren() { return React.Children.map( this.props.children, (child) => React.cloneElement(child, { css: this.props.css }, null), ); } getCss() { const propsCss = { ...this.props.css }; const css = { ...DefaultCss }; if (propsCss) { Object.keys(propsCss).forEach((key) => { css[key] = { ...DefaultCss[key], ...propsCss[key] }; }); } return css; } dropdownTitle() { return (

{this.props.title}

); } fadeIn(element) { this.element.style.opacity = 0; const tick = function ticker() { this.element.style.opacity = +element.style.opacity + 0.04; if (+element.style.opacity < 1) { if (requestAnimationFrame) { requestAnimationFrame(tick); } else { setTimeout(tick, 16); } } }; tick(); } toggleArrow() { const carat = document.getElementById(this.CARAT_CLASS); if (carat) { if (carat.className === 'glyphicon glyphicon-triangle-top') { carat.className = 'glyphicon glyphicon-triangle-bottom'; } else { carat.className = 'glyphicon glyphicon-triangle-top'; } } } toggleMenu(e) { e.stopPropagation(); const items = document.getElementById(this.MENUITEMS_DIV); if (items) { items.classList.toggle('show'); if (this.props.fadeIn && this.props.fadeIn === 'true') { this.fadeIn(document.getElementById(this.MENUITEMS_DIV)); } } } render() { if (this.props.children.length === 0) { throw new Error('DropdownMenu must have at least one MenuItem child.'); } return (
{this.getTrigger()}
{this.props.dropdownTitle && <>{this.dropdownTitle()}} {this.props.isChildren ? <>{this.props.children} : <>{this.getChildren()}}
); } } export default DropdownMenu; ================================================ FILE: packages/client/src/components/DropdownMenu/MenuItem.js ================================================ import * as React from 'react'; import PropTypes from 'prop-types'; import DefaultCss from './Css'; import { DropdownCss } from './dropdown'; const MenuItem = (props) => { const [linkStyle, setLinkStyle] = React.useState(DefaultCss.pointer); React.useEffect(() => { // Need to check disabled also, otherwise // this might override the disabled useState hook if (props.linkStyle && !props.disabled) { setLinkStyle(props.linkStyle); } }, [props.linkStyle]); React.useEffect(() => { if (props.disabled) { setLinkStyle(DefaultCss.disabledItem); } }, [props.disabled]); const getSeparatorCss = () => { const resultCss = { ...DefaultCss }; if (props.css) { resultCss.separator = { ...DefaultCss.separator, ...props.css.separator }; } return resultCss; }; if (props.type) { if (props.type.toLowerCase() === 'separator') { const css = getSeparatorCss(); return (
); } throw new Error("The value for prop 'type' is not supported for MenuItem. The only supported type is 'separator'."); } else if (props.location) { return ( ); } else { const selectedClass = props.selected ? 'bg-primary-dark text-defaultWhite' : ''; return (
{props.text}
{!!props.icon &&
{props.icon}
}
); } }; MenuItem.propTypes = { // Renders a disabled MenuItem disabled: PropTypes.bool, // Specifies type of MenuItem type: PropTypes.string, // Inner Text of MenuItem text: PropTypes.string, // Navigation Location location: PropTypes.string, onClick: PropTypes.func, }; export default MenuItem; ================================================ FILE: packages/client/src/components/DropdownMenu/dropdown.js ================================================ export const DropdownCss = { dropdownitemWrap: 'relative flex items-center justify-between pr-2 hover:bg-primary-dark hover:text-defaultWhite text-primary-text whitespace-nowrap', // dropdown-menu dropdownitem: 'px-2 py-1 block w-full text-sm', }; ================================================ FILE: packages/client/src/components/DropdownMenu/index.js ================================================ import DropdownMenu from './DropdownMenu'; import MenuItem from './MenuItem'; export { DropdownMenu, MenuItem, }; ================================================ FILE: packages/client/src/components/Error/index.js ================================================ import React from 'react'; import { Tab, Tabs, TabList, TabPanel, } from 'react-tabs'; import Drawer from 'rc-drawer'; import { Icons } from '@dhiwise/icons'; import { TabCSs } from '../../assets/css/tab'; import { Count } from '../Count'; import { DrawerClose } from '../ReactDrawer/DrawerClose'; import { MODEL_ERROR_TABS } from '../../constant/model'; const NoError = React.memo(() => (
No Errors found.
)); NoError.displayName = 'NoError'; export const ErrorList = React.memo(({ isError, isWarring, error, attribute, }) => { if (!error) { return ( ); } return (
{isError && ( <> {' '} )} {isWarring && <>}
{error.name}
{!!attribute && ( <>
{attribute}
)}
{error.message}
{/*
*/}
); }); ErrorList.displayName = 'ErrorList'; export const Error = React.memo(({ isOpen, handleCancel, error, modelErrors = [], modelErrCount = 0, isModelTab = false, handletabChange, }) => (
{/* */}
handletabChange && handletabChange(MODEL_ERROR_TABS.JSON_ERROR)}> JSON error { isModelTab && ( handletabChange && handletabChange(MODEL_ERROR_TABS.MODEL_ERROR)}> Model error ) }
{ isModelTab && (
{ modelErrCount === 0 ? : modelErrors.map((x) => x.error.map((e) => ( ))) } {/* */}
) } {/* */}
)); Error.displayName = 'Error'; ================================================ FILE: packages/client/src/components/ErrorMsg/errorCss.js ================================================ export const errorCss = { errorClass: 'text-error text-sm mt-1 block', }; ================================================ FILE: packages/client/src/components/ErrorMsg/index.js ================================================ import React from 'react'; import { errorCss } from './errorCss'; const ErrorMsg = ({ error, className = '' }) => ( <> {error} ); export default ErrorMsg; ================================================ FILE: packages/client/src/components/Heading/headingCss.js ================================================ export const HeadingCss = { pageTitle: 'block text-primary-text font-title', titleh1: 'xl:text-5xl md:text-4xl sm:text-2xl leading-tight font-semibold', titleh2: 'md:text-3xl sm:text-xl font-semibold', titleh2Light: 'md:text-3xl sm:text-xl font-normal', titleh3: 'text-2xl leading-10 font-medium', titleh3Light: 'text-2xl leading-10 font-normal', titleh4: 'text-xl font-semibold leading-8', titleh4Light: 'text-xl font-normal leading-8', titleh5: 'text-base font-semibold', titleh5Light: 'text-base font-normal', titleh6: 'text-sm font-semibold', titleh6Light: 'text-sm font-normal', titlesmall: 'text-base font-semibold', titlenormal: 'text-3xl leading-10 font-semibold', }; ================================================ FILE: packages/client/src/components/Heading/index.js ================================================ import React from 'react'; import PropTypes from 'prop-types'; import { HeadingCss } from './headingCss'; export const Heading = ({ className, children, variant }) => { const variantClass = `${HeadingCss[[`title${variant}`]]}`; return

{children}

; }; Heading.propTypes = { className: PropTypes.string, variant: PropTypes.oneOf(['small', 'normal', 'h3', 'h4', 'h1', 'h2', 'h5', 'h6', 'h2Light', 'h3Light', 'h4Light', 'h5ight', 'h6Light']), }; Heading.defaultProps = { className: '', variant: 'normal', }; ================================================ FILE: packages/client/src/components/IconBox/DeleteIcon.js ================================================ import React from 'react'; import PropTypes from 'prop-types'; import ReactTooltip from 'react-tooltip'; import { iconBoxCss } from './iconBoxCss'; export const DeleteIcon = ({ icon, tooltip, disabled, size, className, onClick, }) => { const sizeCss = `${iconBoxCss[[`Icon${size}`]]}`; const disableClass = disabled ? `${iconBoxCss.boxdisabled}` : ''; return (
{ icon } {!!tooltip && {tooltip}}
); }; DeleteIcon.propTypes = { /** * Additional Icon */ icon: PropTypes.string, /** * Additional icon true false */ size: PropTypes.oneOf(['small', 'normal']), /** * is Button disabled */ disabled: PropTypes.bool, /** * Additional classname */ className: PropTypes.string, }; DeleteIcon.defaultProps = { icon: null, size: 'normal', // iconSize: 'normal', className: '', disabled: false, }; ================================================ FILE: packages/client/src/components/IconBox/iconBoxCss.js ================================================ export const iconBoxCss = { boxprimary: 'bg-primary-dark hover:bg-primary-hoverdark primaryShadow', boxsucess: 'bg-activebg successShadow', boxsucess_outine: 'border border-gray-activebg', boxdanger: 'bg-deactivebg dangerShadow', boxdanger_outine: 'border border-gray-deactivebg dangerShadow', boxoutline: 'border-1 border-gray-70 hover:bg-gray-200 outlineShadow', boxdashed: 'border-1 text-base border-dashed border-primary-buttonOutline ', boxsecondary: 'border-gray-300 border-1 bg-gray-200 hover:bg-gray-100 secondaryShadow', boxrounded: 'rounded-3', boxroundedFull: 'rounded-full', boxicon: 'cursor-pointer flex items-center justify-center focus:outline-none', boxnormal: 'h-9 w-9', boxmedium: 'w-8 h-8', boxsmallmedium: 'w-7 h-7', boxextraSmall: 'h-4 w-4', boxsmall: 'h-6 w-6', boxImgiconMedium: 'w-3 h-3', boxImgiconExtraSmall: 'xl:w-2 xl:h-2 xxl:w-2 h-2', boxImgicon: 'w-4 h-4 flex items-center', boxImgiconSmall: 'w-3 h-3 flex items-center', boxghost: 'h-auto', Iconsmall: 'w-4 h-auto', Iconnormal: 'w-5 h-5', boxdisabled: 'cursor-not-allowed opacity-20', }; ================================================ FILE: packages/client/src/components/IconBox/index.js ================================================ import React from 'react'; import PropTypes from 'prop-types'; import ReactTooltip from 'react-tooltip'; import { iconBoxCss } from './iconBoxCss'; export const IconBox = ({ icon, tooltip, variant, disabled, size, shape, className, onClick, iconClass, tooltipPlace, }) => { const variantClass = `${iconBoxCss[[`box${variant}`]]}`; const sizeCss = `${iconBoxCss[[`box${size}`]]}`; const shapeClass = `${iconBoxCss[[`box${shape}`]]}`; const disableClass = disabled ? `${iconBoxCss.boxdisabled}` : ''; return ( ); }; IconBox.propTypes = { variant: PropTypes.oneOf([ 'primary', 'outline', 'ghost', 'dashed', 'secondary', 'sucess', 'sucess_outine', 'danger', 'danger_outinemedium', ]), /** * Shape of button */ shape: PropTypes.oneOf(['square', 'rounded', 'roundedFull']), /** * Additional Icon */ icon: PropTypes.node, /** * Additional icon true false */ size: PropTypes.oneOf(['extraSmall', 'small', 'smallmedium', 'medium', 'normal']), /** * is Button disabled */ disabled: PropTypes.bool, /** * Additional classname */ className: PropTypes.string, }; IconBox.defaultProps = { variant: 'primary', // icon: null, size: 'normal', // iconSize: 'normal', className: '', disabled: false, shape: 'rounded', }; ================================================ FILE: packages/client/src/components/InlineHeader/index.js ================================================ import React from 'react'; import { Icons } from '@dhiwise/icons'; import { MAX_INPUT_FIELD_LIMIT } from '../../constant/common'; import { DB_TYPE, pluralizeTableName } from '../../constant/model'; import { nodeKeyRegex } from '../../utils/regex'; import { Heading, Tag } from '../index'; // import { PopOver } from '../PopOver'; import { variantConstant } from '../Tag'; export const InlineHeader = ({ defaultValue, currentId, isDisable = false, isActiveButton = false, onBlurEvent = () => {}, edit = false, setShowEdit = () => {}, setHideEdit = () => {}, titlePlaceHolder = 'Name', titleLength = MAX_INPUT_FIELD_LIMIT.title, isDisableNameEdit = false, titleRegex = nodeKeyRegex, showTableName = false, dbType = '', currentApplicationCode = '', }) => { const [internalState, setInternalState] = React.useState(); // const descRef = React.useRef(null); React.useEffect(() => { setInternalState(defaultValue); }, [defaultValue]); React.useEffect(() => { setHideEdit(); }, [currentId]); const blurEvent = (key, value, modelId) => { if (!value || (defaultValue[key] === value)) { setInternalState((prevData) => ({ ...prevData, [key]: defaultValue[key] })); return; } if (key === 'description') setHideEdit(); onBlurEvent(key, value, modelId); }; return (
{!edit && ( <>
{internalState?.name || internalState?.fileName} {(!isDisable && !isDisableNameEdit) && ( )} {isActiveButton && ( !isDisable && onBlurEvent('isActive', !internalState?.isActive)} /> )}
{/* { (!internalState?.description || internalState.description?.length <= 60) ? (internalState?.description || 'Description') : ( <> {internalState?.description?.slice(0, 60)} {internalState?.description} } /> ) } */} )} {edit && ( <> { if ((!e.target.value || titleRegex.test(e.target.value)) && e.target.value?.length <= titleLength) { setInternalState((prevData) => ({ ...prevData, [defaultValue?.name ? 'name' : 'fileName']: e.target.value })); } }} onBlur={(e) => { blurEvent(defaultValue?.name ? 'name' : 'fileName', e.currentTarget.value, defaultValue?._id); setHideEdit(); }} onKeyDown={(e) => { if (e.key === 'Enter') { // descRef.current?.focus(); blurEvent(defaultValue?.name ? 'name' : 'fileName', e.currentTarget.value, defaultValue?._id); setHideEdit(); } }} /> {/* { if (!e.target.value || e.target.value?.length <= MAX_INPUT_FIELD_LIMIT.description) { setInternalState((prevData) => ({ ...prevData, description: e.target.value })); } }} onKeyDown={(e) => { if (e.key === 'Enter') { blurEvent('description', e.currentTarget.value, defaultValue?._id); setHideEdit(); } }} onBlur={(e) => { blurEvent('description', e.currentTarget.value, defaultValue?._id); setHideEdit(); }} /> */} )} {showTableName && ( // display table/collection name field in Model
{`${(dbType === DB_TYPE.MONGODB) ? 'Collection' : 'Table'} name:`}
{internalState && pluralizeTableName(internalState?.name, currentApplicationCode)}
)}
); }; ================================================ FILE: packages/client/src/components/Input/DecimalInput.js ================================================ import React, { forwardRef, useEffect } from 'react'; import PropTypes from 'prop-types'; import { regex } from '../utils'; import { InputCss } from './inputCss'; import { Description } from '../Description'; const getFormattedValue = (value = '', regexToValidate) => (value.replace(regexToValidate, '')); /** * Primary UI component for Input */ export const MAX_VALUE = { DOUBLE: 1.79769313486231570e+308, FLOAT: 3.40282346638528860e+38, }; export const DecimalInput = forwardRef(({ wrapperClass = '', label = '', placeholder = '', disabled = false, error = '', onChange = () => { }, value = '', WrapClassName, inputClassName = '', fixLength, size = 'normal', desc, dark, maxValue, allowPosNeg = false, // allow positive negative both value ...restProps }, ref) => { const regexToValidate = allowPosNeg ? regex.posNegDecimalFloatDouble : regex.decimalFloatDouble; // const [internalValue, setInternalValue] = React.useState(getFormattedValue(value)); const [internalValue, setInternalValue] = React.useState(); const wrapperClasses = ['spark-input']; const inputClasses = [InputCss.inputBlock]; const disableClass = disabled ? `${InputCss.inputdisabled}` : ''; if (error) { wrapperClasses.push('spark-error-wrapper'); } if (wrapperClass) { wrapperClasses.push(wrapperClass); } if (inputClassName) { inputClasses.push(inputClassName); } useEffect(() => { function setNumValue() { if (regexToValidate.test(`${value}`)) setInternalValue(value); else setInternalValue(getFormattedValue(value, regexToValidate)); } if (maxValue) { if ((value <= MAX_VALUE[maxValue])) setNumValue(); } else if (fixLength) { if ((value?.length <= fixLength)) setNumValue(); } else setNumValue(); }, [value, fixLength, maxValue]); const handleChange = (e) => { const newValue = e.target.value; if (!newValue || regexToValidate.test(`${newValue}`)) { if (maxValue) { if ((value <= MAX_VALUE[maxValue])) { setInternalValue(newValue); onChange && onChange(newValue); } } else if (fixLength) { if (newValue.length <= fixLength) { setInternalValue(newValue); onChange && onChange(newValue); } } else { setInternalValue(newValue); onChange && onChange(newValue); } } }; const sizeCss = `${InputCss[[`input${size}`]]}`; return (
{ !!label && } {!!desc && {desc}}
{!!error && {error}}
); }); DecimalInput.displayName = 'DecimalInput'; DecimalInput.propTypes = { /** * Input label */ label: PropTypes.string, size: PropTypes.oneOf(['normal', 'small']), /** * class which wraps whole component, label and input */ wrapperClass: PropTypes.string, /** * class which wraps input */ inputWrapperClass: PropTypes.string, /** * does input have any error */ error: PropTypes.string, /** * is Input disabled */ disabled: PropTypes.bool, /** * Helper text class */ errorClass: PropTypes.string, }; DecimalInput.defaultProps = { label: '', error: '', disabled: false, }; ================================================ FILE: packages/client/src/components/Input/NegativeInput.js ================================================ import React, { forwardRef, useEffect } from 'react'; import PropTypes from 'prop-types'; import { regex } from '../utils'; import { InputCss } from './inputCss'; const getFormattedValue = (value) => value.replace(regex.negative, ''); /** * Primary UI component for Input */ export const NegativeInput = forwardRef(({ wrapperClass = '', inputWrapperClass = 'spark-input-wrapper', label = '', placeholder = '', type = 'text', disabled = false, errorClass = 'spark-input-error-text', error = '', onChange = () => { }, value = '', ...restProps }, ref) => { const [internalValue, setInternalValue] = React.useState(getFormattedValue(value)); const wrapperClasses = ['spark-input']; if (error) { wrapperClasses.push('spark-error-wrapper'); } if (wrapperClass) { wrapperClasses.push(wrapperClass); } useEffect(() => { setInternalValue(value); }, [value]); useEffect(() => { onChange && onChange(internalValue); }, [internalValue]); const handleChange = (e) => { const newValue = e.target.value; if (!newValue || regex.negative.test(`${newValue}`)) { setInternalValue(newValue); } }; return (
{ !!label && }
{!!error && {error}}
); }); NegativeInput.displayName = 'NegativeInput'; NegativeInput.propTypes = { /** * Input label */ label: PropTypes.string, /** * class which wraps whole component, label and input */ wrapperClass: PropTypes.string, /** * class which wraps input */ inputWrapperClass: PropTypes.string, /** * does input have any error */ error: PropTypes.string, /** * is Input disabled */ disabled: PropTypes.bool, /** * Helper text class */ errorClass: PropTypes.string, }; NegativeInput.defaultProps = { label: '', error: '', disabled: false, }; ================================================ FILE: packages/client/src/components/Input/NumberInput.js ================================================ import React, { forwardRef, useEffect } from 'react'; import PropTypes from 'prop-types'; import { regex } from '../utils'; import { InputCss } from './inputCss'; import { Description } from '../Description'; const getFormattedValue = (value = '', customRegex, regexToValidate) => (customRegex ? value.replace(customRegex, '') : value.replace(regexToValidate, '')); /** * Primary UI component for Input */ export const NumberInput = forwardRef(({ wrapperClass = '', label = '', placeholder = '', type = 'text', disabled = false, error = '', onChange = () => { }, value = '', WrapClassName, inputClassName = '', className, fixLength, desc, size = 'normal', dark, customRegex, extetion, allowInteger = false, ...restProps }, ref) => { const regexToValidate = allowInteger ? regex.integer : regex.positive; // const [internalValue, setInternalValue] = React.useState(getFormattedValue(value, customRegex)); const [internalValue, setInternalValue] = React.useState(); const wrapperClasses = ['spark-input']; const inputClasses = [InputCss.inputBlock]; const disableClass = disabled ? `${InputCss.inputdisabled}` : ''; if (error) { wrapperClasses.push('spark-error-wrapper'); } if (wrapperClass) { wrapperClasses.push(wrapperClass); } if (inputClassName) { inputClasses.push(inputClassName); } useEffect(() => { function setNumValue() { if (regexToValidate.test(`${value}`)) setInternalValue(value); else setInternalValue(getFormattedValue(value, customRegex, regexToValidate)); } if (fixLength) { if ((value?.length <= fixLength)) setNumValue(); } else setNumValue(); }, [value, fixLength, customRegex]); // useEffect(() => { // onChange && onChange(internalValue); // }, [internalValue]); const handleChange = (e) => { const newValue = e.target.value; if (!newValue || (regexToValidate.test(`${newValue}`))) { if (fixLength) { if (newValue.length <= fixLength) { setInternalValue(newValue); onChange && onChange(newValue); } } else { setInternalValue(newValue); onChange && onChange(newValue); } } }; const sizeCss = `${InputCss[[`input${size}`]]}`; return (
{!!(label || desc) && (
{ !!label && }
)}
{!!extetion &&
{extetion}
}
{!!desc && {desc}} {!!error && {error}}
); }); NumberInput.displayName = 'NumberInput'; NumberInput.propTypes = { /** * Input label */ label: PropTypes.string, size: PropTypes.oneOf(['normal', 'small', 'medium']), /** * class which wraps whole component, label and input */ wrapperClass: PropTypes.string, /** * class which wraps input */ inputWrapperClass: PropTypes.string, /** * does input have any error */ error: PropTypes.string, /** * is Input disabled */ disabled: PropTypes.bool, /** * Helper text class */ errorClass: PropTypes.string, }; NumberInput.defaultProps = { label: '', error: '', disabled: false, }; ================================================ FILE: packages/client/src/components/Input/PercentageInput.js ================================================ import React, { forwardRef, useEffect } from 'react'; import PropTypes from 'prop-types'; import { regex } from '../utils'; import { InputCss } from './inputCss'; import { Description } from '../Description'; const getFormattedValue = (value) => value.replace(regex.percentage, ''); /** * Primary UI component for Input */ export const PercentageInput = forwardRef(({ wrapperClass = '', inputWrapperClass = 'spark-input-wrapper', label = '', placeholder = '', type = 'text', disabled = false, errorClass = 'spark-input-error-text', error = '', desc, onChange = () => { }, value = '', ...restProps }, ref) => { const [internalValue, setInternalValue] = React.useState(() => getFormattedValue(value)); const wrapperClasses = ['spark-input']; if (error) { wrapperClasses.push('spark-error-wrapper'); } if (wrapperClass) { wrapperClasses.push(wrapperClass); } useEffect(() => { setInternalValue(value); }, [value]); useEffect(() => { onChange && onChange(internalValue); }, [internalValue]); const handleChange = (e) => { let currentValue = e.target.value; if (currentValue === '.') { currentValue = '0.'; } const isDot = currentValue.indexOf('.') === (currentValue.length - 1); const intValue = +currentValue; if (isDot || (!Number.isNaN(intValue) && (intValue >= 0 && intValue <= 100))) { const formatted = currentValue.match(/^\d+\.?\d{0,2}/); setInternalValue((formatted && formatted[0]) || ''); } }; return (
{!!(label || desc) && (
{ !!label && }
)}
{!!desc && {desc}} {!!error && {error}}
); }); PercentageInput.displayName = 'PercentageInput'; PercentageInput.propTypes = { /** * Input label */ label: PropTypes.string, /** * class which wraps whole component, label and input */ wrapperClass: PropTypes.string, /** * class which wraps input */ inputWrapperClass: PropTypes.string, /** * does input have any error */ error: PropTypes.string, /** * is Input disabled */ disabled: PropTypes.bool, /** * Helper text class */ errorClass: PropTypes.string, }; PercentageInput.defaultProps = { label: '', error: '', disabled: false, }; ================================================ FILE: packages/client/src/components/Input/StringInput.js ================================================ import React, { forwardRef, useEffect } from 'react'; import PropTypes from 'prop-types'; import { regex } from '../utils'; import { InputCss } from './inputCss'; import { Description } from '../Description'; // import './input.css'; /** * Primary UI component for Input */ export const StringInput = forwardRef(({ wrapperClass = '', className, // inputWrapperClass = 'spark-input-wrapper', label = '', placeholder = '', type = 'text', disabled = false, error = '', onChange = () => { }, value = '', minLength, desc, dark, size = 'normal', inputClassName = [], customRegex, ...restProps }, ref) => { const [internalValue, setInternalValue] = React.useState(value); const wrapperClasses = [InputCss.inputwrapper]; const disableClass = disabled ? `${InputCss.inputdisabled}` : ''; const inputClasses = [InputCss.inputBlock, disableClass]; if (error) { wrapperClasses.push('spark-error-wrapper'); } if (wrapperClass) { wrapperClasses.push(wrapperClass); } if (inputClassName) { inputClasses.push(inputClassName); } useEffect(() => { setInternalValue(value); }, [value]); useEffect(() => { onChange && onChange(internalValue); }, [internalValue]); const handleChange = (e) => { const newValue = e.target.value; if (customRegex) { if (!newValue || customRegex.test(newValue)) setInternalValue(newValue); } else if (!newValue || (regex.string.test(newValue) && newValue[0].match(regex.firstSpace))) { setInternalValue(newValue); } }; const sizeCss = `${InputCss[[`input${size}`]]}`; return (
{!!(label || desc) && (
{ !!label && }
)}
{!!desc && {desc}} {!!error && {error}}
); }); StringInput.displayName = 'StringInput'; StringInput.propTypes = { /** * Input label */ label: PropTypes.string, size: PropTypes.oneOf(['normal', 'small', 'medium']), /** * class which wraps whole component, label and input */ wrapperClass: PropTypes.string, /** * class which wraps input */ inputWrapperClass: PropTypes.string, /** * does input have any error */ error: PropTypes.string, /** * is Input disabled */ disabled: PropTypes.bool, /** * Helper text class */ errorClass: PropTypes.string, }; StringInput.defaultProps = { label: '', error: '', disabled: false, }; ================================================ FILE: packages/client/src/components/Input/contryCode.css ================================================ .spark-input-wrapper .react-tel-input{ width: 100%; } .spark-input-wrapper .react-tel-input input{ width: 100%; background-color: var(--color-gray-input); border: 1px solid var(--color-gray-70); border-radius:3px; height: 43px; color: var(--color-text-primary); } .spark-input-wrapper .react-tel-input input:focus{ border: 1px solid var(--color-bg-primary); } .spark-input-wrapper .react-tel-input .flag-dropdown{ border: none; left: 2px; top: 2px; bottom: 2px; background-color: transparent; } .spark-input-wrapper .react-tel-input .selected-flag .arrow{ border-top: 4px solid var(--color--black-svg); } .spark-input-wrapper .react-tel-input .selected-flag .arrow.up{ border-top: none; border-bottom: 4px solid var(--color--black-svg); } .spark-input-wrapper .react-tel-input .selected-flag, .spark-input-wrapper .react-tel-input .flag-dropdown.open .selected-flag{ background-color: var(--color-gray-200); } .spark-input-wrapper .react-tel-input .country-list{ background-color:var(--color-select-dropdown); } .spark-input-wrapper .react-tel-input .country-list .country{ border-bottom:1px solid var(--color-gray-100); } .spark-input-wrapper .react-tel-input .country-list .country .dial-code{ color: var(--color-text-secondary); } .spark-input-wrapper .react-tel-input .country-list .country.highlight{ background-color: var(--color-bg-primary); color: #fff; } .spark-input-wrapper .react-tel-input .country-list .country.highlight .dial-code{ color: #fff; } .spark-input-wrapper .react-tel-input .country-list .country:hover{ background-color: transparent; color: var(--color-text-primary); } .spark-input-wrapper .react-tel-input .country-list .country:hover .dial-code{ color: var(--color-text-primary); } .react-tel-input :disabled{ opacity: 60%; } ================================================ FILE: packages/client/src/components/Input/index.js ================================================ import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; import { InputCss } from './inputCss'; import { Description } from '../Description'; import { removeLeadingSpace } from '../../utils/regex'; /** * Primary UI component for Input */ export const Input = forwardRef(({ wrapperClass = '', label = '', placeholder = '', type = 'text', disabled = false, error = '', onChange = () => { }, WrapClassName, className, isDec, desc, dark, value = '', extension, size = 'normal', customRegex, labelClassName, inputClass, htmlDesc, isTrim = false, maxLength, inputClassName, ...restProps }, ref) => { const wrapperClasses = [InputCss.inputwrapper]; const disableClass = disabled ? `${InputCss.inputdisabled}` : ''; if (error) { wrapperClasses.push('spark-error-wrapper'); } if (wrapperClass) { wrapperClasses.push(wrapperClass); } const handleChange = (e) => { let targetVal = e.target.value.replace(removeLeadingSpace, ''); if (isTrim) { targetVal = targetVal.trim(); } if (customRegex) { if (!targetVal || customRegex.test(targetVal)) onChange && onChange(targetVal); } else onChange && onChange(targetVal); }; const sizeCss = `${InputCss[[`input${size}`]]}`; return (
{!!(label || desc) && (
{ !!label && }
)}
{!!extension &&
{extension}
}
{!!desc && {desc}}
{!!htmlDesc &&
} {!!error && {error}}
); }); Input.displayName = 'Input'; Input.propTypes = { /** * Input label */ label: PropTypes.string, size: PropTypes.oneOf(['normal', 'small', 'medium']), /** * class which wraps whole component, label and input */ wrapperClass: PropTypes.string, /** * class which wraps input */ inputWrapperClass: PropTypes.string, /** * does input have any error */ error: PropTypes.string, /** * is Input disabled */ disabled: PropTypes.bool, /** * Helper text class */ errorClass: PropTypes.string, }; Input.defaultProps = { label: '', error: '', disabled: false, }; ================================================ FILE: packages/client/src/components/Input/inputCss.js ================================================ export const InputCss = { inputwrapper: 'relative', inputWrapperClass: 'relative', desc: 'mt-1', inputBlock: 'font-body text-primary-text bg-gray-input border-1 border-gray-70 placeholder-primary font-normal w-full focus:border-primary-dark focus:outline-none rounded-3', inputnormal: 'py-2 px-2.5 text-sm', inputsmall: 'py-1 px-2 text-xs', inputmedium: 'py-1.5 px-2 text-xs', darkInput: 'bg-gray-inputSub border-gray-300', inputdisabled: 'cursor-not-allowed opacity-60', inputError: 'border-error focus:border-error', inputLabel: 'mb-1.5 text-primary-text text-sm block w-full font-normal leading-5', inputlabelbig: 'text-base', errorClass: 'text-error text-sm mt-1 block', InputTag: 'text-primary-text border-1 border-gray-100 rounded-3 py-0.5 px-2 mr-2 my-1 ml-0 font-semibold text-sm inline-block', InputTagClose: 'ml-2 text-lg', extenstionText: 'absolute text-primary-text font-semibold right-3 top-0 bottom-0 m-auto flex items-center opacity-50 text-sm', // border: 1px solid #e4e4e4; }; ================================================ FILE: packages/client/src/components/Label/index.js ================================================ import React from 'react'; export const LabelBox = ({ children, className }) => ( ); ================================================ FILE: packages/client/src/components/LinkTag/index.js ================================================ import React from 'react'; import { Link } from 'react-router-dom'; import PropTypes from 'prop-types'; export const LinkTag = ({ onClick, link, className, children, whiteText, }) => ( link ? {children} : {children} ); LinkTag.propTypes = { /** * Additional class name */ className: PropTypes.string, link: PropTypes.string, onClick: PropTypes.func, }; LinkTag.defaultProps = { className: '', }; ================================================ FILE: packages/client/src/components/ListBox/LIstTitle.js ================================================ import React from 'react'; import { ListBoxCss } from './listboxCss'; export const ListTitle = ({ title, smallTitle, titleClass, onClick, }) => ( <> {!!title && (

{title}

)} {!!smallTitle && (
{smallTitle}
)} ); ================================================ FILE: packages/client/src/components/ListBox/ListBoxWrap.js ================================================ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { ListBoxCss } from './listboxCss'; export const ListBoxWrap = ({ children, className, onClick, isSelected, variant, popupList, key, }) => { const variantClass = `${ListBoxCss[[`list${variant}`]]}`; const [isSelect, setIsSelect] = useState(false); const selectBox = () => { setIsSelect(!isSelect); }; // ${isSelect && ListBoxCss.listSelected} return (
{children}
); }; ListBoxWrap.propTypes = { /** * List Variant? */ variant: PropTypes.oneOf(['normal', 'headBox', 'flat', 'bottomOutline', 'popupBox', 'small']), }; ListBoxWrap.defaultProps = { variant: 'normal', }; ================================================ FILE: packages/client/src/components/ListBox/listboxCss.js ================================================ export const ListBoxCss = { listWrap: 'border-t-1 border-gray-200 cursor-pointer relative', listWrapPopup: 'border-t-1 border-gray-100 cursor-pointer relative', listnormal: 'py-3 px-1', listflat: 'xl:border-none xxl:border-none', listsmall: 'py-2 px-1', listpopupBox: 'border-t-1 border-gray-100', listheadBox: 'p-0 border-1 rounded-3', listbottomOutline: 'p-4 border-l-0 border-r-0 border-t-0 border-b-0 ml-2 mr-2', listSelected: 'border-primary-dark', listLink: 'primary-gray-text-color font-semibold text-sm md:text-base mr-2', listHead: 'bg-gray-200 p-3 flex items-center', listTitle: 'primary-gray-text-color text-sm', listsmallTitle: 'primary-gray-text-color text-xs', listIconBox: 'flex items-center cursor-pointer', listIconWrap: 'flex items-center justify-end', listIconnormal: 'mr-2 w-3.5 h-3.5', listIconsmall: 'mr-1 w-3 h-3', listTitleBox: 'text-gray-20', listIcontitlenormal: 'text-sm', listIcontitlesmall: 'text-xs', listIconHr: 'mx-4 w-px h-4 my-1 bg-gray-400 block', }; ================================================ FILE: packages/client/src/components/Loader/index.js ================================================ // import Loadable from 'react-loadable'; import React from 'react'; // import Lottie from 'react-lottie'; // import animationData from '../../config/loaderdata.json'; import logoLoader from '../../assets/images/gif/logo-loader.gif'; export const Loader = ({ style, className }) => (
{/* */} loader
); ================================================ FILE: packages/client/src/components/MenuList/index.js ================================================ import React from 'react'; import { Link } from 'react-router-dom'; import ReactTooltip from 'react-tooltip'; import { MenulistCss } from './menuListCss'; export const MenuBox = ({ link, menuClass, onClick, icon, textCss, title, iconClass, tooltip = false, }) => (
{!!icon && (
{icon} {!!tooltip && ( {tooltip} )}
)} {link ? ( {!!title && ( {title} )} ) : (
{!!title && ( {title} )}
)}
); ================================================ FILE: packages/client/src/components/MenuList/menuListCss.js ================================================ export const MenulistCss = { menuItem: 'flex items-center hover:bg-gray-100 ', menuListLink: 'pt-2 pb-2 pl-3 pr-3', menuSpace: 'pt-2 pb-2 pl-3 pr-3', }; ================================================ FILE: packages/client/src/components/MessageNotify/index.js ================================================ import React from 'react'; import PropTypes from 'prop-types'; import { Icons } from '@dhiwise/icons'; import { InformessageCss } from './informessageCss'; export const MessageNotify = ({ messageType, className, isInfo, isWarring, isAlert, children, isClose, closeClick, messageCloseClass, size, }) => { const messageTypeCss = `${InformessageCss[[`message${messageType}`]]}`; const messageSizeCss = `${InformessageCss[[`message${size}`]]}`; const messageSizeText = `${InformessageCss[[`messageText${size}`]]}`; const messageSizeImg = `${InformessageCss[[`messageImg${size}`]]}`; return (
{(isInfo || isWarring || isAlert) && (
{isInfo && <>} {isWarring && <>} {isAlert && <>}
)}

{children}

{isClose && (
)}
); }; MessageNotify.propTypes = { /** * warring true false */ isWarring: PropTypes.bool, /** * alert true false */ isAlert: PropTypes.bool, /** * info true false */ isInfo: PropTypes.bool, /** * close true false */ isClose: PropTypes.bool, /** * How large should the button be? */ messageType: PropTypes.oneOf(['info', 'warring', 'alert']), size: PropTypes.oneOf(['normal', 'small']), /** * Additional classname */ className: PropTypes.string, }; MessageNotify.defaultProps = { size: 'normal', }; ================================================ FILE: packages/client/src/components/MessageNotify/informessageCss.js ================================================ export const InformessageCss = { messagebox: 'relative flex items-start rounded-3 border-l-4', messagenormal: 'p-3', messagesmall: 'p-2', messageimg: 'flex-shrink-0', messageImgnormal: 'w-4 mr-3 ', messageImgsmall: 'w-3.5 mr-2', messagedec: 'text-primary-message font-bold flex-grow', messageTextnormal: 'text-sm', messageTextsmall: 'text-xs', messageclose: 'w-4 h-4 object-contain m-auto absolute right-5 top-0 bottom-0 cursor-pointer', messageinfo: 'bg-secondary-bluelight border-secondary-blue', messagewarring: 'bg-secondary-yellowlight border-secondary-yellow', messagealert: 'bg-secondary-redlight border-gray-deactivebg', }; ================================================ FILE: packages/client/src/components/NoData/index.js ================================================ import React from 'react'; import Lottie from 'react-lottie'; import PropTypes from 'prop-types'; import animationData from './notfoundproject.json'; import { Button } from '../Button'; import { Description } from '../Description'; import { Heading } from '../Heading'; const NoData = (props) => { const { title, description, onClick, btnText, className, imageHeight, imgSize, smallBox, isLoading = false, } = props; const defaultOptions = { loop: true, autoplay: true, animationData, rendererSettings: { preserveAspectRatio: 'xMidYMid slice', }, }; return (
{!!title && {title}} {description ? ( {description} {' '} ) : null} {onClick && btnText ? : null}
); }; export default NoData; NoData.propTypes = { /** * display no data title */ title: PropTypes.string, /** * display no data description */ description: PropTypes.string, /** * onclick btn text */ btnText: PropTypes.string, /** * function onclick */ onClick: PropTypes.func, }; NoData.defaultProps = { // title: 'No Data Found', // description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has and typesetting industry. Lorem Ipsum has.', }; ================================================ FILE: packages/client/src/components/NoData/notfoundproject.json ================================================ {"v":"5.4.1","fr":29.9700012207031,"ip":0,"op":132.00000537647,"w":1024,"h":768,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"Null 1","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[512,364,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":316.000012870944,"op":316.000012870944,"st":0,"bm":0,"hidden":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 3","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[15.069,93,0],"ix":2},"a":{"a":0,"k":[0,93,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":30,"s":[{"i":[[0,0],[0,-9.694],[0,0],[12.229,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,4.98],[0,0],[-9.694,0]],"o":[[9.694,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,-12.229],[0,0],[4.98,0],[0,0],[0,-9.694],[0,0]],"v":[[101.919,-93],[119.5,-75.419],[119.5,70.823],[97.323,93],[-97.323,93],[-119.5,70.823],[-119.5,-40.823],[-97.323,-63],[25.468,-63],[34.5,-72.032],[34.5,-75.419],[52.081,-93]],"c":true}],"e":[{"i":[[0,0],[2.179,-9.391],[0,0],[12.229,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,4.98],[0,0],[-9.694,0]],"o":[[9.694,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[4.225,-12.72],[0,0],[4.98,0],[0,0],[3.172,-10.897],[0,0]],"v":[[135.824,-47.794],[149.637,-30.213],[119.5,70.823],[97.323,93],[-97.323,93],[-119.5,70.823],[-89.363,4.383],[-65.678,-17.794],[55.605,-17.794],[64.637,-26.826],[66.333,-30.213],[85.985,-47.794]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":35,"s":[{"i":[[0,0],[2.179,-9.391],[0,0],[12.229,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,4.98],[0,0],[-9.694,0]],"o":[[9.694,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[4.225,-12.72],[0,0],[4.98,0],[0,0],[3.172,-10.897],[0,0]],"v":[[135.824,-47.794],[149.637,-30.213],[119.5,70.823],[97.323,93],[-97.323,93],[-119.5,70.823],[-89.363,4.383],[-65.678,-17.794],[55.605,-17.794],[64.637,-26.826],[66.333,-30.213],[85.985,-47.794]],"c":true}],"e":[{"i":[[0,0],[1.245,-9.521],[0,0],[12.229,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,4.98],[0,0],[-9.694,0]],"o":[[9.694,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[2.414,-12.509],[0,0],[4.98,0],[0,0],[1.812,-10.382],[0,0]],"v":[[121.293,-67.168],[136.721,-49.587],[119.5,70.823],[97.323,93],[-97.323,93],[-119.5,70.823],[-102.279,-14.991],[-79.24,-37.168],[42.689,-37.168],[51.721,-46.2],[52.69,-49.587],[71.455,-67.168]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":40,"s":[{"i":[[0,0],[1.245,-9.521],[0,0],[12.229,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,4.98],[0,0],[-9.694,0]],"o":[[9.694,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[2.414,-12.509],[0,0],[4.98,0],[0,0],[1.812,-10.382],[0,0]],"v":[[121.293,-67.168],[136.721,-49.587],[119.5,70.823],[97.323,93],[-97.323,93],[-119.5,70.823],[-102.279,-14.991],[-79.24,-37.168],[42.689,-37.168],[51.721,-46.2],[52.69,-49.587],[71.455,-67.168]],"c":true}],"e":[{"i":[[0,0],[2.179,-9.391],[0,0],[12.229,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,4.98],[0,0],[-9.694,0]],"o":[[9.694,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[4.225,-12.72],[0,0],[4.98,0],[0,0],[3.172,-10.897],[0,0]],"v":[[135.824,-47.794],[149.637,-30.213],[119.5,70.823],[97.323,93],[-97.323,93],[-119.5,70.823],[-89.363,4.383],[-65.678,-17.794],[55.605,-17.794],[64.637,-26.826],[66.333,-30.213],[85.985,-47.794]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":45,"s":[{"i":[[0,0],[2.179,-9.391],[0,0],[12.229,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,4.98],[0,0],[-9.694,0]],"o":[[9.694,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[4.225,-12.72],[0,0],[4.98,0],[0,0],[3.172,-10.897],[0,0]],"v":[[135.824,-47.794],[149.637,-30.213],[119.5,70.823],[97.323,93],[-97.323,93],[-119.5,70.823],[-89.363,4.383],[-65.678,-17.794],[55.605,-17.794],[64.637,-26.826],[66.333,-30.213],[85.985,-47.794]],"c":true}],"e":[{"i":[[0,0],[2.179,-9.391],[0,0],[12.229,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,4.98],[0,0],[-9.694,0]],"o":[[9.694,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[4.225,-12.72],[0,0],[4.98,0],[0,0],[3.172,-10.897],[0,0]],"v":[[135.824,-47.794],[149.637,-30.213],[119.5,70.823],[97.323,93],[-97.323,93],[-119.5,70.823],[-89.363,4.383],[-65.678,-17.794],[55.605,-17.794],[64.637,-26.826],[66.333,-30.213],[85.985,-47.794]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":124,"s":[{"i":[[0,0],[2.179,-9.391],[0,0],[12.229,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,4.98],[0,0],[-9.694,0]],"o":[[9.694,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[4.225,-12.72],[0,0],[4.98,0],[0,0],[3.172,-10.897],[0,0]],"v":[[135.824,-47.794],[149.637,-30.213],[119.5,70.823],[97.323,93],[-97.323,93],[-119.5,70.823],[-89.363,4.383],[-65.678,-17.794],[55.605,-17.794],[64.637,-26.826],[66.333,-30.213],[85.985,-47.794]],"c":true}],"e":[{"i":[[0,0],[0,-9.694],[0,0],[12.229,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,4.98],[0,0],[-9.694,0]],"o":[[9.694,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,-12.229],[0,0],[4.98,0],[0,0],[0,-9.694],[0,0]],"v":[[101.919,-93],[119.5,-75.419],[119.5,70.823],[97.323,93],[-97.323,93],[-119.5,70.823],[-119.5,-40.823],[-97.323,-63],[25.468,-63],[34.5,-72.032],[34.5,-75.419],[52.081,-93]],"c":true}]},{"t":128.000005213547}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.08627450980392157,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0.08627450980392157,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":316.000012870944,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 4","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-35.209,-27.596],[13,14],[-4,-9.5]],"o":[[0,0],[18.5,14.5],[-12.519,-13.482],[5.242,12.451]],"v":[[128.5,-143],[195.5,-191],[172,-165],[183.5,-181]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gs","o":{"a":0,"k":100,"ix":9},"w":{"a":0,"k":6,"ix":10},"g":{"p":3,"k":{"a":0,"k":[0,1,0.5019607843137255,0.050980392156862744,0.5,0,0.712,0.912,1,0,0.424,1],"ix":8}},"s":{"a":0,"k":[0,0],"ix":4},"e":{"a":0,"k":[100,0],"ix":5},"t":1,"lc":2,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":13},"nm":"Gradient Stroke 1","mn":"ADBE Vector Graphic - G-Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":true},{"ty":"tr","p":{"a":0,"k":[10,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[-67.81,84.615],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 5","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-35.209,-27.596],[13,14],[-4,-9.5]],"o":[[0,0],[18.5,14.5],[-12.519,-13.482],[5.242,12.451]],"v":[[128.5,-143],[195.5,-191],[172,-165],[183.5,-181]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":true},{"ty":"gs","o":{"a":0,"k":100,"ix":9},"w":{"a":0,"k":6,"ix":10},"g":{"p":3,"k":{"a":0,"k":[0,1,0.5019607843137255,0.050980392156862744,0.5,0,0.712,0.912,1,0,0.424,1],"ix":8}},"s":{"a":0,"k":[0,0],"ix":4},"e":{"a":0,"k":[100,0],"ix":5},"t":1,"lc":2,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":13},"nm":"Gradient Stroke 1","mn":"ADBE Vector Graphic - G-Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 4","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-32,36]],"o":[[0,0],[32,-36]],"v":[[20,-36],[50,-198]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":true},{"ty":"gs","o":{"a":0,"k":100,"ix":9},"w":{"a":0,"k":6,"ix":10},"g":{"p":3,"k":{"a":0,"k":[0,1,0.5019607843137255,0.050980392156862744,0.5,0,0.712,0.912,1,0,0.424,1],"ix":8}},"s":{"a":0,"k":[0,0],"ix":4},"e":{"a":0,"k":[100,0],"ix":5},"t":1,"lc":2,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":13},"nm":"Gradient Stroke 1","mn":"ADBE Vector Graphic - G-Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 3","np":3,"cix":2,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[77,-17]],"o":[[0,0],[-77,17]],"v":[[-74,-30],[-208,-116]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":true},{"ty":"gs","o":{"a":0,"k":100,"ix":9},"w":{"a":0,"k":6,"ix":10},"g":{"p":3,"k":{"a":0,"k":[0,1,0.5019607843137255,0.050980392156862744,0.5,0,0.712,0.912,1,0,0.424,1],"ix":8}},"s":{"a":0,"k":[0,0],"ix":4},"e":{"a":0,"k":[100,0],"ix":5},"t":1,"lc":2,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":13},"nm":"Gradient Stroke 1","mn":"ADBE Vector Graphic - G-Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 2","np":3,"cix":2,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-85,-34]],"o":[[0,0],[85,34]],"v":[[129,-67],[308,-130]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":true},{"ty":"gs","o":{"a":0,"k":100,"ix":9},"w":{"a":0,"k":6,"ix":10},"g":{"p":3,"k":{"a":0,"k":[0,1,0.5019607843137255,0.050980392156862744,0.5,0,0.712,0.912,1,0,0.424,1],"ix":8}},"s":{"a":0,"k":[0,0],"ix":4},"e":{"a":0,"k":[100,0],"ix":5},"t":1,"lc":2,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":13},"nm":"Gradient Stroke 1","mn":"ADBE Vector Graphic - G-Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":40,"s":[0],"e":[100]},{"t":58.0000023623884}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":36,"s":[0],"e":[100]},{"t":54.0000021994651}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":6,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":316.000012870944,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 5","parent":1,"sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-13,138,0],"ix":2},"a":{"a":0,"k":[0,93,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.924,0.924,0.667],"y":[1,1,1]},"o":{"x":[0.751,0.751,0.333],"y":[0,0,0]},"n":["0p924_1_0p751_0","0p924_1_0p751_0","0p667_1_0p333_0"],"t":16,"s":[49.726,49.726,100],"e":[132.726,132.726,100]},{"i":{"x":[0.924,0.924,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"n":["0p924_1_0p333_0","0p924_1_0p333_0","0p667_1_0p333_0"],"t":30,"s":[132.726,132.726,100],"e":[132.726,132.726,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"n":["0p833_1_0p333_0","0p833_1_0p333_0","0p833_1_0p333_0"],"t":118,"s":[132.726,132.726,100],"e":[49.726,49.726,100]},{"t":128.000005213547}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":32,"s":[{"i":[[0,0],[0,-9.694],[0,0],[12.229,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,4.98],[0,0],[-9.694,0]],"o":[[9.694,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,-12.229],[0,0],[4.98,0],[0,0],[0,-9.694],[0,0]],"v":[[101.919,-93],[119.5,-75.419],[119.5,70.823],[97.323,93],[-97.323,93],[-119.5,70.823],[-119.5,-40.823],[-97.323,-63],[25.468,-63],[34.5,-72.032],[34.5,-75.419],[52.081,-93]],"c":true}],"e":[{"i":[[0,0],[0.498,-9.625],[0,0],[12.229,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,4.98],[0,0],[-9.694,0]],"o":[[9.694,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0.966,-12.341],[0,0],[4.98,0],[0,0],[0.725,-9.969],[0,0]],"v":[[109.669,-82.667],[126.389,-65.087],[119.5,70.823],[97.323,93],[-97.323,93],[-119.5,70.823],[-112.611,-30.49],[-90.09,-52.667],[32.356,-52.667],[41.389,-61.7],[41.776,-65.087],[59.83,-82.667]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":36,"s":[{"i":[[0,0],[0.498,-9.625],[0,0],[12.229,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,4.98],[0,0],[-9.694,0]],"o":[[9.694,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0.966,-12.341],[0,0],[4.98,0],[0,0],[0.725,-9.969],[0,0]],"v":[[109.669,-82.667],[126.389,-65.087],[119.5,70.823],[97.323,93],[-97.323,93],[-119.5,70.823],[-112.611,-30.49],[-90.09,-52.667],[32.356,-52.667],[41.389,-61.7],[41.776,-65.087],[59.83,-82.667]],"c":true}],"e":[{"i":[[0,0],[0,-9.694],[0,0],[12.229,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,4.98],[0,0],[-9.694,0]],"o":[[9.694,0],[0,0],[0,12.229],[0,0],[-12.229,0],[0,0],[0,-12.229],[0,0],[4.98,0],[0,0],[0,-9.694],[0,0]],"v":[[101.919,-93],[119.5,-75.419],[119.5,70.823],[97.323,93],[-97.323,93],[-119.5,70.823],[-119.5,-40.823],[-97.323,-63],[25.468,-63],[34.5,-72.032],[34.5,-75.419],[52.081,-93]],"c":true}]},{"t":40.0000016292334}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":6,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0.08627450980392157,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":true},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":316.000012870944,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"NO DATA Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":452,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.03],"y":[0.238]},"n":["0p667_1_0p03_0p238"],"t":35,"s":[344],"e":[204]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":45,"s":[204],"e":[204]},{"i":{"x":[0.957],"y":[0.75]},"o":{"x":[0.333],"y":[0]},"n":["0p957_0p75_0p333_0"],"t":98,"s":[204],"e":[324]},{"t":105.000004276738}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[122.539,122.539,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[11.813,-28.459],[11.813,-15.645],[7.664,-28.459],[1.477,-28.459],[1.477,0],[7.664,0],[7.664,-12.938],[11.514,0],[18,0],[18,-28.459]],"c":true},"ix":2},"nm":"N","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":true},{"ty":"fl","c":{"a":0,"k":[0.9215686274509803,0.9215686274509803,0.9215686274509803,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"N","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0.141,1.172],[0.738,0.996],[1.213,0.498],[1.523,0],[1.207,-0.527],[0.709,-0.984],[0.135,-1.189],[0,-2.859],[0,0],[-0.141,-1.172],[-0.738,-0.996],[-1.213,-0.498],[-1.524,0],[-1.207,0.527],[-0.709,0.984],[-0.135,1.19],[0,2.859]],"o":[[0,-2.93],[-0.141,-1.172],[-0.738,-0.996],[-1.213,-0.498],[-1.606,0],[-1.207,0.527],[-0.709,0.984],[-0.135,1.19],[0,0],[0,2.93],[0.141,1.172],[0.738,0.996],[1.213,0.498],[1.605,0],[1.207,-0.527],[0.709,-0.984],[0.135,-1.189],[0,0]],"v":[[37.881,-16.664],[37.67,-22.816],[36.352,-26.068],[33.425,-28.31],[29.32,-29.057],[25.102,-28.266],[22.228,-25.998],[20.962,-22.737],[20.76,-16.664],[20.76,-11.795],[20.971,-5.643],[22.289,-2.391],[25.216,-0.149],[29.32,0.598],[33.539,-0.193],[36.413,-2.461],[37.679,-5.722],[37.881,-11.795]],"c":true},"ix":2},"nm":"O","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[0.141,-0.445],[0.504,0],[0.135,0.387],[0,1.652],[0,0],[-0.205,0.299],[-0.387,0],[-0.147,-0.369],[0,-1.324]],"o":[[0,1.676],[-0.141,0.445],[-0.492,0],[-0.135,-0.387],[0,0],[0,-1.465],[0.205,-0.299],[0.457,0],[0.146,0.369],[0,0]],"v":[[30.48,-8.068],[30.27,-4.887],[29.303,-4.219],[28.362,-4.799],[28.16,-7.857],[28.16,-21.146],[28.468,-23.792],[29.355,-24.24],[30.261,-23.687],[30.48,-21.146]],"c":true},"ix":2},"nm":"O","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":true},{"ty":"fl","c":{"a":0,"k":[0.921568986481,0.921568986481,0.921568986481,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"O","np":5,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[-0.879,0.193],[-0.598,0.486],[-0.24,0.861],[0,2.555],[0,0],[0.164,0.92],[0.656,0.75],[1.26,0.328],[3.574,0],[0,0]],"o":[[0,0],[1.769,0],[0.879,-0.193],[0.598,-0.486],[0.24,-0.861],[0,0],[0,-2.695],[-0.164,-0.92],[-0.656,-0.75],[-1.26,-0.328],[0,0],[0,0]],"v":[[46.986,0],[56.32,0],[60.293,-0.29],[62.508,-1.31],[63.765,-3.331],[64.125,-8.455],[64.125,-18.422],[63.879,-23.845],[62.648,-26.35],[59.774,-27.967],[52.523,-28.459],[46.986,-28.459]],"c":true},"ix":2},"nm":"D","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-0.293,-0.17],[-0.082,-0.363],[0,-1.289],[0,0],[0.246,-0.428],[1.066,0],[0,0]],"o":[[0.293,0.17],[0.082,0.363],[0,0],[0,1.898],[-0.246,0.428],[0,0],[0.809,0]],"v":[[56.039,-23.335],[56.602,-22.535],[56.725,-20.057],[56.725,-9],[56.355,-5.511],[54.387,-4.869],[54.387,-23.59]],"c":true},"ix":2},"nm":"D","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":true},{"ty":"fl","c":{"a":0,"k":[0.921568986481,0.921568986481,0.921568986481,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"D","np":5,"cix":2,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[68.981,-28.459],[65.206,0],[72.857,0],[73.302,-5.115],[75.949,-5.115],[76.346,0],[83.909,0],[79.677,-28.459]],"c":true},"ix":2},"nm":"A","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[-0.754,5.449],[-0.375,-3.223]],"o":[[0.193,-2.519],[0.377,4.746],[0,0]],"v":[[73.208,-10.16],[74.628,-22.113],[75.755,-10.16]],"c":true},"ix":2},"nm":"A","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":true},{"ty":"fl","c":{"a":0,"k":[0.921568986481,0.921568986481,0.921568986481,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"A","np":5,"cix":2,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[81.914,-28.459],[81.914,-22.764],[86.291,-22.764],[86.291,0],[93.691,0],[93.691,-22.764],[98.086,-22.764],[98.086,-28.459]],"c":true},"ix":2},"nm":"T","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":true},{"ty":"fl","c":{"a":0,"k":[0.921568986481,0.921568986481,0.921568986481,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"T","np":3,"cix":2,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[100.428,-28.459],[96.653,0],[104.304,0],[104.749,-5.115],[107.396,-5.115],[107.793,0],[115.356,0],[111.125,-28.459]],"c":true},"ix":2},"nm":"A","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[-0.754,5.449],[-0.375,-3.223]],"o":[[0.193,-2.519],[0.377,4.746],[0,0]],"v":[[104.655,-10.16],[106.075,-22.113],[107.202,-10.16]],"c":true},"ix":2},"nm":"A","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":true},{"ty":"fl","c":{"a":0,"k":[0.921568986481,0.921568986481,0.921568986481,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"A","np":5,"cix":2,"ix":6,"mn":"ADBE Vector Group","hd":false}],"ip":35.0000014255792,"op":106.000004317469,"st":25.0000010182709,"bm":0}],"markers":[]} ================================================ FILE: packages/client/src/components/PopOver/index.js ================================================ import React from 'react'; import Popover from 'react-popover'; export const PopOver = ({ data, popOverValue, className, place, dropdownWrapClass, style, }) => { const [isPopoverOpen, setIsPopoverOpen] = React.useState(false); const showPopup = React.useCallback(() => { setIsPopoverOpen(!isPopoverOpen); }); return ( {popOverValue} , ]} style={style} isOpen={isPopoverOpen} onOuterAction={showPopup} refreshIntervalMs={10} enterExitTransitionDurationMs={10} tipSize={10} place={place || null} className={`popupCustom ${dropdownWrapClass}`} > {data} ); }; ================================================ FILE: packages/client/src/components/Popup/index.js ================================================ import React from 'react'; import Modal from 'react-modal'; import PropTypes from 'prop-types'; import { Icons } from '@dhiwise/icons'; import { Button } from '../Button'; import { Heading } from '../Heading'; import { Description } from '../Description'; const PopupCss = { closebutton: 'absolute right-6 top-6 focus:outline-none', closebuttonimg: 'w-5', popupwrap: 'w-full bg-gray-black border-1 border-gray-100 rounded-lg', overlay: 'fixed top-0 bottom-0 w-full h-full z-10', titleCss: 'text-primary-text font-bold py-4 px-6 border-b border-gray-100', popupbody: 'p-4 md:p-6', poupupfooter: 'flex flex-wrap items-center md:flex-nowrap justify-end py-3 px-2 md:px-8 border-t border-gray-100', }; const customStyles = { content: { top: '50%', left: '50%', right: 'auto', bottom: 'auto', marign: 'auto', transform: 'translate(-50%, -50%)', border: 'none', background: 'transparent', overflow: 'visible', }, }; export const Popup = (props) => (
{!!props.title && ( <>
{props.title} {!!props.desc && ( {props.desc} )}
)} {props.closeFalse ? null : ( )}
{props.children}
{(props.submit || props.cancel) && (
{props.cancel && ( )} {!!props.extraButton && ( )} {props.submit && ( )}
) }
); Popup.propTypes = { size: PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs']), }; ================================================ FILE: packages/client/src/components/Radio/RadioGroup.js ================================================ /* eslint-disable react/jsx-props-no-spreading */ import PropTypes from 'prop-types'; import React, { forwardRef, useState } from 'react'; import { classNames } from '../utils'; import { radioCss } from './radioCss'; import './radiogroup.css'; export const Radio = forwardRef((props, ref) => { const { children = '', value = '', isParentDisabled = false, disabled = false, // labelClass = 'spark-radio-label', checked = false, name = '', prefixCls = 'spark-radio', wrapperClass = 'spark-radio-wrapper', className = '', ...restProps } = props; const wrapperClasses = classNames(wrapperClass, className, { [`${wrapperClass}-checked`]: checked, [`${wrapperClass}-disabled`]: disabled || isParentDisabled, }); const radioClass = classNames(prefixCls, { [`${prefixCls}-checked`]: checked, [`${prefixCls}-disabled`]: disabled || isParentDisabled, }); return ( ); }); Radio.displayName = 'Radio'; export const RadioGroup = ({ direction = 'horizontal', onChange = () => { }, prefixCls = 'spark-radio', wrapperClassname = '', wrapperStyle = {}, selectedValue, children, name, label = '', error = '', className, errorClass = 'spark-input-radio-text', /** * disabled on Radiogroup component disables all children */ disabled = false, }) => { const [value, setValue] = useState(selectedValue || ''); React.useEffect(() => { setValue(selectedValue); }, [selectedValue]); const wrapperClass = classNames(`${prefixCls}-group`, wrapperClassname, { 'vertical-options': direction === 'vertical', }); const handleChange = (event, val, isDisabled) => { if (isDisabled) return; setValue(val); onChange && onChange(val, event); }; const childrens = React.Children.map(children, (child) => { if (child.type === Radio) { return React.cloneElement(child, { name, checked: child.props.value === value, isParentDisabled: disabled, onChange: (e) => handleChange(e, child.props.value, child.props.disabled), direction, disabled: child.props.disabled, }); } return child; }); return (
{ !!label && } {childrens} {!!error &&
{error}
}
); }; RadioGroup.propTypes = { name: PropTypes.string, direction: PropTypes.oneOf([ 'vertical', 'horizontal', ]), children: PropTypes.node.isRequired, selectedValue: PropTypes.oneOfType([ PropTypes.string, PropTypes.bool, PropTypes.number, ]), /** * disabled on Radiogroup component disables all children */ disabled: PropTypes.bool, }; ================================================ FILE: packages/client/src/components/Radio/radioCss.js ================================================ export const radioCss = { radioLabel: 'text-primary-text text-base block w-full font-normal leading-6', radioBoxLabel: 'text-primary-text text-sm block w-full font-normal', radioWrap: 'flex items-center', }; ================================================ FILE: packages/client/src/components/Radio/radiogroup.css ================================================ .spark-radio-group { -webkit-box-sizing: border-box; box-sizing: border-box; /* margin: 0; */ padding: 0; color: rgba(0, 0, 0, 0.65); font-size: 14px; font-variant: tabular-nums; line-height: 1.5; list-style: none; -webkit-font-feature-settings: "tnum", "tnum"; font-feature-settings: "tnum", "tnum"; /* display: inline-block; */ } .spark-radio, .spark-radio-wrapper { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; color: rgba(0, 0, 0, 0.65); font-size: 14px; font-variant: tabular-nums; line-height: 1.5; list-style: none; -webkit-font-feature-settings: "tnum", "tnum"; font-feature-settings: "tnum", "tnum"; position: relative; /* display: inline-block; */ white-space: nowrap; cursor: pointer; } .spark-radio-wrapper-disabled{ cursor: not-allowed; opacity: 0.5; } /* .spark-radio-wrapper { margin: 0 8px 0 0; } */ .spark-radio { margin: 0; display: inline-flex; vertical-align: sub; outline: none; } form input[type="checkbox"], form input[type="radio"] { width: 14px; height: 14px; line-height: normal; } .spark-radio-input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; cursor: pointer; opacity: 0; } .spark-radio-checked .spark-radio-inner { background-color: var(--color-bg-primary) !important; border: 1px solid var(--color-bg-primary); } .spark-radio-inner { position: relative; top: 0; left: 0; display: block; width: 20px; height: 20px; background-color:var(--color-gray-input); border: 1px solid var(--color-gray-70); /* border: 1px solid #d9d9d9; */ border-radius: 100px; -webkit-transition: all 0.3s; transition: all 0.3s; } .spark-radio-input:focus ~ .spark-radio-inner{ box-shadow: 0 0 0 3px rgb(0 97 255 / 40%); /* background: var(--color-gray-70); */ } .spark-radio-checked:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid var(--color-bg-primary); border-radius: 50%; visibility: hidden; -webkit-animation: antRadioEffect 0.36s ease-in-out; animation: antRadioEffect 0.36s ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; content: ""; } span.spark-radio + * { padding-right: 8px; padding-left: 8px; } .spark-radio-checked .spark-radio-inner:after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); } .spark-radio-inner:after { background-color: #fff !important; } .spark-radio-inner:after { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: block; width: 8px; height: 8px; background-color: var(--color-bg-primary); border-top: 0; border-left: 0; border-radius: 10px; transform: scale(0); opacity: 0; transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); content: " "; } .vertical-options { display: flex; flex-direction: column; } .spark-radio-disabled .spark-radio-inner { background-color: #f5f5f5; border-color: #d9d9d9 !important; cursor: not-allowed; } .spark-radio-disabled input{ width: 100%; height: 100%; cursor: not-allowed; } /* .spark-radio-disabled + span { color: rgba(0, 0, 0, 0.25); cursor: not-allowed; } */ .spark-radio-header-label { color: #000; font-size: 14px; display: block; width: 100%; font-weight: 600; margin-bottom: 10px; } .spark-input-radio-text { color: #ee3b3b; font-size: 16px; } /* new */ .radioBoxWrap{ display: block; position: relative; padding-left: 25px; margin-bottom: 12px; cursor: pointer; font-size: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .radioBoxWrap input { position: absolute; opacity: 0; left: 0; top: 0; z-index: 1; height: 16px; width: 16px; cursor: pointer; } .radioChecker { position: absolute; top: -5px; left: 0; height: 16px; width: 16px; background-color: var(--color-gray-90); border-radius: 50%; } .radioBoxWrap:hover input ~ .radioChecker { background-color: #ccc; } .radioBoxWrap input:checked ~ .radioChecker { background-color: var(--color-bg-primary); } .radioChecker:after { content: ""; position: absolute; display: none; } .radioBoxWrap input:checked ~ .radioChecker:after { display: block; } .radioBoxWrap .radioChecker:after { top: 5px; left:5px; width: 6px; height: 6px; border-radius: 50%; background: white; } ================================================ FILE: packages/client/src/components/ReactDrawer/DrawerClose.js ================================================ import { Icons } from '@dhiwise/icons'; import React from 'react'; import { IconBox } from '../IconBox'; export const DrawerClose = ({ onClick }) => ( } /> ); ================================================ FILE: packages/client/src/components/ReactDrawer/DrawerFooter.js ================================================ import React from 'react'; import ErrorMsg from '../ErrorMsg'; import { Button } from '../Button'; export const DrawerFooter = ({ isAutoFocusOnSave, isSaveNext, isNextSubmitting, handleNextSubmit, // manage differnt props for save&next submitTitle, handleSubmit, isSubmitting, handleCancel, cancelTitle, error, canSubmit = true, saveNext, }) => (
{ error && } {!!saveNext && ( )}
); ================================================ FILE: packages/client/src/components/ReactDrawer/DrawerHead.js ================================================ import React from 'react'; import { Heading } from '../Heading'; export const DrawerHead = ({ children, title, className }) => (
{title} {children}
); ================================================ FILE: packages/client/src/components/ReactDrawer/index.js ================================================ /* eslint-disable camelcase */ /*! * ReactDrawer * Licensed under the MIT license * * Copyright (c) 2016 Tony Li */ // import animate from 'animate.css'; import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { Icons } from '@dhiwise/icons'; import { ReactDrawerCss } from './reactDrawerCss'; class ReactDrawer extends React.Component { constructor(props) { super(props); this.openDrawer = this.openDrawer.bind(this); this.closeDrawer = this.closeDrawer.bind(this); this.onAnimationEnded = this.onAnimationEnded.bind(this); } UNSAFE_componentWillMount() { this.setState({ open: this.props.open, hiddenOverlay: true, hiddenDrawer: true, }); } componentDidMount() { this.drawer.addEventListener('webkitAnimationEnd', this.onAnimationEnded); } UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.open !== this.state.open) { nextProps.open ? this.openDrawer() : this.closeDrawer(); } } componentWillUnmount() { this.drawer.removeEventListener('webkitAnimationEnd', this.onAnimationEnded); } onAnimationEnded() { if (!this.state.open) { this.setState({ hiddenOverlay: true, hiddenDrawer: true, }); } } getOverlayClassName(drawerCss) { return classNames( 'react-drawer-overlay', drawerCss.overlay, // animate.animated, { // [`${animate.fadeIn}`]: this.state.open, // [`${animate.fadeOut}`]: !this.state.open, [`${drawerCss.hidden}`]: this.state.hiddenOverlay, }, ); } getDrawerClassName(drawerCss) { const position = this.props.position || 'right'; const themeAttr = `drawer${position}`; const drawerTheme = drawerCss[themeAttr]; // const fade = animate[`fade${direction}${start}`]; return classNames( 'react-drawer-drawer', drawerCss.drawer, drawerTheme, // animate.animated, // fade, { [`${drawerCss.hidden}`]: this.state.hiddenDrawer, }, ); } openDrawer() { this.setState({ hiddenOverlay: false, hiddenDrawer: false, open: true, }); } closeDrawer() { this.setState({ open: false, }); if (this.props.onClose) { this.props.onClose(); } } render() { const overlayClass = this.getOverlayClassName(ReactDrawerCss); const drawerClass = this.getDrawerClassName(ReactDrawerCss); const typeClass = `${ReactDrawerCss[[`drawer${this.props.type}`]]}`; return (
{!this.props.noOverlay ? (
{ this.overlay = c; }} className={`${overlayClass}`} onClick={this.closeDrawer} /> ) : null}
{ this.drawer = c; }} > {this.props.CloseFalse ? null : (
)} {this.props.children}
); } } ReactDrawer.propTypes = { open: PropTypes.bool.isRequired, onClose: PropTypes.func, position: PropTypes.oneOf(['top', 'bottom', 'right', 'left']), type: PropTypes.oneOf(['horizontal', 'vertical']), noOverlay: PropTypes.bool, }; export default ReactDrawer; ================================================ FILE: packages/client/src/components/ReactDrawer/reactDrawerCss.js ================================================ export const ReactDrawerCss = { drawer: 'fixed block bg-gray-black border-gray-100 border-t border-1 shadows-dw1 z-1000000', drawerbottom: 'bottom-0', drawertop: 'top-0', drawerright: 'right-0', drawerleft: 'left-0', drawervertical: 'w-6/12 top-0 bottom-0', drawerhorizontal: 'h-64 w-full left-0 right-0', overlay: 'w-full h-full fixed top-0 left-0 z-1000000 bg-overlay transition-all', }; ================================================ FILE: packages/client/src/components/SearchBox/RecentSearch.js ================================================ import React from 'react'; import { Icons } from '@dhiwise/icons'; import { DropdownMenu, MenuItem } from '../DropdownMenu'; const SearchBoxCss = { recentcss: 'w-4 h-4 cursor-pointer', recentimg: 'w-full h-full', }; export const RecentSearch = () => ( (
)} className={SearchBoxCss.recentcss} triggerType="component" trigger="recenet" title="Recent Search" > ); ================================================ FILE: packages/client/src/components/SearchBox/index.js ================================================ /* eslint-disable react/jsx-props-no-spreading */ import React from 'react'; import PropTypes from 'prop-types'; import debounce from 'lodash/debounce'; import { Icons } from '@dhiwise/icons'; import { RecentSearch } from './RecentSearch'; import { SearchBoxCss } from './searchBoxCss'; export const SearchBox = ({ children, className = '', size, placeholder, isRecentsearch, isSearch, header, onSearch, value = '', searchOnEnter = false, serachOnIconClick = false, // backgroundColor, ...props }) => { const [internalValue, setInternalValue] = React.useState(value); const delayedCallback = debounce((event) => { onSearch(event.target.value); }, 1500); const handleSearchValue = (event) => { event.persist(); delayedCallback(event); }; React.useEffect(() => { setInternalValue(value); }, [value]); const handleChange = (e) => { const newValue = e.target.value; !searchOnEnter && handleSearchValue(e); setInternalValue(newValue); }; const handleKeyPress = (e) => { if (searchOnEnter && e.key === 'Enter') { onSearch(internalValue); } }; const onClear = () => { setInternalValue(''); onSearch(''); }; return (
{isRecentsearch && } {!internalValue ?
serachOnIconClick && searchOnEnter && onSearch(internalValue)}>
:
onClear()}>
}
); }; SearchBox.propTypes = { /** * What background color to use */ // backgroundColor: PropTypes.string, /** * How large should the button be? */ variant: PropTypes.oneOf(['primary', 'outline']), /** * Shape of button */ shape: PropTypes.oneOf(['square', 'rounded']), /** * is Button disabled */ disabled: PropTypes.bool, /** * Optional click handler */ onClick: PropTypes.func, /** * Additional classname */ className: PropTypes.string, }; SearchBox.defaultProps = { // backgroundColor: null, onClick: undefined, }; ================================================ FILE: packages/client/src/components/SearchBox/searchBoxCss.js ================================================ export const SearchBoxCss = { wrapper: 'h-full flex items-center justify-center relative', InputBox: 'bg-gray-input border-1 border-gray-70 placeholder-primary text-body-text focus:outline-none focus:border-primary-dark w-full pr-8 rounded-3 h-full text-xs', HeaderSearchCss: 'bg-headerSearch border-none', IconBox: 'w-3 h-3 contain absolute right-5 cursor-pointer', recentcss: 'w-4 h-4 absolute left-4 cursor-pointer', }; ================================================ FILE: packages/client/src/components/Select/index.js ================================================ /* eslint-disable no-nested-ternary */ /* eslint-disable react/jsx-props-no-spreading */ /* eslint-disable react/jsx-props-no-multi-spaces */ import React from 'react'; import PropTypes from 'prop-types'; import SelectBox from 'react-select'; import { sortOptions } from '../utils'; import { SelectCss, LightSelect, DarkSelect, simlpeSelectCss, SmallDarkSelectCss, SmallSelectCss, MediumSelectCss, } from './selectCss'; import { Description } from '../Description'; /** * This select box is being used from react-select library. For advanced usage check https://react-select.com/home */ const formatGroupLabel = (data) => (
{data.name} {data.options.length}
); const Select = React.forwardRef(({ label = '', wrapperClass = '', className = '', options = [], value = [], placeholder = 'Select', WrapClassName = '', disabled = false, sortKey = '', isSearchable = true, noOptionsMessage = 'No options found', error = '', wrapperStyle = {}, isClearable = true, isMulti = false, onChange = null, valueKey = 'id', labelKey = 'name', isLabel, isDec, desc, simpleSelect, dark = false, sizeSmall, sizeMedium, groupOptions, defaultValue, LeftLabel, labelClassName, htmlDesc, components, ...restProps }, ref) => { const isFirstTime = React.useRef(true); const [selectOptions, setSelectOptions] = React.useState(sortKey ? sortOptions(options, sortKey) : options); React.useEffect(() => { setSelectOptions(sortKey ? sortOptions(options, sortKey) : options); }, [options]); const getValue = React.useCallback(() => { const defaultChecked = options?.filter((option) => !!option.default); if ([undefined, null].includes(value) || (Array.isArray(value) && value.length === 0)) { if (isFirstTime.current) { isFirstTime.current = false; return defaultChecked; } } else { if (isMulti) { return options?.filter((option) => value && value.includes(option[valueKey])); } // eslint-disable-next-line eqeqeq return options.find((option) => option[valueKey] == value); } return null; }, [options, value]); const handleChange = (data) => { if (!onChange) return; if (isMulti) { onChange(data?.map((d) => d[valueKey]) || null); } else { onChange([undefined, null].includes(data?.[valueKey]) ? null : data?.[valueKey]); } }; let groupClass = 'spark-select'; if (wrapperClass) { groupClass += ` ${wrapperClass}`; } if (error) { groupClass += ' spark-select-error'; } return (
{!!(label || desc) && (
{!!label && }
)} noOptionsMessage} // classNamePrefix={classNamePrefix} isClearable={isClearable} isMulti={isMulti} closeMenuOnSelect={!isMulti} onChange={handleChange} value={getValue()} getOptionLabel={(data) => data[labelKey]} getOptionValue={(data) => data[valueKey]} isOptionDisabled={(option) => option.isdisabled} styles={(dark ? { ...DarkSelect, ...SelectCss, ...sizeSmall && SmallDarkSelectCss } : simpleSelect ? { ...simlpeSelectCss, ...SelectCss } : sizeMedium ? { ...MediumSelectCss, ...SelectCss } : { ...LightSelect, ...SelectCss, ...sizeSmall && SmallSelectCss, })} defaultValue={defaultValue} components={components} {...restProps} /> {!!desc && {desc}} {!!htmlDesc &&
} {!!error && {error}}
); }); Select.displayName = 'Select'; export { Select }; Select.propTypes = { /** * Select label */ label: PropTypes.string, /** * key in options array to display label */ labelKey: PropTypes.string, /** * key in options array to get value */ valueKey: PropTypes.string, /** * options for select box */ options: PropTypes.arrayOf( PropTypes.shape({ icon: PropTypes.string, name: PropTypes.string.isRequired, id: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, PropTypes.bool, ]), }), ), /** * Can seelcted option be cleared? */ isClearable: PropTypes.bool, /** * Can multiple options be selected? */ isMulti: PropTypes.bool, /** * Select box placeholder */ placeholder: PropTypes.string, /** * classname prefix to apply existing styles */ disabled: PropTypes.bool, /** * can options be searched */ isSearchable: PropTypes.bool, /** * Message to display when no options found */ noOptionsMessage: PropTypes.string, /** * Helper text to display at bottom of input */ error: PropTypes.string, /** * error class */ errorClass: PropTypes.string, /** * class which wraps whole component, label and select */ wrapperClass: PropTypes.string, /** * class to apply select component */ className: PropTypes.string, }; ================================================ FILE: packages/client/src/components/Select/selectCss.css ================================================ ================================================ FILE: packages/client/src/components/Select/selectCss.js ================================================ /* eslint-disable no-nested-ternary */ export const SelectCss = { selectlabel: 'mb-1.5 text-primary-text text-sm block w-full leading-5 font-normal', desc: 'mt-1', erorrClass: 'text-error text-sm mt-1 block', selectWrap: 'bg-gray-90 border-1 border-gray-90 p-2 rounded-3 focus:outline-none focus:border-primary-dark', option: (provided, state) => ({ ...provided, // eslint-disable-next-line no-nested-ternary backgroundColor: state.isSelected ? 'var(--color-bg-primary) !important' : state.isFocused ? 'var(--color-bg-primary) !important' : 'var(--color-bg-white) !important', borderBottom: '1px solid var(--color-gray-90)', padding: '5px 10px', fontSize: '14px', color: state.isSelected ? '#fff' : state.isFocused ? '#fff' : 'var(--color-text-primary)', cursor: state.isDisabled ? 'not-allowed' : 'pointer', opacity: state.isDisabled ? 0.5 : 1, wordBreak: 'break-word', }), menu: (provided) => ({ ...provided, backgroundColor: 'transparent', margin: '0', border: '1px solid var(--color-gray-90)', boxShadow: 'var(--box-shadow)', }), input: (provided) => ({ ...provided, color: 'text-primary-text', }), placeholder: (provided) => ({ ...provided, color: 'var(--color-placeholder-primary)', fontSize: '12px', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', top: 'auto', transform: 'translate(0,0)', // position: 'relative', }), multiValue: (provided) => ({ ...provided, backgroundColor: 'var(--color-gray-200)', color: 'var(--color-text-primary)', flexWrap: 'no-wrap', }), multiValueLabel: (provided) => ({ ...provided, // backgroundColor:"var(--color-bg-default-light)", color: 'var(--color-text-primary)', fontSize: '75%', padding: '1px', paddingLeft: '4px', }), multiValueRemove: (provided) => ({ ...provided, backgroundColor: 'transparent !important', color: 'var(--color-text-primary) !important', cursor: 'pointer', }), singleValue: (provided, state) => { const opacity = state.isDisabled ? 0.5 : 1; const transition = 'opacity 300ms'; return { ...provided, color: 'var(--color-gray-white)', // marginTop:"4px", opacity, transition, }; }, dropdownIndicator: (provided) => ({ ...provided, fill: 'var(--color-gray-white)', }), group: (provided) => ({ ...provided, fontSize: '14px', padding: '0 10px', }), }; export const DarkSelect = { menuList: (provided) => ({ ...provided, padding: 0, maxHeight: '150px', borderRadius: '0 0 3px 3px', backgroundColor: 'var(--color-gray-inputSub)', border: 'none', }), control: (provided, state) => ({ ...provided, background: 'var(--color-gray-inputSub)', opacity: state.isDisabled ? 0.5 : 1, cursor: state.isDisabled ? 'not-allowed' : 'pointer', padding: '1px 0', // none of react-select's styles are passed to width: '100%', display: 'flex', color: 'var(--color-gray-white)', // border:"none", border: state.isFocused ? '1px solid var(--color-bg-primary)' : '1px solid var(--color-gray-300) !important', borderRadius: '3px', boxShadow: 'none', }), valueContainer: (provided) => ({ ...provided, flexWrap: 'nowrap', }), }; export const LightSelect = { menuList: (provided) => ({ ...provided, padding: 0, maxHeight: '150px', borderRadius: '0 0 3px 3px', backgroundColor: 'var(--color-gray-input)', border: 'none', }), control: (provided, state) => ({ ...provided, background: 'var(--color-gray-input)', opacity: state.isDisabled ? 0.5 : 1, cursor: state.isDisabled ? 'not-allowed' : 'pointer', padding: '1px 0', // none of react-select's styles are passed to width: '100%', display: 'flex', color: 'var(--color-gray-white)', // border:"none", border: state.isFocused ? '1px solid var(--color-bg-primary)' : '1px solid var(--color-gray-70) !important', borderRadius: '3px', boxShadow: 'none', }), valueContainer: (provided) => ({ ...provided, flexWrap: 'nowrap', }), }; export const SmallSelectCss = { menuList: (provided) => ({ ...provided, padding: 0, maxHeight: '150px', borderRadius: '0 0 3px 3px', backgroundColor: 'var(--color-gray-input)', border: 'none', }), control: (provided, state) => ({ ...provided, background: 'var(--color-gray-input)', opacity: state.isDisabled ? 0.5 : 1, cursor: state.isDisabled ? 'not-allowed' : 'pointer', padding: '0 0', // none of react-select's styles are passed to width: '100%', display: 'flex', minHeight: '26px', color: 'var(--color-gray-white)', // border:"none", border: state.isFocused ? '1px solid var(--color-bg-primary)' : '1px solid var(--color-gray-70) !important', borderRadius: '3px', boxShadow: 'none', }), input: (provided) => ({ ...provided, padding: '0 0px', margin: '1px', color: 'text-primary-text', }), indicatorsContainer: (provided) => ({ ...provided, height: '26px', }), valueContainer: (provided) => ({ ...provided, flexWrap: 'nowrap', padding: '0px 8px', }), singleValue: (provided, state) => { const opacity = state.isDisabled ? 0.5 : 1; const transition = 'opacity 300ms'; return { ...provided, color: 'var(--color-gray-white)', fontSize: '12px', // marginTop:"4px", opacity, transition, }; }, }; export const SmallDarkSelectCss = { menuList: (provided) => ({ ...provided, padding: 0, maxHeight: '150px', borderRadius: '0 0 3px 3px', backgroundColor: 'var(--color-gray-inputSub)', border: 'none', }), control: (provided, state) => ({ ...provided, background: 'var(--color-gray-inputSub)', opacity: state.isDisabled ? 0.5 : 1, cursor: state.isDisabled ? 'not-allowed' : 'pointer', padding: '0 0', // none of react-select's styles are passed to width: '100%', display: 'flex', minHeight: '30px', color: 'var(--color-gray-white)', // border:"none", border: state.isFocused ? '1px solid var(--color-bg-primary)' : '1px solid var(--color-gray-300) !important', borderRadius: '3px', boxShadow: 'none', }), input: (provided) => ({ ...provided, padding: '1px 0px', color: 'text-primary-text', }), indicatorsContainer: (provided) => ({ ...provided, height: '30px', }), valueContainer: (provided) => ({ ...provided, flexWrap: 'nowrap', padding: '0px 8px', }), singleValue: (provided, state) => { const opacity = state.isDisabled ? 0.5 : 1; const transition = 'opacity 300ms'; return { ...provided, color: 'var(--color-gray-white)', fontSize: '12px', // marginTop:"4px", opacity, transition, }; }, }; export const MediumSelectCss = { menuList: (provided) => ({ ...provided, padding: 0, maxHeight: '150px', borderRadius: '0 0 3px 3px', backgroundColor: 'var(--color-gray-input)', border: 'none', }), control: (provided, state) => ({ ...provided, background: 'var(--color-gray-input)', opacity: state.isDisabled ? 0.5 : 1, cursor: state.isDisabled ? 'not-allowed' : 'pointer', padding: '0 0', // none of react-select's styles are passed to width: '100%', display: 'flex', minHeight: '30px', color: 'var(--color-gray-white)', // border:"none", border: state.isFocused ? '1px solid var(--color-bg-primary)' : '1px solid var(--color-gray-70) !important', borderRadius: '3px', boxShadow: 'none', }), input: (provided) => ({ ...provided, padding: '0 0px', margin: '1px', color: 'text-primary-text', }), indicatorsContainer: (provided) => ({ ...provided, height: '30px', }), valueContainer: (provided) => ({ ...provided, flexWrap: 'nowrap', padding: '0px 8px', }), singleValue: (provided, state) => { const opacity = state.isDisabled ? 0.5 : 1; const transition = 'opacity 300ms'; return { ...provided, color: 'var(--color-gray-white)', fontSize: '12px', // marginTop:"4px", opacity, transition, }; }, }; export const simlpeSelectCss = { menuList: (provided) => ({ ...provided, padding: 0, maxHeight: '150px', borderRadius: '0 0 3px 3px', backgroundColor: 'var(--color-gray-input)', border: 'none', }), control: (provided, state) => ({ ...provided, background: 'transparent', opacity: state.isDisabled ? 0.5 : 1, cursor: state.isDisabled ? 'not-allowed' : 'pointer', padding: ' 0', // none of react-select's styles are passed to width: '100%', display: 'flex', color: 'var(--color-gray-white)', border: 'none', // borderBottom: state.isFocused ? '1px solid var(--color-bg-primary)' : '1px solid var(--color-gray-70) !important', borderRadius: '3px', boxShadow: 'none', }), valueContainer: (provided) => ({ ...provided, flexWrap: 'nowrap', }), }; ================================================ FILE: packages/client/src/components/SelectTree/index.js ================================================ import { isEmpty, flatten } from 'lodash'; import React from 'react'; import DropdownTreeSelect from 'react-dropdown-tree-select'; import 'react-dropdown-tree-select/dist/styles.css'; import { ORM_TYPE } from '../../constant/Project/applicationStep'; import { Description } from '../Description'; import { SelectCss } from '../Select/selectCss'; /** * mode:multiSelect hierarchical simpleSelect radioSelect */ export const defaultAttributes = { [ORM_TYPE.MONGOOSE]: { _id: { type: 'ObjectId' }, isActive: { type: 'Boolean' }, createdAt: { type: 'String' }, updatedAt: { type: 'String' }, addedBy: { type: 'ObjectId' }, updatedBy: { type: 'ObjectId' }, }, [ORM_TYPE.SEQUELIZE]: { isActive: { type: 'BOOLEAN' }, createdAt: { type: 'STRING' }, updatedAt: { type: 'STRING' }, addedBy: { type: 'STRING' }, updatedBy: { type: 'STRING' }, }, }; export const SelectTree = React.memo(({ placeholder = '', disabled, label, data = {}, mode = 'multiSelect', labelClass, handleChange = () => {}, className = '', WrapClassName = '', defaultValue = [], disabledKey = [], // disable selection for particular key noDataMessage = '', LeftLabel, desc = '', error = '', id, dark, size, onKeyDown, customIconClick = () => {}, // icon, customDataJson = {}, // If data is custom when data syntax are different }) => { const changeRef = React.useRef({}); const nodeConversion = React.useCallback((node) => ({ fullName: node?._parentName ? `${node?._parentName}.${node?.label}` : node?.label, singleName: node?.label }), []); const handleAttributeChange = ({ currentNode, selectedNode }) => { handleChange({ allSelectedNode: selectedNode?.map((node) => nodeConversion(node)), currentSelectedNode: nodeConversion(currentNode), }); }; changeRef.current = { handleAttributeChange, defaultValue, disabledKey, }; return (
{!!(label || desc) && (
{!!label && (
)}
)}
{!!desc && {desc}} {!!error && {error}}
); }); SelectTree.displayName = 'SelectTree'; // expanded const DropDownComponent = React.memo(({ // icon, customIconClick, onKeyDown, changeRef, customDataJson, data, className, mode, placeholder, noDataMessage = '', clearData = false, disabled = false, id, }) => { const [newData, setData] = React.useState({}); const recursiveTree = (recursiveData, parent = null) => (Object.keys(recursiveData)?.map((mainKey) => ( recursiveData[mainKey] && typeof (recursiveData[mainKey]) === 'object' && { label: mainKey, parent, value: mainKey, isIcon: recursiveData[mainKey]?.isIcon, customKey: recursiveData[mainKey]?.customKey, ...(!isEmpty(changeRef.current?.defaultValue) ? { expanded: flatten(changeRef.current?.defaultValue?.map((expand) => { const parentArray = expand.split('.'); parentArray.push(parentArray.slice(0, expand.split('.').lastIndexOf('.')).join('.')); return parentArray; })).includes(parent ? parent + mainKey : mainKey), } : {}), ...(!isEmpty(changeRef.current.defaultValue) ? { isDefaultValue: changeRef.current.defaultValue?.includes(parent ? `${parent}.${mainKey}` : mainKey) } : {}), ...(!isEmpty(changeRef.current.disabledKey) && { disabled: changeRef.current.disabledKey?.includes(parent ? `${parent}.${mainKey}` : mainKey) }), ...(Object.values(recursiveData[mainKey])?.findIndex((value) => typeof (value) === 'object') > -1 ? { children: recursiveTree(recursiveData[mainKey], parent ? `${parent}.${mainKey}` : mainKey), } : {}), // If Object key value pair ...(Array.isArray(recursiveData[mainKey]) ? { children: recursiveTree({ ...recursiveData[mainKey]?.[0] }, parent ? `${parent}.${mainKey}` : mainKey) } : {}), // If array key value pair }))).filter((el) => el && el); React.useEffect(() => { setData(isEmpty(customDataJson) ? recursiveTree(data) : customDataJson); }, [changeRef.current?.defaultValue, clearData]); return ( { setData(isEmpty(customDataJson) ? recursiveTree(data) : customDataJson); }} mode={mode} className={`select-tree ${className}`} data={newData} disabled={disabled} texts={{ placeholder, noMatches: noDataMessage }} onChange={changeRef.current.handleAttributeChange} noData={isEmpty(data) && isEmpty(customDataJson)} customIconClick={customIconClick} // icon={icon} /> ); }); DropDownComponent.displayName = 'DropDownComponent'; ================================================ FILE: packages/client/src/components/SelectTree/selectTreeCss.css ================================================ .select-tree{ } .select-tree .dropdown, .select-tree .dropdown-trigger{ width: 100%; } .select-tree.react-dropdown-tree-select .dropdown{ display: block; } .select-tree.react-dropdown-tree-select .dropdown .dropdown-trigger{ @apply rounded border-gray-70 bg-gray-input border-1 flex items-center focus:border-primary-dark focus:outline-none; padding: 4.7px 4px; overflow: hidden; width: 100%; } .select-tree.react-dropdown-tree-select.smallBox .dropdown .dropdown-trigger{ padding: 2px 4px; } .small .select-tree.react-dropdown-tree-select .dropdown .dropdown-trigger{ padding: 0 4px; } .small .tag-item{ margin: 2.5px 4px; } .small .select-tree.react-dropdown-tree-select .dropdown .dropdown-trigger .tag-item input{ font-size: 12px; } .medium .select-tree.react-dropdown-tree-select .dropdown .dropdown-trigger{ padding: 1.5px 4px; } .medium .select-tree.react-dropdown-tree-select .dropdown .dropdown-trigger .tag-item input{ font-size: 12px; } .select-tree.react-dropdown-tree-select .dropdown .dropdown-trigger .tag-item input{ @apply bg-transparent border-none placeholder-primary text-sm focus:border-primary-dark; } .select-tree.react-dropdown-tree-select .dropdown .dropdown-content{ @apply w-full bg-white border-1 border-gray-200 rounded-bl rounded-br; /* bg-gray-selectDropdown */ z-index: 10; padding: 0; } .select-tree.react-dropdown-tree-select .dropdown .dropdown-content .no-matches{ width: 100%; text-align: center; display: block; padding: 10px; opacity: 0.5; } .select-tree .tag{ padding-right: 1rem; } .select-tree .tag-list{ @apply w-full flex items-center; padding-right: 35px; } .select-tree .tag-item{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .select-tree .tag-item:last-child{ display: none; } .select-tree .tag-item:first-child{ display: block; } .select-tree .dropdown-content ul li{ /* @apply p-1; */ /* padding: 0.45rem 10px !important; */ padding-top: 0; padding-bottom: 0; border-bottom: 1px solid var(--color-gray-90); display: flex; align-items: center; width: 100%; } .select-tree .dropdown-content ul li label{ display: flex; align-items: center; padding: 0.45rem 10px !important; flex-grow: 1; } .select-tree .dropdown-content ul li .radioBoxWrap{ padding-left: 0; margin: 0; margin-right: 5px; width: 14px; height: 14px; } .select-tree .dropdown-content ul li .radioBoxWrap .spark-radio-inner{ width: 14px; height: 14px; } .select-tree .dropdown-content ul li .checkBoxWrap { position: relative; } .select-tree .dropdown-content ul li .checkBoxWrap input{ position: absolute; left: 0; top: 0; opacity: 0; } .select-tree .dropdown-content ul li .radioBoxWrap input:checked ~ .spark-radio-inner{ background-color: var(--color-bg-primary); border:1px solid var(--color-bg-primary); } .select-tree .dropdown-content ul li .radioBoxWrap input:checked ~ .spark-radio-inner:after{ opacity: 1; transform: scale(0.7); } .select-tree .dropdown-content ul li.focused .radioBoxWrap input:checked ~ .spark-radio-inner{ border:1px solid #fff; } .select-tree .dropdown-content ul li .checkBoxWrap input:checked ~ .spark-checkbox-inner{ background-color: var(--color-bg-primary); border:1px solid var(--color-bg-primary); } .select-tree .dropdown-content ul li .checkBoxWrap input:checked ~ .spark-checkbox-inner:after{ opacity: 1; border: 1px solid #fff; border-top: 0; border-left: 0; transform: rotate( 45deg ) scale(1) translate(-50%,-50%); transition: all .2s cubic-bezier(.12,.4,.29,1.46); left: 3px; width: 0.20rem; height: 0.4rem; } .select-tree .dropdown-content ul li.focused input:checked ~ .spark-checkbox-inner{ border:1px solid #fff; } .select-tree .dropdown-content ul li .checkBoxWrap .spark-checkbox-inner{ width: 14px; height: 14px; } .select-tree .dropdown-content ul li i{ @apply text-primary-text mr-3 focus:outline-none; flex-shrink: 0; padding: 0.45rem 0 0.45rem 10px!important; margin-right: 0; } .select-tree .dropdown-content ul li label .node-label{ @apply text-primary-text text-sm capitalize font-normal; } .select-tree .dropdown-content ul li label input{ @apply mr-1; } .select-tree .dropdown-content ul li.leaf[aria-level="1"] i{ display: none } .select-tree .node.focused{ @apply bg-primary-dark; } .select-tree .node.focused i, .select-tree .node.focused label .node-label{ @apply text-defaultWhite; } .select-tree .tag{ @apply bg-gray-200 text-primary-text text-xs px-2 py-0 capitalize flex items-center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block; position: relative; } .select-tree .tag-remove{ @apply text-primary-text ml-1; position: absolute; right: 6px; top: 0; bottom: 0; margin: auto; } .select-tree.react-dropdown-tree-select .dropdown .dropdown-trigger.arrow.top:after, .dropdown .dropdown-trigger.arrow.bottom:after{ @apply absolute right-4 text-primary-text text-xxs; color:var( --color-gray-white) !important; } .select-tree.react-dropdown-tree-select .infinite-scroll-component { max-height: 160px; } .tag-list .tag-item:first-child{ display: block !important; } .tag-list .tag-item:last-child{ display: none; width: 100%; } .tag-list .tag-item:last-child input{ width: 100%; } /* Select tree hide item */ .selectValue .tag-list .tag-item{ display: none !important; } .selectValue .tag-list .tag-item:last-child{ display: block !important; } .SelectTreeDisable .disabled { opacity: 0.5; cursor: no-drop; } /* dark */ .darkSelect.select-tree.react-dropdown-tree-select .dropdown .dropdown-trigger{ background-color: var(--color-gray-inputSub); border: 1px solid var(--color-gray-300); } .darkSelect.select-tree.react-dropdown-tree-select .dropdown .dropdown-trigger:focus{ border-color: var(--color-bg-primary); } .darkSelect.select-tree.react-dropdown-tree-select .dropdown .dropdown-content{ background-color: var(--color-gray-inputSub); } ================================================ FILE: packages/client/src/components/SidebarMenuList/index.js ================================================ /* eslint-disable no-nested-ternary */ import React, { useState } from 'react'; import { MenuItem } from 'react-pro-sidebar'; import { Link } from 'react-router-dom'; import PropTypes from 'prop-types'; import { Icons } from '@dhiwise/icons'; import { SidebarMenuListCss } from './sidebarMenuListCss'; export const SidebarMenuList = React.memo(({ title = '', isSubMenu = false, subMenuList = [], subTitle = '', onClick = () => { }, mainMenuList = [], titleKey = '', initialSelectedId = '', Icon, IconActive, onIconClick, IconError, }) => { const [isMenu, setIsMenu] = useState(false); const menuSelect = () => { setIsMenu(!isMenu); }; const Path = window.location.pathname; const [mainMenuId, setMainMenuId] = useState(false); const handelMainMenu = React.useCallback((menuSelectedId) => { setMainMenuId(menuSelectedId); onClick(menuSelectedId); }, []); React.useEffect(() => { setMainMenuId(initialSelectedId); }, [initialSelectedId]); return ( <> {/* //TODO:subMenu dynamic set */} {isSubMenu ? (
{subTitle &&
{subTitle}
} {subMenuList?.map((d) => (
{Path === d.link ? : }
{d.Subtitle}
))}
) : ( mainMenuList?.map((menu) => ( handelMainMenu(menu?._id)} className={`${SidebarMenuListCss.menuList} ${mainMenuId === menu._id && menu.isErr ? 'bg-secondary-red border-secondary-red' : ''} ${mainMenuId === menu._id && SidebarMenuListCss.menuActive}`} >
{menu[titleKey] ?? '-'} {menu.total && ( {menu?.total} )} {Icon && menu.code &&
onIconClick?.(menu)}>{mainMenuId === menu?._id ? IconActive : menu.isErr ? IconError : Icon}
}
)))} ); }); SidebarMenuList.propTypes = { /** * link redirect to use */ // key: PropTypes.string, /** * Optional click handler */ onClick: PropTypes.func, /** * manuclassname be? */ title: PropTypes.string, /** * Profile tru false */ isSubMenu: PropTypes.bool, /** * icon true false */ subTitle: PropTypes.string, /** * Main Menu list of array when isSubMenu false */ // eslint-disable-next-line react/forbid-prop-types mainMenuList: PropTypes.array, /** * title key passed key which used to shown in title */ titleKey: PropTypes.string, /** * used to pass Initial selected Id */ initialSelectedId: PropTypes.string, }; SidebarMenuList.displayName = 'SidebarMenuList'; ================================================ FILE: packages/client/src/components/SidebarMenuList/sidebarMenuListCss.js ================================================ export const SidebarMenuListCss = { menuList: 'text-primary-text border-b-1 border-gray-100 py-1', menuActive: 'bg-primary-dark text-primary-defaultWhite border-primary-dark', subMenuList: 'text-primary-text w-full', sidebarMenu: 'text-primary-text border-b-1 border-gray-100 py-1', sidebarBottomAction: 'absolute bottom-0 w-full', thumbMenuActive: 'border-primary-dark', }; ================================================ FILE: packages/client/src/components/Spinner/index.js ================================================ import React from 'react'; import './spinner.css'; export function Spinner({ className }) { return (
); } ================================================ FILE: packages/client/src/components/Spinner/spinner.css ================================================ .dhi-ellipsis { display: block; position: absolute; right: 0px; left:-7px; top: 0; bottom: 0; margin: auto; width: 80px; height: 13px; -webkit-transform: scale(0.7); transform: scale(0.7); } .dhi-ellipsis div { position: absolute; top: 0px; width: 13px; height: 13px; border-radius: 50%; background: #fff; animation-timing-function: cubic-bezier(0, 1, 1, 0); } .spinnerMedium{ transform: scale(0.6); width: 60px; } .themeSpinner div{ background-color: var(--color-outline-button-text); } .theme.dhi-ellipsis div{ background: var(--color-bg-primary); } .dhi-ellipsis div:nth-child(1) { left: 8px; animation: dhi-ellipsis1 0.6s infinite; } .dhi-ellipsis div:nth-child(2) { left: 8px; animation: dhi-ellipsis2 0.6s infinite; } .dhi-ellipsis div:nth-child(3) { left: 32px; animation: dhi-ellipsis2 0.6s infinite; } .dhi-ellipsis div:nth-child(4) { left: 56px; animation: dhi-ellipsis3 0.6s infinite; } .dhi-ellipsis.spinnerMedium div:nth-child(1), .dhi-ellipsis.spinnerMedium div:nth-child(2){ left: 0; } .dhi-ellipsis.spinnerMedium div:nth-child(3) { left: 24px; } .dhi-ellipsis.spinnerMedium div:nth-child(4) { left: 48px; } @keyframes dhi-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes dhi-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes dhi-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } } ================================================ FILE: packages/client/src/components/StepFooter/index.js ================================================ import React from 'react'; import ErrorMsg from '../ErrorMsg'; import { Button } from '../Button'; export const StepFooter = ({ Back, backClick = () => {}, Next, nextClick = () => {}, isNextDisable = false, isSaveDisable = false, nextLoading = false, saveText, saveClick = () => {}, saveLoading = false, backLoading = false, errorMessage, children, className, }) => (
{errorMessage && (
)} {children} {Back && } {saveText && } {Next && }
); ================================================ FILE: packages/client/src/components/Tag/index.js ================================================ import React from 'react'; import PropTypes from 'prop-types'; import { Icons } from '@dhiwise/icons'; import { TagCss } from './tagCss'; export const variantConstant = { primary: 'primary', secondary: 'secondary', coolGray: 'coolGray', active: 'active', deactive: 'deactive', }; export const TagGroup = ({ spaceNone, titleKey = 'tag', onClick = () => {}, valueKey = '', disabled = false, disabledTag = [], TagList = [], className, }) => (
{ [...disabledTag, ...TagList]?.map((t, index) => ( tag[titleKey] === t[titleKey])) && TagCss.disabledTag} whitespace-nowrap`} onClick={(disabled || !!disabledTag?.find((tag) => tag[titleKey] === t[titleKey])) ? undefined : onClick} value={t[valueKey] || index} /> ))}
); export const Tag = ({ title, variant, className, size, close, onClick = () => { }, value, }) => { const variantClass = `${TagCss[[`tag${variant}`]]}`; const sizeClass = `${TagCss[[`tag${size}`]]}`; return (
onClick(value)}> {title} {!!close && (
)}
); }; Tag.propTypes = { /** * How large should the button be? */ variant: PropTypes.oneOf(['primary', 'secondary', 'coolGray', 'active', 'deactive', 'ghost']), size: PropTypes.oneOf(['normal', 'small', 'xxs']), /** * Optional click handler */ onClick: PropTypes.func, }; Tag.defaultProps = { variant: 'coolGray', size: 'normal', onClick: undefined, }; ================================================ FILE: packages/client/src/components/Tag/tagCss.js ================================================ export const TagCss = { tagWrap: 'cursor-pointer inline-flex justify-between items-center inline-block rounded-3', tagprimary: 'bg-primary-dark border-1 border-primary-dark text-defaultWhite', tagsecondary: 'border-1 border-gray-70 text-primary-text', tagghost: 'text-lg text-primary-dark cursor-text', tagcoolGray: 'border-1 border-gray-100 text-primary-text', tagactive: 'bg-activebg text-activetext', tagdeactive: 'bg-deactivebg text-deactivetext', tagnormal: 'py-0.5 px-3 text-xxs font-semibold leading-5', tagsmall: 'px-1 py-0.5 text-xxs leading-4 font-semibold', tagxxs: 'text-xxs leading-3 p-0.5 -right-12', disabledTag: 'opacity-60 cursor-not-allowed', }; ================================================ FILE: packages/client/src/components/TextArea/index.js ================================================ import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; import { TextAreaCss } from './textareaCss'; import { Description } from '../Description'; import { InputCss } from '../Input/inputCss'; export const TextArea = forwardRef( ({ desc, label, maxLength = '', children, textareaClass, className, placeholder, error, ...name }, ref) => (
{!!(label || desc) && (
{!!label && }
)} {!!desc && {desc}} {!!error && {error}}
), ); TextArea.propTypes = { label: PropTypes.string, textareaClass: PropTypes.string, className: PropTypes.string, placeholder: PropTypes.string, }; TextArea.displayName = 'TextArea'; ================================================ FILE: packages/client/src/components/TextArea/textareaCss.js ================================================ export const TextAreaCss = { lebel: 'mb-1.5 text-primary-text text-sm block w-full font-normal leading-5', desc: 'mt-1', textarea: 'block text-primary-text text-sm placeholder-primary font-normal text-sm py-1.5 px-2 w-full focus:border-primary-dark focus:outline-none border-1 border-gray-70 leading-normal rounded bg-gray-input h-32', }; ================================================ FILE: packages/client/src/components/ToggleBox/index.js ================================================ import React from 'react'; import { Icons } from '@dhiwise/icons'; export const ToggleBox = ({ onClick, isPin, isSidebar, ClassName, }) => (
{isSidebar && (
)} {!isSidebar && (
)}
); ================================================ FILE: packages/client/src/components/hooks/index.js ================================================ import useBoolean from './useBoolean'; export { useBoolean, }; ================================================ FILE: packages/client/src/components/hooks/useBoolean.js ================================================ import * as React from 'react'; const useBoolean = (status) => { const [boolean, setBoolean] = React.useState(status); const setTrue = () => setBoolean(true); const setFalse = () => setBoolean(false); const setToggle = () => { setBoolean((value) => !value); }; return [boolean, setTrue, setFalse, setToggle]; }; export default useBoolean; ================================================ FILE: packages/client/src/components/index.js ================================================ import { Checkbox } from './Checkbox'; import { RadioGroup, Radio } from './Radio/RadioGroup'; import { Input } from './Input'; import { StringInput } from './Input/StringInput'; import { NumberInput } from './Input/NumberInput'; import { NegativeInput } from './Input/NegativeInput'; import { DrawerClose } from './ReactDrawer/DrawerClose'; import { DrawerHead } from './ReactDrawer/DrawerHead'; import { DrawerFooter } from './ReactDrawer/DrawerFooter'; import { PercentageInput } from './Input/PercentageInput'; import { DecimalInput } from './Input/DecimalInput'; import { Select } from './Select'; import { Button } from './Button'; import { CardView } from './CardView'; import { Popup } from './Popup'; import { MessageNotify } from './MessageNotify'; import { ContainerBox } from './ContainerBox'; import { LinkTag } from './LinkTag'; import { Heading } from './Heading'; import { SearchBox } from './SearchBox'; import { Description } from './Description'; import { TextArea } from './TextArea'; import { Tag, TagGroup } from './Tag'; import { Spinner } from './Spinner'; import { SelectTree } from './SelectTree'; import { SidebarMenuList } from './SidebarMenuList'; import { ListBoxWrap } from './ListBox/ListBoxWrap'; import { MenuBox } from './MenuList'; import { ListTitle } from './ListBox/LIstTitle'; import { DropdownMenu, MenuItem } from './DropdownMenu'; import { IconBox } from './IconBox'; import { ConfirmationAlert } from './ConfirmAlert'; import { LabelBox } from './Label'; import { Loader } from './Loader'; import { APIKeyValue } from './APIKeyValue'; import { StepFooter } from './StepFooter'; import { BoxLayout } from './BoxLayout'; import { BackButton } from './BackButton'; import { Datepicker } from './DatePicker'; import NoData from './NoData'; import ErrorMsg from './ErrorMsg'; import { DeleteIcon } from './IconBox/DeleteIcon'; import { CodeEditor } from './CodeEditor'; import { Error } from './Error'; import { ToggleBox } from './ToggleBox'; Input.String = StringInput; Input.Number = NumberInput; Input.Negative = NegativeInput; Input.Percentage = PercentageInput; Input.Decimal = DecimalInput; export { // eslint-disable-next-line max-len DrawerFooter, DrawerHead, DrawerClose, ToggleBox, MenuBox, StepFooter, Error, APIKeyValue, CodeEditor, DeleteIcon, ErrorMsg, Loader, NoData, LabelBox, ConfirmationAlert, IconBox, Datepicker, BackButton, BoxLayout, TagGroup, ListTitle, MenuItem, DropdownMenu, ListBoxWrap, SidebarMenuList, SelectTree, Tag, TextArea, Description, SearchBox, Heading, LinkTag, ContainerBox, MessageNotify, Popup, CardView, Checkbox, RadioGroup, Input, Select, Button, Radio, StringInput, NumberInput, NegativeInput, PercentageInput, Spinner, }; ================================================ FILE: packages/client/src/components/utils.js ================================================ /* eslint-disable no-restricted-syntax */ import { useEffect, useRef } from 'react'; export function classNames(...rest) { const classes = []; const hasOwn = {}.hasOwnProperty; for (let i = 0; i < rest.length; i += 1) { const arg = rest[i]; if (arg) { const argType = typeof arg; if (argType === 'string' || argType === 'number') { classes.push(arg); } else if (Array.isArray(arg)) { if (arg.length) { // eslint-disable-next-line prefer-spread const inner = classNames.apply(null, arg); if (inner) { classes.push(inner); } } } else if (argType === 'object') { if (arg.toString !== Object.prototype.toString) { classes.push(arg.toString()); } else { for (const key in arg) { if (hasOwn.call(arg, key) && arg[key]) { classes.push(key); } } } } } } return classes.join(' '); } export function useCombinedRefs(...refs) { const targetRef = useRef(); useEffect(() => { refs.forEach((ref) => { if (!ref) return; if (typeof ref === 'function') { ref(targetRef.current); } else { // eslint-disable-next-line no-param-reassign ref.current = targetRef.current; } }); }, [refs]); return targetRef; } export const sortOptions = (array = [], sortKey) => { if (!Array.isArray(array)) return []; return array.sort((a, b) => { const left = a[sortKey] ?? Number.MAX_SAFE_INTEGER; const right = b[sortKey] ?? Number.MAX_SAFE_INTEGER; return left - right; }); }; export const regex = { string: /^[A-Za-z .]+$/, firstSpace: /^[A-Za-z.]+$/, number: /^-?\d*\.?\d{0,6}$/, decimalFloatDouble: /^(?!0\d)\d*(\.\d*)?$/, positive: /^\d*[0-9]\d*$/, notZeroPositive: /^[1-9][0-9]*$/, negative: /^-\d*\.?\d{0,6}$/, percentage: /(^100(\.0{1,2})?$)|(^([1-9]([0-9])?|0)(\.[0-9]{1,2})?$)/, website: /^[-., A-Za-z0-9]+$/, alphanum: /^[a-zA-Z0-9]$/, integer: /^[-+]?\d*$/, posNegDecimalFloatDouble: /^[-+]?(?!0\d)\d*(\.\d*)?$/, }; ================================================ FILE: packages/client/src/config/LazyLoader.js ================================================ import Loadable from 'react-loadable'; import React from 'react'; // import Lottie from 'react-lottie'; // import animationData from './loaderdata.json'; import logoLoader from '../assets/images/gif/logo-loader.gif'; export default function LazyLoader(opts) { return Loadable({ loading: () => (
{/* */} loader
), delay: 200, timeout: 10000, ...opts, }); } ================================================ FILE: packages/client/src/config/Loader.js ================================================ import React from 'react'; export default function Loader() { return (
); } ================================================ FILE: packages/client/src/config/Root.js ================================================ import React from 'react'; import { Route, Switch, } from 'react-router-dom'; import LazyLoader from './LazyLoader'; const BuildProcess = LazyLoader({ loader: () => import('../container/common') }); const TechnologySetStep = LazyLoader({ loader: () => import('../container/Shared/TechnologySetStep') }); const PlatFormConfiguration = LazyLoader({ loader: () => import('../container/CRUD/Configuration') }); const Modal = LazyLoader({ loader: () => import('../container/CRUD/Modal') }); const ModelRoleAccess = LazyLoader({ loader: () => import('../container/RoleAccess') }); const Dashboard = LazyLoader({ loader: () => import('../container/Dashboard') }); const ModelPermission = LazyLoader({ loader: () => import('../container/CRUD/Permission') }); const NodeConstant = LazyLoader({ loader: () => import('../container/Constant') }); const Policy = LazyLoader({ loader: () => import('../container/Policy') }); const Routes = LazyLoader({ loader: () => import('../container/CRUD/Routes') }); const NodeEnvironment = LazyLoader({ loader: () => import('../container/EnvironmentVariable') }); const Configuration = LazyLoader({ loader: () => import('../container/Configuration') }); const App = () => { document.getElementsByTagName('html')[0].classList.add('theme-black'); return ( <> {/* project & application */} {/* Nodejs */} {/* CRUD */} (
Not Found
)} /> ); }; export default App; ================================================ FILE: packages/client/src/config/loaderdata.json ================================================ {"v":"5.7.4","fr":30,"ip":0,"op":37,"w":500,"h":500,"nm":"DhiWise Logo 2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Layer 2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[174.176,114.662,0],"ix":2,"l":2},"a":{"a":0,"k":[99.218,83.247,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-1.743,29.63],[39.353,-3.694],[-0.005,-70.005],[-0.454,-4.448],[-5.457,0.199]],"o":[[1.888,-32.105],[-69.698,6.543],[-0.004,4.471],[5.357,0.403],[127.356,-4.641]],"v":[[89.83,-20.92],[31.965,-72.053],[-91.713,61.545],[-91.037,74.932],[-74.81,75.548]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.501999978458,0.051000000449,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[99.218,83.248],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":30,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":900,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Layer 3 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[186.164,253.86,0],"ix":2,"l":2},"a":{"a":0,"k":[108.35,70.099,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[8.362,0],[0,45.544],[-0.121,1.776],[27.647,0.037],[4.64,0.326],[-6.694,-9.985],[-61.479,41.15]],"o":[[-45.544,0],[0,-1.741],[-25.657,10.3],[-4.725,0],[3.802,11.404],[41.2,61.462],[-7.979,2.501]],"v":[[76.197,25.231],[-6.267,-57.234],[-6.085,-62.598],[-86.786,-47.061],[-100.85,-47.532],[-85.034,-15.303],[100.85,21.449]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.501999978458,0.051000000449,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[108.35,70.099],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":30,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":900,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Layer 4 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[337.993,248.375,0],"ix":2,"l":2},"a":{"a":0,"k":[102.826,245.18,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[61.017,13.862],[26.965,-12.541],[-1.293,0],[-0.007,-45.539],[0,0],[0,0],[0,0]],"o":[[-29.004,-6.563],[1.281,0],[45.539,0],[0,0],[0,0],[0,0],[-0.003,-62.571]],"v":[[-8.995,-231.117],[-95.327,-221.897],[-91.46,-221.982],[-8.995,-139.53],[-8.995,237.68],[95.327,237.68],[95.327,-100.442]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.380000005984,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[102.826,245.18],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":30,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":900,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Layer 5 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[184.268,381.999,0],"ix":2,"l":2},"a":{"a":0,"k":[140.305,126.767,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.005,35.626],[-3.323,9.059],[15.995,-0.731],[2.175,0],[23.344,17.897],[8.249,12.389],[-55.166,-49.33],[-49.33,55.165],[-4.679,8.203]],"o":[[-0.014,-9.65],[-14.707,6.333],[-2.138,0.096],[-29.416,0.042],[-11.816,-9.05],[-49.329,55.166],[55.165,49.329],[6.295,-7.04],[-33.845,-11.122]],"v":[[76.076,-41.903],[81.079,-70.189],[34.645,-59.507],[28.193,-59.35],[-53.172,-86.887],[-83.476,-119.268],[-72.908,69.939],[116.298,59.371],[132.805,36.443]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0.380000005984,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[140.305,126.767],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":30,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":900,"st":0,"bm":0}],"markers":[]} ================================================ FILE: packages/client/src/constant/Nodecrud.js ================================================ import { APPLICATION_CODE } from './Project/applicationStep'; export const RedirectUrl = { [APPLICATION_CODE.nodeExpress]: { platformConfig: { nextUrl: '/node/crud/model', previousUrl: '', backScreenUrl: '/node/dashboard', noDataUrl: '', pageUrl: '/node/crud/platform', }, model: { nextUrl: '/node/crud/permission', previousUrl: '/node/crud/platform', backScreenUrl: '/node/dashboard', noDataUrl: '', pageUrl: '/node/crud/model', afterBuildNextUrl: '/node/crud/permission', }, permission: { nextUrl: '/node/crud/routes', previousUrl: '/node/crud/model', backScreenUrl: '/node/dashboard', noDataUrl: '', pageUrl: '/node/crud/permission', afterBuildPreviousUrl: '/node/crud/model', }, route: { nextUrl: '', previousUrl: '/node/crud/permission', backScreenUrl: '/node/dashboard', noDataUrl: '', pageUrl: '/node/crud/routes', }, }, }; export const LAYOUT_STEP_MODULE_NAME = { [APPLICATION_CODE.nodeExpress]: 'NodeCRUD', }; ================================================ FILE: packages/client/src/constant/Project/applicationStep.js ================================================ const USER_TYPE = { USER: 1, ADMIN: 2, }; const PLATFORM_TYPE = { Admin: 'Admin', Device: 'Mobile app', Desktop: 'Desktop', Client: 'Front(Website)', }; const PLATFORM_VALUE = { Admin: 'admin', Device: 'device', Desktop: 'desktop', Client: 'client', }; export const PLATFORM_FILTER = [ { id: PLATFORM_VALUE.Admin, name: PLATFORM_TYPE.Admin }, { id: PLATFORM_VALUE.Device, name: PLATFORM_TYPE.Device }, { id: PLATFORM_VALUE.Desktop, name: PLATFORM_TYPE.Desktop }, { id: PLATFORM_VALUE.Client, name: PLATFORM_TYPE.Client }, ]; export const USER_TYPE_FILTER = [ { id: USER_TYPE.USER, name: 'User' }, { id: USER_TYPE.ADMIN, name: 'Admin' }, ]; const AUTH_MODEL = { USER: 1, }; const AUTH_MODEL_FILTER = [ { id: AUTH_MODEL.USER, name: 'User' }, ]; export const ORM_TYPE = { MONGOOSE: 1, SEQUELIZE: 2, }; export const DATABASE_TYPE = { MONGODB: 1, SQL: 2, MYSQL: 3, POSTGRE_SQL: 4, }; export const DATABASE_SELECTION = [ { id: ORM_TYPE.MONGOOSE, name: 'Mongoose' }, { id: ORM_TYPE.SEQUELIZE, name: 'Sequelize' }, ]; const DATABASE_SEQUALIZE_SELECTION = [ // [ORM_TYPE.MONGOOSE]: [ { id: DATABASE_TYPE.MONGODB, name: 'MongoDB' }, // ], // [ORM_TYPE.SEQUELIZE]: [ { id: DATABASE_TYPE.MYSQL, name: 'MySQL' }, { id: DATABASE_TYPE.SQL, name: 'SQL Server' }, { id: DATABASE_TYPE.POSTGRE_SQL, name: 'PostgreSQL' }, // ], ]; export const APP_NAME_PATTERN = { NODE_EXPRESS: /^([0-9 _-]*[a-zA-Z]){3,}[0-9 _-]*$/, }; export const APP_NAME_VALIDATION_MESSAGE = { NODE_EXPRESS: { name: { required: 'Please enter application name.', minLength: 'Application name must be of minimum 1 characters.', maxLength: 'Application name must be of maximum 40 characters.', pattern: 'Application name can be alphanumeric and only allows - and _ special character', validate: 'Start your application name with an alphanumeric with a minimum of 3 alphabets, and (-, _) are allowed.', duplicate: 'Please enter different application name.', }, }, }; export const APPLICATION_CODE = { nodeExpress: 'NODE_EXPRESS', }; export const APPLICATION_STEP = [ { name: 'configInput[port]', dbKey: 'configInput.port', description: 'Enter application port to connect with your application.', rules: { required: true, min: 1000, max: 65535 }, component: 'numberInput', label: 'Application port*', placeholder: 'Enter application port', validationMsg: { required: 'Please enter application port.', min: 'Application port must be of minimum 1000.', max: 'Application port must be of maximum 65535.', }, defaultValue: '5000', extraProps: { }, }, { name: 'stepInput[ormType]', dbKey: 'stepInput.ormType', ishidden: true, description: 'Code will get generated according to the selected ORM.', rules: { required: true }, component: 'dropdown', label: 'ORM type*', placeholder: 'Select ORM type', validationMsg: { required: 'Please select ORM type.', }, options: DATABASE_SELECTION, extraProps: { }, }, { name: 'stepInput[databaseType]', dbKey: 'stepInput.databaseType', description: 'Code will get generated according to the selected database type.', rules: { required: true }, component: 'dropdown', label: 'Database type*', placeholder: 'Select database type', validationMsg: { required: 'Please select database type.', }, options: DATABASE_SEQUALIZE_SELECTION, extraProps: { }, }, { name: 'configInput[databaseName]', dbKey: 'configInput.databaseName', description: 'Enter name of the database for your application.', rules: { required: true, minLength: 1, maxLength: 50, pattern: /^[a-zA-Z0-9_-]+$/, }, component: 'input', label: 'Database name*', placeholder: 'Enter database name', validationMsg: { required: 'Please enter database name.', minLength: 'Database name must be of minimum 1 characters.', maxLength: 'Database name must be of maximum 50 characters.', pattern: 'Database name only includes alphanumeric, -, _.', }, defaultValue: '', }, { name: 'configInput[isAuthentication]', dbKey: 'configInput.isAuthentication', description: '', ishidden: true, rules: { required: false }, component: 'checkbox', label: 'Authentication', placeholder: 'Authentication', validationMsg: { required: '', }, defaultValue: true, }, { name: 'authModel', dbKey: 'authModel', ishidden: true, description: 'Select authentication model.', rules: { required: true }, component: 'dropdown', label: 'Auth model', placeholder: 'Select auth model', validationMsg: { required: 'Please select auth model.', }, defaultValue: AUTH_MODEL.USER, options: AUTH_MODEL_FILTER, extraProps: { disabled: true, }, }, ]; export const APPLICATION_DASHBOARD = { NODE_EXPRESS: '/node/dashboard', }; export const APPLICATION_PAGE_HEADING = { NODE_EXPRESS: 'node', }; ================================================ FILE: packages/client/src/constant/applicationConfigConstant.js ================================================ import { APPLICATION_CODE, ORM_TYPE } from './Project/applicationStep'; export const UPLOAD_ATTACHMENT_OPTIONS = [ { name: 'local upload', id: 'local' }, { name: 'S3 public upload', id: 'S3' }, { name: 'S3 private upload', id: 's3_private' }, ]; export const APPLICATION_CONFIG_TABS = { [APPLICATION_CODE.nodeExpress]: ['Authentication', 'Social auth', 'Security', 'Upload attachment', 'Data format config'], }; export const DISABLED_QUERY_PARAMETER_KEYS = ['_id', 'id', 'createdAt', 'updatedAt', 'addedBy', 'updatedBy']; export const QUERY_PARAMETER_SUPPORTED_TYPES = { [ORM_TYPE.MONGOOSE]: ['String', 'Number', 'Email'], [ORM_TYPE.SEQUELIZE]: ['STRING', 'CHAR', 'TEXT', 'INTEGER', 'DOUBLE', 'FLOAT', 'DECIMAL'], [ORM_TYPE.ELOQUENT]: ['STRING', 'CHAR', 'TEXT', 'INTEGER', 'DOUBLE', 'FLOAT', 'DECIMAL'], }; export const ATTRIBUTE_FORMAT_DATA_TYPE = { DATE: 'date', BOOLEAN: 'boolean', STRING: 'string', }; export const MODEL_TYPE = { ALL: 1, SINGLE: 2, }; export const DATE_OPTIONS = ['h:mm A', 'h:mm:ss A', 'MM/DD/YYYY', 'MMMM D, YYYY', 'MMMM D, YYYY h:mm A', 'dddd, MMMM D, YYYY h:mm A', 'M/D/YYYY', 'MMM D, YYYY', 'MMM D, YYYY h:mm A', 'ddd, MMM D, YYYY h:mm A']; export const STR_OPERATORS = ['space', ',', '|']; ================================================ FILE: packages/client/src/constant/applicationConstant.js ================================================ export const CONSTANT_GENERATE_TYPE = { AUTO: 1, MANUAL: 2, }; export const NODE_DATA_TYPE = { NUMBER: 'number', STRING: 'string', JSON: 'json', ARRAY: 'array', }; export const NODE_DATA_TYPE_OPTION = [ { name: 'String', value: NODE_DATA_TYPE.STRING, }, { name: 'Number', value: NODE_DATA_TYPE.NUMBER, }, { name: 'Json', value: NODE_DATA_TYPE.JSON, }, { name: 'Array of value', value: NODE_DATA_TYPE.ARRAY, }, ]; export const nodeConstantName = /^[a-zA-Z_]+[\w0-9_]*$/; ================================================ FILE: packages/client/src/constant/buildProcessConstant.js ================================================ export const CODE_ARCHITECTURE = { MVC: 'MVC', CC: 'Clean Code', }; export const PROCESS_STEP_TYPE = { PENDING: 1, COMPLETE: 2, }; export const BUILD_PROCESS_STATUS = { IN_QUEUE: 1, IN_PROCESS: 2, COMPLETED: 3, FAILED: 4, QUEUE_BUILD_REJECTED: 5, }; export const BUILD_ARCHITECTURE_CODE = { MVC: 'MVC', CC: 'CC', }; ================================================ FILE: packages/client/src/constant/common.js ================================================ export const PLATFORMS = [ { name: 'admin', id: 'admin' }, { name: 'mobile app', id: 'device' }, { name: 'desktop', id: 'desktop' }, { name: 'client', id: 'client' }, ]; export const MAX_INPUT_FIELD_LIMIT = { title: 250, // fileName,functionName description: 500, // description key: 250, // attribute name }; ================================================ FILE: packages/client/src/constant/envVariable.js ================================================ export const ENV = { DEVELOPMENT: 'DEVELOPMENT', QA: 'QA', PRODUCTION: 'PRODUCTION', }; export const TYPE_OPTIONS = (type) => (type ? Object.keys(type).map((x) => ({ id: type[x], name: x })) : []); ================================================ FILE: packages/client/src/constant/fileTypeConstant.js ================================================ export const FILE_TYPE_EXTENSIONS = [ { id: 'png', name: 'png' }, { id: 'jpeg', name: 'jpeg' }, { id: 'jpg', name: 'jpg' }, { id: 'gif', name: 'gif' }, { id: 'pdf', name: 'pdf' }, { id: 'doc', name: 'doc' }, { id: 'docx', name: 'docx' }, { id: 'msword', name: 'msword' }, { id: 'vnd.openxmlformats-officedocument.wordprocessingml.document', name: 'vnd.openxmlformats-officedocument.wordprocessingml.document' }, { id: 'xls', name: 'xls' }, { id: 'xlsx', name: 'xlsx' }, { id: 'vnd.ms-excel', name: 'vnd.ms-excel' }, { id: 'json', name: 'json' }, { id: 'x-msdos-program', name: 'x-msdos-program' }, { id: 'x-msdownload', name: 'x-msdownload' }, { id: 'exe', name: 'exe' }, { id: 'x-ms-dos-executable', name: 'x-ms-dos-executable' }, ]; export const EXTENSION_TYPE = { DEFAULT: 1, // unsupported/non clickable file TEXT: 2, IMAGE: 3, }; ================================================ FILE: packages/client/src/constant/languageHeader.js ================================================ import React from 'react'; import { Icons } from '@dhiwise/icons'; import { APPLICATION_CODE } from './Project/applicationStep'; export const languageHeader = { [APPLICATION_CODE.nodeExpress]: [ { key: '1', linkSet: 'configuration', link: '/node/configuration', tooltipID: 'configuration', iconActive: , icon: , tooltip: 'Configuration', }, // { // key: '2', // linkSet: 'environment-variable', // link: '/node/environment-variable', // tooltipID: 'environment-variable', // iconActive: , // icon: , // tooltip: 'Environment variable', // }, { key: '3', linkSet: 'setting', link: '/node/setting', tooltipID: 'setting', iconActive: , icon: , tooltip: 'Setting', }, { key: '4', linkSet: 'application', link: '/application', tooltipID: 'code', iconActive: , icon: , title: 'Code view', menuClass: 'bg-gray-codeButton', }, ], }; ================================================ FILE: packages/client/src/constant/master.js ================================================ import { Input, Select, Checkbox } from '../components'; export const MASTER_PARENT_CODE = { NOTIFICATION: 'NOTIFICATION', SOCIAL_AUTH: 'SOCIAL_AUTH', ANDROID_SOCIAL_AUTH: 'ANDROID_SOCIAL_AUTH', }; export const COMPONENT_TYPE = { text: Input, number: Input.Number, select: Select, checkbox: Checkbox, }; ================================================ FILE: packages/client/src/constant/model.js ================================================ import pluralize from 'pluralize'; import { toLower } from 'lodash'; import { APPLICATION_CODE, DATABASE_TYPE } from './Project/applicationStep'; export const DB_TYPE = { MONGODB: 'MONGODB', SQL: 'SQL', MYSQL: 'MYSQL', POSTRAGSQL: 'POSTRAGSQL', }; export const DB_CONST = { [DATABASE_TYPE.MONGODB]: DB_TYPE.MONGODB, [DATABASE_TYPE.SQL]: DB_TYPE.SQL, [DATABASE_TYPE.MYSQL]: DB_TYPE.MYSQL, [DATABASE_TYPE.POSTGRE_SQL]: DB_TYPE.POSTRAGSQL, }; export const TABS = { SCHEMA_TAB: 0, HOOK_SETUP: 1, INDEXING: 2, }; export const SCHEMA_TAB = { TABLE_VIEW: 0, }; export const HOOK_TAB_TITLE = { [APPLICATION_CODE.nodeExpress]: 'Hook setup', }; export const MODEL_ERROR_TABS = { JSON_ERROR: 'Json error', MODEL_ERROR: 'Model error', }; export const TYPES = { JSON: 'JSON', ARRAY: 'Array', STRING: 'String', NUMBER: 'Number', BOOL: 'Boolean', REF: 'Relationship', }; export const ALL_TABLE_TYPES = { [DB_TYPE.MONGODB]: { STRING: 'String', EMAIL: 'Email', NUMBER: 'Number', BOOL: 'Boolean', ARRAY: 'Array', JSON: 'JSON', MIXED: 'Mixed', DATE: 'Date', BUFFER: 'Buffer', MAP: 'Map', OBJECTID: 'ObjectId', VIRTUAL_RELATION: 'virtualRelation', SINGLELINE: 'SingleLine', MULTILINE: 'MultiLine', URL: 'URL', DECIMAL: 'Decimal', PERCENT: 'Percentage', POINT: 'Point', }, [DB_TYPE.POSTRAGSQL]: { STRING: 'STRING', TEXT: 'TEXT', CHAR: 'CHAR', BOOL: 'BOOLEAN', INTEGER: 'INTEGER', BIGINT: 'BIGINT', FLOAT: 'FLOAT', REAL: 'REAL', DOUBLE: 'DOUBLE', DECIMAL: 'DECIMAL', DATE: 'DATE', DATEONLY: 'DATEONLY', UUID: 'UUID', UUIDV4: 'UUIDV4', BLOB: 'BLOB', ENUM: 'ENUM', JSON: 'JSON', JSONB: 'JSONB', ARRAY: 'ARRAY', GEOMETRY: 'GEOMETRY', GEOGRAPHY: 'GEOGRAPHY', RANGE: 'RANGE', TINYSTRING: 'TINYSTRING', // same as string TINYINTEGER: 'TINYINTEGER', // same as integer }, [DB_TYPE.MYSQL]: { STRING: 'STRING', TEXT: 'TEXT', CHAR: 'CHAR', BOOL: 'BOOLEAN', INTEGER: 'INTEGER', BIGINT: 'BIGINT', FLOAT: 'FLOAT', REAL: 'REAL', DOUBLE: 'DOUBLE', DECIMAL: 'DECIMAL', DATE: 'DATE', DATEONLY: 'DATEONLY', TIMESTAMP: 'TIMESTAMP', ENUM: 'ENUM', JSON: 'JSON', GEOMETRY: 'GEOMETRY', GEOGRAPHY: 'GEOGRAPHY', TINYSTRING: 'TINYSTRING', TINYINTEGER: 'TINYINTEGER', UnsignedBigInt: 'UnsignedBigInt', }, [DB_TYPE.SQL]: { STRING: 'STRING', TEXT: 'TEXT', CHAR: 'CHAR', BOOL: 'BOOLEAN', INTEGER: 'INTEGER', BIGINT: 'BIGINT', FLOAT: 'FLOAT', REAL: 'REAL', DOUBLE: 'DOUBLE', DECIMAL: 'DECIMAL', DATE: 'DATE', DATEONLY: 'DATEONLY', ENUM: 'ENUM', TINYSTRING: 'TINYSTRING', TINYINTEGER: 'TINYINTEGER', }, }; export const TABLE_TYPES_NAME = { MONGODB: { EMAIL: 'Email', STRING: 'String', NUMBER: 'Number', BOOL: 'Boolean', ARRAY: 'Array', JSON: 'JSON', MIXED: 'Mixed', DATE: 'Date', BUFFER: 'Buffer', MAP: 'Map', OBJECTID: 'Relationship', SINGLELINE: 'SingleLine', MULTILINE: 'MultiLine', URL: 'URL', DECIMAL: 'Decimal', PERCENT: 'Percentage', VIRTUAL_RELATION: 'Virtual Relationship', POINT: 'Point', }, SQL: { // Sequelize db STRING: 'STRING', TEXT: 'TEXT', CHAR: 'CHAR', BOOL: 'BOOLEAN', INTEGER: 'INTEGER', BIGINT: 'BIGINT', FLOAT: 'FLOAT', REAL: 'REAL', DOUBLE: 'DOUBLE', DECIMAL: 'DECIMAL', DATE: 'DATE', DATEONLY: 'DATEONLY', TIMESTAMP: 'TIMESTAMP', UUID: 'UUID', UUIDV4: 'UUIDV4', BLOB: 'BLOB', ENUM: 'ENUM', JSON: 'JSON', JSONB: 'JSONB', ARRAY: 'ARRAY', GEOMETRY: 'GEOMETRY', GEOGRAPHY: 'GEOGRAPHY', RANGE: 'RANGE', TINYSTRING: 'TINYSTRING', TINYINTEGER: 'TINYINTEGER', UnsignedBigInt: 'UnsignedBigInt', }, }; export const DEFAULT_OPTIONS = [ { name: 'As defined', id: 'AS_DEFINED', sequence: 1 }, { name: 'Null', id: 'NULL', sequence: 2 }, // { name: 'Current Timestamp', id: 'CUR_TIMESTAMP', sequence: 3 }, ]; export const KEYS = { minLength: 'minLength', maxLength: 'maxLength', min: 'min', max: 'max', required: 'required', lowercase: 'lowercase', unique: 'unique', filter: 'filter', default: 'default', trim: 'trim', isEnum: 'isEnum', enum: 'enum', match: 'match', isAutoIncrement: 'isAutoIncrement', ref: 'ref', localField: 'localField', foreignField: 'foreignField', comment: 'comment', // sequelize primary: 'primary', tiny: 'tiny', refAttribute: 'refAttribute', relType: 'relType', innerDataType: 'innerDataType', private: 'private', }; export const getAllDisableField = (type, fields, dbType, opt = {}) => { const TABLE_TYPES = ALL_TABLE_TYPES[dbType]; const isArrayJson = type === TABLE_TYPES.ARRAY || type === TABLE_TYPES.JSON; let obj = { [KEYS.comment]: isArrayJson || type === TABLE_TYPES.POINT, }; if (dbType === DB_TYPE.MONGODB) { // mongoDB if (type === '_id') { // add value false for _id Object.keys(KEYS).forEach((x) => { obj[x] = true; }); obj.type = true; obj[KEYS.attr] = false; obj[KEYS.default] = false; } else { const defaultVal = isArrayJson || [TABLE_TYPES.OBJECTID, TABLE_TYPES.VIRTUAL_RELATION, TABLE_TYPES.POINT, TABLE_TYPES.MAP, TABLE_TYPES.BUFFER, TABLE_TYPES.MIXED, TABLE_TYPES.SINGLELINE, TABLE_TYPES.MULTILINE].includes(type); obj = { ...obj, [KEYS.minLength]: type !== TABLE_TYPES.STRING && type !== TABLE_TYPES.SINGLELINE && type !== TABLE_TYPES.MULTILINE, [KEYS.maxLength]: type !== TABLE_TYPES.STRING && type !== TABLE_TYPES.SINGLELINE && type !== TABLE_TYPES.MULTILINE, [KEYS.match]: type !== TABLE_TYPES.STRING, [KEYS.min]: type !== TABLE_TYPES.DECIMAL && type !== TABLE_TYPES.NUMBER && type !== TABLE_TYPES.DATE, [KEYS.max]: type !== TABLE_TYPES.DECIMAL && type !== TABLE_TYPES.NUMBER && type !== TABLE_TYPES.DATE, [KEYS.lowercase]: !(type === TABLE_TYPES.STRING || type === TABLE_TYPES.SINGLELINE || type === TABLE_TYPES.MULTILINE || type === TABLE_TYPES.URL || type === TABLE_TYPES.EMAIL), [KEYS.trim]: !(type === TABLE_TYPES.STRING || type === TABLE_TYPES.SINGLELINE || type === TABLE_TYPES.MULTILINE || type === TABLE_TYPES.URL || type === TABLE_TYPES.EMAIL), // index: type === TABLE_TYPES.VIRTUAL_RELATION || type === TABLE_TYPES.OBJECTID || type === TABLE_TYPES.ARRAY || type === TABLE_TYPES.JSON, [KEYS.filter]: defaultVal, [KEYS.default]: defaultVal, [KEYS.required]: isArrayJson || type === TABLE_TYPES.POINT, [KEYS.unique]: isArrayJson || type === TABLE_TYPES.POINT || type === TABLE_TYPES.BOOL, [KEYS.isAutoIncrement]: type !== TABLE_TYPES.NUMBER, [KEYS.comment]: isArrayJson || type === TABLE_TYPES.POINT, [KEYS.private]: isArrayJson || type === TABLE_TYPES.POINT, }; } if (fields?.isAutoIncrement) { [KEYS.isEnum, KEYS.filter, KEYS.default, KEYS.minLength, KEYS.maxLength, KEYS.min, KEYS.max, KEYS.match].forEach((x) => { obj[x] = true; }); } if (opt?.attr === '_id') { // Add default attribute "_id" for mongoose Object.keys(KEYS).forEach((x) => { obj[x] = true; }); obj.type = true; obj.attr = true; } } else { // manage sequelize DB // eslint-disable-next-line no-lonely-if if (opt?.attr === 'id') { // Add default attribute "id" for sql Object.keys(KEYS).forEach((x) => { obj[x] = true; }); obj.type = true; obj.attr = true; } else { obj = { ...obj, [KEYS.minLength]: ![TABLE_TYPES.TINYSTRING, TABLE_TYPES.STRING, TABLE_TYPES.TEXT, TABLE_TYPES.CHAR].includes(type), [KEYS.maxLength]: ![TABLE_TYPES.TINYSTRING, TABLE_TYPES.STRING, TABLE_TYPES.TEXT, TABLE_TYPES.CHAR].includes(type), [KEYS.isAutoIncrement]: type !== TABLE_TYPES.TINYINTEGER && type !== TABLE_TYPES.INTEGER && type !== TABLE_TYPES.BIGINT && type !== TABLE_TYPES.UnsignedBigInt, [KEYS.unique]: type !== TABLE_TYPES.STRING && type !== TABLE_TYPES.TEXT && type !== TABLE_TYPES.CHAR, [KEYS.primary]: [TABLE_TYPES.BLOB, TABLE_TYPES.ENUM, TABLE_TYPES.JSONB, TABLE_TYPES.JSON, TABLE_TYPES.ARRAY, TABLE_TYPES.GEOGRAPHY, TABLE_TYPES.GEOMETRY, TABLE_TYPES.RANGE].includes(type), [KEYS.required]: [TABLE_TYPES.DATE, TABLE_TYPES.DATEONLY, TABLE_TYPES.TIMESTAMP, TABLE_TYPES.UUID, TABLE_TYPES.UUIDV4, TABLE_TYPES.BLOB, TABLE_TYPES.ENUM, TABLE_TYPES.JSONB, TABLE_TYPES.JSON, TABLE_TYPES.ARRAY, TABLE_TYPES.GEOGRAPHY, TABLE_TYPES.GEOMETRY, TABLE_TYPES.RANGE].includes(type), // [KEYS.tiny]: type !== TABLE_TYPES.BLOB && type !== TABLE_TYPES.TEXT, [KEYS.min]: ![TABLE_TYPES.TINYINTEGER, TABLE_TYPES.INTEGER, TABLE_TYPES.BIGINT, TABLE_TYPES.FLOAT, TABLE_TYPES.DOUBLE, TABLE_TYPES.REAL, TABLE_TYPES.DECIMAL, TABLE_TYPES.UnsignedBigInt].includes(type), [KEYS.max]: ![TABLE_TYPES.TINYINTEGER, TABLE_TYPES.INTEGER, TABLE_TYPES.BIGINT, TABLE_TYPES.FLOAT, TABLE_TYPES.DOUBLE, TABLE_TYPES.REAL, TABLE_TYPES.DECIMAL, TABLE_TYPES.UnsignedBigInt].includes(type), [KEYS.trim]: true, [KEYS.lowercase]: ![TABLE_TYPES.TINYSTRING, TABLE_TYPES.STRING, TABLE_TYPES.TEXT, TABLE_TYPES.CHAR].includes(type), [KEYS.match]: ![TABLE_TYPES.STRING, TABLE_TYPES.TEXT, TABLE_TYPES.CHAR].includes(type), [KEYS.default]: [TABLE_TYPES.UUID, TABLE_TYPES.UUIDV4, TABLE_TYPES.BLOB, TABLE_TYPES.JSON, TABLE_TYPES.JSONB, TABLE_TYPES.ARRAY, TABLE_TYPES.GEOGRAPHY, TABLE_TYPES.GEOMETRY, TABLE_TYPES.RANGE].includes(type), [KEYS.filter]: [TABLE_TYPES.UUID, TABLE_TYPES.UUIDV4, TABLE_TYPES.BLOB, TABLE_TYPES.JSON, TABLE_TYPES.JSONB, TABLE_TYPES.ARRAY, TABLE_TYPES.GEOGRAPHY, TABLE_TYPES.GEOMETRY, TABLE_TYPES.RANGE].includes(type), }; if (fields?.isAutoIncrement) { [KEYS.isEnum, KEYS.filter, KEYS.default, KEYS.minLength, KEYS.maxLength, KEYS.min, KEYS.max, KEYS.match].forEach((x) => { obj[x] = true; }); } if (fields?.unique) { obj.default = true; obj.filter = true; } if (fields?.default || fields?.filter) { obj.unique = true; } } obj[KEYS.isAutoIncrement] = true; } if (fields?.match && !obj[KEYS.match]) { // pattern enable then remove other validation [KEYS.minLength, KEYS.maxLength, KEYS.lowercase, KEYS.trim].forEach((x) => { obj[x] = true; }); } return obj; }; export const ERROR_MSG = { min: 'Default value must be greater than or equal to Min value', max: 'Default value must be less than or equal to Max value', minLength: 'Default value length must be greater than or equal to MinLength', maxLength: 'Default value length must be less than or equal to MaxLength ', minMax: 'Min value must be less than Max value', minMaxLength: 'MinLength must be less than MaxLength', foreignField: 'Select foreignField', localField: 'Select localField', type: 'Please input valid type', point: 'Please input attribute having type Array', match: 'Please input valid pattern', pointAttr: 'For type point, attribute name must be type', ref: 'Select model for relation', refAttr: 'Select attribute for relation', relType: 'Select type for relation', indexType: 'Please input index data type', indexName: 'Index name already exists', attribute: 'Index contains duplicate attribute.', ttl: 'Please input time in seconds to create TTL.', requiredAttr: 'Please input attribute.', requiredIndexType: 'Please select index type.', requiredSubIndex: 'Please input atleast one attribute and type.', requiredSqlSubIndex: 'Please input atleast one attribute.', attrName: 'Please input valid attribute name', email: 'Please input valid email for attribute having type Email', duplicateAttr: 'Schema contains duplicate attribute.', matchRegex: 'Please input valid default value as per pattern', percentage: 'Please input default value beween 0 to 100', url: 'Please input valid URL', }; const MONGOOSE_TYPES = { SCHEMA_TYPES_OBJ: 'mongoose.schema.types.objectid', TYPES_OBJ: 'mongoose.types.objectid', }; // eslint-disable-next-line consistent-return export const getAllParsedType = (type, TABLE_TYPES) => { if (type) { // eslint-disable-next-line no-param-reassign if (toLower(type) === MONGOOSE_TYPES.SCHEMA_TYPES_OBJ || toLower(type) === MONGOOSE_TYPES.TYPES_OBJ) { type = TABLE_TYPES.OBJECTID; } return type && Object.values(TABLE_TYPES).find((t) => toLower(t) === toLower((type))); } return type; }; const SQL_TYPE_KEYS = { [ALL_TABLE_TYPES.POSTRAGSQL.STRING]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary, KEYS.required, KEYS.unique, KEYS.default, KEYS.minLength, KEYS.maxLength, KEYS.lowercase, KEYS.match], [ALL_TABLE_TYPES.POSTRAGSQL.TINYSTRING]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary, KEYS.required, KEYS.unique, KEYS.default, KEYS.minLength, KEYS.maxLength, KEYS.lowercase], [ALL_TABLE_TYPES.POSTRAGSQL.TEXT]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary, KEYS.required, KEYS.unique, KEYS.default, KEYS.minLength, KEYS.maxLength, KEYS.lowercase, KEYS.match], [ALL_TABLE_TYPES.POSTRAGSQL.CHAR]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary, KEYS.required, KEYS.unique, KEYS.default, KEYS.minLength, KEYS.maxLength, KEYS.lowercase, KEYS.match], [ALL_TABLE_TYPES.POSTRAGSQL.BOOL]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary, KEYS.required, KEYS.default], [ALL_TABLE_TYPES.POSTRAGSQL.INTEGER]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary, KEYS.required, KEYS.default, KEYS.min, KEYS.max, KEYS.isAutoIncrement], [ALL_TABLE_TYPES.POSTRAGSQL.TINYINTEGER]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary, KEYS.required, KEYS.default, KEYS.min, KEYS.max, KEYS.isAutoIncrement], [ALL_TABLE_TYPES.POSTRAGSQL.BIGINT]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary, KEYS.required, KEYS.default, KEYS.min, KEYS.max, KEYS.isAutoIncrement], [ALL_TABLE_TYPES.POSTRAGSQL.FLOAT]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary, KEYS.required, KEYS.default, KEYS.min, KEYS.max], [ALL_TABLE_TYPES.POSTRAGSQL.REAL]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary, KEYS.required, KEYS.default, KEYS.min, KEYS.max], [ALL_TABLE_TYPES.POSTRAGSQL.DOUBLE]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary, KEYS.required, KEYS.default, KEYS.min, KEYS.max], [ALL_TABLE_TYPES.POSTRAGSQL.DECIMAL]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary, KEYS.required, KEYS.default, KEYS.min, KEYS.max], [ALL_TABLE_TYPES.POSTRAGSQL.DATE]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary, KEYS.default], [ALL_TABLE_TYPES.POSTRAGSQL.DATEONLY]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary, KEYS.default], [ALL_TABLE_TYPES.POSTRAGSQL.UUID]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary], [ALL_TABLE_TYPES.POSTRAGSQL.UUIDV4]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary], [ALL_TABLE_TYPES.POSTRAGSQL.BLOB]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.required], [ALL_TABLE_TYPES.POSTRAGSQL.ENUM]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.default, KEYS.isEnum, KEYS.enum], [ALL_TABLE_TYPES.POSTRAGSQL.JSONB]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType], [ALL_TABLE_TYPES.POSTRAGSQL.JSON]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType], [ALL_TABLE_TYPES.POSTRAGSQL.ARRAY]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.innerDataType], [ALL_TABLE_TYPES.POSTRAGSQL.GEOMETRY]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType], [ALL_TABLE_TYPES.POSTRAGSQL.GEOGRAPHY]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType], [ALL_TABLE_TYPES.POSTRAGSQL.RANGE]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.innerDataType], [ALL_TABLE_TYPES.MYSQL.TIMESTAMP]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary, KEYS.default], [ALL_TABLE_TYPES.MYSQL.UnsignedBigInt]: [KEYS.private, KEYS.ref, KEYS.refAttribute, KEYS.relType, KEYS.primary, KEYS.required, KEYS.default, KEYS.min, KEYS.max, KEYS.isAutoIncrement], }; const ALL_TYPE_KEYS = { [DB_TYPE.MONGODB]: { [ALL_TABLE_TYPES.MONGODB.EMAIL]: [KEYS.private, KEYS.required, KEYS.unique, KEYS.default, KEYS.lowercase, KEYS.trim], [ALL_TABLE_TYPES.MONGODB.STRING]: [KEYS.private, KEYS.required, KEYS.unique, KEYS.default, KEYS.minLength, KEYS.maxLength, KEYS.lowercase, KEYS.trim, KEYS.match, KEYS.enum, KEYS.isEnum], [ALL_TABLE_TYPES.MONGODB.NUMBER]: [KEYS.private, KEYS.required, KEYS.unique, KEYS.default, KEYS.min, KEYS.max, KEYS.enum, KEYS.isEnum, KEYS.isAutoIncrement], [ALL_TABLE_TYPES.MONGODB.BOOL]: [KEYS.private, KEYS.required, KEYS.unique, KEYS.default], [ALL_TABLE_TYPES.MONGODB.MIXED]: [KEYS.private, KEYS.required, KEYS.unique], [ALL_TABLE_TYPES.MONGODB.DATE]: [KEYS.private, KEYS.required, KEYS.unique, KEYS.default], [ALL_TABLE_TYPES.MONGODB.BUFFER]: [KEYS.private, KEYS.required, KEYS.unique], [ALL_TABLE_TYPES.MONGODB.MAP]: [KEYS.private, KEYS.required, KEYS.unique], [ALL_TABLE_TYPES.MONGODB.OBJECTID]: [KEYS.private, KEYS.required, KEYS.unique, KEYS.ref], [TYPES.REF]: [KEYS.private, KEYS.required, KEYS.unique, KEYS.ref], // ref and objectid are same [ALL_TABLE_TYPES.MONGODB.SINGLELINE]: [KEYS.private, KEYS.required, KEYS.unique, KEYS.minLength, KEYS.maxLength, KEYS.lowercase, KEYS.trim], [ALL_TABLE_TYPES.MONGODB.MULTILINE]: [KEYS.private, KEYS.required, KEYS.unique, KEYS.minLength, KEYS.maxLength, KEYS.lowercase, KEYS.trim], [ALL_TABLE_TYPES.MONGODB.URL]: [KEYS.private, KEYS.required, KEYS.unique, KEYS.default, KEYS.lowercase, KEYS.trim], [ALL_TABLE_TYPES.MONGODB.DECIMAL]: [KEYS.private, KEYS.required, KEYS.unique, KEYS.default, KEYS.min, KEYS.max], [ALL_TABLE_TYPES.MONGODB.PERCENT]: [KEYS.private, KEYS.required, KEYS.unique, KEYS.default], [ALL_TABLE_TYPES.MONGODB.VIRTUAL_RELATION]: [KEYS.private, KEYS.required, KEYS.unique, KEYS.ref, KEYS.localField, KEYS.foreignField], [ALL_TABLE_TYPES.MONGODB.POINT]: [], }, [DB_TYPE.POSTRAGSQL]: SQL_TYPE_KEYS, [DB_TYPE.MYSQL]: SQL_TYPE_KEYS, [DB_TYPE.SQL]: SQL_TYPE_KEYS, }; export const RELATION_TYPE = { HAS_ONE: 1, HAS_MANY: 2, }; export const SEQUELIZE_RELATION_TYPE = [{ id: 1, name: 'hasOne' }, { id: 2, name: 'hasMany' }]; // model-hooks export const HOOKS = { TYPE: { PRE: 'pre', POST: 'post', }, OPERATIONS: { PRE: { SAVE: 'save', REMOVE: 'remove', VALIDATE: 'validate', FIND: 'find', INIT: 'init', UPDATEONE: 'updateOne', AGGREGATE: 'aggregate', }, POST: { SAVE: 'save', REMOVE: 'remove', VALIDATE: 'validate', FIND: 'find', UPDATE: 'update', INIT: 'init', }, }, }; export const nodeHooksData = () => { function getData(arr, type) { return Object.keys(arr).map((x) => ({ id: `${type}-${arr[x]}`, name: `${type}-${arr[x]}` })); } const preHooks = getData(HOOKS.OPERATIONS.PRE, HOOKS.TYPE.PRE); const postHooks = getData(HOOKS.OPERATIONS.PRE, HOOKS.TYPE.POST); return preHooks.concat(postHooks); }; export const getHookData = () => { const hooksData = nodeHooksData(); return hooksData; }; export const DEFAULT_VALUES = { attr: '', type: '', isEnum: false, filter: '', default: '', min: '', minLength: '', max: '', maxLength: '', match: '', lowercase: false, trim: false, required: false, unique: false, isAutoIncrement: false, // tiny: false, innerDataType: '', primary: false, private: false, refAttribute: '', relType: RELATION_TYPE.HAS_MANY, ref: '', enum: null, }; export const MONGO_TOTAL_FIELDS = 14; export const SQL_TOTAL_FIELDS = 15; export const SQL_FIELD_SEQ = { attr: 1, type: 2, innerDataType: 3, // same col isEnum: 3, // same col filter: 4, default: 5, relation: 6, private: 7, primary: 8, // tiny: 9, required: 10, unique: 11, isAutoIncrement: 12, minimum: 13, maximum: 14, lowercase: 15, match: 16, }; export const ALL_FIELD_SEQ = { [DB_TYPE.MONGODB]: { attr: 1, type: 2, localField: 3, subAttr: 4, // same seq as conditionally exists in same column isEnum: 4, // same seq as conditionally exists in same column relation: 4, // same seq as conditionally exists in same column filter: 5, default: 6, private: 7, required: 8, unique: 9, isAutoIncrement: 10, minimum: 11, maximum: 12, lowercase: 13, trim: 14, match: 15, }, [DB_TYPE.POSTRAGSQL]: SQL_FIELD_SEQ, [DB_TYPE.SQL]: SQL_FIELD_SEQ, [DB_TYPE.MYSQL]: SQL_FIELD_SEQ, }; export const getFieldPosition = (index, dbType) => { const FIELD_SEQ = ALL_FIELD_SEQ[dbType]; const TOTAL_FIELDS = dbType === DB_TYPE.MONGODB ? MONGO_TOTAL_FIELDS : SQL_TOTAL_FIELDS; const focIndex = index * TOTAL_FIELDS; const FiledPosition = { attr: focIndex + FIELD_SEQ.attr, type: focIndex + FIELD_SEQ.type, localField: focIndex + FIELD_SEQ.localField, subAttr: focIndex + FIELD_SEQ.subAttr, isEnum: focIndex + FIELD_SEQ.isEnum, relation: focIndex + FIELD_SEQ.relation, innerDataType: focIndex + FIELD_SEQ.innerDataType, filter: focIndex + FIELD_SEQ.filter, default: focIndex + FIELD_SEQ.default, primary: focIndex + FIELD_SEQ.primary, private: focIndex + FIELD_SEQ.private, // tiny: focIndex + FIELD_SEQ.tiny, required: focIndex + FIELD_SEQ.required, unique: focIndex + FIELD_SEQ.unique, isAutoIncrement: focIndex + FIELD_SEQ.isAutoIncrement, minimum: focIndex + FIELD_SEQ.minimum, maximum: focIndex + FIELD_SEQ.maximum, lowercase: focIndex + FIELD_SEQ.lowercase, trim: focIndex + FIELD_SEQ.trim, match: focIndex + FIELD_SEQ.match, }; return { FiledPosition, FIELD_SEQ, TOTAL_FIELDS }; }; export const SUB_TOTAL_FIELDS = 14; export const SUB_FIELD_SEQ = { attr: 1, type: 2, localField: 3, isEnum: 4, // same seq as conditionally exists in same column relation: 4, // same seq as conditionally exists in same column filter: 5, default: 6, required: 7, unique: 8, isAutoIncrement: 9, minimum: 10, maximum: 11, lowercase: 12, trim: 13, match: 14, }; export const getSubFieldPosition = (index) => { const focIndex = index * SUB_TOTAL_FIELDS; const FiledPosition = { attr: focIndex + SUB_FIELD_SEQ.attr, type: focIndex + SUB_FIELD_SEQ.type, localField: focIndex + SUB_FIELD_SEQ.localField, isEnum: focIndex + SUB_FIELD_SEQ.isEnum, relation: focIndex + SUB_FIELD_SEQ.relation, filter: focIndex + SUB_FIELD_SEQ.filter, default: focIndex + SUB_FIELD_SEQ.default, required: focIndex + SUB_FIELD_SEQ.required, unique: focIndex + SUB_FIELD_SEQ.unique, isAutoIncrement: focIndex + SUB_FIELD_SEQ.isAutoIncrement, minimum: focIndex + SUB_FIELD_SEQ.minimum, maximum: focIndex + SUB_FIELD_SEQ.maximum, lowercase: focIndex + SUB_FIELD_SEQ.lowercase, trim: focIndex + SUB_FIELD_SEQ.trim, match: focIndex + SUB_FIELD_SEQ.match, }; return { FiledPosition }; }; export const DEFAULT_TYPE_LENGTH = { STRING: 255, CHAR: 255, }; // functions by dbType export const util = { getTableTypes: (dbType) => ALL_TABLE_TYPES[dbType], getTypeKeys: (dbType) => ALL_TYPE_KEYS[dbType], getTypeOptions: (dbType) => (ALL_TABLE_TYPES?.[dbType] ? Object.keys(ALL_TABLE_TYPES[dbType]) .filter((x) => ((x !== ALL_TABLE_TYPES[dbType].TIMESTAMP && x !== ALL_TABLE_TYPES[dbType].UnsignedBigInt))) .map((x, i) => ({ id: ALL_TABLE_TYPES[dbType][x], name: dbType === DB_TYPE.MONGODB ? TABLE_TYPES_NAME.MONGODB[x] : TABLE_TYPES_NAME.SQL[x], sequence: i + 1, })) : []), }; export const getParsedType = (type, dbType) => getAllParsedType(type, ALL_TABLE_TYPES[dbType]); const EXCLUDE_PARSE_KEYS = ['type']; export const parsedKeys = (obj, dbType) => { if (!obj) return; const TYPE_KEYS = util.getTypeKeys(dbType); let isSub = false; const json = { ...obj }; Object.keys(json).map((k) => { if (EXCLUDE_PARSE_KEYS.includes(k)) return k; if (k === 'minlength') { // eslint-disable-next-line no-param-reassign k = KEYS.minLength; json[k] = json.minlength; delete json.minlength; } if (k === 'maxlength') { // eslint-disable-next-line no-param-reassign k = KEYS.maxLength; json[k] = json.maxlength; delete json.maxlength; } if (json.type && TYPE_KEYS[json.type]) { if (!TYPE_KEYS[json.type].includes(k)) { if (!isSub && !['description', 'attr', 'key'].includes(k)) { isSub = true; } delete json[k]; } } return k; }); // eslint-disable-next-line consistent-return return { json, isSub }; }; export const getParsedKeys = (obj, dbType) => (obj ? parsedKeys(obj, dbType).json : null); export const getDisableField = (type, fields, dbType, opt) => getAllDisableField(type, fields, dbType, opt); export const isNumberType = (type, TABLE_TYPES) => [TABLE_TYPES.NUMBER, TABLE_TYPES.TINYINTEGER, TABLE_TYPES.INTEGER, TABLE_TYPES.TINYINTEGER, TABLE_TYPES.BIGINT, TABLE_TYPES.FLOAT, TABLE_TYPES.REAL, TABLE_TYPES.DECIMAL, TABLE_TYPES.DOUBLE, TABLE_TYPES.UnsignedBigInt].includes(type); export const ModelPanel = { CUSTOM: { name: 'Custom', tabIndex: 0 }, LIBRARY: { name: 'Library', tabIndex: 1 }, }; export const getSQLHookTemplate = (operation) => { if (!operation) return ''; let hookName = ''; switch (operation) { case 'save': hookName = 'Create'; break; case 'remove': hookName = 'Destroy'; break; case 'validate': hookName = 'Validate'; break; case 'find': hookName = 'Find'; break; case 'init': hookName = 'Init'; break; case 'updateOne': hookName = 'Update'; break; case 'aggregate': hookName = 'Query'; break; default: hookName = ''; } return hookName; }; export const SQL_MODEL_NAME_LENGTH = 64; // 64 characters for MySQL database export const MODEL_NAME_LENGTH = 127; // 127 bytes export const MONGODB_INDEX_NAME_LENGTH = 127; // Don't change formatting of below function export const getHookHeader = ({ dbType, type, operation, modelName, currentApplicationCode, }) => { const startLine = '/*Method start*/'; const endLine = '/*You can write business logic*/'; if (currentApplicationCode === APPLICATION_CODE.nodeExpress) { if (dbType === DB_TYPE.MONGODB) { return `${startLine} schema.${type}('${operation}', async function(${type === 'post' ? 'docs, ' : ''}next) { ${endLine}`; } const op = getSQLHookTemplate(operation); return `${startLine} ${type === HOOKS.TYPE.PRE ? 'before' : 'after'}${op}: [ async function (${modelName}, options){ ${endLine}`; } return `${endLine}`; }; // Don't change formatting of below function export const getHookFooter = ({ dbType, currentApplicationCode }) => { const startLine = '/*Method close*/'; if (currentApplicationCode === APPLICATION_CODE.nodeExpress) { if (dbType === DB_TYPE.MONGODB) { return `${startLine} next(); })`; } return `${startLine} }, ]`; } return `${startLine} }`; }; export const mongoDbModalName = /^[a-zA-Z_]+[\w0-9_]*$/; export const pluralizeTableName = (modelName = '') => (pluralize(modelName)); ================================================ FILE: packages/client/src/constant/modelIndexing.js ================================================ /* eslint-disable no-param-reassign */ import { cloneDeep } from 'lodash'; import { DB_TYPE } from './model'; export const SQL_INDEX = { ORDER_TYPE_OPTIONS: [ { name: 'ASC', id: 'ASC', sequence: 1 }, { name: 'DESC', id: 'DESC', sequence: 2 }, ], TYPE: { BTREE: 'BTREE', GIN: 'GIN', PARTIAL: 'PARTIAL', UNIQUE: 'UNIQUE', }, COLLATE: ['ar_AE', 'ar_BH', 'ar_DZ', 'ar_EG', 'ar_IN', 'ar_IQ', 'ar_JO', 'ar_KW', 'ar_LB', 'ar_LY', 'ar_MA', 'ar_OM', 'ar_QA', 'ar_SA', 'ar_SD', 'ar_SY', 'ar_TN', 'ar_YE', 'be_BY', 'bg_BG', 'ca_ES', 'cs_CZ', 'da_DK', 'de_AT', 'de_BE', 'de_CH', 'de_DE', 'de_LU', 'el_GR', 'en_AU', 'en_CA', 'en_GB', 'en_IN', 'en_NZ', 'en_PH', 'en_US', 'en_ZA', 'en_ZW', 'es_AR', 'es_BO', 'es_CL', 'es_CO', 'es_CR', 'es_DO', 'es_EC', 'es_ES', 'es_GT', 'es_HN', 'es_MX', 'es_NI', 'es_PA', 'es_PE', 'es_PR', 'es_PY', 'es_SV', 'es_US', 'es_UY', 'es_VE', 'et_EE', 'eu_ES', 'fi_FI', 'fo_FO', 'fr_BE', 'fr_CA', 'fr_CH', 'fr_FR', 'fr_LU', 'gl_ES', 'gu_IN', 'he_IL', 'hi_IN', 'hr_HR', 'hu_HU', 'id_ID', 'is_IS', 'it_CH', 'it_IT', 'ja_JP', 'ko_KR', 'lt_LT', 'lv_LV', 'mk_MK', 'mn_MN', 'ms_MY', 'nb_NO', 'nl_BE', 'nl_NL', 'no_NO', 'pl_PL', 'pt_BR', 'pt_PT', 'rm_CH', 'ro_RO', 'ru_RU', 'ru_UA', 'sk_SK', 'sl_SI', 'sq_AL', 'sr_RS', 'sv_FI', 'sv_SE', 'ta_IN', 'te_IN', 'th_TH', 'tr_TR', 'uk_UA', 'ur_PK', 'vi_VN', 'zh_CN', 'zh_HK', 'zh_TW'], GIN_OPERATOR_OPTIONS: ['jsonb_path_ops'], ASSIGNMENT_OPERATOR_OPTIONS: ['in', 'nin', 'ne', '<', '>', '>=', '<=', 'eq'], FIELD_SEQ: { isExpanded: 1, name: 2, indexType: 3, fields: 4, }, SUB_FIELD_SEQ: { attribute: 1, order: 2, operator: 2, value: 3, length: 3, }, TOTAL_FIELDS: 4, // total columns SUB_TOTAL_FIELDS: 3, // total columns DEFAULT: { SUB_OBJ: { attribute: '', // collate: '', commented as discussed with Avina order: '', length: undefined, operator: '', value: '', }, ROW_OBJ: { isExpanded: false, name: '', indexType: '', fields: [], // operator: '', this will be managed in sub-row indexFields: [], }, }, }; export const MONGO_INDEX = { FIELD_SEQ: { name: 1, ttl: 2, expireAfterSeconds: 3, unique: 4, }, SUB_FIELD_SEQ: { attribute: 1, type: 2, }, TOTAL_FIELDS: 4, // total columns SUB_TOTAL_FIELDS: 2, // total columns DEFAULT: { ROW_OBJ: { isExpanded: false, name: '', ttl: '', expireAfterSeconds: '', indexFields: [], }, SUB_OBJ: { attribute: '', indexType: '', }, }, MAX_SUB_ROWS_ALLOWED: 32, }; export const SQL_TYPE_OPTIONS = [ { name: SQL_INDEX.TYPE.BTREE, id: SQL_INDEX.TYPE.BTREE }, // { name: 'GIN index', id: SQL_INDEX.TYPE.GIN }, { name: SQL_INDEX.TYPE.PARTIAL, id: SQL_INDEX.TYPE.PARTIAL }, { name: SQL_INDEX.TYPE.UNIQUE, id: SQL_INDEX.TYPE.UNIQUE }, ]; export const MONGO_TYPE_OPTIONS = [ { name: 'Ascending', id: 1, sequence: 1 }, { name: 'Descending', id: -1, sequence: 2 }, { name: '2dSphere', id: '2dsphere', sequence: 3 }, ]; export const getTypeOptions = (constName) => Object.keys(constName).map( (x) => ({ id: constName[x], name: constName[x] }), ); export const getCollateOpts = () => SQL_INDEX.COLLATE.map((x) => ({ id: x, name: x })); export const getOperatorOpts = () => SQL_INDEX.GIN_OPERATOR_OPTIONS.map((x) => ({ id: x, name: x })); export const getAssignOperatorOpts = () => SQL_INDEX.ASSIGNMENT_OPERATOR_OPTIONS.map((x) => ({ id: x, name: x })); export const checkDuplicate = (arr) => arr.some((x) => x && arr.indexOf(x) !== arr.lastIndexOf(x)); export const findDuplicate = (arr) => arr.find((x) => arr.indexOf(x) !== arr.lastIndexOf(x)); export const getSubFieldPosition = (index, dbType) => { const { SUB_FIELD_SEQ, SUB_TOTAL_FIELDS } = dbType === DB_TYPE.MONGODB ? MONGO_INDEX : SQL_INDEX; const focIndex = index * SUB_TOTAL_FIELDS; const FiledPosition = { attribute: focIndex + SUB_FIELD_SEQ.attribute, order: focIndex + SUB_FIELD_SEQ.order, operator: focIndex + SUB_FIELD_SEQ.operator, value: focIndex + SUB_FIELD_SEQ.value, length: focIndex + SUB_FIELD_SEQ.length, type: focIndex + SUB_FIELD_SEQ.type, }; return { FiledPosition }; }; export const getFieldPosition = (index, isSub, dbType) => { if (isSub) return getSubFieldPosition(index, dbType); const { FIELD_SEQ, TOTAL_FIELDS } = dbType === DB_TYPE.MONGODB ? MONGO_INDEX : SQL_INDEX; const focIndex = index * TOTAL_FIELDS; const FiledPosition = { name: focIndex + FIELD_SEQ.name, indexType: focIndex + FIELD_SEQ.indexType, fields: focIndex + FIELD_SEQ.fields, ttl: focIndex + FIELD_SEQ.ttl, // mongo expireAfterSeconds: focIndex + FIELD_SEQ.expireAfterSeconds, unique: focIndex + FIELD_SEQ.unique, }; return { FiledPosition }; }; export const prepareIndexing = ({ modelIndexes, dbType }) => { if (modelIndexes?.length > 0) { let temp = cloneDeep(modelIndexes); if (dbType === DB_TYPE.MONGODB) { // mongodb temp = temp.map((x) => { const tempFields = []; const obj = { ...x, ...x.options, ttl: !!x.options?.expireAfterSeconds, isExist: true, isExpanded: false, }; delete obj.options; if (x?.indexFields && Object.entries(x.indexFields)?.length > 0) { Object.keys(x.indexFields).forEach((f) => { tempFields.push({ attribute: f, type: x.indexFields[f], isExist: true, }); }); } obj.indexFields = tempFields; return obj; }); } else { // sql temp = temp.map((x) => { if (x.isParserRequired && x?.name === 'PRIMARY') { // old data script const newIndexFields = []; if (x.indexFields && Object.entries?.(x.indexFields)?.length > 0) { Object.keys(x.indexFields).forEach((y) => { newIndexFields.push({ attribute: y, collate: 'en_US', length: 1, order: 'ASC', }); }); } return { ...x, isDefault: true, indexType: SQL_INDEX.TYPE.BTREE, indexFields: newIndexFields, isExist: true, isExpanded: false, }; } if (x?.indexFields?.length > 0) { if (x.indexType === SQL_INDEX.TYPE.BTREE || x.indexType === SQL_INDEX.TYPE.PARTIAL) { x.indexFields = x.indexFields.map((y) => ({ ...y, isExist: true })); } } else if (x.indexType === SQL_INDEX.TYPE.GIN) { x.indexFields = [{ operator: x.operator, isExist: true }]; } else if (x.indexType && x.indexType !== SQL_INDEX.TYPE.UNIQUE) { x.indexFields = [SQL_INDEX.DEFAULT.SUB_OBJ]; } return { ...x, isExist: true, isExpanded: false }; }); } return temp; } return []; }; ================================================ FILE: packages/client/src/constant/permission.js ================================================ export const DEVICE_TYPE = { ADMIN: 'admin', DEVICE: 'device', CLIENT: 'client', DESKTOP: 'desktop', }; export const DEVICE_TYPE_NAME = { // ADMIN: 'Admin', DEVICE: 'Mobile app', CLIENT: 'Front(Website)', // DESKTOP: 'Desktop', }; export const CRUD = { C: 'C', R: 'R', U: 'U', D: 'D', BC: 'BC', BU: 'BU', HD: 'HD', isAuth: 'isAuth', isAuthObj: 'isAuthObj', POLICY: 'policy', ALL: 'ALL', ALL_MODEL: 'ALL_MODEL', ALL_DEVICE: 'ALL_DEVICE', }; export const LINKED_CRUD_OPERATION = { C: ['C', 'BC'], R: ['R'], U: ['U', 'BU'], D: ['D', 'HD'], }; export const CRUD_OPERATIONS = { C: 'Create', R: 'View', U: 'Update', D: 'Delete', BC: 'Bulk Create', BU: 'Bulk Update', HD: 'Hard Delete', }; export const permission = [ { title: 'Model1', permissionSet: [ { all: 'Admin' }, { all: 'Device' }, { all: 'Front' }, { all: 'Front' }, // { all: 'Front' }, ], }, { title: 'Model1', permissionSet: [ { all: 'Admin' }, { all: 'Device' }, { all: 'Front' }, ], }, { title: 'Model1', permissionSet: [ { all: 'Admin' }, { all: 'Device' }, { all: 'Front' }, ], }, { title: 'Model1', permissionSet: [ { all: 'Admin' }, { all: 'Device' }, { all: 'Front' }, ], }, { title: 'Model1', permissionSet: [ { all: 'Admin' }, { all: 'Device' }, { all: 'Front' }, ], }, { title: 'Model1', permissionSet: [ { all: 'Admin' }, { all: 'Device' }, { all: 'Front' }, ], }, { title: 'Model1', permissionSet: [ { all: 'Admin' }, { all: 'Device' }, { all: 'Front' }, ], }, { title: 'Model1', permissionSet: [ { all: 'Admin' }, { all: 'Device' }, { all: 'Front' }, ], }, ]; ================================================ FILE: packages/client/src/constant/policy.js ================================================ export const POLICY_GENERATE_TYPE = { AUTO: 1, MANUAL: 2, }; ================================================ FILE: packages/client/src/constant/reservedVariable.js ================================================ import { APPLICATION_CODE } from './Project/applicationStep'; export const RESERVED_VALIDATION_MESSAGE = 'Oops! You cannot add reserved keyword as a key name.'; export const RESERVED_VARIABLES = { COMMON: [ 'break', 'catch', 'class', 'const', 'do', 'else', 'enum', 'true', 'false', 'finally', 'for', 'if', 'import', 'in', 'interface', 'null', 'package', 'private', 'protected', 'public', 'return', 'super', 'this', 'throw', 'try', 'typeof', 'var', 'while', ], [APPLICATION_CODE.nodeExpress]: { NODE_EXPRESS: [ 'abstract', 'arguments', 'await', 'boolean', 'byte', 'case', 'char', 'continue', 'debugger', 'default', 'delete', 'double', 'eval', 'export', 'extends', 'final', 'float', 'function', 'goto', 'implements', 'instanceof', 'int', 'let', 'long', 'native', 'new', 'short', 'static', 'switch', 'synchronized', 'throws', 'transient', 'void', 'volatile', 'with', 'yield', ], }, }; ================================================ FILE: packages/client/src/constant/rolePermission.js ================================================ export const MODULE_NO = { USER: 1, PROJECT: 7, APPLICATION: 11, PLANS: 21, INVITATION: 109, PERMISSION: 28, MANAGE_MEMBER: 1001, GIT_INTEGRATION: 1002, }; export const MODULE_URL = { [MODULE_NO.USER]: '/account/profile', [MODULE_NO.PROJECT]: '/project-list', [MODULE_NO.INVITATION]: '/account/invite', [MODULE_NO.MANAGE_MEMBER]: '/account/manage-member', }; ================================================ FILE: packages/client/src/constant/routes.js ================================================ export const ROUTE_TYPES = [ { name: 'POST', id: 'post' }, { name: 'GET', id: 'get' }, { name: 'PUT', id: 'put' }, { name: 'DELETE', id: 'delete' }, { name: 'PATCH', id: 'patch' }, { name: 'HEAD', id: 'head' }, { name: 'OPTIONS', id: 'options' }, { name: 'PURGE', id: 'purge' }, { name: 'LINK', id: 'link' }, { name: 'UNLINK', id: 'unlink' }, ]; export const ROUTE_GENERATE_TYPE = { AUTO: 1, MANUAL: 2, }; export const ROUTE_HEADERS = [ 'authorization', 'cache-control', 'content-type', ]; export const ROUTE_VALIDATION_MESSAGE = { uniqResponseKey: 'Oops! Invalid response name. Duplicate response name is not allowed.', tabValidation: 'Oops! Some fields are left blank in the previous step. Kindly fill all required fields.', }; export const OPERATION_TYPE = { post: { create: 'C', addBulk: 'BC', list: 'R', }, get: { '{{id}}': 'R', }, delete: { softDelete: 'D', '{{id}}': 'D', }, put: { '{{}}': 'U', '{{id}}': 'U', updateBulk: 'BU', }, }; ================================================ FILE: packages/client/src/constant/sidebar.js ================================================ import React from 'react'; import { Icons } from '@dhiwise/icons'; export const sidebar = { NODE_EXPRESS: [ { key: '1', linkSet: 'crud/platform', link: '/node/crud/platform', tooltipID: 'crud', iconActive: , icon: , tooltip: 'CRUD', afterBuildLink: '/node/crud/model', }, { key: '2', linkSet: 'constant', link: '/node/constant', tooltipID: 'constant', iconActive: , icon: , tooltip: 'Constant', }, { key: '3', linkSet: 'role-access', link: '/node/role-access', tooltipID: 'role-access', iconActive: , icon: , tooltip: 'Role access', }, { key: '4', linkSet: 'middleware', link: '/node/middleware', tooltipID: 'middleware', iconActive: , icon: , tooltip: 'Middleware', }, { key: '5', linkSet: 'environment-variable', link: '/node/environment-variable', tooltipID: 'environment-variable', iconActive: , icon: , tooltip: 'Environment variable', }, { key: '6', linkSet: 'configuration', link: '/node/configuration', tooltipID: 'configuration', iconActive: , icon: , tooltip: 'Configuration', }, ], }; ================================================ FILE: packages/client/src/container/CRUD/BuildCodeStructure/index.js ================================================ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Heading, Popup, CardView, } from '../../../components'; import { useBoolean } from '../../../components/hooks'; import { BUILD_ARCHITECTURE_CODE } from '../../../constant/buildProcessConstant'; import { setBuildCodeState } from '../../../redux/reducers/buildCode'; import { codeGenerator } from '../../../redux/thunks/buildCode'; import { BuildVSCodePopup } from '../../Shared/BuildApp/BuildAppDropdown'; const BuildOptions = [ { name: 'MVC', id: BUILD_ARCHITECTURE_CODE.MVC, }, { name: 'Clean Code', id: BUILD_ARCHITECTURE_CODE.CC, }, ]; export const BuildCodeStructure = ({ openBuildRef }) => { const [isOpen, handelOpen, handelClose] = useBoolean(false); const applicationId = useSelector((state) => state.projects.currentApplicationId); const dispatch = useDispatch(); const buildProject = (type) => { dispatch(setBuildCodeState({ buildArchitecture: type })); dispatch(codeGenerator({ applicationId, projectType: type })); handelClose(); }; React.useImperativeHandle(openBuildRef, () => ({ handelOpen })); return ( <>
{BuildOptions.map((options) => ( { buildProject(options.id); }} > {options.name} ))}
); }; ================================================ FILE: packages/client/src/container/CRUD/Configuration/index.js ================================================ /* eslint-disable react/jsx-props-no-spreading */ import React from 'react'; import { Controller, useForm } from 'react-hook-form'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router'; import { isEmpty } from 'lodash'; import { editApplication, // getApplication } from '../../../api/project'; import { Heading, StepFooter, Select, Loader, } from '../../../components'; import { useBoolean } from '../../../components/hooks'; import { LAYOUT_STEP_MODULE_NAME, RedirectUrl } from '../../../constant/Nodecrud'; import { PLATFORM_FILTER, USER_TYPE_FILTER, } from '../../../constant/Project/applicationStep'; import { selectCurrentApplication } from '../../../redux/reducers/projects'; import { encryptStorage } from '../../../utils/localStorage'; import { getError } from '../../../utils/validationMsgs'; import { StepHeader } from '../../Shared/Layout/StepHeader'; import LayoutStepUrl from '../../Shared/LayoutStepUrl'; import TagNameSelect from '../../Shared/TechnologySetStep/addNewTag'; import { useToastNotifications } from '../../hooks'; const Configuration = () => { const { errors, control, getValues, handleSubmit, watch, setValue, } = useForm({ mode: 'all' }); const dispatch = useDispatch(); const buttonRef = React.useRef(''); const { addSuccessToast, addErrorToast } = useToastNotifications(); const applicationId = useSelector(({ projects }) => (projects.currentApplicationId)); const applicationList = useSelector(({ projects }) => (projects.currentProjectDetail.applicationList)); const currentApplicationCode = useSelector((state) => state.projects.currentApplicationCode); const history = useHistory(); const [loading, setLoading, hideLoading] = useBoolean(false); const [fetchLoading, setFetchLoading, hideFetchLoading] = useBoolean(false); const configInput = applicationList?.find?.((d) => d._id === applicationId)?.configInput; const defaultPlatForm = PLATFORM_FILTER.map((platform) => platform.id); const [customPlatForm, setCustomPlatForm] = React.useState([]); React.useEffect(() => { setCustomPlatForm(configInput?.platform?.filter((p) => !customPlatForm.includes(p) && !defaultPlatForm.includes(p)).map((p) => ({ id: p, name: p })) ?? []); }, []); const getPlatformData = () => { setFetchLoading(); }; React.useEffect(() => { getPlatformData(); hideFetchLoading(); return () => { // REMOVE // to maintain remove toggle from sidebar when crud in url !window.location.pathname.includes('crud') && encryptStorage.remove('sidebarToggle'); }; }, []); const handleSave = (buttonName) => { buttonRef.current = buttonName; setLoading(); editApplication(applicationId, { name: applicationList.find((app) => app._id === applicationId)?.name, configInput: { ...(configInput && configInput), ...getValues(), }, }).then((res) => { addSuccessToast(res.message); if (buttonName === 'next') history.push(RedirectUrl[currentApplicationCode].platformConfig.nextUrl); hideLoading(); dispatch( selectCurrentApplication({ currentProject: { applications: applicationList.map((a) => (a._id === applicationId ? { ...a, ...res.data } : a)), }, }), ); }).catch((error) => { addErrorToast(error); hideLoading(); }); }; return (
{fetchLoading && }
Platform Configuration {/* Lorem Ipsum is simply dummy text of the Lorem Ipsum is simply dummy text of the Lorem Ipsum is simply dummy text of the */}
{ !fetchLoading && (
( { setCustomPlatForm(p.filter((platform) => !defaultPlatForm?.includes(platform.id))); }} onChange={(options) => { const adminAccess = getValues('loginAccess[Admin]')?.filter((admin) => options?.includes(admin)); const customerAccess = getValues('loginAccess[User]')?.filter((user) => options?.includes(user)); setValue('loginAccess[Admin]', isEmpty(adminAccess) ? undefined : adminAccess); setValue('loginAccess[User]', isEmpty(customerAccess) ? undefined : customerAccess); controlProps.onChange(options); }} tagNameCustom={customPlatForm} placeholder="Select platform selection" options={PLATFORM_FILTER} isMulti label="Platform selection*" desc={( <> Select the platform for which you would like to build an application. Just write any name and press enter to add a custom platform. )} error={getError(errors, 'platform', 'Platform')} /> )} /> ( watch('platform')?.includes(platform.id)), ...customPlatForm.filter((platform) => watch('platform')?.includes(platform.id))]} isMulti label="Login access for admin* " desc="Select platform allows admin to login." error={getError(errors?.loginAccess ?? {}, 'Admin', 'Login access for admin')} /> )} /> )} {watch('types')?.includes?.('User') && ( ( )} /> ( )} />
(