datastake-daf 0.6.573 → 0.6.574
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/favicon.ico +0 -0
- package/build/logo192.png +0 -0
- package/build/logo512.png +0 -0
- package/build/manifest.json +25 -0
- package/build/robots.txt +3 -0
- package/dist/components/index.js +209 -5
- package/dist/hooks/index.js +4655 -16
- package/dist/layouts/index.css +1 -1
- package/dist/layouts/index.js +10 -147
- package/dist/services/index.js +1 -2
- package/package.json +1 -1
- package/src/@daf/core/components/AuthForm/AuthForm.stories.js +421 -0
- package/src/@daf/core/components/AuthForm/index.jsx +200 -0
- package/src/@daf/core/components/Sidenav/Menu.jsx +4 -1
- package/src/@daf/services/ChannelsService.js +1 -2
- package/src/index.js +1 -0
- package/src/layouts.js +1 -3
- package/src/@daf/layouts/AuthLayout/AuthLayout.stories.js +0 -502
- package/src/@daf/layouts/AuthLayout/components/NavbarComponent.jsx +0 -69
- package/src/@daf/layouts/AuthLayout/components/index.scss +0 -165
- package/src/@daf/layouts/AuthLayout/index.jsx +0 -83
- package/src/@daf/layouts/AuthLayout/index.scss +0 -77
package/dist/layouts/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.index_components-layout__BppiJ{display:flex;flex-direction:row;height:100dvh;max-height:100dvh;overflow:hidden;width:100vw}.index_components-layout__BppiJ .index_layout-content-wrapper__ANOdo{display:flex;flex-direction:column;min-height:100dvh;width:100%}.index_layout-children__gWZas{background:#fff;flex:1;min-height:calc(100vh - 64px);overflow-y:auto;padding:24px;position:relative}@media (max-width:768px){.index_layout-children__gWZas{padding:16px}}.index_mod-name__ZAqSo{align-items:center;cursor:pointer;display:flex;gap:12px;padding:20px;transition:all .3s}.index_mod-name__ZAqSo.index_is-collapsed__4rEBC{justify-content:center;padding:20px 10px}.index_mod-name__ZAqSo.index_is-collapsed__4rEBC h1{display:none}.index_mod-name__ZAqSo .index_icon__tIPRE{align-items:center;display:flex;height:24px;justify-content:center;width:24px}.index_mod-name__ZAqSo .index_icon__tIPRE img,.index_mod-name__ZAqSo .index_icon__tIPRE svg{height:100%;object-fit:contain;width:100%}.index_mod-name__ZAqSo h1{font-size:16px;font-weight:600;line-height:1.2;margin:0}.index_layout-header__uP-hH{align-items:center;box-shadow:0 2px 8px #00000026;display:flex;height:64px;justify-content:space-between;padding:0 24px;position:relative;z-index:1000}.index_layout-header__uP-hH .index_left-sidebar__rf0f7,.index_layout-header__uP-hH .index_right-sidebar__b2OCD{align-items:center;display:flex;gap:16px}.index_layout-header__uP-hH .index_left-sidebar__rf0f7{flex:1}.index_layout-header__uP-hH .index_trigger__UMbTb{cursor:pointer;font-size:18px;line-height:64px;margin:0 -24px 0 0;padding:0 24px;transition:color .3s}.index_layout-header__uP-hH .index_trigger__UMbTb:hover{color:#1890ff}.index_layout-header__uP-hH .index_desktop__sAat1{display:flex}@media (max-width:768px){.index_layout-header__uP-hH .index_desktop__sAat1{display:none}}.index_layout-header__uP-hH .index_mobile__exhDj{display:none}@media (max-width:768px){.index_layout-header__uP-hH .index_mobile__exhDj{align-items:center;cursor:pointer;display:flex}}.index_layout-header__uP-hH .index_mobile__exhDj img{height:32px;width:auto}.index_layout-header__uP-hH .index_notification-icon__rzMrK{align-items:center;cursor:pointer;display:flex;font-size:18px;padding:8px;position:relative;transition:color .3s}.index_layout-header__uP-hH .index_notification-icon__rzMrK:hover{color:#1890ff}.index_layout-header__uP-hH .index_notification-icon__rzMrK .index_noti-loader__OF-Nt{animation:index_pulse__tnSN4 2s infinite;background:#52c41a;border-radius:50%;height:8px;position:absolute;right:5px;top:5px;width:8px}.index_layout-header__uP-hH .index_notification-icon__rzMrK .index_noti-more-cont__Glzl6{align-items:center;background:#ff4d4f;border-radius:10px;color:#fff;display:flex;font-size:12px;font-weight:600;height:18px;justify-content:center;min-width:18px;padding:2px 6px;position:absolute;right:5px;top:5px}.index_layout-header__uP-hH .index_language-select__eSaHK{min-width:100px}.index_layout-header__uP-hH .index_language-select__eSaHK .index_ant-select-selector__G-MXN{background:#0000!important;border:none!important;box-shadow:none!important}.index_layout-header__uP-hH .index_language-select__eSaHK .index_row-cont__G2wqI{align-items:center;display:flex;gap:8px}.index_layout-header__uP-hH .index_user-details__TajEC{align-items:center;display:flex}.index_user-dropdown-layout__jsdUj.index_ant-dropdown__yk3cn .index_ant-dropdown-menu__-Vi2g{min-width:200px;padding:0}.index_user-dropdown-layout__jsdUj.index_ant-dropdown__yk3cn .index_ant-dropdown-menu__-Vi2g .index_ant-dropdown-menu-item__cxyFd{padding:0}.index_user-dropdown-layout__jsdUj.index_ant-dropdown__yk3cn .index_ant-dropdown-menu__-Vi2g .index_ant-dropdown-menu-item__cxyFd:hover{background:#0000}.index_user-dropdown-layout__jsdUj .index_drop-header__4udrF{border-bottom:1px solid #f0f0f0;padding:16px}.index_user-dropdown-layout__jsdUj .index_drop-header__4udrF h4{color:#262626;font-size:14px;font-weight:600;margin:0 0 4px}.index_user-dropdown-layout__jsdUj .index_drop-header__4udrF p{font-size:12px;margin:0}.index_user-dropdown-layout__jsdUj .index_list__JZPtv{padding:8px 0}.index_user-dropdown-layout__jsdUj .index_list__JZPtv .index_list-item__jgxiJ{color:#262626;cursor:pointer;font-size:14px;padding:10px 16px;transition:background .3s}.index_user-dropdown-layout__jsdUj .index_list__JZPtv .index_list-item__jgxiJ:hover{background:#f5f5f5}.index_dark-menu__oxCSP.index_ant-dropdown__yk3cn .index_ant-dropdown-menu__-Vi2g{padding:4px 0}.index_dark-menu__oxCSP.index_ant-dropdown__yk3cn .index_ant-dropdown-menu__-Vi2g .index_ant-dropdown-menu-item__cxyFd{align-items:center;display:flex;gap:8px;padding:8px 12px}.index_dark-menu__oxCSP.index_ant-dropdown__yk3cn .index_ant-dropdown-menu__-Vi2g .index_ant-dropdown-menu-item-disabled__8Zr1C{color:#ffffff4d;cursor:not-allowed}.index_dark-menu__oxCSP.index_ant-dropdown__yk3cn .index_ant-dropdown-menu__-Vi2g .index_ant-dropdown-menu-item-disabled__8Zr1C:hover{background:#0000}@keyframes index_pulse__tnSN4{0%{box-shadow:0 0 0 0 #52c41ab3}70%{box-shadow:0 0 0 6px #52c41a00}to{box-shadow:0 0 0 0 #52c41a00}}.index_sidenav-sider__hWcZw{display:flex;flex-direction:column;height:100dvh;position:relative;transition:all .3s;z-index:999}@media (max-width:768px){.index_sidenav-sider__hWcZw.index_desktop-sider__qQ7Y5{display:none}}.index_sidenav-sider__hWcZw .index_logo__ThlDP{padding:20px;text-align:center}.index_sidenav-sider__hWcZw .index_logo__ThlDP img{cursor:pointer;height:auto;max-height:40px;max-width:100%;object-fit:contain;transition:all .3s}.index_sidenav-sider__hWcZw .index_logo__ThlDP img:hover{opacity:.8}.index_sidenav-sider__hWcZw.index_sidenav-sider-collapsed__PBdKB{min-width:70px!important;width:70px!important}.index_sidenav-sider__hWcZw.index_sidenav-sider-collapsed__PBdKB .index_logo__ThlDP{padding:20px 10px}.index_sidenav-sider__hWcZw.index_sidenav-sider-collapsed__PBdKB .index_logo__ThlDP img{max-height:32px}.index_sidenav-sider__hWcZw.index_sidenav-sider-opened__tBCYr{min-width:250px;width:250px}.index_sidenav-menu__etWhC{flex:1;overflow-x:hidden;overflow-y:auto}.index_sidenav-menu__etWhC::-webkit-scrollbar{width:6px}.index_sidenav-menu__etWhC::-webkit-scrollbar-track{background:#0000}@media (max-width:768px){.index_components-layout__BppiJ .index_sidenav-sider__hWcZw.index_desktop-sider__qQ7Y5{display:none}.index_components-layout__BppiJ .index_layout-header__uP-hH{padding:0 16px}.index_components-layout__BppiJ .index_layout-header__uP-hH .index_left-sidebar__rf0f7,.index_components-layout__BppiJ .index_layout-header__uP-hH .index_right-sidebar__b2OCD{gap:12px}.index_components-layout__BppiJ .index_layout-children__gWZas,.index_user-dropdown-layout__jsdUj .index_drop-header__4udrF{padding:12px}.index_user-dropdown-layout__jsdUj .index_drop-header__4udrF h4{font-size:13px}.index_user-dropdown-layout__jsdUj .index_drop-header__4udrF p{font-size:11px}.index_user-dropdown-layout__jsdUj .index_list__JZPtv .index_list-item__jgxiJ{font-size:13px;padding:8px 12px}}@media (min-width:1920px){.index_layout-children__gWZas{margin:0 auto;max-width:1600px}}.index_auth-layout__TBWUk{background-color:#fff;display:flex;flex-direction:column;font-family:Outfit,sans-serif;min-height:100vh}.index_auth-layout__TBWUk .index_main-cont__0l-IY{display:flex;flex:1;height:calc(100vh - 64px);transition:all .2s ease}@media (max-width:768px){.index_auth-layout__TBWUk .index_main-cont__0l-IY{flex-direction:column;height:auto}}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes{background:#fff;display:flex;justify-content:center;overflow-y:auto;padding:6rem 2rem;width:50%}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_main__bMQeF{margin:auto;width:350px}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_main__bMQeF .index_left-logo__VI-da img{height:40px;margin-bottom:48px}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_main__bMQeF .index_left-header__nHGiG h2{color:#101828;font-size:36px;font-weight:600;margin-bottom:12px}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_main__bMQeF .index_left-header__nHGiG p{color:#667085;font-size:16px}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_right__GUqRV{background-position:50%;background-repeat:no-repeat;background-size:cover;width:50%}@media (max-width:768px){.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_right__GUqRV{display:none}}.index_auth-layout__TBWUk.index_sbg__ii-t-{--primary-color:#992f24}.index_auth-layout__TBWUk.index_sbg__ii-t- .index_ant-btn-primary__NYvTj{background:var(--primary-color);border-color:var(--primary-color)}.index_auth-layout__TBWUk.index_nashiriki__4ggGj{--primary-color:#004b91}.index_auth-layout__TBWUk.index_nashiriki__4ggGj .index_ant-btn-primary__NYvTj{background:var(--primary-color);border-color:var(--primary-color)}.index_auth-navbar__uBu6K{align-items:center;background:#fff;border-bottom:1px solid #eaecf0;display:flex;height:64px;justify-content:space-between;padding:0 80px;position:sticky;top:0;width:100%;z-index:10}@media (max-width:1200px){.index_auth-navbar__uBu6K{padding:0 32px}}.index_auth-navbar__uBu6K .index_navbar-left__P-2SX{align-items:center;display:flex}.index_auth-navbar__uBu6K .index_navbar-left__P-2SX .index_navbar-logo__ZXZxf{height:32px;object-fit:contain}.index_auth-navbar__uBu6K .index_navbar-right__sWmHB{align-items:center;display:flex;gap:12px}.index_auth-navbar__uBu6K .index_navbar-right__sWmHB .index_language-select__cL3iQ{min-width:110px}.index_auth-navbar__uBu6K .index_navbar-right__sWmHB .index_language-select__cL3iQ .index_ant-select-selector__8utBi{align-items:center;background:#fff!important;border:1px solid #d0d5dd!important;border-radius:8px!important;display:flex;height:40px!important;padding:8px 12px!important;transition:all .2s ease}.index_auth-navbar__uBu6K .index_navbar-right__sWmHB .index_language-select__cL3iQ .index_ant-select-selector__8utBi:hover{border-color:#98a2b3!important}.index_auth-navbar__uBu6K .index_navbar-right__sWmHB .index_language-select__cL3iQ .index_ant-select-selection-item__ntcCm{align-items:center;display:flex;padding-right:0!important}.index_auth-navbar__uBu6K .index_navbar-right__sWmHB .index_language-select__cL3iQ .index_language-option__AYxs1{align-items:center;display:flex;gap:8px}.index_auth-navbar__uBu6K .index_navbar-right__sWmHB .index_language-select__cL3iQ .index_language-option__AYxs1 .index_flag-icon__DUi-8{border-radius:2px;height:14px;object-fit:cover;width:20px}.index_auth-navbar__uBu6K .index_navbar-right__sWmHB .index_language-select__cL3iQ .index_language-option__AYxs1 span{color:#344054;font-size:14px;font-weight:500}.index_auth-navbar__uBu6K .index_navbar-right__sWmHB .index_language-select__cL3iQ .index_ant-select-arrow__fGxo7{color:#667085;right:12px}.index_auth-navbar__uBu6K .index_navbar-right__sWmHB .index_language-select__cL3iQ .index_ant-select-arrow__fGxo7 svg{height:20px;width:20px}.index_auth-navbar__uBu6K .index_navbar-right__sWmHB .index_back-btn__A5aoI{background:#fff;border:1px solid #d0d5dd;border-radius:8px;color:#344054;cursor:pointer;font-size:14px;font-weight:600;height:40px;padding:10px 16px;transition:all .2s ease;white-space:nowrap}.index_auth-navbar__uBu6K .index_navbar-right__sWmHB .index_back-btn__A5aoI:hover{background:#f9fafb;border-color:#98a2b3}.index_auth-navbar__uBu6K .index_navbar-right__sWmHB .index_back-btn__A5aoI:active{background:#f2f4f7}@media (max-width:768px){.index_auth-navbar__uBu6K{padding:0 16px}.index_auth-navbar__uBu6K .index_navbar-logo__ZXZxf{height:28px}.index_auth-navbar__uBu6K .index_navbar-right__sWmHB{gap:8px}}.index_language-select-popup__rxJ3b .index_ant-select-dropdown__s-ybC{background:#fff;border:none!important;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;padding:4px}.index_language-select-popup__rxJ3b .index_ant-select-item__EUAOm{border-radius:6px;min-height:40px;padding:8px 12px;transition:all .2s ease}.index_language-select-popup__rxJ3b .index_ant-select-item__EUAOm:hover{background-color:#f9fafb}.index_language-select-popup__rxJ3b .index_ant-select-item__EUAOm.index_ant-select-item-option-selected__Z8F3C{background-color:#155eef;color:#fff}.index_language-select-popup__rxJ3b .index_ant-select-item__EUAOm.index_ant-select-item-option-selected__Z8F3C .index_language-option__AYxs1 span{color:#fff}.index_language-select-popup__rxJ3b .index_ant-select-item__EUAOm .index_language-option__AYxs1{align-items:center;display:flex;gap:8px}.index_language-select-popup__rxJ3b .index_ant-select-item__EUAOm .index_language-option__AYxs1 .index_flag-icon__DUi-8{border-radius:2px;height:14px;width:20px}.index_language-select-popup__rxJ3b .index_ant-select-item__EUAOm .index_language-option__AYxs1 span{color:#344054;font-size:14px;font-weight:500}
|
|
1
|
+
.index_components-layout__BppiJ{display:flex;flex-direction:row;height:100dvh;max-height:100dvh;overflow:hidden;width:100vw}.index_components-layout__BppiJ .index_layout-content-wrapper__ANOdo{display:flex;flex-direction:column;min-height:100dvh;width:100%}.index_layout-children__gWZas{background:#fff;flex:1;min-height:calc(100vh - 64px);overflow-y:auto;padding:24px;position:relative}@media (max-width:768px){.index_layout-children__gWZas{padding:16px}}.index_mod-name__ZAqSo{align-items:center;cursor:pointer;display:flex;gap:12px;padding:20px;transition:all .3s}.index_mod-name__ZAqSo.index_is-collapsed__4rEBC{justify-content:center;padding:20px 10px}.index_mod-name__ZAqSo.index_is-collapsed__4rEBC h1{display:none}.index_mod-name__ZAqSo .index_icon__tIPRE{align-items:center;display:flex;height:24px;justify-content:center;width:24px}.index_mod-name__ZAqSo .index_icon__tIPRE img,.index_mod-name__ZAqSo .index_icon__tIPRE svg{height:100%;object-fit:contain;width:100%}.index_mod-name__ZAqSo h1{font-size:16px;font-weight:600;line-height:1.2;margin:0}.index_layout-header__uP-hH{align-items:center;box-shadow:0 2px 8px #00000026;display:flex;height:64px;justify-content:space-between;padding:0 24px;position:relative;z-index:1000}.index_layout-header__uP-hH .index_left-sidebar__rf0f7,.index_layout-header__uP-hH .index_right-sidebar__b2OCD{align-items:center;display:flex;gap:16px}.index_layout-header__uP-hH .index_left-sidebar__rf0f7{flex:1}.index_layout-header__uP-hH .index_trigger__UMbTb{cursor:pointer;font-size:18px;line-height:64px;margin:0 -24px 0 0;padding:0 24px;transition:color .3s}.index_layout-header__uP-hH .index_trigger__UMbTb:hover{color:#1890ff}.index_layout-header__uP-hH .index_desktop__sAat1{display:flex}@media (max-width:768px){.index_layout-header__uP-hH .index_desktop__sAat1{display:none}}.index_layout-header__uP-hH .index_mobile__exhDj{display:none}@media (max-width:768px){.index_layout-header__uP-hH .index_mobile__exhDj{align-items:center;cursor:pointer;display:flex}}.index_layout-header__uP-hH .index_mobile__exhDj img{height:32px;width:auto}.index_layout-header__uP-hH .index_notification-icon__rzMrK{align-items:center;cursor:pointer;display:flex;font-size:18px;padding:8px;position:relative;transition:color .3s}.index_layout-header__uP-hH .index_notification-icon__rzMrK:hover{color:#1890ff}.index_layout-header__uP-hH .index_notification-icon__rzMrK .index_noti-loader__OF-Nt{animation:index_pulse__tnSN4 2s infinite;background:#52c41a;border-radius:50%;height:8px;position:absolute;right:5px;top:5px;width:8px}.index_layout-header__uP-hH .index_notification-icon__rzMrK .index_noti-more-cont__Glzl6{align-items:center;background:#ff4d4f;border-radius:10px;color:#fff;display:flex;font-size:12px;font-weight:600;height:18px;justify-content:center;min-width:18px;padding:2px 6px;position:absolute;right:5px;top:5px}.index_layout-header__uP-hH .index_language-select__eSaHK{min-width:100px}.index_layout-header__uP-hH .index_language-select__eSaHK .index_ant-select-selector__G-MXN{background:#0000!important;border:none!important;box-shadow:none!important}.index_layout-header__uP-hH .index_language-select__eSaHK .index_row-cont__G2wqI{align-items:center;display:flex;gap:8px}.index_layout-header__uP-hH .index_user-details__TajEC{align-items:center;display:flex}.index_user-dropdown-layout__jsdUj.index_ant-dropdown__yk3cn .index_ant-dropdown-menu__-Vi2g{min-width:200px;padding:0}.index_user-dropdown-layout__jsdUj.index_ant-dropdown__yk3cn .index_ant-dropdown-menu__-Vi2g .index_ant-dropdown-menu-item__cxyFd{padding:0}.index_user-dropdown-layout__jsdUj.index_ant-dropdown__yk3cn .index_ant-dropdown-menu__-Vi2g .index_ant-dropdown-menu-item__cxyFd:hover{background:#0000}.index_user-dropdown-layout__jsdUj .index_drop-header__4udrF{border-bottom:1px solid #f0f0f0;padding:16px}.index_user-dropdown-layout__jsdUj .index_drop-header__4udrF h4{color:#262626;font-size:14px;font-weight:600;margin:0 0 4px}.index_user-dropdown-layout__jsdUj .index_drop-header__4udrF p{font-size:12px;margin:0}.index_user-dropdown-layout__jsdUj .index_list__JZPtv{padding:8px 0}.index_user-dropdown-layout__jsdUj .index_list__JZPtv .index_list-item__jgxiJ{color:#262626;cursor:pointer;font-size:14px;padding:10px 16px;transition:background .3s}.index_user-dropdown-layout__jsdUj .index_list__JZPtv .index_list-item__jgxiJ:hover{background:#f5f5f5}.index_dark-menu__oxCSP.index_ant-dropdown__yk3cn .index_ant-dropdown-menu__-Vi2g{padding:4px 0}.index_dark-menu__oxCSP.index_ant-dropdown__yk3cn .index_ant-dropdown-menu__-Vi2g .index_ant-dropdown-menu-item__cxyFd{align-items:center;display:flex;gap:8px;padding:8px 12px}.index_dark-menu__oxCSP.index_ant-dropdown__yk3cn .index_ant-dropdown-menu__-Vi2g .index_ant-dropdown-menu-item-disabled__8Zr1C{color:#ffffff4d;cursor:not-allowed}.index_dark-menu__oxCSP.index_ant-dropdown__yk3cn .index_ant-dropdown-menu__-Vi2g .index_ant-dropdown-menu-item-disabled__8Zr1C:hover{background:#0000}@keyframes index_pulse__tnSN4{0%{box-shadow:0 0 0 0 #52c41ab3}70%{box-shadow:0 0 0 6px #52c41a00}to{box-shadow:0 0 0 0 #52c41a00}}.index_sidenav-sider__hWcZw{display:flex;flex-direction:column;height:100dvh;position:relative;transition:all .3s;z-index:999}@media (max-width:768px){.index_sidenav-sider__hWcZw.index_desktop-sider__qQ7Y5{display:none}}.index_sidenav-sider__hWcZw .index_logo__ThlDP{padding:20px;text-align:center}.index_sidenav-sider__hWcZw .index_logo__ThlDP img{cursor:pointer;height:auto;max-height:40px;max-width:100%;object-fit:contain;transition:all .3s}.index_sidenav-sider__hWcZw .index_logo__ThlDP img:hover{opacity:.8}.index_sidenav-sider__hWcZw.index_sidenav-sider-collapsed__PBdKB{min-width:70px!important;width:70px!important}.index_sidenav-sider__hWcZw.index_sidenav-sider-collapsed__PBdKB .index_logo__ThlDP{padding:20px 10px}.index_sidenav-sider__hWcZw.index_sidenav-sider-collapsed__PBdKB .index_logo__ThlDP img{max-height:32px}.index_sidenav-sider__hWcZw.index_sidenav-sider-opened__tBCYr{min-width:250px;width:250px}.index_sidenav-menu__etWhC{flex:1;overflow-x:hidden;overflow-y:auto}.index_sidenav-menu__etWhC::-webkit-scrollbar{width:6px}.index_sidenav-menu__etWhC::-webkit-scrollbar-track{background:#0000}@media (max-width:768px){.index_components-layout__BppiJ .index_sidenav-sider__hWcZw.index_desktop-sider__qQ7Y5{display:none}.index_components-layout__BppiJ .index_layout-header__uP-hH{padding:0 16px}.index_components-layout__BppiJ .index_layout-header__uP-hH .index_left-sidebar__rf0f7,.index_components-layout__BppiJ .index_layout-header__uP-hH .index_right-sidebar__b2OCD{gap:12px}.index_components-layout__BppiJ .index_layout-children__gWZas,.index_user-dropdown-layout__jsdUj .index_drop-header__4udrF{padding:12px}.index_user-dropdown-layout__jsdUj .index_drop-header__4udrF h4{font-size:13px}.index_user-dropdown-layout__jsdUj .index_drop-header__4udrF p{font-size:11px}.index_user-dropdown-layout__jsdUj .index_list__JZPtv .index_list-item__jgxiJ{font-size:13px;padding:8px 12px}}@media (min-width:1920px){.index_layout-children__gWZas{margin:0 auto;max-width:1600px}}
|
package/dist/layouts/index.js
CHANGED
|
@@ -4421,7 +4421,12 @@ function SidenavMenu({
|
|
|
4421
4421
|
};
|
|
4422
4422
|
}, [filteredItems]);
|
|
4423
4423
|
const [openKeys, setOpenKeys] = o.useState([]);
|
|
4424
|
-
|
|
4424
|
+
console.log({
|
|
4425
|
+
filteredItems
|
|
4426
|
+
});
|
|
4427
|
+
const renderSubMenu = (item, i) => (console.log({
|
|
4428
|
+
item
|
|
4429
|
+
}), {
|
|
4425
4430
|
key: i,
|
|
4426
4431
|
disabled: item.isDisabled,
|
|
4427
4432
|
onTitleClick: () => {
|
|
@@ -4508,7 +4513,9 @@ function SidenavMenu({
|
|
|
4508
4513
|
}
|
|
4509
4514
|
}
|
|
4510
4515
|
}, [selectedKeys]);
|
|
4511
|
-
const renderMenu = items =>
|
|
4516
|
+
const renderMenu = items => (console.log({
|
|
4517
|
+
items
|
|
4518
|
+
}), /*#__PURE__*/jsxRuntime.jsx(antd.Menu, {
|
|
4512
4519
|
theme: "dark",
|
|
4513
4520
|
mode: menuMode,
|
|
4514
4521
|
inlineCollapsed: open,
|
|
@@ -4717,7 +4724,7 @@ function SidenavMenu({
|
|
|
4717
4724
|
}
|
|
4718
4725
|
})].filter(v => !!v)
|
|
4719
4726
|
})
|
|
4720
|
-
});
|
|
4727
|
+
}));
|
|
4721
4728
|
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
4722
4729
|
children: [dashboardItems.length ? /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
4723
4730
|
className: "sidemenu-cont",
|
|
@@ -7289,148 +7296,4 @@ function AppLayout({
|
|
|
7289
7296
|
});
|
|
7290
7297
|
}
|
|
7291
7298
|
|
|
7292
|
-
const AuthNavbar = ({
|
|
7293
|
-
logo,
|
|
7294
|
-
appName = "default",
|
|
7295
|
-
showLanguageSelector = true,
|
|
7296
|
-
updateLanguage,
|
|
7297
|
-
languageConfig = [{
|
|
7298
|
-
value: "en",
|
|
7299
|
-
label: "EN",
|
|
7300
|
-
flagUrl: "/assets/images/countries/gb.png"
|
|
7301
|
-
}, {
|
|
7302
|
-
value: "fr",
|
|
7303
|
-
label: "FR",
|
|
7304
|
-
flagUrl: "/assets/images/countries/fr.png"
|
|
7305
|
-
}, {
|
|
7306
|
-
value: "sp",
|
|
7307
|
-
label: "ES",
|
|
7308
|
-
flagUrl: "/assets/images/countries/sp.png"
|
|
7309
|
-
}],
|
|
7310
|
-
showBack = false,
|
|
7311
|
-
backLabel = "Back",
|
|
7312
|
-
onBack
|
|
7313
|
-
}) => {
|
|
7314
|
-
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
7315
|
-
className: "auth-navbar",
|
|
7316
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
7317
|
-
className: "navbar-left",
|
|
7318
|
-
children: logo && /*#__PURE__*/jsxRuntime.jsx("img", {
|
|
7319
|
-
className: "navbar-logo",
|
|
7320
|
-
src: logo,
|
|
7321
|
-
alt: `${appName} logo`
|
|
7322
|
-
})
|
|
7323
|
-
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
7324
|
-
className: "navbar-right",
|
|
7325
|
-
children: [showLanguageSelector && updateLanguage && /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
|
|
7326
|
-
className: "language-select",
|
|
7327
|
-
defaultValue: localStorage.getItem("datastakeLng") || "en",
|
|
7328
|
-
onChange: lng => updateLanguage(lng),
|
|
7329
|
-
popupClassName: formatClassname(["language-select-popup", appName]),
|
|
7330
|
-
suffixIcon: /*#__PURE__*/jsxRuntime.jsx("svg", {
|
|
7331
|
-
width: "20",
|
|
7332
|
-
height: "20",
|
|
7333
|
-
viewBox: "0 0 20 20",
|
|
7334
|
-
fill: "none",
|
|
7335
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
7336
|
-
children: /*#__PURE__*/jsxRuntime.jsx("path", {
|
|
7337
|
-
d: "M5 7.5L10 12.5L15 7.5",
|
|
7338
|
-
stroke: "#667085",
|
|
7339
|
-
strokeWidth: "1.66667",
|
|
7340
|
-
strokeLinecap: "round",
|
|
7341
|
-
strokeLinejoin: "round"
|
|
7342
|
-
})
|
|
7343
|
-
}),
|
|
7344
|
-
children: languageConfig.map(lang => /*#__PURE__*/jsxRuntime.jsx(antd.Select.Option, {
|
|
7345
|
-
value: lang.value,
|
|
7346
|
-
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
7347
|
-
className: "language-option",
|
|
7348
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("img", {
|
|
7349
|
-
src: lang.flagUrl,
|
|
7350
|
-
alt: lang.label,
|
|
7351
|
-
className: "flag-icon"
|
|
7352
|
-
}), /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
7353
|
-
children: lang.label
|
|
7354
|
-
})]
|
|
7355
|
-
})
|
|
7356
|
-
}, lang.value))
|
|
7357
|
-
}), showBack && /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
7358
|
-
className: "back-btn",
|
|
7359
|
-
onClick: onBack,
|
|
7360
|
-
children: backLabel
|
|
7361
|
-
})]
|
|
7362
|
-
})]
|
|
7363
|
-
});
|
|
7364
|
-
};
|
|
7365
|
-
|
|
7366
|
-
const AuthLayout = ({
|
|
7367
|
-
children,
|
|
7368
|
-
StyleComponent,
|
|
7369
|
-
t = key => key,
|
|
7370
|
-
title = "Welcome Back",
|
|
7371
|
-
subTitle = "Please introduce yourself",
|
|
7372
|
-
logo,
|
|
7373
|
-
appName = "default",
|
|
7374
|
-
containerClassName = "",
|
|
7375
|
-
leftClassName = "",
|
|
7376
|
-
rightClassName = "",
|
|
7377
|
-
rightImgClassName = "",
|
|
7378
|
-
rightImageUrl,
|
|
7379
|
-
additionalContent,
|
|
7380
|
-
showTopHeader = true,
|
|
7381
|
-
showLanguageSelector = true,
|
|
7382
|
-
updateLanguage,
|
|
7383
|
-
showBack = false,
|
|
7384
|
-
onBack,
|
|
7385
|
-
backLabel = "Back"
|
|
7386
|
-
}) => {
|
|
7387
|
-
const Wrapper = StyleComponent || "div";
|
|
7388
|
-
const wrapperClassName = formatClassname(["auth-layout", appName, containerClassName]);
|
|
7389
|
-
return /*#__PURE__*/jsxRuntime.jsxs(Wrapper, {
|
|
7390
|
-
className: wrapperClassName,
|
|
7391
|
-
children: [showTopHeader && /*#__PURE__*/jsxRuntime.jsx(AuthNavbar, {
|
|
7392
|
-
logo: logo,
|
|
7393
|
-
appName: appName,
|
|
7394
|
-
showLanguageSelector: showLanguageSelector,
|
|
7395
|
-
updateLanguage: updateLanguage,
|
|
7396
|
-
showBack: showBack,
|
|
7397
|
-
onBack: onBack,
|
|
7398
|
-
backLabel: backLabel
|
|
7399
|
-
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
7400
|
-
className: "main-cont",
|
|
7401
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
7402
|
-
className: formatClassname(["d-cont left", leftClassName]),
|
|
7403
|
-
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
7404
|
-
className: "main",
|
|
7405
|
-
children: [logo && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
7406
|
-
className: "left-logo",
|
|
7407
|
-
children: /*#__PURE__*/jsxRuntime.jsx("img", {
|
|
7408
|
-
src: logo,
|
|
7409
|
-
alt: `${appName} logo`
|
|
7410
|
-
})
|
|
7411
|
-
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
7412
|
-
className: "left-header",
|
|
7413
|
-
children: [title && /*#__PURE__*/jsxRuntime.jsx("h2", {
|
|
7414
|
-
children: t(title)
|
|
7415
|
-
}), subTitle && /*#__PURE__*/jsxRuntime.jsx("p", {
|
|
7416
|
-
children: typeof subTitle === "string" ? t(subTitle) : subTitle
|
|
7417
|
-
})]
|
|
7418
|
-
}), children, additionalContent]
|
|
7419
|
-
})
|
|
7420
|
-
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
7421
|
-
className: formatClassname(["d-cont right", rightClassName]),
|
|
7422
|
-
style: rightImageUrl ? {
|
|
7423
|
-
backgroundImage: `url(${rightImageUrl})`,
|
|
7424
|
-
backgroundSize: "cover"
|
|
7425
|
-
} : {},
|
|
7426
|
-
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
7427
|
-
className: formatClassname(["right-img", rightImgClassName])
|
|
7428
|
-
})
|
|
7429
|
-
})]
|
|
7430
|
-
})]
|
|
7431
|
-
});
|
|
7432
|
-
};
|
|
7433
|
-
|
|
7434
7299
|
exports.AppLayout = AppLayout;
|
|
7435
|
-
exports.AuthLayout = AuthLayout;
|
|
7436
|
-
exports.AuthNavbar = AuthNavbar;
|
package/dist/services/index.js
CHANGED
package/package.json
CHANGED
|
@@ -0,0 +1,421 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Checkbox, DatePicker, Rate, Slider } from "antd";
|
|
3
|
+
import ThemeLayout from "../ThemeLayout";
|
|
4
|
+
import AuthForm from "./index";
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
title: "Form/AuthForm",
|
|
8
|
+
component: AuthForm,
|
|
9
|
+
tags: ["autodocs"],
|
|
10
|
+
decorators: [
|
|
11
|
+
(Story) => (
|
|
12
|
+
<div style={{ margin: "3em" }}>
|
|
13
|
+
<ThemeLayout>
|
|
14
|
+
<Story />
|
|
15
|
+
</ThemeLayout>
|
|
16
|
+
</div>
|
|
17
|
+
),
|
|
18
|
+
],
|
|
19
|
+
argTypes: {
|
|
20
|
+
steps: {
|
|
21
|
+
control: "object",
|
|
22
|
+
description: "Array of step objects for multi-step forms. Each step should have a title and fields array.",
|
|
23
|
+
table: {
|
|
24
|
+
type: { summary: "array" },
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
fields: {
|
|
28
|
+
control: "object",
|
|
29
|
+
description: "Array of field objects for single-step forms. Each field should have name, label, type, etc. Supported types: 'input', 'email', 'number', 'password', 'textarea', 'select', 'custom'. For custom type, provide a 'component' prop with your custom React component.",
|
|
30
|
+
table: {
|
|
31
|
+
type: { summary: "array" },
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
onSubmit: {
|
|
35
|
+
action: "submitted",
|
|
36
|
+
description: "Callback function called when form is submitted with form values",
|
|
37
|
+
table: {
|
|
38
|
+
type: { summary: "function" },
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
initialValues: {
|
|
42
|
+
control: "object",
|
|
43
|
+
description: "Initial values for form fields",
|
|
44
|
+
table: {
|
|
45
|
+
type: { summary: "object" },
|
|
46
|
+
defaultValue: { summary: "{}" },
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
submitText: {
|
|
50
|
+
control: "text",
|
|
51
|
+
description: "Text for the submit button",
|
|
52
|
+
table: {
|
|
53
|
+
type: { summary: "string" },
|
|
54
|
+
defaultValue: { summary: "Submit" },
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
form: {
|
|
58
|
+
control: false,
|
|
59
|
+
description: "Ant Design form instance",
|
|
60
|
+
table: {
|
|
61
|
+
type: { summary: "FormInstance" },
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
export const SimpleForm = {
|
|
68
|
+
name: "Simple Form",
|
|
69
|
+
args: {
|
|
70
|
+
fields: [
|
|
71
|
+
{
|
|
72
|
+
name: "email",
|
|
73
|
+
label: "Email",
|
|
74
|
+
type: "email",
|
|
75
|
+
placeholder: "Enter your email",
|
|
76
|
+
required: true,
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
name: "password",
|
|
80
|
+
label: "Password",
|
|
81
|
+
type: "password",
|
|
82
|
+
placeholder: "Enter your password",
|
|
83
|
+
required: true,
|
|
84
|
+
},
|
|
85
|
+
],
|
|
86
|
+
submitText: "Login",
|
|
87
|
+
onSubmit: (values) => {
|
|
88
|
+
console.log("Form values:", values);
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
export const CompleteForm = {
|
|
94
|
+
name: "Complete Form with All Field Types",
|
|
95
|
+
args: {
|
|
96
|
+
fields: [
|
|
97
|
+
{
|
|
98
|
+
name: "username",
|
|
99
|
+
label: "Username",
|
|
100
|
+
type: "input",
|
|
101
|
+
placeholder: "Enter username",
|
|
102
|
+
required: true,
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
name: "email",
|
|
106
|
+
label: "Email",
|
|
107
|
+
type: "email",
|
|
108
|
+
placeholder: "Enter email address",
|
|
109
|
+
required: true,
|
|
110
|
+
rules: [
|
|
111
|
+
{
|
|
112
|
+
type: "email",
|
|
113
|
+
message: "Please enter a valid email",
|
|
114
|
+
},
|
|
115
|
+
],
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
name: "age",
|
|
119
|
+
label: "Age",
|
|
120
|
+
type: "number",
|
|
121
|
+
placeholder: "Enter your age",
|
|
122
|
+
required: false,
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
name: "password",
|
|
126
|
+
label: "Password",
|
|
127
|
+
type: "password",
|
|
128
|
+
placeholder: "Enter password",
|
|
129
|
+
required: true,
|
|
130
|
+
rules: [
|
|
131
|
+
{
|
|
132
|
+
min: 8,
|
|
133
|
+
message: "Password must be at least 8 characters",
|
|
134
|
+
},
|
|
135
|
+
],
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
name: "country",
|
|
139
|
+
label: "Country",
|
|
140
|
+
type: "select",
|
|
141
|
+
placeholder: "Select your country",
|
|
142
|
+
required: true,
|
|
143
|
+
options: [
|
|
144
|
+
{ value: "us", label: "United States" },
|
|
145
|
+
{ value: "uk", label: "United Kingdom" },
|
|
146
|
+
{ value: "ca", label: "Canada" },
|
|
147
|
+
{ value: "au", label: "Australia" },
|
|
148
|
+
],
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
name: "bio",
|
|
152
|
+
label: "Bio",
|
|
153
|
+
type: "textarea",
|
|
154
|
+
placeholder: "Tell us about yourself",
|
|
155
|
+
required: false,
|
|
156
|
+
props: {
|
|
157
|
+
rows: 4,
|
|
158
|
+
},
|
|
159
|
+
},
|
|
160
|
+
],
|
|
161
|
+
submitText: "Register",
|
|
162
|
+
initialValues: {
|
|
163
|
+
country: "us",
|
|
164
|
+
},
|
|
165
|
+
onSubmit: (values) => {
|
|
166
|
+
console.log("Complete form values:", values);
|
|
167
|
+
},
|
|
168
|
+
},
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
export const MultiStepForm = {
|
|
172
|
+
name: "Multi-Step Form",
|
|
173
|
+
args: {
|
|
174
|
+
steps: [
|
|
175
|
+
{
|
|
176
|
+
title: "Personal Info",
|
|
177
|
+
fields: [
|
|
178
|
+
{
|
|
179
|
+
name: "firstName",
|
|
180
|
+
label: "First Name",
|
|
181
|
+
type: "input",
|
|
182
|
+
placeholder: "Enter first name",
|
|
183
|
+
required: true,
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
name: "lastName",
|
|
187
|
+
label: "Last Name",
|
|
188
|
+
type: "input",
|
|
189
|
+
placeholder: "Enter last name",
|
|
190
|
+
required: true,
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
name: "email",
|
|
194
|
+
label: "Email",
|
|
195
|
+
type: "email",
|
|
196
|
+
placeholder: "Enter email",
|
|
197
|
+
required: true,
|
|
198
|
+
},
|
|
199
|
+
],
|
|
200
|
+
},
|
|
201
|
+
{
|
|
202
|
+
title: "Account Details",
|
|
203
|
+
fields: [
|
|
204
|
+
{
|
|
205
|
+
name: "username",
|
|
206
|
+
label: "Username",
|
|
207
|
+
type: "input",
|
|
208
|
+
placeholder: "Choose a username",
|
|
209
|
+
required: true,
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
name: "password",
|
|
213
|
+
label: "Password",
|
|
214
|
+
type: "password",
|
|
215
|
+
placeholder: "Create a password",
|
|
216
|
+
required: true,
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
name: "confirmPassword",
|
|
220
|
+
label: "Confirm Password",
|
|
221
|
+
type: "password",
|
|
222
|
+
placeholder: "Confirm your password",
|
|
223
|
+
required: true,
|
|
224
|
+
},
|
|
225
|
+
],
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
title: "Preferences",
|
|
229
|
+
fields: [
|
|
230
|
+
{
|
|
231
|
+
name: "language",
|
|
232
|
+
label: "Language",
|
|
233
|
+
type: "select",
|
|
234
|
+
placeholder: "Select language",
|
|
235
|
+
required: true,
|
|
236
|
+
options: [
|
|
237
|
+
{ value: "en", label: "English" },
|
|
238
|
+
{ value: "fr", label: "French" },
|
|
239
|
+
{ value: "sp", label: "Spanish" },
|
|
240
|
+
],
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
name: "notifications",
|
|
244
|
+
label: "Notification Preferences",
|
|
245
|
+
type: "textarea",
|
|
246
|
+
placeholder: "Enter your notification preferences",
|
|
247
|
+
required: false,
|
|
248
|
+
},
|
|
249
|
+
],
|
|
250
|
+
},
|
|
251
|
+
],
|
|
252
|
+
submitText: "Complete Registration",
|
|
253
|
+
initialValues: {
|
|
254
|
+
language: "en",
|
|
255
|
+
category: "coprporation"
|
|
256
|
+
},
|
|
257
|
+
executeRecaptcha: () => {
|
|
258
|
+
return "mock-recaptcha-token";
|
|
259
|
+
},
|
|
260
|
+
onSubmit: (values) => {
|
|
261
|
+
console.log("Multi-step form values:", values);
|
|
262
|
+
},
|
|
263
|
+
},
|
|
264
|
+
};
|
|
265
|
+
|
|
266
|
+
export const WithInitialValues = {
|
|
267
|
+
name: "Form with Initial Values",
|
|
268
|
+
args: {
|
|
269
|
+
fields: [
|
|
270
|
+
{
|
|
271
|
+
name: "name",
|
|
272
|
+
label: "Name",
|
|
273
|
+
type: "input",
|
|
274
|
+
placeholder: "Enter name",
|
|
275
|
+
required: true,
|
|
276
|
+
},
|
|
277
|
+
{
|
|
278
|
+
name: "email",
|
|
279
|
+
label: "Email",
|
|
280
|
+
type: "email",
|
|
281
|
+
placeholder: "Enter email",
|
|
282
|
+
required: true,
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
name: "role",
|
|
286
|
+
label: "Role",
|
|
287
|
+
type: "select",
|
|
288
|
+
placeholder: "Select role",
|
|
289
|
+
required: true,
|
|
290
|
+
options: [
|
|
291
|
+
{ value: "admin", label: "Administrator" },
|
|
292
|
+
{ value: "user", label: "User" },
|
|
293
|
+
{ value: "guest", label: "Guest" },
|
|
294
|
+
],
|
|
295
|
+
},
|
|
296
|
+
],
|
|
297
|
+
initialValues: {
|
|
298
|
+
name: "John Doe",
|
|
299
|
+
email: "john.doe@example.com",
|
|
300
|
+
role: "user",
|
|
301
|
+
},
|
|
302
|
+
submitText: "Update Profile",
|
|
303
|
+
onSubmit: (values) => {
|
|
304
|
+
console.log("Updated values:", values);
|
|
305
|
+
},
|
|
306
|
+
},
|
|
307
|
+
};
|
|
308
|
+
|
|
309
|
+
export const CustomValidation = {
|
|
310
|
+
name: "Form with Custom Validation",
|
|
311
|
+
args: {
|
|
312
|
+
fields: [
|
|
313
|
+
{
|
|
314
|
+
name: "email",
|
|
315
|
+
label: "Email",
|
|
316
|
+
type: "email",
|
|
317
|
+
placeholder: "Enter email",
|
|
318
|
+
required: true,
|
|
319
|
+
rules: [
|
|
320
|
+
{
|
|
321
|
+
type: "email",
|
|
322
|
+
message: "Invalid email format",
|
|
323
|
+
},
|
|
324
|
+
{
|
|
325
|
+
pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
|
|
326
|
+
message: "Please enter a valid email address",
|
|
327
|
+
},
|
|
328
|
+
],
|
|
329
|
+
},
|
|
330
|
+
{
|
|
331
|
+
name: "phone",
|
|
332
|
+
label: "Phone Number",
|
|
333
|
+
type: "input",
|
|
334
|
+
placeholder: "Enter phone number",
|
|
335
|
+
required: true,
|
|
336
|
+
rules: [
|
|
337
|
+
{
|
|
338
|
+
pattern: /^\d{10}$/,
|
|
339
|
+
message: "Phone number must be 10 digits",
|
|
340
|
+
},
|
|
341
|
+
],
|
|
342
|
+
},
|
|
343
|
+
{
|
|
344
|
+
name: "website",
|
|
345
|
+
label: "Website",
|
|
346
|
+
type: "input",
|
|
347
|
+
placeholder: "Enter website URL",
|
|
348
|
+
required: false,
|
|
349
|
+
rules: [
|
|
350
|
+
{
|
|
351
|
+
type: "url",
|
|
352
|
+
message: "Please enter a valid URL",
|
|
353
|
+
},
|
|
354
|
+
],
|
|
355
|
+
},
|
|
356
|
+
],
|
|
357
|
+
submitText: "Submit",
|
|
358
|
+
onSubmit: (values) => {
|
|
359
|
+
console.log("Validated values:", values);
|
|
360
|
+
},
|
|
361
|
+
},
|
|
362
|
+
};
|
|
363
|
+
|
|
364
|
+
export const WithCustomFields = {
|
|
365
|
+
name: "Form with Custom Field Components",
|
|
366
|
+
// Note: For custom fields with default values, always set those values in initialValues
|
|
367
|
+
// to ensure they are included in form submission even when not touched by the user
|
|
368
|
+
args: {
|
|
369
|
+
fields: [
|
|
370
|
+
{
|
|
371
|
+
name: "username",
|
|
372
|
+
label: "Username",
|
|
373
|
+
type: "input",
|
|
374
|
+
placeholder: "Enter username",
|
|
375
|
+
required: true,
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
name: "birthdate",
|
|
379
|
+
label: "Birth Date",
|
|
380
|
+
type: "custom",
|
|
381
|
+
required: true,
|
|
382
|
+
component: <DatePicker style={{ width: "100%" }} placeholder="Select your birth date" />,
|
|
383
|
+
},
|
|
384
|
+
{
|
|
385
|
+
name: "rating",
|
|
386
|
+
label: "Rate Your Experience",
|
|
387
|
+
type: "custom",
|
|
388
|
+
required: false,
|
|
389
|
+
component: <Rate allowHalf />,
|
|
390
|
+
},
|
|
391
|
+
{
|
|
392
|
+
name: "budget",
|
|
393
|
+
label: "Budget Range ($)",
|
|
394
|
+
type: "custom",
|
|
395
|
+
required: false,
|
|
396
|
+
component: <Slider range min={0} max={10000} />,
|
|
397
|
+
},
|
|
398
|
+
{
|
|
399
|
+
name: "bio",
|
|
400
|
+
label: "Bio",
|
|
401
|
+
type: "textarea",
|
|
402
|
+
placeholder: "Tell us about yourself",
|
|
403
|
+
required: false,
|
|
404
|
+
props: {
|
|
405
|
+
rows: 3,
|
|
406
|
+
},
|
|
407
|
+
},
|
|
408
|
+
],
|
|
409
|
+
initialValues: {
|
|
410
|
+
rating: 3,
|
|
411
|
+
budget: [1000, 5000],
|
|
412
|
+
},
|
|
413
|
+
submitText: "Submit",
|
|
414
|
+
onSubmit: (values) => {
|
|
415
|
+
console.log("Form with custom fields values:", values);
|
|
416
|
+
},
|
|
417
|
+
executeRecaptcha: () => {
|
|
418
|
+
return "mock-recaptcha-token";
|
|
419
|
+
},
|
|
420
|
+
},
|
|
421
|
+
};
|