@thunderid/react 0.0.5 → 0.2.0

package/dist/cjs/components/presentation/auth/SignUp/v1/SignUpOptionFactory.cjs

@@ -0,0 +1,164 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_FacebookButton = require('../../../../adapters/FacebookButton.cjs');
+const require_GitHubButton = require('../../../../adapters/GitHubButton.cjs');
+const require_GoogleButton = require('../../../../adapters/GoogleButton.cjs');
+const require_LinkedInButton = require('../../../../adapters/LinkedInButton.cjs');
+const require_MicrosoftButton = require('../../../../adapters/MicrosoftButton.cjs');
+const require_SignInWithEthereumButton = require('../../../../adapters/SignInWithEthereumButton.cjs');
+const require_ImageComponent = require('../../../../adapters/ImageComponent.cjs');
+const require_CheckboxInput = require('../../../../adapters/CheckboxInput.cjs');
+const require_DateInput = require('../../../../adapters/DateInput.cjs');
+const require_DividerComponent = require('../../../../adapters/DividerComponent.cjs');
+const require_EmailInput = require('../../../../adapters/EmailInput.cjs');
+const require_FormContainer = require('../../../../adapters/FormContainer.cjs');
+const require_NumberInput = require('../../../../adapters/NumberInput.cjs');
+const require_PasswordInput = require('../../../../adapters/PasswordInput.cjs');
+const require_SelectInput = require('../../../../adapters/SelectInput.cjs');
+const require_SubmitButton = require('../../../../adapters/SubmitButton.cjs');
+const require_TelephoneInput = require('../../../../adapters/TelephoneInput.cjs');
+const require_TextInput = require('../../../../adapters/TextInput.cjs');
+const require_Typography = require('../../../../adapters/Typography.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
+/**
+* Creates the appropriate sign-up component based on the component type.
+*/
+const createSignUpComponent = ({ component, onSubmit,...rest }) => {
+	switch (component.type) {
+		case __thunderid_browser.EmbeddedFlowComponentType.Typography: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+			component,
+			onSubmit,
+			...rest
+		});
+		case __thunderid_browser.EmbeddedFlowComponentType.Input: {
+			const inputVariant = component.variant?.toUpperCase() ?? "";
+			const inputType = component.config["type"]?.toLowerCase() ?? "";
+			if (inputVariant === "EMAIL" || inputType === "email") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmailInput.default, {
+				component,
+				onSubmit,
+				...rest
+			});
+			if (inputVariant === "PASSWORD" || inputType === "password") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PasswordInput.default, {
+				component,
+				onSubmit,
+				...rest
+			});
+			if (inputVariant === "TELEPHONE" || inputType === "tel") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TelephoneInput.default, {
+				component,
+				onSubmit,
+				...rest
+			});
+			if (inputVariant === "NUMBER" || inputType === "number") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NumberInput.default, {
+				component,
+				onSubmit,
+				...rest
+			});
+			if (inputVariant === "DATE" || inputType === "date") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DateInput.default, {
+				component,
+				onSubmit,
+				...rest
+			});
+			if (inputVariant === "CHECKBOX" || inputType === "checkbox") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CheckboxInput.default, {
+				component,
+				onSubmit,
+				...rest
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextInput.default, {
+				component,
+				onSubmit,
+				...rest
+			});
+		}
+		case __thunderid_browser.EmbeddedFlowComponentType.Button: {
+			const buttonVariant = component.variant?.toUpperCase();
+			const buttonText = component.config["text"] || component.config["label"] || "";
+			if (buttonVariant === "SOCIAL") {
+				if (buttonText.toLowerCase().includes("google")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GoogleButton.default, {
+					onClick: () => onSubmit?.(component, {}),
+					...rest,
+					children: buttonText
+				});
+				if (buttonText.toLowerCase().includes("github")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GitHubButton.default, {
+					onClick: () => onSubmit?.(component, {}),
+					...rest,
+					children: buttonText
+				});
+				if (buttonText.toLowerCase().includes("microsoft")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MicrosoftButton.default, {
+					onClick: () => onSubmit?.(component, {}),
+					...rest,
+					children: buttonText
+				});
+				if (buttonText.toLowerCase().includes("facebook")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FacebookButton.default, {
+					onClick: () => onSubmit?.(component, {}),
+					...rest,
+					children: buttonText
+				});
+				if (buttonText.toLowerCase().includes("linkedin")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LinkedInButton.default, {
+					onClick: () => onSubmit?.(component, {}),
+					...rest,
+					children: buttonText
+				});
+				if (buttonText.toLowerCase().includes("ethereum")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SignInWithEthereumButton.default, {
+					onClick: () => onSubmit?.(component, {}),
+					...rest,
+					children: buttonText
+				});
+			}
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SubmitButton.default, {
+				component,
+				onSubmit,
+				...rest
+			});
+		}
+		case __thunderid_browser.EmbeddedFlowComponentType.Form: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormContainer.default, {
+			component,
+			onSubmit,
+			...rest
+		});
+		case __thunderid_browser.EmbeddedFlowComponentType.Select: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SelectInput.default, {
+			component,
+			onSubmit,
+			...rest
+		});
+		case __thunderid_browser.EmbeddedFlowComponentType.Divider: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DividerComponent.default, {
+			component,
+			onSubmit,
+			...rest
+		});
+		case __thunderid_browser.EmbeddedFlowComponentType.Image: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ImageComponent.default, {
+			component,
+			onSubmit,
+			...rest
+		});
+		default: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {});
+	}
+};
+/**
+* Convenience function that creates the appropriate sign-up component from flow component data.
+*/
+const createSignUpOptionFromComponent = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => createSignUpComponent({
+	component,
+	formErrors,
+	formValues,
+	isFormValid,
+	isLoading,
+	onInputChange,
+	touchedFields,
+	...options
+});
+/**
+* Processes an array of components and renders them as React elements.
+*/
+const renderSignUpComponents = (components, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => components.map((component, index) => createSignUpOptionFromComponent(component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, {
+	...options,
+	key: component.id || index
+})).filter(Boolean);
+
+//#endregion
+exports.createSignUpComponent = createSignUpComponent;
+exports.renderSignUpComponents = renderSignUpComponents;
+//# sourceMappingURL=SignUpOptionFactory.cjs.map

package/dist/cjs/components/presentation/auth/SignUp/v1/SignUpOptionFactory.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignUpOptionFactory.cjs","names":["EmbeddedFlowComponentType","Typography","inputVariant: string","inputType: string","EmailInput","PasswordInput","TelephoneInput","NumberInput","DateInput","CheckboxInput","TextInput","buttonVariant: string | undefined","buttonText: string","GoogleButton","GitHubButton","MicrosoftButton","FacebookButton","LinkedInButton","SignInWithEthereumButton","ButtonComponent","FormContainer","SelectInput","DividerComponent","ImageComponent"],"sources":["../../../../../../../src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {EmbeddedFlowComponent, EmbeddedFlowComponentType} from '@thunderid/browser';\nimport {ReactElement} from 'react';\nimport {AdapterProps} from '../../../../../models/adapters';\nimport CheckboxInput from '../../../../adapters/CheckboxInput';\nimport DateInput from '../../../../adapters/DateInput';\nimport DividerComponent from '../../../../adapters/DividerComponent';\nimport EmailInput from '../../../../adapters/EmailInput';\nimport FacebookButton from '../../../../adapters/FacebookButton';\n// eslint-disable-next-line import/no-cycle\nimport FormContainer from '../../../../adapters/FormContainer';\nimport GitHubButton from '../../../../adapters/GitHubButton';\nimport GoogleButton from '../../../../adapters/GoogleButton';\nimport ImageComponent from '../../../../adapters/ImageComponent';\nimport LinkedInButton from '../../../../adapters/LinkedInButton';\nimport MicrosoftButton from '../../../../adapters/MicrosoftButton';\nimport NumberInput from '../../../../adapters/NumberInput';\nimport PasswordInput from '../../../../adapters/PasswordInput';\nimport SelectInput from '../../../../adapters/SelectInput';\nimport SignInWithEthereumButton from '../../../../adapters/SignInWithEthereumButton';\nimport ButtonComponent from '../../../../adapters/SubmitButton';\nimport TelephoneInput from '../../../../adapters/TelephoneInput';\nimport TextInput from '../../../../adapters/TextInput';\nimport Typography from '../../../../adapters/Typography';\n\n/**\n * Creates the appropriate sign-up component based on the component type.\n */\nexport const createSignUpComponent = ({component, onSubmit, ...rest}: AdapterProps): ReactElement => {\n  switch (component.type) {\n    case EmbeddedFlowComponentType.Typography:\n      return <Typography component={component} onSubmit={onSubmit} {...rest} />;\n\n    case EmbeddedFlowComponentType.Input: {\n      // Determine input type based on variant or config\n      const inputVariant: string = component.variant?.toUpperCase() ?? '';\n      const inputType: string = (component.config['type'] as string)?.toLowerCase() ?? '';\n\n      if (inputVariant === 'EMAIL' || inputType === 'email') {\n        return <EmailInput component={component} onSubmit={onSubmit} {...rest} />;\n      }\n\n      if (inputVariant === 'PASSWORD' || inputType === 'password') {\n        return <PasswordInput component={component} onSubmit={onSubmit} {...rest} />;\n      }\n\n      if (inputVariant === 'TELEPHONE' || inputType === 'tel') {\n        return <TelephoneInput component={component} onSubmit={onSubmit} {...rest} />;\n      }\n\n      if (inputVariant === 'NUMBER' || inputType === 'number') {\n        return <NumberInput component={component} onSubmit={onSubmit} {...rest} />;\n      }\n\n      if (inputVariant === 'DATE' || inputType === 'date') {\n        return <DateInput component={component} onSubmit={onSubmit} {...rest} />;\n      }\n\n      if (inputVariant === 'CHECKBOX' || inputType === 'checkbox') {\n        return <CheckboxInput component={component} onSubmit={onSubmit} {...rest} />;\n      }\n\n      return <TextInput component={component} onSubmit={onSubmit} {...rest} />;\n    }\n\n    case EmbeddedFlowComponentType.Button: {\n      const buttonVariant: string | undefined = component.variant?.toUpperCase();\n      const buttonText: string = (component.config['text'] as string) || (component.config['label'] as string) || '';\n\n      // TODO: The connection type should come as metadata.\n      if (buttonVariant === 'SOCIAL') {\n        if (buttonText.toLowerCase().includes('google')) {\n          return (\n            <GoogleButton onClick={(): any => onSubmit?.(component, {})} {...rest}>\n              {buttonText}\n            </GoogleButton>\n          );\n        }\n\n        if (buttonText.toLowerCase().includes('github')) {\n          return (\n            <GitHubButton onClick={(): any => onSubmit?.(component, {})} {...rest}>\n              {buttonText}\n            </GitHubButton>\n          );\n        }\n\n        if (buttonText.toLowerCase().includes('microsoft')) {\n          return (\n            <MicrosoftButton onClick={(): any => onSubmit?.(component, {})} {...rest}>\n              {buttonText}\n            </MicrosoftButton>\n          );\n        }\n\n        if (buttonText.toLowerCase().includes('facebook')) {\n          return (\n            <FacebookButton onClick={(): any => onSubmit?.(component, {})} {...rest}>\n              {buttonText}\n            </FacebookButton>\n          );\n        }\n\n        if (buttonText.toLowerCase().includes('linkedin')) {\n          return (\n            <LinkedInButton onClick={(): any => onSubmit?.(component, {})} {...rest}>\n              {buttonText}\n            </LinkedInButton>\n          );\n        }\n\n        if (buttonText.toLowerCase().includes('ethereum')) {\n          return (\n            <SignInWithEthereumButton onClick={(): any => onSubmit?.(component, {})} {...rest}>\n              {buttonText}\n            </SignInWithEthereumButton>\n          );\n        }\n      }\n\n      // Use the generic ButtonComponent for all other button variants\n      // It will handle PRIMARY, SECONDARY, TEXT, SOCIAL mappings internally\n      return <ButtonComponent component={component} onSubmit={onSubmit} {...rest} />;\n    }\n\n    case EmbeddedFlowComponentType.Form:\n      return <FormContainer component={component} onSubmit={onSubmit} {...rest} />;\n\n    case EmbeddedFlowComponentType.Select:\n      return <SelectInput component={component} onSubmit={onSubmit} {...rest} />;\n\n    case EmbeddedFlowComponentType.Divider:\n      return <DividerComponent component={component} onSubmit={onSubmit} {...rest} />;\n\n    case EmbeddedFlowComponentType.Image:\n      return <ImageComponent component={component} onSubmit={onSubmit} {...rest} />;\n\n    default:\n      return <div />;\n  }\n};\n\n/**\n * Convenience function that creates the appropriate sign-up component from flow component data.\n */\nexport const createSignUpOptionFromComponent = (\n  component: EmbeddedFlowComponent,\n  formValues: Record<string, string>,\n  touchedFields: Record<string, boolean>,\n  formErrors: Record<string, string>,\n  isLoading: boolean,\n  isFormValid: boolean,\n  onInputChange: (name: string, value: string) => void,\n  options?: {\n    buttonClassName?: string;\n    inputClassName?: string;\n    key?: string | number;\n    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;\n    size?: 'small' | 'medium' | 'large';\n    variant?: any;\n  },\n): ReactElement =>\n  createSignUpComponent({\n    component,\n    formErrors,\n    formValues,\n    isFormValid,\n    isLoading,\n    onInputChange,\n    touchedFields,\n    ...options,\n  });\n\n/**\n * Processes an array of components and renders them as React elements.\n */\nexport const renderSignUpComponents = (\n  components: EmbeddedFlowComponent[],\n  formValues: Record<string, string>,\n  touchedFields: Record<string, boolean>,\n  formErrors: Record<string, string>,\n  isLoading: boolean,\n  isFormValid: boolean,\n  onInputChange: (name: string, value: string) => void,\n  options?: {\n    buttonClassName?: string;\n    inputClassName?: string;\n    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;\n    size?: 'small' | 'medium' | 'large';\n    variant?: any;\n  },\n): ReactElement[] =>\n  components\n    .map((component: any, index: any) =>\n      createSignUpOptionFromComponent(\n        component,\n        formValues,\n        touchedFields,\n        formErrors,\n        isLoading,\n        isFormValid,\n        onInputChange,\n        {\n          ...options,\n          // Use component id as key, fallback to index\n          key: component.id || index,\n        },\n      ),\n    )\n    .filter(Boolean);\n"],"mappings":"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"}