@axos-web-dev/shared-components 0.0.194 → 0.0.195

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.
@@ -0,0 +1,11 @@
1
+ import { FormProps } from '../main';
2
+
3
+ export type ContactCompanyTitleInputs = {
4
+ first_name: string;
5
+ last_name: string;
6
+ email: string;
7
+ phone: string;
8
+ company: string;
9
+ title: string;
10
+ };
11
+ export declare const ContactCompanyTitle: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,210 @@
1
+ "use client";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { zodResolver } from "@hookform/resolvers/zod";
4
+ import { Button } from "../Button/Button.js";
5
+ import "../Button/Button.css.js";
6
+ import "react";
7
+ import "react-use";
8
+ import "../Input/Checkbox.js";
9
+ import "../Input/CurrencyInput.js";
10
+ import "../Input/Dropdown.js";
11
+ import "../Input/Dropdown.css.js";
12
+ import { Input } from "../Input/Input.js";
13
+ import "../Input/Input.css.js";
14
+ import "../Input/InputAmount.js";
15
+ import { InputPhone } from "../Input/InputPhone.js";
16
+ import "../Input/InputTextArea.js";
17
+ import "../Input/DownPaymentInput.js";
18
+ import "../Input/RadioButton.js";
19
+ import "../icons/ArrowIcon/ArrowIcon.css.js";
20
+ import SvgAxosX from "../icons/AxosX/index.js";
21
+ import SvgComponent from "../icons/AxosX/Blue.js";
22
+ import "../icons/CheckIcon/CheckIcon.css.js";
23
+ /* empty css */
24
+ /* empty css */
25
+ /* empty css */
26
+ /* empty css */
27
+ import "../utils/allowedAxosDomains.js";
28
+ import { associatedEmail } from "../utils/EverestValidity.js";
29
+ import { getVariant } from "../utils/getVariant.js";
30
+ import clsx from "clsx";
31
+ import { useForm, FormProvider } from "react-hook-form";
32
+ import * as z from "zod";
33
+ import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
34
+ import { SalesforceSchema } from "./SalesforceFieldsForm.js";
35
+ const ContactCompanyTitle = ({
36
+ icon = false,
37
+ children,
38
+ onSubmit = (values) => {
39
+ console.log(values);
40
+ },
41
+ disclosure,
42
+ variant: fullVariant = "primary",
43
+ headline,
44
+ description,
45
+ callToAction,
46
+ validateEmail,
47
+ id
48
+ }) => {
49
+ const schema = z.object({
50
+ first_name: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "First Name is required." }),
51
+ last_name: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "Last Name is required." }),
52
+ email: z.string().email({ message: "Email is required." }).refine(async (val) => await validateEmail(val)),
53
+ phone: z.string().regex(/[\d-]{10}/).min(10, { message: "Phone is required." }).max(12, { message: "Phone is required." }).transform((val, ctx) => {
54
+ const removeDashes = val.replace(/-/gi, "");
55
+ if (removeDashes.length !== 10) {
56
+ ctx.addIssue({
57
+ code: z.ZodIssueCode.custom,
58
+ message: "Phone must have at least 10 and no more than 10 characters."
59
+ });
60
+ return z.NEVER;
61
+ }
62
+ return removeDashes;
63
+ }),
64
+ company: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "Company is required." }).max(255, { message: "Company can have at most 255 characters." }),
65
+ title: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "Title is required." }).max(128, { message: "Title can have at most 128 characters." })
66
+ });
67
+ const methods = useForm({
68
+ resolver: zodResolver(schema.merge(SalesforceSchema), {
69
+ async: true
70
+ }),
71
+ mode: "all",
72
+ defaultValues: {
73
+ email: ""
74
+ }
75
+ });
76
+ const {
77
+ handleSubmit,
78
+ register,
79
+ formState: { errors, isValid, isSubmitting }
80
+ } = methods;
81
+ const submitForm = async (data) => {
82
+ await onSubmit(data);
83
+ };
84
+ const variant = getVariant(fullVariant);
85
+ return /* @__PURE__ */ jsx("section", { id, className: clsx(formContainer({ variant })), children: /* @__PURE__ */ jsx("div", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
86
+ icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
87
+ /* @__PURE__ */ jsxs("div", { className: `${headerContainer} text_center`, children: [
88
+ /* @__PURE__ */ jsx("h2", { className: clsx("header_2", headerForm({ variant })), children: headline }),
89
+ description && /* @__PURE__ */ jsx(
90
+ "div",
91
+ {
92
+ className: clsx(
93
+ "text_center",
94
+ form,
95
+ descriptionField({ variant })
96
+ ),
97
+ children: description
98
+ }
99
+ )
100
+ ] }),
101
+ /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
102
+ /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
103
+ /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
104
+ Input,
105
+ {
106
+ id: "first_name",
107
+ ...register("first_name", { required: true }),
108
+ label: "First Name",
109
+ sizes: "medium",
110
+ placeholder: "First Name",
111
+ required: true,
112
+ error: !!errors.first_name,
113
+ helperText: errors.first_name?.message,
114
+ variant
115
+ }
116
+ ) }),
117
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
118
+ Input,
119
+ {
120
+ id: "last_name",
121
+ ...register("last_name", { required: true }),
122
+ label: "Last Name",
123
+ sizes: "medium",
124
+ placeholder: "Last Name",
125
+ required: true,
126
+ error: !!errors.last_name,
127
+ helperText: errors.last_name?.message,
128
+ variant
129
+ }
130
+ ) }),
131
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
132
+ Input,
133
+ {
134
+ id: "email",
135
+ ...register("email", {
136
+ required: true,
137
+ validate: {
138
+ isValid: associatedEmail
139
+ }
140
+ }),
141
+ label: "Email",
142
+ sizes: "medium",
143
+ placeholder: "Email",
144
+ required: true,
145
+ error: !!errors.email,
146
+ helperText: errors.email?.message,
147
+ variant
148
+ }
149
+ ) }),
150
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
151
+ InputPhone,
152
+ {
153
+ id: "phone",
154
+ ...register("phone", { required: true, maxLength: 12 }),
155
+ label: "Phone",
156
+ sizes: "medium",
157
+ placeholder: "Phone",
158
+ required: true,
159
+ error: !!errors.phone,
160
+ helperText: errors.phone?.message,
161
+ variant
162
+ }
163
+ ) }),
164
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
165
+ Input,
166
+ {
167
+ id: "company",
168
+ ...register("company", { required: true }),
169
+ label: "Company",
170
+ sizes: "medium",
171
+ placeholder: "Company",
172
+ required: true,
173
+ error: !!errors.company,
174
+ helperText: errors.company?.message,
175
+ variant
176
+ }
177
+ ) }),
178
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
179
+ Input,
180
+ {
181
+ id: "title",
182
+ ...register("title", { required: true }),
183
+ label: "Title",
184
+ sizes: "medium",
185
+ placeholder: "Title",
186
+ required: true,
187
+ error: !!errors.title,
188
+ helperText: errors.title?.message,
189
+ variant
190
+ }
191
+ ) })
192
+ ] }),
193
+ children,
194
+ /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
195
+ /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx(
196
+ Button,
197
+ {
198
+ color: getVariant(callToAction?.variant),
199
+ as: "button",
200
+ type: "submit",
201
+ disabled: !isValid || isSubmitting,
202
+ children: callToAction?.displayText
203
+ }
204
+ ) })
205
+ ] })
206
+ ] }) }) }, id);
207
+ };
208
+ export {
209
+ ContactCompanyTitle
210
+ };
@@ -3,6 +3,7 @@ export * from './ClearingForm';
3
3
  export * from './CommercialDeposits';
