datastake-daf 0.6.557 → 0.6.558
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 +182 -0
- package/dist/hooks/index.js +4655 -16
- package/dist/layouts/index.css +1 -1
- package/dist/layouts/index.js +0 -132
- package/package.json +1 -1
- package/src/@daf/core/components/AuthForm/AuthForm.stories.js +360 -0
- package/src/@daf/core/components/AuthForm/index.jsx +197 -0
- package/src/index.js +1 -0
- package/src/layouts.js +1 -2
- package/src/@daf/layouts/AuthLayout/components/NavbarComponent.jsx +0 -53
- package/src/@daf/layouts/AuthLayout/components/NavbarComponent.scss +0 -51
- package/src/@daf/layouts/AuthLayout/components/index.js +0 -2
- package/src/@daf/layouts/AuthLayout/index.jsx +0 -137
- package/src/@daf/layouts/AuthLayout/index.scss +0 -413
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;position:relative;width:100%}.index_auth-layout__TBWUk .index_auth-top-header__6CyDg{align-items:center;background:#fff;border-bottom:1px solid #f2f2f2;display:flex;justify-content:space-between;padding:16px 32px;width:100%}.index_auth-layout__TBWUk .index_auth-top-header__6CyDg .index_left__doYes{align-items:center;display:flex}.index_auth-layout__TBWUk .index_auth-top-header__6CyDg .index_left__doYes .index_top-header-logo-combined__j8cWN{height:28px;object-fit:contain}.index_auth-layout__TBWUk .index_auth-top-header__6CyDg .index_right__GUqRV{align-items:center;display:flex;gap:12px}.index_auth-layout__TBWUk .index_auth-top-header__6CyDg .index_right__GUqRV .index_back-btn__JUCGS{background:#0000;border:1px solid #d0d5dd;border-radius:20px;color:#101828;font-size:14px;padding:6px 16px;transition:.2s}.index_auth-layout__TBWUk .index_auth-top-header__6CyDg .index_right__GUqRV .index_back-btn__JUCGS:hover{background:#f9fafb}@media (max-width:768px){.index_auth-layout__TBWUk .index_auth-top-header__6CyDg{padding:12px 16px}.index_auth-layout__TBWUk .index_auth-top-header__6CyDg .index_top-header-logo-combined__j8cWN{height:22px}}.index_auth-layout__TBWUk .index_auth-language-selector__5ZdL-{position:absolute;right:24px;top:24px;z-index:10}@media (max-width:768px){.index_auth-layout__TBWUk .index_auth-language-selector__5ZdL-{right:16px;top:16px}}.index_auth-layout__TBWUk .index_auth-language-selector__5ZdL- .index_language-select__GVetE{min-width:100px}.index_auth-layout__TBWUk .index_auth-language-selector__5ZdL- .index_language-select__GVetE .index_ant-select-selector__y2ifz{background:#fff!important;border:1px solid #d0d5dd!important;border-radius:8px!important;box-shadow:0 1px 2px #1018280d!important;height:auto!important;padding:4px 12px!important}.index_auth-layout__TBWUk .index_auth-language-selector__5ZdL- .index_language-select__GVetE .index_ant-select-arrow__cum9e{color:#667085}.index_auth-layout__TBWUk .index_auth-language-selector__5ZdL- .index_language-select__GVetE .index_row-cont__s4j7p{align-items:center;display:flex;gap:8px}.index_auth-layout__TBWUk .index_language-select-popup__45s-D.index_ant-select-dropdown__s9Ec2{border-radius:8px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.index_auth-layout__TBWUk .index_language-select-popup__45s-D.index_ant-select-dropdown__s9Ec2 .index_ant-select-item__o4beY{padding:8px 12px}.index_auth-layout__TBWUk .index_language-select-popup__45s-D.index_ant-select-dropdown__s9Ec2 .index_ant-select-item__o4beY:hover{background:#f9fafb}.index_auth-layout__TBWUk .index_language-select-popup__45s-D.index_ant-select-dropdown__s9Ec2 .index_ant-select-item-option-selected__sOrAw{background:#f3f4f6;font-weight:500}.index_auth-layout__TBWUk .index_main-cont__0l-IY{display:flex;flex:1;flex-direction:row;justify-content:center;min-height:100vh}@media (max-width:768px){.index_auth-layout__TBWUk .index_main-cont__0l-IY{flex-direction:column;justify-content:flex-start}}.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz{display:flex;flex:1;flex-direction:column}.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz.index_left__doYes{display:flex;height:100dvh;justify-content:center;overflow-y:auto;padding:6rem 0}@media (max-width:768px){.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz.index_left__doYes{height:unset;overflow-y:hidden;padding:3rem 2rem}}.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz.index_left__doYes .index_main__bMQeF{display:flex;flex-direction:column;justify-content:center;margin:0 auto;max-width:100%;width:350px}@media (max-width:768px){.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz.index_left__doYes .index_main__bMQeF{padding:0;width:100%}}.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz.index_left__doYes .index_main__bMQeF .index_left-header__nHGiG{margin-bottom:32px;text-align:start}.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz.index_left__doYes .index_main__bMQeF .index_left-header__nHGiG img.index_app-logo__mYi8B{display:block;height:auto;margin-bottom:32px;margin-left:auto;margin-right:auto;max-width:200px;width:136px}.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz.index_left__doYes .index_main__bMQeF .index_left-header__nHGiG h2{color:#101828;font-size:36px;font-weight:700;line-height:44px;margin-bottom:8px}@media (max-width:768px){.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz.index_left__doYes .index_main__bMQeF .index_left-header__nHGiG h2{font-size:28px;line-height:36px}}.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz.index_left__doYes .index_main__bMQeF .index_left-header__nHGiG p{color:#667085;font-size:16px;line-height:24px;margin-bottom:0}@media (max-width:768px){.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz.index_left__doYes .index_main__bMQeF .index_left-header__nHGiG p{font-size:14px}}.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz.index_left__doYes .index_main__bMQeF .index_dots__cDCDT{display:flex;gap:8px;justify-content:center;margin-top:32px}.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz.index_left__doYes .index_main__bMQeF .index_dots__cDCDT .index_dot__WQm4x{background:#e5e7eb;border-radius:6px;height:12px;transition:width .4s,background .4s;width:12px}.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz.index_left__doYes .index_main__bMQeF .index_dots__cDCDT .index_dot__WQm4x.index_active__4YD0E{background:#3b82f6;width:35px}.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz.index_right__GUqRV{background-position:50%;background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:column;padding:0;position:relative}@media (max-width:768px){.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz.index_right__GUqRV{display:none}}.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz.index_right__GUqRV .index_right-img__Jvjyp{background-position:50%;background-repeat:no-repeat;background-size:cover;flex:1;height:100%;min-height:100vh;width:100%}@media (max-width:1200px){.index_auth-layout__TBWUk .index_main-cont__0l-IY .index_d-cont__FOHiz.index_right__GUqRV .index_right-img__Jvjyp{min-height:100vh}}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes a{color:#3b82f6;text-decoration:none;transition:color .2s}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes a:hover{color:#2563eb}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_ant-form-item-required__Jn6Sc:before{content:unset!important}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_ant-input__Bw6wz{border:1px solid #e5e7eb;border-radius:6px;font-size:14px;font-weight:400;padding:10px 12px;transition:border-color .2s}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_ant-input__Bw6wz:hover{border-color:#d1d5db}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_ant-input__Bw6wz:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_ant-input-affix-wrapper__ldFFY{border:1px solid #e5e7eb;border-radius:8px;padding:11px 14px}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_ant-input-affix-wrapper__ldFFY .index_ant-input__Bw6wz{border:unset;border-radius:unset;padding:0}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_ant-input-affix-wrapper__ldFFY .index_ant-input-prefix__sxVVt{color:#a4a4a4;margin-right:10px}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_ant-select-selector__y2ifz{border:1px solid #e5e7eb!important;border-radius:6px!important;font-size:14px;font-weight:400;height:fit-content!important;padding:4px 12px!important;transition:border-color .2s!important}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_ant-select-selector__y2ifz .index_ant-select-selection-search__Ur-Sf{display:flex;flex-direction:column;justify-content:center}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_ant-select__Ex-5-:hover .index_ant-select-selector__y2ifz{border-color:#d1d5db!important}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_ant-select-focused__bL1-V .index_ant-select-selector__y2ifz{border-color:#3b82f6!important;box-shadow:0 0 0 3px #3b82f61a!important}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_buttons__qBDDT{display:flex;flex-direction:column;gap:12px;margin-top:24px}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_bottom__VJ0no{display:flex;flex-direction:column;gap:4px;margin-top:10px}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_bottom__VJ0no p{color:#667085;font-size:14px;line-height:20px;margin-bottom:0}@media (max-width:575px){.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes .index_ant-form-item__YgJNa{flex-direction:row!important}}@keyframes index_slideLeft__Oochc{0%{opacity:0;transform:translate(-10%)}to{opacity:1;transform:translate(0)}}@keyframes index_slideRight__GBjaP{0%{opacity:0;transform:translate(10%)}to{opacity:1;transform:translate(0)}}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_left__doYes{animation:index_slideRight__GBjaP .7s forwards}.index_auth-layout__TBWUk .index_d-cont__FOHiz.index_right__GUqRV{animation:index_slideLeft__Oochc .7s forwards}.index_auth-layout__TBWUk.index_sbg__ii-t-{--primary-color:#f04438}.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)}
|
|
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
|
@@ -7289,136 +7289,4 @@ function AppLayout({
|
|
|
7289
7289
|
});
|
|
7290
7290
|
}
|
|
7291
7291
|
|
|
7292
|
-
/* eslint-disable react/prop-types */
|
|
7293
|
-
const AuthLayout = ({
|
|
7294
|
-
children,
|
|
7295
|
-
NavbarComponent,
|
|
7296
|
-
StyleComponent,
|
|
7297
|
-
t = key => key,
|
|
7298
|
-
title = "Welcome Back",
|
|
7299
|
-
subTitle = "Please introduce yourself",
|
|
7300
|
-
header,
|
|
7301
|
-
logo,
|
|
7302
|
-
appName = "default",
|
|
7303
|
-
containerClassName = "",
|
|
7304
|
-
leftClassName = "",
|
|
7305
|
-
rightClassName = "",
|
|
7306
|
-
rightImgClassName = "",
|
|
7307
|
-
rightImageUrl,
|
|
7308
|
-
showNavbar = false,
|
|
7309
|
-
navbarProps = {},
|
|
7310
|
-
additionalContent,
|
|
7311
|
-
languageConfig = [{
|
|
7312
|
-
value: "en",
|
|
7313
|
-
label: "EN",
|
|
7314
|
-
flagUrl: "/assets/images/countries/gb.png"
|
|
7315
|
-
}, {
|
|
7316
|
-
value: "fr",
|
|
7317
|
-
label: "FR",
|
|
7318
|
-
flagUrl: "/assets/images/countries/fr.png"
|
|
7319
|
-
}, {
|
|
7320
|
-
value: "sp",
|
|
7321
|
-
label: "ES",
|
|
7322
|
-
flagUrl: "/assets/images/countries/sp.png"
|
|
7323
|
-
}],
|
|
7324
|
-
updateLanguage,
|
|
7325
|
-
showLanguageSelector = false,
|
|
7326
|
-
showTopHeader = false,
|
|
7327
|
-
// shows the header bar (logo image + language + back)
|
|
7328
|
-
topHeaderLogo,
|
|
7329
|
-
// full logo image (contains both icon and text)
|
|
7330
|
-
onBack,
|
|
7331
|
-
// callback when “Back” clicked
|
|
7332
|
-
showBack = false,
|
|
7333
|
-
// show/hide back button
|
|
7334
|
-
backLabel = "Back"
|
|
7335
|
-
}) => {
|
|
7336
|
-
/** Header block (single logo image + back + language) */
|
|
7337
|
-
const renderTopHeader = () => {
|
|
7338
|
-
if (!showTopHeader) return null;
|
|
7339
|
-
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
7340
|
-
className: "auth-top-header",
|
|
7341
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
7342
|
-
className: "left",
|
|
7343
|
-
children: topHeaderLogo && /*#__PURE__*/jsxRuntime.jsx("img", {
|
|
7344
|
-
className: "top-header-logo-combined",
|
|
7345
|
-
src: topHeaderLogo,
|
|
7346
|
-
alt: `${appName} logo`
|
|
7347
|
-
})
|
|
7348
|
-
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
7349
|
-
className: "right",
|
|
7350
|
-
children: [showLanguageSelector && updateLanguage && /*#__PURE__*/jsxRuntime.jsx(antd.Select, {
|
|
7351
|
-
className: "language-select",
|
|
7352
|
-
defaultValue: localStorage.getItem("datastakeLng") || "en",
|
|
7353
|
-
bordered: false,
|
|
7354
|
-
onChange: lng => updateLanguage(lng),
|
|
7355
|
-
popupClassName: formatClassname(["language-select-popup", appName]),
|
|
7356
|
-
children: languageConfig.map(lang => /*#__PURE__*/jsxRuntime.jsx(antd.Select.Option, {
|
|
7357
|
-
value: lang.value,
|
|
7358
|
-
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
7359
|
-
className: "row-cont flex items-center gap-2",
|
|
7360
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("img", {
|
|
7361
|
-
src: lang.flagUrl,
|
|
7362
|
-
alt: lang.label,
|
|
7363
|
-
style: {
|
|
7364
|
-
width: 20,
|
|
7365
|
-
height: 12
|
|
7366
|
-
}
|
|
7367
|
-
}), /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
7368
|
-
children: lang.label
|
|
7369
|
-
})]
|
|
7370
|
-
})
|
|
7371
|
-
}, lang.value))
|
|
7372
|
-
}), showBack && /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
7373
|
-
className: "back-btn",
|
|
7374
|
-
onClick: onBack,
|
|
7375
|
-
children: backLabel
|
|
7376
|
-
})]
|
|
7377
|
-
})]
|
|
7378
|
-
});
|
|
7379
|
-
};
|
|
7380
|
-
const renderHeader = () => header ? header : /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
7381
|
-
className: "left-header",
|
|
7382
|
-
children: [logo && /*#__PURE__*/jsxRuntime.jsx("img", {
|
|
7383
|
-
className: "app-logo",
|
|
7384
|
-
src: logo,
|
|
7385
|
-
alt: `${appName} logo`
|
|
7386
|
-
}), title && /*#__PURE__*/jsxRuntime.jsx("h2", {
|
|
7387
|
-
children: t(title)
|
|
7388
|
-
}), subTitle && /*#__PURE__*/jsxRuntime.jsx("p", {
|
|
7389
|
-
children: typeof subTitle === "string" ? t(subTitle) : subTitle
|
|
7390
|
-
})]
|
|
7391
|
-
});
|
|
7392
|
-
const layoutContent = /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
7393
|
-
className: "main-cont",
|
|
7394
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
7395
|
-
className: formatClassname(["d-cont left", leftClassName]),
|
|
7396
|
-
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
7397
|
-
className: "main",
|
|
7398
|
-
children: [renderHeader(), children, additionalContent]
|
|
7399
|
-
})
|
|
7400
|
-
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
7401
|
-
className: formatClassname(["d-cont right", rightClassName]),
|
|
7402
|
-
style: rightImageUrl ? {
|
|
7403
|
-
backgroundImage: `url(${rightImageUrl})`,
|
|
7404
|
-
backgroundSize: "cover"
|
|
7405
|
-
} : {},
|
|
7406
|
-
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
7407
|
-
className: formatClassname(["right-img", rightImgClassName])
|
|
7408
|
-
})
|
|
7409
|
-
})]
|
|
7410
|
-
});
|
|
7411
|
-
const Wrapper = StyleComponent || "div";
|
|
7412
|
-
const wrapperClassName = formatClassname(["auth-layout", appName, containerClassName]);
|
|
7413
|
-
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
7414
|
-
children: [showNavbar && NavbarComponent && /*#__PURE__*/jsxRuntime.jsx(NavbarComponent, {
|
|
7415
|
-
...navbarProps
|
|
7416
|
-
}), /*#__PURE__*/jsxRuntime.jsxs(Wrapper, {
|
|
7417
|
-
className: wrapperClassName,
|
|
7418
|
-
children: [renderTopHeader(), layoutContent]
|
|
7419
|
-
})]
|
|
7420
|
-
});
|
|
7421
|
-
};
|
|
7422
|
-
|
|
7423
7292
|
exports.AppLayout = AppLayout;
|
|
7424
|
-
exports.AuthLayout = AuthLayout;
|
package/package.json
CHANGED
|
@@ -0,0 +1,360 @@
|
|
|
1
|
+
import ThemeLayout from "../ThemeLayout";
|
|
2
|
+
import AuthForm from "./index";
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: "Form/AuthForm",
|
|
6
|
+
component: AuthForm,
|
|
7
|
+
tags: ["autodocs"],
|
|
8
|
+
decorators: [
|
|
9
|
+
(Story) => (
|
|
10
|
+
<div style={{ margin: "3em" }}>
|
|
11
|
+
<ThemeLayout>
|
|
12
|
+
<Story />
|
|
13
|
+
</ThemeLayout>
|
|
14
|
+
</div>
|
|
15
|
+
),
|
|
16
|
+
],
|
|
17
|
+
argTypes: {
|
|
18
|
+
steps: {
|
|
19
|
+
control: "object",
|
|
20
|
+
description: "Array of step objects for multi-step forms. Each step should have a title and fields array.",
|
|
21
|
+
table: {
|
|
22
|
+
type: { summary: "array" },
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
fields: {
|
|
26
|
+
control: "object",
|
|
27
|
+
description: "Array of field objects for single-step forms. Each field should have name, label, type, etc.",
|
|
28
|
+
table: {
|
|
29
|
+
type: { summary: "array" },
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
onSubmit: {
|
|
33
|
+
action: "submitted",
|
|
34
|
+
description: "Callback function called when form is submitted with form values",
|
|
35
|
+
table: {
|
|
36
|
+
type: { summary: "function" },
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
initialValues: {
|
|
40
|
+
control: "object",
|
|
41
|
+
description: "Initial values for form fields",
|
|
42
|
+
table: {
|
|
43
|
+
type: { summary: "object" },
|
|
44
|
+
defaultValue: { summary: "{}" },
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
submitText: {
|
|
48
|
+
control: "text",
|
|
49
|
+
description: "Text for the submit button",
|
|
50
|
+
table: {
|
|
51
|
+
type: { summary: "string" },
|
|
52
|
+
defaultValue: { summary: "Submit" },
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
form: {
|
|
56
|
+
control: false,
|
|
57
|
+
description: "Ant Design form instance",
|
|
58
|
+
table: {
|
|
59
|
+
type: { summary: "FormInstance" },
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export const SimpleForm = {
|
|
66
|
+
name: "Simple Form",
|
|
67
|
+
args: {
|
|
68
|
+
fields: [
|
|
69
|
+
{
|
|
70
|
+
name: "email",
|
|
71
|
+
label: "Email",
|
|
72
|
+
type: "email",
|
|
73
|
+
placeholder: "Enter your email",
|
|
74
|
+
required: true,
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
name: "password",
|
|
78
|
+
label: "Password",
|
|
79
|
+
type: "password",
|
|
80
|
+
placeholder: "Enter your password",
|
|
81
|
+
required: true,
|
|
82
|
+
},
|
|
83
|
+
],
|
|
84
|
+
submitText: "Login",
|
|
85
|
+
onSubmit: (values) => {
|
|
86
|
+
console.log("Form values:", values);
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
export const CompleteForm = {
|
|
92
|
+
name: "Complete Form with All Field Types",
|
|
93
|
+
args: {
|
|
94
|
+
fields: [
|
|
95
|
+
{
|
|
96
|
+
name: "username",
|
|
97
|
+
label: "Username",
|
|
98
|
+
type: "input",
|
|
99
|
+
placeholder: "Enter username",
|
|
100
|
+
required: true,
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
name: "email",
|
|
104
|
+
label: "Email",
|
|
105
|
+
type: "email",
|
|
106
|
+
placeholder: "Enter email address",
|
|
107
|
+
required: true,
|
|
108
|
+
rules: [
|
|
109
|
+
{
|
|
110
|
+
type: "email",
|
|
111
|
+
message: "Please enter a valid email",
|
|
112
|
+
},
|
|
113
|
+
],
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
name: "age",
|
|
117
|
+
label: "Age",
|
|
118
|
+
type: "number",
|
|
119
|
+
placeholder: "Enter your age",
|
|
120
|
+
required: false,
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
name: "password",
|
|
124
|
+
label: "Password",
|
|
125
|
+
type: "password",
|
|
126
|
+
placeholder: "Enter password",
|
|
127
|
+
required: true,
|
|
128
|
+
rules: [
|
|
129
|
+
{
|
|
130
|
+
min: 8,
|
|
131
|
+
message: "Password must be at least 8 characters",
|
|
132
|
+
},
|
|
133
|
+
],
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
name: "country",
|
|
137
|
+
label: "Country",
|
|
138
|
+
type: "select",
|
|
139
|
+
placeholder: "Select your country",
|
|
140
|
+
required: true,
|
|
141
|
+
options: [
|
|
142
|
+
{ value: "us", label: "United States" },
|
|
143
|
+
{ value: "uk", label: "United Kingdom" },
|
|
144
|
+
{ value: "ca", label: "Canada" },
|
|
145
|
+
{ value: "au", label: "Australia" },
|
|
146
|
+
],
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
name: "bio",
|
|
150
|
+
label: "Bio",
|
|
151
|
+
type: "textarea",
|
|
152
|
+
placeholder: "Tell us about yourself",
|
|
153
|
+
required: false,
|
|
154
|
+
props: {
|
|
155
|
+
rows: 4,
|
|
156
|
+
},
|
|
157
|
+
},
|
|
158
|
+
],
|
|
159
|
+
submitText: "Register",
|
|
160
|
+
initialValues: {
|
|
161
|
+
country: "us",
|
|
162
|
+
},
|
|
163
|
+
onSubmit: (values) => {
|
|
164
|
+
console.log("Complete form values:", values);
|
|
165
|
+
},
|
|
166
|
+
},
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
export const MultiStepForm = {
|
|
170
|
+
name: "Multi-Step Form",
|
|
171
|
+
args: {
|
|
172
|
+
steps: [
|
|
173
|
+
{
|
|
174
|
+
title: "Personal Info",
|
|
175
|
+
fields: [
|
|
176
|
+
{
|
|
177
|
+
name: "firstName",
|
|
178
|
+
label: "First Name",
|
|
179
|
+
type: "input",
|
|
180
|
+
placeholder: "Enter first name",
|
|
181
|
+
required: true,
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
name: "lastName",
|
|
185
|
+
label: "Last Name",
|
|
186
|
+
type: "input",
|
|
187
|
+
placeholder: "Enter last name",
|
|
188
|
+
required: true,
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
name: "email",
|
|
192
|
+
label: "Email",
|
|
193
|
+
type: "email",
|
|
194
|
+
placeholder: "Enter email",
|
|
195
|
+
required: true,
|
|
196
|
+
},
|
|
197
|
+
],
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
title: "Account Details",
|
|
201
|
+
fields: [
|
|
202
|
+
{
|
|
203
|
+
name: "username",
|
|
204
|
+
label: "Username",
|
|
205
|
+
type: "input",
|
|
206
|
+
placeholder: "Choose a username",
|
|
207
|
+
required: true,
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
name: "password",
|
|
211
|
+
label: "Password",
|
|
212
|
+
type: "password",
|
|
213
|
+
placeholder: "Create a password",
|
|
214
|
+
required: true,
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
name: "confirmPassword",
|
|
218
|
+
label: "Confirm Password",
|
|
219
|
+
type: "password",
|
|
220
|
+
placeholder: "Confirm your password",
|
|
221
|
+
required: true,
|
|
222
|
+
},
|
|
223
|
+
],
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
title: "Preferences",
|
|
227
|
+
fields: [
|
|
228
|
+
{
|
|
229
|
+
name: "language",
|
|
230
|
+
label: "Language",
|
|
231
|
+
type: "select",
|
|
232
|
+
placeholder: "Select language",
|
|
233
|
+
required: true,
|
|
234
|
+
options: [
|
|
235
|
+
{ value: "en", label: "English" },
|
|
236
|
+
{ value: "fr", label: "French" },
|
|
237
|
+
{ value: "sp", label: "Spanish" },
|
|
238
|
+
],
|
|
239
|
+
},
|
|
240
|
+
{
|
|
241
|
+
name: "notifications",
|
|
242
|
+
label: "Notification Preferences",
|
|
243
|
+
type: "textarea",
|
|
244
|
+
placeholder: "Enter your notification preferences",
|
|
245
|
+
required: false,
|
|
246
|
+
},
|
|
247
|
+
],
|
|
248
|
+
},
|
|
249
|
+
],
|
|
250
|
+
submitText: "Complete Registration",
|
|
251
|
+
initialValues: {
|
|
252
|
+
language: "en",
|
|
253
|
+
category: "coprporation"
|
|
254
|
+
},
|
|
255
|
+
executeRecaptcha: () => {
|
|
256
|
+
return "mock-recaptcha-token";
|
|
257
|
+
},
|
|
258
|
+
onSubmit: (values) => {
|
|
259
|
+
console.log("Multi-step form values:", values);
|
|
260
|
+
},
|
|
261
|
+
},
|
|
262
|
+
};
|
|
263
|
+
|
|
264
|
+
export const WithInitialValues = {
|
|
265
|
+
name: "Form with Initial Values",
|
|
266
|
+
args: {
|
|
267
|
+
fields: [
|
|
268
|
+
{
|
|
269
|
+
name: "name",
|
|
270
|
+
label: "Name",
|
|
271
|
+
type: "input",
|
|
272
|
+
placeholder: "Enter name",
|
|
273
|
+
required: true,
|
|
274
|
+
},
|
|
275
|
+
{
|
|
276
|
+
name: "email",
|
|
277
|
+
label: "Email",
|
|
278
|
+
type: "email",
|
|
279
|
+
placeholder: "Enter email",
|
|
280
|
+
required: true,
|
|
281
|
+
},
|
|
282
|
+
{
|
|
283
|
+
name: "role",
|
|
284
|
+
label: "Role",
|
|
285
|
+
type: "select",
|
|
286
|
+
placeholder: "Select role",
|
|
287
|
+
required: true,
|
|
288
|
+
options: [
|
|
289
|
+
{ value: "admin", label: "Administrator" },
|
|
290
|
+
{ value: "user", label: "User" },
|
|
291
|
+
{ value: "guest", label: "Guest" },
|
|
292
|
+
],
|
|
293
|
+
},
|
|
294
|
+
],
|
|
295
|
+
initialValues: {
|
|
296
|
+
name: "John Doe",
|
|
297
|
+
email: "john.doe@example.com",
|
|
298
|
+
role: "user",
|
|
299
|
+
},
|
|
300
|
+
submitText: "Update Profile",
|
|
301
|
+
onSubmit: (values) => {
|
|
302
|
+
console.log("Updated values:", values);
|
|
303
|
+
},
|
|
304
|
+
},
|
|
305
|
+
};
|
|
306
|
+
|
|
307
|
+
export const CustomValidation = {
|
|
308
|
+
name: "Form with Custom Validation",
|
|
309
|
+
args: {
|
|
310
|
+
fields: [
|
|
311
|
+
{
|
|
312
|
+
name: "email",
|
|
313
|
+
label: "Email",
|
|
314
|
+
type: "email",
|
|
315
|
+
placeholder: "Enter email",
|
|
316
|
+
required: true,
|
|
317
|
+
rules: [
|
|
318
|
+
{
|
|
319
|
+
type: "email",
|
|
320
|
+
message: "Invalid email format",
|
|
321
|
+
},
|
|
322
|
+
{
|
|
323
|
+
pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
|
|
324
|
+
message: "Please enter a valid email address",
|
|
325
|
+
},
|
|
326
|
+
],
|
|
327
|
+
},
|
|
328
|
+
{
|
|
329
|
+
name: "phone",
|
|
330
|
+
label: "Phone Number",
|
|
331
|
+
type: "input",
|
|
332
|
+
placeholder: "Enter phone number",
|
|
333
|
+
required: true,
|
|
334
|
+
rules: [
|
|
335
|
+
{
|
|
336
|
+
pattern: /^\d{10}$/,
|
|
337
|
+
message: "Phone number must be 10 digits",
|
|
338
|
+
},
|
|
339
|
+
],
|
|
340
|
+
},
|
|
341
|
+
{
|
|
342
|
+
name: "website",
|
|
343
|
+
label: "Website",
|
|
344
|
+
type: "input",
|
|
345
|
+
placeholder: "Enter website URL",
|
|
346
|
+
required: false,
|
|
347
|
+
rules: [
|
|
348
|
+
{
|
|
349
|
+
type: "url",
|
|
350
|
+
message: "Please enter a valid URL",
|
|
351
|
+
},
|
|
352
|
+
],
|
|
353
|
+
},
|
|
354
|
+
],
|
|
355
|
+
submitText: "Submit",
|
|
356
|
+
onSubmit: (values) => {
|
|
357
|
+
console.log("Validated values:", values);
|
|
358
|
+
},
|
|
359
|
+
},
|
|
360
|
+
};
|