@weareconceptstudio/account 0.0.2 → 0.0.3

package/dist/templates/AccountSettingsTemplate/AccountPassword/utils.d.ts

@@ -1,4 +1,4 @@
-export const defaultFormFields: {
+export declare const defaultFormFields: {
     fieldType: string;
     labelProps: {
         label: string;

package/dist/templates/AccountTemplate/index.d.ts

@@ -1,7 +1,7 @@
 export default AccountTemplate;
-declare function AccountTemplate({ isFullWidth, menu_options, children, onSignOut }: {
+declare function AccountTemplate({ isFullWidth, menuOptions, children, onSignOut }: {
     isFullWidth?: boolean;
-    menu_options?: any[];
+    menuOptions?: any[];
     children: any;
     onSignOut: any;
 }): React.JSX.Element;

package/dist/templates/AccountTemplate/index.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { Text, Link, useUi, Page } from '@weareconceptstudio/core';
 //* Style
 import AccountStyle from './style';
-const AccountTemplate = ({ isFullWidth = false, menu_options = [], children, onSignOut }) => {
+const AccountTemplate = ({ isFullWidth = false, menuOptions = [], children, onSignOut }) => {
     const { winWidth } = useUi();
     //! Line Store
     const lineStore = useMemo(() => {
@@ -10,6 +10,11 @@ const AccountTemplate = ({ isFullWidth = false, menu_options = [], children, onS
             return React.createElement("div", { className: `space-line` });
         }
     }, [winWidth]);
+    //! Menu
+    const menu = useMemo(() => {
+        return menuOptions.map((menuItem, index) => (React.createElement(Link, { key: index, href: menuItem.url, className: `menu-item ${menuItem.className ? menuItem.className : ''}`, ...menuItem.options },
+            React.createElement(Text, { tag: `span`, className: `account-p account-p1 account-font-bold sidebar-item`, text: menuItem.name }))));
+    }, [menuOptions]);
     return (React.createElement(Page, { className: 'account use-account' },
         React.createElement(AccountStyle, null,
             React.createElement("div", { className: 'account-wrap' },
@@ -18,12 +23,7 @@ const AccountTemplate = ({ isFullWidth = false, menu_options = [], children, onS
                         React.createElement("div", { className: `my-acc-wrap` },
                             React.createElement(Text, { className: 'account-p account-p1 account-font-bold account-primary-color1', text: 'myAccount' }),
                             React.createElement("div", { className: `account-line` })),
-                        React.createElement("div", { className: 'tabs-wrap' }, menu_options?.length > 0
-                            ? menu_options.map((item, index) => {
-                                return (React.createElement(Link, { key: index, href: item.url, className: 'link-item' },
-                                    React.createElement(Text, { tag: `span`, className: `account-p account-p1 account-font-bold sidebar-item`, text: item.name })));
-                            })
-                            : null),
+                        React.createElement("div", { className: 'tabs-wrap' }, menu),
                         React.createElement(Text, { text: 'signOut', onClick: onSignOut, className: 'account-p account-p1 account-error-color account-font-bold sign-out' }))),
                 lineStore,
                 React.createElement("div", { className: `right-bar` },

package/dist/templates/AccountTemplate/style.js

@@ -51,7 +51,7 @@ const AccountStyle = styled.section `
 				display: flex;
 				flex-direction: column;
 
-				.link-item {
+				.menu-item {
 					width: fit-content;
 
 					&:not(:last-child) {

package/dist/templates/ResetPasswordTemplate/index.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 interface ResetPasswordProps {
-    initialValues: object;
-    isSuccess: boolean;
-    onResetPassword: () => Promise<any>;
+    formFields: [];
+    onFormSubmit: (values: any) => Promise<any>;
 }
-declare const ResetPasswordTemplate: ({ initialValues, isSuccess, onResetPassword }: ResetPasswordProps) => React.JSX.Element;
+declare const ResetPasswordTemplate: ({ formFields, onFormSubmit }: ResetPasswordProps) => React.JSX.Element;
 export default ResetPasswordTemplate;

package/dist/templates/ResetPasswordTemplate/index.js

@@ -1,27 +1,25 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Text, Link, Page } from '@weareconceptstudio/core';
-import { Form, Input } from '@weareconceptstudio/form';
+import { FormBuilder } from '@weareconceptstudio/form';
 import { AccountButton } from '../../components';
 import ResetPasswordTemplateStyle from './style';
-const ResetPasswordTemplate = ({ initialValues, isSuccess = false, onResetPassword }) => {
+import { defaultFormFields } from './utils';
+// @ts-ignore
+const ResetPasswordTemplate = ({ formFields = defaultFormFields, onFormSubmit }) => {
+    const [isSuccess, setIsSuccess] = useState(false);
+    const onSubmit = async (values) => {
+        return await onFormSubmit(values).then(() => {
+            setIsSuccess(true);
+        });
+    };
     return (React.createElement(Page, { className: 'reset-password use-account' },
         React.createElement(ResetPasswordTemplateStyle, null,
             React.createElement("div", { className: `reset-password-wrapper` }, !isSuccess ? (React.createElement(React.Fragment, null,
                 React.createElement(Text, { tag: 'h1', text: 'resetPassword', className: 'account-h2 account-font-bold account-primary-color1 title' }),
-                React.createElement(Form, { onSubmit: onResetPassword, initialValues: initialValues },
-                    React.createElement(Form.Item, { name: 'password', label: 'newPassword', className: `new-password-input-wrap` },
-                        React.createElement(Input.Password, { placeholder: 'newPasswordPlaceholder' })),
+                React.createElement(FormBuilder, { fields: formFields, onSubmit: onSubmit },
                     React.createElement("div", { className: 'forgotLinkWrap' },
                         React.createElement(Link, { href: '/forgot-password' },
                             React.createElement(Text, { tag: 'span', className: 'account-p account-p3 account-font-medium account-primary-color1 underline forgotLink', text: 'forgotPasswordLink' }))),
-                    React.createElement(Form.Item, { name: 'token', 
-                        // @ts-ignore
-                        options: { noStyle: true } },
-                        React.createElement(Input, { type: 'hidden' })),
-                    React.createElement(Form.Item, { name: 'email', 
-                        // @ts-ignore
-                        options: { noStyle: true } },
-                        React.createElement(Input, { type: 'hidden' })),
                     React.createElement(AccountButton
                     // @ts-ignore
                     , { 

package/dist/templates/{SignUpTemplate/defaultFormFields.d.ts → ResetPasswordTemplate/utils.d.ts}

@@ -1,11 +1,11 @@
-declare const _default: {
+export declare const defaultFormFields: {
     fieldType: string;
     labelProps: {
         label: string;
         name: string;
+        className: string;
     };
     fieldProps: {
         placeholder: string;
     };
 }[];
-export default _default;

package/dist/templates/ResetPasswordTemplate/utils.js

@@ -0,0 +1,13 @@
+export const defaultFormFields = [
+    {
+        fieldType: 'password',
+        labelProps: {
+            label: 'newPassword',
+            name: 'password',
+            className: 'new-password-input-wrap',
+        },
+        fieldProps: {
+            placeholder: 'newPasswordPlaceholder',
+        },
+    },
+];

package/dist/templates/SignInTemplate/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface SignInProps {
+    formFields: [];
     onFormSubmit: () => Promise<any>;
 }
-declare const SignInTemplate: ({ onFormSubmit }: SignInProps) => React.JSX.Element;
+declare const SignInTemplate: ({ formFields, onFormSubmit }: SignInProps) => React.JSX.Element;
 export default SignInTemplate;

package/dist/templates/SignInTemplate/index.js

@@ -1,18 +1,16 @@
 import React from 'react';
 import { Text, Link, Page } from '@weareconceptstudio/core';
-import { Form, Input } from '@weareconceptstudio/form';
+import { FormBuilder } from '@weareconceptstudio/form';
 import { AccountButton } from '../../components';
 import SignInTemplateStyle from './style';
-const SignInTemplate = ({ onFormSubmit }) => {
+import { defaultFormFields } from './utils';
+// @ts-ignore
+const SignInTemplate = ({ formFields = defaultFormFields, onFormSubmit }) => {
     return (React.createElement(Page, { className: 'sign-in use-account' },
         React.createElement(SignInTemplateStyle, null,
             React.createElement("div", { className: 'sign-in-wrapper' },
                 React.createElement(Text, { tag: 'h1', className: 'account-h2 account-font-bold account-primary-color1 title', text: 'welcomeBack' }),
-                React.createElement(Form, { onSubmit: onFormSubmit },
-                    React.createElement(Form.Item, { name: 'email', label: 'email', rules: [{ type: 'email' }] },
-                        React.createElement(Input, { placeholder: 'emailPlaceholder' })),
-                    React.createElement(Form.Item, { name: 'password', label: 'password' },
-                        React.createElement(Input.Password, { placeholder: 'passwordPlaceholder' })),
+                React.createElement(FormBuilder, { fields: formFields, onSubmit: onFormSubmit },
                     React.createElement("div", { className: 'forgotLinkWrap' },
                         React.createElement(Link, { href: '/forgot-password' },
                             React.createElement(Text, { tag: 'span', className: 'account-p account-p3 account-font-medium account-primary-color1 underline forgotLink', text: 'forgotPasswordLink' }))),

package/dist/templates/SignInTemplate/style.js

@@ -160,7 +160,7 @@ const SignInTemplateStyle = styled.section `
 		--account_joinNowMTop: var(--sp1x);
 		--account_joinNowDistance: var(--sp0-5x);
 
-		.login-wrapper {
+		.sign-in-wrapper {
 			padding: 0 var(--sp2x);
 		}
 	}

package/dist/templates/SignInTemplate/utils.d.ts

@@ -0,0 +1,23 @@
+export declare const defaultFormFields: ({
+    fieldType: string;
+    labelProps: {
+        label: string;
+        name: string;
+        rules: {
+            type: string;
+        }[];
+    };
+    fieldProps: {
+        placeholder: string;
+    };
+} | {
+    fieldType: string;
+    labelProps: {
+        label: string;
+        name: string;
+        rules?: undefined;
+    };
+    fieldProps: {
+        placeholder: string;
+    };
+})[];

package/dist/templates/SignInTemplate/utils.js

@@ -0,0 +1,23 @@
+export const defaultFormFields = [
+    {
+        fieldType: 'input',
+        labelProps: {
+            label: 'email',
+            name: 'email',
+            rules: [{ type: 'email' }],
+        },
+        fieldProps: {
+            placeholder: 'emailPlaceholder',
+        },
+    },
+    {
+        fieldType: 'password',
+        labelProps: {
+            label: 'password',
+            name: 'password',
+        },
+        fieldProps: {
+            placeholder: 'passwordPlaceholder',
+        },
+    },
+];

package/dist/templates/SignUpTemplate/index.js

@@ -3,7 +3,7 @@ import { Text, useTranslation, Link, Page } from '@weareconceptstudio/core';
 import { FormBuilder } from '@weareconceptstudio/form';
 import { AccountButton, CustomCheckbox } from '../../components';
 import SignUpTemplateStyle from './style';
-import defaultFormFields from './defaultFormFields';
+import { defaultFormFields } from './utils';
 // @ts-ignore
 const SignUpTemplate = ({ formFields = defaultFormFields, onFormSubmit }) => {
     const { translate } = useTranslation();

package/dist/templates/SignUpTemplate/utils.d.ts

@@ -0,0 +1,23 @@
+export declare const defaultFormFields: ({
+    fieldType: string;
+    labelProps: {
+        label: string;
+        name: string;
+        rules?: undefined;
+    };
+    fieldProps: {
+        placeholder: string;
+    };
+} | {
+    fieldType: string;
+    labelProps: {
+        label: string;
+        name: string;
+        rules: {
+            type: string;
+        }[];
+    };
+    fieldProps: {
+        placeholder: string;
+    };
+})[];

package/dist/templates/SignUpTemplate/{defaultFormFields.js → utils.js}

@@ -1,4 +1,4 @@
-export default [
+export const defaultFormFields = [
     {
         fieldType: 'input',
         labelProps: {
@@ -24,6 +24,7 @@ export default [
         labelProps: {
             label: 'email',
             name: 'email',
+            rules: [{ type: 'email' }],
         },
         fieldProps: {
             placeholder: 'emailPlaceholder',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@weareconceptstudio/account",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"description": "Concept Studio Account",
 	"author": "Concept Studio",
 	"license": "ISC",