4
4
  export * from './CommercialLending';
5
5
  export * from './ContactCompany';
6
+ export * from './ContactCompanyTitle';
6
7
  export * from './ContactUs';
7
8
  export * from './ContactUsAAS';
8
9
  export * from './ContactUsBusiness';
@@ -4,6 +4,7 @@ import { ClearingForm } from "./ClearingForm.js";
4
4
  import { CommercialDeposits } from "./CommercialDeposits.js";
5
5
  import { CommercialLending } from "./CommercialLending.js";
6
6
  import { ContactCompany } from "./ContactCompany.js";
7
+ import { ContactCompanyTitle } from "./ContactCompanyTitle.js";
7
8
  import { ContactUs } from "./ContactUs.js";
8
9
  import { ContactUsAAS } from "./ContactUsAAS.js";
9
10
  import { ContactUsBusiness } from "./ContactUsBusiness.js";
@@ -35,6 +36,7 @@ export {
35
36
  CommercialDeposits,
36
37
  CommercialLending,
37
38
  ContactCompany,
39
+ ContactCompanyTitle,
38
40
  ContactUs,
39
41
  ContactUsAAS,
40
42
  ContactUsBusiness,
package/dist/main.js CHANGED
@@ -49,6 +49,7 @@ import { ClearingForm } from "./Forms/ClearingForm.js";
49
49
  import { CommercialDeposits } from "./Forms/CommercialDeposits.js";
50
50
  import { CommercialLending } from "./Forms/CommercialLending.js";
51
51
  import { ContactCompany } from "./Forms/ContactCompany.js";
52
+ import { ContactCompanyTitle } from "./Forms/ContactCompanyTitle.js";
52
53
  import { ContactUs } from "./Forms/ContactUs.js";
53
54
  import { ContactUsAAS } from "./Forms/ContactUsAAS.js";
54
55
  import { ContactUsBusiness } from "./Forms/ContactUsBusiness.js";
@@ -228,6 +229,7 @@ export {
228
229
  CommercialLending,
229
230
  ComparisonSet,
230
231
  ContactCompany,
232
+ ContactCompanyTitle,
231
233
  ContactUs,
232
234
  ContactUsAAS,
233
235
  ContactUsBusiness,
package/package.json CHANGED
@@ -1,130 +1,130 @@
1
- {
2
- "name": "@axos-web-dev/shared-components",
3
- "description": "Axos shared components library for web.",
4
- "version": "0.0.194",
5
- "type": "module",
6
- "module": "dist/main.js",
7
- "types": "dist/main.d.ts",
8
- "files": [
9
- "dist"
10
- ],
11
- "sideEffects": [
12
- "dist/assets/**/*.css"
13
- ],
14
- "scripts": {
15
- "dev": "vite",
16
- "build": "tsc --p ./tsconfig.build.json && vite build",
17
- "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
18
- "preview": "vite preview",
19
- "prepublishOnly": "npm run build",
20
- "check-types": "tsc --pretty --noEmit",
21
- "check-format": "prettier --check .",
22
- "check-lint": "eslint . --ext ts --ext tsx --ext js",
23
- "format": "prettier --write .",
24
- "test-all": "npm run check-format && npm run check-lint && npm run check-types && npm run build",
25
- "prepare": "husky",
26
- "storybook": "storybook dev -p 6006",
27
- "build-storybook": "storybook build",
28
- "npm:link": "npm run build && npm link"
29
- },
30
- "dependencies": {
31
- "@headlessui/react": "^2.2.0",
32
- "@hookform/resolvers": "^3.9.1",
33
- "@react-input/mask": "^1.2.15",
34
- "@react-input/number-format": "^1.1.3",
35
- "@storybook/icons": "^1.3.0",
36
- "@storybook/preview-api": "^8.4.7",
37
- "@types/iframe-resizer": "3.5.13",
38
- "@vanilla-extract/css": "^1.16.1",
39
- "@vanilla-extract/recipes": "^0.5.1",
40
- "antd": "^5.22.5",
41
- "clsx": "^2.1.1",
42
- "iframe-resizer": "^3.6.6",
43
- "lodash": "^4.17.21",
44
- "moment": "^2.30.1",
45
- "react-date-picker": "^11.0.0",
46
- "react-date-range": "^2.0.1",
47
- "react-hook-form": "^7.54.1",
48
- "react-markdown": "^9.0.1",
49
- "react-popper": "^2.3.0",
50
- "react-slick": "^0.30.2",
51
- "react-use": "^17.6.0",
52
- "react-wrap-balancer": "^1.1.1",
53
- "rsuite": "^5.75.0",
54
- "slick-carousel": "^1.8.1",
55
- "typed-css-modules": "^0.9.1",
56
- "vite-plugin-svgr": "^4.3.0",
57
- "zod": "^3.24.1",
58
- "zustand": "^4.5.5"
59
- },
60
- "peerDependencies": {
61
- "@vanilla-extract/css-utils": "^0.1.3",
62
- "@vanilla-extract/recipes": "^0.5.1",
63
- "@vanilla-extract/vite-plugin": "^4.0.3",
64
- "next": "^14.1.4",
65
- "react": "^18.2.0",
66
- "react-date-range": "^2.0.1",
67
- "react-dom": "^18.2.0",
68
- "react-popper": "^2.3.0",
69
- "react-slick": "^0.30.2",
70
- "slick-carousel": "^1.8.1"
71
- },
72
- "devDependencies": {
73
- "@chromatic-com/storybook": "^1.9.0",
74
- "@rollup/plugin-alias": "^5.1.1",
75
- "@storybook/addon-essentials": "^8.4.7",
76
- "@storybook/addon-interactions": "^8.4.7",
77
- "@storybook/addon-links": "^8.4.7",
78
- "@storybook/addon-mdx-gfm": "^8.4.7",
79
- "@storybook/addon-onboarding": "^8.4.7",
80
- "@storybook/addon-themes": "^8.4.7",
81
- "@storybook/blocks": "^8.4.7",
82
- "@storybook/react": "^8.4.7",
83
- "@storybook/react-vite": "^8.4.7",
84
- "@storybook/test": "^8.4.7",
85
- "@svgr/core": "^8.1.0",
86
- "@svgr/plugin-prettier": "^8.1.0",
87
- "@svgr/plugin-svgo": "^8.1.0",
88
- "@types/lodash": "^4.17.13",
89
- "@types/node": "^20.17.10",
90
- "@types/react": "^18.3.17",
91
- "@types/react-date-range": "^1.4.9",
92
- "@types/react-datepicker": "^6.2.0",
93
- "@types/react-dom": "^18.3.5",
94
- "@types/react-slick": "^0.23.13",
95
- "@typescript-eslint/eslint-plugin": "^7.18.0",
96
- "@typescript-eslint/parser": "^7.18.0",
97
- "@vanilla-extract/css-utils": "^0.1.4",
98
- "@vanilla-extract/recipes": "^0.5.5",
99
- "@vanilla-extract/vite-plugin": "^4.0.18",
100
- "@vitejs/plugin-react-swc": "^3.7.2",
101
- "esbuild-vanilla-image-loader": "^0.1.3",
102
- "eslint": "^8.57.1",
103
- "eslint-plugin-react-hooks": "^4.6.2",
104
- "eslint-plugin-react-refresh": "^0.4.16",
105
- "eslint-plugin-storybook": "^0.8.0",
106
- "glob": "^10.4.5",
107
- "husky": "^9.1.7",
108
- "next": "^14.1.4",
109
- "prettier": "3.2.5",
110
- "react": "^18.3.1",
111
- "react-dom": "^18.3.1",
112
- "rollup-plugin-preserve-directives": "^0.4.0",
113
- "rollup-plugin-svg-import": "^3.0.0",
114
- "rollup-plugin-svgo": "^2.0.0",
115
- "storybook": "^8.4.7",
116
- "typescript": "^5.7.2",
117
- "typescript-plugin-css-modules": "^5.1.0",
118
- "vite": "^5.4.11",
119
- "vite-plugin-dts": "^3.9.1",
120
- "vite-plugin-lib-inject-css": "^2.1.1",
121
- "vite-plugin-setting-css-module": "^1.1.4",
122
- "vite-tsconfig-paths": "^4.3.2"
123
- },
124
- "main": "index.js",
125
- "directories": {
126
- "lib": "lib"
127
- },
128
- "author": "axos-web-dev",
129
- "license": "ISC"
130
- }
1
+ {
2
+ "name": "@axos-web-dev/shared-components",
3
+ "description": "Axos shared components library for web.",
4
+ "version": "0.0.195",
5
+ "type": "module",
6
+ "module": "dist/main.js",
7
+ "types": "dist/main.d.ts",
8
+ "files": [
9
+ "dist"
10
+ ],
11
+ "sideEffects": [
12
+ "dist/assets/**/*.css"
13
+ ],
14
+ "scripts": {
15
+ "dev": "vite",
16
+ "build": "tsc --p ./tsconfig.build.json && vite build",
17
+ "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
18
+ "preview": "vite preview",
19
+ "prepublishOnly": "npm run build",
20
+ "check-types": "tsc --pretty --noEmit",
21
+ "check-format": "prettier --check .",
22
+ "check-lint": "eslint . --ext ts --ext tsx --ext js",
23
+ "format": "prettier --write .",
24
+ "test-all": "npm run check-format && npm run check-lint && npm run check-types && npm run build",
25
+ "prepare": "husky",
26
+ "storybook": "storybook dev -p 6006",
27
+ "build-storybook": "storybook build",
28
+ "npm:link": "npm run build && npm link"
29
+ },
30
+ "dependencies": {
31
+ "@headlessui/react": "^2.2.0",
32
+ "@hookform/resolvers": "^3.9.1",
33
+ "@react-input/mask": "^1.2.15",
34
+ "@react-input/number-format": "^1.1.3",
35
+ "@storybook/icons": "^1.3.0",
36
+ "@storybook/preview-api": "^8.4.7",
37
+ "@types/iframe-resizer": "3.5.13",
38
+ "@vanilla-extract/css": "^1.16.1",
39
+ "@vanilla-extract/recipes": "^0.5.1",
40
+ "antd": "^5.22.5",
41
+ "clsx": "^2.1.1",
42
+ "iframe-resizer": "^3.6.6",
43
+ "lodash": "^4.17.21",
44
+ "moment": "^2.30.1",
45
+ "react-date-picker": "^11.0.0",
46
+ "react-date-range": "^2.0.1",
47
+ "react-hook-form": "^7.54.1",
48
+ "react-markdown": "^9.0.1",
49
+ "react-popper": "^2.3.0",
50
+ "react-slick": "^0.30.2",
51
+ "react-use": "^17.6.0",
52
+ "react-wrap-balancer": "^1.1.1",
53
+ "rsuite": "^5.75.0",
54
+ "slick-carousel": "^1.8.1",
55
+ "typed-css-modules": "^0.9.1",
56
+ "vite-plugin-svgr": "^4.3.0",
57
+ "zod": "^3.24.1",
58
+ "zustand": "^4.5.5"
59
+ },
60
+ "peerDependencies": {
61
+ "@vanilla-extract/css-utils": "^0.1.3",
62
+ "@vanilla-extract/recipes": "^0.5.1",
63
+ "@vanilla-extract/vite-plugin": "^4.0.3",
64
+ "next": "^14.1.4",
65
+ "react": "^18.2.0",
66
+ "react-date-range": "^2.0.1",
67
+ "react-dom": "^18.2.0",
68
+ "react-popper": "^2.3.0",
69
+ "react-slick": "^0.30.2",
70
+ "slick-carousel": "^1.8.1"
71
+ },
72
+ "devDependencies": {
73
+ "@chromatic-com/storybook": "^1.9.0",
74
+ "@rollup/plugin-alias": "^5.1.1",
75
+ "@storybook/addon-essentials": "^8.4.7",
76
+ "@storybook/addon-interactions": "^8.4.7",
77
+ "@storybook/addon-links": "^8.4.7",
78
+ "@storybook/addon-mdx-gfm": "^8.4.7",
79
+ "@storybook/addon-onboarding": "^8.4.7",
80
+ "@storybook/addon-themes": "^8.4.7",
81
+ "@storybook/blocks": "^8.4.7",
82
+ "@storybook/react": "^8.4.7",
83
+ "@storybook/react-vite": "^8.4.7",
84
+ "@storybook/test": "^8.4.7",
85
+ "@svgr/core": "^8.1.0",
86
+ "@svgr/plugin-prettier": "^8.1.0",
87
+ "@svgr/plugin-svgo": "^8.1.0",
88
+ "@types/lodash": "^4.17.13",
89
+ "@types/node": "^20.17.10",
90
+ "@types/react": "^18.3.17",
91
+ "@types/react-date-range": "^1.4.9",
92
+ "@types/react-datepicker": "^6.2.0",
93
+ "@types/react-dom": "^18.3.5",
94
+ "@types/react-slick": "^0.23.13",
95
+ "@typescript-eslint/eslint-plugin": "^7.18.0",
96
+ "@typescript-eslint/parser": "^7.18.0",
97
+ "@vanilla-extract/css-utils": "^0.1.4",
98
+ "@vanilla-extract/recipes": "^0.5.5",
99
+ "@vanilla-extract/vite-plugin": "^4.0.18",
100
+ "@vitejs/plugin-react-swc": "^3.7.2",
101
+ "esbuild-vanilla-image-loader": "^0.1.3",
102
+ "eslint": "^8.57.1",
103
+ "eslint-plugin-react-hooks": "^4.6.2",
104
+ "eslint-plugin-react-refresh": "^0.4.16",
105
+ "eslint-plugin-storybook": "^0.8.0",
106
+ "glob": "^10.4.5",
107
+ "husky": "^9.1.7",
108
+ "next": "^14.1.4",
109
+ "prettier": "3.2.5",
110
+ "react": "^18.3.1",
111
+ "react-dom": "^18.3.1",
112
+ "rollup-plugin-preserve-directives": "^0.4.0",
113
+ "rollup-plugin-svg-import": "^3.0.0",
114
+ "rollup-plugin-svgo": "^2.0.0",
115
+ "storybook": "^8.4.7",
116
+ "typescript": "^5.7.2",
117
+ "typescript-plugin-css-modules": "^5.1.0",
118
+ "vite": "^5.4.11",
119
+ "vite-plugin-dts": "^3.9.1",
120
+ "vite-plugin-lib-inject-css": "^2.1.1",
121
+ "vite-plugin-setting-css-module": "^1.1.4",
122
+ "vite-tsconfig-paths": "^4.3.2"
123
+ },
124
+ "main": "index.js",
125
+ "directories": {
126
+ "lib": "lib"
127
+ },
128
+ "author": "axos-web-dev",
129
+ "license": "ISC"
130
+ }